/* THE VERSE AND WORD TOOLS (reader/verse.js) */

/* verses picked for the sheet */
.br-verse.is-sel { background: color-mix(in srgb, var(--coral) 20%, transparent); border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* a verse number: a much bigger place to tap than the little number itself */
.br-verse sup.br-n { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.br-verse sup.br-n::before { content: ''; position: absolute; left: -12px; right: -10px; top: -14px; bottom: -16px; }
.br-bignum { cursor: pointer; }

/* ---------------------------------------------------------------- the verse sheet */
.vs-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483150; display: flex; justify-content: center; pointer-events: none; }
.vs-sheet[hidden] { display: none; }
.vs-in { pointer-events: auto; width: 100%; max-width: 560px; max-height: 82vh; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border: 1px solid var(--rule); border-bottom: none; border-radius: 22px 22px 0 0; background: var(--bg-raised); color: var(--ink); box-shadow: 0 -16px 40px -18px rgba(0, 0, 0, 0.45); font-family: var(--sans); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.vs-sheet.open .vs-in { transform: none; }
.vs-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.vs-head > div { flex: 1; min-width: 0; }
.vs-head b { display: block; font-size: 16px; }
.vs-head small { font-size: 12.5px; color: var(--muted); }
.vs-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); color: var(--ink); cursor: pointer; }
.vs-x svg { width: 16px; height: 16px; }
.vs-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.vs-acts button { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 10px 0 8px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg); color: var(--ink); font: 600 11.5px var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vs-acts button svg { width: 21px; height: 21px; color: var(--gold); }
.vs-acts button.is-on { border-color: var(--coral); background: var(--coral-soft); }
.vs-fmt-h { margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.vs-fmt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 3px; margin-bottom: 6px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); }
.vs-fmt button { min-width: 0; padding: 8px 2px; border: none; border-radius: 999px; background: none; color: var(--muted); font: 700 12.5px var(--sans); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-fmt-d { margin: 0 2px 10px; font-size: 12px; color: var(--muted); }
.vs-fmt button.is-on { background: var(--coral); color: var(--on-gold); }
.vs-preview { position: relative; max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px; border-radius: 12px; background: var(--bg); color: var(--muted); font: 13px/1.5 var(--sans); white-space: normal; overflow-wrap: anywhere; } /* (all of it shows; a long passage scrolls) */
.vs-preview.is-done::after { content: attr(data-done); position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--ink); font-weight: 800; font-size: 15px; animation: bv-in 0.15s ease; }
.vs-more { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vs-more button { padding: 7px 12px; border: 1px dashed var(--rule); border-radius: 999px; background: none; color: var(--ink); font: 600 12.5px var(--sans); cursor: pointer; }
.vs-panel:not(:empty) { margin-top: 12px; }
.vs-cmp { padding: 10px 0; border-top: 1px solid var(--rule); }
.vs-cmp > b { font-size: 11px; letter-spacing: 0.1em; color: var(--gold); }
.vs-cmp .br-p, .vs-cmp .br-q { margin: 4px 0 0; font-size: 16px; line-height: 1.6; }
.vs-looks { display: flex; flex-direction: column; gap: 6px; }
.vs-looks a { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg); color: var(--ink); text-decoration: none; }
.vs-looks b { font-size: 14px; }
.vs-looks small { grid-column: 1; font-size: 12px; color: var(--muted); }
.vs-looks span { grid-row: 1 / 3; grid-column: 2; color: var(--gold); }
.vs-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- the word ring */
.wr-ring { position: fixed; z-index: 2147483160; width: 0; height: 0; }
.wr-ring[hidden] { display: none; }
.wr-word { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(0.6); padding: 7px 13px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 14px var(--sans); white-space: nowrap; opacity: 0; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; }
.wr-ring.open .wr-word { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.wr-b { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; padding: 0; border: 1px solid color-mix(in srgb, var(--coral) 45%, var(--rule)); border-radius: 50%; background: var(--bg-raised); color: var(--gold); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); cursor: pointer; opacity: 0; transform: translate(0, 0) scale(0.3); transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d), opacity 0.2s ease var(--d); -webkit-tap-highlight-color: transparent; }
.wr-ring.open .wr-b { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
.wr-b svg { width: 22px; height: 22px; }
/* (each label like the word itself: dark, solid, and clear over any page) */
.wr-b span { position: absolute; top: 100%; left: 50%; margin-top: 4px; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 11px/1.2 var(--sans); white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.45); }
.wr-b.is-done { background: var(--coral); color: var(--on-gold); }
.wr-ring.is-dim { opacity: 0; pointer-events: none; } /* (a card open over it: the ring away, not faded behind it. From the owner: "The markup ring is faded in the background and it looks distracting") */
.wr-ring.is-dim .wr-b { pointer-events: none; }
.wr-card { position: fixed; left: 50%; z-index: 2147483170; width: min(420px, calc(100% - 24px)); max-height: min(50vh, 360px); overflow-y: auto; transform: translateX(-50%); padding: 14px 16px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); color: var(--ink); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5); font-family: var(--sans); animation: bv-in 0.18s ease; }
.wr-card[hidden] { display: none; }
.wr-cx { float: right; display: grid; place-items: center; width: 30px; height: 30px; margin: -4px -6px 0 8px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.wr-cx svg { width: 16px; height: 16px; }
.wr-card h4 { margin: 0 0 6px; font-size: 16px; }
.wr-card h4 small { font-weight: 500; color: var(--muted); }
.wr-pos { margin: 8px 0 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.wr-card ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.wr-sub { margin: 8px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.wr-bible { margin: 4px 0 10px; }
.wr-bible-p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.wr-bible-refs { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.wr-bible-refs b { color: var(--gold); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
.wr-big { margin: 4px 0 10px; font-size: 30px; font-weight: 800; }
.wr-big small { font-size: 13px; font-weight: 500; color: var(--muted); }
.wr-refs { display: flex; flex-wrap: wrap; gap: 5px; }
.wr-refs button { padding: 5px 9px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 600 12px var(--sans); cursor: pointer; }
.wr-refs span { align-self: center; font-size: 12px; color: var(--muted); }
/* (In the Bible's other versions: each a row with its count, opening to its verses) */
.wr-oth { margin: 18px 0 6px; font: 800 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.wr-ver { border-top: 1px solid var(--rule); }
.wr-ver summary { display: flex; align-items: baseline; gap: 10px; padding: 10px 2px; cursor: pointer; list-style: none; font: 14px var(--sans); }
.wr-ver summary::-webkit-details-marker { display: none; }
.wr-ver summary b { min-width: 44px; font-weight: 800; }
.wr-ver summary .wr-vn { color: var(--muted); }
.wr-ver summary::after { content: '›'; margin-left: auto; color: var(--gold); transition: transform 0.2s; }
.wr-ver[open] summary::after { transform: rotate(90deg); }
.wr-vbody { padding: 0 0 12px; }
.wr-list { margin: 0 0 10px; padding: 0; list-style: none; }
.wr-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.wr-list small { color: var(--muted); }
.wr-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wr-row button { padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
.wr-row button:first-child { border-color: var(--coral); background: var(--coral); color: var(--on-gold); }
html.vs-open .as-ctl, html.wr-open .as-ctl { opacity: 0 !important; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .vs-in, .wr-b, .wr-word { transition: none; } }

/* the sheet's Study: notes, cross references, other sites */
.vs-sec { margin: 14px 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.vs-sec:first-child { margin-top: 2px; }
.vs-srcs, .vs-xr, .vs-later { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vs-srcs button, .vs-xr button, .vs-later button { padding: 6px 11px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 600 12.5px var(--sans); cursor: pointer; }
.vs-srcs button.is-on, .vs-xr button.is-on { border-color: var(--coral); background: var(--coral-soft); }
.vs-note-t { max-height: 260px; overflow-y: auto; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-family: Georgia, serif; font-size: 15px; line-height: 1.6; color: var(--ink); }
.vs-note-t p { margin: 0 0 8px; }
.vs-xtext:not(:empty) { padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.vs-xtext > b { font-size: 12px; color: var(--gold); }
.vs-xtext .br-p, .vs-xtext .br-q { margin: 4px 0 0; font-size: 15.5px; line-height: 1.55; }
.vs-online { margin-top: 12px; }
.vs-online summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); }
.vs-online .vs-looks { margin-top: 8px; }
/* keeping: which list */
.wr-keep { display: flex; flex-direction: column; gap: 8px; }
.wr-keep button { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg); color: var(--ink); text-align: left; cursor: pointer; }
.wr-keep button svg { flex: none; width: 22px; height: 22px; color: var(--gold); }
.wr-keep b { display: block; font-size: 14px; }
.wr-keep small { font-size: 12px; color: var(--muted); }
.wr-keep button.is-done { border-color: var(--coral); background: var(--coral-soft); }
.wr-tabs { display: flex; gap: 4px; margin: 6px 0 8px; }
.wr-tabs button { flex: 1; padding: 7px 6px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--muted); font: 700 12px var(--sans); cursor: pointer; }
.wr-tabs button.is-on { border-color: var(--coral); background: var(--coral-soft); color: var(--ink); }
.wr-list li { align-items: center; }
.wr-list li > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wr-rm { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: none; color: #C4372C; cursor: pointer; }
.wr-rm svg { width: 18px; height: 18px; }
@media (hover: hover) { .wr-rm:hover { background: rgba(196, 55, 44, 0.1); } }
body.site-dark .wr-rm { color: #F07A6E; }
.wr-look { flex: none; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 600 12px var(--sans); cursor: pointer; }

/* the original words */
.og { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.og-l { font-family: "SBL Greek", "Times New Roman", Georgia, serif; font-size: 30px; line-height: 1.2; color: var(--ink); }
.og-t { font-size: 15px; font-weight: 700; color: var(--gold); }
.og-t small { font-weight: 500; color: var(--muted); }
.og-id { font-size: 11.5px; color: var(--muted); }
.og-d { margin: 6px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.og-d b { color: var(--muted); font-weight: 700; }
.og-uses-b { margin: 4px 0 6px; padding: 7px 12px; border: 1px solid var(--coral); border-radius: 999px; background: var(--coral-soft); color: var(--ink); font: 700 12.5px var(--sans); cursor: pointer; }
.og-uses { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.og-uses button { padding: 5px 9px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 600 12px var(--sans); cursor: pointer; }
.og-uses span { align-self: center; font-size: 12px; color: var(--muted); }
.og-words { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; }
.og-words button { padding: 5px 9px; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg); color: var(--ink); font: 13px Georgia, serif; cursor: pointer; }
.og-words button.is-on { border-color: var(--coral); background: var(--coral-soft); }
.og-one:not(:empty) { padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; background: var(--bg); }
.og-credit { font-size: 11px; }

/* the one-time tip: two soft taps on a word, and a note */
.wr-tip { position: fixed; inset: 0; z-index: 2147483165; pointer-events: none; }
.wr-tip > * { pointer-events: auto; }
.wr-tip.is-out { opacity: 0; transition: opacity 0.3s ease; }
.wr-tip-mark { position: fixed; border-radius: 6px; background: color-mix(in srgb, var(--coral) 24%, transparent); pointer-events: none !important; animation: wr-mark 3.4s ease forwards; }
@keyframes wr-mark { 0%, 20% { opacity: 0; } 30%, 85% { opacity: 1; } 100% { opacity: 0.6; } }
.wr-tip-tap { position: fixed; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid var(--gold); border-radius: 50%; background: color-mix(in srgb, var(--coral) 22%, transparent); pointer-events: none !important; opacity: 0; animation: wr-tap 1.6s ease-out 0.2s 2; }
.wr-tip-tap.is-2 { animation-delay: 0.42s; }
@keyframes wr-tap { 0% { opacity: 0; transform: scale(0.4); } 12% { opacity: 1; transform: scale(0.7); } 40% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }
.wr-tip-note { position: fixed; left: 50%; width: min(340px, calc(100% - 32px)); transform: translateX(-50%); padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--coral) 55%, var(--rule)); border-radius: 16px; background: var(--bg-raised); box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.45); font-family: var(--sans); opacity: 0; animation: wr-note 0.4s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards; }
@keyframes wr-note { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.wr-tip-note b { display: block; font-size: 15px; color: var(--ink); }
.wr-tip-note small { display: block; margin: 2px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.wr-tip-note div { display: flex; gap: 8px; }
.wr-tip-note button { padding: 8px 13px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
.wr-tip-note button:first-child { border-color: var(--coral); background: var(--coral); color: var(--on-gold); }
.vs-tip { margin: 12px 2px 0; font-size: 11.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .wr-tip-tap { animation: none; } .wr-tip-mark, .wr-tip-note { animation: none; opacity: 1; } }

/* a brief word ("removed from Kept") */
.vs-flash { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 2147483180; padding: 10px 16px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 88%, transparent); color: var(--bg); font: 700 13.5px var(--sans); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 8px); }
.vs-flash.is-on { animation: vs-flash 1.8s ease forwards; }
@keyframes vs-flash { 0% { opacity: 0; transform: translate(-50%, 8px); } 12%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }

/* a Keep choice that's already kept: remove it (a red trash can) */
.wr-keep button.is-kept { border-color: color-mix(in srgb, #C4372C 40%, var(--rule)); }
.wr-keep button.is-kept svg { color: #C4372C; }
body.site-dark .wr-keep button.is-kept svg { color: #F07A6E; }

/* what goes with the words: switches, each on or off */
.vs-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vs-opts button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 7px 8px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--muted); font: 700 12.5px var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vs-opts button i { display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--rule); border-radius: 50%; }
.vs-opts button.is-on { border-color: var(--coral); background: var(--coral-soft); color: var(--ink); }
.vs-opts button.is-on i { border-color: var(--gold); background: var(--gold); }
.vs-opts button.is-on i::after { content: ''; width: 4px; height: 7px; margin-top: -2px; border: solid var(--bg-raised); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vs-preview p { margin: 0 0 6px; }
.vs-preview p:last-child { margin-bottom: 0; }
.vs-preview.is-styled { font-family: Georgia, serif; font-size: 14.5px; color: var(--ink); }
.vs-preview.is-styled sup { font-size: 0.65em; color: var(--gold); }
.vs-preview.is-styled b { color: var(--gold); }
.vs-preview.is-styled a { color: var(--gold); }
.vs-preview:not(.is-styled) { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }

/* ---------------------------------------------------------------- My verses: the composer */
.kc { position: fixed; inset: 0; z-index: 2147483175; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 16, 12, 0.45); opacity: 0; transition: opacity 0.22s ease; }
.kc.open { opacity: 1; }
.kc[hidden] { display: none; }
.kc-in { display: flex; flex-direction: column; width: 100%; max-width: 620px; height: min(92vh, 900px); height: min(92dvh, 900px); border-radius: 22px 22px 0 0; background: var(--bg); color: var(--ink); font-family: var(--sans); box-shadow: 0 -20px 40px -18px rgba(0, 0, 0, 0.5); transform: translateY(24px); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.kc.open .kc-in { transform: none; }
@media (min-width: 700px) { .kc { align-items: center; } .kc-in { border-radius: 22px; } }
.kc-head { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 8px; }
.kc-head > div { flex: 1; min-width: 0; }
.kc-head b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; }
.kc-head small { font-size: 12.5px; color: var(--muted); }
.kc-grip-i svg { width: 12px; height: 12px; vertical-align: -1px; }
.kc-tools { flex: none; display: flex; align-items: center; gap: 4px; padding: 6px 16px 10px; border-bottom: 1px solid var(--rule); }
.kc-tools button { display: grid; place-items: center; width: 36px; height: 34px; padding: 0; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg-raised); color: var(--ink); font: 15px Georgia, serif; cursor: pointer; }
.kc-tools button svg { width: 17px; height: 17px; }
.kc-tools span { margin-left: 6px; font-size: 11.5px; color: var(--muted); }
.kc-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 14px 20px; -webkit-overflow-scrolling: touch; }
.kc-b { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 6px; padding: 10px 6px 0 4px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); margin-top: 4px; }
.kc-b.is-drag { z-index: 2; box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.45); border-color: var(--coral); transition: none; }
.kc-grip { display: grid; place-items: center; width: 30px; height: 36px; padding: 0; border: none; background: none; color: var(--muted); cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.kc-grip svg { width: 18px; height: 18px; }
.kc-b.is-drag .kc-grip { cursor: grabbing; color: var(--gold); }
.kc-vt { margin: 2px 0 4px; padding: 2px 0; font-family: Georgia, serif; font-size: 16px; line-height: 1.55; outline: none; border-radius: 6px; -webkit-user-select: text; user-select: text; }
.kc-vt:focus { box-shadow: 0 0 0 2px var(--coral-soft); }
.kc-vt ul, .kc-vt ol { margin: 4px 0; padding-left: 22px; }
.kc-v small { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--gold); }
.kc-b.is-n { border-style: dashed; background: var(--bg); }
.kc-n { min-height: 40px; padding: 6px 4px 10px; font-size: 15.5px; line-height: 1.55; outline: none; -webkit-user-select: text; user-select: text; }
.kc-n:empty::before { content: attr(data-ph); color: var(--muted); }
.kc-n ul, .kc-n ol { margin: 4px 0; padding-left: 22px; }
.kc-add { grid-column: 1 / -1; display: flex; justify-content: center; gap: 4px; width: 100%; margin: 2px 0 -12px; padding: 0; position: relative; z-index: 1; }
.kc-add button { padding: 0; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kc-add span { display: inline-block; padding: 3px 10px; border: 1px dashed var(--rule); border-radius: 999px; background: var(--bg); color: var(--muted); font: 700 11.5px var(--sans); opacity: 0.75; transition: opacity 0.15s ease; }
.kc-list > .kc-add { margin: 0 0 4px; }
@media (hover: hover) { .kc-add button:hover span { opacity: 1; border-color: var(--coral); color: var(--ink); } }
.kc-list.is-dragging .kc-add { visibility: hidden; }
.kc-b + .kc-b { margin-top: 18px; }
.kc-foot { flex: none; display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); }
.kc-foot button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 14px var(--sans); cursor: pointer; }
.kc-foot button svg { width: 17px; height: 17px; }
.kc-foot .kc-copy { flex: 1; border-color: var(--coral); background: var(--coral); color: var(--on-gold); }
.kc-foot .kc-clear { color: #C4372C; }
html.kc-open .as-ctl { opacity: 0 !important; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kc, .kc-in { transition: none; } }

/* the word's sound, beside it in its meaning (the Foundations map's speaker) */
.wr-card h4 .wr-say { display: inline-flex; vertical-align: middle; margin-left: 4px; width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--coral-soft); color: var(--coral); cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.wr-card h4 .wr-say svg { width: 14px; height: 14px; }
.wr-card h4 .wr-say.playing { background: var(--coral); color: var(--on-gold); }
.og .og-say { display: inline-flex; vertical-align: middle; margin: 0 6px 0 4px; width: 28px; height: 28px; border: none; border-radius: 50%; background: var(--coral-soft); color: var(--coral); cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.og .og-say svg { width: 15px; height: 15px; }
.og .og-say.playing { background: var(--coral); color: var(--on-gold); }
/* the word's pages in the window over the apps (nav/sheet.js): the card's own look, room to read */
.wr-in-nv { color: var(--ink); font-family: var(--sans); }
.wr-in-nv h4 { margin: 0 0 8px; font-size: 22px; }
.wr-in-nv h4 small { font-weight: 500; color: var(--muted); }
.wr-in-nv ol { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.55; }
.wr-in-nv .wr-bible-p { font-size: 15.5px; }
.wr-in-nv h4 .wr-say { display: inline-flex; vertical-align: middle; margin-left: 6px; width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--coral-soft); color: var(--coral); cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.wr-in-nv h4 .wr-say svg { width: 16px; height: 16px; }
.wr-in-nv h4 .wr-say.playing { background: var(--coral); color: var(--on-gold); }
/* (a picked verse's buttons: over the number's bigger tap area, so they can be tapped themselves.
   The "On this site" dot is tapped itself: it opens what's on the site for the verse; it sits over the
   number's tap area, with a bigger one of its own, and "On this site" is among a picked verse's buttons too) */
.br-verse .br-pickacts { position: relative; z-index: 1; }
.br-verse .br-mark { position: relative; z-index: 2; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.br-verse .br-mark::before { content: ''; position: absolute; left: -4px; right: -9px; top: -13px; bottom: -13px; border-radius: 50%; }

/* the Study pane's notes for the verses, added (reader.js studyExtra): the switch, and in the preview */
.vs-study { margin: 0 0 10px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--gold) 55%, var(--rule)); border-radius: 14px; background: color-mix(in srgb, var(--gold) 7%, transparent); }
.vs-study button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--muted); font: 700 13px var(--sans); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vs-study button i { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--rule); border-radius: 50%; }
.vs-study button.is-on { border-color: var(--coral); background: var(--coral-soft); color: var(--ink); }
.vs-study button.is-on i { border-color: var(--gold); background: var(--gold); }
.vs-study button.is-on i::after { content: ''; width: 4px; height: 7px; margin-top: -2px; border: solid var(--bg-raised); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vs-study small { display: block; margin-top: 6px; font: 12.5px/1.4 var(--sans); color: var(--muted); }
.vs-sblock { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); font: 14px/1.5 var(--sans); color: var(--ink); }
.vs-sblock > b { display: block; margin-bottom: 3px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); }

/* sharing just a bit (verse.js): short, or just the words picked from the preview, with a link to it all */
.vs-sheet .vs-preview, .vs-sheet .vs-preview * { -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default; }
.vs-part { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.vs-part > button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--muted); font: 700 12.5px var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vs-part > button[hidden] { display: none; }
.vs-part > button i { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--rule); border-radius: 50%; display: grid; place-items: center; }
.vs-part > button.is-on { border-color: var(--coral); background: var(--coral-soft); color: var(--ink); }
.vs-part > button.is-on i { border-color: var(--gold); background: var(--gold); }
.vs-part > button.is-on i::after { content: ''; width: 4px; height: 7px; margin-top: -2px; border: solid var(--bg-raised); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vs-part .vs-usepart { padding: 7px 12px; border-style: dashed; }
.vs-part .vs-usepart:not(:disabled) { border-style: solid; border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--bg)); color: var(--ink); }
.vs-part .vs-usepart:disabled { opacity: 0.6; cursor: default; }
.vs-partchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: var(--coral-soft); color: var(--ink); font: 700 12.5px var(--sans); }
.vs-partchip button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: var(--bg-raised); color: var(--muted); font-size: 12px; cursor: pointer; }
.vs-part small { flex-basis: 100%; font: 12.5px/1.4 var(--sans); color: var(--muted); }

