/* build:1105e80 */
/* pf-feature.css — shared styles for pf-feature-* public showcase pages.
   Extends manifesto.css + how-it-works.css. No inline styles. All color tokens from theme.css. */

/* ── Story intro section ─────────────────────────────────────── */
.pf-feat-story {
  padding-top: clamp(32px, 5vh, 60px);
  padding-bottom: clamp(32px, 5vh, 60px);
}
.pf-feat-story .body {
  text-align: left;
  max-width: 680px;
  margin: 0 auto;
}
.pf-feat-story .body p {
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.8;
  color: var(--color-text-dim);
  margin-bottom: 22px;
  font-family: var(--font-display, Arial, sans-serif);
  font-weight: 300;
}
.pf-feat-story .body p:last-child { margin-bottom: 0; }

/* Emotional anchor line */
.pf-feat-anchor {
  font-family: var(--font-display, 'Arial Black', Arial, sans-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  color: var(--color-text) !important;
  line-height: 1.45 !important;
  border-left: 3px solid var(--color-accent-g);
  padding-left: 20px;
  margin-top: 32px !important;
}
.pf-feat-anchor em {
  color: var(--color-accent-g);
  font-style: italic;
}

/* ── 3-column grid variant ───────────────────────────────────── */
.pf-feat-grid-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 800px) {
  .pf-feat-grid-3 { grid-template-columns: 1fr !important; }
}

/* ── Gold card full-width ────────────────────────────────────── */
.pf-feat-gold-full {
  grid-column: 1 / -1;
  margin-top: 2px;
}

/* ── Feature links inside hiw-feat-item ─────────────────────── */
.pf-feat-link {
  color: var(--color-accent-c);
  text-decoration: none;
  font-weight: 700;
}
.pf-feat-link:hover {
  text-decoration: underline;
  color: var(--color-accent-g);
}

/* ── B2B block (variant-aware, hidden by default) ────────────── */
.pf-b2b {
  background: var(--color-surface);
  border-top: 2px solid var(--color-accent-c);
  border-bottom: 1px solid var(--color-border);
  padding: clamp(40px, 6vh, 72px) 40px;
}
.pf-b2b.hidden { display: none; }
.pf-b2b-inner {
  max-width: 680px;
  margin: 0 auto;
}
.pf-b2b-label {
  font-family: var(--font-mono, Arial, sans-serif);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--color-accent-c);
  margin-bottom: 16px;
  font-weight: 700;
}
.pf-b2b-body {
  font-family: var(--font-display, Arial, sans-serif);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.75;
  color: var(--color-text-dim);
  margin-bottom: 28px;
  font-weight: 300;
}
.pf-b2b-cta {
  display: inline-block;
}

/* ── CTA sub-line spacing ────────────────────────────────────── */
.pf-feat-cta-sub {
  margin-top: 16px;
}

/* ── Viz panel wrapper ───────────────────────────────────────── */
.pf-viz-panel {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px) clamp(24px, 4vh, 48px);
}

/* ── Globe ───────────────────────────────────────────────────── */
.pf-globe-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px) clamp(24px, 4vh, 48px);
}
.pf-globe-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--font-mono, Arial, sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-dim);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pf-globe-stats strong { color: var(--color-accent-c); }
.pf-globe-stat-sep { color: var(--color-border); }
.pf-globe-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  position: relative;
  min-height: 460px;
}
.pf-globe-frame { width: 100%; height: 460px; border: none; display: block; }
.pf-globe-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-dim);
  font-style: italic;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--color-surface);
  border-radius: 6px;
  border-left: 2px solid var(--color-border);
  line-height: 1.5;
}

/* ── Ripple demo ─────────────────────────────────────────────── */
.pf-ripple-demo {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 40px);
  max-width: 760px;
  margin: 0 auto clamp(16px, 3vh, 32px);
}
.pf-ripple-center {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.pf-ripple-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Arial Black', Arial, sans-serif);
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
  color: #000;
}
.pf-avatar-elena { background: #00AAFF; }
.pf-avatar-raj   { background: #00CC44; }
.pf-avatar-david { background: #FFB300; }
.pf-avatar-priya { background: #9B59B6; color: #fff; }
.pf-avatar-leila { background: #FF8C42; }
.pf-avatar-sam   { background: #1ABC9C; }
.pf-ripple-post { flex: 1; }
.pf-ripple-post-author {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono, Arial, sans-serif);
  color: var(--color-accent-c);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.pf-ripple-post-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 8px;
}
.pf-ripple-post-meta { font-size: 13px; font-weight: 600; color: var(--color-text-dim); font-family: var(--font-mono, Arial, sans-serif); }
.pf-ripple-rings { display: flex; flex-direction: column; gap: 24px; }
.pf-ripple-ring-label {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono, Arial, sans-serif);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-dim);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.pf-ring-1 .pf-ripple-ring-label { color: var(--color-accent-c); border-color: rgba(0,170,255,0.2); }
.pf-ring-2 .pf-ripple-ring-label { color: var(--color-accent-g); border-color: rgba(0,204,68,0.2); }
.pf-ripple-nodes { display: flex; flex-wrap: wrap; gap: 12px; }
.pf-ripple-node {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 180px;
}
.pf-ripple-node-info { font-size: 14px; font-weight: 600; color: var(--color-text-dim); line-height: 1.5; }
.pf-ripple-node-info strong { color: var(--color-text); display: block; margin-bottom: 2px; }
.pf-ripple-action { font-size: 13px; font-weight: 700; color: var(--color-accent-c); margin-top: 2px; }
.pf-ripple-summary {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-display, Arial, sans-serif);
  font-weight: 300;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.7;
  color: var(--color-text-dim);
  font-style: italic;
  text-align: center;
}

/* ── Story Web + Energy Tree svg containers ───────────────────── */
.pf-sw-box { min-height: 520px; }
.pf-sw-svg { width: 100%; height: 520px; display: block; }

/* ── Map pins ────────────────────────────────────────────────── */
.pf-map-box { min-height: 440px; }
#pf-map { width: 100%; height: 440px; }
.pf-pin-feed {
  max-width: 760px;
  margin: 0 auto clamp(24px, 4vh, 48px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 clamp(16px, 3vw, 40px);
}
.pf-pin-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
}
.pf-pin-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.pf-pin-location { font-weight: 700; font-size: 15px; color: var(--color-text); margin-bottom: 3px; }
.pf-pin-author { font-size: 13px; color: var(--color-accent-c); font-family: var(--font-mono, Arial, sans-serif); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.pf-pin-comment { font-size: 14px; color: var(--color-text-dim); line-height: 1.55; }
.pf-pin-tag { font-size: 13px; font-weight: 700; color: var(--color-accent-g); margin-top: 6px; }

/* ── Feature section flush (no top margin after viz panels) ──── */
.pf-feat-features-flush {
  margin-top: 0;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pf-ripple-nodes { flex-direction: column; }
  .pf-ripple-node { min-width: unset; width: 100%; }
  .pf-globe-frame { height: 320px; }
  .pf-globe-container { min-height: 320px; }
}

/* ── Chronicle article ───────────────────────────────────────── */
.pf-chronicle {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 6vh, 72px) clamp(20px, 4vw, 48px);
}

.pf-chr-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 48px;
}
.pf-chr-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent-c);
  color: #000;
  font-family: var(--font-display, 'Arial Black', Arial, sans-serif);
  font-weight: 900;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pf-chr-name {
  font-family: var(--font-display, 'Arial Black', Arial, sans-serif);
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 26px);
  color: var(--color-text);
  margin: 0 0 4px;
}
.pf-chr-dates {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-dim);
  margin-bottom: 6px;
}
.pf-chr-badge {
  display: inline-block;
  font-size: 13px;
  font-family: var(--font-mono, Arial, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-g);
  background: transparent;
  border: 1px solid var(--color-accent-g);
  border-radius: 20px;
  padding: 2px 10px;
}

.pf-chr-chapter {
  margin-bottom: 48px;
}
.pf-chr-chapter-title {
  font-family: var(--font-mono, Arial, sans-serif);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--color-accent-c);
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.pf-chr-chapter p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.85;
  color: var(--color-text-dim);
  margin-bottom: 18px;
}
.pf-chr-chapter p:last-child { margin-bottom: 0; }

.pf-chr-quote {
  border-left: 3px solid var(--color-accent-g);
  margin: 28px 0;
  padding: 4px 0 4px 20px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--color-text);
  line-height: 1.65;
}

.pf-chr-footer {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  margin-top: 16px;
}
.pf-chr-footer-line {
  font-family: var(--font-mono, Arial, sans-serif);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-dim);
  margin-bottom: 8px;
}
.pf-chr-footer-note {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-dim);
  line-height: 1.5;
}

/* ── Ripple radial visualization ── */
.pf-ripple-viz-panel { padding: 0; background: transparent; border: none; box-shadow: none; }
.pf-ripple-radial { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 0 8px; }
.pf-ripple-svg { width: 100%; max-width: 560px; height: auto; }

/* ── Globe canvas wrap ── */
.pf-globe-container { border-radius: 8px; overflow: hidden; background: var(--color-surface); }

/* ── Future Arcs mock recording UI ── */
.pf-arc-mock {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  max-width: 560px;
  margin: 0 auto 32px;
  overflow: hidden;
}
.pf-arc-mock-hdr {
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pf-arc-mock-dot { width: 8px; height: 8px; border-radius: 50%; }
.pf-arc-mock-dot.red   { background: #ff5f57; }
.pf-arc-mock-dot.amber { background: #ffbd2e; }
.pf-arc-mock-dot.green { background: #28ca41; }
.pf-arc-mock-hdr-title { font-size: 13px; font-weight: 700; color: var(--color-text-dim); font-family: var(--font-mono, Arial, sans-serif); letter-spacing: .06em; margin-left: 4px; }
.pf-arc-mock-body { padding: 24px 20px 20px; }
.pf-arc-mock-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-dim);
  margin-bottom: 10px;
  font-family: var(--font-mono, Arial, sans-serif);
}
.pf-arc-mock-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin-bottom: 18px; line-height: 1.4; }
.pf-arc-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 48px;
  margin-bottom: 16px;
  background: var(--color-bg);
  border-radius: 6px;
  padding: 8px 12px;
}
.pf-arc-wave-bar {
  flex: 1;
  border-radius: 2px;
  background: var(--color-accent-c);
  opacity: 0.7;
  transition: height 0.1s ease;
}
.pf-arc-mock-time {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-dim);
  font-family: var(--font-mono, Arial, sans-serif);
  margin-bottom: 20px;
}
.pf-arc-mock-delivery {
  background: var(--color-bg);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.pf-arc-mock-delivery-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.pf-arc-mock-delivery-label { color: var(--color-text-dim); }
.pf-arc-mock-delivery-val { color: var(--color-accent-c); font-weight: 600; }
.pf-arc-mock-delivery-sub {
  font-size: 13px;
  color: var(--color-text-dim);
  margin-top: 6px;
  font-style: italic;
}
.pf-arc-mock-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: rgba(0,170,255,0.08);
  border: 1px solid rgba(0,170,255,0.2);
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-accent-c);
  font-weight: 600;
  cursor: default;
}
.pf-arc-mock-seal-icon { font-size: 1.1rem; }

