/* Chart Maker shell — host rules.
   Loaded from editor.html <head> so they apply from first paint. They switch
   the whole legacy interface off while the React shell owns the page and
   give the retained stage its geometry from the shell's CSS variables.
   Nothing here styles React output; that lives in dist/chart-maker-shell-app.css. */

/* While the React shell is pending or active, the complete legacy chrome is
   hidden. It is one interface or the other — never a mix. */
body[data-chart-maker-ui="react"] > .app-header,
body[data-chart-maker-ui="react-pending"] > .app-header,
body[data-chart-maker-ui="react"] > #controls,
body[data-chart-maker-ui="react-pending"] > #controls,
body[data-chart-maker-ui="react"] > #controls-toggle,
body[data-chart-maker-ui="react-pending"] > #controls-toggle,
body[data-chart-maker-ui="react"] > #canvas-toolbar,
body[data-chart-maker-ui="react-pending"] > #canvas-toolbar,
body[data-chart-maker-ui="react"] > #mobile-editor-actions,
body[data-chart-maker-ui="react-pending"] > #mobile-editor-actions,
body[data-chart-maker-ui="react"] > #mobile-arrange-bar,
body[data-chart-maker-ui="react-pending"] > #mobile-arrange-bar,
body[data-chart-maker-ui="react"] > #mobile-chart-actions,
body[data-chart-maker-ui="react-pending"] > #mobile-chart-actions,
body[data-chart-maker-ui="react"] > #mobile-chart-actions-backdrop,
body[data-chart-maker-ui="react-pending"] > #mobile-chart-actions-backdrop,
body[data-chart-maker-ui="react"] > #mobile-edit-mode-toast,
body[data-chart-maker-ui="react-pending"] > #mobile-edit-mode-toast,
body[data-chart-maker-ui="react"] > #mobile-canvas-gesture-status,
body[data-chart-maker-ui="react-pending"] > #mobile-canvas-gesture-status,
body[data-chart-maker-ui="react"] > .controls-undo-redo-floating,
body[data-chart-maker-ui="react-pending"] > .controls-undo-redo-floating,
body[data-chart-maker-ui="react"] .app-header-zoom-controls,
body[data-chart-maker-ui="react"] #editor-first-use-card,
body[data-chart-maker-ui="react"] #editor-setup-guide-toggle {
  display: none !important;
}

/* The retained stage fits the pocket the shell leaves free. */
body[data-chart-maker-ui="react"] #stage {
  position: fixed;
  top: var(--cm-top, 112px);
  left: var(--cm-left, 356px);
  right: var(--cm-right, 0px);
  bottom: var(--cm-bottom, 0px);
  min-height: 0;
  max-height: none;
  max-width: none;
  width: auto;
  height: auto;
  padding: 0 !important;
  margin: 0;
  overflow: auto;
  display: flex;
  scrollbar-width: thin;
  scrollbar-color: #2a2f37 #0b0d12;
}

body[data-chart-maker-ui="react"] #stage::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body[data-chart-maker-ui="react"] #stage::-webkit-scrollbar-thumb {
  background: #2a2f37;
  border-radius: 8px;
}

/* The base stylesheet asks for "only light" form controls; the workshop
   overrides that to dark, which is where its dark slider tracks come from. */
html:has(body[data-chart-maker-ui="react"]),
body[data-chart-maker-ui="react"] {
  color-scheme: dark;
}

body[data-chart-maker-ui="react"] {
  overflow: hidden;
  background: #121419;
}

body[data-chart-maker-ui="react-pending"] #stage {
  visibility: hidden;
}

/* Phones: keep the full pocket for the chart until rulers are enabled. When
   they are visible, reserve the same outward gutter used on desktop so ruler
   labels and ticks never paint over canvas content. */
@media (max-width: 900px) {
  html body[data-chart-maker-ui="react"] #canvas-workspace {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px !important;
    margin: auto !important;
  }

  html body[data-chart-maker-ui="react"] #canvas-wrapper {
    --ruler-size: 0px;
    padding: 0 !important;
    width: var(--canvas-width) !important;
    height: var(--canvas-height) !important;
  }

  html body[data-chart-maker-ui="react"].rulers-on #canvas-wrapper {
    --ruler-size: 36px;
    padding-top: var(--ruler-size) !important;
    padding-left: var(--ruler-size) !important;
    width: calc(var(--canvas-width) + var(--ruler-size)) !important;
    height: calc(var(--canvas-height) + var(--ruler-size)) !important;
  }
}