/* AV DS Echo Patterns — reusable operational patterns for Echo Sounder.
   First adopted on the home page; keep selectors scoped when adapting legacy UI. */

:root {
  --echo-home-gap: var(--space-5);
  --echo-page-gap: var(--space-4);
  --echo-control-height: 38px;
  --echo-panel-border: 1px solid var(--color-border-subtle);
  --echo-panel-radius: var(--radius-md);
  --echo-panel-shadow: var(--shadow-xs);
}

.avds-echo-app {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--color-bg-subtle), transparent 35%), transparent 260px),
    var(--color-bg);
}

.avds-echo-app h1,
.avds-echo-app h2,
.avds-echo-app h3,
.avds-echo-app h4,
.avds-echo-app h5,
.avds-echo-app h6,
.avds-echo-app .btn,
.avds-echo-app .badge,
.avds-echo-app .form-control,
.avds-echo-app .form-select,
.avds-echo-app .nav-link,
.avds-echo-app .stat-label,
.avds-echo-app .stat-card__label,
.avds-echo-app .kpi-label {
  letter-spacing: 0;
}

.avds-page-shell {
  display: flex;
  flex-direction: column;
  gap: var(--echo-page-gap);
  max-width: 1360px;
}

.avds-page-shell > .py-2,
.avds-page-shell > .py-3 {
  padding-top: 0 !important;
}

.avds-echo-app .page-header,
.avds-echo-app .digest-header,
.avds-echo-app .pen-header {
  align-items: flex-start;
  margin-bottom: var(--space-4);
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  gap: var(--space-3);
}

.avds-echo-app .page-header h1,
.avds-echo-app .page-header h2,
.avds-echo-app .digest-header h2,
.avds-echo-app .pen-header h1 {
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.avds-echo-app .page-header .subtitle,
.avds-echo-app .digest-header .generated-at,
.avds-echo-app .pen-header .sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.avds-echo-app .card,
.avds-echo-app .stat-card,
.avds-echo-app .tg-stat-card,
.avds-echo-app .kpi-card,
.avds-echo-app .digest-card,
.avds-echo-app .result-card,
.avds-echo-app .campaign-card,
.avds-echo-app .channel-card,
.avds-echo-app .yt-channel-card,
.avds-echo-app .post-card,
.avds-echo-app .qnav-card,
.avds-echo-app .sankey-chart,
.avds-echo-app .cascade-chart,
.avds-echo-app .survival-chart,
.avds-echo-app .granger-card,
.avds-echo-app .cluster-card,
.avds-echo-app .echo-card {
  background: var(--color-surface) !important;
  border: var(--echo-panel-border) !important;
  border-radius: var(--echo-panel-radius) !important;
  box-shadow: var(--echo-panel-shadow);
}

.avds-echo-app .card:hover,
.avds-echo-app .channel-card:hover,
.avds-echo-app .yt-channel-card:hover,
.avds-echo-app .qnav-card:hover {
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.avds-echo-app .card-header,
.avds-echo-app .digest-card .card-header {
  background: color-mix(in oklab, var(--color-bg-subtle), var(--color-surface) 62%) !important;
  border-bottom: 1px solid var(--color-divider) !important;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-snug);
}

.avds-echo-app .stat-card,
.avds-echo-app .tg-stat-card,
.avds-echo-app .kpi-card {
  min-width: 0;
  padding: var(--space-4) !important;
}

.avds-echo-app .stat-value,
.avds-echo-app .stat-card__value,
.avds-echo-app .tg-stat-card .stat-value,
.avds-echo-app .kpi-value {
  color: var(--color-text) !important;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2vw, 1.8rem) !important;
  font-weight: 700;
  line-height: var(--leading-tight);
}

.avds-echo-app .stat-label,
.avds-echo-app .stat-card__label,
.avds-echo-app .tg-stat-card .stat-label,
.avds-echo-app .kpi-label {
  color: var(--color-text-muted) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600;
  text-transform: none;
}

