/* CodeTabs (component). Every class here is :global because the rendered
   markup is referenced by external JS (public/api-docs-tabs.js,
   public/home-demo.js, public/docs-runner.js) and inlined string
   classNames in src/pages/Home.tsx. The module exists so the rules ship
   alongside the component and get bundled by Vite into a per-component CSS
   chunk for per-page tree-shaking.

   NOTE: we use the `:global(.foo)` selector form (not the `:global { … }`
   block form) because the block form is silently mis-handled when
   `css.modules.generateScopedName` is set explicitly — it strips the
   `:global` opener and hashes every class inside, producing invalid CSS
   and the wrong class names. */
.code-block {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--border);
}
.code-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 0.65rem 1rem;
    color: var(--text-dim);
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.code-block pre { padding: 1rem 1.2rem; overflow-x: auto; margin: 0; }
.code-block code { color: #e2e8f0; font-family: var(--mono); font-size: 0.82rem; line-height: 1.65; }

.snippet-tabs { display: flex; flex-direction: column; gap: 0; }
.tab-bar {
    display: flex;
    gap: 0.15rem;
    padding: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.15s ease;
}
.tab-btn:hover { color: var(--text-strong); background: rgba(255, 255, 255, 0.04); }
.tab-btn.active { color: var(--accent-ink); background: var(--accent); }
.copy-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.3rem 0.7rem;
    border-radius: 7px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.15s ease;
}
.copy-btn:hover { background: var(--indigo-soft); border-color: var(--border-strong); color: white; }
.copy-btn.copied { background: rgba(16, 185, 129, 0.18); border-color: rgba(16, 185, 129, 0.4); color: #6ee7b7; }
.snippet-block pre { white-space: pre; overflow-x: auto; }