/*
 * TestKinks — Results Profile Page
 *
 * All rp-* component styles for the Archetype Profile results experience.
 * Depends on: style.css tokens, css/foundations.css
 *
 * TICKET-RESULTS-001
 */

/* ================================================================
   PAGE SHELL
   ================================================================ */

.rp-page {
  --rp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rp-duration-reveal: 400ms;

  max-width: var(--tk-max-w-content, 860px);
  margin: 0 auto;
  padding: var(--tk-space-6) var(--tk-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-7);
}

@media (max-width: 600px) {
  .rp-page {
    padding: var(--tk-space-5) var(--tk-space-4);
    gap: var(--tk-space-6);
  }
}

/* ================================================================
   META ROW — Result ID + Quick Exit
   ================================================================ */

.rp-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tk-space-4);
}

.rp-result-id {
  color: var(--tk-mute-700);
  letter-spacing: var(--tk-tracking-wide);
  font-family: var(--tk-font-mono);
}

.rp-result-id #result-id {
  color: var(--precision-silver);
}

.rp-quick-exit {
  color: var(--tk-mute-700);
  text-decoration: none;
  letter-spacing: var(--tk-tracking-wide);
  font-family: var(--tk-font-mono);
  padding: var(--tk-space-1) var(--tk-space-3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--tk-radius-sm);
  transition: color var(--tk-duration-fast), border-color var(--tk-duration-fast);
}

.rp-quick-exit:hover {
  color: var(--tk-ink-300);
  border-color: rgba(255, 255, 255, 0.14);
}

.rp-quick-exit:focus-visible {
  outline: 2px solid var(--electric-pink);
  outline-offset: 2px;
}

/* ================================================================
   HERO — Archetype Profile
   ================================================================ */

.rp-hero {
  text-align: center;
  padding: var(--tk-space-8) var(--tk-space-5);
  animation: rp-fade-up var(--rp-duration-reveal) var(--rp-ease) both;
}

@keyframes rp-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rp-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--tk-tracking-widest, 0.15em);
  color: var(--electric-pink);
  margin-bottom: var(--tk-space-3);
}

.rp-hero__title {
  font-family: var(--tk-font-display);
  color: var(--tk-ink-100);
  margin-bottom: var(--tk-space-4);
}

.rp-hero__sub {
  color: var(--tk-ink-300);
  max-width: 52ch;
  margin: 0 auto var(--tk-space-7);
}

/* ── Identity Card ─────────────────────────────────────────────── */

.rp-identity-card {
  background: var(--tk-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--tk-radius-lg);
  padding: var(--tk-space-7) var(--tk-space-6);
  max-width: 560px;
  margin: 0 auto var(--tk-space-5);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 12px hsla(330, 100%, 55%, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.45);
  animation: rp-fade-up var(--rp-duration-reveal) var(--rp-ease) 80ms both;
}

/* top accent glow bar */
.rp-identity-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 14px rgba(var(--electric-pink-rgb), 0.4);
}

.rp-identity-card__label {
  color: var(--tk-mute-700);
  text-transform: uppercase;
  letter-spacing: var(--tk-tracking-widest, 0.14em);
  margin-bottom: var(--tk-space-3);
}

.rp-identity-card__name {
  font-family: var(--tk-font-display);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--electric-pink);
  text-shadow: 0 0 18px hsla(335, 100%, 60%, 0.45);
  margin-bottom: var(--tk-space-4);
}

.rp-identity-card__score-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--tk-space-2);
}

.rp-identity-card__score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--electric-pink), var(--tk-gold-400));
  border-radius: 4px;
  transition: width 600ms var(--rp-ease);
}

.rp-identity-card__score-label {
  color: var(--tk-mute-700);
  text-align: left;
  margin-bottom: var(--tk-space-5);
}

.rp-identity-card__description {
  color: var(--tk-ink-300);
  line-height: var(--tk-leading-normal, 1.6);
  text-align: left;
  margin-bottom: var(--tk-space-5);
}

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

.rp-identity-card__cta:hover {
  color: hsl(335, 100%, 70%);
  border-color: rgba(var(--electric-pink-rgb), 0.7);
}

.rp-identity-card__cta:focus-visible {
  outline: 2px solid var(--electric-pink);
  outline-offset: 3px;
  border-radius: 2px;
}

