/* CodXER Evolution rotation map — uses site design tokens */
.cx-erm {
  margin: var(--cx-space-8, 2rem) 0;
  font-family: var(--cx-font-body, "Outfit", sans-serif);
  color: var(--text, #e8e6f0);
}

.cx-erm-heading {
  font-family: var(--cx-font-display, "Cinzel", serif);
  font-size: var(--cx-text-lg, 1.25rem);
  margin: 0 0 var(--cx-space-4, 1rem);
  letter-spacing: var(--cx-track-tight, -0.02em);
}

.cx-erm-subhead {
  font-size: var(--cx-text-sm, 0.875rem);
  text-transform: uppercase;
  letter-spacing: var(--cx-track-caps, 0.08em);
  color: var(--muted, rgba(255, 255, 255, 0.65));
  margin: var(--cx-space-6, 1.5rem) 0 var(--cx-space-2, 0.5rem);
}

.cx-erm-legend {
  font-size: var(--cx-text-sm, 0.875rem);
  padding: var(--cx-space-3, 0.75rem) var(--cx-space-4, 1rem);
  border-left: 3px solid var(--teal, #3dffe8);
  background: var(--cx-surface-1, rgba(14, 11, 32, 0.78));
  border-radius: var(--cx-radius-sm, 10px);
  margin-bottom: var(--cx-space-6, 1.5rem);
}

.cx-erm-layout {
  display: grid;
  gap: var(--cx-space-8, 2rem);
}

@media (min-width: 960px) {
  .cx-erm-layout {
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr);
    align-items: start;
  }
}

.cx-erm-visual,
.cx-erm-tabular {
  background: var(--cx-surface-1, rgba(14, 11, 32, 0.78));
  border: 1px solid var(--cx-border-soft, rgba(255, 255, 255, 0.09));
  border-radius: var(--cx-radius-md, 14px);
  padding: var(--cx-space-5, 1.25rem);
  box-shadow: var(--cx-shadow-panel-sm);
}

.cx-erm-ring {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.cx-erm-ring__edge {
  stroke: var(--cx-core-3, #3dffe8);
  stroke-width: 2;
  opacity: 0.75;
}

.cx-erm-ring__arrowhead {
  fill: var(--cx-core-3, #3dffe8);
}

.cx-erm-ring__orb {
  fill: var(--cx-surface-2, rgba(22, 18, 44, 0.9));
  stroke: var(--cx-border-glow, rgba(139, 77, 255, 0.35));
  stroke-width: 2;
}

.cx-erm-ring__idx {
  fill: var(--gold, #e8c56a);
  font-size: 11px;
  font-family: var(--cx-font-mono, monospace);
  text-anchor: middle;
}

.cx-erm-ring__alias,
.cx-erm-ring__turn {
  fill: var(--text, #e8e6f0);
  font-size: 10px;
  font-family: var(--cx-font-body, sans-serif);
  text-anchor: middle;
}

.cx-erm-ring__turn {
  fill: var(--cx-core-3, #3dffe8);
  font-size: 9px;
  font-weight: 600;
}

.cx-erm-ledger-box {
  fill: var(--cx-surface-0, rgba(6, 5, 18, 0.92));
  stroke: var(--cx-border-soft, rgba(255, 255, 255, 0.09));
}

.cx-erm-ledger-title {
  fill: var(--gold, #e8c56a);
  font-size: 12px;
  font-family: var(--cx-font-display, serif);
  text-anchor: middle;
}

.cx-erm-ledger-line {
  fill: var(--muted, rgba(255, 255, 255, 0.7));
  font-size: 10px;
  font-family: var(--cx-font-body, sans-serif);
  text-anchor: middle;
}

.cx-erm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cx-text-sm, 0.875rem);
  margin-bottom: var(--cx-space-4, 1rem);
}

.cx-erm-table th,
.cx-erm-table td {
  border: 1px solid var(--cx-border-soft, rgba(255, 255, 255, 0.09));
  padding: var(--cx-space-2, 0.5rem) var(--cx-space-3, 0.75rem);
  text-align: left;
  vertical-align: top;
}

.cx-erm-table thead th {
  background: var(--cx-surface-2, rgba(22, 18, 44, 0.65));
  font-weight: 600;
}

.cx-erm-table tbody th[scope="row"] {
  font-family: var(--cx-font-mono, monospace);
  color: var(--cx-core-3, #3dffe8);
}

.cx-erm-illus {
  color: var(--muted, rgba(255, 255, 255, 0.55));
  font-size: var(--cx-text-xs, 0.75rem);
}

.cx-erm-seq code {
  font-family: var(--cx-font-mono, monospace);
  font-size: var(--cx-text-sm, 0.875rem);
}

.cx-erm-semantics {
  margin-top: var(--cx-space-6, 1.5rem);
  padding: var(--cx-space-5, 1.25rem);
}

.cx-erm-semantics__title {
  font-size: var(--cx-text-md, 1.0625rem);
  margin: 0 0 var(--cx-space-3, 0.75rem);
}

.cx-erm-semantics__list,
.cx-erm-semantics__neg-list {
  margin: 0 0 var(--cx-space-3, 0.75rem);
  padding-left: 1.25rem;
}

.cx-erm-evidence {
  margin: 0;
  font-size: var(--cx-text-xs, 0.75rem);
}

#composeRotationMap {
  margin-top: var(--cx-space-6, 1.5rem);
}

#composeRotationMap .cx-erm {
  margin-top: 0;
}

#composeRotationMap .cx-erm-visual {
  max-height: 480px;
  overflow: auto;
}