/* Layout only: IconButton and Tooltip retain their canonical appearance/states. */
.octopus-slide-controls {
    --slide-spacing: calc(var(--space-component-xs) / 2);
    --slide-font-size: var(--type-caption-size);
    --slide-radius: calc(var(--shape-radius-input) * 1.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--slide-spacing);
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--slide-spacing);
    border: 0;
    border-radius: var(--slide-radius);
    background: var(--color-white);
    box-shadow: var(--elevation-raised);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
}
.octopus-slide-controls[data-slide-size="md"] {
    --slide-font-size: var(--type-body-secondary-size);
    --slide-radius: calc(var(--shape-radius-input) * 2);
}
.octopus-slide-controls[data-slide-size="lg"] {
    --slide-spacing: var(--space-component-xs);
    --slide-font-size: var(--type-body-size);
    --slide-radius: calc(var(--shape-radius-input) * 2);
}
.dark .octopus-slide-controls { background: var(--color-bg-surface); }
/* An explicit dark control can live inside a forced-light editorial panel.
   Its local scope takes precedence over that panel's dark-utility exclusion. */
[data-octopus-surface="light"] .dark .octopus-slide-controls [data-flux-button] { color: var(--color-white); }
[data-octopus-surface="light"] .dark .octopus-slide-controls [data-flux-button]:hover:not(:disabled) { background: color-mix(in oklab, var(--color-white) 15%, transparent); }
.octopus-slide-controls > [data-flux-tooltip] { display: inline-flex; flex: none; }
.octopus-slide-controls__counter {
    display: inline-flex;
    flex: none;
    align-items: baseline;
    justify-content: center;
    gap: var(--slide-spacing);
    min-width: 4.5ch;
    margin-inline: var(--slide-spacing);
    font-size: var(--slide-font-size);
    line-height: var(--type-body-leading);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-text-secondary);
}
.octopus-slide-controls__counter strong { color: var(--color-text-primary); font-weight: 600; }
/* Reserve equal digit widths to prevent movement when crossing 9 / 10. */
.octopus-slide-controls__counter > :is(strong, [data-slide-total]) { min-width: var(--slide-digits, 1ch); text-align: center; }