/*
 * SnapHop API console. System fonts, no animation, nothing that appears only on hover. A host may
 * set the --sac-* variables on the console's root to fit its own look.
 */
.sac {
    --sac-text: #1f2328;
    --sac-muted: #59636e;
    --sac-surface: #ffffff;
    --sac-subtle: #f6f8fa;
    --sac-border: #d1d9e0;
    --sac-accent: #0550ae;
    --sac-danger: #a40e26;
    --sac-ok: #1a7f37;
    --sac-radius: 6px;
    --sac-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sac-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    color-scheme: light dark;
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 16px 64px;
    color: var(--sac-text);
    background: var(--sac-surface);
    font: 15px/1.5 var(--sac-font);
}

@media (prefers-color-scheme: dark) {
    .sac {
        --sac-text: #e6edf3;
        --sac-muted: #9198a1;
        --sac-surface: #0d1117;
        --sac-subtle: #151b23;
        --sac-border: #3d444d;
        --sac-accent: #4493f8;
        --sac-danger: #ff7b72;
        --sac-ok: #3fb950;
    }
}

.sac *, .sac *::before, .sac *::after { box-sizing: border-box; }
.sac h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.2; }
.sac h2 { margin: 32px 0 12px; font-size: 19px; }
.sac h3 { margin: 0 0 6px; font-size: 16px; overflow-wrap: anywhere; }
.sac code, .sac pre, .sac textarea { font-family: var(--sac-mono); font-size: 13px; }
.sac a { color: var(--sac-accent); }
.sac :focus-visible { outline: 3px solid var(--sac-accent); outline-offset: 2px; }

.sac-eyebrow { margin: 0; color: var(--sac-muted); font: 600 12px/1.2 var(--sac-mono); letter-spacing: .1em; }
.sac-meta, .sac-help { margin: 4px 0 0; color: var(--sac-muted); font-size: 13px; }
.sac-text { white-space: pre-line; overflow-wrap: anywhere; }
.sac-steps { margin: 12px 0; padding-left: 22px; }
.sac-problem { margin: 8px 0 0; color: var(--sac-danger); font-weight: 600; }
.sac-problem:empty { display: none; }

.sac-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 20px 0; }
.sac-field { display: grid; gap: 4px; margin: 10px 0; }
.sac-field label { font-weight: 600; }
.sac input, .sac textarea {
    width: 100%;
    border: 1px solid var(--sac-border);
    border-radius: var(--sac-radius);
    padding: 8px 10px;
    color: var(--sac-text);
    background: var(--sac-surface);
    font: inherit;
}
.sac textarea { font-family: var(--sac-mono); font-size: 13px; resize: vertical; }

.sac button {
    border: 1px solid var(--sac-border);
    border-radius: var(--sac-radius);
    padding: 8px 14px;
    color: var(--sac-text);
    background: var(--sac-subtle);
    font: 600 14px/1.2 var(--sac-font);
    cursor: pointer;
}
.sac button.sac-send { border-color: var(--sac-accent); color: #ffffff; background: var(--sac-accent); }
.sac button:disabled { cursor: default; opacity: .7; }
.sac-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.sac-index ul { margin: 0; padding-left: 20px; columns: 2 320px; }
.sac-index li { break-inside: avoid; margin: 2px 0; }
.sac-method { display: inline-block; min-width: 4.2em; font: 700 12px/1.6 var(--sac-mono); }

.sac-operation {
    margin: 12px 0;
    border: 1px solid var(--sac-border);
    border-radius: var(--sac-radius);
    padding: 16px;
    scroll-margin-top: 12px;
}
.sac-operation:target { border-color: var(--sac-accent); border-width: 2px; }
.sac-summary { margin: 0; }
.sac-details summary, .sac-about summary, .sac-other summary { cursor: pointer; color: var(--sac-accent); }

.sac-answer:empty { display: none; }
.sac-answer { margin-top: 12px; border-top: 1px solid var(--sac-border); padding-top: 12px; }
.sac-answer[data-state="succeeded"] .sac-status { color: var(--sac-ok); }
.sac-answer[data-state="refused"] .sac-status, .sac-answer[data-state="failed"] .sac-status { color: var(--sac-danger); }
.sac-status { margin: 0; font-weight: 600; }
.sac-body, .sac-curl {
    max-height: 420px;
    overflow: auto;
    margin: 8px 0 0;
    border-radius: var(--sac-radius);
    padding: 12px;
    background: var(--sac-subtle);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.sac-use-key { margin-top: 8px; }
.sac-fields { margin-top: 8px; }
.sac-table { overflow-x: auto; }
.sac table { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 13px; }
.sac th, .sac td { border-bottom: 1px solid var(--sac-border); padding: 6px 8px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.sac th { color: var(--sac-muted); font-weight: 600; }
.sac-other { margin-top: 32px; }