/* ==========================================================================
   Мир «Грид» · Скользящие капсулы, Linear-шиммеры и shadcn-аккордеоны (/live)
   Файл: capsule_shimmer.css · Группа g3-s2 (svg_artist_c2 🎨🧩)
   Вдохновители: linear.app, vercel.com, railway.app, ui.shadcn.com
   WCAG 2.2 AAA Compliant · 60fps GPU Accelerated · Закон Модульности (< 800 строк)
   ========================================================================== */

/* ---------- 1. Аккордеон шагов пайплайна (shadcn pattern · CSS Grid Zero-CLS) ---------- */
.step-accordion-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-normal) var(--ease-out);
  width: 100%;
}

.step.expanded .step-accordion-wrap,
.step.step-selected .step-accordion-wrap,
.step-accordion-wrap.expanded {
  grid-template-rows: 1fr;
}

.step-accordion-inner {
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.step.expanded .step-accordion-inner,
.step.step-selected .step-accordion-inner,
.step-accordion-wrap.expanded .step-accordion-inner {
  opacity: 1;
}

/* Плавное сворачивание секций (#bottomSection, #timelineSection) */
.bottom-body-wrap,
.timeline-body-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-normal) var(--ease-out);
  width: 100%;
}

.bottom-collapsible-section.collapsed .bottom-body-wrap,
.timeline-card.collapsed .timeline-body-wrap {
  grid-template-rows: 0fr !important;
}

.bottom-body-wrap > *,
.timeline-body-wrap > * {
  min-height: 0;
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.bottom-collapsible-section.collapsed .bottom-body-wrap > *,
.timeline-card.collapsed .timeline-body-wrap > * {
  opacity: 0 !important;
  overflow: hidden !important;
}
.timeline-body-wrap > .timeline {
  overflow: auto !important;
}

.step-accordion-body {
  padding: var(--sp-2) var(--sp-1) var(--sp-1) var(--sp-1);
  margin-top: var(--sp-1-5);
  border-top: 1px dashed var(--line-glass);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1-5);
  font-size: var(--fs-xs);
}

.step-acc-goal {
  line-height: var(--lh-snug, 1.35);
  color: var(--tx2);
}

.step-acc-reqs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--card2);
  padding: var(--sp-1-5) var(--sp-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-glass);
}

.step-acc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
}

.step-acc-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  color: var(--tx2);
  line-height: 1.3;
}

.step-acc-list li .bullet {
  color: var(--violet-light);
  font-weight: 700;
}

.step-acc-files {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  flex-wrap: wrap;
}

.step-acc-files-list {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.step-file-pill {
  font-size: var(--fs-2xs);
  padding: 1px var(--sp-1-5);
  background: var(--surface-2);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-xs);
  color: var(--tx2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.step-acc-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.btn-step-log {
  font-size: var(--fs-2xs);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-xs);
  background: var(--violet-alpha-15);
  color: var(--violet-light);
  border: 1px solid var(--violet-alpha-30);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.btn-step-log:hover {
  background: var(--violet-alpha-30);
  border-color: var(--violet-alpha-50);
  color: var(--white);
}

.step-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-normal) var(--ease-spring);
  opacity: 0.6;
  margin-left: var(--sp-1);
}

.step.expanded .step-chevron,
.step.step-selected .step-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ---------- 2. Скользящая капсула активного фильтра (Sliding Highlight Capsule) ---------- */
.sliding-capsule-container,
.mode-chips,
.graph-chips,
.term-level-chips,
.chips-slider-wrap,
.tabs-slider-wrap,
.doc-filter-chips,
.dept-category-chips,
.lightbox-mode-chips,
.pipeline-chips,
.subnav-chips,
.design-subnav,
.wave-chips-wrap,
.view-mode-toggle,
.cmd-chips-bar,
.role-chips-row,
#graphModeChips,
#graphChips,
#msgChips,
#termLevelChips,
#tabs,
#docFilterChips,
#deptCategoryChips,
#roleChipsContainer,
#discordFilterChips,
#pulseStatChips,
#cmdChipsBar,
#viewModeToggle,
#discordStatusToggle,
#noteModalModeChips,
#docRoundChips,
#snapshotsMissionChips {
  position: relative;
  z-index: 1;
}

