/* NahrAI — styly agendy „Schvalovací workflow" (modul workflow.js).

   Vlastní soubor, protože modul je samostatný; v2.css zůstává nedotčené.
   Všechno je scopované pod [data-ui="v2"] stejně jako zbytek portálu a barvy,
   mezery i rádiusy pocházejí výhradně z tokens.css — díky tomu funguje světlý
   i tmavý motiv bez jediného vlastního přepínače.

   Vlastní proměnné (--wf-*) jsou definované na [data-ui="v2"], protože právě
   tam tokens.css zakládá celý motiv; na holém :root by var(--line) a spol.
   neexistovaly. Jsou to odvozeniny, ne nové barvy. */

[data-ui="v2"] {
  /* Spojnice nese informaci (co následuje po čem), takže musí splnit
     WCAG 1.4.11 → 3:1 proti plátnu --bg-2. S --line-2 měla naměřeno 1,19:1
     (světlý) a 1,49:1 (tmavý) — šipky byly prakticky neviditelné.
     --field-line je sice zavedený pro nositele informace, ale je počítaný
     proti --surface; proti zapuštěnému --bg-2 vyjde jen 2,78:1 (naměřeno
     v prohlížeči). Proto --ink-3: naměřeno 4,31:1 ve světlém a 4,89:1
     v tmavém motivu, a to i pro okraj uzlu Upozornění.
     NEVRACET na --line-2 ani na --field-line. */
  --wf-edge:       var(--ink-3);           /* běžná spojnice v diagramu */
  --wf-edge-hot:   var(--accent);          /* prošlá cesta po simulaci */
  --wf-node-bg:    var(--surface);
  --wf-canvas-bg:  var(--bg-2);
  --wf-node-w:     196px;
  --wf-rail-w:     236px;                  /* PRAVÝ sloupec s paletou (od 18. 9. 2026) */
}

/* ============================================================
   Tónová paleta — jedno místo, odkud čerpají uzly, kroky i karty
   ============================================================ */
[data-ui="v2"] .wf-tone-accent { --wf-tone: var(--accent);  --wf-tone-soft: var(--accent-soft); --wf-tone-text: var(--accent-text); }
[data-ui="v2"] .wf-tone-info   { --wf-tone: var(--info);    --wf-tone-soft: var(--info-soft);   --wf-tone-text: var(--info); }
[data-ui="v2"] .wf-tone-warn   { --wf-tone: var(--warn);    --wf-tone-soft: var(--warn-soft);   --wf-tone-text: var(--warn); }
[data-ui="v2"] .wf-tone-ok     { --wf-tone: var(--ok);      --wf-tone-soft: var(--ok-soft);     --wf-tone-text: var(--ok); }
[data-ui="v2"] .wf-tone-bad    { --wf-tone: var(--bad);     --wf-tone-soft: var(--bad-soft);    --wf-tone-text: var(--bad); }
/* Tón „mut" nese uzel Upozornění. S --line-2 měl jeho okraj proti plátnu
   1,19:1 a krok v diagramu neměl viditelnou hranici vůbec; --ink-3 drží
   nad 3:1 ve světlém i tmavém motivu. NEVRACET na --line-2. */
[data-ui="v2"] .wf-tone-mut    { --wf-tone: var(--ink-3);   --wf-tone-soft: var(--bg-2);        --wf-tone-text: var(--ink-2); }

/* ============================================================
   Skořápka agendy
   ============================================================ */
[data-ui="v2"] .wf-root { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
[data-ui="v2"] .wf-body { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
[data-ui="v2"] .wf-stack { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }

[data-ui="v2"] .wf-head {
  display: flex; align-items: flex-end; gap: var(--sp-7); flex-wrap: wrap;
}
[data-ui="v2"] .wf-head-title { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
[data-ui="v2"] .wf-head-title h2 { margin: 0; color: var(--ink); }
[data-ui="v2"] .wf-head-title p { margin: 0; max-width: 72ch; }

[data-ui="v2"] .wf-spacer { flex: 1 1 auto; min-width: 0; }
[data-ui="v2"] .wf-muted { color: var(--ink-2); }
[data-ui="v2"] .wf-warn-text { color: var(--warn); font-weight: 600; }
[data-ui="v2"] .wf-sep { padding: 0 var(--sp-2); color: var(--ink-3); }

/* Skeleton při načítání — stejný rytmus jako .v2-docs-skeleton ve v2.css. */
[data-ui="v2"] .wf-skeleton { display: flex; flex-direction: column; gap: var(--sp-5); }
[data-ui="v2"] .wf-sk-row {
  height: 20px; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--bg-2), var(--surface-2), var(--bg-2));
  background-size: 200% 100%; animation: wf-sk 1.2s linear infinite;
}
@keyframes wf-sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

[data-ui="v2"] .wf-panel-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-7); border-bottom: 1px solid var(--line);
}
[data-ui="v2"] .wf-empty { padding: 40px var(--sp-9); }

/* ============================================================
   Seznam workflow
   ============================================================ */
[data-ui="v2"] .wf-list-head { align-items: flex-start; }
[data-ui="v2"] .wf-list-head p { margin: var(--sp-1) 0 0; max-width: 64ch; }

[data-ui="v2"] .wf-list-cols,
[data-ui="v2"] .wf-item {
  display: grid; align-items: center; gap: var(--sp-5);
  grid-template-columns: minmax(0, 2.2fr) minmax(110px, .8fr) minmax(190px, 1.1fr) minmax(150px, 1fr) auto;
  padding: var(--sp-5) var(--sp-7);
}
[data-ui="v2"] .wf-list-cols { padding-block: var(--sp-3); background: var(--surface-2); border-bottom: 1px solid var(--line); }
[data-ui="v2"] .wf-list-items { list-style: none; margin: 0; padding: 0; }
[data-ui="v2"] .wf-item { border-bottom: 1px solid var(--line); }
[data-ui="v2"] .wf-item:last-child { border-bottom: 0; }
[data-ui="v2"] .wf-item:hover { background: var(--surface-2); }
[data-ui="v2"] .wf-item.is-archived { opacity: .68; }
[data-ui="v2"] .wf-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-ui="v2"] .wf-item-name {
  border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left;
  color: var(--ink); font: 600 14.5px/1.35 var(--font-sans);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-ui="v2"] .wf-item-name:hover { color: var(--accent-text); text-decoration: underline; }
[data-ui="v2"] .wf-item-desc { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-ui="v2"] .wf-item-types,
[data-ui="v2"] .wf-item-state { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
[data-ui="v2"] .wf-item-pub { color: var(--ink-2); min-width: 0; }
[data-ui="v2"] .wf-item-act { display: flex; justify-content: flex-end; gap: var(--sp-3); }
[data-ui="v2"] .wf-list-foot {
  padding: var(--sp-4) var(--sp-7); border-top: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-3);
}

/* ============================================================
   Lišta designeru
   ============================================================ */
[data-ui="v2"] .wf-toolbar {
  position: sticky; top: var(--sticky-top); z-index: 5;
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--r-2xl);
  background: var(--surface); box-shadow: var(--shadow);
}
[data-ui="v2"] .wf-toolbar-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
[data-ui="v2"] .wf-toolbar-title > b {
  font: 700 15.5px/1.25 var(--font-sans); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-ui="v2"] .wf-toolbar-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
[data-ui="v2"] .wf-flash { margin: 0; }

/* Tlačítko, jehož akce právě běží (Uložit, Ověřit, Simulovat), je
   aria-disabled, ne disabled: zakázaný prvek fokus neudrží a ten po stisku
   klávesnicí spadl na <body> (viz busyLockAttr ve workflow.js). Opakovaný
   stisk zastaví model, tady jde jen o vzhled — stejný jako u vypnutého
   tlačítka ve v2.css, jen s kurzorem „pracuji“. Varianty :hover a :active
   přebíjejí zvednutí tlačítka, které v2.css dává všemu, co není :disabled. */
[data-ui="v2"] .wf-root .v2-btn[aria-disabled="true"],
[data-ui="v2"] .wf-root .v2-btn[aria-disabled="true"]:hover,
[data-ui="v2"] .wf-root .v2-btn[aria-disabled="true"]:active {
  opacity: .55; cursor: progress; box-shadow: none; transform: none;
}

/* Přepínač „Řídí doklady". Geometrie podle AGENTS.md: skutečné zaškrtávátko
   vlevo před popiskem, celý popisek klikatelný — žádná pravá dráha ani
   stavové slovo. Bez něj se publikované workflow nedalo z portálu zapnout
   a v seznamu svítilo „Neaktivní" proti hlášce o publikaci. */
