/* Node kind badge (kindBadge in Core/story-model.mjs): one compact rounded tag with the kind's
   Lucide icon and word, used by the node index rows, graph cards (full and overview) and the
   reading preview passage heads. Each kind has its own tint and ring from the theme tokens:
   敘述 a quiet front tint, 對話 a front ring on no fill, 選擇 copper, 結局 teal. The word is
   always --color-text-2, which keeps at least 4.5:1 on every tint in both themes (copper or teal
   text on its own tint does not); the icon carries the hue. */
.kind-tag {
  --kind-tag-fill: var(--color-kind-narration);
  --kind-tag-ring: var(--color-border);
  --kind-tag-icon: var(--color-text-muted);
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 6px 0 5px;
  border-radius: var(--radius-pill);
  background: var(--kind-tag-fill);
  box-shadow: inset 0 0 0 1px var(--kind-tag-ring);
  color: var(--color-text-2);
  font: 600 var(--font-size-2xs)/1 var(--font-ui);
  letter-spacing: 0.04em;
  white-space: nowrap;
  vertical-align: middle;
}
.kind-tag .icon {
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--kind-tag-icon);
}
.kind-tag--dialogue {
  --kind-tag-fill: transparent;
  --kind-tag-ring: var(--color-marker-ring);
}
.kind-tag--choice {
  --kind-tag-fill: var(--color-accent-badge);
  --kind-tag-ring: var(--color-accent-ring);
  --kind-tag-icon: var(--color-accent-text);
}
.kind-tag--ending {
  --kind-tag-fill: var(--color-positive-tint);
  --kind-tag-ring: var(--color-positive-border);
  --kind-tag-icon: var(--color-positive);
}

/* Icon only: the word stays in the accessibility tree (same clip as .visually-hidden). */
.kind-tag--compact {
  width: 22px;
  padding: 0;
  justify-content: center;
}
.kind-tag--compact .kind-tag-word {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Node index rows: the badge leads the row on its first line (the ID line is 18px tall). The
   list is a size container so a narrow left panel can drop to the icon-only form and keep the
   ID, 定稿 check and 「n 點」 on the line. */
.library-content {
  container: node-index / inline-size;
}
.node-row > .kind-tag {
  align-self: flex-start;
}
@container node-index (max-width: 236px) {
  .node-row > .kind-tag {
    width: 22px;
    padding: 0;
    justify-content: center;
  }
  .node-row > .kind-tag .kind-tag-word {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}
@media (max-width: 900px) {
  /* Phone rows are 44px touch targets with a 14px snippet; centre the badge on the ID line. */
  .node-row > .kind-tag {
    margin-top: 1px;
  }
}

/* Graph card head: the 18px tag overhangs the 11px mono line by equal negative margins, so the
   head keeps its 27px height (PORT_Y and --port-y depend on it). */
.graph-card-head .kind-tag {
  height: 17px;
  margin-block: -3px;
  padding: 0 5px 0 4px;
}
.graph-card-head .kind-tag .icon {
  width: 11px;
  height: 11px;
}
/* Overview: the compact badge leads the second line, then the summary (start, option count,
   ending); the 100px card has no room for the word as well. */
.graph-card.overview .graph-card-head small .kind-tag {
  width: 20px;
  margin: -2px 4px -2px 0;
  padding: 0;
}

/* Reading preview passage head: the badge replaces the old marker and kind word. */
.preview-passage-head .kind-tag {
  height: 20px;
  padding: 0 7px 0 6px;
  font-size: var(--font-size-xs);
}

/* Points: the number in 「n 點」 (index rows) and 「探索 n 點」 (card heads) takes the deepened
   copper of --color-points and bold weight when the node awards points; the words and a zero stay in the muted colour of
   their row. Inline, so neither line grows. */
.points-value.has-points {
  color: var(--color-points);
  font-weight: 700;
}