/*
 * DESIGN „WIDE STUDIO“ (Konzept N, Papier KI_BildTool_Wide_Studio_Design_und_Todo_Konzept.md, 2026-09-29).
 *
 * Geladen nach app.css; greift nur unter :root[data-design="wide"] bzw. "wide_light". Zwei Achsen:
 *   1. TOKENS: dunkel, technisch, ruhig - Relief (Neumorphismus) wird flach, duenne Linien statt Schatten,
 *      Farben nur aus dem CD (Schwarz-Tonwerte + Marken-Rot #E2003D, s. docs/CD_FARBEN.md).
 *   2. LAYOUT (data-layout="wide", gesetzt von design_switch.js): linke Schrittleiste weg, Workflow-Leiste
 *      oben, Buehne breit, Inspektor rechts, Verlauf als Bodenleiste, „Zuletzt erzeugt“ darunter.
 * Identitaet kommt aus Struktur, Raster und Annotationen - nicht aus Farbe (Papier §7.3).
 *
 * "wide" ist immer dunkel (design_switch.js setzt data-theme="dark"); "wide_light" ist die helle Fassung
 * mit denselben Rastern. Kontraste: ink #ededed auf #121212 15,3:1; muted #a8a8a8 auf #1a1a1a 6,6:1;
 * Rot als Flaeche auf #121212 3,8:1 (>= 3:1 UI), weiss auf Rot 4,88:1; brand-deep #ef6a8c als Schrift 6,2:1.
 * Hell: ink #1c1c1c auf #f4f4f2 15,6:1; muted #5d5d5d 5,7:1; brand-deep #c00034 5,6:1.
 */

/* ---------------------------------------------------------------- 1 · Tokens dunkel (wide) */
:root[data-design="wide"],
:root[data-design="wide"][data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #121212;
  --c-surface: #1a1a1a;
  --c-surface-2: #222222;
  --c-ink: #ededed;
  --c-ink-2: #cfcfcf;
  --c-muted: #a8a8a8;
  --c-muted-deep: #a8a8a8;
  --c-line: #2c2c2c;
  --c-brand: #e2003d;
  --c-brand-ink: #ffffff;
  --c-brand-deep: #ef6a8c;
  --c-brand-soft: #35101a;
  --c-ok: #5fc98d;   --c-ok-soft: #14301f;
  --c-warn: #e0a83a; --c-warn-soft: #33260d;
  --c-err: #ff8095;  --c-err-soft: #3d1119;
  --c-accent: #cfcfcf; --c-accent-soft: #222222;

  /* Relief -> flach: Kanten als 1-px-Linie, Vertiefungen als dunklere Flaeche. */
  --nm-light: transparent; --nm-dark: transparent;
  --nm-1: 0 0 0 1px var(--c-line);
  --nm-2: 0 0 0 1px var(--c-line), 0 8px 24px rgba(0, 0, 0, .45);
  --nm-3: 0 0 0 1px var(--c-line), 0 14px 40px rgba(0, 0, 0, .55);
  --nm-in: inset 0 0 0 1px var(--c-line);
  --nm-in-deep: inset 0 0 0 1px var(--c-line);
  --nm-face: var(--c-surface);
  --nm-face-in: #0e0e0e;
  --nm-brand-face: var(--c-brand);
  --nm-brand-face-in: #c00034;
  --nm-brand-dark: transparent;

  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-pill: 999px;
  --bg: var(--c-bg); --surface: var(--c-surface); --border: var(--c-line); --text: var(--c-ink); --muted: var(--c-muted);
  --radius: var(--r-sm); --shadow: var(--nm-2);
}