[data-ui="v2"] .wf-active {
  display: flex; align-items: center; gap: var(--sp-3); cursor: pointer;
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink); font: 500 13px/1.3 var(--font-sans);
  white-space: nowrap;
}
[data-ui="v2"] .wf-active:hover { border-color: var(--line-2); }
[data-ui="v2"] .wf-active input[type="checkbox"] {
  margin: 0; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent);
}
[data-ui="v2"] .wf-active.is-disabled { cursor: default; color: var(--ink-2); }
[data-ui="v2"] .wf-active.is-disabled:hover { border-color: var(--line); }

/* v2.css má pro poznámkový box tóny bad/warn/ok, ale ne info — modul ho přitom
   používá pro vysvětlivky (poznámka simulátoru, upozornění před publikací),
   které se bez tohoto pravidla vykreslily jako šedý text bez tónu.
   Barvy z tokens.css, takže platí ve světlém i tmavém motivu.
   Scopováno pod .wf-root, aby soubor modulu nepřebarvoval zbytek portálu —
   dialogy modulu se vykreslují uvnitř .wf-root, takže je pravidlo pokrývá. */
[data-ui="v2"] .wf-root .v2-note.info {
  border-color: var(--info); background: var(--info-soft); color: var(--ink);
}

/* ============================================================
   Rozvržení designeru
   ============================================================ */
/* Tři sloupce: detail kroku | schéma | paleta — v tomhle pořadí stojí i v HTML
   (designerHtml ve workflow.js), mřížka je jen skládá vedle sebe.
   Šířka detailu je v procentech s pevným minimem, aby se na užším okně stáhl
   na minimum dřív, než se začne mačkat schéma. Formulář detailu zůstává
   v KAŽDÉ šířce v jednom sloupci — širší sloupec dává polím víc místa, ne druhý
   sloupec vedle (proč, viz komentář „Do 18. 9. 2026 …“ níž). Do 18. 9. 2026
   tu stálo, že se na širokém okně formulář „rozpadne do dvou sloupců“; ta
   heuristika je pryč a věta by k jejímu návratu zvala. Paleta je jen lišta
   tlačítek, té stačí pevná šířka. */
[data-ui="v2"] .wf-designer {
  display: grid; align-items: start; gap: var(--sp-7);
  grid-template-columns: minmax(340px, 30%) minmax(0, 1fr) var(--wf-rail-w);
}
[data-ui="v2"] .wf-col { display: flex; flex-direction: column; gap: var(--sp-7); min-width: 0; }
/* Lepí se detail i paleta — schéma je nejvyšší, takže při rolování dlouhým
   diagramem musí zůstat po ruce obojí: co nastavuju i čím přidávám. */
[data-ui="v2"] .wf-col-detail, [data-ui="v2"] .wf-col-palette {
  position: sticky; top: calc(var(--sticky-top) + 64px);
  max-height: calc(100vh - var(--sticky-top) - 96px); overflow: auto;
}
/* Karty ve sloupci se NESMĚJÍ smrštit. Sloupec je flex a .v2-card má
   overflow:hidden — tím se u položky flexboxu min-height:auto počítá jako
   nula, takže se karta místo přetečení stlačí přesně na strop sloupce.
   Sloupec pak nemá co rolovat (scrollHeight == clientHeight) a spodek
   karty se ořízne: na notebooku 1366x768 zůstalo pod řezem „Přidat krok
   za“ i polovina palety a myší se k nim nešlo dostat vůbec — klávesnicí
   ano, protože focus() odroluje kartu samotnou. Zákaz smrštění vrátí
   přetečení sloupci a jeho overflow:auto začne fungovat. */
[data-ui="v2"] .wf-col-detail > *, [data-ui="v2"] .wf-col-palette > * {
  flex: 0 0 auto;
}

/* Pořadí sloupců na obrazovce = pořadí v HTML. Žádné order, grid-column,
   grid-row ani grid-area, které by sloupce PŘESKLÁDALY: vlastnosti umístění
   v mřížce mění jen to, kde se prvek vykreslí, ne pořadí, v jakém stránku
   projde Tab a odečítač (CSS Grid, Reordering and Accessibility).
   Narazilo se na to dvakrát. Do 18. 9. 2026 dopoledne stál v HTML detail
   první a pod 1200 px ho order přesunul pod schéma. Oprava pak HTML otočila
   na schéma → detail → paleta a na širokém okně sloupce stavěla zpátky přes
   grid-column: 1 / 2 / 3 — rozpor se tím jen přestěhoval z pásu 1025–1200 px
   na každé okno nad 1200 px, tedy na hlavní rozvržení: Tab skočil nejdřív
   doprostřed, pak doleva, pak doprava. Když se má pořadí změnit, mění se
   v designerHtml, ne tady. */

/* Do 18. 9. 2026 se tady formulář detailu nad 1680 px lámal do dvou sloupců
   a o šířce pole rozhodoval TVAR ZNAČKY: co bylo <label>, to úzké, co <div>,
   to přes celou šířku. Obojí bylo vedle.

   Zúžilo to přesně ta pole, která šířku potřebují nejvíc: vícenásobný výběr
   „Pole k opravě“ u kroku Vrácení k úpravě (<select multiple size=6>) i vnořenou
   dvojici Lhůta / Eskalace u kroku Schválení (.wf-grid-2, sama o sobě dvousloupcová)
   jsou <label> respektive .wf-grid-2, takže spadly do poloviny sloupce — a ten
   je široký minmax(340px, 30%), tedy na monitoru 1680 px kolem 250 px na sloupec.
   A co zúžit mělo, se stejně nespárovalo: mezi dvěma úzkými poli vždycky stál
   blok přes celou šířku (schvalovatelé, limit, podmínkový strom), který začal
   nový řádek, takže úzké pole zůstalo samo s prázdným místem vedle sebe.

   Dvousloupcový detail se proto nekreslí vůbec. Kde mají dvě pole opravdu stát
   vedle sebe, říká to HTML výslovně třídou .wf-grid-2 — a ta funguje v každé
   šířce. NEVRACET zpátky heuristiku podle tvaru značky. */

@media (max-width: 1400px) {
  [data-ui="v2"] .wf-designer { grid-template-columns: minmax(300px, 34%) minmax(0, 1fr) 190px; }
}
@media (max-width: 1200px) {
  /* Pod 1200 px se tři sloupce vedle sebe nevejdou — vedle navigace portálu,
     detailu a palety by na schéma zbylo kolem 300 px. Detail a schéma proto
     zůstanou vedle sebe (krok se vybírá ve schématu a nastavuje v detailu, mají
     být vidět zároveň) a paleta, nejméně častá, se posadí do řádku pod ně přes
     celou šířku. Pořád je to pořadí z HTML čtené zleva doprava a shora dolů —
     detail, schéma, paleta —, takže Tab jde stejně jako oko.
     Dřív se tu sloupce skládaly pod sebe a o pořadí rozhodovalo order, potom
     grid-column; obojí rozvádělo obrazovku a Tab (viz komentář výš). */
  [data-ui="v2"] .wf-designer { grid-template-columns: minmax(280px, 38%) minmax(0, 1fr); }
  /* 1 / -1 paletu jen ROZTÁHNE přes oba sloupce; na jejím místě v pořadí
     (poslední) to nic nemění. */
  [data-ui="v2"] .wf-col-palette { grid-column: 1 / -1; }
  /* Nic se tu nelepí. Lepivý detail by při rolování zůstal viset přes řádek
     s paletou (lepivý prvek drží mřížka, ne jeho vlastní řádek) — v prohlížeči
     ověřeno 18. 9. 2026: tlačítka palety zajela pod kartu detailu. */
  [data-ui="v2"] .wf-col-detail, [data-ui="v2"] .wf-col-palette {
    position: static; max-height: none; overflow: visible;
  }
  /* V řádku přes celou šířku by tlačítka palety pod sebou zabrala zbytečně
     výšky; vedle sebe se vejdou. Mřížka je plní po řádcích v pořadí HTML. */
  [data-ui="v2"] .wf-col-palette .wf-palette-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
}

/* ============================================================
   Paleta kroků
   ============================================================ */
[data-ui="v2"] .wf-palette-help { margin: var(--sp-4) var(--sp-7) 0; }
[data-ui="v2"] .wf-palette-list { list-style: none; margin: 0; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
[data-ui="v2"] .wf-palette-btn {
  width: 100%; display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); cursor: pointer; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
[data-ui="v2"] .wf-palette-btn:hover { background: var(--wf-tone-soft); border-color: var(--wf-tone); }
[data-ui="v2"] .wf-palette-glyph {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--wf-tone-soft); color: var(--wf-tone-text);
}
[data-ui="v2"] .wf-palette-glyph svg { fill: currentColor; }
[data-ui="v2"] .wf-palette-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-ui="v2"] .wf-palette-text b { font: 600 13.5px/1.3 var(--font-sans); }
[data-ui="v2"] .wf-palette-text small { font: 400 11.5px/1.35 var(--font-sans); color: var(--ink-2); }
[data-ui="v2"] .wf-palette-add { margin-left: auto; font-size: 18px; color: var(--ink-3); }
[data-ui="v2"] .wf-palette-compact { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-5) var(--sp-7); }