.rp-support-note {
  color: var(--tk-mute-700);
  letter-spacing: var(--tk-tracking-wide);
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  margin-top: var(--tk-space-4);
}

/* ================================================================
   WORDING PREFERENCE — glassmorphic card
   ================================================================ */

.rp-wording-card {
  /* tk-surface-frost handles glass bg + blur + border */
  padding: var(--tk-space-5) var(--tk-space-6);
  border-radius: var(--tk-radius-md);
  animation: rp-fade-up var(--rp-duration-reveal) var(--rp-ease) 120ms both;
}

.rp-wording-card__label {
  text-transform: uppercase;
  letter-spacing: var(--tk-tracking-wider, 0.1em);
  color: var(--tk-ink-500);
  margin-bottom: var(--tk-space-1);
}

.rp-wording-card__helper {
  color: var(--tk-ink-500);
  margin-bottom: var(--tk-space-4);
}

.rp-wording-options {
  display: flex;
  gap: var(--tk-space-3);
  flex-wrap: wrap;
}

.rp-wording-option {
  display: inline-flex;
  align-items: center;
  gap: var(--tk-space-2);
  cursor: pointer;
  padding: var(--tk-space-3) var(--tk-space-4);
  border-radius: var(--tk-radius-sm);
  border: 1px solid hsl(260, 10%, 40%);
  background: rgba(255, 255, 255, 0.03);
  transition:
    border-color var(--tk-duration-fast) var(--rp-ease),
    box-shadow   var(--tk-duration-fast) var(--rp-ease);
}

.rp-wording-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.rp-wording-option__ring {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid hsl(260, 10%, 40%);
  flex-shrink: 0;
  transition: border-color var(--tk-duration-fast), box-shadow var(--tk-duration-fast);
}

.rp-wording-option.is-selected,
.rp-wording-option:has(input:checked) {
  border-color: hsl(180, 20%, 50%);
  box-shadow: 0 0 0 4px hsla(180, 20%, 50%, 0.15);
}

.rp-wording-option.is-selected .rp-wording-option__ring,
.rp-wording-option:has(input:checked) .rp-wording-option__ring {
  border-color: hsl(180, 20%, 50%);
  background: hsl(180, 20%, 50%);
  box-shadow: 0 0 6px hsla(180, 20%, 50%, 0.4);
}

.rp-wording-option__text {
  color: var(--tk-ink-300);
  user-select: none;
}

.rp-wording-option:focus-within {
  outline: 2px solid var(--electric-pink);
  outline-offset: 2px;
}

.rp-wording-card__status {
  color: var(--tk-mute-700);
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  min-height: 1.2em;
  margin-top: var(--tk-space-3);
}

/* ================================================================
   HEATMAP — archetype node matrix
   ================================================================ */

.rp-heatmap {
  animation: rp-fade-up var(--rp-duration-reveal) var(--rp-ease) 160ms both;
}

.rp-heatmap__header {
  margin-bottom: var(--tk-space-5);
}

.rp-heatmap__title {
  font-family: var(--tk-font-display);
  color: var(--tk-ink-100);
  margin-bottom: var(--tk-space-2);
}

.rp-heatmap__sub {
  color: var(--tk-ink-500);
}

.rp-heatmap__grid {
  display: grid;
  /* 29 nodes: auto-fill with a minimum that keeps ≥4 columns on desktop */
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--tk-space-3);
}

@media (max-width: 640px) {
  .rp-heatmap__grid {
    /* 3-column compact layout on mobile */
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tk-space-2);
  }
}

/* ── Node ────────────────────────────────────────────────────── */

.rp-node {
  position: relative;
  background: var(--tk-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.04);
  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);
  cursor: default;
  transition:
    border-color var(--tk-duration-fast) var(--rp-ease),
    box-shadow   var(--tk-duration-fast) var(--rp-ease),
    transform    var(--tk-duration-fast) var(--rp-ease);
  /* score-driven glow */
  border-color: rgba(var(--electric-pink-rgb), calc(var(--archetype-score, 0) * 0.45));
  box-shadow: 0 0 calc(var(--archetype-score, 0) * 20px)
    rgba(var(--electric-pink-rgb), calc(var(--archetype-score, 0) * 0.25));
}

/* bottom score bar */
.rp-node::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: calc(var(--archetype-score, 0) * 100%);
  background: var(--electric-pink);
  border-radius: 0 0 var(--tk-radius-sm) var(--tk-radius-sm);
  opacity: 0.7;
  transition: width 600ms var(--rp-ease);
}

