/*
 * Homepage and Bible reader. Loaded after style.css, which supplies the reset and the
 * site colors (--text, --fuchsia, --violet, --gray, --yellow).
 *
 * The concept used ~25 one-off colors and 11 font sizes. They're folded into the tokens below.
 */

:root {
  --ink: var(--text);
  --muted: #767066;          /* labels, counts, verse numbers, icons */
  --line: #e8e1d3;           /* every border and divider */
  --tint: #fbf6ea;           /* hover, open rows, quiet cards */
  --select: #fff4cc;         /* selected (soft) */
  --select-line: #f2c94c;    /* selected border, focus ring */
  --select-strong: #ffe27a;  /* selected (strong): current book/chapter, active ref */
  --highlight: #f4ff3a;      /* search matches */
  --home-bg: #ffc94f;
  --link-hover: #8a5a00;

  --sans: 'Source Sans Pro', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;

  /* Type scale: 12 label · 14 meta · 16 UI · 20 reading/card title · 26 page heading · 36 chapter title */
  --fs-label: 12px;
  --fs-meta: 14px;
  --fs-ui: 16px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-xxl: 36px;

  --surface-raised: var(--surface); /* menus and dialogs that float over the page */
  --cta-hover: #ffeba8;
  --segmented-bg: #f3ecdc;
  --result-text: #4a4230;
  --verse-num: #b5a88f;
  --home-footer: rgba(0, 0, 0, .65);
  --home-link-line: rgba(0, 0, 0, .3);
  --pop-shadow: rgba(60, 40, 0, .22);
  --panel-shadow: rgba(60, 40, 0, .16);
  --backdrop: rgba(40, 30, 0, .25);
  --tag-neutral: var(--text);

  --topbar-h: 61px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* Dark mode: same rule as style.css (system setting unless data-theme says otherwise). Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --muted: #a39d91;
    --line: #38332b;
    --tint: #2a2721;
    --select: #3a3119;
    --select-line: #c9a227;
    --select-strong: #574515;
    --highlight: #5f5712;
    --home-bg: #2a210d;
    --link-hover: #f2c94c;
    --surface-raised: #2a2722;
    --cta-hover: #4a3d1c;
    --segmented-bg: #141310;
    --result-text: #c4bdb0;
    --verse-num: #7f7667;
    --home-footer: rgba(255, 255, 255, .6);
    --home-link-line: rgba(255, 255, 255, .35);
    --pop-shadow: rgba(0, 0, 0, .55);
    --panel-shadow: rgba(0, 0, 0, .45);
    --backdrop: rgba(0, 0, 0, .5);
    --tag-neutral: #5c564b;
  }
}

:root[data-theme="dark"] {
  --muted: #a39d91;
  --line: #38332b;
  --tint: #2a2721;
  --select: #3a3119;
  --select-line: #c9a227;
  --select-strong: #574515;
  --highlight: #5f5712;
  --home-bg: #2a210d;
  --link-hover: #f2c94c;
  --surface-raised: #2a2722;
  --cta-hover: #4a3d1c;
  --segmented-bg: #141310;
  --result-text: #c4bdb0;
  --verse-num: #7f7667;
  --home-footer: rgba(255, 255, 255, .6);
  --home-link-line: rgba(255, 255, 255, .35);
  --pop-shadow: rgba(0, 0, 0, .55);
  --panel-shadow: rgba(0, 0, 0, .45);
  --backdrop: rgba(0, 0, 0, .5);
  --tag-neutral: #5c564b;
}

.page-home,
.page-reader {
  background: var(--surface);
  color: var(--ink);
  font: 400 var(--fs-ui)/1.5 var(--sans);
}

.page-home {
  background: var(--home-bg);
}

.page-home a:hover,
.page-reader a:hover {
  color: var(--link-hover);
}

:focus-visible {
  outline: 2px solid var(--select-line);
  outline-offset: 2px;
}

/* Focus handed back to a top bar button when its picker or menu closes (returnFocus in reader.js) */
.is-focus-return:focus-visible {
  outline: none;
}

