/* СОБРАНО ИЗ apps/web/public/shared/zontium.html — руками не править.
   Пересборка: node scripts/фундамент-разложить.mjs
   Правки вносятся в главный файл, здесь они будут затёрты. (компоненты) */
/* ============================================================
   apps/web/public/shared/components.css — ядро · ноль литералов
   Остальные компоненты по матрице В2 строятся на этих же правилах.
   ============================================================ */

/* Ширина считается по внешней грани. Без этого объявленная ширина карточки
   означала бы «плюс отступы плюс рамка», и width:100% в колонке вылезал бы за
   родителя ровно на отступы — на узком экране это резало правый край. Все пять
   приложений объявляют то же правило у себя; фундамент обязан объявить его
   один раз за всех. */
*,*::before,*::after{box-sizing:border-box}
/* hidden обязан скрывать. Правило браузера слабее любого класса с display,
   поэтому окно с классом .z-card оставалось на экране при hidden. */
[hidden]{display:none!important}
.z-bg{position:fixed;inset:0;z-index:var(--z-z-silhouette);background:var(--z-bg-bg);overflow:hidden;pointer-events:none}
.z-bg::before{content:"";position:absolute;inset:-14%;background:var(--z-bg-layer-1);filter:blur(var(--z-bg-blur));animation:z-drift-1 var(--z-bg-drift-1) ease-in-out infinite}
.z-bg__second{position:absolute;inset:-14%;background:var(--z-bg-layer-2);filter:blur(var(--z-bg-blur));animation:z-drift-2 var(--z-bg-drift-2) ease-in-out infinite}
.z-bg__bloom{position:absolute;top:-4%;left:0;right:0;height:40%;background:var(--z-bg-bloom);filter:blur(var(--z-bg-blur));animation:z-bloom var(--z-bg-bloom-dur) ease-in-out infinite}
/* Картинка лежит НИЖЕ живых пятен и выше собственного фона .z-bg: z-index:-1
   внутри её стекла. Порядок важен — иначе пятна уходят под фотографию и
   бренд теряется, а текст остаётся без вуали. */
.z-bg__photo{position:absolute;inset:0;z-index:-1;background-image:var(--z-bg-photo);
  background-size:var(--z-bg-photo-size);background-position:var(--z-bg-photo-pos);
  background-repeat:no-repeat;opacity:var(--z-bg-photo-op);filter:blur(var(--z-bg-photo-blur))}
.z-bg__photo-veil{position:absolute;inset:0;z-index:-1;background:var(--z-bg-photo-veil)}
:root[data-background="plain"] .z-bg__photo,:root[data-background="plain"] .z-bg__photo-veil{display:none}
/* Со снимком собственная вуаль полотна уходит: две вуали подряд топят картинку.
   Остаётся одна, и её плотность подобрана под текст, который лежит прямо на
   фоне страницы, — это основные и вторые чернила. Третьи чернила на голом фоне
   не стоят: они живут внутри карточек. */
:root[data-photo="on"] .z-bg__veil{display:none}
/* Карточки становятся непрозрачными: полупрозрачная карточка поверх снимка
   отдаёт контраст снимку, а он у носителя произвольный. */
:root[data-photo="on"]{--z-surface:var(--z-surface-opaque);--z-nested:var(--z-surface-opaque);
  --z-glass-1:var(--z-glass-flat-x);--z-glass-2:var(--z-glass-flat-x);--z-glass-3:var(--z-glass-flat-x)}
/* Картинка под одной карточкой или сценой — тот же приём в местных границах. */
.z-photo{position:relative;isolation:isolate;overflow:hidden}
.z-photo__img{position:absolute;inset:0;z-index:-2;background-image:var(--z-photo);
  background-size:var(--z-photo-size);background-position:var(--z-photo-pos);
  background-repeat:no-repeat;opacity:var(--z-photo-op);border-radius:inherit}
.z-photo__veil{position:absolute;inset:0;z-index:-1;background:var(--z-photo-veil);border-radius:inherit}
/* Панель над снимком — единственное, на чём текст лежит безопасно: её цвет
   известен, значит и контраст известен. Прямо на снимок текст не кладётся:
   снимок подставляет носитель, проверить его заранее нельзя. */
.z-photo__panel{display:flex;flex-direction:column;gap:var(--z-space-2);
  padding:var(--z-space-4);border-radius:var(--z-r-12);
  border:var(--z-bw-hair) solid var(--z-photo-panel-line);background:var(--z-photo-panel-bg);
  box-shadow:var(--z-photo-panel-shadow)}
.z-photo--bare .z-photo__veil{display:none}

/* Ось «сложность». Направляемый режим убирает вторую глубину, развёрнутый
   возвращает. Убранное не удаляется и объявляется: человек должен знать, что
   под этим экраном есть ещё слой, иначе это обман, а не настройка. */
[data-complexity="guided"] .z-deep{display:none}
[data-complexity="expanded"] .z-deep-mark{display:none}
.z-deep-mark{display:inline-flex;align-items:center;gap:var(--z-space-2);
  font-family:var(--z-font-mono);font-size:var(--z-fs-11-5);
  letter-spacing:var(--z-ls-mono-eyebrow);color:var(--z-deep-mark-ink)}
.z-deep-mark::before{content:"";width:var(--z-dot-7);height:var(--z-dot-7);border-radius:50%;
  border:var(--z-bw-1) dashed var(--z-deep-mark-line-mark)}

/* Ось «вид». Три способа показать один и тот же маршрут: парящий горизонт,
   ветвящийся путь и простой список. Разметку строит генератор, здесь — только
   то, что отличается видом. */
[data-view-mode="classic"] .z-route-wrap{height:auto;min-height:0}
[data-view-mode="classic"] .z-route{display:none}
[data-view-mode="classic"] .z-route-node{position:static;transform:none;width:auto;
  flex-direction:row;align-items:center;gap:var(--z-space-3);
  padding:var(--z-space-2) 0;border-bottom:var(--z-bw-hair) solid var(--z-route-node-line-bottom-classic)}
[data-view-mode="classic"] .z-route-node:last-child{border-bottom:0}
[data-view-mode="classic"] .z-route-node__text{align-items:flex-start;text-align:left;
  flex-direction:row;gap:var(--z-space-3);align-items:baseline}
[data-view-mode="classic"] .z-link-say{display:none}
[data-view-mode="classic"] .goal-hold{margin-left:0;margin-top:var(--z-space-4);max-width:none}
.z-bg__veil{position:absolute;inset:0;background:var(--z-bg-veil)}
.z-bg__grain{position:absolute;inset:0;background-image:var(--z-bg-grain-bg);background-size:300px 300px;mix-blend-mode:var(--z-grain-blend);opacity:var(--z-grain-opacity)}
@keyframes z-drift-1{0%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-2%,-1.4%,0) scale(1.11)}100%{transform:translate3d(0,0,0) scale(1.05)}}
@keyframes z-drift-2{0%{transform:translate3d(0,0,0) scale(1.08)}50%{transform:translate3d(2.4%,1%,0) scale(1.02)}100%{transform:translate3d(0,0,0) scale(1.08)}}
@keyframes z-bloom{0%,100%{opacity:.55;transform:translate3d(0,0,0) scale(1)}50%{opacity:.85;transform:translate3d(-1.4%,-1%,0) scale(1.06)}}

/* полотно: светлое без рамки, край держит тройная тень; рамка появляется в тёмной */
.z-polotno{position:relative;z-index:var(--z-z-polotno);padding:var(--z-polotno-pad);border-radius:var(--z-r-22);background:var(--z-polotno-bg);border:1px solid var(--z-polotno-line);box-shadow:var(--z-polotno-shadow);overflow:hidden}
/* вуаль — фон карточки, не слой поверх текста: ::before с inset:0 красился бы по тексту */
.z-card{position:relative;z-index:var(--z-z-card);border-radius:var(--z-r-14);background:var(--z-card-bg);border:1px solid var(--z-card-line);box-shadow:var(--z-card-shadow);padding:var(--z-space-4) var(--z-space-5);transition:transform var(--z-dur-2) var(--z-ease),box-shadow var(--z-dur-2) var(--z-ease)}
.z-card--main{border-radius:var(--z-r-16);padding:var(--z-space-5) 24px;box-shadow:var(--z-card-shadow-main)}
.z-card--glass{background:var(--z-card-glass-bg);border-color:var(--z-card-glass-line);border-radius:var(--z-r-18);padding:var(--z-space-6) 34px 28px;box-shadow:var(--z-card-shadow-glass)}
.z-card--glass-muted{background:var(--z-card-glass-bg-muted)}
.z-card--glass-accent{background:var(--z-card-glass-bg-accent);border-color:var(--z-card-glass-line-accent)}
.z-card:is(a,button,[tabindex]):hover{transform:translateY(-2px);box-shadow:var(--z-card-shadow-hover)}
.z-nested{border-radius:var(--z-r-13);border:1px solid var(--z-nested-line);background:var(--z-nested-bg);padding:15px var(--z-col-gap);box-shadow:var(--z-nested-shadow)}
.z-nested--unproven{border-style:dashed;border-color:var(--z-nested-line-unproven);background:var(--z-nested-bg-unproven)}
/* ширина панели без выдуманного числа (В2): 420 источником не подтверждается. Фолбэк 38rem
   действует, пока владелец не объявит --z-panel-w в tokens.css. */
.z-panel{position:fixed;top:0;right:0;bottom:0;width:min(92vw,var(--z-panel-w,38rem));max-width:100%;z-index:var(--z-z-drawer);background:var(--z-panel-bg);border-left:1px solid var(--z-panel-line-left);border-radius:var(--z-r-18) 0 0 var(--z-r-18);box-shadow:var(--z-panel-shadow);padding:26px 30px}

.z-tile{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:var(--z-r-11);background:linear-gradient(var(--z-tile-angle),var(--z-tile-grey-0),var(--z-tile-grey-1));border:1px solid var(--z-tile-grey-line);box-shadow:var(--z-tile-shadow);width:var(--z-tile-40);height:var(--z-tile-40);color:var(--z-tile-ink)}
.z-tile svg{width:var(--z-icon-22);height:var(--z-icon-22);stroke-width:var(--z-icon-stroke)}
.z-tile--22{width:var(--z-tile-22);height:var(--z-tile-22);border-radius:var(--z-r-7);box-shadow:none}
.z-tile--26{width:var(--z-tile-26);height:var(--z-tile-26);border-radius:var(--z-r-8)}
.z-tile--30{width:var(--z-tile-30);height:var(--z-tile-30);border-radius:var(--z-r-10);box-shadow:var(--z-tile-shadow-30)}
.z-tile--30 svg{width:var(--z-icon-17);height:var(--z-icon-17)}
.z-tile--32{width:var(--z-tile-32);height:var(--z-tile-32);border-radius:var(--z-r-10)}
.z-tile--34{width:var(--z-tile-34);height:var(--z-tile-34);border-radius:var(--z-r-11)}.z-tile--34 svg{width:var(--z-icon-19);height:var(--z-icon-19)}
.z-tile--36{width:var(--z-tile-36);height:var(--z-tile-36);border-radius:var(--z-r-11)}
.z-tile--44{width:var(--z-tile-44);height:var(--z-tile-44);border-radius:var(--z-r-12)}
.z-tile--54{width:var(--z-tile-54);height:var(--z-tile-54);border-radius:var(--z-r-14)}.z-tile--54 svg{width:var(--z-icon-26);height:var(--z-icon-26)}
.z-tile--green{background:linear-gradient(var(--z-tile-angle),var(--z-tile-green-0),var(--z-tile-green-1));border-color:var(--z-tile-green-line);color:var(--z-tile-ink-green)}
.z-tile--cyan{background:linear-gradient(var(--z-tile-angle),var(--z-tile-cyan-0),var(--z-tile-cyan-1));border-color:var(--z-tile-cyan-line);box-shadow:var(--z-tile-shadow-cyan)}
.z-tile--amber{background:linear-gradient(var(--z-tile-angle),var(--z-tile-amber-0),var(--z-tile-amber-1));border-color:var(--z-tile-amber-line);color:var(--z-tile-ink-amber)}
.z-tile--rose{background:linear-gradient(var(--z-tile-angle),var(--z-tile-rose-0),var(--z-tile-rose-1));border-color:var(--z-tile-rose-line);color:var(--z-tile-ink-rose)}
.z-tile--pink{background:linear-gradient(var(--z-tile-angle),var(--z-tile-pink-0),var(--z-tile-pink-1));border-color:var(--z-tile-pink-line);color:var(--z-tile-ink-pink)}
.z-tile--accent{background:var(--z-tile-bg-accent);border-color:var(--z-tile-line-accent);color:var(--z-tile-ink-accent);box-shadow:var(--z-tile-shadow-accent)}
.z-tile--solid{background:linear-gradient(var(--z-tile-angle),var(--z-tile-solid-0),var(--z-tile-solid-1));border-color:transparent;color:var(--z-tile-ink-solid);box-shadow:inset 0 0 0 1px var(--z-tile-solid-ring),var(--z-tile-glow-cyan)}
.z-tile--honest{background:none;border:1px dashed var(--z-tile-line-honest);box-shadow:none;color:var(--z-tile-ink-honest)}

