/* Glitch shares the website's dock and stage, just like Rainbow. */
.gc-workbench {
  --gc-accent: var(--accent, var(--av-jade-lt));
  --gc-ground: var(--surface, var(--av-panel));
  --gc-field: var(--surface-2, var(--av-well));
  --gc-line: var(--border-2, var(--av-line));
  --gc-muted: var(--fg-dim, var(--av-ink-2));
  color: inherit; font: inherit; min-width: 0; min-height: 0;
}
.gc-workbench *, .gc-workbench *::before, .gc-workbench *::after { box-sizing: border-box; }
.gc-workbench [hidden], .gc-stage[hidden] { display: none !important; }
body.studiolab #glitch-workbench .gc-build-card { display: flex; flex-direction: column; margin: 0; padding: 0; min-width: 0; border: 0; background: none; box-shadow: none; clip-path: none; }
.gc-content { display: grid; gap: 10px; padding: 10px 0; min-width: 0; }
.gc-name-field { display: grid; gap: 6px; font-size: 12px; }
body.studiolab #glitch-workbench #gc-name { width: 100%; min-width: 0; min-height: 38px; padding: 9px 10px; color: inherit; background: var(--gc-field); border: 1px solid var(--gc-line); border-radius: 8px; font: inherit; }
#glitch-workbench .gc-preview-head { display: grid; gap: 6px; padding: 0; margin: 0; background: none; border: 0; }
#glitch-workbench .gc-lab { display: grid; gap: 8px; margin: 0; }
#glitch-workbench .gc-lab-field { display: grid; gap: 6px; }
#glitch-workbench .gc-lab-label { color: inherit; font: 12px var(--font-ui, inherit); letter-spacing: normal; text-transform: none; }
#glitch-workbench .gc-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
body.studiolab #glitch-workbench .gc-chip { min-width: 36px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--gc-line); border-radius: 7px; color: inherit; background: var(--gc-field); font: 12px var(--font-ui, inherit); }
body.studiolab #glitch-workbench .gc-chip[aria-pressed=true] { border-color: var(--gc-accent); color: var(--gc-accent); background: color-mix(in srgb, var(--gc-accent) 10%, transparent); }
#glitch-workbench .gc-slots { display: grid; gap: 0; margin: 0; }
#glitch-workbench h3 { margin: 0 0 5px; font: 650 13px/1.4 var(--font-ui, inherit); letter-spacing: normal; text-transform: none; }
body.studiolab #glitch-workbench .gc-slot-row:not(.gc-chan-head) { display: grid; grid-template-columns: minmax(0, 1fr) 36px 52px; align-items: center; gap: 8px; min-height: 38px; margin: 0; padding: 3px 0; border: 0; border-bottom: 1px solid var(--gc-line); background: none; }
#glitch-workbench .gc-slot-name { grid-column: 1; grid-row: 1; }
#glitch-workbench .gc-colour-controls { grid-column: 2; grid-row: 1; }
#glitch-workbench .gc-lock { grid-column: 3; grid-row: 1; }
#glitch-workbench .gc-slot-row > .gc-colour-unavailable { grid-column: 1 / -1; font-size: 11px; padding-bottom: 3px; }
#glitch-workbench .gc-slot-name { color: inherit; font: 12px/1.4 var(--font-ui, inherit); letter-spacing: normal; text-transform: none; margin: 0; overflow-wrap: anywhere; }
.gc-colour-controls, .gc-colour-swatch { display: flex; align-items: center; margin: 0; }
#glitch-workbench input[type=color] { width: 34px; height: 30px; padding: 2px; border: 1px solid var(--gc-line); border-radius: 6px; background: var(--gc-field); cursor: pointer; }
#glitch-workbench input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
#glitch-workbench input[type=color]::-webkit-color-swatch { border: 0; border-radius: 3px; }
body.studiolab #glitch-workbench .btn, .gc-workbench-button, #glitch-workbench .gc-lock { min-height: 36px; padding: 8px 11px; border: 1px solid var(--gc-line); border-radius: 8px; background: var(--gc-field); color: inherit; font: 600 12px var(--font-ui, inherit); letter-spacing: normal; text-transform: none; clip-path: none; cursor: pointer; }
body.studiolab #glitch-workbench .btn-primary { background: var(--gc-accent); border-color: var(--gc-accent); color: var(--on-primary, var(--av-on-jade)); }
#glitch-workbench :is(button, input, summary, textarea):focus-visible { outline: 2px solid var(--gc-accent); outline-offset: 2px; }
#glitch-workbench button:hover:enabled { border-color: var(--gc-accent); }
#glitch-workbench :is(button, input):disabled { opacity: .42; cursor: default; }
#glitch-workbench :is(.dim, .gc-hint, .gc-colour-unavailable, .gc-stage-status) { color: var(--gc-muted); font: 12px/1.5 var(--font-ui, inherit); margin: 0; }
#glitch-workbench .gc-colour-note { grid-column: 1 / -1; margin: 0; color: var(--bad, var(--av-bad)); font-size: 12px; }
#glitch-workbench .gc-share { margin: 0; padding: 12px 0 8px; border: 0; border-top: 1px solid var(--gc-line); background: none; border-radius: 0; }
#glitch-workbench .gc-lock { float: none; min-height: 30px; padding: 5px 4px; font-size: 11px; }
#glitch-workbench .gc-lock.is-on { color: var(--gc-accent); border-color: var(--gc-accent); }
#glitch-workbench .gc-share-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
#glitch-workbench .gc-share > .dim { font-size: 11px; margin: 5px 0; }
#glitch-workbench textarea { width: 100%; padding: 9px; color: inherit; background: var(--gc-field); border: 1px solid var(--gc-line); border-radius: 8px; }
body.studiolab #glitch-workbench .gc-footer { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 0; border-top: 1px solid var(--gc-line); }
#glitch-workbench .gc-footer { background: var(--gc-ground); }
#glitch-workbench h3::before { content: none; }
#glitch-workbench .gc-footer > :is(button, a) { flex: 1; min-height: 42px; }
#glitch-workbench .gc-footer > .gc-name-field { flex: 1 0 100%; }
#glitch-workbench .gc-apply-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; flex: 1 0 100%; }
body.studiolab #glitch-workbench .gc-apply-actions .btn { min-height: 44px; }
#glitch-workbench .gc-footer > p { flex: 1 0 100%; margin: 0; }
#glitch-workbench :is(#gc-note, #gc-preview-status, #gc-share-note, .gc-stage-status):empty { display: none; }
.gc-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* The existing website background stays visible through this model canvas. */
body.studiolab .gc-stage { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; display: block; min-width: 0; min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; clip-path: none; pointer-events: none; }
body.studiolab .gc-stage-wrap { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; background: transparent; }
/* Owner themes may give every card glass and pseudo-element effects. This
   anchor contains controls only; those effects must not cover the specimen. */