/* ============================================================
   Diagram
   ============================================================ */
/* Diagram roste s počtem vrstev; bez stropu by jedno workflow udělalo ze
   stránky několikametrový svitek. Uvnitř se posouvá, stránka zůstane klidná. */
[data-ui="v2"] .wf-diagram-wrap {
  overflow: auto; padding: var(--sp-7); max-height: min(72vh, 760px);
  background:
    /* Mřížka je dekorace, ne nositel informace — smí zůstat tlumená.
       Kdyby dostala kontrast spojnic, plátno by zašumělo a šipky by v něm
       zanikly znovu. */
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--line-2) 70%, transparent) 1px, transparent 0)
    0 0 / 22px 22px,
    var(--wf-canvas-bg);
}
[data-ui="v2"] .wf-diagram-wrap.is-mini { max-height: 360px; padding: var(--sp-5); }
[data-ui="v2"] .wf-diagram { display: block; max-width: 100%; height: auto; }
[data-ui="v2"] .wf-empty-text { fill: var(--ink-3); font: 500 13px/1 var(--font-sans); }

[data-ui="v2"] .wf-edge { fill: none; stroke: var(--wf-edge); stroke-width: 1.75; }
[data-ui="v2"] .wf-edge.is-false { stroke-dasharray: 5 4; }
[data-ui="v2"] .wf-edge.is-hot { stroke: var(--wf-edge-hot); stroke-width: 2.75; stroke-dasharray: none; }
[data-ui="v2"] .wf-arrow { fill: var(--wf-edge); }
[data-ui="v2"] .wf-arrow.is-hot { fill: var(--wf-edge-hot); }

[data-ui="v2"] .wf-edge-tag rect { fill: var(--surface); stroke: var(--line-2); stroke-width: 1; }
[data-ui="v2"] .wf-edge-tag text { fill: var(--ink-2); font: 700 10.5px/1 var(--font-sans); letter-spacing: .06em; }
[data-ui="v2"] .wf-edge-tag.is-hot rect { fill: var(--accent-soft); stroke: var(--accent); }
[data-ui="v2"] .wf-edge-tag.is-hot text { fill: var(--accent-text); }

[data-ui="v2"] .wf-node { cursor: pointer; }
[data-ui="v2"] .wf-diagram.is-readonly .wf-node { cursor: default; }
[data-ui="v2"] .wf-node .wf-shape {
  fill: var(--wf-node-bg); stroke: var(--wf-tone); stroke-width: 1.5;
  transition: stroke-width var(--dur-fast) var(--ease);
}
[data-ui="v2"] .wf-node:hover .wf-shape { stroke-width: 2.25; }
[data-ui="v2"] .wf-node-glyph rect { fill: var(--wf-tone-soft); }
[data-ui="v2"] .wf-node-glyph .wf-glyph { fill: var(--wf-tone-text); }
[data-ui="v2"] .wf-node-eyebrow { fill: var(--wf-tone-text); font: 700 10px/1 var(--font-sans); letter-spacing: .09em; }
[data-ui="v2"] .wf-node-label { fill: var(--ink); font: 600 13.5px/1 var(--font-sans); }
[data-ui="v2"] .wf-node-meta { fill: var(--ink-3); font: 400 11.5px/1 var(--font-sans); }

[data-ui="v2"] .wf-node.is-selected .wf-shape { stroke-width: 3; }
[data-ui="v2"] .wf-node.is-selected .wf-node-label { fill: var(--wf-tone-text); }
[data-ui="v2"] .wf-node.is-hot .wf-shape { stroke: var(--accent); stroke-width: 2.75; fill: var(--accent-soft); }

/* ============================================================
   Vybraný uzel a přesouvání myší
   ============================================================
   Ohlášeno 18. 9. 2026: ze schématu nešlo poznat, který krok je zrovna
   otevřený v detailu — silnější obrys sám o sobě na to nestačil. Ostatní
   uzly se proto ztlumí. Ztlumení je mírné: jde o ustoupení do pozadí, ne
   o zmizení.

   Ztlumuje se GRAFIKA uzlu, ne jeho text. Dokud opacita seděla na celém
   .wf-node, spadly s ní i názvy kroků a nadpisky — a protože designer má
   vždycky nějaký krok vybraný, bylo schéma trvale hůř čitelné právě v tom,
   kvůli čemu se do něj člověk dívá: kudy doklad půjde a jak se kroky
   jmenují. Popisky proto zůstávají v plné sytosti a ustupuje jen tvar
   a ikona. */