.z-node{width:var(--z-node);height:var(--z-node);border-radius:50%;background:var(--z-node-bg);border:2px solid var(--z-node-line);display:inline-flex;align-items:center;justify-content:center;flex:none}
.z-node[data-size="30"]{width:var(--z-node-30);height:var(--z-node-30)}
.z-node[data-size="34"]{width:var(--z-node-34);height:var(--z-node-34)}
.z-node[data-size="38"]{width:var(--z-node-38);height:var(--z-node-38);box-shadow:var(--z-node-shadow)}
.z-node[data-size="44"]{width:var(--z-node-44);height:var(--z-node-44);box-shadow:var(--z-node-shadow)}
/* Пройденный и подтверждённый узлы — светлые с зелёной обводкой и галочкой, как
   в принятом эталоне: заливка съедала бы галочку, а вместе с ней и разницу
   между «сделано» и «сделано и подтверждено». */
.z-node[data-state="confirmed"]{background:var(--z-node-bg-confirmed);border-color:var(--z-node-line-confirmed);
  box-shadow:var(--z-node-shadow-confirmed);color:var(--z-node-ink-confirmed)}
.z-node[data-state="done"]{box-shadow:var(--z-node-shadow-done);
  color:var(--z-node-ink-done)}
.z-node[data-state="next"]{border:1.5px solid var(--z-node-line-next);box-shadow:var(--z-node-shadow-next)}
.z-node[data-state="unproven"]{border:1.5px dashed var(--z-node-line-unproven);box-shadow:none}
.z-node[data-state="failed"]{border-color:var(--z-node-line-failed);background:var(--z-node-bg-failed)}
.z-node[data-state="active"]{width:var(--z-node-active);height:var(--z-node-active);background:var(--z-node-bg-active);border-color:var(--z-node-line-active);box-shadow:var(--z-node-shadow-active);animation:z-breathe var(--z-dur-breathe) ease-in-out infinite}
.z-node[data-state="active"][data-size="56"]{width:var(--z-node-56);height:var(--z-node-56)}
.z-node[data-state="active"][data-size="44"]{width:var(--z-node-44);height:var(--z-node-44)}
/* Точка внутри — замена значку, а не довесок к нему: узел со значком её не
   получает, иначе в кружке оказываются два знака сразу. */
.z-node[data-state="active"]:empty::after{content:"";width:var(--z-node-dot);height:var(--z-node-dot);border-radius:50%;background:var(--z-node-dot-ink)}
.z-node[data-state="next"]:empty::after{content:"";width:var(--z-node-dot-plan);height:var(--z-node-dot-plan);border-radius:50%;background:var(--z-node-dot-ink-next)}
@keyframes z-breathe{0%,100%{box-shadow:var(--z-ring-current),var(--z-shadow-node-active)}50%{box-shadow:var(--z-ring-current),var(--z-shadow-node-active),0 0 0 6px var(--z-accent-a14)}}
.z-node__label{font-size:var(--z-fs-13);font-weight:600;color:var(--z-node-label-ink);line-height:var(--z-lh-title);text-align:center}
.z-node__state{font-size:var(--z-fs-11-5);color:var(--z-node-state-ink)}
.z-node[data-state="active"]~.z-node__label,.z-node[data-state="active"]~* .z-node__label{font-size:var(--z-fs-15-5);letter-spacing:var(--z-ls-row)}
.z-node[data-state="active"]~.z-node__state,.z-node[data-state="active"]~* .z-node__state{color:var(--z-node-ink-active);font-weight:500;font-size:var(--z-fs-12-5)}
.z-node[data-state="confirmed"]~.z-node__state,.z-node[data-state="confirmed"]~* .z-node__state{color:var(--z-node-ink-confirmed)}
/* маршрут: линия толстеет к текущему узлу и редеет после. 14/10/6 и «6 30» —
   значения заглушки бандлера 65908742, за канон не берутся */
