/* Bhayibheli shared styles. Colors and fonts come from ThemeRoot's CSS variables. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #fbeef0; }
.bh-app { min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-weight: var(--f-body-weight); font-size: 0.9375rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.bh-app a { color: inherit; }
.bh-display { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
.bh-h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.05; }
.bh-eyebrow { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); margin: 0; }
.bh-eyebrow a { text-decoration: none; }
.bh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bh-skip { position: absolute; left: -62.4375rem; top: 0.5rem; background: var(--ink); color: var(--surface); padding: 0.5rem 0.75rem; z-index: 50; }
.bh-skip:focus { left: 0.5rem; }
.bh-app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Shell: tab bar on phones, side navigation from 820px */
.bh-shell { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; max-width: 67.5rem; margin: 0 auto; }
.bh-topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--bg); z-index: 10; }
.bh-brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; font-size: 1.375rem; }
.bh-brand-mark { color: var(--accent); width: 1.15em; height: 1em; flex: none; }
.bh-side { display: none; }
.bh-main { padding: 0 1rem 7.5rem; min-width: 0; }
.bh-tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: center; padding: 0.5rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--rule); z-index: 10; }
.bh-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--ink-mute); font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; padding: 0.25rem 0.625rem; }
.bh-tab span:first-child { font-family: var(--f-display); font-size: 1.125rem; letter-spacing: 0; }
.bh-tab.active { color: var(--accent); }
.bh-tab-primary { width: 3.25rem; height: 3.25rem; border-radius: 26px; background: var(--accent); color: var(--surface) !important; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.375rem; text-decoration: none; }
@media (min-width: 51.25em) {
  .bh-shell { grid-template-columns: 13.75rem minmax(0, 1fr); }
  .bh-side { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.5rem 1rem; border-right: 1px solid var(--rule); position: sticky; top: 4.0625rem; align-self: start; }
  .bh-tabs { display: none; }
  .bh-main { padding: 0 2rem 3rem; }
}
.bh-nav { padding: 0.625rem 0.75rem; text-decoration: none; border-left: 3px solid transparent; color: var(--ink-soft); }
.bh-nav.active { border-left-color: var(--accent); color: var(--ink); background: var(--surface); font-weight: 700; }
.bh-write { margin-top: 0.75rem; }

/* Buttons and fields */
.bh-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.125rem; background: var(--accent); color: var(--surface) !important; border: 1px solid var(--accent); font: 700 0.875rem var(--f-body); text-decoration: none; cursor: pointer; }
.bh-button:disabled { opacity: .45; cursor: not-allowed; }
.bh-button-ghost { background: transparent; color: var(--accent) !important; }
.bh-link { background: none; border: none; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.bh-field { display: flex; flex-direction: column; gap: 0.375rem; margin: 1rem 0; border: 0; padding: 0; min-width: 0; }
.bh-field input, .bh-field select, .bh-field textarea { font: inherit; color: var(--ink); background-color: var(--surface); border: 1px solid var(--rule); padding: 0.625rem 0.75rem; width: 100%; }
.bh-field textarea { font-family: var(--f-display); font-size: 1.125rem; line-height: 1.35; resize: vertical; }
.bh-counter { align-self: flex-end; font-family: var(--f-mono); font-size: 0.6875rem; color: var(--ink-mute); }
.bh-hint { font-size: 0.8125rem; color: var(--ink-soft); margin: 0.375rem 0 0; }
.bh-toggle { display: flex; align-items: center; gap: 0.5rem; margin: 0.75rem 0; }
.bh-problem { border-left: 3px solid var(--accent); background: var(--surface); padding: 0.625rem 0.875rem; margin: 0.75rem 0; }
.bh-problem p, .bh-problem ul { margin: 0; }

/* Content */
.bh-hero { padding: 1.75rem 0 1.125rem; display: flex; flex-direction: column; gap: 0.625rem; }
.bh-countdown-line { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--ink-soft); margin: 0; }
.bh-countdown { color: var(--accent); font-variant-numeric: tabular-nums; }
.bh-banner { border: 1px dashed var(--accent); padding: 0.75rem 0.875rem; margin: 0.5rem 0 1rem; background: var(--surface); }
.bh-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 1.5rem 0 0.5rem; border-bottom: 1px solid var(--rule); }
.bh-section-head h2 { font-size: 1.375rem; }
.bh-chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); column-gap: 1.5rem; }
.bh-chapter { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 2px 0.625rem; padding: 0.875rem 0.25rem; border-bottom: 1px solid var(--rule); text-decoration: none; }
.bh-chapter-num { grid-row: span 2; font-family: var(--f-display); font-size: 1.375rem; color: var(--gold); }
.bh-chapter-name { font-family: var(--f-display); font-size: 1.0625rem; line-height: 1.2; overflow-wrap: anywhere; }
.bh-chapter:hover .bh-chapter-name { color: var(--accent); }
.bh-chapter { position: relative; }
.bh-chapter-trend { position: absolute; top: 0.75rem; right: 0.25rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.bh-chapter-trend .bh-marker { margin-left: 0; }
.bh-chapter.has-flags .bh-chapter-name { padding-right: 8rem; }
.bh-verse-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 0.25rem; border-bottom: 1px solid var(--rule); text-decoration: none; }
.bh-verse-card:hover .bh-verse-text { color: var(--accent); }
.bh-verse-text { font-family: var(--f-display); font-size: 1.0625rem; line-height: 1.35; overflow-wrap: anywhere; }
.bh-byline { font-size: 0.8125rem; color: var(--ink-soft); gap: 0.875rem; margin: 0; }
.bh-meta { gap: 0.375rem; }
.bh-empty { color: var(--ink-soft); padding: 1.125rem 0; }
.bh-loading { color: var(--ink-mute); padding: 1.5rem 0; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: .2em; text-transform: uppercase; }
.bh-tier { display: inline-flex; gap: 0.25rem; align-items: center; padding: 2px 0.5625rem; color: #fff; font: 700 0.6875rem var(--f-body); }
.bh-intent { display: inline-flex; gap: 0.25rem; align-items: center; padding: 1px 0.5rem; border: 1px solid var(--accent); color: var(--accent); font: 600 0.75rem var(--f-body); }
.bh-intent.is-sticker-only { border-color: transparent; padding: 0; }
.bh-sticker { display: inline-flex; align-items: center; justify-content: center; }
.bh-sticker img { width: 1.125rem; height: 1.125rem; }
.bh-sticker-md img { width: 2rem; height: 2rem; }
.bh-sticker-md .bh-sticker-text { font-size: 1.625rem; }
.bh-sticker-lg img { width: 3.5rem; height: 3.5rem; }
.bh-sticker-lg .bh-sticker-text { font-size: 2.75rem; }
.bh-sort { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--rule); margin-top: 0.5rem; }
.bh-sort button { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.625rem 0; margin-bottom: -1px; font: inherit; color: var(--ink-mute); cursor: pointer; }
.bh-sort button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink); font-weight: 700; }
.bh-more { margin: 1.125rem 0; }