.label {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Top bar ---------- */

.topbar {
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  column-gap: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 12px 24px;
  position: sticky;
  row-gap: 10px;
  top: 0;
  z-index: 20;
}

.topbar-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.topbar-actions {
  align-items: center;
  display: flex;
  gap: 6px;
}

.pill {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}

.pill svg {
  color: var(--muted);
}

.pill:hover,
.pill[aria-expanded="true"] {
  background: var(--select);
  border-color: var(--select-line);
  color: var(--ink);
}

.icon-btn {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  height: 36px;
  justify-content: center;
  transition: background .2s, border-color .2s;
  width: 36px;
}

.icon-btn:hover,
.panel-open .js-panel-toggle,
.js-settings-toggle[aria-expanded="true"] {
  background: var(--select);
  border-color: var(--select-line);
}

/* ---------- Passage picker ---------- */

.picker {
  background: var(--surface-raised);
  border-radius: 10px;
  box-shadow: 0 18px 50px var(--pop-shadow), 0 0 0 1px var(--line);
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 190px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  height: 460px;
  max-height: calc(100vh - var(--topbar-h) - 20px);
  max-width: calc(100% - 48px);
  overflow: hidden;
  position: absolute;
  right: 24px;
  top: calc(100% + 10px);
  width: 760px;
  z-index: 30;
}

.picker[hidden] {
  display: none;
}

.picker-books {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 8px 10px;
}

.picker-books .label {
  background: var(--surface-raised);
  font-size: var(--fs-meta);
  margin: 0 -8px 4px;
  padding: 14px 18px 8px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.picker-book {
  background: none;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font-size: 18px;
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}

.picker-book:hover {
  background: var(--tint);
}

/* Keyboard focus in the picker shows on the item itself, not as an outer ring. Arrowing through
   books selects them, so the selected fill marks the focused book. */
.picker-book:focus-visible,
.picker-chapter:focus-visible {
  outline: none;
}

.picker-book:focus-visible {
  background: var(--tint);
}

.picker-book[aria-pressed="true"] {
  background: var(--select-strong);
}

.picker-chapters {
  align-content: start;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px 18px;
}

.picker-chapter {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  font-size: 18px;
  height: 44px;
  justify-content: center;
}

.picker-chapter:hover {
  background: var(--tint);
}

.picker-chapter:focus-visible {
  background: var(--tint);
  border-color: var(--select-line);
}

.picker-chapter[aria-current="page"] {
  background: var(--select-strong);
  border-color: var(--select-line);
}

/* Tip line across the bottom: only with a mouse or trackpad, where typing and shortcuts apply */
.picker-tip {
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: none;
  flex-wrap: wrap;
  font-size: var(--fs-meta);
  gap: 4px 12px;
  grid-column: 1 / -1;
  justify-content: space-between;
  padding: 8px 18px;
}

@media (hover: hover) and (pointer: fine) {
  .picker-tip {
    display: flex;
  }
}

.picker-tip button {
  align-items: center;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: flex;
  gap: 6px;
  margin: -4px -6px;
  padding: 4px 6px;
}

.picker-tip button:hover {
  background: var(--tint);
  color: var(--ink);
}

/* Phones: books in one column, chapters below */
@media (max-width: 640px) {
  .picker {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
    height: min(560px, calc(100vh - var(--topbar-h) - 20px));
    left: 12px;
    max-width: none;
    right: 12px;
    width: auto;
  }

  .picker-chapters {
    border-top: 1px solid var(--line);
    grid-column: 1 / -1;
  }

  .picker-books:nth-child(2) {
    border-right: 0;
  }
}

/* ---------- Settings menu ---------- */

.settings {
  background: var(--surface-raised);
  border-radius: 10px;
  box-shadow: 0 18px 50px var(--pop-shadow), 0 0 0 1px var(--line);
  max-width: calc(100% - 24px);
  padding: 6px 0;
  position: absolute;
  right: 24px;
  top: calc(100% + 10px);
  width: 300px;
  z-index: 30;
}

.settings[hidden] {
  display: none;
}

/* Every row in the menu: settings, back, options, Keyboard shortcuts */
.settings-row,
.settings-back,
.settings-options button,
.settings-shortcuts button {
  align-items: center;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 12px;
  min-height: 40px;
  padding: 8px 16px;
  text-align: left;
  width: 100%;
}

.settings-row:hover,
.settings-back:hover,
.settings-options button:hover,
.settings-shortcuts button:hover {
  background: var(--tint);
}

.settings svg {
  flex: none;
}

.settings-row-name {
  flex: 1;
}

.settings-row-value {
  color: var(--muted);
}

.settings-chev,
.settings-back span {
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}

.settings-back {
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  margin-bottom: 4px;
}

.settings-hint {
  color: var(--muted);
  font-size: var(--fs-meta);
  padding: 2px 16px 4px;
}

.settings-check {
  margin-left: auto;
  visibility: hidden;
}

.settings-options [aria-checked="true"] .settings-check {
  visibility: visible;
}

@media (max-width: 640px) {
  .settings {
    right: 12px;
  }
}

/* ---------- Homepage ---------- */

.home {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
  max-width: var(--width);
  padding: 28px 32px 36px;
}

.home h1,
.home h2.home-heading {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin: 0;
}

/* Books: one card in the topic columns' style (square corners, shadow, tags, bulleted underlined
   names with the same hover), laid out as wrapping rows. Tags are dark so they don't read as a
   fourth topic category. */
.home-books {
  background: var(--surface);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  color: var(--text);
  font-size: 18px;
  line-height: normal;
  margin-top: 24px;
  padding: 0 48px 40px;
}

.home-books-group {
  padding-top: 40px;
  position: relative;
}

.home-books-group + .home-books-group {
  border-top: 1px solid var(--divider);
  margin-top: 32px;
}

.home-books .column-tag {
  background: var(--tag-neutral);
  left: -32px;
}

.home-books-group + .home-books-group .column-tag {
  top: -16px;
}

.home-books-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-books-list li {
  --byp-li-rgb: 181, 168, 143;
}

.home-books-list li::before {
  color: #b5a88f;
  content: '\2022';
  display: inline-block;
  margin: 0 10px 0 0;
}

.home-books-list a,
.home-books-list a:hover {
  color: inherit;
}

.home-books-list a:focus-visible {
  outline: none;
}

.home-books-list a:focus-visible .byp-ref-text {
  background: rgba(var(--byp-li-rgb), 0.12);
  border-bottom-color: rgba(var(--byp-li-rgb), 0.6);
}

.home-topics-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  margin-top: 8px;
}

.home-topics-head a {
  font-size: 15px;
  text-decoration: underline;
  text-decoration-color: var(--home-link-line);
  text-underline-offset: 3px;
}

/* Topic columns: same markup and classes as /verses (.column, .column-header, .references…),
   so style.css supplies the type, colors, bullets and hover states. Only layout is adapted here. */
.home-cats {
  align-items: start;
  color: var(--text);
  display: grid;
  font-size: 18px;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  line-height: normal; /* /verses sets its body type with the font shorthand, which resets line-height */
}

.home-cats .column {
  margin: 24px 0 0;
  max-width: none;
}

/* Stick below the site's top bar instead of the top of the window */
.home-cats .column-header {
  top: var(--topbar-h);
  z-index: 1;
}

/* Reference links look like /verses' clickable list items, not like links */
.home-cats .references a,
.home-cats .references a:hover {
  border: 0;
  color: inherit;
}

.home-cats .references a:focus-visible {
  outline: none;
}

.home-cats .references a:focus-visible .byp-ref-text {
  background: rgba(var(--byp-li-rgb, 255,102,158), 0.12);
  border-bottom-color: rgba(var(--byp-li-rgb, 255,102,158), 0.6);
}

/* Category colors for panel chips */
.cat-fuchsia { --cat: var(--fuchsia); }
.cat-violet { --cat: var(--violet); }
.cat-gray { --cat: var(--gray); }

.chip {
  background: var(--cat);
}

.home-footer {
  color: var(--home-footer);
  font-size: var(--fs-meta);
  margin: 12px auto 0;
  max-width: 720px;
  text-align: center;
}

.home-footer a {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .topbar {
    padding: 10px 16px;
  }

  .topbar-title {
    font-size: var(--fs-lg);
  }

  .home {
    padding: 20px 16px 28px;
  }
}

/* ---------- Reader layout ---------- */

.reader-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.panel-open .reader-layout {
  grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 360px);
}

