/* System appearance for the customer dashboard and sign-in.
   Light stays unchanged; dark uses Mercator's navy, warm brass and sage accents.
   CSS media queries also handle OS changes while the page is open: no saved override. */
:root {
    color-scheme: light;
    --mu-key-gold: #76552b;
    --mu-key-surface: #f3eadc;
    --mu-key-border: #ad8a54;
    --mu-key-hover: #eadeca;
}

/* A visible secondary action, not another primary OpenAPI call to action. */
#apiManageKeys {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid var(--mu-key-border);
    border-radius: 5px;
    background: var(--mu-key-surface);
    color: var(--mu-key-gold);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}
#apiManageKeys:hover { background: var(--mu-key-hover); }
#apiManageKeys svg { width: 14px; height: 14px; flex-shrink: 0; }
#apiManageKeys:focus-visible { outline: 2px solid var(--mu-key-gold); outline-offset: 3px; }

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --mu-page: #151d2b;
        --mu-chrome: #111a29;
        --mu-surface: #1c2737;
        --mu-raised: #263448;
        --mu-field: #172131;
        --mu-code: #101925;
        --mu-text: #e3e7ee;
        --mu-muted: #afbbcc;
        --mu-quiet: #9baabd;
        --mu-line: #3a4b62;
        --mu-line-soft: #2e3c50;
        --mu-focus: #adc7e6;
        --mu-link: #adc7e6;
        --mu-gold: #d4b580;
        --mu-gold-surface: #352f29;
        --mu-gold-line: #92764f;
        --mu-green: #9fc7aa;
        --mu-green-surface: #23392f;
        --mu-green-line: #6b9479;
        --mu-red: #e7a2a2;
        --mu-red-surface: #3b2b35;
        --mu-red-line: #9d6870;
        --mu-latency: #b8a8d4;
        --mu-key-gold: var(--mu-gold);
        --mu-key-surface: var(--mu-gold-surface);
        --mu-key-border: var(--mu-gold-line);
        --mu-key-hover: #453a2d;
    }
    body {
        background-color: var(--mu-page);
        background-image: repeating-linear-gradient(0deg, transparent 0 2px, #d9e3f005 2px 4px);
        color: var(--mu-text);
    }
    ::selection { background: #465a75; color: #fff; }
    :root { scrollbar-color: #5d7089 var(--mu-field); }

    /* Shared shell, fields and account surfaces. */
    .topbar { background: var(--mu-chrome); border-color: var(--mu-line-soft); }
    .nav-btn { color: var(--mu-muted); }
    .account-trigger { color: var(--mu-muted); }
    .account-dropdown { background: var(--mu-surface); color: var(--mu-text); border-color: var(--mu-line); box-shadow: 0 12px 32px #0006; }
    .account-dropdown [role="menuitem"] { color: var(--mu-text); }
    .account-dropdown [role="menuitem"] svg { color: var(--mu-muted); }
    .account-dropdown [role="menuitem"]:hover,
    .account-dropdown [role="menuitem"]:focus-visible,
    .account-dropdown [aria-current="page"] { background: var(--mu-raised); }
    .account-dropdown hr { border-color: var(--mu-line-soft); }
    h1, .card-header h2, .key-info h3, .modal-header h3, .password-modal h2 { color: var(--mu-text); }
    .subtitle, .section-label, .key-meta, .empty-state, .loading-state, .code-label,
    .modal-header p, .form-group label, .password-modal p, .password-modal label { color: var(--mu-muted); }
    .card, .modal-content, .password-modal { background: var(--mu-surface); border-color: var(--mu-line); }
    .card-header { border-color: var(--mu-line-soft); }
    .key-item, .rate-limit-item { background: var(--mu-field); border-color: var(--mu-line-soft); }
    .key-item:hover { border-color: var(--mu-line); }
    .btn-primary, .password-modal .btn-submit, .auth-container .btn-submit {
        background: #354c69; border-color: #7188a6; color: var(--mu-text);
    }
    .btn-primary:hover:not(:disabled), .password-modal .btn-submit:hover:not(:disabled),
    .auth-container .btn-submit:hover:not(:disabled) { background: #415c7d; }
    .btn-secondary { background: var(--mu-raised); border-color: var(--mu-line); color: var(--mu-text); }
    .btn-secondary:hover { background: #304159; border-color: #7188a6; }
    .btn-copy { background: var(--mu-gold-surface); border-color: var(--mu-gold-line); color: var(--mu-gold); }
    .btn-copy:hover { background: var(--mu-key-hover); }
    .btn-delete { border-color: var(--mu-red-line); color: var(--mu-red); }
    .btn-delete:hover { background: var(--mu-red-surface); border-color: var(--mu-red); color: var(--mu-red); }
    .form-group input, .password-modal input, .docs-copy-input {
        color: var(--mu-text); background: var(--mu-field); border-color: var(--mu-line);
    }
    .form-group input::placeholder, .password-modal input::placeholder { color: var(--mu-quiet); }
    .form-group input:focus, .password-modal input:focus { border-color: var(--mu-gold); }
    .empty-state a { color: var(--mu-gold); }
    .code-block, .new-key-value { background: var(--mu-code); color: var(--mu-text); border-color: var(--mu-line); }
    .new-key-value { border-color: var(--mu-gold-line); }
    .code-block .comment { color: var(--mu-quiet); }
    .alert.error, .docs-import-error, .message.error { background: var(--mu-red-surface); border-color: var(--mu-red-line); color: var(--mu-red); }
    .alert.warning { background: var(--mu-gold-surface); border-color: var(--mu-gold-line); color: var(--mu-gold); }
    .alert.success, .message.success { background: var(--mu-green-surface); border-color: var(--mu-green-line); color: var(--mu-green); }
    .password-modal .error-msg { color: var(--mu-red); }
    .password-modal .success-msg { color: var(--mu-green); }
    .spinner { border-color: var(--mu-line); border-top-color: var(--mu-gold); }
    .nav-btn:focus-visible, .account-trigger:focus-visible, .account-dropdown [role="menuitem"]:focus-visible,
    .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-copy:focus-visible, .btn-delete:focus-visible,
    .auth-container button:focus-visible, .password-modal button:focus-visible {
        outline: 2px solid var(--mu-focus); outline-offset: 3px;
    }

    /* API handoff, full reference and key management. */
    .docs-download-cta, .docs-rendered { background: var(--mu-surface); border-color: var(--mu-line); color: var(--mu-text); box-shadow: none; }
    .docs-resource-copy h2, .docs-orientation h2, .docs-credit-copy h3, .docs-credit-copy strong,
    .docs-rendered h1, .docs-rendered h2 { color: var(--mu-text); }
    .docs-resource-copy p, .docs-resource-copy .docs-link-note, .docs-download-link,
    .docs-import-field-header, .docs-connection dt, .docs-credit-copy p, .docs-inline-link,
    .docs-input-table td, .docs-input-table thead th, .docs-reference-link a,
    .docs-rendered h3, .docs-rendered blockquote { color: var(--mu-muted); }
    .docs-downloads { color: var(--mu-quiet); }
    .docs-format-label, .docs-link-expiry { color: var(--mu-gold); }
    .docs-download-link:hover, .docs-inline-link:hover, .docs-reference-link a:hover { color: var(--mu-text); }
    .docs-copy-status { color: var(--mu-green); }
    .docs-input-table tbody th { color: var(--mu-text); }
    .docs-import-panel, .docs-input-guide, .docs-input-table th, .docs-input-table td,
    .docs-rendered h1, .docs-rendered td, .docs-rendered th, .docs-rendered hr { border-color: var(--mu-line-soft); }
    .docs-connection code, .docs-rendered code { background: var(--mu-field); border-color: var(--mu-line); color: var(--mu-text); }
    .docs-rendered pre { background: var(--mu-code); border-color: var(--mu-line-soft); }
    .docs-rendered pre code { background: none; color: var(--mu-text); }
    .docs-rendered p, .docs-rendered td, .docs-rendered ul, .docs-rendered ol { color: var(--mu-muted); }
    .docs-rendered th { background: var(--mu-field); color: var(--mu-muted); }
    .docs-rendered a { color: var(--mu-link); }
    .docs-rendered blockquote { border-color: var(--mu-gold-line); }
    .docs-resource-layout button:focus-visible, .docs-reference-link a:focus-visible,
    .docs-inline-link:focus-visible, .docs-copy-input:focus-visible { outline-color: var(--mu-focus); }

    /* Live boxes and execution history retain the same status meanings. */
    .rate-limit-label, .rate-limit-footer, .rate-limit-reset { color: var(--mu-muted); }
    .rate-limit-value { color: var(--mu-text); }
    .rate-limit-bar-container { background: var(--mu-line-soft); }
    .monitoring-activity, .monitoring-activity-header { background: var(--mu-surface); border-color: var(--mu-line); }
    .monitoring-activity-header { box-shadow: 0 3px 7px #0002; }
    .monitoring-activity-heading h2, .monitoring-history-panel h3, .monitoring-history-legend strong { color: var(--mu-text); }
    .monitoring-activity-shared, .monitoring-history-subtitle, .monitoring-history-freshness,
    .monitoring-history-endpoint-label, .monitoring-history-custom-range label, .monitoring-history-message,
    .monitoring-history-metric-label, .monitoring-history-rate, .monitoring-history-panel h3 span,
    .monitoring-history-legend, .monitoring-history-caption, .monitoring-history-footnote,
    .monitoring-history-latency > summary span { color: var(--mu-muted); }
    .monitoring-history-controls select, .monitoring-history-controls input,
    .monitoring-requests-toolbar input, .monitoring-requests-toolbar select {
        color: var(--mu-text); background: var(--mu-field); border-color: var(--mu-line);
    }
    .monitoring-requests-toolbar input::placeholder { color: var(--mu-quiet); }
    .monitoring-history-range-presets, .monitoring-requests-tabs { background: var(--mu-field); border-color: var(--mu-line); }
    .monitoring-history-range-presets button, .monitoring-requests-tabs button { color: var(--mu-muted); }
    .monitoring-history-range-presets button[aria-pressed="true"],
    .monitoring-requests-tabs button[aria-pressed="true"] { background: var(--mu-raised); color: var(--mu-text); }
    .monitoring-history-notice, .monitoring-requests-notice, .monitoring-requests-api .monitoring-requests-notice { color: var(--mu-gold); }
    .monitoring-history-summary, .monitoring-history-footnote, .monitoring-history-latency,
    #monitoringRequestsMount, .monitoring-requests-table th, .monitoring-requests-table td { border-color: var(--mu-line-soft); }
    .monitoring-history-summary .monitoring-history-rate-metric {
        background: linear-gradient(135deg, hsl(var(--rate-hue) 18% 18%), hsl(var(--rate-hue) 24% 21%));
        border-color: hsl(var(--rate-hue) 30% 42%);
        color: hsl(var(--rate-hue) 55% 80%);
    }
    .monitoring-history-summary .rate-none { background: var(--mu-field); border-color: var(--mu-line); color: var(--mu-muted); }
    .monitoring-history-summary .status-ok strong { color: var(--mu-green); }
    .monitoring-history-summary .status-not-found strong { color: var(--mu-gold); }
    .monitoring-history-summary .has-errors strong { color: var(--mu-red); }
    .monitoring-history-empty { color: var(--mu-muted); background: var(--mu-field); }
    .monitoring-history-grid { stroke: var(--mu-line-soft); }
    .monitoring-history-axis { fill: var(--mu-quiet); }
    .monitoring-history-zero { stroke: var(--mu-quiet); }
    .monitoring-history-error-bar, .monitoring-history-bar.status-5xx { fill: var(--mu-red); }
    .monitoring-history-bar.status-200 { fill: #80ae90; }
    .monitoring-history-bar.status-404 { fill: var(--mu-gold); }
    .monitoring-history-bar.status-other { fill: var(--mu-quiet); }
    .monitoring-history-swatch.status-200 { background: #80ae90; }
    .monitoring-history-swatch.status-404 { background: var(--mu-gold); }
    .monitoring-history-swatch.status-5xx { background: var(--mu-red); }
    .monitoring-history-swatch.status-other { background: var(--mu-quiet); }
    .monitoring-history-swatch.sma { background: var(--mu-latency); }
    .monitoring-history-latency-line { stroke: var(--mu-latency); }
    .monitoring-history-latency > summary { color: var(--mu-latency); }
    .monitoring-history-latency-point, .monitoring-history-swatch.dot { fill: var(--mu-surface); background: var(--mu-surface); stroke: var(--mu-latency); border-color: var(--mu-latency); }
    .monitoring-history-guide > line, .monitoring-history-guide > circle { stroke: var(--mu-muted); }
    .monitoring-history-guide > circle { fill: var(--mu-surface); }
    .monitoring-history-band { fill: var(--mu-focus); opacity: .09; }
    .monitoring-history-tooltip { color: var(--mu-text); background: var(--mu-raised); border-color: var(--mu-line); box-shadow: 0 6px 24px #0005; }
    .monitoring-history-tooltip-date, .monitoring-history-tooltip td:last-child,
    .monitoring-history-tooltip-breakdown { color: var(--mu-muted); border-color: var(--mu-line); }
    .monitoring-activity-header button:focus-visible, .monitoring-activity-header select:focus-visible,
    .monitoring-activity-header input:focus-visible, .monitoring-history-card summary:focus-visible,
    .monitoring-history-tooltip-action:focus-visible { outline-color: var(--mu-focus); }
    .monitoring-history-interaction:focus-visible { stroke: var(--mu-focus); }

    /* Investigation, SQL examples and the request-detail dialog. */
    .monitoring-requests-filter-hint, .monitoring-requests-scope, .monitoring-requests-toolbar label,
    .monitoring-requests-table th, .monitoring-requests-pagination, .monitoring-requests-note,
    .monitoring-requests-api p, .monitoring-requests-dialog dt { color: var(--mu-muted); }
    .monitoring-requests-table td, .monitoring-requests-api h3 { color: var(--mu-text); }
    .monitoring-requests-chips > span { color: var(--mu-muted); background: var(--mu-raised); }
    .monitoring-requests-chips button, .monitoring-requests-api-actions a, .monitoring-requests-api summary { color: var(--mu-link); }
    .monitoring-requests-code.error { color: var(--mu-red); }
    .monitoring-requests-code.not-found { color: var(--mu-gold); }
    .monitoring-requests-api { background: var(--mu-field); border-color: var(--mu-line); }
    .monitoring-requests-api pre, .monitoring-requests-dialog pre { background: var(--mu-code); color: var(--mu-text); border-color: var(--mu-line); }
    .monitoring-requests-dialog { background: var(--mu-surface); color: var(--mu-text); border-color: var(--mu-line); box-shadow: 0 18px 70px #0007; }
    .monitoring-requests-dialog::backdrop { background: #080e19b3; }
    .monitoring-requests-api a:focus-visible, .monitoring-requests-api summary:focus-visible,
    .monitoring-requests-card button:focus-visible, .monitoring-requests-card input:focus-visible,
    .monitoring-requests-card select:focus-visible, .monitoring-requests-dialog button:focus-visible { outline-color: var(--mu-focus); }

    /* Green Data paths remain green, directly on the lined canvas. */
    #playgroundReady { --ink: var(--mu-text); --muted: var(--mu-muted); --mint: var(--mu-green-surface); --gold: var(--mu-gold); }
    #playgroundReady .input-choice, #playgroundReady .output-card { background: var(--mu-surface); color: var(--mu-text); border-color: var(--mu-line); }
    #playgroundReady .input-choice:hover, #playgroundReady .output-card:hover { background: #263a35; border-color: var(--mu-green-line); }
    #playgroundReady .input-choice.selected, #playgroundReady .output-card.selected { background: var(--mu-green-surface); border-color: var(--mu-green-line); color: var(--mu-green); }
    #playgroundReady .input-choice.selected { box-shadow: inset 3px 0 var(--mu-green-line); }
    #playgroundReady .icon { color: var(--mu-quiet); }
    #playgroundReady .selected .icon, #playgroundReady .output-card .arrow { color: var(--mu-green); }
    #playgroundReady .output-card .port { background: var(--mu-field); border-color: var(--mu-green-line); }
    #playgroundReady .output-card.selected .port { background: var(--mu-green); border-color: var(--mu-green); }
    #playgroundReady .wires path { stroke: #577c66; }
    #playgroundReady .wires path.active { stroke: #a3c2ac; }
    #playgroundReady .wires circle { fill: var(--mu-page); stroke: var(--mu-green-line); }
    #playgroundReady .endpoint-panel, #playgroundReady .reference-dialog { background: var(--mu-surface); border-color: var(--mu-line); }
    #playgroundReady .endpoint-heading { background: #202f32; border-color: var(--mu-line-soft); }
    #playgroundReady .method { color: var(--mu-green); background: var(--mu-green-surface); border-color: var(--mu-green-line); }
    #playgroundReady .copy-button, #playgroundReady .dialog-close { background: var(--mu-raised); color: var(--mu-text); border-color: var(--mu-line); }
    #playgroundReady .copy-button:hover { background: #30463b; border-color: var(--mu-green-line); }
    #playgroundReady .copy-button span { color: var(--mu-green); }
    #playgroundReady .copy-glyph { stroke: var(--mu-gold); }
    #playgroundReady .endpoint-heading .inspector-label::before { background: var(--mu-gold); }
    #playgroundReady :is(.mini-heading, .playground-guidance, .mobile-path-label, .input-choice .count,
        .output-card small, .endpoint-heading .inspector-label, .endpoint-heading p:last-child, .text-button,
        .request-caption > span, .request-field label, .request-field label span, .field-help,
        .request-meta, .request-url, .request-url code, .optional-inputs summary, .optional-inputs summary span,
        .response-empty p, .dialog-heading p, .dialog-tools label, .pagination) { color: var(--mu-muted); }
    #playgroundReady .request-caption h4, #playgroundReady .response-empty strong { color: var(--mu-text); }
    #playgroundReady .request-field input, #playgroundReady .request-field select,
    #playgroundReady .dialog-tools select { background: var(--mu-field); color: var(--mu-text); border-color: var(--mu-line); }
    #playgroundReady .request-field input::placeholder { color: var(--mu-quiet); }
    #playgroundReady .request-field input:focus, #playgroundReady .request-field select:focus { border-color: var(--mu-green); outline-color: var(--mu-green-line); }
    #playgroundReady .request-field :is(input, select)[aria-invalid=true] { border-color: var(--mu-red); }
    #playgroundReady .run-button { background: #354c69; border-color: #7188a6; color: var(--mu-text); }
    #playgroundReady .run-button:hover:not(:disabled) { background: #415c7d; }
    #playgroundReady .run-button span { color: var(--mu-text); }
    #playgroundReady .request-error { background: var(--mu-red-surface); border-color: var(--mu-red-line); color: var(--mu-red); }
    #playgroundReady .response-empty { background: var(--mu-field); }
    #playgroundReady .empty-brackets { color: var(--mu-green); }
    #playgroundReady .try-form, #playgroundReady .dialog-heading, #playgroundReady .next-step { border-color: var(--mu-line-soft); }
    #playgroundReady .preview-response { background: var(--mu-code); border-color: var(--mu-line); }
    #playgroundReady .next-step, #playgroundReady .next-step small { color: var(--mu-muted); }
    #playgroundReady .next-step button { color: var(--mu-green); }
    #playgroundReady #copyStatus, #playgroundReady #dialogStatus { color: var(--mu-green); }
    #playgroundReady #runStatus, #playgroundReady #referenceMeta { color: var(--mu-muted); }
    #playgroundReady #referenceText { background: var(--mu-code); color: var(--mu-text); border-color: var(--mu-line); }
    #playgroundReady .reference-dialog::backdrop { background: #080e19b3; }
    #playgroundReady button:focus-visible, #playgroundReady a:focus-visible,
    #playgroundReady summary:focus-visible, #playgroundReady .reference-dialog button:focus-visible,
    #playgroundReady .dialog-tools select:focus-visible, #playgroundReady #referenceText:focus-visible { outline-color: var(--mu-focus); }

    /* One continuous neutral/gold schema, never nested green cards. */
    #playgroundReady #schemaDisclosure {
        --schema-ink: var(--mu-text);
        --schema-muted: var(--mu-muted);
        --schema-gold: var(--mu-gold);
        --schema-line: #655b4d;
        background: var(--mu-surface); border-color: var(--mu-line-soft);
    }
    #playgroundReady #schemaDisclosure > summary { background: #2d2d30; }
    #playgroundReady #schemaDisclosure > summary:hover { background: #38332f; }
    #playgroundReady #schemaDisclosure > summary:focus-visible { outline-color: var(--mu-gold); }
    #playgroundReady #schemaDisclosure[open] > summary { border-color: var(--schema-line); }
    #playgroundReady #schemaDisclosure .disclosure-chevron { color: var(--mu-gold); }
    #playgroundReady #schemaDisclosure .open-group-heading::before,
    #playgroundReady #schemaDisclosure .response-context h4::before { background: var(--mu-gold); }
    #playgroundReady #schemaDisclosure .inline-children { border-color: var(--schema-line); }
    #playgroundReady #schemaDisclosure .schema-footnote { border-color: var(--mu-line-soft); }

    /* MFA injects its styles late; body gives these rules stable precedence.
       Keep the QR tile white and unfiltered so authenticator scanners still work. */
    body .mu-mfa-dialog { background: var(--mu-surface); color: var(--mu-text); border-color: var(--mu-line); }
    body .mu-mfa-manager, body .mu-mfa-secret { color: var(--mu-text); }
    body .mu-mfa-dialog p, body .mu-mfa-label, body .mu-mfa-manager-note,
    body .mu-mfa-factor-copy span, body .mu-mfa-manager-status { color: var(--mu-muted); }
    body .mu-mfa-input, body .mu-mfa-select, body .mu-mfa-secret-row, body .mu-mfa-factor {
        background: var(--mu-field); color: var(--mu-text); border-color: var(--mu-line);
    }
    body .mu-mfa-input::placeholder { color: var(--mu-quiet); }
    body .mu-mfa-input:focus, body .mu-mfa-select:focus { border-color: var(--mu-gold); box-shadow: 0 0 0 3px #d4b58030; }
    body .mu-mfa-primary { background: #354c69; color: var(--mu-text); border-color: #7188a6; }
    body .mu-mfa-secondary { background: var(--mu-raised); color: var(--mu-text); border-color: var(--mu-line); }
    body .mu-mfa-button:focus-visible { outline: 2px solid var(--mu-focus); outline-offset: 3px; }
    body .mu-mfa-error { background: var(--mu-red-surface); color: var(--mu-red); }
    body .mu-mfa-manager-status.error { color: var(--mu-red); }
    body .mu-mfa-qr { color-scheme: light; }

    /* Sign-in and account recovery use the same surfaces, without auth changes. */
    .auth-container .logo-text { color: var(--mu-text); }
    .auth-card { background: var(--mu-surface); border-color: var(--mu-line); }
    .auth-container .tabs { background: var(--mu-field); }
    .auth-container .tab { color: var(--mu-muted); }
    .auth-container .tab:hover { color: var(--mu-text); }
    .auth-container .tab.active { background: var(--mu-raised); color: var(--mu-gold); }
    .password-hint, .signup-notice { color: var(--mu-muted); }
    .forgot-password { color: var(--mu-gold); }
}