/* EMITR palette over the shared control surface. Load after
   /vendor/controls/tokens.css and before /vendor/controls/controls.css.
   The panel background is translucent: the package's shell paints it behind
   a backdrop-filter, so this is the glass tint, not an opaque fill. */
:root {
  --cs-bg-panel: var(--bvc-bg-panel);
  --cs-bg-field: var(--bvc-bg-chip-hi);
  --cs-bg-menu: #12171d; /* opaque: the chip tint is translucent and menus float over other cards */
  --cs-bg-hover: var(--bvc-bg-glass-hi);
  --cs-text: var(--bvc-text);
  --cs-text-strong: var(--bvc-text-strong);
  --cs-muted: var(--bvc-muted);
  --cs-muted-2: var(--bvc-muted-2);
  --cs-line: var(--bvc-line);
  --cs-line-hi: var(--bvc-line-hi);
  --cs-accent: var(--bvc-violet);
  --cs-accent-rgb: var(--bvc-violet-rgb);
  --cs-danger: #f87171;
  --cs-danger-rgb: 248, 113, 113;
  --cs-shadow-panel: var(--bvc-shadow-md);
}

/* Aux buttons that are not slider resets and so keep their own chrome:
   the animation panel's remove-animation "x" and the angle-wheel "o"
   reset. The angle-wheel buttons still carry `reset-btn direction-reset`
   in markup alongside `cs-aux-btn`, because css/emitr-mobile.css sizes
   them through `.mobile-wheel-controls .reset-btn` and that file is not
   ours to edit. */
.cs-aux-btn {
  justify-self: end;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--cs-line-hi);
  background: transparent;
  color: var(--cs-muted);
  font: 500 13px/1 var(--cs-font-ui, inherit);
  cursor: pointer;
  display: grid;
  place-items: center;
  text-align: center;
  transition: color 150ms ease, border-color 150ms ease;
}
.cs-aux-btn:hover {
  color: var(--cs-accent);
  border-color: rgba(var(--cs-accent-rgb), 0.55);
}

/* UI Size (hamburger menu → Display → UI Size) sets --ui-scale on :root via
   `[data-ui-scale]` in css/emitr-mobile.css. Every desktop effect of that
   preference used to hang off `.settings-panel-container` selectors in that
   same file, which the shell no longer sits under, so scale the shell's own
   tokens here instead. #shell inherits --ui-scale from the root. */
#shell {
  --cs-rail-btn: calc(44px * var(--ui-scale, 1));
  --cs-rail-glyph: calc(24px * var(--ui-scale, 1));
  --cs-panel-w: calc(320px * var(--ui-scale, 1));
  --cs-panel-pad: calc(14px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
  --cs-fs-row: calc(12px * var(--ui-scale, 1));
  --cs-fs-value: calc(10px * var(--ui-scale, 1));
  --cs-fs-section: calc(10px * var(--ui-scale, 1));
  --cs-fs-head: calc(10px * var(--ui-scale, 1));
}
/* The package shrinks the rail on a narrow desktop (tokens.css). That rule is
   on :root, which #shell now outranks, so restate it at the same breakpoint. */
@media (max-width: 900px) {
  #shell { --cs-rail-btn: calc(36px * var(--ui-scale, 1)); }
}

/* The shell owns the panel inset now (--cs-panel-pad). EMITR's legacy
   `.panel-content` padding would double-inset every row inside it, so zero it
   for the copy that is currently mounted in the shell. The same element keeps
   its padding while it waits in #panelSources, where css/emitr-mobile.css
   still sizes it for the phone sheet. */
/* The header pill (18px down, 44px tall) runs across the top of the stage and
   the preview chip sits under it at 74px; the column starts under the chip.
   src/ui/ui-bindings.js keeps --emitr-chip-clear at the chip's bottom edge
   plus 12px, so the rail moves down when the chip grows a transport row.
   The quick start menu (vendor/controls/controls.css, .cs-quickstart) mounts
   on document.body rather than inside #shell, so it takes the same clearance
   here. */
#shell, .cs-quickstart { --cs-shell-top: var(--emitr-chip-clear, 113px); }

#shell .cs-panel-body > .panel > .panel-content {
  padding: 0;
}
/* app.html lays .panel-content out as a 12px grid. Groups draw their own
   hairlines and spacing, so that gap only pushes each hairline away from the
   header above it. */
#shell .cs-panel-body > .panel > .panel-content:has(.cs-group) {
  gap: 0;
}
/* app.html still wraps rows in .control-stack / .control / .control-body
   boxes that main.js shows and hides by id. Inside a group they are layout
   only: the rows join the body's own 8px rhythm as if they were its direct
   children, so EMITR's spacing is the package's. */
#shell .cs-group-body .control-stack,
#shell .cs-group-body .control,
#shell .cs-group-body .control-body {
  display: contents;
}
#shell .cs-group-body .cs-row { margin: 0; }
/* The Camera and Forces panels keep their groups inside one such box too, so
   its 12px grid gap was the only thing between those groups. */
#shell .cs-panel-body .control-stack:has(> .cs-group) { display: contents; }

