/* Only served by the development-only docs asset route. */
.docs-motion-controls{border-bottom:1px solid var(--bluui-border);padding:0 0 20px;margin:0 0 20px;display:grid;gap:12px;color:var(--bluui-text)}
.docs-motion-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.docs-motion-heading h3{font-size:14px;margin:0}
.docs-motion-badge{font-size:10px;font-weight:700;border-radius:5px;padding:3px 6px;background:var(--community-badge-background,#eef8f0);color:var(--community-badge-color,#286142);border:1px solid var(--community-badge-border,#c8e3cf)}
.docs-motion-controls p{margin:0;font-size:12px;line-height:1.55;color:var(--bluui-text-muted)}
.docs-motion-modes{display:flex;gap:4px}
.docs-motion-modes button{flex:1;min-width:0;font:inherit;font-size:12px;padding:7px 6px;border:1px solid var(--bluui-border);border-radius:6px;color:inherit;background:var(--bluui-surface);cursor:pointer}
.docs-motion-modes button[aria-pressed=true]{color:var(--bluui-on-primary,#fff);background:var(--bluui-primary);border-color:var(--bluui-primary)}
.docs-motion-modes button:focus-visible{outline:2px solid var(--bluui-primary);outline-offset:2px}
.docs-motion-controls .blu-field__label,.docs-motion-controls .blu-choice__label{font-size:12px}
.docs-motion-controls .blu-select__trigger{font-size:13px;min-height:36px}
.docs-motion-demo{max-width:100%;width:100%;color:var(--bluui-text)}
.docs-motion-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.docs-motion-actions:empty,.docs-motion-demo>.demo-note:empty{display:none}
.docs-motion-account{display:block;box-sizing:border-box;width:100%;padding:10px;margin:8px 0 16px;border:1px solid var(--bluui-border);border-radius:8px;background:var(--bluui-surface);color:var(--bluui-text);font:inherit}
.docs-motion-demo .blu-motion-button.blu-button{display:inline-grid;grid-template-columns:auto;gap:0;min-width:0;width:auto;max-width:100%}
.docs-motion-demo .blu-motion-button.blu-button--full{width:100%}
.docs-motion-demo .blu-motion-button__reserve,.docs-motion-demo .blu-motion-button__face{grid-area:1/1}
@media(forced-colors:active){.docs-motion-badge{background:Canvas;color:CanvasText;border-color:CanvasText}.docs-motion-modes button[aria-pressed=true]{background:Highlight;color:HighlightText}}
/* Chart controls formerly occupied an absolute panel. Keep the local motion
   section in the same scroll flow so it cannot overlap the existing editors. */
[data-motion-integrated] .charts-properties{display:flex;flex-direction:column;max-height:1000px;overflow-y:auto;align-self:start}
[data-motion-integrated] .charts-properties[hidden]{display:none}
[data-motion-integrated] .charts-properties>.docs-motion-controls{padding:20px;margin:0;flex:none}
[data-motion-integrated] .charts-properties>h3{flex:none}
[data-motion-integrated] .charts-controls{position:static;flex:none;overflow:visible}
.blu-showcase__stage.docs-motion-stage{flex-direction:column;align-items:stretch}
.docs-motion-stage>.docs-motion-hint{flex:none;width:100%;margin:0 0 16px;line-height:1.6}
/* The event readout must not steal width from Pagination after the first click. */
.blu-showcase__stage>[data-motion-demo=pagination],[data-motion-demo=pagination]{display:block;width:100%}
[data-motion-demo=pagination]>.common-demo-commands:empty{display:none}
[data-motion-demo=pagination]>.blu-common-muted{min-height:1.5em;margin:8px 0 0;line-height:1.5}

/* Status readouts occupy their own row and never compress the control. */
.blu-showcase__stage>[data-motion-demo]{flex-wrap:wrap}
[data-motion-demo]>.common-demo-commands:empty{display:none}
[data-motion-demo]>:is(.blu-common-muted,.demo-note,.common-demo-commands){flex-basis:100%}