/* ========================================================================= */
/* Level1 layout — минимальные стили поверх design-system.                  */
/* Все организмы (sphere, vertex-create, detail, arc, edge-create) рендерят */
/* через DS-классы (.org-*-stage и т.д.). Здесь только глобальная page-     */
/* раскладка: full-viewport stage + плавающие tools.                        */
/* ========================================================================= */

html, body {
  margin: 0;
  height: 100%;
  font-family: "Space Grotesk", system-ui, sans-serif;
  background: var(--flight-bg-base);
  color: var(--flight-text);
  overflow: hidden;
}

/* ── Main stage — fullscreen sphere + DS organisms. Использует тот же
   style-набор что и .org-vertex-create-stage в DS (дублирующая декларация
   в DS styles.css автоматически применится через классы). Здесь — full
   viewport sizing + border-radius 0. */
/* Level1 stage композирует DS-классы .org-vertex-create-stage +
   .org-edge-create-stage. Тут только override на full-viewport.
   DS даёт: background-gradient, color, touch-action, isolation. */
.level1-stage {
  position: fixed !important;
  inset: 0 !important;
  border-radius: 0 !important;
  min-height: 100vh !important;
  /* Скрываем системный курсор-крестик (`cursor: crosshair` идёт из DS
     `.org-vertex-create-stage`). Halo (`.mol-cursor-lens`) — единственный
     визуальный указатель позиции мыши, что соответствует стилистике MY MAP.
     Интерактивные элементы (vertex, кнопки) переопределяют `cursor: pointer`
     своими правилами — указатель появляется только над ними. */
  cursor: none;
}

/* ── Tools — плавающий тулбар справа сверху (только settings toggle). */
.level1-tools {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 50;
  display: flex;
  gap: 10px;
  pointer-events: none;
}
.level1-tools > * {
  pointer-events: auto;
}

/* HTML `hidden` attribute перебивается `display: flex` ниже — нужен
   explicit `display: none !important` для settings + debug панелей. */
.level1-settings-panel[hidden],
.level1-debug[hidden],
.level1-tips-panel[hidden] {
  display: none !important;
}

/* ── Tips panel — все подсказки (MY MAP v1.4.0) списком. Появляется при
   наведении курсора на wizard в левом верхнем углу. Spatial-стиль: без
   фона/карточки, просто floating-текст с subtle тенью для читаемости. */