/* ── vz-* shared classes (used on pf-feature viz panels) ── */
.vz-hdr { margin-bottom: 20px; }
.vz-title {
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(18px, 3vw, 24px);
  color: var(--color-text);
  margin-bottom: 6px;
}
.vz-desc {
  font-size: 14px; font-weight: 600;
  color: var(--color-text-dim);
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 12px;
}
.vz-note {
  font-size: 14px; font-weight: 700;
  color: var(--color-text-dim);
  font-style: italic;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--color-surface);
  border-radius: 6px;
  border-left: 2px solid var(--color-border);
}
.vz-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* ════════════════════════════════════════════
   PODCAST demo page
   ════════════════════════════════════════════ */
.pf-pod-shell {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  max-width: 680px;
  margin: 0 auto;
}
.pf-pod-show-hdr {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}
.pf-pod-cover {
  width: 64px; height: 64px; border-radius: 8px;
  background: var(--color-accent-c);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pf-pod-cover-initials { color: #fff; font-size: 1.3rem; font-family: "Arial Black", Arial, sans-serif; font-weight: 900; }
.pf-pod-show-title { font-family: "Arial Black", Arial, sans-serif; font-weight: 900; font-size: 1.05rem; color: var(--color-text); margin-bottom: 2px; }
.pf-pod-show-sub { font-size: 13px; font-weight: 700; color: var(--color-text-dim); letter-spacing: .05em; margin-bottom: 4px; }
.pf-pod-show-desc { font-size: 14px; color: var(--color-text-dim); line-height: 1.5; }

.pf-pod-player {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.pf-pod-np-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--color-accent-c); margin-bottom: 6px; font-family: var(--font-mono, Arial, sans-serif); }
.pf-pod-np-title { font-family: "Arial Black", Arial, sans-serif; font-weight: 900; font-size: 1rem; color: var(--color-text); line-height: 1.3; margin-bottom: 4px; }
.pf-pod-np-host { font-size: 13px; font-weight: 600; color: var(--color-text-dim); margin-bottom: 14px; }
.pf-pod-waveform { display: flex; align-items: center; gap: 2px; height: 44px; margin-bottom: 10px; }
.pf-pod-wave-bar { flex: 1; border-radius: 2px; background: var(--color-accent-c); opacity: 0.75; min-width: 2px; }
.pf-pod-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pf-pod-time { font-size: 13px; font-family: var(--font-mono, Arial, sans-serif); color: var(--color-text-dim); white-space: nowrap; }
.pf-pod-progress-wrap { flex: 1; }
.pf-pod-progress-bar { height: 3px; background: var(--color-border); border-radius: 2px; overflow: hidden; cursor: pointer; }
.pf-pod-progress-fill { height: 100%; background: var(--color-accent-c); border-radius: 2px; }
.pf-pod-btn-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
.pf-pod-btn { font-size: 14px; color: var(--color-text-dim); cursor: pointer; padding: 6px 12px; border-radius: 20px; transition: background .15s, color .15s; }
.pf-pod-btn:hover { background: var(--color-surface); color: var(--color-text); }
.pf-pod-btn-play { background: var(--color-accent-c); color: #fff; font-size: 1rem; padding: 8px 18px; }
.pf-pod-btn-play:hover { background: var(--color-accent-c); opacity: .85; color: #fff; }

.pf-pod-ep-list { padding: 8px 0; }
.pf-pod-ep {
  display: flex; gap: 14px; padding: 14px 24px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer; transition: background .12s;
}
.pf-pod-ep:last-child { border-bottom: none; }
.pf-pod-ep:hover { background: var(--color-surface2, var(--color-bg)); }
.pf-pod-ep-active { background: color-mix(in srgb, var(--color-accent-c) 6%, transparent); }
.pf-pod-ep-active .pf-pod-ep-title { color: var(--color-accent-c); }
.pf-pod-ep-num { font-size: 13px; font-weight: 700; font-family: var(--font-mono, Arial, sans-serif); text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-dim); padding-top: 3px; white-space: nowrap; min-width: 36px; }
.pf-pod-ep-title { font-weight: 700; font-size: 15px; color: var(--color-text); margin-bottom: 3px; line-height: 1.3; }
.pf-pod-ep-meta { font-size: 13px; font-weight: 700; color: var(--color-text-dim); margin-bottom: 4px; }
.pf-pod-ep-summary { font-size: 14px; color: var(--color-text-dim); line-height: 1.5; }

/* ════════════════════════════════════════════
   REMINISCE demo page
   ════════════════════════════════════════════ */
.pf-rem-deck { position: relative; min-height: 300px; margin-bottom: 20px; }
.pf-rem-card {
  display: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 32px;
  max-width: 680px;
  margin: 0 auto;
}
.pf-rem-card-active { display: block; }
.pf-rem-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.pf-rem-tag {
  font-size: 14px; font-family: var(--font-mono, Arial, sans-serif);
  text-transform: uppercase; letter-spacing: .1em;
  padding: 5px 14px; border-radius: 12px; font-weight: 700;
  min-height: 28px;
}
.pf-rem-tag-place  { background: rgba(0,170,255,.12); color: var(--color-accent-c); }
.pf-rem-tag-person { background: rgba(0,204,68,.12);  color: var(--color-accent-g); }
.pf-rem-tag-time   { background: rgba(255,179,0,.12); color: #b38000; }
.pf-rem-tag-sub { font-size: 15px; font-weight: 600; color: var(--color-text-dim); }
.pf-rem-question {
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  color: var(--color-text);
  line-height: 1.45;
  margin-bottom: 24px;
}
.pf-rem-answer-area {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 18px;
}
.pf-rem-answer-empty { border-style: dashed; border-color: var(--color-border-strong); }
.pf-rem-answer-text { font-size: 17px; color: var(--color-text); line-height: 1.75; font-style: italic; }
.pf-rem-answer-meta { font-size: 14px; color: var(--color-text-dim); margin-top: 12px; font-family: var(--font-mono, Arial, sans-serif); }
.pf-rem-placeholder { font-size: 16px; color: var(--color-text-dim); text-align: center; padding: 20px 0; }
.pf-rem-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pf-rem-btn {
  font-size: 16px; font-weight: 600; padding: 10px 20px;
  border-radius: 8px; cursor: pointer;
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
}
.pf-rem-btn-voice { border-color: var(--color-accent-c); color: var(--color-accent-c); }
.pf-rem-btn-share { border-color: var(--color-accent-g); color: var(--color-accent-g); }
.pf-rem-btn-text  { border-color: var(--color-border); color: var(--color-text-dim); }

.pf-rem-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; }
.pf-rem-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border); cursor: pointer; transition: background .15s; }
.pf-rem-dot-active { background: var(--color-accent-c); }
.pf-rem-nav-hint { font-size: 15px; color: var(--color-text-dim); margin-left: 8px; }

/* Memory player */
.pf-rem-player {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  max-width: 680px;
  margin: 0 auto;
}
.pf-rem-player-hdr {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.pf-rem-player-title { font-weight: 700; font-size: 1.25rem; color: var(--color-text); }
.pf-rem-player-sub { font-size: 15px; font-weight: 600; color: var(--color-text-dim); margin-top: 5px; }
.pf-rem-timeline { padding: 4px 0; }
.pf-rem-decade { border-bottom: 1px solid var(--color-border); }
.pf-rem-decade:last-child { border-bottom: none; }
.pf-rem-decade-active { background: color-mix(in srgb, var(--color-accent-c) 4%, transparent); }
.pf-rem-decade-label {
  font-size: 15px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  color: var(--color-text-dim); padding: 14px 24px 6px;
  font-family: var(--font-mono, Arial, sans-serif);
}
.pf-rem-decade-items { padding: 0 24px 14px; display: flex; flex-direction: column; gap: 10px; }
.pf-rem-item { display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; }
.pf-rem-item-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.pf-rem-item-playing .pf-rem-item-dot { box-shadow: 0 0 0 4px rgba(0,170,255,.2); }
.pf-rem-item-type { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.pf-rem-item-text { font-size: 17px; color: var(--color-text-dim); line-height: 1.65; font-weight: 500; }

/* ════════════════════════════════════════════
   VOCABULARY demo page
   ════════════════════════════════════════════ */
.pf-vocab-shell {
  max-width: 860px;
  margin: 0 auto;
}
.pf-vocab-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.pf-vocab-tab {
  font-size: 14px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.pf-vocab-tab:hover { border-color: var(--color-accent-c); color: var(--color-accent-c); }
.pf-vocab-tab-active { background: var(--color-accent-c); color: #fff; border-color: var(--color-accent-c); }
.pf-vocab-panel { display: none; }
.pf-vocab-panel-active { display: block; }
.pf-vocab-insight {
  font-size: .9rem;
  font-style: italic;
  color: var(--color-text-dim);
  line-height: 1.65;
  border-left: 3px solid var(--color-accent-c);
  padding: 4px 0 4px 16px;
  margin-bottom: 20px;
  max-width: 640px;
}
.pf-vocab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.pf-vocab-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 18px;
  transition: border-color .12s;
}
.pf-vocab-card:hover { border-color: var(--color-accent-c); }
.pf-vocab-term {
  font-size: 1.5rem;
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
}
.pf-vocab-rom {
  font-size: 13px;
  font-family: var(--font-mono, Arial, sans-serif);
  color: var(--color-accent-c);
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.pf-vocab-rel {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}
.pf-vocab-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-dim);
  line-height: 1.55;
}
.pf-vocab-more-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
}
.pf-vocab-more-chip {
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
}
.pf-vocab-more-note {
  font-size: 14px;
  color: var(--color-text-dim);
  line-height: 1.6;
  max-width: 560px;
  font-style: italic;
}

/* ── Ripple SVG ring animations (extracted from inline SVG style — CSP) ── */
@keyframes rr-pulse {
  0%   { r: 60;  opacity: 0.9; stroke-width: 2; }
  100% { r: 210; opacity: 0;   stroke-width: 1; }
}
@keyframes rr-pulse2 {
  0%   { r: 60;  opacity: 0.7; stroke-width: 2; }
  100% { r: 210; opacity: 0;   stroke-width: 1; }
}
@keyframes rr-pulse3 {
  0%   { r: 60;  opacity: 0.5; stroke-width: 1.5; }
  100% { r: 210; opacity: 0;   stroke-width: 1; }
}
.pf-rr-1 { animation: rr-pulse  3.2s ease-out infinite; stroke: var(--color-accent-c); }
.pf-rr-2 { animation: rr-pulse2 3.2s ease-out 1.0s infinite; stroke: var(--color-accent-c); }
.pf-rr-3 { animation: rr-pulse3 3.2s ease-out 2.0s infinite; stroke: var(--color-accent-c); }

/* ── Energy Tree legend ───────────────────────────────────────── */
.pf-tree-legend {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  padding: 12px 16px; margin-top: 8px;
  background: var(--color-surface);
  border-radius: 8px;
}
.pf-tree-legend-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--color-text-dim);
  font-family: Arial, sans-serif;
}
.pf-tree-legend-swatch {
  width: 24px; height: 4px; border-radius: 2px; flex-shrink: 0;
}

