/* SCULPT'S OWN PARTS (2026-10-31). The bar, rail, panels, sheets, menus, AI bar and home menu are the
   tools' shared look (/tool-shell.css); these are the parts only a 3D editor has: the view, the tool
   strip, the details card, the compass and the panels' contents. Colours are the site's. */

/* the view fills the stage */
.sc-root .st-stage{display:block;padding:0}
#sc-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.sc-root .st-stage{background:radial-gradient(80% 70% at 50% 35%,color-mix(in srgb,var(--tc) 12%,transparent),transparent 70%),linear-gradient(180deg,var(--soft),color-mix(in srgb,var(--bg) 70%,var(--soft)))}

/* the four ways of working, in the bar */
.sc-modes button{display:inline-flex;align-items:center;gap:6px;padding:0 12px;min-width:0}
.sc-modes button svg{flex:none}
.sc-modes button[aria-pressed="true"]{color:var(--ink)}
.sc-modes button[aria-pressed="true"] svg{color:var(--tc)}

/* the tool strip at the foot of the view */
.sc-tools{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:20;max-width:calc(100% - 28px);transition:bottom .18s ease}
.sc-ai-open .sc-tools{bottom:96px}
.sc-tools-in{display:flex;align-items:stretch;gap:2px;padding:5px;border:1px solid var(--line2);border-radius:18px;background:var(--surface);box-shadow:0 22px 50px -24px rgba(0,0,0,.65);overflow-x:auto;scrollbar-width:thin;max-width:100%}
.sc-t{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:54px;height:52px;padding:4px 6px;border:0;border-radius:12px;background:none;color:var(--muted);font:700 10.5px/1.1 var(--body);cursor:pointer;white-space:nowrap}
@media(hover:hover){.sc-t:hover{background:var(--soft);color:var(--ink)}}
.sc-t[aria-pressed="true"]{background:color-mix(in srgb,var(--tc) 20%,var(--soft));color:var(--ink)}
.sc-t[aria-pressed="true"] svg{color:var(--tc)}
.sc-t[disabled]{opacity:.35;cursor:default;background:none}
.sc-sep{flex:none;width:1px;margin:6px 4px;background:var(--line)}
.sc-colour i{display:block;width:20px;height:20px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line2)}
.sc-sliders{display:flex;align-items:center;gap:12px;padding:0 6px}
.sc-sliders .dr-field{margin:0;min-width:120px;grid-template-columns:1fr auto;gap:2px;font-size:11.5px}