/* Verse page */
.bh-verse-page { padding: 1.75rem 0; display: flex; flex-direction: column; gap: 0.875rem; max-width: 42.5rem; }
.bh-verse-quote { font-family: var(--f-display); font-size: clamp(1.5rem, 4.5vw, 2.125rem); line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.bh-reactions { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.bh-react { display: inline-flex; gap: 0.375rem; align-items: center; padding: 0.625rem 0.875rem; background: var(--surface); border: 1px solid var(--rule); color: var(--ink-soft); font: 600 0.875rem var(--f-body); cursor: pointer; }
.bh-react.is-on { border-color: var(--accent); color: var(--accent); }
.bh-react:disabled { opacity: .5; cursor: not-allowed; }
.bh-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.bh-points div { border: 1px solid var(--rule); padding: 0.625rem; min-width: 0; }
.bh-points dt { font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.bh-points dd { margin: 0; font-family: var(--f-display); font-size: 1.375rem; font-variant-numeric: tabular-nums; }
@media (max-width: 30em) { .bh-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bh-toast { position: fixed; left: 50%; bottom: 6rem; transform: translateX(-50%); background: var(--ink); color: var(--surface); padding: 0.75rem 1.125rem; z-index: 30; font-weight: 700; }

/* Compose */
.bh-compose { padding: 1.75rem 0; max-width: 42.5rem; }
.bh-intents { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.bh-intent-option { background: none; border: 1px solid transparent; padding: 0.1875rem; cursor: pointer; }
.bh-intent-option.is-on { border-color: var(--ink); background: var(--surface); }
.bh-own-intent { border: 1px dashed var(--rule); padding: 0.75rem; margin-top: 0.625rem; }
.bh-sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(3rem, 100%), 1fr)); gap: 0.375rem; margin: 0.625rem 0; }
.bh-sticker-option { background: var(--surface); border: 1px solid var(--rule); padding: 0.375rem; cursor: pointer; }
.bh-sticker-option.is-on { border-color: var(--accent); outline: 2px solid var(--accent); }

/* Panels, gate, account */
.bh-panel { padding: 1.75rem 0; max-width: 30rem; display: flex; flex-direction: column; gap: 0.75rem; }
.bh-gate { position: fixed; inset: 0; background: rgb(0 0 0 / .45); display: grid; place-items: center; padding: 1rem; z-index: 40; }
.bh-gate-card { background: var(--bg); padding: 1.5rem; max-width: 26.25rem; width: 100%; display: flex; flex-direction: column; gap: 0.625rem; }
.bh-account { position: relative; }
.bh-avatar { width: 2.25rem; height: 2.25rem; border-radius: 18px; border: 1.5px dashed var(--ink-mute); background: transparent; color: var(--ink); font-family: var(--f-display); font-size: 1rem; cursor: pointer; }
.bh-rank { font-size: 0.8125rem; color: var(--ink-soft); margin: 0; }
.bh-theme-picker { display: flex; flex-direction: column; gap: 0.5rem; }
.bh-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(min(10rem, 100%), calc(50% - 0.1875rem)), 1fr)); gap: 0.375rem; }
.bh-swatch { display: flex; gap: 0.5rem; align-items: center; padding: 0.625rem; border: 1px solid var(--rule); font: 600 0.75rem var(--f-body); cursor: pointer; text-align: left; }
.bh-swatch.is-on, .bh-pair.is-on { outline: 2px solid var(--accent); }
.bh-swatch-dot { width: 0.75rem; height: 0.75rem; flex: none; }
.bh-pairs { display: flex; flex-direction: column; gap: 0.375rem; }
.bh-pair { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.625rem 0.75rem; background: transparent; border: 1px solid var(--rule); color: var(--ink); text-align: left; cursor: pointer; font-synthesis: none; }
.bh-pair-label { font-size: 0.6875rem; color: var(--ink-soft); }
.bh-pair-sample { font-size: 1.375rem; line-height: 1.1; }
.bh-pair-body { font-size: 0.8125rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .bh-app * { transition: none !important; animation: none !important; } }
.bh-sticker-text { font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; line-height: 1; }
.bh-sticker-sm .bh-sticker-text { font-size: 0.9375rem; }
.bh-intent-option.is-on { border-color: transparent; background: none; }
.bh-intent-option.is-on .bh-intent { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.bh-byline .bh-eyebrow { margin-inline: 0.375rem 2px; }
/* Blazor focuses the page heading after navigation for screen readers; no visible ring needed there. */
.bh-app h1:focus { outline: none; }
/* Hall and Seek */
.bh-ranked { list-style: none; margin: 0; padding: 0; }
.bh-ranked li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: start; }
.bh-place { font-family: var(--f-display); font-size: 1.375rem; color: var(--gold); padding-top: 0.875rem; font-variant-numeric: tabular-nums; }
.bh-seek-form { display: flex; gap: 0.5rem; max-width: 35rem; }
.bh-seek-form input { flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); padding: 0.625rem 0.75rem; }
.bh-person { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--rule); text-decoration: none; }
.bh-person-name { flex: 1; min-width: 0; font-weight: 700; }
.bh-avatar-sm { width: 2rem; height: 2rem; border-radius: 16px; display: grid; place-items: center; background: var(--accent); color: var(--surface); font-family: var(--f-display); }
.bh-seek-intents { padding: 0.75rem 0; }
/* Library */
.bh-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16.25rem, 100%), 1fr)); gap: 0.875rem; padding: 0.5rem 0 1.5rem; }
.bh-book { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); background: var(--surface); border: 1px solid var(--rule); text-decoration: none; min-height: 8.25rem; }
.bh-book:hover .bh-book-title { color: var(--accent); }
.bh-book-spine { display: grid; place-items: center; background: var(--accent); color: var(--surface); font-family: var(--f-display); font-size: 1.375rem; writing-mode: vertical-rl; }
.bh-book-body { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.875rem; min-width: 0; }
.bh-book-title { font-size: 1.25rem; line-height: 1.15; overflow-wrap: anywhere; }
.bh-new { position: absolute; top: 0.625rem; right: 0.625rem; background: var(--gold); color: var(--surface); font: 700 0.625rem var(--f-mono); letter-spacing: .16em; padding: 0.1875rem 0.4375rem; }
.bh-reader { max-width: 45rem; }
.bh-entries { list-style: none; margin: 0; padding: 0; }
.bh-entry { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); padding: 0.375rem 0 0.625rem; border-bottom: 1px solid var(--rule); }
.bh-entry .bh-verse-text { margin: 0.75rem 0 0.375rem; }
.bh-pager { padding: 1.25rem 0; }
.bh-spacer { flex: 1; }
/* Council */
.bh-candidates { list-style: none; margin: 0; padding: 0; }
.bh-candidate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.375rem 0.75rem; padding: 0.875rem 0.25rem; border-bottom: 1px solid var(--rule); }
.bh-candidate.is-struck .bh-candidate-name { text-decoration: line-through; color: var(--ink-mute); }
.bh-candidate-main { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.bh-candidate-name { font-family: var(--f-display); font-size: 1.125rem; overflow-wrap: anywhere; }
.bh-candidate-actions { grid-column: 1 / -1; }
.bh-score { text-align: right; font-variant-numeric: tabular-nums; }
.bh-status { align-self: flex-start; font: 700 0.6875rem var(--f-body); color: var(--surface); background: var(--gold); padding: 2px 0.5rem; }
.bh-vote, .bh-decide { padding: 0.4375rem 0.75rem; background: var(--surface); border: 1px solid var(--rule); color: var(--ink-soft); font: 600 0.8125rem var(--f-body); cursor: pointer; }
.bh-vote.is-on { border-color: var(--accent); background: var(--accent); color: var(--surface); }
.bh-decide:disabled { opacity: .45; cursor: not-allowed; }
.bh-cutline { padding: 0.5rem 0.25rem; border-top: 2px dashed var(--accent); color: var(--accent); font: 600 0.6875rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.bh-propose { margin-top: 0.625rem; }
.bh-propose input, .bh-rename input { flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); padding: 0.5rem 0.625rem; }
.bh-rename { display: flex; gap: 0.375rem; }
.bh-confirm { display: inline-flex; gap: 0.5rem; align-items: center; }
.bh-danger { border-color: #b3261e !important; background: #b3261e !important; color: #fff !important; }
/* Profiles */
.bh-profile { flex-direction: row; align-items: center; gap: 1rem; }
.bh-profile-head { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.bh-profile-head p { margin: 0; }
.bh-avatar-lg { flex: none; width: 4rem; height: 4rem; border-radius: 32px; display: grid; place-items: center; background: var(--accent); color: var(--surface); font-family: var(--f-display); font-size: 1.75rem; }
.bh-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bh-profile-actions { padding: 1rem 0 0.25rem; }
.bh-appearance .bh-theme-picker { padding-top: 0.75rem; max-width: 32.5rem; }
/* Comments */
.bh-comments { display: flex; flex-direction: column; gap: 0.625rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.bh-comments h2 { font-size: 1.375rem; }
.bh-comment-list { list-style: none; margin: 0; padding: 0; }
.bh-comment { padding: 0.625rem 0; border-bottom: 1px solid var(--rule); }
.bh-comment a { text-decoration: none; }
.bh-comment-text { margin: 0.25rem 0 0; overflow-wrap: anywhere; }
.bh-comment-form { display: flex; flex-direction: column; gap: 0.5rem; }
.bh-comment-form textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); padding: 0.625rem 0.75rem; resize: vertical; }
/* Admin */
.bh-admin-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.125rem; padding: 1rem 0 0; border-bottom: 1px solid var(--rule); }
.bh-admin-nav a { padding: 0.5rem 0; text-decoration: none; color: var(--ink-mute); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bh-admin-nav a.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 700; }
.bh-admin-section { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.125rem 0; border-bottom: 1px solid var(--rule); }
.bh-admin-section h2 { font-size: 1.375rem; }
.bh-toggle input { margin-top: 0.1875rem; align-self: flex-start; }
.bh-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13.75rem, 100%), 1fr)); gap: 0 1.125rem; }
.bh-form-grid > .bh-row, .bh-form-grid > .bh-hint, .bh-form-grid > h3 { grid-column: 1 / -1; }
.bh-table-wrap { overflow-x: auto; }
.bh-table { border-collapse: collapse; width: 100%; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.bh-table th, .bh-table td { text-align: left; padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.bh-table th { font: 600 0.6875rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.bh-admin-chapters { list-style: none; margin: 0; padding: 0; }
.bh-admin-chapter { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto auto; gap: 0.375rem 0.5rem; align-items: center; padding: 0.625rem 0; border-bottom: 1px solid var(--rule); }
.bh-admin-chapter input { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); padding: 0.5rem 0.625rem; min-width: 0; }
.bh-admin-chapter > .bh-eyebrow { grid-column: 2 / -1; }
.bh-pending { padding: 0.625rem 0; border-bottom: 1px solid var(--rule); }
.bh-pending > span { min-width: 0; }
.bh-form-actions { padding: 1.125rem 0; }
.bh-field select { font: inherit; color: var(--ink); background-color: var(--surface); border: 1px solid var(--rule); padding: 0.625rem 0.75rem; }
.bh-table td { white-space: normal; vertical-align: top; }
/* Navigation, cards and right rail */
.bh-icon-link { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; text-decoration: none; font-family: var(--f-display); font-size: 1.125rem; color: var(--ink-soft); }
.bh-rail { display: none; }
@media (min-width: 75em) {
  .bh-shell { max-width: 82.5rem; grid-template-columns: 13.75rem minmax(0, 1fr) 18.75rem; }
  .bh-rail { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.5rem 1rem; border-left: 1px solid var(--rule); position: sticky; top: 4.0625rem; align-self: start; max-height: calc(100vh - 4.0625rem); overflow-y: auto; }
}
.bh-rail-card { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.875rem; background: var(--surface); border: 1px solid var(--rule); text-decoration: none; }
.bh-rail-card p { margin: 0; }
.bh-rail-book .bh-display { font-size: 1.25rem; }
.bh-rail-verse { font-family: var(--f-display); font-size: 0.9375rem; line-height: 1.3; text-decoration: none; padding: 0.375rem 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.bh-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.bh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 0.75rem; margin: 0.25rem 0 0.5rem; }
.bh-card { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.125rem; text-decoration: none; }
.bh-card .bh-display { font-size: 1.375rem; line-height: 1.15; }
.bh-card-dark { background: var(--ink); color: var(--surface) !important; }
.bh-card-dark .bh-eyebrow { color: var(--gold); }
.bh-card-council { border: 1px dashed var(--accent); background: var(--surface); }
/* Offline and sync */
.bh-offline { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; align-items: center; margin: 0.75rem 0 0; padding: 0.625rem 0.875rem; background: var(--ink); color: var(--surface); font-size: 0.875rem; }
.bh-offline .bh-eyebrow { color: var(--gold); }
.bh-notices { margin: 0.625rem 0 0; padding: 0.625rem 0.875rem; border-left: 3px solid var(--gold); background: var(--surface); }
.bh-notice { margin: 0 0 0.375rem; }
.bh-pending { font: 600 0.6875rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px dashed var(--gold); padding: 1px 0.375rem; }
.bh-draft { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.bh-draft p { margin: 0 0 0.375rem; }
/* Chapter markers */
.bh-marker { display: inline-block; margin-left: 0.375rem; padding: 0 0.375rem; border: 1px solid var(--rule); color: var(--ink-soft); font: 600 0.625rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.bh-marker.is-new { border-color: var(--accent); background: var(--accent); color: var(--surface); }
.bh-marker.is-trending { border-color: var(--accent); color: var(--ink); }
.bh-marker.is-trending > span { color: var(--accent); }
.bh-marker.is-survival { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); }
.bh-verse-no { margin-left: auto; font: 600 0.625rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
/* Records and leaderboard */
.bh-records, .bh-leaders, .bh-in-books-list { list-style: none; margin: 0; padding: 0; }
.bh-record { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0.625rem; align-items: center; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--rule); }
.bh-record-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bh-record-main a { text-decoration: none; }
.bh-record-runs { text-align: right; font-variant-numeric: tabular-nums; }
.bh-dots { display: block; color: var(--accent); font-size: 0.5625rem; letter-spacing: 2px; }
.bh-leader { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 2px 0.625rem; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--rule); }
.bh-leader .bh-place { grid-row: span 2; padding-top: 0; }
.bh-leader a { text-decoration: none; }
.bh-in-books { padding: 0.5rem 0 1rem; }
.bh-in-books p { margin: 0.625rem 0 0; }
.bh-in-books-list li { padding: 0.375rem 0; }
/* New-run announcement */
.bh-new-run { position: relative; display: flex; flex-direction: column; gap: 0.5rem; margin: 0.25rem 0 0.75rem; padding: 1.125rem; background: var(--surface); border: 1px solid var(--accent); }
.bh-new-run p { margin: 0; }
.bh-new-run h2 { font-size: 1.375rem; }
.bh-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 2rem; height: 2rem; border: none; background: transparent; color: var(--ink-soft); font-size: 1.125rem; cursor: pointer; }
.bh-new-run-modal .bh-gate-card { position: relative; text-align: center; align-items: center; }
.bh-new-run-modal:focus { outline: none; } /* focused on open so Escape works; the card is the visible target */

/* Intro cards: once per account, before any other popup */
.bh-intro:focus { outline: none; }
.bh-intro .bh-gate-card { gap: 0.75rem; }
.bh-intro .bh-display { font-size: 1.625rem; margin: 0; text-wrap: balance; }
.bh-intro p { margin: 0; line-height: 1.55; }
.bh-intro-actions { justify-content: space-between; margin-top: 0.5rem; }
.bh-intro-actions .bh-button, .bh-intro-actions .bh-link { min-height: 2.75rem; }
.bh-intro-head { justify-content: space-between; align-items: center; }
.bh-intro-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.bh-intro-icon svg { width: 1.5rem; height: 1.5rem; }
.bh-intro-step { display: flex; flex-direction: column; gap: 0.75rem; animation: bh-intro-in 260ms ease-out both; }
.bh-intro-step .bh-intro-icon { animation: bh-intro-pop 360ms cubic-bezier(.34, 1.56, .64, 1) both; }
.bh-intro-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.bh-intro-chips li { font-size: 0.8125rem; padding: 0.25rem 0.625rem; border-radius: 999rem; color: var(--ink); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); animation: bh-intro-in 240ms ease-out both; animation-delay: calc(120ms + var(--i, 0) * 60ms); }
.bh-intro-dots { display: flex; justify-content: center; gap: 0.375rem; }
.bh-intro-dots span { width: 0.5rem; height: 0.5rem; border-radius: 0.25rem; background: var(--rule); transition: width 240ms ease-out, background-color 240ms ease-out; }
.bh-intro-dots .is-done { background: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.bh-intro-dots .is-on { width: 1.25rem; background: var(--accent); }
@keyframes bh-intro-in { from { opacity: 0; transform: translateX(0.75rem); } to { opacity: 1; transform: none; } }
@keyframes bh-intro-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bh-intro-step, .bh-intro-step *, .bh-intro-dots span { animation: none; transition: none; } }
.bh-new-run-modal .bh-display { font-size: 1.75rem; }
/* Rank-up celebration */
.bh-rankup { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.5rem 1rem; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, var(--surface) 0%, var(--bg) 62%); }
.bh-rankup-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.625rem; max-width: 26.25rem; text-align: center; }
.bh-rankup-body p { margin: 0; }
.bh-rankup-emblem { font-family: var(--f-display); font-size: 4rem; line-height: 1; color: var(--accent); animation: bh-pop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.bh-rankup-name { font-size: clamp(2.5rem, 12vw, 4rem); letter-spacing: .14em; text-transform: uppercase; animation: bh-rise .6s .15s ease-out both; }
.bh-rankup-message { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.3; }
.bh-rankup-actions { justify-content: center; margin-top: 0.5rem; }
.bh-sparkles span { position: absolute; left: calc(6% + var(--i) * 6.5%); top: 110%; color: var(--gold); font-size: calc(0.625rem + (var(--i) * 0.1875rem) % 0.875rem);
  animation: bh-float calc(2.6s + var(--i) * .17s) calc(var(--i) * .12s) ease-out infinite; }
@keyframes bh-pop { from { transform: scale(.2) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bh-rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bh-float { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-120vh) rotate(160deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bh-sparkles { display: none; } }

/* Ranks page */
.bh-ranks { list-style: none; margin: 0; padding: 0; }
.bh-rank-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.875rem 0.5rem; border-bottom: 1px solid var(--rule); }
.bh-rank-row.is-mine { background: var(--surface); border-left: 3px solid var(--accent); }
.bh-rank-emblem { font-family: var(--f-display); font-size: 1.875rem; color: var(--accent); text-align: center; }
.bh-rank-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.bh-rank-main b { font-size: 1.25rem; font-weight: 400; }
/* Statuses for verses without a tier */
.bh-status-badge { display: inline-flex; gap: 0.25rem; align-items: center; padding: 2px 0.5625rem; border: 1px dashed var(--rule); color: var(--ink-soft); font: 700 0.6875rem var(--f-body); }
.bh-status-badge.is-new { border-style: solid; border-color: var(--accent); color: var(--accent); }

/* Post cards (lothando_design/BHAYIBHELI/handoff-post-cards): Scoreboard (default), Speech bubble, Corner ribbon. */
.bh-card-intent { display: inline-flex; align-items: center; gap: 0.375rem; font: italic 0.84375rem/1.2 var(--f-display); color: var(--ink-soft); white-space: nowrap; }
.bh-card-intent-emoji { font-style: normal; font-size: 0.875rem; }
.bh-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.bh-card-meta { font: 0.5625rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.bh-rating { display: inline-flex; align-items: center; justify-content: center; gap: 0.3125rem; color: #fff; font: 900 0.625rem/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.bh-rating.is-unrated { background: var(--surface); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--ink-soft); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.bh-rating.is-dashed { border-style: dashed; }
.bh-rating.is-pop { animation: bh-badge-pop 320ms ease-out; }
@keyframes bh-badge-pop { 50% { transform: scale(1.35); } }
.bh-rise { animation: bh-card-rise 320ms ease-out both; }
@keyframes bh-card-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

.bh-verse-card.bh-card-scoreboard, .bh-verse-card.bh-card-ribbon { background: var(--surface); border: 1px solid var(--rule); overflow: hidden; margin-block: 0.625rem; min-height: 2.75rem; }
.bh-verse-card.bh-card-scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) 4.75rem; gap: 0; padding: 0; border-radius: 10px; }
.bh-card-scoreboard .bh-card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.8125rem 0.875rem; min-width: 0; }
.bh-card-scoreboard .bh-byline { font-size: 0.71875rem; gap: 0.625rem; flex-wrap: wrap; align-items: center; }
.bh-rating.is-column { flex-direction: column; gap: 0.25rem; padding: 0.625rem 0.25rem; text-align: center; }
.bh-rating.is-column.is-unrated { border-width: 0 0 0 1.5px; }
.bh-rating-emoji { font-size: 1.375rem; line-height: 1; }
.bh-rating-label { font-size: 0.5625rem; letter-spacing: .06em; line-height: 1.1; white-space: normal; }
.bh-rating-points { font-size: 0.71875rem; font-weight: 800; margin-top: 0.1875rem; letter-spacing: 0; text-transform: none; }

.bh-verse-card.bh-card-bubble { gap: 0.5rem; padding: 0.25rem 0 0.375rem; border-bottom: 0; margin-block: 0.5625rem 1.125rem; }
.bh-bubble { position: relative; display: block; background: var(--surface); border: 1px solid var(--rule); border-radius: 18px 18px 18px 4px; padding: 0.875rem 1rem 1.375rem; }
.bh-rating.is-chip { position: absolute; right: 0.875rem; bottom: -0.75rem; padding: 0.25rem 0.5625rem 0.25rem 0.4375rem; border-radius: 7px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.bh-rating.is-chip.is-unrated { box-shadow: none; }
.bh-card-bubble .bh-byline { font-size: 0.71875rem; }

.bh-verse-card.bh-card-ribbon { position: relative; gap: 0.625rem; padding: 0.875rem 1rem 0.75rem; border-radius: 6px; }
.bh-card-ribbon .bh-card-top { padding-right: 3.75rem; justify-content: flex-start; }
.bh-card-ribbon .bh-verse-text { padding-right: 4rem; }
.bh-card-ribbon .bh-byline { font-size: 0.71875rem; align-items: center; }
.bh-card-ribbon .bh-byline .bh-card-meta { margin-left: auto; }
.bh-rating.is-ribbon { position: absolute; top: 1.25rem; right: -2.5rem; width: 9.375rem; padding: 0.1875rem 0; transform: rotate(38deg); font-size: 0.59375rem; letter-spacing: .1em; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }

.bh-card-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.375rem, 100%), 1fr)); gap: 0.625rem; }
.bh-card-choice { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; text-align: left; padding: 0.625rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; color: var(--ink); font: inherit; cursor: pointer; min-height: 2.75rem; }
.bh-card-choice.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.bh-card-choice-art { position: relative; display: grid; grid-template-columns: 1fr 1.375rem; width: 100%; height: 2.125rem; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: var(--bg); }
.bh-card-choice-art span:last-child { background: #b65c15; }
.bh-card-choice.is-bubble .bh-card-choice-art { display: block; border-radius: 12px 12px 12px 3px; }
.bh-card-choice.is-bubble .bh-card-choice-art span:last-child { position: absolute; right: 0.375rem; bottom: 0.1875rem; width: 1.375rem; height: 0.5625rem; border-radius: 3px; }
.bh-card-choice.is-ribbon .bh-card-choice-art { display: block; }
.bh-card-choice.is-ribbon .bh-card-choice-art span:last-child { position: absolute; top: 0.4375rem; right: -0.875rem; width: 3.125rem; height: 0.4375rem; transform: rotate(38deg); }
@media (prefers-reduced-motion: reduce) { .bh-rise, .bh-rating.is-pop { animation: none; } }

/* Chapter fill: verses against the chapter's limit (a ring when short, a dot when full) */
.bh-fill { margin-left: 0.375rem; font: 600 0.6875rem var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; text-transform: none; white-space: nowrap; }
.bh-fill.is-short { color: var(--ink-mute); }
.bh-fill.is-full { color: var(--accent); font-weight: 800; }
.bh-short-note { margin: 0.375rem 0 0; color: var(--ink-soft); font-style: italic; }
.bh-limit-input { width: 5.5em; }

/* Inbox: bell, messages, settings */
.bh-bell { position: relative; }
.bh-promotes { display: inline-flex; align-items: center; gap: 0.125rem; color: var(--accent); text-decoration: none; }
.bh-promotes-icon { width: 1.25rem; height: 1.25rem; }
.bh-promotes-count { font: 800 0.8125rem/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.bh-promotes.is-out { color: var(--ink-mute); }
.bh-promotes.is-bumped .bh-promotes-count { animation: bh-intro-pop 360ms cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: reduce) { .bh-promotes.is-bumped .bh-promotes-count { animation: none; } }
.bh-bell-icon { width: 1.375rem; height: 1.375rem; }
.bh-bell-count { position: absolute; top: -0.25rem; right: -0.375rem; min-width: 1.0625rem; height: 1.0625rem; padding: 0 0.25rem; border-radius: 9px; background: var(--accent); color: var(--surface); font: 800 0.625rem/1.0625rem var(--f-mono); text-align: center; font-variant-numeric: tabular-nums; }
.bh-messages { list-style: none; margin: 0; padding: 0; }
.bh-message { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; padding: 0.875rem 0.25rem 0.875rem 1.125rem; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer; position: relative; }
.bh-message.is-unread { color: var(--ink); font-weight: 700; }
.bh-message.is-unread::before { content: ""; position: absolute; left: 0.25rem; top: 1.3125rem; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--accent); }
/* --accent-soft is a full-strength accent in some themes, so hover gets a pale tint of the accent instead */
.bh-message:hover, .bh-message:focus-visible { background: var(--surface); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.bh-message-prefs { display: grid; gap: 0.875rem; }
.bh-message-group { margin: 0; padding: 0; border: 0; display: grid; gap: 0.375rem; }
.bh-message-settings { display: grid; gap: 0.875rem; }
.bh-message-setting { display: grid; gap: 0.375rem; padding: 0.75rem; border: 1px solid var(--rule); }
.bh-message-setting.is-off { opacity: .6; }
.bh-message-setting input:not([type=checkbox]) { width: 100%; }

/* Form controls: themed base for every text field, dropdown and checkbox (class rules above still win) */
input:where(:not([type=checkbox]):not([type=radio])), select, textarea {
  font: inherit; color: var(--ink); background-color: var(--surface);
  border: 1px solid var(--rule); border-radius: 0; padding: 0.5rem 0.625rem;
}
input:where(:not([type=checkbox]):not([type=radio])):focus-visible, select:focus-visible, textarea:focus-visible,
input[type=checkbox]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent);
}
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }

