/*! decius-css v0.6.2 | MIT License | https://github.com/benjcooley/decius-css */
@charset "UTF-8";
/* ============================================================
   decius.css — DCC interface framework
   v0.4.0 "Mus"  — © MMXXVI · MIT license
   A CSS system for digital content creation tools, synths,
   pro-grade desktop interfaces. Cool, bright, friendly.
   ============================================================ */
/* ------------------------------------------------------------
   1 · TOKENS
   ------------------------------------------------------------ */
:root {
  /* Base canvas — "cooler mid" not over-dark */
  --dcs-bg-app: #1f222a;
  --dcs-bg: #2a2e38; /* default panel surface */
  --dcs-surface-1: #323744; /* raised */
  --dcs-surface-2: #3c424f; /* raised x2 / hover */
  --dcs-surface-3: #474e5d; /* hot / pressed */
  --dcs-surface-4: #555d6e;
  --dcs-well: #181b22; /* sunken inputs — kept reliably below both
    bg-app (#1f222a) and bg (#2a2e38) so a
    widget always reads one shade darker than
    whatever panel surface it lands on. */
  --dcs-rail: #181a21; /* deepest separator */
  --dcs-stage: #4a5160; /* "main view" surface — Photoshop-style:
    one step LIGHTER than the dock chrome
    so the editor (canvas / 3D viewport)
    reads as the focal surface of the app.
    Used by .dcs-dockpane--center. */
  /* Optical text-centering nudge — IBM Plex Sans and most pro fonts have
     ascender + cap-height occupying the top ~92% of the em with the
     descender slot mostly empty, so `align-items: center` lands the
     glyphs ~1–2px above the visual midline of the row. Applied as
     padding-top on tight, single-line-of-text rows (menubar items,
     menu items, brand labels) to push the glyphs onto the optical
     midline. Adjust per-theme if your font has different metrics. */
  --dcs-text-nudge: 2px;
  /* Borders */
  --dcs-line: #14161c; /* hard, dark separator */
  --dcs-line-soft: #3a3f4c;
  --dcs-line-strong: #5d6577;
  /* Text */
  --dcs-text: #e7e9ee;
  --dcs-text-dim: #aab0bd;
  --dcs-text-mute: #767c8a;
  --dcs-text-inv: #14161c;
  --dcs-text-link: var(--dcs-accent);
  /* Accent — DCC blue */
  --dcs-accent: #4d9fff;
  --dcs-accent-hi: #6fb3ff;
  --dcs-accent-lo: #2f86ee;
  --dcs-accent-dim: rgba(77, 159, 255, .18);
  --dcs-accent-haze: rgba(77, 159, 255, .35);
  /* Semantic */
  --dcs-ok: #4ed18a;
  --dcs-warn: #f2b14a;
  --dcs-danger: #ef6b6b;
  --dcs-info: var(--dcs-accent);
  --dcs-purple: #b48cff;
  --dcs-pink: #ff7ab8;
  --dcs-teal: #4ad5d5;
  /* Spacing scale — direct values per density */
  --dcs-u: 4px;
  --dcs-s-1: 2px;
  --dcs-s-2: 4px;
  --dcs-s-3: 6px;
  --dcs-s-4: 8px;
  --dcs-s-5: 12px;
  --dcs-s-6: 16px;
  --dcs-s-7: 20px;
  --dcs-s-8: 28px;
  /* Control sizes */
  --dcs-h-sm: 18px;
  --dcs-h: 24px;
  --dcs-h-lg: 30px;
  --dcs-h-xl: 40px;
  --dcs-h-in: 22px; /* text/number fields — slightly thinner */
  /* Radius */
  --dcs-r-1: 2px;
  --dcs-r-2: 3px;
  --dcs-r-3: 5px;
  --dcs-r-4: 8px;
  /* Type */
  --dcs-font: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --dcs-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --dcs-font-display: 'IBM Plex Sans', sans-serif;
  --dcs-font-num: 'IBM Plex Sans', ui-sans-serif, sans-serif; /* sans tabular by default — mono is for code */
  --dcs-fs-xs: 10px;
  --dcs-fs-sm: 11px;
  --dcs-fs: 12px;
  --dcs-fs-md: 13px;
  --dcs-fs-lg: 15px;
  --dcs-fs-xl: 18px;
  --dcs-fs-2xl: 24px;
  --dcs-fs-3xl: 32px;
  --dcs-lh: 1.45;
  --dcs-lh-tight: 1.2;
  /* Shadows / FX */
  --dcs-shadow-1: 0 1px 0 rgba(0,0,0,.4);
  --dcs-shadow-2: 0 2px 6px rgba(0,0,0,.35);
  --dcs-shadow-3: 0 8px 24px rgba(0,0,0,.45);
  --dcs-shadow-pop: 0 12px 36px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --dcs-bevel-up: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.25);
  --dcs-bevel-down: inset 0 1px 2px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.04);
  --dcs-ring: 0 0 0 1px var(--dcs-accent), 0 0 0 3px var(--dcs-accent-haze);
  /* Transitions */
  --dcs-t-fast: 80ms ease-out;
  --dcs-t: 140ms ease-out;
  --dcs-t-slow: 240ms cubic-bezier(.2,.7,.2,1);
}

/* Density modes */
/* Density modes — override the spacing + size tokens directly so the
   attribute applied to any container reshapes everything inside. The
   "comfortable" rule resets back to defaults so a demo wrapper can
   opt out of a global Tweaks density. */
[data-dcs-density=comfortable] {
  --dcs-u: 4px;
  --dcs-s-1: 2px;
  --dcs-s-2: 4px;
  --dcs-s-3: 6px;
  --dcs-s-4: 8px;
  --dcs-s-5: 12px;
  --dcs-s-6: 16px;
  --dcs-s-7: 20px;
  --dcs-s-8: 28px;
  --dcs-h-sm: 18px;
  --dcs-h: 24px;
  --dcs-h-lg: 30px;
  --dcs-h-xl: 40px;
  --dcs-h-in: 22px;
}

[data-dcs-density=compact] {
  --dcs-u: 3px;
  --dcs-s-1: 1px;
  --dcs-s-2: 2px;
  --dcs-s-3: 4px;
  --dcs-s-4: 6px;
  --dcs-s-5: 9px;
  --dcs-s-6: 12px;
  --dcs-s-7: 16px;
  --dcs-s-8: 22px;
  --dcs-h-sm: 16px;
  --dcs-h: 20px;
  --dcs-h-lg: 26px;
  --dcs-h-xl: 34px;
  --dcs-h-in: 20px;
}

[data-dcs-density=spacious] {
  --dcs-u: 5px;
  --dcs-s-1: 4px;
  --dcs-s-2: 8px;
  --dcs-s-3: 12px;
  --dcs-s-4: 16px;
  --dcs-s-5: 20px;
  --dcs-s-6: 26px;
  --dcs-s-7: 32px;
  --dcs-s-8: 44px;
  --dcs-h-sm: 22px;
  --dcs-h: 28px;
  --dcs-h-lg: 36px;
  --dcs-h-xl: 46px;
  --dcs-h-in: 24px;
}

/* Radius modes */
[data-dcs-radius=sharp] {
  --dcs-r-1: 0;
  --dcs-r-2: 0;
  --dcs-r-3: 0;
  --dcs-r-4: 0;
}

[data-dcs-radius=round] {
  --dcs-r-1: 4px;
  --dcs-r-2: 6px;
  --dcs-r-3: 10px;
  --dcs-r-4: 14px;
}

/* Accent recipes (set by Tweaks panel) */
[data-dcs-accent=cyan] {
  --dcs-accent: #00b8d4;
  --dcs-accent-hi:#22d4ee;
  --dcs-accent-lo:#0098b0;
  --dcs-accent-dim: rgba(0,184,212,.18);
  --dcs-accent-haze: rgba(0,184,212,.35);
}

[data-dcs-accent=teal] {
  --dcs-accent: #2f9c93;
  --dcs-accent-hi:#3fb8ad;
  --dcs-accent-lo:#247b73;
  --dcs-accent-dim: rgba(47,156,147,.18);
  --dcs-accent-haze: rgba(47,156,147,.35);
}

[data-dcs-accent=orange] {
  --dcs-accent: #ff8a3a;
  --dcs-accent-hi:#ffa566;
  --dcs-accent-lo:#e07024;
  --dcs-accent-dim: rgba(255,138,58,.18);
  --dcs-accent-haze: rgba(255,138,58,.35);
}

[data-dcs-accent=violet] {
  --dcs-accent: #8b6dff;
  --dcs-accent-hi:#a48cff;
  --dcs-accent-lo:#6f4eea;
  --dcs-accent-dim: rgba(139,109,255,.18);
  --dcs-accent-haze: rgba(139,109,255,.35);
}

[data-dcs-accent=purple] {
  --dcs-accent: #8466cf;
  --dcs-accent-hi:#9d83df;
  --dcs-accent-lo:#6a4eb3;
  --dcs-accent-dim: rgba(132,102,207,.18);
  --dcs-accent-haze: rgba(132,102,207,.35);
}

[data-dcs-accent=green] {
  --dcs-accent: #3dd68a;
  --dcs-accent-hi:#5be8a0;
  --dcs-accent-lo:#2bb872;
  --dcs-accent-dim: rgba(61,214,138,.18);
  --dcs-accent-haze: rgba(61,214,138,.35);
}

/* Darkness modes */
[data-dcs-dark=darker] {
  --dcs-bg-app: #14161c;
  --dcs-bg: #1d2028;
  --dcs-surface-1: #252934;
  --dcs-surface-2: #2e323e;
  --dcs-surface-3: #383d4a;
  --dcs-well: #14161c;
  --dcs-stage: #3a4150;
}

[data-dcs-dark=lighter] {
  --dcs-bg-app: #2c303a;
  --dcs-bg: #363b47;
  --dcs-surface-1: #404654;
  --dcs-surface-2: #4a5161;
  --dcs-surface-3: #555d6e;
  --dcs-well: #22252e; /* darker than lighter-mode bg-app */
  --dcs-stage: #5e6577;
}

/* ------------------------------------------------------------
   2 · RESET (scoped)
   ------------------------------------------------------------ */
.dcs, .dcs * {
  box-sizing: border-box;
}

.dcs {
  font-family: var(--dcs-font);
  font-size: var(--dcs-fs);
  line-height: var(--dcs-lh);
  color: var(--dcs-text);
  background: var(--dcs-bg);
  /* Scoped here (not on :root) so the dark scheme — and dark native
     scrollbars/controls — never leak into a light host page. */
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.dcs button, .dcs input, .dcs select, .dcs textarea {
  font: inherit;
  color: inherit;
}

/* ------------------------------------------------------------
   3 · PANELS — flat by default, no border / no shadow
   ------------------------------------------------------------ */
.dcs-panel {
  background: var(--dcs-bg);
  border-radius: var(--dcs-r-2);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dcs-panel--raised {
  background: var(--dcs-surface-1);
}

.dcs-panel--bordered {
  border: 1px solid var(--dcs-line);
}

.dcs-panel__header {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-3);
  height: var(--dcs-h);
  padding: 0 var(--dcs-s-4);
  background: var(--dcs-surface-1);
  border-bottom: 1px solid var(--dcs-line);
  border-top-left-radius: var(--dcs-r-2);
  border-top-right-radius: var(--dcs-r-2);
  font-size: var(--dcs-fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--dcs-text-dim);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dcs-panel__header--active {
  color: var(--dcs-text);
}

.dcs-panel__title {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-2);
  flex: 1;
  min-width: 0;
}

.dcs-panel__title svg {
  color: var(--dcs-text-mute);
}

.dcs-panel__tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

.dcs-panel__close {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--dcs-s-2);
  color: var(--dcs-text-mute);
  background: transparent;
  border: none;
  border-radius: var(--dcs-r-1);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--dcs-t-fast), color var(--dcs-t-fast), background var(--dcs-t-fast);
}

.dcs-panel__close:hover {
  opacity: 1;
  color: var(--dcs-danger);
  background: rgba(239, 107, 107, 0.15);
}

.dcs-panel__body {
  padding: var(--dcs-s-5);
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.dcs-panel__body--pad-0 {
  padding: 0;
}

.dcs-panel__body--pad-sm {
  padding: var(--dcs-s-3);
}

.dcs-panel__footer {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-3);
  height: var(--dcs-h-sm);
  padding: 0 var(--dcs-s-4);
  background: var(--dcs-surface-1);
  border-top: 1px solid var(--dcs-line);
  color: var(--dcs-text-mute);
  font-size: var(--dcs-fs-xs);
  font-family: var(--dcs-font-mono);
}

/* Panel tab bar (Blender-ish) */
.dcs-tabs {
  display: flex;
  align-items: stretch;
  background: var(--dcs-surface-1);
  border-bottom: 1px solid var(--dcs-line);
  padding: 0 var(--dcs-s-3);
  gap: 2px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dcs-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--dcs-s-2);
  padding: 0 var(--dcs-s-4);
  height: calc(var(--dcs-h) - 2px);
  margin-top: 2px;
  font-size: var(--dcs-fs-sm);
  color: var(--dcs-text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-top-left-radius: var(--dcs-r-1);
  border-top-right-radius: var(--dcs-r-1);
  cursor: pointer;
  transition: background var(--dcs-t-fast), color var(--dcs-t-fast);
}

.dcs-tab:hover {
  background: var(--dcs-surface-2);
  color: var(--dcs-text);
}

.dcs-tab[aria-selected=true] {
  background: var(--dcs-bg);
  color: var(--dcs-text);
  border-color: var(--dcs-line);
  position: relative;
}

.dcs-tab[aria-selected=true]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--dcs-bg);
}

/* Tab panels: ensure `[hidden]` actually hides the panel even when its
   body sets `display: flex` (or grid) via a class — otherwise content
   from the inactive tab can bleed through under the active tab. Two
   attribute selectors give us specificity (0,2,0) which beats any
   single-class layout rule (0,1,0) without needing !important. */
[data-dcs-tabpanel][hidden] {
  display: none;
}

/* ------------------------------------------------------------
   4 · DOCK / SPLIT
   ------------------------------------------------------------ */
.dcs-dock {
  display: flex;
  background: var(--dcs-bg-app);
  min-height: 0;
  height: 100%;
}

.dcs-dock--v {
  flex-direction: column;
}

.dcs-dock > .dcs-panel {
  flex: 1;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
}

.dcs-splitter {
  flex: 0 0 1px;
  background: var(--dcs-line);
  cursor: col-resize;
  position: relative;
}

.dcs-dock--v > .dcs-splitter,
.dcs-splitter--h {
  cursor: row-resize;
  flex-basis: 1px;
}

/* The ::before is just a wider, invisible grab area — DCC splitters keep
   the resize cursor as the only affordance and avoid an accent flash as
   the pointer sweeps the screen. */
.dcs-splitter::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 0;
  bottom: 0;
  z-index: 2;
}

.dcs-dock--v > .dcs-splitter::before,
.dcs-splitter--h::before {
  left: 0;
  right: 0;
  top: -3px;
  bottom: -3px;
}

/* ------------------------------------------------------------
   5 · BUTTONS  — flat by default
   ------------------------------------------------------------ */
.dcs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dcs-s-2);
  height: var(--dcs-h);
  padding: 0 var(--dcs-s-5);
  font-size: var(--dcs-fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--dcs-text);
  background: var(--dcs-surface-1);
  border: 1px solid var(--dcs-line);
  border-radius: var(--dcs-r-2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  transition: background var(--dcs-t-fast), border-color var(--dcs-t-fast), color var(--dcs-t-fast);
}

.dcs-btn:hover {
  background: var(--dcs-surface-2);
  border-color: var(--dcs-line-strong);
}

.dcs-btn:active {
  background: var(--dcs-well);
  color: var(--dcs-text-dim);
}

.dcs-btn:focus-visible {
  outline: none;
  box-shadow: var(--dcs-ring);
}

.dcs-btn[disabled], .dcs-btn[aria-disabled=true] {
  opacity: 0.45;
  cursor: not-allowed;
}

.dcs-btn--primary {
  background: var(--dcs-accent);
  border-color: var(--dcs-accent-lo);
  color: #0a1220;
}

.dcs-btn--primary:hover {
  background: var(--dcs-accent-hi);
}

.dcs-btn--primary:active {
  background: var(--dcs-accent-lo);
  color: rgba(10, 18, 32, 0.85);
}

