/* Theme surface normalization: keep light and dark themes internally consistent. */
body { background: var(--bg); }

/* Search and input chrome must follow the selected reader theme. */
.home-search-field,
.home-search-field:focus-within,
.search-field {
  background: var(--field, var(--panel-2));
  color: var(--text);
}
.home-search-field { border-color: var(--line); }
.home-search-field:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft), 0 12px 34px rgba(0,0,0,.12);
}
.home-search-field svg,
.search-field svg { stroke: var(--muted); }
.home-search-field input,
.search-field input { color: var(--text); }
.home-search-field input::placeholder,
.search-field input::placeholder { color: var(--muted-2); opacity: 1; }
.search-field button { background: var(--bg-3); color: var(--text); }
.search-head #search-close { color: var(--text); }

/* Home navigation and autocomplete must not inherit charcoal-only colors. */
.direct-location strong,
.home-book-toggle strong,
.search-autocomplete > button strong { color: var(--text); }
.home-book-suggestion,
.search-autocomplete > button { border-color: var(--line); }
.home-chapter-grid button,
.chapter-grid button,
.auto-chapters button {
  background: var(--field, var(--panel-2));
  color: var(--text);
}
.home-chapter-grid button.is-current,
.chapter-grid button.is-current {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--bg);
}
.search-autocomplete { background: var(--field, var(--panel-2)); }

/* Other reader pages use the same semantic theme colors. */
.segmented button.is-active { color: var(--text); }
.explore-book { border-bottom-color: var(--line); }
.explore-book strong,
.home-action strong,
.library-stats strong,
.recent-searches button,
.search-result p { color: var(--text); }
.recent-searches h2,
.search-results h2,
.search-result strong { color: var(--muted); }
.options-sheet svg { stroke: var(--text); }
.info-button,
.home-learn-icon { border-color: var(--blue); }
.home-learn-more:hover { border-color: var(--blue); background: var(--blue-soft); }
.scripture blockquote { border-left-color: var(--blue); }

@media (min-width: 1020px) {
  body { background: var(--bg); }
  .app-shell { border-color: var(--line); }
}

/* Contextual three-dot menu: Home gets Text Settings + About; Reader keeps its passage actions. */
.options-sheet[data-context="home"] [data-reader-only],
.options-sheet[data-context="reader"] [data-home-only] { display: none; }
.options-sheet > .option-link {
  width: 100%;
  min-height: 70px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  padding: 0 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  font-size: 1.1rem;
  text-decoration: none;
}
.options-sheet > .option-link svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}