[data-ui="v2"] .wf-diagram .wf-node,
[data-ui="v2"] .wf-diagram .wf-shape,
[data-ui="v2"] .wf-diagram .wf-node-glyph {
  transition: opacity var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
[data-ui="v2"] .wf-diagram.is-focused .wf-node .wf-shape,
[data-ui="v2"] .wf-diagram.is-focused .wf-node .wf-node-glyph {
  opacity: .45; filter: saturate(.5);
}
[data-ui="v2"] .wf-diagram.is-focused .wf-node .wf-node-label,
[data-ui="v2"] .wf-diagram.is-focused .wf-node .wf-node-eyebrow { opacity: .82; }
[data-ui="v2"] .wf-diagram.is-focused .wf-edge,
[data-ui="v2"] .wf-diagram.is-focused .wf-edge-tag { opacity: .45; }
/* Vybraný uzel, jeho sousedé po cestě simulace a označené změny zůstávají
   čitelné — jinak by ztlumení schovalo právě to, kvůli čemu se uživatel
   do diagramu dívá. */
[data-ui="v2"] .wf-diagram.is-focused .wf-node.is-selected .wf-shape,
[data-ui="v2"] .wf-diagram.is-focused .wf-node.is-selected .wf-node-glyph,
[data-ui="v2"] .wf-diagram.is-focused .wf-node.is-hot .wf-shape,
[data-ui="v2"] .wf-diagram.is-focused .wf-node.is-hot .wf-node-glyph,
[data-ui="v2"] .wf-diagram.is-focused .wf-node.is-added .wf-shape,
[data-ui="v2"] .wf-diagram.is-focused .wf-node.is-added .wf-node-glyph,
[data-ui="v2"] .wf-diagram.is-focused .wf-node.is-removed .wf-shape,
[data-ui="v2"] .wf-diagram.is-focused .wf-node.is-removed .wf-node-glyph,
[data-ui="v2"] .wf-diagram.is-focused .wf-node.is-changed .wf-shape,
[data-ui="v2"] .wf-diagram.is-focused .wf-node.is-changed .wf-node-glyph,
[data-ui="v2"] .wf-diagram.is-focused .wf-node:hover .wf-shape,
[data-ui="v2"] .wf-diagram.is-focused .wf-node:hover .wf-node-glyph { opacity: 1; filter: none; }
[data-ui="v2"] .wf-diagram.is-focused .wf-node.is-selected .wf-node-label,
[data-ui="v2"] .wf-diagram.is-focused .wf-node.is-selected .wf-node-eyebrow,
[data-ui="v2"] .wf-diagram.is-focused .wf-node.is-hot .wf-node-label,
[data-ui="v2"] .wf-diagram.is-focused .wf-node.is-hot .wf-node-eyebrow,
[data-ui="v2"] .wf-diagram.is-focused .wf-node:hover .wf-node-label,
[data-ui="v2"] .wf-diagram.is-focused .wf-node:hover .wf-node-eyebrow { opacity: 1; }
/* Vybraný uzel dostane ještě jemný podsvit, aby byl poznat i na tisku
   a v režimu vysokého kontrastu, kde se průhlednost neprojeví. */
[data-ui="v2"] .wf-node.is-selected .wf-shape {
  filter: drop-shadow(0 0 0 transparent);
  stroke-dasharray: none;
}

/* Přesouvání: uzel se dá chytit a táhnout. touch-action vypíná rolování
   prstem nad uzlem, jinak by tažení na dotykovém zařízení rolovalo stránku. */
[data-ui="v2"] .wf-diagram:not(.is-readonly) .wf-node { cursor: grab; touch-action: none; }
[data-ui="v2"] .wf-is-dragging .wf-diagram .wf-node { cursor: grabbing; }
[data-ui="v2"] .wf-is-dragging { user-select: none; -webkit-user-select: none; }
/* Během tažení se nic neanimuje — plátno se překresluje každý snímek
   a přechody by uzel rozmazaly. */
[data-ui="v2"] .wf-is-dragging .wf-diagram .wf-node { transition: none; }

@media (prefers-reduced-motion: reduce) {
  [data-ui="v2"] .wf-diagram .wf-node { transition: none; }
}
[data-ui="v2"] .wf-node:focus { outline: none; }
[data-ui="v2"] .wf-node:focus-visible { outline: none; }
[data-ui="v2"] .wf-node:focus-visible .wf-shape { stroke: var(--focus); stroke-width: 3.25; }

/* Značky změn v porovnání verzí */
[data-ui="v2"] .wf-node.is-added .wf-shape   { stroke: var(--ok);  stroke-dasharray: 6 4; }
[data-ui="v2"] .wf-node.is-removed .wf-shape { stroke: var(--bad); stroke-dasharray: 6 4; }
[data-ui="v2"] .wf-node.is-removed { opacity: .72; }
[data-ui="v2"] .wf-node.is-changed .wf-shape { stroke: var(--info); stroke-dasharray: 6 4; }
[data-ui="v2"] .wf-node-flag circle { fill: var(--surface); stroke: var(--line-2); stroke-width: 1; }
[data-ui="v2"] .wf-node-flag text { fill: var(--ink-2); font: 700 12px/1 var(--font-sans); }
[data-ui="v2"] .wf-node.is-added .wf-node-flag circle   { fill: var(--ok-soft);  stroke: var(--ok); }
[data-ui="v2"] .wf-node.is-added .wf-node-flag text     { fill: var(--ok); }
[data-ui="v2"] .wf-node.is-removed .wf-node-flag circle { fill: var(--bad-soft); stroke: var(--bad); }
[data-ui="v2"] .wf-node.is-removed .wf-node-flag text   { fill: var(--bad); }
[data-ui="v2"] .wf-node.is-changed .wf-node-flag circle { fill: var(--info-soft); stroke: var(--info); }
[data-ui="v2"] .wf-node.is-changed .wf-node-flag text   { fill: var(--info); }

/* Textová alternativa diagramu */
[data-ui="v2"] .wf-alt { border-top: 1px solid var(--line); }
[data-ui="v2"] .wf-alt > summary {
  padding: var(--sp-4) var(--sp-7); cursor: pointer;
  font: 600 12.5px/1.4 var(--font-sans); color: var(--ink-2);
}
[data-ui="v2"] .wf-alt > summary:hover { color: var(--ink); }
[data-ui="v2"] .wf-alt .wf-steps { padding: 0 var(--sp-7) var(--sp-7); }

/* ============================================================
   Seznam kroků (alternativa diagramu i výpis simulace)
   ============================================================ */
[data-ui="v2"] .wf-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
[data-ui="v2"] .wf-step-btn {
  width: 100%; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5); cursor: pointer; text-align: left;
  border: 1px solid var(--line); border-left: 3px solid var(--wf-tone); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
}
[data-ui="v2"] .wf-step-btn:hover { background: var(--surface-2); }
[data-ui="v2"] .wf-step.is-hot .wf-step-btn { border-color: var(--accent); background: var(--accent-soft); }
[data-ui="v2"] .wf-step.is-orphan .wf-step-btn { border-style: dashed; }
[data-ui="v2"] .wf-step-type {
  flex: 0 0 auto; padding: 2px 7px; border-radius: var(--r-xs);
  background: var(--wf-tone-soft); color: var(--wf-tone-text);
  font: 700 10.5px/1.5 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
}
[data-ui="v2"] .wf-step-label { font: 600 13.5px/1.35 var(--font-sans); min-width: 0; }
[data-ui="v2"] .wf-step-meta,
[data-ui="v2"] .wf-step-next { color: var(--ink-2); font: 400 12px/1.4 var(--font-sans); min-width: 0; }
[data-ui="v2"] .wf-step-next { margin-left: auto; text-align: right; color: var(--ink-3); }
[data-ui="v2"] .wf-step-branch {
  flex: 0 0 auto; padding: 1px 7px; border-radius: var(--r-xs);
  background: var(--accent-soft); color: var(--accent-text);
  font: 700 11px/1.5 var(--font-sans);
}
[data-ui="v2"] .wf-step-branch.is-warn { background: var(--warn-soft); color: var(--warn); }

/* ============================================================
   Detail kroku a formulářová pole
   ============================================================ */
[data-ui="v2"] .wf-detail { display: flex; flex-direction: column; }
[data-ui="v2"] .wf-detail-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-7);
  background: var(--wf-tone-soft); border-bottom: 1px solid var(--line);
}
[data-ui="v2"] .wf-detail-glyph {
  width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--surface); color: var(--wf-tone-text);
}
[data-ui="v2"] .wf-detail-glyph svg { fill: currentColor; }
[data-ui="v2"] .wf-detail-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-ui="v2"] .wf-detail-title b {
  font: 700 14.5px/1.3 var(--font-sans); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-ui="v2"] .wf-detail-findings { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-7) 0; }
[data-ui="v2"] .wf-detail-body { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-7); }
/* Režim jen pro čtení. Dřív to byl `opacity:.72; pointer-events:none` — myš
   sice zhasla, ale klávesnice ne (Tab do pole, napsaný text nikam nedošel)
   a průhlednost srazila kontrast popisků. Zamykají se proto skutečné prvky
   (readonly / disabled v lockControls() ve workflow.js) a odlišení je
   neutrální plocha, která textu kontrast nebere. NEVRACET opacity. */
[data-ui="v2"] .wf-detail-body.is-locked { background: var(--surface-2); }
[data-ui="v2"] .wf-detail-body.is-locked .v2-input[readonly],
[data-ui="v2"] .wf-detail-body.is-locked .v2-input:disabled {
  background: var(--bg-2); color: var(--ink-2); cursor: default;
}
[data-ui="v2"] .wf-detail-body.is-locked .wf-check { cursor: default; }
[data-ui="v2"] .wf-detail-body.is-locked .wf-check:hover { border-color: var(--line); }
/* Obě poznámky nad poli detailu — „Jen pro čtení.“ (chybí práva) i „Používám
   návrh od AI.“ (běží Použít změny) — stojí přímo v .wf-detail-body, který
   odstupy dělá mezerou gap; vlastní okraj by se k ní přičetl. Sdílené v2.css
   dává .v2-note okraj jen podle místa (nw-subscribers, v2-authcard …),
   a kdyby ho jednou dalo obecně, nesmí se jedna poznámka od druhé odchýlit.
   Do 18. 9. 2026 tu pravidlo měla jen „Jen pro čtení.“ — poznámka o AI
   přibyla později a zapomnělo se na ni. */
[data-ui="v2"] .wf-locked-note,
[data-ui="v2"] .wf-busy-note { margin: 0; }
[data-ui="v2"] .wf-detail-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
[data-ui="v2"] .wf-detail-empty { padding: 44px var(--sp-7); }

[data-ui="v2"] .wf-field { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
[data-ui="v2"] .wf-field-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
[data-ui="v2"] .wf-field > .t-meta, [data-ui="v2"] .wf-field > .t-th { color: var(--ink-3); }
[data-ui="v2"] .wf-field p { margin: 0; }
[data-ui="v2"] .wf-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
[data-ui="v2"] .wf-narrow-input { max-width: 140px; }
[data-ui="v2"] .wf-textarea { resize: vertical; min-height: 64px; font-family: var(--font-sans); }

[data-ui="v2"] .wf-check {
  display: flex; align-items: flex-start; gap: var(--sp-4); cursor: pointer;
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
[data-ui="v2"] .wf-check:hover { border-color: var(--line-2); }
[data-ui="v2"] .wf-check input[type="checkbox"] { margin: 2px 0 0; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent); }
[data-ui="v2"] .wf-check > span { display: flex; flex-direction: column; gap: 2px; font: 500 13px/1.4 var(--font-sans); color: var(--ink); }
[data-ui="v2"] .wf-check small { font: 400 12px/1.45 var(--font-sans); color: var(--ink-2); }

/* Segmentované přepínače drží geometrii z AGENTS.md: --r-md na skupině,
   --r-sm na volbách; třídy .v2-seg / .v2-seg-btn si nesou vzhled z v2.css. */
[data-ui="v2"] .wf-mode, [data-ui="v2"] .wf-cond-join { flex-wrap: wrap; }
[data-ui="v2"] .wf-viewseg { flex: 0 0 auto; }

/* ============================================================
   Editor podmínky
   ============================================================ */
[data-ui="v2"] .wf-cond-root { min-width: 0; }
[data-ui="v2"] .wf-cond-group {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface-2); overflow: hidden;
}
[data-ui="v2"] .wf-cond-group[data-wf-depth="1"] { background: var(--surface); }
[data-ui="v2"] .wf-cond-group[data-wf-depth="2"] { background: var(--surface-2); }
[data-ui="v2"] .wf-cond-head {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4); border-bottom: 1px solid var(--line);
}
[data-ui="v2"] .wf-cond-hint { flex: 1 1 14ch; min-width: 0; color: var(--ink-3); }
[data-ui="v2"] .wf-cond-items { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4); }
[data-ui="v2"] .wf-cond-items > .wf-cond-group { border-left: 3px solid var(--warn); }