.dcs-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--dcs-text-dim);
}

.dcs-btn--ghost:hover {
  background: var(--dcs-surface-2);
  color: var(--dcs-text);
  border-color: transparent;
}

.dcs-btn--ghost:active {
  background: var(--dcs-surface-3);
}

.dcs-btn--danger {
  background: var(--dcs-danger);
  border-color: #c44;
  color: #2a0808;
}

.dcs-btn--danger:hover {
  background: #ff7a7a;
}

.dcs-btn--sm {
  height: var(--dcs-h-sm);
  padding: 0 var(--dcs-s-3);
  font-size: var(--dcs-fs-xs);
}

.dcs-btn--lg {
  height: var(--dcs-h-lg);
  padding: 0 var(--dcs-s-6);
  font-size: var(--dcs-fs-md);
}

.dcs-btn--icon {
  padding: 0;
  width: var(--dcs-h);
}

.dcs-btn--icon.dcs-btn--sm {
  width: var(--dcs-h-sm);
}

.dcs-btn--icon.dcs-btn--sm .dcs-icon {
  width: 12px;
  height: 12px;
}

.dcs-btn--icon.dcs-btn--lg {
  width: var(--dcs-h-lg);
}

.dcs-btn--icon.dcs-btn--lg .dcs-icon {
  width: 18px;
  height: 18px;
}

/* Selected / toggled — solid key colour with a dark icon, rounded
   (uniform across plain buttons, toolbars, button-groups, and floaters). */
.dcs-btn[aria-pressed=true] {
  background: var(--dcs-accent);
  border-color: transparent;
  color: #0a1220;
}

.dcs-btn[aria-pressed=true]:hover {
  background: var(--dcs-accent-hi);
}

/* Button group (segmented) — visible chassis so the grouping reads */
.dcs-btn-group {
  display: inline-flex;
  border-radius: var(--dcs-r-2);
  background: var(--dcs-well);
  padding: 2px;
  gap: 1px;
  border: 1px solid var(--dcs-line);
  align-items: center;
}

.dcs-btn-group .dcs-btn {
  border: none;
  border-radius: var(--dcs-r-1);
  background: transparent;
  height: calc(var(--dcs-h) - 6px);
  color: var(--dcs-text-dim);
  padding: 0 var(--dcs-s-3);
  min-width: calc(var(--dcs-h) - 6px);
}

.dcs-btn-group .dcs-btn:hover {
  background: var(--dcs-surface-2);
  color: var(--dcs-text);
}

.dcs-btn-group .dcs-btn[aria-pressed=true] {
  background: var(--dcs-accent);
  color: #0a1220;
  font-weight: 500;
}

.dcs-btn-group .dcs-btn[aria-pressed=true]:hover {
  background: var(--dcs-accent-hi);
}

/* ------------------------------------------------------------
   6 · INPUT — flat by default
   ------------------------------------------------------------ */
.dcs-input, .dcs-select, .dcs-textarea {
  display: inline-flex;
  align-items: center;
  height: var(--dcs-h-in);
  padding: 0 var(--dcs-s-3);
  font-size: var(--dcs-fs-sm);
  color: var(--dcs-text);
  background: var(--dcs-well);
  border: 1px solid var(--dcs-line);
  border-radius: var(--dcs-r-2);
  outline: none;
  transition: border-color var(--dcs-t-fast), box-shadow var(--dcs-t-fast);
  font-family: var(--dcs-font);
}

.dcs-textarea {
  height: auto;
  padding: var(--dcs-s-3);
  line-height: var(--dcs-lh);
  resize: vertical;
}

.dcs-input::-moz-placeholder {
  color: var(--dcs-text-mute);
}

.dcs-input::placeholder {
  color: var(--dcs-text-mute);
}

.dcs-input:hover, .dcs-select:hover, .dcs-textarea:hover {
  border-color: var(--dcs-line-strong);
}

.dcs-input:focus, .dcs-select:focus, .dcs-textarea:focus {
  border-color: var(--dcs-accent);
  box-shadow: 0 0 0 2px var(--dcs-accent-haze);
}

.dcs-input--num {
  font-family: var(--dcs-font-num);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}

/* ── Search input ──────────────────────────────────────────────
   A standard text input dressed as a search field: a leading
   magnifier icon (`<i class="di di-search">` inside) and a
   placeholder. The icon is absolutely positioned inside the
   wrapper so the input itself stays a stock `.dcs-input` — apps
   can use any of the input variants inside (compact, etc.).

   Markup:
     <div class="dcs-search">
       <i class="di di-search" aria-hidden="true"></i>
       <input class="dcs-input" type="search" placeholder="Search…">
     </div>
*/
.dcs-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.dcs-search > .di {
  position: absolute;
  left: var(--dcs-s-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--dcs-text-mute);
  pointer-events: none;
  font-size: 13px;
  line-height: 1;
}

.dcs-search > .dcs-input {
  padding-left: calc(var(--dcs-s-3) + 18px);
  width: 100%;
}

/* Enum dropdown trigger — a select-styled button that opens a .dcs-menu of
   options. The full form of a "choose one of N" enum; the segmented
   button-group is its shorthand for when the options fit inline. */
.dcs-select--btn {
  gap: var(--dcs-s-2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--dcs-text);
}

.dcs-select--btn .dcs-select__label {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dcs-select--btn .dcs-select__caret {
  flex: 0 0 auto;
  color: var(--dcs-text-mute);
  margin-right: calc(var(--dcs-s-1) * -1);
}

.dcs-select--btn:hover {
  border-color: var(--dcs-line-strong);
}

.dcs-select--btn.dcs-select--open,
.dcs-select--btn[aria-expanded=true] {
  border-color: var(--dcs-accent);
  box-shadow: 0 0 0 2px var(--dcs-accent-haze);
}

.dcs-select--btn.dcs-select--open .dcs-select__caret,
.dcs-select--btn[aria-expanded=true] .dcs-select__caret {
  color: var(--dcs-accent);
}

/* ── Field row primitive ──────────────────────────────────────────
   `.dcs-field` is one label-plus-control row. On its own it's just a
   flex row — to get even, opinionated spacing across many rows, wrap
   them in one of the two form layouts below: `.dcs-form` (general) or
   `.dcs-props` (inspector). */
.dcs-field {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-3);
  min-height: var(--dcs-h);
}

.dcs-field__label {
  flex: 0 0 96px;
  font-size: var(--dcs-fs-sm);
  color: var(--dcs-text-dim);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dcs-field--row > * {
  flex: 1;
}

/* ── Form layouts: .dcs-form vs .dcs-props ─────────────────────────
   Two selectors decide how a stack of `.dcs-field` rows looks. Pick
   one based on context — they are mutually exclusive.

   `.dcs-form`   — DIALOG / MODAL layout. Use this in dialog boxes,
                   modal-like panels, preference sheets, signup forms,
                   wizards — anywhere the user is filling in a focused
                   set of values rather than tweaking live channels.
                   Labels are **right-justified** against a fixed-width
                   column; controls keep their **natural width**; bare
                   buttons self-center; a `.dcs-form__actions` footer
                   right-aligns grouped actions under the control column.

   `.dcs-props`  — INSPECTOR layout. Use this for property inspectors,
                   channel editors, attribute lists, node settings —
                   anywhere a live object's channels are exposed for
                   continuous editing. Labels are **left-justified**
                   against a fixed-width column; controls (including
                   bare buttons) **stretch to fill** the row so a tall
                   stack reads as even, same-size channel rows.

   Inline checkbox-with-text (check left, label right) — just place a
   bare `.dcs-check` outside a form/props stack; that's its default.

   Tune label-column width per instance with `--dcs-form-label-w` or
   `--dcs-props-label-w`. */
.dcs-form {
  /* In dialog mode the centerline IS the view's centerline — labels
     right-justify up to 50%, controls start from 50%. This differs
     from `.dcs-props` (inspector), where the label column is a fixed
     pixel width tuned to the longest expected prompt. Override
     `--dcs-form-label-w` per-instance if you need a different split. */
  --dcs-form-label-w: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--dcs-s-3);
}

.dcs-form > .dcs-field {
  min-height: var(--dcs-h-in);
}

.dcs-form > .dcs-field > .dcs-field__label {
  flex: 0 0 var(--dcs-form-label-w);
  text-align: right;
}

.dcs-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--dcs-s-3);
  padding-left: calc(var(--dcs-form-label-w) + var(--dcs-s-3));
}

/* A bare button (or button group) dropped directly into a `.dcs-form`
   stack keeps its natural size and self-centers in the form column —
   matches the "controls keep natural width" rule above. For grouped,
   right-aligned action rows use `.dcs-form__actions`. */
.dcs-form > .dcs-btn,
.dcs-form > .dcs-btn-group {
  align-self: center;
}

/* A `.dcs-btn-row` is a paired-button row that adapts to its stack:
     • in `.dcs-form` (dialog): buttons sit centered at natural width
       next to each other.
     • in `.dcs-props` (inspector): buttons split the row evenly via
       `flex: 1` — two buttons cut the row in half, three split it
       into thirds, etc., matching the channel-widget contract.
   Use this when you want Cancel/Apply, Yes/No, or any paired actions
   without picking the right-aligned `.dcs-form__actions` footer. */
.dcs-btn-row {
  display: flex;
  gap: var(--dcs-s-3);
}

.dcs-form > .dcs-btn-row {
  justify-content: center;
}

.dcs-props > .dcs-btn-row > .dcs-btn,
.dcs-props > .dcs-btn-row > .dcs-btn-group {
  flex: 1;
  min-width: 0;
  height: var(--dcs-h-in);
}

/* ── Channel-widget contract ──────────────────────────────────────
   Inside `.dcs-props`, each row is locked to --dcs-h-in tall so the
   whole stack reads as even, same-size rows. A "channel widget" is
   any control that obeys two rules:
     1. it's no taller than the row (--dcs-h-in), and
     2. if it should span the row, it stretches (flex: 1).
   Built-ins listed below already comply; a custom widget opts in by
   adding `.dcs-field__fill` (to span) or simply staying short (to
   sit LEFT-justified in the channel column, like a switch/check).
   The set is open — anything that follows the contract keeps the
   rhythm. */
.dcs-props {
  --dcs-props-label-w: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--dcs-s-3);
}

.dcs-props > .dcs-field {
  height: var(--dcs-h-in);
  min-height: var(--dcs-h-in);
  /* No `justify-content` — defaults to flex-start so non-stretched
     widgets (Check, Switch, fixed-width chip) sit at the LEFT edge
     of the channel column, aligned with the start of stretched
     controls above/below. Stretched widgets fill the column via
     `flex: 1` below. */
}

.dcs-props > .dcs-field > .dcs-field__label {
  flex: 0 0 var(--dcs-props-label-w);
  text-align: left;
}

/* Spanning channel widgets: fill the row after the label and collapse
   to one uniform height (so the 24px-tall defaults — slider, swatch,
   button-group — match the 22px text/number fields when stacked).
   `.dcs-field__fill` is the opt-in escape hatch for custom widgets. */
.dcs-props > .dcs-field > .dcs-slider,
.dcs-props > .dcs-field > .dcs-input,
.dcs-props > .dcs-field > .dcs-select,
.dcs-props > .dcs-field > .dcs-combo,
.dcs-props > .dcs-field > .dcs-swatch,
.dcs-props > .dcs-field > .dcs-colorfield,
.dcs-props > .dcs-field > .dcs-btn-group,
.dcs-props > .dcs-field > .dcs-field__fill {
  flex: 1;
  min-width: 0;
  height: var(--dcs-h-in);
}

.dcs-props > .dcs-field > .dcs-btn-group {
  /* Never shrink a button-group past its natural content size — Local /
     Global / Local-Global rows get illegible when they squeeze under
     an icon-only floor. Keeps flex:1 so the group still stretches to
     fill the channel column when there's room. */
  min-width: -moz-max-content;
  min-width: max-content;
}

.dcs-props > .dcs-field > .dcs-btn-group .dcs-btn {
  height: calc(var(--dcs-h-in) - 6px);
  min-width: calc(var(--dcs-h-in) - 6px);
  padding: 0 var(--dcs-s-3);
}

/* ── Vector row primitive ──────────────────────────────────────
   `.dcs-vec` is a flex row of equal-width controls — typically the
   X/Y/Z numeric editors of a Location / Rotation / Scale channel.
   Children share row width evenly but won't shrink below
   `--dcs-xform-minwidth` (default 48px) so labels stay readable; below
   that floor the row overflows rather than crushing the values.
   Drops into a `.dcs-props > .dcs-field` slot and stretches to fill
   the channel column.

   Combos inside a `.dcs-vec` drop the range-fill bar — XYZ values
   are coordinates, not a range, so a left-to-right fill would be
   meaningless (and visually confused with a slider). */
.dcs-vec {
  --dcs-xform-minwidth: 72px;
  display: flex;
  gap: var(--dcs-s-1);
  min-width: 0;
}

.dcs-vec > * {
  flex: 1 1 0;
  min-width: var(--dcs-xform-minwidth);
  min-height: var(--dcs-h-in); /* never collapse to thin horizontal lines */
}

.dcs-vec > .dcs-combo .dcs-combo__fill {
  display: none;
}

/* Override the stock `.dcs-combo { min-width: 96px }` so the combo
   inside a vec respects the vec's per-item floor (`--dcs-xform-minwidth`).
   Without this, combos refuse to shrink past 96px and the JS observer
   can never observe a constrained width — the synchronized flip
   threshold is meaningless if the children block the shrink. */
.dcs-vec > .dcs-combo {
  min-width: var(--dcs-xform-minwidth);
}

.dcs-props > .dcs-field > .dcs-vec {
  flex: 1;
  min-width: 0;
}

/* Field hosting a vec — anchor the prompt to the TOP of the row so a
   stacked vec keeps its label at the upper-left where the eye lands. */
.dcs-field:has(> .dcs-vec) {
  align-items: flex-start;
}

.dcs-field:has(> .dcs-vec) > .dcs-field__label {
  padding-top: 3px;
}

/* When the vec can't fit its N children at `--dcs-xform-minwidth` apiece, JS
   (initVecLayout, ResizeObserver-driven) toggles `.dcs-vec--stacked`.
   The flip threshold is computed from the SAME `--dcs-xform-minwidth` that
   sets the horizontal floor, so changing the floor automatically
   adjusts the flip point — they stay synchronized. */
.dcs-vec--stacked {
  flex-direction: column;
}

.dcs-vec--stacked > * {
  min-width: 0;
  width: 100%;
}

/* Field gets `height: auto` so it can grow tall when its vec stacks
   three combos vertically — otherwise the fixed channel-row height
   (var(--dcs-h-in)) collides with the per-combo min-height and the
   row content gets crushed. */
.dcs-props > .dcs-field:has(> .dcs-vec.dcs-vec--stacked) {
  height: auto;
}

.dcs-props > .dcs-field:has(> .dcs-vec) {
  min-height: var(--dcs-h-in);
}

/* ── Standalone note / info / warning row ────────────────────────
   A `.dcs-note` is a full-width text strip inside a form/props stack
   — no prompt, no editor, just text spanning the row. Use it for
   section hints, derived/status values, info messages, or warnings
   that sit *between* the editable channels rather than next to one.
   Variants colorize the text via semantic tokens; pair with a small
   `<Icon>` for an at-a-glance affordance. */
.dcs-note {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-2);
  font-size: var(--dcs-fs-sm);
  line-height: var(--dcs-lh);
  color: var(--dcs-text-dim); /* match `.dcs-field__label` prompts */
  font-weight: 400;
  min-width: 0;
}

.dcs-note--mono {
  font-family: var(--dcs-font-num);
  font-variant-numeric: tabular-nums lining-nums;
}

.dcs-note--mute {
  color: var(--dcs-text-mute);
}

.dcs-note--info {
  color: var(--dcs-info);
}

.dcs-note--warn {
  color: var(--dcs-warn);
}

.dcs-note--ok {
  color: var(--dcs-ok);
}

.dcs-note--danger {
  color: var(--dcs-danger);
}

/* When dropped directly into a form/props stack, the note spans the
   full row width (no prompt, no channel column) and stays at one
   channel-row of height for a single line. Text is plain — normal
   weight, no title hierarchy, no chrome — so it reads as a quiet
   line in the dialog rather than a callout. In `.dcs-form` (dialog)
   the text centers like a dialog blurb; in `.dcs-props` (inspector)
   it stays left-aligned with the rest of the channel column. */
