/* Shared surface used by documentation content blocks. */
.devdocs-callout,
.devdocs-endpoint,
.devdocs-expandable,
.devdocs-checklist,
.devdocs-related,
.devdocs-file-tree {
    margin: 24px 0;
    border: 1px solid var(--devdocs-border, #e4e7ec);
    border-radius: 10px;
    background: color-mix(in srgb, var(--devdocs-sidebar-bg, #f4f6f8) 70%, var(--devdocs-content-bg, #fff));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--devdocs-text, #101828) 4%, transparent);
}

.devdocs-callout {
    border-color: color-mix(in srgb, var(--devdocs-primary, #155eef) 28%, var(--devdocs-border, #e4e7ec));
    background: color-mix(in srgb, var(--devdocs-primary, #155eef) 6%, var(--devdocs-content-bg, #fff));
    padding: 18px 20px;
}

.devdocs-callout--tip {
    border-color: color-mix(in srgb, #15803d 35%, var(--devdocs-border, #e4e7ec));
    background: color-mix(in srgb, #15803d 6%, var(--devdocs-content-bg, #fff));
}

.devdocs-callout--warning {
    border-color: color-mix(in srgb, #d97706 35%, var(--devdocs-border, #e4e7ec));
    background: color-mix(in srgb, #d97706 7%, var(--devdocs-content-bg, #fff));
}

.devdocs-callout > :last-child {
    margin-bottom: 0;
}

.devdocs-callout > strong:first-child {
    display: block;
    margin: 0 0 8px;
    color: var(--devdocs-text, #101828);
}

.devdocs-steps {
    counter-reset: devdocs-step;
    margin: 24px 0;
}

.devdocs-step {
    counter-increment: devdocs-step;
    position: relative;
    padding: 0 0 20px 48px;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--devdocs-border, #e4e7ec);
}

.devdocs-step:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.devdocs-step::before {
    content: counter(devdocs-step);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--devdocs-primary, #155eef);
    color: var(--devdocs-content-bg, #fff);
    font-weight: 600;
    font-size: 13px;
}

.devdocs-step > strong:first-child {
    display: block;
    margin: 4px 0 8px;
}

.devdocs-content-tabs {
    margin: 24px 0;
}

.devdocs-content-tabs__list {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--devdocs-border, #e4e7ec);
}

.devdocs-content-tabs__list button {
    padding: 10px 16px;
    font: inherit;
    color: var(--devdocs-muted, #667085);
    cursor: pointer;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.devdocs-content-tabs__list button[aria-selected="true"] {
    border-bottom-color: var(--devdocs-primary, #155eef);
    color: var(--devdocs-primary, #155eef);
    font-weight: 600;
}

.devdocs-content-tabs [hidden] {
    display: none !important;
}

.devdocs-content-tab {
    padding: 16px 0 0;
}

.devdocs-content-tabs :focus-visible {
    outline: 2px solid var(--devdocs-primary, #155eef);
    outline-offset: 3px;
}

.devdocs-parameters {
    overflow-x: auto;
    margin: 24px 0;
    border: 1px solid var(--devdocs-border, #e4e7ec);
    border-radius: 10px;
}

.devdocs-parameters table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin: 0;
}

.devdocs-parameters :is(th, td) {
    padding: 12px 14px;
    border-bottom: 1px solid var(--devdocs-border, #e4e7ec);
    vertical-align: top;
}

.devdocs-parameters tr:last-child :is(th, td) {
    border-bottom: 0;
}

.devdocs-parameters thead {
    background: var(--devdocs-sidebar-bg, #f4f6f8);
}

.devdocs-parameters thead th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--devdocs-muted, #667085);
    border-bottom: 1px solid var(--devdocs-border, #e4e7ec);
}

.devdocs-endpoint {
    overflow: hidden;
    padding: 0;
}

.devdocs-endpoint__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    background: var(--devdocs-sidebar-bg, #f4f6f8);
    border-bottom: 1px solid var(--devdocs-border, #e4e7ec);
}

.devdocs-endpoint__method {
    font: 600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 6px;
    color: #fff;
    background: #667085;
}

.devdocs-endpoint__method--get {
    background: #15803d;
}

.devdocs-endpoint__method--post {
    background: #1d4ed8;
}

.devdocs-endpoint__method--put,
.devdocs-endpoint__method--patch {
    background: #b45309;
}

.devdocs-endpoint__method--delete {
    background: #b91c1c;
}

.devdocs-endpoint__path {
    font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--devdocs-text, #101828);
}

.devdocs-endpoint__auth {
    margin-left: auto;
    font-size: 12px;
    color: var(--devdocs-muted, #667085);
}

.devdocs-endpoint > .devdocs-endpoint__header + * {
    padding: 0 16px;
}

.devdocs-endpoint > :last-child {
    margin-bottom: 16px;
}

.devdocs-definitions {
    margin: 24px 0;
    border: 1px solid var(--devdocs-border, #e4e7ec);
    border-radius: 10px;
    padding: 4px 18px;
    background: var(--devdocs-content-bg, #fff);
}

.devdocs-definition {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: 8px 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--devdocs-border, #e4e7ec);
}

.devdocs-definition:last-child {
    border-bottom: 0;
}

.devdocs-definition dt {
    margin: 0;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95em;
    color: var(--devdocs-text, #101828);
}

.devdocs-definition dd {
    margin: 0;
}

.devdocs-definition dd > :first-child {
    margin-top: 0;
}

.devdocs-definition dd > :last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .devdocs-definition {
        grid-template-columns: 1fr;
    }
}

.devdocs-expandable {
    padding: 0 16px 4px;
}

.devdocs-expandable > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 14px 0;
    list-style: none;
    color: var(--devdocs-text, #101828);
}

.devdocs-expandable > summary::-webkit-details-marker,
.devdocs-expandable > summary::marker {
    display: none;
    content: "";
}

.devdocs-expandable > summary::before {
    content: "";
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-right: 10px;
    border-right: 2px solid var(--devdocs-primary, #155eef);
    border-bottom: 2px solid var(--devdocs-primary, #155eef);
    transform: rotate(-45deg);
    vertical-align: 0.15em;
    transition: transform 0.15s ease;
}

.devdocs-expandable[open] > summary::before {
    transform: rotate(45deg);
    vertical-align: 0.05em;
}

.devdocs-expandable__body {
    padding-bottom: 12px;
}

.devdocs-expandable__body > :first-child {
    margin-top: 0;
}

.devdocs-checklist {
    padding: 18px 20px;
}

.devdocs-checklist__title {
    margin: 0 0 12px;
    font-size: 1.05rem;
    color: var(--devdocs-text, #101828);
}

.devdocs-checklist__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.devdocs-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
}

.devdocs-checklist__item:last-child {
    margin-bottom: 0;
}

.devdocs-checklist__marker {
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.2em;
    border: 2px solid var(--devdocs-primary, #155eef);
    border-radius: 4px;
    background: var(--devdocs-content-bg, #fff);
}

.devdocs-related {
    padding: 18px 20px;
}

.devdocs-related__title {
    margin: 0 0 10px;
    font-size: 1.05rem;
    color: var(--devdocs-text, #101828);
}

.devdocs-related__list {
    margin: 0;
    padding-left: 1.2em;
}

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

.devdocs-file-tree {
    padding: 14px 16px;
}

.devdocs-file-tree__path {
    display: block;
    margin-bottom: 10px;
    font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--devdocs-primary, #155eef);
    word-break: break-all;
}

.devdocs-file-tree__tree {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre;
    color: var(--devdocs-text, #101828);
    background: transparent;
    border: 0;
}

.devdocs-version-badge-wrap {
    margin: 12px 0 20px;
}

.devdocs-version-badge {
    display: inline-block;
    font: 600 12px/1.2 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--devdocs-border, #e4e7ec);
    background: var(--devdocs-sidebar-bg, #f4f6f8);
    color: var(--devdocs-text, #101828);
}

.devdocs-version-badge--since {
    border-color: color-mix(in srgb, #15803d 35%, var(--devdocs-border, #e4e7ec));
    background: color-mix(in srgb, #15803d 8%, var(--devdocs-content-bg, #fff));
    color: #166534;
}

.devdocs-version-badge--updated {
    border-color: color-mix(in srgb, var(--devdocs-primary, #155eef) 35%, var(--devdocs-border, #e4e7ec));
    background: color-mix(in srgb, var(--devdocs-primary, #155eef) 8%, var(--devdocs-content-bg, #fff));
    color: var(--devdocs-secondary, #004eeb);
}

.devdocs-version-badge--deprecated {
    border-color: color-mix(in srgb, #d97706 35%, var(--devdocs-border, #e4e7ec));
    background: color-mix(in srgb, #d97706 8%, var(--devdocs-content-bg, #fff));
    color: #92400e;
}

/* Editor canvas: keep DevDocs blocks looking like the front end, not admin forms. */
.editor-styles-wrapper .devdocs-block__rows {
    display: grid;
    gap: 10px;
    margin: 12px 0;
}

.editor-styles-wrapper .devdocs-block__row {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--devdocs-border, #e4e7ec);
    border-radius: 8px;
    background: var(--devdocs-content-bg, #fff);
}

.editor-styles-wrapper .devdocs-block__row-actions {
    display: flex;
    justify-content: flex-end;
}

.editor-styles-wrapper .devdocs-block__add {
    margin-top: 4px;
}

.editor-styles-wrapper .devdocs-parameters-editor .components-base-control,
.editor-styles-wrapper .devdocs-related .components-base-control,
.editor-styles-wrapper .devdocs-file-tree .components-base-control {
    margin-bottom: 0;
}

.editor-styles-wrapper .devdocs-parameters-editor .components-base-control__help,
.editor-styles-wrapper .devdocs-file-tree .components-base-control__help,
.editor-styles-wrapper .devdocs-related .components-base-control__help {
    display: none;
}

.editor-styles-wrapper .devdocs-block__url-warning {
    margin: 0;
    font-size: 12px;
    color: #b32d2e;
}

.editor-styles-wrapper .devdocs-checklist__item .devdocs-checklist__text {
    flex: 1;
    min-width: 0;
}

.editor-styles-wrapper .devdocs-expandable--editor {
    padding: 0 16px 12px;
}

.editor-styles-wrapper .devdocs-expandable--editor .devdocs-expandable__summary {
    display: block;
    font-weight: 600;
    padding: 14px 0 8px;
}

.editor-styles-wrapper .devdocs-content-tabs > .devdocs-content-tab {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--devdocs-border, #e4e7ec);
    border-radius: 8px;
    background: var(--devdocs-content-bg, #fff);
}

.editor-styles-wrapper .devdocs-content-tab > strong:first-child {
    display: block;
    margin-bottom: 8px;
}