/* Presets are scoped to DevDocs and leave the surrounding WordPress theme intact. */
.devdocs-wrapper[data-preset="ocean"] {
    --devdocs-primary: #0369a1;
    --devdocs-secondary: #075985;
    --devdocs-accent: #0284c7;
    --devdocs-sidebar-bg: #f0f9ff;
    --devdocs-content-bg: #fff;
    --devdocs-text: #0c2338;
    --devdocs-border: #d5e7f1;
    --devdocs-muted: #526777;
}

.devdocs-wrapper[data-preset="forest"] {
    --devdocs-primary: #047857;
    --devdocs-secondary: #065f46;
    --devdocs-accent: #059669;
    --devdocs-sidebar-bg: #f0fdf4;
    --devdocs-content-bg: #fff;
    --devdocs-text: #17352a;
    --devdocs-border: #d4e8dc;
    --devdocs-muted: #526c60;
}

.devdocs-wrapper[data-preset="slate"] {
    --devdocs-primary: #475569;
    --devdocs-secondary: #334155;
    --devdocs-accent: #64748b;
    --devdocs-sidebar-bg: #f8fafc;
    --devdocs-content-bg: #fff;
    --devdocs-text: #0f172a;
    --devdocs-border: #e2e8f0;
    --devdocs-muted: #64748b;
}

.devdocs-wrapper[data-theme="dark"], .devdocs-wrapper[data-theme-mode="dark"]:not([data-theme]) {
    --devdocs-primary: #93c5fd;
    --devdocs-secondary: #bfdbfe;
    --devdocs-accent: #60a5fa;
    --devdocs-sidebar-bg: #111827;
    --devdocs-content-bg: #0f172a;
    --devdocs-text: #e2e8f0;
    --devdocs-border: #334155;
    --devdocs-muted: #a8b5c7;
    color-scheme: dark;
}

/* Keep preset brand accents in dark mode (surfaces stay on the dark palette above). */
.devdocs-wrapper[data-preset="ocean"][data-theme="dark"],
.devdocs-wrapper[data-preset="ocean"][data-theme-mode="dark"]:not([data-theme]) {
    --devdocs-primary: #38bdf8;
    --devdocs-secondary: #7dd3fc;
    --devdocs-accent: #0ea5e9;
}

.devdocs-wrapper[data-preset="forest"][data-theme="dark"],
.devdocs-wrapper[data-preset="forest"][data-theme-mode="dark"]:not([data-theme]) {
    --devdocs-primary: #34d399;
    --devdocs-secondary: #6ee7b7;
    --devdocs-accent: #10b981;
}

.devdocs-wrapper[data-preset="slate"][data-theme="dark"],
.devdocs-wrapper[data-preset="slate"][data-theme-mode="dark"]:not([data-theme]) {
    --devdocs-primary: #94a3b8;
    --devdocs-secondary: #cbd5e1;
    --devdocs-accent: #64748b;
}

@media (prefers-color-scheme: dark) {
    .devdocs-wrapper[data-theme-mode="system"]:not([data-theme]) {
        --devdocs-primary: #93c5fd;
        --devdocs-secondary: #bfdbfe;
        --devdocs-accent: #60a5fa;
        --devdocs-sidebar-bg: #111827;
        --devdocs-content-bg: #0f172a;
        --devdocs-text: #e2e8f0;
        --devdocs-border: #334155;
        --devdocs-muted: #a8b5c7;
        color-scheme: dark;
    }

    .devdocs-wrapper[data-preset="ocean"][data-theme-mode="system"]:not([data-theme]) {
        --devdocs-primary: #38bdf8;
        --devdocs-secondary: #7dd3fc;
        --devdocs-accent: #0ea5e9;
    }

    .devdocs-wrapper[data-preset="forest"][data-theme-mode="system"]:not([data-theme]) {
        --devdocs-primary: #34d399;
        --devdocs-secondary: #6ee7b7;
        --devdocs-accent: #10b981;
    }

    .devdocs-wrapper[data-preset="slate"][data-theme-mode="system"]:not([data-theme]) {
        --devdocs-primary: #94a3b8;
        --devdocs-secondary: #cbd5e1;
        --devdocs-accent: #64748b;
    }
}

.devdocs-wrapper[data-theme="light"] {
    color-scheme: light;
}