.level1-tips-panel {
  position: fixed;
  top: 60px;
  left: 24px;
  z-index: 55;
  width: min(420px, calc(100vw - 48px));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  pointer-events: auto;  /* интерактивна — курсор может зайти на неё читать */
  animation: level1TipsIn 220ms cubic-bezier(0.3, 0, 0.2, 1);
}
@keyframes level1TipsIn {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.level1-tips-panel__title {
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text), var(--muted) 40%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.level1-tips-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.level1-tips-panel__list li {
  font-size: 15px;
  font-weight: 560;
  line-height: 1.4;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
body.dark .level1-tips-panel__list li {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
body.dark .level1-tips-panel__title {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* ── Settings view — камера отвёрнута от сферы. В level1 вершины/связи/
   деталь/arc — это HTML DOM поверх canvas (не WebGL как в production),
   поэтому при повороте камеры они НЕ исчезают сами. Явно скрываем их,
   чтобы в settings были видны только фон + панель настроек (как в
   reference). Fade синхронно с поворотом камеры (~0.95s). */
body[data-view-mode="settings"] .org-edge-create-nodes,
body[data-view-mode="settings"] .org-edge-create-edges,
body[data-view-mode="settings"] .level1-arc,
body[data-view-mode="settings"] .detail,
body[data-view-mode="settings"] .detail-backdrop,
body[data-view-mode="settings"] .org-vertex-create-halo,
body[data-view-mode="settings"] .org-vertex-create-mark,
body[data-view-mode="settings"] .level1-corner-tools {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 600ms ease;
}

/* ── Settings panel — текст в «пустом пространстве» (камера отвернулась
   от сферы). Production-style: без карточки/border, просто floating-текст
   слева от центра. Fade-in синхронно с поворотом камеры. */
.level1-settings-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 60;
  width: min(420px, calc(100vw - 80px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  pointer-events: none;  /* контейнер прозрачен для кликов, кнопки — auto */
  animation: level1SettingsIn 520ms cubic-bezier(0.3, 0, 0.2, 1);
}
.level1-settings-panel > * {
  pointer-events: auto;
}
@keyframes level1SettingsIn {
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}
.level1-settings-close {
  align-self: flex-start;
  margin-bottom: 10px;
}
.level1-settings-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.level1-settings-label {
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text), var(--muted) 50%);
  margin-top: 10px;
}
.level1-settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ── Debug panel — правый нижний угол. Toggle по хоткею `. Без фона/
   карточки — просто floating-текст кнопок (как settings panel). */
.level1-debug {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding: 0;
  background: none;
  border: 0;
  animation: level1DebugIn 200ms cubic-bezier(0.3, 0, 0.2, 1);
}
@keyframes level1DebugIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.level1-debug__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.22em;
  color: #ff6b57;
}
.level1-debug__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
  border: 1px solid rgba(255, 107, 87, 0.5);
  font-size: 10px;
  letter-spacing: 0;
}
.level1-debug__btn {
  justify-content: flex-end;
  color: #ff6b57;
}
.level1-debug__btn:hover {
  color: #ff8c7a;
}

/* Onboarding gate теперь полностью DS: `.org-onboarding-overlay` (template)
   обёртывает `.org-onboarding-gate` (organism). Никаких level1-специфичных
   стилей для onboarding'а — всё из design-system. */

/* ── Level1 node label — title цели рядом с node marker'ом. Помогает
   пользователю сразу видеть какая цель создана, без необходимости
   hover'ить за title-tooltip. */
.level1-node__label {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(220px, 70vw);
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--flight-text, currentColor);
  text-shadow: 0 0 12px var(--flight-bg-base, #fff);
  pointer-events: none;
  opacity: 1;
  transition: opacity 220ms ease;
}
/* При открытой spatial detail labels у всех vertex'ов скрыты — focus
   на текущей цели через detail panel + arc. Production-faithful. */
.level1-stage--detail-open .level1-node__label {
  opacity: 0;
}

/* ── Bottom-left corner toolbar: audio toggle + fullscreen toggle ── */
.level1-corner-tools {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.level1-corner-tools > * {
  pointer-events: auto;
}
/* Audio (DS .mol-music-toggle) — позиция управляется через corner-tools
   flexbox, не нужно дополнительного position:fixed. */
.level1-audio {
  position: relative;
  left: auto;
  bottom: auto;
}
/* Fullscreen toggle — стилистически совпадает с .mol-music-toggle (audio):
   inline-flex, прозрачный фон, halo glow через ::after, hover translateX.
   Иконки enter/exit переключаются через body.is-fullscreen class. */
.level1-fullscreen-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
  cursor: pointer;
  transition: transform 180ms ease, color 180ms ease;
}
.level1-fullscreen-toggle::after {
  content: "";
  position: absolute;
  inset: -10px -18px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(
    ellipse 92% 78% at 28% 50%,
    rgba(255, 245, 232, 0.44) 0%,
    rgba(196, 220, 255, 0.16) 34%,
    transparent 82%
  );
  filter: blur(22px);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 180ms ease;
}
body.dark .level1-fullscreen-toggle::after {
  background: radial-gradient(
    ellipse 92% 78% at 28% 50%,
    rgba(122, 150, 220, 0.20) 0%,
    rgba(62, 78, 124, 0.12) 34%,
    transparent 82%
  );
}
.level1-fullscreen-toggle:hover::after {
  opacity: 1;
}
.level1-fullscreen-toggle:hover {
  transform: translateX(2px);
}
.level1-fullscreen-toggle .label {
  display: inline-block;
}
.level1-fullscreen-toggle .icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
/* Default: показываем "enter" icon. body.is-fullscreen toggle'ит на "exit". */
.level1-fullscreen-toggle .exit-icon { display: none; }
body.is-fullscreen .level1-fullscreen-toggle .enter-icon { display: none; }
body.is-fullscreen .level1-fullscreen-toggle .exit-icon { display: inline; }

/* Empty <small> в arc item — скрыть (нет тега и не done → ничего
   не показываем под title). */
.relationship-arc-item small:empty { display: none; }

/* ── Chips container — горизонтальный ряд chip'ов над title. */
.detail-chips {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 14px;
}
.detail-chips:empty { display: none; }
/* HTML `hidden` attribute = inline `display: none`, но CSS `display:
   flex/inline-flex` имеет higher specificity и перебивает. Эксплицитно
   ставим `display: none !important` для всех hidden-помеченных детей
   detail panel — иначе они продолжают рендериться (dots от ::before). */
.detail-top[hidden],
.detail-chips[hidden],
.detail-tag[hidden],
.detail-status[hidden],
.detail-today-chip[hidden],
.detail-done-chip[hidden] {
  display: none !important;
}

/* ── Today chip — выглядит как status tag (10px uppercase + accent dot),
   но clickable: toggle node.today flag. Active state имеет filled dot
   и accent цвет. Inactive — outlined dot, muted text. */
.detail-today-chip,
.detail-done-chip {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--text), var(--muted) 38%);
  font-family: inherit;
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, transform 180ms ease;
}
.detail-today-chip::before,
.detail-done-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  box-shadow: 0 0 10px transparent;
  transition: background 180ms ease, border-color 180ms ease,
              box-shadow 180ms ease;
}
.detail-today-chip:hover {
  color: color-mix(in srgb, var(--text), var(--detail-accent, #ff6b57) 30%);
  transform: translateX(2px);
}
.detail-today-chip[data-active="true"] {
  color: var(--detail-accent, #ff6b57);
}
.detail-today-chip[data-active="true"]::before {
  background: currentColor;
  border-color: currentColor;
  box-shadow: 0 0 14px currentColor;
}

/* Done chip — same status-tag style как today, но active state имеет
   green accent цвет (выполненные цели). */
.detail-done-chip[data-active="true"] {
  color: #39c77f;  /* мотив shell color (зелёный success) */
}
.detail-done-chip[data-active="true"]::before {
  background: currentColor;
  border-color: currentColor;
  box-shadow: 0 0 14px currentColor;
}
.detail-done-chip:hover {
  color: #39c77f;
}

/* ── Celebration UI overlay (только vignette + content fade) ──
   Heavy lifting делает WebGL (sphere uAccent flash + camera FOV breath +
   400-particle THREE.Points burst в pivot space). CSS — только UI-context
   layer: spotlight vignette на краях + скрытие detail content на пике. */
/* Overlay — пустой контейнер БЕЗ blend mode, чтобы каждый child blend'ился
   со stage напрямую (mix-blend-mode на overlay создавал stacking context,
   из-за чего streaks внутри теряли свой screen-blend эффект). */
.level1-celebrate-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  --bloom-x: 50%;
  --bloom-y: 50%;
  --celebrate-color: #39c77f;
}
/* Vignette — отдельный layer с multiply blend. Чуть мягче чем раньше
   (0.25–0.5 вместо 0.42–0.68), иначе перебивает streaks. */
.level1-celebrate-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 85% at var(--bloom-x) var(--bloom-y),
    transparent 18%,
    rgba(0, 0, 0, 0.28) 70%,
    rgba(0, 0, 0, 0.52) 100%);
  mix-blend-mode: multiply;
  opacity: 0;
  animation: level1CelebrateVignette 4500ms cubic-bezier(0.3, 0, 0.3, 1) forwards;
}
/* (A) Aurora-style свечение — soft core glow + длинные «шёлковые»
   streaks/лучи, расходящиеся из vertex'а. Каждый streak — отдельный
   DOM-element c rotate(angle) + scale animation, GPU-accelerated.
   Без SVG turbulence filter (тормозит на full-screen). */
.level1-celebrate-overlay::after {
  content: '';
  position: absolute;
  left: var(--bloom-x);
  top: var(--bloom-y);
  width: 95vmax;
  height: 95vmax;
  margin-left: -47.5vmax;
  margin-top: -47.5vmax;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    var(--celebrate-color) 0%,
    var(--celebrate-color) 8%,
    rgba(0, 0, 0, 0) 50%);
  filter: blur(50px) saturate(1.7) brightness(1.15);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.3);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  animation: level1CelebrateCoreGlow 4500ms cubic-bezier(0.3, 0, 0.3, 1) forwards;
}
@keyframes level1CelebrateVignette {
  0%   { opacity: 0; }
  30%  { opacity: 0.9; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes level1CelebrateCoreGlow {
  0%   { opacity: 0; transform: scale(0.3); }
  28%  { opacity: 1; transform: scale(0.95); }
  55%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.55); }
}
/* Aurora streaks — bridge генерирует N штук с разным --streak-angle,
   --streak-length, --streak-width, --streak-delay. Background gradient
   centered at 0% 50% (basement = bloom point) — основание яркое, fade
   только к хвосту. Это даёт ощущение «луч ИЗ vertex», а не «отдаляется». */
.level1-celebrate-streak {
  position: absolute;
  left: var(--bloom-x);
  top: var(--bloom-y);
  width: var(--streak-length, 95vmax);
  height: var(--streak-width, 8vmax);
  margin-top: calc(var(--streak-width, 8vmax) / -2);
  pointer-events: none;
  /* Gradient origin at 0% 50% (left edge = bloom point) — основание
     яркое, fade только к хвосту по X. Y radius меньше → ribbon-like.
     Цвет берётся из --streak-color (variant), fallback к --celebrate-color. */
  background: radial-gradient(ellipse 100% 60% at 0% 50%,
    var(--streak-color, var(--celebrate-color)) 0%,
    var(--streak-color, var(--celebrate-color)) 14%,
    rgba(0, 0, 0, 0) 80%);
  filter: blur(12px) saturate(1.7) brightness(1.15);
  mix-blend-mode: screen;
  opacity: 0;
  transform-origin: 0 50%;
  transform: rotate(var(--streak-angle, 0deg)) scaleX(0.04) scaleY(0.45);
  will-change: transform, opacity, filter;
  /* Cinematic flame: open (0..26%) → breathe (26..76%) → retract (76..100%).
     Easing ease-in-out даёт smooth motion между keyframes — flame breathing
     не дёргается, плавные синусоидальные удлинения. */
  animation: level1CelebrateStreak 4500ms cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
  animation-delay: var(--streak-delay, 0ms);
}
@keyframes level1CelebrateStreak {
  /* ── Phase 1: Раскрытие (0..26%) — пламя вспыхивает из vertex.
     scaleX 0 → 1 (длина растёт), scaleY 0.45 → 1 (ширина набирает forme). */
  0%   { opacity: 0;    transform: rotate(var(--streak-angle, 0deg)) scaleX(0.04) scaleY(0.45);
         filter: blur(14px) saturate(1.55) brightness(1.0); }
  14%  { opacity: 0.55; transform: rotate(var(--streak-angle, 0deg)) scaleX(0.42) scaleY(0.78);
         filter: blur(13px) saturate(1.65) brightness(1.10); }
  26%  { opacity: 1.0;  transform: rotate(var(--streak-angle, 0deg)) scaleX(1.00) scaleY(1.00);
         filter: blur(12px) saturate(1.8) brightness(1.20); }

  /* ── Phase 2: Пламя дышит (26..76%) — 3 крупных пульса УДЛИНЕНИЕ/УКОРАЧИВАНИЕ.
     scaleX амплитуда ±100% от flame-amp (drastic, чётко видно).
     scaleY амплитуда ×0.67 от scaleX-коэффициента (соотношение 60:40,
     акцент на длине, но ширина тоже дышит ощутимо). */
  /* Pulse 1 peak (extend) */
  38%  { opacity: 1.0;  transform: rotate(var(--streak-angle, 0deg))
                              scaleX(calc(1.0 + var(--streak-flame-amp, 0.35) * 1.0))
                              scaleY(calc(1.0 + var(--streak-flame-amp, 0.35) * 0.67));
         filter: blur(11px) saturate(2.0) brightness(1.45); }
  /* Pulse 1 trough (contract) */
  50%  { opacity: 0.88; transform: rotate(var(--streak-angle, 0deg))
                              scaleX(calc(1.0 - var(--streak-flame-amp, 0.35) * 0.5))
                              scaleY(calc(1.0 - var(--streak-flame-amp, 0.35) * 0.33));
         filter: blur(13px) saturate(1.7) brightness(1.05); }
  /* Pulse 2 peak (biggest extension) */
  62%  { opacity: 1.0;  transform: rotate(var(--streak-angle, 0deg))
                              scaleX(calc(1.0 + var(--streak-flame-amp, 0.35) * 1.3))
                              scaleY(calc(1.0 + var(--streak-flame-amp, 0.35) * 0.87));
         filter: blur(10px) saturate(2.1) brightness(1.55); }
  /* Pulse 2 trough */
  74%  { opacity: 0.92; transform: rotate(var(--streak-angle, 0deg))
                              scaleX(calc(1.0 - var(--streak-flame-amp, 0.35) * 0.3))
                              scaleY(calc(1.0 - var(--streak-flame-amp, 0.35) * 0.20));
         filter: blur(12px) saturate(1.8) brightness(1.15); }

  /* ── Phase 3: Угасание (76..100%) — пламя втягивается обратно к vertex.
     scaleX сжимается к 0 (укорачивается), scaleY тоже спадает. */
  86%  { opacity: 0.55; transform: rotate(var(--streak-angle, 0deg)) scaleX(0.55) scaleY(0.82);
         filter: blur(13px) saturate(1.55) brightness(1.0); }
  100% { opacity: 0;    transform: rotate(var(--streak-angle, 0deg)) scaleX(0.15) scaleY(0.5);
         filter: blur(15px) saturate(1.4) brightness(0.9); }
}
/* Light theme — multiply на белом фоне даёт тёмные пятна. Halo (screen)
   ещё работает корректно, поэтому скрываем только vignette layer. */
body:not(.dark) .level1-celebrate-overlay {
  background: none;
  mix-blend-mode: normal;
  animation: none;
  opacity: 1;
}

/* Vertex pulse synced с celebration (2.6s). */
.level1-node.is-celebrate .mol-node-mark {
  animation: level1CelebrateVertex 4500ms cubic-bezier(0.35, 0, 0.25, 1);
}
/* Vertex removal — синхронно с WebGL particle explode burst (220ms сразу
   после trigger). Vertex briefly expands + flashes (как взрыв инициируется),
   потом стремительно shrinks/fades. DOM removed ~280ms когда state.removeGoal
   triggers renderNodes. */
.level1-node.is-removing {
  pointer-events: none;
  animation: level1NodeRemove 280ms cubic-bezier(0.4, 0, 0.7, 1) forwards;
}
.level1-node.is-removing .mol-node-mark {
  animation: level1NodeRemoveMark 280ms cubic-bezier(0.4, 0, 0.7, 1) forwards;
}
@keyframes level1NodeRemove {
  0%   { opacity: 1; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes level1NodeRemoveMark {
  0%   { transform: scale(1);   filter: brightness(1) blur(0); }
  18%  { transform: scale(1.7); filter: brightness(2.4) blur(1px); }
  100% { transform: scale(0.2); filter: brightness(0.5) blur(2px); }
}
@keyframes level1CelebrateVertex {
  0%   { transform: scale(1); }
  22%  { transform: scale(1.7); }
  55%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Detail content + Arc switcher во время celebration: контент остаётся
   на месте, текст становится белым, элемент поднимается над overlay.
   ВАЖНО: не задаём position здесь — detail и arc уже positioned
   (.detail / .relationship-arc-switcher — position: absolute). Любая
   position-override (relative/fixed) ломает их top/left и они «скатываются».
   Z-index работает на уже-positioned элементах без смены position. */
.detail.is-celebrating,
.relationship-arc-switcher.is-celebrating {
  z-index: 25;
}
.detail.is-celebrating .detail-motion {
  animation: level1CelebrateContentSoften 4500ms cubic-bezier(0.3, 0, 0.3, 1);
}
@keyframes level1CelebrateContentSoften {
  0%   { opacity: 1; }
  45%  { opacity: 0.95; }
  100% { opacity: 1; }
}
/* Inversion: ВСЁ содержимое детали становится белым + text-shadow для
   читаемости поверх ярчайшего glow. Wildcard охватывает вложенные spans,
   action keys, badges, chip labels. Без transition — мгновенно меняем
   color, чтобы не trash'ить existing transitions на children
   (например .relationship-arc-switcher имеет transition transform). */
.detail.is-celebrating,
.detail.is-celebrating *,
.relationship-arc-switcher.is-celebrating,
.relationship-arc-switcher.is-celebrating * {
  color: #ffffff !important;
  /* Едва заметная subtle drop shadow — текст читается, но shadow не
     перетягивает внимание. Один тонкий слой. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* Иконки/SVG-stroke тоже белыми — путь, fill, stroke. */
.detail.is-celebrating svg,
.detail.is-celebrating svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ── Dev-кнопка «▶ Dev» — внешне отличается от обычных tools, чтобы
   видно что это инструмент для разработчика (не для production). */
.level1-tools__dev {
  border-color: rgba(255, 107, 87, 0.45) !important;
  color: #ff6b57 !important;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.level1-tools__dev:hover {
  border-color: rgba(255, 107, 87, 0.78) !important;
  color: #ff8c75 !important;
}

/* ── Relationship arc switcher — initial hidden, bridge добавляет .visible
   на tap-to-open. DS default opacity:1 (для showcase), здесь переопределяем
   до class-driven visibility. */
.level1-arc:not(.visible) {
  opacity: 0;
  pointer-events: none;
}
.level1-arc.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Particles в level1 arc — статичны (1:1 production reference, без
   CSS animation). DS .relationship-arc-particle уже даёт glow + alpha
   variation — этого достаточно. Drift animation удалена. */

/* ── Detail panel — VERBATIM copy production reference
   (apps/planning-studio/relationship-graph/index.html lines 1350-2083).
   Override DS rules через selector .level1-stage .detail. Уровневые
   правила скоп'нуты к level1-stage чтобы не ломать DS showcase. */

.level1-stage .detail {
  --detail-accent: #3a6ab5;
  --spot-x: 50%;
  --spot-y: 38%;
}
.level1-stage .detail::before {
  top: -34px;
  left: -12px;
  width: 72%;
  height: 46%;
  border-radius: 999px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.12) 34%, transparent 60%);
  transform: rotate(-7deg);
  opacity: 0.86;
}
.level1-stage .detail::after {
  inset: auto 18px 12px 18px;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  opacity: 0.78;
}
.level1-stage .detail-spotlight {
  inset: -34px;
  z-index: 0;
  border-radius: 44px;
  background: radial-gradient(
    ellipse 48% 34% at var(--spot-x) var(--spot-y),
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.42) 22%,
    rgba(255, 255, 255, 0.14) 42%,
    transparent 72%
  );
  filter: blur(10px);
  opacity: 0.48;
}
.level1-stage .detail-backdrop {
  --detail-accent: #3a6ab5;
  --spot-x: 50%;
  --spot-y: 38%;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 132px;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 116% 98% at var(--spot-x) var(--spot-y),
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.62) 22%,
      rgba(255, 255, 255, 0.42) 46%,
      rgba(255, 255, 255, 0.24) 68%,
      rgba(255, 255, 255, 0.10) 84%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.12) 36%,
      rgba(255, 255, 255, 0.04) 100%
    );
  filter: blur(34px);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.96);
  transition:
    opacity 220ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.level1-stage .detail-backdrop.visible {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}
.level1-stage .detail.visible {
  opacity: 1;
  pointer-events: auto;
}
.level1-stage .detail[data-phase="opening"],
.level1-stage .detail[data-phase="visible"] {
  transform: translate3d(-50%, -50%, 0) scale(1);
}
.level1-stage .detail[data-phase="closing"] {
  transform: translate3d(-50%, calc(-50% + 14px), 0) scale(0.985);
}
.level1-stage .detail-motion {
  position: relative;
  z-index: 1;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.level1-stage .detail.content-hidden .detail-motion {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.99);
}

/* Spatial variant — title/intent typography, tag/status/close styling. */
.level1-stage .detail[data-variant="spatial"] .detail-top {
  margin-bottom: 18px;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}
.level1-stage .detail[data-variant="spatial"] .detail-tag {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.18em;
  gap: 9px;
}
.level1-stage .detail[data-variant="spatial"] .detail-status {
  min-height: 0;
  color: color-mix(in srgb, var(--text), var(--detail-accent) 42%);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.18em;
}
.level1-stage .detail[data-variant="spatial"] .detail-tag::before {
  position: static;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 14px currentColor;
}
/* ── View actions footer (delete + close) ──
   Видны только в view mode (data-mode не равен 'authoring'). Лежат
   внизу detail-motion, выровнены по левому краю как authoring actions.
   Style: muted/grey по умолчанию — не отвлекают от контента детали. */
.level1-stage .detail[data-variant="spatial"] .detail-view-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 22px;
  pointer-events: auto;
}
/* CTA draft mode: authoring actions visible, view actions hidden. */
.level1-stage .detail[data-variant="spatial"][data-mode="authoring"] .detail-view-actions {
  display: none;
}
/* Close button (data-spatial-close) — серый/незаметный по умолчанию,
   немного ярче в hover. Не должен отвлекать. */
.level1-stage .detail .detail-view-actions .mol-action-key {
  --action-tone: color-mix(in srgb, var(--text), var(--muted) 60%);
  --action-tone-hover: color-mix(in srgb, var(--text), var(--muted) 25%);
}
/* Delete button — приглушённый красный в default (виден как danger,
   но не кричит), bright red в hover и в confirm state.
   Specificity повышена .detail-view-actions чтобы перебить close-tone. */
.level1-stage .detail .detail-view-actions .mol-action-key--danger {
  --action-tone: color-mix(in srgb, var(--muted) 55%, #d35858);
  --action-tone-hover: #e25555;
}
.level1-stage .detail .detail-view-actions .mol-action-key--danger[data-state="confirm"] {
  --action-tone: #ff3838;
  --action-tone-hover: #ff3838;
  text-shadow: 0 0 18px rgba(255, 56, 56, 0.45);
  animation: deleteConfirmPulse 1100ms ease-in-out infinite;
}
@keyframes deleteConfirmPulse {
  0%, 100% { opacity: 1; transform: translateX(0); }
  50%      { opacity: 0.85; transform: translateX(-1px); }
}
.level1-stage .detail[data-variant="spatial"] .detail-title {
  margin-bottom: 12px;
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 690;
  line-height: 0.92;
  letter-spacing: -0.045em;
  max-width: min(12ch, 100%);
  /* Едва заметная subtle drop — depth feel без отвлекающего glow. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.level1-stage .detail[data-variant="spatial"] .detail-intent {
  margin-bottom: 12px;
  font-size: 17px;
  line-height: 1.34;
  max-width: 28ch;
  color: color-mix(in srgb, var(--text), white 18%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* Inline-editable title/intent — clean, без рамки. Тот же look что и
   editable поля в CTA create flow (mol-editable-text molecule): text
   cursor при hover, без background change, без focus ring. */
.level1-stage .detail[data-variant="spatial"] [contenteditable="plaintext-only"] {
  cursor: text;
  outline: none;
}
.level1-stage .detail[data-variant="spatial"] .detail-comments {
  max-width: 30ch;
}
.level1-stage .detail[data-variant="spatial"] .detail-comments p {
  color: color-mix(in srgb, var(--text), white 2%);
  text-shadow:
    0 0 16px rgba(255, 255, 255, 0.18),
    0 0 8px rgba(255, 255, 255, 0.08);
}

/* Dark theme overrides (verbatim from production lines 2027-2083). */
body.dark .level1-stage .detail[data-variant="spatial"] {
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.dark .level1-stage .detail-backdrop {
  border-radius: 156px;
  background:
    radial-gradient(
      ellipse 122% 104% at var(--spot-x) var(--spot-y),
      rgba(148, 176, 236, 0.22) 0%,
      rgba(118, 144, 212, 0.18) 22%,
      rgba(88, 108, 170, 0.14) 46%,
      rgba(56, 68, 108, 0.10) 68%,
      rgba(20, 24, 38, 0.04) 86%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      rgba(88, 110, 176, 0.12) 0%,
      rgba(50, 64, 106, 0.08) 42%,
      rgba(16, 20, 34, 0.02) 100%
    );
  filter: blur(42px);
  opacity: 0.98;
}
body.dark .level1-stage .detail-backdrop:not(.visible) {
  opacity: 0;
}
body.dark .level1-stage .detail[data-variant="spatial"] .detail-title {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
body.dark .level1-stage .detail[data-variant="spatial"] .detail-intent {
  color: color-mix(in srgb, var(--text), white 10%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
body.dark .level1-stage .detail[data-variant="spatial"] .detail-comments p {
  color: color-mix(in srgb, var(--text), white 6%);
  text-shadow:
    0 0 16px rgba(34, 44, 74, 0.22),
    0 0 8px rgba(0, 0, 0, 0.20);
}

/* ── Floating background canvas — pinned за всем контентом в overlay'ах
   и на main stage (под sphere). DS-atom .atom-noise-canvas сам не имеет
   positioning, добавляем тут. */
.org-onboarding-overlay .atom-noise-canvas,
.org-flight[data-onboarding-flight] .atom-noise-canvas,
.level1-stage .atom-noise-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}