/* ═══════════════════════════════════════════════════
   Web Awesome component overrides
   Black Chrome Editorial integration
   ═══════════════════════════════════════════════════ */

/* ── wa-copy-button ── */
wa-copy-button {
  --wa-copy-button-background: var(--color-white);
  --wa-copy-button-color: #050505;
  --wa-copy-button-border-radius: var(--radius-pill);
  --wa-copy-button-font-family: var(--font-mono);
  --wa-copy-button-font-size: 11px;
  --wa-copy-button-letter-spacing: 0.10em;
  --wa-copy-button-text-transform: uppercase;
  --wa-copy-button-height: 46px;
  --wa-copy-button-padding: 0 28px;
  display: inline-flex;
}
wa-copy-button::part(base) { border: none; cursor: pointer; }
wa-copy-button::part(base):hover { background: var(--color-silver); }

/* Native fallback visible while WA loads */
wa-copy-button:not(:defined) { display: none; }
.copy-fallback { display: inline-flex; }
wa-copy-button:defined ~ .copy-fallback { display: none; }

/* ── wa-tab-group / wa-tab / wa-tab-panel ── */
wa-tab-group {
  --wa-tab-group-border-color: var(--color-line);
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  margin: var(--space-3) 0;
}
wa-tab {
  --wa-tab-font-family: var(--font-mono);
  --wa-tab-font-size: 11px;
  --wa-tab-color: var(--color-text-muted);
  --wa-tab-letter-spacing: 0.08em;
  --wa-tab-padding: 8px 18px;
  --wa-tab-border-radius: var(--radius-pill);
  --wa-tab-border-color: var(--color-line);
  --wa-tab-background: transparent;
  --wa-tab-active-color: var(--color-text);
  --wa-tab-active-border-color: var(--color-line-strong);
  --wa-tab-active-background: var(--color-panel);
}
wa-tab::part(base) { cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
wa-tab-panel { display: block; }
wa-tab-panel:not([active]) { display: none; }

/* The page provides a separate linear fallback while the component is unavailable. */
wa-tab-group:not(:defined) { display: none; }