/* Viewer 5 Sandbox V170: Block 2 layout copied from accepted Viewer 3 V126. */
/* Viewer 5 Sandbox V123: compact Block 2. All control IDs and JS V121 retained. */
#wab-configurator-root .wab-v5-compact-style{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;container-type:inline-size}
#wab-configurator-root .wab-v5-compact-style>.wab-step-heading{grid-column:1/-1;margin:0 0 4px}
#wab-configurator-root .wab-v5-compact-style>.wab-font-col{grid-column:1;grid-row:2/span 2;display:flex;margin:0;padding:10px;min-width:0}
#wab-configurator-root .wab-v5-style-right{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
#wab-configurator-root .wab-v5-style-right>.wab-v5-color-col,#wab-configurator-root .wab-v5-style-right>.wab-fontsize-col{grid-column:1;grid-row:auto}
#wab-configurator-root .wab-v5-compact-style .wab-v5-color-col,#wab-configurator-root .wab-v5-compact-style .wab-fontsize-col{min-width:0;width:auto;min-height:0;margin:0;padding:10px;border:1px solid var(--wab-l4-soft);border-radius:8px;background:var(--wab-l4-panel-muted)}
#wab-configurator-root .wab-v5-compact-style .wab-v5-style-align{grid-column:2;grid-row:3;display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px;min-width:0;padding:10px;border:1px solid var(--wab-l4-soft);border-radius:8px;background:var(--wab-l4-panel-muted)}
#wab-configurator-root .wab-v5-compact-style .wab-style-buttons-row,#wab-configurator-root .wab-v5-compact-style .wab-align-control{display:block;position:static;transform:none;top:auto;grid-column:auto;grid-row:auto;width:auto;min-width:0;margin:0;padding:0;border:0;background:none}
#wab-configurator-root .wab-v5-compact-style .wab-style-heading,#wab-configurator-root .wab-v5-compact-style .wab-align-control .wab-label{font-size:13px;line-height:1.3;margin:0 0 8px;font-weight:600;text-transform:none}
#wab-configurator-root .wab-v5-compact-style .wab-style-buttons,#wab-configurator-root .wab-v5-compact-style .wab-align-buttons{display:flex;gap:4px;margin:0;min-height:40px}
#wab-configurator-root .wab-v5-compact-style .wab-style-btn,#wab-configurator-root .wab-v5-compact-style .wab-align-button{box-sizing:border-box;width:38px;min-width:38px;height:40px;min-height:40px;padding:0}
#wab-configurator-root .wab-v5-compact-style .wab-align-button__line--1,#wab-configurator-root .wab-v5-compact-style .wab-align-button__line--3{width:26px}
#wab-configurator-root .wab-v5-compact-style .wab-align-button__line--2{width:19px}
#wab-configurator-root .wab-v5-compact-style .wab-align-button{flex:1 1 30px;min-width:0;max-width:38px;width:30px}
#wab-configurator-root .wab-v5-compact-style .wab-align-button__line--1,#wab-configurator-root .wab-v5-compact-style .wab-align-button__line--3{width:75%}
#wab-configurator-root .wab-v5-compact-style .wab-align-button__line--2{width:55%}
#wab-configurator-root .wab-v5-compact-style>.wab-spacing-row{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;position:static;transform:none;top:auto;margin:0!important;padding:0;border:0;background:none}
#wab-configurator-root .wab-v5-compact-style .wab-spacing-col{margin:0;min-width:0;padding:10px;border:1px solid var(--wab-l4-soft);border-radius:8px;background:var(--wab-l4-panel-muted)}
#wab-configurator-root .wab-v5-compact-style .wab-spacing-col .wab-slider-wrap{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:6px}
#wab-configurator-root .wab-v5-compact-style .wab-spacing-col .wab-slider-wrap>span{grid-column:1/-1;grid-row:1;justify-self:end}
#wab-configurator-root .wab-v5-compact-style .wab-spacing-col input[type="range"]{grid-column:1;grid-row:2;width:100%;min-width:0}
#wab-configurator-root .wab-v5-compact-style .wab-spacing-col button{grid-column:2;grid-row:2}
#wab-configurator-root .wab-v5-compact-style .wab-style-select,#wab-configurator-root .wab-v5-compact-style .wab-mobile-picker-trigger{min-width:0;max-width:100%;min-height:44px}
#wab-configurator-root .wab-v5-compact-style #uab-font-groups{gap:6px;margin-top:10px}
#wab-configurator-root .wab-v5-compact-style #uab-font-groups .wab-picker-chip{font-size:12px;min-height:36px;padding:6px 8px;max-width:100%}
#wab-configurator-root .wab-v5-compact-style .wab-color-current{margin-top:6px;padding:4px 6px;font-size:12px;max-width:100%;box-sizing:border-box}
/* Break the style/alignment pair out to a full row when its right column is narrow. */
@container (max-width:400px){
 #wab-configurator-root .wab-v5-compact-style>.wab-font-col{grid-row:2}
 #wab-configurator-root .wab-v5-compact-style .wab-v5-style-align{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media(max-width:480px){
 #wab-configurator-root .wab-v5-compact-style{gap:10px;padding:12px}
 #wab-configurator-root .wab-v5-compact-style>.wab-font-col,#wab-configurator-root .wab-v5-compact-style .wab-v5-color-col,#wab-configurator-root .wab-v5-compact-style .wab-fontsize-col,#wab-configurator-root .wab-v5-compact-style .wab-spacing-col{padding:7px}
 #wab-configurator-root .wab-v5-compact-style .wab-label{font-size:11px;overflow-wrap:anywhere}
 #wab-configurator-root .wab-v5-compact-style #uab-font-groups .wab-picker-chip{font-size:11px;padding:5px 6px;min-height:34px}
 #wab-configurator-root .wab-v5-compact-style .wab-mobile-picker-trigger{padding:8px 6px;font-size:13px}
 #wab-configurator-root .wab-v5-compact-style button.wab-mobile-picker-trigger{display:block!important;padding-right:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #wab-configurator-root .wab-v5-compact-style .wab-v5-color-col .wab-color-current{display:none}
 #wab-configurator-root .wab-v5-compact-style .wab-v5-style-align{padding:7px;gap:10px}
}

