/* GLEE Studio 2D. Builds on the shared studio, journey, coedit and kinds
   styles; only what the 2D editor adds or reshapes lives here. */
/* Preserve the editor's bounded grid when the global appearance sheet loads
   later. Its flex/auto-height workspace otherwise follows the SVG's intrinsic
   size and moves the artboard below the visible workspace. */
body.studio2d .ws-workspace,html[data-glee-appearance] body.studio.studio2d .ws-workspace{flex:none;height:max(640px,calc(100dvh - 160px));min-height:640px}
body.studio2d .ws-center{grid-template-rows:60px minmax(260px,1fr) auto 52px}
body.studio2d .ws-stage{background:radial-gradient(circle at 50% 42%,var(--c-surface-2),var(--ws-ground) 70%)}
#canvas2d{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;outline-offset:-4px}
#canvas2d:focus-visible{outline:2px solid var(--ws-accent)}
#canvas2d .s2-obj{cursor:move}
#canvas2d .s2-obj *{pointer-events:visible}
#canvas2d[data-mode=mark],#canvas2d[data-mode=mark] .s2-obj{cursor:crosshair}
#canvas2d[data-panning=true]{cursor:grabbing}
#artboard-shadow{fill:var(--c-ink);opacity:.45}
#pasteboard{fill:var(--ws-ground);opacity:.72;pointer-events:none}
#artboard-edge{fill:none;stroke:var(--ws-line);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
#overlay{pointer-events:none}
#overlay [data-handle]{pointer-events:all}
.s2-box{fill:none;stroke:var(--ws-accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.s2-stem{stroke:var(--ws-accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.s2-handle{fill:var(--c-paper);stroke:var(--ws-accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.s2-handle-rotate{fill:var(--ws-accent);stroke:var(--c-ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.s2-hit-handle{fill:transparent;stroke:none}
[data-handle=nw],[data-handle=se]{cursor:nwse-resize}[data-handle=ne],[data-handle=sw]{cursor:nesw-resize}
[data-handle=e],[data-handle=w]{cursor:ew-resize}[data-handle=s]{cursor:ns-resize}[data-handle=rotate]{cursor:grab}
.s2-guide{stroke:var(--c-info);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.s2-mark{fill:color-mix(in srgb,var(--ws-gold) 12%,transparent);stroke:var(--ws-gold);stroke-width:1.5;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.s2-mark-label{fill:var(--ws-gold);font:700 11px var(--ws-mono);letter-spacing:.08em}
body[data-preview] #overlay .s2-handle,body[data-preview] #overlay .s2-handle-rotate,body[data-preview] #overlay .s2-stem,body[data-preview] #overlay [data-handle]{display:none}
.ws-viewport-label{z-index:1}
#selection-label{max-width:calc(100% - 190px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Toolbar */
.studio2d .ws-toolbar{overflow-x:auto;scrollbar-width:none}
.studio2d .ws-toolbar::-webkit-scrollbar{display:none}
.studio2d .ws-tools button{min-width:44px;font-size:var(--text-14)}
.studio2d .ws-tools #mark-area{font-size:var(--text-12)}
.studio2d .ws-tools #mark-area[aria-pressed=true]{color:var(--c-ink);background:var(--ws-gold);border-color:var(--ws-gold)}
.s2-sep{width:1px;height:28px;background:var(--ws-line);margin:0 var(--space-4);flex:none}
.studio2d .ws-view-tools button{min-width:44px;font-size:var(--text-14)}
.studio2d .ws-view-tools #zoom-fit{font-size:var(--text-11)}

/* 44px targets for controls the shared header styles leave smaller. */
.studio2d #undo,.studio2d #redo,.studio2d #open-project{min-width:44px}
.studio2d .ws-project input{min-height:44px}
.studio2d .ws-right input[type=color]{width:52px;height:44px;min-height:44px}

/* Left panel */
.s2-order-hint{margin-left:auto;font:9px var(--ws-mono);color:var(--ws-muted);letter-spacing:.06em}
.s2-order{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-8);padding:0 var(--space-16) var(--space-16)}
.s2-order button{min-height:44px;font-size:var(--text-11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:var(--space-4)}
.ws-object-row .s2-glyph{font-size:var(--text-16);width:20px;text-align:center;flex:none;text-shadow:0 0 1px rgba(0,0,0,.6)}
.ws-object-row .s2-tag{color:var(--ws-muted);font:10px var(--ws-mono);flex:none}
.ws-object-row .s2-tag.s2-anim{color:var(--ws-gold)}
.studio2d #outliner{max-height:30dvh}

/* Properties */
.s2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);margin-bottom:var(--space-8)}
.s2-grid label,.s2-block{display:flex!important;flex-direction:column;align-items:stretch!important;gap:var(--space-2);font-size:var(--text-11)!important;color:var(--ws-muted);margin:0!important}
.s2-grid input,.s2-grid select,.s2-block input{width:100%;min-width:0;font:12px var(--ws-mono);color:var(--ws-text)}
.s2-grid .s2-wide{grid-column:1/-1}
.s2-block{margin-bottom:var(--space-8)!important}
.s2-row{display:flex;gap:var(--space-8);align-items:flex-end;margin-bottom:var(--space-8)}
.s2-row label{flex:1;display:flex!important;flex-direction:column;align-items:stretch!important;font-size:var(--text-11)!important;color:var(--ws-muted)}
.s2-row button{min-height:44px;white-space:nowrap}
.s2-color{display:flex;align-items:center;gap:var(--space-8)}
.s2-none{display:flex!important;align-items:center;gap:var(--space-4);margin:0!important;color:var(--ws-muted);font-size:var(--text-11)!important;min-height:44px}
.s2-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin:0 0 var(--space-16)}
.s2-swatches button{min-height:44px;padding:0;border-radius:var(--ws-radius-s);border:2px solid var(--ws-line)}
.s2-swatches button:hover{border-color:var(--ws-text)}
.s2-swatches button[aria-pressed=true]{border-color:var(--ws-accent);box-shadow:0 0 0 2px var(--c-ink) inset}
.s2-keyed{margin:var(--space-8) 0 0;font:10px/1.5 var(--ws-mono);color:var(--ws-gold)}
.s2-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin:0 0 var(--space-12)}
.s2-presets button{font-size:var(--text-11);padding:var(--space-4);min-height:44px}
.s2-presets button[aria-pressed=true]{color:var(--ws-accent);border-color:var(--ws-accent)}
.studio2d .ws-right output{min-width:3ch;text-align:right}

/* Export menu */
.s2-export{position:relative}
.s2-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:grid;gap:2px;min-width:220px;padding:var(--space-8);background:var(--ws-panel);border:1px solid var(--ws-line);border-radius:var(--ws-radius-m);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.s2-menu button{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);min-height:48px;padding:var(--space-8) var(--space-12);border:0;background:transparent;text-align:left;font-size:var(--text-13)}
.s2-menu button:hover,.s2-menu button:focus-visible{background:var(--ws-raised)}
.s2-menu small{font:10px var(--ws-mono);color:var(--ws-muted)}

/* Timeline: a compact four-row strip; a key lane shows where poses are. */
body.studio2d .ws-timeline{display:grid;grid-template-rows:auto;gap:var(--space-8);padding:var(--space-8) var(--space-12);overflow:visible}
body.studio2d .ws-time-heading{flex-wrap:wrap;row-gap:var(--space-4)}
body.studio2d .ws-time-heading h2{display:flex;align-items:center;gap:var(--space-8)}
body.studio2d .ws-time-heading h2 #motion-label{display:inline!important;color:var(--ws-accent);font-size:inherit;letter-spacing:inherit;margin:0}
.ws-time-heading h2 #timeline-fps{margin:0}
body.studio2d .ws-transport,body.studio2d .ws-scrubber,body.studio2d .ws-track{min-height:44px}
.s2-lane{position:relative;flex:1;height:30px;min-width:0;border-radius:var(--ws-radius-s);background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--ws-line) calc(25% - 1px) 25%),var(--c-ink-2);overflow:visible}
.s2-lane>span{position:absolute;left:var(--space-8);top:50%;transform:translateY(-50%);font:10px var(--ws-mono);color:var(--ws-muted);white-space:nowrap}
.s2-lane button{position:absolute;top:50%;width:28px;height:28px;min-height:28px!important;min-width:0!important;padding:0;transform:translate(-50%,-50%);border:0;background:transparent;color:var(--ws-gold);font-size:var(--text-16);line-height:1}
.s2-lane button::after{content:'';position:absolute;inset:-8px}
.s2-lane button[aria-pressed=true]{color:var(--ws-accent);text-shadow:0 0 8px var(--ws-accent)}
.s2-lane .s2-playhead{position:absolute;top:2px;bottom:2px;width:2px;margin-left:-1px;background:var(--ws-accent);border-radius:var(--ws-radius-xs);pointer-events:none}
.ws-track>#key-count{min-width:96px}
/* Image mode: the strip shrinks to the export row and the way into motion. */
body[data-medium=image] .ws-timeline>:not(.ws-time-heading),body[data-medium=image] .ws-time-heading>label,body[data-medium=image] #timeline-fps,body[data-medium=image] #export-video{display:none!important}
body[data-medium=image] .ws-time-heading{display:flex;align-items:center;gap:var(--space-8)}
body[data-medium=image] .ws-time-heading #capture{margin-left:auto}
body:not([data-medium=image]) #animate-this{display:none}
/* Phones, image mode: the way into motion floats like the Ask Studio button,
   because the timeline heading sits below the fold at 390. Hidden while the
   Ask sheet is open (the sheet owns the bottom edge). Mirrors modes.css. */
@media(max-width:850px){
 body[data-medium=image] #animate-this{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));z-index:38;min-height:44px;padding:0 var(--space-16);border-radius:var(--ws-radius-pill)}
 body[data-co-open] #animate-this{display:none}
}
body:not([data-medium=image]) .ws-time-heading #capture{margin-left:auto}
#animate-this{border-color:var(--ws-gold);color:var(--ws-gold)}
#animate-this:hover{background:var(--ws-gold);color:var(--c-ink)}

/* Wide screens: transport and scrubber share a row, so the stage keeps its height. */
@media(min-width:1151px){
 body.studio2d .ws-timeline{grid-template-columns:auto minmax(0,1fr)}
 body.studio2d .ws-time-heading,body.studio2d .ws-track,body.studio2d #animation-hint{grid-column:1/-1}
 body.studio2d .ws-scrubber{padding-left:var(--space-8)}
}
@media(max-width:1150px){.studio2d .ws-tools #mark-area span{display:none}}
@media(max-width:850px){
 body.studio2d .ws-workspace,html[data-glee-appearance] body.studio.studio2d .ws-workspace{height:760px;min-height:760px}
 body.studio2d .ws-center{grid-template-rows:60px minmax(300px,1fr) auto auto}
 body.studio2d[data-medium=image] .ws-workspace,html[data-glee-appearance] body.studio.studio2d[data-medium=image] .ws-workspace{height:580px;min-height:580px}
 .studio2d .ws-right,.studio2d .ws-left{max-height:760px}
 .studio2d .ws-tools #mark-area span{display:inline}
 #selection-label{max-width:calc(100% - 160px)}
 .ws-viewport-help{display:none}
 .s2-menu{right:auto;left:0}
}
@media(max-width:440px){
 .studio2d .ws-tools #mark-area span{display:none}
 .studio2d .ws-tools [data-align=left],.studio2d .ws-tools [data-align=right],.studio2d .ws-tools [data-align=top],.studio2d .ws-tools [data-align=bottom]{display:none}
 .studio2d .ws-view-tools label{font-size:var(--text-11)}
 .studio2d .ws-tools,.studio2d .ws-view-tools{gap:var(--space-4)}
 body.studio2d .ws-time-heading h2{font-size:var(--text-10)}
 body.studio2d .ws-time-heading{gap:var(--space-4)}
 .s2-menu{left:auto;right:0}
}

/* The bounded artboard is reachable directly. Keep its actions with the work
   instead of covering the status message at the bottom of the phone. */
@media(max-width:850px){
 body.studio2d[data-medium=image] #animate-this{position:static;inset:auto;z-index:auto}
 body.studio2d .co-fab{position:absolute}
}