/* Reversible material layer: Classic retains the original stylesheet.
   Explicit control scopes keep Scripture, game answers and boards opaque.
   Never alter control geometry, availability, transforms or fade behavior. */
html[data-control-material="glass"] {
  --glass-solid: var(--panel);
  --glass-fill: var(--glass-solid);
  --glass-ink: var(--ink);
  --glass-edge: color-mix(in srgb, var(--ink) 20%, var(--panel));
  --glass-reflection: rgba(255, 255, 255, .28);
  --glass-light: rgba(255, 255, 255, .8);
  --glass-shadow: 0 6px 18px rgba(15, 28, 32, .12), inset 0 1px 0 var(--glass-light), inset 0 -1px 0 rgba(15, 28, 32, .08);
  --glass-blur: blur(20px) saturate(145%);
}
html[data-control-material="glass"][data-theme="dark"] {
  --glass-edge: color-mix(in srgb, white 26%, var(--panel));
  --glass-reflection: rgba(255, 255, 255, .1);
  --glass-light: rgba(255, 255, 255, .32);
  --glass-shadow: 0 6px 18px rgba(0, 0, 0, .25), inset 0 1px 0 var(--glass-light), inset 0 -1px 0 rgba(0, 0, 0, .22);
}
/* Big Screen has an independent palette. Its controls must stay legible even
   when the Reader's light/dark setting differs from the presentation theme. */
html[data-control-material="glass"] .presentation {
  --glass-solid: #18222d;
  --glass-ink: #fff;
  --glass-edge: rgba(255, 255, 255, .36);
  --glass-reflection: rgba(255, 255, 255, .14);
  --glass-light: rgba(255, 255, 255, .4);
  --glass-shadow: 0 6px 20px rgba(0, 0, 0, .2), inset 0 1px 0 var(--glass-light), inset 0 -1px 0 rgba(0, 0, 0, .18);
}
html[data-control-material="glass"] .presentation:is(
  [data-presentation-theme="paper"], [data-presentation-theme="dawn"],
  [data-presentation-theme="meadow"], [data-presentation-theme="blush"],
  [data-presentation-theme="lavender"], [data-presentation-theme="sapphire"]
) {
  --glass-solid: #fff;
  --glass-ink: #201a16;
  --glass-edge: rgba(32, 26, 22, .26);
  --glass-reflection: rgba(255, 255, 255, .4);
  --glass-light: rgba(255, 255, 255, .9);
  --glass-shadow: 0 6px 20px rgba(32, 26, 22, .12), inset 0 1px 0 var(--glass-light), inset 0 -1px 0 rgba(32, 26, 22, .08);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-control-material="glass"] { --glass-fill: color-mix(in srgb, var(--glass-solid) 78%, transparent); }
  html[data-control-material="glass"] .presentation { --glass-fill: color-mix(in srgb, var(--glass-solid) 64%, transparent); }
}
/* Floating surfaces and exposed utility controls. Do not use a global button
   selector: verse-number/Strong's buttons and puzzle input are content. */
html[data-control-material="glass"] :is(
  .selection-bar, .focus-reading-controls, .reader-top-button, .reader-auto-scroll-button,
  .reader-selection-tools-button, .reader-return-button,
  .mobile-floating-passage, .mobile-floating-settings, .mobile-floating-focus-tools,
  .search-field-tool-button, .mobile-focus-tool-option, .desktop-focus-tool-option,
  .settings-popover, .mobile-settings-popover, .primary-version-menu,
  .parallel-version-menu, .settings-choice-menu, .search-scope-popover,
  .mobile-verse-nav-menu, .verse-action-menu, .streak-popover,
  .presentation-reference-menu, .presentation-version-menu, .presentation-settings-popover,
  .presentation-top > .presentation-actions > .ghost-btn,
  .presentation-nav-button, .presentation-continue-chapter, .presentation-search-toggle, .presentation-search-go,
  .presentation-bible-toggle, .presentation-fullscreen-toggle, .presentation-account-toggle,
  .scripture-reader-quick, .presentation-settings-toggle, .presentation-reference-share,
  .presentation-version-picker-toggle,
  .presentation-search-field,
  .topbar .icon-btn, .topbar .search, .topbar .primary-version-toggle, .topbar .versions, .streak-chip,
  .focused-passage-actions .ghost-btn, .verse-of-day-reader .verse-of-day-read-button,
  .bottombar .nav-button, .bottombar .icon-btn, .bottombar .ghost-btn,
  .rail > button, .portrait-rail-actions > button,
  .games-header-action, .games-menu-control, .games-drawer-close, #referenceRushHint,
  .trivia-mode-scroll, .trivia-mode-tabs > button, .trivia-mobile-options,
  .parallel-version-trigger, .panel-minihead .icon-btn, .mobile-focus-workspace-head > button,
  .games-active-controls .ghost-btn, .study-section .ghost-btn, .study-section .icon-btn,
  .study-popup .ghost-btn, .study-popup .icon-btn, .reader-chrome .icon-btn
) {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--glass-ink);
}
/* Pill and circular utility controls: keep original widths and hit areas. */
html[data-control-material="glass"] :is(
  .topbar .icon-btn, .topbar .search, .topbar .primary-version-toggle, .topbar .versions, .streak-chip,
  .focused-passage-actions .ghost-btn, .verse-of-day-reader .verse-of-day-read-button,
  .bottombar .nav-button, .bottombar .icon-btn, .bottombar .ghost-btn,
  .rail > button, .portrait-rail-actions > button,
  .presentation-nav-button, .presentation-continue-chapter, .presentation-search-toggle, .presentation-search-go,
  .presentation-bible-toggle, .presentation-fullscreen-toggle, .presentation-account-toggle,
  .scripture-reader-quick, .presentation-settings-toggle, .presentation-reference-share,
  .presentation-version-picker-toggle,
  .presentation-search-field, .games-header-action, .games-menu-control,
  .games-drawer-close, #referenceRushHint, .trivia-mode-scroll, .trivia-mode-tabs > button,
  .parallel-version-trigger, .panel-minihead .icon-btn, .mobile-focus-workspace-head > button
) { border-radius: 999px; }
html[data-control-material="glass"] :is(
  .selection-bar, .settings-popover, .mobile-settings-popover, .streak-popover,
  .primary-version-menu, .parallel-version-menu, .settings-choice-menu,
  .presentation-reference-menu, .presentation-version-menu, .presentation-settings-popover
) {
  border-radius: 20px;
  /* Menus carry more text and need denser material than floating buttons. */
  --glass-fill: color-mix(in srgb, var(--glass-solid) 94%, transparent);
}
html[data-control-material="glass"] :is(.study-section .ghost-btn, .study-popup .ghost-btn) { border-radius: 16px; }
html[data-control-material="glass"] :is(.study-section .icon-btn, .study-popup .icon-btn, .reader-chrome .icon-btn) { border-radius: 999px; }
/* The version picker wrapper owns its finish. Avoid a pill nested in the
   old square wrapper and keep menu backdrop sampling independent. */