/* Intensity class overrides — applied on top of score-driven CSS custom property */
.rp-node--high {
  background: rgba(var(--electric-pink-rgb), 0.04);
}

.rp-node--mid {
  background: rgba(120, 100, 180, 0.03);
}

/* Dormant/zero-score nodes: dark slate, no glow, name and dash muted */
.rp-node--low {
  background: var(--tk-elev-1);
  opacity: 0.55;
}

.rp-node--low .rp-node__name {
  color: var(--tk-mute-700);
  font-weight: 400;
}

.rp-node__name {
  font-family: var(--tk-font-body);
  color: var(--tk-ink-100);
  font-weight: 500;
  line-height: 1.25;
}

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

/* Dormant score dash — muted, no pink */
.rp-node__score--dormant {
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  letter-spacing: var(--tk-tracking-wide);
  color: var(--tk-mute-700);
}

/* Legend row below heatmap */
.rp-heatmap__legend {
  display: flex;
  gap: var(--tk-space-5);
  margin-top: var(--tk-space-4);
  flex-wrap: wrap;
}

.rp-heatmap__legend-item {
  display: flex;
  align-items: center;
  gap: var(--tk-space-2);
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  color: var(--tk-mute-700);
  letter-spacing: var(--tk-tracking-wide);
}

.rp-heatmap__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rp-heatmap__legend-dot--high   { background: var(--electric-pink); }
.rp-heatmap__legend-dot--mid    { background: var(--muted-lavender); }
.rp-heatmap__legend-dot--low    { background: var(--tk-mute-700); }

/* Tooltip */
.rp-node__tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 220px;
  background: var(--tk-elev-3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--tk-radius-md);
  padding: var(--tk-space-3) var(--tk-space-4);
  flex-direction: column;
  gap: var(--tk-space-1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.rp-node:hover .rp-node__tooltip,
.rp-node:focus .rp-node__tooltip,
.rp-node:focus-visible .rp-node__tooltip {
  display: flex;
}

.rp-node__tooltip-name {
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  color: var(--tk-ink-100);
  letter-spacing: var(--tk-tracking-wide);
}

.rp-node__tooltip-score {
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  color: var(--electric-pink);
  margin-bottom: var(--tk-space-1);
}

.rp-node__tooltip-desc {
  font-family: var(--tk-font-body);
  font-size: var(--tk-font-size-xs);
  color: var(--tk-ink-500);
  line-height: 1.45;
}

.rp-node:hover,
.rp-node:focus {
  transform: translateY(-2px);
  outline: none;
}

.rp-node:focus-visible {
  outline: 2px solid var(--electric-pink);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .rp-node {
    padding: var(--tk-space-2) var(--tk-space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rp-node,
  .rp-node::after {
    transition: none;
  }
  .rp-node:hover { transform: none; }
}

/* ================================================================
   INTERPRETATION LAYER — insight blocks
   ================================================================ */

.rp-interpretation {
  animation: rp-fade-up var(--rp-duration-reveal) var(--rp-ease) 200ms both;
}

.rp-interp-eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--tk-tracking-widest, 0.14em);
  margin-bottom: var(--tk-space-3);
}

.rp-interpretation__title {
  font-family: var(--tk-font-display);
  color: var(--tk-ink-100);
  margin-bottom: var(--tk-space-3);
}

.rp-interpretation__sub {
  color: var(--tk-ink-300);
  max-width: 60ch;
  line-height: var(--tk-leading-normal, 1.6);
  margin-bottom: var(--tk-space-7);
}

/* ── Insight grid ─────────────────────────────────────────────── */

.rp-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tk-space-4);
}

@media (max-width: 640px) {
  .rp-insight-grid {
    grid-template-columns: 1fr;
  }
}

.rp-insight-card {
  background: var(--tk-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--tk-radius-md);
  padding: var(--tk-space-5) var(--tk-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-3);
  animation: rp-fade-up var(--rp-duration-reveal) var(--rp-ease) both;
}

.rp-insight-card--limits {
  border-color: rgba(var(--electric-pink-rgb), 0.15);
  background: rgba(var(--electric-pink-rgb), 0.03);
}

.rp-insight-card--wide {
  grid-column: 1 / -1;
}