.z-route__halo{fill:none;stroke:url(#z-halo);stroke-width:var(--z-route-w-halo);stroke-linecap:round}
.z-route__halo--ahead{stroke-width:var(--z-route-w-halo-ahead);opacity:var(--z-route-halo-op)}
.z-route__grad{fill:none;stroke:url(#z-done);stroke-width:var(--z-route-w-done-1);stroke-linecap:round}
.z-route__grad--near{stroke-width:var(--z-route-w-done-2)}
.z-route__grad-ahead{fill:none;stroke:url(#z-ahead);stroke-width:var(--z-route-w-ahead-1);stroke-linecap:round;stroke-dasharray:var(--z-route-dash-ahead-1)}
.z-route__grad-ahead--far{stroke-width:var(--z-route-w-ahead-2);stroke-dasharray:var(--z-route-dash-ahead-2)}
[data-density="compact"] .z-route__halo{stroke-width:var(--z-route-w-halo-c)}
[data-density="compact"] .z-route__halo--ahead{stroke-width:var(--z-route-w-halo-ahead-c)}
[data-density="compact"] .z-route__grad{stroke-width:var(--z-route-w-done-1c)}
[data-density="compact"] .z-route__grad--near{stroke-width:var(--z-route-w-done-2c)}
[data-density="compact"] .z-route__grad-ahead{stroke-width:var(--z-route-w-ahead-1c)}
[data-density="compact"] .z-route__grad-ahead--far{stroke-width:var(--z-route-w-ahead-2c)}
.z-route__done{fill:none;stroke:var(--z-route-compact-done);stroke-width:var(--z-route-w-compact);stroke-linecap:round;opacity:.85}
.z-route__ahead{fill:none;stroke:var(--z-route-ahead-stroke);stroke-width:var(--z-route-w-compact);stroke-linecap:round;stroke-dasharray:var(--z-route-dash-ahead)} /* знак без слова — несущий пунктир */
.z-route__alt{fill:none;stroke:var(--z-route-compact-alt);stroke-width:2;stroke-linecap:round;stroke-dasharray:var(--z-route-dash-alt);opacity:.75}
.z-route__flow{fill:none;stroke:url(#z-done);stroke-width:var(--z-route-w-flow);stroke-linecap:round;stroke-dasharray:var(--z-route-dash-flow);animation:z-flow var(--z-dur-flow) linear infinite}
@keyframes z-flow{to{stroke-dashoffset:-36}}
/* Прочерчивается только пройденный участок — у него есть pathLength="1", и
   доля пути считается честно. Предстоящий и течение сюда не попадают: общее
   правило на path сбивало им stroke-dasharray, и пунктир выходил сплошным. */
.z-route--draw .z-route__grad,.z-route--draw .z-route__done,
.z-route--draw .z-route__halo:not(.z-route__halo--ahead){stroke-dasharray:1;stroke-dashoffset:1;animation:z-draw var(--z-dur-draw) var(--z-ease) forwards}
@keyframes z-draw{to{stroke-dashoffset:0}}
.z-branch{grid-column:3/span 5;border-left:var(--z-branch-line-left);border-bottom:var(--z-branch-line-bottom);border-bottom-left-radius:var(--z-route-branch-r)}

/* бейдж переносится: «Entscheidung erforderlich» и «Проверка нейросетью не подключена»
   при nowrap вылезали бы из колонки. nowrap остаётся только у tiny — там всегда одно слово. */
.z-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--z-fs-12-5);padding:4px 10px;border-radius:var(--z-r-6);border:1px solid transparent;line-height:1.2;white-space:normal;text-wrap:balance}
.z-badge--small{font-size:var(--z-fs-11-5);padding:3px 9px}.z-badge--tiny{font-size:var(--z-fs-11);padding:2px 7px;border-radius:var(--z-r-5);white-space:nowrap}
.z-badge[data-level="completion"]{background:var(--z-badge-bg-completion);color:var(--z-badge-ink-completion)}
.z-badge[data-level="result"]{background:var(--z-badge-bg-result);color:var(--z-badge-ink-result)}
.z-badge[data-level="success"]{background:var(--z-badge-bg-success);color:var(--z-badge-ink-success)}
.z-badge[data-level="value"]{background:var(--z-badge-bg-value);color:var(--z-badge-ink-value)}
.z-badge[data-state="pending"]{color:var(--z-badge-ink-pending);border-color:var(--z-badge-line-pending);background:var(--z-badge-bg-pending)}
.z-badge[data-state="blocked"]{color:var(--z-badge-ink-blocked);border-color:var(--z-badge-line-blocked);background:var(--z-badge-bg-blocked)}
.z-badge[data-state="conflict"]{color:var(--z-badge-ink-conflict);border-color:var(--z-badge-line-conflict);background:var(--z-badge-bg-conflict)}
.z-badge[data-state="hypothesis"],.z-badge[data-state="no-route"]{color:var(--z-badge-ink-hypothesis-no-route);border:1px dashed var(--z-badge-line-hypothesis-no-route)} /* рядом со знаком стоит слово — обычный dash */
.z-badge[data-state="recommend"]{color:var(--z-badge-ink-recommend);border:1px dotted var(--z-badge-line-recommend);background:var(--z-badge-bg-recommend)}
.z-badge[data-state="forecast"]{color:var(--z-badge-ink-forecast);border-color:var(--z-badge-line-forecast);background:var(--z-badge-bg-forecast)} /* единственная solid-янтарная пилюля */
.z-badge[data-state="failed"]{color:var(--z-badge-ink-failed);border-color:var(--z-badge-line-failed);background:var(--z-badge-bg-failed)}
/* честные состояния. Голый .badge не трогаем: apps/web/public/styles.css:179-191 уже
   держит .badge и 25 цветных вариантов (23 из 24 ключей badges.js:85), равных по
   специфичности — победил бы порядок подключения. Область .z-scope = (0,2,0) и
   выигрывает, разметку менять не нужно: badgeHtml отдаёт «badge badge--<ключ>». */
.z-scope .badge,.z-scope .z-honest{display:inline-flex;align-items:center;gap:6px;font-family:var(--z-font-sans);font-weight:400;letter-spacing:normal;text-transform:none;font-size:var(--z-fs-12);padding:4px 10px;border-radius:var(--z-r-6);border:1px dashed var(--z-honest-line);color:var(--z-honest-ink);background:none;white-space:normal;text-wrap:balance}
.z-scope .badge--approval_required{border-style:solid;border-color:var(--z-scope-line);background:var(--z-scope-bg);color:var(--z-scope-ink)}
.z-scope .badge--error{border-style:solid;border-color:var(--z-scope-line-2);background:var(--z-scope-bg-2);color:var(--z-scope-ink-2)}
/* исключения нужны: через тот же .badge идут статусы заказа (apps/web/public/main.js:1055),
   и сплошное правило обесцветило бы «Ожидает проверки» и «Блокер». «Конфликт источников»
   приходит через .z-badge[data-state="conflict"], не через .badge. */
.z-pill--milestone{display:inline-flex;align-items:center;gap:7px;font-size:var(--z-fs-12-5);color:var(--z-pill-ink-milestone);background:var(--z-pill-bg-milestone);border:1px solid var(--z-pill-line-milestone);padding:6px 11px;border-radius:var(--z-r-pill)}
/* точка — 7-9 px рисунка, но цель указателя ::after: --z-hit (24, на ≤767 — 44) */
.z-dot{position:relative;display:inline-block;width:var(--z-dot-7);height:var(--z-dot-7);border-radius:50%;background:var(--z-dot-bg);flex:none}
.z-dot::after{content:"";position:absolute;left:50%;top:50%;width:var(--z-hit);height:var(--z-hit);min-width:100%;min-height:100%;transform:translate(-50%,-50%)}
.z-dot--9{width:var(--z-dot-9);height:var(--z-dot-9)}.z-dot--ok{background:var(--z-dot-bg-ok)}.z-dot--degraded{background:var(--z-dot-bg-degraded)}.z-dot--denied{background:var(--z-dot-bg-denied)}.z-dot--blocked{background:var(--z-dot-bg-blocked)}.z-dot--unavailable{background:none;border:1.5px dashed var(--z-dot-line-unavailable)}
.z-level-square{width:var(--z-level-square);height:var(--z-level-square);border-radius:var(--z-r-3);background:var(--z-level-square-bg);flex:none;margin-top:4px}
.z-level-square[data-level="result"]{background:var(--z-level-square-bg-result)}.z-level-square[data-state="unproven"]{background:none;border:1.5px dashed var(--z-level-square-line-unproven)}

.z-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--z-control);padding:0 20px;border-radius:var(--z-r-10);font:500 var(--z-fs-body)/1 var(--z-font-sans);border:1px solid var(--z-btn-line);cursor:pointer;transition:background var(--z-dur-1) var(--z-ease),transform var(--z-dur-1) var(--z-ease),box-shadow var(--z-dur-2) var(--z-ease)}
/* вес основной кнопки зависит от темы: тёмные чернила тёмной темы на насыщенном
   синем при весе 500 тонут.
   ОТКРЫТЫЙ КОНФЛИКТ (решает владелец, молча не снимать): 83c62a28 даёт плоскую
   акцентную заливку с тёмным текстом и весом 600; более поздний 65908742 — градиент
   от светлого акцента к основному с белым текстом, тёмных чернил в нём нет ни разу.
   РЕШЕНО владельцем 13.09: градиент. Направление подобрано под контраст — см. tokens.css. */
.z-btn--primary{background:var(--z-btn-primary-bg);color:var(--z-btn-primary-ink);font-weight:var(--z-btn-weight)}
.z-btn--primary:hover{background:var(--z-btn-primary-hover)}.z-btn--primary:active{transform:translateY(1px);background:var(--z-btn-primary-active)}
.z-btn--primary.z-btn--small{font-weight:var(--z-btn-weight-small)}
.z-btn--secondary{background:var(--z-btn-secondary-bg);color:var(--z-btn-secondary-ink);border-color:var(--z-btn-secondary-line);padding:0 18px}
.z-btn--link{background:none;color:var(--z-btn-link-ink);padding:0;min-height:var(--z-hit)} /* цель остаётся, даже когда кнопка выглядит ссылкой */
.z-btn--small{min-height:var(--z-control-small);padding:0 12px;font-size:var(--z-fs-12-5);border-radius:var(--z-r-8)}
.z-btn--danger{background:var(--z-btn-danger-bg);color:var(--z-btn-danger-ink);padding:0 16px;border-radius:var(--z-r-9);font-size:var(--z-fs-13)}
.z-btn[aria-disabled="true"],.z-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.z-btn[aria-busy="true"]{pointer-events:none}

/* колонки варианта задаются min-width при flex:1, а не width: длинный перевод
   («Entscheidung erforderlich») расширяет колонку, а не выдавливает соседей (В3) */
.z-option{display:flex;align-items:center;gap:15px;padding:11px 14px;border-radius:var(--z-r-11);border:1px solid var(--z-option-line);background:var(--z-option-bg);cursor:pointer;transition:border-color var(--z-dur-1) var(--z-ease),background var(--z-dur-1) var(--z-ease)}
.z-option[aria-checked="true"]{border:1.5px solid var(--z-option-line-picked);background:var(--z-option-bg-picked)}
.z-option__radio{width:var(--z-radio);height:var(--z-radio);border-radius:50%;border:1.5px solid var(--z-option-radio-line);flex:none}
.z-option[aria-checked="true"] .z-option__radio{background:var(--z-option-radio-bg-picked);border-color:var(--z-option-radio-line-picked)}
.z-option__name{flex:1 1 var(--z-option-name-w);min-width:var(--z-option-name-w);font-size:var(--z-fs-body);font-weight:500;color:var(--z-option-name-ink)}.z-option[aria-checked="true"] .z-option__name{font-weight:600}
.z-option__cost{flex:1;font-size:var(--z-fs-13);line-height:var(--z-lh-text);color:var(--z-option-cost-ink)}
.z-option__rev{flex:0 1 auto;min-width:var(--z-option-rev-w);font-size:var(--z-fs-12-5)}
.z-option__rev[data-rev="reversible"]{color:var(--z-option-rev-ink-ok)}.z-option__rev[data-rev="effort"]{color:var(--z-option-rev-ink-effort)}.z-option__rev[data-rev="irreversible"]{color:var(--z-option-rev-ink-no)}
.z-option__tail{flex:0 1 auto;min-width:var(--z-option-tail-w)}

.z-queue-row{display:flex;align-items:center;gap:14px;min-height:var(--z-row);padding:12px 18px;border-radius:var(--z-r-13);border:1px solid var(--z-queue-row-line);flex-wrap:wrap}
/* Когда места на две колонки нет, строка переносится целиком, а не
   выдавливает пояснение в столбик по одному слову. */
.z-queue-row[data-urgency="due"]{border-color:var(--z-queue-row-line-due);background:var(--z-queue-row-bg-due)}
.z-queue-row[data-urgency="attention"]{border-color:var(--z-queue-row-line-attention)}
[data-density="compact"] .z-queue-row{padding:8px 11px;border-radius:var(--z-r-10);gap:10px}
[data-density="compact"] .z-queue-row__title{flex:1 1 var(--z-row-title-w);min-width:var(--z-row-title-w);font-size:var(--z-fs-13);font-weight:600}
.z-goal__state{font-size:var(--z-fs-12);color:var(--z-goal-state-ink)}.z-goal__state[data-state="active"]{color:var(--z-goal-state-ink-active)}.z-goal__state[data-state="pending"]{color:var(--z-goal-state-ink-pending)}
.z-goal__title{margin:0;font-size:var(--z-fs-h2);line-height:var(--z-lh-h2);letter-spacing:var(--z-ls-h2);font-weight:600;color:var(--z-goal-title-ink);text-wrap:pretty}
.z-goal[data-state="hypothesis"]{border:1px dashed var(--z-goal-line-hypothesis);background:var(--z-goal-bg-hypothesis)}.z-goal[data-state="hypothesis"] .z-goal__title{color:var(--z-goal-title-ink-hypothesis);font-weight:400}
.z-health{display:flex;align-items:center;gap:18px;padding:13px 18px;border-radius:var(--z-r-14);border:1px solid var(--z-health-line);background:var(--z-health-bg)}
.z-health__name{display:flex;align-items:center;gap:8px;font-size:var(--z-fs-13);font-weight:600;color:var(--z-health-name-ink)}
.z-eyebrow{font-family:var(--z-font-mono);font-size:var(--z-fs-eyebrow);letter-spacing:var(--z-ls-eyebrow);text-transform:uppercase;color:var(--z-eyebrow-ink)}
.z-mono{font-family:var(--z-font-mono);font-variant-numeric:tabular-nums}
.z-empty{padding:var(--z-space-5);text-align:center;color:var(--z-empty-ink);font-size:var(--z-fs-13-5);border:1px dashed var(--z-empty-line);border-radius:var(--z-r-13)} /* рядом со знаком стоит текст — обычный dash */
.z-skeleton{border-radius:var(--z-r-8);background:var(--z-skeleton-bg);background-size:200% 100%;animation:z-shimmer var(--z-dur-flow) linear infinite}
@keyframes z-shimmer{to{background-position:-200% 0}}
:root[data-motion="reduced"] .z-skeleton{background:var(--z-skeleton-bg-reduced);animation:none}
@media (prefers-reduced-motion:reduce){:root:not([data-motion="full"]) .z-skeleton{background:var(--z-skeleton-bg-full);animation:none}}

/* фокус — свой токен и только outline: box-shadow снимается явно, иначе кольцо «выбран»
   слилось бы с кольцом «в фокусе»; forced-colors принудительно гасит box-shadow, и при
   outline:none индикатор исчез бы совсем, поэтому там outline берёт системный Highlight.
   У выбранного и одновременно сфокусированного свотча кольцо «выбран» гаснет — знак не
   теряется: «выбран» продублирован галочкой ::after. */
:where(.z-btn,.z-option,.z-node,.z-queue-row,.z-swatch,a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--z-focus-ring);outline-offset:2px;box-shadow:none}
@media (forced-colors:active){:where(.z-btn,.z-option,.z-node,.z-queue-row,.z-swatch,a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid Highlight}}
.z-swatch[aria-checked="true"]{box-shadow:var(--z-swatch-shadow-picked)}     /* предложено: в 83c62a28 выбранный свотч помечен outline 2px offset 2 */
.z-swatch[aria-checked="true"]::after{content:"✓";font-size:var(--z-fs-11);color:var(--z-swatch-ink-picked-mark)} /* цвет не единственный носитель; в forced-colors «выбран» читается по галочке */
@media (forced-colors:active){.z-card,.z-card--glass,.z-nested,.z-polotno,.z-option,.z-queue-row,.z-tile,.z-badge,.z-scope .badge,.z-dot{border:1px solid CanvasText;background:Canvas;color:CanvasText}.z-dot--unavailable{border-style:dashed}}

/* ============================================================
   СЛОЙ 2 — компоненты матрицы В2 поверх ядра.
   Те же правила: ни одного литерала цвета, только var() из tokens.css.
   Порядок разделов совпадает с нумерацией В2.
   ============================================================ */

/* --- 5.2 Оболочка: рельс, шапка, метка продукта ------------- */
.z-shell{display:flex;min-height:100vh;position:relative;z-index:var(--z-z-polotno)}
.z-rail{position:relative;flex:none;width:var(--z-rail-w);background:var(--z-rail-bg);
  border-right:1px solid var(--z-rail-line-right);display:flex;flex-direction:column;align-items:center;
  gap:var(--z-space-2);padding:var(--z-space-3) 0}
.z-rail__mark{width:var(--z-tile-30);height:var(--z-tile-30);border-radius:var(--z-r-9);
  background:var(--z-rail-mark-bg);margin-bottom:var(--z-space-2)}
.z-rail__item{width:var(--z-tile-36);height:var(--z-tile-36);border-radius:var(--z-r-11);
  background:var(--z-rail-item-bg);display:flex;align-items:center;justify-content:center;
  color:var(--z-rail-item-ink);border:1px solid transparent;transition:background var(--z-dur-1) var(--z-ease)}
.z-rail__item[aria-current]{background:var(--z-rail-item-bg-current);border-color:var(--z-rail-item-line-current);color:var(--z-rail-item-ink-current)}
.z-rail__item:last-child{margin-top:auto}
.z-header{flex:none;min-height:var(--z-header-h);display:flex;align-items:center;
  justify-content:space-between;gap:var(--z-space-4);padding:0 var(--z-content-pad)}
.z-header__name{font-size:var(--z-fs-shell);font-weight:600;letter-spacing:var(--z-ls-title);color:var(--z-header-name-ink)}
.z-header__name--marked{padding-bottom:var(--z-space-1);border-bottom:2px solid var(--z-header-name--marked-line-bottom)}
.z-chip{display:inline-flex;align-items:center;gap:var(--z-space-2);font-size:var(--z-fs-13);
  color:var(--z-chip-ink);background:var(--z-chip-bg);border:1px solid var(--z-chip-line);
  padding:var(--z-space-2) var(--z-space-3);border-radius:var(--z-r-9)}
.z-search{width:var(--z-row-title-w);font-size:var(--z-fs-13);color:var(--z-search-ink);
  background:var(--z-search-bg);border:1px solid var(--z-search-line);padding:var(--z-space-2) var(--z-space-3);
  border-radius:var(--z-r-9)}
.z-skip{position:absolute;left:-9999px}
.z-skip:focus{left:var(--z-space-4);top:var(--z-space-4);z-index:var(--z-z-popover);
  background:var(--z-skip-bg-focus);padding:var(--z-space-2) var(--z-space-3);border-radius:var(--z-r-8)}

/* --- 5.3 Уведомление: то, ради чего систему можно не открывать --- */
.z-notice{display:flex;align-items:center;gap:var(--z-space-4);padding:var(--z-space-3) var(--z-space-5);
  border-radius:var(--z-r-14);border:1px solid var(--z-notice-line);background:var(--z-notice-bg);
  box-shadow:var(--z-notice-shadow)}
.z-notice[data-urgency="due"]{border-color:var(--z-notice-line-due);background:var(--z-notice-bg-due)}
.z-notice[data-urgency="attention"]{border-color:var(--z-notice-line-attention)}
.z-notice__what{flex:1;font-size:var(--z-fs-13-5);line-height:var(--z-lh-text);color:var(--z-notice-what-ink)}
.z-toast{position:fixed;right:var(--z-space-5);bottom:var(--z-space-5);z-index:var(--z-z-toast);
  max-width:var(--z-aside-w);box-shadow:var(--z-toast-shadow)}

/* --- 5.7 Цель ---------------------------------------------- */
.z-goal__why{font-size:var(--z-fs-13-5);line-height:var(--z-lh-text);color:var(--z-goal-why-ink)}
.z-goal__head{display:flex;align-items:center;gap:var(--z-space-2)}
.z-goal__kicker{font-size:var(--z-fs-12-5);font-weight:500;color:var(--z-goal-kicker-ink)}

/* --- 5.8 Зависимость, привязанная к узлу маршрута ----------- */
.z-dependency{display:flex;flex-direction:column;gap:var(--z-space-2)}
.z-dependency__item{display:flex;align-items:center;gap:var(--z-space-3);
  padding:var(--z-space-3) var(--z-space-3);border-radius:var(--z-r-11);
  border:1px solid var(--z-dependency-item-line);background:var(--z-dependency-item-bg)}
.z-dependency__item[data-state="active"]{border-color:var(--z-dependency-item-line-active);background:var(--z-dependency-item-bg-active)}
.z-dependency__item[data-state="pending"]{border-color:var(--z-dependency-item-line-pending);background:var(--z-dependency-item-bg-pending)}
.z-dependency__item[data-state="next"]{border-color:var(--z-dependency-item-line-next);background:var(--z-dependency-item-bg-next)}
.z-dependency__name{flex:1;font-size:var(--z-fs-13-5);font-weight:600;color:var(--z-dependency-name-ink)}
.z-dependency__sub{font-size:var(--z-fs-12);color:var(--z-dependency-sub-ink)}
.z-dependency__state{font-size:var(--z-fs-12-5)}
.z-dependency__item[data-state="active"] .z-dependency__state{color:var(--z-dependency-item-ink-active)}
.z-dependency__item[data-state="pending"] .z-dependency__state{color:var(--z-dependency-item-ink-pending)}
.z-dependency__item[data-state="next"] .z-dependency__state{color:var(--z-dependency-item-ink-next)}
.z-dependency__note{font-family:var(--z-font-mono);font-size:var(--z-fs-11-5);
  letter-spacing:var(--z-ls-mono-eyebrow);color:var(--z-dependency-note-ink)}

/* --- 5.9 Решение: вопрос, рекомендация, несогласие, история -- */
.z-decision__q{font-size:var(--z-fs-decision);font-weight:600;letter-spacing:var(--z-ls-decision);
  line-height:var(--z-lh-title);color:var(--z-decision-q-ink);text-wrap:pretty}
.z-decision__quiet{font-size:var(--z-fs-12-5);color:var(--z-decision-quiet-ink)}
.z-option__pay{display:block;padding:var(--z-space-2) var(--z-space-3);border-radius:var(--z-r-8);
  border:1px solid var(--z-option-pay-line);background:var(--z-option-pay-bg);font-size:var(--z-fs-13);
  line-height:var(--z-lh-text);color:var(--z-option-pay-ink)}
.z-option[data-rev="reversible"] .z-option__pay{border-color:var(--z-option-pay-line-ok);background:var(--z-option-pay-bg-ok)}
.z-option[data-rev="effort"] .z-option__pay{border-color:var(--z-option-pay-line-effort);background:var(--z-option-pay-bg-effort)}
.z-option[data-rev="irreversible"] .z-option__pay{border-color:var(--z-option-pay-line-no);background:var(--z-option-pay-bg-no)}
.z-option__paylabel{display:block;font-family:var(--z-font-mono);font-size:var(--z-fs-11-5);
  letter-spacing:var(--z-ls-mono-eyebrow);margin-bottom:var(--z-space-1)}
.z-option[data-rev="reversible"] .z-option__paylabel{color:var(--z-option-pay-ink-ok)}
.z-option[data-rev="effort"] .z-option__paylabel{color:var(--z-option-pay-ink-effort)}
.z-option[data-rev="irreversible"] .z-option__paylabel{color:var(--z-option-pay-ink-no)}
.z-recommendation{border:1px dashed var(--z-recommendation-line);border-radius:var(--z-r-14);
  background:var(--z-recommendation-bg);padding:var(--z-space-4) var(--z-space-5);
  display:flex;flex-direction:column;gap:var(--z-space-3)}
.z-recommendation__title{font-size:var(--z-fs-15);font-weight:600;color:var(--z-recommendation-title-ink)}
.z-recommendation__note{font-size:var(--z-fs-12);line-height:var(--z-lh-text);color:var(--z-recommendation-note-ink)}
.z-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--z-space-2)}
.z-fact{padding:var(--z-space-2) var(--z-space-3);border-radius:var(--z-r-8);
  border:1px solid var(--z-fact-line);background:var(--z-fact-bg)}
.z-fact__label{display:block;font-family:var(--z-font-mono);font-size:var(--z-fs-11);
  letter-spacing:var(--z-ls-mono-eyebrow);color:var(--z-fact-label-ink);margin-bottom:var(--z-space-1)}
.z-fact__value{font-size:var(--z-fs-13);color:var(--z-fact-value-ink)}
.z-confidence{display:flex;align-items:center;gap:var(--z-space-2)}
.z-confidence__track{width:var(--z-option-rev-w);height:var(--z-space-1);border-radius:var(--z-r-pill);
  background:var(--z-confidence-track-bg);overflow:hidden}
.z-confidence__fill{height:100%;border-radius:var(--z-r-pill);background:var(--z-confidence-fill-bg)}
.z-confidence__value{font-family:var(--z-font-mono);font-size:var(--z-fs-12);
  font-variant-numeric:tabular-nums;color:var(--z-confidence-value-ink)}
.z-dissent{border:1px solid var(--z-dissent-line);border-radius:var(--z-r-14);
  background:var(--z-dissent-bg);padding:var(--z-space-4) var(--z-space-5);
  display:flex;flex-direction:column;gap:var(--z-space-2)}
.z-dissent__who{font-size:var(--z-fs-12-5);font-weight:600;color:var(--z-dissent-who-ink)}
.z-dissent__quote{font-size:var(--z-fs-13);line-height:var(--z-lh-text);color:var(--z-dissent-quote-ink)}
.z-trace{border:1px solid var(--z-trace-line);border-radius:var(--z-r-14);background:var(--z-trace-bg);
  padding:var(--z-space-4) var(--z-space-5);display:flex;flex-direction:column;gap:var(--z-space-2)}

/* --- 5.10 Очередь решений ----------------------------------- */
.z-queue-row__title{flex:1 1 var(--z-row-title-w);min-width:0;max-width:100%;font-size:var(--z-fs-14-5);
  font-weight:600;color:var(--z-queue-row-title-ink)}
.z-queue-row__why{flex:1 1 220px;min-width:0;font-size:var(--z-fs-13);line-height:var(--z-lh-text)}
.z-queue-row[data-state="blocked"] .z-queue-row__why{color:var(--z-queue-row-why-ink-blocked)}
.z-queue-row[data-state="pending"] .z-queue-row__why{color:var(--z-queue-row-why-ink-pending)}
.z-queue-row[data-state="conflict"] .z-queue-row__why{color:var(--z-queue-row-why-ink-conflict)}
.z-queue-row[data-state="next"] .z-queue-row__why{color:var(--z-queue-row-why-ink-next)}
.z-queue-note{font-size:var(--z-fs-12-5);color:var(--z-queue-note-ink)}

/* --- 5.11 Карточка объекта: шесть подписанных фактов --------- */
.z-object{display:flex;flex-direction:column;gap:var(--z-space-2)}
.z-fact-row{display:flex;gap:var(--z-space-4);align-items:baseline;
  padding:var(--z-space-3) var(--z-space-4);border-radius:var(--z-r-11);
  border:1px solid var(--z-fact-row-line);background:var(--z-fact-row-bg)}
.z-fact-row__label{flex:none;width:var(--z-fact-label-w);font-family:var(--z-font-mono);
  font-size:var(--z-fs-11-5);letter-spacing:var(--z-ls-mono-eyebrow);color:var(--z-fact-row-label-ink)}
.z-fact-row__value{flex:1;font-size:var(--z-fs-13-5);line-height:var(--z-lh-text);color:var(--z-fact-row-value-ink)}
.z-fact-row[data-state="pending"]{border-color:var(--z-fact-row-line-pending);background:var(--z-fact-row-bg-pending)}
.z-fact-row[data-state="pending"] .z-fact-row__value{color:var(--z-fact-row-value-ink-pending)}
.z-fact-row[data-state="conflict"]{border-color:var(--z-fact-row-line-conflict);background:var(--z-fact-row-bg-conflict)}
.z-fact-row[data-state="conflict"] .z-fact-row__value{color:var(--z-fact-row-value-ink-conflict)}

/* --- 5.12 Четыре уровня доказанности ------------------------ */
.z-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--z-space-3)}
.z-level{display:flex;flex-direction:column;gap:var(--z-space-2);padding:var(--z-space-4);
  border-radius:var(--z-r-12);border:1px solid var(--z-level-line);background:var(--z-level-bg)}
