.cross-refs-overlay {
  position: fixed;
  inset: 0;
  /* Overlay tier (matches .overlay in styles.css); was 1000, which stacked
     below the loading indicator and other overlays. */
  z-index: 3001;
  display: none;
  flex-direction: column;
  background: var(--overlay-bg);
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  opacity: 0;
  visibility: hidden;
}

.cross-refs-overlay.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.cross-refs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  flex-shrink: 0;
  min-height: 56px;
  position: relative;   /* anchors the export menu */
}

/* Export button + its little menu (printable page / email / save to notes) */
.cross-refs-export {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--ui-chrome);
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  font-size: 0.85rem;
  cursor: pointer;
}

.cross-refs-export:hover {
  background: var(--highlight);
}

.cross-refs-export-menu {
  display: none;
  position: absolute;
  top: calc(100% - 6px);
  right: 52px;
  z-index: 30;
  min-width: 180px;
  padding: 6px;
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.cross-refs-export-menu.open {
  display: block;
}

.cross-refs-export-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.cross-refs-export-item:hover {
  background: var(--highlight);
}

@media (max-width: 480px) {
  .cross-refs-export span {
    display: none;   /* icon-only on narrow phones */
  }
}

.cross-refs-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cross-refs-close {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.cross-refs-close:hover {
  background: var(--highlight);
  color: var(--fg);
}

.cross-refs-close svg {
  width: 24px;
  height: 24px;
}

.cross-refs-verse-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  flex-shrink: 0;
}

.cross-refs-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--ui-chrome);
  background: var(--bg);
  color: var(--fg-secondary);
  font-size: 0.85rem;
  font-family: var(--font-family-sans);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cross-refs-nav-btn:hover {
  background: var(--highlight);
  color: var(--fg);
  border-color: var(--fg-tertiary);
}

.cross-refs-nav-btn:active {
  transform: scale(0.98);
}

.cross-refs-nav-btn svg {
  flex-shrink: 0;
}

.cross-refs-filters {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cross-refs-filters::-webkit-scrollbar {
  display: none;
}

.cross-refs-filter-btn {
  padding: 6px 12px;
  border: 1px solid var(--ui-chrome);
  background: transparent;
  color: var(--fg-secondary);
  font-size: 0.8rem;
  border-radius: 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  font-family: var(--font-family-sans);
}

.cross-refs-filter-btn:hover {
  background: var(--highlight);
  color: var(--fg);
}

.cross-refs-filter-btn.active {
  background: var(--button-primary);
  color: var(--button-primary-fg);
  border-color: var(--button-primary);
}

.cross-refs-quality-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  flex-shrink: 0;
  font-family: var(--font-family-sans);
}

.cross-refs-quality-label {
  font-size: 0.8rem;
  color: var(--fg);
  white-space: nowrap;
}

.cross-refs-quality-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--slider-track);
  border-radius: 2px;
  outline: none;
}

.cross-refs-quality-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--slider-thumb);
  border-radius: 50%;
  cursor: pointer;
}

.cross-refs-quality-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--slider-thumb);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.cross-refs-quality-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg);
  min-width: 32px;
  text-align: right;
}

.cross-refs-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.cross-refs-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  color: var(--fg-secondary);
  gap: 12px;
}

.cross-refs-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ui-chrome);
  border-top-color: var(--button-primary);
  border-radius: 50%;
  animation: cross-refs-spin 0.8s linear infinite;
}

@keyframes cross-refs-spin {
  to { transform: rotate(360deg); }
}

.cross-refs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--fg-secondary);
}

.cross-refs-empty-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.cross-refs-count {
  padding: 8px 16px;
  font-size: 0.8rem;
  color: var(--fg-secondary);
  font-family: var(--font-family-sans);
  border-bottom: 1px solid var(--ui-chrome);
}