/* a space or a dividing line between blocks (tap it to switch) */
.kc-s { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 6px; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kc-s.is-space span { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 10%, transparent); color: var(--muted); font: 600 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.kc-s.is-line span { display: block; width: 100%; height: 0; border-top: 2px solid color-mix(in srgb, var(--gold) 60%, var(--rule)); }
.kc-b.is-s { align-items: center; padding-top: 4px; border-style: dashed; border-color: transparent; background: none; }
@media (hover: hover) { .kc-b.is-s:hover { border-color: var(--rule); } }
.vs-more-note { margin-top: 4px; padding: 8px 10px; border-left: 3px solid var(--coral); border-radius: 0 10px 10px 0; background: var(--coral-soft); font: 14px/1.5 var(--sans); }
/* a note from the site (study notes, kept with a verse): tinted, with where it's from; your own words plain */
.kc-b.is-n.is-site { border-style: solid; background: color-mix(in srgb, var(--gold) 7%, var(--bg-raised)); }
.kc-src { display: block; margin: 2px 0 2px; font: 700 11px var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold); }

/* (a Greek word's entry in Bill Mounce's dictionary, on his site: a quiet link under the meanings) */
.og-mounce { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 10px; color: var(--ink); font: 700 13.5px var(--sans); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 60%, transparent); text-underline-offset: 3px; }