/**
 * Mobile News Board (mnb-*) — full-screen portrait overlay.
 * z-index 1130 matches the mobile workbench / waiver overlay tier.
 */

body.mnb-lock { overflow: hidden; }

/* The whole top nav stack stays reachable ABOVE the board so views/boards can
   be switched without closing News. STAGGERED, not equal: each bar's dropdown
   drops DOWN over the bar below it, so the header must out-rank the nav bar and
   the nav bar the context bar — otherwise a Board/View dropdown opens hidden
   behind the context bar. Overlay top is offset by _syncTop. */
body.mnb-lock .mobile-header      { position: relative; z-index: 1143; }
body.mnb-lock .mobile-nav-bar     { position: relative; z-index: 1142; }
body.mnb-lock .mobile-context-bar { position: relative; z-index: 1141; }
body.mnb-lock .mobile-dropdown    { z-index: 1200; }

.mnb-overlay {
    position: fixed;
    inset: 0;
    z-index: 1130;
    background: var(--jt-bg-deep);
    color: var(--jt-text-primary);
    display: none;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0);
}
/* JS pins the top to the nav stack's bottom edge; the header already carries
   the safe-area inset, so drop the duplicate padding. */
.mnb-overlay.mnb-below-header { padding-top: 0; }

/* ── header ── */
.mnb-head {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: var(--jt-bg-primary);
    border-bottom: 1px solid var(--jt-border-primary);
    flex: 0 0 auto;
}
.mnb-title { font-size: 0.95rem; font-weight: 700; }
.mnb-swept { margin-left: auto; font-size: 0.65rem; color: var(--jt-text-muted); }
.mnb-head-btn {
    background: var(--jt-bg-tertiary); border: 1px solid var(--jt-border-secondary);
    color: var(--jt-text-primary); border-radius: 8px;
    width: 34px; height: 34px; font-size: 0.9rem; flex: none;
}

/* ── triage ── */
.mnb-triage {
    display: flex; gap: 0.4rem; padding: 0.5rem 0.6rem;
    background: var(--jt-bg-primary);
    border-bottom: 1px solid var(--jt-border-primary);
    flex: 0 0 auto;
}
.mnb-tri {
    flex: 1; background: var(--jt-bg-tertiary);
    border: 1px solid transparent; border-radius: 10px;
    padding: 0.35rem 0.25rem; text-align: center; color: var(--jt-text-primary);
}
.mnb-tri.on { border-color: var(--jt-accent-teal); background: rgba(20, 184, 166, 0.1); }
.mnb-tri .n { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.1; }
.mnb-tri .l {
    display: block; font-size: 0.53rem; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--jt-text-muted); margin-top: 1px;
}
.mnb-tri.act .n { color: var(--jt-accent-red); }
.mnb-tri.wat .n { color: var(--jt-accent-amber); }
.mnb-tri.qui .n { color: var(--jt-text-secondary); }

/* ── filters ── */
.mnb-filters {
    display: flex; gap: 0.35rem; padding: 0.45rem 0.6rem;
    overflow-x: auto; flex: 0 0 auto; scrollbar-width: none;
    border-bottom: 1px solid var(--jt-border-primary);
}
.mnb-filters::-webkit-scrollbar { display: none; }
.mnb-f {
    flex: 0 0 auto; padding: 0.28rem 0.7rem; border-radius: 16px;
    border: 1px solid var(--jt-border-secondary); background: none;
    color: var(--jt-text-secondary); font-size: 0.72rem; white-space: nowrap;
}
.mnb-f.on { background: var(--jt-accent-blue); border-color: var(--jt-accent-blue); color: #fff; }
.mnb-f.mnb-bulk { background: var(--jt-bg-tertiary); }
.mnb-f.mnb-danger { color: var(--jt-accent-red); border-color: rgba(239, 68, 68, 0.4); }

/* ── screens ── */
.mnb-screens { flex: 1 1 auto; min-height: 0; position: relative; }
.mnb-screen { display: none; flex-direction: column; height: 100%; min-height: 0; }
.mnb-scroll { flex: 1 1 auto; overflow-y: auto; padding: 0.5rem 0.6rem 1rem; min-height: 0; }
.mnb-screen > .mnb-scroll { width: 100%; }

.mnb-ghdr {
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--jt-text-muted); padding: 0.5rem 0.15rem 0.35rem;
}
.mnb-ghdr.act { color: var(--jt-accent-red); }
.mnb-ghdr.wat { color: var(--jt-accent-amber); }

