/* ═══════════════════════════════════════════════════════════════════
   NFL Optimizer — Solver-inspired dark-navy command surface.
   Scoped to .nopt so it never leaks into the themeable site chrome.
═══════════════════════════════════════════════════════════════════ */
.nopt {
  --n-bg:      #0b1524;
  --n-bg2:     #0f1c30;
  --n-panel:   #13233b;
  --n-panel2:  #172a46;
  --n-line:    #21344f;
  --n-line2:   #2b4160;
  --n-text:    #e8eefb;
  --n-text2:   #9fb0cc;
  --n-text3:   #64789b;
  --n-accent:  #3b82f6;
  --n-accent2: #60a5fa;
  --n-green:   #22c55e;
  --n-red:     #ef4444;
  --n-amber:   #f59e0b;
  --n-mono:    'JetBrains Mono', ui-monospace, monospace;
  --n-sans:    'Archivo', var(--font, sans-serif);

  font-family: var(--n-sans);
  background: var(--n-bg);
  color: var(--n-text);
  margin-top: calc(var(--ticker-h) + var(--topbar-h) + var(--header-h));
  min-height: calc(100vh - var(--ticker-h) - var(--topbar-h) - var(--header-h));
  padding-bottom: 40px;
}
.nopt *, .nopt *::before, .nopt *::after { box-sizing: border-box; }
.nopt-loading { padding: 20px; text-align: center; color: var(--n-text3); font-size: 13px; }

/* ── Control bar ─────────────────────────────────────────────────── */
.nopt-bar {
  display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
  padding: 12px 18px;
  background: linear-gradient(180deg, var(--n-bg2), var(--n-bg));
  border-bottom: 1px solid var(--n-line);
}
.nopt-title {
  font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  color: var(--n-text); white-space: nowrap; padding-bottom: 4px;
}
.nopt-title::before { content: attr(data-icon); margin-right: 7px; }
.nopt-selects { display: flex; gap: 10px; flex-wrap: wrap; }
.nopt-sel { display: flex; flex-direction: column; gap: 4px; }
.nopt-sel > span {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--n-text3);
}
.nopt-sel select {
  appearance: none; -webkit-appearance: none;
  background: var(--n-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239fb0cc' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--n-line2); border-radius: 7px;
  color: var(--n-text); font: 600 13px var(--n-sans);
  padding: 7px 30px 7px 11px; min-width: 130px; cursor: pointer;
}
.nopt-sel select:hover { border-color: var(--n-accent); }
.nopt-site { display: inline-flex; background: var(--n-panel); border: 1px solid var(--n-line2); border-radius: 7px; overflow: hidden; }
.nopt-site button {
  background: transparent; border: none; color: var(--n-text2);
  font: 600 13px var(--n-sans); padding: 7px 14px; cursor: pointer;
}
.nopt-site button.active { background: var(--n-accent); color: #fff; }
.nopt-tabs { display: flex; gap: 4px; margin-left: auto; align-self: stretch; align-items: flex-end; }
.nopt-tabs button {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--n-text2); font: 700 13px var(--n-sans); padding: 8px 12px; cursor: pointer;
}
.nopt-tabs button.active { color: var(--n-accent2); border-bottom-color: var(--n-accent); }
#noptSavedCount { color: var(--n-text3); font-weight: 600; }

/* ── Games ribbon ────────────────────────────────────────────────── */
.nopt-games-wrap { display: flex; align-items: stretch; background: var(--n-bg2); border-bottom: 1px solid var(--n-line); }
.nopt-games-toggle {
  flex-shrink: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 8px 14px; border-right: 1px solid var(--n-line); gap: 2px;
}
.nopt-games-toggle > span { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--n-text3); }
.nopt-games-toggle a { font-size: 12px; color: var(--n-accent2); cursor: pointer; }
.nopt-games-toggle a:hover { text-decoration: underline; }
.nopt-games { display: flex; gap: 8px; padding: 9px 12px; overflow-x: auto; flex: 1; }
.nopt-game {
  flex-shrink: 0; min-width: 128px; cursor: pointer; user-select: none;
  border: 1px solid var(--n-line2); border-radius: 8px; background: var(--n-panel);
  padding: 7px 10px; transition: opacity .12s, border-color .12s;
}
.nopt-game:hover { border-color: var(--n-accent); }
.nopt-game.off { opacity: .3; }
.nopt-game-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nopt-game-row + .nopt-game-row { margin-top: 3px; }
.nopt-game-team { display: flex; align-items: center; gap: 6px; font: 700 13px var(--n-mono); }
.nopt-game-team img { width: 18px; height: 18px; object-fit: contain; }
.nopt-game-tot { font: 600 12px var(--n-mono); color: var(--n-text2); }
.nopt-game-tot.hi { color: var(--n-green); }
.nopt-game-when { margin-top: 4px; font-size: 10px; color: var(--n-text3); text-align: center; }
.nopt-game-ou { font-size: 10px; color: var(--n-text3); }

