@import url("./floating-surface.css?v=shared-transparency-40-20261014-artwork-details");
/* The original artwork controls form one floating, functional panel. */
.studio,.space-showcase:has(+.artwork-controls){padding-bottom:calc(var(--artwork-controls-height,0px) + 40px)}
.artwork-controls{--artwork-controls-width:min(1320px,calc(100vw - 32px));--artwork-controls-inset:16px;position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1100;width:var(--artwork-controls-width);border:2px solid #ff4f9a;border-radius:8px;color:var(--platform-text);box-shadow:0 4px 20px #0002}
.artwork-controls[hidden],.artwork-controls-body[hidden]{display:none!important}
.artwork-controls-header{display:flex;align-items:center;gap:16px;padding:0 16px;min-height:44px}
.artwork-controls-header strong{flex:none;font-size:.8125rem;font-weight:500}
.artwork-controls-context{min-width:0;flex:1;font-size:.8125rem;line-height:1.4;overflow-wrap:anywhere}
.artwork-controls-actions{display:flex;gap:8px;flex:0 1 auto;flex-wrap:wrap;max-width:100%;justify-content:flex-end}.artwork-controls-actions button{min-height:44px;border:0;padding:8px;font-size:.8125rem;white-space:nowrap}
.artwork-controls-actions button[aria-expanded=true]{color:var(--platform-accent)}
.artwork-controls-body{padding:4px 16px 12px;max-height:min(65dvh,620px);overflow:auto;overscroll-behavior:contain}
.artwork-controls #wall-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 24px;margin:0;padding:0;background:transparent;border:0;max-height:none;overflow:visible}
.artwork-controls #wall-controls>.artwork-selected-note,.artwork-controls #wall-art-title{display:none}
.artwork-controls #wall-controls .purchase-section{padding:0;border:0;margin:0;min-width:0}
.artwork-controls #wall-controls .purchase-section h4{font-size:.75rem;line-height:1.5;margin:0 0 8px;letter-spacing:0;font-weight:500}
.artwork-controls:not(.controls-more) #wall-controls .purchase-section h4{display:none}
.artwork-controls #artwork-size{grid-column:1}.artwork-controls #artwork-frame{grid-column:2}
.artwork-controls:not(.controls-more):not(.controls-comparison) #wall-controls{grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:4px 24px;align-items:center}
.artwork-controls:not(.controls-more):not(.controls-comparison) #artwork-size{display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px}
.artwork-controls:not(.controls-more):not(.controls-comparison) .purchase-size-meta{flex:none;justify-content:flex-start;gap:16px}
.artwork-controls:not(.controls-more):not(.controls-comparison) #artwork-frame{grid-row:1;display:flex;align-items:center;flex-wrap:wrap;gap:0 24px;padding-left:24px;border-left:1px solid var(--platform-line)}
.artwork-controls #purchase-size-editor{flex-basis:100%;width:100%}
.artwork-controls #wall-controls #wall-status{grid-column:1/-1;margin:0;max-width:none;min-height:0}
.artwork-controls.controls-comparison #artwork-size>#wall-size-label,.artwork-controls.controls-comparison #artwork-size>.purchase-size-meta{display:none}
.artwork-controls .size-comparison{margin:0;padding:0;border:0}.artwork-controls .size-comparison>h3,.artwork-controls .comparison-note,.artwork-controls .comparison-move-hint{display:none}
.artwork-controls .single-scene-controls .comparison-fields{grid-template-columns:max(88px,calc(1.5rem + 64px)) repeat(2,minmax(0,1fr));gap:8px 12px;align-items:end}
.artwork-controls.controls-more .comparison-fields>label:has([data-field=layout]){grid-column:1/span 2}
.artwork-controls .single-scene-controls .comparison-wall-field{grid-column:2;grid-row:1}
.artwork-controls .single-scene-controls .comparison-size-field{grid-column:3;grid-row:1}
.artwork-controls:not(.controls-more) .comparison-fields>label:has([data-field=layout]){display:none}
.artwork-controls .comparison-fields label,.artwork-controls .comparison-size-field,.artwork-controls .comparison-wall-field{font-size:.8125rem;line-height:1.5;margin:0;gap:4px}
.artwork-controls .comparison-fields input,.artwork-controls .comparison-fields select{font-size:1rem;min-height:44px}
.artwork-controls .comparison-size-inputs{gap:8px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.artwork-controls #wall-controls .comparison-status{font-size:.75rem;line-height:1.4;margin:4px 0 0;max-width:none;min-height:0}
.artwork-controls .purchase-frames{display:flex;flex-wrap:wrap;gap:0 16px}.artwork-controls .purchase-frames label{display:flex;align-items:center;flex-direction:row;gap:8px;font-size:.8125rem;line-height:1.5;margin:0;min-height:44px}
.artwork-controls:not(.controls-more) :is(.comparison-picks,.comparison-size-list,#artwork-preview,#artwork-artwork,.wall-calibration){display:none}
.artwork-controls:not(.controls-more) .comparison-actions{order:3;flex-basis:100%;margin:0}
.artwork-controls:not(.controls-more) .comparison-actions>:not([data-action=reset]),.artwork-controls:not(.controls-more) .comparison-actions:not(:has([data-action=reset]:not([hidden]))){display:none}
.artwork-controls.controls-more .comparison-picks{margin:0 0 12px}.artwork-controls.controls-more .comparison-actions{margin:8px 0}
.artwork-controls.controls-more #artwork-preview,.artwork-controls.controls-more #artwork-artwork{border-top:1px solid var(--platform-line);padding-top:16px}
.artwork-controls .wall-calibration{grid-column:1/-1}
/* Flatten the Studio mount and the shared scene so all controls share one row. */
.artwork-controls.controls-comparison:not(.controls-more) :is(#artwork-size,#wall-size-controls,.single-scene-controls){display:contents}
.artwork-controls.controls-comparison:not(.controls-more) #wall-controls{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.artwork-controls.controls-comparison:not(.controls-more) .comparison-arrangement{display:contents}
.artwork-controls.controls-comparison:not(.controls-more) .comparison-arrangement label:has([data-field=layout]){flex:0 0 148px}
.artwork-controls.controls-comparison:not(.controls-more) .comparison-arrangement label:has([data-field=gap]){flex:0 0 96px}
.artwork-controls:not(.controls-more) .comparison-arrangement [data-pair-control]{display:none}
.artwork-controls.controls-comparison:not(.controls-more) .comparison-fields{flex:1 1 460px;min-width:0}
.artwork-controls.controls-comparison:not(.controls-more) #artwork-frame{flex:1 1 380px;display:flex;align-items:center;flex-wrap:wrap;gap:0 16px;padding-left:16px;border-left:1px solid var(--platform-line)}
.artwork-controls.controls-comparison:not(.controls-more) .comparison-status{order:2;flex:1 0 100%;width:100%;min-width:0}
.artwork-controls .comparison-arrangement label{flex-direction:column;align-items:stretch;gap:4px}
.artwork-controls .comparison-arrangement :is(input,select){padding-top:8px;padding-bottom:8px}
.artwork-controls.controls-minimized .artwork-controls-context{color:var(--platform-muted)}
body.wall-editing #wall-editor.editing:has(.artwork-controls){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding-bottom:calc(var(--artwork-controls-height,0px) + 24px)}
body.wall-editing #wall-editor.editing:has(.artwork-controls) #room-preview{max-height:calc(100dvh - var(--artwork-controls-height,0px) - 96px)}
body.wall-editing #wall-editor.editing .artwork-controls #wall-controls{padding:0;margin:0;max-height:none;overflow:visible}
body.wall-editing #wall-editor.editing .artwork-controls #wall-controls label{margin:0;max-width:none}
@media(max-width:760px){
 .artwork-controls{--artwork-controls-width:calc(100vw - 24px);--artwork-controls-inset:12px}
 .artwork-controls-header{gap:8px;padding:0 12px;flex-wrap:wrap}
 .artwork-controls-header strong{flex:1}.artwork-controls-context{order:3;flex-basis:100%;font-size:.75rem}
 .artwork-controls-actions{gap:4px}.artwork-controls-actions button{padding:8px 4px}
 .artwork-controls-body{padding:4px 12px 8px;max-height:60dvh}
 .artwork-controls #wall-controls{grid-template-columns:minmax(0,1fr);gap:12px}
 .artwork-controls #artwork-size,.artwork-controls #artwork-frame{grid-column:1}
 .artwork-controls .purchase-frames{gap:0 12px}
 .artwork-controls.controls-minimized .artwork-controls-context{display:none}
 .artwork-controls:not(.controls-more) .artwork-controls-context{display:none}
 .artwork-controls .single-scene-controls .comparison-fields{grid-template-columns:max(88px,calc(1.5rem + 64px)) minmax(0,1fr)}
 .artwork-controls .single-scene-controls .comparison-size-field{grid-column:2;grid-row:2}
 .artwork-controls.controls-comparison:not(.controls-more) #wall-controls{gap:4px 12px}
 .artwork-controls.controls-comparison:not(.controls-more) .comparison-fields{flex-basis:100%}
 .artwork-controls.controls-comparison:not(.controls-more) .comparison-arrangement label:has([data-field=layout]){flex:1 1 148px}
 .artwork-controls.controls-comparison:not(.controls-more) #artwork-frame{flex-basis:100%;display:block;padding-left:0;border-left:0;border-top:1px solid var(--platform-line);padding-top:4px}
 .artwork-controls:not(.controls-more):not(.controls-comparison) #wall-controls{grid-template-columns:minmax(0,1fr);gap:8px}
 .artwork-controls:not(.controls-more):not(.controls-comparison) #artwork-frame{grid-column:1;grid-row:2;display:block;padding-left:0;border-left:0;border-top:1px solid var(--platform-line);padding-top:4px}
 body.wall-editing #wall-editor.editing:has(.artwork-controls){padding:52px 16px calc(var(--artwork-controls-height,0px) + 16px)}
 body.wall-editing #wall-editor.editing:has(.artwork-controls) #room-preview{max-height:calc(100dvh - var(--artwork-controls-height,0px) - 80px)}
}

/* Compact controls retain the shared typography rules. */
@layer amvia-layout{
 .artwork-controls #wall-controls .comparison-status{font-size:.75rem!important;line-height:1.5!important}
 .artwork-controls #wall-controls #wall-status{font-size:.75rem!important;line-height:1.5!important}
 .artwork-controls #wall-size-label{font-size:1rem!important;line-height:1.5!important}
 .artwork-controls .comparison-fields label,.artwork-controls .purchase-frames label{display:flex;align-items:center;flex-direction:row;gap:8px;font-size:.8125rem!important;line-height:1.5!important}
 .artwork-controls .comparison-fields :is(input,select){padding-top:8px!important;padding-bottom:8px!important;line-height:1.5!important}
 .artwork-controls .comparison-size-inputs input{padding-left:8px!important;padding-right:8px!important}
}
/* The comparison controller owns measured placement whenever it is available. */
.artwork-controls.controls-comparison #wall-controls :is(.wall-placement-actions,.wall-edit-help,.wall-calibration){display:none}
.artwork-controls.controls-more .comparison-move-hint{display:block;font-size:.75rem;line-height:1.4;margin:8px 0}

@media(max-width:760px){.artwork-controls .purchase-frames:not(.purchase-frame-widths){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 8px}.artwork-controls .purchase-frames:not(.purchase-frame-widths) label{min-width:0}.artwork-controls .purchase-frames:not(.purchase-frame-widths) label span{min-width:0;overflow-wrap:anywhere}}

.artwork-controls .purchase-frames input{width:16px;height:16px;min-height:16px;margin:0;accent-color:var(--platform-accent)}
.artwork-controls [hidden]{display:none!important}

@layer amvia-layout{
 .artwork-controls .comparison-arrangement label,.artwork-controls .comparison-arrangement button{font-size:.8125rem!important;line-height:1.5!important}
 .artwork-controls .comparison-arrangement :is(input,select){font-size:1rem!important;line-height:1.5!important}
}