/* FND-1088 PR 8a — the multimedia tile (dashboard_tile_layers.jsx) and its canvas editor (dashboard_layer_editor.jsx).
   A composition is an ISOLATED blend group that paints only inside its tile (§4.1, §5): blend modes, masks, filters and shadows can never
   reach outside it. Every length scales with the tile edge (--dash-comp-edge), so S, M and L show the same composition. */
.dash-comp { position: absolute; inset: 0; overflow: hidden; isolation: isolate; contain: layout paint; border-radius: inherit; }
.dash-comp .dl { position: absolute; box-sizing: border-box; transform-origin: 50% 50%; }
.dash-comp .dl-anim { position: absolute; inset: 0; }
.dash-comp .dl-body { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.dash-comp .dl-text .dl-anim, .dash-comp .dl.dl-text > .dl-anim { position: relative; inset: auto; }
.dash-comp .dl-body.is-flow { position: relative; inset: auto; overflow: visible; }
.dash-comp .dl-icon .dl-body, .dash-comp .dl-shape .dl-body { overflow: visible; }
.dash-comp .dl-kb { position: absolute; inset: 0; overflow: hidden; }
.dash-comp .dl-kb .dash-tile-bg { border-radius: 0; }
/* Frame border: drawn ABOVE the picture (an inset shadow on the body would sit under its children). */
.dash-comp .dl-body.has-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--dl-bw) var(--dl-bc, #fff); pointer-events: none; }
.dash-comp .dl-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tile-text); }
.dash-comp .dl-plate { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dash-comp .dl-text[data-text-fill] { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dash-comp .dl-shape { position: absolute; inset: 0; box-sizing: border-box; }
.dash-comp .dl-line { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.dash-comp .dl-icon .dl-body { display: flex; align-items: center; justify-content: center; color: var(--tile-text); }
.dash-comp .dl-icon .dl-body > svg { width: 100%; height: 100%; }
.dash-comp .dl-pending {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px;
  text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--tile-text); border: 1.5px dashed var(--tile-ring); border-radius: 8px;
}
/* PR 8d — the chart layer: the chart tile body of #150 fills the layer box ON the composition — no card surface, the tile ink for text, axes
   and legend (the engines read these tokens when they draw); the panel padding of the tile shrinks to a hairline (the box IS the frame). */
.dash-comp .dl-chart { position: absolute; inset: 0; --dash-card: transparent; --dash-card-text: var(--tile-text); --dash-card-muted: var(--tile-muted); --dash-card-line: var(--tile-edge); color: var(--tile-text); }
.dash-comp .dl-chart .dash-ct-panel.is-full { padding: 4px 4px 2px; }
.dash-comp .dl-chart .dash-ct-S .dash-ct-panel.is-full { padding: 2px; }
/* YouTube inside a layer: the player box is the layer box; nothing above may intersect it (policy, dashLayersYoutubeClear). */
.dash-comp .dl-youtube .dash-media-yt, .dash-comp .dl-youtube .dash-media-yt-ph, .dash-comp .dl-video .dash-media-stage { position: absolute; inset: 0; }
/* The editor canvas: no motion, no playback by itself; the composition is not a pointer target (the control layer is). */
.dash-comp.is-editing, .dash-comp.is-editing * { pointer-events: none; }

/* ── Editor ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.dle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 24px; align-items: start; }
@media (max-width: 1100px) { .dle { grid-template-columns: minmax(0, 1fr); } }
.dle-main, .dle-side { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.dle-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dle-toolbar-acts { margin-left: auto; display: inline-flex; gap: 2px; }
.dle-preview {
  position: relative; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; min-height: 160px;
  border-radius: 12px; border: 1.5px solid var(--ad-border); background: var(--ad-surface-inset); overflow: hidden;
}
.dle-canvas { position: relative; flex-shrink: 0; }
.dle-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; touch-action: none; outline: none; cursor: default; }
.dle-stage:focus-visible .dle-tile { outline: 2px solid var(--ad-accent); outline-offset: 3px; }
.dle-stage.is-crop { cursor: grab; }
.dle-tile.dash-tile { border-radius: var(--dash-radius, 14px); }
.dle-overlay { position: absolute; inset: 0; pointer-events: none; }
.dle-ghost { position: absolute; box-sizing: border-box; border: 1px dashed color-mix(in srgb, var(--ad-accent) 55%, transparent); opacity: 0; transition: opacity 120ms; }
.dle-stage:hover .dle-ghost { opacity: 1; }
.dle-ghost.is-locked { border-style: dotted; }
.dle-frame { position: absolute; box-sizing: border-box; border: var(--dle-bw, 1.5px) solid var(--ad-accent-deep, var(--ad-accent)); transform-origin: 50% 50%; }
.dle-frame.is-locked { border-style: dashed; }
.dle-frame.is-crop { border-style: dashed; border-color: var(--ad-warn, var(--ad-accent)); }
.dle-hd, .dle-rot {
  position: absolute; width: var(--dle-hs, 10px); height: var(--dle-hs, 10px); box-sizing: border-box; border-radius: 2px; pointer-events: auto;
  background: var(--ad-surface); border: var(--dle-bw, 1.5px) solid var(--ad-accent-deep, var(--ad-accent)); transform: translate(-50%, -50%);
}
.dle-hd-nw { left: 0; top: 0; cursor: nwse-resize; } .dle-hd-n { left: 50%; top: 0; cursor: ns-resize; } .dle-hd-ne { left: 100%; top: 0; cursor: nesw-resize; }
.dle-hd-e { left: 100%; top: 50%; cursor: ew-resize; } .dle-hd-se { left: 100%; top: 100%; cursor: nwse-resize; } .dle-hd-s { left: 50%; top: 100%; cursor: ns-resize; }
.dle-hd-sw { left: 0; top: 100%; cursor: nesw-resize; } .dle-hd-w { left: 0; top: 50%; cursor: ew-resize; }
.dle-rot { left: 50%; border-radius: 999px; cursor: grab; transform: translate(-50%, 0); }
.dle-lock { position: absolute; right: 2px; top: 2px; color: var(--ad-accent-deep, var(--ad-accent)); display: inline-flex; }
.dle-guide { position: absolute; background: var(--ad-danger, #e5484d); pointer-events: none; }
.dle-guide.is-v { top: 0; bottom: 0; transform: translateX(-50%); }
.dle-guide.is-h { left: 0; right: 0; transform: translateY(-50%); }
.dle-guide.is-third, .dle-guide.is-layer { opacity: .7; }
.dle-angle { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); padding: 1px 6px; border-radius: 6px; background: var(--ad-surface); color: var(--ad-text); font-weight: 700; }
.dle-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dle-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dle-h { margin: 4px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ad-text-subtle); display: flex; align-items: center; gap: 6px; }
.dle-count { font-size: 11px; font-weight: 600; color: var(--ad-text-faint); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.dle-count.is-near { color: var(--ad-warn-fg, var(--ad-text)); }
.dle-sec { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 12px; border-top: 1px solid var(--ad-border); }
.dle-sec .ad-field { margin-bottom: 4px; }
.dle-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.dle-grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: end; }
.dle-num, .dle-range, .dle-color { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dle-num-l { font-size: 11px; font-weight: 700; color: var(--ad-text-subtle); }
.dle-num input { width: 100%; box-sizing: border-box; }
.dle-range { flex-direction: row; align-items: center; gap: 8px; }
.dle-range .dle-num-l { min-width: 92px; }
.dle-range input[type="range"] { flex: 1; min-width: 0; accent-color: var(--ad-accent-deep); }
.dle-range-v { min-width: 48px; text-align: right; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ad-text-muted); }
.dle-color-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dle-swatch { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--ad-border-strong); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ad-text-subtle); background: var(--ad-surface); }
.dle-swatch.is-on { outline: 2px solid var(--ad-accent-deep, var(--ad-accent)); outline-offset: 1px; }
.dle-picker { width: 26px; height: 24px; padding: 0; border: 1.5px solid var(--ad-border-strong); border-radius: 6px; background: none; cursor: pointer; }
.dle-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.dle-group { display: flex; flex-direction: column; gap: 6px; }
.dle-textarea { display: flex; flex-direction: column; gap: 3px; }
.dle-textarea textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 60px; padding: 8px 10px; font: 500 13px/1.4 var(--ad-font-body); color: var(--ad-text); background: var(--ad-surface); border: var(--ad-bw-input, 1.5px) solid var(--ad-border-strong); border-radius: var(--ad-radius-input, 8px); }
.dle-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; max-height: 180px; overflow-y: auto; }
.dle-icon { height: 34px; border-radius: 8px; border: 1.5px solid var(--ad-border); background: var(--ad-surface); color: var(--ad-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dle-icon.is-on { border-color: var(--ad-accent-deep, var(--ad-accent)); background: var(--ad-accent-bg); color: var(--ad-accent-fg); }
.dle-list-wrap { display: flex; flex-direction: column; gap: 6px; }
.dle-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dle-list { display: flex; flex-direction: column; gap: 3px; }
.dle-row { min-height: 0; }
.dle-list .dle-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer; flex-wrap: nowrap; }
.dle-list .dle-row:hover { background: var(--ad-surface-inset); }
.dle-list .dle-row.is-on { border-color: var(--ad-accent-deep, var(--ad-accent)); background: var(--ad-accent-bg); }
.dle-list .dle-row.is-hidden .dle-row-name { opacity: .5; text-decoration: line-through; }
.dle-list .dle-row.is-drop { box-shadow: inset 0 2px 0 var(--ad-accent-deep, var(--ad-accent)); }
.dle-list .dle-row:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 1px; }
.dle-grip { color: var(--ad-text-faint); cursor: grab; display: inline-flex; }
.dle-row-ico { color: var(--ad-text-subtle); display: inline-flex; }
.dle-row-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dle-row-acts { display: inline-flex; gap: 0; }
.dle-chip { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--ad-neutral-bg); color: var(--ad-neutral-fg); white-space: nowrap; }
.dle-empty { font-size: 12px; color: var(--ad-text-subtle); padding: 8px 4px; }
.dle-panel { display: flex; flex-direction: column; gap: 4px; }
.dle-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dle-panel-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dle-panel-acts { display: inline-flex; }
.dle-source { display: flex; flex-direction: column; gap: 8px; }
.dle-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.dle-tpl { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px; border-radius: 12px; border: 1.5px solid var(--ad-border); background: var(--ad-surface); cursor: pointer; text-align: left; color: var(--ad-text); }
.dle-tpl:hover:not(:disabled) { border-color: var(--ad-accent-deep, var(--ad-accent)); }
.dle-tpl.is-off { opacity: .55; cursor: not-allowed; }
.dle-tpl-face.dash-tile { position: relative; flex-shrink: 0; box-shadow: none; cursor: inherit; }
.dle-tpl-blank { width: 104px; height: 104px; border-radius: var(--dash-radius, 14px); border: 1.5px dashed var(--ad-border-strong); display: flex; align-items: center; justify-content: center; color: var(--ad-text-subtle); }
.dle-tpl-name { font-size: 12px; font-weight: 800; }
.dle-tpl-why { font-size: 11px; line-height: 1.3; color: var(--ad-text-subtle); }
/* PR 8d: above the composition, the layer box cut out by its clip-path (dashLayerGhostStyle) — the cut-off part shows around the box. */
.dle-crop-ghost { position: absolute; opacity: .35; pointer-events: none; }
.dle-undo { display: inline-flex; } .dle-undo.is-off { opacity: .4; }

/* FND-1130 — DashLayerPropsExtra („Maske“ / „Wirkung“): compact rows for a 320 px properties sidebar — label 110 px left, control right,
   sliders ≤ 120 px with the value beside, 12–13 px type, collapsible groups. */
.dle-extra { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; min-width: 0; }
.dle-x-group { border-top: 1px solid var(--ad-border); padding: 6px 0 4px; }
.dle-x-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 2px 0; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ad-text-subtle); text-align: left; }
.dle-x-head:focus-visible { outline: 2px solid var(--ad-accent-deep); outline-offset: 2px; border-radius: 4px; }
.dle-x-body { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.dle-x-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 28px; }
.dle-x-l { font-size: 12px; font-weight: 700; color: var(--ad-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dle-x-c { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; }
.dle-x-c .ad-field { margin: 0; }
.dle-x-range { width: 120px; max-width: 120px; min-width: 0; flex: 0 1 120px; accent-color: var(--ad-accent-deep); }
.dle-x-v { min-width: 40px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ad-text-muted); }
.dle-x-note { font-size: 12px; line-height: 1.35; color: var(--ad-text-muted); padding-left: 118px; }
/* the text mask's own clipPath holder: no box, never visible */
.dl-letters { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* FND-1135 — the colour swatches, the native picker, the icon grid and the template cards: explicit hover + keyboard focus from the kit tokens. */
.dle-swatch:hover, .dle-picker:hover { border-color: var(--ad-accent-deep, var(--ad-accent)); }
.dle-icon:hover { background: var(--ad-surface-inset); border-color: var(--ad-border-strong); }
.dle-swatch:focus-visible, .dle-picker:focus-visible, .dle-icon:focus-visible, .dle-tpl:focus-visible { outline: 2px solid var(--ad-link, var(--ad-accent-deep)); outline-offset: 2px; }