/* Des surfaces de lecture distinctes ; les statuts et le focus gardent
   leur rôle. Les jetons globaux et les autres étapes restent indépendants. */
:is([data-theme="dark"], html.dark) .elucidation {
  --elucidation-panel: color-mix(in srgb, var(--surface-raised) 55%, var(--surface));
  --elucidation-divider: color-mix(in srgb, var(--border) 35%, var(--surface));
  --text-secondary: color-mix(in srgb, var(--text-primary) 72%, var(--surface));
  --status-warning: var(--ansi-bright-yellow-dark);
}

:is([data-theme="dark"], html.dark) .elucidation :is(.elucidation__reading, .elucidation__original) {
  padding: var(--space-4);
  border: 1px solid var(--elucidation-divider);
  border-radius: var(--radius-window);
  background: var(--elucidation-panel);
}

:is([data-theme="dark"], html.dark) .elucidation .elucidation__original {
  background: color-mix(in srgb, var(--surface-raised) 25%, var(--surface));
}

:is([data-theme="dark"], html.dark) .elucidation .elucidation__column-label small {
  margin-top: var(--space-1);
  font-size: var(--type-legende-size);
  line-height: var(--type-legende-leading);
}

:is([data-theme="dark"], html.dark) .elucidation #structured-statement {
  /* Le remapping sombre de border-stone-300 utilise !important. */
  border-color: var(--elucidation-divider) !important;
  background: var(--surface);
  font-size: var(--type-small-size);
}

:is([data-theme="dark"], html.dark) .elucidation :is(.shape-rail__slot, .shape-rail__incoherences, .local-definition) {
  background: var(--elucidation-panel);
}

:is([data-theme="dark"], html.dark) .elucidation :is(.shape-rail__slot:not([open]), .shape-rail__incoherences[data-incoherences-critique="0"], .shape-rail__incoherences-list, .local-definition) {
  border-color: var(--elucidation-divider);
}

:is([data-theme="dark"], html.dark) .elucidation :is(.shape-rail__incoherence + .shape-rail__incoherence, .shape-rail__row + .shape-rail__row, .local-definition__head, .local-definition__line, .local-definition__row + .local-definition__row) {
  border-color: var(--elucidation-divider);
}

:is([data-theme="dark"], html.dark) .elucidation .shape-rail__slot[open] {
  border-color: var(--text-tension);
}

:is([data-theme="dark"], html.dark) .elucidation .shape-rail__incoherence {
  padding: var(--space-3);
  gap: var(--space-2);
  line-height: var(--type-small-leading);
}

/* La case ouverte relie plusieurs noms : fond discret. Le survol et le
   focus clavier désignent UN nom, avec un contour plus fort. */
:is([data-theme="dark"], html.dark) .elucidation .cite.is-focus {
  background: color-mix(in srgb, var(--tension) 20%, var(--surface));
  color: var(--text-primary);
  outline: 1px solid var(--text-tension);
  outline-offset: 1px;
}

:is([data-theme="dark"], html.dark) .elucidation .elucidation__original .cite.is-focus:not(.is-hover) {
  background: transparent;
  color: inherit;
  outline: 0;
}

:is([data-theme="dark"], html.dark) .elucidation .cite.is-hover {
  background: color-mix(in srgb, var(--accent) 24%, var(--surface));
  color: var(--text-primary);
  outline: 2px solid var(--text-accent-raised);
  outline-offset: 2px;
}

:is([data-theme="dark"], html.dark) .elucidation .cite:focus-visible,
:is([data-theme="dark"], html.dark) .elucidation .elucidation__original .cite.is-focus:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (max-width: 800px) {
  :is([data-theme="dark"], html.dark) .elucidation :is(.elucidation__reading, .elucidation__original) {
    padding: var(--space-3);
  }
}