.avds-echo-app .btn {
  min-height: 34px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
}

.avds-echo-app .btn-sm {
  min-height: 30px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}

.avds-echo-app .btn-outline-primary,
.avds-echo-app .btn-outline-secondary,
.avds-echo-app .quick-btn,
.avds-echo-app .filter-btn {
  border-color: var(--color-border) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-muted) !important;
}

.avds-echo-app .btn-outline-primary:hover,
.avds-echo-app .btn-outline-secondary:hover,
.avds-echo-app .quick-btn:hover,
.avds-echo-app .quick-btn.active,
.avds-echo-app .filter-btn:hover,
.avds-echo-app .filter-btn.active {
  border-color: var(--color-accent) !important;
  background: var(--color-accent-subtle) !important;
  color: var(--color-accent) !important;
}

.avds-echo-app .form-control,
.avds-echo-app .form-select,
.avds-echo-app .pen-filters select {
  min-height: var(--echo-control-height);
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  font-size: var(--text-sm);
}

.avds-echo-app .form-control:focus,
.avds-echo-app .form-select:focus,
.avds-echo-app .pen-filters select:focus {
  border-color: var(--color-accent) !important;
  box-shadow: var(--shadow-focus) !important;
}

.avds-echo-app .search-hero {
  margin-bottom: var(--space-4) !important;
  padding: var(--space-4);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--color-accent-subtle), transparent 35%), transparent 62%),
    var(--color-surface);
  border: var(--echo-panel-border);
  border-radius: var(--echo-panel-radius);
  box-shadow: var(--echo-panel-shadow);
}

.avds-echo-app .search-hero__bar {
  margin-bottom: var(--space-3);
}

.avds-echo-app .search-hero__input {
  height: 48px;
  border: 1px solid var(--color-border) !important;
  border-right: 0 !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
  background: var(--color-bg) !important;
  font-size: var(--text-base);
}

.avds-echo-app .search-hero__btn {
  height: 48px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.avds-echo-app .search-hero .chip,
.avds-echo-app .search-hero .select-year {
  min-height: 32px;
  border-width: 1px;
  font-size: var(--text-xs);
  letter-spacing: 0;
}

.avds-echo-app .input-group > .form-control,
.avds-echo-app .input-group > .form-select,
.avds-echo-app .input-group > .btn {
  min-height: 40px;
}

.avds-echo-app .table {
  --bs-table-bg: var(--color-surface);
  --bs-table-striped-bg: var(--color-bg-subtle);
  --bs-table-hover-bg: color-mix(in oklab, var(--color-accent-subtle), transparent 55%);
  --bs-table-border-color: var(--color-border-subtle);
  color: var(--color-text);
  margin-bottom: 0;
}

.avds-echo-app .table th,
.avds-echo-app .table thead th,
.avds-echo-app thead.table-light th {
  border-bottom: 1px solid var(--color-divider) !important;
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-muted) !important;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: none;
}

.avds-echo-app .table td {
  color: var(--color-text);
}

.avds-echo-app .list-group-item {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
  color: var(--color-text);
}

.avds-echo-app .alert,
.avds-echo-app .method-note,
.avds-echo-app .stat-pill,
.avds-echo-app .lag-chip,
.avds-echo-app .badge-domain,
.avds-echo-app .post-category,
.avds-echo-app .ch-cat-badge,
.avds-echo-app .yt-video-badge {
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-muted) !important;
}

.avds-echo-app .nav-tabs {
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-divider);
}