.z-level__name{display:flex;align-items:center;gap:var(--z-space-2);font-size:var(--z-fs-13-5);
  font-weight:600;color:var(--z-level-name-ink)}
.z-level__fact{font-size:var(--z-fs-13);line-height:var(--z-lh-text);color:var(--z-level-fact-ink)}
.z-level[data-level="result"]{border-color:var(--z-level-result-line);background:var(--z-level-result-bg)}
.z-level[data-state="unproven"]{border-style:dashed;border-color:var(--z-level-line-unproven);background:var(--z-level-bg-unproven)}
.z-level[data-state="unproven"] .z-level__name{color:var(--z-level-name-ink-unproven)}
.z-levels__note{font-size:var(--z-fs-12);color:var(--z-levels-note-ink);line-height:var(--z-lh-text)}

/* --- 5.13 Показатели потока --------------------------------- */
.z-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--z-space-3)}
.z-kpi{display:flex;flex-direction:column;gap:var(--z-space-1);padding:var(--z-space-4) var(--z-space-5);
  border-radius:var(--z-r-12);border:1px solid var(--z-kpi-line);background:var(--z-kpi-bg)}
.z-kpi__label{font-size:var(--z-fs-12-5);color:var(--z-kpi-label-ink)}
.z-kpi__value{font-family:var(--z-font-mono);font-size:var(--z-fs-decision);
  font-variant-numeric:tabular-nums;letter-spacing:var(--z-ls-num);color:var(--z-kpi-value-ink)}
.z-kpi__note{font-size:var(--z-fs-12-5);line-height:var(--z-lh-text);color:var(--z-kpi-note-ink)}
.z-kpi[data-urgency="attention"]{border-color:var(--z-kpi-line-attention);background:var(--z-kpi-bg-attention)}
.z-kpi[data-urgency="attention"] .z-kpi__note{color:var(--z-kpi-note-ink-attention)}
.z-kpi[data-urgency="due"]{border-color:var(--z-kpi-line-due);background:var(--z-kpi-bg-due)}
.z-kpi[data-urgency="due"] .z-kpi__value,.z-kpi[data-urgency="due"] .z-kpi__note{color:var(--z-kpi-value-ink-due)}

/* --- 5.14 Вход: пришло и ещё не стало работой --------------- */
.z-intake-row{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:var(--z-space-4);
  align-items:center;padding:var(--z-space-4);border-radius:var(--z-r-12);
  border:1px solid var(--z-intake-row-line);background:var(--z-intake-row-bg)}
.z-intake-row__cell{display:flex;flex-direction:column;gap:var(--z-space-1)}
.z-intake-row__label{font-family:var(--z-font-mono);font-size:var(--z-fs-11-5);
  letter-spacing:var(--z-ls-mono-eyebrow);color:var(--z-intake-row-label-ink)}
.z-intake-row__value{font-size:var(--z-fs-13-5);color:var(--z-intake-row-value-ink)}
.z-intake-row__cell[data-state="pending"] .z-intake-row__value{color:var(--z-intake-row-cell-ink-pending)}

/* --- 5.15 Критичная операция: отделена от чтения ------------- */
.z-critical{display:flex;align-items:center;gap:var(--z-space-4);padding:var(--z-space-4) var(--z-space-5);
  border-radius:var(--z-r-12);border:1px solid var(--z-critical-line);
  background:var(--z-critical-bg)}
.z-critical__body{flex:1;display:flex;flex-direction:column;gap:var(--z-space-1)}
.z-critical__name{font-size:var(--z-fs-13-5);font-weight:600;color:var(--z-critical-name-ink)}
.z-critical__what{font-size:var(--z-fs-12-5);line-height:var(--z-lh-text);color:var(--z-critical-what-ink)}
.z-critical__rev{color:var(--z-critical-rev-ink)}

/* --- 5.16 Восстановление: прогон прежде применения ---------- */
.z-recovery{display:flex;flex-direction:column;gap:var(--z-space-2)}
.z-recovery__note{font-size:var(--z-fs-11);line-height:var(--z-lh-text);color:var(--z-recovery-note-ink)}

/* --- 5.17 Цепочка «почему сюда» ------------------------------ */
.z-chain{display:flex;flex-direction:column}
.z-chain__step{display:flex;gap:var(--z-space-3)}
.z-chain__rail{display:flex;flex-direction:column;align-items:center;width:var(--z-space-4);flex:none}
.z-chain__dot{width:var(--z-dot-9);height:var(--z-dot-9);border-radius:50%;
  background:var(--z-chain-dot-bg);margin-top:var(--z-space-1)}
.z-chain__dot[data-state="done"]{background:var(--z-chain-dot-bg-done)}
.z-chain__dot[data-state="pending"]{background:var(--z-chain-dot-bg-pending)}
.z-chain__dot[data-state="unproven"]{background:none;border:1px dashed var(--z-chain-dot-line-unproven)}
.z-chain__line{flex:1;width:0;border-left:1px solid var(--z-chain-line-line-left)}
.z-chain__step[data-state="unproven"] .z-chain__line{border-left-style:dashed}
.z-chain__body{padding-bottom:var(--z-space-3)}
.z-chain__label{font-size:var(--z-fs-12);color:var(--z-chain-label-ink)}
.z-chain__value{font-size:var(--z-fs-13-5);color:var(--z-chain-value-ink)}

/* --- 5.18 Ожидалось / получено ------------------------------ */
.z-expected{display:flex;gap:var(--z-space-6);align-items:flex-start}
.z-expected__side{flex:1;display:flex;flex-direction:column;gap:var(--z-space-1)}
.z-expected__num{font-family:var(--z-font-mono);font-size:var(--z-fs-decision);
  font-variant-numeric:tabular-nums;color:var(--z-expected-num-ink)}
.z-expected__side[data-state="confirmed"] .z-expected__num{color:var(--z-expected-side-ink-confirmed)}
.z-expected__unit{font-size:var(--z-fs-12);color:var(--z-expected-unit-ink)}
.z-expected__verdict{font-size:var(--z-fs-12-5);line-height:var(--z-lh-text);color:var(--z-expected-verdict-ink)}