.reader {
  min-width: 0;
  padding: 44px 40px 100px;
}

/* Text Size (settings menu) scales every size in the Bible text, headings and verse numbers too */
:root { --text-scale: 1; }
[data-size="smaller"] { --text-scale: .9; }
[data-size="larger"] { --text-scale: 1.15; }
[data-size="largest"] { --text-scale: 1.3; }

.reader-text {
  font-family: var(--serif);
  font-size: calc(var(--fs-lg) * var(--text-scale));
  line-height: 1.7;
  margin: 0 auto;
  max-width: 620px;
  text-wrap: pretty;
}

.reader-text h1 {
  font-family: var(--serif);
  font-size: calc(var(--fs-xxl) * var(--text-scale));
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 22px;
}

/* Section headings use the UI face so they read as navigation, not scripture */
.reader-text .bsb-s1,
.reader-text .bsb-ms {
  font-family: var(--sans);
  font-size: calc(var(--fs-lg) * var(--text-scale));
  font-weight: 700;
  line-height: 1.3;
  margin: 1.6em 0 .5em;
}

.reader-text h1 + .bsb-s1,
.reader-text h1 + .bsb-ms {
  margin-top: 0;
}

.reader-text .bsb-ms {
  color: var(--muted);
  font-size: calc(var(--fs-label) * var(--text-scale));
  letter-spacing: .08em;
  text-transform: uppercase;
}

