/* =====================================================================
   plane.css — the card-web (plane) styles, shared by every plane page.
   Sits beside plane.js: nodes hide/show, choice pills, the Map overlay
   (nodes + edges + the highlighted story path), and the Back/Map bar.
   One copy here; pages link it instead of inlining.
   ===================================================================== */
.plane-node { display: none; }
.plane-node.is-active { display: block; }
.plane-choices { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.plane-choice {
  font: inherit; font-weight: 600; padding: .7rem 1.1rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
  background: transparent; color: var(--fg); cursor: pointer; text-decoration: none;
}
.plane-choice.is-flow { border-color: var(--accent); color: var(--accent); }
.plane-choice.is-leave::after { content: " \2197"; }
.plane-bar { position: fixed; left: 1rem; bottom: 1rem; display: flex; gap: .5rem; z-index: 20; }
.plane-bar .card-cta { margin-top: 0; }
.plane-map { position: fixed; inset: 0; background: rgba(6,14,26,.9); display: flex; align-items: center; justify-content: center; z-index: 50; }
.plane-map[hidden] { display: none; }
.plane-map-inner { position: relative; width: min(90vw, 620px); aspect-ratio: 1 / 1; }
.plane-map svg { width: 100%; height: 100%; }
.pm-edge { stroke: color-mix(in srgb, var(--fg) 28%, transparent); stroke-width: .5; }
.pm-edge.is-flow { stroke: var(--accent); stroke-width: 1; }
.pm-node circle { fill: color-mix(in srgb, var(--fg) 45%, transparent); cursor: pointer; }
.pm-node text { fill: var(--fg); font: 3.2px system-ui, sans-serif; pointer-events: none; }
.pm-node.is-flow circle { fill: var(--accent); }
.pm-node.is-current circle { fill: #fff; stroke: var(--accent); stroke-width: 1; }
.plane-map-close { position: absolute; bottom: -3rem; left: 50%; transform: translateX(-50%); }