/* Wygląd diagramu. Kolory z motywu themewright (zmienne --thw-*, wspólne z formwright i stagewright), bez wartości
   zastępczych: strona ładuje motyw themewright (np. `themewright/themes/default.css`), jedno źródło kolorów, a motyw
   aplikacji je zmienia: `.panel { --thw-tone-accent: var(--brand); }`. Kolory motywu mają parę dzień/noc
   (`light-dark()`), a o trybie decyduje `color-scheme` strony; krój dziedziczy się ze strony. Własne zmienne
   diagramu to --dw-*.
   Potrzebny jest też arkusz diagram-js (`diagram-js/assets/diagram-js.css`) – położenie nakładek, warstwy płótna.
   Wszystko w warstwie `@layer diagramwright`, więc style aplikacji wygrywają bez walki o specyficzność. */
@layer diagramwright {
.djs-container {
  --dw-ink: var(--thw-ink);
  --dw-muted: var(--thw-muted);
  --dw-paper: var(--thw-surface);
  --dw-subtle: var(--thw-page);
  --dw-accent: var(--thw-tone-accent);
  --dw-accent-ink: var(--thw-accent-ink);
  --dw-danger: var(--thw-tone-danger);
  --dw-danger-ink: var(--thw-page);
  --dw-warning: var(--thw-tone-warning);
  /* Pierścień fokusu z akcentu (themewright go nie ma; formwright liczy swój tak samo). */
  --dw-ring: 0 0 0 3px color-mix(in srgb, var(--dw-accent) 25%, transparent);
  background: var(--dw-subtle);
  /* Osobny kontekst warstw: z-index pola nazwy, palety i warstw diagram-js działa tylko w płótnie, więc nie wychodzi
     ponad elementy strony (np. przyklejony pasek ramy aplikacji, pod którym przewija się treść). */
  isolation: isolate;
}
/* Zmienne arkusza diagram-js (zaznaczenie, zgięcia) z naszych. Na płótnie, a nie na kontenerze, bo na kontenerze
   ustawia je arkusz diagram-js, który jest poza warstwą i wygrywa. */
.djs-container svg {
  --element-selected-outline-stroke-color: var(--dw-accent);
  --element-dragger-color: var(--dw-accent);
  --bendpoint-fill-color: var(--dw-accent);
  --bendpoint-stroke-color: var(--dw-paper);
}
/* Fokus jak w formwright: pierścień z akcentu (wewnątrz płótna, bo kontener przycina to, co wystaje). */
.djs-container svg:focus-visible {
  outline: none;
  box-shadow: inset var(--dw-ring);
}

/* Kształt (`dw-shape` – obrys kształtu notacji) w tonie: lekkie tło (9% tonu, jak tło tonu w themewright) i obrys
   w tonie. Ton od aplikacji (`setTones`, `--dw-app-tone` na grupie elementu) ma pierwszeństwo przed tonem rodzaju
   (`--dw-tone`, z rejestru rodzajów notacji – `tone`); bez obu – papier i tusz. Modyfikatory bez nazw z notacji:
   `dw-strong` – gruby obrys, `dw-dashed` – przerywany obrys albo linia krawędzi, `dw-inner` – wewnętrzny obrys w tonie, `dw-solid` – pełne
   wypełnienie tuszem, `dw-hit` – niewidoczny obszar (kliknięcie), `dw-separator` – linia przerywana w środku kształtu,
   `dw-divider` – kreska w kształcie. */
.dw-shape {
  fill: color-mix(in srgb, var(--dw-app-tone, var(--dw-tone, var(--dw-paper))) 9%, var(--dw-paper));
  stroke: var(--dw-app-tone, var(--dw-tone, var(--dw-ink))); stroke-width: 1.5px;
}
.dw-strong { stroke-width: 4px; }
.dw-dashed { stroke-dasharray: 4 2; }
.dw-inner { fill: none; stroke: var(--dw-app-tone, var(--dw-tone, var(--dw-ink))); stroke-width: 1px; }
.dw-solid { fill: var(--dw-ink); stroke: none; }
.dw-divider { stroke: var(--dw-app-tone, var(--dw-tone, var(--dw-ink))); stroke-width: 1px; }
.dw-hit { fill: transparent; stroke: none; }
.dw-separator { stroke: var(--dw-muted); stroke-width: 1.5px; stroke-dasharray: 6 4; }
.dw-marker { fill: var(--dw-paper); stroke: var(--dw-ink); stroke-width: 1px; }
.dw-marker-filled { fill: var(--dw-ink); stroke: var(--dw-ink); stroke-width: 1px; stroke-linejoin: round; }
.dw-marker-line { fill: none; stroke: var(--dw-ink); stroke-width: 1.5px; stroke-linecap: round; }
.dw-thick { stroke-width: 3px; }
.dw-ring { fill: var(--dw-paper); stroke: var(--dw-ink); stroke-width: 1.5px; }
.dw-icon { fill: var(--dw-paper); stroke: var(--dw-muted); stroke-width: 1px; }
.dw-icon-line { fill: none; stroke: var(--dw-muted); stroke-width: 2.5px; }
.dw-flow { fill: none; stroke: var(--dw-ink); stroke-width: 1.5px; stroke-linejoin: round; }
.dw-arrow { fill: var(--dw-ink); stroke: none; }
/* Podpis z obwódką w kolorze tła, żeby był czytelny także na linii przepływu. */
.dw-label { fill: var(--dw-ink); }
.djs-label .dw-label { paint-order: stroke; stroke: var(--dw-subtle); stroke-width: 4px; stroke-linejoin: round; }

/* Edytor. Zaznaczenie widać nie tylko po kolorze: kształt dostaje przerywaną ramkę (obrys diagram-js), połączenie –
   przerywaną linię pod sobą i uchwyty zgięć. */
.djs-element.selected .djs-outline { stroke-dasharray: 6 3; }
.djs-connection.selected .dw-flow { stroke-dasharray: 8 4; stroke-width: 2.5px; }
.dw-rename {
  position: absolute; z-index: 10; box-sizing: border-box; transform: translate(-50%, -50%); padding: 4px 6px;
  font: inherit; font-size: 13px; color: var(--dw-ink); background: var(--dw-paper);
  border: 1px solid var(--dw-accent); border-radius: 4px; outline: none;
  box-shadow: var(--dw-ring);
}
/* Paleta edytora: kolumna przycisków z ikonami w lewym górnym rogu płótna. */
.dw-palette {
  position: absolute; top: 8px; left: 8px; z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 4px;
  background: var(--dw-paper); border: 1px solid color-mix(in srgb, var(--dw-ink) 25%, transparent); border-radius: 6px;
}
.dw-tool {
  display: grid; place-items: center; width: 38px; height: 32px; padding: 0; color: var(--dw-ink);
  background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer;
}
.dw-tool:hover:not(:disabled) { background: var(--dw-subtle); border-color: color-mix(in srgb, var(--dw-ink) 25%, transparent); }
.dw-tool:focus-visible { outline: none; box-shadow: var(--dw-ring); }
.dw-tool:disabled { opacity: 0.4; cursor: default; }
.dw-tool[aria-pressed="true"] { background: var(--dw-subtle); border-color: var(--dw-accent); }
.dw-drawing .djs-shape { cursor: crosshair; }
.dw-tool-icon * { vector-effect: non-scaling-stroke; }
.dw-tool-line { fill: none; stroke: var(--dw-ink); stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
.dw-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Widok zawartości kształtu (np. podprocesu zwiniętego): przycisk wejścia nad znacznikiem „+” i ścieżka powrotu
   nad płótnem (w edytorze obok palety). */
.dw-door {
  display: block; box-sizing: border-box; width: 20px; height: 20px; padding: 0; background: transparent;
  border: 1px solid transparent; border-radius: 4px; cursor: pointer;
}
.dw-door:hover { border-color: var(--dw-accent); }
.dw-door:focus-visible { outline: none; border-color: var(--dw-accent); box-shadow: var(--dw-ring); }
.dw-path {
  position: absolute; top: 8px; left: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  max-width: calc(100% - 16px); padding: 4px 8px; font-size: 13px; color: var(--dw-ink); background: var(--dw-paper);
  border: 1px solid color-mix(in srgb, var(--dw-ink) 25%, transparent); border-radius: 6px;
}
.dw-path[hidden] { display: none; }
/* Obok palety: jej margines (8 px), szerokość (przycisk 38 px, odstęp 2 × 4 px, ramka 2 × 1 px) i odstęp 8 px. */
.djs-container:has(> .dw-palette) .dw-path { left: 64px; max-width: calc(100% - 72px); }
.dw-path button {
  padding: 2px 4px; font: inherit; color: var(--dw-accent); background: transparent; border: 0; border-radius: 4px;
  text-decoration: underline; cursor: pointer;
}
.dw-path button:focus-visible { outline: none; box-shadow: var(--dw-ring); }
.dw-path [aria-current] { font-weight: 600; }

/* Nakładka stanu, rozpoznawalna nie tylko po kolorze: wykonane – kolor akcentu z delikatnym tłem i „✓” (przepływ
   – grubsza linia), token – gruby obrys akcentu i kropka, incydent – obrys ostrzegawczy i „!”. */
.dw-done .dw-shape { fill: color-mix(in srgb, var(--dw-accent) 12%, var(--dw-paper)); stroke: var(--dw-accent); }
.dw-done .dw-flow { stroke: var(--dw-accent); stroke-width: 3px; }
.dw-done .dw-arrow { fill: var(--dw-accent); }
.dw-active .dw-shape { stroke: var(--dw-accent); stroke-width: 3px; }
.dw-incident .dw-shape { stroke: var(--dw-danger); stroke-width: 3px; }
/* Sterowane (np. przez proces, bez udziału oglądającego) – linia i obrys kropkowane; dostępne i ostatnie – znaczek. */
.dw-managed .dw-flow, .dw-managed .dw-shape { stroke-dasharray: 0.5 5; stroke-linecap: round; }
.dw-managed .dw-flow { stroke-width: 2.5px; }
/* Gruby obrys zostaje także w nakładce stanu. */
:is(.dw-active, .dw-incident) .dw-strong { stroke-width: 4px; }
.dw-badge {
  display: grid; place-items: center; box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%;
  font-size: 12px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--dw-paper);
}
.dw-badge-done, .dw-badge-active { background: var(--dw-accent); color: var(--dw-accent-ink); }
.dw-badge-active::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dw-accent-ink); }
.dw-badge-incident { background: var(--dw-danger); color: var(--dw-danger-ink); }
/* Problem modelu (`validate`): „!” tuszem na papierze w kwadracie z obwódką w tonie ostrzeżenia – odróżnia się od
   incydentu (pełne koło) kształtem, nie tylko kolorem; tusz na papierze i ton na papierze mają kontrast w każdym
   motywie themewright. */
.dw-badge-problem { background: var(--dw-paper); color: var(--dw-ink); border: 2px solid var(--dw-warning); border-radius: 3px; }
.dw-badge-available { background: var(--dw-paper); color: var(--dw-accent); border: 1.5px solid var(--dw-accent); }
.dw-badge-lock { background: var(--dw-paper); border: 1.5px solid var(--dw-muted); }
.dw-badge-lock svg { fill: var(--dw-muted); stroke: var(--dw-muted); stroke-width: 1.5px; }
.dw-badge-last { background: var(--dw-paper); color: var(--dw-ink); border: 1.5px solid var(--dw-ink); }
}