/*
 * TestKinks — Results Shell & Pair Visualization
 *
 * Identity Card, node heatmap, secret-knowledge blur layer,
 * Save/Unlock CTA, and Compatibility Mirror pair-report layer.
 *
 * Depends on: style.css tokens + css/foundations.css
 *
 * DES-CX-005 · DES-CX-006
 *
 * GUARDRAILS:
 * - Blur styling does not hide backend-gated content; it layers
 *   over what the server already decides to omit/show.
 * - data-unlocked="1" is set server-side in template-results.php.
 */

/* ================================================================
   RESULTS CONTAINER
   ================================================================ */
.results-container {
  max-width: var(--tk-max-w-content);
  margin: 0 auto;
  padding: var(--tk-space-6) var(--tk-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-6);
}

.heading-gnosis {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fluid-3xl);
  font-weight: var(--tk-weight-bold);
  letter-spacing: var(--tk-tracking-tight);
  line-height: var(--tk-leading-tight);
  color: var(--tk-ink-100);
}

/* ================================================================
   IDENTITY CARD — PRIMARY ARCHETYPE  (DES-CX-005)
   ================================================================ */
.results-immediate {
  padding: var(--tk-space-7);
  border-radius: var(--tk-radius-lg);
}

.results-immediate h2 {
  font-family: var(--tk-font-body);
  font-size: var(--tk-fluid-sm);
  letter-spacing: var(--tk-tracking-wider);
  text-transform: uppercase;
  color: var(--tk-ink-500);
  font-weight: var(--tk-weight-medium);
  margin-bottom: var(--tk-space-5);
}

/* Identity card for the top archetype */
.top-archetype.tk-card {
  background: var(--tk-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--tk-radius-md);
  padding: var(--tk-space-6);
  position: relative;
  overflow: hidden;
}

/* Pink glow accent bar at top */
.top-archetype.tk-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    var(--electric-pink) 20%,
    var(--tk-gold-400) 80%,
    transparent
  );
  box-shadow: 0 0 12px rgba(var(--electric-pink-rgb), 0.3);
}

.top-archetype .heading-gnosis {
  font-size: var(--tk-fluid-2xl);
  margin-bottom: var(--tk-space-3);
}

.accent-gold {
  color: var(--tk-gold-400);
}

.top-archetype p {
  font-family: var(--tk-font-body);
  font-size: var(--tk-fluid-md);
  color: var(--tk-ink-300);
  line-height: var(--tk-leading-normal);
  margin-bottom: var(--tk-space-5);
}

.more-info-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tk-space-2);
  font-size: var(--tk-font-size-sm);
  font-weight: var(--tk-weight-semibold);
  color: var(--electric-pink);
  text-decoration: none;
  letter-spacing: var(--tk-tracking-wide);
  border-bottom: 1px solid rgba(var(--electric-pink-rgb), 0.35);
  padding-bottom: 2px;
  transition: border-color var(--tk-duration-fast), color var(--tk-duration-fast);
}

.more-info-btn:hover {
  color: hsl(335, 100%, 70%);
  border-color: rgba(var(--electric-pink-rgb), 0.70);
}

.more-info-btn:focus-visible {
  outline: 2px solid var(--electric-pink);
  outline-offset: 3px;
  border-radius: 2px;
}

.results-support {
  font-family: var(--tk-font-body);
  font-size: var(--tk-font-size-sm);
  color: var(--tk-ink-300);
  letter-spacing: var(--tk-tracking-normal);
  padding: var(--tk-space-3) var(--tk-space-4);
  border-left: 2px solid rgba(var(--electric-pink-rgb), 0.25);
  margin-top: var(--tk-space-4);
}

.results-advanced-locked .results-support,
.results-continuation .results-support,
.results-couples-support .results-support,
.results-trust-links .results-support,
.results-account-wall .results-support,
.results-mirror-link .results-support,
.share-section .results-support {
  border-left: none;
  padding: 0;
  margin-top: var(--tk-space-3);
}

/* ================================================================
   RESULTS META & INTERPRETATION
   ================================================================ */
.results-meta {
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  color: var(--tk-mute-700);
  letter-spacing: var(--tk-tracking-wide);
}

.results-interpretation {
  padding: var(--tk-space-6);
}

.results-interpretation h2 {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fluid-xl);
  color: var(--tk-ink-100);
  margin-bottom: var(--tk-space-4);
}

.results-interpretation p {
  color: var(--tk-ink-300);
  line-height: var(--tk-leading-normal);
  margin-bottom: var(--tk-space-4);
}

.results-interpretation ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-3);
}

