/* Pocket NBA — Draft Board page widgets (P1).
   Builds on the design system (nba-ui.css tokens + components); only the
   board-specific pieces live here: sticky draft clock + timeline, keyed board
   rows (dense table ≥768px, card rows on phones), roster column, the phone
   thumb bar, the player sheet body and the cheat sheet. Everything is scoped
   under body.nd-page and uses --nu-* tokens only. */

.nd-page { --nd-nav-h: 56px; --nd-clock-h: 72px; --nd-filters-h: 96px; --nd-gap: 12px; --nd-mb-h: 64px; }
@media (max-width: 768px) { .nd-page { --nd-nav-h: 52px; } } /* matches #rr-nav min-height on phones */
.nd-page .nd-nav-fallback { display: none; }
.nd-page [data-fam="G"] { --fam: var(--nu-pos-g); }
.nd-page [data-fam="F"] { --fam: var(--nu-pos-f); }
.nd-page [data-fam="C"] { --fam: var(--nu-pos-c); }
.nd-page [data-fam="UTIL"] { --fam: var(--nu-pos-u); }

/* ── Shell + head ─────────────────────────────────────────────────────── */
.nd-page #app.nd-shell { max-width: 1280px; width: 100%; margin: 0 auto; padding: var(--nu-4) var(--nu-gutter) var(--nu-8); }
.nd-page .nd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--nu-3) var(--nu-4); flex-wrap: wrap; margin-bottom: var(--nu-2); }
.nd-page .nd-head__text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nd-page .nd-eyebrow { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nd-page .nd-eyebrow .nu-ball { font-size: 13px; }
.nd-page .nd-eyebrow span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-page .page-title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--nu-text); margin: 0; }
.nd-page .nd-head__actions { display: flex; align-items: center; gap: var(--nu-2); }
.nd-page .nd-hbtn svg { width: 17px; height: 17px; }
.nd-page .nd-views > button { min-height: 32px; }