/* ---------------------------------------------------------------- 2 · Tokens hell (wide_light) */
:root[data-design="wide_light"] {
  --c-bg: #f4f4f2;
  --c-surface: #ffffff;
  --c-surface-2: #ebebe8;
  --c-ink: #1c1c1c;
  --c-ink-2: #3f3f3f;
  --c-muted: #5d5d5d;
  --c-muted-deep: #5d5d5d;
  --c-line: #d6d6d2;
  --c-brand: #e2003d; --c-brand-ink: #ffffff; --c-brand-deep: #c00034; --c-brand-soft: #fce6ec;
  --nm-light: transparent; --nm-dark: transparent;
  --nm-1: 0 0 0 1px var(--c-line);
  --nm-2: 0 0 0 1px var(--c-line), 0 8px 24px rgba(0, 0, 0, .08);
  --nm-3: 0 0 0 1px var(--c-line), 0 14px 40px rgba(0, 0, 0, .12);
  --nm-in: inset 0 0 0 1px var(--c-line);
  --nm-in-deep: inset 0 0 0 1px var(--c-line);
  --nm-face: var(--c-surface);
  --nm-face-in: #ecece9;
  --nm-brand-face: var(--c-brand); --nm-brand-face-in: #c00034; --nm-brand-dark: transparent;
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px;
  --bg: var(--c-bg); --surface: var(--c-surface); --border: var(--c-line); --text: var(--c-ink); --muted: var(--c-muted); --radius: var(--r-sm); --shadow: var(--nm-2);
}
:root[data-design="wide_light"][data-theme="dark"] {
  --c-bg: #121212; --c-surface: #1a1a1a; --c-surface-2: #222222; --c-ink: #ededed; --c-ink-2: #cfcfcf; --c-muted: #a8a8a8; --c-muted-deep: #a8a8a8; --c-line: #2c2c2c;
  --c-brand-deep: #ef6a8c; --c-brand-soft: #35101a; --nm-face-in: #0e0e0e; --nm-2: 0 0 0 1px var(--c-line), 0 8px 24px rgba(0, 0, 0, .45); --nm-3: 0 0 0 1px var(--c-line), 0 14px 40px rgba(0, 0, 0, .55);
}

/* ---------------------------------------------------------------- 3 · Blueprint-Charakter (beide) */
:root[data-design="wide"] body,
:root[data-design="wide_light"] body {
  /* Feines technisches Raster im Grund: 24 px, sehr leise (Papier §4.2 „subtil, nicht ueberladen“). */
  background-color: var(--c-bg);
  background-image: linear-gradient(to right, rgba(127, 127, 127, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(127, 127, 127, .07) 1px, transparent 1px);
  background-size: 24px 24px;
}
:root[data-design="wide"] .app-header,
:root[data-design="wide_light"] .app-header { background: var(--c-surface); box-shadow: 0 1px 0 var(--c-line); }
:root[data-design="wide"] .app-header__logo,
:root[data-design="wide_light"] .app-header__logo { border-radius: 4px; }
/* Bildmulde: Blueprint-Raster mit Messlinien-Rahmen; das Bild selbst liegt darueber. */
:root[data-design="wide"] .stage-placeholder, :root[data-design="wide"] .view,
:root[data-design="wide_light"] .stage-placeholder, :root[data-design="wide_light"] .view {
  border-radius: var(--r-md);
  background-color: var(--nm-face-in);
  background-image: linear-gradient(to right, rgba(127, 127, 127, .12) 1px, transparent 1px), linear-gradient(to bottom, rgba(127, 127, 127, .12) 1px, transparent 1px), linear-gradient(to right, rgba(127, 127, 127, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(127, 127, 127, .06) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  box-shadow: inset 0 0 0 1px var(--c-line), inset 0 0 0 9px var(--nm-face-in), inset 0 0 0 10px var(--c-line);
}
/* Eckmarken (technische Marker) an der Bildmulde. */
:root[data-design="wide"] .stage-placeholder::before, :root[data-design="wide"] .view::before,
:root[data-design="wide_light"] .stage-placeholder::before, :root[data-design="wide_light"] .view::before {
  content: ""; position: absolute; inset: 14px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--c-muted), var(--c-muted)) top left / 14px 1px no-repeat, linear-gradient(var(--c-muted), var(--c-muted)) top left / 1px 14px no-repeat,
    linear-gradient(var(--c-muted), var(--c-muted)) top right / 14px 1px no-repeat, linear-gradient(var(--c-muted), var(--c-muted)) top right / 1px 14px no-repeat,
    linear-gradient(var(--c-muted), var(--c-muted)) bottom left / 14px 1px no-repeat, linear-gradient(var(--c-muted), var(--c-muted)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--c-muted), var(--c-muted)) bottom right / 14px 1px no-repeat, linear-gradient(var(--c-muted), var(--c-muted)) bottom right / 1px 14px no-repeat;
  opacity: .8;
}
/* Karten, Knoepfe, Chips: flach, duenne Linie, klare Typohierarchie. */
:root[data-design="wide"] .card, :root[data-design="wide_light"] .card { border-radius: var(--r-md); }
:root[data-design="wide"] .chip, :root[data-design="wide_light"] .chip { border-radius: 4px; font-weight: 600; letter-spacing: .01em; }
:root[data-design="wide"] .chip[aria-pressed="true"], :root[data-design="wide"] .chip--on,
:root[data-design="wide_light"] .chip[aria-pressed="true"], :root[data-design="wide_light"] .chip--on { box-shadow: inset 0 0 0 1px var(--c-brand); color: var(--c-brand-deep); background: var(--c-brand-soft); }
:root[data-design="wide"] .btn, :root[data-design="wide_light"] .btn { border-radius: 4px; }
:root[data-design="wide"] .card__title, :root[data-design="wide"] .iter-block-title, :root[data-design="wide"] h4,
:root[data-design="wide_light"] .card__title, :root[data-design="wide_light"] .iter-block-title, :root[data-design="wide_light"] h4 { letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; color: var(--c-muted); }
/* Inspektor-Akkordeon: Kopf als technische Zeile mit Linie statt Relief. */
:root[data-design="wide"] .inspector-acc__head, :root[data-design="wide_light"] .inspector-acc__head { border-radius: 4px; box-shadow: 0 0 0 1px var(--c-line); }
:root[data-design="wide"] .inspector-acc__head[aria-expanded="true"], :root[data-design="wide_light"] .inspector-acc__head[aria-expanded="true"] { box-shadow: 0 0 0 1px var(--c-brand); }
/* Editoren (2D/3D): Werkzeugleisten flach, Canvas mit Blueprint-Rand. */
:root[data-design="wide"] .ed__tools, :root[data-design="wide_light"] .ed__tools { box-shadow: 0 0 0 1px var(--c-line); border-radius: 6px; }
:root[data-design="wide"] .ed__tool, :root[data-design="wide_light"] .ed__tool { border-radius: 4px; }