.cross-refs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cross-ref-item {
  padding: 16px;
  border-bottom: 1px solid var(--ui-chrome);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.cross-ref-item:hover {
  background: var(--highlight);
}

.cross-ref-item:active {
  background: var(--ui-chrome);
}

.cross-ref-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.cross-ref-verse {
  font-weight: 600;
  color: var(--button-primary);
  font-size: 1rem;
}

.cross-ref-score {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-family-sans);
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

.cross-ref-score.score-high {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

[data-theme="dark"] .cross-ref-score.score-high,
[data-theme="oled"] .cross-ref-score.score-high {
  background: rgba(34, 197, 94, 0.25);
  color: #4ade80;
}

.cross-ref-score.score-medium {
  background: rgba(234, 179, 8, 0.15);
  color: #ca8a04;
}

[data-theme="dark"] .cross-ref-score.score-medium,
[data-theme="oled"] .cross-ref-score.score-medium {
  background: rgba(234, 179, 8, 0.25);
  color: #facc15;
}

.cross-ref-score.score-low {
  background: rgba(156, 163, 175, 0.15);
  color: #6b7280;
}

[data-theme="dark"] .cross-ref-score.score-low,
[data-theme="oled"] .cross-ref-score.score-low {
  background: rgba(156, 163, 175, 0.25);
  color: #9ca3af;
}

.cross-ref-score.score-pending {
  background: var(--highlight);
  color: var(--fg-tertiary);
}

.cross-ref-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.cross-ref-type {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--ui-chrome);
  color: var(--fg-secondary);
  font-family: var(--font-family-sans);
  text-transform: capitalize;
}

/* icon chip: stroke SVG masked with the chip's own text color */
.cross-ref-type.type-quotation::before, .cross-ref-type.type-explicit_citation::before,
.cross-ref-type.type-verbal_parallel::before, .cross-ref-type.type-allusion::before,
.cross-ref-type.type-promise_fulfillment::before, .cross-ref-type.type-typology::before,
.cross-ref-type.type-shared_image::before, .cross-ref-type.type-doctrinal_argument::before,
.cross-ref-type.type-narrative_parallel::before, .cross-ref-type.type-contrast::before,
.cross-ref-type.type-word_study::before, .cross-ref-type.type-none::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -1px;
  background-color: currentColor;
  -webkit-mask: var(--xr-icon) center / contain no-repeat;
          mask: var(--xr-icon) center / contain no-repeat;
}
.cross-ref-type.type-quotation { --xr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 6h5v5c0 3-1 5-4 7M14 6h5v5c0 3-1 5-4 7'/%3E%3C/svg%3E"); }
.cross-ref-type.type-explicit_citation { --xr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M12 5C10 4 7 4 4 4v15c3 0 6 0 8 1.5C14 19 17 19 20 19V4c-3 0-6 0-8 1z M12 5v15'/%3E%3C/svg%3E"); }
.cross-ref-type.type-verbal_parallel { --xr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M4 9h16M4 15h16'/%3E%3C/svg%3E"); }
.cross-ref-type.type-allusion { --xr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M9 12h.01M13 8a6 6 0 010 8M17 5a10 10 0 010 14'/%3E%3C/svg%3E"); }
.cross-ref-type.type-promise_fulfillment { --xr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M4 12h11M11 6l6 6-6 6M20 12h.01'/%3E%3C/svg%3E"); }
.cross-ref-type.type-typology { --xr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M6 14l6-6 6 6M8 19l4-4 4 4'/%3E%3C/svg%3E"); }
.cross-ref-type.type-shared_image { --xr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M4 5h16v14H4zM7 15l4-5 3 4 2-2 2 3'/%3E%3C/svg%3E"); }
.cross-ref-type.type-doctrinal_argument { --xr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 20h14M7 20V9M12 20V9M17 20V9M4 9h16l-8-5z'/%3E%3C/svg%3E"); }
.cross-ref-type.type-narrative_parallel { --xr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M4 8h12l-3-3M20 16H8l3 3'/%3E%3C/svg%3E"); }
.cross-ref-type.type-contrast { --xr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M4 7h13l-4-4M20 17H7l4 4'/%3E%3C/svg%3E"); }
.cross-ref-type.type-word_study { --xr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M10 4a6 6 0 106 6 6 6 0 00-6-6zM15 15l5 5'/%3E%3C/svg%3E"); }
.cross-ref-type.type-none { --xr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M9 15l6-6M8 12l-2 2a3.5 3.5 0 005 5l2-2M16 12l2-2a3.5 3.5 0 00-5-5l-2 2'/%3E%3C/svg%3E"); }

.cross-ref-type.type-quotation {
  background: rgba(180, 83, 83, 0.12);
  color: #a04040;
}

.cross-ref-type.type-promise_fulfillment {
  background: rgba(120, 90, 160, 0.12);
  color: #7060a0;
}

.cross-ref-type.type-typology {
  background: rgba(160, 90, 130, 0.12);
  color: #a06080;
}

.cross-ref-type.type-verbal_parallel {
  background: rgba(70, 110, 160, 0.12);
  color: #4070a0;
}

.cross-ref-type.type-allusion {
  background: rgba(60, 140, 110, 0.12);
  color: #408070;
}

.cross-ref-type.type-doctrinal_argument {
  background: rgba(180, 140, 60, 0.12);
  color: #a08040;
}

.cross-ref-type.type-explicit_citation {
  background: rgba(180, 83, 83, 0.15);
  color: #8a3636;
}

.cross-ref-type.type-shared_image {
  background: rgba(70, 150, 150, 0.12);
  color: #3f8a8a;
}

.cross-ref-type.type-narrative_parallel {
  background: rgba(100, 110, 140, 0.12);
  color: #5a6a8a;
}

.cross-ref-type.type-contrast {
  background: rgba(150, 90, 60, 0.12);
  color: #96604a;
}

.cross-ref-type.type-word_study {
  background: rgba(90, 90, 170, 0.12);
  color: #5a5aaa;
}

/* type-none keeps the neutral base chip (--ui-chrome) */

[data-theme="dark"] .cross-ref-type.type-quotation,
[data-theme="oled"] .cross-ref-type.type-quotation {
  background: rgba(180, 100, 100, 0.2);
  color: #d09090;
}

[data-theme="dark"] .cross-ref-type.type-promise_fulfillment,
[data-theme="oled"] .cross-ref-type.type-promise_fulfillment {
  background: rgba(140, 110, 180, 0.2);
  color: #b0a0c0;
}

[data-theme="dark"] .cross-ref-type.type-typology,
[data-theme="oled"] .cross-ref-type.type-typology {
  background: rgba(180, 110, 150, 0.2);
  color: #d0a0b0;
}

[data-theme="dark"] .cross-ref-type.type-verbal_parallel,
[data-theme="oled"] .cross-ref-type.type-verbal_parallel {
  background: rgba(90, 130, 180, 0.2);
  color: #90b0d0;
}

[data-theme="dark"] .cross-ref-type.type-allusion,
[data-theme="oled"] .cross-ref-type.type-allusion {
  background: rgba(80, 160, 130, 0.2);
  color: #90c0b0;
}

[data-theme="dark"] .cross-ref-type.type-doctrinal_argument,
[data-theme="oled"] .cross-ref-type.type-doctrinal_argument {
  background: rgba(200, 160, 80, 0.2);
  color: #d0c090;
}

[data-theme="dark"] .cross-ref-type.type-explicit_citation,
[data-theme="oled"] .cross-ref-type.type-explicit_citation {
  background: rgba(180, 100, 100, 0.25);
  color: #c08080;
}

[data-theme="dark"] .cross-ref-type.type-shared_image,
[data-theme="oled"] .cross-ref-type.type-shared_image {
  background: rgba(90, 170, 170, 0.2);
  color: #90c8c8;
}

[data-theme="dark"] .cross-ref-type.type-narrative_parallel,
[data-theme="oled"] .cross-ref-type.type-narrative_parallel {
  background: rgba(120, 130, 160, 0.2);
  color: #a0aac8;
}

[data-theme="dark"] .cross-ref-type.type-contrast,
[data-theme="oled"] .cross-ref-type.type-contrast {
  background: rgba(170, 110, 80, 0.2);
  color: #c89a80;
}

[data-theme="dark"] .cross-ref-type.type-word_study,
[data-theme="oled"] .cross-ref-type.type-word_study {
  background: rgba(110, 110, 190, 0.2);
  color: #a0a0d8;
}

/* 'Top connections' expander */
.cross-refs-show-all {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--ui-chrome);
  border-radius: 8px;
  color: var(--button-primary);
  font-family: var(--font-family-sans);
  font-size: 0.9rem;
  cursor: pointer;
}

.cross-refs-show-all:hover {
  background: var(--highlight);
}

.cross-ref-verse-text {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--highlight);
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}

.cross-ref-passage {
  font-family: var(--font-family-serif);
  font-size: 0.95rem;
  color: var(--fg);
  line-height: 1.65;
  margin: 0;
  font-style: italic;
}

.cross-ref-citation {
  font-family: var(--font-family-sans);
  font-size: 0.8rem;
  color: var(--fg-secondary);
  margin: 6px 0 0 0;
  text-align: right;
}

.cross-ref-explanation-box {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--highlight);
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}

.cross-ref-explanation {
  font-size: 0.9rem;
  color: var(--fg);
  line-height: 1.55;
  margin: 0;
}

.cross-ref-votes {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--fg-tertiary);
  font-family: var(--font-family-sans);
}

.cross-ref-votes svg {
  width: 12px;
  height: 12px;
}

.cross-ref-expand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 0;
  font-size: 0.8rem;
  color: var(--button-primary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-sans);
}

.cross-ref-expand svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.cross-ref-expand.expanded svg {
  transform: rotate(180deg);
}

.cross-ref-detail {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ui-chrome);
}

.cross-ref-detail.visible {
  display: block;
}

.cross-ref-detail-text {
  font-size: 0.9rem;
  color: var(--fg);
  line-height: 1.55;
  margin: 0;
}

@media (min-width: 768px) {
  .cross-refs-overlay {
    inset: 5vh 10vw;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  }

  .cross-refs-overlay::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: -1;
  }

  .cross-refs-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #FFFFFF;
    border-radius: 12px;
    z-index: -1;
  }

  [data-theme="dark"] .cross-refs-overlay::after {
    background: #2C2C2E;
  }

  [data-theme="oled"] .cross-refs-overlay::after {
    background: #000000;
  }
}

/* Radial Chart View */
.cross-refs-view-toggle {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  flex-shrink: 0;
  /* Five buttons no longer fit a phone - the row scrolls sideways instead
     of hiding the Bridge button off-screen. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cross-refs-view-toggle::-webkit-scrollbar { display: none; }
.cross-refs-view-toggle .cross-refs-view-btn { flex-shrink: 0; }

.cross-refs-view-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--ui-chrome);
  background: transparent;
  color: var(--fg-secondary);
  font-size: 0.85rem;
  font-family: var(--font-family-sans);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cross-refs-view-btn:hover {
  background: var(--highlight);
  color: var(--fg);
}

.cross-refs-view-btn.active {
  background: var(--button-primary);
  color: var(--button-primary-fg);
  border-color: var(--button-primary);
}

.cross-refs-view-btn svg {
  width: 16px;
  height: 16px;
}

/* Chart Container */
.cross-refs-chart-container {
  flex: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
}

[data-theme="dark"] .cross-refs-chart-container,
[data-theme="oled"] .cross-refs-chart-container {
  background: #1c1c1e;
}

.cross-refs-chart-container.active {
  display: flex;
}

.cross-refs-chart-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
}

.cross-refs-chart-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* Center Hub */
.chart-center-hub {
  cursor: default;
}

.chart-center-bg {
  fill: #ffffff;
  stroke: #e5e5ea;
  stroke-width: 2;
}

[data-theme="dark"] .chart-center-bg,
[data-theme="oled"] .chart-center-bg {
  fill: #2c2c2e;
  stroke: #48484a;
}

.chart-center-verse {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-family-sans);
  fill: var(--fg);
  text-anchor: middle;
  dominant-baseline: middle;
}

.chart-center-count {
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-family-sans);
  fill: var(--fg-secondary);
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Radial Arc Segments */
.chart-arc {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.chart-arc:hover {
  opacity: 0.85;
}

.chart-arc:hover .chart-arc-path {
  filter: brightness(1.1);
}

.chart-arc:active {
  opacity: 0.7;
}

.chart-arc-path {
  transition: filter 0.15s ease;
}

.chart-arc-text {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-family-sans);
  fill: #ffffff;
  pointer-events: none;
  dominant-baseline: central;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Chart Sort Buttons */
.cross-refs-chart-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--ui-chrome);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.chart-sort-btn {
  padding: 10px 20px;
  border: 1px solid var(--ui-chrome);
  background: #ffffff;
  color: var(--fg-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--font-family-sans);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

[data-theme="dark"] .chart-sort-btn,
[data-theme="oled"] .chart-sort-btn {
  background: #2c2c2e;
}

.chart-sort-btn:hover {
  background: var(--highlight);
  color: var(--fg);
}

.chart-sort-btn.active {
  background: var(--button-primary);
  color: var(--button-primary-fg);
  border-color: var(--button-primary);
}

/* Navigation breadcrumb for chart */
.cross-refs-chart-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  font-family: var(--font-family-sans);
  font-size: 0.85rem;
  color: var(--fg-secondary);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cross-refs-chart-breadcrumb::-webkit-scrollbar {
  display: none;
}

.chart-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.chart-breadcrumb-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--ui-chrome);
  color: var(--fg-secondary);
  font-size: 0.8rem;
  font-family: var(--font-family-sans);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chart-breadcrumb-btn:hover {
  background: var(--highlight);
  color: var(--fg);
}

.chart-breadcrumb-btn.current {
  background: var(--button-primary);
  color: var(--button-primary-fg);
  border-color: var(--button-primary);
  cursor: default;
}

.chart-breadcrumb-arrow {
  color: var(--fg-tertiary);
}

/* Chart Bar Action Sheet */
.chart-bar-action-sheet {
  position: fixed;
  inset: 0;
  /* Above the overlay (3001) and the bridge panel (3900) - at 2000 this
     sheet opened INVISIBLY BEHIND the overlay (review blocker; broken
     since the overlay's z was raised to 3001). */
  z-index: 4000;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.chart-bar-action-sheet.active {
  display: flex;
}

.chart-action-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.chart-action-content {
  position: relative;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
  padding: 16px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: chart-action-slide-up 0.25s ease-out;
}

@keyframes chart-action-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.chart-action-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg);
  text-align: center;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--ui-chrome);
  margin-bottom: 4px;
}

.chart-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: none;
  background: var(--highlight);
  color: var(--fg);
  font-size: 1rem;
  font-family: var(--font-family-sans);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.chart-action-btn:hover {
  background: var(--ui-chrome);
}

.chart-action-btn svg {
  flex-shrink: 0;
  color: var(--button-primary);
}

.chart-action-cancel {
  margin-top: 8px;
  justify-content: center;
  background: transparent;
  color: var(--fg-secondary);
}

.chart-action-cancel:hover {
  background: var(--highlight);
}

/* List item highlight for navigation */
.cross-ref-highlight {
  animation: cross-ref-pulse 2.5s ease-out;
}

@keyframes cross-ref-pulse {
  0% { background: var(--button-primary); }
  100% { background: transparent; }
}

/* Comparison Panel */
.comparison-panel {
  background: var(--highlight);
  border: 1px solid var(--ui-chrome);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.comparison-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.comparison-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg);
}

