/* =============================================================================
 * /api and /api/docs — Domain Intelligence API pages.
 * Loaded only by .inc/views/api/*.php (View::push('head')). Builds on the
 * tokens and components of theme.css.
 * ========================================================================== */

/* Hero ---------------------------------------------------------------------- */
.api-hero { padding-bottom: 72px; }
.api-hero__title { max-width: 18ch; }
.api-hero__actions { justify-content: center; }
.api-hero__code { max-width: 720px; margin: 2.8rem auto 0; padding: 0; text-align: left; overflow: hidden; border-radius: var(--radius-lg); }
.api-term__bar { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.api-term__bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-3); }
.api-term__bar span:nth-child(1) { background: #ff5f57; } .api-term__bar span:nth-child(2) { background: #febc2e; } .api-term__bar span:nth-child(3) { background: #28c840; }
.api-term__bar em { margin-left: auto; font-style: normal; font-size: .75rem; color: var(--muted); font-family: var(--mono); }
.api-term { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 1.1rem 1.3rem; font-size: .84rem; line-height: 1.65; color: var(--text-2); }

/* Syntax tokens (simulator + hero) */
.tok-k { color: #c4b5fd; }
.tok-s { color: #86efac; }
.tok-n { color: #fbbf24; }
.tok-b { color: #f472b6; }
.tok-null { color: var(--muted); font-style: italic; }
.tok-c { color: var(--accent-2); }
html[data-mode="light"] .tok-k { color: #6d28d9; }
html[data-mode="light"] .tok-s { color: #15803d; }
html[data-mode="light"] .tok-n { color: #b45309; }
html[data-mode="light"] .tok-b { color: #be185d; }

/* Simulator ----------------------------------------------------------------- */
.api-sim { padding: 1.4rem; border-radius: var(--radius-lg); }
.api-sim__form { display: flex; align-items: center; gap: .5rem; padding: .4rem .4rem .4rem 1rem; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border-strong); font-family: var(--mono); }
.api-sim__form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.api-sim__method { font-weight: 700; color: var(--low); font-size: .85rem; }
.api-sim__path { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.api-sim__input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 600 .95rem var(--mono); padding: .55rem 0; }
.api-sim__input:focus { outline: none; }
.api-sim__chips { margin: .9rem 0 1.2rem; align-items: center; }
.api-sim__chips .chip { cursor: pointer; font-family: inherit; }
.api-sim__chips .chip:hover { border-color: var(--border-strong); color: var(--text); }
.api-sim__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; }
.api-sim__panel { min-width: 0; }
.api-sim__meta { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; min-height: 32px; margin-bottom: .6rem; }
.api-status { --c: var(--unknown); display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .7rem; border-radius: 999px; font: 700 .8rem var(--mono); color: color-mix(in srgb, var(--c) 85%, var(--text)); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.api-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.api-status--ok { --c: var(--low); }
.api-status--warn { --c: var(--uncertain); }
.api-status--err { --c: var(--high); }
.api-status--busy { --c: var(--accent); }
.api-json { height: 440px; margin: 0; font-size: .8rem; line-height: 1.6; color: var(--text-2); white-space: pre; }
.api-snippet { margin: 0; min-height: 120px; font-size: .8rem; line-height: 1.6; white-space: pre; overflow-x: auto; padding-top: 2.6rem; }

.api-tabs { margin-bottom: .6rem; }
.api-tabs button { padding: .55rem .85rem; color: var(--text-2); background: none; border: 0; border-bottom: 2px solid transparent; font: 500 .88rem var(--font); cursor: pointer; white-space: nowrap; }
.api-tabs button:hover { color: var(--text); }
.api-tabs button[aria-selected="true"] { color: var(--text); border-color: var(--accent); }

/* Cards --------------------------------------------------------------------- */
.api-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: .9rem; }
.api-icon--cyan { background: color-mix(in srgb, var(--accent-2) 14%, transparent); color: var(--accent-2); }
.api-case { transition: transform .2s ease, border-color .2s ease; }
.api-case:hover { transform: translateY(-3px); border-color: var(--border-strong); }

.api-verb { display: inline-block; min-width: 3.4em; text-align: center; padding: .1rem .4rem; border-radius: 6px; font: 700 .72rem var(--mono); color: var(--low); background: color-mix(in srgb, var(--low) 14%, transparent); }
.api-verb--post { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); }

/* Pricing ------------------------------------------------------------------- */
.api-plans { align-items: stretch; }
.api-plan { display: flex; flex-direction: column; padding: 1.8rem; }
.api-plan .btn--block { margin-top: auto; }
.api-plan .checklist { margin: .4rem 0 1.4rem; }
.api-plan--hot { background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, .22), transparent 60%), var(--surface); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 30px 60px -30px rgba(139, 92, 246, .6); }
.api-plan__flag { position: absolute; top: 1rem; right: 1rem; }
.api-plan__name { font-size: 1.05rem; color: var(--text-2); margin-bottom: .3rem; }
.api-plan__calls { color: var(--text-2); margin: .2rem 0 .6rem; }
.api-plan__calls strong { color: var(--text); font-size: 1.15rem; }

.api-request .steps { margin: 0; padding: 0; list-style: none; }

/* Docs page ----------------------------------------------------------------- */
.api-docs-head { position: relative; overflow: hidden; padding: 48px 0 28px; border-bottom: 1px solid var(--border); }
.api-docs-head > .container { position: relative; z-index: 1; }
.api-docs-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: .3rem; }
.api-docs-head .actions { margin-top: 1rem; }
.api-docs-key { display: flex; max-width: 100%; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; font-size: .85rem; color: var(--muted); }
.api-docs-key code { user-select: all; word-break: break-all; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.api-docs-app { min-height: 70vh; border-bottom: 1px solid var(--border); text-align: left; max-width: 100vw; overflow-x: clip; }
.api-docs-app .sidebar, .api-docs-app nav { text-align: left; }
.api-docs-app:empty { display: none; }
.api-docs-app .scalar-app { --scalar-custom-header-height: 64px; }
.api-docs-loading { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.api-docs-fallback h2 { margin-top: 2.5rem; }
.api-docs-fallback h3 { margin-top: 1.4rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.api-docs-fallback pre { font-size: .8rem; }
.api-docs-toc { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 0; padding: 0; list-style: none; }

@media (max-width: 860px) {
    .api-sim__grid { grid-template-columns: 1fr; }
    .api-json { height: 360px; }
}
@media (max-width: 560px) {
    .api-sim { padding: 1rem; }
    .api-sim__form { flex-wrap: wrap; border-radius: 16px; padding: .6rem .8rem; }
    .api-sim__path { font-size: .8rem; }
    .api-sim__form .btn { width: 100%; }
    .api-plan { padding: 1.4rem; }
}