/* Reference materials share the book palette without dimming the original text.
   The application supplies these variables from reader-appearance.js. */
#reader-panel {
  --ink: var(--panel-fg, #171717);
  --line: var(--panel-border, #dad5e2);
  --muted: var(--panel-muted, #625e68);
  background: var(--panel-bg, #ffffff);
  color: var(--panel-fg, #171717);
  border-color: var(--panel-border, #dad5e2);
  scrollbar-color: var(--panel-muted, #625e68) var(--panel-bg, #ffffff);
}
#reader-panel .reader-panel-heading {
  background: var(--panel-bg, #ffffff);
  color: var(--panel-fg, #171717);
  border-color: var(--panel-border, #dad5e2);
}
#reader-panel .reader-panel-heading .icon-button:hover,
#reader-panel .toc-list button:hover,
#reader-panel .character-list details {
  background: var(--panel-surface, #f6f3f9);
  color: var(--panel-fg, #171717);
}
#reader-panel .word-list article,
#reader-panel .toc-list button,
#reader-panel .character-options,
#reader-panel .character-list article {
  border-color: var(--panel-border, #dad5e2);
}
#reader-panel .small,
#reader-panel .word-list small,
#reader-panel .word-list .example,
#reader-panel .toc-list small,
#reader-panel .character-options label,
#reader-panel .character-list .character-badges {
  color: var(--panel-muted, #625e68);
}
#reader-panel .word-list .example-translation {
  color: var(--panel-fg, #171717);
  border-color: var(--panel-accent, #68458d);
}
#reader-panel .character-list h3 svg,
#reader-panel .character-list summary {
  color: var(--panel-accent, #68458d);
}
#reader-panel .toc-list [aria-current=page] {
  background: var(--panel-surface, #f6f3f9);
  color: var(--panel-accent, #68458d);
}
#reader-panel select,
#reader-panel select option,
#reader-panel .secondary {
  background: var(--panel-surface, #f6f3f9);
  color: var(--panel-fg, #171717);
  border-color: var(--panel-border, #dad5e2);
}
#reader-panel .secondary:hover {
  background: var(--panel-bg, #ffffff);
  border-color: var(--panel-accent, #68458d);
}
#reader-panel :focus-visible {
  outline-color: var(--panel-accent, #68458d);
}
#reader-panel ::-webkit-scrollbar { width: 10px; }
#reader-panel ::-webkit-scrollbar-track { background: var(--panel-bg, #ffffff); }
#reader-panel ::-webkit-scrollbar-thumb {
  background: var(--panel-muted, #625e68);
  border: 3px solid var(--panel-bg, #ffffff);
  border-radius: 10px;
}
.setting-tile .font-preview {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  color: inherit;
}