[data-ui="v2"] .wf-cond-leaf {
  display: grid; align-items: end; gap: var(--sp-3);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
[data-ui="v2"] .wf-cond-cell { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
/* Buňka s výběrem více hodnot zabírá celý řádek podmínky — vedle pole
   a operátoru by na nabídku zbylo pár desítek pixelů. */
[data-ui="v2"] .wf-cond-cell.is-multi { grid-column: 1 / -1; }
[data-ui="v2"] .wf-cond-cell .t-meta { color: var(--ink-3); }
[data-ui="v2"] .wf-cond-novalue {
  display: flex; align-items: center; min-height: 36px; padding: 0 var(--sp-3);
  color: var(--ink-3); font-style: italic;
}
[data-ui="v2"] .wf-cond-del { align-self: flex-end; margin-bottom: 2px; }

/* Vysvětlení pod hodnotou — proč je místo výběru volný text, nebo že se
   napovídá ze zkráceného číselníku. */
[data-ui="v2"] .wf-cond-note { display: block; color: var(--ink-3); }

/* Výběr více hodnot (IN / NOT IN). Vybrané hodnoty jsou odznaky, pod nimi
   nabídka na přidání další. Odznak NENÍ klikací ovladač, jen jeho křížek —
   proto smí mít měkčí zaoblení, ale ne pill (AGENTS.md). */
[data-ui="v2"] .wf-vals { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
[data-ui="v2"] .wf-val-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
[data-ui="v2"] .wf-val {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 2px 2px 2px var(--sp-4);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface-2);
}
[data-ui="v2"] .wf-val-text {
  font: 600 12.5px/1.5 var(--font-sans); color: var(--ink);
  max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-ui="v2"] .wf-val-del .icon { font-size: 16px; }
[data-ui="v2"] .wf-val-empty { margin: 0; }
[data-ui="v2"] .wf-cond-summary {
  display: flex; align-items: center; gap: var(--sp-3); margin: 0;
  padding: var(--sp-4); border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--warn-soft); color: var(--ink);
  font: 600 12.5px/1.45 var(--font-sans); overflow-wrap: anywhere;
}
[data-ui="v2"] .wf-cond-summary .icon { font-size: 18px; color: var(--warn); flex: 0 0 auto; }

/* ============================================================
   Schvalovatelé
   ============================================================ */
[data-ui="v2"] .wf-asg-list { display: flex; flex-direction: column; gap: var(--sp-4); }
[data-ui="v2"] .wf-asg-row {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
[data-ui="v2"] .wf-asg-main { display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; }
[data-ui="v2"] .wf-asg-scope { padding-left: 28px; }

/* ============================================================
   Kontrola a nálezy validace
   ============================================================ */
[data-ui="v2"] .wf-validation .v2-note { margin: var(--sp-6) var(--sp-7); }
[data-ui="v2"] .wf-findings { padding: var(--sp-6) var(--sp-7); }
[data-ui="v2"] .wf-findings-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
[data-ui="v2"] .wf-finding-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
[data-ui="v2"] .wf-finding {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
[data-ui="v2"] .wf-finding .icon { font-size: 19px; flex: 0 0 auto; margin-top: 1px; }
[data-ui="v2"] .wf-finding.is-error { border-color: var(--bad); background: var(--bad-soft); }
[data-ui="v2"] .wf-finding.is-error .icon { color: var(--bad); }
[data-ui="v2"] .wf-finding.is-warning { border-color: var(--warn); background: var(--warn-soft); }
[data-ui="v2"] .wf-finding.is-warning .icon { color: var(--warn); }
[data-ui="v2"] .wf-finding.is-info { border-color: var(--info); background: var(--info-soft); }
[data-ui="v2"] .wf-finding.is-info .icon { color: var(--info); }
[data-ui="v2"] .wf-finding-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; font: 400 13px/1.5 var(--font-sans); color: var(--ink); }
[data-ui="v2"] .wf-finding-text b { font: 700 11.5px/1.4 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
[data-ui="v2"] .wf-finding .v2-btn { flex: 0 0 auto; }

/* ============================================================
   Simulátor
   ============================================================ */
[data-ui="v2"] .wf-panel { overflow: hidden; }
[data-ui="v2"] .wf-simulator > .v2-note,
[data-ui="v2"] .wf-diffpanel > .v2-note { margin: var(--sp-6) var(--sp-7) 0; }
[data-ui="v2"] .wf-sim-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-5); padding: var(--sp-6) var(--sp-7);
}
[data-ui="v2"] .wf-sim-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; padding: 0 var(--sp-7) var(--sp-6); }
[data-ui="v2"] .wf-sim-hint { padding: 0 var(--sp-7) var(--sp-7); }
[data-ui="v2"] .wf-sim-result { padding: 0 var(--sp-7) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-4); }
[data-ui="v2"] .wf-sim-outcome { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
[data-ui="v2"] .wf-simulator .wf-sim-result .wf-steps { margin-top: var(--sp-2); }

/* „Kdo by rozhodoval" je hlavní výstup simulace — jediné místo, kde uživatel
   uvidí jmenovitě, kdo by doklad schvaloval. Dřív to byl neostylovaný <ul>:
   výchozí odrážky prohlížeče, odsazení 40 px a všechny tři prvky inline,
   takže se jména slila s názvem kroku do jedné věty. Proto má vlastní karty
   ve stejném jazyce jako .wf-version a .wf-diff-item. */
[data-ui="v2"] .wf-sim-approvers { display: flex; flex-direction: column; gap: var(--sp-3); }
[data-ui="v2"] .wf-approver-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
[data-ui="v2"] .wf-approver {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
[data-ui="v2"] .wf-approver-order {
  width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--r-xs); background: var(--wf-tone-soft); color: var(--wf-tone-text);
  font: 700 12px/1 var(--font-sans);
}
[data-ui="v2"] .wf-approver-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
[data-ui="v2"] .wf-approver-text b { font: 600 13.5px/1.35 var(--font-sans); color: var(--ink); }
[data-ui="v2"] .wf-approver-type {
  font: 700 10.5px/1.5 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}
[data-ui="v2"] .wf-approver-who { font: 400 13px/1.5 var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }
[data-ui="v2"] .wf-approver-who.is-empty { color: var(--warn); font-weight: 600; }
[data-ui="v2"] .wf-approver-out {
  font: 400 12px/1.45 var(--font-sans); color: var(--ink-2); overflow-wrap: anywhere;
}

/* ============================================================
   Porovnání verzí
   ============================================================ */
[data-ui="v2"] .wf-diff-sides {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6); padding: var(--sp-6) var(--sp-7) 0;
}
[data-ui="v2"] .wf-diff-side { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
[data-ui="v2"] .wf-diff-side-head { padding: var(--sp-4) var(--sp-5); background: var(--surface-2); border-bottom: 1px solid var(--line); }
[data-ui="v2"] .wf-diff-list { list-style: none; margin: 0; padding: var(--sp-6) var(--sp-7) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-3); }
[data-ui="v2"] .wf-diff-item {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
[data-ui="v2"] .wf-diff-sign {
  width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--r-xs); font: 700 14px/1 var(--font-mono);
  background: var(--bg-2); color: var(--ink-2);
}
[data-ui="v2"] .wf-diff-item.is-added   { border-color: var(--ok);   background: var(--ok-soft); }
[data-ui="v2"] .wf-diff-item.is-added .wf-diff-sign   { background: var(--ok);   color: var(--on-ok); }
[data-ui="v2"] .wf-diff-item.is-removed { border-color: var(--bad);  background: var(--bad-soft); }
[data-ui="v2"] .wf-diff-item.is-removed .wf-diff-sign { background: var(--bad);  color: var(--on-accent); }
[data-ui="v2"] .wf-diff-item.is-changed { border-color: var(--info); background: var(--info-soft); }
[data-ui="v2"] .wf-diff-item.is-changed .wf-diff-sign { background: var(--info); color: var(--on-accent); }
[data-ui="v2"] .wf-diff-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
[data-ui="v2"] .wf-diff-text b { font: 600 13.5px/1.35 var(--font-sans); color: var(--ink); }
[data-ui="v2"] .wf-diff-text small { font: 400 12px/1.5 var(--font-sans); color: var(--ink-2); overflow-wrap: anywhere; }
[data-ui="v2"] .wf-diffpanel .v2-note { margin: var(--sp-6) var(--sp-7); }

