/*
 * Styles for the classes the documentation JavaScript emits at runtime.
 *
 * The pages themselves are daisyUI, so almost nothing here is layout. What is
 * here exists because the scripts build markup with their own class names
 * (`result-box`, `log-entry`, `polling-status`, …) and renaming those would mean
 * editing four thousand lines of JavaScript to no benefit.
 *
 * Every colour is a theme variable, so these blocks follow the light/dark switch
 * along with the rest of the site rather than pinning one palette.
 */

/* ── Result and response panels ──────────────────────────────────────────── */
.result-box,
.response {
    display: none;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-base-300);
    border-radius: var(--radius-box, 0.75rem);
    background: var(--color-base-200);
    font-size: 0.8125rem;
    line-height: 1.5;
    max-height: 28rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Shown as soon as a script writes into it. */
.result-box:not(:empty),
.response:not(:empty) {
    display: block;
}

.result-box h4,
.response h4 {
    font-family: inherit;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.result-box pre,
.response pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* The scripts set these on the panel itself and on inner blocks. */
.success,
.result-success {
    border-color: color-mix(in oklch, var(--color-success) 40%, transparent);
    background: color-mix(in oklch, var(--color-success) 12%, var(--color-base-100));
    color: var(--color-base-content);
}

.error,
.result-error {
    border-color: color-mix(in oklch, var(--color-error) 40%, transparent);
    background: color-mix(in oklch, var(--color-error) 12%, var(--color-base-100));
    color: var(--color-base-content);
}

.warning {
    border-color: color-mix(in oklch, var(--color-warning) 40%, transparent);
    background: color-mix(in oklch, var(--color-warning) 12%, var(--color-base-100));
    color: var(--color-base-content);
}

.loading {
    color: var(--color-base-content);
    opacity: 0.7;
}

.info-box {
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in oklch, var(--color-info) 35%, transparent);
    border-radius: var(--radius-box, 0.75rem);
    background: color-mix(in oklch, var(--color-info) 10%, var(--color-base-100));
    font-size: 0.875rem;
}

/* ── Inline code and value displays ──────────────────────────────────────── */
.code-display,
.status-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    word-break: break-all;
}

.code-display {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: var(--color-base-200);
}

.status-value {
    font-weight: 600;
}

/* ── Device flow ─────────────────────────────────────────────────────────── */
.device-flow-info {
    display: grid;
    gap: 0.5rem;
}

.device-code-display {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.user-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    user-select: all;
}

.expires-info {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ── Polling status ──────────────────────────────────────────────────────── */
.polling-status {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-field, 0.5rem);
    font-size: 0.8125rem;
}

.polling-pending {
    background: color-mix(in oklch, var(--color-info) 12%, var(--color-base-100));
}

.polling-success {
    background: color-mix(in oklch, var(--color-success) 14%, var(--color-base-100));
}

.polling-error,
.polling-timeout {
    background: color-mix(in oklch, var(--color-error) 14%, var(--color-base-100));
}

/* ── Request log ─────────────────────────────────────────────────────────── */
.log-entry {
    border: 1px solid var(--color-base-300);
    border-radius: var(--radius-field, 0.5rem);
    margin-bottom: 0.5rem;
    overflow: hidden;
    font-size: 0.8125rem;
}

.log-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    background: var(--color-base-200);
}

.log-icon {
    flex: none;
}

.log-method {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    font-size: 0.75rem;
}

.log-operation {
    font-weight: 600;
}

.log-timestamp {
    margin-left: auto;
    font-size: 0.6875rem;
    opacity: 0.65;
}

.log-url,
.log-details {
    padding: 0.375rem 0.625rem;
    word-break: break-all;
}

.log-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    opacity: 0.8;
}

.log-data {
    margin: 0;
    padding: 0.5rem 0.625rem;
    background: var(--color-base-200);
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* ── Tabs the scripts drive ──────────────────────────────────────────────── */
.example-content {
    display: none;
}

.example-content.active {
    display: block;
}

/*
 * `.tab-button` and `.btn-env` also carry daisyUI's `btn`; only the active state
 * is added here, because that class is toggled by script.
 */
.tab-button.active,
.btn-env.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-content);
}

/* A copy button the scripts insert next to a code block. */
.copy-btn {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--color-base-300);
    border-radius: 0.25rem;
    background: var(--color-base-100);
    cursor: pointer;
}

/* ── Scope picker ────────────────────────────────────────────────────────────
 * `scope-btn` and its `selected` state are toggled by script, so the class names
 * are fixed by the JavaScript rather than chosen here.
 */
.scope-btn {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-base-300);
    border-radius: 999px;
    background: var(--color-base-100);
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

.scope-btn:hover {
    background: var(--color-base-200);
}

.scope-btn.selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-content);
}

/*
 * The deliberately-invalid scopes the tester offers, for checking that an
 * application handles a refusal. Marked so nobody sends one by accident.
 */
.scope-btn-invalid {
    border-style: dashed;
    border-color: color-mix(in oklch, var(--color-error) 55%, transparent);
    color: var(--color-error);
}

.scope-btn-invalid.selected {
    background: var(--color-error);
    border-color: var(--color-error);
    color: var(--color-error-content);
}

/* ── Request log ─────────────────────────────────────────────────────────────*/
.log-container {
    max-height: 32rem;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--color-base-300);
    border-radius: var(--radius-box, 0.75rem);
    background: var(--color-base-200);
}

.log-container:empty::after {
    content: "No requests yet.";
    display: block;
    padding: 1rem;
    font-size: 0.8125rem;
    opacity: 0.6;
}

/* The status panel below the device-flow buttons. */
.status-box:not(:empty) {
    margin-top: 0.5rem;
}

/* A grid of label/value pairs, used for the token status readout. */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}