/* ── NFL app shell ───────────────────────────────────────────────────
   Dark control surface: the slate context stays pinned at the top, the
   tools live in a grouped left rail, and the tool itself gets the rest.
   Deliberately dark and self-contained — a DFS console reads as an app,
   not as a page on a marketing site. */
.nap {
  /* Alias the site's own theme tokens rather than hardcoding a palette, so the
     console follows the light / dim / dark toggle like every other page. The
     site's bare :root is the dark set; html[data-theme="light"|"dim"] override
     it, and everything here rides along automatically. */
  --n-bg:      var(--bg-base);
  --n-panel:   var(--bg-card);
  --n-panel2:  var(--bg-card-h);
  --n-line:    var(--border-card);
  --n-line2:   var(--border);
  --n-text:    var(--text-1);
  --n-text2:   var(--text-2);
  --n-text3:   var(--text-3);
  --n-accent:  var(--brand);
  --n-accent-fg: #ffffff;

  /* Semantic colours stay fixed — good/bad has to mean the same thing in
     every theme — but the light theme needs deeper shades to hold contrast
     against a white card. */
  --n-good:    #16a34a;
  --n-warn:    #b45309;
  --n-bad:     #dc2626;

  --n-sans:    'Archivo', var(--font, system-ui, sans-serif);
  --n-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  /* One column width for every band. Sized for a 15" laptop (~1440 logical)
     with real margin either side, rather than sprawling edge to edge. */
  --n-w:       1600px;
  /* Bottom bars stack from here. The staging banner raises --mobnav-base;
     the optimizer's own bar sits one bar-height above the tool bar. */
  --mobnav-base: 0px;
  --mobnav-h:    58px;
  --n-pad:     clamp(14px, 3vw, 34px);

  background: var(--n-bg);
  color: var(--n-text);
  font-family: var(--n-sans);
  margin-top: calc(var(--ticker-h, 34px) + var(--topbar-h, 36px) + var(--header-h, 64px));
  min-height: 70vh;
}
/* On the dark and dim sets the same semantics need to lift off a dark card. */
:root:not([data-theme="light"]) .nap { --n-good: #35d07f; --n-warn: #ffb020; --n-bad: #ff5f56; }

.nap ::selection { background: rgba(77,159,255,.3); }

/* ── App bar ─────────────────────────────────────────────────────── */
.nap-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 9px; padding-bottom: 9px;
  background: var(--n-panel);
  border-bottom: 1px solid var(--n-line);
  position: sticky; top: calc(var(--ticker-h, 34px) + var(--topbar-h, 36px) + var(--header-h, 64px));
  z-index: 46;
}
/* Bands span the viewport so their background and bottom border reach the
   edges, but their contents line up on the same centred column. Padding does
   that without an extra wrapper element per band. */
.nap-bar, .nap-strip {
  padding-left:  max(var(--n-pad), calc((100% - var(--n-w)) / 2 + var(--n-pad)));
  padding-right: max(var(--n-pad), calc((100% - var(--n-w)) / 2 + var(--n-pad)));
}
.nap-bar-title { display: flex; align-items: center; gap: 9px; font: 700 15px var(--n-sans); }
.nap-league { width: 26px; height: 26px; object-fit: contain; }
.nap-bar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }

.nap-search {
  background: var(--n-panel2); border: 1px solid var(--n-line2); border-radius: 6px;
  color: var(--n-text); font: 500 13px var(--n-sans); padding: 6px 11px; min-width: 210px;
}
.nap-search:focus { outline: none; border-color: var(--n-accent); }
.nap-search-count { font: 500 12px var(--n-mono); color: var(--n-text2); }

.nap-week { display: flex; align-items: center; background: var(--n-panel2);
  border: 1px solid var(--n-line2); border-radius: 6px; overflow: hidden; }
