/* Shade Studio components. Shared window primitives live in window.css. */
.brand-shell{max-width:1760px;margin:auto;align-items:start;row-gap:var(--space-md)}
.identity{display:flex;align-items:center;gap:var(--space-sm);margin-right:auto}
.identity svg{width:32px;height:36px;fill:none;stroke:var(--secondary);stroke-width:1.5}
.brand-wordmark{font-family:var(--serif);font-size:27px;letter-spacing:-.8px;line-height:1.2}
.identity .brand-caption{margin-top:3px}
.header-actions{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}
.brand-ui :is(button,input,select,summary,canvas,a):focus-visible{outline:2px solid var(--secondary);outline-offset:3px}
.brand-ui :disabled{opacity:.48;cursor:not-allowed}
.brand-ui :is(input,select){font-variant-numeric:tabular-nums}
.skip-link{position:fixed;left:var(--space-sm);top:-100px;z-index:20;background:var(--page);padding:var(--space-sm);color:var(--ink)}
.skip-link:focus{top:var(--space-sm)}
.controls form{min-width:0;display:grid;gap:var(--space-md)}
.controls{padding-bottom:var(--space-sm)}
.control-panel{min-width:0}
.panel-intro{margin-bottom:var(--space-md)}
.panel-intro h2{font:var(--weight-normal) 23px/1.2 var(--serif);letter-spacing:-.4px;margin:0 0 var(--space-xs)}
.hint{font-size:12px;color:var(--text-secondary);line-height:1.6;margin:var(--space-xs) 0 0}
.dial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md) var(--space-sm)}
.control{min-width:0}.control label{display:block;font-size:var(--text-label);margin-bottom:var(--space-xs)}
.dial-row{display:flex;gap:var(--space-xs);align-items:center;min-width:0}
.dial{position:relative;flex:0 0 var(--dial-size);width:var(--dial-size);height:var(--dial-size);border:1px solid var(--line);border-radius:50%;background:var(--primary);padding:0;touch-action:none;cursor:ns-resize}
.dial:after{content:"";position:absolute;width:2px;height:11px;top:5px;left:calc(50% - 1px);background:var(--secondary);transform-origin:1px calc(var(--dial-size)/2 - 5px);transform:rotate(var(--angle,-120deg))}
.value-wrap{min-width:0;flex:1}.value-wrap input{width:100%;min-height:var(--control-height);border:1px solid var(--line);border-radius:var(--radius);background:var(--control-surface);padding:6px;font-size:var(--text-body)}
.unit{display:block;color:var(--text-secondary);font-size:11px;margin-top:2px}
.pattern-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xs);margin-bottom:var(--space-md)}
.pattern-grid .brand-option{display:block;text-align:left;border-color:var(--line);font-size:12px;padding:var(--space-sm)}
.pattern-grid svg{height:34px;width:100%;display:block;margin-bottom:var(--space-xs);fill:none;stroke:var(--text-secondary);stroke-width:1.4}
.pattern-grid .brand-option[aria-pressed=true]{border-color:var(--secondary);background:var(--selection-background)}
.pattern-grid .brand-option[aria-pressed=true] svg{stroke:var(--secondary)}
#panel-inputs>.brand-label{margin-top:var(--space-sm)}
.input-summary{font-size:12px;line-height:1.8;color:var(--text-secondary);margin:var(--space-sm) 0 var(--space-md)}
#fitDetails{border-block:1px solid var(--line);padding:var(--space-sm) 0}
summary{min-height:var(--control-height);display:flex;align-items:center;gap:var(--space-xs);font-size:var(--text-body);cursor:pointer}
summary:before{content:'+';color:var(--secondary);font-size:18px;width:16px}details[open]>summary:before{content:'−'}
summary::-webkit-details-marker{display:none}
.fit-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-top:var(--space-sm)}
.fit-row label{font-size:var(--text-label)}.fit-row input{width:84px;min-height:var(--control-height);padding:8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--control-surface)}
.radius-control{flex-wrap:wrap}.radius-control input[type=range]{width:100%;padding:0;border:0;background:transparent;accent-color:var(--secondary)}
.radius-caption{display:flex;justify-content:space-between;width:100%;font-size:var(--text-label);color:var(--text-secondary);gap:var(--space-xs)}
.thread-info{font-size:12px;color:var(--text-secondary);line-height:1.6;margin:var(--space-sm) 0 0}
.workspace{min-width:0;position:sticky;top:var(--space-md)}
.brand-window-bar{justify-content:space-between;align-items:center;gap:var(--space-xs)}
.brand-segmented{max-width:100%;min-width:0;flex:1}.brand-segmented button{min-width:0;flex:1;padding:6px 10px;font-size:12px}
#resetView{font-size:12px;padding-inline:var(--space-xs)}
.stage{height:clamp(420px,61vh,750px);position:relative;min-width:0}
#preview{display:block;width:100%;height:100%;touch-action:none}
#canvasFallback{position:absolute;left:var(--space-md);right:var(--space-md);top:40%;padding:var(--space-md);background:var(--page)}
#status{margin:0;line-height:1.6}#status.error{color:var(--error)}
@media(min-width:701px){.controls{max-height:calc(100dvh - 118px);overflow-y:auto;padding-right:var(--space-xs);scrollbar-width:thin}}
@media(max-width:1000px){.header-actions{gap:var(--space-xs)}.header-actions button{font-size:12px}.gesture-hint{display:none}.stage{height:clamp(380px,55vh,650px)}}
@media(max-width:800px){.brand-header{align-items:flex-start}.identity{width:100%}.header-actions{width:100%;justify-content:space-between}.header-actions button{flex:1}.brand-window-bar{flex-wrap:wrap}.brand-segmented{flex-basis:100%}#resetView{margin-left:auto;min-height:30px;padding-block:2px}}
@media(max-width:700px){.brand-shell{gap:var(--space-sm)}.workspace{grid-row:2;position:static}.controls{grid-row:3}.brand-footer{grid-row:4}.identity{width:auto}.header-actions{display:grid;grid-template-columns:1fr 1fr 1.4fr}.header-actions button{padding-inline:6px}.stage{height:360px}.brand-window-bar{flex-wrap:nowrap}.brand-segmented{flex-basis:auto}.brand-segmented button{padding:5px;font-size:11px}#resetView{font-size:11px}.stage-title{left:var(--space-sm);right:var(--space-sm)}.stage-title .brand-heading{font-size:26px}.stage-bottom{left:var(--space-sm);right:var(--space-sm)}.readout,.motion-control{padding-inline:var(--space-sm)}.controls form{gap:var(--space-sm)}.brand-tabs{position:sticky;top:0;background:var(--page);z-index:2}.panel-intro{margin-top:var(--space-sm)}.dial-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.feedback{min-height:52px}.print-note{max-width:none}.print-note summary{justify-content:flex-start}.brand-footer{display:block}}
@media(max-width:400px){.header-actions{grid-template-columns:1fr 1fr}.header-actions #export{grid-column:1/-1}.stage{height:330px}.dial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-window-bar{flex-wrap:wrap}.brand-segmented{flex-basis:100%}.readout{font-size:11px}.brand-wordmark{font-size:25px}}

#panel-output{display:grid;gap:var(--space-sm)}
.output-dimensions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.output-dimensions input:read-only{color:var(--text-secondary)}

#panel-shape>.brand-label{margin-bottom:var(--space-sm)}
#cornerControls{margin-bottom:var(--space-md)}
#plateSelect{position:absolute;bottom:var(--space-sm);right:var(--space-sm);background:var(--control-surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-xs)}
#exportStatus{font-size:var(--text-label);color:var(--text-secondary);margin-block:var(--space-sm)}
.preview-status{position:absolute;bottom:var(--space-sm);left:var(--space-sm);right:var(--space-sm);padding:var(--space-sm);background:var(--page);border:1px solid var(--error);border-radius:var(--radius);font-size:var(--text-label);z-index:2}


/* My Designs and export choices use one stable, responsive menu frame. */
.studio-menu{width:min(960px,calc(100vw - 32px));max-width:calc(100% - 16px);height:min(780px,88dvh);max-height:88dvh;padding:0;overflow:hidden}
.studio-menu[open]{display:flex;flex-direction:column}
.menu-header{display:flex;align-items:start;justify-content:space-between;gap:var(--space-sm);padding:var(--space-md);border-bottom:1px solid var(--line);flex:none}
.menu-header .brand-heading{font-size:28px;margin:0}
.menu-header .hint{max-width:560px}
.menu-header>div{min-width:0;flex:1}
.menu-header>button{flex:none;white-space:nowrap}
.menu-body{padding:var(--space-md);overflow:auto;min-height:0;scrollbar-width:thin}
.menu-actions{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);flex-wrap:wrap}
#saveStatus,#exportStatus{font-size:var(--text-label);line-height:1.6;color:var(--text-secondary)}
#exportStatus:empty{display:none}
#savedList.tile-grid,#downloads.tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-sm);margin:0 0 var(--space-md)}
.studio-tile{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--line);border-radius:var(--radius-option);background:var(--control-surface);color:var(--text-primary);overflow:hidden;min-width:0;text-decoration:none;cursor:pointer}
.studio-tile:hover,.studio-tile:focus-visible{border-color:var(--secondary);background:var(--selection-background)}
.studio-tile[aria-disabled=true]{opacity:.65;cursor:progress}
.tile-media{display:grid;place-items:center;aspect-ratio:14/9;width:100%;background:var(--primary);overflow:hidden;padding:var(--space-sm)}
.tile-media img{width:100%;height:100%;object-fit:contain;min-height:0}
.tile-media svg{width:64px;height:68px;fill:none;stroke:var(--secondary);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.tile-media .hint{text-align:center}
.tile-body{display:flex;flex:1;flex-direction:column;gap:var(--space-xs);padding:var(--space-sm);width:100%;min-width:0}
.tile-body strong{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.tile-body .hint{display:block;margin:0;font-weight:400}
.tile-action{display:block;color:var(--secondary);font-size:var(--text-label);margin-top:auto;padding-top:var(--space-sm)}
#downloads .studio-tile{display:flex;align-items:stretch;justify-content:start;text-align:left;color:var(--text-primary);font-size:var(--text-body)}
.empty-state{grid-column:1/-1;padding-block:var(--space-lg)}
@media(max-width:800px){#savedList.tile-grid,#downloads.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.header-actions{display:flex}.header-actions #export{grid-column:auto}}
@media(max-width:480px){.studio-menu{width:calc(100vw - 16px);height:92dvh;max-height:92dvh}.menu-header,.menu-body{padding:var(--space-sm)}#savedList.tile-grid,#downloads.tile-grid{grid-template-columns:1fr}.menu-header .brand-heading{font-size:24px}.tile-media{aspect-ratio:16/9}.header-actions button{flex:1}}

dialog::backdrop{background:var(--dialog-backdrop)}
.studio-menu{border:1px solid var(--line);border-radius:var(--radius-popover);background:var(--page);color:var(--text-primary)}

/* Keep the previous shape visible while its replacement is generated. */
#preview{transition:opacity var(--motion-control)}
.stage.is-updating #preview{opacity:.3}
.preview-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-popover);background:color-mix(in srgb,var(--surface) 80%,transparent);pointer-events:none}
.preview-loading[hidden]{display:none}
.preview-loading span{width:7px;height:7px;border-radius:50%;background:var(--text-primary);opacity:.35;animation:preview-pulse 1.2s ease-in-out infinite}
.preview-loading span:nth-child(2){animation-delay:.15s}
.preview-loading span:nth-child(3){animation-delay:.3s}
@keyframes preview-pulse{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:.85;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){#preview{transition:none}.preview-loading span{animation:none;opacity:.65}}

.fit-status{position:absolute;right:var(--space-sm);top:var(--space-xs);margin:0;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--text-secondary);font-size:var(--text-label);pointer-events:none}