/* ---------------------------------------------------------------- 4 · Layout wide (data-layout, alle Breiten >= 900) */
:root[data-layout="wide"] .flow-panel { display: none; }
:root[data-layout="wide"] .studio-layout,
:root[data-layout="wide"] .studio-layout--done,
:root[data-layout="wide"] .studio-layout:has(> #sidePanel:not([hidden])),
:root[data-layout="wide"] .studio-layout:has(> #sidePanel[hidden]) {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  grid-template-areas:
    "wf wf"
    "main inspector"
    "bottom bottom"
    "recent recent";
  gap: var(--sp-4);
}
:root[data-layout="wide"] .studio-layout:has(> #sidePanel[hidden]) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "wf"
    "main"
    "bottom"
    "recent";
}
:root[data-layout="wide"] .app-main { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
:root[data-layout="wide"] #sidePanel { padding: var(--sp-2) var(--sp-3) var(--sp-4); }
/* Bodenleiste: Verlauf kompakt, Kopf als technische Zeile. */
:root[data-layout="wide"] .bottom-strip__head { border-radius: 4px; }
/* Bei < 900 gilt das Einspalten-Layout aus app.css; Workflow-Leiste oben, Bodenleiste unten. */
@media (max-width: 899px) {
  :root[data-layout="wide"] #workflowBar { order: 0; }
  :root[data-layout="wide"] #bottomStrip { order: 8; }
  :root[data-layout="wide"] .flow-panel { display: contents; }
  :root[data-layout="wide"] #flowSteps { display: none; }
}
@media (max-width: 1279px) {
  :root[data-layout="wide"] .studio-layout,
  :root[data-layout="wide"] .studio-layout--done,
  :root[data-layout="wide"] .studio-layout:has(> #sidePanel:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    grid-template-areas:
      "wf wf"
      "main inspector"
      "bottom bottom"
      "recent recent";
  }
  :root[data-layout="wide"] #sidePanel { position: sticky; top: var(--sp-3); max-height: calc(100vh - var(--sp-5)); overflow-y: auto; }
}