html[data-control-material="glass"] #app .topbar .versions {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-control-material="glass"] #app .topbar .versions > .primary-version-toggle {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* A single material surface per group avoids repeatedly blurring child controls. */
html[data-control-material="glass"] :is(
  .settings-popover, .mobile-settings-popover, .presentation-settings-popover,
  .games-drawer, .selection-bar
) :is(.settings-choice-toggle, .ghost-btn, .icon-btn, .settings-destination-row,
  .presentation-settings-destination, .presentation-settings-back, .presentation-text-size-control > button, .book-sprint-sound-toggle) {
  border-radius: 16px;
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--glass-solid) 72%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .trivia-mobile-options { border-radius: 18px; }
html[data-control-material="glass"] .trivia-start {
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
  color: var(--accent-ink);
  box-shadow: var(--glass-shadow);
}
html[data-control-material="glass"] :is(.library, .mobile-focus-workspace)
:is(.study-section .ghost-btn, .study-section .icon-btn) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Filtering stays on the shell's existing pseudo-element so its menus can
   sample the page independently of the header/footer material. */
html[data-control-material="glass"] :is(.topbar, .bottombar)::before {
  background: linear-gradient(120deg, var(--glass-reflection), transparent 65%), var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] :is(.mode-tabs, .theme-mode-segment) {
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--ink) 5%, var(--panel));
  box-shadow: inset 0 1px 0 var(--glass-light), inset 0 -1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}
html[data-control-material="glass"] :is(.mode-tabs > button, .theme-mode-button) { border-radius: 999px; }
html[data-control-material="glass"] .mode-tabs > button { border-right-color: transparent; }
/* Retain clear selected/running/open states, rather than washing out their tint. */
html[data-control-material="glass"] :is(
  .mode-tabs > button, .theme-mode-button, .topbar .icon-btn, .rail > button,
  .mobile-floating-focus-tools, .mobile-floating-passage, .search-field-tool-button,
  .mobile-focus-tool-option, .desktop-focus-tool-option, .reader-auto-scroll-button,
  .games-header-action, .trivia-mode-tabs > button
).active {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
  color: var(--accent-ink);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--teal) 24%, transparent), inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] :is(.scripture-reader-quick, .presentation-settings-toggle, .presentation-account-toggle).active {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--glass-solid) 85%, transparent);
  border-color: var(--glass-ink);
  color: var(--glass-ink);
}
@media (hover: hover) {
  html[data-control-material="glass"] :is(
    .topbar .icon-btn, .topbar .primary-version-toggle, .streak-chip,
    .focused-passage-actions .ghost-btn, .rail > button,
    .presentation-nav-button, .presentation-continue-chapter, .presentation-search-toggle, .scripture-reader-quick, .presentation-settings-toggle,
    .presentation-bible-toggle, .presentation-fullscreen-toggle, .presentation-account-toggle,
    .games-header-action, .games-menu-control, #referenceRushHint
  ):not(:disabled):not(.active):hover {
    border-color: var(--glass-ink);
    background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--glass-solid) 92%, transparent);
  }
}
/* Token-based fallback covers every surface, including Big Screen's palette. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html[data-control-material="glass"],
  html[data-control-material="glass"] .presentation,
  html[data-control-material="glass"] .presentation[data-presentation-theme],
  html[data-control-material="glass"] :is(.selection-bar, .settings-popover,
    .mobile-settings-popover, .streak-popover, .primary-version-menu,
    .parallel-version-menu, .settings-choice-menu, .presentation-reference-menu,
    .presentation-version-menu, .presentation-settings-popover) {
    --glass-fill: var(--glass-solid);
    --glass-edge: var(--glass-ink);
    --glass-reflection: transparent;
    --glass-light: transparent;
    --glass-shadow: none;
    --glass-blur: none;
  }
  html[data-control-material="glass"] :is(.settings-popover, .mobile-settings-popover,
    .presentation-settings-popover, .games-drawer, .selection-bar)
  :is(.settings-choice-toggle, .ghost-btn, .icon-btn, .settings-destination-row,
    .presentation-settings-destination, .presentation-settings-back, .presentation-text-size-control > button, .book-sprint-sound-toggle) { background: var(--glass-solid); }
}

/* Panel interiors use an opaque finish: reflected edges and theme tint bring
   dense lists/forms into the material family without blurring their text. */
