/**
 * developer-sdks.css — /developer-portal/sdks (DeveloperSdkController)
 * Download cards, copyable commands and the quick-start tabs. Design tokens from design-tokens.css.
 */
.sdk-page { margin-top: var(--space-6, 1.5rem); margin-bottom: 3rem; }
.sdk-crumbs { font-size: 0.875rem; color: var(--color-text-secondary, #787774); margin-bottom: var(--space-2, 0.5rem); }
.sdk-crumbs span { margin: 0 var(--space-1, 0.25rem); }
.sdk-lede { max-width: 48rem; font-size: 1.0625rem; }
.sdk-meta { color: var(--color-text-secondary, #787774); font-size: 0.875rem; }
.sdk-h2 { margin-top: 2.5rem; }
.sdk-small { font-size: 0.8125rem; color: var(--color-text-secondary, #787774); }

.sdk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-4, 1rem);
    margin-top: var(--space-6, 1.5rem);
}
.sdk-card h2 { font-size: 1.125rem; margin-top: 0; }
.sdk-card .btn { margin-right: var(--space-2, 0.5rem); margin-bottom: var(--space-2, 0.5rem); white-space: normal; max-width: 100%; }

.sdk-cmd { display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); margin-bottom: var(--space-3, 0.75rem); }
.sdk-page .sdk-cmd > pre { min-width: 0; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sdk-cmd .js-sdk-copy { align-self: flex-end; }
.sdk-cmd pre,
.sdk-tabs pre {
    background: var(--color-surface-alt, #f5f3f0);
    border: 1px solid var(--color-border, #e8e5e1);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-3, 0.75rem);
    overflow-x: auto;
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0 0 var(--space-3, 0.75rem);
    white-space: pre;
}

.sdk-tablist { display: flex; gap: var(--space-1, 0.25rem); border-bottom: 1px solid var(--color-border, #e8e5e1); margin-bottom: var(--space-3, 0.75rem); flex-wrap: wrap; }
.sdk-tablist [role="tab"] {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font: inherit;
    color: var(--color-text-secondary, #787774);
    cursor: pointer;
}
.sdk-tablist [role="tab"][aria-selected="true"] { color: var(--color-primary, #1a6fb8); border-bottom-color: var(--color-primary, #1a6fb8); font-weight: 600; }
.sdk-tablist [role="tab"]:focus-visible { outline: 2px solid var(--color-primary, #1a6fb8); outline-offset: 2px; }
.sdk-list li { margin-bottom: var(--space-2, 0.5rem); }
.sdk-details summary { cursor: pointer; color: var(--color-primary, #1a6fb8); font-size: 0.875rem; margin-bottom: var(--space-2, 0.5rem); }