/* Keep the product and the active configuration panel in the same viewport. */
html,body{height:100%;overflow:hidden}
.app-frame{--header-height:68px}
.header{height:var(--header-height)}
.atelier{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:calc(100cqh - var(--header-height));min-height:0}
.stage{height:auto;min-height:0;max-height:none}
.configuration{display:flex;flex-direction:column;gap:0;padding:30px 28px 23px;overflow:hidden;min-width:0;min-height:0}
.configuration-heading{flex-shrink:0;margin-bottom:0}
.configuration-heading h2{font-size:36px}
.configuration-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:24px 0 22px;border-bottom:1px solid var(--line);flex-shrink:0}
.configuration-tabs button{position:relative;min-width:0;min-height:40px;background:transparent;padding:8px 2px;color:#9a8b77;font-size:11px;letter-spacing:.2px;white-space:nowrap}
.configuration-tabs button:hover{color:var(--ink);background:#e9dfd22e}
.configuration-tabs button[aria-selected=true]{color:var(--ink)}
.configuration-tabs button[aria-selected=true]:after{content:"";position:absolute;bottom:-1px;left:8px;right:8px;height:2px;background:#877052}
.options{display:block;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -8px 0 0;padding:0 8px 0 0;scrollbar-width:thin}
.option-section,.option-section:first-child,.option-section:nth-child(2){border-top:0;margin:0;padding:0 0 16px}
.section-title{margin-bottom:18px}
.configuration-footer{grid-column:auto;flex-shrink:0;margin-top:0;padding-top:18px}
.configuration-footer .primary-button{max-width:none;margin:0}
.creation-summary{justify-content:flex-start}


.header-actions #fullscreen{display:inline-flex}

@container atelier-viewport (max-width:900px){
  .app-frame{--header-height:46px}
  .header{padding:0 20px}
  .header-tab{display:none}
  .brand span{font-size:18px;letter-spacing:4px}
  .brand small{display:none}
  .header-actions{gap:8px}
  .configuration{padding:14px 18px}
  .stage-heading{top:13px}
  .stage-heading .eyebrow{font-size:7px;letter-spacing:1.8px}
  .stage-heading h1{font-size:28px;margin-top:4px;letter-spacing:-.8px}
  .reset-camera{top:9px;right:12px}
  .viewer-controls{bottom:12px;gap:6px}
  .viewer-controls .pill{min-width:88px;height:32px;padding:0 10px;font-size:10px;gap:6px}
  .viewer-controls .pill svg{width:14px;height:14px}
  .rotate-hint,.stage-signature,.stage-caption{display:none}
}





/* Short screens use compact controls rather than headings. */
@container atelier-viewport (max-height:600px){
  .app-frame{--header-height:46px}
  .header{padding:0 22px}
  .header-tab{display:none}
  .configuration{padding:12px 16px}
  .configuration-heading{display:none}
  .configuration-tabs{margin:0 0 12px}
  .configuration-tabs button{min-height:34px;font-size:10px}
  .configuration-footer{padding-top:10px}
  .configuration-footer .primary-button{min-height:36px;font-size:13px;padding:0 13px;gap:8px}
  .configuration-footer .primary-button svg{width:17px;height:17px}
  .creation-summary,.save-note{display:none}
  .section-title{margin-bottom:13px}
  .section-title h3,.section-title label{font-size:20px}
  .option-section,.option-section:first-child,.option-section:nth-child(2){padding-bottom:0}
  .sample{width:36px;height:36px}
  .swatch{font-size:10px;gap:7px}
  .swatches:not(.metal-swatches){gap:13px 8px}
  .metal-swatches .sample{width:38px;height:38px}
  .segmented button{height:34px;font-size:11px}
  .option-note{font-size:10px;margin-top:10px}
  .stage-heading{top:13px}
  .stage-heading h1{font-size:28px;margin-top:4px}
  .stage-caption,.stage-signature,.rotate-hint{display:none}
  .viewer-controls{bottom:12px}
}

/* Keep both placement sliders together on compact screens. */
@container atelier-viewport (max-height:600px){
  .initials-section>.section-title{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .initials-input{height:35px}
  .initials-input input{font-size:16px}
  .initials-section>.option-note{display:none}
  .marking-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px;row-gap:3px;margin-top:7px;padding-top:7px}
  .marking-location{grid-column:1/-1;margin:0 0 3px;font-size:10px;gap:8px}
  .marking-location select{max-width:160px;padding:5px 18px 5px 7px;font-size:10px}
  .placement-heading{grid-column:1/-1;margin:0;font-size:10px;min-height:18px}
  .range-label{flex-direction:column;gap:3px;margin:2px 0 0;font-size:9px}
  .range-label output{font-size:8px}
  .range-label[for=marking-x]{grid-column:1;grid-row:3}
  .range-label[for=marking-y]{grid-column:2;grid-row:3}
  .range-label[for=marking-scale]{grid-column:3;grid-row:3}
  #marking-x{grid-column:1;grid-row:4}
  #marking-y{grid-column:2;grid-row:4}
  #marking-scale{grid-column:3;grid-row:4}
  .placement-range{margin:9px 0 7px}
  .marking-controls>.option-note{display:none}
  .marking-view{grid-column:1/-1;padding:4px 0;margin:0;font-size:10px}
}

@container atelier-viewport (max-height:350px){
  .configuration{padding:9px 12px}
  .configuration-tabs{margin-bottom:8px}
  .configuration-footer{padding-top:6px}
  .marking-view{display:none}
  .stage-heading{display:none}
}