/* --- 5.19 Деньги: сумма всегда с единицей и основанием ------- */
.z-money{font-family:var(--z-font-mono);font-variant-numeric:tabular-nums;
  letter-spacing:var(--z-ls-num);color:var(--z-money-ink)}
.z-money[data-state="confirmed"]{color:var(--z-money-ink-confirmed)}
.z-money[data-state="failed"]{color:var(--z-money-ink-failed)}
.z-money__unit{font-family:var(--z-font-sans);font-size:var(--z-fs-11-5);color:var(--z-money-unit-ink);
  margin-left:var(--z-space-1)}
.z-ledger-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--z-space-4);
  align-items:center;padding:var(--z-space-3) var(--z-space-4);
  border-bottom:1px solid var(--z-ledger-row-line-bottom)}
.z-value-card{border:1px dashed var(--z-value-card-line);border-radius:var(--z-r-11);background:var(--z-value-card-bg);
  padding:var(--z-space-3) var(--z-space-4);display:flex;align-items:center;gap:var(--z-space-4)}
.z-value-card__goal{flex:1;font-size:var(--z-fs-13-5);color:var(--z-value-card-goal-ink)}
.z-value-card__q{flex:none;font-size:var(--z-fs-12-5);color:var(--z-value-card-q-ink)}

/* --- 5.20 Искра: характер, а не измерение ------------------- */
.z-spark{display:block;width:100%;height:var(--z-tile-32)}
.z-spark__line{fill:none;stroke:var(--z-spark-line-stroke);stroke-width:1.5;stroke-linecap:round}
.z-spark__area{fill:var(--z-spark-area-fill);stroke:none}

/* --- 5.21 Мелкие: поле, переключатели, аватар, подсказка ----- */
.z-field{display:flex;flex-direction:column;gap:var(--z-space-1);min-width:var(--z-field-min-width)}
.z-field__label{font-size:var(--z-fs-12-5);color:var(--z-field-label-ink)}
.z-field__input{min-height:var(--z-control);padding:0 var(--z-space-3);border-radius:var(--z-r-6);
  border:1px solid var(--z-field-input-line);background:var(--z-field-input-bg);color:var(--z-field-input-ink);
  font:400 var(--z-fs-body)/var(--z-lh-body) var(--z-font-sans)}
.z-field__error{font-size:var(--z-fs-12);color:var(--z-field-error-ink)}
.z-field__input[aria-invalid="true"]{border-color:var(--z-field-input-line-2);background:var(--z-field-input-bg-2)}
.z-seg{display:inline-flex;gap:var(--z-space-1)}
.z-seg__item{font-size:var(--z-fs-12-5);padding:var(--z-space-2) var(--z-space-3);
  border-radius:var(--z-r-8);border:1px solid var(--z-seg-item-line);background:transparent;
  color:var(--z-seg-item-ink);cursor:pointer;min-height:var(--z-control-small)}
.z-seg__item[aria-checked="true"]{background:var(--z-seg-item-bg-picked);border-color:var(--z-seg-item-line-picked);color:var(--z-seg-item-ink-picked)}
.z-avatar{width:var(--z-avatar-28);height:var(--z-avatar-28);border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--z-fs-11-5);
  font-weight:600;color:var(--z-avatar-ink);
  background:var(--z-avatar-bg);
  box-shadow:var(--z-avatar-shadow)}
.z-avatar--36{width:var(--z-avatar-36);height:var(--z-avatar-36);font-size:var(--z-fs-13)}
.z-avatar--44{width:var(--z-avatar-44);height:var(--z-avatar-44);font-size:var(--z-fs-14-5)}
.z-tooltip{position:absolute;z-index:var(--z-z-popover);max-width:var(--z-row-title-w);
  padding:var(--z-space-2) var(--z-space-3);border-radius:var(--z-r-8);
  background:var(--z-tooltip-bg);border:1px solid var(--z-tooltip-line);box-shadow:var(--z-tooltip-shadow);
  font-size:var(--z-fs-12);color:var(--z-tooltip-ink)}
.z-divider{height:var(--z-space-6)}
.z-divider--line{height:1px;background:var(--z-divider-bg-line);border:0}
.z-kbd{font-family:var(--z-font-mono);font-size:var(--z-fs-11-5);padding:var(--z-space-1) var(--z-space-2);
  border-radius:var(--z-r-5);border:1px solid var(--z-kbd-line);background:var(--z-kbd-bg);color:var(--z-kbd-ink)}
.z-pill{display:inline-flex;align-items:center;gap:var(--z-space-2);font-size:var(--z-fs-12-5);
  padding:var(--z-space-2) var(--z-space-3);border-radius:var(--z-r-pill);
  border:1px solid var(--z-pill-line);background:var(--z-pill-bg);color:var(--z-pill-ink)}
.z-pill--pinned{font-family:var(--z-font-mono);font-size:var(--z-fs-11-5);
  letter-spacing:var(--z-ls-mono-eyebrow);color:var(--z-pill-ink-pinned);
  border-color:var(--z-pill-line-pinned);background:var(--z-pill-bg-pinned)}

/* --- 5.22 Честные состояния: один стиль на все ключи badges.js */
.badge,.z-honest{display:inline-flex;align-items:center;font-size:var(--z-fs-12);
  padding:var(--z-space-1) var(--z-space-3);border-radius:var(--z-r-6);
  border:1px dashed var(--z-honest-line);color:var(--z-honest-ink);background:none}
.z-honest--mono{font-family:var(--z-font-mono);font-size:var(--z-fs-11-5);letter-spacing:var(--z-ls-mono-eyebrow)}

/* --- 5.23 Раскрытое меню и сборка под себя ------------------- */
.z-menu{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--z-space-6)}
.z-menu__group{display:flex;flex-direction:column;gap:var(--z-space-3)}
.z-menu__head{display:flex;align-items:center;gap:var(--z-space-2);font-size:var(--z-fs-14-5);
  font-weight:600;color:var(--z-menu-head-ink)}
.z-menu__why{font-size:var(--z-fs-12);line-height:var(--z-lh-text);color:var(--z-menu-why-ink)}
.z-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--z-space-2);
  padding:var(--z-space-2) var(--z-space-3);border-radius:var(--z-r-9);
  border:1px solid var(--z-menu-item-line);font-size:var(--z-fs-13-5);color:var(--z-menu-item-ink)}
.z-menu__item[data-state="pinned"]{background:var(--z-menu-item-bg-pinned);border-color:var(--z-menu-item-line-pinned);color:var(--z-menu-item-ink-pinned)}
.z-menu__item[data-state="hidden"]{border-style:dashed;border-color:var(--z-menu-item-line-hidden);background:var(--z-menu-item-bg-hidden)}
.z-menu__mark{font-size:var(--z-fs-11);color:var(--z-menu-mark-ink)}
.z-panel .z-menu{grid-template-columns:repeat(2,1fr);gap:var(--z-space-5)}
@media (max-width:767px){.z-panel .z-menu{grid-template-columns:1fr}}
.z-axis{display:flex;align-items:center;gap:var(--z-space-4)}
.z-axis__name{flex:none;width:var(--z-fact-label-w);font-size:var(--z-fs-13);color:var(--z-axis-name-ink)}

/* --- Мобильная раскладка ------------------------------------ */
@media (max-width:640px){
  .z-shell{flex-direction:column}
  .z-rail{flex-direction:row;width:100%;border-right:0;border-bottom:1px solid var(--z-rail-line-bottom);
    justify-content:flex-start;padding:var(--z-space-2) var(--z-space-3);overflow-x:auto}
  .z-rail__item:last-child{margin-top:0;margin-left:auto}
  .z-card,.z-card--main{border-radius:var(--z-r-14);padding:var(--z-space-4)}
  .z-btn{min-height:var(--z-control-mobile)}
  .z-levels,.z-kpis,.z-menu,.z-facts{grid-template-columns:1fr}
  .z-intake-row{grid-template-columns:1fr}
  .z-option{flex-wrap:wrap}
  .z-option__name,.z-option__rev,.z-option__tail{width:auto}
  .z-queue-row{flex-wrap:wrap}
  .z-queue-row__title{width:auto}
  .z-expected{flex-direction:column;gap:var(--z-space-3)}
  .z-panel{width:100%;left:0;right:0;top:auto;border-radius:var(--z-r-18) var(--z-r-18) 0 0}
  .z-fact-row{flex-direction:column;gap:var(--z-space-1)}
  .z-fact-row__label{width:auto}
}

/* ============================================================
   СЛОЙ 3 — общая библиотека: то, что переиспользует любой модуль
   Zontium (CRM, финансы, Ruta, Nomen, парсер, WorkOS), а не один.
   Доменных понятий здесь нет: ни заказа, ни платежа, ни смены.
   ============================================================ */

/* --- Таблица: плотный показ однородных записей ---------------- */
.z-table-wrap{overflow-x:auto}
.z-table{width:100%;border-collapse:collapse;font-size:var(--z-fs-13-5)}
.z-table th{text-align:left;font-family:var(--z-font-mono);font-size:var(--z-fs-11-5);
  letter-spacing:var(--z-ls-mono-eyebrow);color:var(--z-table-ink);font-weight:400;
  padding:var(--z-space-2) var(--z-space-3);border-bottom:1px solid var(--z-table-line-bottom)}
.z-table td{padding:var(--z-space-3);border-bottom:1px solid var(--z-table-line-bottom-2);color:var(--z-table-ink-2);vertical-align:top}
.z-table tbody tr:hover td{background:var(--z-table-bg-hover)}
.z-table td:first-child{color:var(--z-table-ink-3);font-weight:500}
.z-table--quiet td,.z-table--quiet th{border-bottom:0}
.z-table__num{font-family:var(--z-font-mono);font-variant-numeric:tabular-nums;text-align:right}

/* --- Список записей: когда строка важнее колонок -------------- */
.z-list{display:flex;flex-direction:column}
.z-list__row{display:flex;align-items:center;gap:var(--z-space-3);padding:var(--z-space-3) var(--z-space-4);
  border-bottom:1px solid var(--z-list-row-line-bottom)}
.z-list__row:last-child{border-bottom:0}
.z-list__row:hover{background:var(--z-list-row-bg-hover)}
.z-list__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.z-list__title{font-size:var(--z-fs-13-5);font-weight:600;color:var(--z-list-title-ink)}
.z-list__sub{font-size:var(--z-fs-12-5);color:var(--z-list-sub-ink)}

/* --- Дерево: вложенность без отдельной страницы --------------- */
.z-tree{display:flex;flex-direction:column;gap:var(--z-space-1)}
.z-tree__node{display:flex;align-items:center;gap:var(--z-space-2);padding:var(--z-space-1) var(--z-space-2);
  border-radius:var(--z-r-8);font-size:var(--z-fs-13-5);color:var(--z-tree-node-ink)}
.z-tree__node[aria-current="true"]{background:var(--z-tree-node-bg-current);color:var(--z-tree-node-ink-current)}
.z-tree__node[data-level="1"]{margin-left:var(--z-space-5)}
.z-tree__node[data-level="2"]{margin-left:var(--z-space-9)}

/* --- Вкладки: один предмет, разные срезы ---------------------- */
.z-tabs{display:flex;gap:var(--z-space-1);border-bottom:1px solid var(--z-tabs-line-bottom)}
.z-tab{padding:var(--z-space-2) var(--z-space-4);font-size:var(--z-fs-13-5);color:var(--z-tab-ink);
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;min-height:var(--z-control)}
.z-tab[aria-selected="true"]{color:var(--z-tab-ink-2);border-bottom-color:var(--z-tab-line-bottom);font-weight:500}

/* --- Хлебные крошки: где я нахожусь --------------------------- */
.z-crumbs{display:flex;align-items:center;gap:var(--z-space-2);font-size:var(--z-fs-12-5);color:var(--z-crumbs-ink);flex-wrap:wrap}
.z-crumbs__sep{color:var(--z-crumbs-sep-ink)}
.z-crumbs__item[aria-current="page"]{color:var(--z-crumbs-item-ink-current);font-weight:500}

/* --- Шаги: длинное действие, разбитое на части ---------------- */
.z-steps{display:flex;align-items:flex-start;gap:var(--z-space-4)}
.z-step{flex:1;display:flex;flex-direction:column;gap:var(--z-space-1);padding-top:var(--z-space-3);
  border-top:2px solid var(--z-step-line-top)}
.z-step[data-state="done"]{border-top-color:var(--z-step-line-top-done)}
.z-step[data-state="active"]{border-top-color:var(--z-step-line-top-active)}
.z-step[data-state="failed"]{border-top-color:var(--z-step-line-top-failed)}
.z-step__name{font-size:var(--z-fs-13-5);font-weight:600;color:var(--z-step-name-ink)}
.z-step__state{font-size:var(--z-fs-12);color:var(--z-step-state-ink)}
.z-step[data-state="active"] .z-step__state{color:var(--z-step-state-ink-active)}
.z-step[data-state="done"] .z-step__state{color:var(--z-step-state-ink-done)}

