/* ============================================================
   MASTER VORTEX — Chart news popup styles.
   Pairs with newspopup.js (card: #newsPopupCard, anchored inside
   .mv-chart-area, bottom-left over the price pane — the spot
   the reference platform uses for its "News on <symbol>" card).
   Tokens match styles.css / news.css (--green, --panel-2,
   --edge, --ink, --dim). House type rule: no bold anywhere —
   hierarchy comes from size, spacing and color.
   ============================================================ */
.np-card{
  position:absolute; left:12px; bottom:12px; z-index:40;
  width:min(348px, calc(100% - 24px));
  background:var(--panel-2); border:1px solid var(--edge); border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.6);
  padding:12px 38px 11px 14px; cursor:pointer;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.np-card.show{opacity:1; transform:none; pointer-events:auto}
.np-card[hidden]{display:none}
.np-card:hover{border-color:#3a4d6b}

.np-x{
  position:absolute; top:6px; right:6px; width:26px; height:26px;
  border:0; border-radius:8px; background:transparent;
  color:var(--dim); font-size:16px; line-height:1; cursor:pointer;
}
.np-x:hover{color:var(--ink); background:rgba(120,150,190,.14)}

.np-kicker{display:flex; align-items:baseline; gap:7px; margin-bottom:5px;
  font-size:12.5px; letter-spacing:.3px; color:var(--ink); white-space:nowrap; overflow:hidden}
.np-ico{font-size:12px; align-self:center}
.np-on{color:var(--dim)}
.np-sym{color:var(--ink)}
.np-src{color:var(--green); text-transform:uppercase; font-size:11px; letter-spacing:.6px;
  overflow:hidden; text-overflow:ellipsis}

.np-headline{font-size:14.5px; line-height:1.4; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.np-card:hover .np-headline{color:var(--green)}

.np-meta{display:flex; align-items:center; justify-content:space-between; margin-top:8px;
  font-size:11.5px}
.np-time{color:var(--green)}
.np-more{color:var(--dim)}
.np-card:hover .np-more{color:var(--ink)}

/* Small screens: the card spans the chart width like the mobile card. */
@media (max-width: 900px){
  .np-card{left:8px; bottom:8px; width:calc(100% - 16px)}
}