body.studiolab #stage-wrap :is(.gc-stage, .gc-stage-wrap) { background: transparent !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; box-shadow: none !important; border: 0 !important; }
body.studiolab #stage-wrap :is(.gc-stage, .gc-stage-wrap)::before,
body.studiolab #stage-wrap :is(.gc-stage, .gc-stage-wrap)::after { content: none !important; display: none !important; }
#gc-stage-canvas { display: none; }
body.studiolab #gc-stage-note { position: absolute; inset: 0; display: grid; place-content: center; padding: 24px; color: var(--fg, var(--av-ink)); text-align: center; background: transparent; }
#gc-stage-note[hidden] { display: none !important; }
.gc-stage-tools { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 6; pointer-events: auto; }
.gc-stage-tools .sd-btn { min-width: 34px; }
.gc-stage-tools [hidden] { display: none !important; }
.gc-clip-row { display: none !important; }
body.studiolab.glitch-editing :is(#sd-wire, #sd-tags, #sd-pulse, #vp-loading, #stage-note, .crt-spinner) { display: none !important; }
body.studiolab.glitch-editing :is(#growth-slider, #growth-label, .sd-growth-row, .stage-growth, .skin-cycler) { display: none !important; }
body.studiolab.glitch-editing :is(#sd-view, #lab-footstrip) { visibility: hidden; pointer-events: none; }
body.studiolab.glitch-editing #pane-glitchcustom { margin: 0; }
body.studiolab.glitch-editing #pane-glitchcustom > .sec-head { display: none; }
body.studiolab.glitch-editing .gc-layout { display: block; }
body.studiolab.glitch-editing #studio-tabs:not(:has(#tab-glitch)), body.studiolab.glitch-editing #panel .lab-lede { display: none !important; }

@media (max-width: 900px) {
  /* Same sheet proportions and tab placement as Rainbow. */
  body.studiolab.glitch-editing #stage-wrap { flex: 0 0 auto; height: var(--gc-view-height, 40dvh) !important; max-height: var(--gc-view-height, 40dvh) !important; min-height: 160px; }
  body.studiolab.glitch-editing #panel { bottom: var(--lab-bar,0px); height: min(48dvh,520px); max-height: min(48dvh,520px); padding: 0 16px 12px; }
  body.studiolab.glitch-editing #lab-dock-panel { bottom: calc(var(--lab-bar,0px) + min(48dvh,520px)); }
  body.studiolab.glitch-editing #lab-dock-panel .deck, body.studiolab.glitch-editing #dock-handle { display: none !important; }
  body.studiolab.glitch-editing #lab-dock-panel #lab-tabs { display: flex !important; }
  body.studiolab.glitch-editing .drawer-head { display: none; }
  body.studiolab.glitch-editing #lab-drawer-scrim { display: none !important; }
  body.studiolab.glitch-editing #panel #studio-tabs { position: static; }
  .gc-content { padding-top: 12px; }
  .gc-stage-tools { bottom: 8px; }
}
@media (pointer: coarse) {
  body.studiolab #glitch-workbench .gc-slot-row:not(.gc-chan-head) { min-height: 48px; grid-template-columns: minmax(0,1fr) 42px 52px; }
  #glitch-workbench input[type=color] { width: 40px; height: 40px; }
  body.studiolab #glitch-workbench :is(.btn, .gc-lock), .gc-workbench-button { min-height: 44px; }
}