/* ── card ── */
.mnb-card {
    background: var(--jt-bg-secondary);
    border: 1px solid var(--jt-border-primary);
    border-radius: 12px; margin-bottom: 0.5rem; overflow: hidden; position: relative;
}
.mnb-card.b-act   { border-left: 3px solid var(--jt-accent-red); }
.mnb-card.b-watch { border-left: 3px solid var(--jt-accent-amber); }
.mnb-card.b-quiet { border-left: 3px solid var(--jt-bg-elevated); }
.mnb-card.dim { opacity: 0.6; }
.mnb-card.unread::after {
    content: ''; position: absolute; top: 9px; right: 9px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--jt-accent-blue);
}
.mnb-card.unread .mnb-hl { font-weight: 600; }

.mnb-body { padding: 0.55rem 0.65rem 0.45rem; }
.mnb-l1 { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; padding-right: 0.9rem; }
.mnb-l2 { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.25rem; }
.mnb-nm { font-size: 0.82rem; font-weight: 700; }
.mnb-tm { font-size: 0.62rem; color: var(--jt-text-muted); }
.mnb-own { font-size: 0.6rem; color: var(--jt-text-muted); font-style: italic; }
.mnb-tag {
    font-size: 0.52rem; font-weight: 700; padding: 1px 5px; border-radius: 3px;
    background: var(--jt-bg-tertiary); color: var(--jt-text-secondary);
}
.mnb-hl { font-size: 0.8rem; line-height: 1.35; margin-top: 0.3rem; }
.mnb-jr { font-size: 0.72rem; color: var(--jt-text-secondary); line-height: 1.4; margin-top: 0.28rem; }
.mnb-jr .who { color: var(--jt-accent-purple); font-weight: 700; }
.mnb-meta { font-size: 0.6rem; color: var(--jt-text-muted); margin-top: 0.3rem; }

.mnb-detail {
    margin-top: 0.45rem; padding-top: 0.45rem;
    border-top: 1px solid var(--jt-border-muted);
    font-size: 0.72rem; color: var(--jt-text-secondary); line-height: 1.45;
}
.mnb-detail p { margin: 0 0 0.3rem; }
.mnb-detail b { color: var(--jt-text-primary); }
.mnb-detail a { color: var(--jt-accent-blue); text-decoration: none; }

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