.rp-insight-card__label {
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  color: var(--tk-mute-700);
  text-transform: uppercase;
  letter-spacing: var(--tk-tracking-wide);
}

.rp-insight-card__body {
  color: var(--tk-ink-300);
  line-height: var(--tk-leading-normal, 1.6);
  font-size: var(--tk-font-size-md);
}

/* ── Limits disclaimer ────────────────────────────────────────── */

.rp-interpretation__limits {
  margin-top: var(--tk-space-6);
  padding: var(--tk-space-5);
  border-radius: var(--tk-radius-md);
  background: var(--tk-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.rp-interp-limits-label {
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  color: var(--tk-mute-700);
  text-transform: uppercase;
  letter-spacing: var(--tk-tracking-wide);
  margin-bottom: var(--tk-space-3);
}

.rp-limits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-2);
}

.rp-limits-list li {
  padding-left: var(--tk-space-4);
  position: relative;
  color: var(--tk-ink-500);
}

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

/* ================================================================
   COUPLES BRIDGE — Mirror Link card
   ================================================================ */

.rp-mirror-bridge {
  background: var(--tk-elev-1);
  border: 1px solid rgba(var(--muted-teal-rgb), 0.2);
  border-radius: var(--tk-radius-lg);
  padding: var(--tk-space-7) var(--tk-space-6);
  box-shadow: 0 0 20px rgba(var(--muted-teal-rgb), 0.08);
  animation: rp-fade-up var(--rp-duration-reveal) var(--rp-ease) 240ms both;
}

.rp-mirror-bridge__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--tk-space-7);
  align-items: start;
}

@media (max-width: 680px) {
  .rp-mirror-bridge__inner {
    grid-template-columns: 1fr;
  }
}

.rp-mirror-bridge__eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--tk-tracking-widest, 0.14em);
  margin-bottom: var(--tk-space-3);
}

.rp-mirror-bridge__title {
  font-family: var(--tk-font-display);
  color: var(--tk-ink-100);
  margin-bottom: var(--tk-space-4);
}

.rp-mirror-bridge__body {
  color: var(--tk-ink-300);
  line-height: var(--tk-leading-normal, 1.6);
  margin-bottom: var(--tk-space-5);
}

.rp-mirror-bridge__body strong {
  color: var(--muted-teal);
  font-weight: 600;
}

.rp-mirror-bridge__props {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-2);
}

.rp-mirror-bridge__props li {
  padding-left: var(--tk-space-4);
  position: relative;
  color: var(--tk-ink-500);
}

.rp-mirror-bridge__props li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--muted-teal);
  font-size: var(--tk-font-size-xs);
}

.rp-mirror-bridge__action {
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-4);
  min-width: 220px;
}

@media (max-width: 680px) {
  .rp-mirror-bridge__action {
    min-width: 0;
    width: 100%;
  }
}

.rp-mirror-actions {
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-3);
}

.rp-mirror-generated {
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-3);
  margin-top: var(--tk-space-3);
}

.rp-mirror-code-note {
  font-family: var(--tk-font-mono);
  color: var(--tk-mute-700);
  font-size: var(--tk-font-size-xs);
}

.rp-mirror-copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-2);
}

.rp-mirror-account-wall {
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-4);
}

.rp-mirror-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-3);
}

.rp-mirror-privacy {
  font-family: var(--tk-font-mono);
  color: var(--tk-mute-700);
  font-size: var(--tk-font-size-xs);
}

/* ================================================================
   ADVANCED ANALYSIS — staged reveal wall
   ================================================================ */

.rp-advanced {
  animation: rp-fade-up var(--rp-duration-reveal) var(--rp-ease) 280ms both;
}

.rp-advanced__header {
  margin-bottom: var(--tk-space-5);
}

.rp-advanced__title {
  font-family: var(--tk-font-display);
  color: var(--tk-ink-100);
  margin-bottom: var(--tk-space-2);
}

.rp-advanced__sub {
  color: var(--tk-ink-500);
}

.rp-advanced__body {
  background: var(--tk-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--tk-radius-md);
  padding: var(--tk-space-5);
}

.rp-advanced__toggle {
  display: flex;
  align-items: center;
  gap: var(--tk-space-2);
  background: transparent;
  border: none;
  color: var(--tk-ink-300);
  cursor: pointer;
  padding: var(--tk-space-3) 0;
  font-family: var(--tk-font-body);
  font-weight: 600;
  letter-spacing: var(--tk-tracking-wide);
  width: 100%;
  text-align: left;
  transition: color var(--tk-duration-fast);
  margin-bottom: var(--tk-space-4);
}