/* ── Main layout ─────────────────────────────────────────────────── */
.nopt-main { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: 14px; padding: 14px 18px; align-items: start; }

/* ── Player pool ─────────────────────────────────────────────────── */
.nopt-pool { background: var(--n-panel); border: 1px solid var(--n-line); border-radius: 10px; overflow: hidden; }
.nopt-pool-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--n-line); }
/* Player Pool ⇄ All Lineups switch */
.nopt-view-tabs { display: flex; gap: 3px; margin-right: 6px; }
.nopt-view-tabs button {
  background: var(--n-bg2); border: 1px solid var(--n-line2); border-radius: 6px; cursor: pointer;
  color: var(--n-text2); font: 700 12px var(--n-sans); padding: 6px 11px; white-space: nowrap;
}
.nopt-view-tabs button:hover { border-color: var(--n-accent); }
.nopt-view-tabs button.on { background: var(--n-accent); border-color: var(--n-accent); color: #fff; }
#noptLuCount { opacity: .8; font-family: var(--n-mono); }

/* All Lineups view — summary + exposure + lineup grid, in place of the pool */
.nopt-all-lineups { display: flex; flex-direction: column; }
.nopt-al-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--n-line); background: var(--n-bg2);
}
.nopt-al-title { font: 800 15px var(--n-sans); color: var(--n-text); }
.nopt-al-stats { display: flex; gap: 16px; }
.nopt-al-stats div { font: 600 10.5px var(--n-sans); color: var(--n-text3); text-transform: uppercase; letter-spacing: .04em; }
.nopt-al-stats b { display: block; font: 700 14px var(--n-mono); color: var(--n-text); text-transform: none; }
.nopt-al-head .nopt-btn { margin-left: auto; }

/* Exposure runs the full height of the panel — no inner scrollbar. */
.nopt-al-body { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 0; align-items: stretch; }
.nopt-al-exp { border-right: 1px solid var(--n-line); padding: 10px 12px; }
.nopt-al-exp .nopt-exp-head { border-top: none; padding-top: 0; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.nopt-al-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 10px;
  padding: 12px; align-content: start;
}
.nopt-al-grid .nopt-lu { cursor: pointer; background: var(--n-bg2); transition: border-color .12s; }
.nopt-al-grid .nopt-lu:hover { border-color: var(--n-accent); }
.nopt-al-grid .nopt-lu.on { border-color: var(--n-accent); box-shadow: inset 0 0 0 1px var(--n-accent); }
.nopt-al-grid .nopt-lu-row { grid-template-columns: 44px minmax(0,1fr) auto auto auto; }

@media (max-width: 900px) {
  .nopt-al-body { grid-template-columns: 1fr; }
  .nopt-al-exp { border-right: none; border-bottom: 1px solid var(--n-line); position: static; max-height: 240px; }
}