.reader-text .bsb-s2,
.reader-text .bsb-qa {
  color: var(--muted);
  text-transform: none;
  font-family: var(--sans);
  font-size: calc(var(--fs-ui) * var(--text-scale));
  font-weight: 700;
  margin: 1.2em 0 .3em;
}

.reader-text .bsb-d {
  color: var(--muted);
  font-size: calc(var(--fs-ui) * var(--text-scale));
  font-style: italic;
  margin: 0 0 .6em;
}

.reader-text p {
  margin: 0 0 .7em;
}

/* Prose paragraphs are marked by the indent alone, as in a printed book. The first paragraph of a
   chapter or section starts flush left. */
.reader-text .bsb-p {
  margin: 0;
  text-indent: 1.2em;
}

.reader-text h1 + .bsb-p,
.reader-text h2 + .bsb-p,
.reader-text h3 + .bsb-p,
.reader-text .bsb-d + .bsb-p {
  text-indent: 0;
}

/* Reader mode hides section headings, so keep the indent that marks the new paragraph */
[data-mode="reader"] .reader-text h2 + .bsb-p,
[data-mode="reader"] .reader-text h3 + .bsb-p {
  text-indent: 1.2em;
}

[data-mode="reader"] .reader-text h1 + h2 + .bsb-p,
[data-mode="reader"] .reader-text h1 + h2 + h2 + .bsb-p {
  text-indent: 0;
}

/* Poetry and lists: first-level lines start 1em in, second-level 2.25em. Wrapped lines of either
   level hang at 3.5em, past the second level, so a wrap never reads as an indented line. Short
   lines take tighter leading than prose, which also lets stanza breaks stand out. */
.reader-text .bsb-q1,
.reader-text .bsb-q2,
.reader-text .bsb-li1,
.reader-text .bsb-li2,
.reader-text .bsb-qr {
  line-height: 1.6;
  margin: 0;
  padding-left: 3.5em;
  text-indent: -2.5em;
}

.reader-text .bsb-q2,
.reader-text .bsb-li2 {
  text-indent: -1.25em;
}

.reader-text .bsb-qr {
  text-align: right;
}

.reader-text .bsb-pc {
  text-align: center;
}

.reader-text .bsb-b {
  height: .7em;
}

/* Poetry and lists are set off from the prose around them */
.reader-text .bsb-p + .bsb-q1,
.reader-text .bsb-p + .bsb-q2,
.reader-text .bsb-p + .bsb-li1,
.reader-text .bsb-p + .bsb-li2,
.reader-text .bsb-p + .bsb-pc,
.reader-text .bsb-q1 + .bsb-p,
.reader-text .bsb-q2 + .bsb-p,
.reader-text .bsb-q1 + .bsb-m,
.reader-text .bsb-q2 + .bsb-m,
.reader-text .bsb-li1 + .bsb-p,
.reader-text .bsb-li1 + .bsb-m {
  margin-top: .7em;
}

/* Phones: lines are about half as long, so they need less leading */
@media (max-width: 640px) {
  .reader-text {
    line-height: 1.6;
  }

  .reader-text .bsb-q1,
  .reader-text .bsb-q2,
  .reader-text .bsb-li1,
  .reader-text .bsb-li2,
  .reader-text .bsb-qr {
    line-height: 1.5;
  }
}