html[data-control-material="glass"] :is(
  .library, .shortcut-panel, .about-menu-card, .account-popover
) {
  --glass-solid: var(--panel);
  --glass-ink: var(--ink);
  --glass-fill: color-mix(in srgb, var(--glass-solid) 96%, transparent);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
html[data-control-material="glass"] :is(.shortcut-panel, .about-menu-card, .account-popover) { border-radius: 24px; }
html[data-control-material="glass"] .library { border-radius: 0 22px 22px 0; }
html[data-control-material="glass"] :is(
  .select-row select, .testament-group, .testament-group > summary,
  .annotation-group > summary, .annotation-shelf > summary, .history-group > summary,
  .bookmark-item, .history-item, .note-item,
  .note-box, .note-composer textarea, .study-search > input, .notes-filter-control,
  .about-menu-links a, .help-tour-card, .help-section, .help-grid > div, .gesture-guide, .gesture-guide-card,
  .streak-card, .streak-stats > span, .account-card,
  .account-form input:not([type="checkbox"]), .account-form .ghost-btn, .account-card .google-account-btn, .account-card .apple-account-btn,
  .text-size-control, .settings-page-titlebar
) {
  border-radius: 16px;
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .account-card .apple-account-btn {
  color: var(--glass-ink);
}
html[data-control-material="glass"] :is(.testament-group, .help-section) > summary {
  border-radius: 16px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] :is(.testament-group, .help-section)[open] > summary {
  border-radius: 16px 16px 0 0;
  border-bottom-color: var(--glass-edge);
}
html[data-control-material="glass"] :is(.book-row, .bookmark-item, .history-item, .note-item) { border-radius: 12px; }
html[data-control-material="glass"] .book-row.active {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--teal) 18%, var(--panel));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 40%, var(--line));
}
html[data-control-material="glass"] .annotation-shelf > summary {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--teal) 10%, var(--panel));
  box-shadow: inset 0 1px 0 var(--glass-light), inset 3px 0 0 var(--gold);
}
html[data-control-material="glass"] .settings-page-titlebar {
  /* Avoid the heavy rectangular strip in a floating Settings sheet. */
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--panel) 92%, transparent);
}
html[data-control-material="glass"] :is(.settings-page-back, .about-menu-head .icon-btn,
  .shortcut-head .icon-btn, .account-popover .settings-popover-close) { border-radius: 999px; }
html[data-control-material="glass"] :is(.about-menu-head .icon-btn, .shortcut-head .icon-btn,
  .account-popover .settings-popover-close) {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] :is(.account-form .primary-btn, .help-tour-card .primary-btn) {
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
/* Treat Search + its scope disclosure as one joined control, rather than a
   glass pill immediately followed by the old square button. */
html[data-control-material="glass"] .search-submit-control {
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .search-submit-control :is(.search-submit-button, .search-scope-menu) {
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-control-material="glass"] .search-submit-button { border-radius: 999px 0 0 999px; }
html[data-control-material="glass"] .search-scope-menu { border-radius: 0 999px 999px 0; }
html[data-control-material="glass"] .notes-filter-clear { box-shadow: none; background: transparent; }
html[data-control-material="glass"] :is(.select-row select, .note-box, .note-composer textarea,
  .study-search > input, .account-form input:not([type="checkbox"])):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
html[data-control-material="glass"] .notes-filter-control:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 35%, transparent);
}
/* Refine Parallel's chrome and dividers, keeping every reading cell opaque
   and preserving selected verses, highlights, column widths and alignment. */
html[data-control-material="glass"] .parallel-table {
  border-radius: 20px;
  border-color: var(--glass-edge);
  background: color-mix(in srgb, var(--line) 65%, var(--panel));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 8%, transparent);
}
html[data-control-material="glass"] .parallel-head {
  border-radius: 20px 20px 0 0;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .parallel-head > div:first-child { border-top-left-radius: 20px; }
html[data-control-material="glass"] .parallel-head > div:last-child { border-top-right-radius: 20px; }
html[data-control-material="glass"] .parallel-row:last-child { border-radius: 0 0 20px 20px; }
html[data-control-material="glass"] .parallel-heading-row {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--teal) 5%, var(--panel));
}
html[data-control-material="glass"] :is(.parallel-head, .parallel-row) > div {
  border-right-color: color-mix(in srgb, var(--line) 65%, var(--panel));
}
@media (max-width: 840px) {
  /* The mobile drawer meets the viewport edge; retain safe-area geometry. */
  html[data-control-material="glass"] .library { border-radius: 0; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html[data-control-material="glass"] :is(.library, .shortcut-panel, .about-menu-card, .account-popover) {
    --glass-fill: var(--panel);
    --glass-blur: none;
    --glass-reflection: transparent;
    --glass-light: transparent;
    --glass-shadow: none;
    --glass-edge: var(--ink);
  }
  html[data-control-material="glass"] .parallel-table { box-shadow: none; }
}

html[data-control-material="glass"] #saveNote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 18px;
  margin-top: 8px;
  border-radius: 999px;
  border: 1px solid var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 var(--glass-light);
}

/* Joined controls own one reflection. Child specificity must exceed the
   study-section utility rule so Search never becomes a pill inside a pill. */