/* badges */
.mnb-b { font-size: 0.52rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; letter-spacing: 0.4px; }
.mnb-b.sell { background: rgba(239, 68, 68, 0.14); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }
.mnb-b.buy  { background: rgba(16, 185, 129, 0.16); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
.mnb-b.watchsig { background: rgba(245, 158, 11, 0.14); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }
.mnb-b.hold { background: rgba(148, 163, 184, 0.12); color: var(--jt-text-secondary); }
.mnb-b.fact { background: var(--jt-accent-purple); color: #fff; }
.mnb-b.urg-act   { background: rgba(239, 68, 68, 0.9); color: #fff; }
.mnb-b.urg-watch { background: rgba(245, 158, 11, 0.22); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); }
.mnb-b.urg-quiet { background: rgba(148, 163, 184, 0.12); color: var(--jt-text-secondary); }

/* ── CTAs — always visible, 44px touch targets ── */
.mnb-ctas {
    display: flex; gap: 0.4rem;
    padding: 0 0.65rem 0.6rem;
}
.mnb-cta {
    flex: 1; min-height: 40px; border-radius: 10px;
    background: var(--jt-bg-tertiary); border: 1px solid var(--jt-border-secondary);
    color: var(--jt-text-primary); font-size: 0.75rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 0.25rem;
}
.mnb-cta.rec { background: rgba(20, 184, 166, 0.14); border-color: var(--jt-accent-teal); color: #5eead4; }
.mnb-cta.ghost { flex: 0 0 46px; color: var(--jt-text-muted); }

/* ── my roster ── */
.mnb-trow {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--jt-border-muted);
    font-size: 0.78rem;
}
.mnb-trow .mnb-nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnb-dot {
    width: 20px; height: 20px; border-radius: 50%; flex: none; color: #fff;
    font-size: 0.6rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.mnb-dot.hi { background: var(--jt-accent-red); }
.mnb-dot.md { background: var(--jt-accent-amber); color: #3a2600; }
.mnb-dot.lo { background: var(--jt-bg-elevated); color: var(--jt-text-secondary); }

/* ── rings screen ── */
.mnb-shdr {
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--jt-text-muted); margin: 0.3rem 0 0.5rem;
}
.mnb-seg {
    display: block; width: 100%; text-align: left;
    background: var(--jt-bg-secondary); border: 1px solid var(--jt-border-secondary);
    border-radius: 10px; padding: 0.55rem 0.7rem; margin-bottom: 0.45rem;
    color: var(--jt-text-primary);
}
.mnb-seg.on { border-color: var(--jt-accent-teal); background: rgba(20, 184, 166, 0.1); }
.mnb-seg b { display: block; font-size: 0.82rem; }
.mnb-seg span { display: block; font-size: 0.66rem; color: var(--jt-text-muted); margin-top: 2px; }
.mnb-note {
    font-size: 0.68rem; color: var(--jt-text-muted); line-height: 1.5;
    margin: 0.6rem 0 0.8rem;
}
.mnb-linkbtn {
    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: 10px;
    padding: 0.55rem 0.7rem; font-size: 0.78rem;
}

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

/* ── misc ── */
.mnb-empty {
    padding: 2.2rem 1rem; text-align: center; color: var(--jt-text-muted);
    font-size: 0.85rem; line-height: 1.6; width: 100%;
}
.mnb-empty span { font-size: 0.72rem; }
.mnb-quiet {
    text-align: center; padding: 0.6rem; color: var(--jt-text-muted);
    font-size: 0.72rem; border-top: 1px solid var(--jt-border-muted);
}

/* ── bottom tab bar ── */
.mnb-tabbar {
    display: flex; flex: 0 0 auto;
    background: var(--jt-bg-primary);
    border-top: 1px solid var(--jt-border-primary);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.mnb-tb {
    flex: 1; background: none; border: none; position: relative;
    color: var(--jt-text-muted); font-size: 0.62rem;
    padding: 0.5rem 0 0.55rem;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.mnb-tb.on { color: var(--jt-accent-teal); }
.mnb-ic { font-size: 1.05rem; }
.mnb-cnt {
    position: absolute; top: 2px; right: 50%; margin-right: -22px;
    background: var(--jt-accent-red); color: #fff;
    font-size: 0.55rem; font-weight: 700; border-radius: 9px;
    padding: 0 5px; min-width: 15px; text-align: center;
}

/* Same amber-chip inversion as the desktop board — see news_board_v4.css. */
[data-theme="light"] .mnb-dot.md { background: #b45309; color: #fff; }
[data-theme="light"] .mnb-dot.lo { background: #cbd5e1; color: #334155; }
[data-theme="light"] .mnb-b.urg-watch,
[data-theme="light"] .mnb-b.watchsig {
    background: rgba(245, 158, 11, 0.16);
    color: #92400e;
    border-color: rgba(180, 83, 9, 0.45);
}
[data-theme="light"] .mnb-b.hold,
[data-theme="light"] .mnb-b.urg-quiet { background: rgba(100,116,139,.14); color: #334155; }
[data-theme="light"] .mnb-tri.wat .n { color: #b45309; }
[data-theme="light"] .mnb-ghdr.wat { color: #92400e; }