/* Editorial Navigation composes the canonical Button/IconButton on a brand-soft surface. */
.octopus-editorial-navigation {
    box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;gap:var(--space-component-sm);width:100%;min-width:0;
    padding:var(--space-component-sm);border:1px solid var(--color-purple-100);
    border-radius:var(--shape-radius-editorial-card);background:var(--color-brand-primary-subtle);
}
.octopus-editorial-navigation__side { display:flex;min-width:0; }
.octopus-editorial-navigation__side--next { justify-content:flex-end; }
.octopus-editorial-navigation__center { display:flex;justify-content:center; }
.octopus-editorial-navigation :is(.octopus-button,[data-flux-button]) { max-width:100%; }
.octopus-editorial-navigation .octopus-button__label { white-space:nowrap; }
.octopus-editorial-navigation :is(.octopus-button,[data-flux-button]):disabled {
    --color-action-primary-disabled-surface:var(--color-purple-200);
    --color-action-primary-disabled-content:var(--color-purple-700);
    background-color:var(--color-purple-200);border-color:var(--color-purple-200);
    color:var(--color-purple-700);opacity:1;
}
@media(max-width:767px){
    .octopus-editorial-navigation { grid-template-columns:minmax(0,1fr) var(--control-height-md) minmax(0,1fr);gap:var(--space-component-xs);padding:var(--space-component-xs); }
    .octopus-editorial-navigation__side :is(.octopus-button,[data-flux-button]) { width:100%;height:auto;min-height:var(--control-height-md);white-space:normal; }
    .octopus-editorial-navigation__side .octopus-button__label { min-width:0;white-space:normal;overflow-wrap:anywhere; }
    .octopus-editorial-navigation .octopus-button[data-size="md"] { --octopus-button-padding-inline:var(--space-component-xs); }
}
@media(max-width:359px){
    .octopus-editorial-navigation__side :is(.octopus-button,[data-flux-button]) { flex-direction:column;justify-content:center;gap:var(--space-component-xs);min-height:72px;text-align:center; }
    .octopus-editorial-navigation__side--next :is(.octopus-button,[data-flux-button]) { flex-direction:column-reverse; }
    .octopus-editorial-navigation__side .octopus-button__label { overflow-wrap:normal; }
}