/* Semantic Bible-reader state presentation. Loaded after the shared theme. */
#page-teachings .reader-verse[data-reader-primary-state="selected"] {
  background: var(--color-scripture-selected);
  border-inline-start: 3px solid var(--color-brand);
}
#page-teachings .reader-verse[data-reader-primary-state="search-match"] {
  background: var(--color-scripture-search-surface);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--color-scripture-search-marker);
  text-decoration-thickness: .12em;
  text-underline-offset: .18em;
}
#page-teachings .reader-verse[data-reader-primary-state="current"] {
  border-inline-start: 3px solid var(--color-accent);
}
#page-teachings .reader-verse[data-reader-primary-state="highlight"] {
  background: var(--color-scripture-highlight-surface);
}
#page-teachings .reader-verse[data-reader-primary-state="commentary"],
#page-teachings .reader-verse[data-reader-primary-state="interlinear"] {
  border-bottom: 2px dotted var(--color-border-strong);
}

/* Group 2C-3: existing linked-state cues remain secondary to the primary
   resolver state, but commentary and Interlinear use different geometry. */
#page-teachings .reader-verse.is-reader-commentary {
  box-shadow: inset 0.18rem 0 0 var(--color-scripture-commentary-linked-marker);
}

#page-teachings .reader-verse.is-reader-interlinear {
  border-bottom: 2px dotted var(--color-scripture-interlinear-linked-marker);
}
#page-teachings .reader-verse:focus-visible,
#page-teachings .reader-verse.is-reader-focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Group 2B-2A — primary verse states only. Search, saved highlight,
   commentary, and Interlinear rules above remain outside this rollout. */
#page-teachings .reader-verse {
  position: relative;
}

#page-teachings .reader-verse:focus:not(.is-reader-selected):not(.is-reader-current):not(.is-reader-search-match):not(.is-reader-highlight):not(.is-reader-commentary):not(.is-reader-interlinear) {
  background: transparent;
  box-shadow: none;
}

#page-teachings .reader-verse:focus-visible,
#page-teachings .reader-verse.is-reader-focus {
  outline: 3px solid var(--color-scripture-focus-ring);
  outline-offset: 4px;
}

#page-teachings .reader-verse[data-reader-primary-state="selected"] {
  background: var(--color-scripture-selection-surface);
  box-shadow: none;
}

#page-teachings .reader-verse.is-reader-selected {
  background: var(--color-scripture-selection-surface);
  box-shadow: none;
}

#page-teachings .reader-verse[data-reader-primary-state="selected"]::before,
#page-teachings .reader-verse.is-reader-selected::before {
  content: "";
  position: absolute;
  inset-block: 0.28rem;
  inset-inline-start: 0.08rem;
  width: 0.22rem;
  border-radius: 999px;
  background: var(--color-scripture-selection-marker);
}

#page-teachings .reader-verse[data-reader-primary-state="current"] {
  background: var(--color-scripture-current-surface);
  box-shadow: none;
}

#page-teachings .reader-verse.is-reader-current:not(.is-reader-selected) {
  background: var(--color-scripture-current-surface);
  box-shadow: none;
}

#page-teachings .reader-verse.is-reader-current::after {
  content: "";
  position: absolute;
  inset-block-start: 0.42rem;
  inset-inline-start: 0.02rem;
  width: 0.48rem;
  height: 0.14rem;
  border-radius: 999px;
  background: var(--color-scripture-current-marker);
}

#page-teachings .reader-verse:hover:not([data-reader-primary-state="selected"]):not([data-reader-primary-state="current"]):not(.is-reader-search-match):not(.is-reader-highlight):not(.is-reader-commentary):not(.is-reader-interlinear),
#page-teachings .reader-verse.is-reader-hover:not([data-reader-primary-state="selected"]):not([data-reader-primary-state="current"]):not(.is-reader-search-match):not(.is-reader-highlight):not(.is-reader-commentary):not(.is-reader-interlinear) {
  background: var(--color-scripture-hover-surface);
}

#page-teachings .reader-verse[data-reader-primary-state="selected"]:hover,
#page-teachings .reader-verse.is-reader-selected:hover,
#page-teachings .reader-verse[data-reader-primary-state="selected"].is-reader-current:hover {
  background: var(--color-scripture-selection-surface);
}

#page-teachings .reader-verse[data-reader-primary-state="current"]:hover,
#page-teachings .reader-verse.is-reader-current:hover:not([data-reader-primary-state="selected"]) {
  background: var(--color-scripture-current-surface);
}

@media (pointer: coarse) {
  #page-teachings .reader-verse:hover:not([data-reader-primary-state="selected"]):not([data-reader-primary-state="current"]),
  #page-teachings .reader-verse.is-reader-hover:not([data-reader-primary-state="selected"]):not([data-reader-primary-state="current"]) {
    background: transparent;
  }
}

/* Group 2B-2B — search and saved-highlight cues. The reader resolver already
   exposes these classes, but search/highlight product lifecycles remain outside
   this stylesheet's responsibility. */
#page-teachings .reader-verse.is-reader-search-match {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--color-scripture-search-marker);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

#page-teachings .reader-verse.is-reader-search-match:not(.is-reader-selected):not(.is-reader-current):not(.is-reader-highlight) {
  background: var(--color-scripture-search-surface);
}

#page-teachings .reader-verse.is-reader-search-active,
#page-teachings .reader-verse[data-reader-search-active="true"] {
  box-shadow: inset 0 0.2rem 0 var(--color-scripture-search-active-marker);
}

#page-teachings .reader-verse.is-reader-highlight {
  box-shadow: inset -0.24rem 0 0 var(--color-scripture-highlight-marker);
}

#page-teachings .reader-verse.is-reader-highlight:not(.is-reader-selected):not(.is-reader-current):not(.is-reader-search-match) {
  background: var(--color-scripture-highlight-surface);
}

#page-teachings .reader-verse.is-reader-search-match.is-reader-highlight {
  text-decoration-color: var(--color-scripture-search-marker);
}

#page-teachings .reader-verse.is-reader-search-active.is-reader-highlight,
#page-teachings .reader-verse[data-reader-search-active="true"].is-reader-highlight {
  box-shadow: inset 0 0.2rem 0 var(--color-scripture-search-active-marker),
    inset -0.24rem 0 0 var(--color-scripture-highlight-marker);
}

#page-teachings .reader-verse.is-reader-search-match.is-reader-selected,
#page-teachings .reader-verse.is-reader-search-match.is-reader-current,
#page-teachings .reader-verse.is-reader-search-match.is-reader-highlight {
  text-decoration-line: underline;
}