/* Verses: clickable. A selected verse is underlined, as in the Bible App, so color fills stay free
   to mean a highlight. Arriving at verses (a topic, a link, #16) also washes them pale for a moment
   so the eye finds them, then the wash fades and the underline stays. */
.v {
  -webkit-box-decoration-break: clone;
  border-radius: 3px;
  box-decoration-break: clone;
  cursor: pointer;
  padding: 3px 0;
  scroll-margin-top: calc(var(--topbar-h) + 40px);
  transition: background-color .6s ease;
}

.v.is-sel {
  text-decoration: underline dotted var(--muted);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.v.is-arrive {
  background-color: var(--select);
  transition: none;
}

.vn {
  color: var(--verse-num);
  font-family: var(--sans);
  font-size: calc(var(--fs-label) * var(--text-scale));
  font-weight: 600;
  margin-right: 3px;
  text-indent: 0;
}

.vn[style] {
  font-weight: 700;
}

/* Reader mode (settings menu): the text reads like a book. Verse numbers and section headings
   go; the chapter title stays for screen readers and search engines. Verses stay selectable. */
[data-mode="reader"] .reader-text .vn,
[data-mode="reader"] .reader-text .bsb-s1,
[data-mode="reader"] .reader-text .bsb-s2,
[data-mode="reader"] .reader-text .bsb-ms {
  display: none;
}

[data-mode="reader"] .reader-text h1 {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.chapter-nav {
  display: flex;
  font-size: var(--fs-ui);
  gap: 16px;
  justify-content: space-between;
  margin: 48px auto 0;
  max-width: 620px;
}

.chapter-nav-next {
  margin-left: auto;
}

.chapter-nav a {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  display: inline-flex;
  gap: 8px;
  padding: 6px 14px;
}

.chapter-nav a:hover {
  background: var(--select);
  border-color: var(--select-line);
}

.reader-footer {
  color: var(--muted);
  font-size: var(--fs-meta);
  margin: 40px auto 0;
  max-width: 620px;
}

.reader-missing {
  margin: 0 auto;
  max-width: 620px;
  padding: 60px 24px;
}

.reader-missing h1 {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin: 0 0 12px;
}

.reader-missing a {
  text-decoration: underline;
}

/* ---------- Side panel ---------- */

.panel {
  align-self: start;
  background: var(--surface);
  border-left: 1px solid var(--line);
  display: none;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  position: sticky;
  top: var(--topbar-h);
}

.panel-open .panel {
  display: flex;
}

@media (max-width: 959px) {
  .panel-open .reader-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel {
    box-shadow: -12px 0 40px var(--panel-shadow);
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    position: fixed;
    right: 0;
    width: min(360px, 100%);
    z-index: 15;
  }

  .reader {
    padding: 28px 20px 80px;
  }

  .reader-text {
    font-size: calc(19px * var(--text-scale));
  }

  .reader-text h1 {
    font-size: calc(30px * var(--text-scale));
  }
}

.panel-search {
  align-items: center;
  display: flex;
  padding: 20px 16px 4px;
  position: relative;
}

.panel-search-icon {
  color: var(--muted);
  left: 28px;
  pointer-events: none;
  position: absolute;
}

.panel-search-input {
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: var(--fs-ui);
  padding: 10px 38px 10px 38px;
  width: 100%;
}

.panel-search-input::-webkit-search-cancel-button {
  display: none;
}

.panel-search-input:focus {
  border-color: var(--select-line);
  outline: none;
}

/* "/" hint: keyboard-and-mouse devices only, and only while the field is empty and unfocused */
.panel-search-key {
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  display: none;
  font-family: inherit;
  font-size: var(--fs-meta);
  line-height: 1;
  padding: 3px 7px;
  pointer-events: none;
  position: absolute;
  right: 28px;
}

@media (hover: hover) and (pointer: fine) {
  .panel-search-input:placeholder-shown:not(:focus) ~ .panel-search-key {
    display: block;
  }
}

.panel-search-clear {
  background: var(--tint);
  border-radius: 13px;
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
  height: 26px;
  line-height: 1;
  position: absolute;
  right: 22px;
  width: 26px;
}

.panel-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.panel-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 24px;
}

.panel-row {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.panel-back {
  align-items: center;
  background: none;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-size: 15px;
  font-weight: 600;
  gap: 6px;
  padding: 6px 6px 6px 0;
}

.panel-back span {
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}

.panel-cta {
  align-items: center;
  background: var(--select);
  border: 1px solid var(--select-line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-size: var(--fs-ui);
  font-weight: 600;
  gap: 8px;
  justify-content: space-between;
  min-height: 46px;
  padding: 8px 14px;
  text-align: left;
  transition: background .2s;
  width: 100%;
}

.panel-cta:hover {
  background: var(--cta-hover);
}

.panel-cta span {
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}

/* Panel section header: label on the left, a quiet action on the right */
.panel-link {
  align-items: center;
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: var(--fs-meta);
  font-weight: 600;
  gap: 4px;
  padding: 2px 0;
}

.panel-link:hover {
  color: var(--ink);
}

/* Topic pills ("Topics in this chapter", "Topics with this verse"); the dot is the category color */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topic-pill,
.place-pill {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  gap: 7px;
  padding: 4px 12px 4px 10px;
  transition: background .25s, border-color .25s;
}

.topic-pill:hover,
.place-pill:hover {
  background: var(--tint);
}

.topic-pill[aria-current="true"] {
  background: var(--select);
  border-color: var(--select-line);
}

.topic-pill .dot {
  background: var(--cat);
  border-radius: 50%;
  flex: none;
  height: 8px;
  width: 8px;
}

.topic-pill-verses {
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* Places on the map ("On the map"): a pin where topic pills have their dot */
.place-pill {
  gap: 6px;
}

.place-pill-pin {
  color: var(--muted);
  flex: none;
}

/* With no topics in the chapter, the pill row holds a single Browse topics pill */
.topic-pill-browse {
  color: var(--muted);
  font-weight: 600;
  padding-left: 12px;
}

.topic-pill-browse span {
  font-size: 18px;
  line-height: 1;
}

.chip {
  border-radius: 3px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 2px 6px;
  text-transform: uppercase;
}

/* Browse: segmented control */
.segmented {
  background: var(--segmented-bg);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(90, 60, 0, .12);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 4px;
  position: relative;
}

.segmented-thumb {
  background: var(--surface-raised);
  border-radius: 999px;
  bottom: 4px;
  box-shadow: 0 1px 1px rgba(80, 50, 0, .10), 0 4px 12px rgba(80, 50, 0, .14);
  left: 4px;
  position: absolute;
  top: 4px;
  transition: transform .45s cubic-bezier(.3, 1.25, .4, 1);
  width: calc((100% - 8px) / 3);
}

.segmented button {
  background: none;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-meta);
  font-weight: 600;
  height: 34px;
  position: relative;
  transition: color .25s;
  white-space: nowrap;
}

.segmented button[aria-pressed="true"] {
  color: var(--ink);
}

.browse-desc {
  color: var(--muted);
  font-family: var(--serif);
  font-size: var(--fs-ui);
  font-style: italic;
  line-height: 1.45;
}

.browse-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px 20px;
}

.browse-topic {
  border-radius: 8px;
  transition: background .25s;
}

.browse-topic.is-open {
  background: var(--tint);
}

.browse-topic-btn {
  align-items: center;
  background: none;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-size: var(--fs-ui);
  font-weight: 600;
  gap: 10px;
  padding: 10px;
  text-align: left;
  width: 100%;
}

.browse-topic-btn .dot {
  background: var(--cat);
  border-radius: 4px;
  flex-shrink: 0;
  height: 8px;
  width: 8px;
}

.browse-topic-btn .name {
  flex: 1;
}

.browse-topic-btn .chev {
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  transition: transform .3s var(--ease-out);
}

.browse-topic.is-open .chev {
  transform: rotate(90deg);
}

.browse-refs-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease-out);
}