html[data-control-material="glass"] .study-section .search-submit-control > :is(.search-submit-button, .search-scope-menu) {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-control-material="glass"] .study-section .search-submit-control > .search-submit-button { border-radius: 999px 0 0 999px; }
html[data-control-material="glass"] .study-section .search-submit-control > .search-scope-menu { border-radius: 0 999px 999px 0; }
html[data-control-material="glass"] .search-submit-control:focus-within {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
html[data-control-material="glass"] .search-submit-control > :focus-visible { outline: none; }
html[data-control-material="glass"] #noteBox:focus-visible,
html[data-control-material="glass"] :is(.select-row select, .study-section .note-box, .note-composer textarea, .study-search > input):focus-visible {
  outline-offset: -3px;
}
html[data-control-material="glass"] .testament-group {
  background: var(--panel);
  box-shadow: none;
}
html[data-control-material="glass"] .testament-group > summary { box-shadow: none; }
html[data-control-material="glass"] .book-row:not(.active):hover {
  background: color-mix(in srgb, var(--teal) 8%, var(--panel));
}
/* Game utilities share the finish while puzzle boards and answer targets
   retain their geometry. Keyboard color states remain explicit below. */
html[data-control-material="glass"] :is(
  .help-about-link, .games-records, .game-volume-drawer-control,
  .games-drawer .challenge-setup-card, .puzzle-restart-dialog
) {
  border-radius: 18px;
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] :is(
  .trivia-actions .ghost-btn, #triviaHint, #hiddenWordHint, #crosswordHint,
  #resetVerseOrderPuzzle, #resetBookSprintPuzzle, .puzzle-restart-cancel
) {
  border-radius: 999px;
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] :is(.trivia-actions .primary-btn, #checkVerseOrder, #checkBookSprint) {
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] :is(.hidden-word-keyboard, .crossword-keyboard) button {
  border-radius: 12px;
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--soft);
  box-shadow: inset 0 1px 0 var(--glass-light), 0 2px 0 var(--line);
}
html[data-control-material="glass"] .hidden-word-keyboard button.is-hit {
  background: color-mix(in srgb, var(--success) 15%, var(--panel));
  border-color: var(--success);
  color: var(--success);
}
html[data-control-material="glass"] .hidden-word-keyboard button.is-miss {
  background: color-mix(in srgb, var(--muted) 10%, var(--panel));
  color: var(--muted);
}
html[data-control-material="glass"] :is(.hidden-word-keyboard, .crossword-keyboard) button:active { box-shadow: none; }

/* Compact navigation's base row background is more specific than the shared
   active material. Pair the selected fill and ink in the same scoped rule. */
@media (max-width: 840px) and (orientation: portrait),
  (orientation: landscape) and (max-width: 1366px) and (max-height: 720px) {
  html[data-control-material="glass"] .app-shell .topbar .portrait-navigation .mode-tabs {
    background: var(--panel);
  }
  html[data-control-material="glass"] .app-shell .topbar .portrait-navigation .mode-tabs button.active {
    background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
    color: var(--accent-ink);
    box-shadow: inset 0 1px 0 var(--glass-light);
  }
  html[data-control-material="glass"] .app-shell .topbar .portrait-navigation .mode-tabs button:not(.active):is(:hover, :focus-visible) {
    background: var(--soft);
    color: var(--ink);
  }
}

