/* Portable Octopus contracts. Scoped to components, not wp-admin controls. */
.octopus-checkbox { --oc-size:1.5rem; --oc-radius:.375rem; display:flex; align-items:center; gap:.625rem; min-height:var(--control-height-md); width:fit-content; color:var(--color-text-primary); font-family:var(--font-sans); font-size:var(--type-label-size); line-height:var(--type-label-leading); }
.octopus-checkbox[data-size="sm"] { --oc-size:1.125rem; }
.octopus-checkbox__control { position:relative; display:inline-flex; width:var(--oc-size); height:var(--oc-size); flex:none; }
.octopus-checkbox .octopus-checkbox__control input { position:absolute; inset:0; opacity:0; z-index:1; margin:0; width:100%; height:100%; cursor:default; }
.octopus-checkbox__indicator { box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:100%; height:100%; border:1px solid var(--color-zinc-300); border-radius:var(--oc-radius); background:var(--color-bg-overlay); box-shadow:var(--elevation-raised); transition:background-color var(--motion-duration-fast),border-color var(--motion-duration-fast),box-shadow var(--motion-duration-fast); }
.octopus-checkbox__indicator svg { opacity:0; clip-path:inset(0 100% 0 0); transition:clip-path var(--motion-duration-fast),opacity var(--motion-duration-fast); }
.octopus-checkbox input:checked + .octopus-checkbox__indicator { background:var(--color-accent); color:var(--color-accent-foreground); border-color:transparent; box-shadow:none; }
.octopus-checkbox input:checked + .octopus-checkbox__indicator svg { opacity:1; clip-path:inset(0); }
.octopus-checkbox:hover input:not(:disabled):not(:checked) + .octopus-checkbox__indicator { border-color:var(--color-input-active); }
.octopus-checkbox input:focus-visible + .octopus-checkbox__indicator { border-color:var(--color-input-active); box-shadow:0 0 0 .1875rem var(--color-input-active-ring); }
.octopus-checkbox input:active:checked:not(:disabled) + .octopus-checkbox__indicator { background:var(--color-action-primary-pressed); }
.octopus-checkbox input[aria-invalid="true"] + .octopus-checkbox__indicator { border-color:var(--color-red-500); }
.octopus-checkbox input[aria-invalid="true"]:focus-visible + .octopus-checkbox__indicator { box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--color-red-500) 24%,transparent); }
.octopus-checkbox input:disabled + .octopus-checkbox__indicator { opacity:.75; box-shadow:none; }
.octopus-checkbox input:disabled:checked + .octopus-checkbox__indicator { opacity:.5; }
.octopus-select { --os-height:var(--control-height-md); --os-radius:.5rem; --os-font:var(--type-label-size); }
.octopus-select[data-size="sm"] { --os-height:var(--control-height-sm); --os-radius:.375rem; }
.octopus-select .octopus-select__trigger, .octopus-select .octopus-select__native { box-sizing:border-box; width:100%; max-width:none; height:var(--os-height); margin:0; padding:0 .75rem; border:1px solid var(--color-zinc-200); border-bottom-color:color-mix(in srgb,var(--color-zinc-300) 80%,transparent); border-radius:var(--os-radius); background:var(--color-bg-overlay); color:var(--color-text-primary); box-shadow:var(--elevation-raised); font-family:var(--font-sans); font-size:var(--os-font); font-weight:400; line-height:var(--type-body-leading); text-align:start; transition:border-color var(--motion-duration-fast),box-shadow var(--motion-duration-fast); }
.octopus-select .octopus-select__trigger { display:flex; align-items:center; gap:.5rem; cursor:default; }
.octopus-select__value { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.octopus-select__trigger > svg { flex:none; color:var(--color-icon-secondary); }
.octopus-select:hover .octopus-select__trigger:not(:disabled) { border-color:var(--color-input-active); }
.octopus-select .octopus-select__trigger:focus-visible { outline:0; border-color:var(--color-input-active); box-shadow:0 0 0 .1875rem var(--color-input-active-ring); }
.octopus-select .octopus-select__trigger[aria-invalid="true"] { border-color:var(--color-red-500); }
.octopus-select .octopus-select__trigger[aria-invalid="true"]:focus-visible { box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--color-red-500) 24%,transparent); }
.octopus-select .octopus-select__trigger:disabled { opacity:.5; box-shadow:none; }
.octopus-select__list { box-sizing:border-box; position:fixed; inset:auto; margin:0; padding:.3125rem; max-height:20rem; overflow:auto; border:1px solid var(--color-zinc-200); border-radius:.5rem; background:var(--color-bg-overlay); color:var(--color-text-primary); box-shadow:var(--elevation-raised); font-family:var(--font-sans); font-size:var(--type-label-size); line-height:var(--type-label-leading); z-index:100100; }
.octopus-select__option { box-sizing:border-box; display:flex; align-items:center; gap:.5rem; min-height:2rem; padding:.375rem .5rem; border-radius:.25rem; cursor:default; }
.octopus-select__option > svg { flex:none; visibility:hidden; }
.octopus-select__option[aria-selected="true"] > svg { visibility:visible; }
/* Pointer and keyboard share one active item. The surface must differ from the list. */
.octopus-select__option[data-active]:not([aria-disabled="true"]) { background:var(--color-action-primary-subtle); color:var(--color-input-active); }
.dark .octopus-select .octopus-select__trigger { background:color-mix(in srgb,var(--color-white) 10%,transparent); border-color:color-mix(in srgb,var(--color-white) 10%,transparent); }
.dark .octopus-checkbox input:not(:checked) + .octopus-checkbox__indicator { background:color-mix(in srgb,var(--color-white) 10%,transparent); border-color:color-mix(in srgb,var(--color-white) 10%,transparent); }
.dark .octopus-select__list { background:var(--color-zinc-700); border-color:var(--color-zinc-600); }
.octopus-select [hidden] { display:none !important; }
.octopus-select__native-wrap { position:relative; min-width:0; }
.octopus-select__native-wrap:has(select[hidden]) { display:none; }
.octopus-select .octopus-select__native { appearance:none; background-image:none; padding-inline-end:2.5rem; }
.octopus-select__fallback-icon { position:absolute; inset-inline-end:.75rem; top:50%; transform:translateY(-50%); display:flex; color:var(--color-icon-secondary); pointer-events:none; }
.octopus-select__group-label { padding:.5rem; color:var(--color-text-secondary); font-size:var(--type-caption-size); font-weight:600; }
.octopus-select__option[aria-disabled="true"] { opacity:.5; cursor:default; }
.octopus-select__list { overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--color-zinc-400) transparent; }
.octopus-radio { --or-size:1.5rem; display:flex; align-items:center; gap:.625rem; min-height:var(--control-height-md); font-family:var(--font-sans); font-size:var(--type-label-size); line-height:var(--type-label-leading); color:var(--color-text-primary); }
.octopus-radio[data-size="sm"] { --or-size:1.125rem; }
.octopus-radio__control { position:relative; display:inline-flex; flex:none; width:var(--or-size); height:var(--or-size); }
.octopus-radio .octopus-radio__control input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; z-index:1; }
.octopus-radio__indicator { box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:100%; height:100%; border:1px solid var(--color-zinc-300); border-radius:50%; background:var(--color-bg-overlay); box-shadow:var(--elevation-raised); }
.octopus-radio__indicator > span { width:.5rem; height:.5rem; border-radius:50%; background:var(--color-accent-foreground); opacity:0; }
.octopus-radio[data-size="sm"] .octopus-radio__indicator > span { width:.375rem; height:.375rem; }
.octopus-radio input:checked + .octopus-radio__indicator { border-color:transparent; background:var(--color-accent); box-shadow:none; }
.octopus-radio input:checked + .octopus-radio__indicator > span { opacity:1; }
.octopus-radio:hover input:not(:disabled):not(:checked) + .octopus-radio__indicator { border-color:var(--color-input-active); }
.octopus-radio input:focus-visible + .octopus-radio__indicator { box-shadow:0 0 0 .1875rem var(--color-input-active-ring); }
.octopus-radio input:active:checked:not(:disabled) + .octopus-radio__indicator { background:var(--color-action-primary-pressed); }
.octopus-radio input:disabled + .octopus-radio__indicator { opacity:.5; box-shadow:none; }
.octopus-card { box-sizing:border-box; min-width:0; padding:var(--primitive-space-300); border:1px solid var(--color-zinc-200); border-radius:var(--shape-radius-component); background:var(--color-white); box-shadow:var(--elevation-raised); }
.dark .octopus-card { background:color-mix(in srgb,var(--color-white) 10%,transparent); border-color:color-mix(in srgb,var(--color-white) 10%,transparent); }
.octopus-radio__indicator { background:var(--color-white); }
.dark .octopus-radio input:not(:checked) + .octopus-radio__indicator { background:color-mix(in srgb,var(--color-white) 10%,transparent); border-color:color-mix(in srgb,var(--color-white) 10%,transparent); }
.octopus-card .octopus-card__heading { margin:0 0 var(--primitive-space-200); color:var(--color-text-primary); font-size:var(--type-heading-3-size); font-weight:var(--type-heading-3-weight); line-height:var(--type-heading-3-leading); }
.octopus-card__body { min-width:0; }
@media (forced-colors:active) { .octopus-radio__indicator { border-color:ButtonText; } .octopus-radio input:checked + .octopus-radio__indicator { forced-color-adjust:none; background:Highlight; } .octopus-radio__indicator > span { background:HighlightText; } }
.octopus-callout { --oc-border:var(--color-zinc-200); --oc-bg:var(--color-zinc-50); --oc-text:var(--color-zinc-600); --oc-heading:var(--color-zinc-800); --oc-icon:var(--color-zinc-400); box-sizing:border-box; display:flex; gap:.5rem; padding:var(--primitive-space-300); border:1px solid var(--oc-border); border-radius:var(--shape-radius-component); background:var(--oc-bg); font-family:var(--font-sans); }
.octopus-callout[data-variant="success"] { --oc-border:var(--color-green-300); --oc-bg:var(--color-green-50); --oc-heading:var(--color-green-700); --oc-text:var(--color-green-700); --oc-icon:var(--color-green-500); }
.octopus-callout[data-variant="danger"] { --oc-border:var(--color-red-200); --oc-bg:var(--color-red-50); --oc-heading:var(--color-red-700); --oc-text:var(--color-red-700); --oc-icon:var(--color-red-400); }
.octopus-callout[data-variant="warning"] { --oc-border:var(--color-yellow-400); --oc-bg:var(--color-yellow-50); --oc-heading:var(--color-yellow-600); --oc-text:var(--color-yellow-700); --oc-icon:var(--color-yellow-500); }
.octopus-callout__content { min-width:0; display:flex; flex-direction:column; gap:1rem; flex:1; }
.octopus-callout:has(> .octopus-callout__dismiss):not(:has(.octopus-callout__heading)) { align-items:center; }
.octopus-callout .octopus-callout__dismiss { position:static; flex:none; align-self:flex-start; width:var(--control-height-md); height:var(--control-height-md); min-height:var(--control-height-md); padding:0; margin:0; color:var(--oc-heading); }
.octopus-callout .octopus-callout__dismiss::before { display:none; }
.octopus-callout .octopus-callout__text > :first-child { margin-top:0; }
.octopus-callout .octopus-callout__text > :last-child { margin-bottom:0; }
.octopus-callout__icon { display:flex; flex:none; color:var(--oc-icon); }
.octopus-callout .octopus-callout__heading { margin:0; color:var(--oc-heading); font-size:var(--type-label-size); font-weight:600; line-height:var(--type-label-leading); }
.octopus-callout .octopus-callout__text { margin:0; color:var(--oc-text); font-size:var(--type-label-size); line-height:var(--type-label-leading); }
.dark .octopus-callout { --oc-border:color-mix(in srgb,var(--color-white) 5%,transparent); --oc-bg:color-mix(in srgb,var(--color-zinc-400) 10%,transparent); --oc-heading:var(--color-zinc-200); --oc-text:var(--color-zinc-300); }
.dark .octopus-callout[data-variant="success"] { --oc-border:color-mix(in srgb,var(--color-green-400) 50%,transparent); --oc-bg:color-mix(in srgb,var(--color-green-400) 10%,transparent); --oc-heading:var(--color-green-200); --oc-text:var(--color-green-300); --oc-icon:var(--color-green-400); }
.dark .octopus-callout[data-variant="danger"] { --oc-border:color-mix(in srgb,var(--color-red-400) 50%,transparent); --oc-bg:color-mix(in srgb,var(--color-red-400) 10%,transparent); --oc-heading:var(--color-red-200); --oc-text:var(--color-red-300); }
.dark .octopus-callout[data-variant="warning"] { --oc-border:color-mix(in srgb,var(--color-yellow-400) 50%,transparent); --oc-bg:color-mix(in srgb,var(--color-yellow-400) 10%,transparent); --oc-heading:var(--color-yellow-200); --oc-text:var(--color-yellow-300); }
@media(max-width:639px) { .octopus-select { --os-font:var(--type-body-size); } }
@media(prefers-reduced-motion:reduce) { .octopus-checkbox__indicator, .octopus-checkbox__indicator svg, .octopus-select__trigger { transition:none; } }