/* one-line setup status */
.nd-page .nd-status { display: flex; align-items: center; gap: 10px; min-height: 32px; margin-bottom: var(--nu-3); font-size: var(--nu-fs-sm); color: var(--nu-text-2); min-width: 0; }
.nd-page .nd-status__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-page .nd-status__lg { display: none; }
.nd-page .nd-status__txt b { color: var(--nu-text); font-weight: 700; }
.nd-page .nd-status__edit { flex: none; background: none; border: 0; padding: 0 4px; min-height: 32px; color: var(--nu-accent-2); font: inherit; font-weight: 600; cursor: pointer; position: relative; }
.nd-page .nd-status__edit::after { content: ""; position: absolute; inset: -6px -4px; }
.nd-page .nd-status__edit[hidden] { display: none; }
.nd-page .nd-status__edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.nd-page .nd-league { width: auto; max-width: 260px; min-height: 34px; padding-left: 10px; font-size: var(--nu-fs-sm); }
.nd-page .nd-sync { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 26px; padding: 0 10px; border-radius: var(--nu-r-pill); background: var(--nu-s2); border: 1px solid var(--nu-line); font-size: var(--nu-fs-xs); font-weight: 600; color: var(--nu-text-2); white-space: nowrap; }
.nd-page .nd-sync .nd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nu-text-3); }
.nd-page .nd-sync[data-state="connected"] { color: var(--nu-text); }
.nd-page .nd-sync[data-state="connected"] .nd-dot { background: var(--nu-good); box-shadow: 0 0 0 3px var(--nu-good-soft); animation: nd-ping 2s var(--nu-ease) infinite; }
.nd-page .nd-sync[data-state="syncing"] .nd-dot { background: var(--nu-warn); animation: nu-pulse 1.2s var(--nu-ease) infinite; }
.nd-page .nd-sync[data-state="error"] { color: #fde68a; border-color: rgba(251,191,36,0.3); }
.nd-page .nd-sync[data-state="error"] .nd-dot { background: var(--nu-warn); }
.nd-page .nd-ago { color: var(--nu-text-3); font-weight: 500; }
/* "Which pick are you?" draft-slot chooser (manual / not-yet-synced boards) */
.nd-page .nd-slotpick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nu-2) var(--nu-3); margin-bottom: var(--nu-3); padding: var(--nu-3); border: 1px solid var(--nu-line); border-radius: var(--nu-r-md); background: var(--nu-s1); font-size: var(--nu-fs-sm); color: var(--nu-text-2); min-width: 0; }
.nd-page .nd-slotpick[hidden] { display: none; }
.nd-page .nd-slotpick[data-mode="pick"] { border-color: var(--nu-accent-line); background: linear-gradient(180deg, var(--nu-accent-soft), transparent 70%), var(--nu-s1); }
.nd-page .nd-slotpick[data-mode="chosen"], .nd-page .nd-slotpick[data-mode="synced"] { padding: 0 0 0 var(--nu-3); justify-content: space-between; }
.nd-page .nd-slotpick[data-mode="synced"] { min-height: 44px; }
.nd-page .nd-slotpick__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--nu-2); width: 100%; }
.nd-page .nd-slotpick__q { color: var(--nu-text); font-weight: 700; font-size: var(--nu-fs-body); }
.nd-page .nd-slotpick__chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.nd-page .nd-slotpick__chip { min-width: var(--nu-tap); min-height: var(--nu-tap); padding: 0 10px; justify-content: center; font-size: var(--nu-fs-body); }
.nd-page .nd-slotpick__chip::after { inset: 0; }
.nd-page .nd-slotpick__txt { min-width: 0; }
.nd-page .nd-slotpick__txt b { color: var(--nu-text); font-weight: 700; }
.nd-page .nd-slotpick__change { min-height: var(--nu-tap); border: 0; border-left: 1px solid var(--nu-line); border-radius: 0 var(--nu-r-md) var(--nu-r-md) 0; }
/* League picker / sync notices (reuses the .nd-slotpick card). */
.nd-page .nd-leaguepick[data-mode="pick"] { border-color: var(--nu-accent-line); background: linear-gradient(180deg, var(--nu-accent-soft), transparent 70%), var(--nu-s1); }
.nd-page .nd-leaguepick[data-mode="notice"] { padding: 0; border: 0; background: none; gap: var(--nu-2); }
.nd-page .nd-leaguepick[data-mode="notice"] .nu-callout { flex: 1 1 100%; margin: 0; }
.nd-page .nd-leaguepick__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--nu-2); width: 100%; }
.nd-page .nd-leaguepick__list { display: grid; gap: 6px; width: 100%; }
.nd-page .nd-leaguepick__opt { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; width: 100%; min-height: var(--nu-tap); padding: 8px var(--nu-3); border: 1px solid var(--nu-line); border-radius: var(--nu-r-md); background: var(--nu-s2, var(--nu-s1)); color: var(--nu-text); font: inherit; text-align: left; cursor: pointer; }
.nd-page .nd-leaguepick__opt:hover, .nd-page .nd-leaguepick__opt:focus-visible { border-color: var(--nu-accent-line); }
.nd-page .nd-leaguepick__opt[aria-pressed="true"] { border-color: var(--nu-accent-line); box-shadow: inset 3px 0 0 var(--nu-accent, #ff8a3d); }
.nd-page .nd-leaguepick__opt--manual { background: none; border-style: dashed; }
.nd-page .nd-leaguepick__nm { font-weight: 700; font-size: var(--nu-fs-body); overflow-wrap: anywhere; }
.nd-page .nd-leaguepick__meta { color: var(--nu-text-2); font-size: var(--nu-fs-sm); }
.nd-page .nd-leaguepick__flag { color: var(--nu-warn, #f59e0b); font-weight: 600; }
@keyframes nd-ping { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.5); } 70% { box-shadow: 0 0 0 6px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

.nd-page .nd-banner { margin-bottom: var(--nu-3); }
.nd-page .nd-degraded { align-items: center; }
.nd-page .nd-degraded > div { flex: 1; }
.nd-page .nd-matchbar { display: flex; align-items: center; gap: var(--nu-3); padding: 10px 12px 10px 14px; margin-bottom: var(--nu-3); border-radius: var(--nu-r-md); background: rgba(124,58,237,0.12); box-shadow: inset 3px 0 0 #a78bfa; font-size: var(--nu-fs-sm); color: #ddd6fe; }
.nd-page .nd-matchbar .nu-btn { margin-left: auto; }

/* first-visit setup (calm, dismissible) */
.nd-page .nd-setup { margin-bottom: var(--nu-3); padding: var(--nu-4); }
.nd-page .nd-setup__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--nu-2); }
.nd-page .nd-setup__opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nu-4); }
.nd-page .nd-setup__opt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--nu-2); }
.nd-page .nd-setup__opt p { font-size: var(--nu-fs-sm); color: var(--nu-text-2); line-height: 1.5; margin: 0; max-width: 52ch; }
.nd-page .nd-setup__opt p b { color: var(--nu-text); }
.nd-page .nd-setup__opt + .nd-setup__opt { padding-left: var(--nu-4); border-left: 1px solid var(--nu-line); }
.nd-page .nd-setup__form { display: flex; gap: var(--nu-2); align-items: stretch; width: 100%; max-width: 420px; }
.nd-page .nd-setup__form .nu-input { flex: 1 1 160px; min-width: 0; min-height: 44px; font-size: 16px; }
.nd-page .nd-setup__form .nu-btn { min-height: 44px; white-space: nowrap; }
.nd-page .nd-setup__opt .nu-btn { min-height: 44px; }
.nd-page .nd-degraded .nu-btn, .nd-page .nd-leaguepick .nu-btn { min-height: 44px; }
.nd-page .nd-setup__err:empty { display: none; }
.nd-page .nd-setup__err { color: var(--nu-danger, #f87171); }

/* ── Draft clock (sticky) ─────────────────────────────────────────────── */
.nd-page .nd-clock {
  position: sticky; top: var(--nd-nav-h); z-index: 30;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "num otc ctl ctl2" "num tl ctl ctl2";
  align-items: center; column-gap: var(--nu-4); row-gap: 6px;
  margin: 0 0 var(--nd-gap); padding: 10px 10px 10px 16px; border-radius: var(--nu-r-lg);
  background: rgba(15,17,20,0.86); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid var(--nu-line-2); box-shadow: var(--nu-shadow-2);
  transition: border-color var(--nu-dur-2) var(--nu-ease), box-shadow var(--nu-dur-2) var(--nu-ease);
}
.nd-page .nd-clock.mine { border-color: var(--nu-accent-line); box-shadow: var(--nu-glow); background: linear-gradient(90deg, rgba(255,138,61,0.10), rgba(15,17,20,0.88) 45%); }
.nd-page .nd-clock__num { grid-area: num; display: flex; gap: var(--nu-4); padding-right: var(--nu-4); border-right: 1px solid var(--nu-line); align-self: stretch; align-items: center; }
.nd-page .nd-clock__num > div { display: flex; flex-direction: column; }
.nd-page .nd-clock__lbl { font-family: var(--nu-mono); font-size: 10px; letter-spacing: var(--nu-track-caps); text-transform: uppercase; color: var(--nu-text-3); }
.nd-page .nd-clock__big { font-family: var(--nu-mono); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; color: var(--nu-text); }
.nd-page .nd-clock__of { font-family: var(--nu-mono); font-size: var(--nu-fs-xs); color: var(--nu-text-3); margin-left: 1px; }
.nd-page .nd-clock__num > div:last-child { flex-direction: column; }
.nd-page .nd-clock__num > div:last-child .nd-clock__big { display: inline; }
.nd-page .nd-otc { grid-area: otc; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nd-page .nd-otc__who { font-size: var(--nu-fs-body); font-weight: 750; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nd-page .nd-otc__sub { font-size: var(--nu-fs-sm); color: var(--nu-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nd-page .nd-clock.mine .nd-otc__who { color: var(--nba-300); }
.nd-page .nd-clock__ctl { grid-area: ctl; display: flex; align-items: center; gap: var(--nu-2); }
.nd-page .nd-undo svg { width: 17px; height: 17px; }
.nd-page .nd-clock__ctl2 { grid-area: ctl2; display: flex; align-items: center; gap: var(--nu-2); }
.nd-page .nd-pause, .nd-page .nd-resetbtn { min-height: 44px; gap: 6px; }
.nd-page .nd-pause { min-width: 104px; }
.nd-page .nd-pause svg, .nd-page .nd-resetbtn svg { width: 16px; height: 16px; flex: none; }
.nd-page .nd-pause[aria-pressed="true"] { border-color: var(--nu-accent-line); background: var(--nu-accent-soft); color: var(--nba-300); }
.nd-page .nd-resetbtn { color: var(--nu-text-2); }

/* reset menu */
.nd-page .nd-rs-opts { display: grid; gap: var(--nu-2); }
.nd-page .nd-rs-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; padding: 10px 14px; text-align: left; border-radius: var(--nu-r-md); border: 1px solid var(--nu-line-2); background: var(--nu-s2); color: var(--nu-text); cursor: pointer; font: inherit; }
.nd-page .nd-rs-opt:hover:not(:disabled) { border-color: var(--nu-line-3); }
.nd-page .nd-rs-opt:disabled { opacity: 0.5; cursor: not-allowed; }
.nd-page .nd-rs-opt__t { font-weight: 700; }
.nd-page .nd-rs-opt__s { font-size: var(--nu-fs-sm); color: var(--nu-text-2); }
.nd-page .nd-rs-opt--danger .nd-rs-opt__t { color: var(--nu-bad); }
.nd-page .nd-rs-confirm__txt { font-weight: 700; margin: 0 0 var(--nu-2); }
.nd-page .nd-rs-confirm__btns { display: flex; gap: var(--nu-2); margin-top: var(--nu-4); }
.nd-page .nd-rs-confirm__btns > .nu-btn { flex: 1; min-height: 44px; }

/* timeline: one dot per upcoming pick, my picks as labelled pills */
.nd-page .nd-ticker { grid-area: tl; min-width: 0; overflow: hidden; }
.nd-page .nd-tl { display: flex; align-items: center; gap: 4px; min-height: 18px; }
.nd-page .nd-tl__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.nd-page .nd-tl__dot.is-now { width: 10px; height: 10px; background: var(--nu-text); box-shadow: 0 0 0 3px rgba(255,255,255,0.12); }
.nd-page .nd-tl__me { flex: none; display: inline-grid; place-items: center; height: 18px; padding: 0 7px; border-radius: var(--nu-r-pill); font-family: var(--nu-mono); font-size: 10.5px; font-weight: 500; color: var(--nu-accent-ink); background: var(--nba-400); }
.nd-page .nd-tl__me.is-now { box-shadow: 0 0 0 3px rgba(255,138,61,0.25); }
.nd-page .nd-tl__turn { flex: none; font-family: var(--nu-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--nu-text-3); padding: 0 3px 0 5px; border-left: 1px solid var(--nu-line-2); margin-left: 2px; }

/* pick timer: quiet for other teams, loud when it's mine */
.nd-page .nd-timer { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 76px; min-height: 44px; padding: 0 10px; border-radius: var(--nu-r-md); border: 1px solid var(--nu-line-2); background: var(--nu-s2); color: var(--nu-text-2); font-family: var(--nu-mono); cursor: pointer; line-height: 1.1; }
.nd-page .nd-timer .w { font-family: var(--nu-font); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nu-text-3); }
.nd-page .nd-timer .t { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--nu-text); }
.nd-page .nd-timer.warn .t { color: var(--nu-warn); }
.nd-page .nd-timer.urgent .t, .nd-page .nd-timer.expired .t { color: var(--nu-bad); }
.nd-page .nd-timer.me { border-color: var(--nu-accent-line); background: var(--nu-accent-soft); min-width: 92px; }
.nd-page .nd-timer.me .w { color: var(--nba-300); }
.nd-page .nd-timer.me .t { font-size: 22px; color: var(--nba-300); }
.nd-page .nd-timer.me.urgent { border-color: var(--nu-bad); background: var(--nu-bad-soft); animation: nd-urgent 1s steps(2, start) infinite; }
.nd-page .nd-timer.me.urgent .t, .nd-page .nd-timer.me.expired .t { color: var(--nu-bad); }
.nd-page .nd-timer.paused { border-style: dashed; }
.nd-page .nd-timer.paused .w { color: var(--nba-300); }
.nd-page .nd-timer.paused .t { color: var(--nu-text-3); }
.nd-page .nd-mb-timer.paused { color: var(--nu-text-3); font-size: 15px; }
@keyframes nd-urgent { 50% { background: rgba(248,113,113,0.28); } }

/* ── Layout ───────────────────────────────────────────────────────────── */
.nd-page .nd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nu-5); align-items: start; }
.nd-page .nd-main { min-width: 0; }
.nd-page .nd-side { display: none; }
@media (min-width: 1024px) {
  .nd-page .nd-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .nd-page .nd-side {
    display: flex; flex-direction: column; gap: var(--nu-3);
    position: sticky; top: calc(var(--nd-nav-h) + var(--nd-clock-h) + var(--nd-gap));
    max-height: calc(100vh - var(--nd-nav-h) - var(--nd-clock-h) - var(--nd-gap) * 2); overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain;
  }
}

/* ── Recommendation (the ONE focus card) ──────────────────────────────── */
.nd-page .nd-reco { padding: 14px 16px; margin-bottom: var(--nd-gap); }
.nd-page .nd-reco__top { display: flex; align-items: center; gap: var(--nu-2); margin-bottom: 10px; }
.nd-page .nd-fill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-family: var(--nu-mono); font-size: 10.5px; font-weight: 500; color: var(--fam, var(--nu-text-2)); background: color-mix(in srgb, var(--fam, #fff) 14%, transparent); }
.nd-page .nd-reco__main { display: flex; align-items: center; gap: var(--nu-4); min-width: 0; }
.nd-page .nd-reco__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--nu-3); background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--nu-r-md); }
.nd-page .nd-reco__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nd-page .nd-reco__name { font-size: 20px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-page .nd-reco__who:hover .nd-reco__name { color: var(--nba-200); }
.nd-page .nd-reco__nums { display: flex; gap: var(--nu-4); flex: none; }
.nd-page .nd-reco__num { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.nd-page .nd-reco__num b { font-size: 26px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--nba-400); }
.nd-page .nd-reco__num--2 b { font-size: 18px; color: var(--nu-text); }
.nd-page .nd-reco__num small { font-family: var(--nu-mono); font-size: 10px; letter-spacing: var(--nu-track-caps); text-transform: uppercase; color: var(--nu-text-3); }
.nd-page .nd-reco__go { flex: none; min-width: 148px; min-height: 48px; font-size: 15px; }
.nd-page .nd-reco-why { margin: 10px 0 0; font-size: var(--nu-fs-sm); color: var(--nu-text-2); line-height: 1.45; }
.nd-page .nd-reco__alts { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.nd-page .nd-reco__alts .nu-label { margin-right: 2px; }
.nd-page .nd-alt { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px 0 5px; border-radius: var(--nu-r-pill); border: 1px solid var(--nu-line-2); background: var(--nu-s2); color: var(--nu-text); font: inherit; font-size: var(--nu-fs-sm); font-weight: 600; cursor: pointer; max-width: 100%; position: relative; }
.nd-page .nd-alt::after { content: ""; position: absolute; inset: -5px 0; }
.nd-page .nd-alt:hover { border-color: var(--nu-line-3); background: var(--nu-s3); }
.nd-page .nd-alt__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-page .nd-alt__v { color: var(--nu-text-3); font-size: var(--nu-fs-xs); }

/* ── Positions running low: ONE strip ─────────────────────────────────── */
.nd-page .nd-low:empty { display: none; }
.nd-page .nd-low { margin-bottom: var(--nd-gap); }
.nd-page .nd-low__in { --c: var(--nu-text-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px 8px 14px; border-radius: var(--nu-r-md); background: var(--nu-s1); border: 1px solid var(--nu-line); box-shadow: inset 3px 0 0 var(--c); }
.nd-page .nd-low__in[data-level="warn"] { --c: var(--nu-warn); }
.nd-page .nd-low__in[data-level="danger"] { --c: var(--nu-bad); }
.nd-page .nd-low__lbl { font-size: var(--nu-fs-sm); font-weight: 700; color: var(--nu-text); margin-right: 4px; }
.nd-page .nd-low__chip { --c: var(--nu-text-2); display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--nu-r-pill); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c); font: inherit; font-size: var(--nu-fs-xs); font-weight: 650; white-space: nowrap; position: relative; }
.nd-page button.nd-low__chip { cursor: pointer; }
.nd-page button.nd-low__chip::after { content: ""; position: absolute; inset: -8px 0; }
.nd-page .nd-low__chip[data-level="warn"] { --c: var(--nu-warn); }
.nd-page .nd-low__chip[data-level="danger"] { --c: var(--nu-bad); }
.nd-page .nd-low__chip[data-level="info"] { --c: var(--nu-text-2); }

/* ── Filters ──────────────────────────────────────────────────────────── */
.nd-page .nd-filters { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 10px; }
.nd-page .nd-filters__row { display: flex; gap: var(--nu-2); align-items: center; min-width: 0; }
.nd-page .nd-search { flex: 1 1 auto; min-width: 0; }
.nd-page .nd-search .nu-input, .nd-page .nd-sel { min-height: 40px; }
.nd-page .nd-sel { width: auto; flex: none; font-size: var(--nu-fs-sm); padding-left: 12px; }
.nd-page .nd-chips { align-items: center; }
.nd-page .nd-seg { display: contents; }
.nd-page .nd-slotchip { min-height: 36px; padding: 0 11px; font-family: var(--nu-mono); font-size: 12px; font-weight: 500; gap: 7px; }
.nd-page .nd-slotchip > span:first-child { color: var(--fam); }
.nd-page .nd-slotchip[data-pos="ALL"] > span:first-child { color: inherit; font-family: var(--nu-font); font-weight: 650; }
.nd-page .nd-slotchip.scarce .nu-chip__n { color: var(--nu-warn); }
.nd-page .nd-slotchip.run .nu-chip__n { color: var(--nu-bad); }
.nd-page .nd-slotchip.run::before { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--nu-bad); }
.nd-page .nd-chips__sep { flex: none; width: 1px; height: 20px; background: var(--nu-line-2); margin: 0 4px; }
.nd-page .nd-chips .nu-chip { min-height: 36px; }
.nd-page .nd-elig-note { margin: 0 0 8px; }

