/*
 * NEXONOMY · DECISION GRAPH PAGE
 * Page-specific surfaces for the moat page, built to the bold homepage register
 * (full-width sections, big accent headlines, interactives as signature moments):
 * the hero teaser graph, the gap statement, the explorable Decision Graph, the
 * owned-artifact vs vendor-telemetry figure, the model-independence swap, and the
 * cross-time replay strip. Reuses tokens and the shared system. Import after product.css.
 */


/* ─── HERO TEASER GRAPH (alive at rest, tilts to cursor) ──────────────────── */

.hero__stage .graph-frame {
  transform: rotateX(3deg) rotateY(-6deg) translateZ(0);
  transition: transform var(--duration-slow) var(--ease-out);
  will-change: transform;
}
.hero__stage[data-tilt] .graph-frame {
  transform:
    rotateX(calc(3deg + var(--ry, 0deg)))
    rotateY(calc(-6deg + var(--rx, 0deg)));
}

/* The current node breathes so the page is not dead at rest. */
@keyframes graphLivePulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.graph-node--live .graph-node__dot {
  animation: graphLivePulse 2.6s var(--ease-inout) infinite;
}


/* ─── PROOF: single testimonial centred ──────────────────────────────────── */

.testimonials--single { grid-template-columns: 1fr; max-width: 760px; }


/* ─── EXPLORABLE GRAPH (graph + detail panel) ────────────────────────────── */

.explore {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: stretch;
}

.explore__graph {
  position: relative;
  background: radial-gradient(80% 90% at 30% 20%, #15131d 0%, var(--color-surface-0) 70%);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -32px rgba(0,0,0,0.80),
    0 8px 24px -12px rgba(0,0,0,0.60);
}

/* Selection model: --current carries only the sealed green dot; --selected
   carries the accent border. Reset the shared --current rect fill here so a
   node never reads as active unless it is the selected one. */
.explore .graph-node--current rect { fill: var(--color-surface-2); stroke: var(--color-border); }
.explore .graph-node__id,
.explore .graph-node--current .graph-node__id { fill: var(--color-text-primary); }
.explore .graph-node rect { transition: stroke var(--duration-fast) var(--ease-out), fill var(--duration-fast) var(--ease-out); }
.explore .graph-node:focus-visible { outline: none; }
.explore .graph-node:focus-visible rect { stroke: rgba(255,255,255,0.4); }

.explore .graph-node--selected rect { fill: rgba(140,101,247,0.14); stroke: var(--color-accent); }
.explore .graph-node--selected .graph-node__id { fill: var(--color-accent); }

.explore__detail {
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  border-radius: 12px;
  background: var(--color-surface-0);
  padding: 20px;
  min-height: 280px;
}
.explore__detail-card { display: none; flex-direction: column; gap: 14px; }
.explore__detail-card.is-shown { display: flex; }

.explore__d-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.explore__d-id {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}
.explore__d-state {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.explore__d-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); }
.explore__d-state--current { color: var(--color-affirm); }
.explore__d-state--current::before { background: var(--color-affirm); }

.explore__d-q {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}
.explore__d-call {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-secondary);
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(140,101,247,0.06);
  border: 1px solid var(--color-border);
}

.explore__d-rows { display: flex; flex-direction: column; gap: 8px; }
.explore__d-row { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: baseline; }
.explore__d-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.explore__d-row > span:last-child { font-size: 12.5px; line-height: 18px; color: var(--color-text-primary); }

.explore__d-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.explore__d-links .explore__d-label { width: 100%; margin-bottom: 2px; }
.explore__d-link {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
}
.explore__d-link--ref { color: var(--color-text-secondary); }
.explore__d-link--sup { color: var(--color-accent); background: rgba(140,101,247,0.08); border-color: rgba(140,101,247,0.25); }
.explore__d-link--rec { color: var(--color-affirm); background: rgba(16,185,129,0.07); border-color: rgba(16,185,129,0.22); }


/* ─── OWNED ARTIFACT vs VENDOR TELEMETRY FIGURE ──────────────────────────── */

.own-fig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.own-col {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 24px;
  background: var(--color-surface-0);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.own-col--yours {
  border-color: rgba(140,101,247,0.30);
  background:
    radial-gradient(90% 80% at 80% 0%, rgba(140,101,247,0.06), transparent 60%),
    var(--color-surface-0);
}
.own-col__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.own-col__kicker {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}
.own-col__tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 5px;
}
.own-col__tag--muted { color: var(--color-text-muted); background: rgba(255,255,255,0.04); border: 1px solid var(--color-border); }
.own-col__tag--accent { color: var(--color-accent); background: rgba(140,101,247,0.10); border: 1px solid rgba(140,101,247,0.30); }

.own-flow, .own-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; justify-content: center; }
.own-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
}
.own-chip--owned { color: var(--color-text-primary); border-color: rgba(140,101,247,0.30); }