.nap-week button {
  background: none; border: 0; color: var(--n-text2); cursor: pointer;
  font: 700 17px var(--n-sans); padding: 3px 10px; line-height: 1;
}
.nap-week button:hover { color: var(--n-text); background: var(--n-line); }
.nap-week select, .nap-slate {
  background: var(--n-panel2); border: 1px solid var(--n-line2); border-radius: 6px;
  color: var(--n-text); font: 600 13px var(--n-sans); padding: 6px 9px;
}
.nap-week select { border: 0; border-radius: 0; min-width: 128px; text-align: center; }
.nap-slate { min-width: 190px; }
.nap-week select:focus, .nap-slate:focus { outline: none; border-color: var(--n-accent); }

.nap-site { display: flex; background: var(--n-panel2); border: 1px solid var(--n-line2);
  border-radius: 6px; overflow: hidden; }
.nap-site button {
  background: none; border: 0; color: var(--n-text2); cursor: pointer;
  font: 700 12px var(--n-sans); letter-spacing: .05em; padding: 6px 13px;
}
.nap-site button.active { background: var(--n-accent); color: var(--n-accent-fg); }
.nap-meta { font: 500 12px var(--n-mono); color: var(--n-text2); }

/* ── Games strip ─────────────────────────────────────────────────── */
/* The strip itself never scrolls — a native scrollbar here drew a full-width
   bar across the row. Only .nap-games-vp scrolls, and its bar is hidden in
   favour of the arrow buttons. */
.nap-strip {
  display: flex; align-items: stretch; gap: 8px;
  padding-top: 8px; padding-bottom: 8px;
  background: var(--n-bg); border-bottom: 1px solid var(--n-line);
  overflow: hidden;
}
.nap-games-vp {
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth; overscroll-behavior-x: contain;
}
.nap-games-vp::-webkit-scrollbar { display: none; }

.nap-scroll {
  flex: 0 0 auto; width: 26px; align-self: stretch;
  background: var(--n-panel); border: 1px solid var(--n-line); border-radius: 7px;
  color: var(--n-text2); cursor: pointer; font: 700 18px var(--n-sans); line-height: 1;
  transition: color .15s ease, border-color .15s ease, opacity .15s ease;
}
.nap-scroll:hover:not(:disabled) { color: var(--n-text); border-color: var(--n-line2); }
.nap-scroll:disabled { opacity: .28; cursor: default; }
.nap-strip-all {
  flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 7px; cursor: pointer;
  color: var(--n-text2); font: 700 10px var(--n-sans); letter-spacing: .07em;
  text-transform: uppercase; padding: 0 10px;
}
.nap-strip-all i { font-style: normal; color: var(--n-accent); }
.nap-strip-all.active { color: var(--n-text); }
.nap-games { display: flex; gap: 8px; }
.nap-loading { color: var(--n-text3); font: 500 12px var(--n-sans); padding: 12px; }

.nap-game {
  flex: 0 0 auto; min-width: 132px; cursor: pointer;
  background: var(--n-panel); border: 1px solid var(--n-line); border-radius: 7px;
  padding: 6px 9px; transition: border-color .15s ease, background .15s ease;
}
.nap-game:hover { border-color: var(--n-line2); background: var(--n-panel2); }
.nap-game.active { border-color: var(--n-accent); background: var(--n-panel2); }
.nap-g-top {
  display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px;
  font: 600 10px var(--n-mono); color: var(--n-text2);
}
.nap-g-ou { font-weight: 700; }
.nap-g-row { display: flex; align-items: center; gap: 6px; font: 700 12px var(--n-mono); }
.nap-g-row + .nap-g-row { margin-top: 2px; }
.nap-g-row img { width: 15px; height: 15px; object-fit: contain; flex: 0 0 15px; }
.nap-g-row span { flex: 1 1 auto; }
.nap-g-row b { font-weight: 600; color: var(--n-text2); }

/* ── Tools row ───────────────────────────────────────────────────
   Horizontal and permanent. Groups survive as clusters split by a divider,
   which keeps the "what is this for" grouping without spending 186px of
   width on a sidebar. */