.sliding-capsule-pill {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--violet-alpha-30) 0%, var(--blue-alpha-20) 100%);
  border: 1px solid var(--violet);
  box-shadow: 0 0 12px var(--violet-alpha-30);
  transition: transform var(--dur-normal) var(--ease-capsule),
              width var(--dur-normal) var(--ease-capsule),
              height var(--dur-normal) var(--ease-capsule),
              opacity var(--dur-fast) ease;
  will-change: transform, width, height;
}

html.light-theme .sliding-capsule-pill {
  background: linear-gradient(135deg, var(--violet-alpha-20) 0%, var(--blue-alpha-20) 100%);
  border-color: var(--violet-light);
  box-shadow: 0 2px 8px var(--violet-alpha-20);
}

.sliding-capsule-container .chip,
.sliding-capsule-container .tab,
.sliding-capsule-container .view-mode-btn,
.sliding-capsule-container .pill-item,
.sliding-capsule-container .filter-btn,
.sliding-capsule-container .design-nav-chip,
.sliding-capsule-container .discord-status-btn,
.sliding-capsule-container .doc-chip,
.mode-chips .chip,
.graph-chips .chip,
.term-level-chips .chip,
#graphModeChips .chip,
#graphChips .chip,
#msgChips .chip,
#termLevelChips .chip,
#tabs .tab {
  position: relative;
  z-index: 1;
}

.sliding-capsule-container .chip.active,
.sliding-capsule-container .chip.on,
.sliding-capsule-container .tab.on,
.sliding-capsule-container .tab.active,
.sliding-capsule-container .view-mode-btn.active,
.sliding-capsule-container .pill-item.active,
.sliding-capsule-container .filter-btn.active,
.sliding-capsule-container .design-nav-chip.active,
.sliding-capsule-container .discord-status-btn.active,
.sliding-capsule-container .doc-chip.active,
.mode-chips .chip.active,
.graph-chips .chip.active,
.term-level-chips .chip.active,
#graphModeChips .chip.active,
#graphChips .chip.active,
#msgChips .chip.active,
#termLevelChips .chip.active,
#tabs .tab.on,
#tabs .tab.active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--white) !important;
}

html.light-theme .sliding-capsule-container .chip.active,
html.light-theme .sliding-capsule-container .chip.on,
html.light-theme .sliding-capsule-container .tab.on,
html.light-theme .sliding-capsule-container .tab.active,
html.light-theme .sliding-capsule-container .view-mode-btn.active,
html.light-theme .sliding-capsule-container .pill-item.active,
html.light-theme .sliding-capsule-container .filter-btn.active,
html.light-theme .sliding-capsule-container .design-nav-chip.active,
html.light-theme .sliding-capsule-container .discord-status-btn.active,
html.light-theme .sliding-capsule-container .doc-chip.active,
html.light-theme .mode-chips .chip.active,
html.light-theme .graph-chips .chip.active,
html.light-theme .term-level-chips .chip.active,
html.light-theme #graphModeChips .chip.active,
html.light-theme #graphChips .chip.active,
html.light-theme #msgChips .chip.active,
html.light-theme #termLevelChips .chip.active,
html.light-theme #tabs .tab.on,
html.light-theme #tabs .tab.active {
  color: var(--tx) !important;
}

/* ---------- 3. Linear Edge Shine & Shimmer (1600ms linear) ---------- */
.linear-edge-shimmer,
.content-preserving-shimmer,
.linear-shimmer-active,
.card.shimmering,
.terminal-card.shimmering,
.tile.shimmering,
.step.shimmering,
.now-card.shimmering,
.doc-card.loading,
.doc-card.shimmering,
#workColDoc.loading,
#workColDoc.shimmering,
.work-col-doc.loading,
.work-col-doc.shimmering {
  position: relative;
  overflow: hidden;
}

.linear-edge-shimmer::after,
.content-preserving-shimmer::after,
.linear-shimmer-active::after,
.card.shimmering::after,
.terminal-card.shimmering::after,
.tile.shimmering::after,
.step.shimmering::after,
.now-card.shimmering::after,
.doc-card.loading::after,
.doc-card.shimmering::after,
#workColDoc.loading::after,
#workColDoc.shimmering::after,
.work-col-doc.loading::after,
.work-col-doc.shimmering::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--violet-alpha-08) 25%,
    var(--white-alpha-15) 50%,
    var(--blue-alpha-08) 75%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: linearShimmerSweep var(--dur-shimmer) cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 2;
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease-out);
}