.dcs-form > .dcs-note,
.dcs-props > .dcs-note {
  width: 100%;
  min-height: var(--dcs-h-in);
  font-weight: 400;
}

.dcs-form > .dcs-note {
  justify-content: center;
  text-align: center;
}

/* `.dcs-alert` dropped into a form/props stack — the heavier sibling
   of `.dcs-note`. Restyled to a soft "callout" box: rounded rect,
   semantic-tinted background, matching tinted border, icon on the
   left, plain text on the right. The default `.dcs-alert` accent
   stripe + raised-surface chrome (its standalone-panel look) is
   dropped here — inline in a dialog, that visual weight fights the
   rest of the form. */
.dcs-form > .dcs-alert,
.dcs-props > .dcs-alert {
  width: 100%;
  padding: var(--dcs-s-3) var(--dcs-s-4);
  border: 1px solid var(--dcs-accent-haze);
  background: var(--dcs-accent-dim);
  border-radius: var(--dcs-r-2);
  align-items: center;
  gap: var(--dcs-s-3);
  font-weight: 400;
}

.dcs-form > .dcs-alert.dcs-alert--ok,
.dcs-props > .dcs-alert.dcs-alert--ok {
  background: rgba(78, 209, 138, 0.12);
  border-color: rgba(78, 209, 138, 0.35);
}

.dcs-form > .dcs-alert.dcs-alert--warn,
.dcs-props > .dcs-alert.dcs-alert--warn {
  background: rgba(242, 177, 74, 0.12);
  border-color: rgba(242, 177, 74, 0.35);
}

.dcs-form > .dcs-alert.dcs-alert--danger,
.dcs-props > .dcs-alert.dcs-alert--danger {
  background: rgba(239, 107, 107, 0.12);
  border-color: rgba(239, 107, 107, 0.35);
}

/* Inline-callout text: full-strength color, normal weight, no nested
   title/msg distinction. The body can be a bare string — the existing
   `.dcs-alert__title` / `.dcs-alert__msg` two-tier structure is
   collapsed so a single line reads cleanly. */
.dcs-form > .dcs-alert .dcs-alert__title,
.dcs-props > .dcs-alert .dcs-alert__title {
  font-weight: 400;
  margin: 0;
}

.dcs-form > .dcs-alert .dcs-alert__msg,
.dcs-props > .dcs-alert .dcs-alert__msg {
  color: var(--dcs-text);
}

/* Textareas — the "larger edit box" — default to two channel rows tall
   in both form and inspector contexts (so a freshly-dropped textarea
   reads as the multi-line variant of an input, not a one-liner that
   happens to scroll). The row holding it expands vertically, and the
   label aligns to the top of the textarea so it doesn't float in the
   middle of a tall block.

   Resize affordance follows context: in `.dcs-form` the textarea has
   natural width so it resizes BOTH ways; in `.dcs-props` the textarea
   stretches to fill the channel column (`flex: 1`) so only vertical
   resize is meaningful — horizontal resize would fight the layout. */
.dcs-form > .dcs-field > .dcs-textarea,
.dcs-props > .dcs-field > .dcs-textarea {
  height: calc(var(--dcs-h-in) * 2 + var(--dcs-s-3));
  min-height: calc(var(--dcs-h-in) * 2 + var(--dcs-s-3));
}

.dcs-form > .dcs-field > .dcs-textarea {
  resize: both;
}

.dcs-props > .dcs-field > .dcs-textarea {
  flex: 1;
  min-width: 0;
  resize: vertical;
}

/* Row containing a textarea: lets the row grow vertically, drops the
   middle-centering (no point centering a short label against a tall
   box), and aligns the label's first line with the textarea's first
   line of text. The label uses normal line-height so its top edge
   matches the textarea's interior top padding (--dcs-s-3). */
.dcs-form > .dcs-field:has(.dcs-textarea),
.dcs-props > .dcs-field:has(.dcs-textarea) {
  height: auto;
  align-items: flex-start;
}

.dcs-form > .dcs-field:has(.dcs-textarea) > .dcs-field__label,
.dcs-props > .dcs-field:has(.dcs-textarea) > .dcs-field__label {
  padding-top: var(--dcs-s-3);
  line-height: var(--dcs-lh);
  /* Tall labels with a textarea should wrap, not ellipsis-clip — there
     is room for the wrap, and clipping looks worse than two short
     lines next to a multi-line edit box. */
  white-space: normal;
  text-overflow: clip;
}

/* ── List / Tree as a field control ──────────────────────────────
   Lists and trees are too tall and too "object-like" to share a row
   with a label the way a slider or input does. When a `.dcs-list` or
   `.dcs-tree` is the value side of a `.dcs-field`, the row flips
   vertical: prompt sits ABOVE the list, list sits below as a sunken
   chrome'd well.
     • `.dcs-props` (inspector): list spans the full row width, label
       left-aligned above it.
     • `.dcs-form` (dialog): list takes two-thirds width and centers
       under a centered label.
   Default height is four channel rows so an engineer dropping a list
   into a form doesn't have to size it. Adjust per-instance with the
   `--dcs-list-h` custom property. */
.dcs-form > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table),
.dcs-props > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table) {
  --dcs-list-h: calc(var(--dcs-h) * 4);
  flex-direction: column;
  align-items: flex-start;
  height: auto;
  min-height: 0;
  gap: var(--dcs-s-2);
}

/* In .dcs-form the entire prompt/list pair container is 66% wide and
   centered in the form. Inside that container, the prompt sits at
   top-left and the list fills the container's full width — so both
   align to the container's left edge, and the whole pair sits in
   the visual center of the form. */
.dcs-form > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table) {
  width: 66%;
  align-self: center;
}

.dcs-form > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table) > .dcs-field__label,
.dcs-props > .dcs-field:has(> .dcs-list, > .dcs-tree, > .dcs-table) > .dcs-field__label {
  flex: 0 0 auto;
  width: auto;
  text-align: left;
}

/* The list/tree/table fills the pair container's width — in .dcs-form
   that's 66% of the form, in .dcs-props that's 100% of the inspector. */
.dcs-form > .dcs-field > .dcs-list,
.dcs-form > .dcs-field > .dcs-tree,
.dcs-form > .dcs-field > .dcs-table,
.dcs-props > .dcs-field > .dcs-list,
.dcs-props > .dcs-field > .dcs-tree,
.dcs-props > .dcs-field > .dcs-table {
  width: 100%;
}

/* Shared chrome: sunken well + border + scrollable + default height.
   Tables need `display: block` to honour `overflow: auto` (default
   `display: table` ignores overflow); this loses native column
   auto-sizing — set `<th>`/`<td>` widths explicitly if needed. */
.dcs-form > .dcs-field > .dcs-list,
.dcs-form > .dcs-field > .dcs-tree,
.dcs-form > .dcs-field > .dcs-table,
.dcs-props > .dcs-field > .dcs-list,
.dcs-props > .dcs-field > .dcs-tree,
.dcs-props > .dcs-field > .dcs-table {
  height: var(--dcs-list-h);
  background: var(--dcs-well);
  border: 1px solid var(--dcs-line);
  border-radius: var(--dcs-r-2);
  overflow: auto;
}

.dcs-form > .dcs-field > .dcs-table,
.dcs-props > .dcs-field > .dcs-table {
  display: block;
}

/* A bare button (or button group) dropped directly into a `.dcs-props`
   stack — not wrapped in a `.dcs-field` — acts as a channel-sized
   widget: full row width, locked to row height. Stretch is the inspector
   contract. */
.dcs-props > .dcs-btn,
.dcs-props > .dcs-btn-group {
  width: 100%;
  height: var(--dcs-h-in);
}

.dcs-props > .dcs-btn-group .dcs-btn {
  height: calc(var(--dcs-h-in) - 6px);
  min-width: calc(var(--dcs-h-in) - 6px);
}

/* Link field — a channel widget that accepts a dragged asset/node (DnD).
   Dashed while empty, solid once linked; flips to accent/danger as a drop
   target. Sits at channel-row height so it stacks with the others. */
.dcs-linkfield {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--dcs-s-2);
  height: var(--dcs-h-in);
  padding: 0 var(--dcs-s-2);
  background: var(--dcs-well);
  border: 1px dashed var(--dcs-line-strong);
  border-radius: var(--dcs-r-2);
  color: var(--dcs-text-dim);
  font-size: var(--dcs-fs-sm);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dcs-linkfield--set {
  border-style: solid;
  color: var(--dcs-text);
}

.dcs-linkfield__empty {
  color: var(--dcs-text-mute);
  font-style: italic;
}

.dcs-linkfield.dcs-drop--valid {
  border-style: solid;
  border-color: var(--dcs-accent);
  background: var(--dcs-accent-dim);
  box-shadow: none;
}

.dcs-linkfield.dcs-drop--invalid {
  border-color: var(--dcs-danger);
  box-shadow: none;
}

/* ZBrush-style combo number/slider — flat by default */
.dcs-combo {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: var(--dcs-h-in);
  background: var(--dcs-well);
  border: 1px solid var(--dcs-line);
  border-radius: var(--dcs-r-2);
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  min-width: 96px;
  cursor: ew-resize;
}

.dcs-combo--sm {
  height: var(--dcs-h-sm);
  min-width: 56px;
}

.dcs-combo--sm .dcs-combo__label,
.dcs-combo--sm .dcs-combo__value {
  font-size: var(--dcs-fs-xs);
  padding: 0 var(--dcs-s-2);
}

.dcs-combo--lg {
  height: calc(var(--dcs-h-lg) - 2px);
  min-width: 120px;
}

.dcs-combo--lg .dcs-combo__label,
.dcs-combo--lg .dcs-combo__value {
  font-size: var(--dcs-fs-md);
  padding: 0 var(--dcs-s-4);
}

.dcs-combo__fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--fill, 50%);
  background: var(--dcs-accent);
  pointer-events: none;
  opacity: 0.7;
}

.dcs-combo__label, .dcs-combo__value {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0 var(--dcs-s-3);
  font-size: var(--dcs-fs-sm);
  font-family: var(--dcs-font-num);
  font-variant-numeric: tabular-nums lining-nums;
}

.dcs-combo__label {
  color: var(--dcs-text-mute);
  flex: 0 0 auto;
  min-width: 0;
  padding-right: var(--dcs-s-2);
}

.dcs-combo__value {
  color: var(--dcs-text);
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
  padding-right: var(--dcs-s-3);
}

/* Combo chevrons — hidden in flat mode (no fly-out animation), always-visible in 3D */
.dcs-combo__btn {
  display: none;
  width: 14px;
  align-items: center;
  justify-content: center;
  color: var(--dcs-text-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
}

.dcs-combo__btn:hover {
  color: var(--dcs-text);
  background: rgba(255, 255, 255, 0.04);
}

.dcs-combo:hover {
  border-color: var(--dcs-line-strong);
  background: var(--dcs-bg);
}

.dcs-combo:focus-within {
  border-color: var(--dcs-accent);
  box-shadow: 0 0 0 2px var(--dcs-accent-haze);
}

.dcs-combo--editing {
  cursor: text;
}

.dcs-combo--editing .dcs-combo__fill {
  opacity: 0;
}

.dcs-combo__edit {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--dcs-well);
  border: none;
  outline: none;
  padding: 0 var(--dcs-s-3);
  font-family: var(--dcs-font-mono);
  font-size: var(--dcs-fs-sm);
  color: var(--dcs-text);
  text-align: right;
}

/* ------------------------------------------------------------
   7 · SLIDER (DCC horizontal track + synth vertical)
   ------------------------------------------------------------ */
.dcs-slider {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--dcs-h);
  width: 100%;
  min-width: 80px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}

.dcs-slider__track {
  position: relative;
  height: 4px;
  width: 100%;
  background: var(--dcs-well);
  border: 1px solid var(--dcs-line);
  border-radius: 999px;
}

.dcs-slider__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--fill, 50%);
  background: linear-gradient(90deg, var(--dcs-accent-lo), var(--dcs-accent));
  border-radius: 999px;
}

.dcs-slider__thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: var(--fill, 50%);
  width: 12px;
  height: 12px;
  background: var(--dcs-surface-3);
  border: 1px solid var(--dcs-accent);
  border-radius: 50%;
  transition: transform var(--dcs-t-fast), background var(--dcs-t-fast);
}

.dcs-slider:hover .dcs-slider__thumb {
  transform: translate(-50%, -50%) scale(1.1);
}

.dcs-slider--active .dcs-slider__thumb,
.dcs-slider:focus-within .dcs-slider__thumb {
  border-color: var(--dcs-accent);
  box-shadow: 0 0 0 3px var(--dcs-accent-haze);
}

.dcs-slider__tick {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 10px;
  background: var(--dcs-text-mute);
  opacity: 0.4;
}

/* Vertical synth-style fader — flat by default */
.dcs-fader {
  position: relative;
  width: 28px;
  height: 140px;
  background: var(--dcs-well);
  border: 1px solid var(--dcs-line);
  border-radius: var(--dcs-r-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: ns-resize;
}

.dcs-fader__track {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--dcs-line-soft);
}

.dcs-fader__tick {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1px;
  background: var(--dcs-line-soft);
}

.dcs-fader__thumb {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: var(--pos, 50%);
  width: 22px;
  height: 8px;
  background: var(--dcs-surface-3);
  border: 1px solid var(--dcs-accent);
  border-radius: var(--dcs-r-1);
}

.dcs-fader__thumb::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 1px;
  background: var(--dcs-accent);
  transform: translateY(-0.5px);
}

/* Range slider (with center detent) */
.dcs-slider--bipolar .dcs-slider__fill {
  left: 50%;
  transform: translateX(0);
  width: calc(var(--fill, 0%));
  background: linear-gradient(90deg, var(--dcs-accent-lo), var(--dcs-accent));
}

.dcs-slider--bipolar .dcs-slider__fill[data-neg] {
  left: auto;
  right: 50%;
}

/* ------------------------------------------------------------
   8 · KNOB (synth) — flat by default
   ------------------------------------------------------------ */
.dcs-knob {
  position: relative;
  width: var(--knob-size, 56px);
  height: var(--knob-size, 56px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dcs-knob__ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dcs-knob__cap {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: var(--dcs-surface-2);
  border: 1px solid var(--dcs-line);
}

.dcs-knob__indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 38%;
  background: var(--dcs-accent);
  border-radius: 1px;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(var(--angle, 0deg));
}

.dcs-knob__label {
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--dcs-fs-xs);
  font-family: var(--dcs-font-mono);
  color: var(--dcs-text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dcs-knob__value {
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--dcs-fs-xs);
  font-family: var(--dcs-font-mono);
  color: var(--dcs-accent);
}

/* ------------------------------------------------------------
   9 · CHECKBOX / RADIO / SWITCH — flat by default
   ------------------------------------------------------------ */
.dcs-check {
  display: inline-flex;
  align-items: center;
  gap: var(--dcs-s-3);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: var(--dcs-fs-sm);
}

.dcs-check__box {
  width: 14px;
  height: 14px;
  background: var(--dcs-well);
  border: 1px solid var(--dcs-line-strong);
  border-radius: var(--dcs-r-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background var(--dcs-t-fast), color var(--dcs-t-fast), border-color var(--dcs-t-fast);
}

.dcs-check[aria-checked=true] .dcs-check__box {
  background: var(--dcs-accent);
  border-color: var(--dcs-accent-lo);
  color: #0a1220;
}

.dcs-check__box svg {
  width: 10px;
  height: 10px;
}

.dcs-check:hover .dcs-check__box {
  border-color: var(--dcs-accent);
}

.dcs-radio .dcs-check__box {
  border-radius: 50%;
}

.dcs-radio[aria-checked=true] .dcs-check__box {
  color: transparent;
  position: relative;
}

.dcs-radio[aria-checked=true] .dcs-check__box::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0a1220;
}

.dcs-switch {
  position: relative;
  width: 28px;
  height: 16px;
  background: var(--dcs-well);
  border: 1px solid var(--dcs-line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dcs-t-fast), border-color var(--dcs-t-fast);
}

.dcs-switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  background: var(--dcs-text-mute);
  border-radius: 50%;
  transition: transform var(--dcs-t), background var(--dcs-t-fast);
}