/* ============================================================
   Historie verzí
   ============================================================ */
[data-ui="v2"] .wf-version-list { list-style: none; margin: 0; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
[data-ui="v2"] .wf-version {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
[data-ui="v2"] .wf-version-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
[data-ui="v2"] .wf-version-text b { font: 600 12.5px/1.35 var(--font-sans); color: var(--ink); }
[data-ui="v2"] .wf-version-text small { font: 400 11.5px/1.4 var(--font-sans); color: var(--ink-3); }

/* ============================================================
   Formulářová editace kroků (úzké obrazovky, §41 zadání)
   ============================================================ */
[data-ui="v2"] .wf-nodeform-list { list-style: none; margin: 0; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
[data-ui="v2"] .wf-nodeform { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
[data-ui="v2"] .wf-nodeform.is-open { border-color: var(--wf-tone); }
[data-ui="v2"] .wf-nodeform-btn {
  width: 100%; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-5); cursor: pointer; text-align: left;
  border: 0; border-left: 3px solid var(--wf-tone);
  background: transparent; color: var(--ink);
}
[data-ui="v2"] .wf-nodeform-btn:hover { background: var(--surface-2); }
[data-ui="v2"] .wf-nodeform-type {
  flex: 0 0 auto; padding: 2px 7px; border-radius: var(--r-xs);
  background: var(--wf-tone-soft); color: var(--wf-tone-text);
  font: 700 10.5px/1.5 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
}
[data-ui="v2"] .wf-nodeform-label { font: 600 14px/1.35 var(--font-sans); min-width: 0; }
[data-ui="v2"] .wf-nodeform-meta { color: var(--ink-2); font: 400 12px/1.4 var(--font-sans); min-width: 0; }
[data-ui="v2"] .wf-nodeform-caret { margin-left: auto; font-size: 20px; color: var(--ink-3); }
[data-ui="v2"] .wf-nodeform-body { border-top: 1px solid var(--line); background: var(--surface); }

/* ============================================================
   Role a zastupování
   ============================================================ */
[data-ui="v2"] .wf-role-list,
[data-ui="v2"] .wf-del-list { list-style: none; margin: 0; padding: 0; }
[data-ui="v2"] .wf-role,
[data-ui="v2"] .wf-del {
  display: grid; align-items: center; gap: var(--sp-5);
  grid-template-columns: minmax(0, 1.6fr) minmax(140px, .8fr) minmax(0, 1.6fr) auto;
  padding: var(--sp-5) var(--sp-7); border-bottom: 1px solid var(--line);
}
[data-ui="v2"] .wf-role:last-child, [data-ui="v2"] .wf-del:last-child { border-bottom: 0; }
[data-ui="v2"] .wf-role:hover, [data-ui="v2"] .wf-del:hover { background: var(--surface-2); }
[data-ui="v2"] .wf-role-main { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; }
[data-ui="v2"] .wf-role-main b { font: 600 14px/1.35 var(--font-sans); color: var(--ink); }
[data-ui="v2"] .wf-role-limit { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; color: var(--ink-2); }
[data-ui="v2"] .wf-role-members { color: var(--ink-2); overflow-wrap: anywhere; }
[data-ui="v2"] .wf-role-act, [data-ui="v2"] .wf-del-act { display: flex; justify-content: flex-end; gap: var(--sp-3); }
[data-ui="v2"] .wf-del.is-revoked { opacity: .64; }
[data-ui="v2"] .wf-del-main { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; }
[data-ui="v2"] .wf-del-main b { font: 600 13.5px/1.35 var(--font-sans); color: var(--ink); }
[data-ui="v2"] .wf-del-main .icon { font-size: 18px; color: var(--ink-3); }
[data-ui="v2"] .wf-del-range, [data-ui="v2"] .wf-del-reason { color: var(--ink-2); }

[data-ui="v2"] .wf-formwrap { padding: var(--sp-6) var(--sp-7); border-bottom: 1px solid var(--line); background: var(--surface-2); }
[data-ui="v2"] .wf-form { display: flex; flex-direction: column; gap: var(--sp-5); }
[data-ui="v2"] .wf-form .wf-panel-head { padding: 0 0 var(--sp-4); }
[data-ui="v2"] .wf-member-list { display: flex; flex-direction: column; gap: var(--sp-3); }
[data-ui="v2"] .wf-member-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; }

/* ============================================================
   Dialogy
   ============================================================ */
[data-ui="v2"] .wf-modal-card { height: auto; max-height: min(88vh, 920px); }
[data-ui="v2"] .wf-modal-body {
  flex: 1 1 auto; overflow: auto; padding: var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
[data-ui="v2"] .wf-modal-foot {
  display: flex; justify-content: flex-end; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-7); border-top: 1px solid var(--line); background: var(--surface-2);
}
[data-ui="v2"] .wf-modal-body .wf-diff-list { padding: 0; }
[data-ui="v2"] .wf-doctypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
[data-ui="v2"] .wf-publish-versions { display: flex; align-items: center; gap: var(--sp-4); }
[data-ui="v2"] .wf-publish-versions .icon { color: var(--ink-3); }

/* ============================================================
   Pravidla v češtině — výchozí pohled na workflow

   Čte se to jako dokument, ne jako tabulka: souhrn, pod ním očíslovaná
   pravidla, u každého věta a teprve pod ní drobnosti. Proto tady nejsou
   sloupce ani mřížka hodnot — sloupce by z vět udělaly výpis pro technika,
   a přesně tomu se celá obrazovka vyhýbá.
   ============================================================ */
[data-ui="v2"] .wf-rules-head .icon { font-size: 19px; color: var(--ink-2); }
[data-ui="v2"] .wf-rules-lead { margin: var(--sp-5) var(--sp-7) 0; max-width: 78ch; }
[data-ui="v2"] .wf-rules-body { padding: var(--sp-6) var(--sp-7) var(--sp-7); }

/* Zastaralé věty se nesmí ztratit — jen zešednou, dokud nedorazí nové.
   Kdyby mizely a zase naskakovaly, obrazovka by pod rukama poskakovala. */
[data-ui="v2"] .wf-rules-body.is-stale { opacity: .55; transition: opacity var(--dur) var(--ease); }

[data-ui="v2"] .wf-rules-summary {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-bottom: var(--sp-7); padding: var(--sp-6);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-lg); background: var(--surface-2);
}
[data-ui="v2"] .wf-rules-summary p {
  margin: 0; font: 500 14.5px/1.55 var(--font-sans); color: var(--ink); max-width: 78ch;
}

[data-ui="v2"] .wf-rule-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-5);
}
[data-ui="v2"] .wf-rule {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start;
  gap: var(--sp-5); padding: var(--sp-6);
  border: 1px solid var(--line); border-left: 3px solid var(--wf-tone);
  border-radius: var(--r-lg); background: var(--surface);
}
[data-ui="v2"] .wf-rule-order {
  flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 var(--sp-2);
  display: grid; place-items: center; border-radius: var(--r-xs);
  background: var(--wf-tone-soft); color: var(--wf-tone-text);
  font: 700 12.5px/1 var(--font-mono);
}
[data-ui="v2"] .wf-rule-body { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
[data-ui="v2"] .wf-rule-sentence {
  margin: 0; font: 600 15px/1.5 var(--font-sans); color: var(--ink);
  max-width: 78ch; overflow-wrap: anywhere;
}
[data-ui="v2"] .wf-rule-when {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-1);
}
[data-ui="v2"] .wf-rule-when > li {
  position: relative; padding-left: var(--sp-7);
  font: 400 12.5px/1.5 var(--font-sans); color: var(--ink-2); overflow-wrap: anywhere;
}
[data-ui="v2"] .wf-rule-when > li::before {
  content: ""; position: absolute; left: var(--sp-2); top: .65em;
  width: 8px; height: 1px; background: var(--ink-3);
}

/* Kdo rozhoduje / jak / limit. Popisek a hodnota v jednom řádku, ne pod
   sebou — jsou to doplňky věty, ne samostatná data. */