/* Focus and native quick-action sheets use the same dense glass material. */
html[data-control-material="glass"] :is(.mobile-floating-focus-tools, .search-field-tool-button, .mobile-floating-passage, .mobile-floating-settings).active {
  /* The revealed-control layer also paints hover/pressed backgrounds. Keep
     its fill paired with the active glyph instead of dark glass + dark ink. */
  --reading-control-active-glass: var(--teal);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
  color: var(--accent-ink);
}
html[data-control-material="glass"] :is(.mobile-focus-workspace, .mobile-focus-search-results, .quick-action-search-dialog) {
  border-radius: 22px;
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
html[data-control-material="glass"] :is(.focus-mini-verse-picker select, .quick-action-search-row input) {
  border-radius: 16px;
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] :is(.focus-mini-verse-picker > button, .quick-action-search-row .primary-btn) {
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
  color: var(--accent-ink);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .quick-action-search-close {
  border-radius: 999px;
  border: 1px solid var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  color: var(--ink);
}
html[data-control-material="glass"] :is(.focus-mini-verse-picker select, .quick-action-search-row input):focus {
  outline: 2px solid var(--teal);
  outline-offset: -3px;
}
/* Match the search glyph's hover and focus surface to the glass capsule. */
html[data-control-material="glass"] .topbar-search-scope {
  border-radius: 999px;
}

/* The search wrapper owns focus: the inner input's rectangular native ring
   must not cut across the capsule. The inset shadow follows border-radius. */
html[data-control-material="glass"] .topbar .search input:focus {
  outline: none;
  box-shadow: none;
}
html[data-control-material="glass"] .topbar .search:focus-within {
  border-color: var(--teal);
  box-shadow: inset 0 0 0 2px var(--teal), var(--glass-shadow);
}

/* Compact navigation is a glass menu, with dense fill for reading over text. */
@media (max-width: 840px) and (orientation: portrait),
  (orientation: landscape) and (max-width: 1366px) and (max-height: 720px) {
  html[data-control-material="glass"] .app-shell .topbar .portrait-navigation .mode-tabs {
    border-radius: 20px;
    border-color: var(--glass-edge);
    background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--panel) 98%, var(--ink));
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
  }
  html[data-control-material="glass"] .app-shell .topbar .portrait-navigation .mode-tabs button { border-radius: 14px; }
}
html[data-control-material="glass"] .focus-mini-verse-picker .settings-choice-toggle {
  width: 100%;
  min-height: 42px;
  border-radius: 16px;
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .mobile-focus-passage-popover {
  border-radius: 20px;
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  box-shadow: var(--glass-shadow);
}
html[data-control-material="glass"] .mobile-focus-passage-popover :is(input, .mobile-focus-search-scope) {
  border-radius: 14px;
  border-color: var(--glass-edge);
  background: var(--panel);
  color: var(--ink);
}

html[data-control-material="glass"] .mobile-focus-passage-popover > button[type="submit"] {
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 var(--glass-light), inset 0 -1px 0 rgb(0 0 0 / 0.12);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* Keep the Settings gear paired with its accent fill in every open state. */
/* Keep a generous invisible hit area around a proportional visible circle. */
html[data-control-material="glass"] #app #presentation .presentation-reference-share.ghost-btn {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-control-material="glass"] .presentation .presentation-reference-share .presentation-reference-share-glyph {
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .app-shell .mobile-floating-settings.active,
html[data-control-material="glass"] .app-shell .mobile-floating-settings.active:is(:hover, :focus-visible, :active) {
  --reading-control-active-glass: var(--teal);
  color: var(--accent-ink);
  border-color: var(--glass-edge);
}
html[data-control-material="glass"] .app-shell .mobile-floating-settings.active svg {
  color: var(--accent-ink);
}

/* Signed-in avatars use the same glass surface as nearby utilities. */
html[data-control-material="glass"] .topbar #accountQuickButton.account-quick-button,
html[data-control-material="glass"] .presentation #presentationAccountButton.account-quick-button {
  border: 1px solid var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  color: var(--glass-ink);
  box-shadow: var(--glass-shadow);
}

/* Keep the settings dismiss control circular at every text scale. */
html[data-control-material="glass"] .presentation .presentation-settings-popover .presentation-popover-close {
  border: 1px solid var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  box-shadow: inset 0 1px 0 var(--glass-light);
  color: var(--glass-ink);
}

/* Revealed game setup surfaces share the floating-control material. */
html[data-control-material="glass"] .trivia-reader.is-setup .games-options-drawer {
  border: 1px solid var(--glass-edge);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
html[data-control-material="glass"] .trivia-mobile-options[aria-expanded="true"] {
  border-radius: 20px;
  border-bottom-color: var(--glass-edge);
}
html[data-control-material="glass"] .trivia-reader.is-setup [data-games-drawer="options"].open {
  margin-top: 0;
}
html[data-control-material="glass"] .games-options-drawer :is(
  .puzzle-creator, .book-sprint-best-card, .puzzle-creator-status,
  .puzzle-word-review, .hidden-word-score-rules
) {
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--glass-solid) 64%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .games-options-drawer :is(select, input[type="text"], .ghost-btn, .reference-rush-timer-option, .puzzle-word-choice) {
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--glass-solid) 82%, transparent);
  color: var(--glass-ink);
  box-shadow: inset 0 1px 0 var(--glass-light);
  min-height: 44px;
}
html[data-control-material="glass"] .games-options-drawer select option {
  background: var(--glass-solid);
  color: var(--glass-ink);
}
html[data-control-material="glass"] .games-options-drawer .puzzle-source-options {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: color-mix(in srgb, var(--glass-solid) 60%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .games-options-drawer .puzzle-source-options button {
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--glass-ink);
}
html[data-control-material="glass"] .games-options-drawer :is(.puzzle-source-options button.active, .reference-rush-timer-option.active, .puzzle-word-choice.is-selected) {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 var(--glass-light), 0 3px 10px color-mix(in srgb, var(--teal) 20%, transparent);
}
html[data-control-material="glass"] .games-options-drawer .reference-rush-timer-option.active :is(small, svg) {
  color: inherit;
}
html[data-control-material="glass"] .games-options-drawer :is(.hidden-word-score-rules, .puzzle-word-review) { padding: 12px; }
html[data-control-material="glass"] .games-options-drawer :is(button, input, select):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Keep the title version unframed and share's circle on its glyph only. */
html[data-control-material="glass"] #app .presentation :is(
  .presentation-title-version-control .presentation-version-picker-toggle,
  .presentation-reference-share
) {
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* A quiet rim for presentation controls; keep glyph contrast unchanged. */
html[data-control-material="glass"] .presentation :is(
  .presentation-nav-button, .presentation-continue-chapter, .presentation-search-toggle, .presentation-search-go,
  .presentation-bible-toggle, .presentation-fullscreen-toggle, .presentation-account-toggle,
  .scripture-reader-quick, .presentation-settings-toggle, .presentation-reference-share, .presentation-version-picker-toggle,
  .presentation-popover-close
) {
  --glass-edge: color-mix(in srgb, var(--glass-ink) 22%, transparent);
  --glass-light: rgba(255, 255, 255, .24);
  --glass-shadow: 0 6px 20px rgba(0, 0, 0, .16), inset 0 1px 0 var(--glass-light), inset 0 -1px 0 rgba(0, 0, 0, .12);
}
html[data-control-material="glass"] .presentation :is(
  .presentation-nav-button, .presentation-continue-chapter, .presentation-search-toggle, .scripture-reader-quick, .presentation-settings-toggle,
  .presentation-bible-toggle, .presentation-fullscreen-toggle, .presentation-account-toggle
):not(:disabled):is(:hover, .active) {
  border-color: color-mix(in srgb, var(--glass-ink) 30%, transparent);
}

/* Big Screen subpage controls use the same glass as the main Settings menu. */
html[data-control-material="glass"] .presentation .presentation-settings-popover [data-presentation-settings-back],
html[data-control-material="glass"] .presentation .presentation-settings-popover .app-update-button {
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  box-shadow: var(--glass-shadow);
  color: var(--glass-ink);
  min-height: 44px;
}
html[data-control-material="glass"] .presentation .presentation-settings-popover .app-update-button.primary-btn {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
  color: var(--accent-ink);
}

/* Search sources form one frosted list, rather than separate inset cards. */
html[data-control-material="glass"] .search-scope-popover {
  padding: 8px;
  gap: 4px;
  border-radius: 24px;
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--glass-solid) 86%, transparent);
  box-shadow: var(--glass-shadow);
}
html[data-control-material="glass"] .search-scope-popover .search-scope-option {
  border-radius: 14px;
  min-height: 44px;
  color: var(--glass-ink);
  background: transparent;
  box-shadow: none;
}
html[data-control-material="glass"] .search-scope-popover .search-scope-option:is(:hover, :focus-visible, .selected) {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--teal) 14%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .search-scope-popover .search-scope-option:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
html[data-control-material="glass"] .search-scope-divider { margin: 10px 12px 2px; }
html[data-control-material="glass"] .search-scope-divider::before,
html[data-control-material="glass"] .search-scope-divider::after { display: none; }
.search-scope-option-check svg { width: 18px; height: 18px; }

/* Welcome and guided tour cards float above the interface as one glass layer. */
html[data-control-material="glass"] :is(.tutorial-welcome-card, .tutorial-card) {
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--glass-solid) 88%, transparent);
  color: var(--glass-ink);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