/* ── Board table (div grid: dense on desktop, card rows on phones) ───── */
.nd-page .nd-table { background: var(--nu-s1); border: 1px solid var(--nu-line); border-radius: var(--nu-r-lg); }
.nd-page .nd-thead, .nd-page .nd-row {
  display: grid; align-items: center; column-gap: 12px;
  grid-template-columns: 40px minmax(0, 1fr) 46px 70px 80px 62px 64px 84px;
  padding: 0 12px 0 10px;
}
.nd-page .nd-thead {
  position: sticky; top: calc(var(--nd-nav-h) + var(--nd-clock-h) + var(--nd-gap) + var(--nd-filters-h)); z-index: 5;
  min-height: 34px; background: var(--nu-s1); border-bottom: 1px solid var(--nu-line-2); border-radius: var(--nu-r-lg) var(--nu-r-lg) 0 0;
  font-family: var(--nu-mono); font-size: 10.5px; letter-spacing: var(--nu-track-caps); text-transform: uppercase; color: var(--nu-text-3);
}
.nd-page .nd-thead > span { white-space: nowrap; }
.nd-page .nd-thead .nd-c-val, .nd-page .nd-thead .nd-c-cf, .nd-page .nd-thead .nd-c-vorp, .nd-page .nd-thead .nd-c-mkt { text-align: right; }
.nd-page .nd-thead .nd-c-rk { text-align: right; }
.nd-page.nd-sorted .nd-thead .nd-c-rk::after { content: " ·"; color: var(--nu-accent-2); }
.nd-page .nd-list { display: flex; flex-direction: column; }
.nd-page .nd-row { min-height: 60px; border-bottom: 1px solid var(--nu-line); cursor: pointer; transition: background var(--nu-dur-1) var(--nu-ease), opacity var(--nu-dur-2) var(--nu-ease); }
.nd-page .nd-list > :last-child { border-bottom: 0; border-radius: 0 0 var(--nu-r-lg) var(--nu-r-lg); }
.nd-page .nd-row:hover { background: rgba(255,255,255,0.025); }
.nd-page .nd-c-rk { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--nu-mono); font-variant-numeric: tabular-nums; line-height: 1.15; }
.nd-page .nd-c-rk b { font-size: var(--nu-fs-sm); font-weight: 500; color: var(--nu-text-2); }
.nd-page .nd-c-rk small { font-size: 10px; color: var(--nu-text-3); }
.nd-page .nd-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--nu-r-sm); }
.nd-page .nd-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nd-page .nd-name { font-size: var(--nu-fs-body); font-weight: 700; letter-spacing: -0.01em; color: var(--nu-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-page .nd-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--nu-fs-xs); color: var(--nu-text-2); white-space: nowrap; overflow: hidden; }
.nd-page .nd-tm { font-family: var(--nu-mono); font-size: 11px; color: var(--nu-text-2); }
.nd-page .nd-meta .nu-pos, .nd-page .nd-meta .nu-inj, .nd-page .nd-meta .nu-tier { height: 18px; }
.nd-page .nu-pos.is-est { background: none; box-shadow: none; outline: 1px dashed color-mix(in srgb, var(--c) 60%, transparent); outline-offset: -1px; }
.nd-page .nd-elig-badge { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font-family: var(--nu-mono); font-size: 9.5px; color: var(--nu-warn); background: var(--nu-warn-soft); flex: none; }
.nd-page .nd-gm { font-family: var(--nu-mono); font-size: 10.5px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; border-radius: 5px; color: var(--nu-text-3); box-shadow: inset 0 0 0 1px var(--nu-line-2); }
.nd-page .nd-gm.hi { color: var(--nu-good); box-shadow: inset 0 0 0 1px rgba(52,211,153,0.35); }
.nd-page .nd-gm.lo { color: var(--nu-text-3); }
.nd-page .nd-flag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-family: var(--nu-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.05em; color: var(--nu-warn); background: var(--nu-warn-soft); white-space: nowrap; }
.nd-page .nd-flag.um { color: #c4b5fd; background: rgba(124,58,237,0.16); }
.nd-page .nd-takenby:empty { display: none; }
.nd-page .nd-takenby { font-size: var(--nu-fs-xs); color: var(--nu-text-3); }
.nd-page .nd-c-tier { display: flex; }
.nd-page .nd-c-val { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--nu-mono); font-variant-numeric: tabular-nums; }
.nd-page .nd-c-val b { font-size: 16px; font-weight: 500; letter-spacing: -0.03em; color: var(--nu-text); }
.nd-page .nd-c-val small { display: none; font-size: 10px; color: var(--nu-text-3); }
.nd-page .nd-row .nd-c-cf, .nd-page .nd-row .nd-c-vorp, .nd-page .nd-row .nd-c-mkt { text-align: right; font-family: var(--nu-mono); font-variant-numeric: tabular-nums; font-size: var(--nu-fs-sm); color: var(--nu-text-2); white-space: nowrap; }
.nd-page .nd-c-cf i { font-style: normal; color: var(--nu-text-3); }
.nd-page .nd-mkt i { font-style: normal; font-size: 10px; margin-left: 4px; }
.nd-page .nd-mkt i.value { color: var(--nu-good); }
.nd-page .nd-mkt i.reach { color: var(--nu-bad); }
.nd-page .nd-mkt i.strong { text-decoration: underline; text-underline-offset: 2px; }
.nd-page .nd-mkt.low { opacity: 0.55; }
.nd-page .nd-c-act { display: flex; justify-content: flex-end; }
.nd-page .nd-draft {
  position: relative; min-width: 72px; min-height: 36px; padding: 0 14px; border-radius: var(--nu-r-sm);
  border: 1px solid var(--nu-line-2); background: var(--nu-s2); color: var(--nu-text);
  font-family: var(--nu-font); font-size: var(--nu-fs-sm); font-weight: 700; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background var(--nu-dur-1) var(--nu-ease), border-color var(--nu-dur-1) var(--nu-ease), transform var(--nu-dur-1) var(--nu-ease);
}
.nd-page .nd-draft::after { content: ""; position: absolute; inset: -5px -2px; }
.nd-page .nd-draft:hover { background: var(--nu-s3); border-color: var(--nu-line-3); }
.nd-page .nd-draft:active { transform: scale(0.95); }
.nd-page .nd-draft:focus-visible { box-shadow: var(--nu-ring); }
.nd-page .nd-draft:disabled { opacity: 0.5; cursor: default; }
.nd-page .nd-on-me .nd-draft[data-act="draft"] { background: var(--nu-accent-soft); color: var(--nba-200); border-color: var(--nu-accent-line); }
.nd-page .nd-on-me .nd-draft[data-act="draft"]:hover { background: rgba(255,138,61,0.22); border-color: var(--nba-400); }
.nd-page .nd-on-me.reco .nd-draft[data-act="draft"] { background: linear-gradient(180deg, var(--nba-400), var(--nba-500)); color: var(--nu-accent-ink); border-color: transparent; }
.nd-page .nd-matching .nd-draft { border-color: rgba(167,139,250,0.6); color: #ddd6fe; background: rgba(124,58,237,0.14); }
.nd-page .nd-row.reco { background: linear-gradient(90deg, rgba(255,138,61,0.09), transparent 60%); box-shadow: inset 3px 0 0 var(--nba-400); }
.nd-page .nd-row.reco .nd-name::after { content: "PICK"; margin-left: 8px; font-family: var(--nu-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em; color: var(--nba-300); vertical-align: 1px; }
.nd-page .nd-row.taken { opacity: 0.42; }
.nd-page .nd-row.taken .nd-name { text-decoration: line-through; text-decoration-color: var(--nu-text-3); }
.nd-page .nd-row.taken.mine { opacity: 0.7; }
.nd-page .nd-row.taken.mine .nd-name { color: var(--nba-300); }
.nd-page .nd-row.taken .nd-draft { border-style: dashed; background: none; }
.nd-page .nd-tier-rule { padding: 7px 14px 5px; font-size: 10px; border-bottom: 1px solid var(--nu-line); background: rgba(255,255,255,0.012); }
.nd-page .nd-tier-rule b { font-weight: 500; }
.nd-page .nd-tier-rule::after { display: none; }
.nd-page .nd-list .nu-skel-row { padding-left: 14px; }
.nd-page .nd-count-row { display: flex; justify-content: center; padding: 12px 0 0; }

/* sticky filter bar on wide screens (phones: filters scroll away) */
@media (min-width: 768px) {
  .nd-page .nd-filters { position: sticky; top: calc(var(--nd-nav-h) + var(--nd-clock-h) + var(--nd-gap)); z-index: 6; background: var(--nu-bg); padding-top: 6px; box-shadow: 0 calc(var(--nd-gap) * -1) 0 var(--nu-bg); }
}
/* tablets: drop the least-used columns */
@media (min-width: 768px) and (max-width: 1199px) {
  .nd-page .nd-thead, .nd-page .nd-row { grid-template-columns: 36px minmax(0, 1fr) 70px 80px 60px 80px; }
  .nd-page .nd-c-tier, .nd-page .nd-c-vorp { display: none !important; }
}

/* ── Roster column ────────────────────────────────────────────────────── */
.nd-page .nd-team, .nd-page .nd-picks-card { padding: 14px; }
.nd-page .nd-team__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nu-2); margin-bottom: 10px; }
.nd-page .nd-slots, .nd-page .nd-bench { display: flex; flex-direction: column; gap: 4px; }
.nd-page .nd-slot { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 42px; padding: 3px 8px 3px 4px; border-radius: var(--nu-r-sm); background: var(--nu-s2); }
.nd-page .nd-slot.is-open { background: none; box-shadow: none; outline: 1px dashed var(--nu-line-2); outline-offset: -1px; min-height: 38px; }
.nd-page .nd-slot.need { outline-color: rgba(251,191,36,0.55); background: var(--nu-warn-soft); }
.nd-page .nd-slot__pos { display: inline-grid; place-items: center; height: 22px; border-radius: 6px; font-family: var(--nu-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--fam); background: color-mix(in srgb, var(--fam) 13%, transparent); }
.nd-page .nd-slot__who { display: flex; align-items: center; gap: 8px; min-width: 0; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 36px; }
.nd-page .nd-slot__nm { font-size: var(--nu-fs-sm); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nd-page .nd-slot__who:hover .nd-slot__nm { color: var(--nba-200); }
.nd-page .nd-slot__open { font-size: var(--nu-fs-xs); color: var(--nu-text-3); grid-column: 2 / -1; }
.nd-page .nd-slot.need .nd-slot__open { color: var(--nu-warn); font-weight: 650; }
.nd-page .nd-slot__v { font-size: var(--nu-fs-sm); color: var(--nu-text-2); }
.nd-page .nd-slot--bn { min-height: 36px; grid-template-columns: 34px minmax(0, 1fr) auto auto; }
.nd-page .nd-slot--bn .nd-slot__pos { height: 20px; font-size: 10px; }
.nd-page .nd-slot--bn .nd-slot__who { min-height: 30px; }
.nd-page .nd-slot--bn .nu-pos { height: 18px; min-width: 24px; font-size: 10px; }
.nd-page .nd-sub-h { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0 6px; }
.nd-page .nd-sub-h--picks { margin-top: 18px; }

.nd-page .nd-pick { display: flex; align-items: center; gap: 8px; min-height: 40px; border-bottom: 1px solid var(--nu-line); font-size: var(--nu-fs-sm); }
.nd-page .nd-pick:last-child { border-bottom: 0; }
.nd-page .nd-pick .n { width: 34px; flex: none; font-size: 11px; color: var(--nu-text-3); }
.nd-page .nd-pick .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nd-page .nd-pick .tm { font-size: var(--nu-fs-xs); color: var(--nu-text-3); white-space: nowrap; max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.nd-page .nd-pick.mine .nm { color: var(--nba-300); }
.nd-page .nd-pick.flash { animation: nd-flash 1.6s var(--nu-ease); }
@keyframes nd-flash { from { background: var(--nu-good-soft); } to { background: transparent; } }
.nd-page .nd-picks-empty { padding: 6px 0; }
.nd-page .nd-mini-btn { flex: none; position: relative; min-width: 32px; min-height: 32px; border-radius: var(--nu-r-xs); border: 0; background: none; color: var(--nu-text-3); cursor: pointer; font-size: 13px; }
.nd-page .nd-mini-btn::after { content: ""; position: absolute; inset: -6px -2px; }
.nd-page .nd-mini-btn:hover { color: var(--nu-text); background: rgba(255,255,255,0.05); }
.nd-page .nd-mini-btn[aria-pressed="true"] { color: var(--nba-400); }
.nd-page .nd-review { border-radius: var(--nu-r-lg); background: rgba(124,58,237,0.08); box-shadow: inset 0 0 0 1px rgba(167,139,250,0.3); padding: 2px 14px; }
.nd-page .nd-review summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: var(--nu-fs-sm); font-weight: 700; color: #ddd6fe; }
.nd-page .nd-review summary::-webkit-details-marker { display: none; }
.nd-page .nd-review summary::after { content: "▸"; margin-left: auto; transition: transform var(--nu-dur-2) var(--nu-ease); }
.nd-page .nd-review[open] summary::after { transform: rotate(90deg); }
.nd-page .nd-review .nu-hint { margin: 0 0 6px; }

/* ── Phone/tablet thumb bar ───────────────────────────────────────────── */
.nd-page .nd-minibar { display: none; }
@media (max-width: 1023px) {
  .nd-page .nd-reco__go { display: none; } /* the thumb bar carries the one-tap Draft */
  .nd-page #app.nd-shell { padding-bottom: calc(var(--nd-mb-h) + var(--nu-8)); }
  .nd-page .nd-minibar {
    display: flex; align-items: center; gap: 8px; position: fixed; z-index: 105; left: 8px; right: 8px; bottom: calc(8px + var(--nu-safe-b));
    min-height: var(--nd-mb-h); padding: 8px; border-radius: var(--nu-r-lg);
    background: rgba(21,24,28,0.9); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
    border: 1px solid var(--nu-line-2); box-shadow: var(--nu-shadow-3);
    transition: border-color var(--nu-dur-2) var(--nu-ease), box-shadow var(--nu-dur-2) var(--nu-ease);
  }
  .nd-page.nd-on-clock .nd-minibar { border-color: var(--nu-accent-line); box-shadow: var(--nu-glow), var(--nu-shadow-3); }
  .nd-page .nu-toast-region { bottom: calc(var(--nd-mb-h) + 24px + var(--nu-safe-b)); }
  .nd-page .nd-thead { top: calc(var(--nd-nav-h) + var(--nd-clock-h) + var(--nd-gap) + var(--nd-filters-h)); }
}
@media (max-width: 768px) {
  .nd-page .nd-minibar { bottom: calc(var(--nu-tabbar-h) + 6px + var(--nu-safe-b)); }
  .nd-page .nu-toast-region { bottom: calc(var(--nu-tabbar-h) + var(--nd-mb-h) + 20px + var(--nu-safe-b)) !important; }
}
.nd-page .nd-mb-info { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 48px; padding: 2px 6px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--nu-r-md); }
.nd-page .nd-mb-slots { display: flex; gap: 3px; }
.nd-page .nd-mb-slot { flex: 1; max-width: 22px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.12); }
.nd-page .nd-mb-slot.on { background: var(--fam); }
.nd-page .nd-mb-slot.need { background: none; box-shadow: inset 0 0 0 1px var(--nu-warn); }
.nd-page .nd-mb-txt { display: flex; flex-direction: column; min-width: 0; width: 100%; line-height: 1.25; }
.nd-page .nd-mb-txt > * { max-width: 100%; }
.nd-page .nd-mb-txt b { font-size: var(--nu-fs-sm); font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-page .nd-mb-txt span { font-size: var(--nu-fs-xs); color: var(--nu-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-page.nd-on-clock .nd-mb-txt b { color: var(--nba-300); }
.nd-page .nd-mb-timer { flex: none; font-size: 20px; font-weight: 500; color: var(--nba-300); padding: 0 4px; }
.nd-page .nd-mb-timer.warn { color: var(--nu-warn); }
.nd-page .nd-mb-timer.urgent, .nd-page .nd-mb-timer.expired { color: var(--nu-bad); }
.nd-page .nd-mb-act { flex: none; max-width: 52%; }
.nd-page .nd-mb-draft { min-height: 48px; padding: 0 16px; font-size: 15px; display: flex; flex-direction: column; gap: 2px; line-height: 1.05; max-width: 100%; }
.nd-page .nd-mb-draft small { font-family: var(--nu-mono); font-size: 10px; font-weight: 500; opacity: 0.75; }

/* ── Player sheet ─────────────────────────────────────────────────────── */
.nd-page .nd-psheet__head { align-items: flex-start; padding: var(--nu-4) var(--nu-5); }
.nd-page .nd-ph { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--nu-4); }
.nd-page .nd-ph__text { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nd-page .nd-ph__name { font-size: var(--nu-fs-title); font-weight: 800; letter-spacing: var(--nu-track-tight); line-height: 1.1; margin: 0; outline: none; }
.nd-page .nd-ph__meta { flex-wrap: wrap; overflow: visible; }
.nd-page .nd-ph__x { flex: none; }
.nd-page .nd-psheet .nu-sheet__body { display: flex; flex-direction: column; gap: var(--nu-4); }
.nd-page .nd-why { margin: 0; padding: 10px 12px; border-radius: var(--nu-r-md); background: var(--nu-accent-soft); font-size: var(--nu-fs-sm); line-height: 1.5; color: var(--nu-text); }
.nd-page .nd-why .nu-eyebrow { margin-right: 6px; }
.nd-page .nd-ptiles .nu-stat__value { font-size: 24px; }
.nd-page .nd-psec { display: flex; flex-direction: column; gap: 8px; }
.nd-page .nd-psec__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nu-2); }
.nd-page .nd-pdetail { display: flex; flex-direction: column; gap: var(--nu-4); }
.nd-page .nd-pdetail:empty { display: none; }
.nd-page .nd-line { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 10px 6px; border-radius: var(--nu-r-md); background: var(--nu-s1); border: 1px solid var(--nu-line); }
.nd-page .nd-line > span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.nd-page .nd-line b { font-size: 18px; font-weight: 500; letter-spacing: -0.03em; }
.nd-page .nd-line small { font-family: var(--nu-mono); font-size: 10px; letter-spacing: var(--nu-track-caps); color: var(--nu-text-3); }
.nd-page .nd-line--skel { display: block; padding: 0; border: 0; background: none; }
.nd-page .nd-charts { display: grid; grid-template-columns: 1fr; gap: var(--nu-4); }
@media (min-width: 640px) { .nd-page .nd-charts { grid-template-columns: 1fr 1fr; } }
.nd-page .nd-chart { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border-radius: var(--nu-r-md); background: var(--nu-s1); border: 1px solid var(--nu-line); }
.nd-page .nd-chart svg { width: 100%; height: auto; }
.nd-page .nd-inj { font-size: var(--nu-fs-sm); }
.nd-page .nd-kv { padding: 12px 14px; border-radius: var(--nu-r-md); background: var(--nu-s1); border: 1px solid var(--nu-line); }
.nd-page .nd-full { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--nba-300); font-weight: 700; text-decoration: none; font-size: var(--nu-fs-sm); }
.nd-page .nd-full:hover { text-decoration: underline; text-underline-offset: 3px; }
.nd-page .nd-psheet .nu-sheet__foot .nu-btn--primary { flex: 1.4; }