/* ── Square corners throughout the optimizer (toggle switch stays round) ── */
.nopt .nopt-card, .nopt .nopt-pool, .nopt .nopt-btn, .nopt .nopt-btn-primary,
.nopt .nopt-sel select, .nopt .nopt-site, .nopt .nopt-site button, .nopt .nopt-search,
.nopt .nopt-game, .nopt .nopt-game-row, .nopt .nopt-pos-tabs button, .nopt .nopt-view-tabs button,
.nopt .nopt-exp-tabs button, .nopt .nopt-lu, .nopt .nopt-lu-chip, .nopt .nopt-chip,
.nopt .np-pos, .nopt .np-icon, .nopt .nopt-mini, .nopt .nopt-num input, .nopt .nopt-hide input,
.nopt .nopt-error, .nopt .nopt-results-stats, .nopt .nopt-optby select, .nopt .nopt-field input[type=number],
.nopt .nopt-exp-bar, .nopt .nopt-exp-bar i, .nopt .np-val, .nopt .nopt-saved-list .nopt-lu {
  border-radius: 0;
}

.nopt-pos-tabs { display: flex; gap: 3px; }
.nopt-pos-tabs button {
  background: var(--n-bg2); border: 1px solid var(--n-line2); border-radius: 6px;
  color: var(--n-text2); font: 700 12px var(--n-sans); padding: 6px 12px; cursor: pointer;
}
.nopt-pos-tabs button.active { background: var(--n-accent); border-color: var(--n-accent); color: #fff; }
.nopt-search {
  margin-left: auto; background: var(--n-bg2); border: 1px solid var(--n-line2);
  border-radius: 6px; color: var(--n-text); font: 500 13px var(--n-sans); padding: 7px 11px; width: 200px;
}
.nopt-search:focus { outline: none; border-color: var(--n-accent); }
.nopt-pool-scroll { max-height: calc(100vh - 340px); overflow-y: auto; }
.nopt-pool-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.nopt-pool-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--n-bg2);
  color: var(--n-text3); font: 700 10.5px var(--n-sans); text-transform: uppercase; letter-spacing: .05em;
  padding: 8px 8px; text-align: left; border-bottom: 1px solid var(--n-line2); white-space: nowrap;
}
.nopt-pool-table th.r { text-align: right; }
.nopt-pool-table th.c { text-align: center; }
.nopt-pool-table th.sortable { cursor: pointer; }
.nopt-pool-table th.sortable:hover { color: var(--n-accent2); }
.nopt-pool-table th.sort-active { color: var(--n-accent2); }
.nopt-pool-table tbody td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.03); white-space: nowrap; }
.nopt-pool-table tbody tr:hover { background: var(--n-panel2); }
.nopt-pool-table tbody tr.locked { background: rgba(34,197,94,.08); }
.nopt-pool-table tbody tr.excluded { opacity: .4; }
.np-pos { display: inline-block; min-width: 30px; text-align: center; font: 700 10px var(--n-mono);
  padding: 2px 5px; border-radius: 4px; background: var(--n-bg); color: var(--n-text2); border: 1px solid var(--n-line2); }