/* ── Photo Gallery demo (pf-feature-photo-gallery) ──────────── */
.pf-pg-filter-bar, .pf-pg-people-bar {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 8px;
}
.pf-pg-filter, .pf-pg-person {
  font-size: 13px; font-weight: 700; padding: 6px 14px;
  border-radius: 20px; cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-dim);
  transition: all .12s;
}
.pf-pg-filter.active, .pf-pg-filter:hover,
.pf-pg-person.active, .pf-pg-person:hover {
  border-color: var(--color-accent-c); color: var(--color-accent-c);
  background: color-mix(in srgb, var(--color-accent-c) 8%, transparent);
}
.pf-pg-stats {
  font-size: 13px; color: var(--color-text-dim); font-weight: 600;
  padding: 4px 0 14px; display: flex; gap: 8px; align-items: center;
}
.pf-pg-stat strong { color: var(--color-text); }
.pf-pg-stat-sep { color: var(--color-border); }
.pf-pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.pf-pg-tile {
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer; transition: box-shadow .15s, transform .1s;
}
.pf-pg-tile:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--tc, var(--color-accent-c)) 20%, transparent);
  transform: translateY(-2px);
}
.pf-pg-tile-img {
  aspect-ratio: 4/3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
}
.pf-pg-tile-icon { font-size: 32px; line-height: 1; }
.pf-pg-tile-year {
  font-size: 11px; font-weight: 700; color: var(--color-text);
  opacity: .4; letter-spacing: .04em;
}
.pf-pg-tile-meta { padding: 8px 10px; }
.pf-pg-tile-label { font-size: 12px; font-weight: 700; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-pg-tile-who { font-size: 11px; color: var(--color-text-dim); font-weight: 600; margin-top: 2px; }
.pf-pg-empty { grid-column: 1/-1; padding: 32px; text-align: center; font-size: 14px; color: var(--color-text-dim); }

/* Lightbox */
.pf-pg-lightbox {
  position: fixed; inset: 0; z-index: 9900;
  display: flex; align-items: center; justify-content: center;
}
.pf-pg-hidden { display: none !important; }
.pf-pg-lightbox-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.75); cursor: pointer;
}
.pf-pg-lightbox-card {
  position: relative; z-index: 1;
  background: var(--color-surface); border-radius: 16px;
  width: min(520px, 94vw); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.pf-pg-lb-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.4); border: none; color: #fff;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pf-pg-lb-img {
  width: 100%; aspect-ratio: 4/3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.pf-pg-lb-big-icon { font-size: 72px; line-height: 1; }
.pf-pg-lb-big-year {
  font-family: 'Arial Black', Arial; font-weight: 900;
  font-size: clamp(28px,5vw,48px); color: var(--color-text);
  opacity: .2; letter-spacing: -.02em;
}
.pf-pg-lb-meta { padding: 16px 20px 8px; }
.pf-pg-lb-who { font-size: 13px; font-weight: 700; color: var(--color-accent-c); margin-bottom: 8px; }
.pf-pg-lb-caption { font-size: 15px; line-height: 1.65; color: var(--color-text); font-style: italic; margin-bottom: 10px; }
.pf-pg-lb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-pg-lb-tag {
  font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: 14px; background: var(--color-bg);
  border: 1px solid var(--color-border); color: var(--color-text-dim);
}
.pf-pg-lb-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; padding: 12px 20px 16px;
  border-top: 1px solid var(--color-border);
}
.pf-pg-lb-btn {
  width: 36px; height: 36px; border-radius: 50%; font-size: 20px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: border-color .12s;
}
.pf-pg-lb-btn:hover { border-color: var(--color-accent-c); color: var(--color-accent-c); }
.pf-pg-lb-pos { font-size: 13px; color: var(--color-text-dim); font-weight: 600; min-width: 48px; text-align: center; }

/* ── Memory Bank demo (pf-feature-memory-bank) ─────────────── */
.pf-mb-type-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 0 20px; justify-content: center;
}
.pf-mb-type-btn {
  font-size: 14px; font-weight: 700; padding: 8px 18px;
  border-radius: 20px; cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-dim);
  transition: all .15s;
}
.pf-mb-type-btn.active,
.pf-mb-type-btn:hover {
  border-color: var(--color-accent-c); color: var(--color-accent-c);
  background: color-mix(in srgb, var(--color-accent-c) 8%, transparent);
}
.pf-mb-stage { max-width: 640px; margin: 0 auto; }
.pf-mb-panel { animation: pf-mb-fade .2s ease; }
.pf-mb-hidden { display: none; }
@keyframes pf-mb-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.pf-mb-entry-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; padding: 20px 22px 16px; margin-bottom: 14px;
}
.pf-mb-entry-hdr {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.pf-mb-entry-icon { font-size: 22px; }
.pf-mb-entry-type {
  font-size: 14px; font-weight: 700; color: var(--color-accent-c);
  text-transform: uppercase; letter-spacing: .06em;
}
.pf-mb-entry-hint { font-size: 13px; color: var(--color-text-dim); font-weight: 500; }
.pf-mb-example-text {
  font-size: 17px; line-height: 1.7; color: var(--color-text);
  font-style: italic; margin-bottom: 14px;
  border-left: 3px solid var(--color-accent-c);
  padding-left: 14px;
}
.pf-mb-meta-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.pf-mb-meta-chip {
  font-size: 13px; font-weight: 600; padding: 5px 12px;
  border-radius: 16px; background: var(--color-bg);
  border: 1px solid var(--color-border); color: var(--color-text-dim);
}
.pf-mb-eco-follow {
  background: color-mix(in srgb, var(--color-accent-g) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent-g) 25%, transparent);
  border-radius: 10px; padding: 12px 14px;
}
.pf-mb-eco-follow-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--color-accent-g); margin-bottom: 5px;
}
.pf-mb-eco-follow-text { font-size: 14px; color: var(--color-text); line-height: 1.55; }

.pf-mb-type-desc {
  font-size: 15px; color: var(--color-text-dim); line-height: 1.65;
  padding: 0 4px 8px;
}
.pf-mb-type-desc strong { color: var(--color-text); }

/* Milestone chips */
.pf-mb-milestone-types { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.pf-mb-ms-chip {
  font-size: 13px; font-weight: 600; padding: 5px 12px;
  border-radius: 16px; border: 1px solid var(--color-border);
  background: var(--color-bg); color: var(--color-text-dim); cursor: pointer;
  transition: all .12s;
}
.pf-mb-ms-chip.active {
  background: var(--color-accent-c); border-color: var(--color-accent-c);
  color: #fff;
}

/* Journey map */
.pf-mb-journey-map {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 14px;
}
.pf-mb-journey-from, .pf-mb-journey-to { display: flex; align-items: center; gap: 10px; flex: 1; }
.pf-mb-journey-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.pf-mb-journey-city { font-size: 14px; font-weight: 700; color: var(--color-text); }
.pf-mb-journey-year { font-size: 12px; color: var(--color-text-dim); font-weight: 600; }
.pf-mb-journey-line { font-size: 20px; color: var(--color-text-dim); flex-shrink: 0; }

/* Link card */
.pf-mb-link-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 10px; padding: 14px; margin-bottom: 14px;
}
.pf-mb-link-thumb {
  width: 56px; height: 56px; border-radius: 8px; background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; flex-shrink: 0; border: 1px solid var(--color-border);
}
.pf-mb-link-source { font-size: 11px; font-weight: 700; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.pf-mb-link-title { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; line-height: 1.4; }
.pf-mb-link-desc { font-size: 13px; color: var(--color-text-dim); line-height: 1.4; }

/* Quest card */
.pf-mb-quest-card {
  background: color-mix(in srgb, var(--color-accent-a, #FFB300) 8%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-accent-a, #FFB300) 30%, transparent);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 12px;
}
.pf-mb-quest-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #b38000; margin-bottom: 8px;
}
.pf-mb-quest-q { font-size: 16px; font-weight: 700; color: var(--color-text); line-height: 1.5; margin-bottom: 8px; }
.pf-mb-quest-meta { font-size: 12px; color: var(--color-text-dim); font-weight: 500; }
.pf-mb-quest-responses { display: flex; align-items: center; gap: 12px; padding: 6px 0 4px; }
.pf-mb-quest-resp-label { font-size: 13px; font-weight: 600; color: var(--color-text-dim); }
.pf-mb-quest-avatars { display: flex; gap: 4px; }
.pf-mb-quest-av {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}

/* ECO Prompt carousel */
.pf-mb-prompt-sequence { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.pf-mb-prompt-item {
  display: none; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--color-accent-c) 6%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-accent-c) 25%, transparent);
  border-radius: 10px; padding: 16px;
}
.pf-mb-prompt-item.active { display: flex; }
.pf-mb-prompt-q { font-size: 17px; font-weight: 700; color: var(--color-text); line-height: 1.5; }
.pf-mb-prompt-for { font-size: 12px; color: var(--color-accent-c); font-weight: 600; }
.pf-mb-prompt-nav { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 4px 0 8px; }
.pf-mb-prompt-btn {
  width: 36px; height: 36px; border-radius: 50%; font-size: 20px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: border-color .12s;
}
.pf-mb-prompt-btn:hover { border-color: var(--color-accent-c); color: var(--color-accent-c); }
.pf-mb-prompt-counter { font-size: 13px; color: var(--color-text-dim); font-weight: 600; min-width: 40px; text-align: center; }

/* ── Simplified View demo (pf-feature-simplified-view) ────── */
.pf-sv-wrap {
  display: grid;
  grid-template-columns: 1fr 320px 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto clamp(32px,5vh,64px);
  padding: 0 clamp(16px,3vw,32px);
  align-items: start;
}
@media (max-width: 900px) {
  .pf-sv-wrap { grid-template-columns: 1fr; }
  .pf-sv-callouts, .pf-sv-principles { display: none; }
}

/* Callouts — left column */
.pf-sv-callouts { display: flex; flex-direction: column; gap: 14px; padding-top: 56px; }
.pf-sv-callout {
  padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.pf-sv-callout:hover { border-color: var(--color-accent-c); }
.pf-sv-callout.active {
  border-color: var(--color-accent-c);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-c) 20%, transparent);
}
.pf-sv-callout-num { font-size: 11px; font-weight: 700; color: var(--color-accent-c); letter-spacing: .1em; margin-bottom: 4px; }
.pf-sv-callout-label { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.pf-sv-callout-text { font-size: 13px; color: var(--color-text-dim); line-height: 1.55; }

/* Phone frame */
.pf-sv-phone-wrap { display: flex; justify-content: center; }
.pf-sv-phone {
  width: 320px; min-height: 640px;
  border-radius: 40px;
  border: 6px solid #1a2535;
  box-shadow: 0 0 0 2px #0a1020, 0 24px 60px rgba(0,0,0,.4);
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--color-bg);
  position: relative;
}
.pf-sv-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100px; height: 26px; background: #1a2535; border-radius: 0 0 16px 16px;
  z-index: 10;
}
.pf-sv-topbar { padding-top: 28px !important; }

/* Body + panels */
.pf-sv-body { flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--color-bg); }
.pf-sv-panel { padding-bottom: 12px; }

