/* Shared soft-surface layer: keeps each codex's palette and typography while
   reducing the hard panel borders and high-contrast chrome of older layouts. */
body .section-slab,
body .faction-card,
body .dossier-card,
body .entity-card,
body .character-card,
body .timeline-item,
body .influence-card,
body .rel-mini-card {
  border-color: transparent;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

body .section-slab,
body .faction-card,
body .dossier-card,
body .entity-card,
body .character-card,
body .timeline-item,
body .influence-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 32%), rgba(10, 14, 24, .78);
}

body .faction-card:hover,
body .dossier-card:hover,
body .entity-card:hover,
body .character-card:hover,
body .timeline-item:hover {
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .3);
}

body .rel-faction-btn,
body .rel-selector-btn {
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
}

body .rel-faction-btn:hover,
body .rel-selector-btn:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, .04);
  box-shadow: none;
  transform: none;
}

body .rel-faction-btn.active,
body .rel-selector-btn.is-active {
  border-color: transparent;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 3px 0 0 currentColor;
}

body .rel-mini-card,
body .member-chip,
body .modal-rel-chip {
  background: rgba(255, 255, 255, .028);
}

body .modal {
  border-color: rgba(255, 255, 255, .12);
  border-radius: 8px;
  box-shadow: 0 38px 90px rgba(0, 0, 0, .68);
}

@media (hover: none) {
  body .faction-card:hover,
  body .dossier-card:hover,
  body .entity-card:hover,
  body .character-card:hover,
  body .timeline-item:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  body #rel-focus-display,
  body #rel-results,
  body .rel-results,
  body #influence-grid {
    scroll-margin-top: 16px;
  }
}