/* The action footer owns its space; it never floats over editing controls. */
#storyActionDock { position:static; inset:auto; flex:0 0 auto; z-index:auto; margin:0; border:0; border-top:1px solid #cbdcd2; border-radius:0; padding:12px 24px; justify-content:flex-end; background:#fff; box-shadow:none; backdrop-filter:none; }
.editor-scroll { padding-bottom:24px; }
.writing-assistant { max-height:calc(var(--editor-visible-height, 75vh) - 48px); }
#openInWord { white-space:nowrap; flex:none; font-size:12px; min-height:38px; padding:9px 13px; }
.story-toolbar { flex-wrap:wrap; }
.resizable-story-layout { max-width:none; min-width:0; }
.resizable-story-layout.is-split { grid-template-columns:minmax(0,var(--story-main-width)) 12px minmax(0,1fr); gap:8px; }
.resizable-story-layout:not(.is-split) { grid-template-columns:minmax(0,1fr); }
.resizable-story-layout > .article-canvas { min-width:0; }
.story-panel-divider { align-self:stretch; min-height:180px; cursor:col-resize; touch-action:none; border-radius:8px; background:#e4ebe8; outline-offset:2px; }
.story-panel-divider::after { content:''; display:block; position:sticky; top:140px; margin:60px auto 0; width:4px; height:60px; border-radius:4px; background:#90ac9e; }
.story-panel-divider:hover,.story-panel-divider:focus-visible { background:#cadfd3; }
.story-panel-divider:focus-visible { outline:2px solid #286955; }
#prepareStepNav button.is-complete { color:#194e42; border-color:#94c4aa; background:#e0f0e6; box-shadow:inset 3px 0 #38815b; }
#prepareStepNav button.is-complete>span { color:white; background:#286955; }
#prepareStepNav button.is-complete.is-active { border-color:#286955; outline:2px solid #286955; outline-offset:-2px; }
#prepareStepNav .prepare-completion { display:block; margin-top:4px; color:#286955; font:600 10px/1.2 'Segoe UI',Arial,sans-serif; }
@media(max-width:980px) { .writing-assistant { max-height:none; } }
@media(max-width:700px) { #storyActionDock { padding:12px; } .editor-scroll { padding-bottom:18px; } #openInWord { margin-left:auto; } }

/* Formatting actions share the footer's own space and wrap on narrow panels. */
#storyActionDock { flex-wrap:wrap; gap:12px; }
#nextStepHint { flex:1 1 230px; }
.story-format-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; min-width:0; }
.story-format-actions > .button { white-space:nowrap; min-height:44px; }
@media(max-width:700px) { .story-format-actions { width:100%; } #storyActionDock #completeStep { min-width:0; } }