html.light-theme .linear-edge-shimmer::after,
html.light-theme .content-preserving-shimmer::after,
html.light-theme .linear-shimmer-active::after,
html.light-theme .card.shimmering::after,
html.light-theme .terminal-card.shimmering::after,
html.light-theme .tile.shimmering::after,
html.light-theme .step.shimmering::after,
html.light-theme .now-card.shimmering::after,
html.light-theme .doc-card.loading::after,
html.light-theme .doc-card.shimmering::after,
html.light-theme #workColDoc.loading::after,
html.light-theme #workColDoc.shimmering::after,
html.light-theme .work-col-doc.loading::after,
html.light-theme .work-col-doc.shimmering::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--violet-alpha-04) 25%,
    var(--white-alpha-40) 50%,
    var(--blue-alpha-08) 75%,
    transparent 100%
  );
}

@keyframes linearShimmerSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .step-accordion-wrap,
  .step-accordion-inner,
  .step-chevron,
  .sliding-capsule-pill {
    transition: none !important;
  }
  .linear-edge-shimmer::after,
  .content-preserving-shimmer::after,
  .linear-shimmer-active::after,
  .card.shimmering::after,
  .terminal-card.shimmering::after,
  .tile.shimmering::after,
  .step.shimmering::after,
  .now-card.shimmering::after,
  .doc-card.loading::after,
  .doc-card.shimmering::after,
  #workColDoc.loading::after,
  #workColDoc.shimmering::after,
  .work-col-doc.loading::after,
  .work-col-doc.shimmering::after {
    animation: none !important;
    display: none !important;
  }
}

/* ---------- 4. Иерархическое дерево конвейера задач и трибунала (/live #livePipeline) ---------- */
.live-pipeline-tree {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
}

.pipeline-group-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-2-5);
  transition: border-color var(--dur-normal) ease, background var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
  position: relative;
  cursor: pointer;
}

.pipeline-group-card:hover {
  border-color: var(--violet-alpha-30);
  background: var(--surface-1);
}

.pipeline-group-card.step-selected {
  border-color: var(--violet);
  box-shadow: 0 0 0 1px var(--violet) inset, 0 4px 14px var(--violet-alpha-20);
}

.group-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  width: 100%;
}

.group-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.group-title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  min-width: 0;
  flex: 1;
}

.group-header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  flex-shrink: 0;
}

.badge-shares-count {
  font-size: var(--fs-2xs);
  padding: 1px var(--sp-1-5);
  background: var(--white-alpha-08);
  border: 1px solid var(--white-alpha-15);
  color: var(--tx2);
  border-radius: var(--r-xs);
  font-family: var(--mono);
}

.group-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-0-5);
}

.group-tree-branch {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1-5);
  margin-top: var(--sp-2);
  width: 100%;
}

/* Дерево долей (Shares Sub-Tree) */
.pipeline-shares-tree {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1-5);
  margin-top: var(--sp-1);
  padding-left: var(--sp-2);
  border-left: 2px solid var(--violet-alpha-30);
}

.share-branch-node {
  background: var(--card2);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-sm);
  padding: var(--sp-1-5) var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.share-branch-node:hover {
  background: var(--surface-2);
  border-color: var(--violet-alpha-30);
}

.share-branch-node.share-running {
  border-color: var(--status-running-border);
  box-shadow: 0 0 10px var(--green-alpha-15);
}

.share-branch-node.share-retry,
.share-branch-node.share-rejected {
  border-color: var(--status-failed-border);
  background: linear-gradient(135deg, var(--card2) 0%, var(--red-alpha-08) 100%);
  box-shadow: 0 0 8px var(--red-alpha-15);
}

.badge.badge-rejected {
  background: var(--status-failed-bg);
  color: var(--status-failed-tx);
  border: 1px solid var(--status-failed-border);
  box-shadow: 0 0 8px var(--red-alpha-20);
}

.share-node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1-5);
  flex-wrap: wrap;
}

.share-left-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
}

.share-code {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--violet-light);
  background: var(--violet-alpha-15);
  padding: 1px var(--sp-1);
  border-radius: var(--r-2xs);
}