.comparison-close {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--fg-secondary);
  border-radius: 6px;
  transition: background var(--transition-fast);
}

.comparison-close:hover {
  background: var(--ui-chrome);
  color: var(--fg);
}

.comparison-verses {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 600px) {
  .comparison-verses {
    flex-direction: row;
    align-items: stretch;
  }

  .comparison-verse {
    flex: 1;
  }

  .comparison-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
  }

  .comparison-arrow svg {
    transform: none;
  }
}

.comparison-verse {
  background: var(--bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 10px;
  padding: 14px;
}

.comparison-source {
  border-left: 3px solid var(--button-primary);
}

.comparison-target {
  border-left: 3px solid #10b981;
}

.comparison-verse-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-tertiary);
  margin-bottom: 6px;
}

.comparison-verse-ref {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.comparison-verse-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg-secondary);
  font-style: italic;
  margin: 0;
}

.comparison-no-text {
  color: var(--fg-tertiary);
  font-style: normal;
}

.comparison-arrow {
  display: flex;
  justify-content: center;
  padding: 8px 0;
  color: var(--fg-tertiary);
}

.comparison-arrow svg {
  transform: rotate(90deg);
}

.comparison-explanation {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-chrome);
}

.comparison-explanation-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-tertiary);
  margin-bottom: 8px;
}

