/* Shared colour controls: the expandable panel stays in flow, never over neighbouring fields. */
.colour-editor{display:grid;grid-template-columns:32px minmax(0,1fr);gap:6px;align-items:start;min-width:0;width:100%;max-width:100%;box-sizing:border-box;position:relative;background:none;container-type:inline-size}
.colour-editor>input[type=color]{box-sizing:border-box;width:100%!important;min-width:0!important;min-height:36px!important;height:36px!important;margin:0!important;padding:3px!important;background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 0 0/10px 10px!important;border:1px solid #c5cfbd;border-radius:5px}
.colour-editor>input[type=color]::-webkit-color-swatch{background:var(--colour-swatch)!important}
.colour-editor>input[type=color]::-moz-color-swatch{background:var(--colour-swatch)!important}
.colour-editor .colour-opacity{display:block!important;min-width:0;margin:0!important;padding:0!important;border:0!important}
.colour-editor .colour-opacity>summary{display:flex!important;align-items:center;justify-content:center;min-height:36px;height:auto!important;box-sizing:border-box;margin:0!important;padding:4px!important;border:1px solid #c5cfbd!important;border-radius:5px!important;background:#f6f8f0!important;list-style:none!important;color:#3b5237!important;font:10px/1.4 'DM Sans',sans-serif!important;cursor:pointer;text-align:center;overflow-wrap:anywhere;gap:4px}
.colour-opacity>summary::-webkit-details-marker{display:none}.colour-editor .colour-opacity>summary:after{content:none!important}
.colour-editor .colour-opacity-panel{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:center;box-sizing:border-box;width:100%;max-width:100%;margin:0!important;padding:10px;border:1px solid #d4ddca;border-radius:6px;background:#fffef8;font:11px/1.5 'DM Sans',sans-serif;color:#3b5237;min-width:0}
.colour-opacity-panel[hidden]{display:none!important}
.colour-opacity-panel>span:first-child{grid-column:1/-1}
.colour-editor .colour-opacity-panel>input[type=range]{display:block;width:100%!important;min-width:0!important;max-width:100%;height:32px!important;min-height:32px!important;box-sizing:border-box;padding:0!important;margin:0!important;align-self:center;accent-color:#526e41}
.colour-editor .colour-opacity-panel>input[type=number]{width:100%!important;min-width:0!important;max-width:100%;height:32px!important;min-height:32px!important;box-sizing:border-box;margin:0!important;padding:5px!important;font:12px/1.4 'DM Sans',sans-serif!important}
.colour-opacity-actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0}
.colour-editor .colour-opacity-actions>button{display:flex!important;align-items:center;justify-content:center;min-width:0!important;min-height:32px!important;height:auto!important;width:100%!important;box-sizing:border-box;margin:0!important;padding:6px!important;font:11px/1.4 'DM Sans',sans-serif!important;border:1px solid #c5cfbd!important;border-radius:4px;background:#f1f5e9;color:#3b5237;cursor:pointer;white-space:normal!important;letter-spacing:normal!important;text-transform:none!important}
.colour-opacity-actions>button:first-child{background:repeating-conic-gradient(#ebeee6 0% 25%,#fffef8 0% 50%) 0 0/12px 12px!important}
.colour-editor :is(summary,button,input):focus-visible{outline:2px solid #78956c;outline-offset:2px}
.colour-editor input:disabled,.colour-editor button:disabled{opacity:.5;cursor:default}
@container(min-width:180px){.colour-editor .colour-opacity-panel{grid-template-columns:minmax(0,1fr) 56px}.colour-opacity-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
.studio-colour-row>.colour-editor{grid-column:1/-1}
.studio-ui-upgraded .studio-timeline-colors{align-items:start}
.studio-ui-upgraded .studio-timeline-colors label{align-content:start}

/* Text formatting uses explicit rows rather than competing flex widths. */
.studio-rich-editor,.studio-text-field{min-width:0;max-width:100%;box-sizing:border-box}
.studio-rich-editor:focus-within:not(.is-deleted):not(.studio-plain-editor) .studio-rich-toolbar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:6px;padding:8px;box-sizing:border-box;min-width:0}
.studio-rich-toolbar>button,.studio-rich-toolbar>select,.studio-rich-toolbar .studio-font-size-control>select{width:100%!important;max-width:100%!important;min-width:0!important;height:36px!important;min-height:36px!important;box-sizing:border-box;margin:0!important;padding:6px!important;font:11px/1.4 'DM Sans',sans-serif!important;letter-spacing:normal;text-align:center}
.studio-rich-toolbar>select,.studio-rich-toolbar .studio-font-size-control>select{padding-right:28px!important;text-align:left}
.studio-rich-toolbar>select[aria-label="Text font"]{grid-column:1/-1}
.studio-rich-toolbar .studio-font-size-control{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,.65fr);align-items:center;gap:8px;width:100%;min-width:0;box-sizing:border-box;margin:0;padding:7px 0}
.studio-rich-toolbar .studio-font-size-label{display:flex!important;gap:5px!important;align-items:center!important;min-width:0;margin:0!important;padding:0!important;font:11px/1.4 'DM Sans',sans-serif!important}
.studio-rich-toolbar .studio-font-size-label>input[type=number]{flex:1;min-width:0;width:40px!important;max-width:75px;height:36px!important;min-height:36px!important;box-sizing:border-box;margin:0!important;padding:5px!important;font:12px/1.4 'DM Sans',sans-serif!important}
.studio-rich-colours{grid-column:1/-1;display:grid;grid-template-columns:40px minmax(0,1fr) minmax(65px,1fr);align-items:start;gap:6px;min-width:0;container-type:inline-size}
.studio-rich-colours>.colour-editor{display:contents}
.studio-rich-colours>.colour-editor>input[type=color]{grid-column:1;grid-row:1}
.studio-rich-colours .colour-opacity{grid-column:2;grid-row:1}
.studio-rich-colours .colour-opacity-panel{grid-column:1/-1;grid-row:2;grid-template-columns:minmax(0,1fr) 56px}
.studio-rich-colours .colour-opacity-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.studio-rich-toolbar .studio-rich-colours>input[type=text]{grid-column:3;grid-row:1;min-width:0!important;width:100%!important;max-width:100%;height:36px!important;min-height:36px!important;box-sizing:border-box;margin:0!important;padding:5px!important;font:11px/1.4 'DM Sans',sans-serif!important}
.studio-rich-editor .studio-rich-input{box-sizing:border-box;width:100%;min-width:0;max-width:100%;overflow-wrap:anywhere}
.studio-rich-editor .studio-field-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:0!important;padding:10px;box-sizing:border-box;width:100%;min-width:0}
.studio-rich-editor .studio-field-actions>button{flex:0 1 auto;min-width:0;max-width:100%;min-height:36px;height:auto;margin:0;text-align:center;white-space:normal}
.studio-rich-editor .studio-field-actions[hidden]{display:none!important}
.studio-text-label{align-items:center;gap:6px;min-width:0;max-width:100%}
.studio-text-label-caption{min-width:0;overflow-wrap:anywhere}
.studio-text-label>input{flex:1 1 100%!important;width:100%;box-sizing:border-box}
.studio-text-label>button{flex:none;margin:0!important;box-sizing:border-box}
.screen-rich-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
.screen-rich-toolbar>button{display:flex;justify-content:center;align-items:center;flex:1 1 34px;min-width:34px;min-height:36px;box-sizing:border-box;margin:0;padding:6px;text-align:center}
.screen-inspector [contenteditable]{box-sizing:border-box;width:100%;min-width:0;max-width:100%;overflow-wrap:anywhere}
@media(max-width:600px){.colour-editor .colour-opacity-panel>input[type=number],.studio-rich-toolbar .studio-font-size-label>input[type=number],.studio-rich-toolbar .studio-rich-colours>input[type=text]{font-size:16px!important}.studio-rich-editor .studio-field-actions>button{flex:1 1 90px}.studio-rich-input{font-size:16px}}
/* Hex/reset rows must not squeeze the expandable picker into a flex column. */
.studio-colour-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center!important;gap:6px!important;min-width:0}
.studio-colour-row>.colour-editor{grid-column:1/-1;width:100%}
.studio-colour-row>input[type=text]{box-sizing:border-box;width:100%!important;min-width:0!important;height:36px;margin:0!important}
.studio-colour-row>button{min-height:36px;height:auto;margin:0!important;white-space:normal}
/* Paired fields align at the top even when only one opacity panel is expanded. */
label:has(>.colour-editor){align-self:start;align-content:start}
:is(.screen-two,.photo-pair,.studio-field-pair,.studio-timeline-colors){align-items:start}

/* The legacy swatch-only column must expand with its opacity controls. */
.studio-controls .studio-color:has(>.colour-editor){grid-template-columns:minmax(0,1fr);align-items:start;gap:7px}
.studio-controls .studio-color>.colour-editor{grid-column:1/-1;width:100%;min-width:0}