html[data-control-material="glass"] :is(.tutorial-welcome-card, .tutorial-card) .tutorial-actions button,
html[data-control-material="glass"] .tutorial-close {
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  color: var(--glass-ink);
  box-shadow: inset 0 1px 0 var(--glass-light);
  min-height: 44px;
}
html[data-control-material="glass"] :is(.tutorial-welcome-card, .tutorial-card) .tutorial-actions .primary-btn {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
  color: var(--accent-ink);
  box-shadow: var(--glass-shadow);
}
html[data-control-material="glass"] .tutorial-close { width: 44px; height: 44px; }
html[data-control-material="glass"] .tutorial-card h2 { padding-right: 36px; }
html[data-control-material="glass"] .tutorial-dots span {
  border: 1px solid var(--glass-edge);
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .tutorial-dots span.active { background: var(--teal); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html[data-control-material="glass"] :is(.tutorial-welcome-card, .tutorial-card) {
    background: var(--glass-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Crossword navigation uses the same material as other game utilities. */
html[data-control-material="glass"] :is(
  .crossword-clue-arrow, #crosswordDirection, .crossword-active-clue,
  .crossword-browse-toggle, .crossword-clue-tabs
) {
  border: 1px solid var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--glass-ink);
}
html[data-control-material="glass"] #crosswordDirection { color: var(--teal); }
html[data-control-material="glass"] .crossword-clue-tabs button {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--glass-ink);
}
html[data-control-material="glass"] .crossword-clue-tabs button[aria-pressed="true"] {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
@media print {
  html[data-control-material="glass"] :is(.crossword-clue-arrow, #crosswordDirection, .crossword-active-clue, .crossword-browse-toggle, .crossword-clue-tabs) {
    background: var(--panel);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
html[data-control-material="glass"] .crossword-fit-toggle {
  border: 1px solid var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  box-shadow: var(--glass-shadow);
  color: var(--glass-ink);
}

/* Account deletion keeps its red meaning within the shared glass finish. */
html[data-control-material="glass"] .delete-account-dialog {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--glass-ink);
}
html[data-control-material="glass"] .delete-account-dialog .ghost-btn {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  border-color: var(--glass-edge);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--glass-ink);
}
html[data-control-material="glass"] button.delete-account-button {
  background: linear-gradient(145deg, rgba(255, 255, 255, .24), transparent 62%), color-mix(in srgb, #b42318 92%, transparent);
  border-color: rgba(255, 255, 255, .4);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: #fff;
}
html[data-control-material="glass"] button.delete-account-button:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, .28), transparent 62%), color-mix(in srgb, #912018 94%, transparent);
  color: #fff;
}

/* Signed-in account actions share the same utility-button material. */
html[data-control-material="glass"] .account-card-signed-in :is(
  [id$="syncNowButton"], [id$="switchAccountButton"],
  [id$="signOutButton"], [id$="changePasswordButton"]
) {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--glass-ink);
}

/* Update notifications retain the same material when expanded or minimized. */
html[data-control-material="glass"] .app-update-notice {
  border: 1px solid var(--glass-edge);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--glass-solid) 88%, transparent);
  color: var(--glass-ink);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
html[data-control-material="glass"] .app-update-notice.is-collapsed { border-radius: 999px; }
html[data-control-material="glass"] .app-update-notice .app-update-bubble { color: var(--glass-ink); }
html[data-control-material="glass"] .app-update-notice-actions button {
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  color: var(--glass-ink);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .app-update-notice-actions .primary-btn {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
  color: var(--accent-ink);
}
html[data-control-material="glass"] .app-update-notice button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html[data-control-material="glass"] .app-update-notice {
    background: var(--glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* The expanded search has one glass shell, without a second input rectangle. */
html[data-control-material="glass"] .presentation .presentation-search .presentation-search-field input {
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  outline: none;
}
html[data-control-material="glass"] .presentation .presentation-search-field:focus-within {
  box-shadow: var(--glass-shadow), 0 0 12px color-mix(in srgb, var(--presentation-accent) 16%, transparent);
}

/* Shared update actions cover Reader, Parallel and mobile Settings. */
html[data-control-material="glass"] :is(.settings-popover, .mobile-settings-popover) :is(.app-update-button, .settings-update-shortcut) {
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  min-height: 44px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  color: var(--glass-ink);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] :is(.settings-popover, .mobile-settings-popover) :is(.app-update-button.primary-btn, .settings-update-shortcut) {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal);
  color: var(--accent-ink);
}

/* A soft glass halo signals the logo hold without a hard rectangular frame. */
html[data-control-material="glass"] .app-shell .brand.version-hold-pending {
  border-radius: 18px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--glass-solid) 66%, transparent);
  color: var(--glass-ink);
  box-shadow: inset 0 1px 0 var(--glass-light), 0 0 18px color-mix(in srgb, var(--teal) 18%, transparent);
}
html[data-control-material="glass"] .app-shell .brand.version-hold-pending::before {
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--teal) 40%, var(--glass-edge));
  border-radius: inherit;
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .games-options-drawer .settings-choice-toggle {
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--glass-solid) 82%, transparent);
  color: var(--glass-ink);
  box-shadow: inset 0 1px 0 var(--glass-light);
  min-height: 44px;
  width: 100%;
}