/* Dropdowns: no native arrow; a caret drawn in the accent colour, so it follows every theme. */
select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select:hover { border-color: var(--ink-mute); }
select option { color: var(--ink); background: var(--surface); }

/* Checkboxes: a square in the theme's rule colour, filled with the accent and a tick when on. */
input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 1.25rem; height: 1.25rem; margin: 0; vertical-align: -4px;
  border: 1.5px solid var(--ink-mute); background: var(--surface);
  display: inline-grid; place-content: center; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
input[type=checkbox]::after {
  content: ""; width: 0.625rem; height: 0.3125rem; margin-top: -0.1875rem;
  border: solid var(--surface); border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg) scale(0); transition: transform .12s ease-out;
}
input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
input[type=checkbox]:checked::after { transform: rotate(-45deg) scale(1); }
input[type=checkbox]:hover:not(:disabled) { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { input[type=checkbox], input[type=checkbox]::after { transition: none; } }

/* A checkbox and its words line up, and the whole label is the tap target. */
.bh-check { display: flex; align-items: center; gap: 0.625rem; min-height: 2rem; cursor: pointer; }

/* BhSelect: the app's own dropdown, so the open list follows the theme too */
.bh-select { position: relative; }
.bh-select-button {
  width: 100%; display: block; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background-color: var(--surface); border: 1px solid var(--rule); padding: 0.625rem 2.5rem 0.625rem 0.75rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.bh-select-button:hover { border-color: var(--ink-mute); }
.bh-select-button:focus-visible, .bh-select.is-open .bh-select-button { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.bh-select-button:disabled { opacity: .55; cursor: not-allowed; }
.bh-select-backdrop { position: fixed; inset: 0; z-index: 40; }
.bh-select-list {
  position: absolute; z-index: 41; left: 0; right: 0; top: calc(100% + 0.375rem); margin: 0; padding: 0.375rem 0; list-style: none;
  max-height: min(20rem, 50vh); overflow-y: auto; background: var(--surface); border: 1px solid var(--rule);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18); animation: bh-select-in .14s ease-out;
}
.bh-select-option { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; padding: 0.6875rem 0.875rem; color: var(--ink); cursor: pointer; text-transform: none; letter-spacing: normal; font-size: 0.9375rem; }
.bh-select-option.is-active { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.bh-select-option.is-selected { color: var(--accent); font-weight: 700; }
.bh-select-tick { color: var(--accent); font-weight: 800; }
@keyframes bh-select-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bh-select-list { animation: none; } }

/* Account drawer: slides in from the right over a dimmed page */
:root:has(.bh-drawer) { overflow: hidden; }
/* The drawer lives in the sticky top bar's layer; lift that layer above the tab bar while it is open. */
.bh-topbar:has(.bh-drawer) { z-index: 95; }
.bh-drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgb(20 8 14 / .45); animation: bh-fade-in .2s ease-out; }
.bh-drawer {
  position: fixed; z-index: 91; top: 0; right: 0; bottom: 0; width: min(23.75rem, 88vw);
  display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
  border-left: 1px solid var(--rule); box-shadow: -16px 0 40px rgb(0 0 0 / .22);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: bh-drawer-in .24s cubic-bezier(.2, .8, .2, 1); outline: none;
}
.bh-drawer p { margin: 0; }
.bh-drawer-head { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.125rem 1rem 0.875rem; border-bottom: 1px solid var(--rule); }
.bh-drawer-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.bh-drawer-name { font-size: 1.375rem; }
.bh-drawer-close { flex: none; width: 2.25rem; height: 2.25rem; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font-size: 1rem; cursor: pointer; }
.bh-drawer-close:hover { border-color: var(--accent); color: var(--accent); }
.bh-drawer-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bh-drawer-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.875rem 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; }
.bh-drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid var(--rule); background: var(--bg); }
@keyframes bh-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes bh-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bh-drawer, .bh-drawer-backdrop { animation: none; } }

