/* Validated mobile layout, 23 October 2026. Progressive enhancement of the existing app. */
.compact-select,.compact-menu{display:none}
.layout-ready #app>.neutral-section{display:none!important}
.compact-neutrals,.compact-expand{position:absolute;top:6px;z-index:4;height:44px;color:var(--ink);background:var(--color)}
.compact-neutrals{left:0;display:flex;align-items:center;gap:7px;padding:0 12px;border:1px solid var(--line);border-radius:24px;font-size:11px}
.compact-expand{right:0;width:44px;font-size:26px;background:transparent}
.neutral-dots{display:flex;gap:1px}.neutral-dots i{display:block;width:7px;height:17px;border-radius:100% 0 100% 0;transform:rotate(-30deg);background:#faf9f4}.neutral-dots i:nth-child(2){background:#aaa9a4}.neutral-dots i:nth-child(3){background:#55534e}
#layoutSheet{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:540px;max-height:85dvh;padding:24px 22px max(24px,env(safe-area-inset-bottom));border-radius:18px 18px 0 0;background:#eee9df;color:#302d28;overflow:auto}
#layoutSheet h2{font:400 23px/1.3 Arial,sans-serif;margin:0 38px 20px 0}
.layout-sheet-close{position:absolute;right:10px;top:8px;width:44px;height:44px;font-size:30px}
.layout-choice{display:flex;align-items:center;justify-content:space-between;min-height:52px;width:100%;padding:12px 0;border-bottom:1px solid #302d2833;text-decoration:none;color:inherit;font-size:14px;text-align:left}
.layout-choice[aria-pressed=true]{font-weight:600}.layout-choice[aria-pressed=true]:after{content:'✓'}
.layout-languages{display:flex;gap:10px;margin-top:18px}.layout-languages button{min-width:65px;min-height:44px;border:1px solid #302d2833;border-radius:5px}.layout-languages button[aria-pressed=true]{background:#302d28;color:#eee9df}
#layoutSheet .neutral-section{display:block!important;height:auto;min-height:0;margin:0;padding:0}
#layoutSheet .strip-label{display:none}
#layoutSheet .neutral-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 10px;height:auto;width:100%;overflow:visible}
#layoutSheet .neutral-strip button{width:100%;min-width:0;height:68px;display:flex;justify-content:center;align-items:center;margin:0;padding:4px}
#layoutSheet .neutral-strip button svg{width:38px;height:60px}
@media(max-width:1049px){
 .layout-ready.palette-mode #app{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
 .layout-ready .header,.layout-ready.palette-mode .header{height:52px;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 0;flex:none}
 .layout-ready .header .brand,.layout-ready.palette-mode .header .brand{width:192px;max-width:calc(100% - 96px);flex:0 1 192px}
 .layout-ready .header #pageTitle{display:none}
 .layout-ready .header-actions{display:flex;align-items:center;gap:0}
 .layout-ready .header-actions #guideButton,.layout-ready .header-actions #shopMobileButton,.layout-ready .header-actions .language-switch,.layout-ready .header-actions .applications-link{display:none!important}
 .layout-ready .header-actions #clientSpaceLink,.layout-ready .compact-menu{display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;margin:0;padding:8px;border:0;background:transparent;border-radius:0}
 .layout-ready .client-space-label{display:none!important}.compact-menu{font-size:23px}
 .layout-ready .toolbar{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:44px;min-height:44px;gap:6px;padding:0;flex:none}
 .layout-ready .toolbar>.view-tabs,.layout-ready .palette-tools>.materials{display:none!important}
 .layout-ready .compact-select{display:flex;align-items:center;gap:8px;height:44px;min-width:0;padding:0 4px;font-size:13px;white-space:nowrap}
 .compact-select:after{content:'⌄';font-size:14px}.layout-ready #compactView{font-weight:600;font-size:14px;max-width:42%;overflow:hidden}
 .layout-ready #compactMaterial{margin-left:auto;max-width:calc(100% - 48px);overflow:hidden;text-overflow:ellipsis;font-size:12px}
 .layout-ready .palette-tools{height:44px;min-height:44px;width:auto;flex:1;justify-content:flex-end;gap:4px;min-width:0}
 .layout-ready .palette-tools .search-wrap{width:44px;flex:0 0 44px;height:44px;min-height:44px;border-left:1px solid var(--line)}
 .layout-ready .palette-tools .search-toggle{width:44px;height:44px;flex:0 0 44px;padding:11px}
 .layout-ready .palette-tools:not(.searching) .search-wrap input,.layout-ready .palette-tools:not(.searching) #clearSearch{display:none}
 .layout-ready .palette-tools.searching #compactMaterial{display:none}
 .layout-ready .palette-tools.searching .search-wrap{width:100%;flex:1;border-left:0}
 .layout-ready .palette-tools.searching .search-wrap input{display:block;font-size:16px;min-width:0}
 .layout-ready.palette-mode main{grid-template-rows:minmax(0,1fr) 68px;gap:0}
 .layout-ready.palette-mode #mandorla{width:100%;height:calc(100% - 8px);margin:4px 0}
 .layout-ready.palette-mode .selection{height:68px;min-height:68px;gap:10px;padding:7px 0;margin:0}
 .layout-ready.palette-mode .preview-leaf{width:26px;height:47px;flex-basis:26px}
 .layout-ready.palette-mode .selection h2{font:400 21px/1.15 Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:0}
 .layout-ready.palette-mode .selection-text{gap:4px 8px}.layout-ready.palette-mode .selection #selectedCode{font-size:10px;letter-spacing:0}
 .layout-ready.palette-mode .selection .availability{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .layout-ready.palette-mode .selection .expand-btn{display:none}
 .layout-ready.palette-mode .selection .quick-add-trigger{width:82px;min-width:82px;max-width:82px;flex:0 0 82px;height:44px;border:1px solid var(--line);border-radius:5px;font-size:12px;padding:4px 7px;background:transparent}
 .layout-ready.palette-mode .map-controls{right:0;bottom:7px;gap:0;height:44px;background:var(--color);border:1px solid var(--line);border-radius:24px;z-index:4}
 .layout-ready.palette-mode .map-controls .round{width:40px;height:44px;border:0;background:none;font-size:21px}.layout-ready .map-controls>span{min-width:25px}
 .layout-ready .spectrum-tools{left:0;bottom:7px}.layout-ready .spectrum-toggle{height:44px;padding:0 12px;border-radius:24px;background:var(--color);font-size:11px}
}
.layout-ready.map-focus #app{display:flex!important;flex-direction:column!important;padding:0 12px!important}
.layout-ready.map-focus .header,.layout-ready.map-focus .toolbar,.layout-ready.map-focus #familyPicker{display:none!important}
.layout-ready.map-focus main{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) 68px!important;flex:1;gap:0!important}
.layout-ready.map-focus .canvas-area{grid-column:1;grid-row:1}.layout-ready.map-focus .selection{grid-column:1;grid-row:2;display:flex;flex-direction:row;gap:12px;align-items:center;padding:5px 0!important;border-top:1px solid var(--line)}
.layout-ready.map-focus .selection .desktop-materials,.layout-ready.map-focus .selection .shop-panel,.layout-ready.map-focus .selection .expand-btn{display:none!important}
.layout-ready.map-focus .selection .preview-leaf{width:26px;height:47px;margin:0;flex:none}.layout-ready.map-focus .selection-text{flex:1;width:auto}.layout-ready.map-focus .selection h2{font-size:21px;margin:0}.layout-ready.map-focus .selection .eyebrow,.layout-ready.map-focus .availability{display:none}.layout-ready.map-focus .selection #selectedCode{margin:3px 0;font-size:10px}.layout-ready.map-focus .quick-add-trigger{width:auto;max-width:150px;margin:0!important}

#layoutSheet .neutral-strip button{height:92px;flex-direction:column;gap:4px;transform:none;color:#302d28}
#layoutSheet .neutral-strip button::after{content:attr(aria-label);font:400 9px/1.25 Arial,sans-serif;text-align:center;white-space:normal;min-height:23px}