/* ── Settings + About sheets ──────────────────────────────────────────── */
.nd-page .nd-settings-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.nd-page .nd-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nu-3); }
.nd-page .nd-fields .nu-input { font-family: var(--nu-mono); }
.nd-page .nd-fields-h { margin: var(--nu-5) 0 var(--nu-2); }
.nd-page .nd-slot-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nu-2); }
.nd-page .nd-slot-fields .nu-input { text-align: center; padding: 0 6px; }
.nd-page .nd-slot-fields .nu-field__label { font-family: var(--nu-mono); font-size: 11px; }
.nd-page #nd-settings-hint { margin: 0 0 var(--nu-4); }
.nd-page .nd-link { background: none; border: 0; padding: 10px 0; min-height: 40px; color: var(--nba-300); font: inherit; font-size: var(--nu-fs-sm); font-weight: 600; cursor: pointer; }
.nd-page .nd-settings-foot .nd-danger { flex: 0 0 auto; color: var(--nu-bad); margin-right: auto; padding: 0 10px; }
.nd-page .nd-settings-foot > .nu-btn:not(.nd-danger) { flex: 0 0 auto; min-width: 96px; }
.nd-page .nd-about-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: ab; }
.nd-page .nd-about-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font-size: var(--nu-fs-body); line-height: 1.55; color: var(--nu-text-2); counter-increment: ab; }
.nd-page .nd-about-list li::before { content: counter(ab); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--nu-accent-soft); color: var(--nba-300); font-family: var(--nu-mono); font-size: 12px; }
.nd-page .nd-about-list b { color: var(--nu-text); }
.nd-page .nd-about-foot { margin-top: var(--nu-5); }