/* --- Страницы длинного списка --------------------------------- */
.z-pagination{display:flex;align-items:center;gap:var(--z-space-2);font-size:var(--z-fs-12-5);color:var(--z-pagination-ink)}
.z-pagination__page{min-width:var(--z-control-small);min-height:var(--z-control-small);
  display:inline-flex;align-items:center;justify-content:center;border-radius:var(--z-r-8);
  border:1px solid var(--z-pagination-page-line);background:transparent;color:var(--z-pagination-page-ink);cursor:pointer}
.z-pagination__page[aria-current="page"]{background:var(--z-pagination-page-bg-current);border-color:var(--z-pagination-page-line-current);color:var(--z-pagination-page-ink-current)}

/* --- Поля ввода: остальные виды ------------------------------- */
.z-textarea{min-height:calc(var(--z-control) * 2.4);padding:var(--z-space-2) var(--z-space-3);
  border-radius:var(--z-r-6);border:1px solid var(--z-textarea-line);background:var(--z-textarea-bg);
  color:var(--z-textarea-ink);font:400 var(--z-fs-body)/var(--z-lh-text) var(--z-font-sans);resize:vertical}
.z-select{min-height:var(--z-control);padding:0 var(--z-space-3);border-radius:var(--z-r-6);
  border:1px solid var(--z-select-line);background:var(--z-select-bg);color:var(--z-select-ink);
  font:400 var(--z-fs-body)/1 var(--z-font-sans)}
.z-check{display:inline-flex;align-items:center;gap:var(--z-space-2);font-size:var(--z-fs-13-5);
  color:var(--z-check-ink);cursor:pointer;min-height:var(--z-control-small)}
.z-check__box{width:18px;height:18px;border-radius:var(--z-r-5);border:1.5px solid var(--z-check-box-line);
  background:var(--z-check-box-bg);flex:none;display:inline-flex;align-items:center;justify-content:center}
.z-check input:checked + .z-check__box{background:var(--z-check-box-bg-2);border-color:var(--z-check-box-line-2)}
.z-check input[type="checkbox"]:checked + .z-check__box:empty::after{content:"✓";color:var(--z-check-mark-ink);font-size:var(--z-fs-12)}
.z-check input:focus-visible + .z-check__box{outline:var(--z-check-focus-width) solid var(--z-check-focus-line);outline-offset:var(--z-check-focus-offset)}
.z-check__box--round{border-radius:50%}
.z-check input{position:absolute;opacity:0;width:0;height:0}
.z-switch{position:relative;width:38px;height:22px;border-radius:var(--z-r-pill);
  background:var(--z-switch-bg);border:0;cursor:pointer;transition:background var(--z-dur-1) var(--z-ease)}
.z-switch[aria-checked="true"]{background:var(--z-switch-bg-picked)}
.z-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--z-switch-bg-mark);transition:transform var(--z-dur-1) var(--z-ease)}
.z-switch[aria-checked="true"]::after{transform:translateX(16px)}

/* --- Полоса выполнения. ВНИМАНИЕ: только для длящейся операции
   (загрузка файла, прогон проверки), где доля обработанного — факт.
   Для «выполнено N процентов работы» её применять нельзя: это
   измерение активности, запрещённое концепцией. ------------------ */
.z-progress{height:var(--z-space-1);border-radius:var(--z-r-pill);background:var(--z-progress-bg);overflow:hidden}
.z-progress__fill{height:100%;border-radius:var(--z-r-pill);background:var(--z-progress-fill-bg);
  transition:width var(--z-dur-2) var(--z-ease)}
.z-progress--wait .z-progress__fill{width:36%;animation:z-wait 1.4s ease-in-out infinite}
@keyframes z-wait{0%{margin-left:0}50%{margin-left:64%}100%{margin-left:0}}

/* --- Сообщение на всю ширину: сказать словами, а не цветом ----- */
.z-alert{display:flex;align-items:flex-start;gap:var(--z-space-3);padding:var(--z-space-3) var(--z-space-4);
  border-radius:var(--z-r-12);border:1px solid var(--z-alert-line);background:var(--z-alert-bg);
  font-size:var(--z-fs-13-5);line-height:var(--z-lh-text);color:var(--z-alert-ink)}
.z-alert[data-state="pending"]{border-color:var(--z-alert-line-pending);background:var(--z-alert-bg-pending)}
.z-alert[data-state="blocked"]{border-color:var(--z-alert-line-blocked);background:var(--z-alert-bg-blocked)}
.z-alert[data-state="done"]{border-color:var(--z-alert-line-done);background:var(--z-alert-bg-done)}
.z-alert__title{font-weight:600;color:var(--z-alert-title-ink)}

/* --- Диалог: подтверждение того, что нельзя отменить ---------- */
.z-backdrop{position:fixed;inset:0;z-index:var(--z-z-drawer);background:var(--z-backdrop-bg);opacity:.72}
.z-modal{position:fixed;left:50%;top:12vh;transform:translateX(-50%);z-index:var(--z-z-popover);
  width:min(560px,calc(100% - var(--z-space-8)));padding:var(--z-space-5) var(--z-space-6);
  border-radius:var(--z-r-18);border:1px solid var(--z-modal-line);background:var(--z-modal-bg);
  box-shadow:var(--z-modal-shadow);display:flex;flex-direction:column;gap:var(--z-space-3)}
.z-modal__title{font-size:var(--z-fs-decision);font-weight:600;letter-spacing:var(--z-ls-decision);color:var(--z-modal-title-ink)}
.z-modal__foot{display:flex;gap:var(--z-space-2);justify-content:flex-end;margin-top:var(--z-space-2)}

@media (max-width:640px){
  .z-steps{flex-direction:column;gap:var(--z-space-2)}
  .z-table{font-size:var(--z-fs-12-5)}
  .z-table th,.z-table td{padding:var(--z-space-2)}
  .z-modal{top:auto;bottom:0;left:0;transform:none;width:100%;border-radius:var(--z-r-18) var(--z-r-18) 0 0}
}
/* ---------- Пять недостающих базовых элементов ----------
   Раскрывающийся блок, ползунок, приём файла, дата и счётчик числа. До этого
   их в фундаменте не было вовсе: каждый экран рисовал своё. Ноль литералов
   цвета, как и во всём файле. */
.z-disclosure{border:var(--z-bw-hair) solid var(--z-disclosure-line);border-radius:var(--z-r-10);background:var(--z-disclosure-bg);overflow:hidden}
.z-disclosure__head{display:flex;align-items:center;gap:var(--z-space-3);width:100%;min-height:var(--z-control);
  padding:var(--z-space-3) var(--z-space-4);background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:var(--z-fs-13-5);font-weight:var(--z-fw-medium);color:var(--z-disclosure-head-ink)}
.z-disclosure__mark{margin-left:auto;width:var(--z-space-3);height:var(--z-space-3);flex:none;
  border-right:var(--z-bw-1) solid var(--z-disclosure-mark-line-right);border-bottom:var(--z-bw-1) solid var(--z-disclosure-mark-line-bottom);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--z-dur-2) var(--z-ease)}
.z-disclosure[data-open="true"] .z-disclosure__mark{transform:rotate(-135deg) translate(-2px,-2px)}
.z-disclosure__body{padding:0 var(--z-space-4) var(--z-space-4);font-size:var(--z-fs-13);
  line-height:var(--z-lh-text);color:var(--z-disclosure-body-ink)}
.z-disclosure:not([data-open="true"]) .z-disclosure__body{display:none}

.z-slider{display:flex;flex-direction:column;gap:var(--z-space-2)}
.z-slider__track{position:relative;height:var(--z-space-2);border-radius:var(--z-r-pill);background:var(--z-slider-track-bg)}
.z-slider__fill{position:absolute;inset:0 auto 0 0;border-radius:var(--z-r-pill);background:var(--z-slider-fill-bg)}
.z-slider__knob{position:absolute;top:50%;width:var(--z-space-5);height:var(--z-space-5);border-radius:50%;
  transform:translate(-50%,-50%);background:var(--z-slider-knob-bg);border:var(--z-bw-2) solid var(--z-slider-knob-line);
  box-shadow:var(--z-slider-knob-shadow)}
.z-slider__ends{display:flex;justify-content:space-between;font-size:var(--z-fs-11-5);color:var(--z-slider-ends-ink)}
.z-slider[aria-disabled="true"]{opacity:var(--z-op-disabled)}

.z-upload{display:flex;align-items:center;gap:var(--z-space-4);padding:var(--z-space-5);
  border:var(--z-bw-1) dashed var(--z-upload-line);border-radius:var(--z-r-12);background:var(--z-upload-bg);
  transition:border-color var(--z-dur-2) var(--z-ease),background var(--z-dur-2) var(--z-ease)}
.z-upload[data-over="true"]{border-color:var(--z-upload-line-true);background:var(--z-upload-bg-true)}
.z-upload__what{display:flex;flex-direction:column;gap:2px}
.z-upload__title{font-size:var(--z-fs-13-5);font-weight:var(--z-fw-medium);color:var(--z-upload-title-ink)}
.z-upload__limit{font-size:var(--z-fs-11-5);color:var(--z-upload-limit-ink)}
.z-upload__file{display:flex;align-items:center;gap:var(--z-space-2);padding:var(--z-space-2) var(--z-space-3);
  border:var(--z-bw-hair) solid var(--z-upload-file-line);border-radius:var(--z-r-8);background:var(--z-upload-file-bg);
  font-size:var(--z-fs-12-5);color:var(--z-upload-file-ink)}
.z-upload__file[data-state="failed"]{border-color:var(--z-upload-file-line-failed);color:var(--z-upload-file-ink-failed)}

.z-date{display:inline-flex;align-items:center;gap:var(--z-space-2);min-height:var(--z-control);
  padding:0 var(--z-space-3);border:var(--z-bw-hair) solid var(--z-date-line);border-radius:var(--z-r-6);
  background:var(--z-date-bg);font-size:var(--z-fs-13-5);color:var(--z-date-ink)}
.z-date__ic{color:var(--z-date-ic-ink);flex:none}
.z-date__value{font-family:var(--z-font-mono);letter-spacing:var(--z-ls-mono-eyebrow)}
.z-date[data-empty="true"] .z-date__value{color:var(--z-date-value-ink-true)}
.z-date[data-state="overdue"]{border-color:var(--z-date-line-overdue);color:var(--z-date-ink-overdue)}

.z-spin{display:inline-flex;align-items:stretch;border:var(--z-bw-hair) solid var(--z-spin-line);
  border-radius:var(--z-r-6);background:var(--z-spin-bg);overflow:hidden}
.z-spin__btn{width:var(--z-control);min-height:var(--z-control);border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:var(--z-fs-15-5);line-height:1;color:var(--z-spin-btn-ink)}
.z-spin__btn:hover{background:var(--z-spin-btn-bg-hover)}
.z-spin__btn[disabled]{opacity:var(--z-op-disabled);cursor:default}
.z-spin__value{min-width:var(--z-space-10);display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--z-font-mono);font-size:var(--z-fs-13-5);color:var(--z-spin-value-ink);
  border-inline:var(--z-bw-hair) solid var(--z-line-3)}

/* ---------- Связь, температура срока, свечение сцены, подтемнение ----------
   Четыре приёма, которые отличают маршрут от списка задач. */

/* Связь идёт той же кривой, что и маршрут: тоньше, пунктиром, с точкой у
   начала. Тип связи задаётся данными, а не цветом в разметке. */
.z-route{overflow:visible}
/* Раскладка маршрута. Сцена, узлы и подписи — часть фундамента, а не витрины:
   без них экран нарисует линию, но не построит маршрут. Узел садится центром
   кружка на точку пути; половину кружка сообщает разметка через --half.
   Отступ до подписи больше радиуса: иначе линия задевает строку. */
.z-route-wrap{position:relative;height:var(--z-route-h)}
.z-route-node{position:absolute;transform:translate(-50%,calc(-1 * var(--half,19px)));
  display:flex;flex-direction:column;align-items:center;gap:var(--z-space-4);width:150px}
.z-route-node--active{width:176px}
.z-route-node__text{display:flex;flex-direction:column;align-items:center;gap:var(--z-space-1)}
.z-route-wrap--vertical .z-route-node{flex-direction:row;align-items:center;width:auto;
  gap:var(--z-space-3);transform:translate(calc(-1 * var(--half,19px)),-50%)}
.z-route-wrap--vertical .z-route-node__text{align-items:flex-start;text-align:left}
@media (max-width:900px){.z-route-wrap{height:var(--z-route-h-narrow)}}
.z-link{fill:none;stroke-width:var(--z-link-w);stroke-linecap:round;
  stroke-dasharray:var(--z-link-dash);opacity:var(--z-link-op);stroke:var(--z-link-ahead)}
