/* WYR palette over the shared control surface. Load after vendor/controls/tokens.css. */
:root {
  --cs-bg-panel: rgba(13, 17, 19, 0.74);
  --cs-bg-field: #141a1c;
  --cs-bg-hover: #1e282b;
  --cs-text: #cfe8dd;
  --cs-text-strong: #e6f4ee;
  --cs-muted: #8fa9a1;
  --cs-muted-2: #5d7a6d;
  --cs-line: #2b3538;
  --cs-line-hi: #3a474b;
  --cs-accent: #0ea5e9;
  --cs-accent-rgb: 14, 165, 233;
  --cs-danger: #f87171;
  --cs-danger-rgb: 248, 113, 113;
  --cs-shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* The line a panel says its last action in is the package's `.cs-status`
   now, styled in controls.css. The top #status keeps engine messages. */

/* The panel is as tall as the rail block, and WYR's rail is long enough that
   on a short screen the block itself outgrows the column. The panel then
   reaches past the bottom of the window and the page gains somewhere to
   scroll to, which drags the artwork. Clamped to the column, the panel does
   what the master asks of anything longer: it scrolls inside itself. */
/* The id carries the weight: theme.css loads before the package, so a bare
   .cs-panel rule would lose to the package's own max-height. */
#shell .cs-panel {
  max-height: min(var(--cs-panel-max, 100%), 100%);
}

/* Fullscreen is the artwork and nothing else: the kit's Fullscreen sets the
   class and hides the shell (controls.css); WYR's own status line goes with
   it and comes back on the way out. */
body.is-fullscreen #status {
  display: none;
}