.nap-tools { border-bottom: 1px solid var(--n-line); background: var(--n-panel); }
.nap-tools-in {
  display: flex; align-items: center; gap: 2px;
  max-width: var(--n-w); margin: 0 auto; padding: 0 var(--n-pad);
  overflow-x: auto; scrollbar-width: none;
}
.nap-tools-in::-webkit-scrollbar { display: none; }
.nap-tools-div {
  flex: 0 0 auto; width: 1px; height: 18px; margin: 0 10px; background: var(--n-line2);
}
.nap-tool {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  padding: 11px 13px; white-space: nowrap; text-decoration: none;
  color: var(--n-text2); font: 600 13.5px var(--n-sans);
  border-bottom: 2px solid transparent;
}
.nap-tool i { font-style: normal; font-size: 13px; opacity: .8; }
.nap-tool:hover { color: var(--n-text); }
.nap-tool.active { color: var(--n-text); border-bottom-color: var(--n-accent); }
.nap-tool.active i { opacity: 1; color: var(--n-accent); }
.nap-tool.is-soon { opacity: .35; cursor: default; }
.nap-tool.is-soon:hover { color: var(--n-text2); }

.nap-main {
  max-width: var(--n-w); margin: 0 auto;
  padding: 20px var(--n-pad) 46px; min-width: 0;
}

@media (max-width: 760px) {
  .nap-bar { gap: 9px; }
  .nap-bar-right { width: 100%; margin-left: 0; }
  .nap-search { min-width: 0; flex: 1 1 auto; }
}

/* ── Player modal ────────────────────────────────────────────────────
   Player detail used to occupy a permanent right rail; it opens over the
   pool now so the table can use the full width. */
.nx-modal[hidden] { display: none; }
.nx-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: flex-start; justify-content: center;
  /* clear the site's fixed header, or it crops the player's name */
  padding: calc(var(--ticker-h, 34px) + var(--topbar-h, 36px) + var(--header-h, 64px) + 14px) 16px 16px;
}
.nx-modal-back { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.nx-modal-panel {
  position: relative; z-index: 1;
  width: min(720px, 100%);
  max-height: calc(100vh - var(--ticker-h, 34px) - var(--topbar-h, 36px) - var(--header-h, 64px) - 34px);
  overflow-y: auto;
  background: var(--n-panel); border: 1px solid var(--n-line2);
  border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.7);
}
.nx-modal-close {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font: 400 20px/1 var(--n-sans);
}
.nx-modal-close:hover { background: rgba(0,0,0,.72); }

/* The pool layout was a two-column grid with a right rail. The rail is gone
   (player detail is a modal), so the grid must collapse or it keeps holding
   the empty track open and the table stays narrow. */
.nap .nx-layout { display: block; }

/* ══ Data grid ═══════════════════════════════════════════════════════
   A terminal-style instrument: the controls belong to the table, the
   header furniture stays dark in every theme so the numbers read as data
   rather than as page content, and the rows follow the site theme. */
.nap .nx-grid {
  --g-head:   #0e1420;
  --g-head-2: #161e2d;
  --g-head-fg:#cdd8ea;
  --g-head-fg2:#8b9ab5;
  --g-head-ln:#26314a;
  border: 1px solid var(--g-head-ln);
  border-radius: 8px;
  overflow: hidden;
  background: var(--n-panel);
}
.page-template-template-nfl-dashboard .nap-main { padding-top: 14px; }