.dcs-switch[aria-checked=true] {
  background: var(--dcs-accent);
  border-color: var(--dcs-accent-lo);
}

.dcs-switch[aria-checked=true]::after {
  transform: translateX(12px);
  background: #0a1220;
}

/* ------------------------------------------------------------
   10 · BADGE / TAG / CHIP — solid only
   ------------------------------------------------------------ */
.dcs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--dcs-h-sm);
  padding: 0 var(--dcs-s-3);
  font-size: var(--dcs-fs-xs);
  font-weight: 600;
  font-family: var(--dcs-font);
  font-variant-numeric: tabular-nums lining-nums;
  background: var(--dcs-surface-2);
  border-radius: var(--dcs-r-1);
  color: var(--dcs-text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dcs-badge--accent {
  background: var(--dcs-accent);
  color: #0a1220;
}

.dcs-badge--ok {
  background: var(--dcs-ok);
  color: #06321d;
}

.dcs-badge--warn {
  background: var(--dcs-warn);
  color: #3a230a;
}

.dcs-badge--danger {
  background: var(--dcs-danger);
  color: #380e0e;
}

.dcs-badge--soft {
  background: var(--dcs-bg);
  color: var(--dcs-text-dim);
}

.dcs-badge--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

/* ------------------------------------------------------------
   11 · KBD
   ------------------------------------------------------------ */
.dcs-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dcs-h-sm);
  height: var(--dcs-h-sm);
  padding: 0 var(--dcs-s-3);
  font-family: var(--dcs-font-mono);
  font-size: var(--dcs-fs-xs);
  background: var(--dcs-surface-1);
  border: 1px solid var(--dcs-line);
  border-bottom-width: 2px;
  border-radius: var(--dcs-r-1);
  color: var(--dcs-text-dim);
}

/* ------------------------------------------------------------
   12 · ALERT
   ------------------------------------------------------------ */
.dcs-alert {
  display: flex;
  gap: var(--dcs-s-4);
  padding: var(--dcs-s-4) var(--dcs-s-5);
  background: var(--dcs-surface-1);
  border: 1px solid var(--dcs-line);
  border-left: 3px solid var(--dcs-accent);
  border-radius: var(--dcs-r-2);
  font-size: var(--dcs-fs-sm);
  align-items: flex-start;
}

.dcs-alert--ok {
  border-left-color: var(--dcs-ok);
}

.dcs-alert--warn {
  border-left-color: var(--dcs-warn);
}

.dcs-alert--danger {
  border-left-color: var(--dcs-danger);
}

.dcs-alert__icon {
  color: var(--dcs-accent);
  flex: 0 0 auto;
}

.dcs-alert--ok .dcs-alert__icon {
  color: var(--dcs-ok);
}

.dcs-alert--warn .dcs-alert__icon {
  color: var(--dcs-warn);
}

.dcs-alert--danger .dcs-alert__icon {
  color: var(--dcs-danger);
}

.dcs-alert__body {
  flex: 1;
}

.dcs-alert__title {
  color: var(--dcs-text);
  font-weight: 500;
  margin-bottom: 2px;
}

/* Amber-on-dark code chips suit the dark DCC theme — scope them to the .dcs
   context so alerts reused as light docs callouts fall back to the page's
   own (softer) inline-code style instead. */
.dcs .dcs-alert code,
.dcs .dcs-alert__msg code {
  font-family: var(--dcs-font-mono);
  font-size: 0.92em;
  padding: 1px 6px;
  background: var(--dcs-well);
  border-radius: var(--dcs-r-1);
  color: var(--dcs-warn);
  border: none;
}

.dcs-alert__msg {
  color: var(--dcs-text-dim);
}

/* ------------------------------------------------------------
   13 · MODAL
   ------------------------------------------------------------ */
.dcs-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

/* decius.js hides modals with the [hidden] attribute; the display above
   would otherwise win over the UA [hidden] rule. */
.dcs-modal-backdrop[hidden] {
  display: none;
}

.dcs-modal {
  background: var(--dcs-bg);
  border: 1px solid var(--dcs-line-soft);
  border-radius: var(--dcs-r-3);
  box-shadow: var(--dcs-shadow-pop);
  min-width: 360px;
  max-width: 80vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dcs-modal__header {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-3);
  height: var(--dcs-h-lg);
  padding: 0 var(--dcs-s-5);
  background: linear-gradient(180deg, var(--dcs-surface-2), var(--dcs-surface-1));
  border-bottom: 1px solid var(--dcs-line);
  font-size: var(--dcs-fs-md);
  font-weight: 500;
}

.dcs-modal__body {
  padding: var(--dcs-s-6);
  font-size: var(--dcs-fs-sm);
}

.dcs-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--dcs-s-3);
  padding: var(--dcs-s-4) var(--dcs-s-5);
  background: var(--dcs-surface-1);
  border-top: 1px solid var(--dcs-line);
}

/* ------------------------------------------------------------
   14 · TREE / TABLE / LIST
   ------------------------------------------------------------ */
/* A list is a tree without folding — same row metrics, hover, selection,
   no per-row rules, no container chrome. Just a plain stack like .dcs-tree. */
.dcs-list {
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Lists and trees are the same primitive — identical row metrics, hover, and
   selection. A tree row just adds depth indent + a chevron. Both are
   density-driven (height = --dcs-h), so sm/md/lg read clearly and match. */
.dcs-list__item,
.dcs-tree__row {
  display: flex;
  align-items: center;
  position: relative; /* drop-indicator lines hang off ::before/::after */
  height: var(--dcs-h);
  /* .dcs-list is a flex column; without this its rows shrink below --dcs-h
     when the list overflows/scrolls, breaking parity with tree rows (which
     live in a plain block). Lock both to exactly --dcs-h. */
  flex: 0 0 var(--dcs-h);
  box-sizing: border-box;
  font-size: var(--dcs-fs-sm);
  color: var(--dcs-text-dim);
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Drag-to-reorder: grab affordance + a 2px accent drop-indicator line
   (before/after a row) or an inset highlight for drop-into (reparent). */
.dcs-list__item--draggable, .dcs-tree__row--draggable {
  cursor: grab;
}

.dcs-list__item--draggable:active, .dcs-tree__row--draggable:active {
  cursor: grabbing;
}

.dcs-list__item--drop-before::before, .dcs-tree__row--drop-before::before,
.dcs-list__item--drop-after::after, .dcs-tree__row--drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--dcs-accent);
  z-index: 3;
  pointer-events: none;
}

.dcs-list__item--drop-before::before, .dcs-tree__row--drop-before::before {
  top: -1px;
}

.dcs-list__item--drop-after::after, .dcs-tree__row--drop-after::after {
  bottom: -1px;
}

.dcs-list__item--drop-into, .dcs-tree__row--drop-into {
  background: var(--dcs-accent-dim);
  box-shadow: inset 0 0 0 1px var(--dcs-accent);
}

/* Typed drop-target affordance (DnD framework) — a target the dragged type
   is valid for vs one it isn't. Applied by useDrop / DropZone / data-dcs-drop. */
.dcs-drop--valid {
  box-shadow: inset 0 0 0 2px var(--dcs-accent);
}

.dcs-drop--invalid {
  box-shadow: inset 0 0 0 2px var(--dcs-danger);
  cursor: no-drop;
}

/* No per-line rule — matches the tree's left inset so the two read alike. */
.dcs-list__item {
  gap: var(--dcs-s-2);
  padding: 0 var(--dcs-s-4) 0 var(--dcs-s-2);
}

.dcs-tree {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dcs-tree__row {
  gap: 2px;
  padding-left: calc(var(--dcs-s-2) + var(--depth, 0) * 14px);
  padding-right: var(--dcs-s-4);
}

.dcs-list__item:hover,
.dcs-tree__row:hover {
  background: var(--dcs-surface-1);
  color: var(--dcs-text);
}

/* Collapsing a tree branch hides descendant rows via `[hidden]`. Override
   the default class-driven `display: flex` so the hidden state wins. */
.dcs-list__item[hidden],
.dcs-tree__row[hidden] {
  display: none;
}

.dcs-list__item[aria-selected=true],
.dcs-tree__row[aria-selected=true] {
  background: var(--dcs-accent-dim);
  color: var(--dcs-text);
  box-shadow: inset 2px 0 0 var(--dcs-accent);
}

.dcs-tree__chevron {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dcs-text-mute);
  transition: transform var(--dcs-t-fast);
}

.dcs-tree__chevron--open {
  transform: rotate(90deg);
}

.dcs-tree__icon {
  width: 14px;
  height: 14px;
  color: var(--dcs-text-mute);
  flex: 0 0 auto;
}

.dcs-tree__row[aria-selected=true] .dcs-tree__icon {
  color: var(--dcs-accent);
}

.dcs-tree__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dcs-tree__meta {
  color: var(--dcs-text-mute);
  font-family: var(--dcs-font-mono);
  font-size: var(--dcs-fs-xs);
}

.dcs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dcs-fs-sm);
  background: var(--dcs-bg);
}

.dcs-table th {
  text-align: left;
  font-weight: 500;
  font-size: var(--dcs-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dcs-text-mute);
  padding: var(--dcs-s-3) var(--dcs-s-4);
  background: var(--dcs-surface-1);
  border-bottom: 1px solid var(--dcs-line);
  position: sticky;
  top: 0;
}

.dcs-table td {
  padding: var(--dcs-s-3) var(--dcs-s-4);
  border-bottom: 1px solid var(--dcs-line-soft);
  color: var(--dcs-text-dim);
}

.dcs-table tbody tr:hover td {
  background: var(--dcs-surface-1);
  color: var(--dcs-text);
}

.dcs-table tbody tr[aria-selected=true] td {
  background: var(--dcs-accent-dim);
  color: var(--dcs-text);
}

.dcs-table--mono td:nth-child(n+2) {
  font-family: var(--dcs-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   15 · TOOLBAR
   One uniform toolbar: embedded under a menu bar or floating as an
   overlay in the content view; horizontal or vertical; sm / md / lg.
   Selected tools show a solid accent background everywhere.
   ------------------------------------------------------------ */
.dcs-toolbar {
  --tb-btn: var(--dcs-h); /* size of each tool button */
  display: flex;
  align-items: center;
  gap: var(--dcs-s-2);
  height: var(--dcs-h-lg);
  padding: 0 var(--dcs-s-3);
  background: var(--dcs-surface-1);
  border: 1px solid var(--dcs-line);
  border-radius: var(--dcs-r-2);
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dcs-toolbar--sm {
  --tb-btn: var(--dcs-h-sm);
  height: var(--dcs-h);
}

.dcs-toolbar--lg {
  --tb-btn: var(--dcs-h-lg);
  height: var(--dcs-h-xl);
}

/* Uniform tool-button sizing, regardless of per-button size props. */
.dcs-toolbar .dcs-btn {
  height: var(--tb-btn);
}

.dcs-toolbar .dcs-btn--icon {
  width: var(--tb-btn);
  padding: 0;
}

.dcs-toolbar .dcs-btn-group {
  height: var(--tb-btn);
  align-self: center;
}

.dcs-toolbar .dcs-btn-group .dcs-btn {
  height: calc(var(--tb-btn) - 6px);
  min-width: calc(var(--tb-btn) - 6px);
}

/* Selected tool — solid key colour (matches button-groups + floaters). */
.dcs-toolbar .dcs-btn[aria-pressed=true] {
  background: var(--dcs-accent);
  color: #0a1220;
  border-color: transparent;
}

.dcs-toolbar .dcs-btn[aria-pressed=true]:hover {
  background: var(--dcs-accent-hi);
}

.dcs-toolbar__sep {
  width: 1px;
  height: 60%;
  background: var(--dcs-line);
  margin: 0 var(--dcs-s-2);
  flex: 0 0 1px;
}

.dcs-toolbar__spacer {
  flex: 1;
}

/* Vertical toolbar (rail). */
.dcs-toolbar--v {
  flex-direction: column;
  height: auto;
  width: var(--dcs-h-lg);
  padding: var(--dcs-s-3) 0;
}

.dcs-toolbar--v.dcs-toolbar--sm {
  width: var(--dcs-h);
}

.dcs-toolbar--v.dcs-toolbar--lg {
  width: var(--dcs-h-xl);
}

.dcs-toolbar--v .dcs-toolbar__sep {
  width: 60%;
  height: 1px;
  margin: var(--dcs-s-2) 0;
}

/* Floating overlay — same toolbar, dropped over the content view. */
.dcs-toolbar--floating {
  border-color: var(--dcs-line-soft);
  box-shadow: var(--dcs-shadow-3);
}

/* ------------------------------------------------------------
   16 · TOOLTIP (CSS hover)
   ------------------------------------------------------------ */
.dcs-tooltip {
  position: relative;
}

.dcs-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #0c0d12;
  color: var(--dcs-text);
  font-size: var(--dcs-fs-xs);
  padding: 3px 6px;
  border-radius: var(--dcs-r-1);
  border: 1px solid var(--dcs-line-soft);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dcs-t-fast) 200ms;
  z-index: 50;
}

.dcs-tooltip:hover::after {
  opacity: 1;
}

/* ------------------------------------------------------------
   17 · COLOR SWATCH / PICKER
   ------------------------------------------------------------ */
.dcs-swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--dcs-s-2);
  height: var(--dcs-h);
  padding: 2px;
  padding-right: var(--dcs-s-3);
  background: var(--dcs-well);
  border: 1px solid var(--dcs-line);
  border-radius: var(--dcs-r-2);
  cursor: pointer;
  font-family: var(--dcs-font-mono);
  font-size: var(--dcs-fs-xs);
  color: var(--dcs-text-dim);
}

.dcs-swatch__chip {
  width: calc(var(--dcs-h) - 8px);
  height: calc(var(--dcs-h) - 8px);
  border-radius: var(--dcs-r-1);
  background: var(--c, #888);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.dcs-swatch:hover {
  border-color: var(--dcs-line-strong);
}

.dcs-color-square {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue, #f00));
  border: 1px solid var(--dcs-line);
  border-radius: var(--dcs-r-2);
  position: relative;
  cursor: crosshair;
}

.dcs-color-square__cursor {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.dcs-hue-bar {
  height: 12px;
  width: 100%;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  border: 1px solid var(--dcs-line);
  border-radius: var(--dcs-r-1);
  position: relative;
  cursor: ew-resize;
}

.dcs-hue-bar__cursor {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 6px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 2px;
  transform: translateX(-50%);
}

.dcs-alpha-bar {
  height: 12px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--c, #f00)), repeating-conic-gradient(#666 0 90deg, #999 90deg 180deg) 0 0/8px 8px;
  border: 1px solid var(--dcs-line);
  border-radius: var(--dcs-r-1);
  position: relative;
}

/* Channel color field — input-height widget (matches other inspector rows):
   a drag-scrub chip + an editable/copyable hex + a dropdown-picker caret. */
.dcs-colorfield {
  display: inline-flex;
  align-items: center;
  gap: var(--dcs-s-2);
  height: var(--dcs-h-in);
  padding: 0 var(--dcs-s-1) 0 var(--dcs-s-1);
  background: var(--dcs-well);
  border: 1px solid var(--dcs-line);
  border-radius: var(--dcs-r-2);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--dcs-text-dim);
  font-family: var(--dcs-font-mono);
  font-size: var(--dcs-fs-sm);
}

.dcs-colorfield:hover {
  border-color: var(--dcs-line-strong);
}

.dcs-colorfield__chip {
  width: calc(var(--dcs-h-in) - 8px);
  height: calc(var(--dcs-h-in) - 8px);
  flex: 0 0 auto;
  border-radius: var(--dcs-r-1);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
  cursor: ew-resize; /* drag-scrub */
  touch-action: none;
}

.dcs-colorfield__hex {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--dcs-text-dim);
  font-family: var(--dcs-font-mono);
  font-size: var(--dcs-fs-sm);
  letter-spacing: 0.02em;
  padding: 0;
}

.dcs-colorfield__hex:focus {
  color: var(--dcs-text);
}

.dcs-colorfield__caret {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  color: var(--dcs-text-mute);
  cursor: pointer;
}

.dcs-colorfield__caret:hover {
  color: var(--dcs-text);
}

/* Color-only variant — just the chip + caret, no hex. */
.dcs-colorfield--swatch {
  padding: 0 var(--dcs-s-2);
  gap: var(--dcs-s-1);
}

