/*
 * 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;      /* highlighted verses and 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;
}

.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);
  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);
  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: 15px;
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}

.picker-book:hover {
  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: 15px;
  height: 44px;
  justify-content: center;
}

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

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

/* 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);
    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: 14px 16px 12px;
  position: absolute;
  right: 24px;
  top: calc(100% + 10px);
  width: 300px;
  z-index: 30;
}

.settings[hidden] {
  display: none;
}

.theme-options {
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
  padding: 3px;
}

.theme-options button {
  align-items: center;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 15px;
  font-weight: 600;
  gap: 6px;
  height: 36px;
  justify-content: center;
  transition: background .15s, color .15s;
}

.theme-options button:hover {
  background: var(--tint);
  color: var(--ink);
}

.theme-options button[aria-checked="true"] {
  background: var(--select);
  box-shadow: inset 0 0 0 1px var(--select-line);
  color: var(--ink);
}

.settings-hint {
  color: var(--muted);
  font-size: var(--fs-meta);
  margin-top: 8px;
}

@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);
}

@media (max-width: 640px) {
  .home-books {
    padding: 0 24px 32px;
  }

  .home-books .column-tag {
    left: -8px;
  }
}

.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;
  }

  .home-books {
    padding: 16px;
  }
}

/* ---------- 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;
}

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

.reader-text h1 {
  font-family: var(--serif);
  font-size: var(--fs-xxl);
  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: var(--fs-lg);
  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: var(--fs-label);
  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: var(--fs-ui);
  font-weight: 700;
  margin: 1.2em 0 .3em;
}

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

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

.reader-text .bsb-p {
  text-indent: 1.2em;
}

/* Poetry and lists: every line starts at the same indent; wrapped lines hang 1em further in */
.reader-text .bsb-q1,
.reader-text .bsb-q2,
.reader-text .bsb-li1,
.reader-text .bsb-li2,
.reader-text .bsb-qr {
  margin: 0;
  padding-left: 2em;
  text-indent: -1em;
}

.reader-text .bsb-q2,
.reader-text .bsb-li2 {
  padding-left: 3.25em;
}

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

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

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

/* Last poetry line before prose gets breathing room */
.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;
}

/* Verses: clickable, with a highlight that sweeps left to right */
.v {
  -webkit-box-decoration-break: clone;
  background-image: linear-gradient(var(--highlight), var(--highlight));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  border-radius: 3px;
  box-decoration-break: clone;
  cursor: pointer;
  padding: 3px 0;
  scroll-margin-top: calc(var(--topbar-h) + 40px);
  transition: background-size .7s cubic-bezier(.3, .7, .2, 1);
}

.v.is-hl {
  background-size: 100% 100%;
}

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

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

.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 {
  border: 1px solid var(--line);
  border-radius: 18px;
  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: 19px;
  }

  .reader-text h1 {
    font-size: 30px;
  }
}

.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-hint {
  color: var(--muted);
  font-size: var(--fs-meta);
  margin-top: -6px;
}

.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;
}

/* Topic cards ("Topics in this chapter", "Topics with this verse") */
.topic-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  text-align: left;
  transition: background .25s, border-color .25s;
  width: 100%;
}

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

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

.topic-card-meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: var(--fs-meta);
  font-weight: 600;
  gap: 8px;
}

.topic-card-name {
  font-size: 17px;
  font-weight: 600;
}

.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;
}

/* 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 footer link on touch screens. */
.footer-shortcuts {
  display: none;
  margin-top: 8px;
}

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

.link-btn {
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.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 var(--fs-ui)/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 {
  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 {
  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);
}