.avds-echo-app .nav-tabs .nav-link {
  border: 1px solid transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.avds-echo-app .nav-tabs .nav-link:hover {
  border-color: var(--color-border-subtle);
  color: var(--color-text);
}

.avds-echo-app .nav-tabs .nav-link.active {
  border-color: var(--color-border-subtle) var(--color-border-subtle) var(--color-surface);
  background: var(--color-surface);
  color: var(--color-accent);
}

.avds-echo-app .empty-state,
.avds-echo-app .popular-queries {
  padding: var(--space-6);
  border: var(--echo-panel-border);
  border-radius: var(--echo-panel-radius);
  background: var(--color-surface);
  box-shadow: var(--echo-panel-shadow);
}

.avds-echo-app .empty-state i {
  color: var(--color-accent);
}

.avds-echo-app .table-responsive,
.avds-echo-app .heatmap-table-wrap {
  border-radius: var(--echo-panel-radius);
}

.avds-echo-app .material-icons {
  line-height: 1;
}

.avds-echo-home {
  display: flex;
  flex-direction: column;
  gap: var(--echo-home-gap);
}

.avds-home-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0 var(--space-1);
  border-bottom: 1px solid var(--color-divider);
}

.avds-home-masthead h1 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: 0;
}

.avds-home-masthead p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.avds-home-masthead__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.avds-home-masthead__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  background: var(--color-surface);
}

.avds-echo-home .search-hero {
  margin-bottom: 0 !important;
  padding: var(--space-4);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--color-accent-subtle), transparent 35%), transparent 62%),
    var(--color-surface);
  border: var(--echo-panel-border);
  border-radius: var(--echo-panel-radius);
  box-shadow: var(--echo-panel-shadow);
}

.avds-echo-home .search-hero__bar {
  margin-bottom: var(--space-3);
}

.avds-echo-home .search-hero__input {
  height: 48px;
  border: 1px solid var(--color-border);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--color-bg);
  font-size: var(--text-base);
}

.avds-echo-home .search-hero__btn {
  height: 48px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.avds-echo-home .chip,
.avds-echo-home .select-year {
  min-height: 32px;
  border-width: 1px;
  font-size: var(--text-xs);
  letter-spacing: 0;
}

.avds-echo-home .hero-stats {
  margin-bottom: 0 !important;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.avds-echo-home .hero-stats__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}

.avds-echo-home .hero-stat {
  min-width: 0;
  align-items: flex-start;
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--echo-panel-border);
  border-radius: var(--echo-panel-radius);
  box-shadow: var(--echo-panel-shadow);
  transition:
    border-color var(--motion-transition),
    box-shadow var(--motion-transition),
    transform var(--motion-transition);
}

.avds-echo-home .hero-stat:hover {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.avds-echo-home .hero-stat__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-accent-subtle);
}

.avds-echo-home .hero-stat__icon--blue { background: color-mix(in oklab, var(--p-blue-500), transparent 88%); }
.avds-echo-home .hero-stat__icon--amber { background: color-mix(in oklab, var(--p-amber-500), transparent 88%); }
.avds-echo-home .hero-stat__icon--red { background: color-mix(in oklab, var(--p-red-500), transparent 88%); }
.avds-echo-home .hero-stat__icon--purple { background: color-mix(in oklab, var(--p-violet-500), transparent 88%); }

.avds-echo-home .hero-stat__icon i {
  color: var(--color-accent);
  font-size: 20px;
}

.avds-echo-home .hero-stat__icon--blue i { color: var(--p-blue-500); }
.avds-echo-home .hero-stat__icon--amber i { color: var(--p-amber-500); }
.avds-echo-home .hero-stat__icon--red i { color: var(--p-red-500); }
.avds-echo-home .hero-stat__icon--purple i { color: var(--p-violet-500); }