.dcs-colorfield--swatch .dcs-colorfield__chip {
  width: 18px;
  height: 18px;
}

/* ------------------------------------------------------------
   18 · CURVE / GRAPH EDITOR BACKGROUNDS
   ------------------------------------------------------------ */
.dcs-graph {
  background: linear-gradient(var(--dcs-line-soft) 1px, transparent 1px) 0 0/100% 25%, linear-gradient(90deg, var(--dcs-line-soft) 1px, transparent 1px) 0 0/25% 100%, var(--dcs-well);
  border: 1px solid var(--dcs-line);
  border-radius: var(--dcs-r-2);
  position: relative;
  overflow: hidden;
}

.dcs-graph__major {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0/100% 50%, linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0/50% 100%;
}

/* ------------------------------------------------------------
   19 · ICONS
   ------------------------------------------------------------ */
.dcs-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}

.dcs-icon--lg {
  width: 20px;
  height: 20px;
}

.dcs-icon--sm {
  width: 12px;
  height: 12px;
}

.dcs-icon--xl {
  width: 28px;
  height: 28px;
  stroke-width: 1;
}

/* ------------------------------------------------------------
   20 · UTIL
   ------------------------------------------------------------ */
.dcs-divider {
  height: 1px;
  background: var(--dcs-line);
  margin: var(--dcs-s-4) 0;
}

.dcs-divider--v {
  width: 1px;
  height: auto;
  margin: 0 var(--dcs-s-4);
  align-self: stretch;
}

.dcs-spacer {
  flex: 1;
}

.dcs-row {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-3);
}

.dcs-col {
  display: flex;
  flex-direction: column;
  gap: var(--dcs-s-3);
}

/* Mono helper — only for monospaced contexts like code/paths */
.dcs-mono {
  font-family: var(--dcs-font-mono);
  font-variant-numeric: tabular-nums;
}

.dcs-num {
  font-family: var(--dcs-font-num);
  font-variant-numeric: tabular-nums lining-nums;
}

.dcs-dim {
  color: var(--dcs-text-dim);
}

.dcs-mute {
  color: var(--dcs-text-mute);
}

.dcs-accent-text {
  color: var(--dcs-accent);
}

.dcs-no-select {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Scrollbars */
.dcs *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.dcs *::-webkit-scrollbar-track {
  background: var(--dcs-well);
}

.dcs *::-webkit-scrollbar-thumb {
  background: var(--dcs-surface-3);
  border: 2px solid var(--dcs-well);
  border-radius: 999px;
}

.dcs *::-webkit-scrollbar-thumb:hover {
  background: var(--dcs-surface-4);
}

/* Focus reset */
.dcs *:focus {
  outline: none;
}

.dcs *:focus-visible {
  outline: 1px solid var(--dcs-accent);
  outline-offset: 1px;
}

/* ============================================================
   21 · SUBPANEL — collapsible, with close affordance
   ============================================================ */
@keyframes dcs-blink {
  50% {
    opacity: 0;
  }
}
.dcs-subpanel {
  background: var(--dcs-bg);
  border-bottom: 1px solid var(--dcs-line);
  display: flex;
  flex-direction: column;
}

.dcs-subpanel:last-child {
  border-bottom: none;
}

.dcs-subpanel__header {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-2);
  height: 22px;
  padding: 0 var(--dcs-s-3);
  background: var(--dcs-surface-1);
  border-bottom: 1px solid var(--dcs-line-soft);
  font-size: var(--dcs-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dcs-text-mute);
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* No background flash on hover — only the chevron reacts (matches foldout). */
.dcs-subpanel__header:hover {
  color: var(--dcs-text-dim);
}

.dcs-subpanel__header:hover .dcs-subpanel__chevron {
  color: var(--dcs-text);
}

.dcs-subpanel__chevron {
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dcs-t-fast), color var(--dcs-t-fast);
  cursor: pointer;
  flex: 0 0 auto;
  color: var(--dcs-text-mute);
}

.dcs-subpanel__chevron--open {
  transform: rotate(90deg);
}

.dcs-subpanel__title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--dcs-s-2);
}

.dcs-subpanel__close {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dcs-text-mute);
  border-radius: var(--dcs-r-1);
  cursor: pointer;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity var(--dcs-t-fast), color var(--dcs-t-fast), background var(--dcs-t-fast);
}

.dcs-subpanel__header:hover .dcs-subpanel__close {
  opacity: 0.7;
}

.dcs-subpanel__close:hover {
  opacity: 1;
  color: var(--dcs-danger);
  background: rgba(239, 107, 107, 0.15);
}

.dcs-subpanel__body {
  padding: var(--dcs-s-3) var(--dcs-s-4);
}

.dcs-subpanel--collapsed .dcs-subpanel__body {
  display: none;
}

.dcs-subpanel--collapsed .dcs-subpanel__header {
  border-bottom: none;
}

/* Base component: also works as a native <details>/<summary> with zero JS. */
.dcs-subpanel > summary.dcs-subpanel__header {
  list-style: none;
}

.dcs-subpanel > summary.dcs-subpanel__header::-webkit-details-marker {
  display: none;
}

.dcs-subpanel > summary.dcs-subpanel__header::marker {
  content: "";
}

details.dcs-subpanel:not([open]) > summary.dcs-subpanel__header {
  border-bottom: none;
}

details.dcs-subpanel[open] > summary .dcs-subpanel__chevron {
  transform: rotate(90deg);
}

/* ============================================================
   23 · FOLDOUT — Blender-style soft section
   For property inspectors: rounded, slightly lighter card with
   breathing room. Stacked inside a scrollable panel body.
   ============================================================ */
.dcs-foldouts {
  display: flex;
  flex-direction: column;
  gap: var(--dcs-s-3);
  padding: var(--dcs-s-3);
}

.dcs-foldout {
  background: var(--dcs-surface-1);
  border-radius: var(--dcs-r-3);
  overflow: hidden;
}

.dcs-foldout__header {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-2);
  padding: var(--dcs-s-2) var(--dcs-s-4) var(--dcs-s-2) var(--dcs-s-2);
  font-size: var(--dcs-fs-sm);
  font-weight: 500;
  color: var(--dcs-text);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  min-height: var(--dcs-h);
}

/* No background flash on hover — only the chevron reacts (DCC-quiet). */
.dcs-foldout__header:hover .dcs-foldout__chevron {
  color: var(--dcs-text);
}

.dcs-foldout__chevron {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dcs-text-mute);
  transition: transform var(--dcs-t-fast), color var(--dcs-t-fast);
}

.dcs-foldout__chevron--open {
  transform: rotate(90deg);
}

.dcs-foldout__icon {
  color: var(--dcs-text-mute);
  flex: 0 0 auto;
}

.dcs-foldout__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dcs-foldout__meta {
  font-family: var(--dcs-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--dcs-fs-xs);
  color: var(--dcs-text-mute);
}

.dcs-foldout__tools {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--dcs-t-fast);
}

.dcs-foldout__header:hover .dcs-foldout__tools {
  opacity: 1;
}

.dcs-foldout__body {
  padding: var(--dcs-s-1) var(--dcs-s-5) var(--dcs-s-5) var(--dcs-s-5);
}

/* Collapsed (class-driven: React / decius.js) — hide the body. */
.dcs-foldout--collapsed > .dcs-foldout__body {
  display: none;
}

/* Base component: also works as a native <details>/<summary> with zero JS.
     <details class="dcs-foldout"><summary class="dcs-foldout__header">…
   The browser shows/hides the body; we just hide the default marker and
   rotate the chevron from the [open] attribute. */
.dcs-foldout > summary.dcs-foldout__header {
  list-style: none;
}

.dcs-foldout > summary.dcs-foldout__header::-webkit-details-marker {
  display: none;
}

.dcs-foldout > summary.dcs-foldout__header::marker {
  content: "";
}

details.dcs-foldout[open] > summary .dcs-foldout__chevron {
  transform: rotate(90deg);
}

/* ============================================================
   29 · SKEUOMORPHIC HARDWARE ELEMENTS
   Patch jacks, backlit buttons, 7-seg LED, LED bargraph meters.
   For modular/synth-style hardware emulation UIs.
   ============================================================ */
/* ─────────── Patch jack — TS/TRS audio socket with hex nut ─────────── */
.dcs-jack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dcs-jack__socket {
  position: relative;
  width: 32px;
  height: 32px;
}

.dcs-jack__socket svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.dcs-jack__label {
  font-family: var(--dcs-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0.9;
}

/* ─────────── Backlit plastic button ─────────── */
.dcs-litbtn {
  position: relative;
  width: 36px;
  height: 36px;
  margin: 3px;
  border-radius: 4px;
  background: linear-gradient(180deg, #d8dade 0%, #b5b8bf 50%, #8a8d94 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0 0 1.5px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.06), 0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a2d33;
  font-family: var(--dcs-font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 60ms ease, box-shadow 60ms ease;
}

.dcs-litbtn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.dcs-litbtn--lit {
  background: radial-gradient(circle at 50% 50%, var(--lit-hi, #ff8585) 0%, var(--lit-lo, #d62034) 70%);
  color: rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1.5px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.06), 0 0 12px var(--lit-glow, rgba(255, 80, 80, 0.6)), 0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.5);
}

.dcs-litbtn--cyan {
  --lit-hi: #b8f5ff;
  --lit-lo: #4dd0e1;
  --lit-glow: rgba(77,208,225,.6);
}

.dcs-litbtn--amber {
  --lit-hi: #ffe28a;
  --lit-lo: #f2b14a;
  --lit-glow: rgba(242,177,74,.5);
}

.dcs-litbtn--green {
  --lit-hi: #b8ff8a;
  --lit-lo: #4ed18a;
  --lit-glow: rgba(78,209,138,.5);
}

.dcs-litbtn--sm {
  width: 26px;
  height: 26px;
  font-size: 9px;
  border-radius: 3px;
}

/* ─────────── 7-segment LED display ─────────── */
.dcs-lcd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: linear-gradient(180deg, #1a0405 0%, #2a0608 100%);
  border-radius: 3px;
  border: 1px solid #0a0203;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  --lcd-on: #ff2030;
  --lcd-off: rgba(255,32,48,.10);
  --lcd-glow: 0 0 4px rgba(255,32,48,.85), 0 0 8px rgba(255,32,48,.4);
  color: var(--lcd-on);
}

.dcs-lcd--amber {
  background: linear-gradient(180deg, #1f1605 0%, #2a1f08 100%);
  border-color: #0a0703;
  --lcd-on: #ffae3a;
  --lcd-off: rgba(255,174,58,.10);
  --lcd-glow: 0 0 4px rgba(255,174,58,.85), 0 0 8px rgba(255,174,58,.4);
}

.dcs-lcd--green {
  background: linear-gradient(180deg, #051f0d 0%, #082a13 100%);
  border-color: #030a05;
  --lcd-on: #3dff7a;
  --lcd-off: rgba(61,255,122,.10);
  --lcd-glow: 0 0 4px rgba(61,255,122,.85), 0 0 8px rgba(61,255,122,.4);
}

.dcs-lcd--blue {
  background: linear-gradient(180deg, #050d1f 0%, #08132a 100%);
  border-color: #03050a;
  --lcd-on: #6fb8ff;
  --lcd-off: rgba(111,184,255,.10);
  --lcd-glow: 0 0 4px rgba(111,184,255,.85), 0 0 8px rgba(111,184,255,.4);
}

.dcs-lcd__digit {
  position: relative;
  width: 16px;
  height: 26px;
}

.dcs-lcd--sm .dcs-lcd__digit {
  width: 10px;
  height: 17px;
}

.dcs-lcd--md .dcs-lcd__digit {
  width: 16px;
  height: 26px;
}

.dcs-lcd--lg .dcs-lcd__digit {
  width: 24px;
  height: 40px;
}

.dcs-lcd__digit svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dcs-lcd__seg-on {
  fill: var(--lcd-on);
  filter: drop-shadow(var(--lcd-glow));
}

.dcs-lcd__seg-off {
  fill: var(--lcd-off);
}

.dcs-lcd__dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lcd-off);
  align-self: flex-end;
  margin: 0 1px 4px;
}

.dcs-lcd__dot--on {
  background: var(--lcd-on);
  box-shadow: var(--lcd-glow);
}

/* ─────────── LED bargraph meter ─────────── */
.dcs-meter {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  background: linear-gradient(180deg, #0a0c11 0%, #14161c 100%);
  border-radius: 3px;
  border: 1px solid #050608;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  align-items: stretch;
}

.dcs-meter--v {
  flex-direction: column-reverse;
}

.dcs-meter__seg {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1px;
  min-width: 3px;
  min-height: 4px;
}

.dcs-meter__seg--ok {
  background: #1b6e38;
}

.dcs-meter__seg--warn {
  background: #6e5a18;
}

.dcs-meter__seg--peak {
  background: #6e1818;
}

.dcs-meter__seg--lit-ok {
  background: #4ed18a;
  box-shadow: 0 0 4px rgba(78, 209, 138, 0.7), inset 0 0 1px rgba(255, 255, 255, 0.3);
}

.dcs-meter__seg--lit-warn {
  background: #f2b14a;
  box-shadow: 0 0 4px rgba(242, 177, 74, 0.7), inset 0 0 1px rgba(255, 255, 255, 0.3);
}

.dcs-meter__seg--lit-peak {
  background: #ef4040;
  box-shadow: 0 0 6px rgba(239, 64, 64, 0.8), inset 0 0 1px rgba(255, 255, 255, 0.3);
}

/* ─────────── Step buttons — small chunky plastic ─────────── */
.dcs-step {
  display: inline-flex;
  flex-direction: column;
  width: 22px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.dcs-step__btn {
  flex: 1;
  height: 14px;
  background: linear-gradient(180deg, #d8dade 0%, #a5a8af 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #2a2d33;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.dcs-step__btn:last-child {
  border-bottom: none;
}

.dcs-step__btn:hover {
  background: linear-gradient(180deg, #e8eaee 0%, #b5b8bf 100%);
}

.dcs-step__btn:active {
  background: linear-gradient(180deg, #95989f 0%, #c8cbd0 100%);
}

.dcs-step__btn svg {
  width: 8px;
  height: 8px;
}

/* ─────────── Hardware chassis ───────────
   Pair with data-dcs-style="3d" for the full "real gear" look.
   ───────────────────────────────────────── */
.dcs-hw {
  position: relative;
  border: 1px solid #0a0c11;
  border-radius: 6px;
  background: radial-gradient(ellipse 110% 90% at 50% -10%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.14) 4%, rgba(255, 255, 255, 0.06) 14%, rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.01) 70%, transparent 100%), linear-gradient(180deg, #2e3340 0%, #272b36 60%, #1f222c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

.dcs-hw--brushed {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, rgba(0, 0, 0, 0.015) 1px 2px), radial-gradient(ellipse 110% 90% at 50% -10%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.15) 4%, rgba(255, 255, 255, 0.07) 14%, rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.01) 70%, transparent 100%), linear-gradient(180deg, #333845 0%, #2c3140 60%, #242834 100%);
}

.dcs-hw--lacquer {
  background: radial-gradient(ellipse 100% 80% at 50% -10%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.22) 4%, rgba(255, 255, 255, 0.09) 14%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.015) 70%, transparent 100%), linear-gradient(180deg, #262b38 0%, #1e222c 60%, #161922 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.6), 0 6px 22px rgba(0, 0, 0, 0.5);
}

.dcs-hw--cream {
  background: radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.5), transparent 60%), linear-gradient(180deg, #e8e2cf, #c8c0a4 70%, #a89e7c);
  color: #2a2418;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dcs-hw--cream .dcs-knob__cap {
  background: radial-gradient(circle at 30% 25%, #d8d1bd, #8c8266);
}

.dcs-hw--cream .dcs-knob__label {
  color: #4a4030;
}

/* Hardware finish — red enamel (defined AFTER .dcs-hw so the colour wins) */
.dcs-hw--red {
  background: radial-gradient(ellipse 100% 80% at 50% -10%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.18) 4%, rgba(255, 255, 255, 0.08) 14%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.015) 70%, transparent 100%), linear-gradient(180deg, #d62034 0%, #b41a2c 60%, #931523 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 6px 22px rgba(0, 0, 0, 0.5);
}

.dcs-hw--red .dcs-hw__label {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* ─────────── Silkscreen group box ───────────
   1970s control-panel look: a rounded rectangle printed in off-white ink
   that groups knobs / jacks / displays, with an uppercase legend that
   breaks the top line (a <fieldset>/<legend> does this over any finish). */
/* off-white silkscreen ink */
.dcs-silk {
  min-width: 0;
  margin: 0;
  border: 1.5px solid rgba(236, 230, 214, 0.62);
  border-radius: 10px;
  padding: 12px 14px 14px;
}

.dcs-silk > legend, .dcs-silk__title {
  padding: 0 7px;
  font-family: var(--dcs-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(236, 230, 214, 0.9);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
}

/* When not using a real <legend>, place a title chip over the top edge,
   masking the border behind it so the line reads as broken. */
.dcs-silk--titled {
  position: relative;
}

.dcs-silk--titled > .dcs-silk__title {
  position: absolute;
  top: 0;
  left: 14px;
  transform: translateY(-50%);
  background: var(--silk-bg, #b41a2c); /* match the panel finish behind it */
}

.dcs-silk__title--center {
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Cream / light finishes flip the ink to dark */
.dcs-hw--cream .dcs-silk {
  border-color: rgba(60, 50, 30, 0.5);
}

.dcs-hw--cream .dcs-silk > legend,
.dcs-hw--cream .dcs-silk__title {
  color: rgba(50, 42, 24, 0.85);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Screw heads in the corners */
.dcs-hw__screw {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b5b8bf, #6a6d75 55%, #2a2d34 100%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.dcs-hw__screw::after {
  content: "";
  position: absolute;
  inset: 35%;
  background: rgba(0, 0, 0, 0.6);
  transform: rotate(var(--screw-rot, 28deg));
  border-radius: 1px;
}

.dcs-hw__screw--tl {
  top: 6px;
  left: 6px;
}

.dcs-hw__screw--tr {
  top: 6px;
  right: 6px;
  --screw-rot: -42deg;
}

.dcs-hw__screw--bl {
  bottom: 6px;
  left: 6px;
  --screw-rot: 12deg;
}

.dcs-hw__screw--br {
  bottom: 6px;
  right: 6px;
  --screw-rot: -8deg;
}

/* Hardware label — etched/engraved appearance */
.dcs-hw__label {
  font-family: var(--dcs-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dcs-hw--cream .dcs-hw__label {
  color: rgba(60, 50, 30, 0.7);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ─────────── Skeuomorphic card ───────────
   ───────────────────────────────────────── */
.dcs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--dcs-surface-1);
  border: 1px solid var(--dcs-line);
  border-radius: var(--dcs-r-3);
  overflow: hidden;
  transition: background var(--dcs-t-fast), border-color var(--dcs-t-fast);
}

.dcs-card--clickable {
  cursor: pointer;
}

.dcs-card--clickable:hover {
  background: var(--dcs-surface-2);
  border-color: var(--dcs-line-strong);
}

.dcs-card[aria-selected=true] {
  border-color: var(--dcs-accent);
  background: var(--dcs-accent-dim);
}

.dcs-card__media {
  flex: 0 0 auto;
  position: relative;
  background: var(--dcs-well);
}

.dcs-card__media img,
.dcs-card__media .dcs-card__media-bg {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.dcs-card__body {
  padding: var(--dcs-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--dcs-s-1);
  min-width: 0;
}

.dcs-card__title {
  font-size: var(--dcs-fs-md);
  font-weight: 500;
  color: var(--dcs-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dcs-card__meta {
  font-family: var(--dcs-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--dcs-fs-xs);
  color: var(--dcs-text-mute);
  letter-spacing: 0.03em;
}

.dcs-card__desc {
  font-size: var(--dcs-fs-sm);
  color: var(--dcs-text-dim);
  line-height: 1.4;
}

.dcs-card__footer {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-2);
  padding: var(--dcs-s-3) var(--dcs-s-4);
  background: var(--dcs-bg);
  border-top: 1px solid var(--dcs-line);
  font-size: var(--dcs-fs-xs);
  color: var(--dcs-text-mute);
}

.dcs-card__close {
  position: absolute;
  top: var(--dcs-s-2);
  right: var(--dcs-s-2);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dcs-text-mute);
  background: rgba(20, 22, 28, 0.65);
  border-radius: var(--dcs-r-1);
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  transition: opacity var(--dcs-t-fast), color var(--dcs-t-fast), background var(--dcs-t-fast);
  backdrop-filter: blur(6px);
}

.dcs-card:hover .dcs-card__close {
  opacity: 0.8;
}

.dcs-card__close:hover {
  opacity: 1;
  color: var(--dcs-danger);
  background: rgba(239, 107, 107, 0.25);
}

.dcs-card__close svg {
  width: 12px;
  height: 12px;
}

.dcs-card__badges {
  position: absolute;
  top: var(--dcs-s-2);
  left: var(--dcs-s-2);
  display: flex;
  gap: var(--dcs-s-1);
  z-index: 1;
}

.dcs-card__tools {
  position: absolute;
  bottom: var(--dcs-s-2);
  right: var(--dcs-s-2);
  display: flex;
  gap: 2px;
  opacity: 0;
  z-index: 2;
  transition: opacity var(--dcs-t-fast);
}

.dcs-card:hover .dcs-card__tools {
  opacity: 1;
}

.dcs-card--horizontal {
  flex-direction: row;
  align-items: stretch;
}

.dcs-card--horizontal .dcs-card__media {
  width: 80px;
  flex: 0 0 80px;
}

.dcs-card--horizontal .dcs-card__body {
  flex: 1;
  min-width: 0;
}

/* Card grid / list helpers */
.dcs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--dcs-s-4);
}

.dcs-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--dcs-s-2);
}

/* ============================================================
   23a · DOCK PANE — tabbed dockable view (Unity/Unreal style)
   ============================================================ */
.dcs-dockpane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--dcs-bg);
  flex: 1;
}

.dcs-dockpane__tabs {
  display: flex;
  align-items: stretch;
  height: var(--dcs-h);
  background: var(--dcs-surface-1);
  border-bottom: 1px solid var(--dcs-line);
  flex-shrink: 0;
}

.dcs-dockpane__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--dcs-s-2);
  padding: 0 var(--dcs-s-4);
  border: none;
  border-right: 1px solid var(--dcs-line);
  background: transparent;
  color: var(--dcs-text-mute);
  font-size: var(--dcs-fs-sm);
  font-family: var(--dcs-font);
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background var(--dcs-t-fast), color var(--dcs-t-fast);
}

.dcs-dockpane__tab:hover {
  color: var(--dcs-text-dim);
  background: var(--dcs-surface-2);
}

.dcs-dockpane__tab[aria-selected=true] {
  background: var(--dcs-bg);
  color: var(--dcs-text);
  font-weight: 500;
}

.dcs-dockpane__tab[aria-selected=true]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--dcs-bg);
}

.dcs-dockpane__tab[aria-selected=true]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--dcs-accent);
}

