/* Atelier: quiet warm panels around a sculptural, dark modelling canvas. */
.studio { --studio-control-height:var(--tap-sm); --studio-ink:#222925; --studio-canvas-text:#e7e9df; font-size:var(--fs-sm); border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-surface); overflow:hidden; }
.studio :is(button,input,select) { font-family:inherit; font-size:var(--fs-sm); line-height:1.25; }
.studio button { height:var(--studio-control-height); min-width:var(--studio-control-height); padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-sm); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast); }
.studio svg { width:16px; height:16px; flex-shrink:0; pointer-events:none; }
.studio button:disabled { cursor:not-allowed; opacity:.45; }
.studio button[aria-pressed="true"] { border-color:var(--gold-primary); color:var(--gold-primary); background:var(--gold-badge-bg); }
.studio-masthead { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border-subtle); }
.studio-eyebrow { display:block; font-size:var(--fs-2xs); color:var(--text-secondary); letter-spacing:.16em; font-weight:600; }
.studio-masthead h3 { margin:0; font-family:Georgia,serif; font-weight:400; font-size:var(--fs-lg); line-height:1.2; }
.studio-masthead em { color:var(--gold-primary); font-weight:400; }
.studio-edition { text-align:right; font-size:var(--fs-xs); color:var(--text-secondary); }
.studio-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); padding:var(--sp-3); border-bottom:1px solid var(--border-subtle); }
.studio-projectbar { padding:var(--sp-2) var(--sp-4); }
.studio-projectbar #studioName { flex:1; width:120px; min-width:100px; border-color:transparent; background:transparent; font-weight:600; }
.studio-projectbar #studioName:focus { border-color:var(--gold-primary); }
.studio-toolbar .form-select { width:auto; max-width:100%; min-width:0; }
#studioProjects { max-width:210px; font-size:var(--fs-xs); }
.studio .studio-icon-button { width:var(--studio-control-height); padding:var(--sp-2); flex-shrink:0; }
.studio-layout { display:grid; grid-template-columns:216px minmax(0,1fr) 248px; grid-template-areas:"objects stage properties"; }
.studio-aside { padding:var(--sp-3); min-width:0; max-height:760px; overflow:auto; scrollbar-width:thin; }
.studio-objects { grid-area:objects; }
.studio-properties { grid-area:properties; }
.studio-aside h3 { font-size:var(--fs-sm); margin:var(--sp-2) 0 var(--sp-3); font-weight:600; }
.studio-aside label { display:grid; gap:var(--sp-1); color:var(--text-secondary); font-size:var(--fs-xs); margin-bottom:var(--sp-3); }
.studio-aside :is(input,select) { width:100%; min-width:0; box-sizing:border-box; font-variant-numeric:tabular-nums; }
.studio-aside section+section { border-top:1px solid var(--border-subtle); margin-top:var(--sp-4); padding-top:var(--sp-4); }
.studio-add { width:auto; margin:0; white-space:nowrap; border-color:var(--gold-primary); color:var(--gold-primary); }
.studio-create-actions { display:flex; gap:var(--sp-2); align-items:center; padding-top:var(--sp-1); }
.studio-new-piece { width:auto; margin-bottom:var(--sp-2); }
.studio-stage { grid-area:stage; min-width:0; border-inline:1px solid var(--border-subtle); background:var(--studio-ink); }
.studio-tools { background:var(--bg-surface); justify-content:flex-start; gap:var(--sp-1); padding:var(--sp-2); }
.studio-tools button { flex:0 1 auto; flex-direction:row; font-size:var(--fs-xs); border-color:transparent; padding:var(--sp-2) var(--sp-3); }
.studio-tools button svg { width:16px; height:16px; }
.studio-tools button:hover { background:var(--bg-primary); }
.studio-tools [data-mode="bend"][aria-pressed="true"] { background:var(--gold-badge-bg); }
.studio-viewbar { position:relative; background:var(--studio-ink); border-color:#ffffff16; gap:var(--sp-1); padding:var(--sp-2); }
.studio-viewbar :is(.form-select,button) { background:transparent; border-color:#ffffff30; color:var(--studio-canvas-text); font-size:var(--fs-xs); }
.studio-viewbar option { color:var(--studio-canvas-text); background:var(--studio-ink); }
.studio-viewbar label { display:flex; align-items:center; gap:var(--sp-2); color:var(--studio-canvas-text); font-size:var(--fs-xs); }
.studio-view-settings { margin-left:auto; }
.studio-view-settings>summary { display:flex; align-items:center; cursor:pointer; height:var(--studio-control-height); padding:0 var(--sp-2); color:var(--studio-canvas-text); font-size:var(--fs-xs); border:1px solid #ffffff30; border-radius:var(--radius-sm); box-sizing:border-box; }
.studio-view-settings>div { position:absolute; z-index:2; right:var(--sp-2); top:calc(100% - var(--sp-1)); width:230px; padding:var(--sp-4); background:var(--studio-ink); border:1px solid #ffffff30; border-radius:var(--radius-sm); box-shadow:0 8px 24px #0003; }
.studio-view-settings label { height:var(--studio-control-height); margin:0; }
.studio-view-settings summary:focus-visible { outline:2px solid var(--gold-primary); outline-offset:2px; }
.studio-viewbar #studioSnap { width:48px; min-width:0; border:0; border-bottom:1px solid #ffffff50; border-radius:0; color:var(--studio-canvas-text); background:transparent; padding:var(--sp-1); }
.studio-canvas-wrap { position:relative; }
.studio-viewport { height:580px; position:relative; background:var(--studio-ink); touch-action:none; }
.studio-viewport canvas { display:block; width:100%; height:100%; outline-offset:-4px; }
.studio-viewport.is-sculpting canvas { cursor:grabbing; }
.studio-axis-numbers { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.studio-axis-tick { position:absolute; transform:translate(-50%,6px); padding:1px 3px; border-radius:2px; background:#222925c9; color:#cbd2c7; font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.studio-measure-label { position:absolute; z-index:2; transform:translate(-50%,-100%); background:#f5d994; color:#222925; border-radius:var(--radius-xs); padding:var(--sp-1) var(--sp-2); font-size:var(--fs-xs); font-weight:600; font-variant-numeric:tabular-nums; pointer-events:none; white-space:nowrap; }
.studio-measure-tools { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2); background:var(--studio-ink); border-bottom:1px solid #ffffff30; color:var(--studio-canvas-text); font-size:var(--fs-xs); }
.studio-measure-tools>span { flex:1; }
.studio-measure-tools button { background:transparent; color:var(--studio-canvas-text); border-color:#ffffff40; }
.studio-viewbar input[type="checkbox"] { accent-color:var(--gold-primary); width:15px; height:15px; }
.studio-canvas-label { position:absolute; inset:var(--sp-4) var(--sp-4) auto; z-index:1; display:flex; align-items:center; gap:var(--sp-2); pointer-events:none; color:var(--studio-canvas-text); font-size:var(--fs-2xs); letter-spacing:.12em; opacity:.8; }
#studioModeLabel { margin-left:auto; font-size:var(--fs-2xs); letter-spacing:.06em; }
.studio-live-dot { width:5px; height:5px; border-radius:50%; background:#d9c18b; }
.studio-canvas-scale { position:absolute; bottom:var(--sp-4); left:var(--sp-4); pointer-events:none; color:var(--studio-canvas-text); font-size:var(--fs-2xs); letter-spacing:.15em; opacity:.65; }
.studio-canvas-scale span { padding-inline:var(--sp-2); }
.studio-hint { margin:0; padding:var(--sp-3) var(--sp-4); font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.6; }
#studioToolHint { color:var(--studio-canvas-text); opacity:.8; border-top:1px solid #ffffff16; }
.studio-small-note { margin:var(--sp-1) 0 var(--sp-3); font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.6; }
.studio-list { display:grid; gap:var(--sp-1); margin-block:var(--sp-2); }
.studio-list button { justify-content:flex-start; text-align:left; overflow-wrap:anywhere; }
.studio .studio-object { height:auto; padding:var(--sp-2); border-color:transparent; background:transparent; align-items:flex-start; }
.studio .studio-object:hover { background:var(--bg-primary); }
.studio .studio-object[aria-pressed="true"] { border-color:var(--border-subtle); color:var(--text-primary); background:var(--gold-badge-bg); }
.studio-object>svg { margin-top:var(--sp-1); }
.studio-object>span { min-width:0; }
.studio-object small { display:block; margin-top:var(--sp-1); color:var(--text-secondary); font-size:var(--fs-2xs); font-weight:400; }
.studio-object-index { margin-left:auto; align-self:flex-start; opacity:.5; font-size:var(--fs-2xs); white-space:nowrap; flex-shrink:0; }
.studio .studio-object-price { color:var(--gold-primary); font-weight:600; font-variant-numeric:tabular-nums; }
.studio .studio-object-price.is-unpriced { color:var(--text-secondary); font-weight:400; text-decoration:underline dotted; text-underline-offset:3px; }
.studio-field-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2); }
.studio-create>summary { display:flex; gap:var(--sp-2); align-items:center; color:var(--gold-primary); }
.studio-stock-badge { display:inline-block; padding:var(--sp-2); margin-bottom:var(--sp-4); background:var(--bg-primary); border-radius:var(--radius-sm); font-size:var(--fs-xs); color:var(--text-secondary); }
.studio-piece-cost { display:grid; gap:var(--sp-1); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); background:var(--bg-primary); padding:var(--sp-3); margin-bottom:var(--sp-3); }
.studio-piece-cost strong { color:var(--gold-primary); font-size:var(--fs-lg); font-weight:500; font-variant-numeric:tabular-nums; }
.studio-piece-cost :is(span,small) { font-size:var(--fs-xs); color:var(--text-secondary); }
.studio-price-input input { border-color:var(--gold-primary); }
.studio-shape-panel>.studio-disclosure { border:0; margin:0; padding:0; }
.studio-bend-button { width:auto; margin-bottom:var(--sp-3); font-size:var(--fs-xs); }
.studio-disclosure { border-top:1px solid var(--border-subtle); padding-top:var(--sp-3); margin-block:var(--sp-3); }
.studio-disclosure summary { cursor:pointer; font-size:var(--fs-xs); color:var(--text-secondary); font-weight:500; padding-block:var(--sp-2); line-height:1.4; }
.studio-disclosure[open]>summary { margin-bottom:var(--sp-3); color:var(--text-primary); }
.studio-disclosure summary:focus-visible { outline:2px solid var(--gold-primary); outline-offset:3px; }
.studio-xyz { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2); }
.studio-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:var(--sp-3) var(--sp-4); gap:var(--sp-4); border-top:1px solid var(--border-subtle); background:var(--bg-primary); font-variant-numeric:tabular-nums; }
.studio-results div { display:grid; gap:var(--sp-2); padding-left:var(--sp-4); border-left:1px solid var(--border-subtle); }
.studio-results div:first-child { border:0; padding-left:0; }
.studio-results span { color:var(--text-secondary); font-size:var(--fs-xs); }
.studio-results strong { font-size:var(--fs-md); font-weight:600; }
.studio-results div:last-child strong { color:var(--gold-primary); }
.studio-message { padding:var(--sp-3) var(--sp-5); margin:0; color:var(--text-secondary); font-size:var(--fs-xs); overflow-wrap:anywhere; }
.studio-calculation-notes { margin:0; padding:0 var(--sp-4); }
.studio button:focus-visible { outline:2px solid var(--gold-primary); outline-offset:2px; }
.studio[hidden], .studio [hidden] { display:none !important; }
.studio-home { padding:var(--sp-5); }
.studio-home-header { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }
.studio-home-header h3 { font-size:var(--fs-lg); margin:var(--sp-2) 0; }
.studio-home-header p { color:var(--text-secondary); font-size:var(--fs-sm); margin:0; }
.studio-home-toolbar { display:flex; gap:var(--sp-3); align-items:end; margin-top:var(--sp-5); }
.studio-design-search { display:grid; gap:var(--sp-1); flex:1; max-width:360px; color:var(--text-secondary); font-size:var(--fs-xs); }
.studio-design-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--sp-3); }
.studio .studio-design-card { height:auto; display:flex; align-items:center; justify-content:flex-start; gap:var(--sp-3); padding:var(--sp-4); border:1px solid var(--border-subtle); background:var(--bg-surface); color:var(--text-primary); text-align:left; }
.studio-design-card>span:first-of-type { min-width:0; flex:1; }
.studio-design-card strong { display:block; overflow-wrap:anywhere; font-weight:600; }
.studio-design-card small { display:block; margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--text-secondary); }
.studio-design-open { color:var(--gold-primary); font-size:var(--fs-xs); white-space:nowrap; }
.studio-design-card:hover { border-color:var(--gold-primary); }
.studio-new-design, .studio-draft-banner { display:flex; align-items:end; flex-wrap:wrap; gap:var(--sp-3); padding:var(--sp-4); margin-top:var(--sp-4); background:var(--bg-primary); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); }
.studio-new-design label { display:grid; gap:var(--sp-2); flex:1; min-width:160px; color:var(--text-secondary); font-size:var(--fs-xs); }
.studio-draft-banner { align-items:center; justify-content:space-between; font-size:var(--fs-xs); color:var(--text-secondary); }
@media(max-width:767px) { .studio-home { padding:var(--sp-4); } .studio-design-list { grid-template-columns:minmax(0,1fr); } }
.studio:fullscreen { background:var(--bg-surface); overflow:auto; }
.studio:fullscreen .studio-viewport { height:65dvh; }
@media(max-width:1099px), (hover:none) { .studio { --studio-control-height:var(--tap); } .studio :is(.form-input,.form-select) { font-size:var(--fs-base); } .studio-disclosure summary { display:flex; align-items:center; box-sizing:border-box; height:var(--tap); } }
@media(max-width:1099px) { .studio-layout { grid-template-columns:192px minmax(0,1fr); grid-template-areas:"objects stage" "properties properties"; } .studio-properties { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); max-height:none; border-top:1px solid var(--border-subtle); } .studio-properties section+section { margin-top:0; padding-top:0; border-top:0; } .studio-viewport { height:480px; } }
@media(max-width:767px) { .studio-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:"stage" "objects" "properties"; } .studio-aside { max-height:none; } .studio-stage { border-inline:0; } #studioObjects { display:flex; overflow-x:auto; padding-bottom:var(--sp-1); } .studio .studio-object { flex:0 0 168px; } .studio-properties { grid-template-columns:minmax(0,1fr); } .studio-properties section+section { padding-top:var(--sp-4); border-top:1px solid var(--border-subtle); } .studio-viewport { height:420px; } .studio-projectbar { padding-inline:var(--sp-2); } .studio-projectbar #studioName { flex-basis:calc(100% - 100px); } #studioProjects { flex:1; max-width:none; } .studio-tools { flex-wrap:nowrap; gap:0; } .studio-tools button { flex:1; flex-direction:column; font-size:var(--fs-2xs); gap:2px; padding:var(--sp-1); } .studio-edition { display:none; } #studioModeLabel { display:none; } .studio-viewbar { gap:var(--sp-1); } .studio-viewbar .form-select { font-size:var(--fs-xs); padding-inline:var(--sp-2); } .studio-results { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3); } .studio-results div { border-left:0; padding-left:0; } .studio-results div:last-child { grid-column:1/-1; } .calculator-tool-tabs { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .studio button { transition:none; } }
@media(max-width:767px) { .studio-save-label { display:none; } .studio-projectbar [data-action="save"] { width:var(--tap); padding:var(--sp-2); flex-shrink:0; } .studio-viewbar .form-select, .studio-viewbar #studioSnap { font-size:var(--fs-base); } }