/* wygge Admin Cockpit — FND-2043 Design-Studio (route designstudio, design_studio.jsx).
   Layout: the studio root is a size container. From 1100 px of studio width: navigator 184 px | controls (min 360, max 720) | stage (min 480);
   below: navigator as one scrollable row, stage, controls - stacked, full width. 8-pt grid (4 for tight inner gaps).
   LABELS ARE NEVER TRUNCATED: no nowrap / ellipsis on a label, they wrap; every grid and flex child that holds text has min-width: 0, so an
   input can never push over a label (the old studio's „K T“ for „Kopfzeile Text“). Gate: .verify/check_design_studio.mjs (rules) +
   tools/design_studio_layout.mjs (measured in Chromium and WebKit at 375 / 768 / 1024 / 1440).
   Colours, radii and fonts only through var(--ad-…) (style contract C9). */

.ds-root { container-type: inline-size; container-name: dsroot; display: flex; flex-direction: column; gap: 16px; min-width: 0; color: var(--ad-text); font-family: var(--ad-font-body); }
.ds-root *, .ds-root *::before, .ds-root *::after { box-sizing: border-box; }
.ds-root :focus-visible { outline: 2px solid var(--ad-link, var(--ad-accent-deep)); outline-offset: 2px; }

/* toolbar */
.ds-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; min-height: 48px; background: var(--ad-surface);
  border: var(--ad-bw-card, 1.5px) solid var(--ad-border); border-radius: var(--ad-radius-card, 10px); }
.ds-toolbar-gap { flex: 1 1 auto; }
.ds-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ad-text-muted); min-width: 0; }
.ds-status[data-ds-status="draft"] { color: var(--ad-text); }

/* layout */
.ds-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ds-layout > * { min-width: 0; }
.ds-nav { order: 1; }
.ds-stagecol { order: 2; }
.ds-controls { order: 3; max-width: 720px; width: 100%; }
/* navigator */
.ds-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; gap: 4px; overflow-x: auto; }
.ds-nav li { min-width: 0; flex-shrink: 0; }
.ds-nav button { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: none; border-radius: 8px;
  background: transparent; color: var(--ad-text-muted); font: 600 13px/1.3 var(--ad-font-body); text-align: left; cursor: pointer; }
.ds-nav button:hover { background: var(--ad-surface-inset); color: var(--ad-text); }
.ds-nav button.ds-nav-on { background: var(--ad-accent-bg); color: var(--ad-accent-fg); font-weight: 700; }
.ds-nav-label { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.ds-nav .ds-nav-foot { margin-top: 8px; border-top: 1px solid var(--ad-divider); border-radius: 0; padding-top: 12px; }
.ds-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px;
  background: var(--ad-surface-inset); color: var(--ad-text-muted); font-size: 11px; font-weight: 700; flex-shrink: 0; }

/* control column */
.ds-controls { display: flex; flex-direction: column; gap: 16px; }
.ds-section-head { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--ad-surface); border: var(--ad-bw-card, 1.5px) solid var(--ad-border); border-radius: var(--ad-radius-card, 10px); }
.ds-h2 { margin: 0; font-family: var(--ad-font-display); font-weight: 700; font-size: calc(18px * var(--ad-heading-fs-scale, 1)); color: var(--ad-heading-color, var(--ad-text)); letter-spacing: -0.01em; }
.ds-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ds-mode-label { font-size: 12px; font-weight: 700; color: var(--ad-text-subtle); }
.ds-group { display: flex; flex-direction: column; padding: 8px 16px 16px; background: var(--ad-surface); border: var(--ad-bw-card, 1.5px) solid var(--ad-border); border-radius: var(--ad-radius-card, 10px); }
.ds-group-title { margin: 8px 0 4px; font-family: var(--ad-font-label); font-size: calc(11px * var(--ad-label-fs-scale, 1)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ad-label-color, var(--ad-text-subtle)); }
.ds-hint { font-size: 12px; line-height: 1.5; color: var(--ad-text-subtle); white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.ds-muted { font-size: 12px; color: var(--ad-text-subtle); }

/* one row: label ABOVE the control (default), label LEFT from 1100 px studio width (container query above) */
.ds-row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ad-divider); }
.ds-row:last-child { border-bottom: none; }
.ds-row > * { min-width: 0; }
.ds-row-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 4px; }
.ds-label { display: block; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ad-text); white-space: normal; overflow-wrap: anywhere; hyphens: manual; }
.ds-req { color: var(--ad-danger-fg); }
.ds-row-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ds-row-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ds-row-meta { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; min-width: 0; }
.ds-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ds-row-block .ds-row-body > * { min-width: 0; }