/* ── Cheat sheet ──────────────────────────────────────────────────────── */
.nd-page .nd-cheat-head { display: flex; align-items: flex-start; gap: var(--nu-3); margin-bottom: var(--nu-4); }
.nd-page .nd-cheat-head p { margin-top: 4px; max-width: 70ch; }
.nd-page .nd-cheat-head .nu-btn { margin-left: auto; flex: none; min-height: 44px; }
.nd-page .nd-warn { font-size: var(--nu-fs-sm); padding: 8px 12px; border-radius: var(--nu-r-sm); margin-bottom: 6px; background: var(--nu-s1); box-shadow: inset 3px 0 0 var(--nu-text-3); color: var(--nu-text-2); }
.nd-page .nd-warn.warn { box-shadow: inset 3px 0 0 var(--nu-warn); }
.nd-page .nd-warn.danger { box-shadow: inset 3px 0 0 var(--nu-bad); }
.nd-page .nd-cs-rounds { list-style: none; margin: 0 0 var(--nu-5); padding: 0; background: var(--nu-s1); border: 1px solid var(--nu-line); border-radius: var(--nu-r-lg); overflow: hidden; }
.nd-page .nd-cs-rounds li { padding: 10px 12px; border-bottom: 1px solid var(--nu-line); }
.nd-page .nd-cs-rounds li:last-child { border-bottom: 0; }
.nd-page .nd-cs-rounds li.done { opacity: 0.6; }
.nd-page .nd-cs-rounds li.now { background: var(--nu-accent-soft); box-shadow: inset 3px 0 0 var(--nba-400); }
.nd-page .nd-cs-rh { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; margin-bottom: 6px; }
.nd-page .nd-cs-rounds .r { font-family: var(--nu-mono); font-size: 12px; font-weight: 700; color: var(--nba-300); }
.nd-page .nd-cs-rounds .pk { font-size: var(--nu-fs-sm); font-weight: 700; color: var(--nu-text); }
.nd-page .nd-cs-rounds .meta { font-size: var(--nu-fs-xs); color: var(--nu-text-3); }
.nd-page .nd-cs-rounds .got { font-size: var(--nu-fs-sm); font-weight: 650; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-basis: 100%; }
.nd-page .nd-cs-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: start; padding: 2px 0; }
.nd-page .nd-cs-row .lb { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--nu-text-3); padding-top: 13px; }
.nd-page .nd-cs-row.is-take .lb { color: var(--nu-good); }
.nd-page .nd-cs-row.is-wait .lb { color: var(--nu-text-2); }
.nd-page .nd-cs-row.is-could .lb { color: var(--nu-warn); }
.nd-page .nd-cs-row .tg { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.nd-page .nd-cs-row.is-gone .nd-cs-p { opacity: 0.7; }
.nd-page .nd-cs-p { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: var(--nu-r-pill); border: 1px solid var(--nu-line-2); background: var(--nu-s2); color: var(--nu-text); font: inherit; font-size: var(--nu-fs-xs); font-weight: 650; cursor: pointer; max-width: 100%; white-space: nowrap; overflow: hidden; }
.nd-page .nd-cs-p .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nd-page .nd-cs-p i { font-style: normal; font-family: var(--nu-mono); font-size: 10px; color: var(--nu-text-3); font-weight: 400; flex: none; }
.nd-page .nd-cs-p .pc { font-family: var(--nu-mono); font-size: 11px; font-weight: 700; flex: none; }
.nd-page .nd-cs-p .ex { font-size: 10px; color: var(--nu-text-3); font-weight: 500; flex: none; }
.nd-page .nd-cs-p .st { color: var(--nu-accent); font-weight: 700; }
.nd-page .nd-cs-p.need { border-color: var(--nu-accent-line); }
.nd-page .nd-cs-p.is-likely .pc, .nd-page .nd-cs-legend .is-likely { color: var(--nu-good); }
.nd-page .nd-cs-p.is-could .pc, .nd-page .nd-cs-legend .is-could { color: var(--nu-warn); }
.nd-page .nd-cs-p.is-gone .pc, .nd-page .nd-cs-legend .is-gone { color: var(--nu-bad); }
.nd-page .nd-cs-set { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--nu-3); padding: 8px 12px; border: 1px solid var(--nu-line); border-radius: var(--nu-r-md); background: var(--nu-s1); }
.nd-page .nd-cs-set__txt { font-size: var(--nu-fs-sm); color: var(--nu-text-2); flex: 1 1 220px; }
.nd-page .nd-cs-set .nu-btn, .nd-page .nd-cs-set .nu-chip { min-height: 44px; }
.nd-page .nd-cs-ask { margin-bottom: var(--nu-4); }
.nd-page .nd-cs-ask .nd-slotpick__chips { margin-top: 8px; }
.nd-page .nd-cs-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--nu-fs-xs); color: var(--nu-text-3); margin-bottom: var(--nu-3); }
.nd-page .nd-cs-sub { margin: -2px 0 var(--nu-2); }
.nd-page .nd-check { display: flex; gap: 10px; align-items: flex-start; margin: var(--nu-3) 0; min-height: 44px; cursor: pointer; }
.nd-page .nd-check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--nu-accent); }
.nd-page .nd-check .nu-hint { display: block; margin-top: 2px; font-weight: 400; }
.nd-page .nd-cs-h3 { margin: 0 0 var(--nu-2); }
.nd-page .nd-cs-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--nu-3); }
.nd-page .nd-cs-slot { border: 1px solid var(--nu-line); border-radius: var(--nu-r-md); padding: 10px 12px; background: var(--nu-s1); }
.nd-page .nd-cs-slot h4 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.nd-page .nd-cs-tier { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; padding: 4px 0; border-top: 1px solid var(--nu-line); }
.nd-page .nd-cs-tier .t { font-family: var(--nu-mono); font-size: 10.5px; color: var(--nu-text-3); padding-top: 7px; }
.nd-page .nd-cs-tier .ps { display: flex; flex-wrap: wrap; }
.nd-page .nd-cs-tier button { background: none; border: 0; color: var(--nu-text-2); font: inherit; font-size: var(--nu-fs-xs); padding: 6px; min-height: 44px; cursor: pointer; border-radius: 6px; }
.nd-page .nd-cs-tier button:hover { color: var(--nu-text); background: rgba(255,255,255,0.05); }
.nd-page .nd-cs-tier button em { font-style: normal; font-size: 9.5px; color: var(--nu-bad); font-weight: 700; }
.nd-page .nd-cs-tier button .sh { font-family: var(--nu-mono); font-size: 9.5px; color: var(--nu-good); font-weight: 700; }
.nd-page .nd-cs-tier button .sh.is-gone { color: var(--nu-text-3); }

