/* ============================================================================
   Multi-keyword overview table.

   The surface that makes a large install scannable. One row per keyword with
   volume, a per-row sentiment bar, net, a volume sparkline, top theme, breadth,
   and recency. Everything is sized so 25 rows stay readable without the page
   becoming a wall of text.
   ========================================================================== */

.overview-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.overview-title { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -.01em; margin: 4px 0 0; }
.overview-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.overview-search { display: flex; align-items: center; gap: 6px; }
.overview-search input {
  width: 190px; min-width: 0; padding: 7px 10px;
  color: var(--ink); background: #0c0e12;
  border: 1px solid var(--line-2); border-radius: 8px;
  font: 500 13px/1.2 var(--ui);
}
.overview-search input::placeholder { color: var(--faint); }
.overview-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61,220,151,.14); }
.overview-sorts { display: inline-flex; align-items: center; gap: 6px; }
.overview-count { margin: 0 0 12px; color: var(--faint); font-size: 11.5px; }
.overview-empty { margin: 0; padding: 26px; text-align: center; color: var(--faint); font-family: var(--mono); font-size: 13px; }
.overview-pager { justify-content: center; }

/* Horizontal scroll rather than column squashing: a keyword name is the row's
   identity, so it is the one column that must not wrap or truncate. */
.table-wrap { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.kwtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.kwtable thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 0 10px 9px; text-align: left; white-space: nowrap;
  color: var(--faint); font: 500 9.5px/1.4 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.kwtable tbody th, .kwtable tbody td {
  padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle;
}
.kwtable tbody tr { transition: background .12s; }
.kwtable tbody tr:hover { background: rgba(255,255,255,.022); }
.kwtable tbody tr.current { background: rgba(61,220,151,.06); }
.kwtable tbody tr.current .kwlink { color: var(--accent); }

.c-key { min-width: 190px; }
.kwlink { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.kwlink:hover { color: var(--accent); text-decoration: underline; }
.c-num { width: 1%; white-space: nowrap; text-align: right; color: var(--ink); }
.c-split { width: 132px; }
.th-split { display: inline-flex; gap: 3px; align-items: center; }
.th-split .dot { width: 7px; height: 7px; margin: 0; }
.c-net { width: 1%; white-space: nowrap; text-align: right; font-family: var(--display); font-weight: 600; font-size: 15px; }
.c-spark { width: 74px; }
.c-theme { max-width: 190px; }
.c-src { width: 1%; text-align: right; color: var(--dim); }
.c-seen { width: 1%; white-space: nowrap; color: var(--faint); font-size: 11.5px; }

/* Per-row sentiment bar, scaled to that row's own total so a quiet keyword is
   still legible next to a loud one. */
.kwmeter { display: flex; width: 120px; height: 7px; border-radius: 999px; overflow: hidden; background: #0c0e12; }
.kwmeter-fill { height: 100%; }
.kwmeter-fill.pos { background: linear-gradient(90deg, var(--accent-deep), var(--pos)); }
.kwmeter-fill.neu { background: var(--neu); opacity: .6; }
.kwmeter-fill.neg { background: var(--neg); }

@media (max-width: 900px) {
  .overview-head { align-items: stretch; }
  .overview-search input { width: 100%; }
  .overview-search { flex: 1 1 160px; }
  .c-theme, .c-src { display: none; }
}