/* controls (8-pt heights: 32 px) */
.ds-input { height: 32px; padding: 4px 8px; border-radius: var(--ad-radius-input, 8px); border: var(--ad-bw-input, 1.5px) solid var(--ad-border-strong);
  background: var(--ad-surface); color: var(--ad-text); font: 500 13px/1.2 var(--ad-font-body); min-width: 0; }
.ds-input.ds-invalid { border-color: var(--ad-danger); }
.ds-hex { width: 96px; font-family: var(--ad-font-mono); font-size: 12px; font-weight: 600; }
.ds-input-wide { width: 100%; }
.ds-num { display: inline-flex; align-items: center; gap: 4px; }
.ds-num .ds-input { width: 80px; }
.ds-unit { font-size: 12px; color: var(--ad-text-subtle); }
.ds-swatch { width: 40px; height: 32px; padding: 0; border-radius: 8px; border: 1.5px solid var(--ad-border-strong); background: transparent; cursor: pointer; flex-shrink: 0; }
.ds-select { position: relative; display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.ds-select select { appearance: none; height: 32px; max-width: 100%; padding: 4px 28px 4px 8px; border-radius: var(--ad-radius-input, 8px); border: var(--ad-bw-input, 1.5px) solid var(--ad-border-strong);
  background: var(--ad-surface); color: var(--ad-text); font: 600 13px/1.2 var(--ad-font-body); cursor: pointer; }
.ds-select-chev { position: absolute; right: 8px; pointer-events: none; color: var(--ad-text-subtle); display: inline-flex; }
.ds-font { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 320px; min-width: 0; }
.ds-font-sample { font-size: 15px; color: var(--ad-text); overflow-wrap: anywhere; }
.ds-icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: transparent; color: var(--ad-text-muted); cursor: pointer; flex-shrink: 0; }
.ds-icon-btn:hover:not(:disabled) { background: var(--ad-surface-inset); color: var(--ad-text); }
.ds-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ds-btn-outline { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--ad-radius-btn, 8px);
  border: var(--ad-bw-btn, 1.5px) solid var(--ad-btn-outline-bd, var(--ad-border-strong)); background: var(--ad-surface); color: var(--ad-text); font: 700 12px/1 var(--ad-font-body); cursor: pointer; }
.ds-btn-outline:hover { background: var(--ad-surface-inset); }
.ds-toggle-chip, .ds-chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 16px; border: 1.5px solid var(--ad-border-strong);
  background: transparent; color: var(--ad-text-muted); font: 700 12px/1 var(--ad-font-body); cursor: pointer; }
.ds-toggle-chip.ds-on, .ds-chip-on { background: var(--ad-accent-bg); color: var(--ad-accent-fg); border-color: var(--ad-accent-deep); }
.ds-grad-swatch { height: 32px; min-width: 136px; padding: 0 12px; border-radius: 8px; border: 1.5px solid var(--ad-border-strong); color: var(--ad-text); background-clip: padding-box;
  font: 700 12px/1 var(--ad-font-body); cursor: pointer; text-shadow: 0 0 4px var(--ad-surface), 0 0 2px var(--ad-surface); }
.ds-grad { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 8px; background: var(--ad-surface-inset); }
.ds-grad-bar { height: 24px; border-radius: 6px; border: 1px solid var(--ad-border-strong); }
.ds-grad-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ds-link-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: none; background: none; padding: 4px 0; color: var(--ad-link, var(--ad-accent-deep)); font: 700 12px/1.2 var(--ad-font-body); cursor: pointer; }
.ds-chip-state { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--ad-surface-inset); color: var(--ad-text-subtle); font-size: 11px; font-weight: 700; white-space: normal; }
.ds-chip-derived { background: var(--ad-info-bg); color: var(--ad-info-fg); }
.ds-chip-custom { background: var(--ad-accent-bg); color: var(--ad-accent-fg); }
.ds-disclose { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin-top: 8px; padding: 4px 8px; border: none; border-radius: 8px;
  background: transparent; color: var(--ad-text-muted); font: 700 12px/1.2 var(--ad-font-body); cursor: pointer; }
.ds-disclose:hover { background: var(--ad-surface-inset); color: var(--ad-text); }
.ds-adv { display: flex; flex-direction: column; border-top: 1px dashed var(--ad-divider); margin-top: 4px; }
.ds-seg { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--ad-border-strong); border-radius: 8px; overflow: hidden; }
.ds-seg button { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 12px; border: none; background: transparent; color: var(--ad-text-subtle); font: 700 12px/1.2 var(--ad-font-body); cursor: pointer; }
.ds-seg button.ds-seg-on { background: var(--ad-accent-bg); color: var(--ad-accent-fg); }