.avds-echo-home .hero-stat__value {
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avds-echo-home .hero-stat__label {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
}

.avds-echo-home .tools-grid,
.avds-echo-home .sources-section {
  margin-bottom: 0 !important;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.avds-echo-home .tools-grid__title,
.avds-echo-home .sources-section__title {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0;
}

.avds-echo-home .tools-grid__title i,
.avds-echo-home .sources-section__title i {
  color: var(--color-accent);
}

.avds-echo-home .tools-grid__group {
  margin-bottom: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

.avds-echo-home .tools-grid__group-title {
  margin-bottom: var(--space-2);
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.avds-echo-home .tools-grid__cards {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}

.avds-echo-home .tool-card,
.avds-echo-home .source-card {
  border-width: 1px;
  border-radius: var(--echo-panel-radius);
  background: var(--color-surface);
  box-shadow: var(--echo-panel-shadow);
}

.avds-echo-home .tool-card:hover,
.avds-echo-home .source-card:hover {
  border-color: var(--color-accent);
  background: color-mix(in oklab, var(--color-accent-subtle), var(--color-surface) 40%);
  box-shadow: var(--shadow-sm);
}

.avds-echo-home .tool-card__icon,
.avds-echo-home .source-card__icon {
  border-radius: var(--radius-md);
}

.avds-echo-home .source-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.avds-echo-home .source-card {
  min-height: 68px;
}

@media (max-width: 1024px) {
  .avds-echo-home .hero-stats__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .avds-page-shell {
    gap: var(--space-3);
  }

  .avds-echo-app .page-header,
  .avds-echo-app .digest-header,
  .avds-echo-app .pen-header {
    margin-bottom: var(--space-3);
  }

  .avds-echo-app .page-header h1,
  .avds-echo-app .page-header h2,
  .avds-echo-app .digest-header h2,
  .avds-echo-app .pen-header h1 {
    font-size: var(--text-2xl);
  }

  .avds-echo-app .card-body {
    padding: var(--space-3);
  }

  .avds-echo-app .search-hero {
    padding: var(--space-3);
  }

  .avds-echo-app .search-hero__bar {
    align-items: stretch;
  }

  .avds-echo-app .search-hero__input {
    min-width: 0;
    height: 44px;
  }

  .avds-echo-app .search-hero__btn {
    height: 44px;
    padding: 0 var(--space-3);
  }

  .avds-echo-app .stat-card,
  .avds-echo-app .tg-stat-card,
  .avds-echo-app .kpi-card {
    padding: var(--space-3) !important;
  }

  .avds-echo-home {
    gap: var(--space-4);
  }

  .avds-home-masthead {
    align-items: flex-start;
    flex-direction: column;
  }

  .avds-home-masthead h1 {
    font-size: var(--text-3xl);
  }

  .avds-home-masthead__meta {
    justify-content: flex-start;
  }

  .avds-echo-home .search-hero {
    padding: var(--space-3);
  }

  .avds-echo-home .search-hero__bar {
    align-items: stretch;
  }

  .avds-echo-home .search-hero__input {
    min-width: 0;
    height: 44px;
  }

  .avds-echo-home .search-hero__btn {
    height: 44px;
    padding: 0 var(--space-3);
  }

  .avds-echo-home .hero-stats__grid,
  .avds-echo-home .source-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .avds-echo-home .hero-stat {
    padding: var(--space-3);
  }

  .avds-echo-home .hero-stat__icon {
    width: 32px;
    height: 32px;
  }

  .avds-echo-home .hero-stat__value {
    font-size: var(--text-xl);
  }
}

@media (max-width: 520px) {
  .avds-echo-app .search-hero__bar {
    flex-direction: column;
    gap: var(--space-2);
  }

  .avds-echo-app .search-hero__input,
  .avds-echo-app .search-hero__btn {
    width: 100%;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
  }

  .avds-echo-app .search-hero__input {
    height: 44px !important;
    min-height: 44px;
  }

  .avds-echo-home .hero-stats__grid,
  .avds-echo-home .source-cards,
  .avds-echo-home .tools-grid__cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .avds-echo-home .search-hero__bar {
    flex-direction: column;
    gap: var(--space-2);
  }

  .avds-echo-home .search-hero__icon {
    top: 11px;
  }

  .avds-echo-home .search-hero__input,
  .avds-echo-home .search-hero__btn {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .avds-echo-home .search-hero__input {
    height: 44px !important;
    min-height: 44px;
  }
}