.browse-topic.is-open .browse-refs-wrap {
  grid-template-rows: 1fr;
}

.browse-refs {
  min-height: 0;
  overflow: hidden;
}

.browse-refs-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px 10px 30px;
  position: relative;
}

.browse-refs-inner::before {
  background: var(--cat);
  border-radius: 1px;
  bottom: 18px;
  content: '';
  left: 13px;
  opacity: .35;
  position: absolute;
  top: 4px;
  width: 2px;
}

.browse-ref {
  border-radius: 5px;
  font-size: 15px;
  opacity: 0;
  padding: 5px 8px;
  transform: translateY(-6px);
  transition: opacity .3s, transform .35s var(--ease-out), background .25s;
}

.browse-topic.is-open .browse-ref {
  opacity: 1;
  transform: none;
}

.browse-ref:hover {
  background: var(--select);
}

.browse-ref[aria-current="true"] {
  background: var(--select-strong);
  font-weight: 600;
}

/* Related passages: each section of the chapter by verse range, its related passages beside a rule */
.related-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.related-group + .related-group {
  margin-top: 14px;
}

.related-verses {
  align-self: flex-start;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
  line-height: inherit;
  padding: 0;
  text-align: left;
}

.related-verses:hover {
  color: var(--link-hover);
}

.related-links {
  border-left: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 2px;
  padding-left: 6px;
}

