.analytics {
  --analytics-ink: var(--ink, #182a37);
  --analytics-muted: var(--muted, #52636f);
  --analytics-line: var(--line, #d9e3e7);
  --analytics-accent: var(--accent, #167269);
  --analytics-paper: var(--surface, #fff);
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  color: var(--analytics-ink);
}

.analytics-panel {
  min-width: 0;
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid var(--analytics-line);
  border-radius: 1rem;
  background: var(--analytics-paper);
}

.analytics h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.55rem); }
.analytics-kicker {
  margin: 0 0 .4rem;
  color: var(--analytics-accent);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.analytics-note { margin: .7rem 0 0; color: var(--analytics-muted); font-size: .87rem; line-height: 1.5; }
.analytics-header, .analytics-controls { display: grid; gap: 1rem; align-items: end; }
.analytics-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.analytics-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.analytics-control { display: grid; min-width: 0; gap: .35rem; font-weight: 650; font-size: .86rem; }
.analytics-control select, .analytics-control input {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: .5rem .65rem;
  border: 1px solid var(--analytics-line);
  border-radius: .5rem;
  background: var(--analytics-paper);
  color: var(--analytics-ink);
  font: inherit;
}

.analytics-kpis, .analytics-coverage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin: 1.15rem 0 .75rem;
  font-variant-numeric: tabular-nums;
}
.analytics-coverage { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.analytics-coverage--themes { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.analytics-kpis div, .analytics-coverage div { min-width: 0; padding: .7rem; border-radius: .6rem; background: #f0f6f5; }
.analytics-kpis dt, .analytics-coverage dt { color: var(--analytics-muted); font-size: .78rem; line-height: 1.25; overflow-wrap: anywhere; }
.analytics-kpis dd, .analytics-coverage dd { margin: .18rem 0 0; font-weight: 700; }
.analytics-kpis dd { font-size: clamp(1.4rem, 4vw, 2rem); }
.analytics-coverage dd { font-size: 1.2rem; }
.analytics-kpis dd small { font-size: .85rem; font-weight: 500; color: var(--analytics-muted); }

.analytics-bars, .analytics-responses { margin: 1rem 0; padding: 0; list-style: none; }
.analytics-bars { display: grid; gap: .7rem; }
.analytics-bars li > div { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; font-size: .9rem; }
.analytics-bars li span { overflow-wrap: anywhere; }
.analytics-bars li strong { flex: none; font-variant-numeric: tabular-nums; }
.analytics-bars li small { color: var(--analytics-muted); font-weight: 500; }
.analytics-bars progress { display: block; width: 100%; height: .5rem; margin-top: .3rem; appearance: none; border: none; border-radius: .5rem; background: #e8f0ef; accent-color: var(--analytics-accent); }
.analytics-bars progress::-webkit-progress-bar { border-radius: .5rem; background: #e8f0ef; }
.analytics-bars progress::-webkit-progress-value { border-radius: .5rem; background: var(--analytics-accent); }
.analytics-bars progress::-moz-progress-bar { border-radius: .5rem; background: var(--analytics-accent); }

.analytics-scroll { max-width: 100%; margin-top: .75rem; overflow: auto; border: 1px solid var(--analytics-line); border-radius: .65rem; }
.analytics :is(.analytics-scroll, .analytics-responses):focus-visible { outline: 2px solid var(--analytics-accent); outline-offset: 2px; }
.analytics-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .84rem; font-variant-numeric: tabular-nums; }
.analytics-matrix td, .analytics-matrix th { min-width: 5.5rem; max-width: 13rem; padding: .65rem; border-right: 1px solid var(--analytics-line); border-bottom: 1px solid var(--analytics-line); overflow-wrap: anywhere; text-align: center; }
.analytics-matrix th { background: #f0f6f5; font-weight: 650; }
.analytics-matrix :is(th, td):last-child { border-right: 0; }
.analytics-matrix tbody tr:last-child > * { border-bottom: 0; }
.analytics-matrix th:first-child { position: sticky; left: 0; z-index: 1; min-width: 7rem; text-align: left; }
.analytics-matrix td small { display: block; margin-top: .14rem; color: #284950; font-size: .75rem; }
.analytics-matrix [data-intensity="1"] { background: #e7f5f0; }
.analytics-matrix [data-intensity="2"] { background: #c8eae1; }
.analytics-matrix [data-intensity="3"] { background: #a8ddd1; }
.analytics-matrix [data-intensity="4"] { background: #81cbbd; }

.analytics-empty { margin: 1rem 0 0; padding: 1rem; border: 1px dashed var(--analytics-line); border-radius: .55rem; color: var(--analytics-muted); font-size: .9rem; }
.analytics-responses { max-height: 28rem; overflow: auto; border: 1px solid var(--analytics-line); border-radius: .65rem; }
.analytics-responses li { padding: .8rem; }
.analytics-responses li + li { border-top: 1px solid var(--analytics-line); }
.analytics-responses li span { color: var(--analytics-muted); font-size: .76rem; overflow-wrap: anywhere; }
.analytics-responses li p { margin: .3rem 0 0; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.analytics-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 40rem) {
  .analytics-header, .analytics-controls { grid-template-columns: minmax(0, 1fr); }
  .analytics-kpis, .analytics-coverage { gap: .35rem; }
  .analytics-coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-kpis div, .analytics-coverage div { padding: .5rem; }
}