.z-link[data-type="depends"]{stroke:var(--z-link-depends)}
.z-link[data-type="affects"]{stroke:var(--z-link-affects);stroke-dasharray:none}
.z-link[data-type="amplifies"]{stroke:var(--z-link-amplifies);stroke-dasharray:none}
.z-link[data-type="risk"]{stroke:var(--z-link-risk);stroke-dasharray:var(--z-route-dash-alt)}
.z-link__dot{r:calc(var(--z-link-dot) / 2);fill:var(--z-link-ahead);stroke:none}
.z-link__dot[data-type="depends"]{fill:var(--z-link-depends)}
.z-link__dot[data-type="affects"]{fill:var(--z-link-affects)}
.z-link__dot[data-type="amplifies"]{fill:var(--z-link-amplifies)}
.z-link__dot[data-type="risk"]{fill:var(--z-link-risk)}
.z-link-say{position:absolute;transform:translate(0,-50%);font-family:var(--z-font-mono);
  font-size:var(--z-fs-11-5);letter-spacing:var(--z-ls-mono-eyebrow);white-space:nowrap;
  color:var(--z-link-say-ink);pointer-events:none}
.z-link-say[data-type="depends"]{color:var(--z-link-say-ink-depends)}
.z-link-say[data-type="risk"]{color:var(--z-link-say-ink-risk)}
.z-link-say[data-type="affects"]{color:var(--z-link-say-ink-affects)}
.z-link-say[data-type="amplifies"]{color:var(--z-link-say-ink-amplifies)}
.z-link-say[data-type="alt"]{color:var(--z-link-say-ink-alt)}

/* Свечение сцены: свет собирается там, где работа стоит сейчас. Слой лежит
   ПОД содержимым и ничего не перекрашивает — иначе текст потерял бы контраст. */
.z-scene{position:relative;isolation:isolate}
.z-scene__bloom{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:var(--z-scene-bloom-bg)}
.z-scene__bloom--warm{background:var(--z-scene-bloom--warm-bg)}

/* Температура срока: чем ближе срок, тем теплее плашка. Четыре ступени задают
   четыре местных значения, а всё внутри читает их — цвет в разметке не пишется. */
[data-heat]{--z-heat-ink:var(--z-heat-calm-ink);--z-heat-line:var(--z-heat-calm-line);
  --z-heat-soft:var(--z-heat-calm-soft);--z-heat-dot:var(--z-heat-calm-dot)}
[data-heat="soon"]{--z-heat-ink:var(--z-heat-soon-ink);--z-heat-line:var(--z-heat-soon-line);
  --z-heat-soft:var(--z-heat-soon-soft);--z-heat-dot:var(--z-heat-soon-dot)}
[data-heat="now"]{--z-heat-ink:var(--z-heat-now-ink);--z-heat-line:var(--z-heat-now-line);
  --z-heat-soft:var(--z-heat-now-soft);--z-heat-dot:var(--z-heat-now-dot)}
[data-heat="overdue"]{--z-heat-ink:var(--z-heat-over-ink);--z-heat-line:var(--z-heat-over-line);
  --z-heat-soft:var(--z-heat-over-soft);--z-heat-dot:var(--z-heat-over-dot)}
.z-heat{position:relative;display:flex;flex-direction:column;gap:var(--z-space-1);
  padding:var(--z-space-3) var(--z-space-4);padding-left:calc(var(--z-space-4) + var(--z-heat-bar-w));
  border:var(--z-bw-hair) solid var(--z-heat-line);border-radius:var(--z-r-10);
  background:var(--z-heat-soft);overflow:hidden;
  transition:border-color var(--z-dur-3) var(--z-ease),background var(--z-dur-3) var(--z-ease)}
.z-heat::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--z-heat-bar-w);
  background:var(--z-heat-dot)}
.z-heat[data-heat="calm"]::before{opacity:var(--z-op-ghost)}
.z-heat[data-heat="overdue"]{--z-heat-bar-w:6px;border-width:var(--z-bw-1)}
.z-heat__name{font-size:var(--z-fs-13-5);font-weight:var(--z-fw-medium);color:var(--z-heat-name-ink)}
.z-heat__say{display:inline-flex;align-items:center;gap:var(--z-space-2);
  font-size:var(--z-fs-12-5);color:var(--z-heat-ink)}
.z-heat__dot{width:var(--z-dot-7);height:var(--z-dot-7);border-radius:50%;flex:none;
  background:var(--z-heat-dot)}
.z-heat__why{font-size:var(--z-fs-12-5);color:var(--z-heat-why-ink);line-height:var(--z-lh-text)}
/* Только «сейчас» и «просрочено» подают голос. Остальные молчат: если светится
   всё, не светится ничего. */
.z-heat[data-heat="now"],.z-heat[data-heat="overdue"]{box-shadow:var(--z-heat-glow-now);
  animation:z-heat var(--z-dur-heat) ease-in-out infinite}
.z-heat[data-heat="now"] .z-heat__dot,.z-heat[data-heat="overdue"] .z-heat__dot{
  animation:z-heat-dot var(--z-dur-heat) ease-in-out infinite}
@keyframes z-heat{0%,100%{box-shadow:var(--z-heat-glow-now)}50%{box-shadow:var(--z-heat-glow-peak)}}
@keyframes z-heat-dot{0%,100%{opacity:1}50%{opacity:var(--z-op-ghost)}}

/* Подтемнение: когда открыто одно окно, остальное отходит назад. Гасим
   соседей, а не накрываем их плёнкой — текст под плёнкой теряет контраст. */
[data-dim="on"] .z-dimmable:not([data-lit="true"]){opacity:var(--z-dim-op);filter:saturate(var(--z-dim-sat));
  transition:opacity var(--z-dur-dim) var(--z-ease),filter var(--z-dur-dim) var(--z-ease)}
[data-dim="on"] .z-dimmable[data-lit="true"]{transition:opacity var(--z-dur-dim) var(--z-ease)}
.z-dimmable{transition:opacity var(--z-dur-dim) var(--z-ease),filter var(--z-dur-dim) var(--z-ease)}

/* ---------- Состояния, длинный текст, липкость, клавиатура ----------
   Четыре вещи, которых в фундаменте не было. Каждая из них иначе решалась бы
   на каждом экране по-своему — то есть ровно то, от чего фундамент избавляет. */

/* Наведение. :where даёт нулевой вес, поэтому любое правило компонента его
   перебивает без !important. Трогаем только то, на что можно нажать. */
:where(.z-btn,.z-option,.z-queue-row,.z-disclosure__head,.z-seg__item,.z-tab,
       .z-swatch,.z-heat,.z-upload,.z-spin__btn,.z-date):hover{
  transform:translateY(var(--z-hover-lift));
  transition:transform var(--z-dur-1) var(--z-ease),box-shadow var(--z-dur-1) var(--z-ease),
             background var(--z-dur-1) var(--z-ease),border-color var(--z-dur-1) var(--z-ease)}
:where(.z-option,.z-queue-row,.z-disclosure__head,.z-heat,.z-date):hover{background:var(--z-hover-wash)}
:where(.z-btn,.z-option,.z-queue-row,.z-card--pick,.z-date):hover{border-color:var(--z-hover-line)}
/* Нажатие. Смещение вниз читается как отклик даже без цвета — это важно для
   тех, кто не различает оттенки. */
:where(.z-btn,.z-option,.z-queue-row,.z-disclosure__head,.z-seg__item,.z-tab,
       .z-spin__btn,.z-date):active{transform:translateY(var(--z-press-shift))}
/* Отказ. Недоступное гаснет и перестаёт ловить указатель, но остаётся видимым:
   человек должен понимать, что действие существует и почему оно закрыто. */
:where(.z-btn,.z-option,.z-spin__btn,.z-field__input,.z-select,.z-check,.z-switch,
       .z-disclosure__head)[disabled],
:where(.z-btn,.z-option,.z-slider,.z-upload,.z-queue-row,.z-heat)[aria-disabled="true"]{
  opacity:var(--z-op-disabled);pointer-events:none;transform:none;box-shadow:none}
/* Ожидание. Не «загрузка вообще», а «это место занято прямо сейчас». */
[data-busy="true"]{opacity:var(--z-busy-op);pointer-events:none;cursor:progress}
[data-busy="true"] :where(.z-btn,.z-option){transform:none}

/* Длинный текст. Без этих правил длинное имя распирает колонку и ломает сетку,
   а неразрывная строка вылезает за край карточки. */
.z-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.z-clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp:var(--z-clamp-2);line-clamp:var(--z-clamp-2)}
.z-clamp--1{-webkit-line-clamp:var(--z-clamp-1);line-clamp:var(--z-clamp-1)}
.z-clamp--3{-webkit-line-clamp:var(--z-clamp-3);line-clamp:var(--z-clamp-3)}
/* Ячейка гибкой раскладки по умолчанию не уже содержимого; из-за этого
   усечение не срабатывает вовсе. Разрешаем сжиматься. */
:where(.row,.col,.grid,.z-card,.z-queue-row,.z-heat)>*{min-width:0}
/* Длинный адрес или код без пробелов переносится по символам, а не вылезает. */
:where(.z-card,.z-heat,.z-notice,.z-alert,.z-disclosure__body){overflow-wrap:break-word}
/* anywhere — только там, где строка заведомо без пробелов. */
.z-break-all{overflow-wrap:anywhere}

/* Липкость. Шапка таблицы, строка итогов и панель фильтров остаются на виду
   при длинном списке. Отступ сверху — высота шапки приложения. */
.z-sticky-top{position:sticky;top:var(--z-sticky-top);z-index:var(--z-sticky-z);
  background:var(--z-sticky-top-bg)}
.z-sticky-bottom{position:sticky;bottom:0;z-index:var(--z-sticky-z);
  background:var(--z-sticky-bottom-bg);border-top:var(--z-bw-hair) solid var(--z-sticky-bottom-line-top)}
.z-table--sticky thead th{position:sticky;top:var(--z-sticky-top);z-index:var(--z-sticky-z);
  background:var(--z-table-bg-sticky)}
/* Липкое всегда отделено линией: иначе при прокрутке строки въезжают в шапку. */
.z-sticky-top,.z-table--sticky thead th{box-shadow:0 1px 0 var(--z-line)}

/* Клавиатура. Обвод уже есть на всём, что можно взять в фокус; здесь —
   правила окружения: карточка подсвечивается, когда фокус внутри неё, а окно
   и панель показывают, что работа идёт в них. */
