/* Centered content Modal. Shared by the Flux composition and native WP adapter. */
/* Reserve the native page scrollbar before opening, so scroll lock cannot shift content. */
html:has(.octopus-modal) { scrollbar-gutter: stable; }

.octopus-modal {
    --octopus-modal-width: 40rem;
    --octopus-modal-radius: 1rem;
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    width: var(--octopus-modal-width);
    max-width: calc(100% - var(--space-component-sm) * 2);
    min-width: 0;
    max-height: calc(100dvh - var(--space-component-sm) * 2);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--octopus-modal-radius);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    overflow: hidden;
    font-family: var(--font-sans);
}
/* Keep the frame/toolbar still; only the inset body owns scrolling. */
.octopus-modal[open] { display: flex; flex-direction: column; }
.octopus-modal::backdrop,
[data-flux-modal] > dialog.octopus-modal::backdrop { background: color-mix(in srgb, var(--color-zinc-900) 60%, transparent); }
.octopus-modal__toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-component-sm);
    padding: var(--space-component-sm) var(--space-layout-xs);
    background: var(--color-bg-base);
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text-secondary);
    font-size: var(--type-body-secondary-size);
    line-height: var(--type-body-secondary-leading);
}
.octopus-modal__toolbar > span { min-width: 0; overflow-wrap: anywhere; }
.octopus-modal__toolbar > :last-child { flex-shrink: 0; }
.octopus-modal__footer {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-component-xs);
    padding: var(--space-component-sm) var(--space-layout-xs);
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-bg-base);
}
.octopus-modal__footer > * { min-width: 0; max-width: 100%; }
.octopus-modal__body {
    --octopus-modal-body-padding: var(--space-layout-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-layout-xs);
    min-width: 0;
    min-height: 0;
    margin-inline-end: var(--space-component-xs);
    margin-bottom: var(--space-component-xs);
    padding: var(--octopus-modal-body-padding);
    padding-inline-end: calc(var(--octopus-modal-body-padding) - var(--space-component-xs));
    padding-bottom: calc(var(--octopus-modal-body-padding) - var(--space-component-xs));
    overflow: auto;
    overscroll-behavior: contain;
    overflow-wrap: anywhere;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}
.octopus-modal__body > * { flex-shrink: 0; }
/* WebKit/Blink get the canonical slim rounded thumb, without arrow buttons.
   Firefox uses the standard thin scrollbar above. No JS scrollbar replacement. */
@supports selector(::-webkit-scrollbar) {
    .octopus-modal__body { scrollbar-width: auto; scrollbar-color: auto; }
}
.octopus-modal__body::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
.octopus-modal__body::-webkit-scrollbar-track,
.octopus-modal__body::-webkit-scrollbar-corner { background: transparent; }
.octopus-modal__body::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.octopus-modal__body::-webkit-scrollbar-thumb {
    min-height: calc(var(--space-component-sm) * 2);
    border: 2px solid transparent;
    border-radius: var(--octopus-modal-radius);
    background: var(--scrollbar-thumb);
    background-clip: padding-box;
}
.octopus-modal__body::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
@media (max-width: 30rem) {
    .octopus-modal__body { --octopus-modal-body-padding: calc(var(--space-layout-xs) - var(--space-component-xs) / 2); }
    .octopus-modal__toolbar { padding: calc(var(--space-component-xs) * 1.5) calc(var(--space-layout-xs) - var(--space-component-xs) / 2); }
    .octopus-modal__footer { padding: var(--space-component-sm) calc(var(--space-layout-xs) - var(--space-component-xs) / 2); }
}
@media (forced-colors: active) {
    .octopus-modal__body { scrollbar-width: auto; scrollbar-color: auto; }
    .octopus-modal__body::-webkit-scrollbar-thumb { background-color: ButtonText; }
}