.dcs-dockpane__tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  /* Reset the default <button> chrome so a close authored as either
     a <span> or a <button> renders identically — no browser-default
     border / background / padding bleeding through. */
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  border-radius: var(--dcs-r-1);
  color: var(--dcs-text-mute);
  opacity: 0;
  margin-left: var(--dcs-s-1);
  transition: opacity var(--dcs-t-fast), background var(--dcs-t-fast), color var(--dcs-t-fast);
  cursor: pointer;
}

.dcs-dockpane__tab:hover .dcs-dockpane__tab-close,
.dcs-dockpane__tab[aria-selected=true] .dcs-dockpane__tab-close {
  opacity: 0.65;
}

.dcs-dockpane__tab-close:hover {
  opacity: 1;
  color: var(--dcs-danger);
  background: rgba(239, 107, 107, 0.18);
}

.dcs-dockpane__tab-close svg {
  width: 10px;
  height: 10px;
}

.dcs-dockpane__tools {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding: 0 var(--dcs-s-2);
  gap: 1px;
}

.dcs-dockpane__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* ============================================================
   23b · MENU BAR — top-of-window menu strip
   ============================================================ */
.dcs-menubar {
  display: flex;
  align-items: stretch;
  height: var(--dcs-h-lg);
  background: var(--dcs-surface-1);
  border-bottom: 1px solid var(--dcs-line);
  padding: 0 var(--dcs-s-3);
  font-size: var(--dcs-fs-sm);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
}

.dcs-menubar__brand {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-2);
  padding-right: var(--dcs-s-4);
  margin-right: var(--dcs-s-3);
  border-right: 1px solid var(--dcs-line);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--dcs-text);
}

.dcs-menubar__brand svg {
  color: var(--dcs-accent);
}

.dcs-menubar__item {
  display: inline-flex;
  align-items: center;
  padding: var(--dcs-text-nudge) var(--dcs-s-4) 0;
  background: none;
  border: none;
  color: var(--dcs-text-dim);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dcs-t-fast), color var(--dcs-t-fast);
}

.dcs-menubar__item:hover {
  background: var(--dcs-surface-2);
  color: var(--dcs-text);
}

/* Active (menu open) — solid accent, matches the toolbar "selected tool"
   contract so the user can see which dropdown is owning the screen. */
.dcs-menubar__item[aria-expanded=true] {
  background: var(--dcs-accent);
  color: #0a1220;
}

.dcs-menubar__item[aria-expanded=true]:hover {
  background: var(--dcs-accent-hi);
}

.dcs-menubar__spacer {
  flex: 1;
}

.dcs-menubar__meta {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-3);
  color: var(--dcs-text-mute);
  font-family: var(--dcs-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--dcs-fs-xs);
  padding: 0 var(--dcs-s-3);
}

/* ============================================================
   23c · VIEWPORT OVERLAY — floating toolbar on a 3D viewport
   ============================================================ */
.dcs-viewport {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, #3a4054, #161922 80%);
  min-height: 0;
  height: 100%;
}

.dcs-viewport__overlay {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--dcs-s-2);
  padding: var(--dcs-s-3);
  z-index: 2;
}

.dcs-viewport__overlay--tl {
  top: 0;
  left: 0;
}

.dcs-viewport__overlay--tr {
  top: 0;
  right: 0;
}

.dcs-viewport__overlay--bl {
  bottom: 0;
  left: 0;
}

.dcs-viewport__overlay--br {
  bottom: 0;
  right: 0;
}

.dcs-viewport__floater {
  background: rgba(20, 22, 28, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--dcs-r-2);
  padding: 2px;
  display: flex;
  align-items: center;
  gap: 1px;
  backdrop-filter: blur(8px);
}

.dcs-viewport__floater--v {
  flex-direction: column;
}

.dcs-viewport__floater .dcs-btn {
  background: transparent;
  border-color: transparent;
}

.dcs-viewport__floater .dcs-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
}

.dcs-viewport__floater .dcs-btn[aria-pressed=true] {
  background: var(--dcs-accent);
  color: #0a1220;
  border-color: transparent;
}

/* ============================================================
   24 · [data-dcs-style="3d"] — Vital/synth-style bevels & gradients
   Apply to any subtree you want rendered with depth instead of flat.
   ============================================================ */
[data-dcs-style="3d"] .dcs-btn {
  background: linear-gradient(180deg, var(--dcs-surface-2), var(--dcs-surface-1));
  box-shadow: var(--dcs-bevel-up);
  transition: background var(--dcs-t-fast), border-color var(--dcs-t-fast), transform var(--dcs-t-fast);
}

[data-dcs-style="3d"] .dcs-btn:hover {
  background: linear-gradient(180deg, var(--dcs-surface-3), var(--dcs-surface-2));
}

[data-dcs-style="3d"] .dcs-btn:active {
  background: var(--dcs-well);
  box-shadow: var(--dcs-bevel-down);
  transform: translateY(0.5px);
}

[data-dcs-style="3d"] .dcs-btn:focus-visible {
  box-shadow: var(--dcs-ring), var(--dcs-bevel-up);
}

[data-dcs-style="3d"] .dcs-btn--primary {
  background: linear-gradient(180deg, var(--dcs-accent-hi), var(--dcs-accent));
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}

[data-dcs-style="3d"] .dcs-btn--primary:hover {
  background: linear-gradient(180deg, #88c0ff, var(--dcs-accent-hi));
}

[data-dcs-style="3d"] .dcs-btn--ghost {
  box-shadow: none;
}

[data-dcs-style="3d"] .dcs-btn--danger {
  background: linear-gradient(180deg, #ff8585, #ef6b6b);
}

[data-dcs-style="3d"] .dcs-btn[aria-pressed=true] {
  box-shadow: var(--dcs-bevel-down);
}

[data-dcs-style="3d"] .dcs-btn-group .dcs-btn {
  box-shadow: none;
  background: transparent;
}

/* Selected segment keeps the solid key colour (like flat) + a little depth. */
[data-dcs-style="3d"] .dcs-btn-group .dcs-btn[aria-pressed=true] {
  background: var(--dcs-accent);
  color: #0a1220;
  box-shadow: var(--dcs-shadow-1);
}

[data-dcs-style="3d"] .dcs-btn-group .dcs-btn[aria-pressed=true]:hover {
  background: var(--dcs-accent-hi);
}

[data-dcs-style="3d"] .dcs-input,
[data-dcs-style="3d"] .dcs-select,
[data-dcs-style="3d"] .dcs-textarea {
  box-shadow: var(--dcs-bevel-down);
}

[data-dcs-style="3d"] .dcs-input:focus,
[data-dcs-style="3d"] .dcs-select:focus,
[data-dcs-style="3d"] .dcs-textarea:focus {
  box-shadow: var(--dcs-bevel-down), 0 0 0 2px var(--dcs-accent-haze);
}

/* Combo — beveled inset display in 3D mode. Works like the flat version
   (the value fill stays, so the level reads at a glance) with a synth glow. */
[data-dcs-style="3d"] .dcs-combo {
  box-shadow: var(--dcs-bevel-down);
  background: var(--dcs-well);
}

[data-dcs-style="3d"] .dcs-combo__fill {
  height: 3px;
  opacity: 1;
  box-shadow: 0 0 6px var(--dcs-accent-haze);
}

[data-dcs-style="3d"] .dcs-combo__btn {
  display: none;
}

[data-dcs-style="3d"] .dcs-combo__label {
  color: var(--dcs-text-mute);
  flex: 0 0 auto;
  padding-right: var(--dcs-s-2);
}

[data-dcs-style="3d"] .dcs-combo__value {
  color: var(--dcs-accent);
  font-weight: 500;
  flex: 1;
  justify-content: flex-end;
}

/* Slider & fader — beveled thumbs */
[data-dcs-style="3d"] .dcs-slider__track {
  box-shadow: var(--dcs-bevel-down);
}

[data-dcs-style="3d"] .dcs-slider__thumb {
  width: 14px;
  height: 14px;
  background: linear-gradient(180deg, var(--dcs-surface-3), var(--dcs-surface-1));
  border-color: var(--dcs-line);
  box-shadow: var(--dcs-shadow-1), var(--dcs-bevel-up);
}

[data-dcs-style="3d"] .dcs-slider:focus-within .dcs-slider__thumb,
[data-dcs-style="3d"] .dcs-slider--active .dcs-slider__thumb {
  border-color: var(--dcs-accent);
  box-shadow: 0 0 0 3px var(--dcs-accent-haze);
}

[data-dcs-style="3d"] .dcs-fader {
  box-shadow: var(--dcs-bevel-down);
}

[data-dcs-style="3d"] .dcs-fader__track {
  background: var(--dcs-line);
}

[data-dcs-style="3d"] .dcs-fader__thumb {
  width: 22px;
  height: 12px;
  background: linear-gradient(180deg, var(--dcs-surface-3), var(--dcs-surface-1));
  border-color: var(--dcs-line);
  box-shadow: var(--dcs-bevel-up), 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Knob — radial gradient cap, glowing indicator */
[data-dcs-style="3d"] .dcs-knob__cap {
  background: radial-gradient(circle at 30% 25%, var(--dcs-surface-3), var(--dcs-surface-1) 55%, var(--dcs-well) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.4);
}

[data-dcs-style="3d"] .dcs-knob__indicator {
  box-shadow: 0 0 6px var(--dcs-accent-haze);
}

/* Check / switch */
[data-dcs-style="3d"] .dcs-check__box {
  box-shadow: var(--dcs-bevel-down);
  border-color: var(--dcs-line);
}

[data-dcs-style="3d"] .dcs-switch {
  box-shadow: var(--dcs-bevel-down);
  border-color: var(--dcs-line);
}

[data-dcs-style="3d"] .dcs-switch::after {
  background: linear-gradient(180deg, var(--dcs-surface-3), var(--dcs-surface-1));
  box-shadow: var(--dcs-shadow-1), var(--dcs-bevel-up);
}

[data-dcs-style="3d"] .dcs-switch[aria-checked=true]::after {
  background: linear-gradient(180deg, #fff, #d8dade);
}

/* Panel header glossy in 3D mode */
[data-dcs-style="3d"] .dcs-panel {
  border: 1px solid var(--dcs-line);
  box-shadow: var(--dcs-shadow-2);
}

[data-dcs-style="3d"] .dcs-panel__header {
  background: linear-gradient(180deg, var(--dcs-surface-2), var(--dcs-surface-1));
}

[data-dcs-style="3d"] .dcs-toolbar {
  background: linear-gradient(180deg, var(--dcs-surface-1), var(--dcs-bg));
}

[data-dcs-style="3d"] .dcs-swatch {
  box-shadow: var(--dcs-bevel-down);
}

[data-dcs-style="3d"] .dcs-color-square,
[data-dcs-style="3d"] .dcs-hue-bar,
[data-dcs-style="3d"] .dcs-graph {
  box-shadow: var(--dcs-bevel-down);
}

/* ============================================================
   25 · MENU / DROPDOWN / CONTEXT MENU
   A floating menu surface used for dropdowns (opened from a
   button or menubar item) and right-click context menus.
   Positioned at runtime by decius.js; hidden via [hidden].
   ============================================================ */
.dcs-menu[hidden] {
  display: none;
}

.dcs-menu {
  position: fixed;
  z-index: 200;
  min-width: 180px;
  max-width: 320px;
  padding: var(--dcs-s-2);
  background: var(--dcs-surface-1);
  border: 1px solid var(--dcs-line);
  border-radius: 0; /* flat square popups — no soft corners */
  box-shadow: var(--dcs-shadow-pop);
  color: var(--dcs-text);
  font-size: var(--dcs-fs-sm);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  animation: dcs-menu-in var(--dcs-t-fast);
}

@keyframes dcs-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dcs-menu__label {
  padding: var(--dcs-s-2) var(--dcs-s-3) var(--dcs-s-1);
  font-size: var(--dcs-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dcs-text-mute);
}

.dcs-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dcs-s-3);
  height: var(--dcs-h-in);
  padding: var(--dcs-text-nudge) var(--dcs-s-3) 0;
  border-radius: 0; /* flat square selection rect */
  color: var(--dcs-text-dim);
  cursor: default;
  white-space: nowrap;
  line-height: 1;
}

/* :hover is the transient mouse highlight; --active is the transient
   keyboard-focus highlight (arrow keys). Neither is a "checked" state —
   for persistent selection, use the `.dcs-menu__check` slot to render
   a check icon. Dark text on accent reads better than white at decius
   accent brightness, so we use --dcs-text-inv across the board. */
.dcs-menu__item:hover,
.dcs-menu__item--active {
  background: var(--dcs-accent);
  color: var(--dcs-text-inv);
}

.dcs-menu__item:hover .dcs-menu__shortcut,
.dcs-menu__item--active .dcs-menu__shortcut {
  color: color-mix(in srgb, var(--dcs-text-inv) 70%, transparent);
}

.dcs-menu__item--danger {
  color: var(--dcs-danger);
}

.dcs-menu__item--danger:hover {
  background: var(--dcs-danger);
  color: var(--dcs-text-inv);
}

/* Persistent "currently active / window shown" indicator — a small
   accent bullet in the leading padding, with text in the body color.
   Distinct from --active (transient keyboard focus, accent fill) and
   from :hover (transient pointer highlight). Use for menu items like
   "Layers", "Color", etc. when their panel is currently visible. */
.dcs-menu__item--checked::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dcs-accent);
  transform: translateY(-50%);
}