/* ── Control bar ─────────────────────────────────────────────────── */
.nx-grid-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--g-head);
  border-bottom: 1px solid var(--g-head-ln);
}
.nx-seg { display: flex; gap: 1px; background: var(--g-head-ln); border-radius: 5px; overflow: hidden; }
.nap .nx-seg .nx-pos-tab {
  display: flex; align-items: baseline; gap: 6px; border: 0; cursor: pointer;
  background: var(--g-head-2); color: #e8eefb;
  font: 700 12.5px var(--n-sans); letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 16px; transition: background .12s ease, color .12s ease;
}
.nap .nx-seg .nx-pos-tab:hover { color: #fff; background: #1d2637; }
.nap .nx-seg .nx-pos-tab.active { background: var(--n-accent); color: #fff; }
/* Just the position. nfl-theme.css puts a coloured dot before each tab and a
   count after it; both were noise against the accent fill, and the count is
   already shown in the grid's own "25 of 382" readout. */
.nap .nx-seg .nx-pos-count { display: none; }
.nap .nx-seg .nx-pos-tab::before { content: none; }

.nx-grid-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nx-grid-search, .nx-grid-select {
  background: var(--g-head-2); border: 1px solid var(--g-head-ln); border-radius: 5px;
  color: var(--g-head-fg); font: 500 12px var(--n-sans); padding: 6px 10px;
}
.nx-grid-search { min-width: 180px; }
.nx-grid-search::placeholder { color: var(--g-head-fg2); }
.nx-grid-search:focus, .nx-grid-select:focus { outline: none; border-color: var(--n-accent); }
.nx-grid-count {
  font: 600 11px var(--n-mono); color: var(--g-head-fg2);
  padding-left: 4px; white-space: nowrap;
}

/* ── Header row ──────────────────────────────────────────────────── */
.nap .nx-grid table { width: 100%; }
.nap .nx-grid thead th {
  background: var(--g-head-2) !important;
  color: var(--g-head-fg2) !important;
  border-bottom: 1px solid var(--g-head-ln) !important;
  font: 700 10px var(--n-sans) !important;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 10px !important;
  position: sticky; top: 0; z-index: 2;
}
.nap .nx-grid thead th.sortable { cursor: pointer; }
.nap .nx-grid thead th.sortable:hover { color: var(--g-head-fg) !important; }
.nap .nx-grid thead th.sort-active { color: #fff !important; background: var(--g-head) !important; }

/* ── Rows ────────────────────────────────────────────────────────── */
.nap .nx-grid tbody td { padding: 7px 10px !important; font-size: 12.5px; }
.nap .nx-grid tbody tr { cursor: pointer; }
/* Zebra banding: the row is wide enough that the eye loses the line without
   it. Hover has to beat the banding, so it is declared after. */
.nap .nx-grid tbody tr:nth-child(even) { background: var(--n-panel2); }
.nap .nx-grid tbody tr:hover,
.nap .nx-grid tbody tr:nth-child(even):hover {
  background: color-mix(in srgb, var(--n-accent) 13%, var(--n-panel));
}
.nap .nx-grid .nx-table-wrap { overflow-x: auto; }

/* ══ Player modal ════════════════════════════════════════════════════ */
.nx-modal-panel { width: min(1240px, 100%); }

/* Game log left (it needs the width for ~12 stat columns), props and the
   season stats stacked on the right. */
.nx-pd-split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; }
.nx-pd-main, .nx-pd-side { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 980px) { .nx-pd-split { grid-template-columns: 1fr; } }

.nx-pd-hd {
  background: linear-gradient(135deg, var(--team-color), color-mix(in srgb, var(--team-color) 55%, #000));
  padding: 16px 18px; color: #fff;
}
.nx-pd-id { display: flex; align-items: center; gap: 14px; }
/* contained, not a background crop — source headshots are framed
   inconsistently and a fixed band cut faces in half */
.nx-pd-photo {
  width: 58px; height: 58px; border-radius: 50%; flex: 0 0 58px;
  object-fit: cover; object-position: center top;
  background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.35);
}
.nx-pd-idtext { min-width: 0; }
.nx-pd-name { font: 800 25px/1.1 var(--n-sans); text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.nx-pd-meta { font: 600 12px var(--n-mono); opacity: .9; margin-top: 3px; }
.nx-pd-badge { width: 46px; height: 46px; object-fit: contain; margin-left: auto; opacity: .95; }

.nx-pd-matchup {
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: 13px;
  padding-top: 11px; border-top: 1px solid rgba(255,255,255,.22);
  font: 600 12px var(--n-mono); color: rgba(255,255,255,.86);
}
.nx-pd-matchup b { color: #fff; font-weight: 800; }

.nx-pd-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px; background: var(--n-line);
  border-bottom: 1px solid var(--n-line);
}
.nx-pd-kpi {
  background: var(--n-panel2); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.nx-pd-kpi b { font: 700 18px var(--n-mono); color: var(--n-text); }
.nx-pd-kpi span {
  font: 700 9px var(--n-sans); letter-spacing: .11em;
  text-transform: uppercase; color: var(--n-text3);
}

.nx-pd-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px;
}
.nx-pd-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 820px) { .nx-pd-cols { grid-template-columns: 1fr; } }

/* ── Game-log chart ──────────────────────────────────────────────────
   The shape of a season reads faster as bars than as numbers; the table
   under it carries the detail. */
.nx-log-chart {
  display: flex; align-items: flex-end; gap: 6px;
  height: 118px; padding: 14px 4px 0; margin-bottom: 14px;
  border-bottom: 1px solid var(--n-line);
}
.nx-log-bar {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px;
}
.nx-log-val { font: 600 10px var(--n-mono); color: var(--n-text2); }
.nx-log-fill {
  width: 100%; max-width: 46px; border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--n-accent) 62%, transparent);
  transition: background .15s ease;
}
.nx-log-bar.is-top .nx-log-fill { background: var(--n-accent); }
.nx-log-bar:hover .nx-log-fill { background: var(--n-accent); }
.nx-log-wk { font: 700 9px var(--n-mono); color: var(--n-text3); }

/* ── Stat tables (game log, props) ───────────────────────────────── */
.nx-table-scroll { overflow-x: auto; }
.nx-stat-tbl { width: 100%; border-collapse: collapse; }
.nx-stat-tbl th {
  background: var(--g-head-2, #161e2d); color: var(--g-head-fg2, #8b9ab5);
  font: 700 9px var(--n-sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 9px; white-space: nowrap;
  border-bottom: 1px solid var(--g-head-ln, #26314a);
}
.nx-stat-tbl td {
  padding: 7px 9px; font: 500 12px var(--n-mono);
  color: var(--n-text2); white-space: nowrap;
  border-bottom: 1px solid var(--n-line);
}
.nx-stat-tbl tbody tr:last-child td { border-bottom: 0; }
.nx-stat-tbl tbody tr:nth-child(even) { background: var(--n-panel2); }
.nx-stat-tbl .l { text-align: left; }
.nx-stat-tbl .r { text-align: right; }
.nx-stat-tbl .b { font-weight: 700; color: var(--n-text); }
.nx-stat-tbl .win  { color: var(--n-good); }
.nx-stat-tbl .loss { color: var(--n-bad); }

.nx-pd-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.nx-pd-body .nx-pd-cols { padding: 0; }

/* ── Pool rows: one line, gridded, and heavier ───────────────────────
   Two-line rows halved how many players fit on screen and made the eye
   hunt for the name. Team is its own column now, and the type is weighted
   up — a data grid is read by scanning columns, so thin grey text costs
   real legibility. */
.nap .nx-grid tbody td {
  border-right: 1px solid var(--n-line);
  color: var(--n-text);
  font-weight: 600;
  white-space: nowrap;
}
.nap .nx-grid tbody td:last-child,
.nap .nx-grid thead th:last-child { border-right: 0; }
.nap .nx-grid thead th { border-right: 1px solid var(--g-head-ln); }

/* No team-colour bar on the name cell — the Team column already carries the
   identity, and 25 different accent colours down one edge fought the zebra. */
/* nfl-theme.css gives this cell its own opaque background and kills its
   padding, which blocked the zebra banding from showing through it. */
.nap .nx-grid .nx-table-player-cell {
  border-left: 0;
  background: transparent;
  padding: 6px 10px !important;
}
.nap .nx-grid .nx-table-player-name {
  font: 700 13.5px var(--n-sans);
  color: var(--n-text);
}
/* team + opponent share one treatment: logo first, then the alias */
.nap .nx-grid .nx-teamcell { text-align: center; }
.nap .nx-grid .nx-teamcell span {
  font: 700 12.5px var(--n-mono); color: var(--n-text); vertical-align: middle;
}
/* home.css sets a global `img { display: block }`, which stacked the logo
   above the alias and cost ~20px of row height on every row. */
.nap .nx-grid .nx-tlogo {
  width: 26px; height: 26px; object-fit: contain;
  display: inline-block; vertical-align: middle; margin-right: 7px;
}
/* one line per player: the grid is for scanning many rows at once */
.nap .nx-grid tbody td { padding: 6px 10px !important; }
.nap .nx-grid tbody tr { height: 40px; }
.nap .nx-grid thead th { font-weight: 800 !important; }

/* key/value form table in the modal's side column */
.nx-kv td { border-right: 0; }
.nx-kv td.l { color: var(--n-text2); font-family: var(--n-sans); font-weight: 600; }

/* ── FLEX position picker (optimizer) ────────────────────────────────
   Sits where Reshuffle was, in the build controls. */
.nap .nopt-flex-pick { display: inline-flex; align-items: center; gap: 4px; }
.nap .nopt-flex-pick > span {
  font: 700 9px var(--n-sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--n-text3); margin-right: 2px;
}
.nap .nopt-flex-pick button {
  border: 1px solid var(--n-line2); background: transparent; cursor: pointer;
  color: var(--n-text3); font: 700 11px var(--n-mono);
  padding: 5px 9px; border-radius: 5px;
}
.nap .nopt-flex-pick button:hover { color: var(--n-text); }
.nap .nopt-flex-pick button.on {
  background: var(--n-accent); border-color: var(--n-accent); color: #fff;
}

/* ── Optimizer spacing ───────────────────────────────────────────────
   The tool used to sit under its own control bar; with that gone the shell's
   padding plus the tool's own left a large empty band under the menus. */
.page-template-template-nfl-optimizer .nap-main { padding-top: 8px; }
.nap .nopt { margin-top: 0; padding-top: 0; }
.nap .nopt-main { padding-top: 0; }

/* Current Build header numbers were crowded together. */
.nap .nopt-build-kpis,
.nap .nopt-build-hd,
.nap .nopt-cur-kpis { gap: 22px; }
.nap .nopt-build-hd > span,
.nap .nopt-build-kpis > * { padding: 0 2px; }

/* Saved-lineups toolbar */
.nap .nopt-saved-bar { display: flex; justify-content: flex-end; padding: 0 0 10px; }

/* ── Mobile tool bar ─────────────────────────────────────────────────
   Pinned bottom navigation between NFL tools on small screens. */
.nap-mobnav { display: none; }
@media (max-width: 900px) {
  .nap-mobnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: var(--mobnav-base); z-index: 90;
    background: var(--n-panel); border-top: 1px solid var(--n-line2);
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 18px -12px rgba(0,0,0,.7);
  }
  .nap-mobnav-item {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    align-items: center; gap: 2px; padding: 6px 2px; text-decoration: none;
    color: var(--n-text3); font: 700 10px var(--n-sans);
  }
  .nap-mobnav-item i { font-style: normal; font-size: 16px; line-height: 1; }
  .nap-mobnav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .nap-mobnav-item.active { color: var(--n-accent); }

  /* keep the last rows clear of the bar(s) */
  .nap-main { padding-bottom: calc(var(--mobnav-base) + var(--mobnav-h) + 28px); }
  /* The optimizer keeps its own function bar (pool / optimize / settings).
     Stack it one bar-height above the tool bar instead of on top of it, and
     give the tool that much more clearance underneath. */
  .nap .nopt-mobnav, .nap #noptMobNav {
    bottom: calc(var(--mobnav-base) + var(--mobnav-h));
  }
  .nap .nopt { padding-bottom: calc(var(--mobnav-h) + 12px); }
}

/* ── CFB grid heat scale ─────────────────────────────────────────────
   Five steps across whatever range this slate happens to have. */
.nap .cfb-heat {
  display: inline-block; min-width: 46px; padding: 2px 7px; border-radius: 4px;
  font: 700 12px var(--n-mono); text-align: right;
}
.nap .cfb-h1 { background: color-mix(in srgb, var(--n-accent) 8%,  transparent); }
.nap .cfb-h2 { background: color-mix(in srgb, var(--n-accent) 18%, transparent); }
.nap .cfb-h3 { background: color-mix(in srgb, var(--n-accent) 30%, transparent); }
.nap .cfb-h4 { background: color-mix(in srgb, var(--n-accent) 44%, transparent); color: #fff; }
.nap .cfb-h5 { background: var(--n-accent); color: #fff; }

/* ══ Phone layout ════════════════════════════════════════════════════
   Target: iPhone-class widths. Data should be readable without dragging
   the table across three screens, and the chrome should not eat the
   viewport before any data appears. */
@media (max-width: 700px) {
  /* Secondary table columns. What survives is rating, player, team,
     salary and projection — enough to pick a player from. */
  .nap .nx-grid th.sec,
  .nap .nx-grid td.sec { display: none; }

  /* The tools row duplicates the fixed bottom bar on a phone, and it is a
     second horizontal scroller competing with the games strip. */
  .nap .nap-tools { display: none; }

  /* Give the data more of the screen. */
  .nap-main { padding-left: 10px; padding-right: 10px; }
  .nap-bar  { padding-top: 7px; padding-bottom: 7px; row-gap: 7px; }
  .nap-bar-title { font-size: 13px; }
  .nap-league { width: 20px; height: 20px; }
  .nap-slate { min-width: 0; flex: 1 1 150px; }
  .nap-week select { min-width: 96px; }
  .nap-bar-right { gap: 7px; }

  /* Rows can be tighter than on a desktop grid without hurting legibility. */
  .nap .nx-grid tbody td { padding: 5px 8px !important; font-size: 12px; }
  .nap .nx-grid thead th { padding: 7px 8px !important; }
  .nap .nx-grid .nx-tlogo { width: 20px; height: 20px; margin-right: 5px; }
  .nap .nx-grid .nx-table-player-name { font-size: 12.5px; }

  /* Control bar wraps instead of scrolling. */
  .nx-grid-bar { gap: 8px; }
  .nx-grid-tools { width: 100%; margin-left: 0; }
  .nx-grid-search { flex: 1 1 auto; min-width: 0; }
  .nap .nx-seg .nx-pos-tab { padding: 6px 11px; font-size: 11.5px; }

  /* nfl-theme.css pins the player cell to a 190px minimum, which alone
     pushed salary and projection off a 402px screen. */
  .nap .nx-grid .nx-table-player-cell { min-width: 0; }
  .nap .nx-grid .nx-teamcell .nx-tlogo { margin-right: 4px; }
  .nap .nx-grid td.c, .nap .nx-grid th.c { padding-left: 6px !important; padding-right: 6px !important; }

  /* The tool's own page padding sits inside the shell's — one is enough. */
  .nap .nx-page, .nap .nx-layout { padding-left: 0; padding-right: 0; }
  .nap .nx-grid { border-left: 0; border-right: 0; border-radius: 0; }

  /* Games strip: the count button and the two arrows were taking 180px of a
     402px screen, leaving a 220px window onto a 1400px track. Shrink the
     furniture so the games themselves get the width. */
  .nap-strip { gap: 5px; padding-left: 8px; padding-right: 8px; }
  .nap-strip-all { padding: 0 6px; font-size: 9px; letter-spacing: .04em; }
  .nap-strip-all span { display: block; }
  .nap-scroll { width: 20px; font-size: 15px; }

  /* Smaller cards mean fewer swipes end to end. */
  .nap-game { min-width: 96px; padding: 5px 6px; }
  .nap-g-row { font-size: 11px; }
  .nap-g-row img { width: 13px; height: 13px; flex-basis: 13px; }
}