/* Chapter drafts between councils */
.bh-drafts { margin-top: 1rem; display: grid; gap: 0.625rem; }
.bh-drafts h2 { font-size: 1.375rem; margin: 0; }
.bh-draft-list { list-style: none; margin: 0; padding: 0; }
.bh-draft { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid var(--rule); }
.bh-draft-name { font-family: var(--f-display); font-size: 1.125rem; min-width: 0; overflow-wrap: anywhere; }

/* Ratings: the ratings in force and the Big Run's ratings council */
.bh-rating-tiers { list-style: none; margin: 0; padding: 0; }
.bh-rating-tier { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid var(--rule); }
.bh-rating-tier .bh-rating-points { font: 600 0.8125rem var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.bh-rating-weights { margin: 0.75rem 0 0; color: var(--ink-soft); }
.bh-rating-proposals { list-style: none; margin: 0; padding: 0; }
.bh-rating-proposal { display: grid; gap: 0.5rem; padding: 0.875rem 0; border-bottom: 1px solid var(--rule); }
.bh-rating-proposal.is-passing .bh-rating-summary { color: var(--accent); }
.bh-rating-proposal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
.bh-rating-summary { font-size: 1.1875rem; min-width: 0; overflow-wrap: anywhere; }
.bh-vote-bar { display: flex; height: 0.375rem; background: var(--rule); overflow: hidden; }
.bh-vote-bar-yes { background: var(--accent); }
.bh-vote-bar-no { background: var(--ink-mute); }
.bh-decide.is-on { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.bh-rating-form { margin-top: 0.5rem; }

/* The verse page header: the intent in italics, the rating as a badge, like the post cards */
.bh-verse-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.625rem 0 0.25rem; }
.bh-verse-head .bh-card-intent { font-size: 1rem; }
.bh-verse-head .bh-card-intent-emoji { font-size: 1.0625rem; }
.bh-rating.is-badge { padding: 0.375rem 0.6875rem 0.375rem 0.5625rem; border-radius: 8px; font-size: 0.6875rem; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.bh-rating.is-badge.is-unrated { box-shadow: none; }

/* Top bar on narrow phones (360dp and below): brand on one line, icons never wrap under it */
.bh-topbar { gap: 0.5rem; }
.bh-topbar > .bh-row { flex-wrap: nowrap; flex: none; gap: 0.25rem; }
.bh-brand { min-width: 0; white-space: nowrap; }
@media (max-width: 23.75em) {
  .bh-topbar { padding: 0.75rem 0.75rem; }
  .bh-brand { font-size: 1.1875rem; gap: 0.4375rem; }
  .bh-icon-link { width: 2rem; }
}

/* Post time on cards: sits right after the author. */
.bh-byline .bh-card-time { margin-inline-start: -0.375rem; white-space: nowrap; }

/* Sticker replies and the sticker sheet (above the tab bar; Android back closes it). */
.bh-comment.is-sticker .bh-reply-sticker { display: inline-flex; padding: 2px 0; }
.bh-reply-remove { font-size: 0.75rem; }
.bh-sheet-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .35); z-index: 96; }
.bh-sticker-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 97; display: flex; flex-direction: column; max-height: 70vh; max-height: 70dvh; background: var(--surface); border-top: 1px solid var(--rule); padding: 0.875rem 1rem 0; box-shadow: 0 -8px 24px rgb(0 0 0 / .12); }
/* The stickers scroll under a fixed header; the scroll stays inside the sheet and the page behind is held still. */
.bh-sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
:root:has(.bh-sticker-sheet) { overflow: hidden; }
.bh-sheet-head { margin-bottom: 0.25rem; }
.bh-sticker-sheet .bh-sticker-grid { grid-template-columns: repeat(auto-fill, minmax(min(4rem, 100%), 1fr)); gap: 0.5rem; }
.bh-sticker-pick { background: none; border: 1px solid transparent; padding: 0.25rem; cursor: pointer; display: grid; place-items: center; }
.bh-sticker-pick:hover, .bh-sticker-pick:focus-visible { border-color: var(--rule); }
.bh-sticker-pick.is-sent { border-color: var(--accent); }
@media (min-width: 45em) { .bh-sticker-sheet { left: 50%; right: auto; width: 32.5rem; transform: translateX(-50%); } }