/* Account and social controls use one material, including prefixed inputs. */
html[data-control-material="glass"] .account-popover :is(
  .account-actions > button, .friend-action-button, .friend-search-button,
  .social-avatar-more-toggle, .social-profile-avatar-button
) {
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  color: var(--ink);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
html[data-control-material="glass"] .account-popover :is(
  .friend-person-row, .remembered-account-row, .friends-tabs, .social-username-input
) {
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .account-popover .friends-tabs button {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
html[data-control-material="glass"] .account-popover .friends-tabs button.active {
  border-color: color-mix(in srgb, var(--teal) 40%, var(--glass-edge));
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--teal) 18%, var(--glass-solid));
  box-shadow: var(--glass-shadow);
}
html[data-control-material="glass"] .account-popover .account-form .social-username-input {
  border-radius: 999px;
  overflow: hidden;
  color: var(--ink);
}
html[data-control-material="glass"] .account-popover .account-form .social-username-input input {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  outline: none;
}
html[data-control-material="glass"] .account-popover .social-username-input:focus-within {
  border-color: var(--teal);
  box-shadow: inset 0 1px 0 var(--glass-light), 0 0 0 2px color-mix(in srgb, var(--teal) 25%, transparent);
}
html[data-control-material="glass"] .account-popover :is(
  .account-actions > button, .friend-action-button, .friend-search-button, .friends-tabs button
):not(:disabled):hover {
  border-color: color-mix(in srgb, var(--teal) 40%, var(--glass-edge));
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--teal) 14%, var(--glass-solid));
  color: var(--ink);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-control-material="glass"] .account-popover :is(
    .account-actions > button, .friend-action-button, .friend-search-button,
    .friend-person-row, .remembered-account-row, .friends-tabs, .social-username-input
  ) {
    background: var(--panel);
    border-color: var(--line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* A single circular dismiss control across sheets, dialogs and tool panels.
   Repeated class specificity beats local panel geometry without !important. */
html[data-control-material="glass"] .glass-close-control.glass-close-control.glass-close-control.glass-close-control {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  max-width: 34px;
  max-height: 34px;
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  color: var(--glass-ink);
  box-shadow: inset 0 1px 0 var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
html[data-control-material="glass"] .glass-close-control.glass-close-control.glass-close-control.glass-close-control svg {
  width: 15px;
  height: 15px;
  margin: 0;
}
html[data-control-material="glass"] .glass-close-control.glass-close-control.glass-close-control.glass-close-control:hover {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--ink) 10%, var(--glass-solid));
}
html[data-control-material="glass"] .glass-close-control.glass-close-control.glass-close-control.glass-close-control:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-control-material="glass"] .glass-close-control.glass-close-control.glass-close-control.glass-close-control {
    background: var(--panel);
    border-color: var(--line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Settings search is one glass capsule, including its clear control. */
html[data-control-material="glass"] .settings-search {
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding-inline: 12px 8px;
}
html[data-control-material="glass"] .settings-search:focus-within {
  border-color: color-mix(in srgb, var(--teal) 55%, var(--glass-edge));
  box-shadow: var(--glass-shadow), 0 0 0 2px color-mix(in srgb, var(--teal) 20%, transparent);
}
html[data-control-material="glass"] .settings-search input {
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  outline: none;
}
html[data-control-material="glass"] .settings-search .settings-search-clear {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .settings-search .settings-search-clear:hover {
  background: color-mix(in srgb, var(--ink) 10%, var(--glass-solid));
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-control-material="glass"] .settings-search,
  html[data-control-material="glass"] .settings-search .settings-search-clear {
    background: var(--panel);
    border-color: var(--line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Match reference popups: translucent tint over an independently sampled backdrop. */
html[data-control-material="glass"] body .primary-version-menu.primary-version-menu.primary-version-menu,
html[data-control-material="glass"] body .parallel-version-menu.parallel-version-menu.parallel-version-menu,
html[data-control-material="glass"] body .settings-choice-menu.settings-choice-menu.settings-choice-menu {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--glass-solid) 82%, transparent);
  -webkit-backdrop-filter: var(--overlay-blur);
  backdrop-filter: var(--overlay-blur);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html[data-control-material="glass"] body .primary-version-menu.primary-version-menu.primary-version-menu,
  html[data-control-material="glass"] body .parallel-version-menu.parallel-version-menu.parallel-version-menu,
  html[data-control-material="glass"] body .settings-choice-menu.settings-choice-menu.settings-choice-menu {
    background: var(--glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Keep header/footer backdrop roots out of the dropdown sampling chain.
   Their existing pseudo-elements retain the chrome's glass finish. */
html[data-control-material="glass"] .topbar,
html[data-control-material="glass"] .bottombar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Embedded controls retain their inner reflection without a cast shadow. */
html[data-control-material="glass"] #app .trivia-mode-tabs > button,
html[data-control-material="glass"] #app .trivia-mode-scroll,
html[data-control-material="glass"] #app .settings-search {
  --glass-shadow: inset 0 1px 0 var(--glass-light);
  box-shadow: var(--glass-shadow);
}
html[data-control-material="glass"] #app .settings-search:focus-within {
  box-shadow: var(--glass-shadow), inset 0 0 0 2px color-mix(in srgb, var(--teal) 20%, transparent);
}

html[data-control-material="glass"] .games-options-drawer .puzzle-creator {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Verse panel navigation shares the app-owned frosted choice menus. */
html[data-control-material="glass"] .library .select-row .settings-choice-toggle {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .library .select-row .settings-choice-toggle:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* About and legal pages share the app material, with dense reading surfaces. */
html[data-control-material="glass"] .about-body::before {
  background:
    radial-gradient(ellipse at top left, color-mix(in srgb, var(--gold) 18%, transparent), transparent 36rem),
    radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--teal) 12%, transparent), transparent 44rem);
}
html[data-control-material="glass"] .about-article {
  border-radius: 28px;
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  box-shadow: var(--glass-shadow);
}
html[data-control-material="glass"] :is(.about-nav-card, .about-thanks-card, .about-main-copy, .about-detail, .policy-summary, .policy-toc) {
  border-radius: 20px;
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] :is(.about-open-link, .static-page-nav a) {
  border-radius: 999px;
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
html[data-control-material="glass"] .about-nav-card a { border-radius: 12px; }
html[data-control-material="glass"] :is(.about-nav-card a.active, .static-page-nav a[aria-current="page"]) {
  background: var(--teal-soft);
  border-color: color-mix(in srgb, var(--teal) 48%, var(--line));
  color: var(--teal-dark);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] :is(.about-open-link, .static-page-nav a, .about-nav-card a, .about-menu-links a):hover {
  border-color: var(--teal);
}
html[data-control-material="glass"] :is(.about-open-link, .static-page-nav a, .about-nav-card a, .about-menu-links a):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
html[data-control-material="glass"] .about-menu-links a {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--panel);
  box-shadow: inset 0 1px 0 var(--glass-light), 0 4px 12px color-mix(in srgb, var(--ink) 5%, transparent);
}
html[data-control-material="glass"] :is(.about-menu-head, .about-menu-rights, .policy-header, .static-site-footer) {
  border-color: var(--glass-edge);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html[data-control-material="glass"] .about-body::before { background: none; }
  html[data-control-material="glass"] :is(.about-article, .about-nav-card, .about-thanks-card, .about-main-copy, .about-detail, .policy-summary, .policy-toc, .about-open-link, .static-page-nav a, .about-menu-links a) {
    background: var(--panel);
    border-color: var(--line);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Friends disclosure belongs to the profile card family in every mode. */
html[data-control-material="glass"] .account-popover .social-connections-card {
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  box-shadow: inset 0 1px 0 var(--glass-light);
}
html[data-control-material="glass"] .account-popover .social-connections-card.has-incoming-activity:not([open]) {
  border-color: color-mix(in srgb, var(--red-letter) 35%, var(--glass-edge));
  box-shadow: inset 0 1px 0 var(--glass-light), inset 3px 0 color-mix(in srgb, var(--red-letter) 72%, transparent);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html[data-control-material="glass"] .account-popover .social-connections-card {
    background: var(--panel);
    border-color: var(--line);
  }
}

/* Keep the chapter action readable beside the circular navigation controls. */
.presentation-controls .presentation-continue-chapter {
  width: auto;
  min-height: 44px;
  padding-inline: 16px;
  white-space: nowrap;
}

/* The search field must not isolate its dropdown from the Scripture backdrop. */
html[data-control-material="glass"] .presentation .presentation-search-field:has(.presentation-version-control.open) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Dense frost keeps large Scripture glyphs from showing through version menus. */
html[data-control-material="glass"] .presentation .presentation-version-menu {
  --glass-fill: color-mix(in srgb, var(--glass-solid) 97%, transparent);
  --glass-blur: blur(32px) saturate(120%);
  --ink: var(--glass-ink);
  --muted: color-mix(in srgb, var(--glass-ink) 74%, var(--glass-solid));
  --soft: color-mix(in srgb, var(--glass-ink) 10%, transparent);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html[data-control-material="glass"] .presentation .presentation-version-menu {
    --glass-fill: var(--glass-solid);
    --glass-blur: none;
  }
}

/* Footer actions need their own visible rim: portrait base styles remove borders. */
html[data-control-material="glass"] .bottombar :is(.chapter-nav, .bottom-action) {
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-light), inset 0 -1px 0 color-mix(in srgb, var(--ink) 10%, transparent), 0 3px 10px color-mix(in srgb, var(--ink) 8%, transparent);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-control-material="glass"] .bottombar :is(.chapter-nav, .bottom-action) {
    background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--glass-solid) 58%, transparent);
  }
}
html[data-control-material="glass"] .bottombar :is(.chapter-nav, .bottom-action):not(:disabled):is(:hover, :active, [aria-expanded="true"]) {
  border-color: var(--teal);
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--teal-soft);
  color: var(--teal-dark);
}
html[data-control-material="glass"] .bottombar :is(.chapter-nav, .bottom-action):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html[data-control-material="glass"] .bottombar :is(.chapter-nav, .bottom-action) {
    background: var(--panel);
    border-color: var(--ink);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* One material surface keeps the reading ruler controls light and compact. */
html[data-control-material="glass"] .focus-reading-controls button {
  background: transparent;
  box-shadow: none;
}
html[data-control-material="glass"] .focus-reading-controls button:not(:disabled):is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--glass-ink) 10%, transparent);
}