.rp-advanced__toggle:hover {
  color: var(--tk-ink-100);
}

.rp-advanced__toggle:focus-visible {
  outline: 2px solid var(--electric-pink);
  outline-offset: 2px;
  border-radius: var(--tk-radius-xs);
}

/* Archetype grid (reuses existing archetype-item class for JS compat) */
.rp-archetype-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--tk-space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Locked state ─────────────────────────────────────────────── */

.rp-advanced__locked-wrapper {
  position: relative;
}

.rp-archetype-grid--blurred {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
  opacity: 0.6;
}

.rp-unlock-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tk-space-4);
  text-align: center;
  padding: var(--tk-space-6) var(--tk-space-5);
  background: rgba(var(--tk-elev-0, hsl(220 16% 6%)), 0.7);
  /* pseudo-frosted overlay */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--tk-radius-md);
}

.rp-unlock-card__title {
  font-family: var(--tk-font-display);
  color: var(--tk-ink-100);
  margin: 0;
}

.rp-unlock-card__body {
  color: var(--tk-ink-500);
  max-width: 42ch;
  line-height: var(--tk-leading-normal, 1.6);
}

.rp-unlock-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-3);
  justify-content: center;
}

/* ── Safe note ────────────────────────────────────────────────── */

.rp-safe-note {
  margin-top: var(--tk-space-5);
  color: var(--tk-mute-700);
  font-family: var(--tk-font-mono);
  border-left: 2px solid rgba(var(--electric-pink-rgb), 0.2);
  padding-left: var(--tk-space-4);
}

/* ================================================================
   CONTINUATION — what's next
   ================================================================ */

.rp-continuation {
  padding: var(--tk-space-6);
  background: var(--tk-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--tk-radius-md);
}

.rp-continuation__title {
  font-family: var(--tk-font-display);
  color: var(--tk-ink-100);
  margin-bottom: var(--tk-space-5);
}

.rp-continuation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-3);
  align-items: center;
  margin-bottom: var(--tk-space-4);
}

.rp-continuation__auth {
  margin-top: var(--tk-space-4);
  padding-top: var(--tk-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-3);
}

.rp-continuation__auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-3);
}

/* ================================================================
   SHARING SECTION
   ================================================================ */

.rp-sharing {
  padding: var(--tk-space-6);
}

.rp-sharing__title {
  font-family: var(--tk-font-display);
  color: var(--tk-ink-100);
  margin-bottom: var(--tk-space-4);
}

.rp-sharing__status {
  margin-bottom: var(--tk-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-2);
}

.rp-sharing__badge {
  display: inline-block;
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  letter-spacing: var(--tk-tracking-wide);
  color: var(--precision-silver);
  background: var(--tk-elev-2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--tk-radius-xs);
  padding: 2px 8px;
}

.rp-sharing__note {
  color: var(--tk-ink-500);
  font-size: var(--tk-font-size-sm);
}

.rp-sharing__link-row {
  margin-bottom: var(--tk-space-4);
}

.rp-sharing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-3);
}

/* ================================================================
   SHARED INPUT STYLE
   ================================================================ */

.rp-link-input {
  width: 100%;
  background: var(--tk-elev-1);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--tk-radius-sm);
  color: var(--tk-ink-300);
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-sm);
  padding: var(--tk-space-3) var(--tk-space-4);
  transition: border-color var(--tk-duration-fast);
}

.rp-link-input:focus {
  outline: none;
  border-color: rgba(var(--electric-pink-rgb), 0.45);
  box-shadow: 0 0 0 3px rgba(var(--electric-pink-rgb), 0.12);
}

.rp-link-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ================================================================
   STATUS NOTE
   ================================================================ */

.rp-status-note {
  color: var(--tk-mute-700);
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  letter-spacing: var(--tk-tracking-wide);
  min-height: 1em;
}

/* ================================================================
   BUTTON VARIANTS — rp-specific overrides
   ================================================================ */