[data-ui="v2"] .wf-rule-facts {
  margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-7);
}
[data-ui="v2"] .wf-rule-fact {
  display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0;
}
[data-ui="v2"] .wf-rule-facts dt {
  flex: 0 0 auto; font: 700 10.5px/1.6 var(--font-sans); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
[data-ui="v2"] .wf-rule-facts dd {
  margin: 0; min-width: 0;
  font: 600 12.5px/1.6 var(--font-sans); color: var(--ink); overflow-wrap: anywhere;
}
[data-ui="v2"] .wf-rule-note {
  margin: 0; font: 400 12.5px/1.5 var(--font-sans); color: var(--ink-2);
  max-width: 78ch; overflow-wrap: anywhere;
}
[data-ui="v2"] .wf-rule-show { align-self: start; flex: 0 0 auto; white-space: nowrap; }

[data-ui="v2"] .wf-rules-note { margin-top: var(--sp-7); }
[data-ui="v2"] .wf-rules-notelist {
  list-style: disc; margin: var(--sp-2) 0 0; padding-left: var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-1);
  font: 400 12.5px/1.5 var(--font-sans);
}
[data-ui="v2"] .wf-rules-error .v2-btn { align-self: flex-start; margin-top: var(--sp-3); }
[data-ui="v2"] .wf-rules-none { margin: 0; }

/* ============================================================
   Prošlá cesta simulace jako věty
   ============================================================ */
[data-ui="v2"] .wf-trace {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-7) 0;
}
[data-ui="v2"] .wf-trace-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
[data-ui="v2"] .wf-trace-step {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line); border-left: 3px solid var(--wf-tone);
  border-radius: var(--r-md); background: var(--surface-2);
}
[data-ui="v2"] .wf-trace-order {
  flex: 0 0 auto; min-width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: var(--r-xs); background: var(--wf-tone-soft); color: var(--wf-tone-text);
  font: 700 11.5px/1 var(--font-mono);
}
[data-ui="v2"] .wf-trace-text {
  display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0;
}
[data-ui="v2"] .wf-trace-text b {
  font: 600 13.5px/1.45 var(--font-sans); color: var(--ink); overflow-wrap: anywhere;
}
[data-ui="v2"] .wf-trace-text small {
  font: 400 12px/1.45 var(--font-sans); color: var(--ink-2); overflow-wrap: anywhere;
}
[data-ui="v2"] .wf-trace-branch { flex: 0 0 auto; align-self: center; }
[data-ui="v2"] .wf-sim-steps { border-top: 1px solid var(--line); margin-top: var(--sp-6); }

/* ============================================================
   Porovnání vět dvou verzí

   Věty vedle sebe, uprostřed znaménko. Uzly se liší i tehdy, když se
   pravidlo nezměnilo (přejmenovaný krok, posunutá vazba), takže tenhle výpis
   odpovídá na jinou otázku než seznam změněných uzlů pod ním.
   ============================================================ */
[data-ui="v2"] .wf-rulediff { padding: var(--sp-6) var(--sp-7); }
[data-ui="v2"] .wf-rulediff-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
[data-ui="v2"] .wf-rulediff-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
[data-ui="v2"] .wf-rulediff-row.is-head {
  border-color: transparent; background: none; padding-bottom: 0;
}
[data-ui="v2"] .wf-rulediff-cell {
  min-width: 0; font: 400 13px/1.5 var(--font-sans); color: var(--ink); overflow-wrap: anywhere;
}
[data-ui="v2"] .wf-rulediff-cell.is-empty { color: var(--ink-3); font-style: italic; }
/* Strop kroku, lhůta, připomínky, eskalace a oddělení pravomocí. Ve větě
   nejsou, a přitom jsou to přesně ty údaje, které si AI k novému kroku
   domyslí, aniž by o nich uživatel něco řekl — patří tedy k rozhodnutí,
   ne do sbalené podrobnosti. */
[data-ui="v2"] .wf-rulediff-detail {
  display: block; margin-top: 3px;
  font: 400 12px/1.45 var(--font-sans); color: var(--ink-2); font-style: normal;
}
[data-ui="v2"] .wf-rulediff-row.is-same .wf-rulediff-detail { color: var(--ink-3); }
[data-ui="v2"] .wf-rulediff-sign {
  width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--r-xs); font: 700 14px/1 var(--font-mono);
  background: var(--bg-2); color: var(--ink-2);
}
[data-ui="v2"] .wf-rulediff-row.is-added   { border-color: var(--ok);   background: var(--ok-soft); }
[data-ui="v2"] .wf-rulediff-row.is-added .wf-rulediff-sign   { background: var(--ok);   color: var(--on-ok); }
[data-ui="v2"] .wf-rulediff-row.is-removed { border-color: var(--bad);  background: var(--bad-soft); }
[data-ui="v2"] .wf-rulediff-row.is-removed .wf-rulediff-sign { background: var(--bad);  color: var(--on-accent); }
[data-ui="v2"] .wf-rulediff-row.is-changed { border-color: var(--info); background: var(--info-soft); }
[data-ui="v2"] .wf-rulediff-row.is-changed .wf-rulediff-sign { background: var(--info); color: var(--on-accent); }
/* Nezměněné pravidlo zůstává v seznamu kvůli kontextu, ale nemá poutat oko. */
[data-ui="v2"] .wf-rulediff-row.is-same .wf-rulediff-cell { color: var(--ink-2); }
[data-ui="v2"] .wf-rulediff-same, [data-ui="v2"] .wf-rulediff-empty { margin-bottom: var(--sp-6); }
[data-ui="v2"] .wf-rulediff-error { margin: var(--sp-6) var(--sp-7); }
[data-ui="v2"] .wf-rulediff-stale { margin: var(--sp-6) var(--sp-7); }
[data-ui="v2"] .wf-diff-nodes { border-top: 1px solid var(--line); }

/* ============================================================
   Návrh změny od AI

   Panel stojí VEDLE pravidel, ne pod nimi: uživatel píše větu a hned vedle
   čte, co z ní vyšlo. Na úzké obrazovce se sloupce složí pod sebe, pravidla
   zůstávají první — ta jsou pořád to hlavní, AI je nástroj k jejich úpravě.
   ============================================================ */
[data-ui="v2"] .wf-rules-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: var(--sp-8); align-items: start; min-width: 0;
}

[data-ui="v2"] .wf-ai { min-width: 0; }
[data-ui="v2"] .wf-ai-head .icon { font-size: 19px; color: var(--accent-text); }
[data-ui="v2"] .wf-ai-body {
  display: flex; flex-direction: column; gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-7) var(--sp-7);
}
[data-ui="v2"] .wf-ai-guard { margin: 0; }
[data-ui="v2"] .wf-ai-form { display: flex; flex-direction: column; gap: var(--sp-5); }
[data-ui="v2"] .wf-ai-prompt { min-height: 78px; }
[data-ui="v2"] .wf-ai-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4);
}
[data-ui="v2"] .wf-ai-blocked { flex: 1 1 18ch; min-width: 0; }

/* Čekání na odpověď musí být vidět na první pohled — návrh trvá pár sekund
   a bez téhle cedulky by obrazovka vypadala, že se nic neděje. */
[data-ui="v2"] .wf-ai-busy {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
[data-ui="v2"] .wf-ai-busy .icon { font-size: 19px; color: var(--accent-text); flex: 0 0 auto; }
[data-ui="v2"] .wf-ai-busy-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-ui="v2"] .wf-ai-busy-text b { font: 600 13.5px/1.45 var(--font-sans); color: var(--ink); }
[data-ui="v2"] .wf-ai-busy-text small { font: 400 12px/1.45 var(--font-sans); color: var(--ink-2); }
[data-ui="v2"] .wf-ai-error, [data-ui="v2"] .wf-ai-questions { margin: 0; }
[data-ui="v2"] .wf-ai-qlist, [data-ui="v2"] .wf-ai-changelist, [data-ui="v2"] .wf-ai-findinglist {
  list-style: disc; margin: var(--sp-2) 0 0; padding-left: var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-1);
  font: 400 12.5px/1.5 var(--font-sans);
}

[data-ui="v2"] .wf-ai-proposal {
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-6); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--r-lg);
  background: var(--surface-2);
}
[data-ui="v2"] .wf-ai-prophead {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
}
[data-ui="v2"] .wf-ai-prompt-echo {
  margin: 0; display: flex; flex-direction: column; gap: 2px;
  font: 400 13px/1.5 var(--font-sans); color: var(--ink-2); overflow-wrap: anywhere;
}
[data-ui="v2"] .wf-ai-prompt-echo .t-meta { color: var(--ink-3); }
[data-ui="v2"] .wf-ai-summary {
  margin: 0; font: 500 14px/1.55 var(--font-sans); color: var(--ink);
  max-width: 78ch; overflow-wrap: anywhere;
}
[data-ui="v2"] .wf-ai-difftitle { display: block; margin-bottom: var(--sp-3); }
/* Rozdíl vět uvnitř panelu už má odsazení od karty návrhu. */
[data-ui="v2"] .wf-ai-diff .wf-rulediff { padding: 0; }
/* V úzkém sloupci se dvě věty vedle sebe nevejdou — na 180 px na větu by
   se lámalo po slabikách. Skládají se proto pod sebe se znaménkem uprostřed,
   stejně jako na úzké obrazovce. Celý dvousloupcový přehled zůstává
   v panelu „Porovnat", kde má celou šířku. */