.results-interpretation li {
  padding-left: var(--tk-space-4);
  position: relative;
  color: var(--tk-ink-500);
  font-size: var(--tk-font-size-sm);
}

.results-interpretation li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--muted-lavender);
}

/* ================================================================
   NODE HEATMAP — 29 ARCHETYPES  (DES-CX-005)
   Visual display of all archetype scores as a glowing node grid.
   Fallback: accessible list is always in the DOM; visual overlay
   layers on top for capable browsers.
   ================================================================ */
.archetype-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--tk-space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.archetype-item {
  position: relative;
  background: var(--tk-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--tk-radius-sm);
  padding: var(--tk-space-3) var(--tk-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-1);
  transition:
    border-color var(--tk-duration-fast) var(--tk-ease-out),
    box-shadow   var(--tk-duration-fast) var(--tk-ease-out);
}

/* Node glow intensity driven by --archetype-score (0–1) injected inline */
.archetype-item {
  --archetype-score: 0;
  border-color: rgba(var(--electric-pink-rgb), calc(var(--archetype-score) * 0.45));
  box-shadow: 0 0 calc(var(--archetype-score) * 20px) rgba(var(--electric-pink-rgb), calc(var(--archetype-score) * 0.25));
}

.archetype-name {
  font-family: var(--tk-font-body);
  font-size: var(--tk-font-size-sm);
  font-weight: var(--tk-weight-medium);
  color: var(--tk-ink-100);
}

.archetype-percentage {
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  letter-spacing: var(--tk-tracking-wide);
  color: var(--electric-pink);
}

.archetype-details {
  font-size: var(--tk-font-size-xs);
  color: var(--tk-ink-500);
  margin-top: var(--tk-space-1);
  line-height: var(--tk-leading-snug);
}

/* Score bar (thin, beneath percentage label) */
.archetype-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: calc(var(--archetype-score) * 100%);
  background: var(--electric-pink);
  border-radius: 0 0 var(--tk-radius-sm) var(--tk-radius-sm);
  opacity: 0.7;
  transition: width var(--tk-duration-slow) var(--tk-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .archetype-item,
  .archetype-item::after { transition: none; }
}

/* ================================================================
   SECRET KNOWLEDGE BLUR LAYER  (DES-CX-005)
   Over content the backend decides not to reveal.
   data-unlocked="0" = locked; data-unlocked="1" = unlocked.
   ================================================================ */
.results-advanced {
  padding: var(--tk-space-6);
  position: relative;
}

.results-advanced-details {
  position: relative;
}

.results-advanced-details summary {
  list-style: none;
  cursor: pointer;
  padding: var(--tk-space-4) var(--tk-space-5);
  border-radius: var(--tk-radius-md);
  background: var(--tk-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--tk-ink-100);
  font-family: var(--tk-font-body);
  font-weight: var(--tk-weight-semibold);
  letter-spacing: var(--tk-tracking-wide);
}

.results-advanced-details summary::marker {
  color: var(--tk-ink-500);
}

.results-advanced-details[open] summary {
  border-color: rgba(var(--electric-pink-rgb), 0.35);
  box-shadow: 0 0 18px rgba(var(--electric-pink-rgb), 0.18);
}

.results-advanced-details[data-unlocked="0"] .archetype-list {
  /* Blur locked content */
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
}

.results-advanced-locked {
  margin-top: var(--tk-space-4);
  padding: var(--tk-space-5);
  border-radius: var(--tk-radius-md);
  background: var(--tk-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: var(--tk-space-3);
}

.results-advanced-locked .results-save-actions {
  margin-top: var(--tk-space-2);
}

/* ================================================================
   CONTINUATION CTA + SUPPORT LINKS
   ================================================================ */
.results-continuation,
.results-account-wall,
.results-mirror-link,
.results-couples-support,
.results-trust-links,
.share-section {
  padding: var(--tk-space-6);
  border-radius: var(--tk-radius-lg);
}

.results-continuation h2,
.results-account-wall h2,
.results-mirror-link h2,
.results-couples-support h2,
.results-trust-links h2,
.share-section h2 {
  margin-bottom: var(--tk-space-4);
}

.cta-group {
  display: grid;
  gap: var(--tk-space-3);
  justify-items: center;
}

.cta-group .cta-primary,
.cta-group .cta-secondary {
  width: 100%;
  display: flex;
  justify-content: center;
}

.cta-group .btn,
.cta-group .tk-button,
.cta-group .more-info-btn {
  width: 100%;
  max-width: 320px;
  justify-content: center;
  text-align: center;
}

.cta-group .more-info-btn {
  border-bottom: none;
  letter-spacing: var(--tk-tracking-normal);
}

.results-auth-actions {
  margin-top: var(--tk-space-4);
  padding-top: var(--tk-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: var(--tk-space-3);
  justify-items: center;
}

.results-save-note {
  margin: 0;
  color: var(--tk-ink-300);
  font-size: var(--tk-font-size-sm);
  text-align: center;
}

.results-save-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-3);
  justify-content: center;
}