/* Primary — electric pink fill */
.rp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tk-space-2);
  background: var(--electric-pink);
  color: #fff;
  font-family: var(--tk-font-body);
  font-weight: 600;
  font-size: var(--tk-font-size-sm);
  letter-spacing: var(--tk-tracking-wide);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--tk-radius-sm);
  padding: var(--tk-space-3) var(--tk-space-6);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(var(--electric-pink-rgb), 0.3);
  transition:
    background  var(--tk-duration-fast) var(--rp-ease),
    box-shadow  var(--tk-duration-fast) var(--rp-ease),
    transform   var(--tk-duration-fast) var(--rp-ease);
}

.rp-btn-primary:hover {
  background: hsl(335, 100%, 55%);
  box-shadow: 0 0 22px rgba(var(--electric-pink-rgb), 0.45),
              0 4px 16px rgba(var(--electric-pink-rgb), 0.25);
  transform: translateY(-1px);
}

.rp-btn-primary:active {
  background: hsl(335, 100%, 50%);
  transform: scale(0.98);
}

.rp-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--electric-pink-rgb), 0.45);
}

/* Teal secondary — for unlock CTA */
.rp-btn-teal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tk-space-2);
  background: transparent;
  color: var(--muted-teal);
  font-family: var(--tk-font-body);
  font-weight: 600;
  font-size: var(--tk-font-size-sm);
  letter-spacing: var(--tk-tracking-wide);
  text-decoration: none;
  border: 1.5px solid rgba(var(--muted-teal-rgb), 0.4);
  border-radius: var(--tk-radius-sm);
  padding: var(--tk-space-3) var(--tk-space-6);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background  var(--tk-duration-fast) var(--rp-ease),
    border-color var(--tk-duration-fast) var(--rp-ease);
}

.rp-btn-teal:hover {
  background: rgba(var(--muted-teal-rgb), 0.08);
  border-color: rgba(var(--muted-teal-rgb), 0.7);
}

.rp-btn-teal:focus-visible {
  outline: 2px solid var(--muted-teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rp-btn-primary,
  .rp-btn-teal {
    transition: background var(--tk-duration-fast), border-color var(--tk-duration-fast);
  }
  .rp-btn-primary:hover,
  .rp-btn-primary:active { transform: none; }
}

/* ================================================================
   FOOTER LINKS
   ================================================================ */

.rp-footer-links {
  padding: var(--tk-space-6);
  background: var(--tk-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--tk-radius-md);
}

.rp-footer-links__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tk-space-6);
  margin-bottom: var(--tk-space-6);
}

@media (max-width: 560px) {
  .rp-footer-links__grid {
    grid-template-columns: 1fr;
    gap: var(--tk-space-5);
  }
}

.rp-footer-links__group {
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-2);
}

.rp-footer-links__group-label {
  font-family: var(--tk-font-mono);
  font-size: var(--tk-font-size-xs);
  color: var(--tk-mute-700);
  text-transform: uppercase;
  letter-spacing: var(--tk-tracking-wide);
  margin-bottom: var(--tk-space-1);
}

.rp-footer-link {
  color: var(--tk-ink-500);
  text-decoration: none;
  font-size: var(--tk-font-size-sm);
  transition: color var(--tk-duration-fast);
}

.rp-footer-link:hover {
  color: var(--tk-ink-100);
}

.rp-footer-link:focus-visible {
  outline: 2px solid var(--electric-pink);
  outline-offset: 2px;
  border-radius: 2px;
}

.rp-sovereignty {
  font-family: var(--tk-font-mono);
  color: var(--tk-mute-700);
  font-size: var(--tk-font-size-xs);
  letter-spacing: var(--tk-tracking-wide);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: var(--tk-space-4);
}

/* ================================================================
   EMPTY STATE
   ================================================================ */

.rp-empty {
  padding: var(--tk-space-9) var(--tk-space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tk-space-5);
}

/* ================================================================
   ERROR NOTICE
   ================================================================ */

.rp-error-notice {
  padding: var(--tk-space-4) var(--tk-space-5);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--tk-radius-sm);
  color: var(--tk-amber-400, hsl(42, 100%, 62%));
  font-family: var(--tk-font-body);
  font-size: var(--tk-font-size-sm);
}

/* ================================================================
   WORDING REGION FADE — JS applies .rp-wording-fading during swap
   ================================================================ */

[data-wording-region] {
  transition: opacity var(--rp-duration-reveal) var(--rp-ease);
}

[data-wording-region].rp-wording-fading {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-wording-region] { transition: none; }
  [data-wording-region].rp-wording-fading { opacity: 1; }
}