/* Live reaction counts: a brief pulse when someone reacts. */
@keyframes bh-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.bh-pulse { animation: bh-pulse .7s ease-out; }
@media (prefers-reduced-motion: reduce) { .bh-pulse { animation: none; outline: 2px solid var(--accent); } }

/* Safety: verse actions, confirm rows, the report sheet and the blocked list. */
.bh-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0.5rem 0; }
.bh-confirm { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.bh-edit { display: grid; gap: 0.5rem; width: 100%; }
.bh-edit-text { width: 100%; }
.bh-report-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 97; max-height: 85vh; overflow-y: auto;
    background: var(--surface); color: var(--ink); border-top: 1px solid var(--rule); padding: 0.875rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    display: grid; gap: 0.625rem; box-shadow: 0 -8px 24px rgb(0 0 0 / .12); }
@media (min-width: 45em) { .bh-report-sheet { left: 50%; right: auto; width: 32.5rem; transform: translateX(-50%); } }
.bh-report-reasons { border: 0; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.bh-report-sheet textarea { width: 100%; }
.bh-report-thanks { font-size: 1.05rem; }
.bh-error { color: var(--danger, #b3261e); margin: 0; }
.bh-blocked { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.bh-blocked li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.bh-queue { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.875rem; }
.bh-queue-item { border: 1px solid var(--rule); border-radius: 12px; padding: 0.75rem 0.875rem; display: grid; gap: 0.5rem; background: var(--surface); }
.bh-queue-item.is-hidden { border-color: var(--accent); }
.bh-queue-text { margin: 0; font-size: 1.05rem; }
.bh-queue-reasons { margin: 0; padding-left: 1.125rem; }
.bh-queue-actions { flex-wrap: wrap; gap: 0.5rem; }
.bh-member-history { padding-left: 1.125rem; display: grid; gap: 0.375rem; }
.bh-back { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0 0.75rem 0 0; margin-bottom: 0.25rem; background: none; border: 0; color: var(--ink-soft); font: 600 0.9375rem var(--f-body); cursor: pointer; }
.bh-back:hover { color: var(--accent); }
.bh-enter-forward { animation: bh-enter-forward 220ms ease-out both; }
.bh-enter-back { animation: bh-enter-back 220ms ease-out both; }
@keyframes bh-enter-forward { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bh-enter-back { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bh-enter-forward, .bh-enter-back { animation: bh-fade-in 150ms ease-out both; } }

/* How it works guide */
.bh-guide { display: grid; gap: 1.75rem; max-width: 65ch; }
.bh-guide section { display: grid; gap: 0.625rem; }
.bh-guide h2 { margin: 0; font-size: 1.375rem; text-wrap: balance; }
.bh-guide p { margin: 0; line-height: 1.6; }
.bh-guide-list { margin: 0; padding-left: 1.2em; display: grid; gap: 0.375rem; line-height: 1.55; }
.bh-guide-weights b { font-variant-numeric: tabular-nums; }
.bh-guide-ranks th[scope=row] { font-weight: 700; }
.bh-drawer-guide { margin: 1rem 0 0; }

/* Cards: the verse link is stretched over the whole card; Like and I relate sit above it. */
.bh-verse-card { position: relative; }
.bh-card-link { color: inherit; text-decoration: none; }
.bh-card-link::after { content: ""; position: absolute; inset: 0; }
.bh-card-link:focus-visible { outline: none; }
.bh-verse-card:has(.bh-card-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.bh-card-reacts { position: relative; z-index: 1; gap: 0.375rem; align-items: center; }
.bh-react-sm { padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
.bh-card-promotes { font-size: 0.75rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
/* GIFs on intents and the GIF picker. */
.bh-intent-gif { width: 1.25rem; height: 1.25rem; object-fit: cover; border-radius: 4px; vertical-align: middle; }
.bh-intent-gif-lg { width: 4rem; height: 4rem; }
.bh-gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(6rem, 100%), 1fr)); gap: 0.375rem; margin: 0.625rem 0; }
.bh-gif-option { padding: 0; border: 2px solid transparent; background: var(--surface); cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.bh-gif-option img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-gif-option.is-on { border-color: var(--accent); }
.bh-credit { font-size: 0.75rem; }

/* Continue with Google, under the password form. */
.bh-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0 0.75rem; color: var(--ink-mute); font-size: 0.8125rem; }
.bh-or::before, .bh-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.bh-google { width: 100%; }
.bh-google-g { font-weight: 800; font-family: var(--f-body); }

/* Larger text (phone or browser setting): rows wrap and the tab bar shares its width instead of running off the screen. */
.bh-sort { flex-wrap: wrap; row-gap: 0; }
.bh-rating:not(.is-ribbon) { max-width: 100%; white-space: normal; }
.bh-select-button { white-space: normal; overflow-wrap: anywhere; }
/* The brand and header icons are capped by screen width, so the header holds together at the largest text. */
.bh-brand { white-space: normal; font-size: min(1.375rem, 6vw); }
.bh-icon-link, .bh-avatar { width: min(2.25rem, 11vw); height: min(2.25rem, 11vw); }
.bh-avatar { border-radius: 50%; }
@media (max-width: 23.75em) { .bh-brand { font-size: min(1.1875rem, 5.2vw); } .bh-icon-link { width: min(2rem, 10vw); } }
.bh-tab { flex: 1; min-width: 0; padding-inline: 0.25rem; }
.bh-tab span:last-child { font-size: min(0.625rem, 2.8vw); }
.bh-tab-primary { flex: none; width: min(3.25rem, 14vw); height: min(3.25rem, 14vw); }

/* Every pointer: nothing smaller than 24px (WCAG 2.2 AA). */
.bh-actions .bh-link, .bh-person-name { min-height: 1.5rem; }

/* Touch screens: every control reaches 44px. Controls that would look wrong bigger get an invisible hit area instead. */
@media (pointer: coarse) {
  .bh-tab { min-height: 2.75rem; justify-content: center; }
  .bh-sort button { min-width: 2.75rem; min-height: 2.75rem; }
  .bh-intent-option { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .bh-react, .bh-vote, .bh-decide, .bh-swatch, .bh-pair, .bh-check, .bh-toggle, .bh-select-button, .bh-select-option, .bh-admin-nav a, .bh-nav { min-height: 2.75rem; }
  .bh-close, .bh-drawer-close, .bh-sticker-pick, .bh-sticker-option { min-width: 2.75rem; min-height: 2.75rem; }
  .bh-topbar > .bh-row { gap: 0.5rem; }
  /* Plain links (in sentences, eyebrows and headings) keep their look. */
  .bh-icon-link, .bh-avatar, .bh-brand, .bh-link, .bh-person-name, .bh-record-main a, .bh-app a:not([class]) { position: relative; }
  .bh-icon-link::after, .bh-avatar::after, .bh-brand::after, .bh-link::after, .bh-person-name::after, .bh-record-main a::after, .bh-app a:not([class])::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 2.75rem); height: max(100%, 2.75rem); transform: translate(-50%, -50%);
  }
}

/* Test builds of the phone app: the server address on the sign-in page. */
.bh-dev-server { margin-top: 1.5rem; font-size: 0.875rem; }
.bh-dev-server summary { cursor: pointer; padding-block: 0.5rem; }

/* Date of birth: three typed boxes, the year wider. */
.bh-dob { border: 0; margin: 0; padding: 0; min-width: 0; }
.bh-dob legend { padding: 0; margin-bottom: 0.375rem; }
.bh-dob-parts { display: flex; gap: 0.625rem; }
.bh-dob-part { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; width: 4rem; }
.bh-dob-part input { width: 100%; text-align: center; font-variant-numeric: tabular-nums; }
.bh-dob-year { width: 5.5rem; }

/* Home survival mode: chapters over their places, the line, and the verses either side of it. */
.bh-survival { display: flex; flex-direction: column; gap: 0.75rem; }
.bh-survival > .bh-hint { margin: 0; }
.bh-survival-card { border: 1px solid var(--rule); background: var(--surface); }
.bh-survival-head { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; width: 100%; padding: 0.875rem 1rem; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.bh-survival-name { font-size: 1.25rem; }
.bh-survival-bar { position: relative; display: block; height: 0.5rem; margin: 0.5rem 0 0.25rem; border-radius: 0.25rem; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); overflow: hidden; }
.bh-survival-in { position: absolute; inset: 0 auto 0 0; border-right: 2px solid var(--ink); background: var(--accent); animation: bh-survival-fill 700ms ease-out both; }
.bh-survival-meta { font-size: 0.875rem; color: var(--ink-soft); }
.bh-survival-meta strong { color: var(--ink); }
.bh-survival-edge { padding: 0 1rem 0.875rem; display: flex; flex-direction: column; gap: 0.5rem; animation: bh-intro-in 220ms ease-out both; }
.bh-survival-edge ol { list-style: none; margin: 0; padding: 0; }
.bh-survival-edge li a { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.25rem 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.bh-survival-pos { font: 800 0.8125rem/1 var(--f-mono); color: var(--ink-mute); min-width: 2.25rem; font-variant-numeric: tabular-nums; }
.bh-survival-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9375rem; }
.bh-survival-pill { flex: none; font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 999rem; }
.bh-survival-pill.is-in { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--ink); }
.bh-survival-pill.is-out { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--ink); font-weight: 600; }
.bh-survival-line { margin: 0.375rem 0; padding-top: 0.25rem; border-top: 2px dashed var(--accent); font-size: 0.75rem; text-align: center; color: var(--ink-soft); }
@keyframes bh-survival-fill { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .bh-survival-in, .bh-survival-edge { animation: none; } }
.bh-sort-entry .bh-sort-arrow { display: inline-block; margin-left: 0.125rem; color: var(--accent); }
.bh-survival-info { font-size: 0.9375rem; }
.bh-survival-info summary { cursor: pointer; color: var(--accent); min-height: 2.75rem; display: flex; align-items: center; }
.bh-survival-info p { margin: 0 0 0.5rem; color: var(--ink-soft); line-height: 1.55; }

/* Live ranking: verses below a crowded chapter's line, the line itself, and crossings */
.bh-flip-list > [data-flip], .bh-flip-list li[data-flip] { position: relative; }
.bh-verse-card.is-out.bh-card-scoreboard, .bh-verse-card.is-out.bh-card-ribbon, .bh-verse-card.is-out .bh-bubble { border-style: dashed; border-width: 1.5px; border-color: color-mix(in srgb, var(--ink-mute) 70%, transparent); }
.bh-verse-card.bh-card-bubble.is-out { border-bottom: 0; }
.bh-line-tag { flex: none; padding: 0 0.375rem; border: 1px dashed var(--ink-mute); color: var(--ink-soft); font: 600 0.625rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.bh-line-tag.is-in { border-style: solid; border-color: var(--accent); background: var(--accent); color: var(--surface); }
.bh-line-tag.is-crossed, .bh-survival-pill.is-crossed { animation: bh-intro-pop 420ms cubic-bezier(.2, .8, .2, 1) both; }
.bh-the-line { display: flex; align-items: center; gap: 0.625rem; margin-block: 0.5rem; color: var(--accent); font: 600 0.625rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.bh-the-line::before, .bh-the-line::after { content: ""; flex: 1; border-top: 2px dashed var(--accent); }
.bh-survival-news { color: var(--accent); font-weight: 600; }
.bh-survival-card.has-crossed { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bh-line-tag.is-crossed, .bh-survival-pill.is-crossed { animation: none; } }

/* Verse history (verse page, opens on tap) */
.bh-history { margin-block: 1.25rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.bh-history-toggle { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 0.75rem; min-height: 2.75rem; padding: 0.75rem 0; background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.bh-history-toggle .bh-display { font-size: 1.25rem; }
.bh-history-summary { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; color: var(--ink-soft); margin: 0 0 0.75rem; }
.bh-history-summary strong { color: var(--ink); }
.bh-history-moves { margin-left: auto; font-family: var(--f-mono); font-size: 0.75rem; }
.bh-history-moves .is-up, .bh-history-item.is-up .bh-history-icon, .bh-history-item.is-crossedin .bh-history-icon { color: var(--accent); }
.bh-history-moves .is-down, .bh-history-item.is-down .bh-history-icon, .bh-history-item.is-crossedout .bh-history-icon { color: var(--ink-mute); }
.bh-history-list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.bh-history-item { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: baseline; padding: 0.5rem 0; border-top: 1px dashed var(--rule); }
.bh-history-icon { font-weight: 700; text-align: center; }
.bh-history-what { overflow-wrap: anywhere; }
.bh-history-what a { color: var(--accent); }
.bh-history-when { font: 0.6875rem var(--f-mono); color: var(--ink-mute); white-space: nowrap; }
.bh-history-item.is-crossedin, .bh-history-item.is-crossedout { border-top-style: solid; }

/* Card gestures: the strip under a card being swiped, the pop when a gesture lands */
.bh-gesture { position: relative; touch-action: pan-y; -webkit-touch-callout: none; }
.bh-gesture > .bh-verse-card { position: relative; z-index: 1; -webkit-user-select: none; user-select: none; }
.bh-gesture::before { content: ""; position: absolute; inset: 0.625rem 0; z-index: 0; display: flex; align-items: center; padding-inline: 1.25rem; border-radius: 10px; opacity: 0; font: 700 0.75rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); transition: opacity 120ms; }
.bh-gesture[data-swipe^="right"]::before { content: "✋ I relate"; justify-content: flex-start; background: color-mix(in srgb, var(--accent) 24%, var(--surface)); opacity: .55; }
.bh-gesture[data-swipe^="left"]::before { content: "Open →"; justify-content: flex-end; background: color-mix(in srgb, var(--ink-mute) 22%, var(--surface)); opacity: .55; }
.bh-gesture[data-swipe="right"]::before, .bh-gesture[data-swipe="left"]::before { opacity: 1; }
.bh-card-pop { position: absolute; left: 50%; top: 50%; z-index: 3; font-size: 3rem; line-height: 1; color: var(--accent); pointer-events: none; animation: bh-card-pop 750ms ease-out both; }
@keyframes bh-card-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
button.bh-card-promotes { min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.5rem; background: none; border: 1px dashed var(--rule); border-radius: 999rem; color: inherit; font: inherit; cursor: pointer; }
button.bh-card-promotes.is-on { border-style: solid; border-color: var(--accent); color: var(--accent); }
.bh-gesture-hint { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; justify-content: space-between; margin: 0.75rem 0; padding: 0.625rem 0.875rem; border: 1px dashed var(--accent); border-radius: 10px; color: var(--ink-soft); font-size: 0.875rem; }

/* The card menu: a sheet from the bottom, Promote and Share first */
.bh-sheet-backdrop { position: fixed; inset: 0; z-index: 36; background: rgb(0 0 0 / .45); animation: bh-fade-in .15s ease-out; }
.bh-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 37; display: grid; gap: 0.625rem; max-width: 36rem; margin-inline: auto; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-bottom: 0; border-radius: 16px 16px 0 0; animation: bh-sheet-up 220ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bh-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.bh-sheet-quote { margin: 0; color: var(--ink-soft); font-size: 0.875rem; overflow-wrap: anywhere; }
.bh-sheet-main { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.bh-sheet-main button { display: grid; justify-items: start; gap: 0.125rem; min-height: 4.5rem; padding: 0.75rem 0.875rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); font: 700 1rem var(--f-display, inherit); text-align: left; cursor: pointer; }
.bh-sheet-promote { border-color: var(--accent) !important; }
.bh-sheet-promote.is-on { background: var(--accent) !important; color: var(--surface) !important; }
.bh-sheet-main button:disabled { opacity: .5; cursor: not-allowed; }
.bh-sheet-icon { font-size: 1.25rem; color: var(--accent); }
.bh-sheet-promote.is-on .bh-sheet-icon { color: inherit; }
.bh-sheet-sub { font: 0.6875rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.bh-sheet-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bh-sheet-row > * { flex: 1 1 5rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 2.75rem; padding: 0 0.75rem; border: 1px solid var(--rule); border-radius: 999rem; background: none; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.bh-sheet-row > .is-on { border-color: var(--accent); color: var(--accent); }
.bh-sheet-close { min-height: 2.75rem; background: none; border: 0; color: var(--ink-mute); font: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .bh-sheet, .bh-card-pop { animation: none; } .bh-card-pop { display: none; } }

/* Reply counts on a card: written and stickers apart, a dot when your verse has new replies */
.bh-reply-counts { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; }
.bh-reply-counts:hover { color: var(--accent); }
.bh-new-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); }
.bh-sort-note { margin: 0.5rem 0 0; }

/* Sticker replies gather in one strip; tapping it shows who sent which. */
.bh-sticker-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; width: 100%; margin: 0.25rem 0 0.75rem; padding: 0.5rem 0.625rem; background: var(--surface); border: 1px solid var(--rule); color: inherit; font: inherit; text-align: start; cursor: pointer; min-height: 2.75rem; }
.bh-sticker-strip:hover, .bh-sticker-strip:focus-visible { border-color: var(--accent); }
.bh-sticker-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.bh-sticker-chip.is-mine { border-color: var(--accent); }
.bh-sticker-chip.is-more { color: var(--ink-mute); }
.bh-sticker-strip-who { margin-inline-start: auto; color: var(--ink-mute); font-size: 0.8125rem; }
.bh-sticker-who-list { list-style: none; margin: 0; padding: 0; }
.bh-sticker-who-list li { gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.bh-sticker-who-name { display: flex; flex-direction: column; min-width: 0; }
/* On a long thread, Reply floats above the tab bar until the reply box scrolls into view. */
.bh-reply-fab { position: sticky; bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; justify-content: flex-end; margin: 0.5rem 0; pointer-events: none; }
.bh-reply-fab .bh-button { pointer-events: auto; box-shadow: 0 6px 18px rgb(0 0 0 / .18); }
@media (min-width: 51.25em) { .bh-reply-fab { bottom: 1.5rem; } }

/* Feedback: members send ideas and problems with screenshots; admins read and move them on. */
.bh-feedback-kinds { border: 0; padding: 0; margin: 0; }
.bh-feedback-images { display: flex; flex-wrap: wrap; gap: 0.875rem; padding-top: 0.625rem; }
.bh-feedback-thumb { position: relative; margin: 0; width: 6rem; height: 6rem; border: 1px solid var(--rule); background: var(--surface); }
.bh-feedback-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-feedback-images .bh-feedback-thumb .bh-close { position: absolute; top: -0.625rem; right: -0.625rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; min-width: 2.25rem; min-height: 2.25rem; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); font-size: 0.8125rem; box-shadow: 0 2px 6px rgb(0 0 0 / .15); }
.bh-feedback-add { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; width: 6rem; height: 6rem; border: 1px dashed var(--rule); color: var(--ink-mute); font-size: 0.75rem; text-align: center; cursor: pointer; }
.bh-feedback-add span[aria-hidden] { font-size: 1.5rem; color: var(--accent); }
.bh-feedback-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bh-feedback-add:focus-within { outline: 2px solid var(--accent); }
.bh-feedback-mine { margin-top: 2rem; }
.bh-feedback-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.bh-feedback-list li { padding: 0.75rem; border: 1px solid var(--rule); background: var(--surface); }
.bh-feedback-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.375rem 0; }
.bh-feedback-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bh-feedback-note { margin: 0.375rem 0 0; padding: 0.5rem 0.625rem; border-left: 3px solid var(--accent); background: var(--bg); font-size: 0.9375rem; }
.bh-feedback-count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; margin-inline-start: 0.375rem; padding: 0 0.25rem; border-radius: 999px; background: var(--accent); color: var(--surface); font-size: 0.6875rem; }
.bh-feedback-shots { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.bh-feedback-shot { padding: 0; border: 1px solid var(--rule); background: var(--surface); cursor: zoom-in; width: 8rem; max-width: 100%; }
.bh-feedback-shot img { display: block; width: 100%; height: 12rem; object-fit: contain; }
.bh-feedback-shot.is-zoomed { width: 100%; cursor: zoom-out; }
.bh-feedback-shot.is-zoomed img { height: auto; max-height: 80vh; }
.bh-queue-item.is-new { border-left: 3px solid var(--accent); }