/* the details card of what is picked */
.sc-inspect{position:absolute;top:14px;right:14px;z-index:18;width:292px;max-height:calc(100% - 140px);overflow-y:auto;padding:12px;border:1px solid var(--line2);border-radius:16px;background:var(--surface);box-shadow:0 18px 44px -24px rgba(0,0,0,.65)}
.sc-ins-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.sc-ins-head b{flex:1;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-ins-name{flex:1;min-width:0;font:700 15px var(--body);color:var(--ink);background:none;border:1px solid transparent;border-radius:9px;padding:6px 8px}
.sc-ins-name:hover{border-color:var(--line)}
.sc-ins-name:focus{outline:none;border-color:var(--gold);background:var(--soft)}
.sc-ins-row{display:grid;grid-template-columns:44px repeat(3,minmax(0,1fr));gap:5px;align-items:center;margin-top:6px}
.sc-ins-row>span{font:700 12px var(--body);color:var(--muted)}
.sc-ins-dim{margin:8px 2px 0;color:var(--faint);font-size:12.5px}
.sc-keep{display:flex;align-items:center;gap:6px;margin-top:8px;font:600 12.5px var(--body);color:var(--muted);cursor:pointer}
.sc-ins-fold{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--muted);font:700 13px var(--body);cursor:pointer;padding:2px}
.sc-inspect:has(.sc-ins-fold){width:auto;padding:6px 10px}
.sc-num{display:flex;align-items:center;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--soft);overflow:hidden}
.sc-num:focus-within{border-color:var(--gold)}
.sc-num-k{flex:none;width:18px;align-self:stretch;display:grid;place-items:center;font:800 10.5px var(--body);color:var(--faint);cursor:ew-resize;user-select:none;touch-action:none}
.sc-num:nth-child(2) .sc-num-k{color:#e5484d}.sc-num:nth-child(3) .sc-num-k{color:#3bb273}.sc-num:nth-child(4) .sc-num-k{color:#3e7bfa}
.sc-num input{flex:1;min-width:0;width:100%;border:0;background:none;color:var(--ink);font:600 12.5px var(--body);padding:6px 4px 6px 0;font-variant-numeric:tabular-nums}
.sc-num input:focus{outline:none}

/* the compass and its two buttons, top left */
.sc-view{position:absolute;top:14px;left:14px;z-index:18;display:flex;flex-direction:column;align-items:center;gap:6px}
.sc-compass{position:relative;width:68px;height:68px;border-radius:50%;background:color-mix(in srgb,var(--surface) 70%,transparent);box-shadow:0 0 0 1px var(--line)}
.sc-compass svg{display:block}
.sc-cdot{position:absolute;width:18px;height:18px;border-radius:50%;border:0;background:none;cursor:pointer;padding:0}
.sc-cdot:hover{box-shadow:0 0 0 2px var(--gold)}
.sc-vbtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.sc-vbtn:hover{border-color:var(--gold);color:var(--gold)}
.sc-vbtn[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}

/* bottom left: the card to adjust what was just done, notes and the hint */
.sc-foot{position:absolute;left:14px;bottom:88px;z-index:19;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:min(360px,calc(100% - 28px));pointer-events:none;transition:bottom .18s ease}
.sc-ai-open .sc-foot{bottom:166px}
.sc-foot>*{pointer-events:auto}
.sc-adjust{width:290px;max-width:100%;padding:10px 12px 12px;border:1px solid color-mix(in srgb,var(--tc) 45%,var(--line2));border-radius:14px;background:var(--surface);box-shadow:0 18px 40px -22px rgba(0,0,0,.65)}
.sc-adj-head{display:flex;align-items:center;gap:6px}
.sc-adj-head b{flex:1;font-size:14px}
.sc-adjust .dr-field{margin-top:6px}
.sc-notice{position:relative;padding:10px 36px 10px 12px;border:1px solid var(--line2);border-radius:14px;background:var(--surface);font-size:13.5px;color:var(--muted);box-shadow:0 18px 40px -22px rgba(0,0,0,.65)}
.sc-notice p{margin:0}.sc-notice p+p{margin-top:6px}
.sc-notice .dr-mini{position:absolute;top:4px;right:4px;width:28px;height:28px}
.sc-hint{padding:6px 11px;border-radius:10px;background:color-mix(in srgb,var(--surface) 82%,transparent);color:var(--muted);font:600 12.5px/1.4 var(--body);pointer-events:none;box-shadow:0 0 0 1px var(--line)}

/* picking with a box; dropping a file */
.sc-marquee{position:absolute;z-index:22;border:1.5px dashed var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent);border-radius:3px;pointer-events:none}
.sc-drop{position:absolute;inset:12px;z-index:40;display:grid;place-items:center;border:2px dashed var(--gold);border-radius:20px;background:color-mix(in srgb,var(--bg) 70%,transparent);font:800 22px var(--display);color:var(--ink);pointer-events:none}

/* the AI's work, above its bar */
.sc-root .st-float .st-work{display:grid;gap:8px}
.sc-root .st-float .st-work.sc-folded .sc-job p{display:none}
.sc-job b{display:flex;align-items:center;gap:8px;font-size:14px}
.sc-job b span:nth-child(2){flex:1}
.sc-job b small{color:var(--faint);font-weight:700;font-variant-numeric:tabular-nums}
.sc-job p{margin:4px 0 0 22px;color:var(--muted);font-size:13px}
.sc-ai-open .st-ai-pill{display:none}
.sc-root .st-ai-pill{bottom:88px}
.sc-ref img{max-width:160px;max-height:120px;border-radius:10px;display:block;margin-bottom:8px}