:where(.z-card,.z-heat,.z-disclosure,.z-upload):focus-within{border-color:var(--z-accent-soft-line)}
:where(.z-modal,.z-panel):focus-within{box-shadow:var(--z-shadow-panel),var(--z-ring-current)}
/* Область объявлений для чтения с экрана: занимает место, но ничего не рисует. */
.z-say-out{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* Каркас на узком экране. Без этого рельс оставался вертикальным столбцом
   шириной в треть телефона, а шапка разъезжалась в три строки. Проверено на
   настоящем экране: витрина этого не показывала, потому что каркаса в ней нет. */
@media (max-width:767px){
  .z-shell{flex-direction:column;min-height:auto}
  .z-rail{width:100%;flex-direction:row;align-items:center;justify-content:flex-start;
    gap:var(--z-space-2);padding:var(--z-space-2) var(--z-content-pad);
    border-right:0;border-bottom:1px solid var(--z-rail-line-bottom);
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .z-rail::-webkit-scrollbar{display:none}
  .z-rail>*{flex:none}
  .z-rail__mark{margin-bottom:0;margin-right:var(--z-space-1)}
  /* Последний пункт прижимался книзу колонки; в строке он прижимается вправо. */
  .z-rail__item:last-child{margin-top:0;margin-left:auto}
  .z-header{flex-wrap:wrap;row-gap:var(--z-space-2);padding:var(--z-space-3) var(--z-content-pad);
    justify-content:flex-start}
  .z-search{order:3;width:100%;flex:1 0 100%}
  /* Правая часть шапки — тоже строка: без переноса поиск внутри неё
     растягивал шапку на 149px шире экрана. */
  .z-header__tools{flex-wrap:wrap;width:100%;margin-left:0;row-gap:var(--z-space-2)}
  .z-header__tools .z-search{width:auto}
  .z-header__name{font-size:var(--z-fs-claim)}
  /* Зависимость: на узком экране состояние уходит под имя, а не отжимает его
     в две строки. Значок остаётся у верхней строки, а не плавает посередине. */
  .z-dependency__item{flex-wrap:wrap;align-items:flex-start}
  .z-dependency__item>:nth-child(2){flex:1 1 60%;min-width:0}
  .z-dependency__state{margin-left:calc(var(--z-tile-26) + var(--z-space-3))!important}
}

/* ---------- Ленты-потоки и линза ----------
   Два приёма из референсов, которых в фундаменте не было. Лента показывает
   объём толщиной, линза показывает одно главное и сравнение двух величин. */

.z-flow{display:block;width:100%}
.z-flow__ribbon{filter:url(#z-flow-soft);fill:url(#z-flow-plan)}
.z-flow__ribbon[data-type="risk"]{fill:url(#z-flow-risk)}
.z-flow__ribbon[data-type="alt"]{fill:url(#z-flow-alt)}
.z-flow__ribbon[data-type="forecast"]{fill:url(#z-flow-forecast)}
.z-flow-wrap{position:relative}
/* Карточка истока стоит у начала своей ленты, а не в отдельном списке:
   иначе связь «эта карточка — эта лента» держится только цветом. */
.z-flow-start{position:absolute;transform:translate(0,-50%);display:flex;align-items:center;
  gap:var(--z-space-3);max-width:var(--z-row-title-w)}
.z-flow-start__name{font-size:var(--z-fs-13-5);font-weight:var(--z-fw-medium);color:var(--z-flow-start-name-ink)}
.z-flow-start__fact{font-size:var(--z-fs-12);color:var(--z-flow-start-fact-ink)}
.z-flow-say{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;
  gap:var(--z-space-2);padding:var(--z-space-1) var(--z-space-3);border-radius:var(--z-r-pill);
  font-size:var(--z-fs-12);white-space:nowrap;background:var(--z-flow-say-bg);
  border:var(--z-bw-hair) solid var(--z-flow-say-line);color:var(--z-flow-say-ink);
  box-shadow:var(--z-flow-say-shadow)}

.z-lens{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:var(--z-lens-h);
  gap:var(--z-space-5);padding:var(--z-space-10) var(--z-space-10);
  border-radius:50% / 42%;background:var(--z-lens-bg);box-shadow:var(--z-lens-ring),var(--z-lens-glow)}
.z-lens__waves{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden}
.z-lens__waves .z-flow{height:100%}
/* Тонкая черта делит линзу надвое: ожидалось слева, получено справа. */
.z-lens__split{position:absolute;top:16%;bottom:16%;left:50%;width:1px;z-index:-1;background:var(--z-lens-split-bg)}
.z-lens__head,.z-lens__body{display:flex;width:100%;max-width:var(--z-lens-inner);
  align-items:center;justify-content:space-between;gap:var(--z-space-5)}
.z-lens__mark{display:inline-flex;align-items:center;gap:var(--z-space-2);
  font-size:var(--z-fs-13-5);color:var(--z-lens-mark-ink)}
.z-lens__side{display:flex;flex-direction:column;align-items:center;gap:2px;
  flex:1 1 0;min-width:0;text-align:center}
.z-lens__num{font-size:var(--z-fs-lens);font-weight:var(--z-fw-semibold);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--z-lens-num-ink)}
.z-lens__side[data-side="want"] .z-lens__num{color:var(--z-lens-side-ink-want)}
.z-lens__side[data-side="got"] .z-lens__num{color:var(--z-lens-side-ink-got)}
.z-lens__of{font-size:var(--z-fs-decision);color:var(--z-lens-of-ink);font-variant-numeric:tabular-nums}
.z-lens__unit{font-size:var(--z-fs-12-5);line-height:var(--z-lh-text);color:var(--z-lens-unit-ink)}
/* Знак между половинами — не украшение: он называет отношение величин. */
.z-lens__sign{width:var(--z-lens-sign);height:var(--z-lens-sign);border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:var(--z-fs-h2);
  color:var(--z-lens-sign-ink);background:var(--z-lens-sign-bg);box-shadow:var(--z-lens-sign-shadow)}
.z-lens__say{font-size:var(--z-fs-13);color:var(--z-lens-say-ink);text-align:center;max-width:var(--z-lens-inner)}
@media (max-width:767px){
  .z-lens{border-radius:var(--z-r-22);padding:var(--z-space-6) var(--z-space-4)}
  .z-lens__num{font-size:var(--z-fs-screen)}
}

/* ---------- Пять конструкций, которых не хватило настоящему экрану ----------
   Вскрыты сверкой главной WorkOS с эталоном: витрина их не требовала. */

/* Вариант решения карточкой. Строчный режим остаётся для узких мест, но когда
   у варианта есть цена И доказательство, строка их не вмещает: цена ужимается,
   доказательство выпадает совсем. Подложка идёт от обратимости, а не от
   выбора: цвет говорит, чем платишь, а не что отмечено. */
.z-options--cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--z-space-4)}
.z-option--card{flex-direction:column;align-items:stretch;gap:var(--z-space-3);
  padding:var(--z-space-4);background:var(--z-option-card-bg)}
.z-option--card .z-option__head{display:flex;align-items:flex-start;gap:var(--z-space-3)}
.z-option--card .z-option__name{flex:1 1 auto;min-width:0;font-size:var(--z-fs-claim);
  line-height:var(--z-lh-title)}
.z-option--card .z-option__radio{display:none}
.z-option--card[data-rev="reversible"]{border-color:var(--z-option-card-line-ok);
  background:var(--z-option-card-bg-ok)}
.z-option--card[data-rev="effort"]{border-color:var(--z-option-card-line-effort);
  background:var(--z-option-card-bg-effort)}
.z-option__proof{font-size:var(--z-fs-12-5);line-height:var(--z-lh-text);color:var(--z-option-proof-ink)}

/* Заголовок раздела внутри полотна. В эталоне он одинаков у всех разделов:
   плитка-значок, название, пояснение, и справа фраза, которая объясняет раздел
   целиком. До сих пор собирался руками в каждом месте по-своему. */
.z-section{display:flex;flex-direction:column;gap:var(--z-space-4)}
.z-section__head{display:flex;align-items:center;gap:var(--z-space-3);flex-wrap:wrap}
.z-section__name{margin:0;font-size:var(--z-fs-decision);font-weight:var(--z-fw-semibold);
  letter-spacing:var(--z-ls-decision);color:var(--z-section-name-ink)}
.z-section__why{font-size:var(--z-fs-13);line-height:var(--z-lh-text);color:var(--z-section-why-ink)}
.z-section__aside{margin-left:auto;font-size:var(--z-fs-13);color:var(--z-section-aside-ink);text-align:right}

/* Каркас без рельса. Второй режим, а не замена: экран решает сам, держать ли
   разделы на виду или прятать за одной кнопкой. */
.z-shell--bare>.z-rail{display:none}
.z-header__tools{display:flex;align-items:center;gap:var(--z-space-3);margin-left:auto}
/* Значок внутри кнопки нигде не был размерен: наследовал размер шрифта и плыл. */
.z-btn svg{width:var(--z-icon-17);height:var(--z-icon-17);flex:none}

/* Тихая карточка: цвет состояния остаётся, голос уходит. Пульс закреплён за
   сроком; цель, до которой ещё не дошли, подавать голос не должна. */
.z-heat--quiet,.z-heat--quiet[data-heat="now"],.z-heat--quiet[data-heat="overdue"]{
  animation:none;box-shadow:none}
.z-heat--quiet .z-heat__dot{animation:none}



/* ---------- ПРИЁМЫ ИЗ РЕФЕРЕНСОВ ----------
   Достроены по docs/РЕЕСТР-ПРИЁМОВ.md. Каждый отвечает строке «Берём» в ТЗ
   и имеет собственные ручки: перекрашивается, не задевая соседей. */

/* Р3 · строка с замком: почему действие недоступно. Замок — ЗНАЧОК, а смысл
   несёт текст: одной иконкой состояние не объясняется. */
.z-lock{display:flex;align-items:center;gap:var(--z-space-2);
  padding:var(--z-space-2) var(--z-space-3);border-radius:var(--z-r-8);
  background:var(--z-lock-bg);border:var(--z-bw-hair) solid var(--z-lock-line);
  font-size:var(--z-fs-12-5);line-height:var(--z-lh-text);color:var(--z-lock-ink)}
.z-lock__icon{flex:none;width:var(--z-dot-12);height:var(--z-dot-12)}

/* Р14 · легенда графа: что означает каждый рисунок линии. Без неё четыре типа
   связи различает только тот, кто их рисовал. */
.z-legend{display:flex;flex-wrap:wrap;gap:var(--z-space-3) var(--z-space-4);
  font-size:var(--z-fs-11-5);color:var(--z-legend-ink)}
.z-legend__item{display:inline-flex;align-items:center;gap:var(--z-space-2)}
.z-legend__line{width:28px;height:0;border-top:var(--z-bw-2) solid var(--z-legend-line)}
.z-legend__line[data-kind="plan"]{border-top-style:dashed;border-top-color:var(--z-legend-line-plan)}
.z-legend__line[data-kind="branch"]{border-top-color:var(--z-legend-line-branch)}
.z-legend__line[data-kind="done"]{border-top-color:var(--z-legend-line-done)}

/* Р14 · полоса свежести: возраст записи показан длиной, а состояние — цветом,
   чтобы «устарело» читалось и без цвета. */
.z-freshness{display:block;height:var(--z-dot-7);border-radius:var(--z-r-8);
  background:var(--z-freshness-bg);overflow:hidden}
.z-freshness__fill{display:block;height:100%;border-radius:inherit;
  background:var(--z-freshness-fill);transition:width var(--z-dur-2) var(--z-ease)}
.z-freshness[data-age="stale"] .z-freshness__fill{background:var(--z-freshness-fill-stale)}
.z-freshness[data-age="old"] .z-freshness__fill{background:var(--z-freshness-fill-old)}

/* Р16 · черновик до подтверждения: пунктир говорит, что запись ещё не принята
   и ничего не исполняется. */
.z-draft{border:var(--z-bw-1) dashed var(--z-draft-line);border-radius:var(--z-r-11);
  background:var(--z-draft-bg);padding:var(--z-space-3) var(--z-space-4);
  font-size:var(--z-fs-13);line-height:var(--z-lh-text);color:var(--z-draft-ink)}

/* Р11, Р16 · двухстрочная кнопка: действие сверху, последствие снизу. Единственный
   приём, встреченный в двух референсах: решение принимают, когда видят цену. */
.z-btn--two{flex-direction:column;gap:2px;min-height:var(--z-hit);padding:8px 18px;line-height:1.2}
.z-btn__sub{display:block;font-size:var(--z-fs-11-5);font-weight:var(--z-fw-regular);
  color:var(--z-btn-sub-ink)}
.z-btn--secondary .z-btn__sub{color:var(--z-btn-sub-ink-secondary)}

/* Р1 · булавка над активным узлом: где сейчас работа, видно и без цвета. */
.z-pin{position:absolute;left:50%;transform:translate(-50%,-100%);
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  padding:3px var(--z-space-2);border-radius:var(--z-r-8);
  background:var(--z-pin-bg);color:var(--z-pin-ink);
  font-size:var(--z-fs-11-5);font-weight:var(--z-fw-semibold);
  box-shadow:var(--z-pin-shadow)}
.z-pin::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--z-pin-bg)}

/* Р12 · форма как признак: «нужно решение» отличается ФОРМОЙ, а не только цветом —
   иначе при дальтонизме и в печати признак исчезает. */
.z-decision-mark{width:var(--z-dot-12);height:var(--z-dot-12);flex:none;
  background:var(--z-decision-mark-bg);
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}


/* Р4 · этап как цветное размытое поле вместо колонки с рамкой: границы между
   стадиями не жёсткие, и рамка врала бы о точности перехода. */
.z-stage{position:relative;border-radius:var(--z-r-18);padding:var(--z-space-4);
  background:var(--z-stage-bg);color:var(--z-stage-ink);isolation:isolate}
.z-stage::before{content:"";position:absolute;inset:-6%;z-index:-1;border-radius:inherit;
  background:inherit;filter:blur(var(--z-bg-blur));opacity:var(--z-op-ghost)}
.z-stage[data-stage="plan"]{background:var(--z-stage-bg-plan)}
.z-stage[data-stage="work"]{background:var(--z-stage-bg-work)}
.z-stage[data-stage="done"]{background:var(--z-stage-bg-done)}
.z-stage[data-stage="risk"]{background:var(--z-stage-bg-risk)}

/* Р15 · сравнение «до / после» перестроения: что именно изменилось, видно рядом,
   а не по памяти. Старое значение зачёркнуто — различимо и без цвета. */
.z-diff{display:inline-flex;align-items:center;gap:var(--z-space-2);
  font-size:var(--z-fs-13);line-height:var(--z-lh-text);color:var(--z-diff-ink)}
.z-diff__was{color:var(--z-diff-ink-was);text-decoration:line-through;
  background:var(--z-diff-bg-was);border-radius:var(--z-r-8);padding:1px var(--z-space-2)}
.z-diff__now{color:var(--z-diff-ink-now);font-weight:var(--z-fw-semibold);
  background:var(--z-diff-bg-now);border-radius:var(--z-r-8);padding:1px var(--z-space-2)}
.z-diff__arrow{flex:none;color:var(--z-diff-line)}

/* Р19 · подпись типа связи на линии. Обводка цветом полотна — чтобы буквы
   читались там, где линия проходит под ними. */
.z-link__label{font-size:var(--z-fs-11-5);fill:var(--z-link-label-ink);
  paint-order:stroke;stroke:var(--z-link-label-halo);stroke-width:3px;
  stroke-linejoin:round;text-anchor:middle;pointer-events:none}
/* Р1 · ломаная связь: рисунок линии несёт тип, поэтому у неё свой пунктир. */
.z-link[data-shape="step"]{stroke-dasharray:6 5;stroke-linejoin:round;fill:none}

/* Семь колонок — самая частая раскладка утверждённого макета: неделя как
   единица планирования. Колонки равны по ширине, потому что день недели не
   бывает «важнее» соседнего; на узком экране неделя складывается в список,
   иначе колонка в 50 px перестаёт быть читаемой. */
.z-week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--z-space-2)}
.z-week__day{min-width:0}
/* Порог написан числом: CSS не подставляет var() в медиазапрос. Значение
   то же, что у --z-bp-mobile; менять их нужно парой. */
@media (max-width:767px){
  .z-week{grid-template-columns:1fr}
}