.nd-page .nd-about-seo { margin-top: var(--nu-10); padding-top: var(--nu-5); border-top: 1px solid var(--nu-line); max-width: 80ch; }
.nd-page .nd-about-seo h2 { margin: 0 0 6px; }

/* ── Phones ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .nd-page #app.nd-shell { padding-top: var(--nu-3); }
  .nd-page { --nd-gap: 10px; }
  /* phones: the nav already says Board; the head is one row of controls */
  .nd-page .nd-head { flex-wrap: nowrap; align-items: center; margin-bottom: 6px; }
  .nd-page .nd-head__text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nd-page .nd-head__actions { flex: 1; }
  .nd-page .nd-views { margin-right: auto; }
  .nd-page .nd-views > button { padding: 0 12px; }
  .nd-page .nd-hbtn { width: 40px; padding: 0; }
  .nd-page .nd-hbtn .lbl-txt { display: none; }
  .nd-page .nd-status { margin-bottom: var(--nu-2); }
  .nd-page .nd-status__txt { white-space: normal; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .nd-page .nd-status__more { display: none; }
  .nd-page .nd-status__lg { display: inline; }
  .nd-page .nd-league { max-width: 44vw; }
  .nd-page .nd-setup__opts { grid-template-columns: 1fr; gap: var(--nu-3); }
  .nd-page .nd-setup__opt + .nd-setup__opt { padding-left: 0; border-left: 0; padding-top: var(--nu-3); border-top: 1px solid var(--nu-line); }

  .nd-page .nd-clock { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "num otc ctl" "tl tl ctl2"; padding: 8px 8px 8px 12px; column-gap: 12px; margin-left: -6px; margin-right: -6px; }
  .nd-page .nd-clock__num { gap: 10px; padding-right: 12px; }
  .nd-page .nd-clock__big { font-size: 22px; }
  .nd-page .nd-otc { flex-direction: column; align-items: flex-start; gap: 1px; }
  .nd-page .nd-otc__who { font-size: var(--nu-fs-sm); white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .nd-page .nd-otc__sub { font-size: var(--nu-fs-xs); white-space: normal; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .nd-page .nd-league { display: none !important; }
  /* Room for Leagues + Edit at 375: the sync pill gives way, never the buttons. */
  .nd-page .nd-sync { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .nd-page .nd-sync .nd-ago { display: none; }
  .nd-page .nd-status__edit { flex: none; }
  .nd-page .nd-degraded { flex-wrap: wrap; font-size: var(--nu-fs-xs); }
  .nd-page .nd-degraded > div { flex: 1 1 calc(100% - 40px); }
  .nd-page .nd-degraded .nu-btn { margin-left: 30px; }
  .nd-page .nd-timer { min-width: 60px; padding: 0 6px; }
  .nd-page .nd-timer .w { display: none; }
  .nd-page .nd-timer.paused .w { display: block; }
  .nd-page .nd-pause { min-width: 0; width: 44px; padding: 0; }
  .nd-page .nd-pause .lbl-txt { display: none; }
  /* row 2 on phones: timeline, then Reset + Undo (36px visual, 44px hit area) */
  .nd-page .nd-clock__ctl2 .nu-btn { min-height: 36px; }
  .nd-page .nd-resetbtn { padding: 0 10px; }
  .nd-page .nd-timer.me { min-width: 70px; }
  .nd-page .nd-timer.me .t { font-size: 18px; }
  .nd-page .nd-undo { width: 40px; padding: 0; }
  .nd-page .nd-undo .lbl-txt { display: none; }
  .nd-page .nd-ticker { padding-top: 2px; }

  .nd-page .nd-reco { padding: 12px; }
  .nd-page .nd-reco__main { flex-wrap: wrap; gap: 10px var(--nu-3); }
  .nd-page .nd-reco__who { flex: 1 1 60%; }
  .nd-page .nd-reco__name { font-size: 17px; }
  .nd-page .nd-reco__nums { gap: 12px; }
  .nd-page .nd-reco__num b { font-size: 22px; }
  .nd-page .nd-reco__num--2 { display: none; }
  .nd-page .nd-reco__go { flex: 1 1 100%; min-height: 48px; }
  .nd-page .nd-reco-why { font-size: var(--nu-fs-xs); }
  .nd-page .nd-reco__alts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -12px; padding-right: 12px; }
  .nd-page .nd-reco__alts::-webkit-scrollbar { display: none; }
  .nd-page .nd-alt { flex: none; }

  .nd-page .nd-filters__row { flex-wrap: wrap; }
  .nd-page .nd-search { flex: 1 1 100%; }
  .nd-page .nd-sel { flex: 1 1 0; min-width: 0; }

  .nd-page .nd-table { margin: 0 -6px; }
  .nd-page .nd-thead { display: none; }
  .nd-page .nd-row { grid-template-columns: 26px minmax(0, 1fr) auto 70px; column-gap: 10px; padding: 0 8px 0 4px; min-height: 64px; }
  .nd-page .nd-c-tier, .nd-page .nd-c-cf, .nd-page .nd-c-vorp, .nd-page .nd-c-mkt { display: none; }
  .nd-page .nd-c-rk b { font-size: 11px; }
  .nd-page .nd-c-rk small { font-size: 9px; }
  .nd-page .nd-row-main { gap: 10px; }
  .nd-page .nd-c-val small { display: block; }
  .nd-page .nd-draft { min-width: 64px; min-height: 40px; padding: 0 10px; }
  .nd-page .nd-row.reco .nd-name::after { display: none; }
  .nd-page .nd-meta .nd-gm { display: none; }
  .nd-page .nd-line b { font-size: 16px; }
  .nd-page .nd-fields { grid-template-columns: 1fr 1fr; }
  .nd-page .nd-slot-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nd-page .nd-cs-rounds li { padding: 10px 8px; }
  .nd-page .nd-cs-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .nd-page .nd-cs-row .lb { padding-top: 4px; }
  .nd-page .nd-cheat-head { flex-direction: column; }
  .nd-page .nd-cheat-head .nu-btn { margin-left: 0; }
}
@media (max-width: 380px) {
  .nd-page .nd-row { grid-template-columns: 22px minmax(0, 1fr) auto 62px; column-gap: 8px; }
  .nd-page .nd-row-main .nu-avatar-wrap .nu-avatar { --sz: 36px; }
}

/* ── Preferences ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nd-page .nd-sync .nd-dot, .nd-page .nd-pick.flash, .nd-page .nd-timer.me.urgent { animation: none; }
  .nd-page .nd-draft:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nd-page .nd-clock, .nd-page .nd-minibar { background: var(--nu-s2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
  .nd-page #rr-nav, .nd-page .nu-tabbar, .nd-page .nd-head, .nd-page .nd-status, .nd-page .nd-slotpick, .nd-page .nd-banner, .nd-page .nd-setup, .nd-page .nd-clock, .nd-page #nd-boardview, .nd-page .nd-side, .nd-page .nd-minibar, .nd-page .nd-about-seo, .nd-page .rr-footer, .nd-page .nu-toast-region, .nd-page .nd-cheat-head .nu-btn { display: none !important; }
  body.nd-page, .nd-page .nd-shell { background: #fff !important; color: #000 !important; padding: 0 !important; }
  .nd-page .nd-grid { display: block; }
  .nd-page .nd-cheat { display: block !important; color: #000; }
  .nd-page .nd-cheat *, .nd-page .nd-cs-p, .nd-page .nd-cs-tier button { color: #000 !important; background: none !important; border-color: #bbb !important; }
  .nd-page .nd-cheat .nu-avatar { display: none; }
  .nd-page .nd-cs-slots { grid-template-columns: repeat(3, 1fr); }
  .nd-page .nd-cs-rounds li, .nd-page .nd-cs-slot { break-inside: avoid; }
  .nd-page .nd-cs-set .nu-btn, .nd-page .nd-cs-set .nu-chip, .nd-page .nd-cs-ask { display: none !important; }
  .nd-page .nd-cs-p { min-height: 0; padding: 2px 6px; }
  .nd-page .nd-cs-tier button { min-height: 0; }
}