/* 全站星图（/graph）：Canvas 点群 + HTML 标签层的样式与配色。
   颜色单独定义成 rgb/hex 变量，避免 Canvas fillStyle 直接吃 oklch() 带来的兼容问题。 */

:root {
  --site-graph-root: #18181b;
  --site-graph-section: #3f3f46;
  --site-graph-article: #2563eb;
  --site-graph-concept: #7c3aed;
  --site-graph-entity: #059669;
  --site-graph-tag: #d97706;
}

.dark {
  --site-graph-root: #f4f4f5;
  --site-graph-section: #d4d4d8;
  --site-graph-article: #93c5fd;
  --site-graph-concept: #c4b5fd;
  --site-graph-entity: #6ee7b7;
  --site-graph-tag: #fcd34d;
}

/* 必须绝对定位：舞台一旦参与正常流，它的高度会被 setCanvasSize 写回 canvas，
   canvas 再撑高父级 flex 容器，形成「越量越高」的反馈回路（实测能涨到 4800px）。
   脱离文档流后，舞台尺寸完全由外层容器决定，单向依赖。 */
/* 点群页是画布主导的宽版面，不沿用文章列的窄栏几何。
   右侧要给固定的导航 dock 让位：dock 距右 max(5rem, 50vw-35rem)、自身宽 14rem，
   再留 2rem 间距，否则图谱卡会被 dock 压住（实测重叠 140px）。 */
@media (min-width: 1024px) {
  .site-graph-section {
    /* 必须覆盖 w-full 的 width:100%，否则宽度不受 margin 约束，
       会连着左边距一起溢出到视口外并压住 dock */
    width: auto;
    margin-left: 3rem;
    margin-right: calc(max(5rem, 50vw - 35rem) + 16rem);
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}

/* 毛玻璃面板：半透明底色 + 背景模糊，让暖色纸感背景透上来 */
.site-graph-panel {
  background: color-mix(in oklab, var(--card) 26%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent);
  box-shadow:
    inset 0 1px 0 0 color-mix(in oklab, var(--background) 55%, transparent),
    0 10px 36px -18px color-mix(in oklab, var(--foreground) 28%, transparent);
}

/* 浮层小片（图例、提示、详情卡）用更轻的一档，避免叠在面板上过重 */
.site-graph-chip {
  background: color-mix(in oklab, var(--card) 46%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid color-mix(in oklab, var(--foreground) 7%, transparent);
}

.site-graph-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 240ms ease;
  touch-action: none;
}

.site-graph-stage.is-ready {
  opacity: 1;
}

.site-graph-mount {
  position: absolute;
  inset: 0;
}

.site-graph-canvas {
  position: absolute;
  inset: 0;
  display: block;
  cursor: grab;
}

.site-graph-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.site-graph-label {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 11rem;
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted-foreground);
  background: color-mix(in oklab, var(--background) 62%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 160ms ease;
  will-change: transform;
}

.site-graph-label.is-visible {
  opacity: 1;
}

.site-graph-label.is-active {
  color: var(--foreground);
  font-weight: 600;
}

.site-graph-label--root,
.site-graph-label--section {
  color: var(--foreground);
  font-weight: 600;
  font-size: 0.75rem;
}