.pkg-pill {
  font-size: var(--fs-2xs);
  color: var(--tx2);
  background: var(--surface-base);
  padding: 1px var(--sp-1-5);
  border-radius: var(--r-xs);
  border: 1px solid var(--border-glass);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.share-pair-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1-5);
  font-size: var(--fs-2xs);
  padding: var(--sp-1) var(--sp-1-5);
  background: var(--surface-base);
  border-radius: var(--r-xs);
  border: 1px solid var(--white-alpha-04);
}

.share-model-badge {
  font-size: var(--fs-2xs);
  color: var(--tx3);
  background: var(--white-alpha-04);
  padding: 1px var(--sp-1);
  border-radius: var(--r-2xs);
  margin-left: var(--sp-1);
}

.critic-role-tag {
  font-size: var(--fs-2xs);
  color: var(--tx3);
  margin-left: var(--sp-0-5);
}

/* Карточка возврата трибунала (Tribunal Verdict Highlight) */
.tribunal-rejection-card {
  margin-top: var(--sp-1);
  padding: var(--sp-1-5) var(--sp-2);
  background: var(--red-alpha-15);
  border: 1px solid var(--status-failed-border);
  border-radius: var(--r-xs);
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
}

.tribunal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--status-failed-tx);
}

.tribunal-gate-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.tribunal-reason-text {
  font-size: var(--fs-xs);
  color: var(--tx);
  line-height: var(--lh-snug);
  background: var(--black-alpha-20);
  padding: var(--sp-1) var(--sp-1-5);
  border-radius: var(--r-2xs);
  border-left: 2px solid var(--status-failed-border);
  word-break: break-word;
}

.badge-round {
  font-size: var(--fs-2xs);
  padding: 1px var(--sp-1-5);
  border-radius: var(--r-xs);
  font-family: var(--mono);
  font-weight: 600;
}

.badge-round.r1 {
  background: var(--white-alpha-08);
  border: 1px solid var(--white-alpha-15);
  color: var(--tx2);
}

.badge-round.r2,
.badge-round.retry {
  background: var(--amber-alpha-15);
  border: 1px solid var(--amber-alpha-40);
  color: var(--tx-pastel-amber);
  box-shadow: 0 0 6px var(--amber-alpha-30);
}

/* Блок финальной сборки (Assembly Phase Card) */
.assembly-phase-card {
  background: linear-gradient(135deg, var(--card) 0%, var(--indigo-alpha-15) 100%);
  border: 1px solid var(--indigo-alpha-30);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-2-5);
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1-5);
}

.assembly-steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}

.assembly-step-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-2xs);
  background: var(--card2);
  padding: var(--sp-1) var(--sp-1-5);
  border-radius: var(--r-xs);
  border: 1px solid var(--white-alpha-04);
  color: var(--tx2);
}

.assembly-step-item.checked {
  color: var(--green-light);
  border-color: var(--green-alpha-30);
}

/* ---------- 5. Tabular Roll-in & Number Animations ---------- */
@keyframes tabularRollIn {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tabular-roll-in {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  animation: tabularRollIn var(--dur-normal) var(--ease-spring) forwards;
  will-change: transform, opacity;
}

.share-branch-node.share-retry,
.share-branch-node.share-rejected {
  border-color: var(--status-failed-border);
  background: linear-gradient(135deg, var(--card2) 0%, var(--red-alpha-08) 100%);
  box-shadow: 0 0 8px var(--red-alpha-15);
}

.badge.badge-rejected {
  background: var(--status-failed-bg);
  color: var(--status-failed-tx);
  border: 1px solid var(--status-failed-border);
  box-shadow: 0 0 8px var(--red-alpha-20);
}

.share-node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1-5);
  flex-wrap: wrap;
}

.share-left-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
}

.share-code {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--violet-light);
  background: var(--violet-alpha-15);
  padding: 1px var(--sp-1);
  border-radius: var(--r-2xs);
}

.pkg-pill {
  font-size: var(--fs-2xs);
  color: var(--tx2);
  background: var(--surface-base);
  padding: 1px var(--sp-1-5);
  border-radius: var(--r-xs);
  border: 1px solid var(--border-glass);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.share-pair-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1-5);
  font-size: var(--fs-2xs);
  padding: var(--sp-1) var(--sp-1-5);
  background: var(--surface-base);
  border-radius: var(--r-xs);
  border: 1px solid var(--white-alpha-04);
}