.comparison-explanation p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--fg);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .cross-refs-chart-wrapper {
    padding: 10px;
  }

  .chart-bar-text {
    font-size: 7px;
  }

  .chart-center-verse {
    font-size: 14px;
  }

  .chart-center-count {
    font-size: 10px;
  }

  .cross-refs-chart-controls {
    padding: 12px;
    gap: 6px;
  }

  .chart-sort-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
  }
}

/* ========================================
   Big List View - Vertical Bar Chart
   ======================================== */

.cross-refs-biglist-container {
  flex: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
}

[data-theme="dark"] .cross-refs-biglist-container,
[data-theme="oled"] .cross-refs-biglist-container {
  background: #1c1c1e;
}

.cross-refs-biglist-container.active {
  display: flex;
}

/* Compact inline header */
.biglist-header-inline {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ui-chrome);
}

.biglist-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fg);
  font-family: var(--font-family-sans);
}

.biglist-count {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fg-secondary);
}

/* Chart area with bars - takes most space */
.biglist-chart {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Individual bar */
.biglist-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.biglist-bar:hover {
  transform: scale(1.01);
}

.biglist-bar:active {
  opacity: 0.8;
  transform: scale(0.99);
}

.biglist-bar-fill {
  height: 100%;
  min-width: 50px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.biglist-bar-text {
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-family-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.biglist-bar-value {
  flex-shrink: 0;
  width: 28px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--fg-secondary);
  font-family: var(--font-family-sans);
  text-align: right;
}

/* Sort controls at bottom (like chart) */
.biglist-controls {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--ui-chrome);
}

.biglist-sort-btn {
  padding: 8px 16px;
  border: 1px solid var(--ui-chrome);
  background: #ffffff;
  color: var(--fg-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: var(--font-family-sans);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-theme="dark"] .biglist-sort-btn,
[data-theme="oled"] .biglist-sort-btn {
  background: #2c2c2e;
}

.biglist-sort-btn:hover {
  background: var(--highlight);
  color: var(--fg);
}

.biglist-sort-btn.active {
  background: var(--button-primary);
  color: var(--button-primary-fg);
  border-color: var(--button-primary);
}

/* Responsive - mobile adjustments */
@media (max-width: 600px) {
  .biglist-header-inline {
    padding: 8px 12px;
  }
  
  .biglist-title {
    font-size: 1rem;
  }
  
  .biglist-chart {
    padding: 6px 10px;
    gap: 3px;
  }
  
  .biglist-bar {
    height: 28px;
  }
  
  .biglist-bar-fill {
    min-width: 40px;
    padding: 0 8px;
  }
  
  .biglist-bar-text {
    font-size: 0.75rem;
  }
  
  .biglist-bar-value {
    font-size: 0.75rem;
    width: 24px;
  }
  
  .biglist-controls {
    padding: 10px 12px;
    gap: 6px;
  }
  
  .biglist-sort-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

/* ---------------------------------------------------------------------------
   Peek-in-place (xrefs 2.1): tap a ref card to expand the target verse with
   one verse of context and a "Read there" button. Token-native, 3-theme safe.
--------------------------------------------------------------------------- */
.cross-ref-peek {
  margin-top: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--ui-chrome);
  background: var(--bg-elevated);
  border-radius: 8px;
}

.peek-verse {
  font-family: var(--font-family-serif);
  color: var(--fg);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 6px;
}

.peek-verse-num {
  color: var(--verse-num);
  font-size: 0.7em;
  margin-right: 2px;
}

.peek-verse-target {
  background: var(--highlight);
  border-left: 3px solid var(--accent);
  padding-left: 8px;
  border-radius: 4px;
}

.peek-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.peek-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--ui-chrome);
  background: transparent;
  color: var(--fg-secondary);
  font-family: var(--font-family-sans);
  font-size: 0.85rem;
  cursor: pointer;
}

