/* Doctrinal Standards reader (DOCTRINAL-STANDARDS-PLAN-2026-08-26 §4).
   Palette rides the site variables — no colors defined here — so light,
   dark and OLED all work. Hit targets ≥44px on interactive chrome; the
   dense section grid follows the verse picker's chapter-grid density.
   z-index 2999: one notch below the app backdrop (3000) and content
   overlay (3001), so explanations open ABOVE this reader the same way
   they open above the Bible reader. */

#doctrinal-overlay { z-index: 2999; }

#doctrinal-overlay.active {
  display: flex;
  flex-direction: column;
}

#doctrinal-overlay .overlay-header { flex-shrink: 0; }

#doctrinal-overlay .doctrinal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  /* 96px bottom clearance for the TTS dock (the plans-body convention). */
  padding: 0 16px calc(96px + env(safe-area-inset-bottom, 0px));
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* scroll-lock the page under the reader (house overlay protocol) */
body.doctrinal-open { overflow: hidden; }

.doctrinal-header-btn {
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--fg);
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color var(--transition-fast);
}
.doctrinal-header-btn:hover { background-color: var(--ui-chrome); }
/* display:flex beats the UA's [hidden] rule — restate it or the back
   button shows in every view. */
.doctrinal-header-btn[hidden] { display: none; }

/* ---- picker 1: the library ---------------------------------------------- */

.ds-tabs {
  display: flex;
  border-bottom: 1px solid var(--ui-chrome);
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--overlay-bg);
}
.ds-tab {
  flex: 1;
  font-family: var(--font-family-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.75rem 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.ds-tab:hover { color: var(--fg); }
.ds-tab.active { color: var(--fg); border-bottom-color: var(--button-primary); }

.ds-docs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 0;
}
.ds-doc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  min-height: 44px;
  background: var(--ui-chrome);
  border: none;
  border-radius: 10px;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast);
}
.ds-doc:hover { background: var(--ui-chrome-hover); }
.ds-doc.active { outline: 2px solid var(--button-primary); outline-offset: -2px; }
.ds-doc-title {
  font-family: var(--font-family-serif);
  font-size: 1.0625rem;
  font-weight: 700;
}
.ds-doc-meta {
  font-family: var(--font-family-sans);
  font-size: 0.75rem;
  color: var(--fg-secondary);
}

/* ---- picker 2: sections -------------------------------------------------- */

.ds-sec-doc {
  font-family: var(--font-family-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.875rem 0 0.375rem;
}
.ds-sec-head {
  font-family: var(--font-family-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg);
  padding: 0.75rem 0 0.375rem;
}
.ds-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
@media (min-width: 600px) { .ds-grid { grid-template-columns: repeat(10, 1fr); } }
.ds-cell {
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--ui-chrome);
  border: none;
  border-radius: 3px;
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.ds-cell:hover { background: var(--ui-chrome-hover); }

.ds-rows {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.25rem 0 1rem;
}
.ds-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  min-height: 44px;
  background: var(--ui-chrome);
  border: none;
  border-radius: 8px;
  color: var(--fg);
  font-family: var(--font-family-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast);
}
.ds-row:hover { background: var(--ui-chrome-hover); }
.ds-row.active { outline: 2px solid var(--button-primary); outline-offset: -2px; }
.ds-row-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--fg-secondary);
}

/* ---- document view ------------------------------------------------------- */

.ds-pickbar {
  display: flex;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--overlay-bg);
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--ui-chrome);
}
.ds-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  min-height: 44px;
  padding: 0.375rem 0.75rem;
  background: var(--ui-chrome);
  border: none;
  border-radius: 8px;
  color: var(--fg);
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  min-width: 0;
  flex: 2 1 0;
}
.ds-pick:hover { background: var(--ui-chrome-hover); }
.ds-pick-sec { flex: 1 1 0; }
.ds-pick-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-chevron { flex-shrink: 0; color: var(--fg-secondary); }

/* Listen (read-aloud) — square sibling of the pickers; the pickers keep
   their ellipsis behavior because this one never flexes. */