.own-flow__arrow { color: var(--color-text-muted); display: grid; place-items: center; }
.own-flow__arrow .icon { width: 18px; height: 18px; }
.own-flow__arrow--out .icon { transform: rotate(90deg); }
.own-flow__arrow--down { color: var(--color-accent); }
.own-flow__arrow--down .icon { transform: rotate(90deg); }

.own-box {
  width: 100%;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.own-box .icon { color: var(--color-text-muted); width: 20px; height: 20px; }
.own-box span { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-primary); letter-spacing: 0.02em; }
.own-box em {
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  color: var(--color-text-muted);
}
.own-box--vendor { border: 1px dashed rgba(255,255,255,0.14); background: rgba(255,255,255,0.02); }
.own-box--graph { border: 1px solid rgba(140,101,247,0.30); background: rgba(140,101,247,0.05); }
.own-box--graph em b { color: var(--color-accent); font-weight: var(--weight-medium); }

.own-graph-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.own-rec {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-secondary);
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-0);
}
.own-rec--new { color: var(--color-affirm); border-color: rgba(16,185,129,0.25); }

.own-col__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 17px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.own-col__foot--locked { color: var(--color-text-muted); }
.own-col__foot--locked .icon { color: var(--color-text-muted); }
.own-col__foot--owned { color: var(--color-text-secondary); }
.own-col__foot--owned .icon { color: var(--color-accent); }


/* ─── MODEL-INDEPENDENCE SWAP ────────────────────────────────────────────── */

.model-swap {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface-0);
  box-shadow:
    0 40px 80px -32px rgba(0,0,0,0.80),
    0 8px 24px -12px rgba(0,0,0,0.60);
}
.model-swap__zone { padding: 22px 24px; }
.model-swap__zone--owned {
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(140,101,247,0.07), transparent 70%);
  border-bottom: 1px dashed rgba(255,255,255,0.10);
}
.model-swap__zlabel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: 14px;
}
.model-swap__zlabel .icon { color: var(--color-accent); }
.model-swap__zlabel--muted { color: var(--color-text-muted); }
.model-swap__zlabel--muted .icon { color: var(--color-text-muted); }
.model-swap__persist, .model-swap__swappable {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.08em;
}
.model-swap__persist { color: var(--color-accent); }
.model-swap__swappable { color: var(--color-text-muted); }

.model-swap__records { display: flex; gap: 10px; flex-wrap: wrap; }
.ms-rec {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(140,101,247,0.28);
  background: rgba(140,101,247,0.05);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  flex: 1;
  min-width: 120px;
}
.ms-rec b { font-size: 12px; color: var(--color-text-primary); font-weight: var(--weight-normal); }

.model-swap__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 0;
}
.model-swap__divider span {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-0);
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  transform: translateY(-50%);
}

.model-swap__tabs { margin-bottom: 16px; }
.model-swap__sets { position: relative; }
.model-set { display: none; gap: 10px; flex-wrap: wrap; }
.model-set--active { display: flex; }
.ms-model {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  flex: 1;
  min-width: 140px;
}
.ms-model .icon { color: var(--color-text-muted); }


/* ─── CROSS-TIME REPLAY STRIP ────────────────────────────────────────────── */

.replay-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
}
.replay-col { display: flex; flex-direction: column; gap: 12px; }
.replay-col__when {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.replay-col__when .icon { color: var(--color-text-muted); }
.replay-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-0);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.replay-card--now {
  border-color: rgba(245,165,36,0.25);
  background:
    radial-gradient(90% 90% at 80% 0%, rgba(245,165,36,0.05), transparent 60%),
    var(--color-surface-0);
}
.replay-card__id { font-family: var(--font-mono); font-size: 11px; color: var(--color-accent); letter-spacing: 0.04em; }
.replay-card__call { font-size: 13.5px; line-height: 20px; color: var(--color-text-primary); }
.replay-card__verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.replay-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.replay-card__verdict--hold { color: var(--color-affirm); }
.replay-card__verdict--hold .replay-dot { background: var(--color-affirm); }
.replay-card__verdict--reexamine { color: var(--color-caution); }
.replay-card__verdict--reexamine .replay-dot { background: var(--color-caution); }

.replay-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--color-accent);
}
.replay-arrow .icon { width: 22px; height: 22px; }
.replay-arrow span {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 70px;
}


/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .explore { grid-template-columns: 1fr; }
  .explore__detail { min-height: 0; }
  .own-fig { grid-template-columns: 1fr; }
  .model-swap__records { gap: 8px; }
  .ms-rec { min-width: calc(50% - 4px); }
  .replay-strip { grid-template-columns: 1fr; }
  .replay-arrow { flex-direction: row; gap: 10px; }
  .replay-arrow .icon { transform: rotate(90deg); }
  .replay-arrow span { max-width: none; }
  .hero__stage .graph-frame,
  .hero__stage[data-tilt] .graph-frame { transform: none; }
}