.related-ref {
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  padding: 3px 8px;
  transition: background .25s;
}

.related-ref:hover {
  background: var(--tint);
}

.related-title {
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* Key terms */
.verse-card {
  background: var(--tint);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
}

.verse-card-ref {
  font-size: var(--fs-meta);
  font-weight: 600;
}

.verse-card-text {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}

.terms {
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.term {
  align-items: center;
  background: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 12px 6px;
  text-align: left;
  transition: background .2s;
  width: 100%;
}

.term:hover {
  background: var(--tint);
}

.term-word {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.term-word strong {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
}

.term-word span,
.term-go {
  color: var(--muted);
  font-size: var(--fs-meta);
}

.term-go {
  font-weight: 600;
  white-space: nowrap;
}

/* Search results */
.results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 20px;
}

.results .label {
  padding: 0 6px 4px;
}

.result {
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 8px;
  transition: background .2s;
}

.result:hover {
  background: var(--tint);
  color: var(--ink) !important;
}

.result[aria-current="true"] {
  background: var(--select);
}

.result-ref {
  font-size: var(--fs-meta);
  font-weight: 600;
}

.result-text {
  color: var(--result-text);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.45;
}

.result-text mark {
  background: var(--highlight);
  border-radius: 2px;
  color: var(--ink);
  padding: 0 1px;
}

.go-ref {
  margin-bottom: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .v,
  .segmented-thumb,
  .browse-refs-wrap,
  .browse-ref,
  .browse-topic-btn .chev {
    transition: none !important;
  }
}

/* ---------- Keyboard shortcuts ---------- */

/* Shortcuts only matter with a keyboard; hide the More menu item on touch screens. */
.settings-shortcuts {
  border-top: 1px solid var(--line);
  display: none;
  margin-top: 6px;
  padding-top: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .settings-shortcuts {
    display: block;
  }
}

.settings-shortcuts button {
  justify-content: space-between;
}

.shortcuts {
  background: var(--surface-raised);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 18px 50px var(--pop-shadow), 0 0 0 1px var(--line);
  color: var(--ink);
  font: 400 18px/1.5 var(--sans);
  max-height: calc(100vh - 48px);
  max-width: calc(100% - 32px);
  overflow: auto;
  padding: 20px 24px 24px;
  width: 460px;
}

.shortcuts::backdrop {
  background: var(--backdrop);
}

.shortcuts-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.shortcuts h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0;
}

.shortcuts-close {
  background: var(--tint);
  border-radius: 14px;
  color: var(--ink);
  cursor: pointer;
  font-size: 18px;
  height: 28px;
  line-height: 1;
  width: 28px;
}

.shortcuts .label {
  font-size: var(--fs-meta);
  margin-top: 16px;
}

.shortcuts-list {
  margin: 0;
}

.shortcuts-list div {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 8px 0;
}

.shortcuts-list div:last-child {
  border-bottom: 0;
}

.shortcuts-list dt {
  color: var(--muted);
  font-size: var(--fs-meta);
  white-space: nowrap;
}

.shortcuts-list dd {
  margin: 0;
  text-align: right;
}

.shortcuts kbd,
.settings kbd {
  background: var(--tint);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--ink);
  display: inline-block;
  font-family: inherit;
  font-size: var(--fs-label);
  line-height: 1;
  min-width: 22px;
  padding: 4px 6px;
  text-align: center;
}

.toast {
  background: var(--ink);
  border-radius: 18px;
  bottom: 24px;
  color: var(--surface);
  font-size: var(--fs-meta);
  left: 50%;
  opacity: 0;
  padding: 8px 16px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 8px);
  transition: opacity .2s, transform .2s var(--ease-out);
  z-index: 40;
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}