.peek-btn:hover {
  background: var(--highlight);
  color: var(--fg);
}

.peek-read-there {
  background: var(--button-primary);
  border-color: var(--button-primary);
  color: var(--button-primary-fg);
}

.peek-error {
  color: var(--fg-secondary);
  font-size: 0.85rem;
  margin: 0;
}

.cross-ref-item.peek-open {
  border-color: var(--accent);
}

/* The card's own single-verse quote would duplicate inside the peek. */
.cross-ref-item.peek-open .cross-ref-verse-text {
  display: none;
}

/* ---------------------------------------------------------------------------
   Reference trails (xrefs 2.2): breadcrumb strip of followed refs under the
   overlay header, with save / share / note actions and a saved-trails popover.
--------------------------------------------------------------------------- */
.cross-refs-trail {
  position: relative; /* anchors .trail-popover */
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  flex-shrink: 0;
}

.cross-refs-trail.visible {
  display: flex;
}

.trail-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

.trail-chip {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-chrome);
  background: transparent;
  color: var(--fg-secondary);
  font-size: 0.78rem;
  font-family: var(--font-family-sans);
  cursor: pointer;
  white-space: nowrap;
}

.trail-chip.current {
  background: var(--button-primary);
  color: var(--button-primary-fg);
  border-color: var(--button-primary);
}

.trail-arrow {
  color: var(--fg-tertiary);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.trail-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.trail-act {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--ui-chrome);
  background: transparent;
  color: var(--fg-secondary);
  font-size: 0.72rem;
  font-family: var(--font-family-sans);
  cursor: pointer;
}

.trail-act:hover {
  background: var(--highlight);
  color: var(--fg);
}

.trail-popover {
  position: absolute;
  z-index: 10;
  top: 100%;
  right: 12px;
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  max-height: 40vh;
  overflow-y: auto;
  min-width: 220px;
}

.trail-popover-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--ui-chrome);
  color: var(--fg);
  font-size: 0.85rem;
  font-family: var(--font-family-sans);
  cursor: pointer;
  text-align: left;
}