/* Nav */
.pf-sv-nav { border-top: 1px solid #1e2d3d; background: #0A0E14 !important; padding: 4px 0 12px; }

/* Share tab overrides */
.pf-sv-memoir-card {
  margin: 0 16px 12px;
  background: #0d1f4a; border: 1.5px solid #163373;
  border-radius: 14px; padding: 12px 14px;
}
.pf-sv-memoir-hdr { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: #8FB4FF; margin-bottom: 6px; }
.pf-sv-priv { font-size: 11px; color: #5B6A8A; font-weight: 500; }
.pf-sv-memoir-prompt { font-size: 13px; color: rgba(232,240,255,.35); font-style: italic; padding: 4px 0; }
.pf-sv-divider { display: flex; align-items: center; gap: 8px; padding: 0 16px 12px; }
.pf-sv-divider hr { flex:1; border:none; border-top:1px solid var(--color-border); }
.pf-sv-divider span { font-size: 11px; color: var(--color-text-dim); font-weight: 600; white-space: nowrap; }
.pf-sv-icon-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; padding: 0 16px 12px; }
.pf-sv-icon-row .es-icon-card { padding: 12px 4px 10px; border-radius: 12px; }
.pf-sv-icon-row .es-icon-card-ico { width: 44px; height: 44px; border-radius: 11px; }
.pf-sv-icon-row .es-icon-card-label { font-size: 11px; font-weight: 700; }
.pf-sv-textarea-mock {
  margin: 0 16px 12px; padding: 11px 14px; font-size: 13px;
  color: var(--color-text-dim); font-style: italic;
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: 12px; min-height: 60px;
}
.pf-sv-save-bar {
  margin: 0 16px 16px; padding: 14px;
  border-radius: 12px; background: #00AAFF;
  color: #080D14; font-size: 15px; font-weight: 800;
  text-align: center; letter-spacing: .02em;
}

/* Reminisce tab */
.pf-sv-type-row { display: flex; gap: 8px; padding: 0 16px 12px; }
.pf-sv-type-chip {
  padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-text-dim);
}
.pf-sv-type-chip.active { background: #163373; border-color: #163373; color: #fff; }
.pf-sv-input-mock {
  margin: 0 16px 8px; padding: 10px 14px; font-size: 13px;
  color: var(--color-text-dim); font-style: italic;
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: 12px;
}
.pf-sv-play-btn {
  width: 100%; padding: 14px; border-radius: 12px;
  background: #163373; color: #fff;
  font-size: 16px; font-weight: 700; text-align: center;
}

/* My Story chapter cards */
.pf-sv-chapter-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 14px;
}
.pf-sv-chapter-ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.pf-sv-chapter-name { font-size: 14px; font-weight: 700; color: var(--color-text); }
.pf-sv-chapter-status { font-size: 12px; color: var(--color-text-dim); margin-top: 2px; }
.pf-sv-chapter-arrow { font-size: 20px; color: var(--color-text-dim); }

/* Principles — right column */
.pf-sv-principles { display: flex; flex-direction: column; gap: 16px; padding-top: 56px; }
.pf-sv-principle { display: flex; gap: 12px; align-items: flex-start; }
.pf-sv-principle-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.pf-sv-principle-text { font-size: 14px; color: var(--color-text-dim); line-height: 1.6; }
.pf-sv-principle-text strong { color: var(--color-text); }

/* ── Photo Memory Player (pf-feature-reminisce) ─────────────── */
.pf-rem-photo-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 0 16px; justify-content: center;
}
.pf-rem-photo-chip {
  font-size: 14px; font-weight: 600; padding: 7px 16px;
  border-radius: 20px; cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-dim);
  transition: all .15s;
}
.pf-rem-photo-chip.active,
.pf-rem-photo-chip:hover {
  border-color: var(--color-accent-c); color: var(--color-accent-c);
  background: color-mix(in srgb, var(--color-accent-c) 8%, transparent);
}
.pf-rem-photo-stage { margin: 0 auto; max-width: 680px; }
.pf-rem-photo-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 16px; overflow: hidden;
  transition: opacity .2s, transform .2s;
}
.pf-rem-photo-frame {
  position: relative; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.pf-rem-photo-placeholder {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; transition: background .3s;
  width: 100%; height: 100%; justify-content: center;
}
.pf-rem-photo-icon { font-size: 64px; line-height: 1; transition: color .3s; }
.pf-rem-photo-year {
  font-family: 'Arial Black', Arial, sans-serif; font-weight: 900;
  font-size: clamp(32px, 6vw, 56px); color: var(--color-text);
  opacity: .15; letter-spacing: -.02em;
}
.pf-rem-photo-caption { padding: 20px 24px 24px; }
.pf-rem-photo-who {
  font-size: 14px; font-weight: 700; color: var(--color-accent-c);
  margin-bottom: 10px; letter-spacing: .02em;
}
.pf-rem-photo-text {
  font-size: 17px; line-height: 1.7; color: var(--color-text);
  font-style: italic; margin-bottom: 12px;
}
.pf-rem-photo-tag {
  font-size: 13px; font-weight: 700; color: var(--color-text-dim);
  font-family: var(--font-mono, Arial, sans-serif); letter-spacing: .06em;
}
.pf-rem-photo-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; padding: 16px 0 8px;
}
.pf-rem-photo-nav-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s;
}
.pf-rem-photo-nav-btn:hover { border-color: var(--color-accent-c); color: var(--color-accent-c); }
.pf-rem-photo-counter { font-size: 15px; color: var(--color-text-dim); font-weight: 600; }
.pf-rem-photo-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding-bottom: 16px;
}
.pf-rem-play-btn {
  font-size: 15px; font-weight: 700; padding: 10px 28px;
  border-radius: 8px; cursor: pointer;
  border: 2px solid var(--color-accent-g); color: var(--color-accent-g);
  background: transparent; transition: all .15s;
}
.pf-rem-play-btn:hover { background: color-mix(in srgb, var(--color-accent-g) 10%, transparent); }
.pf-rem-play-hint { font-size: 13px; color: var(--color-text-dim); }
.pf-rem-photo-strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px;
  scrollbar-width: thin; justify-content: flex-start;
}
.pf-rem-thumb {
  flex-shrink: 0; width: 60px;
  border: 2px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); padding: 6px 4px;
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 3px; transition: border-color .15s;
}
.pf-rem-thumb:hover { border-color: var(--cc, var(--color-accent-c)); }
.pf-rem-thumb.active { border-color: var(--tc, var(--color-accent-c)); background: color-mix(in srgb, var(--tc, var(--color-accent-c)) 8%, var(--color-surface)); }
.pf-rem-thumb-icon { font-size: 20px; }
.pf-rem-thumb-yr { font-size: 11px; font-weight: 700; color: var(--color-text-dim); }

/* ── Override any viz CSS that sets body/html overflow:hidden (energy-tree, viz-ripple etc) */
html, body { overflow: auto !important; height: auto !important; }
.m-wrap { overflow: visible !important; height: auto !important; }

/* ── Ripple demo shell (scoped — overrides viz-ripple.css body rule) ── */
.pf-rpl-shell {
  display: flex; flex-direction: column;
  max-width: 1100px; margin: 0 auto clamp(24px,4vh,48px);
  padding: 0 clamp(16px,3vw,40px);
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--color-border);
}
.pf-rpl-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid #1a2535; background: #080D14;
  gap: 10px;
}
.pf-rpl-hdr-title {
  font-family: 'Arial Black', Arial; font-size: 14px;
  color: #00AAFF; letter-spacing: 1px; white-space: nowrap;
}
.pf-rpl-hdr-count { font-size: 12px; color: #7a8a9a; flex: 1; text-align: center; }
.pf-rpl-zbtns { display: flex; gap: 4px; }
.pf-rpl-zbtn {
  background: #0c1520; border: 1px solid #1a2535; color: #00AAFF;
  width: 28px; height: 28px; border-radius: 5px; cursor: pointer;
  font-size: 15px; display: flex; align-items: center; justify-content: center;
  user-select: none;
}
.pf-rpl-zbtn:hover { border-color: #00AAFF; }
#pf-rpl-wrap { cursor: grab; }
#pf-rpl-wrap.dragging { cursor: grabbing; }
.pf-rpl-wrap-inner {
  position: relative; overflow: hidden; cursor: grab;
  background: #080D14; min-height: 520px;
}
.pf-rpl-ld-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #7a8a9a; font-size: 13px; font-family: Arial,sans-serif; z-index: 10;
}
.pf-rpl-svg-el { display: block; width: 100%; height: 520px; }
.pf-rpl-bar {
  padding: 6px 12px; display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center; border-top: 1px solid #1a2535;
  background: #080D14;
}
.pf-rpl-tip {
  position: absolute; background: #0c1520;
  border: 1px solid rgba(0,170,255,.2); border-radius: 8px;
  padding: 10px 13px; font-size: 12px; color: #7a8a9a;
  pointer-events: auto; opacity: 0; transition: opacity .12s;
  z-index: 100; min-width: 140px; max-width: 220px;
}
.pf-rpl-tip.vr-tip--vis { opacity: 1; }
.pf-rpl-tip .tip-name { font-family: 'Arial Black', Arial; font-weight: 900; font-size: 12px; margin-bottom: 2px; color: #e8f4f0; }
.pf-rpl-tip .tip-detail { font-size: 12px; color: #7a8a9a; line-height: 1.5; }

/* ── Energy Tree demo shell ───────────────────────────────────── */
.pf-tree-shell {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface);
}
.pf-tree-canvas {
  position: relative;
  width: 100%;
  height: 580px;
  background: #080D14;
}
.pf-tree-zoom-ctrl {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}
.pf-tree-zc {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pf-tree-zc:hover { background: var(--color-surface-hover, var(--color-surface)); }

/* ── Feature note centered variant ── */
.pf-feat-note-centered {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-dim);
  margin-top: 0;
}

/* cache-bust: 20260724-S533 — UX font/color fixes */

/* ── Energy Tree inline style replacements ──────────────────────── */
.pf-tree-loading-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-dim); font-size: 14px; font-family: Arial,sans-serif;
}
.pf-tree-svg-el { width: 100%; height: 100%; display: block; }
.pf-tree-tooltip-init { opacity: 0; transition: opacity .15s; pointer-events: none; }

/* ── Demo placeholder note — shown above viz panels ─────────────── */
.vz-note--demo {
  margin-top: 10px;
  background: color-mix(in srgb, var(--color-accent-c) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-accent-c) 25%, transparent);
  border-radius: 6px;
  padding: 8px 14px;
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-dim);
}

/* ── Cultural Roots legend (S538) ─────────────────────────────── */
.cr-legend {
  max-width: 760px;
  margin: 0 auto clamp(24px, 4vh, 48px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 clamp(16px, 3vw, 40px);
}
.cr-legend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 16px;
}
.cr-legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.cr-legend-name { font-weight: 700; font-size: 15px; color: var(--color-text); flex: 1; }
.cr-legend-count {
  font-size: 13px;
  color: var(--color-text-dim);
  font-family: var(--font-mono, Arial, sans-serif);
  white-space: nowrap;
}

/* S539: .d3-c is sized in every viz-*.css stylesheet but was never defined in
   pf-feature.css, so demo SVGs here fell back to the 300x150 replaced-element
   default. getBoundingClientRect().width returned 300, the viewBox upscaled
   ~3.4x, and all type rendered oversized. Affects d3-tl (generational),
   d3-br (lineage), d3-cr (cultural roots) and jr-map (journey replay).
   Width only — .pf-sw-svg sets its own height:520px and this selector is more
   specific, so declaring height here would silently override it. */
