/**
 * developers.css — the developer platform: /developers (landing, docs, changelog,
 * terms, console), the OAuth consent screen, /settings/connected-apps and
 * /admin/developer-apps. Tokens from design-tokens.css, with fallbacks.
 */
.dev-page { margin-top: var(--space-6, 1.5rem); margin-bottom: 4rem; }
.dev-page h1 { font-size: var(--font-size-2xl, 1.75rem); margin: 0 0 var(--space-2, 0.5rem); }
.dev-page h2 { font-size: var(--font-size-xl, 1.25rem); margin: var(--space-8, 2rem) 0 var(--space-3, 0.75rem); }
.dev-page h3 { font-size: var(--font-size-lg, 1.0625rem); margin: var(--space-6, 1.5rem) 0 var(--space-2, 0.5rem); }
.dev-lede { max-width: 46rem; font-size: 1.0625rem; color: var(--color-text-secondary, #5f5e5b); }
.dev-muted { color: var(--color-text-secondary, #6b6a67); }
.dev-small { font-size: 0.8125rem; color: var(--color-text-secondary, #6b6a67); }

/* Section nav shared by every developer page */
.dev-nav {
    display: flex; flex-wrap: wrap; gap: var(--space-1, 0.25rem);
    border-bottom: 1px solid var(--color-border, #e8e5e1);
    margin-bottom: var(--space-6, 1.5rem);
}
.dev-nav a {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    color: var(--color-text-secondary, #5f5e5b);
    text-decoration: none; border-bottom: 2px solid transparent; font-size: 0.9375rem;
}
.dev-nav a:hover { color: var(--color-text, #37352f); }
.dev-nav a[aria-current="page"] { color: var(--color-primary, #1a6fb8); border-bottom-color: var(--color-primary, #1a6fb8); font-weight: 600; }
.dev-nav__spacer { flex: 1 1 auto; }

/* Landing */
.dev-hero { padding: var(--space-8, 2rem) 0 var(--space-6, 1.5rem); max-width: 50rem; }
.dev-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; }
.dev-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3, 0.75rem); margin-top: var(--space-5, 1.25rem); }
.dev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-4, 1rem); }
.dev-card {
    background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e8e5e1);
    border-radius: var(--radius-lg, 10px); padding: var(--space-5, 1.25rem);
}
.dev-card h3 { margin-top: 0; }
.dev-card p:last-child { margin-bottom: 0; }
.dev-steps { counter-reset: step; list-style: none; padding: 0; }
.dev-steps li { counter-increment: step; position: relative; padding-left: 2.5rem; margin-bottom: var(--space-4, 1rem); }
.dev-steps li::before {
    content: counter(step); position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem;
    border-radius: 50%; background: var(--color-primary-bg, #e8f1fa); color: var(--color-primary, #1a6fb8);
    font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.875rem;
}

/* Code */
.dev-page pre, .dev-code {
    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.55;
    margin: 0 0 var(--space-4, 1rem); white-space: pre;
}
.dev-page code { font-family: var(--font-mono, monospace); font-size: 0.875em; overflow-wrap: anywhere; }
.dev-copy { display: flex; gap: var(--space-2, 0.5rem); align-items: flex-start; margin-bottom: var(--space-3, 0.75rem); }
.dev-copy > pre, .dev-copy > code, .dev-copy > input { flex: 1 1 auto; min-width: 0; margin: 0; }
.dev-copy > input { font-family: var(--font-mono, monospace); font-size: 0.875rem; }
.dev-copy .btn { flex: 0 0 auto; }

/* Docs layout */
.dev-docs { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-8, 2rem); }
.dev-docs__side ul { list-style: none; padding: 0; margin: 0; position: sticky; top: 5rem; }
.dev-docs__side li a {
    display: block; padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); border-radius: var(--radius-md, 8px);
    color: var(--color-text-secondary, #5f5e5b); text-decoration: none; font-size: 0.9375rem;
}
.dev-docs__side li a:hover { background: var(--color-surface-hover, #f1efec); color: var(--color-text, #37352f); }
.dev-docs__side li a[aria-current="page"] { background: var(--color-primary-bg, #e8f1fa); color: var(--color-primary, #1a6fb8); font-weight: 600; }
.dev-docs__body { max-width: 50rem; }
.dev-docs__body table, .dev-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4, 1rem); font-size: 0.875rem; }
.dev-docs__body th, .dev-docs__body td, .dev-table th, .dev-table td {
    border-bottom: 1px solid var(--color-border, #e8e5e1); padding: var(--space-2, 0.5rem); text-align: left; vertical-align: top;
}
.dev-docs__body th, .dev-table th { font-weight: 600; background: var(--color-surface-alt, #f5f3f0); }
.dev-table-wrap { overflow-x: auto; }
.dev-callout {
    border-left: 4px solid var(--color-primary, #1a6fb8); background: var(--color-primary-bg, #e8f1fa);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem); border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    margin: 0 0 var(--space-4, 1rem);
}
.dev-callout--warn { border-left-color: var(--color-warning, #b7791f); background: var(--color-warning-bg, #fdf6e7); }
.dev-callout--danger { border-left-color: var(--color-danger, #c53030); background: var(--color-danger-bg, #fdecec); }
.dev-pager { display: flex; justify-content: space-between; gap: var(--space-4, 1rem); margin-top: var(--space-8, 2rem); flex-wrap: wrap; }

/* Badges */
.dev-badge {
    display: inline-block; padding: 0.125rem 0.5rem; border-radius: var(--radius-full, 999px);
    font-size: 0.75rem; font-weight: 600; text-transform: capitalize; vertical-align: middle;
    background: var(--color-gray-100, #f1efec); color: var(--color-text-secondary, #5f5e5b);
}
.dev-badge--active, .dev-badge--low, .dev-badge--added, .dev-badge--sent { background: var(--color-success-bg, #e9f7ef); color: var(--color-success-text, #1e6b3a); }
.dev-badge--review, .dev-badge--medium, .dev-badge--changed, .dev-badge--deprecated, .dev-badge--pending { background: var(--color-warning-bg, #fdf6e7); color: var(--color-warning-text, #8a5a00); }
.dev-badge--suspended, .dev-badge--high, .dev-badge--removed, .dev-badge--security { background: var(--color-danger-bg, #fdecec); color: var(--color-danger-text, #9b1c1c); }
.dev-badge--fixed { background: var(--color-info-bg, #e8f1fa); color: var(--color-info-text, #1a4f80); }

/* Console */
.dev-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4, 1rem); flex-wrap: wrap; }
.dev-apps { display: grid; gap: var(--space-3, 0.75rem); }
.dev-app-row { display: flex; justify-content: space-between; gap: var(--space-4, 1rem); align-items: center; flex-wrap: wrap; }
.dev-app-row h3 { margin: 0 0 var(--space-1, 0.25rem); }
.dev-app-row h3 a { text-decoration: none; }
.dev-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2, 0.5rem) var(--space-4, 1rem); margin: 0 0 var(--space-4, 1rem); }
.dev-kv dt { font-weight: 600; color: var(--color-text-secondary, #5f5e5b); }
.dev-kv dd { margin: 0; overflow-wrap: anywhere; }
.dev-form .form-group, .dev-form .mb-3 { margin-bottom: var(--space-4, 1rem); }
.dev-form label { font-weight: 600; display: block; margin-bottom: var(--space-1, 0.25rem); }
.dev-form .form-text { font-size: 0.8125rem; color: var(--color-text-secondary, #6b6a67); margin-top: var(--space-1, 0.25rem); }
.dev-form textarea { font-family: var(--font-mono, monospace); font-size: 0.875rem; }
.dev-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3, 0.75rem); }
.dev-choice label {
    display: flex; gap: var(--space-3, 0.75rem); align-items: flex-start; font-weight: 400; cursor: pointer;
    border: 1px solid var(--color-border, #e8e5e1); border-radius: var(--radius-md, 8px); padding: var(--space-3, 0.75rem);
}
.dev-choice label:has(input:checked) { border-color: var(--color-primary, #1a6fb8); background: var(--color-primary-bg, #e8f1fa); }
.dev-choice input { margin-top: 0.25rem; }
.dev-choice strong { display: block; }
.dev-secret {
    border: 2px solid var(--color-warning, #b7791f); background: var(--color-warning-bg, #fdf6e7);
    border-radius: var(--radius-lg, 10px); padding: var(--space-4, 1rem); margin-bottom: var(--space-6, 1.5rem);
}
.dev-secret h2 { margin-top: 0; font-size: 1.0625rem; }
.dev-bars { display: flex; align-items: flex-end; gap: 3px; height: 4.5rem; padding: var(--space-2, 0.5rem) 0; border-bottom: 1px solid var(--color-border, #e8e5e1); }
.dev-bars span { flex: 1 1 0; background: var(--color-primary, #1a6fb8); border-radius: 2px 2px 0 0; min-height: 1px; opacity: 0.85; }
.dev-danger-zone { border: 1px solid var(--color-danger, #c53030); border-radius: var(--radius-lg, 10px); padding: var(--space-4, 1rem); }
.dev-danger-zone form { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3, 0.75rem); flex-wrap: wrap; padding: var(--space-2, 0) 0; }
.dev-danger-zone form + form { border-top: 1px solid var(--color-border, #e8e5e1); }
.dev-inline-form { display: inline; }
.dev-actions { display: flex; gap: var(--space-2, 0.5rem); flex-wrap: wrap; align-items: center; }

/* OAuth consent */
.oauth-wrap { max-width: 32rem; margin: var(--space-8, 2rem) auto 4rem; padding: 0 var(--space-4, 1rem); }
.oauth-card { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e8e5e1); border-radius: var(--radius-xl, 14px); padding: var(--space-6, 1.5rem); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.06)); }
.oauth-apps { display: flex; align-items: center; justify-content: center; gap: var(--space-3, 0.75rem); margin-bottom: var(--space-4, 1rem); }
.oauth-mark {
    width: 3rem; height: 3rem; border-radius: var(--radius-lg, 10px); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.25rem; color: #fff; background: var(--color-primary, #1a6fb8);
}
.oauth-mark--app { background: var(--color-gray-700, #4b4a47); }
.oauth-card h1 { font-size: 1.25rem; text-align: center; margin: 0 0 var(--space-2, 0.5rem); }
.oauth-card .oauth-sub { text-align: center; color: var(--color-text-secondary, #5f5e5b); margin-bottom: var(--space-5, 1.25rem); }
.oauth-scopes { list-style: none; padding: 0; margin: 0 0 var(--space-5, 1.25rem); }
.oauth-scopes li { display: flex; gap: var(--space-3, 0.75rem); padding: var(--space-3, 0) 0; border-top: 1px solid var(--color-border, #e8e5e1); }
.oauth-scopes li:first-child { border-top: 0; }
.oauth-scopes .oauth-check { color: var(--color-success, #2f855a); font-weight: 700; }
.oauth-buttons { display: flex; gap: var(--space-3, 0.75rem); }
.oauth-buttons .btn { flex: 1 1 0; }
.oauth-fine { font-size: 0.8125rem; color: var(--color-text-secondary, #6b6a67); margin-top: var(--space-4, 1rem); }

@media (max-width: 860px) {
    .dev-docs { grid-template-columns: 1fr; gap: var(--space-4, 1rem); }
    .dev-docs__side ul { position: static; display: flex; flex-wrap: wrap; gap: var(--space-1, 0.25rem); }
    .dev-kv { grid-template-columns: 1fr; }
    .dev-copy { flex-direction: column; align-items: stretch; }
}
.dev-hero__note { margin-top: var(--space-3, 0.75rem); }
.dev-entry { margin-bottom: var(--space-4, 1rem); }
.dev-entry h2 { margin-top: var(--space-1, 0.25rem); }
.dev-mt { margin-top: var(--space-6, 1.5rem); }
.dev-mt-sm { margin-top: var(--space-3, 0.75rem); }
.dev-mt-0 { margin-top: 0; }
.dev-stat { display: block; font-size: 1.5rem; margin-top: var(--space-1, 0.25rem); }
.dev-stat--sm { font-size: 1rem; }
.dev-break { overflow-wrap: anywhere; word-break: break-all; }
.dev-inline-check { display: inline-flex; gap: var(--space-1, 0.25rem); align-items: center; font-weight: 400; margin-right: var(--space-3, 0.75rem); }
.dev-form-legend { font-weight: 600; font-size: 1rem; display: block; margin-bottom: var(--space-2, 0.5rem); }
.dev-form .form-control { width: 100%; max-width: 40rem; box-sizing: border-box; }
.dev-form textarea.form-control { max-width: 100%; }