.dcs-menu__item--checked:hover::before {
  background: var(--dcs-text-inv);
}

.dcs-menu__item[aria-disabled=true],
.dcs-menu__item--disabled {
  color: var(--dcs-text-mute);
  opacity: 0.5;
  pointer-events: none;
}

.dcs-menu__icon {
  flex: 0 0 auto;
  width: 16px;
  display: flex;
}

.dcs-menu__check {
  flex: 0 0 auto;
  width: 14px;
  display: flex;
  align-items: center;
  color: var(--dcs-accent);
}

.dcs-menu__item:hover .dcs-menu__check {
  color: #fff;
}

.dcs-menu__label-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dcs-menu__shortcut {
  flex: 0 0 auto;
  font-family: var(--dcs-font-mono);
  font-size: var(--dcs-fs-xs);
  color: var(--dcs-text-mute);
  letter-spacing: 0.02em;
}

.dcs-menu__caret {
  flex: 0 0 auto;
  margin-right: -2px;
  color: inherit;
  opacity: 0.8;
}

.dcs-menu__sep {
  height: 1px;
  margin: var(--dcs-s-2) calc(-1 * var(--dcs-s-2));
  background: var(--dcs-line);
}

/* Submenus — nested .dcs-menu, opened on hover. */
.dcs-menu__sub {
  position: absolute;
  top: calc(-1 * var(--dcs-s-2));
  left: 100%;
  margin-left: var(--dcs-s-1);
}

.dcs-menu__item--has-sub > .dcs-menu__sub {
  display: none;
}

.dcs-menu__item--has-sub:hover > .dcs-menu__sub {
  display: block;
}

/* ============================================================
   26 · POPOVER / POPUP
   A small floating card anchored to a trigger — richer than a
   tooltip (can hold controls). Positioned by decius.js via
   data-dcs-placement; hidden via [hidden].
   ============================================================ */
.dcs-popover[hidden] {
  display: none;
}

.dcs-popover {
  position: fixed;
  z-index: 190;
  min-width: 200px;
  max-width: 320px;
  background: var(--dcs-bg);
  border: 1px solid var(--dcs-line-soft);
  border-radius: 0; /* flat square popups */
  box-shadow: var(--dcs-shadow-pop);
  color: var(--dcs-text);
  font-size: var(--dcs-fs-sm);
  animation: dcs-menu-in var(--dcs-t-fast);
}

.dcs-popover__header {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-3);
  height: var(--dcs-h);
  padding: 0 var(--dcs-s-4);
  background: var(--dcs-surface-1);
  border-bottom: 1px solid var(--dcs-line);
  border-radius: 0;
  font-size: var(--dcs-fs-sm);
  font-weight: 500;
}

.dcs-popover__body {
  padding: var(--dcs-s-5);
  color: var(--dcs-text-dim);
}

.dcs-popover__body code {
  font-family: var(--dcs-font-mono);
  font-size: 0.92em;
  padding: 1px 6px;
  background: var(--dcs-well);
  border-radius: var(--dcs-r-1);
  color: var(--dcs-warn);
}

/* Little arrow pointing at the trigger; placed by decius.js. */
.dcs-popover__arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--dcs-bg);
  border: 1px solid var(--dcs-line-soft);
  transform: rotate(45deg);
}

.dcs-popover[data-dcs-pos=top] .dcs-popover__arrow {
  bottom: -6px;
  border-top: none;
  border-left: none;
}

.dcs-popover[data-dcs-pos=bottom] .dcs-popover__arrow {
  top: -6px;
  border-bottom: none;
  border-right: none;
}

.dcs-popover[data-dcs-pos=left] .dcs-popover__arrow {
  right: -6px;
  border-bottom: none;
  border-left: none;
}

.dcs-popover[data-dcs-pos=right] .dcs-popover__arrow {
  left: -6px;
  border-top: none;
  border-right: none;
}

/* ============================================================
   27 · TOAST / NOTIFICATION
   Transient, stacked notifications. The container is created on
   demand by decius.js (decius.toast({…})); markup is documented
   so they can also be authored statically.
   ============================================================ */
.dcs-toasts {
  position: fixed;
  z-index: 300;
  bottom: var(--dcs-s-6);
  right: var(--dcs-s-6);
  display: flex;
  flex-direction: column;
  gap: var(--dcs-s-3);
  width: 320px;
  max-width: calc(100vw - 2 * var(--dcs-s-6));
  pointer-events: none;
}

.dcs-toasts--top-right {
  top: var(--dcs-s-6);
  bottom: auto;
}

.dcs-toasts--top-left {
  top: var(--dcs-s-6);
  bottom: auto;
  left: var(--dcs-s-6);
  right: auto;
}

.dcs-toasts--bottom-left {
  left: var(--dcs-s-6);
  right: auto;
}

.dcs-toast {
  pointer-events: auto;
  display: flex;
  gap: var(--dcs-s-4);
  padding: var(--dcs-s-4) var(--dcs-s-5);
  background: var(--dcs-surface-1);
  border: 1px solid var(--dcs-line);
  border-left: 3px solid var(--dcs-accent);
  border-radius: var(--dcs-r-2);
  box-shadow: var(--dcs-shadow-3);
  font-size: var(--dcs-fs-sm);
  align-items: flex-start;
  animation: dcs-toast-in var(--dcs-t-slow);
}

@keyframes dcs-toast-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.dcs-toast--out {
  animation: dcs-toast-out var(--dcs-t) forwards;
}

@keyframes dcs-toast-out {
  from {
    opacity: 1;
    transform: translateX(0);
    max-height: 80px;
  }
  to {
    opacity: 0;
    transform: translateX(16px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -8px;
  }
}
.dcs-toast--ok {
  border-left-color: var(--dcs-ok);
}

.dcs-toast--warn {
  border-left-color: var(--dcs-warn);
}

.dcs-toast--danger {
  border-left-color: var(--dcs-danger);
}

.dcs-toast--info {
  border-left-color: var(--dcs-accent);
}

.dcs-toast__icon {
  color: var(--dcs-accent);
  flex: 0 0 auto;
  margin-top: 1px;
}

.dcs-toast--ok .dcs-toast__icon {
  color: var(--dcs-ok);
}

.dcs-toast--warn .dcs-toast__icon {
  color: var(--dcs-warn);
}

.dcs-toast--danger .dcs-toast__icon {
  color: var(--dcs-danger);
}

.dcs-toast__body {
  flex: 1;
  min-width: 0;
}

.dcs-toast__title {
  color: var(--dcs-text);
  font-weight: 500;
  margin-bottom: 2px;
}

.dcs-toast__msg {
  color: var(--dcs-text-dim);
}

.dcs-toast__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--dcs-text-mute);
  cursor: pointer;
  border-radius: var(--dcs-r-1);
}

.dcs-toast__close:hover {
  color: var(--dcs-text);
  background: var(--dcs-surface-3);
}

/* ============================================================
   28 · STATUS BAR
   The bottom strip of an app shell — counts, coordinates, mode
   flags. Mirrors the menubar at the foot of the window.
   ============================================================ */
.dcs-statusbar {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-4);
  height: var(--dcs-h-sm);
  padding: 0 var(--dcs-s-4);
  background: var(--dcs-surface-1);
  border-top: 1px solid var(--dcs-line);
  font-size: var(--dcs-fs-xs);
  color: var(--dcs-text-mute);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
}

.dcs-statusbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--dcs-s-2);
  font-family: var(--dcs-font-num);
  font-variant-numeric: tabular-nums;
}

.dcs-statusbar__item--accent {
  color: var(--dcs-accent);
}

.dcs-statusbar__item--ok {
  color: var(--dcs-ok);
}

.dcs-statusbar__item--warn {
  color: var(--dcs-warn);
}

.dcs-statusbar__sep {
  width: 1px;
  align-self: stretch;
  margin: var(--dcs-s-2) 0;
  background: var(--dcs-line);
}

.dcs-statusbar__spacer {
  flex: 1;
}

/* ============================================================
   29 · FLOATING PANELS & TOOLBARS
   ------------------------------------------------------------
   Detached surfaces that hover over a host stage — a tear-off
   panel, a floating toolbar pill, an inspector ripped out of a
   dock. Host positions them via left/top in inline style; drag
   handlers add the `dcs--dragging` state hook to raise elevation
   while pointer drag is active.

   These are the building blocks for tear-off / re-dock chrome.
   The actual drag-to-move behaviour is wired by decius.js when an
   element inside a floating surface has [data-dcs-drag-handle].
   ============================================================ */
/* ---- detached panel ----------------------------------------- */
.dcs-panel--floating {
  position: absolute; /* host positions via left/top */
  min-width: 160px;
  background: var(--dcs-bg);
  border: 1px solid var(--dcs-line);
  border-radius: var(--dcs-r-4);
  box-shadow: var(--dcs-shadow-pop);
  overflow: hidden;
  z-index: 60;
}

