/* Channel deep-dive specific styles. Layered on top of main.css. */

.breadcrumb {
  font-size: 13px;
  color: var(--color-muted);
  margin: -8px 0 4px;
}
.breadcrumb a { color: var(--color-ink-soft); }
.breadcrumb .sep { margin: 0 8px; }

/* Tighter KPI tiles for channel pages where we want more in less space. */
.kpi-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.kpi-grid-compact .kpi-tile {
  padding: 14px;
  gap: 4px;
}
.kpi-grid-compact .kpi-value {
  font-size: 24px;
}
.kpi-grid-compact .kpi-spark {
  display: none;
}

/* Data table — clean, scannable, scrollable on small screens. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th,
.data-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
}
.data-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  font-weight: 600;
}
.data-table td { color: var(--color-ink); }
.data-table td.num,
.data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--color-bg); }
.data-table .truncate {
  max-width: 480px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* Device stacked bars (no chart library needed for this) */
.device-stack { display: flex; flex-direction: column; gap: 12px; }
.device-row { display: grid; grid-template-columns: 80px 1fr 80px; gap: 12px; align-items: center; font-size: 13px; }
.device-bar { background: var(--color-bg-subtle); border-radius: 999px; height: 12px; overflow: hidden; }
.device-bar-fill { height: 100%; background: var(--color-brand); border-radius: 999px; }
.device-label { color: var(--color-ink-soft); }
.device-value { text-align: right; color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* Content buckets — same visual language as .device-stack, with a
   wider label column so longer bucket names ("Conservation &
   Sustainability") don't truncate. */
.bucket-stack { display: flex; flex-direction: column; gap: 10px; }
.bucket-row { display: grid; grid-template-columns: minmax(140px, 1.4fr) 1fr 110px; gap: 12px; align-items: center; font-size: 13px; }
.bucket-bar { background: var(--color-bg-subtle); border-radius: 999px; height: 10px; overflow: hidden; }
.bucket-bar-fill { height: 100%; background: var(--color-brand); border-radius: 999px; }
/* "Other" bucket is a data-quality signal (paths that didn't match any
   classifier rule). Muted so it doesn't compete with strategic themes. */
.bucket-row.is-other .bucket-bar-fill { background: var(--color-ink-soft); opacity: 0.5; }
.bucket-label { color: var(--color-ink-soft); }
.bucket-value { text-align: right; color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* Stack two cards vertically inside one column of .row.two-col.
   Used on the Website page so Devices + Content buckets share the right
   column while Channels takes the full height on the left. */
.col-stack { display: flex; flex-direction: column; gap: 16px; }

/* Card height alignment when in two-column rows. Direct .card children
   only — a .col-stack should NOT be stretched to one card-height. */
.row.two-col > .card { height: 100%; display: flex; flex-direction: column; }
.row.two-col > .card > .card-body { flex: 1; }