/* Section badges must not inherit the heading spans' flexible width and font. */
html[data-theme="studio"] .workbench-live .live-section>.field-head>span.section-variant-badge:not(.step){display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:max-content;min-width:52px;height:24px;margin:0;padding:0 8px;border:1px solid #d4855a;border-radius:6px;background:#d4855a;color:#fff;font:600 10px/15px 'DM Sans',sans-serif;letter-spacing:normal;text-transform:uppercase;white-space:nowrap;overflow:visible;text-overflow:clip}

/* Text blocks share the variable editor's spacing, tools and fixed action row. */
html[data-theme="studio"] #workbench-editor{color:#1f2a24}
html[data-theme="studio"] #workbench-editor>.drawer-header{box-sizing:border-box;align-items:center;min-height:56px;height:56px;padding:0 24px;gap:8px}
html[data-theme="studio"] #workbench-editor>.drawer-header>div{flex:1;min-width:0}
html[data-theme="studio"] #workbench-editor .drawer-kicker{margin:0;color:#66746d}
html[data-theme="studio"] #workbench-editor #workbench-editor-title{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 16px/20px 'Space Grotesk',sans-serif;letter-spacing:-.025em}
html[data-theme="studio"] #workbench-editor .drawer-close{width:32px;height:32px;min-height:32px;flex:none;padding:0;border-radius:6px;color:#66746d}
html[data-theme="studio"] #workbench-editor .studio-drawer-scroll{display:flex;flex-direction:column;min-height:0;padding:0 24px;overflow:hidden;scrollbar-gutter:auto}
html[data-theme="studio"] #workbench-editor :is(.drawer-context,.drawer-note){display:none}
html[data-theme="studio"] #workbench-editor .section-variant-toolbar{box-sizing:border-box;flex:none;align-items:center;gap:12px;min-height:0;margin:0;padding:20px 0 12px;border-bottom:1px solid #cfe0d4}
html[data-theme="studio"] #workbench-editor :is(.section-variant-toolbar,.drawer-editor-actions) button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;height:32px;margin:0;padding:0 10px;border:1px solid #cfe0d4;border-radius:6px;background:#fff;color:#66746d;font:500 12px/16px 'DM Sans',sans-serif;letter-spacing:normal;box-shadow:none;cursor:pointer}
html[data-theme="studio"] #workbench-editor :is(.section-variant-toolbar,.drawer-editor-actions) button>.section-variant-action-label{font:inherit;color:inherit}
html[data-theme="studio"] #workbench-editor .section-variant-toolbar>.section-variant-icon:last-child{margin-left:auto}
html[data-theme="studio"] #workbench-editor :is(.section-variant-icon,.drawer-close){width:32px;min-width:32px;padding:0}
html[data-theme="studio"] #workbench-editor :is(.section-variant-toolbar,.drawer-editor-actions,.drawer-close) svg{width:16px;height:16px;flex:none}
html[data-theme="studio"] #workbench-editor .studio-variant-picker{box-sizing:border-box;height:32px;flex:none}
html[data-theme="studio"] #workbench-editor .studio-variant-picker>button{height:30px;min-height:30px;border:0;border-radius:0;font-weight:400}
html[data-theme="studio"] #workbench-editor .studio-variant-picker>button:first-child{width:28px;min-width:28px;padding:0;border-right:1px solid #cfe0d4}
html[data-theme="studio"] #workbench-editor .studio-variant-picker>button:last-child{width:28px;min-width:28px;padding:0;border-left:1px solid #cfe0d4}
html[data-theme="studio"] #workbench-editor #protected-editor{box-sizing:border-box;flex:1;min-height:0;margin:0;padding:24px 0 16px;border:0;border-radius:0;outline:0;background:transparent;color:#1f2a24;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;tab-size:4;font:400 13.5px/1.75 'JetBrains Mono',monospace;box-shadow:none;caret-color:#3f7f55}
html[data-theme="studio"] #workbench-editor #protected-editor:focus-visible{outline:1px solid #3f7f55;outline-offset:-1px}
html[data-theme="studio"] #workbench-editor .section-variant-footer{display:flex;flex:none;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;padding:8px 0;border-top:1px solid rgb(207 224 212 / 70%);color:#66746d;font:400 11px/16.5px 'DM Sans',sans-serif}
html[data-theme="studio"] #workbench-editor .section-variant-status{flex:1;min-width:140px;margin:0;color:inherit;font:inherit}
html[data-theme="studio"] #workbench-editor .section-variant-statistics{flex:none;font:inherit}
html[data-theme="studio"] #workbench-editor.section-variant-editing .section-variant-status{color:#3f7f55}
html[data-theme="studio"] #workbench-editor>.drawer-editor-actions{display:flex;flex-wrap:wrap;flex:none;align-items:center;justify-content:space-between;gap:6px;margin:0;padding:12px 24px;border-top:1px solid #cfe0d4}
html[data-theme="studio"] #workbench-editor :is(.section-variant-actions-left,.section-variant-actions-right){display:flex;align-items:center;gap:6px}
html[data-theme="studio"] #workbench-editor .section-variant-actions-right{margin-left:auto}
html[data-theme="studio"] #workbench-editor .section-variant-actions-right>button:last-child,html[data-theme="studio"] #workbench-editor #apply-section-text{background:#3f7f55;border-color:#3f7f55;color:#f8f9f8}
html[data-theme="studio"] #workbench-editor.section-variant-editing .section-variant-actions-left,html[data-theme="studio"] #workbench-editor.section-variant-editing .section-variant-actions-right{display:none}
html[data-theme="studio"] #workbench-editor.section-variant-editing>.drawer-editor-actions{justify-content:flex-end}
html[data-theme="studio"] #workbench-editor :is(.section-variant-toolbar,.drawer-editor-actions) button[hidden]{display:none!important}
html[data-theme="studio"] #workbench-editor :is(.section-variant-toolbar,.drawer-editor-actions) button:disabled{opacity:.4;cursor:default}
html[data-theme="studio"] #workbench-editor :is(.section-variant-toolbar,.drawer-editor-actions,.drawer-header) button:not(:disabled):hover{border-color:#3f7f55;background:#eaf4ed;color:#3f7f55}
html[data-theme="studio"] #workbench-editor :is(.section-variant-toolbar,.drawer-editor-actions) button:focus-visible{outline:2px solid #3f7f55;outline-offset:2px}
html[data-theme="studio"] #workbench-editor .section-variant-comparison{flex:none;max-height:45%;min-height:0;margin:16px 0 0;overflow:auto}
@media(max-width:760px){
  html[data-theme="studio"] #workbench-editor :is(.drawer-header,.studio-drawer-scroll,.drawer-editor-actions){padding-inline:16px}
  html[data-theme="studio"] #workbench-editor .section-variant-toolbar{gap:8px}
  html[data-theme="studio"] body:has(#workbench-editor.open) .studio-quick-nav{display:none}
}
@media(max-width:440px){
  html[data-theme="studio"] #workbench-editor .section-variant-toolbar>button:has(.section-variant-action-label){width:32px;min-width:32px;padding:0}
  html[data-theme="studio"] #workbench-editor .section-variant-toolbar>button>.section-variant-action-label{display:none}
  html[data-theme="studio"] #workbench-editor .drawer-editor-actions button{padding-inline:8px;gap:4px}
  html[data-theme="studio"] #workbench-editor .drawer-editor-actions .section-variant-icon{padding:0}
}