/* Friend navigation shares the app's glass dropdown material. */
html[data-control-material="glass"] .friends-navigation .settings-choice-toggle {
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  color: var(--ink);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
html[data-control-material="glass"] .friends-navigation .settings-choice-toggle:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
@media (prefers-reduced-transparency: reduce) {
  html[data-control-material="glass"] .friends-navigation .settings-choice-toggle { background: var(--glass-solid); }
}

/* Social sign-in uses the same glass action surface as other drawer controls. */
html[data-control-material="glass"] .games-drawer .challenge-setup-card .primary-btn[data-open-find-people] {
  min-height: 44px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  color: var(--glass-ink);
  box-shadow: var(--glass-shadow);
}
html[data-control-material="glass"] .games-drawer .challenge-setup-card .primary-btn[data-open-find-people]:hover {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--glass-solid) 90%, transparent);
}
html[data-control-material="glass"] .games-drawer .challenge-setup-card .primary-btn[data-open-find-people]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-control-material="glass"] .games-drawer .challenge-setup-card .primary-btn[data-open-find-people] {
    background: var(--glass-solid);
  }
}

/* Primary friend-request actions share the social drawer's glass buttons. */
html[data-control-material="glass"] .games-social-drawer .friend-action-button.primary-btn {
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), var(--glass-fill);
  color: var(--glass-ink);
  box-shadow: var(--glass-shadow);
}
html[data-control-material="glass"] .games-social-drawer .friend-action-button.primary-btn:not(:disabled):hover {
  background: linear-gradient(145deg, var(--glass-reflection), transparent 62%), color-mix(in srgb, var(--glass-solid) 90%, transparent);
}
html[data-control-material="glass"] .games-social-drawer .friend-action-button.primary-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-control-material="glass"] .games-social-drawer .friend-action-button.primary-btn {
    background: var(--glass-solid);
  }
}