/* Additions to app.css (the old site's stylesheet, reused as-is).
   Covers: server-rendered markup differences, no-JavaScript fallbacks, and the
   new book / chapter / category / search pages. */

/* Sorts Mill Goudy (KJV text) is self-hosted: no wait on Google's servers, and
   text shows in a fallback font immediately on slow connections. SIL OFL. */
@font-face { font-family: "Sorts Mill Goudy"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/SortsMillGoudy-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sorts Mill Goudy"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/SortsMillGoudy-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sorts Mill Goudy"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/SortsMillGoudy-Italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sorts Mill Goudy"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/SortsMillGoudy-Italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

[hidden] { display: none !important; }

/* Black theme. The page is black (#0D0E13); every dark surface and border from
   the old stylesheet was blue-tinted for the old background video. black.css
   (generated by scripts/black-theme.mjs) turns them into blacks of the same
   brightness; these cover the rest. Light mode is unchanged. */
.Popup_popupOverlay { background-color: rgba(13, 14, 19, .78); }
.Header_overlay { background-color: #0D0E13; }
.CanonListItem_canon ul li:hover { color: #15161A; }
body:not([data-theme=light]) .Controlls_controlls { background-color: #0D0E13; }

/* Version strip: fade whichever edge has more versions past it (set by
   site.js), using a transparency mask so it blends with any background. */
.Version_wrapper::after { display: none; }
.Version_list { --kc-fl: 0px; --kc-fr: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--kc-fl), #000 calc(100% - var(--kc-fr)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--kc-fl), #000 calc(100% - var(--kc-fr)), transparent 100%); }
.Version_list.kc-fl { --kc-fl: 56px; }
.Version_list.kc-fr { --kc-fr: 56px; }

/* Particles: interactive dust canvas (public/assets/dust.js), behind the text. */
.kc-dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .7s ease-in-out; }
.kc-dust.kc-on { opacity: 1; }

/* LORD, LORD'S, GOD in small capitals, as printed in the KJV: the first letter
   full size, the rest at 0.86 (same proportion as KJV Study). The old CSS forces
   every element in a verse to the verse's size, so these selectors are specific
   enough to win. In light mode the highlight colour is painted on every element
   inside a highlight; the smaller letters show their parent's highlight instead,
   so the band stays one even height. */
.kc-dn { font-size: .86em; -webkit-text-stroke: .2px currentColor; }
.Verse_verses .Verse_col .kc-vtext .kc-dn, .Verse_description .kc-dn, .kc-p .kc-dn, .kc-snip .kc-dn { font-size: .86em; }
body[data-theme=light] .Verse_wrapper.Verse_highlighted .Verse_verses .Verse_col p strong .kc-dn { background-color: transparent; }

/* Required copyright notice for the translation being shown. */
.kc-notice, .kc-notice * { font-family: Arial, sans-serif; font-size: 11px; line-height: 1.5; color: #3E3F45; }
.kc-notice { max-width: 760px; margin: 28px auto 0; text-align: center; }
.kc-notice a { text-decoration: underline; text-decoration-color: rgba(127, 128, 134, .35); }
body[data-theme=light] .kc-notice, body[data-theme=light] .kc-notice * { color: #A9AFBC; }
@media (max-width: 1024px) { .kc-notice { margin-bottom: 20px; } }

/* While holding an arrow key past verses that aren't loaded yet. */
.Verse_wrapper.kc-pending .Verse_verses, .Verse_wrapper.kc-pending .Verse_description, .Verse_wrapper.kc-pending .Verse_categories { opacity: .25; transition: opacity .15s; }

/* Settings tab in the menu (also the only way to reach settings on phones). */
.kc-menu-settings .ToggleField_field { max-width: 360px; margin-bottom: 18px; }
.kc-menu-settings .TabHead_tab_head { margin-bottom: 30px; }
@media (max-width: 768px) { .kc-desktop-only { display: none; } }
.kc-cta { margin: -10px 0 26px; }
.kc-cta a { display: inline-block; font-family: Marisa, sans-serif; font-weight: 700; letter-spacing: .12em; font-size: 15px; text-transform: uppercase; text-decoration: none; padding: 10px 18px; border: 1px solid #fff; border-radius: 6px; }
.kc-cta a:hover { background: #fff; color: #0D0E13; }
body[data-theme=light] .kc-cta a { border-color: #2F3B54; }
body[data-theme=light] .kc-cta a:hover { background: #2F3B54; color: #fff; }
.kc-closed:not(:target) { display: none !important; }
body.kc-present #header, body.kc-present #controls { opacity: 0; }

/* Verse text: the old app put the verse HTML inside a <p>; we use a <div> so the
   HTML stays valid, and size it from verse_size_1/_2 at the old breakpoints. */
/* Everything inside the verse text takes its size, including wrappers pasted in
   from Bible sites (e.g. <div class="std-text"><span class="text …">), which the
   old global "* { font-size: 16px }" would otherwise shrink. */
.Verse_verses .Verse_col .kc-vtext * { font-size: inherit; line-height: inherit; }
/* Default verse sizes (the editor's "text size %" scales these per verse). */
.Verse_verses .Verse_col:nth-child(1) .kc-vtext { font-family: "Sorts Mill Goudy", serif; line-height: 1.4; font-size: calc(28px * var(--vs1, 100) / 100 * var(--kc-ts, 1)); }
.Verse_verses .Verse_col:nth-child(2) .kc-vtext { font-family: Arial, sans-serif; line-height: 1.45; font-size: calc(26px * var(--vs2, 100) / 100 * var(--kc-ts, 1)); }
@media (min-width: 1024px) and (max-width: 1599.98px) {
  .Verse_verses .Verse_col:nth-child(1) .kc-vtext { font-size: calc(23px * var(--vs1, 100) / 100 * var(--kc-ts, 1)); }
  .Verse_verses .Verse_col:nth-child(2) .kc-vtext { font-size: calc(21px * var(--vs2, 100) / 100 * var(--kc-ts, 1)); }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .Verse_verses .Verse_col:nth-child(1) .kc-vtext { font-size: calc(22px * var(--vs1, 100) / 100 * var(--kc-ts, 1)); }
  .Verse_verses .Verse_col:nth-child(2) .kc-vtext { font-size: calc(20px * var(--vs2, 100) / 100 * var(--kc-ts, 1)); }
}
/* Translation labels above the verses, a touch smaller to match. */
@media (min-width: 1025px) { .Verse_verses .Verse_col h4 { font-size: 30px; margin-bottom: 14px; } }
@media (min-width: 1025px) and (max-width: 1600px) { .Verse_verses .Verse_col h4 { font-size: 26px; margin-bottom: 10px; } }
@media (max-width: 599.98px) {
  .Verse_verses .Verse_col:nth-child(1) .kc-vtext { font-size: calc(18px * var(--vs1, 100) / 100 * var(--kc-ts, 1)); }
  .Verse_verses .Verse_col:nth-child(2) .kc-vtext { font-size: calc(17px * var(--vs2, 100) / 100 * var(--kc-ts, 1)); }
}
.Verse_wrapper:not(.Verse_highlighted) .kc-omit { display: none; }
.kc-notes-off .Verse_description { display: none; }
.Verse_description a { text-decoration: underline; }

/* Elements that were <span>/<div> in the old app are links here. */
a.Version_item, a.Controlls_lost_cross_label, a.Verse_lost_cross_mob_button, a.Controlls_canon_books_list_arrow,
a.Header_trigger, a.ButtonDefault_button, a.Controlls_cross_popup_head_close { text-decoration: none; }
a.Header_trigger { display: block; }
a.Controlls_lost_cross_label { display: block; }
/* Phones and tablets use the button in the page instead (as the old app did). */
@media screen and (max-width: 1024px) { a.Controlls_lost_cross_label { display: none; } }
.Verse_categories span a { color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-decoration: none; }
.CanonListItem_canon ul li a { color: inherit; font: inherit; text-decoration: none; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.CanonListItem_canon ul li:hover a { color: #1E1F23; }
body[data-theme=light] .CanonListItem_canon ul li:hover a { color: #fff; }
.Controlls_menu ul li a { text-decoration: none; }
span.Controlls_canon_books_list_arrow:not([href]) { opacity: .3; cursor: default; }
a.Controlls_canon_books_list_arrow { vertical-align: top; }
@media screen and (max-width: 1024px) {
  .Header_header .Header_col:nth-child(2) > a.ButtonDefault_button span { display: none; }
  .Header_header .Header_col:nth-child(2) > a.ButtonDefault_button { padding: 0; width: 44px; height: 44px; flex-shrink: 0; }
  .Header_header .Header_col:nth-child(2) > a.ButtonDefault_button img { width: 22px; height: 22px; top: 50%; margin-top: -11px; left: 50%; margin-left: -11px; }
}

/* Lost cross references: without JavaScript everything is shown; with it,
   items open on click and one version is shown at a time. */
.kc-p p, .kc-p p * { font: inherit; color: inherit; }
.kc-lc-version-label { display: none; }
.no-js .kc-lc-version-label { display: block; margin: 10px 0; }
.no-js .LostCrossItem_lost_item_body_versions { display: none; }
.js .LostCrossItem_lost_item:not(.kc-open) .kc-lc-body { display: none; }
.js .kc-lc-block:not(.kc-on) { display: none; }

/* Spam trap field in the submit form (hidden from people). */
.kc-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }


.kc-loading { font-family: 'Courier New', monospace; color: #8B92AF; padding: 10px 0; }

/* ------------------------------------------------------------------ list pages */
.kc-page { position: relative; z-index: 5; padding: 150px 20px 0; min-height: 100vh; display: flex; flex-direction: column; }
.kc-page-inner { max-width: 1000px; width: 100%; margin: 0 auto; flex: 1; }
.kc-crumbs, .kc-crumbs * { font-family: Marisa, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8B92AF; text-decoration: none; }
.kc-crumbs a:hover { color: #fff; }
.kc-title { font-family: Marisa, sans-serif; letter-spacing: .15em; font-size: 44px; font-weight: 400; margin: 12px 0 6px; }
.kc-sub, .kc-sub * { font-family: 'Courier New', monospace; font-size: 18px; color: #ABABAB; }
.kc-sub { margin-bottom: 34px; }
.kc-sub a { color: #98BAFF; }
.kc-empty, .kc-empty a { font-family: 'Courier New', monospace; font-size: 18px; color: #ABABAB; }
.kc-empty a { color: #98BAFF; }

.kc-cards, .kc-cats { list-style: none; display: grid; gap: 14px; }
.kc-cards a, .kc-cats a { display: block; padding: 18px 22px; border: 1px solid #35363A; border-radius: 6px; background: #15161A; text-decoration: none; transition: border-color .2s; }
.kc-cards a:hover, .kc-cats a:hover { border-color: #8B92AF; }
.kc-ref, .kc-ref small { display: block; font-family: Marisa, sans-serif; font-weight: 700; letter-spacing: .15em; font-size: 18px; margin-bottom: 6px; }
.kc-ref small { display: inline; color: #8B92AF; font-size: 15px; margin-left: 8px; }
.kc-snip { display: block; font-family: "Sorts Mill Goudy", serif; font-size: calc(19px * var(--kc-ts, 1)); color: #D3E2FF; margin-top: 4px; }
.kc-snip b { font-family: Foster, sans-serif; font-weight: 400; font-size: 16px; letter-spacing: .08em; margin-right: 8px; color: #00FFF0; }
.kc-snip-alt { font-family: Arial, sans-serif; font-size: calc(16px * var(--kc-ts, 1)); color: #ABABAB; }
.kc-snip-alt b { color: #FAFF00; }
.kc-cats .kc-snip { font-family: Arial, sans-serif; font-size: 15px; color: #9EBEDE; }

.kc-chapters { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 30px; }
.kc-chapters li, .kc-chapters li a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-family: Marisa, sans-serif; font-weight: 700; font-size: 18px; text-decoration: none; }
.kc-chapters li { border: 1px solid #fff; border-radius: 5px; }
.kc-chapters li:hover { background: #fff; }
.kc-chapters li:hover a { color: #1E1F23; }
.kc-chapters li.kc-off { opacity: .2; }
.kc-books { display: grid; gap: 6px; }
.kc-book h2, .kc-book h2 a, .kc-section h2 a { font-family: Marisa, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: .15em; text-decoration: none; }
.kc-book h2 small { font-family: Marisa, sans-serif; color: #8B92AF; font-size: 15px; margin-left: 6px; }
.kc-book.kc-off h2 { opacity: .35; }
.kc-section { margin-bottom: 26px; }
.kc-section h2 { margin-bottom: 8px; }
.kc-refs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.kc-refs a { display: inline-block; font-family: Marisa, sans-serif; font-weight: 700; letter-spacing: .1em; font-size: 15px; padding: 5px 10px; border: 1px solid #464646; border-radius: 6px; text-decoration: none; color: #D3E2FF; }
.kc-refs a:hover { border-color: #fff; color: #fff; }
.kc-results { flex-direction: column; align-items: flex-start; }
.kc-pager { display: flex; justify-content: space-between; margin: 30px 0; }
.kc-pager a { font-family: Marisa, sans-serif; font-weight: 700; letter-spacing: .12em; font-size: 16px; text-decoration: none; padding: 8px 14px; border: 1px solid #464646; border-radius: 6px; }
.kc-pager a:hover { border-color: #fff; }
.kc-search { display: flex; gap: 10px; margin-bottom: 30px; }
.kc-search input { flex: 1; font-family: "Sorts Mill Goudy", serif; font-size: 20px; padding: 14px 18px; background: #15161A; border: 1px solid #4C4D51; border-radius: 5px; color: #fff; }
.kc-search button { font-family: Marisa, sans-serif; font-weight: 700; letter-spacing: .12em; font-size: 15px; padding: 0 20px; background: #15161A; border: 1px solid #8B92AF; border-radius: 6px; color: #fff; cursor: pointer; }
.kc-form { max-width: 640px; }
.kc-copyright p, .kc-copyright p * { font-family: 'Courier New', monospace; font-size: 17px; color: #ABABAB; }
.kc-footer { max-width: 1000px; width: 100%; margin: 50px auto 0; padding: 26px 0 40px; border-top: 1px solid #35363A; }
.kc-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.kc-footer a { font-family: Marisa, sans-serif; font-weight: 700; letter-spacing: .12em; font-size: 13px; text-transform: uppercase; text-decoration: none; color: #8B92AF; }
.kc-footer a:hover { color: #fff; }
@media (max-width: 600px) {
  .kc-page { padding-top: 120px; }
  .kc-title { font-size: 28px; }
  .kc-cards a, .kc-cats a { padding: 14px 16px; }
}

body[data-theme=light] .kc-cards a, body[data-theme=light] .kc-cats a { background: #fff; border-color: #C9D3E6; }
body[data-theme=light] .kc-cards a:hover, body[data-theme=light] .kc-cats a:hover { border-color: #2F3B54; }
body[data-theme=light] .kc-snip { color: #1E2941; }
body[data-theme=light] .kc-snip b { color: #000; background: #00FFF0; padding: 0 3px; }
body[data-theme=light] .kc-snip-alt { color: #3D4B66; }
body[data-theme=light] .kc-snip-alt b { background: #FAFF00; }
body[data-theme=light] .kc-chapters li { border-color: #2F3B54; }
body[data-theme=light] .kc-chapters li:hover { background: #2F3B54; }
body[data-theme=light] .kc-chapters li:hover a { color: #fff; }
body[data-theme=light] .kc-refs a { color: #2F3B54; border-color: #AAB7CA; }
body[data-theme=light] .kc-search input { background: #fff; color: #1E2941; border-color: #AAB7CA; }
body[data-theme=light] .kc-footer { border-color: #C9D3E6; }
body[data-theme=light] .kc-sub, body[data-theme=light] .kc-sub *, body[data-theme=light] .kc-empty { color: #3D4B66; }

/* Slimmer bottom bar (was 28px above and below the buttons on wide screens), and
   room under long verses on desktop so the copyright notice always clears the
   bar and the icons that sit on top of it. Smaller screens already pad 125px. */
.Controlls_content { padding-top: 14px; padding-bottom: 14px; }
@media screen and (max-width: 1600px) { .Controlls_content { padding-top: 12px; padding-bottom: 12px; } }
@media screen and (max-width: 1024px) { .Controlls_content { padding-top: 8px; padding-bottom: 8px; } }
.Controlls_lost_cross_label, .Controlls_keyboard_icon { bottom: calc(100% + 14px); }
.Settings_settings { bottom: calc(100% + 12px); }
.Controlls_label { bottom: calc(100% + 18px); }
@media screen and (min-width: 1025px) {
  .Verse_wrapper { box-sizing: border-box; padding-top: 120px; padding-bottom: 140px; }
}

/* ------------------------------------------------------------------------
   Pickers above the bottom bar (category, chapter, verse): a floating panel
   with soft rows, a quiet header and pill counts. Computers get a rounded
   panel that floats 10px above the bar; phones keep the full-screen sheet.
   ------------------------------------------------------------------------ */
@keyframes kc-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.Controlls_menu { background-color: #141519; border: 0; animation: kc-pop .16s ease-out; }
@media screen and (min-width: 1025px) {
  .Controlls_menu { bottom: calc(100% + 10px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; padding-right: 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35); }
  .Controlls_menu_category { height: min(460px, calc(100vh - 230px)); width: 400px; max-width: calc(100vw - 40px); }
  .Controlls_menu_chapter { height: min(560px, calc(100vh - 230px)); }
  .Controlls_menu_verses { height: min(500px, calc(100vh - 230px)); }
}
.Controlls_menu > div { padding-right: 4px; }
.Controlls_menu .ScrollableWrapper_wrapper::-webkit-scrollbar { width: 6px; }
.Controlls_menu .ScrollableWrapper_wrapper::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
.Controlls_menu .ScrollableWrapper_wrapper::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .16); border-radius: 6px; }
.Controlls_menu h6 { position: sticky; top: 0; z-index: 2; margin: 0 0 6px; padding: 18px 22px 12px; background: #141519;
  color: #8a8d96; font-size: 11px; letter-spacing: .22em; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.Controlls_menu h6 + span + div { padding-bottom: 10px; }
.Controlls_menu h6 + span { z-index: 3; } /* the phone sheet's close button sits on the sticky header */

/* Category rows */
.Controlls_menu_category ul { padding: 0 8px; }
.Controlls_menu_category ul li { margin: 1px 0; padding: 9px 64px 9px 14px; border-radius: 9px; transition: background-color .12s; }
.Controlls_menu_category ul li span:first-child { font-size: 14px; letter-spacing: .14em; line-height: 1.6; color: #d4d6dc; }
.Controlls_menu_category ul li:hover { background-color: rgba(255, 255, 255, .05); }
.Controlls_menu_category ul li:hover span:first-child, .Controlls_menu_category ul li.CategoryList_active span:first-child { color: #fff; }
.Controlls_menu_category ul li.CategoryList_active { background-color: rgba(96, 245, 255, .07); }
.Controlls_menu_category ul li.CategoryList_active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: #60f5ff; }
.Controlls_menu_category ul li span:nth-child(2) { right: 12px; padding: 3px 9px; border: 0; border-radius: 999px; background-color: rgba(255, 255, 255, .06);
  color: #9ea2ad; font-family: Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.Controlls_menu_category ul li.CategoryList_active span:nth-child(2) { background-color: rgba(96, 245, 255, .14); color: #8ef8ff; }

/* Chapter picker */
.Controlls_menu_chapter .CanonList_canon_list { padding: 0 8px; }
.Controlls_menu_chapter .CanonListItem_canon { margin: 1px 0; padding-left: 14px; border-radius: 9px; }
.Controlls_menu_chapter .CanonListItem_canon:hover, .Controlls_menu_chapter .CanonListItem_canon.CanonListItem_open { background-color: rgba(255, 255, 255, .04); }
.Controlls_menu_chapter .CanonListItem_canon.CanonListItem_active { background-color: rgba(96, 245, 255, .06); }
.Controlls_menu_chapter .CanonListItem_canon h3 { font-size: 14px; letter-spacing: .14em; color: #d4d6dc; }
.Controlls_menu_chapter .CanonListItem_canon h3 span { color: #6f737d; }
.Controlls_menu_chapter .CanonListItem_canon ul li { width: 38px; height: 38px; border-color: rgba(255, 255, 255, .14); border-radius: 8px; font-size: 15px; transition: background-color .12s, border-color .12s; }
.Controlls_menu_chapter .CanonListItem_canon ul li:hover { border-color: #fff; }

/* Verse picker (category mode) */
.Controlls_menu_verses ul { padding: 0 8px; }
.Controlls_menu_verses ul a { position: relative; margin: 1px 0; padding: 7px 14px; border-radius: 8px; font-size: 14px; color: #a7abb5; transition: background-color .12s; }
.Controlls_menu_verses ul a:hover { background-color: rgba(255, 255, 255, .05); color: #fff; }
.Controlls_menu_verses ul a.Controlls_active { background-color: rgba(96, 245, 255, .07); color: #fff; }
.Controlls_menu_verses ul a.Controlls_active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: #60f5ff; }

/* Bottom bar buttons: hairline borders, rounder corners, a soft fill on hover,
   and the accent colour while their picker is open. */
.Controlls_canon_books_list_name, .Controlls_canon_books_list_arrow, .Controlls_category_navigation_arrow {
  border-color: rgba(255, 255, 255, .14); border-radius: 10px; background-color: rgba(255, 255, 255, .02); transition: border-color .15s, background-color .15s; }
.Controlls_canon_books_list_name:hover, .Controlls_canon_books_list_arrow:hover, .Controlls_category_navigation_arrow:hover {
  border-color: rgba(255, 255, 255, .42); background-color: rgba(255, 255, 255, .05); }
.Controlls_canon_books_list_name.Controlls_active { border-color: rgba(96, 245, 255, .55); background-color: rgba(96, 245, 255, .06); }
.Controlls_canon_books_list_name.Controlls_active:after { opacity: 1; }
.Controlls_controlls { border-top-color: rgba(255, 255, 255, .08); }

/* Light mode */
body[data-theme=light] .Controlls_menu { background-color: #fff; }
@media screen and (min-width: 1025px) {
  body[data-theme=light] .Controlls_menu { border: 1px solid rgba(20, 30, 50, .1); box-shadow: 0 24px 60px rgba(20, 30, 60, .18), 0 2px 8px rgba(20, 30, 60, .08); }
}
body[data-theme=light] .Controlls_menu h6 { background: #fff; color: #7a8399; border-bottom-color: rgba(20, 30, 50, .08); }
body[data-theme=light] .Controlls_menu .ScrollableWrapper_wrapper::-webkit-scrollbar-thumb { background-color: rgba(20, 30, 50, .18); }
body[data-theme=light] .Controlls_menu_category ul li span:first-child,
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon h3 { color: #2f3b54; }
body[data-theme=light] .Controlls_menu_category ul li:hover,
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon:hover,
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon.CanonListItem_open,
body[data-theme=light] .Controlls_menu_verses ul a:hover { background-color: #f1f4fa; color: #1e2941; }
body[data-theme=light] .Controlls_menu_category ul li.CategoryList_active,
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon.CanonListItem_active,
body[data-theme=light] .Controlls_menu_verses ul a.Controlls_active { background-color: #e7f8f6; color: #1e2941; }
body[data-theme=light] .Controlls_menu_category ul li.CategoryList_active::before,
body[data-theme=light] .Controlls_menu_verses ul a.Controlls_active::before { background: #0aa59c; }
body[data-theme=light] .Controlls_menu_category ul li span:nth-child(2) { background-color: #eef1f7; color: #5b6680; }
body[data-theme=light] .Controlls_menu_category ul li.CategoryList_active span:nth-child(2) { background-color: #c9f0ec; color: #08756e; }
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon ul li { border-color: rgba(47, 59, 84, .25); }
body[data-theme=light] .Controlls_menu_verses ul a { color: #4b587a; }
body[data-theme=light] .Controlls_canon_books_list_name, body[data-theme=light] .Controlls_canon_books_list_arrow, body[data-theme=light] .Controlls_category_navigation_arrow {
  border-color: rgba(47, 59, 84, .22); background-color: rgba(255, 255, 255, .55); }
body[data-theme=light] .Controlls_canon_books_list_name:hover, body[data-theme=light] .Controlls_canon_books_list_arrow:hover, body[data-theme=light] .Controlls_category_navigation_arrow:hover {
  border-color: rgba(47, 59, 84, .55); background-color: #fff; }
body[data-theme=light] .Controlls_canon_books_list_name.Controlls_active { border-color: #0aa59c; background-color: rgba(10, 165, 156, .07); }
body[data-theme=light] .Controlls_controlls { border-top-color: rgba(47, 59, 84, .12); }

/* The bar is solid on computers too, so long verses never show through it while
   scrolling (phones already had their own bar colours). */
@media screen and (min-width: 1025px) {
  .Controlls_controlls { background-color: #0d0e13; }
  body[data-theme=light] .Controlls_controlls { background-color: #f3f6fc; }
}

/* ==========================================================================
   Modern look, part 2: header, side menu, search, settings, tooltips, tags,
   pills, popups and the submit form, in the same language as the pickers:
   hairline borders, rounder corners, quiet uppercase labels, teal for "current".
   ========================================================================== */
:root { --kc-surface: #141519; --kc-line: rgba(255, 255, 255, .08); --kc-hair: rgba(255, 255, 255, .14); --kc-hair-hi: rgba(255, 255, 255, .42);
  --kc-ink: #e6e7ea; --kc-soft: #a7abb5; --kc-mute: #6f737d; --kc-accent: #60f5ff; --kc-ease: cubic-bezier(.22, .9, .24, 1);
  --kc-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35); }
body[data-theme=light] { --kc-surface: #fff; --kc-line: rgba(20, 30, 50, .09); --kc-hair: rgba(47, 59, 84, .22); --kc-hair-hi: rgba(47, 59, 84, .55);
  --kc-ink: #1e2941; --kc-soft: #4b587a; --kc-mute: #7a8399; --kc-accent: #0aa59c;
  --kc-shadow: 0 24px 60px rgba(20, 30, 60, .16), 0 2px 8px rgba(20, 30, 60, .08); }

/* ---- Header ---- */
.Header_header .Header_trigger, .Menu_menu .Menu_trigger { border-color: var(--kc-hair); opacity: 1; background-color: rgba(255, 255, 255, .02); transition: background-color .2s, border-color .2s; }
.Header_header .Header_trigger:hover, .Menu_menu .Menu_trigger:hover { background-color: rgba(255, 255, 255, .08); border-color: var(--kc-hair-hi); }
.Header_header .Header_trigger:hover i, .Menu_menu .Menu_trigger:hover i { background-color: #fff; }
body[data-theme=light] .Header_header .Header_trigger, body[data-theme=light] .Menu_menu .Menu_trigger { border-color: var(--kc-hair); background-color: rgba(255, 255, 255, .6); }
body[data-theme=light] .Header_header .Header_trigger:hover, body[data-theme=light] .Menu_menu .Menu_trigger:hover { background-color: #fff; border-color: var(--kc-hair-hi); }
body[data-theme=light] .Header_header .Header_trigger:hover i, body[data-theme=light] .Menu_menu .Menu_trigger:hover i { background-color: #2f3b54; }

/* Canon / Category: one segmented control */
.Header_header .Header_mode { gap: 2px; padding: 3px; border: 1px solid var(--kc-hair); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.Header_header .Header_mode span { margin: 0; padding: 6px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--kc-mute); font-size: 12px; letter-spacing: .14em; line-height: 1.2; transition: background-color .15s, color .15s; }
.Header_header .Header_mode span:first-child { margin-right: 0; }
.Header_header .Header_mode span:hover { color: var(--kc-ink); }
.Header_header .Header_mode span.Header_active { background: rgba(255, 255, 255, .1); color: #fff; }
body[data-theme=light] .Header_header .Header_mode { background: rgba(255, 255, 255, .6); }
body[data-theme=light] .Header_header .Header_mode span { background: transparent; border: 0; color: var(--kc-mute); opacity: 1; }
body[data-theme=light] .Header_header .Header_mode span.Header_active { background: #e7ecf6; color: #1e2941; }
body[data-theme=light] .Header_header .Header_mode span:hover { border: 0; color: #1e2941; }
.Header_header .Header_mode_mobile span { border-color: var(--kc-hair); border-radius: 10px; background: rgba(255, 255, 255, .03); }
body[data-theme=light] .Header_header .Header_mode_mobile span { border-color: var(--kc-hair); background: rgba(255, 255, 255, .6); }

@media screen and (min-width: 1025px) { .Header_header .Header_mode { display: inline-flex; } } /* phones use the single toggle */

/* Search field: a soft rounded field instead of an underline */
.Header_search input { padding: 9px 38px 9px 14px; border: 1px solid var(--kc-line); border-radius: 10px; background: rgba(255, 255, 255, .04); font-size: 17px; transition: border-color .15s, background-color .15s; }
.Header_search input::placeholder { color: var(--kc-mute); }
.Header_search input:focus { border-color: rgba(96, 245, 255, .45); background: rgba(255, 255, 255, .06); }
.Header_search button { right: 12px; opacity: .6; }
body[data-theme=light] .Header_search input { border: 1px solid var(--kc-hair); background: rgba(255, 255, 255, .7); color: #1e2941; }
body[data-theme=light] .Header_search input:focus { border-color: #0aa59c; background: #fff; }
@media screen and (max-width: 1024px) {
  .Header_search button { right: 0; opacity: 1; border-color: var(--kc-hair); border-radius: 10px; background-color: rgba(255, 255, 255, .03); }
}

/* Random Verse and other outline buttons */
.ButtonDefault_button { border-color: var(--kc-hair); border-radius: 10px; opacity: 1; background-color: rgba(255, 255, 255, .02); transition: background-color .15s, border-color .15s; }
.ButtonDefault_button:hover { background-color: rgba(255, 255, 255, .08); border-color: var(--kc-hair-hi); }
.ButtonDefault_button:hover span { color: #fff; }
body[data-theme=light] .ButtonDefault_button { border-color: var(--kc-hair); background-color: rgba(255, 255, 255, .6); }
body[data-theme=light] .ButtonDefault_button:hover { background-color: #fff; border-color: var(--kc-hair-hi); }
body[data-theme=light] .ButtonDefault_button:hover span { color: #2f3b54; }

/* Search results */
.Header_search_list { padding: 8px; border: 1px solid var(--kc-line); border-radius: 14px; background-color: var(--kc-surface); box-shadow: var(--kc-shadow); animation: kc-pop .16s ease-out; }
.Header_search_list a { padding: 8px 14px; border-radius: 8px; font-size: 14px; letter-spacing: .14em; line-height: 1.5; color: #d4d6dc; }
.Header_search_list a:hover, .Header_search_list a:focus { background-color: rgba(255, 255, 255, .06); color: #fff; outline: none; }
.Header_search_list p { padding: 8px 14px; font-size: 13px; color: var(--kc-mute); }
body[data-theme=light] .Header_search_list { border: 1px solid var(--kc-line); background-color: #fff; }
body[data-theme=light] .Header_search_list a { color: #2f3b54; }
body[data-theme=light] .Header_search_list a:hover { background-color: #f1f4fa; color: #1e2941; }

/* ---- Side menu: quick slide, items cascade in ---- */
.Menu_menu { left: 0; transform: translateX(-102%); visibility: hidden; background-color: #111216; border-right: 1px solid var(--kc-line);
  box-shadow: 30px 0 80px rgba(0, 0, 0, .45); transition: transform .38s var(--kc-ease), visibility 0s linear .38s; }
.Menu_menu.Menu_active { left: 0; transform: none; visibility: visible; transition: transform .38s var(--kc-ease), visibility 0s; }
.Menu_overlay { right: 0; opacity: 0; pointer-events: none; background-color: #000; transition: opacity .3s ease; }
.Menu_overlay.Menu_active { opacity: .55; pointer-events: auto; }
body[data-theme=light] .Menu_menu { background-color: #f7f9fd; }
body[data-theme=light] .Menu_overlay { background-color: #1e2941; }
body[data-theme=light] .Menu_overlay.Menu_active { opacity: .25; }
@keyframes kc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kc-slide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.Menu_menu.Menu_active .Menu_menuSidebar li { animation: kc-slide .4s var(--kc-ease) both; }
.Menu_menu.Menu_active .Menu_menuSidebar ul:first-child li:nth-child(4) { animation-delay: .06s; }
.Menu_menu.Menu_active .Menu_menuSidebar ul:first-child li:nth-child(3) { animation-delay: .1s; }
.Menu_menu.Menu_active .Menu_menuSidebar ul:first-child li:nth-child(2) { animation-delay: .14s; }
.Menu_menu.Menu_active .Menu_menuSidebar ul:first-child li:nth-child(1) { animation-delay: .18s; }
.Menu_menu.Menu_active .Menu_menuSidebar ul:last-child li { animation-delay: .22s; }
.Menu_menu.Menu_active .Menu_tab.Menu_active .TabHead_tab_head,
.Menu_menu.Menu_active .Menu_tab.Menu_active .Menu_verses_head { animation: kc-rise .4s var(--kc-ease) .08s both; }
.Menu_menu.Menu_active .Menu_verses_body li, .Menu_menu.Menu_active .Menu_verses_body .CanonListItem_canon,
.Menu_menu.Menu_active .Menu_tab.Menu_active .kc-cr {
  animation: kc-rise .42s var(--kc-ease) both; animation-delay: calc(.1s + min(var(--i, 0), 16) * .022s); }
.Menu_menu.Menu_active .Menu_verses_body .CanonListItem_canon ul li { animation: none; }
.Menu_menu.Menu_active .Menu_tab.Menu_active .ToggleField_field,
.Menu_menu.Menu_active .Menu_tab.Menu_active .Field_field, .Menu_menu.Menu_active .Menu_tab.Menu_active .TextField_field,
.Menu_menu.Menu_active .Menu_tab.Menu_active .ButtonPurple_button { animation: kc-rise .42s var(--kc-ease) both; }
.Menu_menu.Menu_active .Menu_tab.Menu_active :is(.ToggleField_field, .Field_field, .TextField_field, .ButtonPurple_button):nth-of-type(1) { animation-delay: .12s; }
.Menu_menu.Menu_active .Menu_tab.Menu_active :is(.ToggleField_field, .Field_field, .TextField_field, .ButtonPurple_button):nth-of-type(2) { animation-delay: .16s; }
.Menu_menu.Menu_active .Menu_tab.Menu_active :is(.ToggleField_field, .Field_field, .TextField_field, .ButtonPurple_button):nth-of-type(3) { animation-delay: .2s; }
.Menu_menu.Menu_active .Menu_tab.Menu_active :is(.ToggleField_field, .Field_field, .TextField_field, .ButtonPurple_button):nth-of-type(4) { animation-delay: .24s; }
.Menu_menu.Menu_active .Menu_tab.Menu_active :is(.ToggleField_field, .Field_field, .TextField_field, .ButtonPurple_button):nth-of-type(n+5) { animation-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .Menu_menu, .Menu_menu.Menu_active, .Menu_overlay { transition: none; }
  .Menu_menu.Menu_active *, .Controlls_menu, .Header_search_list, .Popup_popup { animation: none !important; }
}

/* Sidebar tabs and section heads */
.Menu_menuSidebar a, .Menu_menuSidebar span { color: #4a4d55; font-size: 15px; letter-spacing: .24em; transition: color .15s; }
.Menu_menuSidebar a:hover, .Menu_menuSidebar span:hover { color: #c9cbd1; }
.Menu_menuSidebar ul li.Menu_active a, .Menu_menuSidebar ul li.Menu_active span { color: #fff; }
body[data-theme=light] .Menu_menuSidebar a, body[data-theme=light] .Menu_menuSidebar span { color: #a3abbd; }
body[data-theme=light] .Menu_menuSidebar ul li.Menu_active span, body[data-theme=light] .Menu_menuSidebar a:hover, body[data-theme=light] .Menu_menuSidebar span:hover { color: #1e2941; }
.TabHead_tab_head { font-size: 13px; letter-spacing: .24em; }
.TabHead_tab_head:after { height: 2px; right: .24em; bottom: -6px; border-radius: 2px; background-color: var(--kc-accent); }
body[data-theme=light] .TabHead_tab_head:after { background-color: var(--kc-accent); }
.Menu_tab .Menu_verses_head > span:not(.Menu_active) { color: var(--kc-mute); }
.Menu_tab .Menu_tab_head { margin-bottom: 26px; }

/* Lists inside the menu: same rows as the pickers */
.Menu_verses_body .CategoryList_list { padding: 0 12px 0 0; }
.Menu_verses_body .CategoryList_list li { margin: 1px 0; padding: 10px 70px 10px 18px; border-radius: 10px; transition: background-color .12s; }
.Menu_verses_body .CategoryList_list li span:first-child { font-size: 15px; letter-spacing: .14em; line-height: 1.6; color: #d4d6dc; }
.Menu_verses_body .CategoryList_list li:hover { background-color: rgba(255, 255, 255, .05); }
.Menu_verses_body .CategoryList_list li:hover span:first-child, .Menu_verses_body .CategoryList_list li.CategoryList_active span:first-child { color: #fff; }
.Menu_verses_body .CategoryList_list li.CategoryList_active { background-color: rgba(96, 245, 255, .07); }
.Menu_verses_body .CategoryList_list li.CategoryList_active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--kc-accent); }
.Menu_verses_body .CategoryList_list li span:nth-child(2) { right: 16px; padding: 3px 10px; border: 0; border-radius: 999px; background-color: rgba(255, 255, 255, .06);
  color: #9ea2ad; font-family: Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.Menu_verses_body .CanonListItem_canon { margin: 1px 12px 1px 0; padding-left: 18px; border-radius: 10px; }
.Menu_verses_body .CanonListItem_canon:hover, .Menu_verses_body .CanonListItem_canon.CanonListItem_open { background-color: rgba(255, 255, 255, .04); }
.Menu_verses_body .CanonListItem_canon h3 { font-size: 15px; letter-spacing: .14em; color: #d4d6dc; }
.Menu_verses_body .CanonListItem_canon h3 span { color: #6f737d; }
.Menu_verses_body .CanonListItem_canon ul li { width: 38px; height: 38px; border-color: rgba(255, 255, 255, .14); border-radius: 8px; font-size: 15px; }
.Menu_verses_body .CanonListItem_canon ul li:hover { border-color: #fff; }
body[data-theme=light] .Menu_verses_body .CategoryList_list li span:first-child, body[data-theme=light] .Menu_verses_body .CanonListItem_canon h3 { color: #2f3b54; }
body[data-theme=light] .Menu_verses_body .CategoryList_list li:hover, body[data-theme=light] .Menu_verses_body .CanonListItem_canon:hover,
body[data-theme=light] .Menu_verses_body .CanonListItem_canon.CanonListItem_open { background-color: #eef2f9; }
body[data-theme=light] .Menu_verses_body .CategoryList_list li.CategoryList_active { background-color: #e7f8f6; }
body[data-theme=light] .Menu_verses_body .CategoryList_list li span:nth-child(2) { background-color: #e7ecf6; color: #5b6680; }
body[data-theme=light] .Menu_verses_body .CanonListItem_canon ul li { border-color: rgba(47, 59, 84, .25); }

/* Phone menu */
.Menu_mobile .Menu_tab { border-bottom-color: var(--kc-line); }
.Menu_mobile .Menu_tab_mobile_head { font-size: 15px; letter-spacing: .22em; padding-top: 24px; padding-bottom: 24px; }
.Menu_mobile .Menu_tab_mobile_head span { font-size: 40px; color: var(--kc-mute); }
.Menu_mobile .Menu_tab .Menu_copyright, .Menu_mobile .Menu_tab .Menu_verse_form, .Menu_mobile .Menu_tab .Menu_verses { border-top-color: var(--kc-line); }
.Menu_mobile .Menu_tab .Menu_verses_head > span { border-color: var(--kc-hair); border-radius: 10px; background-color: rgba(255, 255, 255, .03); }
.Menu_mobile .Menu_external_link { border-bottom-color: var(--kc-line); color: var(--kc-soft); font-size: 13px; letter-spacing: .22em; }
.Menu_menu:not(.Menu_mobile) .Menu_external_link { display: none; } /* computers have it in the sidebar */
body[data-theme=light] .Menu_mobile .Menu_tab, body[data-theme=light] .Menu_mobile .Menu_external_link { border-bottom-color: var(--kc-line); }

/* ---- Toggles (settings popup and Settings tab) ---- */
.ToggleField_field label { padding-left: 62px; font-size: 13px; letter-spacing: .14em; line-height: 24px; color: var(--kc-ink); }
.ToggleField_field label:before { width: 44px; height: 24px; margin-top: -12px; border-radius: 12px; background-color: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: background-color .2s; }
.ToggleField_field label:after { width: 18px; height: 18px; margin-top: -9px; left: 3px; background-color: #8a8d96; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: left .22s var(--kc-ease), background-color .2s; }
.ToggleField_field input:checked + label:before { background-color: var(--kc-accent); box-shadow: none; }
.ToggleField_field input:checked + label:after { left: 23px; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
body[data-theme=light] .ToggleField_field label:before { background-color: #dfe5f0; box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .06); }
body[data-theme=light] .ToggleField_field label:after { background-color: #fff; }
body[data-theme=light] .ToggleField_field input:checked + label:before { background-color: var(--kc-accent); }

/* Settings popup (gear) and the two icons */
.Settings_settings_list { padding: 18px 20px; border: 1px solid var(--kc-line); border-radius: 14px; background-color: var(--kc-surface); box-shadow: var(--kc-shadow); bottom: calc(100% + 12px); }
.Settings_settings_list.Settings_active { animation: kc-pop .16s ease-out; }
body[data-theme=light] .Settings_settings_list { border: 1px solid var(--kc-line); background-color: #fff; }
.Settings_settings > img, .Controlls_keyboard_icon { filter: grayscale(1) brightness(1.5); opacity: .5; transition: opacity .15s; }
.Settings_settings > img:hover, .Controlls_keyboard_icon:hover { opacity: 1; }
.Settings_settings > img:focus-visible, .Controlls_keyboard_icon:focus-visible { outline: 2px solid rgba(96, 245, 255, .6); outline-offset: 4px; border-radius: 4px; }
body[data-theme=light] .Settings_settings > img, body[data-theme=light] .Controlls_keyboard_icon { filter: grayscale(1) brightness(.6); opacity: .55; }
.kc-menu-settings .ToggleField_field { margin-bottom: 16px; }

/* ---- Category tags under the verse, and their tooltips ---- */
.Verse_categories strong { color: var(--kc-mute); font-size: 12px; letter-spacing: .22em; }
.Verse_categories span { padding: 4px 14px; border-color: var(--kc-hair); border-radius: 999px; opacity: 1; color: var(--kc-soft); font-size: 13px; letter-spacing: .14em; transition: border-color .15s, color .15s, background-color .15s; }
.Verse_categories span:hover { border-color: var(--kc-hair-hi); color: #fff; background-color: rgba(255, 255, 255, .04); }
body[data-theme=light] .Verse_categories span { border: 1px solid var(--kc-hair); color: #4b587a; opacity: 1; }
body[data-theme=light] .Verse_categories span:hover { border-color: var(--kc-hair-hi); color: #1e2941; background-color: #fff; }
.Verse_categories span:after { bottom: calc(100% + 10px); padding: 9px 12px; border: 1px solid var(--kc-line); border-radius: 10px; background-color: var(--kc-surface);
  color: #c9cbd1; font-size: 13px; line-height: 1.4; box-shadow: var(--kc-shadow); transform: translate(-50%, 4px); transition: opacity .15s, transform .15s; }
.Verse_categories span:hover:after { transform: translate(-50%, 0); }
.Verse_categories span:before { display: none; }
body[data-theme=light] .Verse_categories span:after { background-color: #fff; border-color: var(--kc-line); color: #2f3b54; }

/* ---- Translation pills and verse numbers in the bottom bar ---- */
.Version_item, .Controlls_canon_verses_list_item { border-color: rgba(255, 255, 255, .1); border-radius: 8px; color: #5f636c; transition: color .15s, border-color .15s, background-color .15s; }
.Version_item:hover, .Controlls_canon_verses_list_item:hover { background-color: transparent; border-color: rgba(255, 255, 255, .3); color: #d4d6dc; }
.Version_item.Version_active, .Controlls_canon_verses_list_item.Controlls_active { background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); color: #fff; }
.Controlls_canon_verses_list_wrapper span { color: var(--kc-mute); font-size: 13px; letter-spacing: .22em; }
body[data-theme=light] .Version_item, body[data-theme=light] .Controlls_canon_verses_list_item { border-color: var(--kc-hair); color: #8a93a8; opacity: 1; }
body[data-theme=light] .Version_item:hover, body[data-theme=light] .Controlls_canon_verses_list_item:hover { border-color: var(--kc-hair-hi); color: #1e2941; }
body[data-theme=light] .Version_item.Version_active, body[data-theme=light] .Controlls_canon_verses_list_item.Controlls_active { background-color: #fff; border-color: #2f3b54; color: #1e2941; opacity: 1; }

/* ---- Popups: keyboard shortcuts and lost cross references ---- */
.Popup_popup { border: 1px solid var(--kc-line); border-radius: 16px; background-color: var(--kc-surface); box-shadow: var(--kc-shadow); }
.Popup_popupOverlay:not(.kc-closed) .Popup_popup { animation: kc-pop .2s ease-out; }
body[data-theme=light] .Popup_popup { background-color: #fff; border-color: var(--kc-line); }
body[data-theme=light] .Popup_popupOverlay { background-color: rgba(30, 41, 65, .25); }
.Controlls_keyboard_popup h4 { font-size: 14px; letter-spacing: .2em; }
.Controlls_keyboard_popup_line { background-color: var(--kc-line); }
.Controlls_keyboard_popup_close:after, .Controlls_keyboard_popup_close:before { width: 26px; background-color: var(--kc-mute); }
.Controlls_keyboard_popup_close { right: 32px; top: 32px; }
.Controlls_keyboard_popup_data h6 { color: var(--kc-mute); font-size: 11px; letter-spacing: .22em; }
.Controlls_keyboard_popup_data li { margin-bottom: 7px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 13px; font-weight: 500; color: var(--kc-ink); }
.Controlls_keyboard_popup_data li span { margin-left: 10px; }
.Controlls_keyboard_popup_data li strong { height: 30px; min-width: 30px; border: 1px solid var(--kc-hair); border-bottom-width: 2px; border-radius: 7px; background-color: rgba(255, 255, 255, .04);
  color: var(--kc-accent); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.Controlls_keyboard_popup_data p { color: var(--kc-mute); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 12px; font-weight: 400; }
body[data-theme=light] .Controlls_keyboard_popup_line { background-color: var(--kc-line); }
body[data-theme=light] .Controlls_keyboard_popup_data li strong { background-color: #f4f6fb; border-color: var(--kc-hair); color: #08756e; }
body[data-theme=light] .Controlls_keyboard_popup_data p { color: var(--kc-mute); }
.Controlls_cross_popup_head { border-bottom-color: var(--kc-line); }
.Controlls_cross_popup_head h4 { font-size: 22px; }
.Controlls_cross_popup_head_close:after, .Controlls_cross_popup_head_close:before { height: 1.5px; background-color: var(--kc-mute); }
.Controlls_cross_popup_sizing { border: 1px solid var(--kc-line); border-left: 0; background-color: var(--kc-surface); border-radius: 0 12px 12px 0; }
.Controlls_cross_popup_sizing > span { border-color: var(--kc-hair); border-radius: 8px; }
.LostCrossItem_lost_item_head { border: 1px solid var(--kc-line); border-radius: 12px; background-color: rgba(255, 255, 255, .03); transition: background-color .15s, border-color .15s; }
.LostCrossItem_lost_item_head:hover { background-color: rgba(255, 255, 255, .05); border-color: var(--kc-hair); }
.LostCrossItem_lost_item_head.LostCrossItem_active { border-radius: 12px 12px 0 0; }
.LostCrossItem_lost_item_head h5 { font-size: 18px; }
.LostCrossItem_lost_item_head:after, .LostCrossItem_lost_item_head:before { width: 16px; height: 1.5px; background-color: var(--kc-mute); }
.LostCrossItem_lost_item_body { border: 1px solid var(--kc-line); border-top: 0; border-radius: 0 0 12px 12px; background-color: rgba(255, 255, 255, .015); }
.LostCrossItem_lost_item_body_versions { border-top-color: var(--kc-line); }
.LostCrossItem_lost_item_body_versions div { border-color: rgba(255, 255, 255, .1); border-radius: 8px; color: #8a8d96; opacity: 1; }
.LostCrossItem_lost_item_body_versions div:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
.LostCrossItem_lost_item_body_versions div.LostCrossItem_active { background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); color: #fff; }
body[data-theme=light] .LostCrossItem_lost_item_head, body[data-theme=light] .LostCrossItem_lost_item_body { border-color: var(--kc-line); background-color: #fff; }
body[data-theme=light] .LostCrossItem_lost_item_head:hover { background-color: #f6f8fc; border-color: var(--kc-hair); }
body[data-theme=light] .LostCrossItem_lost_item_body_versions div { border-color: var(--kc-hair); color: #4b587a; }
body[data-theme=light] .LostCrossItem_lost_item_body_versions div.LostCrossItem_active { background-color: #eef2f9; border-color: #2f3b54; color: #1e2941; }
body[data-theme=light] .Controlls_cross_popup_sizing { border-color: var(--kc-line); background-color: #fff; }

/* ---- Submit form ---- */
.Field_field label p, .TextField_field label p { color: var(--kc-soft); font-size: 11px; letter-spacing: .22em; margin-bottom: 10px; }
.TextField_field label p span { color: var(--kc-mute); }
.Field_wrapper input, .TextField_wrapper textarea { padding: 16px 18px; border: 1px solid var(--kc-line); border-radius: 12px; background-color: rgba(255, 255, 255, .04); color: var(--kc-ink); font-size: 18px; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.Field_wrapper input:focus, .TextField_wrapper textarea:focus { border: 1px solid rgba(96, 245, 255, .5); box-shadow: 0 0 0 3px rgba(96, 245, 255, .12); background-color: rgba(255, 255, 255, .06); }
.Field_wrapper input::placeholder, .TextField_wrapper textarea::placeholder { color: var(--kc-mute); opacity: 1; font-size: 18px; }
.TextField_wrapper textarea { height: 170px; }
.ButtonPurple_button { padding: 16px 20px; border-radius: 12px; background-color: var(--kc-accent); color: #0b0c10; transition: background-color .15s, transform .1s; }
.ButtonPurple_button span { font-size: 18px; }
.ButtonPurple_button:hover { background-color: #9cf9ff; }
.ButtonPurple_button:active { transform: translateY(1px); }
body[data-theme=light] .Field_wrapper input, body[data-theme=light] .TextField_wrapper textarea { border: 1px solid var(--kc-hair); background-color: #fff; color: #1e2941; }
body[data-theme=light] .Field_wrapper input:focus, body[data-theme=light] .TextField_wrapper textarea:focus { border-color: #0aa59c; box-shadow: 0 0 0 3px rgba(10, 165, 156, .15); }
body[data-theme=light] .Field_wrapper input::placeholder, body[data-theme=light] .TextField_wrapper textarea::placeholder { color: var(--kc-mute); }
body[data-theme=light] .ButtonPurple_button { background-color: #0aa59c; }
body[data-theme=light] .ButtonPurple_button span { color: #fff; }
body[data-theme=light] .ButtonPurple_button:hover { background-color: #08857e; }

/* ---- Copyright list (menu tab and /copyright page): name, then a smaller notice ---- */
.Menu_tab .Menu_copyright p.kc-cr, .kc-copyright p.kc-cr { margin: 0 0 22px; max-width: 640px; }
.kc-cr .kc-cr-name { display: block; margin-bottom: 4px; font-family: Marisa, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--kc-ink); }
.kc-cr .kc-cr-text, .kc-cr .kc-cr-text * { font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.6; color: #8a8d96; }
.kc-cr .kc-cr-text a { text-decoration: underline; text-decoration-color: rgba(138, 141, 150, .45); text-underline-offset: 2px; }
.Menu_mobile .Menu_tab .Menu_copyright p.kc-cr .kc-cr-text, .Menu_mobile .Menu_tab .Menu_copyright p.kc-cr .kc-cr-text * { font-size: 12px; }
body[data-theme=light] .kc-cr .kc-cr-text, body[data-theme=light] .kc-cr .kc-cr-text * { color: #5b6680; }

/* Quiet scrollbars in every scrolling panel (menu, search results, popups). */
.ScrollableWrapper_wrapper::-webkit-scrollbar { width: 6px; }
.ScrollableWrapper_wrapper::-webkit-scrollbar-track, .ScrollableWrapper_wrapper::-webkit-scrollbar-track:hover { background-color: transparent; }
.ScrollableWrapper_wrapper::-webkit-scrollbar-thumb, .ScrollableWrapper_wrapper::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .16); border-radius: 6px; }
body[data-theme=light] .ScrollableWrapper_wrapper::-webkit-scrollbar-track, body[data-theme=light] .ScrollableWrapper_wrapper::-webkit-scrollbar-track:hover { background-color: transparent; }
body[data-theme=light] .ScrollableWrapper_wrapper::-webkit-scrollbar-thumb, body[data-theme=light] .ScrollableWrapper_wrapper::-webkit-scrollbar-thumb:hover { background-color: rgba(20, 30, 50, .18); }

/* Random Verse: the same height and small-caps label as the rest of the header,
   a soft fill on hover, and the shuffle icon gives a little twist. */
@media screen and (min-width: 1025px) {
  #random-verse { display: inline-flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 14px 0 16px; border-radius: 10px; }
  #random-verse span { font-family: Marisa, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1; color: var(--kc-ink); }
  #random-verse img { position: static; width: 16px; height: 16px; margin: 0; opacity: .75; transition: transform .35s var(--kc-ease), opacity .15s; }
}
body[data-theme=light] #random-verse span { color: #1e2941; }

/* Bottom bar on computers: smaller labels and slightly lower buttons, closer to
   the size of the header controls. (Phones keep their own sizes.) */
@media screen and (min-width: 1025px) {
  .Controlls_canon_books_list_name { height: 36px; padding-left: 38px; padding-right: 16px; font-size: 13px; letter-spacing: .16em; }
  .Controlls_canon_books_list_name:after { left: 17px; }
  .Controlls_canon_books_list_arrow, .Controlls_category_navigation_arrow { height: 36px; width: 36px; }
  .Controlls_category_navigation span:nth-child(2) { margin-left: 16px; margin-right: 16px; font-size: 13px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
  .Controlls_canon_verses_list_wrapper span { margin-right: 14px; font-size: 12px; }
  .Controlls_canon_verses_list_item { height: 34px; width: 34px; font-size: 14px; letter-spacing: .06em; padding-left: 0; }
  .Version_item { padding: 5px 8px; font-size: 15px; }
  .Controlls_content { padding-top: 12px; padding-bottom: 12px; }
}

/* Bottom bar buttons never wrap onto two lines: in a narrower window a long
   category or book name is trimmed with "…" instead (full name in the tooltip). */
@media screen and (min-width: 1025px) {
  .Controlls_canon_books_list_name { display: inline-block; line-height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
  .Controlls_category_block { min-width: 0; }
  .Controlls_category_block .Controlls_canon_books_list_name { flex: 0 1 auto; }
  .Controlls_canon_books_list { min-width: 0; }
  .Controlls_canon_books_list .Controlls_canon_books_list_name { flex: 0 1 auto; }
  .Controlls_category_navigation span:nth-child(2) { white-space: nowrap; }
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  .Controlls_canon_books_list_name { letter-spacing: .1em; padding-left: 34px; padding-right: 12px; }
  .Controlls_canon_books_list_name:after { left: 15px; }
}
@media screen and (min-width: 1025px) {
  /* The verse reference always shows in full; only the category name is trimmed. */
  .Controlls_category_block .Controlls_canon_books_list_name:nth-child(2) { flex-shrink: 0; }
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  /* Narrower windows: more room for the two name buttons, less for the
     translation pills (which scroll sideways anyway). */
  .Controlls_category_mode .Controlls_content .Controlls_col:first-child { width: 52%; }
  .Controlls_category_mode .Controlls_content .Controlls_col:nth-child(2) { width: 18%; }
  .Controlls_category_mode .Controlls_content .Controlls_col:nth-child(3) { width: 30%; }
}

/* Menu button: a rounded square like the other header controls, with three
   rounded lines of staggered length that even out on hover and turn into an X
   when the menu is open. The close button inside the menu matches. */
.Header_header .Header_trigger, .Menu_menu .Menu_trigger { width: 44px; height: 44px; border-radius: 12px; }
.Header_header .Header_trigger i, .Menu_menu .Menu_trigger i { left: 13px; height: 2px; border-radius: 2px; background-color: var(--kc-ink);
  transition: width .25s var(--kc-ease), transform .3s var(--kc-ease), margin-top .3s var(--kc-ease), opacity .2s; }
.Header_header .Header_trigger i:first-child, .Menu_menu .Menu_trigger i:first-child { width: 18px; margin-top: -6px; }
.Header_header .Header_trigger i:nth-child(2), .Menu_menu .Menu_trigger i:nth-child(2) { width: 12px; margin-top: -1px; }
.Header_header .Header_trigger i:nth-child(3), .Menu_menu .Menu_trigger i:nth-child(3) { width: 15px; margin-top: 4px; }
.Header_header .Header_trigger:hover i, .Menu_menu .Menu_trigger:hover i { width: 18px; background-color: #fff; }
.Header_header.Header_active .Header_trigger i, .Menu_menu.Menu_active .Menu_trigger i { width: 18px; }
.Header_header.Header_active .Header_trigger i:first-child, .Menu_menu.Menu_active .Menu_trigger i:first-child { margin-top: -1px; transform: rotate(45deg); }
.Header_header.Header_active .Header_trigger i:nth-child(3), .Menu_menu.Menu_active .Menu_trigger i:nth-child(3) { margin-top: -1px; transform: rotate(-45deg); }
.Header_header .Header_trigger:focus-visible, .Menu_menu .Menu_trigger:focus-visible { outline: 2px solid rgba(96, 245, 255, .6); outline-offset: 3px; }
body[data-theme=light] .Header_header .Header_trigger i, body[data-theme=light] .Menu_menu .Menu_trigger i,
body[data-theme=light] .Header_header .Header_trigger:hover i, body[data-theme=light] .Menu_menu .Menu_trigger:hover i { background-color: #2f3b54; }

/* Notes: smaller by default, a shorter line length, and a little less space above. */
.Verse_description { max-width: 940px; margin-left: auto; margin-right: auto; padding-top: 52px; }
.Verse_description * { font-size: calc(18px * var(--kc-ts, 1)); line-height: 1.6; }
@media (max-width: 1600px) { .Verse_description { padding-top: 38px; } .Verse_description * { font-size: calc(15px * var(--kc-ts, 1)); } }
@media (max-width: 600px) { .Verse_description { padding-top: 34px; } .Verse_description * { font-size: calc(14px * var(--kc-ts, 1)); } }


/* ---- Text size setting (gear popup and Settings tab) ---- */
.kc-textsize { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kc-line); max-width: 360px; }
.kc-ts-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kc-ts-head label { font-family: Marisa, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--kc-ink); }
.kc-ts-val { font-family: Arial, sans-serif; font-size: 12px; color: var(--kc-mute); font-variant-numeric: tabular-nums; }
.kc-ts-reset { margin-left: auto; padding: 4px 10px; border: 1px solid var(--kc-hair); border-radius: 8px; background: transparent; cursor: pointer;
  font-family: Marisa, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--kc-soft); transition: border-color .15s, color .15s, opacity .15s; }
.kc-ts-reset:hover:not(:disabled) { border-color: var(--kc-hair-hi); color: var(--kc-ink); }
.kc-ts-reset:disabled { opacity: .35; cursor: default; }
.kc-ts-row { display: flex; align-items: center; gap: 12px; }
.kc-ts-a { font-family: "Sorts Mill Goudy", serif; line-height: 1; color: var(--kc-mute); }
.kc-ts-small { font-size: 13px; }
.kc-ts-big { font-size: 21px; }
.kc-ts-row input[type=range] { --p: 25; flex: 1; -webkit-appearance: none; appearance: none; height: 24px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.kc-ts-row input[type=range]:focus { outline: none; }
.kc-ts-row input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--kc-accent) calc(var(--p) * 1%), rgba(255, 255, 255, .14) 0); }
.kc-ts-row input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--kc-accent) calc(var(--p) * 1%), rgba(255, 255, 255, .14) 0); }
.kc-ts-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); transition: transform .15s; }
.kc-ts-row input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.kc-ts-row input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.kc-ts-row input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid rgba(96, 245, 255, .6); outline-offset: 2px; }
body[data-theme=light] .kc-ts-row input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--kc-accent) calc(var(--p) * 1%), rgba(20, 30, 50, .14) 0); }
body[data-theme=light] .kc-ts-row input[type=range]::-moz-range-track { background: linear-gradient(90deg, var(--kc-accent) calc(var(--p) * 1%), rgba(20, 30, 50, .14) 0); }
body[data-theme=light] .kc-ts-row input[type=range]::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(20, 30, 60, .3), inset 0 0 0 1px rgba(20, 30, 50, .12); }
.Settings_settings_list .kc-textsize { min-width: 250px; }

/* ---- Header gets a background once the page scrolls (long verses, large text) ---- */

/* ---- Canon / Category: the highlight slides between the two options ---- */
.Header_header .Header_mode { position: relative; isolation: isolate; }
.Header_header .Header_mode.kc-pill::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 0; width: var(--pill-w, 0); border-radius: 7px;
  background: rgba(255, 255, 255, .1); transform: translateX(var(--pill-x, 0)); transition: transform .38s var(--kc-ease), width .38s var(--kc-ease); }
.Header_header .Header_mode.kc-pill span.Header_active { background: transparent; }
.Header_header .Header_mode span { transition: color .3s ease; }
body[data-theme=light] .Header_header .Header_mode.kc-pill::before { background: #e7ecf6; }
body[data-theme=light] .Header_header .Header_mode.kc-pill span.Header_active { background: transparent; }
@media (prefers-reduced-motion: reduce) { .Header_header .Header_mode.kc-pill::before { transition: none; } }

/* Phone menu: the Settings tab gets the same inset as the other tabs and no repeated heading. */
.Menu_mobile .Menu_tab .kc-menu-settings { padding: 18px 24px 26px; border-top: 1px solid var(--kc-line); }
.Menu_mobile .Menu_tab .kc-menu-settings .Menu_tab_head { display: none; }


/* Popup close buttons (Lost Cross Ref. and Keyboard Shortcuts): a small rounded
   square with a crisp X, matching the other buttons, instead of a large thin X. */
.Controlls_cross_popup_head_close, .Controlls_keyboard_popup_close { width: 36px; height: 36px; box-sizing: border-box; border: 1px solid var(--kc-hair); border-radius: 10px;
  background-color: rgba(255, 255, 255, .03); opacity: 1; transform: none; cursor: pointer; transition: background-color .15s, border-color .15s; }
.Controlls_cross_popup_head_close { position: relative; right: 0; margin-left: 14px; flex-shrink: 0; }
.Controlls_keyboard_popup_close { right: 28px; top: 28px; }
.Controlls_cross_popup_head_close:hover, .Controlls_keyboard_popup_close:hover { opacity: 1; background-color: rgba(255, 255, 255, .08); border-color: var(--kc-hair-hi); }
.Controlls_cross_popup_head_close::before, .Controlls_cross_popup_head_close::after,
.Controlls_keyboard_popup_close::before, .Controlls_keyboard_popup_close::after {
  content: ""; display: block; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: 0; border-radius: 2px;
  background-color: var(--kc-soft); transform: translate(-50%, -50%) rotate(45deg); transition: background-color .15s; }
.Controlls_cross_popup_head_close::after, .Controlls_keyboard_popup_close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.Controlls_cross_popup_head_close:hover::before, .Controlls_cross_popup_head_close:hover::after,
.Controlls_keyboard_popup_close:hover::before, .Controlls_keyboard_popup_close:hover::after { background-color: var(--kc-ink); }
.Controlls_cross_popup_head_close:focus-visible, .Controlls_keyboard_popup_close:focus-visible { outline: 2px solid rgba(96, 245, 255, .6); outline-offset: 2px; }
body[data-theme=light] .Controlls_cross_popup_head_close, body[data-theme=light] .Controlls_keyboard_popup_close { background-color: #fff; }
body[data-theme=light] .Controlls_cross_popup_head_close::before, body[data-theme=light] .Controlls_cross_popup_head_close::after,
body[data-theme=light] .Controlls_keyboard_popup_close::before, body[data-theme=light] .Controlls_keyboard_popup_close::after { background-color: #4b587a; }
body[data-theme=light] .Controlls_cross_popup_head_close:hover::before, body[data-theme=light] .Controlls_cross_popup_head_close:hover::after,
body[data-theme=light] .Controlls_keyboard_popup_close:hover::before, body[data-theme=light] .Controlls_keyboard_popup_close:hover::after { background-color: #1e2941; }
@media screen and (max-width: 1024px) {
  .Controlls_cross_popup_head_close { position: absolute; right: 16px; top: 50%; width: 36px; height: 36px; margin: -18px 0 0; }
  .Controlls_keyboard_popup_close { right: 16px; top: 16px; }
}

/* The "Lost Cross Ref. (2)" label beside it, in the site's small capitals. */
.Controlls_cross_popup_head div:nth-child(2) > span:first-child { font-family: Marisa, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--kc-soft); }
body[data-theme=light] .Controlls_cross_popup_head div:nth-child(2) > span:first-child { color: #4b587a; }
/* Titles in true capitals: Marisa draws lowercase letters as small capitals, so
   "Proverbs" showed a different R from "PROVERBS". */
.Verse_wrapper h1, .kc-title,
.CanonListItem_canon h3, .Controlls_canon_books_list_name,
.kc-book h2, .kc-book h2 a, .kc-section h2 a, .kc-ref, .kc-refs a,
.Header_search_list a, .Controlls_cross_popup_head h4, .LostCrossItem_lost_item_head h5,
.LostCrossItem_lost_item_body_block_item > div h6 { text-transform: uppercase; }
/* The verse reference, in capitals, a little smaller than the old mixed-case size */
.Verse_wrapper h1 { font-size: 40px; }
@media screen and (max-width: 1600px) { .Verse_wrapper h1 { font-size: 35px; } }
@media screen and (max-width: 600px) { .Verse_wrapper h1 { font-size: 20px; } }

/* Category verse menu: search, book chips, sticky book headings */
.vm-head { position: sticky; z-index: 2; padding: 10px 16px 9px; background: var(--kc-surface); border-bottom: 1px solid var(--kc-line); }
.vm-search { display: block; width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--kc-hair); border-radius: 10px; background: rgba(255, 255, 255, .04); color: var(--kc-ink); font-size: 15px; outline: none; transition: border-color .15s; }
.vm-search:focus { border-color: var(--kc-hair-hi); }
.vm-search::placeholder { color: var(--kc-mute); }
body[data-theme=light] .vm-search { background: #f6f8fc; }
.vm-books { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.vm-books::-webkit-scrollbar { display: none; }
.vm-books button { flex: none; padding: 4px 9px; border: 1px solid var(--kc-hair); border-radius: 999px; background: transparent; color: var(--kc-soft); font-family: Marisa, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .12s, border-color .12s; }
.vm-books button:hover, .vm-books button:focus-visible { color: var(--kc-ink); border-color: var(--kc-hair-hi); outline: none; }
.vm-group h5 { position: sticky; top: var(--vm-top, 0px); z-index: 1; display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 10px 22px 4px; background: var(--kc-surface); color: var(--kc-mute); font-family: Marisa, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.vm-group h5 span { font-family: Arial, sans-serif; font-size: 11px; letter-spacing: 0; }
.vm-group[hidden], .vm-group li[hidden] { display: none; }
.vm-none { margin: 0; padding: 16px 22px; color: var(--kc-mute); font-size: 14px; }
.Controlls_menu_verses ul a:focus-visible { outline: none; background-color: rgba(255, 255, 255, .07); color: #fff; }
body[data-theme=light] .Controlls_menu_verses ul a:focus-visible { background-color: #f1f4fa; color: #1e2941; }

/* Verse menu: a themed clear button instead of the browser's, and the empty message in the interface font */
.vm-search-box { position: relative; }
.vm-search { padding-right: 38px !important; }
.vm-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.vm-clear { position: absolute; top: 50%; right: 7px; width: 26px; height: 26px; margin-top: -13px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); cursor: pointer; transition: background-color .12s; }
.vm-clear[hidden] { display: none; }
.vm-clear::before, .vm-clear::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; border-radius: 1px; background: var(--kc-soft); transform: rotate(45deg); }
.vm-clear::after { transform: rotate(-45deg); }
.vm-clear:hover { background: rgba(255, 255, 255, .16); }
.vm-clear:hover::before, .vm-clear:hover::after { background: var(--kc-ink); }
body[data-theme=light] .vm-clear { background: rgba(20, 30, 50, .07); }
body[data-theme=light] .vm-clear:hover { background: rgba(20, 30, 50, .14); }
.vm-none { font-family: Arial, Helvetica, sans-serif; font-size: 14px; letter-spacing: 0; color: var(--kc-mute); }

/* Menus while their list loads: a small spinner, centred */
.kc-menu-loading { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 48px 22px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; letter-spacing: 0; color: var(--kc-mute); }
.kc-menu-loading::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--kc-hair); border-top-color: var(--kc-accent); animation: kc-spin .7s linear infinite; }
@keyframes kc-spin { to { transform: rotate(360deg); } }
/* Verse menu: each book's count as the same pill as the category counts */
.Controlls_menu_verses .vm-group h5 { align-items: center; }
.Controlls_menu_verses .vm-group h5 span { display: inline-block; padding: 2px 8px; border-radius: 999px; background-color: rgba(255, 255, 255, .06); color: #9ea2ad; font-family: Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0; line-height: 1.4; font-variant-numeric: tabular-nums; text-transform: none; }
body[data-theme=light] .Controlls_menu_verses .vm-group h5 span { background-color: #eef1f7; color: #5b6680; }

/* Book chips: fades and round arrows at the ends instead of a scrollbar */
.vm-books-wrap { position: relative; margin-top: 9px; }
.vm-books-wrap.vm-fl .vm-books { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px); mask-image: linear-gradient(90deg, transparent 0, #000 44px); }
.vm-books-wrap.vm-fr .vm-books { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 44px); mask-image: linear-gradient(270deg, transparent 0, #000 44px); }
.vm-books-wrap.vm-fl.vm-fr .vm-books { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%); }
.vm-scroll { position: absolute; top: 50%; z-index: 1; width: 26px; height: 26px; margin-top: -13px; padding: 0; border: 1px solid var(--kc-hair); border-radius: 50%; background: var(--kc-surface); cursor: pointer; transition: border-color .12s; }
.vm-scroll[hidden] { display: none; }
.vm-scroll::before { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-top: 1.5px solid var(--kc-soft); border-right: 1.5px solid var(--kc-soft); }
.vm-prev { left: -2px; }
.vm-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.vm-next { right: -2px; }
.vm-next::before { transform: translate(-70%, -50%) rotate(45deg); }
.vm-scroll:hover { border-color: var(--kc-hair-hi); }
.vm-scroll:hover::before { border-color: var(--kc-ink); }

/* Translations hidden by their publisher's limit on this verse: dim, explained on hover/tap */
.Version_item.Version_limited { opacity: .3; border-style: dashed; cursor: help; }
.Version_item.Version_limited:hover, .Version_item.Version_limited:focus-visible { opacity: .6; outline: none; }
.kc-vtip { position: fixed; z-index: 1000; max-width: 280px; padding: 9px 12px; border: 1px solid var(--kc-line); border-radius: 10px; background: var(--kc-surface); color: #c9cbd1; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.45; letter-spacing: 0; box-shadow: var(--kc-shadow); pointer-events: none; }
.kc-vtip[hidden] { display: none; }
body[data-theme=light] .kc-vtip { background: #fff; color: #2f3b54; }
/* The translation strip: no scrollbar (Chrome drops custom colours on "thin" ones); the edge fades show there is more */
.Version_list { scrollbar-width: none !important; }
.Version_list::-webkit-scrollbar { display: none; }
/* Phones: the strip itself scrolls (so it gets the edge fades and drag), not its wrapper */
.Verse_versions_mob { overflow-x: hidden !important; }
.Verse_versions_mob .Version_wrapper, .Verse_versions_mob .Version_list { width: 100%; max-width: 100%; }

/* Pinch to change the text size: a brief readout of the new size */
.kc-ts-pill { position: fixed; left: 50%; bottom: 28px; z-index: 1001; padding: 7px 14px; border: 1px solid var(--kc-line); border-radius: 999px; background: var(--kc-surface); color: #c9cbd1; font-family: Arial, Helvetica, sans-serif; font-size: 13px; letter-spacing: 0; font-variant-numeric: tabular-nums; box-shadow: var(--kc-shadow); pointer-events: none; opacity: 0; transform: translate(-50%, 6px); transition: opacity .18s, transform .18s; }
.kc-ts-pill.on { opacity: 1; transform: translate(-50%, 0); }
.kc-ts-pill.kc-ts-limit { color: var(--kc-mute); }
body[data-theme=light] .kc-ts-pill { background: #fff; color: #2f3b54; }

/* Settings > Maxed Translations off */
.kc-limited-off .Version_item.Version_limited { display: none; }

/* Translation tabs sit at the right edge however many there are, even when
   Maxed Translations hides the first ones (app.css pushed only the first tab
   right). A zero-width spacer takes the free space and collapses when the
   list scrolls; the old 40px end padding was for a fade that's now a mask. */
.Version_list { padding-right: 0; }
.Version_list::before { content: ""; flex: 0 0 0; margin-left: auto; }
.Version_list > .Version_item:first-child { margin-left: 0; }

/* Settings switches, modern: label on the left, a compact switch on the right,
   the whole row clickable with a soft hover. Rows that are off read dimmer. The
   checkbox stays focusable (app.css hid it), so Tab + Space work too. */
.ToggleField_field, .kc-menu-settings .ToggleField_field { margin-bottom: 2px; }
.ToggleField_field:last-child { margin-bottom: 0; }
.ToggleField_wrapper { position: relative; }
.ToggleField_field input { display: block; position: absolute; top: 50%; right: 12px; width: 36px; height: 20px; margin: -10px 0 0; opacity: 0; pointer-events: none; }
.ToggleField_field label {
  display: flex; align-items: center; box-sizing: border-box; width: calc(100% + 24px); margin: 0 -12px;
  padding: 9px 64px 9px 12px; border-radius: 10px;
  font-size: 12px; letter-spacing: .14em; line-height: 20px; color: var(--kc-soft);
  transition: background-color .15s, color .15s; -webkit-tap-highlight-color: transparent;
}
.ToggleField_field label:hover { background-color: rgba(255, 255, 255, .045); color: var(--kc-ink); }
.ToggleField_field input:checked + label { color: var(--kc-ink); }
.ToggleField_field label:before {
  left: auto; right: 12px; width: 36px; height: 20px; margin-top: -10px; border-radius: 999px;
  background-color: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  transition: background-color .22s ease, box-shadow .22s ease;
}
.ToggleField_field label:after {
  left: auto; right: 30px; width: 16px; height: 16px; margin-top: -8px;
  background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .04);
  transform: translateX(0); transition: transform .32s cubic-bezier(.3, 1.45, .55, 1), background-color .2s;
}
.ToggleField_field label:hover:before { background-color: rgba(255, 255, 255, .18); }
.ToggleField_field input:checked + label:before, .ToggleField_field input:checked + label:hover:before { background-color: var(--kc-accent); box-shadow: none; }
.ToggleField_field input:checked + label:after { left: auto; transform: translateX(16px); background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.ToggleField_field input:focus-visible + label:before { box-shadow: 0 0 0 2px var(--kc-surface), 0 0 0 4px var(--kc-accent); }
body[data-theme=light] .ToggleField_field label:hover { background-color: rgba(20, 30, 50, .045); }
body[data-theme=light] .ToggleField_field label:before { background-color: #dde3ee; box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .05); }
body[data-theme=light] .ToggleField_field label:hover:before { background-color: #d2d9e6; }
body[data-theme=light] .ToggleField_field input:checked + label:before { background-color: var(--kc-accent); box-shadow: none; }
body[data-theme=light] .ToggleField_field label:after, body[data-theme=light] .ToggleField_field input:checked + label:after { background-color: #fff; box-shadow: 0 1px 2px rgba(20, 30, 50, .25); }
@media (prefers-reduced-motion: reduce) { .ToggleField_field label:after { transition: none; } }
.Settings_settings_list { padding: 12px 20px 18px; }
.Settings_settings_list .kc-textsize { margin-top: 12px; }

/* The top header stays at the top of the page and scrolls away with it, so it
   never covers the verse (app.css pinned it with position: fixed). The pages'
   top padding already leaves room for it. */
.Header_header { position: absolute; }

/* Picker buttons (chapter; category and verse in Category mode): no arrow, so
   the label sits centred. The right padding is a touch smaller to balance the
   letter-spacing after the last letter. */
.Controlls_canon_books_list_name:after { display: none; }
.Controlls_canon_books_list_name { padding-left: 17px; padding-right: 15px; }
@media screen and (min-width: 1025px) {
  .Controlls_canon_books_list_name { padding-left: 18px; padding-right: 16px; }
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  .Controlls_canon_books_list_name { padding-left: 14px; padding-right: 13px; }
}

/* Chapter menu, calmer colours. The open book gets the same neutral fill as a
   hovered row instead of a cyan tint (which turned the whole chapter grid
   blue-green); the book you're in is marked by the accent bar the other menus
   use. Chapter buttons match the verse buttons in the bottom bar, including how
   the current one is marked. */
.Controlls_menu_chapter .CanonListItem_canon.CanonListItem_active { background-color: transparent; }
.Controlls_menu_chapter .CanonListItem_canon:hover,
.Controlls_menu_chapter .CanonListItem_canon.CanonListItem_open,
.Controlls_menu_chapter .CanonListItem_canon.CanonListItem_active.CanonListItem_open { background-color: rgba(255, 255, 255, .035); }
.Controlls_menu_chapter .CanonListItem_canon h3 { position: relative; }
.Controlls_menu_chapter .CanonListItem_canon.CanonListItem_active h3 { color: #fff; }
.Controlls_menu_chapter .CanonListItem_canon.CanonListItem_active h3::before { content: ""; position: absolute; left: -14px; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: var(--kc-accent); }
.Controlls_menu_chapter .CanonListItem_canon ul li { border-color: rgba(255, 255, 255, .1); background-color: transparent; color: #a7abb5; transition: background-color .12s, border-color .12s, color .12s; }
.Controlls_menu_chapter .CanonListItem_canon ul li:hover { border-color: rgba(255, 255, 255, .32); background-color: rgba(255, 255, 255, .05); color: #fff; }
.Controlls_menu_chapter .CanonListItem_canon ul li:hover a { color: inherit; }
.Controlls_menu_chapter .CanonListItem_canon ul li.CanonListItem_current { border-color: rgba(255, 255, 255, .5); background-color: rgba(255, 255, 255, .1); color: #fff; }
.Controlls_menu_chapter .CanonListItem_canon ul li.CanonListItem_disabled { opacity: 1; border-color: rgba(255, 255, 255, .04); color: #3b3e46; }
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon.CanonListItem_active { background-color: transparent; }
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon:hover,
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon.CanonListItem_open,
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon.CanonListItem_active.CanonListItem_open { background-color: #f3f5fa; }
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon.CanonListItem_active h3 { color: #1e2941; }
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon ul li { border-color: rgba(47, 59, 84, .16); background-color: transparent; color: #4b587a; }
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon ul li:hover { border-color: rgba(47, 59, 84, .4); background-color: #fff; color: #1e2941; }
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon ul li:hover a { color: inherit; }
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon ul li.CanonListItem_current { border-color: #2f3b54; background-color: #fff; color: #1e2941; }
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon ul li.CanonListItem_disabled { border-color: rgba(47, 59, 84, .06); color: #c3c9d6; }

/* Category verse menu opens fast: book groups out of view aren't laid out until
   they scroll near (a 1,375-verse category spent ~110 ms laying out every row).
   The size each one reserves comes from its row count. */
.Controlls_menu_verses .vm-group { content-visibility: auto; contain-intrinsic-size: auto calc(34px + var(--n, 1) * 38.8px); }

/* Menus: one neutral family for hover and selected rows; the thin accent bar is
   the only colour (the selected rows used a cyan tint that clashed with the grey
   hover). Same for the bottom-bar button whose menu is open. */
.Controlls_menu_category ul li:hover, .Controlls_menu_verses ul a:hover { background-color: rgba(255, 255, 255, .045); }
.Controlls_menu_category ul li.CategoryList_active, .Controlls_menu_verses ul a.Controlls_active { background-color: rgba(255, 255, 255, .075); }
.Controlls_menu_category ul li.CategoryList_active:hover, .Controlls_menu_verses ul a.Controlls_active:hover { background-color: rgba(255, 255, 255, .095); }
.Controlls_menu_category ul li.CategoryList_active span:nth-child(2) { background-color: rgba(255, 255, 255, .12); color: #fff; }
.Controlls_menu_category ul li.CategoryList_active::before, .Controlls_menu_verses ul a.Controlls_active::before { background: var(--kc-accent); }
.Controlls_canon_books_list_name.Controlls_active { border-color: rgba(255, 255, 255, .5); background-color: rgba(255, 255, 255, .08); }
body[data-theme=light] .Controlls_menu_category ul li:hover,
body[data-theme=light] .Controlls_menu_verses ul a:hover { background-color: #f3f5fa; }
body[data-theme=light] .Controlls_menu_category ul li.CategoryList_active,
body[data-theme=light] .Controlls_menu_verses ul a.Controlls_active { background-color: #e9edf5; color: #1e2941; }
body[data-theme=light] .Controlls_menu_category ul li.CategoryList_active:hover,
body[data-theme=light] .Controlls_menu_verses ul a.Controlls_active:hover { background-color: #e3e8f1; }
body[data-theme=light] .Controlls_menu_category ul li.CategoryList_active span:nth-child(2) { background-color: #d9dfea; color: #1e2941; }
body[data-theme=light] .Controlls_canon_books_list_name.Controlls_active { border-color: #2f3b54; background-color: #fff; }

/* Verse references in notes: dotted underline; a KJV verse card on hover/tap.
   (References that are already links keep their normal underline.) */
.kc-vref { text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .42); cursor: help; transition: color .15s, text-decoration-color .15s; }
.kc-vref:hover, .kc-vref:focus-visible, .kc-vref.kc-vref-on { color: #fff; text-decoration-color: var(--kc-accent); outline: none; }
body[data-theme=light] .kc-vref { text-decoration-color: rgba(30, 41, 65, .38); }
body[data-theme=light] .kc-vref:hover, body[data-theme=light] .kc-vref:focus-visible, body[data-theme=light] .kc-vref.kc-vref-on { color: #1e2941; text-decoration-color: var(--kc-accent); }
.kc-vcard { position: fixed; z-index: 1000; box-sizing: border-box; width: min(380px, calc(100vw - 20px)); padding: 14px 16px 13px; border: 1px solid var(--kc-line); border-radius: 12px; background: var(--kc-surface); box-shadow: var(--kc-shadow); color: #dcdee3; text-align: left; letter-spacing: 0; opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; }
.kc-vcard.on { opacity: 1; transform: none; }
.kc-vcard[hidden] { display: none; }
.kc-vcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.kc-vcard-ref { font-family: Marisa, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--kc-ink); }
.kc-vcard-tag { font-family: Foster, sans-serif; font-size: 13px; letter-spacing: .06em; color: var(--kc-mute); }
.kc-vcard-text { max-height: 42vh; overflow: auto; overscroll-behavior: contain; }
.kc-vcard-text p { margin: 0; font-family: "Sorts Mill Goudy", serif; font-size: 17px; line-height: 1.45; }
.kc-vcard-text em { font-style: italic; }
.kc-vcard-text sup { margin-right: 3px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: var(--kc-mute); }
.kc-vcard-text .kc-dn { font-size: .86em; }
.kc-vcard-text p.kc-vcard-loading { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: var(--kc-mute); }
.kc-vcard-more { color: var(--kc-mute); }
.kc-vcard-open { display: inline-block; margin-top: 10px; font-family: Marisa, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--kc-soft); text-decoration: none; transition: color .15s; }
.kc-vcard-open::after { content: " \2192"; letter-spacing: 0; }
.kc-vcard-open:hover { color: var(--kc-accent); }
body[data-theme=light] .kc-vcard { background: #fff; color: #1e2941; }
@media (prefers-reduced-motion: reduce) { .kc-vcard { transition: none; transform: none; } }

/* Random Verse: hover brightens the button and a soft streak of light sweeps
   across it once; the icon nudges forward. A click gives a little press bounce.
   Keyboard focus is one clean ring. Touch screens get no hover state. */
#random-verse { overflow: hidden; transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s var(--kc-ease); }
#random-verse::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: -70%; width: 45%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent); }
body[data-theme=light] #random-verse::after { background: linear-gradient(90deg, transparent, rgba(30, 41, 65, .1), transparent); }
@media screen and (min-width: 1025px) { #random-verse span, #random-verse img { position: relative; z-index: 1; top: auto; right: auto; } }
#random-verse:focus { outline: none; }
#random-verse:focus-visible { outline: none; border-color: rgba(255, 255, 255, .3); box-shadow: 0 0 0 3px rgba(96, 245, 255, .3); }
body[data-theme=light] #random-verse:focus-visible { border-color: rgba(47, 59, 84, .38); box-shadow: 0 0 0 3px rgba(10, 165, 156, .25); }
#random-verse:hover { border-color: var(--kc-hair); background-color: rgba(255, 255, 255, .02); }
body[data-theme=light] #random-verse:hover { border-color: var(--kc-hair); background-color: rgba(255, 255, 255, .6); }
@media (hover: hover) {
  #random-verse:hover { border-color: rgba(255, 255, 255, .34); background-color: rgba(255, 255, 255, .055); }
  #random-verse:hover::after { animation: kc-rv-sheen .75s ease-out; }
  #random-verse:hover span { color: #fff; }
  #random-verse img { transition: transform .35s var(--kc-ease), opacity .15s; }
  #random-verse:hover img { opacity: 1; transform: translateX(2px); }
  body[data-theme=light] #random-verse:hover { border-color: rgba(47, 59, 84, .45); background-color: #fff; }
  body[data-theme=light] #random-verse:hover span { color: #1e2941; }
}
@keyframes kc-rv-sheen { from { left: -70%; } to { left: 130%; } }
#random-verse:active { transform: scale(.98); transition-duration: .08s; }
@media (prefers-reduced-motion: reduce) { #random-verse, #random-verse img { transition: none; } #random-verse:hover::after { animation: none; } #random-verse:hover img { transform: none; } }

/* Books with no verses on the site yet (Obadiah, …) can't be opened: dim, like
   the chapters without verses. (A later rule had brightened their names.) */
.CanonListItem_canon.CanonListItem_disabled h3, .CanonListItem_canon.CanonListItem_disabled h3 span,
.Controlls_menu_chapter .CanonListItem_canon.CanonListItem_disabled h3, .Controlls_menu_chapter .CanonListItem_canon.CanonListItem_disabled h3 span { color: #3b3e46; cursor: default; }
body[data-theme=light] .CanonListItem_canon.CanonListItem_disabled h3, body[data-theme=light] .CanonListItem_canon.CanonListItem_disabled h3 span,
body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon.CanonListItem_disabled h3, body[data-theme=light] .Controlls_menu_chapter .CanonListItem_canon.CanonListItem_disabled h3 span { color: #c3c9d6; }

/* Keyboard-shortcuts and Settings buttons: line icons in the theme's text colour
   (they were solid grey images that looked heavy, especially in light mode),
   a soft fill on hover or while Settings is open, and the gear turns a little.
   Positions keep the icons' centres where they were. */
@media screen and (min-width: 1025px) { .kc-icon-btn { display: inline-flex; } }
.kc-icon-btn { align-items: center; justify-content: center; box-sizing: border-box; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #7d818b; cursor: pointer; opacity: 1; filter: none; transition: background-color .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.kc-icon-btn svg { display: block; width: 22px; height: 22px; transition: transform .45s var(--kc-ease); }
.kc-icon-btn:hover, .kc-icon-btn[aria-expanded="true"] { background-color: rgba(255, 255, 255, .07); color: var(--kc-ink); opacity: 1; }
#settings-icon:hover svg, #settings-icon[aria-expanded="true"] svg { transform: rotate(45deg); }
.kc-icon-btn:focus { outline: none; }
.kc-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(96, 245, 255, .55); color: var(--kc-ink); }
body[data-theme=light] .kc-icon-btn { color: #7a8399; filter: none; opacity: 1; }
body[data-theme=light] .kc-icon-btn:hover, body[data-theme=light] .kc-icon-btn[aria-expanded="true"] { background-color: rgba(30, 41, 65, .06); color: #1e2941; }
body[data-theme=light] .kc-icon-btn:focus-visible { box-shadow: 0 0 0 2px rgba(10, 165, 156, .5); }
.Settings_settings { right: 14px; bottom: calc(100% + 12px); }
.Controlls_keyboard_icon.kc-icon-btn { right: 69px; bottom: calc(100% + 12px); }
@media (prefers-reduced-motion: reduce) { .kc-icon-btn svg { transition: none; } }


/* Side menu (Navigate) lists: the same neutral hover/selected colours as the
   pop-up menus, with the accent bar as the only colour (the selected category
   was mint in light mode, the open book light blue). Count pills match too. */
.Menu_verses_body .CategoryList_list li:hover { background-color: rgba(255, 255, 255, .045); }
.Menu_verses_body .CategoryList_list li.CategoryList_active { background-color: rgba(255, 255, 255, .075); }
.Menu_verses_body .CategoryList_list li.CategoryList_active span:nth-child(2) { background-color: rgba(255, 255, 255, .12); color: #fff; }
.Menu_verses_body .CanonListItem_canon.CanonListItem_active { background-color: transparent; }
.Menu_verses_body .CanonListItem_canon:hover, .Menu_verses_body .CanonListItem_canon.CanonListItem_open,
.Menu_verses_body .CanonListItem_canon.CanonListItem_active.CanonListItem_open { background-color: rgba(255, 255, 255, .035); }
.Menu_verses_body .CanonListItem_canon h3 { position: relative; }
.Menu_verses_body .CanonListItem_canon.CanonListItem_active h3 { color: #fff; }
.Menu_verses_body .CanonListItem_canon.CanonListItem_active h3::before { content: ""; position: absolute; left: -18px; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: var(--kc-accent); }
body[data-theme=light] .Menu_verses_body .CategoryList_list li:hover,
body[data-theme=light] .Menu_verses_body .CanonListItem_canon:hover,
body[data-theme=light] .Menu_verses_body .CanonListItem_canon.CanonListItem_open,
body[data-theme=light] .Menu_verses_body .CanonListItem_canon.CanonListItem_active.CanonListItem_open { background-color: #f1f3f8; }
body[data-theme=light] .Menu_verses_body .CategoryList_list li.CategoryList_active { background-color: #e9edf5; }
body[data-theme=light] .Menu_verses_body .CategoryList_list li.CategoryList_active span:first-child,
body[data-theme=light] .Menu_verses_body .CanonListItem_canon.CanonListItem_active h3 { color: #1e2941; }
body[data-theme=light] .Menu_verses_body .CategoryList_list li span:nth-child(2) { border: 0; background-color: #eef1f6; color: #6b7590; font-weight: 600; }
body[data-theme=light] .Menu_verses_body .CategoryList_list li.CategoryList_active span:nth-child(2) { background-color: #dde2ec; color: #1e2941; }
body[data-theme=light] .Menu_verses_body .CanonListItem_canon.CanonListItem_active { background-color: transparent; }

/* Phone sheet close button (chapter, category, verse menus): a small rounded
   button like the header's, with a crisp drawn X instead of the large thin one. */
@media screen and (max-width: 1024px) {
  .Controlls_menu h6 + span { top: 9px; right: 12px; width: 36px; height: 36px; box-sizing: border-box; border: 1px solid var(--kc-hair); border-radius: 10px; background: rgba(255, 255, 255, .03); background-image: none; filter: none; cursor: pointer; transition: background-color .15s, border-color .15s; -webkit-tap-highlight-color: transparent; }
  .Controlls_menu h6 + span::before, .Controlls_menu h6 + span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.6px; margin: -.8px 0 0 -7px; border-radius: 2px; background: var(--kc-ink); transform: rotate(45deg); }
  .Controlls_menu h6 + span::after { transform: rotate(-45deg); }
  .Controlls_menu h6 + span:active { background-color: rgba(255, 255, 255, .09); border-color: var(--kc-hair-hi); }
  body[data-theme=light] .Controlls_menu h6 + span { background-color: #fff; filter: none; }
  body[data-theme=light] .Controlls_menu h6 + span:active { background-color: #eef1f6; }
}

/* Phones: a short translation list sits centred under the verse (a second
   spacer balances the one that right-aligns it); a long one still scrolls. */
.Verse_versions_mob .Version_list::after { content: ""; flex: 0 0 0; margin-right: auto; order: 2; }
/* Phones: the clickable translations first, the dim maxed-out ones after them. */
.Verse_versions_mob .Version_item.Version_limited { order: 1; }
.Verse_versions_mob .Version_list > .Version_item.Version_limited:first-child { margin-left: 6px; }
/* Translation tabs: the theme's focus ring instead of the browser's blue one. */
.Version_item:focus { outline: none; }
.Version_item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(96, 245, 255, .5); }
body[data-theme=light] .Version_item:focus-visible { box-shadow: 0 0 0 2px rgba(10, 165, 156, .5); }

/* Phones: "Categories:" on its own line, then the chips in one row when they
   all fit (site.js adds kc-cats-stack, one per line, when they don't). */
@media screen and (max-width: 600px) {
  .Verse_categories { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .Verse_categories strong { flex-basis: 100%; text-align: center; }
  .Verse_categories.kc-cats-stack { flex-direction: column; }
}

/* Phones and tablets: bottom-bar buttons big enough to tap (44px, Apple's
   minimum; the category bar 40px). Category hover tooltips are off on phones:
   there's no hover on touch, and their hidden boxes pushed the page sideways
   once two chips shared a row. */
@media screen and (max-width: 1024px) {
  .Controlls_category_navigation_arrow, .Controlls_canon_books_list_arrow { width: 44px; height: 44px; }
  .Controlls_category_block .Controlls_canon_books_list_name:nth-child(2) { top: 8px; height: 44px; left: 54px; right: 54px; font-size: 15px; }
  .Controlls_category_block .Controlls_canon_books_list_name:first-child { height: 40px; font-size: 12px; }
  .Controlls_canon_books_list .Controlls_canon_books_list_name { height: 44px; width: calc(100% - 100px); }
  .Controlls_canon_verses_list_item { width: 40px; height: 40px; }
}
@media screen and (max-width: 600px) {
  .Verse_categories span::after, .Verse_categories span::before { display: none; }
}

/* Phones and tablets: the verses and the note sit further in than the header
   and buttons (they shared the same 20px edge, so long lines ran nearly to the
   screen edge). The inset grows with the screen: ~35px on a small phone. */
@media screen and (max-width: 1024px) {
  .Verse_verses, .Verse_description { padding-left: clamp(12px, 4vw, 32px); padding-right: clamp(12px, 4vw, 32px); box-sizing: border-box; }
}

/* Phones: the same Canon | Category switch as on computers (a highlight slides
   between them) in the header and in the menu's Navigate tab, instead of a
   single toggle button and two separate buttons. Sized to fit a 360px phone. */
@media screen and (max-width: 1024px) {
  .Header_header .Header_mode { display: inline-flex; margin-left: 12px; }
  .Header_header .Header_mode_mobile { display: none; }
  .Header_header .Header_mode span { padding: 8px 9px; font-size: 11px; letter-spacing: .12em; }
}
.Menu_mobile .Menu_tab .Menu_verses_head { position: relative; isolation: isolate; width: fit-content; margin: 2px auto 18px; padding: 3px; gap: 2px;
  border: 1px solid var(--kc-hair); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.Menu_mobile .Menu_tab .Menu_verses_head > span { margin: 0; padding: 8px 16px; border: 0; border-radius: 7px; background: transparent; opacity: 1;
  color: var(--kc-mute); font-size: 12px; letter-spacing: .16em; line-height: 1.2; transition: color .3s ease, background-color .15s; }
.Menu_mobile .Menu_tab .Menu_verses_head > span.Menu_active { background: rgba(255, 255, 255, .1); color: #fff; }
.Menu_mobile .Menu_tab .Menu_verses_head.kc-pill::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 0; width: var(--pill-w, 0); border-radius: 7px;
  background: rgba(255, 255, 255, .1); transform: translateX(var(--pill-x, 0)); transition: transform .38s var(--kc-ease), width .38s var(--kc-ease); }
.Menu_mobile .Menu_tab .Menu_verses_head.kc-pill > span.Menu_active { background: transparent; }
body[data-theme=light] .Menu_mobile .Menu_tab .Menu_verses_head { background: rgba(255, 255, 255, .6); }
body[data-theme=light] .Menu_mobile .Menu_tab .Menu_verses_head > span { border: 0; background: transparent; color: var(--kc-mute); opacity: 1; }
body[data-theme=light] .Menu_mobile .Menu_tab .Menu_verses_head > span.Menu_active { background: #e7ecf6; color: #1e2941; }
body[data-theme=light] .Menu_mobile .Menu_tab .Menu_verses_head.kc-pill::before { background: #e7ecf6; }
body[data-theme=light] .Menu_mobile .Menu_tab .Menu_verses_head.kc-pill > span.Menu_active { background: transparent; }
@media (prefers-reduced-motion: reduce) { .Menu_mobile .Menu_tab .Menu_verses_head.kc-pill::before { transition: none; } }

/* Canon / Category switch: the bottom bar's controls build out and the new ones
   build in, one after another (site.js sets --bi, each item's place in line).
   Uses translate/scale rather than transform so the rotated "previous" arrows
   keep their direction. */
#controls.kc-build-out :is(.Controlls_canon_books_list > *, .Controlls_canon_verses_list_wrapper > span, .Controlls_canon_verses_list_item, .Controlls_category_block > *, .Controlls_category_navigation > *) {
  animation: kc-build-out .17s cubic-bezier(.4, 0, 1, 1) both; animation-delay: calc(var(--bi, 0) * 14ms); pointer-events: none; }
#controls.kc-build-in :is(.Controlls_canon_books_list > *, .Controlls_canon_verses_list_wrapper > span, .Controlls_canon_verses_list_item, .Controlls_category_block > *, .Controlls_category_navigation > *) {
  animation: kc-build-in .46s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--bi, 0) * 26ms); }
@keyframes kc-build-out { to { opacity: 0; translate: 0 8px; scale: .96; filter: blur(3px); } }
@keyframes kc-build-in { from { opacity: 0; translate: 0 12px; scale: .94; filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) { #controls.kc-build-out *, #controls.kc-build-in * { animation: none !important; } }

/* Submit form: verse picker under the reference field (like the editor's). */
.kc-refpick-wrap { position: relative; }
.kc-refpick { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: min(340px, 50vh); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border: 1px solid var(--kc-line); border-radius: 12px; background: var(--kc-surface); box-shadow: var(--kc-shadow); }
.kc-refpick[hidden] { display: none; }
.kc-refpick button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--kc-ink); text-align: left; cursor: pointer; font: inherit; }
.kc-refpick button b { display: flex; align-items: center; gap: 8px; font-family: Marisa, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.kc-refpick button em { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--kc-soft); font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; }
.kc-refpick button span { display: -webkit-box; margin-top: 3px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--kc-mute); font-family: "Sorts Mill Goudy", serif; font-size: 15px; line-height: 1.35; }
.kc-refpick button:hover, .kc-refpick button.on { background: rgba(255, 255, 255, .07); }
.kc-refpick button.on span, .kc-refpick button:hover span { color: var(--kc-soft); }
.kc-refpick-msg { margin: 0; padding: 10px 12px; color: var(--kc-mute); font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.kc-refpick-note { margin: 8px 2px 0; color: var(--kc-soft); font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; letter-spacing: 0; }
.kc-refpick-note a { color: var(--kc-ink); text-decoration: underline; text-underline-offset: 3px; }
body[data-theme=light] .kc-refpick { background: #fff; }
body[data-theme=light] .kc-refpick button:hover, body[data-theme=light] .kc-refpick button.on { background: #eef1f6; }
body[data-theme=light] .kc-refpick button em { background: #e3e8f1; color: #4b587a; }