/* ═══════════════════════════════════════════════════════════════════════════
   chrome.css — Studio shell (vanilla port)
   Source of truth: apps/studio-demo/src/components/studio/
     StudioLayout.tsx · TopBar.tsx · LeftSideMenu.tsx · canvas/CanvasView.tsx ·
     canvas/CanvasScreen.tsx · canvas/ZoomControls.tsx · FlowPanel.tsx ·
     RightPanel.tsx · sections/ColorGroupSection.tsx · ui/Toast.tsx
   Almost all styling in the source is inline — those values live verbatim in
   chrome.js. This file only translates the few Tailwind utility classes the
   shell uses (prefix sc-, standard Tailwind values).
   ═══════════════════════════════════════════════════════════════════════════ */

/* StudioLayout.tsx root: "h-screen flex flex-col overflow-hidden" */
.sc-root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* StudioLayout.tsx main area: "flex-1 flex min-h-0" */
.sc-main {
  flex: 1 1 0%;
  display: flex;
  min-height: 0;
}

/* StudioLayout.tsx canvas column: "flex-1 relative min-h-0" */
.sc-canvas-col {
  flex: 1 1 0%;
  position: relative;
  min-height: 0;
}

/* RightPanel.tsx layout-alignment tooltip:
   wrapper className="group"
   tooltip className="pointer-events-none absolute bottom-full left-1/2
     -translate-x-1/2 mb-1.5 opacity-0 group-hover:opacity-100 transition-opacity" */
.sc-tooltip {
  pointer-events: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.375rem; /* mb-1.5 */
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.sc-group:hover .sc-tooltip {
  opacity: 1;
}