/* Shared reader chrome: quiet container edges, grouped desktop panel headers,
   and native scrollbar colors. Paper, decorative frames and controls retain
   their own boundaries. This file loads after the reader's theme styles. */
html:has(body[data-theme-tone]) {
  --reader-scroll-thumb: #82745e;
  --reader-scroll-track: #ead9b5;
}
/* Light palettes: muted metal on theme-adapted sand. */
html:has(body[data-theme-tone="light"][data-visual-style="jacobean"]) {
  --reader-scroll-thumb: #806848;
  --reader-scroll-track: #dfc9a5;
}
html:has(body[data-theme-tone="light"][data-visual-style="jerusalem"]) {
  --reader-scroll-thumb: #8b703b;
  --reader-scroll-track: #e5d2a8;
}
html:has(body[data-theme-tone="dark"][data-visual-style="illuminated"]) {
  --reader-scroll-thumb: #948267;
  --reader-scroll-track: #282724;
}
html:has(body[data-theme-tone="dark"][data-visual-style="jacobean"]) {
  --reader-scroll-thumb: #998269;
  --reader-scroll-track: #2a1115;
}
html:has(body[data-theme-tone="dark"][data-visual-style="jerusalem"]) {
  --reader-scroll-thumb: #958460;
  --reader-scroll-track: #191713;
}
/* Include menus and dialogs outside the layout, without changing widths or
   the intentional hidden scrollbars in fullscreen reading. */
html:has(body[data-theme-tone]),
html body[data-theme-tone],
html body[data-theme-tone] * {
  scrollbar-color: var(--reader-scroll-thumb) var(--reader-scroll-track) !important;
}
@media (forced-colors: active) {
  html:has(body[data-theme-tone]),
  html body[data-theme-tone],
  html body[data-theme-tone] * { scrollbar-color: auto !important; }
}

html body[data-visual-style][data-theme-tone] :is(
  .header-action-tabs, .segmented-control, .study-selected-passage,
  .cross-reference-settings, .reference-card, .word-help-card, .word-help-group,
  .display-settings-section, .reading-presets, .reading-preset-slot,
  .edition-apparatus, .concordance-breakdown, .saved-card, .saved-manage-area,
  .saved-import-review, .audio-controls, .audio-scope-actions,
  .mobile-display-profile, .source-intro
) {
  border-color: transparent !important;
  box-shadow: none !important;
}
html body[data-visual-style][data-theme-tone] :is(
  .app-header, .library-panel, .utility-panel, .utility-heading,
  .reader-toolbar, .mobile-nav, .panel-heading
) { border-color: color-mix(in srgb, var(--ink) 18%, transparent) !important; }
html body[data-visual-style][data-theme-tone] :is(
  .study-selected-controls, .display-type-group, .display-page-group,
  .setting-group + .setting-group
) { border-color: transparent !important; }
html body[data-visual-style][data-theme-tone="light"] :is(
  .word-help-card, .saved-card, .display-settings-section
) { border-color: color-mix(in srgb, var(--ink) 14%, transparent) !important; }
html body[data-visual-style][data-theme-tone] .reference-card {
  border-color: color-mix(in srgb, var(--ink) 24%, transparent) !important;
}

/* Mobile drawers keep their opaque sheet surfaces. Desktop panels are part
   of the same canvas; only their compact headings receive a local ground. */
@media (min-width: 901px) {
  html body[data-visual-style][data-theme-tone] :is(
    #reader, #reader-scroll, #library-panel, #utility-panel,
    #reader > .reader-toolbar
  ) {
    background-color: transparent !important;
    background-image: none !important;
  }
  html body[data-visual-style][data-theme-tone] :is(
    .app-header, #library-panel, #reader, #reader-scroll, #reader > .reader-toolbar
  ) { border-color: transparent !important; }
  html body[data-visual-style][data-theme-tone] #utility-panel {
    border-left-color: transparent !important;
  }
  html body[data-visual-style][data-theme-tone] :is(#library-panel, #utility-panel) {
    box-shadow: none !important;
  }
  html body[data-visual-style][data-theme-tone] .app-header {
    box-shadow: 0 2px 8px rgb(0 0 0 / 16%) !important;
  }
  html body[data-visual-style][data-theme-tone="dark"] .app-header {
    box-shadow: 0 2px 8px rgb(0 0 0 / 34%) !important;
  }
  html body[data-visual-style][data-theme-tone] :is(
    #library-panel > .panel-heading, #utility-panel > .utility-heading
  ) {
    border-color: transparent !important;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    box-shadow: inset 0 -1px color-mix(in srgb, var(--ink) 16%, transparent);
  }
}