/* ============================================================================
   News Board — nb-* namespace
   Overlay board (sibling of #draftBoard inside #draftContainer). Mirrors the
   waiver board's structure: context strip on top, three panels below.
   Every colour is a --jt-* token; every size is calc(rem * var(--font-scale))
   so the global font slider works here too.
   ========================================================================= */

.news-board {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    gap: 0.6rem;
    padding: 0.6rem;
}

/* League-switch dim, matching .waiver-board's rule in styles_v4.css */
.news-board.board-league-loading { opacity: 0.35; pointer-events: none; }

/* ── context strip ─────────────────────────────────────────────────────── */
.nb-context {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.6rem;
    flex: 0 0 auto;
}
.nb-card {
    background: var(--jt-bg-secondary);
    border: 1px solid var(--jt-border-primary);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
}
.nb-card h4 {
    font-size: calc(0.58rem * var(--font-scale));
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--jt-text-muted);
    margin: 0 0 0.35rem;
    font-weight: 700;
}
.nb-big { font-size: calc(1.3rem * var(--font-scale)); font-weight: 700; line-height: 1.1; }
.nb-big.nb-alarm { color: var(--jt-accent-red); }
.nb-sub { font-size: calc(0.63rem * var(--font-scale)); color: var(--jt-text-secondary); margin-top: 0.1rem; }

.nb-triage { display: flex; gap: 0.4rem; }
.nb-tri {
    flex: 1; background: var(--jt-bg-tertiary); border-radius: 7px;
    padding: 0.3rem 0.4rem; text-align: center;
}
.nb-tri .n { font-size: calc(0.95rem * var(--font-scale)); font-weight: 700; line-height: 1.1; }
.nb-tri .l {
    font-size: calc(0.52rem * var(--font-scale)); text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--jt-text-muted); margin-top: 1px;
}
.nb-tri-act .n { color: var(--jt-accent-red); }
.nb-tri-wat .n { color: var(--jt-accent-amber); }
.nb-tri-qui .n { color: var(--jt-text-secondary); }

.nb-covbar {
    height: 5px; background: var(--jt-bg-tertiary); border-radius: 3px;
    margin-top: 0.45rem; overflow: hidden; display: flex;
}
.nb-covbar > i { height: 100%; }
.nb-covbar .c-act { background: var(--jt-accent-red); }
.nb-covbar .c-wat { background: var(--jt-accent-amber); }
.nb-covbar .c-qui { background: var(--jt-bg-elevated); }

.nb-fresh {
    display: flex; justify-content: space-between;
    font-size: calc(0.63rem * var(--font-scale));
    color: var(--jt-text-secondary);
    padding: 0.1rem 0;
    border-bottom: 1px solid var(--jt-border-muted);
}
.nb-fresh:last-child { border-bottom: none; }
.nb-fresh b { color: var(--jt-text-primary); font-weight: 600; }