.vz-box .d3-c {
  display: block;
  width: 100%;
}
#jr-map,
#d3-cr {
  height: auto;
  max-height: 70vh;
}

/* ── Journey Replay demo controls (S538) ─────────────────────── */
.jr-people {
  max-width: 900px;
  margin: 0 auto 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0 clamp(16px, 3vw, 40px);
}
.jr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-dim);
  cursor: pointer;
  font-family: inherit;
}
.jr-btn:hover { border-color: var(--color-text-dim); color: var(--color-text); }
.jr-btn--on {
  border-color: var(--color-accent-c);
  color: var(--color-text);
  background: var(--color-bg);
}
.jr-btn-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ════════════════════════════════════════════
   MY STORY demo (S539)
   All content is driven by memoir_chapters /
   memoir_prompts for demo-001 via get_demo_viz_data().
   ════════════════════════════════════════════ */
.ms-people {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 auto 14px;
  max-width: 900px;
}
.ms-person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-dim);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.25;
}
.ms-person:hover { border-color: var(--color-text-dim); color: var(--color-text); }
.ms-person--on {
  border-color: var(--color-accent-c);
  color: var(--color-text);
  background: var(--color-bg);
}
.ms-person-name { font-weight: 700; font-size: 14px; }
.ms-person-count { font-size: 11px; opacity: 0.75; }

.ms-chapters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  padding: 14px;
}
.ms-ch {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  padding: 14px 16px;
}
.ms-ch--empty { background: transparent; border-style: dashed; }

.ms-ch-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ms-ch-key {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.ms-ch-vis {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
}
.ms-ch-vis--private { border-color: #E91E63; color: #E91E63; }
.ms-ch-vis--family_only { border-color: #FF8C42; color: #FF8C42; }
.ms-ch-vis--network { border-color: #00CC44; color: #00CC44; }
.ms-ch-vis--unwritten { opacity: 0.7; }
.ms-ch-draft {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.ms-ch-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}
.ms-ch-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 10px;
}
.ms-ch-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ms-ch-loc {
  font-size: 11px;
  font-style: italic;
  color: var(--color-text-dim);
  margin-right: 4px;
}
.ms-ch-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-dim);
}
.ms-ch-prompts { display: flex; flex-direction: column; gap: 7px; }
.ms-ch-prompt { display: flex; gap: 8px; align-items: flex-start; }
.ms-ch-prompt-mark {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.ms-ch-prompt-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-dim);
  font-style: italic;
}
@media (max-width: 560px) {
  .ms-chapters { grid-template-columns: 1fr; padding: 10px; }
}

/* ════════════════════════════════════════════
   YEAR IN REVIEW demo (S539)
   Years and counts come from get_demo_year_in_review().
   ════════════════════════════════════════════ */
.yr-years {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 auto 14px;
}
.yr-tab {
  padding: 7px 18px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-dim);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.yr-tab:hover { border-color: var(--color-text-dim); color: var(--color-text); }
.yr-tab--on {
  border-color: var(--color-accent-c);
  color: var(--color-text);
  background: var(--color-bg);
}
.yr-body { padding: 20px 18px 24px; }
.yr-headline {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  text-align: center;
}
.yr-subhead {
  font-size: 13px;
  font-style: italic;
  color: var(--color-text-dim);
  text-align: center;
  margin: 6px 0 18px;
}
.yr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.yr-stat {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  padding: 14px 10px;
  text-align: center;
}
.yr-stat-num {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-accent-c);
}
.yr-stat-lbl {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-top: 3px;
}
.yr-sec-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin: 20px 0 10px;
}
.yr-members { display: flex; flex-wrap: wrap; gap: 8px; }
.yr-member {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
}
.yr-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-dim);
  font-size: 11px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  flex-shrink: 0;
}
.yr-member-name { font-size: 14px; font-weight: 700; color: var(--color-text); }
.yr-member-detail { font-size: 11px; color: var(--color-text-dim); }
.yr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.yr-chip {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.yr-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}
.yr-quote {
  border-left: 2px solid var(--color-border);
  padding: 4px 0 4px 13px;
}
.yr-quote-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.yr-quote-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 4px 0 5px;
}
.yr-quote-by { font-size: 12px; font-style: italic; color: var(--color-text-dim); }
@media (max-width: 560px) {
  .yr-headline { font-size: 20px; }
  .yr-body { padding: 14px 12px 18px; }
}

/* ════════════════════════════════════════════
   WHATSAPP IMPORT demo (S539)
   Raw lines come from demo_whatsapp_lines; the
   parser is the production one, verbatim.
   ════════════════════════════════════════════ */
.wa-senders {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 auto 14px;
}
.wa-sender {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 13px;
}
.wa-sender--unmapped { border-style: dashed; }
.wa-sender-from { color: var(--color-text-dim); }
.wa-sender-arrow { color: var(--color-text-dim); opacity: 0.6; }
.wa-sender-to { font-weight: 700; color: var(--color-text); }
.wa-sender--unmapped .wa-sender-to { color: #FF8C42; font-weight: 400; font-style: italic; }
.wa-sender-n { font-size: 11px; color: var(--color-text-dim); opacity: 0.8; }

.wa-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.wa-col { padding: 14px 16px; min-width: 0; }
.wa-col + .wa-col { border-left: 1px solid var(--color-border); }
.wa-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 10px;
}
.wa-raw {
  max-height: 380px;
  overflow-y: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.55;
}
.wa-raw-line {
  color: var(--color-text-dim);
  opacity: 0.42;
  padding: 1px 0;
  word-break: break-word;
}
.wa-raw-line--read { opacity: 1; color: var(--color-text); }
.wa-memories { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; }
.wa-mem {
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-bg);
  padding: 10px 12px;
}
.wa-mem-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.wa-mem-who { font-size: 13px; font-weight: 700; color: var(--color-text); }
.wa-mem-ts { font-size: 11px; color: var(--color-text-dim); }
.wa-mem-text { font-size: 13px; line-height: 1.6; color: var(--color-text); margin: 5px 0 6px; }
.wa-mem-src {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--color-text-dim);
  opacity: 0.75;
  font-family: "SFMono-Regular", Consolas, monospace;
}
.wa-mem-wait { font-size: 13px; font-style: italic; color: var(--color-text-dim); }
.wa-replay-wrap { text-align: center; margin-top: 10px; }
.wa-replay {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-dim);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
.wa-replay:hover { border-color: var(--color-text-dim); color: var(--color-text); }
@media (max-width: 700px) {
  .wa-split { grid-template-columns: 1fr; }
  .wa-col + .wa-col { border-left: none; border-top: 1px solid var(--color-border); }
  .wa-raw { max-height: 220px; }
}

/* ════════════════════════════════════════════
   NETWORK DIRECTORY demo (S539)
   Privacy filter and search predicate mirror
   js/pages/directory.js.
   ════════════════════════════════════════════ */
.dir-viewers {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin: 0 auto 12px;
}
.dir-viewer {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-dim);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
.dir-viewer:hover { border-color: var(--color-text-dim); color: var(--color-text); }
.dir-viewer--on {
  border-color: var(--color-accent-c);
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: 700;
}
.dir-searchwrap { padding: 14px 16px 0; }
.dir-search {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 13px;
  border-radius: 9px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: 14px;
}
.dir-search:focus { outline: none; border-color: var(--color-accent-c); }
.dir-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 16px 4px;
}
.dir-stat { display: flex; align-items: baseline; gap: 5px; }
.dir-stat-n { font-size: 19px; font-weight: 700; color: var(--color-accent-c); }
.dir-stat-l {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.dir-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 10px;
  padding: 10px 16px 18px;
}
.dir-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  min-width: 0;
}
.dir-card--passed { opacity: 0.72; }
.dir-av {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
  font-size: 13px;
  font-weight: 700;
  line-height: 38px;
  text-align: center;
}
.dir-main { flex: 1; min-width: 0; }
.dir-name-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.dir-name { font-size: 15px; font-weight: 700; color: var(--color-text); }
.dir-rel, .dir-you {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
}
.dir-you { border-color: var(--color-accent-c); color: var(--color-accent-c); }
.dir-meta { font-size: 12px; color: var(--color-text-dim); margin-top: 2px; }
.dir-langs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.dir-lang {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-dim);
}
.dir-msg {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-accent-c);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 5px 10px;
}
.dir-empty {
  grid-column: 1 / -1;
  font-size: 14px;
  font-style: italic;
  color: var(--color-text-dim);
  padding: 14px 2px;
}
@media (max-width: 560px) {
  .dir-list { grid-template-columns: 1fr; padding: 10px 12px 14px; }
}

/* ════════════════════════════════════════════
   KINSHIP LANGUAGE demo (S539) — real kinship_terms
   ════════════════════════════════════════════ */
.kin-relations, .q-types {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 0 auto 12px;
}
.kin-tab, .q-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-dim); cursor: pointer; font-family: inherit; font-size: 13px;
}
.kin-tab:hover, .q-tab:hover { border-color: var(--color-text-dim); color: var(--color-text); }
.kin-tab--on, .q-tab--on {
  border-color: var(--color-accent-c); background: var(--color-bg);
  color: var(--color-text); font-weight: 700;
}
.kin-tab-n, .q-tab-n { font-size: 10px; opacity: 0.7; }
.kin-stat {
  text-align: center; font-size: 12px; letter-spacing: 0.05em;
  color: var(--color-text-dim); margin-bottom: 10px;
}
.kin-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; padding: 16px;
}
.kin-card {
  border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-bg); padding: 13px 14px; position: relative;
}
.kin-term { font-size: 21px; font-weight: 700; color: var(--color-text); line-height: 1.2; }
.kin-translit { font-size: 13px; font-style: italic; color: var(--color-text-dim); margin-top: 2px; }
.kin-lang {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-c); margin-top: 7px;
}
.kin-meaning { font-size: 12px; line-height: 1.5; color: var(--color-text-dim); margin-top: 5px; }
.kin-gender {
  position: absolute; top: 11px; right: 12px; font-size: 9px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-dim); opacity: 0.65;
}

/* ════════════════════════════════════════════
   QUESTS demo (S539) — demo-001 quests only
   ════════════════════════════════════════════ */