/* panels: shapes, colours, finishes */
.sc-shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sc-shape{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 4px 9px;border:1px solid var(--line);border-radius:13px;background:var(--soft);color:var(--ink);font:700 12px var(--body);cursor:pointer}
.sc-shape svg{color:var(--tc)}
.sc-shape:hover{border-color:color-mix(in srgb,var(--tc) 60%,var(--line));transform:translateY(-1px)}
.sc-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:6px}
.sc-swatch{position:relative;aspect-ratio:1;min-width:28px;border-radius:9px;border:0;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);font:700 10px var(--body);color:var(--muted)}
.sc-swatch.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--gold)}
.sc-pickc{display:grid;place-items:center;background:conic-gradient(#e5484d,#f2c14e,#3bb273,#3e9bd8,#7b5be0,#e05b9c,#e5484d)}
.sc-pickc input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.sc-finishes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sc-finish{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);font:700 12px var(--body);cursor:pointer}
.sc-finish.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.sc-ball{display:block;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0,color-mix(in srgb,var(--c) 60%,#fff) 12%,var(--c) 45%,color-mix(in srgb,var(--c) 45%,#000) 100%)}
.sc-ball-matte{background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--c) 75%,#fff) 0,var(--c) 50%,color-mix(in srgb,var(--c) 60%,#000) 100%)}
.sc-ball-rubber{background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--c) 85%,#fff) 0,var(--c) 55%,color-mix(in srgb,var(--c) 70%,#000) 100%)}
.sc-ball-metal,.sc-ball-chrome,.sc-ball-gold{background:radial-gradient(circle at 34% 30%,#fff 0,var(--c) 22%,color-mix(in srgb,var(--c) 40%,#000) 62%,var(--c) 86%,#fff 100%)}
.sc-ball-glass{background:radial-gradient(circle at 34% 30%,#fff 0,rgba(255,255,255,.4) 18%,rgba(160,200,255,.18) 50%,rgba(160,200,255,.45) 100%);box-shadow:inset 0 0 0 1px rgba(160,200,255,.6)}
.sc-ball-glow{box-shadow:0 0 14px 2px var(--c)}
.sc-seg-wide{display:flex}
.sc-seg-wide button{flex:1;width:auto;padding:0 12px}
.sc-danger{color:var(--warn)!important}
.btn.ghost.sm svg,.btn.sm svg{flex:none}
.sc-part-acts{margin-top:12px}
.sc-part-acts .btn{min-height:36px;padding:0 12px;font-size:13.5px;gap:6px}

/* panels: the parts list */
.sc-tree .sc-row{padding:2px 4px 2px calc(4px + var(--depth) * 16px)}
.sc-tree .sc-row.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 9%,var(--soft))}
.sc-tree .sc-row.off .sc-go{opacity:.5}
.sc-tree .sc-go{flex-direction:row;align-items:center;gap:8px;padding:6px 6px}
.sc-tree .sc-go svg{flex:none;color:var(--tc)}
.sc-tree .sc-go small{margin-left:auto}
.sc-caret{width:22px;height:30px;flex:none;display:grid;place-items:center;border:0;background:none;color:var(--faint);cursor:pointer;padding:0}
.sc-tree .sc-row .dr-mini{width:30px;height:30px}
.sc-tree .sc-drop-on{border-color:var(--tc);box-shadow:inset 0 0 0 1px var(--tc)}
.sc-rename{flex:1;min-width:0;font:600 14.5px var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--gold);border-radius:8px;padding:5px 8px}

/* panels: effects */
.sc-fx-list{display:grid;gap:8px}
.sc-fx{border:1px solid var(--line);border-radius:14px;background:var(--soft);padding:8px 10px 10px}
.sc-fx.off{opacity:.6}
.sc-fx-head{display:flex;align-items:center;gap:4px}
.sc-fx-head b{flex:1;font-size:14.5px}
.sc-fx-head .dr-mini{width:30px;height:30px}
.sc-fx-head [data-up] svg{transform:none}
.sc-fx-body .dr-field{margin-top:6px}
.sc-axis{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font:700 13px var(--body);color:var(--muted)}
.sc-axis .st-seg button{width:auto;min-width:34px;padding:0 10px}

/* panels: view */
.sc-switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 2px;font:600 14px var(--body);color:var(--ink);cursor:pointer}
.dr-chips button.sc-on{border-color:var(--gold);color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--soft))}

/* the home menu's card button */
.sc-card .th-info{padding-right:46px}
.sc-card-more{position:absolute;right:8px;bottom:10px;width:36px;height:36px;border-radius:10px;border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.sc-card-more:hover{background:var(--soft);color:var(--ink)}
.sc-starts{margin-top:16px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}

/* sheets */
.sc-ask-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.sc-ask-btns .btn{min-height:44px}
.sc-exports{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin-top:14px}
.sc-exports .dr-tile{padding:14px}
.sc-exports .dr-tile b{font-size:15.5px}
.sc-exports .sc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;width:100%}
.sc-exports label{display:inline-flex;align-items:center;gap:6px;font:600 13.5px var(--body);color:var(--muted)}
.sc-exports input[type=number]{width:76px;font:600 14px var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:6px 8px}
.sc-exports .btn.sm{min-height:34px;padding:0 12px;font-size:13.5px;margin-left:auto}
.sc-help-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.sc-help-modes>div{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.sc-help-modes svg{color:var(--tc)}
.sc-help-modes b{display:block;margin:6px 0 4px;font:800 17px var(--display)}
.sc-help-modes p{margin:0;color:var(--muted);font-size:14px}
.sc-keys{width:100%;border-collapse:collapse;font-size:14px}
.sc-keys td{padding:7px 8px;border-top:1px solid var(--line)}
.sc-keys td:last-child{color:var(--muted);text-align:right}
.sc-kbd{margin-left:auto;padding:1px 6px;border-radius:6px;border:1px solid var(--line2);color:var(--faint);font:700 11px var(--body)}
.sc-colour-menu{padding:10px;min-width:220px}
.sc-colour-menu .sc-swatches{grid-template-columns:repeat(6,30px)}

/* the site header's theme button sits in the bar here, by its shared id */
.sc-root .st-bar #st-theme{flex:none}

/* phones and narrow windows */
@media(max-width:1000px){
  .sc-tools{left:8px;right:8px;bottom:8px;transform:none;max-width:none}
  .sc-tools-in{justify-content:flex-start}
  .sc-ai-open .sc-tools{bottom:80px}
  .sc-root .st-ai-pill{bottom:76px}
  .sc-foot{left:8px;bottom:76px}
  .sc-ai-open .sc-foot{bottom:148px}
  .sc-hint{display:none}
  .sc-inspect{top:8px;right:8px;width:min(270px,calc(100% - 90px));max-height:46%}
  .sc-view{top:8px;left:8px}
  .sc-modes button{padding:0 9px}
}
@media(max-width:560px){
  .sc-modes .st-word{display:none}
  .sc-t{min-width:48px;height:48px;font-size:10px}
  .sc-sliders .dr-field{min-width:96px}
  .sc-compass{transform:scale(.85);transform-origin:top left;margin-bottom:-10px}
  .sc-root .st-bar .btn{padding:0 12px}
}

/* a sheet's heading block takes the room, its close button sits in the corner */
.sc-root .st-sheet .top>div{flex:1;min-width:0}
.sc-root .st-sheet .top .icon-btn{flex:none}

/* a phone: the model's name gets the room the WELUX mark had; the AI is a round button; the Adjust
   card is compact and leaves the corner for it */
@media(max-width:560px){
  .sc-root .st-bar .st-home{display:none}
  .sc-root .st-ai-pill{width:48px;height:48px;padding:0;justify-content:center;border-radius:50%}
  .sc-root .st-ai-pill span{display:none}
  .sc-foot{max-width:calc(100% - 76px)}
  .sc-adjust{width:auto;padding:8px 10px 10px}
  .sc-adjust .dr-field{margin-top:2px;font-size:12px}
  .sc-adj-head b{font-size:13px}
  .sc-notice{font-size:12.5px}
  .sc-modes button{padding:0 7px;min-width:30px}
}

/* a panel open on a wide screen: the tool strip, compass and notes move into the room left beside it */
@media(min-width:1001px){
  .sc-panel-open .sc-tools{left:calc(50% + 180px);max-width:calc(100% - 388px)}
  .sc-panel-open .sc-view,.sc-panel-open .sc-foot{left:374px}
  .sc-panel-open .st-toast{left:calc(50% + 180px)}
}