.np-pos.QB { color: #f87171; } .np-pos.RB { color: #4ade80; }
.np-pos.WR { color: #60a5fa; } .np-pos.TE { color: #fbbf24; } .np-pos.DST { color: #a78bfa; }
.np-player { display: flex; align-items: center; gap: 7px; }
.np-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.np-name { font-weight: 600; color: var(--n-text); }
.np-name.noproj { color: var(--n-text3); font-weight: 500; }
.np-match { font: 500 12px var(--n-mono); color: var(--n-text3); }
.np-num { text-align: right; font: 600 12.5px var(--n-mono); color: var(--n-text); }
.np-num.dim { color: var(--n-text3); }
.np-val { text-align: right; font: 700 12.5px var(--n-mono); border-radius: 4px; }
.np-lock, .np-excl { text-align: center; }
.np-icon {
  width: 22px; height: 22px; border: 1px solid var(--n-line2); border-radius: 5px; background: var(--n-bg2);
  color: var(--n-text3); cursor: pointer; font-size: 12px; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center; padding: 0;
}
.np-icon:hover { border-color: var(--n-accent); color: var(--n-text); }
.np-icon.on-lock { background: var(--n-green); border-color: var(--n-green); color: #fff; }
.np-icon.on-excl { background: var(--n-red); border-color: var(--n-red); color: #fff; }
.nopt-pool-foot { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-top: 1px solid var(--n-line); font-size: 12px; color: var(--n-text2); }
.nopt-hide input { width: 54px; background: var(--n-bg2); border: 1px solid var(--n-line2); border-radius: 5px; color: var(--n-text); padding: 4px 6px; font: 600 12px var(--n-mono); }
#noptPoolCount { color: var(--n-text3); font-weight: 600; }

/* ── Build rail ──────────────────────────────────────────────────── */
.nopt-build { display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(var(--ticker-h) + var(--topbar-h) + var(--header-h) + 12px); }
.nopt-card { background: var(--n-panel); border: 1px solid var(--n-line); border-radius: 10px; padding: 12px; }
.nopt-card-title { font: 700 12px var(--n-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--n-text3); margin-bottom: 10px; }

/* lineup card */
.nopt-lineup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.nopt-lineup-head > div:first-child { font: 800 14px var(--n-sans); }
.nopt-lineup-tot { display: flex; gap: 10px; font: 600 10.5px var(--n-sans); color: var(--n-text3); text-transform: uppercase; letter-spacing: .04em; }
.nopt-lineup-tot b { display: block; font: 700 13px var(--n-mono); color: var(--n-text); text-transform: none; }
.nopt-lineup-tot b.over { color: var(--n-red); }
.nopt-lineup { display: flex; flex-direction: column; gap: 3px; }
/* Square rows; team colour arrives as a left→right gradient (set inline). */
.nopt-slot { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px;
  padding: 6px 7px; border-radius: 0; background-color: var(--n-bg2); min-height: 38px;
  background-repeat: no-repeat; }
.nopt-slot.filled { background-color: var(--n-panel2); }

/* Locked players light up so it's obvious they're pinned into the lineup. */
.nopt-slot.locked { background-color: rgba(34,197,94,.16); box-shadow: inset 0 0 0 1px rgba(34,197,94,.5); }
.nopt-slot.locked .nopt-slot-name { color: var(--n-text); font-weight: 800; }
.nopt-slot.locked .nopt-slot-pos,
.nopt-slot.locked .nopt-slot-sal { color: var(--n-text); font-weight: 700; }
.nopt-slot.locked .nopt-slot-meta { color: var(--n-text2); }
.nopt-slot.locked .nopt-slot-lk { color: var(--n-green); filter: none; }
.nopt-slot-pos { font: 800 13px var(--n-mono); color: var(--n-text2); text-align: center; letter-spacing: -.02em; }
.nopt-slot-mid { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nopt-slot-mid img { width: 16px; height: 16px; object-fit: contain; }
.nopt-slot-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nopt-slot-name { font: 600 12.5px var(--n-sans); color: var(--n-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nopt-slot-name.empty { color: var(--n-text3); font-weight: 500; font-style: italic; }
.nopt-slot-meta { font: 500 10.5px var(--n-mono); color: var(--n-text3); }
.nopt-slot-right { display: flex; align-items: center; gap: 8px; }
.nopt-slot-sal { font: 700 12px var(--n-mono); color: var(--n-text2); }
.nopt-slot-lk { cursor: pointer; color: var(--n-text3); font-size: 12px; line-height: 1; }
.nopt-slot-lk:hover { color: var(--n-green); }
.nopt-slot-x { cursor: pointer; color: var(--n-text3); font-size: 13px; line-height: 1; }
.nopt-slot-x:hover { color: var(--n-red); }

.nopt-lineup-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.nopt-btn { background: var(--n-panel2); border: 1px solid var(--n-line2); border-radius: 7px; color: var(--n-text); font: 700 12.5px var(--n-sans); padding: 8px 13px; cursor: pointer; }
.nopt-btn:hover { border-color: var(--n-accent); }
.nopt-btn:disabled { opacity: .4; cursor: not-allowed; }
.nopt-btn:disabled:hover { border-color: var(--n-line2); }
.nopt-btn-primary { background: var(--n-accent); border-color: var(--n-accent); color: #fff; margin-left: auto; }
.nopt-btn-primary:hover { background: var(--n-accent2); }
.nopt-btn-primary:disabled { opacity: .6; cursor: default; }
.nopt-btn-ghost { background: transparent; }
.nopt-optby { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--n-text3); }
.nopt-optby select { background: var(--n-bg2); border: 1px solid var(--n-line2); border-radius: 6px; color: var(--n-text); font: 600 12px var(--n-sans); padding: 6px 8px; }
.nopt-num { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--n-text3); }
.nopt-num input { width: 48px; background: var(--n-bg2); border: 1px solid var(--n-line2); border-radius: 6px; color: var(--n-text); padding: 6px; font: 700 12px var(--n-mono); text-align: center; }
.nopt-error { margin-top: 10px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35); border-radius: 7px; padding: 8px 10px; font-size: 11.5px; color: #fca5a5; line-height: 1.5; }

/* toggles */
.nopt-toggles { display: flex; flex-direction: column; gap: 2px; }
.nopt-toggle { display: flex; align-items: center; gap: 10px; padding: 7px 4px; cursor: pointer; border-radius: 6px; }
.nopt-toggle:hover { background: var(--n-bg2); }
.nopt-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.nopt-tg { flex-shrink: 0; width: 34px; height: 19px; border-radius: 10px; background: var(--n-line2); position: relative; transition: background .15s; }
.nopt-tg::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .15s; }
.nopt-toggle input:checked + .nopt-tg { background: var(--n-accent); }
.nopt-toggle input:checked + .nopt-tg::after { transform: translateX(15px); }
.nopt-toggle > div { flex: 1; line-height: 1.25; }
.nopt-toggle b { font: 700 12.5px var(--n-sans); color: var(--n-text); display: block; }
.nopt-toggle small { font-size: 10.5px; color: var(--n-text3); }
.nopt-mini { background: var(--n-bg2); border: 1px solid var(--n-line2); border-radius: 6px; color: var(--n-text); font: 700 12px var(--n-mono); padding: 5px 7px; }
select.nopt-mini { padding-right: 7px; }

.nopt-advanced { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--n-line); display: flex; flex-direction: column; gap: 9px; }
.nopt-field { display: flex; flex-direction: column; gap: 5px; }
.nopt-field > span { display: flex; justify-content: space-between; font: 600 11px var(--n-sans); color: var(--n-text2); }
.nopt-field > span b { color: var(--n-accent2); font-family: var(--n-mono); }
.nopt-field input[type=range] { width: 100%; accent-color: var(--n-accent); }
.nopt-field input[type=number] { align-self: flex-start; }

/* team chips */
.nopt-team-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.nopt-chip { font: 700 11px var(--n-mono); padding: 4px 8px; border-radius: 5px; background: var(--n-bg2); border: 1px solid var(--n-line2); color: var(--n-text2); cursor: pointer; }
.nopt-chip:hover { border-color: var(--n-accent); }
.nopt-chip.excl { background: var(--n-red); border-color: var(--n-red); color: #fff; text-decoration: line-through; }
#noptExclTeamCount { color: var(--n-text3); font-weight: 600; }

/* results */
.nopt-results-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.nopt-results-head > div { font: 800 14px var(--n-sans); }
.nopt-results-stats { display: flex; gap: 14px; padding: 8px 10px; background: var(--n-bg2); border-radius: 7px; margin-bottom: 10px; font: 600 10.5px var(--n-sans); color: var(--n-text3); text-transform: uppercase; }
.nopt-results-stats b { display: block; font: 700 13px var(--n-mono); color: var(--n-text); text-transform: none; }
#noptResultsList { display: flex; flex-direction: column; gap: 10px; }

/* Clickable lineup chips — load a lineup into Current Build */
.nopt-lu-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.nopt-lu-chip {
  background: var(--n-bg2); border: 1px solid var(--n-line2); border-radius: 6px; cursor: pointer;
  color: var(--n-text2); font: 700 11.5px var(--n-mono); padding: 5px 9px; transition: all .12s;
}
.nopt-lu-chip:hover { border-color: var(--n-accent); color: var(--n-text); }
.nopt-lu-chip.on { background: var(--n-accent); border-color: var(--n-accent); color: #fff; }

/* Exposure distribution */
.nopt-exp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--n-line); padding-top: 10px; }
.nopt-exp-tabs { display: flex; gap: 3px; }
.nopt-exp-tabs button {
  background: transparent; border: 1px solid var(--n-line2); border-radius: 6px; cursor: pointer;
  color: var(--n-text2); font: 700 11px var(--n-sans); padding: 5px 9px;
}
.nopt-exp-tabs button.on { background: var(--n-accent); border-color: var(--n-accent); color: #fff; }
.nopt-exp-note { font-size: 10.5px; color: var(--n-text3); }
.nopt-exp-list { display: flex; flex-direction: column; }
.nopt-exp-row {
  display: grid; grid-template-columns: 22px minmax(0,1fr) 62px 34px 22px 22px;
  align-items: center; gap: 7px; padding: 7px 0;
  border-bottom: 1px solid rgba(128,128,128,.10);
}
.nopt-exp-row.out { opacity: .38; }
.nopt-exp-row.lockedrow { background: rgba(34,197,94,.12); box-shadow: inset 2px 0 0 var(--n-green); }
.nopt-exp-logo { width: 20px; height: 20px; object-fit: contain; }
.nopt-exp-nm { min-width: 0; line-height: 1.2; }
.nopt-exp-nm b { display: block; font: 700 12px var(--n-sans); color: var(--n-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nopt-exp-nm i { display: block; font-style: normal; font: 600 12px var(--n-sans); color: var(--n-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nopt-exp-nm i em { font-style: normal; font-family: var(--n-mono); font-size: 10px; color: var(--n-text3); }
.nopt-exp-bar { height: 7px; background: var(--n-bg2); overflow: hidden; }
.nopt-exp-bar i { display: block; height: 100%; background: var(--n-accent); }
.nopt-exp-pct { font: 700 11.5px var(--n-mono); color: var(--n-text2); text-align: right; }
.nopt-exp-row .np-icon { width: 20px; height: 20px; font-size: 10px; }

/* Games ribbon: a team row toggles that team in/out of the pool */
.nopt-game-row { cursor: pointer; border-radius: 4px; padding: 1px 2px; }
.nopt-game-row:hover { background: rgba(255,255,255,.06); }
.nopt-game-row.off { opacity: .32; text-decoration: line-through; }
.nopt-game-when { cursor: pointer; }
.nopt-game-when:hover { color: var(--n-accent2); }
.nopt-lu { border: 1px solid var(--n-line2); border-radius: 8px; overflow: hidden; }
.nopt-lu-hd { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--n-bg2); font: 700 12px var(--n-mono); }
.nopt-lu-num { color: var(--n-accent2); }
.nopt-lu-hd .sp { margin-left: auto; }
.nopt-lu-hd b { color: var(--n-text); }
.nopt-lu-body { padding: 0; }
.nopt-lu-row { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 8px; align-items: center;
  padding: 4px 6px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.03);
  border-radius: 0; background-repeat: no-repeat; }
.nopt-lu-row:last-child { border-bottom: none; }
.nopt-lu-row .p { font: 800 12px var(--n-mono); color: var(--n-text2); text-align: center; letter-spacing: -.02em; }
.nopt-lu-row .nm { color: var(--n-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nopt-lu-row .sl { font: 600 11px var(--n-mono); color: var(--n-text3); }
.nopt-lu-row .pr { font: 700 11px var(--n-mono); color: var(--n-text2); }

/* saved tab */
.nopt-saved { padding: 16px 18px; }
.nopt-saved-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 12px; }
.nopt-saved-empty { color: var(--n-text3); font-size: 13px; padding: 30px; text-align: center; }

/* value heatmap classes (blue scale like The Solver) */
.vh0 { background: transparent; color: var(--n-text3); }
.vh1 { background: rgba(59,130,246,.10); color: #bcd4ff; }
.vh2 { background: rgba(59,130,246,.22); color: #d5e4ff; }
.vh3 { background: rgba(59,130,246,.38); color: #eaf2ff; }
.vh4 { background: rgba(59,130,246,.58); color: #fff; }
.vh5 { background: rgba(37,99,235,.82); color: #fff; }

/* ── Light theme override (respects the site's data-theme toggle) ──── */
:root[data-theme="light"] .nopt {
  --n-bg:      #eaeff7;
  --n-bg2:     #e1e8f3;
  --n-panel:   #ffffff;
  --n-panel2:  #f2f6fc;
  --n-line:    #d5dded;
  --n-line2:   #c2cee1;
  --n-text:    #14243d;
  --n-text2:   #45577a;
  --n-text3:   #7d8fad;
}
:root[data-theme="light"] .nopt .nopt-tg { background: #c2cee1; }
:root[data-theme="light"] .nopt .np-pos { background: #eef2f8; }
:root[data-theme="light"] .nopt .nopt-pool-table tbody td { border-bottom-color: rgba(0,0,0,.05); }
:root[data-theme="light"] .nopt .nopt-lu-row,
:root[data-theme="light"] .nopt .nopt-pool-table tbody tr:hover { border-color: rgba(0,0,0,.05); }
:root[data-theme="light"] .nopt .vh1 { color: #1e4fa8; }
:root[data-theme="light"] .nopt .vh2 { color: #163f8c; }
:root[data-theme="light"] .nopt .vh3 { color: #0f2f6e; }
:root[data-theme="light"] .nopt .np-pos.QB { color: #dc2626; } :root[data-theme="light"] .nopt .np-pos.RB { color: #16a34a; }
:root[data-theme="light"] .nopt .np-pos.WR { color: #2563eb; } :root[data-theme="light"] .nopt .np-pos.TE { color: #d97706; } :root[data-theme="light"] .nopt .np-pos.DST { color: #7c3aed; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .nopt-main { grid-template-columns: 1fr; }
  .nopt-build { position: static; }
  .nopt-pool-scroll { max-height: none; }
}
/* ── Mobile bottom nav + collapsible header (hidden on desktop) ─── */
.nopt-mobnav { display: none; }
.nopt-collapse { display: none; }

@media (max-width: 680px) {
  .nopt { padding-bottom: 78px; }   /* clear the fixed bar */

  /* Collapse the slate selectors + games ribbon to reclaim screen */
  .nopt-collapse {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: var(--n-bg2); border: 1px solid var(--n-line2); border-radius: 0;
    color: var(--n-text2); cursor: pointer; padding: 8px 11px;
    font: 700 11px var(--n-sans); text-transform: uppercase; letter-spacing: .06em;
  }
  .nopt-collapse .ca { font-size: 9px; transition: transform .18s; }
  .nopt.collapsed .nopt-collapse .ca { transform: rotate(180deg); }
  .nopt.collapsed .nopt-selects,
  .nopt.collapsed .nopt-games-wrap { display: none; }

  .nopt-mobnav {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--n-panel); border-top: 1px solid var(--n-line2);
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px -8px rgba(0,0,0,.5);
  }
  .nopt-mobnav button {
    background: transparent; border: none; cursor: pointer; color: var(--n-text3);
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px;
    font: 700 10.5px var(--n-sans); text-transform: uppercase; letter-spacing: .04em;
  }
  .nopt-mobnav button .mi { font-size: 17px; line-height: 1; }
  .nopt-mobnav button.on { color: var(--n-accent2); }

  /* Centre CTA — raised square */
  .nopt-mobnav .nopt-mobnav-cta {
    background: var(--n-accent); color: #fff; border-radius: 0;
    width: 64px; height: 64px; justify-content: center; gap: 2px;
    margin-top: -22px; box-shadow: 0 6px 18px -6px rgba(59,130,246,.8);
    border: 2px solid var(--n-panel);
  }
  .nopt-mobnav .nopt-mobnav-cta .mi { font-size: 20px; }
  .nopt-mobnav .nopt-mobnav-cta:active { filter: brightness(1.15); }
  .nopt-mobnav .nopt-mobnav-cta:disabled { opacity: .6; }

  /* One pane at a time on mobile — driven by the bottom nav */
  .nopt[data-mob="pool"]  .nopt-build { display: none; }
  .nopt[data-mob="build"] .nopt-pool  { display: none; }
  .nopt[data-mob="build"] .nopt-build { display: flex; }
}

@media (max-width: 680px) {
  .nopt-bar { gap: 10px; padding: 10px 12px; }
  .nopt-title { font-size: 16px; width: 100%; }
  .nopt-selects { width: 100%; }
  .nopt-sel { flex: 1 1 130px; }
  .nopt-sel select, .nopt-site { width: 100%; }
  .nopt-tabs { width: 100%; margin-left: 0; border-top: 1px solid var(--n-line); padding-top: 6px; }
  .nopt-main { padding: 10px 12px; gap: 10px; }
  .nopt-build { grid-template-columns: 1fr; }
  .nopt-pool-head { flex-wrap: wrap; }
  .nopt-search { margin-left: 0; width: 100%; order: 3; }
  .nopt-pos-tabs { overflow-x: auto; }
  .nopt-pool-scroll { overflow-x: auto; }
  .nopt-pool-table { min-width: 620px; }
  .nopt-lineup-tot { gap: 8px; }
  .nopt-lineup-actions { gap: 6px; }
  .nopt-btn-primary { margin-left: 0; width: 100%; order: 10; }
  .nopt-games-toggle { padding: 8px 10px; }
}

/* ══ Phone layout ════════════════════════════════════════════════════
   Ten pool columns is two screens of sideways dragging on a phone. Drop
   the secondary ones so lock, player, salary, projection and exclude fit
   in the width available. */
@media (max-width: 700px) {
  .nopt th.sec, .nopt td.sec { display: none; }

  /* An earlier mobile rule pinned the pool table to 620px, which was right
     for ten columns and wrong for five. */
  .nopt-pool-table { min-width: 0; width: 100%; }

  /* MLB's games ribbon has no arrow buttons, so every game is reached by
     swiping. Narrower cards cut the distance roughly in half. */
  .nopt-game { min-width: 108px; }
  .nopt-game-team { font-size: 11px; }
  .nopt-game-when { font-size: 9.5px; }
  .nopt-games-toggle { padding: 6px 8px; font-size: 10px; }

  .nopt-pool-table th { padding: 7px 6px; font-size: 10px; }
  .nopt-pool-table td { padding: 6px 6px; font-size: 12px; }
  .nopt .np-name { font-size: 12.5px; }
  .nopt-main { padding-left: 8px; padding-right: 8px; }

  /* Build panel and pool stack instead of sitting side by side. */
  .nopt-main { display: block; }
  .nopt-pool, .nopt-build { width: auto; max-width: none; }
  .nopt-build { margin-top: 14px; }
}