.q-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 11px; padding: 16px;
}
.q-card {
  border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-bg); padding: 14px 15px;
}
.q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.q-type {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--color-border);
  color: var(--color-text-dim);
}
.q-type--share { border-color: #00AAFF; color: #00AAFF; }
.q-type--reflect { border-color: #9B59B6; color: #9B59B6; }
.q-type--identify { border-color: #FF8C42; color: #FF8C42; }
.q-type--create { border-color: #00CC44; color: #00CC44; }
.q-type--explore { border-color: #1ABC9C; color: #1ABC9C; }
.q-photos { font-size: 10px; color: var(--color-text-dim); opacity: 0.8; }
.q-title { font-size: 16px; font-weight: 700; color: var(--color-text); }
.q-prompt { font-size: 13px; line-height: 1.6; color: var(--color-text-dim); margin: 5px 0 8px; }
.q-tag {
  display: inline-block; font-size: 10px; padding: 1px 7px; margin: 0 4px 6px 0;
  border-radius: 999px; background: var(--color-surface); color: var(--color-text-dim);
}
.q-rate { height: 4px; border-radius: 3px; background: var(--color-surface); overflow: hidden; margin-top: 6px; }
.q-rate-fill { display: block; height: 100%; background: var(--color-accent-c); }
.q-rate-fill--0 { width: 0; }
.q-rate-fill--10 { width: 10%; }
.q-rate-fill--20 { width: 20%; }
.q-rate-fill--30 { width: 30%; }
.q-rate-fill--40 { width: 40%; }
.q-rate-fill--50 { width: 50%; }
.q-rate-fill--60 { width: 60%; }
.q-rate-fill--70 { width: 70%; }
.q-rate-fill--80 { width: 80%; }
.q-rate-fill--90 { width: 90%; }
.q-rate-fill--100 { width: 100%; }
.q-rate-lbl { font-size: 10px; color: var(--color-text-dim); margin-top: 4px; }

/* ════════════════════════════════════════════
   METRICS DASHBOARD demo (S539)
   ════════════════════════════════════════════ */
.mx-body { padding: 16px 18px 20px; }
.mx-sec {
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-text-dim); margin: 18px 0 9px;
}
.mx-sec:first-child { margin-top: 0; }
.mx-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 9px;
}
.mx-stat {
  border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-bg); padding: 13px 8px; text-align: center;
}
.mx-num { font-size: 27px; font-weight: 700; line-height: 1.1; color: var(--color-text); }
.mx-stat--who .mx-num { color: var(--color-accent-c); }
.mx-lbl {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-dim); margin-top: 3px;
}
.mx-bars { display: flex; flex-direction: column; gap: 7px; }
.mx-bar-row { display: flex; align-items: center; gap: 10px; }
.mx-bar-name { font-size: 13px; font-weight: 700; color: var(--color-text); width: 74px; flex-shrink: 0; }
.mx-bar-track {
  flex: 1; height: 9px; border-radius: 5px; background: var(--color-surface); overflow: hidden;
}
.mx-bar-fill { display: block; height: 100%; background: var(--color-accent-c); }
.mx-bar-fill--10 { width: 10%; }
.mx-bar-fill--20 { width: 20%; }
.mx-bar-fill--30 { width: 30%; }
.mx-bar-fill--40 { width: 40%; }
.mx-bar-fill--50 { width: 50%; }
.mx-bar-fill--60 { width: 60%; }
.mx-bar-fill--70 { width: 70%; }
.mx-bar-fill--80 { width: 80%; }
.mx-bar-fill--90 { width: 90%; }
.mx-bar-fill--100 { width: 100%; }
.mx-bar-n { font-size: 11px; color: var(--color-text-dim); flex-shrink: 0; }
@media (max-width: 560px) {
  .kin-grid, .q-list { grid-template-columns: 1fr; padding: 12px; }
  .mx-bar-n { display: none; }
}

/* S539: loading overlay is hidden by class, not by an inline style write. */
.pf-tree-loading--done { display: none; }
.pf-rpl-ld--done { display: none; }

/* ════════════════════════════════════════════
   CONNECTION MAP demo (S539)
   ════════════════════════════════════════════ */
#cm-svg { display: block; width: 100%; height: auto; max-height: 70vh; }
.cm-node { cursor: pointer; }
.cm-legend {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  padding: 10px 16px 0;
}
.cm-key { display: inline-flex; align-items: center; gap: 5px; }
.cm-key-dot { display: inline-flex; line-height: 0; }
.cm-key-label { font-size: 11px; color: var(--color-text-dim); }

/* ════════════════════════════════════════════
   PRIVACY CIRCLES demo (S539)
   ════════════════════════════════════════════ */
.pc-viewers {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 0 auto 12px;
}
.pc-viewer {
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-dim); cursor: pointer; font-family: inherit; font-size: 13px;
}
.pc-viewer:hover { border-color: var(--color-text-dim); color: var(--color-text); }
.pc-viewer--on {
  border-color: var(--color-accent-c); background: var(--color-bg);
  color: var(--color-text); font-weight: 700;
}
.pc-body { padding: 16px 18px 20px; }
.pc-rings {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 11px;
}
.pc-ring {
  border: 1px solid var(--color-border); border-radius: 11px;
  background: var(--color-bg); padding: 13px 14px;
}
.pc-ring--inner { border-color: #E91E63; }
.pc-ring--family { border-color: #FF8C42; }
.pc-ring--network { border-style: dashed; }
.pc-ring-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.pc-ring-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text);
}
.pc-ring-n { font-size: 12px; color: var(--color-text-dim); }
.pc-people { display: flex; flex-direction: column; gap: 6px; }
.pc-person { display: flex; align-items: center; gap: 8px; }
.pc-av {
  width: 25px; height: 25px; flex-shrink: 0; border-radius: 50%;
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text-dim); font-size: 10px; font-weight: 700;
  line-height: 25px; text-align: center;
}
.pc-person-main { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.pc-person-name { font-size: 13px; font-weight: 700; color: var(--color-text); }
.pc-person-rel {
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-text-dim);
}
.pc-empty { font-size: 12px; font-style: italic; color: var(--color-text-dim); }
.pc-ring-blurb {
  font-size: 11px; line-height: 1.5; color: var(--color-text-dim);
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--color-border);
}
.pc-sec {
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-text-dim); margin: 22px 0 10px;
}
.pc-chapters { display: flex; flex-direction: column; gap: 9px; }
.pc-chapter {
  border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-bg); padding: 11px 13px;
}
.pc-chapter-top { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.pc-vis {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--color-border);
  color: var(--color-text-dim); flex-shrink: 0;
}
.pc-vis--private { border-color: #E91E63; color: #E91E63; }
.pc-vis--family_only { border-color: #FF8C42; color: #FF8C42; }
.pc-vis--network { border-color: #00CC44; color: #00CC44; }
.pc-chapter-title { font-size: 14px; font-weight: 700; color: var(--color-text); }
.pc-audience { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.pc-audience-av {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text-dim); font-size: 9px; font-weight: 700;
  line-height: 22px; text-align: center;
}
.pc-audience-n { font-size: 11px; color: var(--color-text-dim); margin-left: 4px; }
.pc-audience-none { font-size: 12px; font-style: italic; color: #E91E63; }
@media (max-width: 560px) {
  .pc-body { padding: 12px; }
  .pc-rings { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   COMMUNITY POLLS demo (S539)
   ════════════════════════════════════════════ */
.pl-list, .an-list, .ic-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 11px; padding: 16px;
}
.pl-card, .an-card, .ic-card {
  border: 1px solid var(--color-border); border-radius: 11px;
  background: var(--color-bg); padding: 14px 15px;
}
.pl-card--pinned { border-color: var(--color-accent-c); }
.pl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.pl-pin {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-accent-c); border: 1px solid var(--color-accent-c);
  border-radius: 999px; padding: 1px 8px;
}
.pl-by { font-size: 11px; color: var(--color-text-dim); }
.pl-q { font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 11px; }
.pl-opt { margin-bottom: 9px; }
.pl-opt-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pl-opt-label { font-size: 13px; color: var(--color-text); }
.pl-opt--lead .pl-opt-label { font-weight: 700; }
.pl-opt-n { font-size: 11px; color: var(--color-text-dim); flex-shrink: 0; }
.pl-track { height: 6px; border-radius: 4px; background: var(--color-surface); overflow: hidden; margin-top: 4px; }
.pl-fill { display: block; height: 100%; background: var(--color-text-dim); }
.pl-opt--lead .pl-fill { background: var(--color-accent-c); }
.pl-fill--0 { width: 0; }
.pl-fill--10 { width: 10%; }
.pl-fill--20 { width: 20%; }
.pl-fill--30 { width: 30%; }
.pl-fill--40 { width: 40%; }
.pl-fill--50 { width: 50%; }
.pl-fill--60 { width: 60%; }
.pl-fill--70 { width: 70%; }
.pl-fill--80 { width: 80%; }
.pl-fill--90 { width: 90%; }
.pl-fill--100 { width: 100%; }
.pl-voters { font-size: 10px; color: var(--color-text-dim); margin-top: 3px; opacity: 0.85; }
.pl-total {
  font-size: 11px; color: var(--color-text-dim); margin-top: 11px;
  padding-top: 9px; border-top: 1px solid var(--color-border);
}

/* ════════════════════════════════════════════
   ASK YOUR NETWORK demo (S539)
   ════════════════════════════════════════════ */
.an-card--open { border-style: dashed; }
.an-head { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 8px; }
.an-type {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--color-border);
  color: var(--color-text-dim);
}
.an-type--memory { border-color: #9B59B6; color: #9B59B6; }
.an-type--inquiry { border-color: #00AAFF; color: #00AAFF; }
.an-type--challenge { border-color: #FF8C42; color: #FF8C42; }
.an-asker { font-size: 12px; font-weight: 700; color: var(--color-text); }
.an-directed { font-size: 11px; color: var(--color-text-dim); }
.an-q { font-size: 15px; line-height: 1.5; color: var(--color-text); }
.an-answer {
  margin-top: 11px; padding-left: 12px; border-left: 2px solid var(--color-accent-c);
}
.an-answer-text { font-size: 13px; line-height: 1.65; color: var(--color-text); margin: 0 0 6px; }
.an-answer-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.an-answer-by { font-size: 12px; font-weight: 700; color: var(--color-text); }
.an-answer-tag { font-size: 10px; color: var(--color-text-dim); font-style: italic; }
.an-open { font-size: 12px; font-style: italic; color: var(--color-text-dim); margin-top: 10px; }

/* ════════════════════════════════════════════
   INTEREST MATCHING demo (S539)
   ════════════════════════════════════════════ */
.ic-card--on { border-color: #00CC44; }
.ic-pair { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ic-av {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text-dim); font-size: 10px; font-weight: 700;
  line-height: 26px; text-align: center; flex-shrink: 0;
}
.ic-name { font-size: 13px; font-weight: 700; color: var(--color-text); }
.ic-link { color: var(--color-text-dim); font-size: 14px; margin: 0 2px; }
.ic-passion { font-size: 15px; color: var(--color-text); margin: 10px 0 8px; }
.ic-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ic-tag {
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: var(--color-surface); color: var(--color-text-dim);
}
.ic-score { font-size: 11px; color: var(--color-text-dim); margin-left: auto; }
.ic-state {
  font-size: 11px; color: var(--color-text-dim); margin-top: 10px;
  padding-top: 9px; border-top: 1px solid var(--color-border);
}
.ic-state--on { color: #00CC44; font-weight: 700; }
.ic-state--wait { color: #FF8C42; }
@media (max-width: 560px) {
  .pl-list, .an-list, .ic-list { grid-template-columns: 1fr; padding: 12px; }
}

/* ════════════════════════════════════════════
   STORY TELLER BIO · DIGEST · HISTORIAN ·
   LEGACY ARCHIVE · NOTIFICATIONS  (S539)
   ════════════════════════════════════════════ */
.ch-people { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:0 auto 12px; }
.ch-person {
  display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px;
  border:1px solid var(--color-border); background:var(--color-surface);
  color:var(--color-text-dim); cursor:pointer; font-family:inherit; font-size:13px;
}
.ch-person:hover { border-color:var(--color-text-dim); color:var(--color-text); }
.ch-person--on { border-color:var(--color-accent-c); background:var(--color-bg); color:var(--color-text); font-weight:700; }
.ch-person-n { font-size:10px; opacity:0.7; }
.ch-body { padding:18px; display:flex; flex-direction:column; gap:16px; }
.ch-chapter { border-left:2px solid var(--color-border); padding-left:15px; }
.ch-head { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px; }
.ch-badge {
  font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; border:1px solid var(--color-border); color:var(--color-text-dim);
}
.ch-badge--warn { border-color:#FF8C42; color:#FF8C42; }
.ch-title { font-size:18px; font-weight:700; color:var(--color-text); margin:0 0 7px; }
.ch-prose p { font-size:14px; line-height:1.7; color:var(--color-text); margin:0 0 9px; }
.ch-meta { font-size:11px; color:var(--color-text-dim); }

.dg-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:11px; padding:16px; }
.dg-card { border:1px solid var(--color-border); border-radius:11px; background:var(--color-bg); padding:14px 15px; }
.dg-card--latest { border-color:var(--color-accent-c); }
.dg-head { display:flex; align-items:baseline; gap:9px; margin-bottom:8px; }
.dg-month { font-size:15px; font-weight:700; color:var(--color-text); }
.dg-latest { font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-accent-c); }
.dg-highlight { font-size:14px; line-height:1.6; color:var(--color-text); margin:0 0 10px; }
.dg-stats { display:flex; flex-wrap:wrap; gap:12px; }
.dg-stat { display:flex; align-items:baseline; gap:4px; }
.dg-stat-n { font-size:17px; font-weight:700; color:var(--color-accent-c); }
.dg-stat-l { font-size:11px; color:var(--color-text-dim); }
.dg-quiet { font-size:12px; font-style:italic; color:var(--color-text-dim); }
.dg-nudge {
  font-size:11px; color:var(--color-text-dim); margin-top:11px;
  padding-top:9px; border-top:1px solid var(--color-border);
}

.hi-body { padding:18px; display:flex; flex-direction:column; gap:12px; }
.hi-slot, .hi-figure { border:1px solid var(--color-border); border-radius:11px; background:var(--color-bg); padding:14px 15px; }
.hi-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; }
.hi-title, .hi-fig-name { font-size:16px; font-weight:700; color:var(--color-text); }
.hi-scope, .hi-fig-title { font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-text-dim); }
.hi-protected {
  font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:#00CC44; border:1px solid #00CC44; border-radius:999px; padding:1px 8px;
}
.hi-assigned { font-size:13px; color:var(--color-text); margin:6px 0 9px; }
.hi-caps { display:flex; flex-wrap:wrap; gap:6px; }
.hi-cap { font-size:11px; padding:2px 9px; border-radius:999px; background:var(--color-surface); color:var(--color-text-dim); }
.hi-limit {
  font-size:11px; line-height:1.55; color:var(--color-text-dim);
  margin-top:11px; padding-top:9px; border-top:1px solid var(--color-border);
}
.hi-sec { font-size:11px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--color-text-dim); margin:10px 0 0; }
.hi-fig-meta { font-size:11px; font-style:italic; color:var(--color-text-dim); margin-top:4px; }
.hi-fig-desc { font-size:13px; line-height:1.65; color:var(--color-text); margin:8px 0 0; }

.la-list { display:flex; flex-direction:column; gap:11px; padding:16px; }
.la-card { border:1px solid #00CC44; border-radius:11px; background:var(--color-bg); padding:14px 15px; }
.la-card--figure { border-style:dashed; }
.la-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; margin-bottom:8px; }
.la-seal {
  font-size:10px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  color:#00CC44; border:1px solid #00CC44; border-radius:999px; padding:2px 9px;
}
.la-by { font-size:14px; font-weight:700; color:var(--color-text); }
.la-where { font-size:11px; font-style:italic; color:var(--color-text-dim); }
.la-text { font-size:14px; line-height:1.7; color:var(--color-text); margin:0 0 10px; }
.la-lock {
  font-size:11px; color:#00CC44; padding-top:9px; border-top:1px solid var(--color-border);
}

.nt-list { display:flex; flex-direction:column; gap:8px; padding:16px; }
.nt-row { border:1px solid var(--color-border); border-radius:10px; background:var(--color-bg); padding:11px 13px; }
.nt-row--unread { border-left:3px solid var(--color-accent-c); }
.nt-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.nt-type {
  font-size:10px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; border:1px solid var(--color-border); color:var(--color-text-dim);
}
.nt-type--tag { border-color:#9B59B6; color:#9B59B6; }
.nt-type--reply { border-color:#00AAFF; color:#00AAFF; }
.nt-type--biography_generated { border-color:#FF8C42; color:#FF8C42; }
.nt-to { font-size:11px; color:var(--color-text-dim); }
.nt-dot { font-size:9px; color:var(--color-accent-c); margin-left:auto; }
.nt-msg { font-size:14px; color:var(--color-text); margin-top:5px; }
@media (max-width:560px){
  .dg-list,.la-list,.nt-list,.ch-body,.hi-body{ padding:12px; }
  .dg-list{ grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════
   GAMES · NETWORK VALUES · MESSAGING (S539)
   ════════════════════════════════════════════ */
.gm-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:11px; padding:16px; }
.gm-card { border:1px solid var(--color-border); border-radius:11px; background:var(--color-bg); padding:15px 13px; text-align:center; }
.gm-icon { font-size:30px; line-height:1; }
.gm-name { font-size:15px; font-weight:700; color:var(--color-text); margin-top:8px; }
.gm-desc { font-size:12px; line-height:1.5; color:var(--color-text-dim); margin:6px 0 0; }
.gm-tags { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-top:9px; }
.gm-tag { font-size:10px; padding:2px 8px; border-radius:999px; background:var(--color-surface); color:var(--color-text-dim); }

.nv-list { display:flex; flex-direction:column; gap:11px; padding:16px; }
.nv-card { border:1px solid var(--color-border); border-radius:11px; background:var(--color-bg); padding:15px 16px; position:relative; }
.nv-card--all { border-color:#00CC44; }
.nv-num { position:absolute; top:13px; right:15px; font-size:12px; font-weight:700; color:var(--color-text-dim); opacity:0.5; }
.nv-title { font-size:17px; font-weight:700; color:var(--color-text); padding-right:32px; }
.nv-body { font-size:14px; line-height:1.65; color:var(--color-text-dim); margin:7px 0 0; }
.nv-foot { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; margin-top:11px; padding-top:9px; border-top:1px solid var(--color-border); }
.nv-affirm { font-size:12px; font-weight:700; color:var(--color-text); }
.nv-all { font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#00CC44; }
.nv-names { font-size:11px; color:var(--color-text-dim); }

.msg-shell { padding:16px; }
.msg-hdr { font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-text-dim); margin-bottom:12px; text-align:center; }
.msg-thread { display:flex; flex-direction:column; gap:9px; }
.msg-row { display:flex; }
.msg-row--a { justify-content:flex-start; }
.msg-row--b { justify-content:flex-end; }
.msg-bubble { max-width:78%; border:1px solid var(--color-border); border-radius:13px; background:var(--color-bg); padding:9px 13px; }
.msg-row--b .msg-bubble { background:var(--color-surface); border-color:var(--color-accent-c); }
.msg-who { font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-text-dim); }
.msg-text { font-size:14px; line-height:1.6; color:var(--color-text); margin:3px 0 0; }
@media (max-width:560px){ .gm-list,.nv-list,.msg-shell{ padding:12px; } .msg-bubble{ max-width:88%; } }

/* ════════════════════════════════════════════
   CULTURAL VOCABULARY / LANGUAGE PRESERVATION (S539)
   Language-family proportional visual + word browser.
   ════════════════════════════════════════════ */
#vc-svg { display:block; width:100%; height:auto; max-height:60vh; }
.vc-slice { cursor:pointer; }
.vc-totals { display:flex; flex-wrap:wrap; gap:22px; justify-content:center; margin:0 auto 14px; }
.vc-stat { display:flex; align-items:baseline; gap:6px; }
.vc-stat-n { font-size:26px; font-weight:700; color:var(--color-accent-c); }
.vc-stat-l { font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--color-text-dim); }
.vc-terms {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:10px; padding:16px 0 0;
}
.vc-card { border:1px solid var(--color-border); border-radius:11px; background:var(--color-bg); padding:13px 14px; }
.vc-card-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.vc-term { font-size:20px; font-weight:700; color:var(--color-text); line-height:1.2; }
.vc-pron { font-size:12px; font-style:italic; color:var(--color-text-dim); }
.vc-meta { display:flex; flex-wrap:wrap; gap:6px; margin:5px 0 7px; }
.vc-lang {
  font-size:10px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--color-accent-c);
}
.vc-cat { font-size:10px; padding:1px 7px; border-radius:999px; background:var(--color-surface); color:var(--color-text-dim); }
.vc-def { font-size:13px; line-height:1.6; color:var(--color-text); margin:0; }
.vc-usage { font-size:12px; line-height:1.6; font-style:italic; color:var(--color-text-dim); margin:6px 0 0; }
.vc-more { grid-column:1/-1; font-size:12px; font-style:italic; color:var(--color-text-dim); padding:6px 2px; }
@media (max-width:560px){ .vc-terms{ grid-template-columns:1fr; } .vc-totals{ gap:14px; } }

/* ── THREAD RECOGNITION (S539) — shares pf-feature-connections.html ── */
.tr-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:11px; padding:16px; }
.tr-card { border:1px solid var(--color-border); border-radius:11px; background:var(--color-bg); padding:14px 15px; }
.tr-card--on { border-color:#00CC44; }
.tr-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; }
.tr-people { font-size:14px; font-weight:700; color:var(--color-text); }
.tr-conf { font-size:11px; color:var(--color-accent-c); margin-left:auto; }
.tr-what { font-size:15px; color:var(--color-text); margin-top:7px; }
.tr-approx { font-size:11px; font-style:italic; color:var(--color-text-dim); margin-top:2px; }
.tr-signals { margin:9px 0 0; padding-left:17px; }
.tr-signal { font-size:12px; line-height:1.6; color:var(--color-text-dim); }
.tr-state { font-size:11px; color:var(--color-text-dim); margin-top:10px; padding-top:9px; border-top:1px solid var(--color-border); }
.tr-state--on { color:#00CC44; font-weight:700; }
@media (max-width:560px){ .tr-list{ grid-template-columns:1fr; padding:12px; } }

/* ── HISTORICAL FIGURE PROFILES (S539) ── */
.hf-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:11px; padding:16px; }
.hf-card { border:1px solid var(--color-border); border-radius:11px; background:var(--color-bg); padding:15px 16px; }
.hf-card--unnamed { border-style:dashed; }
.hf-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.hf-name { font-size:17px; font-weight:700; color:var(--color-text); }
.hf-seal {
  font-size:9px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:#00CC44; border:1px solid #00CC44; border-radius:999px; padding:1px 8px;
}
.hf-unnamed {
  font-size:9px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:#FF8C42; border:1px solid #FF8C42; border-radius:999px; padding:1px 8px;
}
.hf-meta { font-size:11px; font-style:italic; color:var(--color-text-dim); margin-top:4px; }
.hf-desc { font-size:13px; line-height:1.65; color:var(--color-text); margin:9px 0 0; }
.hf-foot { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; margin-top:11px; padding-top:9px; border-top:1px solid var(--color-border); }
.hf-noaccount { font-size:10px; letter-spacing:0.05em; color:var(--color-text-dim); opacity:0.8; }
.hf-sponsor { font-size:11px; color:var(--color-accent-c); margin-left:auto; }

/* ── LANGUAGE PRESERVATION (S539) ── */
#lp-svg { display:block; width:100%; height:auto; max-height:60vh; }
.lp-totals { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin:0 auto 12px; }
.lp-stat { display:flex; align-items:baseline; gap:5px; }
.lp-stat-n { font-size:24px; font-weight:700; color:var(--color-accent-c); }
.lp-stat-l { font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-text-dim); }
.lp-speakers { display:flex; flex-direction:column; gap:10px; padding:16px; }
.lp-lang { border:1px solid var(--color-border); border-radius:10px; background:var(--color-bg); padding:12px 14px; }
.lp-lang--risk { border-color:#E91E63; }
.lp-lang-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; }
.lp-lang-name { font-size:15px; font-weight:700; color:var(--color-text); }
.lp-lang-n { font-size:11px; color:var(--color-text-dim); }
.lp-risk {
  font-size:10px; font-weight:700; letter-spacing:0.05em; color:#E91E63;
  border:1px solid #E91E63; border-radius:999px; padding:1px 8px; margin-left:auto;
}
.lp-gens { display:flex; gap:5px; margin:9px 0 6px; }
.lp-gen {
  font-size:10px; font-weight:700; padding:2px 9px; border-radius:5px;
  background:var(--color-surface); color:var(--color-text-dim); opacity:0.5;
}
.lp-gen--on { background:var(--color-accent-c); color:var(--color-bg); opacity:1; }
.lp-names { font-size:11px; color:var(--color-text-dim); }
@media (max-width:560px){ .hf-list,.lp-speakers{ grid-template-columns:1fr; padding:12px; } }

/* ── THREAD RECOGNITION (S539) — own page ── */
.tx-body { padding:18px; }
.tx-step { font-size:11px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--color-text-dim); margin:20px 0 10px; }
.tx-step:first-child { margin-top:0; }
.tx-pair { border:1px solid var(--color-accent-c); border-radius:11px; background:var(--color-bg); padding:15px 16px; }
.tx-pair-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.tx-pair-name { font-size:19px; font-weight:700; color:var(--color-text); }
.tx-conf { font-size:12px; color:var(--color-accent-c); margin-left:auto; }
.tx-approx { font-size:12px; font-style:italic; color:var(--color-text-dim); margin-top:3px; }
.tx-signals { margin:11px 0 0; padding-left:18px; }
.tx-signal { font-size:13px; line-height:1.65; color:var(--color-text-dim); }
.tx-sides { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:11px; }
.tx-side { border:1px solid var(--color-border); border-radius:11px; background:var(--color-bg); padding:14px 15px; }
.tx-side-who { font-size:15px; font-weight:700; color:var(--color-text); }
.tx-side-msg { font-size:12px; line-height:1.6; color:var(--color-text-dim); margin:7px 0 9px; }
.tx-side-state { font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#FF8C42; border:1px solid #FF8C42; border-radius:999px; padding:2px 9px; }
.tx-gate { display:flex; flex-direction:column; gap:8px; }
.tx-gate-rule { font-size:13px; line-height:1.6; color:#00CC44; border-left:2px solid #00CC44; padding-left:12px; }
.tx-gate-rule--no { color:#E91E63; border-left-color:#E91E63; }
.tx-gate-rule--never { color:var(--color-text-dim); border-left-color:var(--color-border); }

/* ── MENTOR & APPRENTICE (S539) ── */
.mt-body { padding:18px; display:flex; flex-direction:column; gap:11px; }
.mt-card { border:1px solid var(--color-border); border-radius:11px; background:var(--color-bg); padding:15px 16px; }
.mt-card--on { border-color:#00CC44; }
.mt-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.mt-person { display:flex; align-items:center; gap:8px; }
.mt-av { width:30px; height:30px; border-radius:50%; background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text-dim); font-size:11px; font-weight:700; line-height:30px; text-align:center; }
.mt-name { font-size:14px; font-weight:700; color:var(--color-text); }
.mt-role { font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--color-text-dim); }
.mt-arrow { color:var(--color-text-dim); font-size:16px; }
.mt-skill { font-size:16px; color:var(--color-text); margin:11px 0 0; }
.mt-state { font-size:11px; color:var(--color-text-dim); margin-top:11px; padding-top:9px; border-top:1px solid var(--color-border); }
.mt-state--on { color:#00CC44; font-weight:700; }
.mt-state--wait { color:#FF8C42; }
@media (max-width:560px){ .tx-body,.mt-body{ padding:12px; } .tx-sides{ grid-template-columns:1fr; } }

/* ── COLLEGIATE NETWORK (S539) ── */
.cg-body { display:flex; flex-direction:column; gap:10px; padding:16px; }
.cg-member { display:flex; align-items:flex-start; gap:11px; border:1px solid var(--color-border); border-radius:11px; background:var(--color-bg); padding:13px 14px; }
.cg-member--lead { border-color:var(--color-accent-c); }
.cg-av { width:34px; height:34px; flex-shrink:0; border-radius:50%; background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text-dim); font-size:12px; font-weight:700; line-height:34px; text-align:center; }
.cg-main { flex:1; min-width:0; }
.cg-name-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.cg-name { font-size:15px; font-weight:700; color:var(--color-text); }
.cg-role { font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-text-dim); }
.cg-bridge { font-size:10px; font-weight:700; letter-spacing:0.05em; color:#00AAFF; border:1px solid #00AAFF; border-radius:999px; padding:1px 8px; }
.cg-origin { font-size:12px; color:var(--color-text-dim); margin-top:3px; }
.cg-langs { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.cg-lang { font-size:10px; padding:1px 7px; border-radius:999px; background:var(--color-surface); color:var(--color-text-dim); }
.cg-iso { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; padding:16px; align-items:center; }
.cg-net { border:1px solid var(--color-border); border-radius:11px; background:var(--color-bg); padding:16px 12px; text-align:center; }
.cg-net--mid { border-color:#00AAFF; }
.cg-net-n { font-size:32px; font-weight:700; line-height:1; color:var(--color-accent-c); }
.cg-net--mid .cg-net-n { color:#00AAFF; }
.cg-net-l { font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-text-dim); margin-top:5px; }
.cg-net-s { font-size:11px; color:var(--color-text-dim); opacity:0.8; margin-top:4px; }

/* ── STUDENT JOURNALS (S539) ── */
.sj-list { display:flex; flex-direction:column; gap:11px; padding:16px; }
.sj-card { border:1px solid var(--color-border); border-radius:11px; background:var(--color-bg); padding:14px 15px; }
.sj-card--private { border-style:dashed; border-color:#E91E63; }
.sj-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; }
.sj-vis { font-size:10px; font-weight:700; letter-spacing:0.06em; padding:2px 9px; border-radius:999px; border:1px solid var(--color-border); color:var(--color-text-dim); }
.sj-vis--private { border-color:#E91E63; color:#E91E63; }
.sj-vis--shared_with_instructor { border-color:#00CC44; color:#00CC44; }
.sj-author { font-size:13px; font-weight:700; color:var(--color-text); }
.sj-date { font-size:11px; color:var(--color-text-dim); margin-left:auto; }
.sj-title { font-size:15px; font-weight:700; color:var(--color-text); margin-top:8px; }
.sj-text { font-size:13px; line-height:1.7; color:var(--color-text); margin:7px 0 0; }
.sj-withheld { font-size:13px; line-height:1.7; font-style:italic; color:#E91E63; margin:7px 0 0; }
@media (max-width:560px){ .cg-body,.cg-iso,.sj-list{ padding:12px; } }

/* S540 — Mentor & Apprentice: opt-in topics, seeking statements, two networks. */
.mt-net { margin:0 0 26px; }
.mt-net + .mt-net { padding-top:22px; border-top:1px solid var(--color-border); }
.mt-net-title { font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--color-text); margin:0 0 6px; }
.mt-net-desc { font-size:13px; line-height:1.7; color:var(--color-text-dim); margin:0 0 15px; }
.mt-sub { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-dim); margin:18px 0 10px; }
.mt-chips { display:flex; flex-wrap:wrap; gap:6px; margin:11px 0 0; }
.mt-chip { display:inline-flex; align-items:baseline; gap:5px; border:1px solid var(--color-border); border-radius:999px; padding:3px 10px; background:var(--color-bg-alt); }
.mt-chip-kind { font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-dim); }
.mt-chip-val { font-size:12px; color:var(--color-text); }
.mt-optin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:11px; }
.mt-optin { border:1px solid var(--color-border); border-radius:11px; background:var(--color-bg); padding:13px 14px; }
.mt-optin-head { display:flex; align-items:center; gap:9px; }
.mt-optin-who { display:flex; flex-direction:column; }
.mt-seeking { font-size:13px; line-height:1.7; font-style:italic; color:var(--color-text); margin:10px 0 0; }
@media (max-width:560px){ .mt-optin-grid{ grid-template-columns:1fr; } }

/* S540 — shared SVG visual layer for the nine richer-visual pages. */
.mxv { display:block; width:100%; height:auto; margin:4px 0 20px; overflow:visible; }
.mxv-seg--1 { fill:#00CC44; } .mxv-seg--2 { fill:#2196F3; } .mxv-seg--3 { fill:#FF8C42; }
.mxv-seg--4 { fill:#9C6ADE; } .mxv-seg--5 { fill:#E91E63; } .mxv-seg--6 { fill:#00BFA5; }
.mxv-cnum { font-size:30px; font-weight:800; fill:var(--color-text); }
.mxv-clbl { font-size:10px; letter-spacing:.08em; text-transform:uppercase; fill:var(--color-text-dim); }
.mxv-leg  { font-size:13px; fill:var(--color-text); }
.mxv-legn { font-size:13px; font-weight:700; fill:var(--color-text); }
.mxv-name { font-size:12px; fill:var(--color-text); }
.mxv-val  { font-size:11px; fill:var(--color-text-dim); }
.mxv-val--zero { font-style:italic; }
.mxv-track { fill:var(--color-bg-alt); }
.mxv-fill  { fill:#00CC44; }
.mxv-big   { font-size:26px; font-weight:800; fill:var(--color-text); }
.mxv-biglbl{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; fill:var(--color-text-dim); }
.mxv-div   { stroke:var(--color-border); stroke-width:1; }

/* S540 — Community Polls: exact-width SVG bars + participation matrix. */
.plv-bar { display:block; width:100%; height:15px; margin:7px 0 0; }
.plv-fill { fill:#2196F3; }
.plv-fill--lead { fill:#00CC44; }
.plv-cell { fill:var(--color-bg-alt); stroke:var(--color-border); stroke-width:1; }
.plv-cell--on { fill:#00CC44; stroke:none; }
.plv-col { font-size:10px; fill:var(--color-text-dim); }
.pl-sec { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-dim); margin:20px 0 10px; }