/* Viewer 5 Sandbox V124: Viewer 5 picker presentation for compact Block 2.
   Existing V121 picker handlers, state, mobile positioning and search retained. */
#wab-configurator-root.wab-viewer5-studio #uab-font,
#wab-configurator-root.wab-viewer5-studio #uab-color-select{display:none!important}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style #uab-font-mobile-trigger,
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style #uab-color-mobile-trigger{
 display:block!important;box-sizing:border-box;position:relative;width:100%!important;max-width:100%;min-width:0;min-height:44px;height:44px;margin-top:0;
 padding:9px 32px 9px 11px;border:1px solid #b9c2ce;border-radius:6px;background-color:#fff;color:#17202a;
 background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23777' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4.25 6.25 8 2.75l3.75 3.5'/><path d='M4.25 9.75 8 13.25l3.75-3.5'/></svg>");
 text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px;box-shadow:none;
}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style #uab-font-mobile-trigger{font-size:18px;font-weight:400!important;letter-spacing:0!important;text-transform:none!important}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style #uab-color-mobile-trigger{grid-area:picker;padding-left:44px!important;font-size:15px;font-weight:600}
#wab-configurator-root.wab-viewer5-studio .wab-v5-color-col{display:grid!important;grid-template-areas:"label" "groups" "picker" "note"}
#wab-configurator-root.wab-viewer5-studio .wab-v5-color-col>label{grid-area:label}
#wab-configurator-root.wab-viewer5-studio #uab-color-groups{grid-area:groups}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style #uab-color-current{
 display:flex!important;grid-area:picker;z-index:1;align-self:center;justify-self:start;box-sizing:border-box;width:24px;min-height:0;
 margin:0 0 0 12px;padding:0;background:transparent;border:0;pointer-events:none;
}
#wab-configurator-root.wab-viewer5-studio #uab-color-current-swatch{display:block;flex:none;box-sizing:border-box;width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
#wab-configurator-root.wab-viewer5-studio #uab-color-current-name{display:none}
#wab-configurator-root.wab-viewer5-studio #uab-color-note{grid-area:note}
#wab-mobile-sheet.wab-viewer5-studio-sheet .wab-mobile-sheet__panel{border:1px solid #212121;border-radius:8px;background:#fff}
#wab-mobile-sheet.wab-viewer5-studio-sheet .wab-mobile-item{border-radius:6px}

/* V125: Style and alignment stay together below font size in the right column. */
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style>.wab-font-col{grid-row:2;gap:0}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style>.wab-spacing-row{grid-row:3}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-v5-style-align{
 grid-column:auto;grid-row:auto;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:6px;padding:8px;align-items:end;
}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-style-heading,
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-align-control .wab-label{
 font-size:clamp(8px,2.8cqi,13px);line-height:1.25;margin:0 0 7px;overflow-wrap:anywhere;
}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-style-buttons,
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-align-buttons{gap:3px;min-height:32px}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-style-btn,
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-align-button{
 flex:1 1 0;min-width:0;width:100%;max-width:38px;height:32px;min-height:32px;padding:0;font-size:12px;
}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-align-button{gap:4px}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-align-button__line{height:3px}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-align-button__line--1,
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-align-button__line--3{width:80%}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-align-button__line--2{width:55%}
@media(max-width:480px){
 #wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-v5-style-align{gap:4px;padding:4px}
 #wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-style-buttons,
 #wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-align-buttons{gap:2px}
}

#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-style-buttons-row,
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-align-control{align-self:end}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style>.wab-spacing-row>.wab-spacing-col{grid-row:1;grid-column:auto}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style>.wab-spacing-row>.wab-spacing-col:first-child{grid-column:1}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style>.wab-spacing-row>.wab-spacing-col:last-child{grid-column:2}

/* V126: compact spacing controls with value beside the heading. */
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style>.wab-spacing-row>.wab-spacing-col{
 display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:4px 6px;align-items:center;padding:8px;min-height:0;
}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-spacing-col>.wab-label{
 grid-column:1;grid-row:1;margin:0;min-width:0;font-size:clamp(8px,3cqi,13px);line-height:18px;
}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-spacing-col>.wab-slider-wrap{display:contents}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-spacing-col .wab-slider-wrap>span{
 grid-column:2;grid-row:1;justify-self:end;margin:0;font-size:clamp(10px,3.2cqi,13px);line-height:18px;
}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-spacing-col input[type="range"]{grid-column:1;grid-row:2;margin:0;align-self:center}
#wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style .wab-spacing-col button{grid-column:2;grid-row:2;width:32px;max-width:32px;height:32px;min-height:32px;margin:0}
@media(max-width:480px){
 #wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style>.wab-spacing-row>.wab-spacing-col{padding:6px;column-gap:4px}
}

/* Keep the selected color name visible in the narrow mobile column. */
@media(max-width:480px){
 #wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style #uab-color-mobile-trigger{padding-left:38px!important;padding-right:24px;font-size:14px}
 #wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style #uab-color-current{margin-left:8px}
 #wab-configurator-root.wab-viewer5-studio .wab-v5-compact-style #uab-color-current-swatch{width:20px;height:20px}
}