/* contrast linter */
.ds-lint { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.5; }
.ds-lint-ok { flex-direction: row; align-items: center; gap: 4px; color: var(--ad-text-subtle); }
.ds-lint-bad { padding: 8px 12px; border-radius: 8px; background: var(--ad-warn-bg); color: var(--ad-warn-fg); }
.ds-lint-text { display: flex; gap: 8px; align-items: flex-start; }
.ds-lint-text > span { min-width: 0; overflow-wrap: anywhere; }
.ds-fix { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border-radius: var(--ad-radius-btn, 8px);
  border: 1.5px solid var(--ad-warn-fg); background: var(--ad-surface); color: var(--ad-text); font: 700 12px/1.2 var(--ad-font-body); cursor: pointer; text-align: left; }
.ds-fix-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--ad-border-strong); flex-shrink: 0; display: inline-block; }

/* presets */
.ds-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; margin-top: 8px; }
.ds-preset { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--ad-border); border-radius: 10px; min-width: 0; }
.ds-preset-name { font-family: var(--ad-font-display); font-weight: 700; font-size: 14px; }

/* stage */
.ds-stage { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--ad-surface); border: var(--ad-bw-card, 1.5px) solid var(--ad-border); border-radius: var(--ad-radius-card, 10px); min-width: 0; }
.ds-stage-bar { display: flex; flex-direction: column; gap: 8px; }
.ds-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--ad-divider); }
.ds-tab { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 8px; border: none; border-bottom: 2px solid transparent; background: transparent;
  color: var(--ad-text-subtle); font: 700 12px/1.2 var(--ad-font-body); cursor: pointer; flex-shrink: 0; margin-bottom: -1px; }
.ds-tab-on { color: var(--ad-text); border-bottom-color: var(--ad-accent-deep); }
.ds-stage-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ds-split-ctl { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ad-text-subtle); }
.ds-stage-note { font-size: 12px; color: var(--ad-text-subtle); min-height: 20px; overflow-wrap: anywhere; }
.ds-panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
/* light and dark are stacked: side by side, each pane would be scaled below a readable size */
.ds-pane { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ds-pane-cap { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; color: var(--ad-text-subtle); text-transform: uppercase; letter-spacing: 0.06em; }
.ds-pane-cap-sub { text-transform: none; letter-spacing: 0; font-weight: 600; }
.ds-pane-clip { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--ad-border); }
.ds-frame { position: relative; }
.ds-pane-layer { position: relative; }
.ds-before { position: absolute; inset: 0; overflow: hidden; }
.ds-split { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--ad-info); pointer-events: none; }
.ds-split span { position: absolute; top: 8px; padding: 2px 8px; border-radius: 10px; background: var(--ad-info-bg); color: var(--ad-info-fg); font: 700 11px/1.4 var(--ad-font-body); white-space: nowrap; }
.ds-split span:first-child { right: 8px; }
.ds-split span:last-child { left: 8px; }

/* publish dialog */
.ds-diff { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.ds-diff ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-diff li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ad-divider); font-size: 12.5px; }
.ds-diff-label { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.ds-diff-vals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ds-val { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; font-family: var(--ad-font-mono); font-size: 11.5px; }
.ds-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* FND-2042 Logo section (sidebar_logo.jsx SidebarLogoStudio) inside the studio: its rows follow the column rules - 8-pt rhythm, the label
   above the controls (the Logo row is a full-width block), labels wrap and never shrink below their words. Its inline spacing is overridden here. */
.ds-row-block { grid-template-columns: minmax(0, 1fr) !important; }
.ds-root [data-studio-logo] { margin-bottom: 0 !important; }
.ds-root [data-studio-logo] [data-logo-row] { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 8px !important; padding: 8px 0 !important; align-items: center; }
.ds-root [data-studio-logo] [data-logo-row] > span:first-child { font-size: 13px !important; font-weight: 600; color: var(--ad-text) !important; white-space: normal; overflow-wrap: anywhere; min-width: 0; grid-column: 1 / -1; }
.ds-root [data-studio-logo] [data-logo-row] > span:nth-child(2) { gap: 8px !important; min-width: 0; }

/* ── wide studio (≥ 1100 px): three columns, label left - LAST in the file so it wins over the narrow defaults above ── */
@container dsroot (min-width: 1100px) {
  .ds-layout { grid-template-columns: 184px minmax(360px, 1fr) minmax(480px, 1.4fr); gap: 24px; }
  .ds-nav { order: 1; position: sticky; top: 8px; }
  .ds-controls { order: 2; }
  .ds-stagecol { order: 3; position: sticky; top: 8px; }
  .ds-nav ul { flex-direction: column; overflow: visible; }
  .ds-row { grid-template-columns: minmax(128px, 168px) minmax(0, 1fr); column-gap: 16px; }
}

@media (prefers-reduced-motion: reduce) { .ds-root * { transition: none !important; animation: none !important; } }