.results-save-actions .tk-button,
.results-save-actions .more-info-btn,
.mirror-link-actions .tk-button {
  min-width: 200px;
  justify-content: center;
}

.results-link-list {
  display: grid;
  gap: var(--tk-space-2);
  margin-top: var(--tk-space-4);
}

.results-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tk-space-3) var(--tk-space-4);
  border-radius: var(--tk-radius-sm);
  background: var(--tk-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--tk-ink-100);
  text-decoration: none;
  font-size: var(--tk-font-size-sm);
  letter-spacing: var(--tk-tracking-normal);
  transition:
    border-color var(--tk-duration-fast) var(--tk-ease-out),
    box-shadow var(--tk-duration-fast) var(--tk-ease-out),
    transform var(--tk-duration-fast) var(--tk-ease-out);
}

.results-link:hover {
  border-color: rgba(var(--electric-pink-rgb), 0.45);
  box-shadow: 0 0 16px rgba(var(--electric-pink-rgb), 0.18);
  transform: translateY(-1px);
}

.results-link:focus-visible {
  outline: 2px solid var(--tk-gold-400);
  outline-offset: 2px;
}

.share-section.tk-surface-frost {
  background: var(--tk-frosted-bg);
  border: var(--tk-frosted-border);
}

.share-helper {
  color: var(--tk-ink-300);
}

.share-helper-secondary {
  color: var(--tk-ink-500);
}

@media (min-width: 720px) {
  .results-link-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .results-save-actions .tk-button,
  .results-save-actions .more-info-btn,
  .mirror-link-actions .tk-button {
    min-width: 100%;
  }
}

/* Save / unlock CTA that sits over the blur */
.results-save-cta,
.results-unlock-cta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tk-space-4);
  padding: var(--tk-space-7) var(--tk-space-5);
  text-align: center;
}

.results-save-cta h3 {
  font-family: var(--tk-font-display);
  font-size: var(--tk-fluid-xl);
  color: var(--tk-ink-100);
  letter-spacing: var(--tk-tracking-tight);
  line-height: var(--tk-leading-tight);
  margin: 0;
}

.results-save-cta p {
  font-size: var(--tk-fluid-sm);
  color: var(--tk-ink-500);
  max-width: 40ch;
  line-height: var(--tk-leading-normal);
  margin: 0;
}

/* The primary unlock/save button — electric pink, prominent */
.results-save-cta .tk-btn--primary,
.results-save-cta .btn-primary,
.results-save-cta .cta-button {
  background: var(--electric-pink);
  color: #fff;
  font-size: var(--tk-font-size-md);
  padding: var(--tk-space-4) var(--tk-space-8);
  box-shadow: var(--tk-glow-pink);
  border-radius: var(--tk-radius-sm);
  border: none;
  cursor: pointer;
  font-weight: var(--tk-weight-semibold);
  letter-spacing: var(--tk-tracking-wide);
  transition:
    background var(--tk-duration-fast) var(--tk-ease-out),
    box-shadow  var(--tk-duration-fast) var(--tk-ease-out),
    transform   var(--tk-duration-fast) var(--tk-ease-out);
}

.results-save-cta .tk-btn--primary:hover,
.results-save-cta .btn-primary:hover,
.results-save-cta .cta-button:hover {
  background: hsl(335, 100%, 55%);
  box-shadow: var(--tk-glow-pink), 0 4px 20px rgba(var(--electric-pink-rgb), 0.35);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .results-save-cta .tk-btn--primary,
  .results-save-cta .btn-primary,
  .results-save-cta .cta-button { transition: background var(--tk-duration-fast); }

  .results-save-cta .tk-btn--primary:hover,
  .results-save-cta .btn-primary:hover,
  .results-save-cta .cta-button:hover { transform: none; }
}

/* ================================================================
   COMPATIBILITY MIRROR — PAIR REPORT  (DES-CX-006)
   Teal = Synergy Zone (shared language/overlap)
   Lavender = Growth Frontier (divergence/exploration)
   ================================================================ */
/* --muted-teal and --muted-teal-rgb are defined in style.css :root */