/* ── main 3-col ────────────────────────────────────────────────────────── */
.nb-main {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 215px minmax(0, 1fr) 300px;
    gap: 0.6rem;
}
.nb-panel {
    background: var(--jt-bg-secondary);
    border: 1px solid var(--jt-border-primary);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.nb-panel > h3 {
    font-size: calc(0.62rem * var(--font-scale));
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--jt-text-secondary);
    padding: 0.5rem 0.65rem;
    margin: 0;
    border-bottom: 1px solid var(--jt-border-primary);
    background: var(--jt-bg-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}
.nb-sp { flex: 1; }
.nb-count { font-size: calc(0.55rem * var(--font-scale)); color: var(--jt-text-muted); text-transform: none; }

/* ── left rail ─────────────────────────────────────────────────────────── */
.nb-rail > div { overflow-y: auto; }
.nb-slot {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    border-bottom: 1px solid var(--jt-border-muted);
    font-size: calc(0.66rem * var(--font-scale));
    cursor: pointer;
}
.nb-slot:hover { background: var(--jt-bg-hover); }
.nb-nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-ndot {
    width: 16px; height: 16px; border-radius: 50%; flex: none; color: #fff;
    font-size: calc(0.5rem * var(--font-scale)); font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.nb-hi { background: var(--jt-accent-red); }
.nb-md { background: var(--jt-accent-amber); color: #3a2600; }
.nb-lo { background: var(--jt-bg-elevated); color: var(--jt-text-secondary); }
.nb-slottag {
    font-size: calc(0.48rem * var(--font-scale)); font-weight: 700;
    padding: 1px 4px; border-radius: 3px;
    background: var(--jt-bg-tertiary); color: var(--jt-text-secondary);
}
.nb-owner {
    font-size: calc(0.55rem * var(--font-scale));
    color: var(--jt-text-muted); font-style: italic;
}

/* position chips reuse the board's position palette */
.nb-pos {
    font-size: calc(0.5rem * var(--font-scale)); font-weight: 700; color: #fff;
    min-width: 24px; text-align: center; border-radius: 3px; padding: 1px 3px;
}
.nb-pos-qb { background: var(--pos-qb-dark, #ff3b5e); }
.nb-pos-rb { background: var(--pos-rb-dark, #228b22); }
.nb-pos-wr { background: var(--pos-wr-dark, #0066cc); }
.nb-pos-te { background: var(--pos-te-dark, #ff8c00); }
.nb-pos-k, .nb-pos-pk { background: var(--jt-accent-amber); color: #3a2600; }
.nb-pos-def, .nb-pos-dl, .nb-pos-lb, .nb-pos-db { background: #4b5563; }

/* ── toolbar ───────────────────────────────────────────────────────────── */
.nb-toolbar {
    display: flex; gap: 0.35rem; flex-wrap: wrap;
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid var(--jt-border-primary);
    flex: 0 0 auto;
}
.nb-chip {
    padding: 0.15rem 0.6rem; border-radius: 20px;
    border: 1px solid var(--jt-border-secondary);
    background: none; color: var(--jt-text-secondary);
    font-size: calc(0.64rem * var(--font-scale)); cursor: pointer;
    white-space: nowrap;
}
.nb-chip:hover { background: var(--jt-bg-hover); }
.nb-chip.on { background: var(--jt-accent-blue); border-color: var(--jt-accent-blue); color: #fff; }
.nb-ct { opacity: 0.72; margin-left: 0.2rem; font-size: 0.92em; }

.nb-bulk { display: flex; gap: 0.28rem; text-transform: none; letter-spacing: 0; }
.nb-bbtn {
    background: var(--jt-bg-tertiary); border: 1px solid var(--jt-border-secondary);
    color: var(--jt-text-secondary); border-radius: 6px;
    padding: 0.14rem 0.45rem; font-size: calc(0.58rem * var(--font-scale));
    cursor: pointer; white-space: nowrap;
}
.nb-bbtn:hover { background: var(--jt-bg-elevated); color: var(--jt-text-primary); }
.nb-bbtn.nb-danger { color: var(--jt-accent-red); border-color: rgba(239, 68, 68, 0.35); }
.nb-bbtn b { opacity: 0.72; font-weight: 600; }

/* ── feed ──────────────────────────────────────────────────────────────── */
.nb-feed { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.nb-ghdr {
    font-size: calc(0.55rem * var(--font-scale));
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--jt-text-muted);
    padding: 0.45rem 0.65rem 0.28rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.nb-ghdr.nb-g-act { color: var(--jt-accent-red); }
.nb-ghdr.nb-g-wat { color: var(--jt-accent-amber); }
.nb-ln { flex: 1; height: 1px; background: var(--jt-border-muted); }

.nb-item { border-bottom: 1px solid var(--jt-border-muted); position: relative; }
.nb-b-act   { box-shadow: inset 3px 0 0 var(--jt-accent-red); }
.nb-b-watch { box-shadow: inset 3px 0 0 var(--jt-accent-amber); }
.nb-b-quiet { box-shadow: inset 3px 0 0 var(--jt-bg-elevated); }
.nb-item.nb-dismissed { opacity: 0.55; }
.nb-item.nb-unread::after {
    content: ''; position: absolute; top: 10px; right: 9px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--jt-accent-blue);
}
.nb-item.nb-unread .nb-hl { font-weight: 600; }

.nb-irow { display: flex; gap: 0.5rem; padding: 0.5rem 0.65rem; cursor: pointer; }
.nb-irow:hover { background: var(--jt-bg-hover); }
.nb-ibody { flex: 1; min-width: 0; }
.nb-l1 {
    display: flex; align-items: center; gap: 0.28rem;
    flex-wrap: wrap; margin-bottom: 0.18rem; padding-right: 0.7rem;
}
.nb-pname { font-size: calc(0.7rem * var(--font-scale)); font-weight: 600; }
.nb-team { font-size: calc(0.58rem * var(--font-scale)); color: var(--jt-text-muted); }
.nb-hl {
    font-size: calc(0.7rem * var(--font-scale));
    line-height: 1.35; margin-bottom: 0.15rem; color: var(--jt-text-primary);
}
.nb-jr {
    font-size: calc(0.64rem * var(--font-scale));
    color: var(--jt-text-secondary); line-height: 1.35;
}
.nb-who { color: var(--jt-accent-purple); font-weight: 700; }
.nb-meta {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    margin-top: 0.25rem;
    font-size: calc(0.55rem * var(--font-scale)); color: var(--jt-text-muted);
}
.nb-sep { opacity: 0.5; }
.nb-react {
    margin-left: auto; align-self: flex-start;
    background: var(--jt-bg-tertiary); border: 1px solid var(--jt-border-secondary);
    color: var(--jt-text-primary); border-radius: 6px;
    padding: 0.13rem 0.5rem; font-size: calc(0.6rem * var(--font-scale));
    cursor: pointer; white-space: nowrap;
}
.nb-react:hover { background: var(--jt-accent-teal); border-color: var(--jt-accent-teal); color: #042f2e; }

/* signal + urgency badges */
.nb-badge {
    display: inline-block; padding: 1px 5px; border-radius: 4px;
    font-size: calc(0.5rem * var(--font-scale)); font-weight: 700; letter-spacing: 0.4px;
}
.nb-sell { background: rgba(239, 68, 68, 0.14); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }
.nb-buy  { background: rgba(16, 185, 129, 0.16); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
.nb-watchsig { background: rgba(245, 158, 11, 0.14); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }
.nb-hold { background: rgba(148, 163, 184, 0.12); color: var(--jt-text-secondary); border: 1px solid rgba(148, 163, 184, 0.35); }
.nb-fact { background: var(--jt-accent-purple); color: #fff; }
.nb-urg-high { background: rgba(239, 68, 68, 0.9); color: #fff; }
.nb-urg-med  { background: rgba(245, 158, 11, 0.22); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); }
.nb-urg-low  { background: rgba(148, 163, 184, 0.12); color: var(--jt-text-secondary); }

/* ── expanded react card ───────────────────────────────────────────────── */
.nb-react-card { background: var(--jt-bg-primary); border-top: 1px solid var(--jt-border-primary); }
.nb-rwrap {
    display: grid; grid-template-columns: 1.25fr 1fr 1.1fr;
    gap: 0.75rem; padding: 0.65rem 0.8rem;
}
.nb-rwrap > div { min-width: 0; }
.nb-react-card h5 {
    font-size: calc(0.53rem * var(--font-scale));
    text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--jt-text-muted); margin: 0 0 0.35rem;
}
.nb-react-card ul { list-style: none; margin: 0; padding: 0; }
.nb-react-card li {
    font-size: calc(0.63rem * var(--font-scale));
    color: var(--jt-text-secondary); padding: 0.12rem 0; line-height: 1.4;
}
.nb-react-card li::before { content: '▸ '; color: var(--jt-accent-teal); }
.nb-expo { display: flex; flex-direction: column; gap: 0.28rem; }
.nb-ex {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--jt-bg-tertiary); border-radius: 6px;
    padding: 0.25rem 0.5rem; font-size: calc(0.63rem * var(--font-scale));
}
.nb-ex .k { color: var(--jt-text-muted); font-size: calc(0.55rem * var(--font-scale)); }
.nb-ex .v { font-weight: 600; }

.nb-acts { display: flex; flex-direction: column; gap: 0.32rem; }
.nb-act {
    display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left;
    background: var(--jt-bg-tertiary); border: 1px solid var(--jt-border-secondary);
    border-radius: 8px; padding: 0.38rem 0.55rem;
    color: var(--jt-text-primary); font-size: calc(0.64rem * var(--font-scale));
    cursor: pointer;
}
.nb-act:hover { background: var(--jt-bg-elevated); }
.nb-act.rec { outline: 1.5px solid var(--jt-accent-teal); background: rgba(20, 184, 166, 0.09); }
.nb-act .ico { font-size: calc(0.78rem * var(--font-scale)); flex: none; }
.nb-act .tx { flex: 1; min-width: 0; }
.nb-act .tx b { display: block; }
.nb-act .tx span {
    display: block; font-size: calc(0.53rem * var(--font-scale));
    color: var(--jt-text-muted); margin-top: 1px;
}
.nb-src {
    padding: 0 0.8rem 0.6rem;
    font-size: calc(0.55rem * var(--font-scale)); color: var(--jt-text-muted);
}
.nb-src a { color: var(--jt-accent-blue); text-decoration: none; }
.nb-src a:hover { text-decoration: underline; }

/* ── right side ────────────────────────────────────────────────────────── */
.nb-side-body { padding: 0.6rem 0.65rem; overflow-y: auto; }
.nb-segwrap {
    display: flex; border: 1px solid var(--jt-border-secondary);
    border-radius: 8px; overflow: hidden;
}
.nb-seg {
    flex: 1; padding: 0.35rem 0.3rem; border: none; border-right: 1px solid var(--jt-border-secondary);
    background: var(--jt-bg-tertiary); color: var(--jt-text-secondary);
    font-size: calc(0.62rem * var(--font-scale)); cursor: pointer;
}
.nb-seg:last-child { border-right: none; }
.nb-seg.on { background: var(--jt-accent-teal); color: #042f2e; font-weight: 700; }
.nb-hint {
    font-size: calc(0.58rem * var(--font-scale)); color: var(--jt-text-muted);
    line-height: 1.5; margin: 0.5rem 0 0.7rem;
}
.nb-hint b { color: var(--jt-text-secondary); }
.nb-link {
    display: block; width: 100%; text-align: left;
    background: var(--jt-bg-tertiary); border: 1px solid var(--jt-border-secondary);
    color: var(--jt-text-primary); border-radius: 7px;
    padding: 0.4rem 0.55rem; margin-bottom: 0.35rem;
    font-size: calc(0.64rem * var(--font-scale)); cursor: pointer;
}
.nb-link:hover { background: var(--jt-bg-elevated); }

/* ── Pro gate ──────────────────────────────────────────────────────────── */
.nb-locked {
    font-size: calc(0.63rem * var(--font-scale));
    color: var(--jt-text-muted);
    background: var(--jt-bg-tertiary);
    border: 1px dashed var(--jt-border-secondary);
    border-radius: 6px; padding: 0.3rem 0.5rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
}
.nb-locked:hover { border-color: var(--jt-accent-teal); color: var(--jt-text-secondary); }
.nb-locked b { color: var(--jt-text-secondary); font-weight: 600; }
.nb-pro {
    background: var(--jt-gradient-pro, linear-gradient(135deg, #0ea5e9, #3b82f6));
    color: #fff; font-size: calc(0.47rem * var(--font-scale)); font-weight: 700;
    padding: 1px 5px; border-radius: 4px; letter-spacing: 0.4px;
}

/* ── misc ──────────────────────────────────────────────────────────────── */
.nb-empty {
    padding: 1.4rem 0.8rem; text-align: center;
    color: var(--jt-text-muted); font-size: calc(0.68rem * var(--font-scale));
}
.nb-quiet-toggle {
    padding: 0.45rem; text-align: center; cursor: pointer;
    font-size: calc(0.6rem * var(--font-scale)); color: var(--jt-text-muted);
    border-top: 1px solid var(--jt-border-muted);
}
.nb-quiet-toggle:hover { color: var(--jt-text-secondary); background: var(--jt-bg-hover); }

/* Unread count on the tab itself */
#showNewsBtn[data-news-count]:not([data-news-count=''])::after {
    content: attr(data-news-count);
    display: inline-block; margin-left: 0.3rem;
    background: var(--jt-accent-red); color: #fff;
    font-size: calc(0.5rem * var(--font-scale)); font-weight: 700;
    border-radius: 9px; padding: 0 5px; vertical-align: middle;
}
/* ★ still wins on a premium tab — its ::after is the star, so the count
   rides a separate rule and both need to coexist: premium tabs show the
   star INSTEAD of the count (the count lives in the board's own header). */
#showNewsBtn.premium[data-news-count]:not([data-news-count=''])::after {
    content: '★'; background: none; color: var(--jt-accent-amber-hover);
    padding: 0; font-size: inherit;
}

@media (max-width: 1100px) {
    .nb-main { grid-template-columns: 1fr; }
    .nb-rwrap { grid-template-columns: 1fr; }
}

/* ── Context bar: hide the roster-only controls ────────────────────────────
   The News board reuses #contextRoster (switchContextHeader maps 'news' → it),
   which arrives carrying the whole roster toolbar. Same technique the waiver
   board uses via .waivers-ctx — plus a few more, because News has no grid, no
   week, and nothing to manage: Manage, Pick Trades and Show Picks all act on a
   roster view that isn't on screen.

   What deliberately STAYS: Player List, Inbox (trade offers are the adjacent
   thing you'd act on after reading news), Reports, and the refresh button. */
#contextRoster.news-ctx .week-selector,
#contextRoster.news-ctx #unitSelectorSlotRoster,
#contextRoster.news-ctx #headerRosterViewToggle,
#contextRoster.news-ctx #rookieShortcutBtn,
#contextRoster.news-ctx #tradedShortcutBtn,
#contextRoster.news-ctx #expiringShortcutWrap,
#contextRoster.news-ctx #rosterWhatIfBtn,
#contextRoster.news-ctx #rosterManageBtn,
#contextRoster.news-ctx #rosterPickTradesBtn,
#contextRoster.news-ctx #showPicksBtn {
    display: none !important;
}

/* Franchise picker in the feed header — reads as part of the title, not a form
   control, so the header still scans as a sentence: "Player news · my roster". */
.nb-fsel {
    background: var(--jt-bg-tertiary);
    border: 1px solid var(--jt-border-secondary);
    color: var(--jt-text-primary);
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
    font-size: calc(0.62rem * var(--font-scale));
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    max-width: 190px;
}
.nb-fsel:hover { background: var(--jt-bg-elevated); }
.nb-fsel:focus { outline: 1px solid var(--jt-accent-teal); }

/* ── Light-theme contrast ──────────────────────────────────────────────────
   These colours were picked against the dark board and several invert badly.
   The worst: .nb-md is an amber CHIP with near-black text, but the theme flips
   --jt-accent-amber to amber-700 (#b45309) in light mode for its own contrast
   reasons — so the chip went dark and the dark text vanished into it. Anything
   pairing a token-coloured background with a hardcoded ink is exposed to that,
   so those pairs are pinned here instead of tracking the token. */
[data-theme="light"] .nb-ndot.nb-md {
    background: #b45309;            /* pinned: don't follow the token */
    color: #fff;                     /* ~5.4:1 */
}
[data-theme="light"] .nb-ndot.nb-lo {
    background: #cbd5e1;
    color: #334155;
}

/* Amber badges: light wash + amber-800 ink, rather than amber-400 ink that
   only ever worked on a dark cell. */
[data-theme="light"] .nb-b.urg-med,
[data-theme="light"] .nb-badge.nb-urg-med,
[data-theme="light"] .nb-watchsig,
[data-theme="light"] .nb-badge.nb-watchsig {
    background: rgba(245, 158, 11, 0.16);
    color: #92400e;                  /* amber-800 — ~6.4:1 on the wash */
    border-color: rgba(180, 83, 9, 0.45);
}
[data-theme="light"] .nb-b.hold,
[data-theme="light"] .nb-badge.nb-hold,
[data-theme="light"] .nb-b.urg-low,
[data-theme="light"] .nb-badge.nb-urg-low {
    background: rgba(100, 116, 139, 0.14);
    color: #334155;
    border-color: rgba(100, 116, 139, 0.4);
}
[data-theme="light"] .nb-badge.nb-sell,
[data-theme="light"] .nb-b.sell { color: #b91c1c; border-color: rgba(185,28,28,.4); }
[data-theme="light"] .nb-badge.nb-buy,
[data-theme="light"] .nb-b.buy  { color: #15803d; border-color: rgba(21,128,61,.4); }

/* Group headers + triage numerals: the amber token is legible at this weight,
   but the watch header sits at 9.5px uppercase where it isn't. */
[data-theme="light"] .nb-ghdr.nb-g-wat { color: #92400e; }
[data-theme="light"] .nb-tri-wat .n    { color: #b45309; }

/* Triage tiles are buttons now (they filter) — make that legible as a control. */
.nb-tri { cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s; }
.nb-tri:hover { background: var(--jt-bg-elevated); }
.nb-tri.on { border-color: var(--jt-accent-teal); background: rgba(20, 184, 166, 0.12); }