.share-model-badge {
  font-size: var(--fs-2xs);
  color: var(--tx3);
  background: var(--white-alpha-04);
  padding: 1px var(--sp-1);
  border-radius: var(--r-2xs);
  margin-left: var(--sp-1);
}

.critic-role-tag {
  font-size: var(--fs-2xs);
  color: var(--tx3);
  margin-left: var(--sp-0-5);
}

/* Карточка возврата трибунала (Tribunal Verdict Highlight) */
.tribunal-rejection-card {
  margin-top: var(--sp-1);
  padding: var(--sp-1-5) var(--sp-2);
  background: var(--red-alpha-15);
  border: 1px solid var(--status-failed-border);
  border-radius: var(--r-xs);
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
}

.tribunal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--status-failed-tx);
}

.tribunal-gate-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.tribunal-reason-text {
  font-size: var(--fs-xs);
  color: var(--tx);
  line-height: var(--lh-snug);
  background: var(--black-alpha-20);
  padding: var(--sp-1) var(--sp-1-5);
  border-radius: var(--r-2xs);
  border-left: 2px solid var(--status-failed-border);
  word-break: break-word;
}

.badge-round {
  font-size: var(--fs-2xs);
  padding: 1px var(--sp-1-5);
  border-radius: var(--r-xs);
  font-family: var(--mono);
  font-weight: 600;
}

.badge-round.r1 {
  background: var(--white-alpha-08);
  border: 1px solid var(--white-alpha-15);
  color: var(--tx2);
}

.badge-round.r2,
.badge-round.retry {
  background: var(--amber-alpha-15);
  border: 1px solid var(--amber-alpha-40);
  color: var(--tx-pastel-amber);
  box-shadow: 0 0 6px var(--amber-alpha-30);
}

/* Блок финальной сборки (Assembly Phase Card) */
.assembly-phase-card {
  background: linear-gradient(135deg, var(--card) 0%, var(--indigo-alpha-15) 100%);
  border: 1px solid var(--indigo-alpha-30);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-2-5);
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1-5);
}

.assembly-steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}

.assembly-step-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-2xs);
  background: var(--card2);
  padding: var(--sp-1) var(--sp-1-5);
  border-radius: var(--r-xs);
  border: 1px solid var(--white-alpha-04);
  color: var(--tx2);
}

.assembly-step-item.checked {
  color: var(--green-light);
  border-color: var(--green-alpha-30);
}

/* ---------- 5. Tabular Roll-in & Number Animations ---------- */
@keyframes tabularRollIn {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tabular-roll-in {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  animation: tabularRollIn var(--dur-normal) var(--ease-spring) forwards;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .tabular-roll-in {
    animation: none !important;
    transform: none !important;
  }
  .pipeline-group-card,
  .share-branch-node {
    transition: none !important;
  }
}

/* ---------- 6. Shimmer Skeletons ---------- */
.sk-line {
  background: var(--white-alpha-08);
  border-radius: var(--r-xs);
}
.sk-line.h-sm { height: 8px; }
.sk-line.h-md { height: 12px; }
.sk-line.h-lg { height: 16px; }
.sk-line.w-25 { width: 25%; }
.sk-line.w-50 { width: 50%; }
.sk-line.w-75 { width: 75%; }
.sk-line.w-100 { width: 100%; }

.sk-circle {
  background: var(--white-alpha-08);
  border-radius: var(--r-circle);
}

.sk-tab, .sk-tile, .sk-step, .sk-msg, .sk-tl, .mis-top .sk-circle {
  position: relative;
  overflow: hidden;
}

.sk-tab::after, .sk-tile::after, .sk-step::after, .sk-msg::after, .sk-tl::after, .mis-top .sk-circle::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--violet-alpha-08) 25%,
    var(--white-alpha-15) 50%,
    var(--blue-alpha-08) 75%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: linearShimmerSweep var(--dur-shimmer) cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 2;
}

html.light-theme .sk-line, html.light-theme .sk-circle {
  background: var(--black-alpha-08);
}
html.light-theme .sk-tab::after, html.light-theme .sk-tile::after, html.light-theme .sk-step::after, html.light-theme .sk-msg::after, html.light-theme .sk-tl::after, html.light-theme .mis-top .sk-circle::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--violet-alpha-04) 25%,
    var(--black-alpha-08) 50%,
    var(--blue-alpha-08) 75%,
    transparent 100%
  );
}