/* The package hides the shell under 768px. EMITR's phone sheet takes over on
   the wider of two conditions (css/emitr-mobile.css), so match it exactly:
   otherwise a coarse-pointer wide screen shows a rail the mobile sheet's own
   CSS has already hidden. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  #shell { display: none !important; }

  /* The phone sheet reads the parked desktop controls by id, and decides a
     card is hidden by walking up from the control looking for a display:none
     ancestor (src/ui/mobile-sheet.js isSettingVisible). css/emitr-mobile.css
     force-shows the legacy wrappers for exactly that reason; the package's
     group body is `[hidden]` instead, which that sheet cannot know about. A
     closed group must not cost the sheet its cards. */
  #panelSources .cs-group-body,
  #shell .cs-group-body {
    display: block !important;
  }

  /* The sheet adopts a whole package row into a card whose head already names
     the editor, so the row's own label reads as the same words twice. Hide it
     and let the widget have the width: src/ui/mobile-sheet.js is not ours to
     edit, so the card's heading is the one that stays. */
  .m-card .m-dom-wrap > .cs-row[data-type="gradient"],
  .m-card .m-dom-wrap > .cs-row[data-type="curve"] {
    display: block;
  }
  .m-card .m-dom-wrap > .cs-row[data-type="gradient"] > .cs-label,
  .m-card .m-dom-wrap > .cs-row[data-type="curve"] > .cs-label {
    display: none;
  }

  /* The sheet still stamps an animate toggle on every animatable slider card.
     It proxied to the desktop `.animate-btn`, which the tracks model replaced,
     so it has nothing left to click. css/emitr-mobile.css is not ours to edit;
     this is where it goes away. */
  .m-anim-toggle {
    display: none !important;
  }
}

/* app.html gives every #uiContainer child `pointer-events: auto`, at a
   specificity the package's `.cs-shell { pointer-events: none }` cannot beat.
   The shell spans the whole stage, so without this it would swallow every
   drag meant for the canvas. The rail and panel set their own `auto`. */
#uiContainer > #shell {
  pointer-events: none;
}

/* The preview chip sits at the left edge under the header pill, in line with
   the rail, and the rail starts under the chip (see --cs-shell-top). */
@media (min-width: 769px) {
  .preview-chip {
    left: var(--cs-shell-inset) !important;
    top: 74px !important;
  }
}

/* Angle-wheel value field. It kept its width from the deleted
   `input.editable-value.angle-value` rule; without one the bare text input
   falls back to its ~180px intrinsic size and blows out the three-column
   rotation grid. */
.angle-value {
  display: inline-block;
  width: 64px;
  margin-left: 0;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--cs-line-hi);
  background: var(--cs-bg-field);
  color: var(--cs-text);
  font: inherit;
  font-size: 10.5px;
  line-height: 1.2;
  text-align: center;
  outline: none;
}
.angle-value.editing {
  background: var(--cs-bg-hover);
}

/* Buttons: the app's purple to orange gradient on every filled button and
   active state. The kit paints these with --cs-accent; the palette layer
   overrides the fill and keeps the kit's geometry and hover brightness. */
/* The stops live on their own so the same ramp can be painted along another
   axis without a second copy of the colors drifting from this one. */
:root {
  --emitr-btn-stops: #7358e8 0%, #8f5ce6 50%, #b86bc4 82%, #dc8a78 100%;
  --emitr-btn-gradient: linear-gradient(135deg, var(--emitr-btn-stops));
  /* The rail's hover names take the same ramp, along the text's own axis (the
     kit clips it to the letters). */
  --cs-rail-label-ink: linear-gradient(90deg, var(--emitr-btn-stops));
  /* A card's accent word (the free finishing note's `Pro`): a short word shows
     only the ramp's first stretch, so it gets the ramp's two ends. */
  --cs-accent-ink: linear-gradient(90deg, #8f5ce6 0%, #dc8a78 100%);
}
#shell .cs-btn.primary,
#shell .cs-btn.primary:hover:not(:disabled),
#shell .cs-rail-btn.active,
#shell .cs-seg-btn.is-active,
#shell .cs-chip.is-active,
#shell .cs-btn.danger.armed {
  background: var(--emitr-btn-gradient);
  border-color: transparent;
  color: #fff;
}
.preview-seg-slider {
  background: var(--emitr-btn-gradient) !important;
}

/* Quick start (kit master section 18) mounts on the body, outside #shell, so
   the rules above never reach it: the step title carries the same gradient as
   text, and its Next button as a fill. The solid color is declared first as the
   fallback a browser without background-clip: text keeps; width: max-content
   holds the gradient to the title's own text instead of stretching it across
   the whole heading line (where only its first stop would show), and leaves the
   kit's ellipsis safety net, its title attribute and the line's baseline
   alignment with the progress segments and the count untouched. The same stops
   run along 90deg rather than the button's 135deg: a one-word title is a short,
   low box, and the button's diagonal spends most of its travel on the box's
   height, so a word like "Size" would come out purple end to end. The Next rules
   name the button's own class as well: theme.css loads before controls.css, so
   .cs-quickstart .cs-btn.primary alone ties with the kit's own rule and loses
   on order. */
.cs-quickstart .cs-quickstart-title {
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
  color: var(--cs-text);
  background: linear-gradient(90deg, var(--emitr-btn-stops));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cs-quickstart .cs-btn.primary.cs-quickstart-next,
.cs-quickstart .cs-btn.primary.cs-quickstart-next:hover:not(:disabled) {
  background: var(--emitr-btn-gradient);
  border-color: transparent;
  color: #fff;
}

/* The launch splash and the share dialog mount on the body too. Their filled
   buttons carry the same ramp, named by their own classes for the same
   load-order reason. */
/* The kit's confirm and notice cards (the quick start's finishing note among
   them) mount on the body as well; `body` lifts the rule over the kit's own. */
body .cs-confirm .cs-btn.primary,
body .cs-confirm .cs-btn.primary:hover:not(:disabled),
.cs-share .cs-btn.primary.cs-share-create,
.cs-share .cs-btn.primary.cs-share-create:hover:not(:disabled),
.cs-splash .cs-btn.primary.cs-splash-primary,
.cs-splash .cs-btn.primary.cs-splash-primary:hover:not(:disabled) {
  background: var(--emitr-btn-gradient);
  border-color: transparent;
  color: #fff;
}