[data-ui="v2"] .wf-ai-diff .wf-rulediff-row { grid-template-columns: minmax(0, 1fr); }
[data-ui="v2"] .wf-ai-diff .wf-rulediff-row.is-head { display: none; }
[data-ui="v2"] .wf-ai-diff .wf-rulediff-sign { justify-self: start; }
/* Pod sebou by nezměněné pravidlo stálo dvakrát a u přibylého by nad větou
   svítilo „nic". Zůstává jedna věta a znaménko se sr-only popiskem, který
   říká, jestli přibyla, zmizela, nebo se nezměnila. */
[data-ui="v2"] .wf-ai-diff .wf-rulediff-cell.is-empty,
[data-ui="v2"] .wf-ai-diff .wf-rulediff-row.is-same .wf-rulediff-cell.is-before {
  display: none;
}
[data-ui="v2"] .wf-ai-changes { display: flex; flex-direction: column; }
[data-ui="v2"] .wf-ai-findings, [data-ui="v2"] .wf-ai-invalid { margin: 0; }
[data-ui="v2"] .wf-ai-schema .wf-diagram-wrap { margin-top: var(--sp-4); }
[data-ui="v2"] .wf-ai-decide {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4);
  padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
[data-ui="v2"] .wf-ai-nopublish { flex: 1 1 20ch; min-width: 0; }
/* Proč je zamčené „Použít změny“ NEBO „Zahodit“ (id="wf-ai-blocked-note",
   tlačítka se na ně vážou přes aria-describedby). Stojí na vlastním řádku pod
   tlačítky, aby se dlouhá věta („Návrh vznikl nad verzí 7, workflow je teď na
   verzi 8…") nemačkala vedle nich do dvou slov na řádek. */
[data-ui="v2"] .wf-ai-accept-blocked { flex: 1 1 100%; min-width: 0; }
/* Vysvětlení u návrhu, který server odmítl přijmout kvůli změně workflow.
   Stojí nad tlačítky „Zahodit“ a „Zavřít návrh“, ať je jasné, proč použít nejde. */
[data-ui="v2"] .wf-ai-stale { flex: 1 1 100%; min-width: 0; margin: 0; }
/* Chyba ROZHODNUTÍ o návrhu (použít / zahodit). Patří k tlačítkům, ne nad
   zadání — tam má vlastní rámeček s nadpisem o POŘÍZENÍ návrhu a hlásit
   pod ním zamčené „Použít změny“ byla nepravda. Vlastní řádek pod tlačítky. */
[data-ui="v2"] .wf-ai-decide-error { flex: 1 1 100%; min-width: 0; margin: 0; }

[data-ui="v2"] .wf-ai-history { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; }
[data-ui="v2"] .wf-ai-histlist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
[data-ui="v2"] .wf-ai-hist {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
[data-ui="v2"] .wf-ai-hist-text {
  display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0;
}
[data-ui="v2"] .wf-ai-hist-text b {
  font: 600 13px/1.45 var(--font-sans); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-ui="v2"] .wf-ai-hist-text small { font: 400 12px/1.45 var(--font-sans); color: var(--ink-2); }
[data-ui="v2"] .wf-ai-hist .v2-btn { flex: 0 0 auto; }

/* ============================================================
   Schéma jako potvrzení (sbalitelné) a přepínač pokročilých úprav
   ============================================================ */
[data-ui="v2"] .wf-canvas-lead { margin: var(--sp-5) var(--sp-7) 0; max-width: 78ch; }
[data-ui="v2"] .wf-canvas.is-closed .wf-panel-head { border-bottom: 0; }
[data-ui="v2"] .wf-advanced { white-space: nowrap; }

/* ============================================================
   Úzké obrazovky
   ============================================================ */
@media (max-width: 1024px) {
  /* Panel AI se složí pod pravidla. Pořadí v HTML je pravidla → AI, takže
     zůstane i po složení to hlavní nahoře. */
  [data-ui="v2"] .wf-rules-row { grid-template-columns: minmax(0, 1fr); }

  /* Věty před sebou a za sebou se na úzké obrazovce nevejdou vedle sebe —
     skládají se pod sebe se znaménkem nahoře. */
  [data-ui="v2"] .wf-rulediff-row { grid-template-columns: minmax(0, 1fr); }
  [data-ui="v2"] .wf-rulediff-row.is-head { display: none; }
  [data-ui="v2"] .wf-rulediff-sign { justify-self: start; }
  [data-ui="v2"] .wf-rule { grid-template-columns: auto minmax(0, 1fr); }
  [data-ui="v2"] .wf-rule-show { grid-column: 1 / -1; justify-self: start; }

  [data-ui="v2"] .wf-list-cols { display: none; }
  [data-ui="v2"] .wf-item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main act" "types state" "pub pub";
    row-gap: var(--sp-3);
  }
  [data-ui="v2"] .wf-item-main  { grid-area: main; }
  [data-ui="v2"] .wf-item-act   { grid-area: act; }
  [data-ui="v2"] .wf-item-types { grid-area: types; }
  [data-ui="v2"] .wf-item-state { grid-area: state; justify-content: flex-end; }
  [data-ui="v2"] .wf-item-pub   { grid-area: pub; }
  [data-ui="v2"] .wf-item-name  { white-space: normal; }
  [data-ui="v2"] .wf-item-desc  { white-space: normal; }

  [data-ui="v2"] .wf-diff-sides { grid-template-columns: minmax(0, 1fr); }
  [data-ui="v2"] .wf-toolbar { position: static; }

  [data-ui="v2"] .wf-role, [data-ui="v2"] .wf-del {
    grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-3);
  }
  [data-ui="v2"] .wf-role-members, [data-ui="v2"] .wf-del-reason { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  [data-ui="v2"] .wf-cond-leaf { grid-template-columns: minmax(0, 1fr) auto; }
  [data-ui="v2"] .wf-cond-cell { grid-column: 1 / -1; }
  [data-ui="v2"] .wf-cond-del { grid-column: 2; justify-self: end; }
  [data-ui="v2"] .wf-grid-2 { grid-template-columns: minmax(0, 1fr); }
  [data-ui="v2"] .wf-asg-main { grid-template-columns: minmax(0, 1fr) auto; }
  [data-ui="v2"] .wf-asg-main > select:first-child { grid-column: 1 / -1; }
  [data-ui="v2"] .wf-member-row { grid-template-columns: minmax(0, 1fr) auto; }
  [data-ui="v2"] .wf-step-next { margin-left: 0; text-align: left; width: 100%; }
  /* Rozhodnutí o návrhu na mobilu: tlačítka na celou šířku pod sebe, ať se
     „Použít změny" a „Zahodit" nedají splést palcem. */
  [data-ui="v2"] .wf-ai-decide .v2-btn { flex: 1 1 100%; justify-content: center; }
  [data-ui="v2"] .wf-ai-hist { flex-wrap: wrap; }
  [data-ui="v2"] .wf-ai-hist-text b { white-space: normal; }
  [data-ui="v2"] .wf-toolbar { gap: var(--sp-3); }
  [data-ui="v2"] .wf-toolbar .v2-btn { flex: 1 1 calc(50% - var(--sp-3)); justify-content: center; }
  [data-ui="v2"] .wf-toolbar-title { flex: 1 1 100%; }
  /* Patička dialogu pod sebe, ale POŘADÍM Z DOM — column, ne column-reverse.
     S obráceným směrem stálo destruktivní tlačítko („Smazat", „Odejít bez
     uložení") vizuálně nahoře, jenže Tab chodí po DOM: první stisk vedl na
     Zrušit dole a druhý nahoru na Smazat. Kdo se řídí očima, čekal opak, a
     kdo čtečkou, slyšel jiné pořadí, než jaké viděl jeho kolega. Vizuální
     a klávesové pořadí musí být jedno a totéž. */
  [data-ui="v2"] .wf-modal-foot { flex-direction: column; }
  [data-ui="v2"] .wf-modal-foot .v2-btn { width: 100%; justify-content: center; }
}

/* Vypnuté animace respektují systémové nastavení (tokens.css to řeší globálně,
   tady navíc pro skeleton, který má vlastní keyframes). */
@media (prefers-reduced-motion: reduce) {
  [data-ui="v2"] .wf-sk-row { animation: none; background: var(--bg-2); }
}