/* wygge Admin Cockpit — Start-Dashboard hero photos + picker (dashboard_hero_picker.jsx, DASHBOARD-SPEC-R5.md §B).
   The photo is an <img> (object-fit: cover; object-position per preset) so onError can walk the fallback chain.
   The scrim (.dash-hero-shade in dashboard.css; round 5c: no scrim behind the words) stays unchanged. */
img.dash-hero-photo { display: block; width: 100%; height: 100%; max-width: none; border: 0; }
.dash-hero-photo-wait { background: var(--dash-stage-a); }
.dash-hero-fallback { position: absolute; inset: 0; z-index: 0; }

/* picker button: 30 px glass circle, top-right of the hero (clears the three words — word 0 ends 72 px from the edge) */
.dash-hero-pick {
  position: absolute; z-index: 2; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 999px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #fff;
  background: rgba(3, 36, 37, 0.38); border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); transition: background 160ms ease, transform 160ms ease;
}
.dash-hero-pick:hover { background: rgba(3, 36, 37, 0.62); transform: scale(1.06); }
.dash-hero-pick:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }

/* sheet */
.dash-hp { display: flex; flex-direction: column; min-height: 0; max-height: 72vh; }
.dash-hp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; padding: 4px 18px 12px; overflow-y: auto; min-height: 0; flex: 1; }
.dash-hp-opt {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 5px 5px 7px; margin: 0; border-radius: 12px; cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--ad-surface) 70%, transparent); border: 1.5px solid var(--ad-border); color: var(--ad-text); font-family: var(--ad-font-body);
}
.dash-hp-opt:hover { border-color: color-mix(in srgb, var(--ad-accent-deep) 60%, var(--ad-border)); }
.dash-hp-opt:focus-visible { outline: 2px solid var(--ad-accent-deep); outline-offset: 2px; }
.dash-hp-opt.is-on { border-color: var(--ad-accent-deep); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ad-accent-deep) 30%, transparent); }
.dash-hp-opt.is-on::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 12px; height: 12px; border-radius: 999px;
  background: var(--ad-accent); box-shadow: 0 0 0 2px rgba(3, 36, 37, 0.7);
}
.dash-hp-thumb { display: block; width: 100%; aspect-ratio: 12 / 5; object-fit: cover; border-radius: 8px; background: var(--dash-stage-a); }
.dash-hp-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--ad-text-subtle); background: color-mix(in srgb, var(--ad-brand) 6%, transparent); }
.dash-hp-label { font-size: 12px; font-weight: 600; line-height: 1.25; padding: 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-hp-actions { flex-shrink: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 4px 18px 8px; }
.dash-hp-upload {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ad-border); background: var(--ad-surface); color: var(--ad-text); font-family: var(--ad-font-body); font-size: 12.5px; font-weight: 600;
}
.dash-hp-upload:hover { border-color: var(--ad-accent-deep); }
.dash-hp-upload:disabled { opacity: .55; cursor: progress; }
.dash-hp-hint { font-size: 11.5px; color: var(--ad-text-subtle); }
.dash-hp-status { flex-shrink: 0; padding: 0 18px 8px; display: flex; flex-direction: column; gap: 4px; }
.dash-hp-state { font-size: 12.5px; font-weight: 600; color: var(--ad-text-muted); }
.dash-hp-state.is-done { color: var(--ad-success-fg, var(--ad-success)); }
.dash-hp-state.is-error { color: var(--ad-danger-fg, var(--ad-danger)); }
.dash-hp-foot { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 18px 14px; border-top: 1px solid color-mix(in srgb, var(--ad-brand) 10%, transparent); }
.dash-hp-link { border: none; background: none; padding: 0; cursor: pointer; font-family: var(--ad-font-body); font-size: 12px; font-weight: 600; color: var(--ad-accent-deep); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .dash-hp-link, [data-theme="dark"] .dash-hp-credits a { color: var(--ad-accent); }
.dash-hp-sync { font-size: 11.5px; color: var(--ad-text-subtle); text-align: right; }
.dash-hp-credits { flex-shrink: 0; margin: 0; padding: 0 18px 14px 34px; font-size: 11.5px; line-height: 1.55; color: var(--ad-text-muted); max-height: 160px; overflow-y: auto; }
.dash-hp-credits a { color: var(--ad-accent-deep); }
@media (prefers-reduced-motion: reduce) { .dash-hero-pick { transition: none; } .dash-hero-pick:hover { transform: none; } }

/* Scrim, strengthened for real photos (B7, measured 2026-09-29 in the render harness): with the round-2 scrim the
   greeting reached only 3.39:1 (hero-07), 3.94:1 (hero-02) and 4.36:1 (hero-01) against the brightest 5 % of the
   pixels behind it. Same three layers, more Deep behind the greeting (left + top). */
.dash-hero-shade {
  background:
    linear-gradient(90deg, rgba(3, 36, 37, 0.88) 0%, rgba(3, 36, 37, 0.72) 30%, rgba(3, 36, 37, 0.22) 56%, rgba(3, 36, 37, 0) 70%),
    linear-gradient(270deg, rgba(3, 36, 37, 0.42) 0%, rgba(3, 36, 37, 0) 26%),
    linear-gradient(180deg, rgba(3, 36, 37, 0.32) 0%, rgba(3, 36, 37, 0) 36%);
}

/* FND-1987 section editor: the stage has the aspect ratio of the real hero (inline style), the photo is drawn with the hero's own style function */
.dash-hf { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.dash-hf-stage {
  position: relative; width: 100%; overflow: hidden; border-radius: 10px; background: var(--dash-stage-a); border: 1px solid var(--ad-border);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.dash-hf-stage:active { cursor: grabbing; }
.dash-hf-stage:focus-visible { outline: 2px solid var(--ad-accent-deep); outline-offset: 2px; }
.dash-hf-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.dash-hf-guide {
  position: absolute; left: 0; top: 0; bottom: 0; width: 46%; display: flex; align-items: center; padding-left: 12px; box-sizing: border-box;
  border-right: 1.5px dashed var(--ad-accent); background: linear-gradient(90deg, color-mix(in srgb, var(--ad-brand) 40%, transparent), transparent);
  color: var(--ad-accent); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; pointer-events: none;
}
.dash-hf-dot {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; pointer-events: none;
  background: var(--ad-accent); box-shadow: 0 0 0 2px var(--ad-brand), 0 0 0 4px var(--ad-accent-soft);
}
.dash-hf-readout { font-size: 12.5px; font-weight: 600; color: var(--ad-text); font-variant-numeric: tabular-nums; }
.dash-hf-zoom { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ad-text-muted); }
.dash-hf-zoom .dash-te-slider { flex: 1; min-width: 0; }
.dash-hf-hint { font-size: 12px; color: var(--ad-text-subtle); }

/* ── FND-2031: „Dashboard-Hintergrund“ (dashboard_background.jsx), per dashboard ───────────────────────────────────────────────
   .dash-dbg is the first child of the dashboard stage .dash-main: z-index -1 inside the isolated stage = above the stage's own surface, below
   the hero (its photo stays on top in its own box and dissolves into the background) and below every tile. Tiles, KPI boxes, chart cards and the
   right column keep their own opaque surfaces; what sits DIRECTLY on the stage gets its opaque surface skin while a background is set. */
.dash-main:has(> .dash-dbg) {
  position: relative;
  /* the controls on the stage get their opaque surface skin: their text never sits on an arbitrary colour */
  --dash-ctl-bg: var(--ad-surface); --dash-ctl-bg-hover: var(--ad-surface-2); --dash-ctl-border: var(--ad-border-strong);
  --dash-ctl-fg: var(--ad-text); --dash-ctl-dash: var(--ad-border-strong);
}
.dash-main:has(> .dash-dbg) :is(.dash-sync, .dash-sync-note, .dash-empty) { background: var(--ad-surface); color: var(--ad-text-muted); }
.dash-main:has(> .dash-dbg) .dash-sync { padding: 3px 9px; border-radius: 999px; }
.dash-dbg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }

/* sheet section */
.dash-gr-sheet { flex-shrink: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: 2px 18px 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ad-border); background: color-mix(in srgb, var(--ad-surface) 70%, transparent); }
.dash-gr-sheet-text { flex: 1; min-width: 150px; }
.dash-gr-sheet-title { font-size: 13px; font-weight: 700; color: var(--ad-text); }
.dash-gr-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ad-text); cursor: pointer; }
/* swatches show alpha over a checkerboard */
.dash-gr-swatch, .dash-gr-bar, .dash-gr-chip, .dash-gr-range input.has-track {
  --dash-gr-checker: repeating-conic-gradient(var(--ad-surface-2) 0% 25%, var(--ad-surface) 0% 50%) 0 0 / 10px 10px;
}
.dash-gr-swatch { display: inline-block; flex-shrink: 0; width: 22px; height: 16px; border-radius: 5px; border: 1px solid var(--ad-border-strong); background: var(--dash-gr-sw), var(--dash-gr-checker); }
.dash-gr-swatch.is-big { width: 54px; height: 34px; border-radius: 8px; }

