/* Front Office v2 — styling mirrors auction_hub.css (.ah-*) and
   rookie_draft_hub.css (.rdh-*) tokens, renamed to .fo-* so the three
   modules can drift independently. Universal slide-over action panel
   replaces the legacy full-screen modal overlay (Keith decision, 2026-05-19). */
:root {
  --bg: #0b0f18;
  --panel: #141a26;
  --panel-alt: #1a2230;
  --border: #2a3446;
  --text: #e8edf5;
  --muted: #8a97ad;
  --accent: #5b8dff;
  --accent-soft: #2a3f6e;
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #f87171;
  --dryrun: #14b8a6;
}

/* Scoped to .fo-root so the HPM embed (FO injected into MFL's My Team page) does
   NOT restyle MFL's surviving chrome. Standalone front_office.html applies .fo-root
   to <body>; the embed loader applies it to the FO mount. The :root vars above stay
   global — only .fo-* rules consume them, so they don't bleed. */
.fo-root, .fo-root * { box-sizing: border-box; }
.fo-root {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; line-height: 1.5;
  min-height: 100vh;
}

/* ── Header ─────────────────────────────────────────────────────── */
header.fo-header {
  padding: 18px 24px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
header.fo-header h1 {
  margin: 0 0 4px; font-size: 22px;
  display: flex; align-items: baseline; gap: 10px;
}
header.fo-header .subtitle { color: var(--muted); font-size: 13px; }
header.fo-header .meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.fo-version-badge {
  background: var(--panel-alt); color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 8px; font-size: 10px; cursor: pointer;
  font-family: inherit;
}
.fo-version-badge:hover { color: var(--accent); border-color: var(--accent); }
.fo-dryrun-banner {
  margin-top: 10px;
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid var(--dryrun);
  color: var(--text);
  padding: 8px 12px; border-radius: 6px;
  font-size: 12px;
}
.fo-dryrun-banner strong { color: var(--dryrun); }
.fo-dryrun-banner code { background: var(--panel-alt); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
/* Cap-penalty authority unavailable — the SAME /api/cap-penalty/preview call
   that drives EARNED / Drop Pen failed, so those columns fell back to "—"
   instead of a silently wrong local estimate. See front_office.js
   loadCapPenaltyPreview / dropPenaltyEstimate. */
.fo-cap-warning-banner {
  margin-top: 10px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid var(--err, #ef4444);
  color: var(--text);
  padding: 8px 12px; border-radius: 6px;
  font-size: 12px;
}
.fo-cap-warning-banner strong { color: var(--err, #ef4444); }

/* ── Tabs ───────────────────────────────────────────────────────── */
nav.fo-tabs {
  display: flex; gap: 2px; padding: 0 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
nav.fo-tabs button {
  background: transparent; color: var(--muted); border: 0;
  padding: 12px 16px; cursor: pointer;
  font-size: 13px; font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 120ms, border-color 120ms;
  white-space: nowrap; font-family: inherit;
}
nav.fo-tabs button:hover { color: var(--text); }
nav.fo-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
nav.fo-tabs button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Sub-tabs under the Contracts parent — a secondary pill bar shown only when
   a Contracts subview (Auction/Extensions/Restructures/MYM/Tagging) is active. */
nav.fo-subtabs {
  display: flex; gap: 6px; padding: 8px 24px;
  background: var(--panel-alt, var(--panel));
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
nav.fo-subtabs[hidden] { display: none; }
nav.fo-subtabs button {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 4px 14px; cursor: pointer;
  font-size: 12px; font-weight: 600;
  transition: color 120ms, background 120ms, border-color 120ms;
  white-space: nowrap; font-family: inherit;
}
nav.fo-subtabs button:hover { color: var(--text); border-color: var(--muted); }
nav.fo-subtabs button.active { color: #fff; background: var(--accent); border-color: var(--accent); }

main.fo-main { padding: 20px 24px 80px; max-width: 1400px; margin: 0 auto; }
.fo-section { display: none; }
.fo-section.active { display: block; }

/* ── Cards ──────────────────────────────────────────────────────── */
.fo-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.fo-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.fo-card h2 { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.fo-card-head .small { color: var(--muted); font-size: 12px; }
.fo-placeholder {
  text-align: center; color: var(--muted);
  padding: 60px 20px; font-size: 14px;
  border: 1px dashed var(--border); border-radius: 8px;
  background: rgba(20, 26, 38, 0.4);
}
.fo-placeholder strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 8px; }
.fo-placeholder code { background: var(--panel-alt); padding: 1px 4px; border-radius: 3px; font-size: 12px; }

/* ── Toolbar (roster tab) ───────────────────────────────────────── */
.fo-toolbar { padding: 12px 16px; }
.fo-toolbar-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
}
.fo-toolbar-row + .fo-toolbar-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.fo-field {
  display: flex; flex-direction: column; gap: 4px; font-size: 11px;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px;
}
.fo-field select, .fo-field input {
  background: var(--panel-alt); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 10px; font-size: 13px; min-width: 140px;
  font-family: inherit;
}
.fo-field-search { flex: 1; min-width: 220px; }
.fo-field-search input { width: 100%; min-width: 0; }

.fo-pos-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.fo-pos-chip {
  background: var(--panel-alt); color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
  font-family: inherit;
}
.fo-pos-chip.active { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.fo-pos-chip:hover { color: var(--text); }

/* Subview chip group (Cap Plan + Tagging) */
.fo-subview-chips { display: flex; gap: 4px; }
.fo-subview-chip {
  background: var(--panel-alt); color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 14px; font-size: 12px; font-weight: 500; cursor: pointer;
  font-family: inherit;
}
.fo-subview-chip.active { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  background: #244a8f; color: #ffffff; border: 1px solid #4a75c0;
  padding: 6px 12px; border-radius: 4px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
.btn:hover { filter: brightness(1.15); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.secondary { background: var(--panel-alt); color: var(--text); border: 1px solid var(--border); }
.btn.warn { background: var(--warn); color: #0b0f18; }
.btn.danger { background: var(--err); color: white; }
.btn.small { padding: 4px 8px; font-size: 11px; }
/* Embed: MFL's league theme can recolor generic <button> text on its pages, so
   FO's primary action buttons (+1Y, +2Y, Open in Trade Hub, Submit) can lose
   their white text inside the MESSAGE14 embed. Force it back — #ups-front-office
   is ID specificity (1,1,0) and beats MFL's scoped rules. Secondary (dark panel)
   + warn (gold, dark ink) keep their own contrast, so they're excluded. */
#ups-front-office .btn:not(.secondary):not(.warn) { color: #ffffff !important; background: #244a8f !important; border-color: #4a75c0 !important; }
#ups-front-office .btn.warn { color: #0b0f18 !important; }

/* ── Tables ─────────────────────────────────────────────────────── */
/* Horizontal scroll container for the wide roster table. */
.fo-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fo-table-scroll .fo-table { min-width: 820px; }
/* Cap plan: the wide league table scrolls inside its card at 1024px instead of widening the page. */
#fo-cap-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fo-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fo-table th, .fo-table td {
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.fo-table th {
  color: var(--muted); font-weight: 500;
  background: var(--panel-alt);
  position: sticky; top: 0; cursor: pointer;
  user-select: none;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
}
.fo-table th:hover { color: var(--accent); }
.fo-table tbody tr { cursor: pointer; transition: background 80ms; }
.fo-table tbody tr:hover { background: var(--panel-alt); }
.fo-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fo-table .small { color: var(--muted); font-size: 11px; }
.fo-table-loading { text-align: center; color: var(--muted); padding: 24px; }
.fo-table-empty   { text-align: center; color: var(--muted); padding: 24px; font-style: italic; }
.fo-table-error   { text-align: center; color: var(--err); padding: 24px; }

/* Inline hint above the roster table — brighter than .small + has the
   accent color so it actually catches the eye. Keith 2026-05-19. */
.fo-row-hint {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--panel-alt);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* Custom tooltip (replaces browser title=" for readability) — anchors
   above the trigger, bright text, accent border. Use:
   <span class="fo-tt" data-tip="…">value</span> */
.fo-tt { position: relative; display: inline-block; cursor: help; }
.fo-tt::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 360px;
  white-space: normal;
  width: max-content;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms;
}
.fo-tt::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 12px;
  border: 6px solid transparent;
  border-top-color: var(--accent);
  opacity: 0;
  transition: opacity 100ms;
  z-index: 61;
}
.fo-tt:hover::after, .fo-tt:hover::before { opacity: 1; }

/* Position pills */
.fo-pos {
  display: inline-block; padding: 2px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3px; min-width: 32px; text-align: center;
}
.fo-pos.QB { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.fo-pos.RB { background: rgba(16, 185, 129, 0.15); color: #4ade80; }
.fo-pos.WR { background: rgba(91, 141, 255, 0.15); color: var(--accent); }
.fo-pos.TE { background: rgba(234, 179, 8, 0.15); color: #fbbf24; }
.fo-pos.PK, .fo-pos.K { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.fo-pos.PN, .fo-pos.P { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.fo-pos.DL, .fo-pos.LB, .fo-pos.DB, .fo-pos.S, .fo-pos.CB,
.fo-pos.DT, .fo-pos.DE { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

/* Contract-type chips (parallel to .ah-origin) */
.fo-ctype {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3px; white-space: nowrap;
}
/* Family bases — Rookie = green, Vet = blue, Tag = yellow. */
.fo-ctype.rk        { background: rgba(52, 211, 153, 0.16); color: #34d399; }
.fo-ctype.vet       { background: rgba(91, 141, 255, 0.16); color: #5b8dff; }
.fo-ctype.tag       { background: rgba(251, 191, 36, 0.18); color: var(--warn); }
.fo-ctype.expired   { background: rgba(248, 113, 113, 0.14); color: var(--err); border: 1px solid rgba(248, 113, 113, 0.35); }
.fo-ctype.other,
.fo-ctype.unknown   { background: var(--panel-alt); color: var(--muted); border: 1px dashed var(--border); }
/* PENDING = MFL has recorded a salary but no contract yet (a fresh waiver/FCFS
   award before the 1-yr WW stamp lands). Deliberately NOT the red EXPIRED chip:
   this is "not yet known", not "over". */
.fo-ctype.pending   { background: rgba(148, 163, 184, 0.14); color: var(--muted); border: 1px dashed var(--warn); }
/* Sub-hues (listed AFTER the bases so they override the family color). */
.fo-ctype.rk-draft  { background: rgba(74, 222, 128, 0.18);  color: #4ade80; }
.fo-ctype.rk-ww     { background: rgba(110, 231, 183, 0.16); color: #6ee7b7; }
.fo-ctype.rk-mym    { background: rgba(45, 212, 191, 0.16);  color: #2dd4bf; }
.fo-ctype.rk-fl,
.fo-ctype.rk-bl,
.fo-ctype.rk-ext    { background: rgba(16, 185, 129, 0.16);  color: #10b981; }
.fo-ctype.vet-ext   { background: rgba(129, 140, 248, 0.18); color: #818cf8; }
.fo-ctype.vet-fl    { background: rgba(192, 132, 252, 0.16); color: #c084fc; }
.fo-ctype.vet-bl    { background: rgba(167, 139, 250, 0.16); color: #a78bfa; }
.fo-ctype.vet-ww    { background: rgba(56, 189, 248, 0.16);  color: #38bdf8; }
.fo-ctype.vet-mym   { background: rgba(34, 211, 238, 0.16);  color: #22d3ee; }

/* ── Cap Plan tab ────────────────────────────────────────────────── */
.fo-cap-team-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.fo-cap-team-link:hover { text-decoration: underline; }
.fo-cap-summary-row:hover { background: var(--panel-alt); }
.fo-cap-over   { color: var(--err); font-weight: 600; }
.fo-cap-under  { color: var(--warn); }
.fo-cap-pen          { color: var(--err); }
.fo-cap-trade        { color: #c084fc; }
.fo-cap-trade-credit { color: var(--ok); }
.fo-cap-totals-row td {
  background: var(--panel-alt);
  border-top: 2px solid var(--accent);
  font-variant-numeric: tabular-nums;
}

.fo-cap-totals {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 12px;
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 14px;
}
.fo-cap-totals .lbl { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.fo-cap-totals .val { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }
.fo-cap-totals .ext-delta { display: block; color: var(--ok); font-size: 11px; font-style: italic; margin-top: 2px; }
/* Adjustment breakdown note — the big .val above IS the true total (salary +
   whatever lands that year); this just keeps the "why" visible instead of
   burying it (Keith: earlier "misleading" complaint was about invisible
   adjustments, not about this note existing alongside the real total). */
.fo-cap-totals-note {
  display: block; color: var(--accent); font-size: 10px; margin-top: 2px;
  border-bottom: 1px dotted var(--accent); width: fit-content; cursor: help;
}

/* ── Per-year roster headcount, incl. §C2 loaded/3-year contract limits ──
   Live in the Detail BODY, next to the money totals, and move with every
   preview. `.at` = at the limit, `.over` = past it, `.under` = below the floor. */
.fo-cap-years {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px; margin: 0 0 10px;
}
.fo-cap-year {
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.fo-cap-year .yr { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; }
.fo-cap-year .line {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.fo-cap-year .line strong { font-size: 16px; font-weight: 600; color: var(--text); }
.fo-cap-year .line .of { font-size: 10px; color: var(--muted); }
.fo-cap-year .line.at strong    { color: #d4a017; }
.fo-cap-year .line.over strong  { color: var(--err); }
.fo-cap-year .line.under strong { color: #d4a017; }
/* UNAVAILABLE (2026-09-29) = the loaded-contract classifier couldn't determine one or more
   of this team's contracts -- never blended into a trusted number. Distinct dashed/red
   treatment, matching .fo-cap-unavailable below and roster_workbench.css's .is-unavailable. */
.fo-cap-year .line.unavailable strong { color: var(--err); border-bottom: 1px dashed var(--err); }
.fo-cap-year-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.fo-cap-year-flags .flag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.fo-cap-year-flags .flag.over  { background: rgba(248, 113, 113, 0.16); color: var(--err);  border-color: rgba(248, 113, 113, 0.55); }
.fo-cap-year-flags .flag.at    { background: rgba(212, 160, 23, 0.16);  color: #d4a017;     border-color: rgba(212, 160, 23, 0.55); }
.fo-cap-year-flags .flag.under { background: rgba(212, 160, 23, 0.12); color: #d4a017; border-color: rgba(212, 160, 23, 0.45); }
.fo-cap-rules-empty,
.fo-cap-rules-foot { color: var(--muted); font-size: 11px; margin: 0 0 10px; }
.fo-cap-rules-unresolved {
  color: #d4a017; font-size: 11px; margin: 0 0 8px;
  border-left: 3px solid rgba(212, 160, 23, 0.6); padding: 4px 10px;
  background: rgba(212, 160, 23, 0.06); border-radius: 0 4px 4px 0;
}

/* ── Scenario bar — Save / Restore / Reset. localStorage only; this screen
   never writes to MFL, and the copy says so. */
.fo-cap-scn {
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel-alt); padding: 8px 12px; margin: 0 0 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.fo-cap-scn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fo-cap-scn-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.fo-cap-scn-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.fo-cap-scn-badge.live     { background: rgba(148, 163, 184, 0.14); color: var(--muted); border-color: var(--border); }
.fo-cap-scn-badge.working  { background: rgba(91, 141, 255, 0.16);  color: var(--accent); border-color: rgba(91, 141, 255, 0.55); }
.fo-cap-scn-badge.restored { background: rgba(192, 132, 252, 0.16); color: #c084fc; border-color: rgba(192, 132, 252, 0.60); }
.fo-cap-scn-sync { font-size: 11px; font-style: italic; }
.fo-cap-scn-sync.ok  { color: var(--ok); }
.fo-cap-scn-sync.off { color: #d4a017; }
.fo-cap-scn-msg { font-size: 11px; }
.fo-cap-scn-msg.ok   { color: var(--ok); }
.fo-cap-scn-msg.warn { color: #d4a017; }
.fo-cap-scn-drops { margin: 0; padding-left: 18px; font-size: 11px; color: #d4a017; }
.fo-cap-scn-drops li { margin: 1px 0; }
.fo-cap-scn-foot { color: var(--muted); font-size: 10px; }
@media (max-width: 640px) {
  .fo-cap-scn-actions { margin-left: 0; width: 100%; }
}

.fo-cap-row-active {
  background: rgba(91, 141, 255, 0.06);
  outline: 1px solid rgba(91, 141, 255, 0.30);
  outline-offset: -1px;
}
.fo-cap-row-drop {
  background: rgba(248, 113, 113, 0.10);
  outline: 1px solid rgba(248, 113, 113, 0.40);
  outline-offset: -1px;
}
.fo-cap-row-drop td { color: rgba(232, 237, 245, 0.65); }
.fo-cap-row-drop td:first-child { text-decoration: line-through; color: rgba(232, 237, 245, 0.55); }
.fo-cap-row-promote {
  background: rgba(74, 222, 128, 0.08);
  outline: 1px solid rgba(74, 222, 128, 0.35);
  outline-offset: -1px;
}
/* Restructure preview — violet, so it can't be confused with an extension
   (blue), a drop (red) or a promote (green). The -invalid variant means the
   draft is NOT being projected: the row is showing the real contract. */
.fo-cap-row-restructure {
  background: rgba(192, 132, 252, 0.09);
  outline: 1px solid rgba(192, 132, 252, 0.42);
  outline-offset: -1px;
}
.fo-cap-row-rs-invalid {
  background: rgba(212, 160, 23, 0.08);
  outline: 1px dashed rgba(212, 160, 23, 0.60);
  outline-offset: -1px;
}
/* Loaded MYAC draft — teal, so it reads as a different action from the
   violet restructure at a glance. Incoherent drafts share the amber
   .fo-cap-row-rs-invalid treatment (same meaning: grid is showing REAL data). */
.fo-cap-row-myacl {
  background: rgba(45, 212, 191, 0.09);
  outline: 1px solid rgba(45, 212, 191, 0.42);
  outline-offset: -1px;
}
.fo-cap-pen {
  color: var(--err);
  font-weight: 600;
}
/* "was $X" — the pre-restructure number on every money cell that moved. */
.fo-cap-was {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 500; font-style: italic;
  color: var(--muted); text-decoration: line-through;
}
.fo-cap-was.up   { color: #f0a24a; }
.fo-cap-was.down { color: var(--ok); }
.fo-cap-prev-btn { transition: filter 80ms; }
.fo-cap-prev-btn.warn { background: var(--err); color: white; }
.fo-cap-prev-btn.ok   { background: var(--ok);  color: #04140a; }

/* ── Inline editors (extra <tr> under the player's row) ──────────────
   Two of them share this layout: the restructure editor (.fo-cap-rs-*, violet)
   and the loaded-MYAC editor (.fo-cap-ml-*, teal). Structure is identical, so
   the geometry rules are grouped and only the accent colour differs. */
/* Specificity note: `.fo-table tbody tr` (0,1,2) and `.fo-table tbody tr:hover`
   (0,2,2) would otherwise beat a bare `.fo-cap-rs-editor-row` rule — the editor
   row must NOT read as a clickable player row, so qualify it the same way. */
.fo-table tbody tr.fo-cap-rs-editor-row,
.fo-table tbody tr.fo-cap-ml-editor-row { cursor: default; }
.fo-table tbody tr.fo-cap-rs-editor-row:hover,
.fo-table tbody tr.fo-cap-ml-editor-row:hover { background: transparent; }
.fo-table tbody tr.fo-cap-rs-editor-row > td,
.fo-table tbody tr.fo-cap-ml-editor-row > td { padding: 10px 14px; }
.fo-table tbody tr.fo-cap-rs-editor-row > td {
  background: rgba(192, 132, 252, 0.06);
  border-left: 3px solid rgba(192, 132, 252, 0.55);
}
.fo-table tbody tr.fo-cap-ml-editor-row > td {
  background: rgba(45, 212, 191, 0.06);
  border-left: 3px solid rgba(45, 212, 191, 0.55);
}
.fo-cap-rs-editor,
.fo-cap-ml-editor { display: flex; flex-direction: column; gap: 8px; }
.fo-cap-rs-head,
.fo-cap-ml-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.fo-cap-rs-head .small,
.fo-cap-ml-head .small { color: var(--muted); font-size: 11px; }
.fo-cap-rs-inputs,
.fo-cap-ml-inputs { display: flex; flex-wrap: wrap; gap: 10px; }
.fo-cap-rs-field,
.fo-cap-ml-field { display: flex; flex-direction: column; gap: 2px; }
.fo-cap-rs-field .lbl,
.fo-cap-ml-field .lbl {
  color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
}
.fo-cap-rs-field .was,
.fo-cap-ml-field .was { color: var(--muted); font-size: 10px; font-style: italic; }
.fo-cap-rs-input,
.fo-cap-ml-input {
  width: 110px; padding: 5px 8px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--panel-alt); color: var(--text);
  font-variant-numeric: tabular-nums; font-size: 12px; text-align: right;
}
.fo-cap-rs-input:focus,
.fo-cap-ml-input:focus { outline: none; border-color: var(--accent); }
.fo-cap-rs-input.changed { border-color: #c084fc; color: #c084fc; font-weight: 600; }
.fo-cap-ml-input.changed { border-color: #2dd4bf; color: #2dd4bf; font-weight: 600; }
.fo-cap-rs-sum,
.fo-cap-ml-sum {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted);
}
.fo-cap-rs-sum .bal, .fo-cap-ml-sum .bal { color: var(--ok); }
.fo-cap-rs-sum .off, .fo-cap-ml-sum .off { color: #d4a017; font-weight: 600; }
.fo-cap-rs-msg,
.fo-cap-ml-msg { font-size: 11px; }
.fo-cap-rs-msg.ok,    .fo-cap-ml-msg.ok    { color: var(--ok); }
.fo-cap-rs-msg.warn,  .fo-cap-ml-msg.warn  { color: #d4a017; }
.fo-cap-rs-msg.muted, .fo-cap-ml-msg.muted { color: var(--muted); }
.fo-cap-rs-actions,
.fo-cap-ml-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fo-cap-rs-noauth,
.fo-cap-ml-noauth { color: var(--muted); font-style: italic; }
/* FL / BL / FLAT badge on the loaded-MYAC draft. */
.fo-cap-ml-shape {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  padding: 2px 7px; border-radius: 999px; border: 1px solid transparent;
}
.fo-cap-ml-shape.fl   { background: rgba(240, 162, 74, 0.16); color: #f0a24a; border-color: rgba(240, 162, 74, 0.55); }
.fo-cap-ml-shape.bl   { background: rgba(45, 212, 191, 0.16); color: #2dd4bf; border-color: rgba(45, 212, 191, 0.55); }
.fo-cap-ml-shape.flat { background: rgba(148, 163, 184, 0.14); color: var(--muted); border-color: var(--border); }
.fo-cap-ml-capfull { color: #d4a017; font-weight: 600; }

/* UNAVAILABLE loaded-contract count (2026-09-29, Keith) -- the shared classifier couldn't
   determine one or more contracts. Deliberately reads as a warning, not a neutral/muted
   state: "a missing classifier should display an honest unavailable state, not a
   potentially different count." */
.fo-cap-unavailable { color: var(--err); font-style: italic; cursor: help; }

/* Status pills for preview-only states (don't exist on real worker data). */
.fo-status.drop-preview { background: rgba(248, 113, 113, 0.20); color: var(--err); border: 1px solid var(--err); }
.fo-status.rs-preview   { background: rgba(192, 132, 252, 0.18); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.65); }
.fo-status.ml-preview   { background: rgba(45, 212, 191, 0.18);  color: #2dd4bf; border: 1px solid rgba(45, 212, 191, 0.65); }

.ext-badge {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  background: rgba(74, 222, 128, 0.15); color: var(--ok);
  font-size: 11px; font-weight: 600;
}

/* ── Tagging tab ──────────────────────────────────────────────────── */
.fo-tag-side {
  display: inline-block; padding: 2px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fo-tag-side.offense  { background: rgba(91, 141, 255, 0.18); color: var(--accent); }
.fo-tag-side.defense  { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }

.fo-tag-tier {
  display: inline-block; padding: 2px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700;
  background: var(--panel-alt); color: var(--text);
}
.fo-tag-tier.t1 { background: rgba(248, 113, 113, 0.20); color: var(--err); }
.fo-tag-tier.t2 { background: rgba(251, 191, 36, 0.20); color: var(--warn); }
.fo-tag-tier.t3 { background: rgba(74, 222, 128, 0.20); color: var(--ok); }
.fo-tag-tier.t4 { background: rgba(91, 141, 255, 0.20); color: var(--accent); }
.fo-tag-tier.t5 { background: rgba(168, 85, 247, 0.20); color: #c084fc; }
.fo-tag-tier.t6 { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }
.fo-tag-row-tagged {
  background: rgba(251, 191, 36, 0.08);
  outline: 1px solid rgba(251, 191, 36, 0.35);
  outline-offset: -1px;
}

/* ── Activity & Audit tab ─────────────────────────────────────────── */
.fo-deadline-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 10px;
}
.fo-deadline-row {
  display: grid; grid-template-columns: 160px 1fr; gap: 12px;
  padding: 10px 12px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 6px;
  border-left: 3px solid var(--muted);
}
.fo-deadline-today  { border-left-color: var(--err); background: rgba(248, 113, 113, 0.10); }
.fo-deadline-soon   { border-left-color: var(--warn); }
.fo-deadline-near   { border-left-color: var(--accent); }
.fo-deadline-later  { border-left-color: var(--ok); }
.fo-deadline-past   { border-left-color: var(--border); opacity: 0.6; }
.fo-deadline-day    { display: block; font-size: 12px; font-weight: 500; }
.fo-deadline-days   { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }
.fo-deadline-today .fo-deadline-days { color: var(--err); font-weight: 700; }
.fo-deadline-soon  .fo-deadline-days { color: var(--warn); font-weight: 600; }
.fo-deadline-title  { font-size: 13px; font-weight: 500; }
.fo-deadline-meta   { color: var(--muted); margin-top: 2px; }

.fo-activity-type {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: 11px; font-weight: 600;
  background: var(--panel-alt); color: var(--text);
}
.fo-activity-type.ext    { background: rgba(91, 141, 255, 0.18); color: var(--accent); }
.fo-activity-type.tag    { background: rgba(251, 191, 36, 0.18); color: var(--warn); }
.fo-activity-type.rstr   { background: rgba(168, 85, 247, 0.18); color: #c084fc; }
.fo-activity-type.drop   { background: rgba(248, 113, 113, 0.18); color: var(--err); }
.fo-activity-type.trade  { background: rgba(74, 222, 128, 0.18); color: var(--ok); }
.fo-activity-type.rookie { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }
.fo-activity-type.fa     { background: rgba(20, 184, 166, 0.18); color: var(--dryrun); }

.fo-test-badge {
  display: inline-block; padding: 1px 5px; border-radius: 3px; margin-left: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  background: rgba(20, 184, 166, 0.20); color: var(--dryrun);
}

/* Commish-override chip in the slide-over header. */
.fo-commish-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(251, 191, 36, 0.18);
  color: var(--warn);
  border: 1px solid rgba(251, 191, 36, 0.45);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: help;
  vertical-align: middle;
}

.fo-tag-tier-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.fo-tag-tier-card {
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px;
}
.fo-tag-tier-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.fo-tag-tier-label { flex: 1; font-weight: 500; font-size: 13px; }
.fo-tag-tier-bid { color: var(--ok); font-weight: 600; font-variant-numeric: tabular-nums; }
.fo-tag-player-list {
  list-style: none; margin: 0; padding: 0;
  font-size: 12px;
}
.fo-tag-player-list li {
  display: flex; gap: 8px; padding: 2px 0;
  border-bottom: 1px dotted var(--border);
}
.fo-tag-player-list li:last-child { border-bottom: 0; }
.fo-tag-player-list .rk {
  color: var(--muted); font-variant-numeric: tabular-nums; min-width: 24px;
}

/* Roster status pills */
.fo-status {
  display: inline-block; padding: 2px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fo-status.active { background: rgba(74, 222, 128, 0.15); color: var(--ok); }
.fo-status.taxi   { background: rgba(91, 141, 255, 0.15); color: var(--accent); }
.fo-status.ir     { background: rgba(248, 113, 113, 0.15); color: var(--err); }

/* Projected tag-value badge — a Cap Planning row's link into the Tag Calc
   Breakdown for an expiring (tag-eligible) player. */
.fo-cap-tag-badge {
  display: inline-block; margin-left: 4px; padding: 2px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: rgba(212, 160, 23, 0.14); color: #d4a017;
  border: 1px solid rgba(212, 160, 23, 0.5); cursor: pointer;
}
.fo-cap-tag-badge:hover { background: rgba(212, 160, 23, 0.24); }

/* Action button cluster in row Actions column */
.fo-row-actions { display: flex; gap: 4px; }

/* ── Slide-over (right-side action panel) ───────────────────────── */
.fo-slideover {
  position: fixed; inset: 0; z-index: 100;
  display: flex; justify-content: flex-end;
}
.fo-slideover[hidden] { display: none; }
.fo-slideover-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  animation: fo-fade-in 160ms ease-out;
}
.fo-slideover-panel {
  position: relative;
  width: min(560px, 100%);
  height: 100vh;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column;
  animation: fo-slide-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fo-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.fo-slideover-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
  gap: 12px;
}
.fo-slideover-head h2 {
  margin: 0; font-size: 18px; color: var(--text);
  text-transform: none; letter-spacing: 0;
}
.fo-slideover-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.fo-slideover-close {
  background: transparent; border: 0; color: var(--muted);
  font-size: 24px; cursor: pointer; padding: 0 4px; line-height: 1;
  font-family: inherit;
}
.fo-slideover-close:hover { color: var(--text); }

.fo-slideover-tabs {
  display: flex; gap: 0; padding: 0 12px;
  background: var(--panel-alt);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.fo-slideover-tabs button {
  background: transparent; color: var(--muted); border: 0;
  padding: 10px 12px; cursor: pointer;
  font-size: 12px; font-weight: 500;
  border-bottom: 2px solid transparent;
  white-space: nowrap; font-family: inherit;
}
.fo-slideover-tabs button:hover { color: var(--text); }
.fo-slideover-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

.fo-slideover-body {
  flex: 1; overflow-y: auto;
  padding: 16px 20px;
  font-size: 13px;
}

/* Action menu rows inside slide-over Actions tab */
.fo-action-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border); gap: 12px;
}
.fo-action-row:last-child { border-bottom: 0; }
.fo-action-row-label { color: var(--text); font-weight: 500; }
.fo-action-row-help  { color: var(--muted); font-size: 11px; margin-top: 2px; }
.fo-action-row-ctrl  { display: flex; gap: 6px; flex-shrink: 0; }

/* Inline preview/confirmation forms inside slide-over */
.fo-form { display: flex; flex-direction: column; gap: 12px; }
.fo-form-row {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 8px; align-items: center; font-size: 12px;
}
.fo-form-row .lbl { color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; font-size: 11px; }
.fo-form-row .val { color: var(--text); font-variant-numeric: tabular-nums; }
.fo-form-row input[type="number"], .fo-form-row input[type="text"] {
  background: var(--panel-alt); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 8px; font-size: 13px;
  font-family: inherit;
}
.fo-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.fo-form-note {
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: 4px; padding: 8px 10px;
  font-size: 11px; color: var(--muted); line-height: 1.5;
}
.fo-form-note.warn { border-color: var(--warn); color: var(--warn); }
.fo-form-note.err  { border-color: var(--err);  color: var(--err); }
.fo-form-note.ok   { border-color: var(--ok);   color: var(--ok); }

/* ── Toast / flash ──────────────────────────────────────────────── */
.fo-toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 12px 16px; border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  font-size: 13px; color: var(--text);
  z-index: 200; max-width: 400px;
  animation: fo-slide-up 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fo-toast.ok   { border-left-color: var(--ok); }
.fo-toast.warn { border-left-color: var(--warn); }
.fo-toast.err  { border-left-color: var(--err); }
@keyframes fo-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Mobile responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .fo-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fo-table .col-lo { display: none; }
  .fo-slideover-panel { width: 100%; }
}
@media (max-width: 600px) {
  .fo-table .col-md { display: none; }
  .fo-table th, .fo-table td { padding: 6px 4px; }
  .fo-toolbar-row { gap: 6px; }
}

/* Roster: position-grouping header rows */
.fo-group-row td { background: rgba(91,141,255,0.11); font-weight: 700; padding: 9px 12px; border-top: 2px solid var(--accent, #5b8dff); border-bottom: 1px solid var(--border, #2a3446); box-shadow: inset 3px 0 0 var(--accent, #5b8dff); letter-spacing: .03em; }
.fo-group-row td .small { color: var(--muted, #8a93a0); font-weight: 400; margin-left: 6px; }
.fo-group-sal { font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-left: 8px; }
.fo-group-avg { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 10px; }
.fo-group-rank { font-size: 11px; color: var(--accent); font-weight: 600; margin-left: 4px; }

/* Slide-over Bio tab */
.fo-bio-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.fo-bio-avatar { width: 76px; height: 76px; border-radius: 12px; background: rgba(255,255,255,0.06) center/cover no-repeat; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; color: var(--muted, #8a93a0); flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.fo-bio-name { font-size: 18px; font-weight: 700; line-height: 1.2; }

/* Stats sub-tab — headline strip + season scoring table */
.fo-stat-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.fo-stat-card { background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.fo-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fo-stat-val { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.1; }
.fo-stat-sub { font-size: 11px; color: var(--muted); }
.fo-stat-career td { border-top: 2px solid var(--border); font-weight: 600; }

/* Game Log sub-tab — week tier badges + playoff annotation */
.fo-tier { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.fo-tier.elite { background: rgba(74,222,128,0.15); color: var(--ok); }
.fo-tier.plus { background: rgba(91,141,255,0.15); color: var(--accent); }
.fo-tier.neutral { background: rgba(138,151,173,0.12); color: var(--muted); }
.fo-tier.dud { background: rgba(248,113,113,0.15); color: var(--err); }
.fo-gl-ptag { color: var(--accent); font-weight: 700; font-size: 10px; }
.fo-gl-po td { background: rgba(91,141,255,0.06); }

/* Contract History — current-season row marker */
.fo-ch-current td { background: rgba(91,141,255,0.06); }
.fo-ch-now { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--accent-soft); color: var(--accent); vertical-align: middle; }

/* Transaction Log — event-kind badges */
.fo-txn { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.fo-txn.auction { background: rgba(251,191,36,0.15); color: var(--warn); }
.fo-txn.add { background: rgba(74,222,128,0.15); color: var(--ok); }
.fo-txn.drop { background: rgba(248,113,113,0.15); color: var(--err); }
.fo-txn.trade { background: rgba(91,141,255,0.15); color: var(--accent); }
.fo-txn.draft { background: rgba(20,184,166,0.15); color: var(--dryrun); }
.fo-txn.contract { background: rgba(138,151,173,0.12); color: var(--muted); }
.fo-txn.extension { background: rgba(167,139,250,0.16); color: #a78bfa; }
.fo-txn.tag { background: rgba(251,191,36,0.18); color: var(--warn); }
.fo-txn.dispersal { background: rgba(236,72,153,0.16); color: #ec4899; }
.fo-lowconf { color: var(--warn); font-weight: 700; cursor: help; }
.fo-src { color: var(--accent); cursor: help; font-size: 11px; }
.fo-conf { font-size: 9px; cursor: help; vertical-align: middle; margin-right: 2px; }
.fo-conf-high { color: var(--ok); }
.fo-conf-low { color: var(--warn); }

/* News sub-tab feed (mirrors the master modal's .upm-news-* feed). */
.fo-news-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.fo-news-item { padding: 10px 12px; background: var(--panel-alt); border-radius: 6px; border-left: 3px solid var(--border); }
.fo-news-item.fo-news-injury { border-left-color: var(--warn); }
.fo-news-item.fo-news-headline { border-left-color: var(--accent); }
.fo-news-headline { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; line-height: 1.4; }
.fo-news-meta { font-size: 11px; color: var(--muted); }
.fo-news-meta a { color: var(--accent); text-decoration: none; }
.fo-news-meta a:hover { text-decoration: underline; }
.fo-news-body { font-size: 12px; color: var(--text); opacity: 0.85; margin-top: 4px; line-height: 1.5; }

/* "review for accuracy" caveat on auto-derived contract/transaction data. */
.fo-review-note { margin: 4px 0 10px; padding: 6px 10px; font-size: 11px; color: var(--warn); background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.25); border-radius: 6px; }

/* Roster-row indicators: NFL game status (O/Q/D, from MFL) + news flag. */
/* Louder than the original 9px/no-border pill (Keith 2026-08-15: "make him
   stand out more with a red S or something"). A suspension is roster-level
   news; at 9px with a 0.18-alpha wash it read as decoration. Bigger type, a
   real border, and a brighter fill so it registers in a dense table. */
.fo-nfl-status { display: inline-block; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 4px; vertical-align: middle; line-height: 14px; letter-spacing: .03em; border: 1px solid transparent; }
.fo-nfl-status.fo-nfl-out { background: rgba(220,38,38,0.30); color: #fecaca; border-color: rgba(248,113,113,0.65); }
.fo-nfl-status.fo-nfl-doubtful { background: rgba(234,88,12,0.28); color: #fed7aa; border-color: rgba(251,146,60,0.55); }
.fo-nfl-status.fo-nfl-questionable { background: rgba(202,138,4,0.28); color: #fde68a; border-color: rgba(250,204,21,0.50); }
/* "we don't know" — deliberately colourless so it never reads as a designation.
   Player modal only (the roster row stays silent); see nflStatusBadgeDetailed. */
.fo-nfl-status.fo-nfl-unknown { background: rgba(148,163,184,0.14); color: var(--muted); font-weight: 700; }
.fo-news-flag { font-size: 13px; line-height: 1; vertical-align: middle; cursor: pointer; margin-left: 3px; }

/* Contract summary strip near the top of the roster (mirrors RWB's Cap Summary). */
.fo-contract-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.fo-contract-summary:empty { display: none; }
.fo-sum-card { flex: 1 1 110px; min-width: 100px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.fo-sum-val { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.15; font-variant-numeric: tabular-nums; }
.fo-sum-val.fo-sum-pos { color: var(--ok); }
.fo-sum-val.fo-sum-neg { color: var(--err); }
.fo-sum-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.fo-sum-sub { font-size: 10px; color: var(--muted); margin-top: 1px; line-height: 1.5; }
.fo-sum-of { font-size: 13px; font-weight: 600; color: var(--muted); }
.fo-ir-alert { color: var(--warn); font-weight: 600; text-decoration: none; }
.fo-ir-alert:hover { text-decoration: underline; }
.fo-adj-info { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0; margin-left: 2px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 9px; font-weight: 700; cursor: pointer; line-height: 1; }
.fo-adj-info:hover { color: var(--accent); border-color: var(--accent); }
/* Cap-adjustment popup */
.fo-adj-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.fo-adj-popup { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; width: min(420px, 92vw); max-height: 80vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.fo-adj-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 700; color: var(--text); }
.fo-adj-close { background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.fo-adj-close:hover { color: var(--text); }
.fo-adj-body { padding: 8px 14px; }
.fo-adj-team { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--accent); font-weight: 700; margin: 10px 0 4px; }
.fo-adj-team:first-child { margin-top: 2px; }
/* Cap-YEAR heading. Drop penalties from on/after the FA Auction start belong to
   the following season (canon §6 penalty timing) and are ledger-only until the
   rollover, so the popup is split by year and the two totals never mix. */
.fo-adj-year { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 4px; margin: 14px 0 2px; }
.fo-adj-year:first-child { margin-top: 2px; }
.fo-adj-row { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--text); padding: 3px 0; }
.fo-adj-row .num { font-variant-numeric: tabular-nums; color: var(--muted); }
.fo-adj-row.fo-adj-total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; font-weight: 700; }
.fo-adj-row.fo-adj-total .num { color: var(--text); }
.fo-adj-foot { padding: 8px 14px 12px; font-size: 10px; color: var(--muted); border-top: 1px solid var(--border); }
/* Contract-TYPE color families: Rookie / Vet (incl FAA, ERA, FL, BL, MYM) / Tag */
.fo-ctf-rookie { color: #34d399; }
.fo-ctf-vet { color: #5b8dff; }
.fo-ctf-tag { color: var(--warn); }

/* ── Embed: defeat MFL's native-page text sweep ───────────────────────
   On MFL pages the league theme (header_custom_v2.html) force-recolors every
   generic td/th/div/span/p/label/li to one flat token via a high-specificity
   !important sweep. `.fo-*` elements are exempted there (:not([class*="fo-"])),
   but FO's generic helper class `.small` (muted labels) is not — it'd flatten
   to the theme's light text and lose the muted hierarchy ("duller" look). The
   embed mount is #ups-front-office, whose ID specificity (1,1,0) beats the
   sweep (0,9,2). The standalone page has no sweep, so this is embed-only by
   construction (no #ups-front-office there). */
#ups-front-office .small { color: var(--muted) !important; }

/* Loaded-MYAC final year: DERIVED, not typed. It absorbs whatever is left of
   the TCV so the split always balances — styled as a computed readout rather
   than an input so it doesn't invite a click that goes nowhere. */
.fo-root .fo-cap-ml-field.derived .lbl::after {
  content: " (auto)";
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--muted);
}
.fo-root .fo-cap-ml-input.derived {
  background: var(--panel-alt);
  color: var(--muted);
  border-style: dashed;
  cursor: default;
}
.fo-root .fo-cap-ml-input.derived.changed { color: var(--text); font-weight: 600; }

/* Cap Planning is a modelling surface — it never writes to MFL. This replaces
   the old Commit buttons so the boundary is stated where the action used to be,
   rather than being something you have to know. */
.fo-root .fo-cap-planonly {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  background: var(--panel-alt);
  color: var(--muted);
  font-size: 11px;
}
.fo-root .fo-cap-planonly strong { color: var(--text); font-weight: 600; }


/* ── Injury chip + "sources disagree" box (#1338: shared resolver, #1311 vocabulary) ── */
.fo-inj {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px;
  font-size: 10px; font-weight: 700; line-height: 16px; letter-spacing: 0.3px; vertical-align: 1px;
  border: 1px solid transparent;
}
.fo-inj.upf-inj-q   { color: #fbbf24; background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.4); }
.fo-inj.upf-inj-d   { color: #fb923c; background: rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.45); }
.fo-inj.upf-inj-out { color: #f87171; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.45); }
.fo-inj.upf-inj-res { color: #fca5a5; background: rgba(248, 113, 113, 0.2); border-color: rgba(248, 113, 113, 0.55); }
.fo-inj.upf-inj-ho  { color: #c4b5fd; background: rgba(196, 181, 253, 0.12); border-color: rgba(196, 181, 253, 0.4); }
.upf-inj-warning {
  margin-top: 8px; padding: 6px 10px; border-radius: 6px; font-size: 12px; line-height: 1.45;
  background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.55); color: var(--text);
}
.upf-inj-warning strong { color: #f87171; display: block; margin-bottom: 2px; }
.fo-basis { margin: 6px 0 0; font-size: 11px; color: var(--muted); }
.fo-basis.warn { color: var(--warn); }

/* ── Shell (#1338): header tools, second chip row, About dialog ── */
.fo-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fo-header-tools { display: flex; align-items: center; gap: 10px; }
.fo-freshness { font-size: 11px; color: var(--muted); }
span.fo-version-badge { cursor: default; }
nav.fo-subtabs .fo-subtab-link {
  color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: none; padding: 4px 10px; margin-left: auto;
  border: 1px solid var(--accent-soft); border-radius: 14px; white-space: nowrap;
}
nav.fo-subtabs .fo-subtab-link:hover, nav.fo-subtabs .fo-subtab-link:focus-visible { border-color: var(--accent); }
nav.fo-subtabs-2 { padding-top: 4px; background: var(--bg); }
.fo-root button:focus-visible, .fo-root a:focus-visible, .fo-root select:focus-visible, .fo-root input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.fo-about[hidden] { display: none; }
.fo-about { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; }
.fo-about-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.fo-about-panel {
  position: relative; max-width: 720px; width: 100%; max-height: 84vh; overflow: auto; outline: none;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 0 20px 18px; color: var(--text);
}
.fo-about-head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--panel); padding: 14px 0 8px; }
.fo-about-head h2 { margin: 0; font-size: 17px; }
.fo-about-body h3 { font-size: 14px; margin: 12px 0 4px; }
.fo-about-body p, .fo-about-body li { font-size: 13px; color: var(--text); }
.fo-about-body ul { padding-left: 18px; margin: 4px 0; }
.fo-about-hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0 4px; }
.fo-banner { margin: 8px 0; padding: 7px 11px; border-radius: 6px; font-size: 12px; border: 1px solid var(--border); background: var(--panel-alt); }
.fo-banner.warn { border-color: rgba(251, 191, 36, 0.5); color: var(--warn); }
.fo-banner.info { color: var(--muted); }
.fo-plink { background: none; border: 0; padding: 0; color: var(--text); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.fo-plink:hover { color: var(--accent); text-decoration-color: var(--accent); }
.fo-go { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.fo-go:hover { text-decoration: underline; }

/* ── Overview ── */
.fo-ov-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.fo-ov-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.fo-ov-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.fo-ov-card h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); font-weight: 700; }
.fo-ov-stats { display: flex; gap: 18px; flex-wrap: wrap; }
.fo-ov-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fo-ov-val.fo-ov-small { font-size: 13px; font-weight: 600; padding-top: 5px; }
.fo-ov-val.pos { color: var(--ok); } .fo-ov-val.neg { color: var(--err); }
.fo-ov-of { font-size: 13px; color: var(--muted); font-weight: 500; }
.fo-ov-lbl { font-size: 11px; color: var(--muted); }
.fo-ov-foot { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }
.fo-ov-list { list-style: none; margin: 0; padding: 0; }
.fo-ov-item { display: flex; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; }
.fo-ov-item:first-child { border-top: 0; }
.fo-ov-text { flex: 1; }
.fo-ov-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; transform: translateY(-1px); background: var(--muted); }
.sev-bad .fo-ov-dot { background: var(--err); } .sev-warn .fo-ov-dot { background: var(--warn); } .sev-info .fo-ov-dot { background: var(--accent); }
.fo-ov-info .fo-ov-item { color: var(--muted); font-size: 12px; }
.fo-ov-empty { color: var(--muted); font-size: 13px; margin: 4px 0; }
.fo-ov-sub { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.fo-ov-via { color: var(--muted); font-size: 11px; }
.fo-ov-bar { display: grid; grid-template-columns: 30px 1fr 44px; align-items: center; gap: 8px; font-size: 12px; margin: 3px 0; }
.fo-ov-bar-lbl { color: var(--muted); font-weight: 600; }
.fo-ov-bar-track { position: relative; height: 10px; background: var(--panel-alt); border-radius: 3px; }
.fo-ov-bar-track::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--muted); opacity: 0.6; }
.fo-ov-bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.fo-ov-bar-fill.pos { background: #5b8dff; } .fo-ov-bar-fill.neg { background: #f59e0b; }
.fo-ov-bar-val { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .fo-ov-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .fo-ov-grid { grid-template-columns: 1fr; } }

/* ── Roster → Performance (#1338) ── */
.fo-perf-wrap[hidden], #fo-contract-table-wrap[hidden] { display: none; }
.fo-perf-table { min-width: 860px; }
.fo-perf-table th { white-space: nowrap; }
.fo-th-sort { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
.fo-th-sort:hover { color: var(--text); }
.fo-perf-player .fo-plink { font-weight: 600; text-decoration: none; }
.fo-perf-sub { font-size: 11px; }
.fo-muted { color: var(--muted); }
.fo-bye { color: var(--warn); font-weight: 700; font-size: 11px; letter-spacing: 0.4px; }
.fo-slot { display: inline-block; padding: 0 7px; border-radius: 10px; font-size: 11px; line-height: 18px; border: 1px solid var(--border); white-space: nowrap; }
.fo-slot-start { color: #bfdbfe; border-color: rgba(91, 141, 255, 0.5); background: rgba(91, 141, 255, 0.12); }
.fo-slot-bench { color: var(--muted); }
.fo-slot-off { color: var(--muted); border-style: dashed; }

/* ── Bye planner (#1338) ── */
.fo-inline { display: inline-flex; align-items: center; gap: 6px; flex-direction: row; font-size: 12px; color: var(--muted); }
.fo-inline select { background: var(--panel-alt); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; }
.fo-bye-grid { min-width: 720px; }
.fo-bye-grid th[scope="row"] { text-align: left; color: var(--muted); font-weight: 600; white-space: nowrap; }
.fo-bye-wk button { background: none; border: 0; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; padding: 2px 4px; border-radius: 4px; display: flex; flex-direction: column; align-items: center; width: 100%; }
.fo-bye-wk.sel button { color: var(--text); background: var(--accent-soft); }
.fo-bye-wk.short button { color: var(--err); }
.fo-bye-wk.heavy button { color: var(--warn); }
.fo-bye-cost { font-size: 10px; font-weight: 500; color: var(--muted); }
.fo-bye-cell { text-align: center; font-variant-numeric: tabular-nums; font-size: 12px; }
.fo-bye-cell.ok { color: var(--muted); }
.fo-bye-cell.sub { color: #fcd34d; background: rgba(251, 191, 36, 0.08); }
.fo-bye-cell.empty { color: #fecaca; background: rgba(239, 68, 68, 0.22); font-weight: 700; }
.fo-bye-cell.sel { outline: 1px solid var(--accent-soft); outline-offset: -1px; }
.fo-bye-out { list-style: none; padding: 0; margin: 6px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 16px; font-size: 13px; }
.fo-bye-h { margin: 10px 0 4px; font-size: 13px; }
.fo-bye-key { padding: 0 4px; border-radius: 3px; }
.fo-bye-key.empty { color: #fecaca; background: rgba(239, 68, 68, 0.22); }
.fo-bye-key.sub { color: #fcd34d; background: rgba(251, 191, 36, 0.12); }

/* ── Market (#1338) ── */
.fo-mk-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 4px; }
.fo-mk-search input { background: var(--panel-alt); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; min-width: 220px; }
.fo-mk-table { min-width: 980px; }
.fo-av { display: inline-block; padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; border: 1px solid var(--border); }
.fo-av-now { color: #bbf7d0; background: rgba(74, 222, 128, 0.14); border-color: rgba(74, 222, 128, 0.45); }
.fo-av-claim { color: #bfdbfe; background: rgba(91, 141, 255, 0.14); border-color: rgba(91, 141, 255, 0.5); }
.fo-av-later { color: #fde68a; background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.45); }
.fo-av-locked { color: #fecaca; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.45); }
.fo-av-unknown { color: var(--muted); border-style: dashed; }
.fo-av-rostered { color: var(--text); background: var(--panel-alt); font-weight: 500; }
.fo-av-bait { color: #f5d0fe; background: rgba(217, 70, 239, 0.14); border-color: rgba(217, 70, 239, 0.45); }

/* ── Trade finder (#1338) ── */
.fo-tf-matrix { min-width: 900px; }
.fo-tf-matrix th[scope="row"] { text-align: left; white-space: nowrap; font-weight: 600; }
.fo-tf-matrix tr.fo-tf-me th, .fo-tf-matrix tr.fo-tf-me td { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.fo-tf-matrix tr.fo-tf-sel th { color: var(--accent); }
.fo-tf-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fo-tf-kp { opacity: 0.55; }
.fo-tf-need { color: #fb923c; font-size: 10px; margin-left: 3px; }
.fo-tf-sur { color: #93c5fd; font-size: 10px; margin-left: 3px; font-weight: 700; }
.fo-tf-grid { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 12px; align-items: start; }
.fo-tf-partners { margin: 0; padding-left: 20px; font-size: 13px; }
.fo-tf-partners li { padding: 4px 0; }
.fo-tf-partners li.sel .fo-plink { color: var(--accent); font-weight: 700; }
.fo-tf-h { margin: 12px 0 6px; font-size: 13px; }
.fo-tf-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; font-size: 13px; }
.fo-tf-cols h4 { margin: 8px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.fo-tf-cols p { margin: 0 0 6px; }
.fo-tf-list { list-style: none; padding: 0; margin: 0 0 6px; }
.fo-tf-list li { padding: 3px 0; }
.fo-tf-note { color: var(--muted); font-style: italic; }
.fo-tf-fits { min-width: 820px; }
.fo-tf-flag { display: inline-block; padding: 0 6px; border-radius: 9px; font-size: 10px; line-height: 16px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.fo-tf-flag.bad { color: #fecaca; border-color: rgba(248, 113, 113, 0.5); }
.fo-tf-flag.warn { color: #fde68a; border-color: rgba(251, 191, 36, 0.45); }
@media (max-width: 1100px) { .fo-tf-grid { grid-template-columns: 1fr; } .fo-tf-cols { grid-template-columns: 1fr; } }

/* ── Draft picks + Activity (#1338) ── */
.fo-pk-table { min-width: 640px; }
.fo-pk-table th[scope="row"] { text-align: left; white-space: nowrap; font-weight: 600; }
.fo-pk-moved { color: #fde68a; font-weight: 600; }
.fo-pk-mine { color: #bfdbfe; background: rgba(91, 141, 255, 0.14); }
.fo-act-grid { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
@media (max-width: 1100px) { .fo-act-grid { grid-template-columns: 1fr; } }
.fo-pk-table td { white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }