/* Shared surfaces and control states; no article-style overrides. */
.library{border:1px solid #d9e0e9!important;border-top:3px solid #7394c2!important;border-radius:13px!important;background:#f8fafd!important;box-shadow:0 4px 18px #26344806!important}
.library.templates-view{border-top-color:#9670a8!important}
.image-dock{border:1px solid #d9e0e9!important;border-top:3px solid #8b96a7!important;border-radius:13px!important;box-shadow:0 4px 18px #26344806!important}
.editor-side{border:1px solid #d7dfe8!important;border-top:3px solid #e6b34e!important;border-radius:13px!important;overflow:hidden}
.preview-side{border:1px solid #d9e0e9!important;border-top:3px solid #91a0b4!important;border-radius:13px!important;overflow:hidden}


.editor-side .panel-bar,.preview-side .panel-bar{border-top:0!important;flex-shrink:0}

.preview-controls button:focus-visible{outline:2px solid #ae8540;outline-offset:2px}
#componentsPanel .library-section .component-card{border-width:2px!important;border-left-width:3px!important}
#componentModal .component-choice-list .variant-card{border-width:2px!important}
#componentModal .component-choice-list .variant-card.active{border-width:2px!important}
.component-style-control.border-width-control{grid-template-columns:72px minmax(0,1fr) 54px 16px!important;gap:6px!important}
.border-width-control input[type=number]{min-width:0;width:54px;padding:5px 3px;border:1px solid #d9e0e9;border-radius:5px;font-size:12px;color:#354357}
.storage-meter{padding:18px;border:1px solid #e1e5ec;border-radius:10px;background:#fff;font-size:13px;line-height:1.9}
.preview-controls{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
.device-mock.frame-hidden .device-frame{visibility:hidden!important}.device-mock.frame-hidden{background:transparent!important;box-shadow:none!important}
.device-mock.frame-hidden:after{display:none!important}
/* Device chrome surrounds, rather than overlays, the 390px article viewport.
   The fixed pixel screen radius is independent of article/scroll height. */
#previewBody #deviceMock.phone{position:absolute!important;top:50%!important;left:50%!important;width:410px!important;height:850px!important;max-width:none!important;max-height:none!important;min-height:0!important;flex:0 0 410px!important;margin:0!important;padding:0!important;transform:translate(-50%,-50%) scale(var(--phone-preview-scale,1))!important;transform-origin:center!important;background:transparent!important;border:0!important;border-radius:72px!important;clip-path:none!important;overflow:visible!important;transition:none!important;animation:none!important}
#previewBody #deviceMock.phone .paper{position:absolute!important;inset:10px!important;width:390px!important;height:830px!important;max-width:none!important;min-height:0!important;box-sizing:border-box!important;margin:0!important;padding:35px 20px 44px!important;border:0!important;border-radius:64px!important;overflow:auto!important;overscroll-behavior:contain;scrollbar-width:none!important;clip-path:inset(0 round 64px)}
#previewBody #deviceMock.phone:after{clip-path:inset(0 round 72px);border-radius:72px}
#previewBody #deviceMock.phone.frame-hidden .paper{border-radius:12px!important;clip-path:none;box-shadow:0 8px 30px #26374b14!important}
/* Resolve size in the same layout pass as the preview container. Older browsers
   retain the ResizeObserver fallback; modern ones never paint a stale scale. */
@supports (transform:scale(calc(1px / 1px))){
  #previewBody{container-type:size}
  #previewBody #deviceMock.phone{--phone-preview-scale:min(1,calc((100cqw - 8px) / 410px),calc((100cqh - 8px) / 850px))!important}
}
@media(min-width:801px){.layout{min-height:0!important}.preview-body{min-height:0!important}}
#previewSide.preview-expanded{position:fixed!important;inset:16px!important;z-index:1800!important;width:auto!important;height:auto!important;display:flex!important;flex-direction:column!important;box-shadow:0 0 0 100vmax #1c263c88!important}
#previewSide.preview-expanded .preview-body{flex:1;min-height:0}
.release-summary{padding:14px 16px;margin-bottom:14px;border:1px solid #e7d8b9;border-radius:10px;background:#fffbf2;color:#635238;font:12px/1.8 var(--ui-font)}.release-summary h3{font-size:14px;margin:0 0 8px}.release-summary p{margin:6px 0}
.manual-copy-modal .workspace-body{background:#f5f7fa}.manual-copy-content{width:390px;max-width:100%;padding:25px 20px 34px;margin:12px auto;box-sizing:border-box;background:white;color:#333;user-select:text;overflow-wrap:anywhere;border-radius:8px;box-shadow:0 4px 18px #26374b0c}.manual-copy-content:focus{outline:2px solid #ffba32;outline-offset:2px}
/* Tutorial layout is owned by editor-guide.css. */

/* Operator workbench: quieter chrome, explicit reading order, restrained motion.
   These rules never target #editor contents or #preview article typography. */
:root{--surface-line:#dce2e9;--surface-ink:#303947;--surface-muted:#778292;--motion-fast:160ms;--motion-panel:200ms}
.top{background:linear-gradient(110deg,#ffffff 65%,#fffbf2)!important;border-bottom:1px solid var(--surface-line)!important;box-shadow:0 2px 10px #27344304!important}
.top .button:not(.primary){background:#fff!important;border-color:#dce2e9!important;color:#556174!important;font-weight:500;box-shadow:0 1px 2px #27344304!important}
.top .button.primary{box-shadow:0 3px 9px #be8a1820!important}
.top .guide-button i{background:#586a83!important}
.top button,.tabs .tab,.small-button,.preview-controls button{transition:background-color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast),color var(--motion-fast)}
.top button:hover{box-shadow:0 3px 10px #27344312!important}
.library .library-head{background:#fff!important}.library .library-copy{color:#7b8593!important;font-size:11px!important;line-height:1.7}
.library .tabs{background:#f5f7fb!important;border-top:1px solid #edf0f4!important;border-bottom:1px solid #e1e6ee!important}



.editor-side .editing-context{background:#fffcf5;border-top:1px solid #f0e8d6;border-bottom:1px solid #e8e3d7}
.preview-side .panel-bar,.editor-side .panel-bar{background:#fff!important}
.image-dock{background:#f4f6f9!important}.image-dock-head{padding-bottom:9px!important;border-bottom:1px solid #dfe4ec!important}
.modal.open>.modal-box{animation:workbench-modal-in var(--motion-panel) ease-out}
.library-panel:not(.hidden){animation:workbench-panel-in var(--motion-panel) ease-out}
@keyframes workbench-modal-in{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@keyframes workbench-panel-in{from{opacity:.65}to{opacity:1}}
.recipe-family-tabs,.recipe-preview-switch,.structure-filters{display:flex;gap:5px;flex-wrap:wrap;flex:none;padding:5px;background:#edf0f5;border:1px solid #e2e6ed;border-radius:9px}
.recipe-family-tabs{margin:0 0 12px;position:sticky;top:0;z-index:3;gap:3px}
.recipe-family-tabs button,.recipe-preview-switch button,.structure-filters button{border:1px solid transparent;background:transparent;border-radius:6px;padding:7px 10px;font:500 12px var(--ui-font);color:#687589;cursor:pointer;transition:background var(--motion-fast),box-shadow var(--motion-fast),color var(--motion-fast)}
.recipe-family-tabs button{flex:1;padding:6px 2px;font-size:11px;min-width:0}
.recipe-family-tabs [aria-pressed=true],.recipe-preview-switch [aria-pressed=true],.structure-filters [aria-pressed=true]{background:#fff;border-color:#dfe4eb;color:#303b4d;box-shadow:0 2px 5px #24354e09}
.recipe-family-tabs button:focus-visible,.recipe-preview-switch button:focus-visible,.structure-filters button:focus-visible{outline:2px solid #aa8644;outline-offset:1px}
#templatesPanel .recipe-row{border:1.5px solid #dfe3e9!important;border-left:3px solid #bd9b58!important;border-radius:9px!important;gap:9px;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
#templatesPanel .recipe-row:hover{border-color:#bca477!important;box-shadow:0 3px 10px #24354e08}
#templatesPanel .recipe-row[hidden]{display:none!important}
#templatesPanel [data-recipe-family=knowledge]{border-left-color:#7996bc!important}
#templatesPanel [data-recipe-family=story]{border-left-color:#9f85ad!important}
#templatesPanel [data-recipe-family=visual]{border-left-color:#8b989d!important}
#templatesPanel .recipe-row-copy>b{font-size:12px;line-height:1.55}
.recipe-sample-modal .studio-modal{height:min(840px,91vh);max-height:91vh;width:min(700px,94vw)}
.recipe-sample-modal .studio-body{display:flex;flex-direction:column;flex:1;overflow:hidden}
.recipe-sample-modal .studio-hint{flex:none;margin:0 0 12px}
.recipe-sample-stage{flex:1;overflow:auto;overscroll-behavior:contain;min-height:0;margin-top:12px;background:#edf0f3;border:1px solid #e0e5eb;border-radius:10px}
.recipe-sample-stage .studio-sample-paper{width:390px;max-width:100%;margin:18px auto;padding:25px 20px;border:0;box-shadow:0 4px 20px #1d30460b}
.recipe-edit-preview{margin-top:16px;padding:12px;background:#f0f3f6;border:1px solid #dfe5eb;border-radius:9px}
.recipe-edit-preview summary{cursor:pointer;font-size:12px;color:#526177}
.structure-box{background:#f7f8fa!important;gap:10px}
.structure-box>header{padding-bottom:12px;border-bottom:1px solid #e1e5eb}
.structure-box .structure-tools{flex-wrap:wrap}
.structure-columns{gap:18px;grid-template-columns:minmax(0,1fr) 390px}
.structure-row{grid-template-columns:18px minmax(0,1fr) 120px;align-items:start;padding:14px 12px;border-left:3px solid #819ab9;box-shadow:0 1px 3px #27344304}
.structure-row[data-content-type=media]{border-left-color:#9c84ad}
.structure-row[data-content-type=group]{border-left-color:#c29c51}
.structure-row input[type=checkbox]{accent-color:#a38345;margin-top:6px}
.structure-row .structure-order{display:block;font:600 10px/1.4 var(--ui-font);letter-spacing:.5px;color:#7b8899;margin:0 0 8px}
.structure-row b{font-size:13px;line-height:1.75;-webkit-line-clamp:3;color:#364151;font-weight:400}
.structure-row small{line-height:1.6;color:#8892a0;margin-top:6px}
.structure-row select{padding:7px 5px;background:#f8f9fb;font-size:11px}
.structure-row .workflow-media-strip{margin-bottom:10px;padding:10px;background:#f3f4f7;border-radius:7px}
.structure-row .workflow-media-strip img{width:88px;height:66px;border:0;border-radius:4px}
.structure-message{min-height:17px;margin:0;font:11px/1.6 var(--ui-font);color:#7a6a4c}
.structure-empty{padding:24px 16px;border:1px dashed #d8dfe8;border-radius:9px;color:#8490a0;font:12px/1.8 var(--ui-font);background:#fff}
.structure-live article{min-height:calc(100% - 36px)}
@media(max-width:850px){.structure-columns{grid-template-columns:minmax(0,1fr)}.structure-box{padding:16px!important}.structure-row{grid-template-columns:16px minmax(0,1fr) 104px}.structure-row select{font-size:10px}}
@media(prefers-reduced-motion:reduce){.top button,.tabs .tab,.small-button,.preview-controls button,.recipe-family-tabs button,.recipe-preview-switch button,.structure-filters button,#templatesPanel .recipe-row{transition:none!important}.modal.open>.modal-box,.library-panel:not(.hidden){animation:none!important}}