.trail-popover-item:hover {
  background: var(--highlight);
}

.trail-popover-meta {
  color: var(--fg-tertiary);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.trail-popover-del {
  color: var(--fg-tertiary);
  padding: 0 4px;
  flex-shrink: 0;
}

.trail-popover-del:hover {
  color: var(--button-danger);
}

.trail-popover-empty {
  padding: 12px;
  color: var(--fg-secondary);
  font-size: 0.85rem;
  font-family: var(--font-family-sans);
}

/* ---------------------------------------------------------------------------
   Whole-Bible arc view (xrefs 2.3): 66-book spine with score-weighted arcs.
   Canvas colors are sampled from the CSS variables at draw time, so the
   container itself just supplies the themed background.
--------------------------------------------------------------------------- */
.cross-refs-arc-container {
  flex: 1;
  display: none;
  position: relative;
  background: var(--overlay-bg);
  /* On narrow screens the canvas is laid out wider than the container
     (min 640px logical width, set by JS) and pans sideways. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.cross-refs-arc-container.active {
  display: flex;
}

.cross-refs-arc-container canvas {
  /* width set per-render by JS (max of container width and 640px) */
  height: 100%;
  display: block;
  touch-action: manipulation;
}

.cross-refs-arc-tip {
  position: absolute;
  pointer-events: none;
  background: var(--overlay-bg);
  color: var(--fg);
  border: 1px solid var(--ui-chrome-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-family: var(--font-family-sans);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 120ms;
  max-width: 260px;
  z-index: 5;
}

.cross-refs-arc-tip.visible {
  opacity: 1;
}

/* Arc stepper: slider + arrows walk the bar tick by tick; the info box shows
   the selected reference and passage, and its Explore button commits. */
.cross-refs-arc-stepper {
  display: none;
  padding: 6px 12px 10px;
}

.cross-refs-arc-stepper.active {
  display: block;
}

.arc-stepper-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.arc-step-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--ui-chrome-border);
  background: var(--overlay-bg);
  color: var(--fg);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.arc-step-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.arc-step-slider {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--button-primary, #0066cc);
  height: 28px;
}

.arc-info-box {
  margin-top: 8px;
  border: 1px solid var(--ui-chrome-border);
  border-radius: 10px;
  background: var(--overlay-bg);
  padding: 10px 12px;
  font-family: var(--font-family-sans);
  font-size: 0.85rem;
  /* FIXED height (owner d0df90ec): a variable-height box shoved the arrow
     row around as passages changed length. The box owns a constant slot and
     scrolls internally; the controls above it never move. */
  height: 172px;
  overflow-y: auto;
  box-sizing: border-box;
}

.arc-info-box .arc-info-hint {
  opacity: 0.7;
}

.arc-info-box .arc-info-ref {
  font-weight: 600;
  margin-bottom: 2px;
}

.arc-info-box .arc-info-meta {
  font-weight: 400;
  opacity: 0.75;
  font-size: 0.75rem;
}

.arc-info-box .arc-info-passage {
  font-style: italic;
  opacity: 0.9;
  margin: 6px 0;
}

.arc-info-box .arc-info-open {
  display: inline-block;
  margin-top: 4px;
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  background: var(--button-primary, #0066cc);
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Empty-state overlay inside the arc container */
.cross-refs-arc-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Arc view works at every width since 20260731e: on phones the canvas keeps
   a 640px minimum layout width inside a sideways-scrolling container, so the
   66-book spine stays readable and the view is no longer hidden on mobile. */

@media (prefers-reduced-motion: reduce) {
  .cross-refs-arc-tip {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Admin curation (xrefs 3.3)

   The pin mark, the "Added" chip and the accent edge are visible to EVERYONE
   (curation reorders the list for all readers). The buttons and the add panel
   only ever render for a logged-in admin - cross-refs.js emits no markup for
   anyone else. Token-native so light, dark and oled all read correctly.
--------------------------------------------------------------------------- */

.cross-ref-item.cross-ref-pinned {
  border-left: 3px solid var(--accent-color);
}

.cross-ref-item.cross-ref-added {
  border-left: 3px dashed var(--accent-color);
}

/* .cross-ref-header is space-between; the auto margin keeps the mark next to
   the reference and leaves the score on the right where it has always been. */
.cross-ref-pin-mark,
.cross-ref-added-chip {
  margin-right: auto;
}

.cross-ref-pin-mark {
  display: inline-flex;
  align-items: center;
  color: var(--accent-color);
  flex-shrink: 0;
}

.cross-ref-pin-mark svg {
  width: 14px;
  height: 14px;
}

.cross-ref-added-chip {
  font-family: var(--font-family-sans);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  border-radius: 10px;
  padding: 1px 7px;
  flex-shrink: 0;
}

.cross-ref-admin-bar {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
}

.cr-admin-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-secondary);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

.cr-admin-btn svg {
  width: 16px;
  height: 16px;
}

.cr-admin-btn:hover,
.cr-admin-btn:focus-visible {
  opacity: 1;
  background: var(--ui-chrome-subtle);
  border-color: var(--ui-chrome-border);
}

.cr-admin-btn:active {
  opacity: 1;
}

/* Add box + hidden chips, above the card list */
.cr-admin-panel {
  margin: 0 0 12px;
  padding: 10px;
  border: 1px dashed var(--ui-chrome-border);
  border-radius: 8px;
  background: var(--bg-elevated);
  font-family: var(--font-family-sans);
}

.cr-admin-add {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cr-admin-input {
  flex: 1 1 140px;
  min-width: 0;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--fg);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
}

.cr-admin-input-note {
  flex: 2 1 180px;
}

.cr-admin-input:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: -1px;
}

.cr-admin-add-btn {
  flex: 0 0 auto;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--accent-fg);
  background: var(--accent-bg);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.cr-admin-add-btn:hover,
.cr-admin-add-btn:focus-visible {
  background: var(--button-primary-hover);
}

.cr-hidden-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.cr-hidden-label {
  font-size: 0.78rem;
  color: var(--fg-secondary);
}

.cr-hidden-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 9px;
  font-size: 0.78rem;
  color: var(--fg-secondary);
  background: var(--ui-chrome);
  border: 1px solid var(--ui-chrome-border);
  border-radius: 12px;
}

.cr-chip-x {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}

.cr-chip-x svg {
  width: 12px;
  height: 12px;
}

.cr-chip-x:hover,
.cr-chip-x:focus-visible {
  opacity: 1;
  background: var(--ui-chrome-hover);
}

@media (prefers-reduced-motion: reduce) {
  .cr-admin-btn {
    transition: none;
  }
}

/* The chapter connection-density strip ("skyline") lived here until
   2026-08-15 - removed at the owner's request, replaced by the reader's
   under-verse cross-reference lines (styles in styles.css). */

/* Reference trail on phones: the chips were squeezed to ~130px beside the
   action buttons. Give them their own full-width row above the actions. */
@media (max-width: 600px) {
  .cross-refs-trail {
    flex-wrap: wrap;
  }
  .trail-chips {
    flex: 1 0 100%;
    order: -1;
  }
  .trail-act {
    padding: 8px 10px;
  }
}


/* --- Cross-ref editing (xrefs S2): score popover, explanation editor,
       bulk mode. All admin-only DOM - the public never renders any of it. */

.cr-score-chip {
  cursor: pointer;
  border: 1px dashed transparent;
  background: inherit;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.cr-score-chip:hover,
.cr-score-chip:focus-visible {
  border-color: currentColor;
}
.cr-score-chip.cr-score-none {
  color: var(--fg-tertiary, #888);
  background: transparent;
  border: 1px dashed var(--fg-tertiary, #888);
  border-radius: 10px;
  padding: 1px 8px;
}

.cr-edited-mark {
  font-size: 0.72em;
  opacity: 0.85;
  line-height: 1;
}
.cr-edited-expl {
  float: right;
  color: var(--accent, #2b6cb0);
  font-size: 0.8em;
  margin-left: 6px;
}

/* The card editor (admin): score + explanation together, inside the card */
.cr-card-editor {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--accent, #2b6cb0);
  border-radius: 10px;
  background: var(--bg-elevated, var(--bg, #fff));
  font-family: var(--font-family-sans, system-ui, sans-serif);
  font-size: 13px;
}
.cr-ed-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  margin: 0 0 4px;
}
.cr-ed-score-val {
  font-variant-numeric: tabular-nums;
  color: var(--accent, #2b6cb0);
  font-weight: 700;
}
.cr-ed-slider {
  width: 100%;
  margin: 2px 0 8px;
  accent-color: var(--accent, #2b6cb0);
}
.cr-ed-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.cr-ed-preset {
  border: 1px solid var(--ui-chrome, #ccc);
  background: transparent;
  color: inherit;
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
  font-size: 12px;
  min-height: 28px;
}
.cr-ed-preset:hover { background: var(--highlight, rgba(128,128,128,0.15)); }
.cr-ed-perfect { font-weight: 700; }
.cr-ed-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  resize: vertical;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid var(--ui-chrome, #ccc);
  background: var(--bg, #fff);
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.cr-ed-hint {
  color: var(--fg-secondary, #777);
  font-size: 11.5px;
  margin: 4px 0 10px;
}
.cr-ed-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.cr-ed-actions button {
  border: 1px solid var(--ui-chrome, #ccc);
  background: transparent;
  color: inherit;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  min-height: 32px;
}
.cr-ed-actions button:hover { background: var(--highlight, rgba(128,128,128,0.15)); }
.cr-ed-save {
  background: var(--accent, #2b6cb0) !important;
  border-color: var(--accent, #2b6cb0) !important;
  color: #fff !important;
  font-weight: 600;
}
.cr-ed-restore { margin-left: auto; }

/* The labelled Edit button in a card's admin row */
.cr-admin-edit-btn {
  width: auto;
  padding: 0 10px;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
}

/* === Big List why-line (owner request): one quiet sentence per bar ======= */
.biglist-why {
  margin: -2px 2px 8px;
  font-size: 0.8rem;
  color: var(--fg-secondary);
  font-family: var(--font-family-sans);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  cursor: pointer;
}
@media (max-width: 640px) {
  .biglist-why { -webkit-line-clamp: 2; }
}

/* === Chart round 2: spin, sweep, magnify, why-strip ====================== */
.cross-refs-chart-svg { touch-action: none; }

.chart-rotor { will-change: transform; }
.chart-rotor-glide { transition: transform .5s cubic-bezier(.22, .9, .3, 1); }

.chart-arc { cursor: pointer; }
.chart-arc-path {
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform .16s ease, filter .16s ease;
  animation: chartGrow .45s cubic-bezier(.2, .8, .3, 1) backwards;
}
.chart-arc:hover .chart-arc-path,
.chart-arc.touched .chart-arc-path {
  transform: scale(1.06);
  filter: brightness(1.12);
}
@keyframes chartGrow { from { transform: scaleX(0); } }

.chart-arc-text {
  pointer-events: none;
  animation: chartFadeIn .3s ease backwards;
}
@keyframes chartFadeIn { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .chart-arc-path, .chart-arc-text { animation: none; }
  .chart-rotor-glide { transition: none; }
}

.cross-refs-why-strip {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: none;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--ui-chrome-border, #ccc);
  border-radius: 10px;
  background: var(--overlay-bg, var(--bg, #fff));
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  font-family: var(--font-family-sans, system-ui, sans-serif);
  font-size: 0.85rem;
  cursor: pointer;
}
.cross-refs-chart-container.active .cross-refs-why-strip { display: flex; }
.why-strip-ref { font-weight: 600; white-space: nowrap; }
.why-strip-score { color: var(--accent, #2b6cb0); font-weight: 600; white-space: nowrap; }
.why-strip-why {
  flex: 1;
  min-width: 0;
  color: var(--fg-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.why-strip-hint { color: var(--fg-tertiary, #999); }
.why-strip-chev { width: 16px; height: 16px; flex: none; color: var(--fg-tertiary, #999); }
@media (max-width: 640px) {
  .why-strip-why {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* === The Testament Bridge (fifth view) =================================== */
.cross-refs-bridge-container {
  display: none;
  padding: 4px 12px 16px;
  font-family: var(--font-family-sans, system-ui, sans-serif);
}
/* The container is a flex child of the fixed overlay: without flex:1 +
   min-height:0 + its own scrollbar, a tall bridge (many books) clipped
   off-screen with no way to reach the rest (review finding). */
.cross-refs-bridge-container.active {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bridge-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.bridge-caption { font-size: 0.78rem; color: var(--fg-secondary); }
.bridge-lens-btn {
  margin-left: auto;
  flex: none;
  border: 1px solid var(--ui-chrome-border, #ccc);
  background: transparent;
  color: var(--fg, inherit);
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
}
.bridge-lens-btn.active {
  background: var(--accent, #2b6cb0);
  border-color: var(--accent, #2b6cb0);
  color: #fff;
}

.bridge-svg { width: 100%; height: auto; display: block; }
.bridge-testament-label {
  fill: var(--fg-tertiary, #999);
  font-size: 11px;
  font-family: var(--font-family-sans, system-ui, sans-serif);
}
.bridge-src rect { fill: var(--accent, #2b6cb0); }
.bridge-src text {
  fill: #fff;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-family-sans, system-ui, sans-serif);
}
.bridge-src .bridge-src-sub { font-size: 9.5px; font-weight: 400; opacity: 0.85; }
.bridge-book { cursor: pointer; }
.bridge-book rect {
  fill: var(--ui-chrome, #f0f0f0);
  stroke: var(--ui-chrome-border, #ccc);
  stroke-width: 1;
  transition: fill .15s ease;
}
.bridge-book:hover rect { fill: var(--highlight, rgba(128, 128, 128, 0.15)); }
.bridge-book text {
  fill: var(--fg, #1a1a1a);
  font-size: 11px;
  font-family: var(--font-family-sans, system-ui, sans-serif);
}
.bridge-ribbon {
  fill: none;
  opacity: 0.8;
  stroke-linecap: round;
  cursor: pointer;
}
.bridge-ribbon:hover { opacity: 1; }
.bridge-lens-on .bridge-ribbon:not(.bridge-prophecy) { opacity: 0.1; }

.bridge-same {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--ui-chrome-border, #ccc);
  border-radius: 10px;
  background: transparent;
  color: var(--fg-secondary);
  font-family: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.bridge-same:hover { background: var(--highlight, rgba(128, 128, 128, 0.08)); }
.bridge-empty {
  color: var(--fg-secondary);
  padding: 28px 8px;
  text-align: center;
  font-size: 0.9rem;
}

.bridge-panel { position: fixed; inset: 0; z-index: 3900; }
.bridge-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.bridge-panel-sheet {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 560px;
  max-height: 65vh;
  display: flex;
  flex-direction: column;
  background: var(--overlay-bg, var(--bg, #fff));
  border: 1px solid var(--ui-chrome-border, #ccc);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  animation: bridgeSheetUp .25s ease;
}
@keyframes bridgeSheetUp {
  from { transform: translate(-50%, 40px); opacity: 0; }
}
.bridge-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fg);
  border-bottom: 1px solid var(--ui-chrome-border, rgba(128, 128, 128, 0.25));
}
.bridge-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg-secondary);
  padding: 4px;
  display: inline-flex;
}
.bridge-panel-close svg { width: 18px; height: 18px; }
.bridge-panel-list { overflow-y: auto; padding: 6px 8px 10px; }
.bridge-panel-row {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(128, 128, 128, 0.14);
  padding: 10px 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--fg);
}
.bridge-panel-row:last-child { border-bottom: none; }
.bridge-panel-row:hover { background: var(--highlight, rgba(128, 128, 128, 0.08)); }
.bridge-row-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}
.bridge-row-score { color: var(--accent, #2b6cb0); flex: none; }
.bridge-row-why {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--fg-secondary);
  line-height: 1.4;
}