.devdocs-wrapper[data-font="system"] {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.devdocs-wrapper[data-font="serif"] {
    font-family: Georgia, "Times New Roman", serif;
}

/*
 * Documentation width sizes the whole docs shell (sidebar + reading column).
 * Inner article/welcome/changelog keep a matching reading measure for full-page mode.
 */
.devdocs-wrapper[data-width="comfortable"] {
    max-width: 1100px;
    margin-inline: auto;
}

.devdocs-wrapper[data-width="wide"] {
    max-width: 1400px;
    margin-inline: auto;
}

.devdocs-wrapper[data-width="full"] {
    max-width: none;
}

.is-layout-constrained > .devdocs-wrapper[data-width="comfortable"],
.entry-content > .devdocs-wrapper[data-width="comfortable"],
.wp-block-post-content > .devdocs-wrapper[data-width="comfortable"] {
    max-width: 1100px;
}

.is-layout-constrained > .devdocs-wrapper[data-width="wide"],
.entry-content > .devdocs-wrapper[data-width="wide"],
.wp-block-post-content > .devdocs-wrapper[data-width="wide"] {
    max-width: 1400px;
}

.is-layout-constrained > .devdocs-wrapper[data-width="full"],
.entry-content > .devdocs-wrapper[data-width="full"],
.wp-block-post-content > .devdocs-wrapper[data-width="full"] {
    max-width: none;
}

.devdocs-wrapper[data-width="comfortable"] :is(.devdocs-article, .devdocs-welcome, .devdocs-changelog) {
    max-width: 800px;
    margin-inline: auto;
}

.devdocs-wrapper[data-width="wide"] :is(.devdocs-article, .devdocs-welcome, .devdocs-changelog) {
    max-width: 1100px;
    margin-inline: auto;
}

.devdocs-wrapper[data-width="full"] :is(.devdocs-article, .devdocs-welcome, .devdocs-changelog) {
    max-width: none;
}

body.devdocs-full-page-template .devdocs-wrapper {
    max-width: none;
    margin-inline: 0;
}

.devdocs-wrapper .devdocs-search__label, .devdocs-wrapper .devdocs-welcome__card {
    background: var(--devdocs-content-bg, #fff);
}

.devdocs-wrapper .devdocs-latest-update, .devdocs-wrapper .devdocs-article__body th {
    background: var(--devdocs-sidebar-bg, #f4f6f8);
}

.devdocs-wrapper .devdocs-article__body :is(th,td) {
    border-color: var(--devdocs-border, #e4e7ec);
}

.devdocs-wrapper .devdocs-article__body :not(pre) > code, .devdocs-wrapper .devdocs-latest-update__version, .devdocs-wrapper .devdocs-changelog__version {
    background: var(--devdocs-sidebar-bg, #f4f6f8);
}

.devdocs-theme-control {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--devdocs-muted, #667085);
}

.devdocs-theme-select {
    width: 100%;
    max-width: none;
    border: 1px solid var(--devdocs-border, #e4e7ec);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--devdocs-content-bg, #fff);
    color: var(--devdocs-text, #101828);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--devdocs-text, #101828) 4%, transparent);
}

.devdocs-feedback {
    margin-top: 32px;
    padding: 22px 24px 24px;
    border: 1px solid color-mix(in srgb, var(--devdocs-primary, #155eef) 22%, var(--devdocs-border, #e4e7ec));
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--devdocs-primary, #155eef) 8%, var(--devdocs-content-bg, #fff)) 0%,
            color-mix(in srgb, var(--devdocs-accent, #2970ff) 5%, var(--devdocs-content-bg, #fff)) 55%,
            var(--devdocs-content-bg, #fff) 100%
        );
    box-shadow: 0 1px 2px color-mix(in srgb, var(--devdocs-text, #101828) 4%, transparent);
}

.devdocs-feedback h2 {
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 0 0 14px;
    color: var(--devdocs-text, #101828);
}

.devdocs-feedback fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.devdocs-feedback fieldset > label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--devdocs-text, #101828);
    background: var(--devdocs-content-bg, #fff);
    border: 1px solid var(--devdocs-border, #e4e7ec);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.devdocs-feedback fieldset > label:hover {
    border-color: color-mix(in srgb, var(--devdocs-primary, #155eef) 45%, var(--devdocs-border, #e4e7ec));
    background: color-mix(in srgb, var(--devdocs-primary, #155eef) 6%, var(--devdocs-content-bg, #fff));
}

.devdocs-feedback fieldset > label:has(input:focus-visible) {
    outline: 2px solid var(--devdocs-primary, #155eef);
    outline-offset: 2px;
}

.devdocs-feedback fieldset > label:has(input:checked) {
    border-color: var(--devdocs-primary, #155eef);
    background: color-mix(in srgb, var(--devdocs-primary, #155eef) 16%, var(--devdocs-content-bg, #fff));
    color: var(--devdocs-secondary, #004eeb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--devdocs-primary, #155eef) 18%, transparent);
}

.devdocs-feedback > label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--devdocs-text, #101828);
}

.devdocs-feedback textarea {
    display: block;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 0;
    padding: 10px 12px;
    font: inherit;
    color: var(--devdocs-text, #101828);
    background: var(--devdocs-content-bg, #fff);
    border: 1px solid var(--devdocs-border, #e4e7ec);
    border-radius: 8px;
    box-sizing: border-box;
    resize: vertical;
}

.devdocs-feedback textarea:focus-visible {
    outline: none;
    border-color: var(--devdocs-primary, #155eef);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--devdocs-primary, #155eef) 18%, transparent);
}

.devdocs-feedback button[type="submit"],
.devdocs-preview .devdocs-feedback button {
    margin-top: 4px;
    padding: 10px 18px;
    border: 1px solid var(--devdocs-primary, #155eef);
    border-radius: 8px;
    cursor: pointer;
    background: var(--devdocs-primary, #155eef);
    color: var(--devdocs-content-bg, #fff);
    font: inherit;
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.devdocs-feedback button[type="submit"]:hover:not(:disabled) {
    background: var(--devdocs-secondary, #004eeb);
    border-color: var(--devdocs-secondary, #004eeb);
}

.devdocs-feedback button[type="submit"]:focus-visible {
    outline: 2px solid var(--devdocs-accent, #2970ff);
    outline-offset: 2px;
}

.devdocs-feedback button:disabled {
    opacity: .6;
    cursor: default;
}

.devdocs-feedback__privacy {
    margin: 12px 0 14px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--devdocs-muted, #667085);
}

.devdocs-feedback [role="status"] {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--devdocs-secondary, #004eeb);
}

.devdocs-wrapper .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.devdocs-preview-frame {
    width: 100%;
    max-width: 900px;
    padding: 14px;
    box-sizing: border-box;
    background: #c3c4c7;
    border-radius: 8px;
}

.devdocs-preview {
    width: 100%;
    min-height: 260px;
    border: 1px solid var(--devdocs-border, #e4e7ec);
    border-radius: 8px;
    overflow: hidden;
    background: var(--devdocs-content-bg, #fff);
    color: var(--devdocs-text, #101828);
    margin-inline: auto;
    transition: max-width 0.2s ease;
}

/*
 * Preview mirrors Documentation width on the whole shell (sidebar + content),
 * scaled to the settings column. The grey frame shows unused page space.
 *
 * Do not re-apply reading-column % here: frontend article max-widths (800 / 1100)
 * match the content column (wrapper − 300px sidebar). Percentages on .devdocs-content
 * would shrink the article a second time (~53% of the shell instead of ~73%).
 */
.devdocs-preview.devdocs-wrapper[data-width="comfortable"] {
    max-width: 68%;
}

.devdocs-preview.devdocs-wrapper[data-width="wide"] {
    max-width: 86%;
}

.devdocs-preview.devdocs-wrapper[data-width="full"] {
    max-width: none;
}

.devdocs-preview.devdocs-wrapper[data-width="comfortable"] :is(.devdocs-article, .devdocs-welcome, .devdocs-changelog),
.devdocs-preview.devdocs-wrapper[data-width="wide"] :is(.devdocs-article, .devdocs-welcome, .devdocs-changelog),
.devdocs-preview.devdocs-wrapper[data-width="full"] :is(.devdocs-article, .devdocs-welcome, .devdocs-changelog) {
    max-width: none;
}

.devdocs-preview .devdocs-sidebar {
    position: static;
    transform: none;
    width: 160px;
    min-width: 160px;
    padding: 16px;
    height: auto;
    box-shadow: none;
    background: var(--devdocs-sidebar-bg, #f4f6f8);
    color: var(--devdocs-text, #101828);
}

.devdocs-preview .devdocs-content {
    padding: 24px;
    background: var(--devdocs-content-bg, #fff);
    color: var(--devdocs-text, #101828);
}

.devdocs-preview :is(h2, h3, p) {
    color: inherit;
}

.devdocs-preview .devdocs-sidebar h3 {
    color: var(--devdocs-primary, #155eef);
    margin: 0 0 8px;
}

.devdocs-preview .devdocs-sidebar p {
    color: var(--devdocs-muted, #667085);
    margin: 0;
}

.devdocs-preview .devdocs-preview-link {
    color: var(--devdocs-primary, #155eef);
}

.devdocs-preview h2 {
    color: var(--devdocs-text, #101828);
}

.devdocs-preview .devdocs-toc {
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid var(--devdocs-border, #e4e7ec);
    border-radius: 6px;
    background: var(--devdocs-sidebar-bg, #f4f6f8);
    color: var(--devdocs-muted, #667085);
    font-size: 12px;
}

.devdocs-preview .devdocs-feedback {
    margin-top: 18px;
    padding: 14px 16px;
}

.devdocs-preview .devdocs-feedback h2 {
    font-size: 15px;
    margin-bottom: 10px;
}

.devdocs-preview .devdocs-feedback fieldset > label {
    padding: 7px 12px;
    font-size: 13px;
}

.devdocs-preview .devdocs-feedback button[type="submit"],
.devdocs-preview .devdocs-feedback button {
    padding: 8px 14px;
    font-size: 13px;
}

@media (max-width: 600px) {
    .devdocs-preview .devdocs-sidebar {
        display: none;
    }
}