/* ============================================================================
   Hero: scoped headline, net-sentiment meter, and the volume/sentiment chart.

   The chart is CSS columns rather than a canvas or an SVG chart library. That
   is a deliberate trade: it needs no runtime, no build step, and it degrades to
   readable text in the accessibility tree, which matters more here than hover
   fidelity on a loopback dashboard.
   ========================================================================== */

.hero { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; overflow: hidden; }
.hero-left { padding: 28px 30px; border-right: 1px solid var(--line); position: relative; }
.hero-left::before {
  content: ""; position: absolute; right: -120px; top: -120px; width: 320px; height: 320px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(61,220,151,.07), transparent 65%);
}
.subject { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-family: var(--display); font-style: italic; font-weight: 600; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.02; letter-spacing: -.015em; margin: 10px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.headline { display: flex; align-items: baseline; gap: 14px; margin: 16px 0 26px; }
.big-num { font-family: var(--display); font-weight: 600; font-size: clamp(54px, 8vw, 78px); line-height: .85; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.big-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); line-height: 1.35; }

.net-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.net-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.net-val { font-family: var(--display); font-weight: 600; font-size: 26px; font-variant-numeric: tabular-nums; }

.meter { position: relative; display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: #0c0e12; border: 1px solid var(--line); }
.meter-seg { height: 100%; }
.meter-seg.pos { background: linear-gradient(90deg, var(--accent-deep), var(--pos)); }
.meter-seg.neu { background: var(--neu); opacity: .65; }
.meter-seg.neg { background: linear-gradient(90deg, #b83f33, var(--neg)); }
.meter-needle { position: absolute; top: -4px; width: 2px; height: 20px; background: var(--ink); transform: translateX(-1px); box-shadow: 0 0 8px rgba(255,255,255,.5); border-radius: 2px; }
.meter-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12.5px; color: var(--dim); }

.hero-right { min-width: 0; padding: 22px 26px 18px; display: flex; flex-direction: column; }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; margin-bottom: 14px; }
.chart-head .eyebrow { white-space: nowrap; }
.chart-range { margin-left: auto; color: var(--faint); font: 9.5px/1.4 var(--mono); letter-spacing: .04em; text-align: right; white-space: nowrap; }
.chart { flex: 1; display: flex; flex-direction: column; min-height: 210px; padding-top: 8px; }
.chart-empty { align-items: center; justify-content: center; }
.chart-none { color: var(--faint); font-family: var(--mono); font-size: 12.5px; }
.bars { flex: 1; display: flex; align-items: flex-end; gap: 5px; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.col { flex: 1; display: flex; align-items: flex-end; justify-content: center; height: 100%; min-width: 0; }
.stack { width: 100%; max-width: 30px; display: flex; flex-direction: column; border-radius: 5px 5px 0 0; overflow: hidden; min-height: 3px; transition: transform .15s, filter .15s; }
.stack.zero { min-height: 0; }
.col:hover .stack { transform: translateY(-3px); filter: brightness(1.12); }
.seg { width: 100%; min-height: 0; }
.seg.pos { background: linear-gradient(180deg, var(--pos), var(--accent-deep)); }
.seg.neu { background: var(--neu); opacity: .55; }
.seg.neg { background: var(--neg); }
.xaxis { display: flex; gap: 5px; min-height: 23px; padding-top: 9px; }
.xaxis span { position: relative; flex: 1; min-width: 0; height: 14px; }
.xaxis b { position: absolute; left: 50%; transform: translateX(-50%); color: var(--faint); font: 400 9.5px/1.4 var(--mono); white-space: nowrap; }
.xaxis .first b { left: 0; transform: none; }
.xaxis .last b { right: 0; left: auto; transform: none; }

/* ---- strip --------------------------------------------------------------- */
.strip { display: grid; grid-template-columns: 1.6fr 1fr .7fr; }
.cell { padding: 16px 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.cell:last-child { border-right: none; }
.cell-k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.cell-v { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
.cell-v.mono { font-family: var(--mono); font-size: 22px; }
.cell-sources { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-left { border-right: none; border-bottom: 1px solid var(--line); }
  .strip { grid-template-columns: 1fr; }
  .cell { border-right: none; border-bottom: 1px solid var(--line); }
  .cell:last-child { border-bottom: none; }
}