.cohesion-report {
  max-width: var(--tk-max-w-content);
  margin: 0 auto;
  padding: var(--tk-space-6) var(--tk-space-5);
}

.cohesion-hero {
  text-align: center;
  padding: var(--tk-space-9) var(--tk-space-5);
}

.cohesion-shell {
  max-width: 680px;
  margin: 0 auto;
}

.cohesion-subhead {
  font-family: var(--tk-font-body);
  font-size: var(--tk-fluid-lg);
  color: var(--tk-ink-300);
  line-height: var(--tk-leading-normal);
  margin-bottom: var(--tk-space-4);
}

.cohesion-intro {
  font-size: var(--tk-fluid-sm);
  color: var(--tk-ink-500);
  line-height: var(--tk-leading-relaxed);
  margin-bottom: var(--tk-space-4);
}

.cohesion-note {
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  color: var(--tk-mute-700);
  letter-spacing: var(--tk-tracking-wide);
  border-left: 2px solid rgba(var(--muted-teal-rgb), 0.30);
  padding-left: var(--tk-space-4);
}

/* ── Compatibility meter ─────────────────────────────────────── */
.cohesion-section {
  padding: var(--tk-space-7) var(--tk-space-5);
}

.cohesion-meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tk-space-4);
  margin-bottom: var(--tk-space-7);
}

.cohesion-meter-track {
  display: flex;
  width: 100%;
  max-width: 480px;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--tk-elev-2);
}

.cohesion-meter-segment--synergy {
  flex: var(--cohesion-synergy, 1);
  background: var(--muted-teal);
  box-shadow: 0 0 8px rgba(var(--muted-teal-rgb), 0.5);
  transition: flex var(--tk-duration-slow) var(--tk-ease-out);
}

.cohesion-meter-segment--growth {
  flex: var(--cohesion-growth, 1);
  background: var(--muted-lavender);
  box-shadow: 0 0 8px rgba(120, 100, 180, 0.4);
  transition: flex var(--tk-duration-slow) var(--tk-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .cohesion-meter-segment--synergy,
  .cohesion-meter-segment--growth { transition: none; }
}

.cohesion-meter-label {
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  letter-spacing: var(--tk-tracking-wide);
  color: var(--tk-ink-500);
}

/* ── Visual grid: Synergy (teal) | Growth (lavender) ─────────── */
.cohesion-visual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tk-space-5);
}

@media (max-width: 600px) {
  .cohesion-visual-grid {
    grid-template-columns: 1fr;
  }
}

.cohesion-zone {
  padding: var(--tk-space-5);
  border-radius: var(--tk-radius-md);
  border: 1px solid transparent;
}

.cohesion-synergy {
  background: rgba(var(--muted-teal-rgb), 0.06);
  border-color: rgba(var(--muted-teal-rgb), 0.20);
}

.cohesion-synergy h3,
.cohesion-synergy .cohesion-zone-heading {
  color: var(--muted-teal);
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  letter-spacing: var(--tk-tracking-widest);
  text-transform: uppercase;
  margin-bottom: var(--tk-space-4);
}

.cohesion-divergence {
  background: rgba(130, 110, 195, 0.06);
  border-color: rgba(130, 110, 195, 0.20);
}

.cohesion-divergence h3,
.cohesion-divergence .cohesion-zone-heading {
  color: var(--muted-lavender);
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  letter-spacing: var(--tk-tracking-widest);
  text-transform: uppercase;
  margin-bottom: var(--tk-space-4);
}

/* Cohesion list items (shared language / growth topics) */
.cohesion-list-item {
  padding: var(--tk-space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  list-style: none;
}

.cohesion-list-item:last-child { border-bottom: none; }

.cohesion-item-title {
  font-family: var(--tk-font-body);
  font-size: var(--tk-font-size-sm);
  font-weight: var(--tk-weight-medium);
  color: var(--tk-ink-100);
  margin-bottom: var(--tk-space-1);
}

.cohesion-item-body {
  font-size: var(--tk-font-size-xs);
  color: var(--tk-ink-500);
  line-height: var(--tk-leading-normal);
}

.cohesion-empty {
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  color: var(--tk-mute-700);
  font-style: normal;
  padding: var(--tk-space-4) 0;
}

/* ── Full Reveal CTA / pending state ─────────────────────────── */
.cohesion-full-reveal {
  padding: var(--tk-space-7) var(--tk-space-5);
}

.cohesion-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tk-space-3);
}

/* Degrade safely: sparse/pending state shown as a muted note */
.cohesion-zone--pending {
  opacity: 0.55;
  background: var(--tk-elev-1);
  border-color: rgba(255, 255, 255, 0.04);
}