.ds-listen {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  background: var(--ui-chrome);
  border: none;
  border-radius: 8px;
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.ds-listen:hover { background: var(--ui-chrome-hover); }
.ds-listen.playing { color: var(--button-primary); }

/* While the dock is up, bottom clearance tracks its REAL height (B-2
   convention, --ttsd-h set by tts-dock.js) instead of the static 96px
   baked into .doctrinal-body. */
body.tts-dock-open #doctrinal-overlay .doctrinal-body {
  padding-bottom: calc(var(--ttsd-h, 6.75rem) + 0.75rem + env(safe-area-inset-bottom, 0px));
}

.ds-page { padding-top: 0.5rem; }

.ds-doc-kicker {
  font-family: var(--font-family-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 0 0;
}

.ds-page-heading {
  font-family: var(--font-family-serif);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--pericope-title);
  margin: 0.5rem 0 1rem;
  line-height: 1.3;
}

.ds-segment {
  margin: 0 -0.5rem 0.5rem;
  padding: 0.625rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.ds-segment:hover { background: var(--highlight); }
.ds-segment.ds-flash { background: var(--highlight); }

.ds-seg-title {
  font-family: var(--font-family-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--pericope-title);
  margin: 0 0 0.375rem;
  line-height: 1.4;
}

.ds-part {
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--fg);
  margin: 0 0 0.5rem;
}
.ds-part:last-of-type { margin-bottom: 0.25rem; }
.ds-part-n {
  font-family: var(--font-family-sans);
  font-size: 0.75em;
  font-weight: 700;
  color: var(--verse-num);
  margin-right: 0.25rem;
}
.ds-mark {
  font-size: 0.7em;
  color: var(--fg-tertiary);
}

.ds-proofs {
  font-family: var(--font-family-sans);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin-top: 0.375rem;
}
.ds-proof { margin-right: 0.75rem; white-space: normal; }
.ds-proof b { color: var(--fg-tertiary); font-weight: 700; }

.ds-pagenav {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 1.5rem 0 1rem;
}
.ds-pagenav-btn {
  min-height: 44px;
  padding: 0.5rem 1rem;
  background: var(--ui-chrome);
  border: none;
  border-radius: 8px;
  color: var(--fg);
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-pagenav-btn:hover { background: var(--ui-chrome-hover); }

.ds-source {
  font-family: var(--font-family-sans);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--fg-tertiary);
  border-top: 1px solid var(--ui-chrome);
  padding-top: 0.75rem;
  margin-bottom: 1rem;
  overflow-wrap: break-word;
}

/* ---- loading / error ----------------------------------------------------- */

.ds-loading {
  display: flex;
  justify-content: center;
  padding: 3rem 0;
}
.ds-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--fg-secondary);
  font-family: var(--font-family-sans);
}
.ds-retry {
  margin-top: 0.75rem;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  background: var(--button-primary);
  border: none;
  border-radius: 8px;
  color: var(--button-primary-fg);
  font-family: var(--font-family-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}

/* Tappable proof-text refs (owner 5470f38f). Plain accent color, no
   underline (owner ruling: no underlined words anywhere). */
.ds-ref {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--button-primary);
  cursor: pointer;
}
.ds-ref:hover { color: var(--button-primary-hover); }

/* Passage card (owner 6af3dfa9): the verses of a tapped proof-text. */
.ds-passage-body {
  background: var(--overlay-bg);
  padding: 0.75rem 1rem;
  max-height: 45vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ds-pv {
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg);
  margin: 0 0 0.5rem;
}
.ds-pv:last-child { margin-bottom: 0; }
.ds-pv-n {
  font-family: var(--font-family-sans);
  font-size: 0.7em;
  font-weight: 700;
  color: var(--verse-num);
  vertical-align: 0.25em;
  margin-right: 0.15em;
}
.ds-pv-none {
  font-family: var(--font-family-sans);
  font-size: 0.9375rem;
  color: var(--fg-secondary);
  margin: 0;
}

/* "Explanation" chip under each section (owner 1f9a1ce9). The big bottom
   margin is the point - the chip belongs to the section ABOVE it. */
.ds-explain-row {
  text-align: center;
  margin: 1.4em 0 3.8em;
}
.ds-explain-chip {
  font-family: var(--font-family-sans, inherit);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--fg-secondary, #666);
  background: transparent;
  border: 1px solid var(--border-color, rgba(128,128,128,0.35));
  border-radius: 999px;
  padding: 0.45em 1.1em;
  cursor: pointer;
}
.ds-explain-chip:hover,
.ds-explain-chip:active {
  color: var(--fg-primary, inherit);
  border-color: var(--fg-tertiary, currentColor);
}