.dcs-panel--floating > .dcs-panel__header {
  cursor: grab;
  background: var(--dcs-surface-2);
  border-bottom: 1px solid var(--dcs-line);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dcs-panel--floating.dcs--dragging > .dcs-panel__header {
  cursor: grabbing;
}

.dcs-panel--floating > .dcs-panel__header .dcs-panel__title {
  pointer-events: none;
}

/* A floating panel that wraps a dockpane (tear-off of a tab group)
   uses the tab strip itself as the drag handle — both the wrapped
   `__tabbar` form AND the bare `__tabs` form (Photo's tearoffs skip
   the tabbar wrapper). Any empty area in the strip — the spacer
   between the last tab and the hamburger, padding around tabs —
   shows the grab cursor so users see it's draggable. Individual
   tabs / the hamburger button restore their own pointer cursors. */
.dcs-panel--floating > .dcs-dockpane > .dcs-dockpane__tabbar,
.dcs-panel--floating > .dcs-dockpane > .dcs-dockpane__tabs,
.dcs-panel--floating > .dcs-dockpane__tabbar,
.dcs-panel--floating > .dcs-dockpane__tabs {
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dcs-panel--floating.dcs--dragging > .dcs-dockpane > .dcs-dockpane__tabbar,
.dcs-panel--floating.dcs--dragging > .dcs-dockpane > .dcs-dockpane__tabs,
.dcs-panel--floating.dcs--dragging > .dcs-dockpane__tabbar,
.dcs-panel--floating.dcs--dragging > .dcs-dockpane__tabs {
  cursor: grabbing;
}

/* ---- detached toolbar -------------------------------------- */
/* Extends the minimal _15 floating toolbar rule with absolute
   positioning, intrinsic sizing, and the same shadow as panels. */
.dcs-toolbar.dcs-toolbar--floating {
  position: absolute; /* host positions via left/top */
  height: auto;
  width: auto;
  border: 1px solid var(--dcs-line-soft);
  border-radius: var(--dcs-r-4);
  box-shadow: var(--dcs-shadow-pop);
  background: var(--dcs-surface-1);
  padding: var(--dcs-s-2);
  gap: var(--dcs-s-1);
  z-index: 60;
}

.dcs-toolbar--floating.dcs-toolbar--v {
  padding: var(--dcs-s-2);
}

/* ---- shared elevation while dragging ------------------------ */
.dcs--dragging {
  box-shadow: var(--dcs-shadow-3), 0 0 0 1px var(--dcs-accent-haze) !important;
}

/* ---- floating-panel resize: any edge or corner --------------
   Eight invisible hit zones around the panel perimeter handle the
   actual pointer events; each just sets the matching native resize
   cursor. The visible SE grip is a decorative affordance only
   (pointer-events: none, z-index: 1) so anything above — scrollbar
   thumb, content overflow, badges — draws over it cleanly. */
.dcs-panel__resize-zones {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.dcs-panel__resize-zone {
  position: absolute;
  pointer-events: auto;
  background: transparent;
}

/* Edges — 5px wide strips along each side. */
.dcs-panel__resize-zone--n {
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  cursor: ns-resize;
}

.dcs-panel__resize-zone--s {
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  cursor: ns-resize;
}

.dcs-panel__resize-zone--w {
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  cursor: ew-resize;
}

.dcs-panel__resize-zone--e {
  top: 0;
  right: 0;
  bottom: 0;
  width: 5px;
  cursor: ew-resize;
}

/* Corners — 12px squares; overlap the edge zones so the diagonal
   cursor wins at the four corners. */
.dcs-panel__resize-zone--nw {
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
}

.dcs-panel__resize-zone--ne {
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  cursor: nesw-resize;
}

.dcs-panel__resize-zone--sw {
  bottom: 0;
  left: 0;
  width: 12px;
  height: 12px;
  cursor: nesw-resize;
}

.dcs-panel__resize-zone--se {
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
}

/* Decorative SE grip — visual only. Bottom of the z-stack so scrollbars
   and overflowing content overlay it naturally. Hit zones above handle
   the actual pointer. */
.dcs-panel__resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  z-index: 1;
  pointer-events: none;
  color: var(--dcs-line-strong);
  opacity: 0.6;
  transition: opacity var(--dcs-t-fast);
}

.dcs-panel--floating:hover .dcs-panel__resize {
  opacity: 1;
}

.dcs-panel__resize::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-bottom-right-radius: 2px;
}

/* ---- reusable drag-handle grip ------------------------------
   A dotted "drag from here" texture that tiles cleanly to whatever
   space the grippable area gives it. Two knobs:
     • `--dcs-grip-unit`  — pattern grid (one dot per cell). Defaults
       to 4px so 3-up / 4-up grids feel natural.
     • `--dcs-grip-thick` — the short-axis thickness (perpendicular
       to the drag direction). Defaults to 12px.
   `background-repeat: round` makes the browser slightly re-tune the
   tile size so a whole number of dots fits — no clipped half-dots at
   the edges, regardless of the host bar's measure.
   Orientation: `.dcs-grip` is the default VERTICAL strip (narrow in
   width, stretches in height — sits at the start of a horizontal
   bar). `.dcs-grip--h` is the HORIZONTAL strip (narrow in height,
   stretches in width — sits at the start of a vertical bar). Both
   default to `align-self: stretch` so a single flex item fills the
   bar's cross axis without further CSS. */
.dcs-grip {
  --dcs-grip-unit: 4px;
  --dcs-grip-thick: 16px;
  flex: none;
  align-self: stretch;
  width: var(--dcs-grip-thick);
  min-height: var(--dcs-grip-thick);
  /* Small separator gap between the grip and the first toolbar item
     so the handle reads as a distinct affordance rather than as
     another tool slot. */
  margin-right: var(--dcs-s-2);
  color: var(--dcs-line-strong);
  /* Slightly inset surface, then two stacked radial gradients per cell:
     a top-left highlight + a crisp dot face. The hard transition
     (currentColor → transparent at 90%/100%) gives a near-pixel edge so
     each dot reads as a small RAISED bead — not the soft anti-aliased
     circles we had before. `repeat` (not `round`) leaves the tile size
     fixed so dots stay perfectly square; we intentionally don't clip the
     box with a border-radius so corner dots stay whole. */
  background-color: rgba(0, 0, 0, 0.18);
  background-image: radial-gradient(closest-side at 35% 30%, rgba(255, 255, 255, 0.35) 55%, transparent 85%), radial-gradient(closest-side, currentColor 88%, transparent 100%);
  background-size: var(--dcs-grip-unit) var(--dcs-grip-unit);
  background-position: 0 0;
  background-repeat: repeat;
  cursor: grab;
  transition: color var(--dcs-t-fast);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dcs-grip:hover {
  color: var(--dcs-text-mute);
}

.dcs-grip--h {
  width: auto;
  height: var(--dcs-grip-thick);
  min-width: var(--dcs-grip-thick);
  min-height: 0;
  /* Horizontal grip sits at the START of a column-flex toolbar, so
     the separator gap goes UNDER it instead of to the right. */
  margin-right: 0;
  margin-bottom: var(--dcs-s-2);
}

.dcs--dragging .dcs-grip {
  cursor: grabbing;
}

/* Floating vertical toolbar with a first-child grip: a narrow band
   spanning LEFT→RIGHT across the top of the toolbar. The short axis is
   pinned to exactly 3 dot cells (3 × 4px = 12px) so the dot pattern
   tiles cleanly vertically. The long axis stretches, with `background-
   repeat: round` on X so the browser auto-fits an integer number of
   cells across — no half-dots clipped at the rect edges. Pattern
   anchored at (0,0) so the first cell is flush with the top-left. */
.dcs-toolbar--v.dcs-toolbar--floating > .dcs-grip:first-child {
  align-self: stretch;
  width: auto;
  height: 12px; /* 3 rows × 4px */
  min-height: 0;
  margin: var(--dcs-s-2); /* inset on all sides */
  border-radius: 0;
  background-position: 0 0;
  background-repeat: round repeat; /* X auto-fit, Y exact */
}

/* Floating HORIZONTAL toolbar with a first-child grip: the symmetric
   case — a narrow band running TOP→BOTTOM down the left. 3 dot cells
   wide (12px), height stretches with `background-repeat: repeat round`
   so an integer number of cells fits the long axis. */
.dcs-toolbar--floating:not(.dcs-toolbar--v) > .dcs-grip:first-child {
  align-self: stretch;
  width: 12px; /* 3 cols × 4px */
  height: auto;
  min-height: 0;
  margin: var(--dcs-s-2); /* inset on all sides */
  border-radius: 0;
  background-position: 0 0;
  background-repeat: repeat round; /* X exact, Y auto-fit */
}

/* ============================================================
   30 · DOCKPANE EXTENSIONS — tabbar with toolbar slot, shelf
   ------------------------------------------------------------
   A DCC-tool dockpane uses every pixel: the unused portion of
   the tab strip carries the active tab's toolbar (Blender-style)
   instead of wasting it. When tabs grow wide enough to crowd
   the toolbar, the toolbar drops to a SHELF row underneath.

   Markup:
     <div class="dcs-dockpane">
       <div class="dcs-dockpane__tabbar">
         <div class="dcs-dockpane__tabs"> …tabs… </div>
         <div class="dcs-dockpane__toolbars">
           <div class="dcs-dockpane__toolbar" data-dcs-tabtoolbar="#panel-a"> …controls for A… </div>
           <div class="dcs-dockpane__toolbar" data-dcs-tabtoolbar="#panel-b" hidden> …controls for B… </div>
         </div>
       </div>
       <div class="dcs-dockpane__shelf" hidden></div>   \3c !-- target when overflowed -->
       <div class="dcs-dockpane__body"> …tabpanels… </div>
     </div>

   decius.js manages tab activation and the overflow class
   (`.dcs-dockpane--shelved`), which CSS uses to swap the
   visible toolbar from the tabbar to the shelf row.

   The dockpane may also designate a CENTER panel — the main
   editor surface (image canvas, 3D viewport) other panes
   surround — via `.dcs-dockpane--center`.
   ============================================================ */
/* ---- tabbar wrapper (tabs + toolbar share one row) --------- */
.dcs-dockpane__tabbar {
  display: flex;
  align-items: stretch;
  height: var(--dcs-h);
  min-width: 0;
  background: var(--dcs-surface-1);
  border-bottom: 1px solid var(--dcs-line);
  flex-shrink: 0;
}

/* When wrapped in __tabbar, the tabs strip itself loses its own
   chrome and shrinks to its natural width so the toolbar slot
   takes the rest. The standalone .dcs-dockpane > .dcs-dockpane__tabs
   case (no toolbar) is unchanged. */
.dcs-dockpane__tabbar > .dcs-dockpane__tabs {
  flex: 0 1 auto;
  min-width: 0;
  height: auto;
  background: transparent;
  border-bottom: none;
  overflow: hidden;
}

/* ---- toolbar slot inside the tabbar ------------------------ */
.dcs-dockpane__toolbars {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 var(--dcs-s-2);
  margin-left: var(--dcs-s-2);
  border-left: 1px solid var(--dcs-line);
}

.dcs-dockpane__toolbar {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-2);
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.dcs-dockpane__toolbar[hidden] {
  display: none;
}

/* ---- shelf row (active toolbar drops here when overflowed) - */
.dcs-dockpane__shelf {
  display: flex;
  align-items: center;
  gap: var(--dcs-s-2);
  padding: 0 var(--dcs-s-3);
  height: var(--dcs-h);
  min-height: var(--dcs-h);
  background: var(--dcs-surface-1);
  border-bottom: 1px solid var(--dcs-line);
  overflow: hidden;
  flex-shrink: 0;
}

.dcs-dockpane__shelf[hidden],
.dcs-dockpane:not(.dcs-dockpane--shelved) > .dcs-dockpane__shelf {
  display: none;
}

.dcs-dockpane--shelved > .dcs-dockpane__tabbar > .dcs-dockpane__toolbars {
  display: none;
}

/* ---- one floating panel tab → title-only tearoff -----------
   Floating panel-kind tearoffs never show a tabbar for a single tab.
   JS moves the lone tab into this titlebar so the title text can still
   be dragged to dock elsewhere, while the empty header area remains
   the panel-move handle. Docked panels and document/editor dockpanes
   keep their normal single-tab strip. */
.dcs-dockpane--title-only > .dcs-dockpane__tabbar,
.dcs-dockpane--title-only > .dcs-dockpane__tabs {
  display: none;
}

.dcs-dockpane__titlebar {
  flex-shrink: 0;
}

.dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab {
  flex: 0 1 auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  min-width: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: grab;
}

.dcs-panel--floating .dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab {
  pointer-events: auto;
}

.dcs-panel--floating.dcs--dragging .dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab {
  cursor: grabbing;
}

.dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab::before,
.dcs-dockpane__titlebar > .dcs-panel__title.dcs-panel__title--dock-tab::after {
  display: none;
}

/* ---- center "Document" pane (image canvas / 3D viewport) ---
   The "main view" surface in a Photoshop-/Blender-style app: the
   multi-tabbed editor area where each tab is a document (image,
   scene, file) — NOT interchangeable with the surrounding dock
   tabs (Layers, Tools, Outliner). Reads one shade LIGHTER than
   the chrome via `--dcs-stage`, so the editor is the focal
   surface and the dock chrome recedes.

   `.dcs-dockpane--center` implies `data-dcs-dock-kind="documents"`
   for the tear-off/re-dock kind system below; any dockpane can
   opt in explicitly via that attribute. Game-editor-style apps
   that have no distinct center can simply not use this marker. */
.dcs-dockpane--center,
.dcs-dockpane[data-dcs-dock-kind=documents] {
  background: var(--dcs-stage);
}

.dcs-dockpane--center > .dcs-dockpane__body,
.dcs-dockpane[data-dcs-dock-kind=documents] > .dcs-dockpane__body {
  position: relative;
  overflow: hidden;
  background: var(--dcs-stage);
}

.dcs-dockpane--center > .dcs-dockpane__tabbar,
.dcs-dockpane[data-dcs-dock-kind=documents] > .dcs-dockpane__tabbar {
  background: color-mix(in srgb, var(--dcs-stage) 88%, #000 12%);
  border-bottom-color: color-mix(in srgb, var(--dcs-stage) 70%, #000 30%);
}

/* Document tabs — wider, flat, the active tab IS the stage color
   so the editor reads as one continuous surface from header to body. */
.dcs-dockpane--center > .dcs-dockpane__tabbar .dcs-dockpane__tab,
.dcs-dockpane[data-dcs-dock-kind=documents] > .dcs-dockpane__tabbar .dcs-dockpane__tab {
  padding: 0 var(--dcs-s-4);
  min-width: 110px;
  max-width: 260px;
  background: color-mix(in srgb, var(--dcs-stage) 78%, #000 22%);
  color: var(--dcs-text-dim);
  border-right: 1px solid color-mix(in srgb, var(--dcs-stage) 55%, #000 45%);
  font-weight: 500;
}

.dcs-dockpane--center > .dcs-dockpane__tabbar .dcs-dockpane__tab:hover,
.dcs-dockpane[data-dcs-dock-kind=documents] > .dcs-dockpane__tabbar .dcs-dockpane__tab:hover {
  background: color-mix(in srgb, var(--dcs-stage) 88%, #000 12%);
  color: var(--dcs-text);
}

.dcs-dockpane--center > .dcs-dockpane__tabbar .dcs-dockpane__tab[aria-selected=true],
.dcs-dockpane[data-dcs-dock-kind=documents] > .dcs-dockpane__tabbar .dcs-dockpane__tab[aria-selected=true] {
  background: var(--dcs-stage);
  color: var(--dcs-text);
}

.dcs-dockpane--center > .dcs-dockpane__tabbar .dcs-dockpane__tab[aria-selected=true]::after,
.dcs-dockpane[data-dcs-dock-kind=documents] > .dcs-dockpane__tabbar .dcs-dockpane__tab[aria-selected=true]::after {
  background: var(--dcs-stage);
}

/* ---- tear-off chrome --------------------------------------- */
/* Ghost pill that follows the pointer while a tab is being dragged. */
.dcs-dockpane__tab-ghost {
  position: fixed;
  z-index: 1000;
  padding: 0 var(--dcs-s-3);
  height: var(--dcs-h);
  display: inline-flex;
  align-items: center;
  gap: var(--dcs-s-2);
  background: var(--dcs-surface-1);
  border: 1px solid var(--dcs-line-soft);
  border-radius: var(--dcs-r-2);
  font-size: var(--dcs-fs-sm);
  color: var(--dcs-text);
  pointer-events: none;
  opacity: 0.92;
  box-shadow: var(--dcs-shadow-pop);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Center drop preview — a translucent accent wash + 2px ring covering
   the WHOLE dockpane (tabbar, toolbars, shelf, body, content). Sits
   ON TOP of everything via high z-index, but is `pointer-events:none`
   so the user can still drag through it without it intercepting any
   events. Translucency makes the underlying content readable through
   the wash, so you can still see what tabs and foldouts are in the
   pane you're about to drop into. */
.dcs-dockpane__center-preview {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--dcs-accent-dim);
  box-shadow: inset 0 0 0 2px var(--dcs-accent);
  z-index: 100;
}

/* Author-written floating panels that are normalized into a one-tab
   dockpane keep their original panel body inside this generated
   tabpanel. Make it fill like a normal dock body. */
.dcs-dockpane__standalone-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.dcs-dockpane__standalone-panel > .dcs-panel__body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* ---- per-pane hamburger menu --------------------------------
   Auto-injected by decius.js at the right edge of every tabbar.
   Holds Close / Detach / etc. for the currently active tab. Apps
   can supply their own via `data-dcs-tab-menu="#menu-id"` or hide
   it with `data-dcs-tab-menu="false"`. Small (icon-sized) and
   flat so it doesn't compete with the active tab. */
.dcs-dockpane__menu {
  flex: 0 0 auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dcs-h);
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--dcs-text-mute);
  font: inherit;
  font-size: var(--dcs-fs-sm);
  cursor: pointer;
  transition: background var(--dcs-t-fast), color var(--dcs-t-fast);
}

.dcs-dockpane__menu:hover {
  background: var(--dcs-surface-2);
  color: var(--dcs-text);
}

.dcs-dockpane__menu[aria-expanded=true] {
  background: var(--dcs-surface-2);
  color: var(--dcs-text);
}

/* ---- edge-dock drop zones ----------------------------------
   While a tab is being dragged, a translucent half-pane preview
   appears against the edge it would split into when released —
   left/right halve the target horizontally, top/bottom halve it
   vertically. The preview is painted into a single overlay node
   the runtime parents to the target dockpane during drag. */
.dcs-dockpane__edge-preview {
  position: absolute;
  pointer-events: none;
  background: var(--dcs-accent-dim);
  box-shadow: inset 0 0 0 2px var(--dcs-accent);
  z-index: 50;
  transition: top var(--dcs-t-fast), left var(--dcs-t-fast), width var(--dcs-t-fast), height var(--dcs-t-fast);
}

.dcs-dockpane__edge-preview[data-edge=left] {
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
}

.dcs-dockpane__edge-preview[data-edge=right] {
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  left: auto;
}

.dcs-dockpane__edge-preview[data-edge=top] {
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
}

.dcs-dockpane__edge-preview[data-edge=bottom] {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  top: auto;
}

.dcs-dockpane__edge-preview[data-edge=center] {
  inset: 0;
}

.dcs-dockpane__edge-preview[data-window-edge=true][data-edge=left] {
  width: min(320px, 20%);
}

.dcs-dockpane__edge-preview[data-window-edge=true][data-edge=right] {
  width: min(320px, 20%);
}

.dcs-dockpane__edge-preview[data-window-edge=true][data-edge=top] {
  height: min(220px, 20%);
}

.dcs-dockpane__edge-preview[data-window-edge=true][data-edge=bottom] {
  height: min(220px, 20%);
}
/*# sourceMappingURL=decius.css.map */