/* editor */
.dash-gr { display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px; }
.dash-gr-stage { position: relative; width: 100%; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, var(--dash-stage-a), var(--dash-stage-b)); border: 1px solid var(--ad-border); user-select: none; -webkit-user-select: none; touch-action: none; }
.dash-gr-stage.is-radial { cursor: crosshair; }
.dash-gr-hero {
  position: absolute; left: 0; right: 0; top: 0; overflow: hidden; z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.dash-gr-hero .dash-hero-shade { position: absolute; inset: 0; }
.dash-gr-tiles { z-index: 2; position: absolute; left: 3%; right: 3%; bottom: 6%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3%; padding-top: 2%; }
.dash-gr-tiles i { display: block; border-radius: 8px; background: var(--ad-surface); box-shadow: 0 2px 8px color-mix(in srgb, var(--ad-brand) 18%, transparent); }
.dash-gr-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
.dash-gr-text { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-left: 4%; box-sizing: border-box; color: var(--dash-stage-text); pointer-events: none; }
.dash-gr-text b { font-family: var(--ad-font-display); font-size: clamp(14px, 3.2vw, 22px); font-weight: 600; letter-spacing: -0.01em; }
.dash-gr-text span { font-size: clamp(11px, 1.8vw, 13px); opacity: 0.86; }
.dash-gr-center { z-index: 3; position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; pointer-events: none; background: var(--ad-surface); box-shadow: 0 0 0 2px var(--ad-brand), 0 2px 6px color-mix(in srgb, black 35%, transparent); }
.dash-gr-readout { font-size: 12.5px; font-weight: 600; color: var(--ad-text); }
.dash-gr-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.dash-gr-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-gr-preset { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 6px; border-radius: 999px; cursor: pointer; border: 1px solid var(--ad-border); background: var(--ad-surface); color: var(--ad-text); font-family: var(--ad-font-body); font-size: 12px; font-weight: 600; }
.dash-gr-preset:hover { border-color: var(--ad-accent-deep); }
.dash-gr-preset:focus-visible, .dash-gr-seg-opt:focus-visible, .dash-gr-dial:focus-visible, .dash-gr-mark:focus-visible { outline: 2px solid var(--ad-accent-deep); outline-offset: 2px; }
.dash-gr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px 22px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dash-gr-grid.is-single { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
.dash-gr-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-gr-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dash-gr-cap { font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ad-text-muted); }
.dash-gr-cap em { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ad-text-subtle); margin-left: 6px; }
.dash-gr-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 999px; background: var(--ad-surface-2); border: 1px solid var(--ad-border); align-self: flex-start; max-width: 100%; }
.dash-gr-seg-opt { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: none; border-radius: 999px; cursor: pointer; background: transparent; color: var(--ad-text-muted); font-family: var(--ad-font-body); font-size: 12px; font-weight: 600; white-space: nowrap; }
.dash-gr-seg-opt.is-on { background: var(--ad-surface); color: var(--ad-text); box-shadow: 0 1px 3px color-mix(in srgb, var(--ad-brand) 16%, transparent); }
.dash-gr-angle-row { display: flex; align-items: center; gap: 14px; }
.dash-gr-dial { width: 92px; height: 92px; flex-shrink: 0; border-radius: 999px; cursor: grab; touch-action: none; }
.dash-gr-dial[aria-disabled="true"] { cursor: default; }
.dash-gr-dial-ring { fill: var(--ad-surface-2); stroke: var(--ad-border-strong); stroke-width: 1.5; }
.dash-gr-dial-tick { stroke: var(--ad-text-subtle); stroke-width: 1.5; stroke-linecap: round; }
.dash-gr-dial-hand { stroke: var(--ad-accent-deep); stroke-width: 3; stroke-linecap: round; }
.dash-gr-dial-knob { fill: var(--ad-accent); stroke: var(--ad-brand); stroke-width: 2; }
.dash-gr-dial-hub { fill: var(--ad-brand); }
.dash-gr-anglenum { display: inline-flex; align-items: center; gap: 6px; }
.dash-gr-range { display: grid; grid-template-columns: 82px minmax(0, 1fr) 54px auto; align-items: center; gap: 8px; font-size: 12px; color: var(--ad-text-muted); }
.dash-gr-range-label { font-weight: 600; color: var(--ad-text-muted); font-size: 12px; }
.dash-gr-range input[type="range"] { width: 100%; min-width: 0; margin: 0; accent-color: var(--ad-accent-deep); }
.dash-gr-range input.has-track { -webkit-appearance: none; appearance: none; height: 14px; border-radius: 999px; border: 1px solid var(--ad-border-strong); background: var(--dash-gr-track), var(--dash-gr-checker); }
.dash-gr-range input.has-track::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 999px; background: var(--ad-surface); border: 2px solid var(--ad-brand); box-shadow: 0 1px 4px color-mix(in srgb, black 35%, transparent); cursor: pointer; }
.dash-gr-range input.has-track::-moz-range-thumb { width: 14px; height: 14px; border-radius: 999px; background: var(--ad-surface); border: 2px solid var(--ad-brand); box-shadow: 0 1px 4px color-mix(in srgb, black 35%, transparent); cursor: pointer; }
.dash-gr-range input.has-track::-moz-range-track { background: transparent; }
.dash-gr-range input.has-track:focus-visible { outline: 2px solid var(--ad-accent-deep); outline-offset: 2px; }
.dash-gr-num, .dash-gr-hex { box-sizing: border-box; width: 100%; height: 30px; padding: 0 6px; border-radius: 8px; border: 1.5px solid var(--ad-border-strong); background: var(--ad-surface); color: var(--ad-text); font-family: var(--ad-font-body); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dash-gr-anglenum .dash-gr-num { width: 66px; }
.dash-gr-hex { width: 96px; text-transform: uppercase; font-family: var(--ad-font-mono, ui-monospace, monospace); }
.dash-gr-hex[aria-invalid="true"] { border-color: var(--ad-danger); }
.dash-gr-unit { font-size: 12px; color: var(--ad-text-subtle); }
.dash-gr-sizerow { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 8px; }
.dash-gr-hint { font-size: 12px; color: var(--ad-text-subtle); }
.dash-gr-bar-wrap { padding: 0 9px; }
.dash-gr-bar { position: relative; height: 28px; border-radius: 8px; border: 1px solid var(--ad-border-strong); background: var(--dash-gr-bar), var(--dash-gr-checker); cursor: copy; touch-action: none; }
.dash-gr-mark {
  position: absolute; top: 50%; width: 18px; height: 34px; margin: -17px 0 0 -9px; padding: 0; border-radius: 6px; cursor: ew-resize; touch-action: none;
  background: var(--dash-gr-mark); border: 2px solid var(--ad-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ad-brand) 55%, transparent), 0 2px 6px color-mix(in srgb, black 30%, transparent);
}
.dash-gr-mark.is-sel { border-color: var(--ad-brand); box-shadow: 0 0 0 2px var(--ad-surface), 0 0 0 4px var(--ad-accent-deep), 0 2px 6px color-mix(in srgb, black 30%, transparent); z-index: 1; }
.dash-gr-stopacts { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-gr-colorhead { display: flex; align-items: center; gap: 8px; }
.dash-gr-chip { width: 34px; height: 30px; border-radius: 8px; border: 1px solid var(--ad-border-strong); background: linear-gradient(var(--dash-gr-chip), var(--dash-gr-chip)), var(--dash-gr-checker); }
.dash-gr-native { width: 38px; height: 30px; padding: 0 2px; border-radius: 8px; border: 1.5px solid var(--ad-border-strong); background: var(--ad-surface); cursor: pointer; }
@media (max-width: 640px) {
  .dash-gr-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-gr-range { grid-template-columns: 70px minmax(0, 1fr) 50px auto; gap: 6px; }
  .dash-gr-sizerow { grid-template-columns: 70px minmax(0, 1fr); }
  .dash-gr-seg-opt { padding: 0 9px; }
}