/* AV DS Cascade Guard
   ------------------------------------------------------------------
   Permanent containment layer for legacy Echo pages.

   Goal:
   - keep old page CSS from drifting away from AV DS 4 tokens;
   - establish one canonical shell for cards, controls, headings and tables;
   - make future page fixes predictable by scoping all guard rules to the
     AV DS app root instead of relying on fragile global cascade order.
*/

body.avds-echo-app {
  --echo-guard-surface: var(--color-surface);
  --echo-guard-surface-raised: var(--color-surface-raised);
  --echo-guard-border: var(--color-border-subtle);
  --echo-guard-border-strong: var(--color-border);
  --echo-guard-shadow: var(--shadow-xs);
  --echo-guard-shadow-hover: var(--shadow-sm);
  --echo-guard-radius: var(--radius-md);
  --echo-guard-gap: var(--space-4);
}

body.avds-echo-app main.container.avds-page-shell {
  max-width: var(--container-max, 1280px);
  padding-inline: clamp(16px, 2vw, 32px);
}

body.avds-echo-app :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-sans);
  letter-spacing: 0;
  color: var(--color-text);
}

body.avds-echo-app :where(.btn, .badge, .form-control, .form-select, .table, .nav-link, .dropdown-item) {
  font-family: var(--font-sans);
  letter-spacing: 0;
}

body.avds-echo-app :where(.card, .surface, .stat-card, .tg-stat-card, .kpi-card, .digest-card, .result-card, .channel-card, .yt-channel-card, .post-card, .echo-card) {
  background: var(--echo-guard-surface);
  border: 1px solid var(--echo-guard-border);
  border-radius: var(--echo-guard-radius);
  box-shadow: var(--echo-guard-shadow);
}

body.avds-echo-app :where(.card:hover, .surface:hover, .channel-card:hover, .yt-channel-card:hover, .post-card:hover) {
  border-color: var(--echo-guard-border-strong);
  box-shadow: var(--echo-guard-shadow-hover);
}

body.avds-echo-app :where(.card-header, .panel-heading, .section-heading) {
  background: color-mix(in oklab, var(--color-bg-subtle), var(--echo-guard-surface) 60%);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text);
}

body.avds-echo-app :where(.form-control, .form-select, input[type="text"], input[type="search"], textarea, select) {
  border-color: var(--echo-guard-border);
  border-radius: var(--radius-md);
  background: var(--echo-guard-surface);
  color: var(--color-text);
}

body.avds-echo-app :where(.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus) {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

body.avds-echo-app :where(.table, .table > :not(caption) > * > *) {
  color: var(--color-text);
  border-color: var(--color-divider);
}

body.avds-echo-app :where(.table thead th, .table-light, .table-secondary) {
  background: color-mix(in oklab, var(--color-bg-subtle), var(--echo-guard-surface) 35%);
  color: var(--color-text-muted);
}

body.avds-echo-app :where(.page-header, .digest-header, .pen-header, .section-header) {
  gap: var(--echo-guard-gap);
}

body.avds-echo-app :where(.page-header .subtitle, .generated-at, .section-subtitle, .help-text, .empty-state__text) {
  color: var(--color-text-muted);
}

body.avds-echo-app :where(.chip, .channel-badge, .metric-badge, .filter-chip, .operator-pill) {
  letter-spacing: 0;
}