/* =========================================================================== TheoLogan Bible — design tokens mirror theologan.org (warm cream + amber, Georgia headings / Open Sans body / Karla meta), with a matching dark theme toggled via data-theme="dark" on . =========================================================================== */ :root { --bg: #f7f2e8; /* warm cream page background */ --bg-soft: #efe8d6; /* lifted cream for cards / inputs */ --footer: #ede5d3; /* sand / parchment */ --accent: #a85d18; /* darker amber — links & marks (AA on cream) */ --accent-strong: #e49a4c; /* medium amber — button fills, verse numbers */ --cream: #f1d9a9; /* warm light accent */ --offwhite: #ffffff; --ink: #1c2426; /* primary text */ --muted: #586569; /* warmer grey */ --rule: rgba(28, 36, 38, 0.12); /* dividers / borders */ --danger: #a8332a; --shadow: rgba(0, 0, 0, .2); /* aliases kept so component rules read naturally */ --surface: var(--offwhite); --line: var(--rule); --maxread: 660px; /* Literata — a free literary serif designed for long-form reading (old-style figures, optical sizing) — is the default reading face; Georgia is the offline/first-paint fallback. */ --serif: "Literata", Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --meta: "Karla", "Open Sans", system-ui, sans-serif; } :root[data-theme="dark"] { --bg: #1e2528; --bg-soft: #2a3236; --footer: #15191b; --accent: #efb071; --accent-strong: #e49a4c; --cream: #3d4549; --offwhite: #2a3236; --ink: #ede5d3; --muted: #9aa5a8; --rule: rgba(237, 229, 211, 0.1); --danger: #e8857d; --shadow: rgba(0, 0, 0, .55); } * { box-sizing: border-box; } html, body { margin: 0; } /* Hide the page scrollbar so single-pane reading matches the app's other surfaces (pane content + tab strips already hide theirs; split mode has no page scroll at all). The document still scrolls via wheel / trackpad / keyboard / touch. */ html, body { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; transition: background-color .25s ease, color .25s ease; display: flex; flex-direction: column; min-height: 100dvh; } #columns { flex: 1 1 auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Top bar (mirrors .site-header: cream, subtle bottom rule) ---- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 20; transition: background-color .25s ease, border-color .25s ease; } .brand-wrap { display: flex; align-items: center; gap: 7px; min-width: 0; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } /* The brand doubles as a back-to-home link; the chevron signals "leave the reader". */ .brand-back { font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--muted); transition: color .2s ease; } .brand:hover .brand-back { color: var(--accent); } .brand-logo { width: 36px; height: 36px; flex-shrink: 0; } .brand-logo .logo-ink { fill: var(--ink); stroke: var(--ink); } .brand-logo .logo-ink-line { stroke: var(--ink); } .brand-logo .logo-accent { fill: var(--accent); } .brand-text { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: .2px; } .brand-theo { color: var(--ink); } .brand-logan { color: var(--accent); } .brand-bible { color: var(--muted); font-weight: 400; font-style: italic; white-space: nowrap; } .top-actions { display: flex; align-items: center; gap: 8px; } /* Plans / Notes: understated header actions, echoing the site's pill language */ .plans-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-family: var(--meta); font-weight: 500; font-size: 13px; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 7px 12px; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .plans-btn:hover { background: var(--bg-soft); border-color: var(--accent); color: var(--accent); } .plans-btn svg { display: block; } /* Dark-mode toggle (copied from theologan.org, sized for the action row) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; color: var(--ink); padding: 0; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .theme-toggle:hover, .theme-toggle:focus-visible { background: var(--bg-soft); border-color: var(--accent); color: var(--accent); outline: none; } /* Global keyboard focus ring for every custom control that doesn't define its own (mouse clicks stay ring-free via :focus-visible). Components with bespoke focus styles override by specificity. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Skip-to-content link — visually hidden until it receives keyboard focus. */ .skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; transform: translateY(-160%); transition: transform .15s ease; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 8px; font-family: var(--meta); font-weight: 700; text-decoration: none; } .skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; fill: currentColor; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---- Reading panes ---- */ /* One full-width Pane today; Phase 2 adds 2–3 side-by-side resizable columns. */ .columns { display: flex; align-items: flex-start; } .pane { flex: 1 1 0; min-width: 0; } /* ---- Per-pane tabs (each pane is a tab-group) ---- */ .pane-tabstrip { display: flex; align-items: flex-end; gap: 3px; padding: 6px 8px 0; background: var(--bg-soft); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; } .pane-tabstrip::-webkit-scrollbar { width: 0; height: 0; display: none; } .pane-tabstrip:empty { display: none; } /* Grip: grab the WHOLE pane (all tabs) to move it. Sits at the head of the tab strip. */ .pane-grip { flex: 0 0 auto; align-self: center; display: none; align-items: center; justify-content: center; width: 18px; height: 24px; margin-right: 1px; padding: 0; border: 0; color: var(--muted); cursor: grab; touch-action: none; /* Pinned so it stays reachable when a pane's tab strip overflows and scrolls. */ position: sticky; left: 0; z-index: 1; background: var(--bg-soft); } /* The pane-move grip only matters once there are panes to rearrange. */ body.split .pane-grip { display: inline-flex; } .pane-grip:hover { color: var(--accent); } .pane-grip:active { cursor: grabbing; } .pane-grip svg circle { fill: currentColor; } /* Browser-style tabs: inactive chips are quiet text on the strip; the active chip lifts to surface colour and breaks through the strip's bottom rule so it reads as joined to the toolbar/page below it. */ .ptab { display: inline-flex; align-items: center; flex: 0 0 auto; max-width: 220px; margin-bottom: -1px; border: 1px solid transparent; border-bottom: none; border-radius: 9px 9px 0 0; background: transparent; } .ptab.is-active { background: var(--surface); border-color: var(--rule); } .ptab-label { font-family: var(--meta); font-size: 13px; font-weight: 600; color: var(--muted); background: transparent; border: 0; padding: 7px 6px 7px 12px; cursor: pointer; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; touch-action: none; /* so a press-drag docks the tab instead of scrolling the strip (touch) */ } .ptab:not(.is-active):hover .ptab-label { color: var(--ink); } .ptab.is-active .ptab-label { color: var(--accent); font-weight: 700; } .ptab-caret { color: var(--accent-strong); font-size: 10px; } .ptab-x { flex: none; width: 20px; height: 20px; margin-right: 5px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; } .ptab-x:hover { background: var(--rule); color: var(--ink); } .ptab-new { flex: 0 0 auto; align-self: center; width: 30px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: var(--accent); font-size: 16px; line-height: 1; cursor: pointer; } .ptab-new:hover { background: var(--bg-soft); } /* The ＋ menu: new Source / Notes / Plans / Bookmarks tab. */ .ptab-menu { position: fixed; z-index: 55; min-width: 156px; padding: 5px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 10px 28px var(--shadow); } .ptab-menu[hidden] { display: none; } .ptab-mitem { display: block; width: 100%; text-align: left; font-family: var(--meta); font-size: 14px; color: var(--ink); background: transparent; border: 0; border-radius: 7px; padding: 8px 10px; cursor: pointer; } .ptab-mitem:hover { background: var(--bg-soft); } /* Phase 1: leave mobile as-is — per-pane tabs hidden under the breakpoint; the global mobile pane-switcher still applies. Phase 4 unifies them. */ @media (max-width: 520px) { .pane-tabstrip { display: none; } } /* The pane header (tab strip + toolbar) is the sticky unit — it pins beneath the topbar so BOTH the tabs and the nav controls stay visible while reading, exactly as the old global nav bar did. */ .pane-head { position: sticky; top: 56px; z-index: 19; background: var(--surface); } .pane-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--rule); transition: background-color .25s ease, border-color .25s ease; } .pane-toolbar[hidden] { display: none; } /* a tool panel hides the reading toolbar */ .nav-group { display: flex; align-items: center; gap: 8px; } .pane-nav-main { flex: 1 1 auto; min-width: 0; } .pane-nav-tools { flex: 0 0 auto; } .pane-toolbar select { font: inherit; font-family: var(--meta); font-size: 14px; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; cursor: pointer; } /* The go box — reference / search / topic navigator (replaces Book + Chapter selects). */ .pane-go-wrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; } .pane-go-wrap[hidden] { display: none; } .pane-go { font: inherit; font-family: var(--meta); font-size: 14px; font-weight: 600; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px; width: 100%; min-width: 0; } .pane-go::placeholder { color: var(--muted); font-weight: 400; } .pane-go:focus { outline: none; border-color: var(--accent); background: var(--bg); } .pane-go-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 280px; max-width: min(420px, 80vw); max-height: 60vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 10px 30px var(--shadow); padding: 6px; } .pane-go-pop[hidden] { display: none; } .go-item { display: flex; align-items: baseline; gap: 9px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; border-radius: 8px; padding: 8px 10px; } .go-item:hover, .go-item.is-sel { background: var(--bg-soft); } .go-ico { flex: 0 0 auto; color: var(--accent); font-size: 14px; width: 16px; text-align: center; } .go-label { flex: 1 1 auto; font-family: var(--meta); font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .go-sub { flex: 0 0 auto; font-family: var(--meta); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } /* Context menus (right-click / long-press) */ .ctx-menu { position: fixed; z-index: 100; min-width: 210px; max-width: 340px; max-height: 70vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 12px 36px var(--shadow); padding: 6px; } .ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; border-radius: 8px; padding: 8px 10px; font-family: var(--meta); font-size: 14px; color: var(--ink); } .ctx-item:hover, .ctx-item.is-sel { background: var(--bg-soft); } .ctx-item[disabled] { opacity: .5; cursor: default; } .ctx-item.is-danger { color: #d9534f; } .ctx-ico { flex: 0 0 auto; width: 18px; text-align: center; color: var(--accent); font-size: 14px; } .ctx-item.is-danger .ctx-ico { color: inherit; } .ctx-lbl { flex: 1 1 auto; } .ctx-key { flex: 0 0 auto; font-size: 11px; color: var(--muted); } .ctx-sep { height: 1px; background: var(--rule); margin: 5px 8px; } .ctx-head { padding: 7px 10px 5px; } .ctx-head-t { display: block; font-family: var(--meta); font-weight: 700; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ctx-head-n { display: block; font-size: 11px; color: var(--muted); } .ctx-swatches { display: flex; gap: 7px; padding: 7px 10px; flex-wrap: wrap; } .ctx-sw { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--rule); cursor: pointer; padding: 0; } .ctx-sw:hover { transform: scale(1.12); } .ctx-sw-clear { background: var(--bg-soft); color: var(--muted); font-size: 12px; } /* "About this source" modal */ .srcabout-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.42); display: flex; align-items: center; justify-content: center; padding: 20px; } .srcabout-backdrop[hidden] { display: none; } .srcabout { position: relative; background: var(--bg); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 20px 60px var(--shadow); padding: 28px; max-width: 440px; width: 100%; } .srcabout-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 22px; color: var(--muted); cursor: pointer; line-height: 1; } .srcabout-kind { font-family: var(--meta); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; } .srcabout-title { font-family: var(--serif); font-size: 24px; line-height: 1.2; margin: 0 0 4px; color: var(--ink); } .srcabout-author { font-family: var(--meta); font-size: 14px; color: var(--muted); margin: 0 0 14px; } .srcabout-blurb { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0 0 16px; } .srcabout-meta { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; margin: 0; } .srcabout-meta dt { font-family: var(--meta); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); align-self: baseline; } .srcabout-meta dd { font-family: var(--meta); font-size: 13px; color: var(--ink); margin: 0; } /* Keyboard shortcuts cheatsheet */ .kbdhelp { max-width: 560px; max-height: 82vh; overflow-y: auto; } .kbdhelp-group { margin-top: 16px; } .kbdhelp-group h4 { font-family: var(--meta); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin: 0 0 7px; } .kbdhelp-group dl { display: grid; grid-template-columns: 1fr auto; gap: 5px 16px; margin: 0; align-items: baseline; } .kbdhelp-group dt { font-family: var(--meta); font-size: 14px; color: var(--ink); } .kbdhelp-group dd { margin: 0; text-align: right; white-space: nowrap; } .kbdhelp kbd { font-family: var(--meta); font-size: 12px; background: var(--bg-soft); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; color: var(--ink); } .kbdhelp-unset { color: var(--muted); } .kbdhelp-foot { margin-top: 18px; font-family: var(--sans); font-size: 13px; color: var(--muted); } /* These controls now live in the ⋯ menu (and the pane right-click menu), keeping the toolbar lean. !important so a later split-mode rule can't re-show the link button. */ .pane-toolbar .pane-textsize, .pane-toolbar .pane-bookmark, .pane-toolbar .pane-voice, .pane-toolbar .pane-voice-pop { display: none !important; } /* The link control lives in the ⋯ menu, but keep the coloured group letter (A/B/…) visible when a pane IS linked. */ .pane-toolbar .pane-link:not(.is-linked) { display: none !important; } /* Per-pane focus — hide just THIS pane's tabs + toolbar; a floating Done button (top-right) exits it. */ .pane { position: relative; } .pane.pane-solo-focus .pane-head { display: none; } .pane.pane-solo-focus .pane-content { padding-top: 44px; } .pane-focus-exit { position: absolute; top: 10px; right: 12px; z-index: 30; display: none; align-items: center; gap: 6px; font-family: var(--meta); font-size: 12px; color: var(--muted); background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; cursor: pointer; opacity: .55; transition: opacity .15s ease, border-color .15s ease, color .15s ease; } .pane.pane-solo-focus .pane-focus-exit { display: inline-flex; } .pane-focus-exit:hover { opacity: 1; border-color: var(--accent); color: var(--accent); } /* Suppress the iOS long-press callout popup on verses (drag-select for highlighting still works). */ .pane-content .verse { -webkit-touch-callout: none; } /* Keyboard verse cursor (j/k) — a quiet accent bar on the current verse. */ .verse.kbd-cursor { box-shadow: inset 3px 0 0 var(--accent); border-radius: 4px; background: var(--bg-soft); } .pane-book { font-weight: 600; } .arrow { font-size: 20px; line-height: 1; width: 40px; height: 40px; border: 1px solid var(--rule); background: var(--bg-soft); border-radius: 8px; color: var(--accent); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; } .arrow:hover { background: var(--cream); border-color: var(--accent); } .arrow:disabled { opacity: .4; cursor: default; } /* ---- Empty state (every pane closed) ---- */ .empty-state { flex: 1 1 auto; min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0 auto; padding: 40px 24px; text-align: center; color: var(--muted); } .empty-state svg { color: var(--accent-strong); margin-bottom: 8px; opacity: .9; } .empty-title { font-family: var(--serif); font-size: 22px; color: var(--ink); margin: 0; } .empty-sub { font-family: var(--meta); font-size: 14px; margin: 0 0 16px; } .empty-open { font: inherit; font-family: var(--meta); font-weight: 700; font-size: 14px; color: var(--offwhite); background: var(--accent); border: 0; border-radius: 9px; padding: 10px 18px; cursor: pointer; transition: background-color .2s ease; } .empty-open:hover { background: var(--accent-strong); } /* ---- Today home (the daily entry point, rendered in the empty state) ---- */ .today-home-inner { width: 100%; max-width: 540px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .today-greet { font-family: var(--serif); font-size: 27px; color: var(--ink); margin: 0; } .today-votd { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 7px; } .today-label { font-family: var(--meta); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .today-votd-card { width: 100%; text-align: left; font: inherit; cursor: pointer; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s ease, box-shadow .2s ease; } .today-votd-card:hover { border-color: var(--accent); box-shadow: 0 4px 18px var(--shadow); } .today-votd-text { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--ink); } .today-votd-ref { font-family: var(--meta); font-size: 13px; font-weight: 700; color: var(--accent); } .today-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .today-action { font-family: var(--meta); font-weight: 700; font-size: 14px; cursor: pointer; border: 1px solid var(--rule); border-radius: 10px; padding: 9px 16px; background: var(--surface); color: var(--ink); transition: border-color .2s ease, background-color .2s ease; } .today-action:hover { border-color: var(--accent); } .today-action-primary { background: var(--accent); color: var(--offwhite); border-color: var(--accent); } .today-action-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } .today-streak { font-family: var(--meta); font-size: 13px; color: var(--muted); margin: 2px 0 0; } /* ---- Today banner (slim once-a-day nudge for returning readers) ---- */ .today-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--bg-soft); border-bottom: 1px solid var(--rule); font-family: var(--meta); font-size: 13px; color: var(--muted); } .today-banner[hidden] { display: none; } body.focus-mode .today-banner { display: none; } .tb-greet { font-weight: 700; color: var(--ink); } .tb-votd { font: inherit; font-weight: 700; color: var(--accent); background: none; border: 0; cursor: pointer; padding: 0; } .tb-votd:hover { text-decoration: underline; } .tb-dismiss { margin-left: auto; font-size: 18px; line-height: 1; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 0 4px; } .tb-dismiss:hover { color: var(--ink); } /* A tool panel rendered inside a pane (Notes/Plans/Bookmarks/Library/blank). Reuses the drawer body (.plans-body) styling; cap width for readability in a wide pane, and style the in-body "back" button used by the Plans detail view. */ .panel-body { max-width: 640px; margin-inline: auto; } .plan-back { font: inherit; font-family: var(--meta); font-weight: 600; font-size: 13px; color: var(--accent); background: none; border: 0; padding: 4px 0; margin-bottom: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; } .plan-back:hover { color: var(--accent-strong); } /* Library rendered inside a pane: reuse the window's card grid; the sidebar nav becomes a horizontal chip row so it fits any pane width. */ .libpanel { padding: 12px; max-width: none; } .libpanel-q { width: 100%; box-sizing: border-box; font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 9px; padding: 8px 12px; margin-bottom: 10px; } .libpanel-q:focus { outline: none; border-color: var(--accent); } .libpanel-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .libpanel-nav .libwin-navhdr, .libpanel-nav .libwin-nico { display: none; } .libpanel-nav .libwin-nav { padding: 5px 11px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12.5px; gap: 5px; } .libpanel-nav .libwin-nav.on { border-color: var(--accent); } .libpanel-nav .libwin-nlbl { flex: 0 0 auto; } .libpanel-main .libwin-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } /* ---- Reader ---- */ .pane-content { max-width: var(--maxread); margin: 0 auto; padding: 34px 26px 90px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* No visible scrollbar on a pane — scrolling still works (wheel/touch/keys). */ .pane-content { scrollbar-width: none; } .pane-content::-webkit-scrollbar { width: 0; height: 0; display: none; } .chapter-title { font-family: var(--serif); font-size: calc(30px * var(--read-scale, 1)); font-weight: 600; color: var(--ink); margin: 0 0 22px; letter-spacing: 0; line-height: 1.2; font-variant-numeric: oldstyle-nums; } .verse { font-family: var(--serif); font-size: calc(19.5px * var(--read-scale, 1)); line-height: 1.7; color: var(--ink); margin: 0; padding: 2px 4px; border-radius: 4px; cursor: pointer; font-variant-numeric: oldstyle-nums; } .verse:hover { background: var(--bg-soft); } /* Selected while the notes/highlights sheet is open: the same soft fill as hover. */ .verse.selected:not(.hl) { background: var(--bg-soft); } /* A highlighted verse keeps its highlight color even while selected (the grey selection fill would otherwise mask the color — most visibly when the same verse shows selected in a card and unselected in a grid pane); show the selection as an accent edge instead. */ .verse.selected.hl { box-shadow: inset 3px 0 0 0 var(--accent); } /* Linked panes: hovering a verse in one lights the matching verse in scroll-linked panes. */ .verse.linked-hover { background: var(--bg-soft); } /* Verseless sources (classics: creeds, catechisms, books) render each paragraph as a .verse but have no verse numbers, so the per-verse hover soft fill just makes continuous prose flicker as the cursor moves. Drop it there; tapping still selects (the .selected fill above is unaffected, so highlighting/notes keep their feedback). */ .pane-content.verseless .verse:hover { background: transparent; box-shadow: none; } /* The verse currently being read aloud */ .verse.speaking { box-shadow: inset 3px 0 0 var(--accent-strong); } .hl-yellow { background: #fdeeb0; } .hl-green { background: #cfe9c8; } .hl-blue { background: #cfe0f3; } .hl-pink { background: #f4cfdd; } .hl-orange { background: #f8ddb4; } /* Highlights stay pastel in dark mode, so force readable dark text on them */ :root[data-theme="dark"] .verse.hl { color: #1c2426; } :root[data-theme="dark"] .verse.hl .vnum { color: #8a5a1a; } /* Sub-verse highlights (free cursor-drag): a inside .vtext. The .hl-* class supplies the pastel background; dark ink keeps it readable in light and dark themes. */ .vtext mark.subhl { color: #1c2426; border-radius: 3px; padding: 0 1px; cursor: pointer; } /* The live cursor-drag selection: a translucent tint of the current accent instead of the browser's default blue. (color-mix keeps the text readable; old browsers get the fallback.) */ .pane-content ::selection { background: rgba(228, 154, 76, 0.35); } .pane-content ::-moz-selection { background: rgba(228, 154, 76, 0.35); } .pane-content ::selection { background: color-mix(in srgb, var(--accent-strong) 38%, transparent); } .pane-content ::-moz-selection { background: color-mix(in srgb, var(--accent-strong) 38%, transparent); } /* The inline note card is replaced by a compact pencil marker (.note-pencil) shown at the END of the note's verse range, in both layouts. Card kept (styled) but hidden. */ .verse-note { display: none; } .verse-note-range { font-family: var(--meta); font-weight: 700; font-size: 11px; color: var(--accent-strong); margin-right: 7px; } /* Pencil note-marker: sits just after the last verse a note covers; click to open it. */ .note-pencil { border: 0; background: none; cursor: pointer; padding: 0 1px; margin: 0 1px; color: var(--accent); font-size: .82em; line-height: 1; vertical-align: baseline; font-family: var(--meta); } .note-pencil:hover { color: var(--accent-strong); } /* App-wide styled tooltip (replaces the browser's plain title tooltip everywhere). */ .app-tip { position: fixed; z-index: 9999; max-width: 280px; background: var(--ink); color: var(--bg); font-family: var(--sans); font-size: 13px; line-height: 1.45; padding: 7px 10px; border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, .28); pointer-events: none; white-space: pre-wrap; overflow-wrap: anywhere; } .vnum { /* --accent (not --accent-strong) so verse numbers clear WCAG AA: #a85d18 is 4.43:1 on cream, vs 2.09:1 for the lighter amber. Dark theme keeps the brighter amber (ample contrast there). */ font-family: var(--meta); font-size: 11px; font-weight: 700; color: var(--accent); vertical-align: super; margin-right: 4px; user-select: none; } :root[data-theme="dark"] .vnum { color: var(--accent-strong); } .placeholder, .error { color: var(--muted); font-family: var(--sans); text-align: center; padding: 40px 0; } .error { color: var(--danger); } /* Reading skeleton — a calm pulsing placeholder while a chapter/work loads. */ .reading-skeleton { padding-top: 4px; } .skel-title { height: 28px; width: 36%; border-radius: 6px; margin: 4px 0 24px; } .skel-line { height: 14px; border-radius: 5px; margin: 13px 0; } .skel-gap { height: 16px; } .skel-title, .skel-line { background: var(--bg-soft); animation: skel-pulse 1.4s ease-in-out infinite; } @keyframes skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .skel-title, .skel-line { animation: none; } } /* ---- Full-text search overlay (command-palette style) ---- */ /* ---- Atlas (interactive globe) — full-screen, below the study overlay (80) so a tapped place pops over it ---- */ .atlas-overlay { position: fixed; inset: 0; z-index: 75; background: var(--bg); } .atlas-overlay[hidden] { display: none; } .atlas-stage { position: absolute; inset: 0; } .atlas-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--rule); background: var(--bg-soft); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: var(--shadow); } .atlas-close:hover { border-color: var(--accent); color: var(--accent); } .atlas-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--meta); font-size: 14px; color: var(--muted); pointer-events: none; } /* Church-history figure card (opened from the globe; sits above the atlas at 75) */ .figure-backdrop { position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; padding: 20px; } .figure-card { position: relative; background: var(--bg); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); max-width: 420px; width: 100%; padding: 22px 24px 18px; } .figure-close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; } .figure-close:hover { color: var(--ink); } .figure-kind { font-family: var(--meta); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); } .figure-name { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin: 3px 0 4px; color: var(--ink); } .figure-meta { font-family: var(--meta); font-size: 12.5px; color: var(--muted); margin-bottom: 12px; } .figure-blurb { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0 0 14px; } .figure-read { font-family: var(--meta); font-weight: 700; font-size: 13px; background: var(--accent-strong); border: 1px solid var(--accent-strong); color: #fff; border-radius: 999px; padding: 8px 15px; cursor: pointer; } .figure-read:hover { filter: brightness(1.06); } .figure-foot { font-family: var(--meta); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); margin-top: 14px; padding: 0 4px; } /* ---- Floating study cards (place / person / figure / verse) ---- */ .study-card { position: fixed; z-index: 86; width: 380px; height: min(70vh, 560px); min-width: 250px; min-height: 170px; max-width: 98vw; max-height: 96vh; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; } /* Resize from any edge/corner (custom handles, since CSS `resize` only offers one corner). */ .card-rsz { position: absolute; z-index: 5; touch-action: none; } .card-rsz-n { top: 0; left: 0; right: 0; height: 7px; cursor: ns-resize; } .card-rsz-s { bottom: 0; left: 0; right: 0; height: 7px; cursor: ns-resize; } .card-rsz-e { top: 0; bottom: 0; right: 0; width: 7px; cursor: ew-resize; } .card-rsz-w { top: 0; bottom: 0; left: 0; width: 7px; cursor: ew-resize; } .card-rsz-ne { top: 0; right: 0; width: 15px; height: 15px; cursor: nesw-resize; z-index: 6; } .card-rsz-nw { top: 0; left: 0; width: 15px; height: 15px; cursor: nwse-resize; z-index: 6; } .card-rsz-se { bottom: 0; right: 0; width: 15px; height: 15px; cursor: nwse-resize; z-index: 6; } .card-rsz-sw { bottom: 0; left: 0; width: 15px; height: 15px; cursor: nesw-resize; z-index: 6; } /* ---- Floating panes (unified cards): a real pane that floats over the workspace ---- */ .float-card { position: fixed; z-index: 86; display: flex; flex-direction: column; min-width: 300px; min-height: 220px; max-width: 98vw; max-height: 96vh; background: var(--bg); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; } .float-card.is-active { border-color: var(--accent); } .float-card-bar { flex: none; display: flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px 0 9px; border-bottom: 1px solid var(--rule); background: var(--bg-soft); cursor: move; user-select: none; } .float-card-grip { color: var(--muted); font-size: 12px; letter-spacing: 1px; } .float-card-spacer { flex: 1; } .float-card-dock, .float-card-close { flex: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 26px; height: 24px; border-radius: 6px; line-height: 1; } .float-card-dock { font-size: 14px; } .float-card-close { font-size: 19px; } .float-card-dock:hover { color: var(--accent); background: var(--bg); } .float-card-close:hover { color: var(--ink); background: var(--bg); } .float-card > .pane { flex: 1; min-height: 0; min-width: 0; height: auto; width: auto; display: flex; flex-direction: column; } .float-card .pane-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-width: none; padding: 22px 22px 32px; } .float-card .pane-head { position: static; flex: 0 0 auto; } .float-card .pane-grip { display: none; } /* ---- Docked Study drawer ---- The single home for study output (word / interlinear / cross-refs / tradition / entity studies). Hosts ONE real pane (pane.drawer=true) so it reuses every study renderer + click wiring. Cards are now opt-in only; this is the default surface. */ .study-drawer { position: fixed; top: var(--drawer-top, 56px); right: 0; bottom: 0; width: var(--drawer-w, 380px); display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--rule); box-shadow: -8px 0 26px -16px var(--shadow); z-index: 40; } .study-drawer[hidden] { display: none; } .study-drawer-head { flex: none; position: relative; display: flex; align-items: center; gap: 4px; padding: 7px 8px 7px 12px; border-bottom: 1px solid var(--rule); background: var(--bg-soft); } .study-drawer-find-pop { position: absolute; top: calc(100% + 3px); left: 10px; right: 10px; z-index: 6; max-height: 264px; overflow-y: auto; background: var(--bg); border: 1px solid var(--rule); border-radius: 9px; box-shadow: 0 10px 26px -12px var(--shadow); padding: 4px; } .study-drawer-find-pop[hidden] { display: none; } .dfp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; padding: 7px 9px; border-radius: 6px; cursor: pointer; } .dfp-row:hover, .dfp-row.is-sel { background: var(--bg-soft); } .dfp-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dfp-sub { flex: none; font-family: var(--meta); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } /* STUDY eyebrow = the study panel's drag handle (#4–#6): drag it to move the whole study to the grid or another dock. The dot-grip is hidden on study panels (below); this carries the move affordance. */ .study-drawer-eyebrow { flex: none; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 2px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .study-drawer-eyebrow:hover { color: var(--accent); } body.docking .study-drawer-eyebrow { cursor: grabbing; } /* A study panel relocates via its STUDY eyebrow (and its segment tabs), so the pane-move dot-grip is redundant. */ .pane.is-study-panel .pane-grip { display: none; } .study-drawer-back { flex: none; border: 1px solid var(--rule); background: var(--bg); color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: 999px; white-space: nowrap; } .study-drawer-back:hover { color: var(--accent); border-color: var(--accent); } /* Study-pane chrome — the drawer's search + ‹ Back band, given to grid/card study panes (not the dock), so a popped study is a full study panel. Sits between the pane's tab strip and its content. */ .study-pane-chrome { position: relative; flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--rule); background: var(--bg-soft); } /* position:relative anchors the live find popover; STUDY + ‹ Back + search (From / verse-nav sits below the tabs) */ /* Match the right drawer's bands: the tab strip + the meta row sit on --bg (not the pane's --surface), with the drawer's gap/padding, so a study pane's chrome reads identically to the docked drawer. */ .pane.is-study-panel .pane-tabstrip { background: var(--bg); gap: 5px; padding: 7px 10px; align-items: center; } .study-pane-meta { background: var(--bg); } /* Left dock mirrors the right drawer — STUDY eyebrow on the innermost (right) edge, buttons toward the outer edge. */ .study-dock-left .study-pane-chrome { flex-direction: row-reverse; } /* A study pane carries its own chrome (search + ‹ Back + segments + From/verse-nav), so its native toolbar (text-size + link-scrolling) is redundant — hide it. */ .pane.is-study-panel .pane-toolbar { display: none; } /* The right dock's empty search-launcher shows just the chrome (STUDY + search) + the empty message — hide its vestigial single tab + meta row. */ .pane.is-empty-launcher .pane-tabstrip, .pane.is-empty-launcher .study-pane-meta { display: none; } /* In a study pane, restyle the native tabs as the drawer's segment pills — keeps the grip (move) + × (close). */ .pane.is-study-panel .ptab { border: 1px solid var(--rule); border-radius: 999px; margin-bottom: 0; background: transparent; } .pane.is-study-panel .ptab.is-active { background: var(--bg); border-color: var(--accent); } .pane.is-study-panel .ptab-label { font-family: var(--sans); font-size: 12.5px; padding: 4px 4px 4px 12px; } /* Open Sans + 4px vert pad so the pill is h27, matching the drawer's .drawer-seg (Karla --meta was the old font + h22) */ .pane.is-study-panel .ptab.is-active .ptab-label { color: var(--accent); font-weight: 600; } .pane.is-study-panel .ptab:not(.is-active):hover { border-color: var(--accent); } /* hovering an inactive tab → orange border, as in the right drawer */ .pane.is-study-panel .ptab:not(.is-active):hover .ptab-label { color: var(--ink); } /* :not(.is-active) so an active tab keeps its accent text on hover (was turning it to --ink) */ .study-pane-back { flex: none; border: 1px solid var(--rule); background: var(--bg); color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: 999px; white-space: nowrap; } .study-pane-back:hover { color: var(--accent); border-color: var(--accent); } .study-pane-find { flex: 1; min-width: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 7px; padding: 4px 9px; } .study-pane-find::placeholder { color: var(--muted); font-weight: 400; } .study-pane-find:focus { outline: none; border-color: var(--accent); } /* Live type-ahead popover for a study pane's search (same engine + .dfp-row rows as the drawer's). */ .study-pane-find-pop { position: absolute; top: calc(100% + 3px); left: 10px; right: 10px; z-index: 40; max-height: 264px; overflow-y: auto; background: var(--bg); border: 1px solid var(--rule); border-radius: 9px; box-shadow: 0 10px 26px -12px var(--shadow); padding: 4px; } .study-pane-find-pop[hidden] { display: none; } .study-pane-more { flex: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 26px; height: 24px; border-radius: 6px; line-height: 1; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; } .study-pane-more:hover { color: var(--accent); background: var(--bg); } .study-drawer-find { flex: 1; min-width: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 7px; padding: 4px 9px; } .study-drawer-find::placeholder { color: var(--muted); font-weight: 400; } .study-drawer-find:focus { outline: none; border-color: var(--accent); } .drawer-empty { padding: 30px 8px; text-align: center; color: var(--muted); } .drawer-empty-title { font-family: var(--serif); font-size: 19px; color: var(--ink); margin: 0 0 7px; } .drawer-empty-sub { font-size: 13.5px; line-height: 1.55; margin: 0; } .study-drawer-close, .study-drawer-collapse, .study-drawer-more { flex: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 26px; height: 24px; border-radius: 6px; line-height: 1; } .study-drawer-more { display: inline-flex; align-items: center; justify-content: center; font-size: 17px; } .study-drawer-collapse { font-size: 17px; font-weight: 700; } .study-drawer-close { font-size: 19px; } .study-drawer-more:hover, .study-drawer-collapse:hover { color: var(--accent); background: var(--bg); } .study-drawer-close:hover { color: var(--ink); background: var(--bg); } /* ---- Edge docks (left / bottom): a study pinned to a screen edge, hosting a study pane that reuses the study-pane chrome. The right dock is the original .study-drawer. ---- */ .study-dock { position: fixed; z-index: 40; display: flex; flex-direction: column; background: var(--bg); } .study-dock[hidden] { display: none; } .study-dock-left { top: var(--drawer-top, 56px); left: 0; bottom: 0; width: var(--dock-left-w, 384px); border-right: 1px solid var(--rule); box-shadow: 8px 0 26px -16px var(--shadow); } .study-dock-bottom { left: 0; right: 0; bottom: 0; height: var(--dock-bottom-h, 40vh); z-index: 39; border-top: 1px solid var(--rule); box-shadow: 0 -8px 26px -16px var(--shadow); } .study-dock-right { top: var(--drawer-top, 56px); right: 0; bottom: 0; width: var(--dock-right-w, 384px); border-left: 1px solid var(--rule); box-shadow: -8px 0 26px -16px var(--shadow); } .study-dock-host { flex: 1 1 auto; min-height: 0; display: flex; } .study-dock-host > .pane { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .study-dock-host .pane-head { position: static; flex: 0 0 auto; } .study-dock-host .pane-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-width: none; } /* Resize handle on each dock's inner edge (drag to size), like the right drawer's .study-drawer-grip. No hover highlight — the edge reads via the dock's own box-shadow, same as the right drawer's grip. */ .study-dock-rsz { position: absolute; z-index: 30; } /* above the pane-head (sticky, z-index 19) so the whole strip is grabbable */ .study-dock-left .study-dock-rsz { top: 0; bottom: 0; right: -3px; width: 8px; cursor: ew-resize; } .study-dock-bottom .study-dock-rsz { left: 0; right: 0; top: -3px; height: 8px; cursor: ns-resize; } .study-dock-right .study-dock-rsz { top: 0; bottom: 0; left: -3px; width: 8px; cursor: ew-resize; } body.has-dock-left #columns, body.has-dock-left .appfoot { margin-left: var(--dock-left-w, 384px); } body.has-dock-right #columns, body.has-dock-right .appfoot { margin-right: var(--dock-right-w, 384px); } body.has-dock-bottom #columns, body.has-dock-bottom .appfoot { margin-bottom: var(--dock-bottom-h, 40vh); } /* The bottom dock spans only the reading grid — inset by the left + right docks so all three coexist. */ body.has-dock-left .study-dock-bottom { left: var(--dock-left-w, 384px); } body.has-dock-right .study-dock-bottom { right: var(--dock-right-w, 384px); } /* Collapse a dock to a slim "Study" rail (like the right drawer); click the rail to expand. */ .study-pane-collapse { flex: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 24px; height: 24px; border-radius: 6px; font-size: 17px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .study-pane-collapse:hover { color: var(--accent); background: var(--bg); } .study-dock-bottom .study-pane-collapse { transform: rotate(-90deg); } /* ‹ → points down toward the edge it collapses to */ .study-pane-close { flex: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 24px; height: 24px; border-radius: 6px; font-size: 19px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .study-pane-close:hover { color: var(--ink); background: var(--bg); } .study-dock-rail { display: none; } .study-dock.is-collapsed .study-dock-host, .study-dock.is-collapsed .study-dock-rsz { display: none; } .study-dock.is-collapsed .study-dock-rail { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border: 0; background: var(--bg-soft); color: var(--muted); cursor: pointer; } .study-dock.is-collapsed .study-dock-rail:hover { color: var(--accent); } .study-dock-left .study-dock-rail-label, .study-dock-right .study-dock-rail-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .study-dock-bottom .study-dock-rail-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .study-drawer-segs { flex: none; display: flex; gap: 5px; padding: 7px 10px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; } .study-drawer-segs::-webkit-scrollbar { display: none; } .study-drawer-segs[hidden] { display: none; } .drawer-seg { flex: none; border: 1px solid var(--rule); background: transparent; color: var(--muted); border-radius: 999px; padding: 3px 12px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; max-width: 15em; overflow: hidden; text-overflow: ellipsis; } .drawer-seg:hover { color: var(--ink); border-color: var(--accent); } .drawer-seg.is-active { color: var(--accent); border-color: var(--accent); background: var(--bg); font-weight: 600; } .drawer-seg { display: inline-flex; align-items: center; gap: 4px; } /* hold the label + its × (close) */ .drawer-seg-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-seg-x { flex: none; color: var(--muted); font-size: 14px; line-height: 1; opacity: .55; cursor: pointer; } .drawer-seg-x:hover { opacity: 1; color: var(--ink); } /* Meta row under the segments: which translation the study derives from (+ verse prev/next). */ .study-drawer-meta { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--rule); } .study-drawer-meta[hidden] { display: none; } .drawer-tr { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .drawer-tr-k { text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; } .drawer-tr-select { font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: 2px 6px; cursor: pointer; } .drawer-tr-select:focus { outline: none; border-color: var(--accent); } .drawer-nav { margin-left: auto; display: inline-flex; gap: 4px; } .drawer-nav-btn { border: 1px solid var(--rule); background: var(--bg); color: var(--muted); cursor: pointer; width: 26px; height: 24px; border-radius: 6px; font-size: 15px; line-height: 1; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .drawer-nav-btn:hover { color: var(--accent); border-color: var(--accent); } .study-drawer-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .study-drawer-host { flex: 1 1 auto; min-height: 0; display: flex; } .study-drawer-host > .pane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .study-drawer-host .pane-head { display: none; } /* the drawer owns the header — drop the empty pane toolbar band */ .study-drawer-host .pane-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-width: none; margin: 0; padding: 18px 18px 28px; } .study-drawer-grip { position: absolute; left: -3px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 1; } /* Collapsed → a slim rail on the right edge that keeps its contents; click it to expand. */ .study-drawer-rail { display: none; } .study-drawer.is-collapsed .study-drawer-main, .study-drawer.is-collapsed .study-drawer-grip { display: none; } .study-drawer.is-collapsed .study-drawer-rail { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border: 0; background: var(--bg-soft); color: var(--muted); cursor: pointer; } .study-drawer.is-collapsed .study-drawer-rail:hover { color: var(--accent); } .study-drawer-rail-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } /* Reserve a strip for the docked drawer so the workspace + footer don't slip under it. */ body.has-drawer #columns, body.has-drawer .appfoot { margin-right: var(--drawer-w, 380px); } @media (max-width: 520px) { /* Narrow screens: the drawer becomes a bottom sheet instead of a side strip. */ .study-drawer { top: auto; left: 0; width: auto; height: 74vh; border-left: 0; border-top: 1px solid var(--rule); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 26px -16px var(--shadow); } .study-drawer-grip { display: none; } body.has-drawer #columns, body.has-drawer .appfoot { margin-right: 0; } /* Collapsed on mobile → a slim bar along the bottom edge. */ .study-drawer.is-collapsed { height: 46px; } .study-drawer.is-collapsed .study-drawer-rail-label { writing-mode: horizontal-tb; transform: none; } } .study-card.verse-card { width: 330px; height: min(48vh, 400px); } .study-card-head { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 11px 10px 9px 16px; border-bottom: 1px solid var(--rule); cursor: move; user-select: none; } .study-card-titles { flex: 1; min-width: 0; } .study-card-sub { display: block; font-family: var(--meta); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .study-card-title { display: block; font-family: var(--serif); font-size: 20px; line-height: 1.15; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .study-card-close { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; width: 28px; height: 28px; border-radius: 6px; } .study-card-close:hover { color: var(--ink); background: var(--bg-soft); } .study-card-dock { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; width: 28px; height: 28px; border-radius: 6px; } .study-card-dock:hover { color: var(--accent); background: var(--bg-soft); } .study-card-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 4px 10px; } /* Figure cards have no built-in horizontal padding (the study pane supplies its own), so indent them to match the header/title when shown in a floating card. */ .study-card-body .figure-meta, .study-card-body .figure-blurb, .study-card-body .figure-foot { padding-left: 14px; padding-right: 14px; } .study-card-body .figure-read { margin-left: 14px; } .verse-card-v { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0 14px 10px; } .verse-card-n { font-family: var(--meta); font-size: 11px; font-weight: 700; color: var(--accent); vertical-align: super; margin-right: 5px; } .verse-card-msg { font-family: var(--meta); font-size: 13px; color: var(--muted); padding: 14px; } .verse-card-open { margin: 4px 14px 8px; font-family: var(--meta); font-weight: 700; font-size: 12px; color: var(--accent); background: none; border: 0; cursor: pointer; padding: 4px 0; } .verse-card-open:hover { text-decoration: underline; } /* ---- Study docked in a pane (mode:"study") — reuses the card body styles ---- */ .study-pane { max-width: 640px; margin: 0 auto; padding: 18px 16px 40px; } .study-pane-head { padding: 0 4px 4px; margin-bottom: 6px; } .study-pane-sub { display: block; font-family: var(--meta); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .study-pane-title { display: block; font-family: var(--serif); font-size: 26px; line-height: 1.12; color: var(--ink); margin: 2px 0 0; } .study-pane-body .entity-globe-mount { height: 300px; } /* Study panes honor the pane's text-size control (--read-scale) — scoped to .study-pane so the search overlay and floating verse cards are unaffected. */ .study-pane .study-pane-title { font-size: calc(26px * var(--read-scale, 1)); } .study-pane .study-pane-sub { font-size: calc(11px * var(--read-scale, 1)); } .study-pane .entity-blurb { font-size: calc(15px * var(--read-scale, 1)); } .study-pane .figure-blurb { font-size: calc(16px * var(--read-scale, 1)); } .study-pane .figure-meta { font-size: calc(12.5px * var(--read-scale, 1)); } .study-pane .search-count { font-size: calc(11px * var(--read-scale, 1)); } .study-pane .study-chart-cap { font-size: calc(12px * var(--read-scale, 1)); } .study-pane .sr-ref { font-size: calc(13px * var(--read-scale, 1)); } .study-pane .sr-text { font-size: calc(15px * var(--read-scale, 1)); } /* A study pane shows the reading toolbar minus the reading-only nav: text-size AND the scroll- link control (text-size is otherwise hidden globally at ~281 since it normally lives in the ⋯ menu — re-show it, plus the link button, just here so a study card can link like any pane). */ .pane-toolbar.study-tools .pane-nav-main { display: none; } .pane-toolbar.study-tools .pane-nav-tools > *:not(.pane-textsize):not(.pane-link) { display: none; } .pane-toolbar.study-tools .pane-textsize, .pane-toolbar.study-tools .pane-link { display: inline-flex !important; } /* Pin the control to the right so its popup (anchored right:0) opens inward, not off the card edge. */ .pane-toolbar.study-tools .pane-nav-tools { margin-left: auto; } /* ---- Verse digest — "Cloud of Witnesses" ---- */ .digest-pane .digest-verse { font-family: var(--serif); font-size: calc(16px * var(--read-scale, 1)); line-height: 1.5; color: var(--ink); border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; margin: 0 0 14px; } .digest-open { margin: 0 0 4px; } .digest-open-btn, .digest-read-btn { font-family: var(--meta); font-size: 12px; font-weight: 700; color: var(--accent); background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; cursor: pointer; } .digest-open-btn:hover, .digest-read-btn:hover { background: var(--bg-soft); border-color: var(--accent); } .digest-read-btn { margin-top: 8px; } .digest-section-label { font-family: var(--meta); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; } /* Sub-groups under "What the tradition says": Commentaries vs Other sources. */ .digest-cat { margin-top: 6px; } .digest-cat-label { font-family: var(--meta); font-size: calc(12px * var(--read-scale, 1)); font-weight: 700; color: var(--ink); margin: 14px 0 2px; } .digest-cat:first-of-type .digest-cat-label { margin-top: 4px; } .digest-xref-chips { display: flex; flex-wrap: wrap; gap: 6px; } /* Each source is a collapsed dropdown (all closed by default — entries can be long, so the reader sees a tidy list of voices and opens the ones they want). */ .digest-src { border-top: 1px solid var(--rule); } .digest-src > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 7px; font-family: var(--meta); font-size: calc(13px * var(--read-scale, 1)); font-weight: 700; color: var(--ink); padding: 11px 2px; } .digest-src > summary::-webkit-details-marker { display: none; } .digest-src > summary::before { content: "▸"; flex: 0 0 auto; color: var(--muted); font-size: 9px; align-self: center; transition: transform .15s ease; } .digest-src[open] > summary::before { transform: rotate(90deg); } .digest-src > summary:hover { color: var(--accent); } /* Drive the body off the [open] attribute ourselves (clicking the summary always toggles it), so the collapse is reliable regardless of the engine's native
content-hiding. */ .digest-src:not([open]) > .digest-src-body { display: none; } /* ---- Classic apparatus (lossless ThML ingestion): page numbers, footnote markers, popover ---- */ /* Footnote marker — accent superscript, tappable. */ .vtext .fn-ref { color: var(--accent); cursor: pointer; font-weight: 700; font-size: .68em; vertical-align: super; padding: 0 1px; } .vtext .fn-ref:hover { text-decoration: underline; } /* Original print page number — a faint muted superscript (distinct from the accent footnote marks), so citations can reference the exact page; unobtrusive while reading. */ .vtext .pb::before { content: attr(data-page); font-family: var(--meta); font-size: 9px; color: var(--muted); opacity: .5; vertical-align: super; padding: 0 3px; } .vtext .sc { font-variant: small-caps; } /* Footnote popover. */ .fn-pop { position: fixed; z-index: 120; max-height: 52vh; overflow: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 8px 30px var(--shadow); padding: 11px 13px; font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--ink); } .fn-pop-x { position: absolute; top: 3px; right: 7px; background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; } .fn-pop-body { padding-right: 14px; } .fn-pop-body a.xref { color: var(--accent); cursor: pointer; } /* ---- Copy-citation dialog (MLA / APA / Chicago / Turabian) ---- */ .cite-panel { position: fixed; z-index: 90; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 16px 50px var(--shadow); padding: 18px 20px; } .cite-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .cite-title { font-family: var(--meta); font-size: 16px; font-weight: 700; color: var(--ink); } .cite-sub { font-family: var(--meta); font-size: 12px; color: var(--muted); margin-top: 2px; } .cite-close { background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; } .cite-row { border-top: 1px solid var(--rule); padding: 11px 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start; } .cite-style { grid-column: 1 / -1; font-family: var(--meta); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .cite-text { font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--ink); } .cite-copy { align-self: center; font-family: var(--meta); font-size: 12px; font-weight: 700; color: var(--accent); background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; cursor: pointer; white-space: nowrap; } .cite-copy:hover { background: var(--bg-soft); border-color: var(--accent); } .digest-src-cite { min-width: 0; } .digest-src-title { font-style: italic; font-weight: 600; } .digest-src-yr { color: var(--muted); font-weight: 400; } .digest-src-body { padding: 0 0 12px 16px; } .digest-src-body .comm-para { font-family: var(--serif); font-size: calc(15px * var(--read-scale, 1)); line-height: 1.6; color: var(--ink); margin: 0 0 8px; } .digest-voices-loading, .digest-voices-empty { font-family: var(--meta); font-size: 13px; color: var(--muted); padding: 8px 0; } /* the verse sheet's digest action */ .sheet-digest { margin-top: 4px; } .sheet-digest-btn { width: 100%; text-align: left; font-family: var(--meta); font-size: 13px; font-weight: 700; color: var(--accent); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 12px; cursor: pointer; } .sheet-digest-btn:hover { border-color: var(--accent); } .sheet-digest-ico { margin-right: 4px; } /* the verse sheet's original-language (tap-a-word) action */ .sheet-interlinear { margin-top: 4px; } .sheet-il-btn { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; font-family: var(--meta); font-size: 13px; font-weight: 700; color: var(--accent); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 12px; cursor: pointer; } .sheet-il-btn:hover { border-color: var(--accent); } .sheet-il-ico { font-size: 15px; line-height: 1; opacity: .85; } /* Tap-a-word interlinear card */ .il-loading, .il-empty { font-family: var(--meta); font-size: 13px; color: var(--muted); padding: 8px 0; } .il-words { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .il-word { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 7px 9px; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; text-align: center; } .il-word:hover { border-color: var(--accent); } .il-word.sel { border-color: var(--accent); background: var(--bg-soft); background: color-mix(in srgb, var(--accent) 18%, var(--bg-soft)); } .il-orig { font-family: var(--serif); font-size: calc(19px * var(--read-scale, 1)); line-height: 1.25; color: var(--ink); } .il-translit { font-family: var(--meta); font-size: 11px; font-style: italic; color: var(--muted); } .il-wgloss { font-family: var(--meta); font-size: 11px; color: var(--accent); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .il-detail { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 12px; } /* Edition collation (textual criticism) — variant words marked, never hidden. */ .il-var-mark { font-size: .6em; color: var(--accent); vertical-align: super; margin-left: 1px; } .il-word.il-variant:not(.il-absent) .il-orig { border-bottom: 1px dotted color-mix(in srgb, var(--accent) 65%, transparent); } .il-word.il-absent { opacity: .55; } .il-word.il-absent .il-orig { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); } .il-collation { margin-top: 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg-soft); overflow: hidden; } .il-collation > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; } .il-collation > summary::-webkit-details-marker { display: none; } .il-collation > summary::before { content: "▸"; color: var(--muted); font-size: 9px; align-self: center; transition: transform .15s ease; } .il-collation[open] > summary::before { transform: rotate(90deg); } .il-collation:not([open]) > .coll-body { display: none; } /* "Interlinear & Apparatus" is split into two tabs: the Interlinear view shows the word-by-word (no collation); the Edition Collation & Apparatus view shows only the collation. Words still load for both. */ .il-pane.il-view-apparatus .il-words, .il-pane.il-view-apparatus .il-detail { display: none; } .il-pane.il-view-interlinear .il-collation-host { display: none; } .coll-title { font-family: var(--meta); font-weight: 700; font-size: calc(13px * var(--read-scale, 1)); color: var(--ink); } .coll-sub { font-family: var(--meta); font-size: 12px; color: var(--muted); } .coll-body { padding: 0 12px 12px; } .coll-row { padding: 10px 0; border-top: 1px solid var(--rule); } .coll-text { font-family: var(--serif); font-size: calc(16px * var(--read-scale, 1)); color: var(--ink); line-height: 1.4; } .coll-omitted .coll-text { color: var(--muted); } .coll-eds { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .coll-k { font-family: var(--meta); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .coll-ed { font-family: var(--meta); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--rule); color: var(--muted); } .coll-ed.is-in { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); background: color-mix(in srgb, var(--accent) 10%, transparent); } .coll-ed.is-out { text-decoration: line-through; } .coll-ed.is-active { outline: 2px solid var(--accent); outline-offset: 1px; } .coll-verdict { margin-top: 6px; font-family: var(--meta); font-size: 12px; color: var(--muted); } .coll-note { margin: 12px 0 0; font-family: var(--meta); font-size: 11.5px; line-height: 1.5; color: var(--muted); } /* VarApp manuscript-witness apparatus (complements the edition collation) */ .coll-wit-list { font-family: var(--meta); font-size: calc(13px * var(--read-scale, 1)); color: var(--muted); line-height: 1.55; margin-top: 3px; word-break: break-word; } .coll-wit-list sup { font-size: .72em; } .coll-wit-list em { font-style: italic; color: var(--ink); } /* Recognized sigla carry a hover tooltip (app-wide styled tip via title=) */ .app-sig { cursor: help; color: var(--ink); } .app-sig:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 3px; } /* Collapsible key to the witness sigla */ .varapp-key { margin: 12px 0 0; font-family: var(--meta); font-size: 11.5px; } .varapp-key > summary { cursor: pointer; color: var(--accent); letter-spacing: .02em; list-style: none; } .varapp-key > summary::-webkit-details-marker { display: none; } .varapp-key > summary::before { content: "▸ "; } .varapp-key[open] > summary::before { content: "▾ "; } .varapp-key-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; color: var(--muted); line-height: 1.5; } .varapp-key-list dt { font-weight: 700; color: var(--ink); white-space: nowrap; } .varapp-key-list dd { margin: 0; } .varapp-key-list sup { font-size: .72em; } .coll-witbase { font-family: var(--meta); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--accent); margin-left: 7px; } /* One-click "show the apparatus" affordance, shown in place of the panel when it's turned off */ .il-apparatus-show { display: none; align-items: center; gap: 6px; margin-top: 14px; font: inherit; font-family: var(--meta); font-size: calc(13px * var(--read-scale, 1)); color: var(--accent); background: none; border: 1px dashed var(--rule); border-radius: 8px; padding: 8px 13px; cursor: pointer; } .hide-apparatus .il-apparatus-show { display: inline-flex; } /* shown only when the apparatus panel is turned off */ .il-apparatus-show:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .coll-qk { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; } .coll-qk-cell { display: flex; flex-direction: column; gap: 3px; } .coll-qk-arrow { color: var(--muted); font-size: 14px; } .coll-heb { font-family: var(--serif); font-size: calc(22px * var(--read-scale, 1)); line-height: 1.2; color: var(--muted); } .coll-heb-read { color: var(--ink); } .lex-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; } .lex-lemma { font-family: var(--serif); font-size: calc(26px * var(--read-scale, 1)); line-height: 1.2; color: var(--ink); } .lex-translit { font-family: var(--meta); font-size: 14px; font-style: italic; color: var(--muted); } .lex-strong { font-family: var(--meta); font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; margin-left: auto; } .lex-gloss { font-family: var(--serif); font-size: calc(16px * var(--read-scale, 1)); color: var(--ink); margin: 8px 0 0; } .lex-morph { font-family: var(--meta); font-size: 12px; color: var(--muted); margin: 6px 0 0; } .lex-k { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-right: 4px; } .lex-count { font-family: var(--meta); font-size: 13px; color: var(--ink); margin: 10px 0 0; } .lex-def { font-family: var(--serif); font-size: calc(15px * var(--read-scale, 1)); line-height: 1.6; color: var(--ink); margin: 10px 0 0; } .study-def { margin: 8px 0 12px; padding-bottom: 4px; } .lex-study-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--meta); font-size: 13px; font-weight: 700; color: var(--accent); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 999px; padding: 7px 14px; cursor: pointer; } .lex-study-btn:hover { border-color: var(--accent); background: var(--cream); } /* Stacked lexicon entries: each active lexicon's definition, source-labelled when more than one shows. "full" lexicons render as a
; the body is driven off [open] (the preview webview's native details-collapse misfires), mirroring the digest sources. */ .lex-entry + .lex-entry { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 12px; } .lex-src { font-family: var(--meta); font-size: calc(12px * var(--read-scale, 1)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .lex-src + .lex-def { margin-top: 4px; } .lex-opt-scope { font-family: var(--meta); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border: 1px solid var(--rule); border-radius: 4px; padding: 0 4px; margin-left: 6px; } .lex-en-head { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--accent); } .behind-word { margin: 12px 0 6px; } .behind-word-cap { font-family: var(--meta); font-size: calc(12px * var(--read-scale, 1)); color: var(--muted); margin-bottom: 6px; } .behind-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg-soft); cursor: pointer; text-align: left; } .behind-chip:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-soft)); } /* Interlinear + apparatus display prefs (Settings → Original languages), CSS-driven so toggles are instant. */ .hide-il-translit .il-translit { display: none; } .hide-il-gloss .il-wgloss { display: none; } .hide-apparatus .il-collation { display: none; } .hide-variant-marks .il-var-mark { display: none; } .hide-variant-marks .il-word.il-variant .il-orig { border-bottom: none; } .hide-variant-marks .il-word.il-absent { opacity: 1; } .hide-variant-marks .il-word.il-absent .il-orig { text-decoration: none; } /* Original-language fonts (user-selectable in Settings). Placed after the interlinear / collation / lexicon rules so these lang rules win the specificity tie; applied to every grc/hbo-tagged element. */ [lang="grc"] { font-family: var(--greek-font, "Gentium"), "Gentium", Georgia, serif; } [lang="hbo"] { font-family: var(--hebrew-font, "Ezra SIL"), "Ezra SIL", serif; } details.lex-entry > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; } details.lex-entry > summary::-webkit-details-marker { display: none; } details.lex-entry > summary::before { content: "▸"; flex: 0 0 auto; color: var(--muted); font-size: 9px; transition: transform .15s ease; } details.lex-entry[open] > summary::before { transform: rotate(90deg); } details.lex-entry > summary:hover { color: var(--accent); } details.lex-entry:not([open]) > .lex-entry-body { display: none; } .setting-subhead { font-family: var(--meta); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 0 6px; } .setting-lex-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .setting-lex-row .setting-label { flex: 1 1 auto; } .lex-reorder { display: inline-flex; flex-direction: column; gap: 2px; flex: 0 0 auto; } .lex-move { font-size: 8px; line-height: 1; padding: 2px 5px; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 4px; cursor: pointer; } .lex-move:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); } .lex-move:disabled { opacity: .3; cursor: default; } .search-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .4); display: flex; justify-content: center; align-items: flex-start; padding: 9vh 16px 16px; } .search-overlay[hidden] { display: none; } .search-box { width: 100%; max-width: 640px; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 18px 60px var(--shadow); display: flex; flex-direction: column; max-height: 78vh; overflow: hidden; } .search-input-row { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--rule); } .search-ico { color: var(--muted); flex: 0 0 auto; } .search-input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--serif); font-size: 19px; color: var(--ink); } .search-input::placeholder { color: var(--muted); } .search-study-toggle { flex: 0 0 auto; font-family: var(--meta); font-size: 12px; font-weight: 700; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 7px; padding: 5px 9px; cursor: pointer; white-space: nowrap; } .search-study-toggle:hover { border-color: var(--accent); color: var(--accent); } .search-study-toggle.is-on { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; } .search-tr { flex: 0 0 auto; font-family: var(--meta); font-size: 12px; font-weight: 700; color: var(--accent); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 7px; padding: 4px 6px; cursor: pointer; max-width: 110px; } .search-close { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; width: 30px; height: 30px; } .search-results { overflow-y: auto; padding: 6px; } .search-count { font-family: var(--meta); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; } .search-result { display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; border-radius: 9px; padding: 9px 12px; } .search-result:hover, .search-result.is-sel { background: var(--bg-soft); } .sr-ref { display: block; font-family: var(--meta); font-weight: 700; font-size: 13px; color: var(--accent); margin-bottom: 2px; } .sr-text { font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sr-text mark { background: none; color: var(--accent); font-weight: 700; } .search-go .sr-text { color: var(--muted); -webkit-line-clamp: 1; } .search-topic { box-shadow: inset 2px 0 0 var(--accent); } .search-topic .sr-text { color: var(--muted); -webkit-line-clamp: 1; } .search-hint { font-family: var(--sans); font-size: 14px; color: var(--muted); text-align: center; padding: 30px 18px; line-height: 1.7; } .search-hint-dim { font-size: 13px; opacity: .85; } /* Toast — a brief confirmation pill, centered near the bottom. */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px); z-index: 70; pointer-events: none; max-width: min(90vw, 360px); font-family: var(--meta); font-size: 13.5px; font-weight: 600; background: var(--ink); color: var(--bg); padding: 9px 16px; border-radius: 999px; box-shadow: 0 6px 22px var(--shadow); opacity: 0; transition: opacity .2s ease, transform .2s ease; } .toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---- Footer ---- */ .appfoot { border-top: 1px solid var(--rule); background: var(--footer); } .appfoot p { max-width: var(--maxread); margin: 0 auto; padding: 16px 22px; color: var(--muted); font-size: 13px; text-align: center; font-family: var(--meta); } .appfoot a { color: var(--accent); text-decoration: underline; } .appfoot a:hover { color: var(--accent-strong); } /* ---- Verse action sheet ---- */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(20,24,28,.45); z-index: 50; } .sheet-backdrop[hidden], .sheet[hidden] { display: none; } .sheet { position: fixed; z-index: 51; width: min(560px, calc(100vw - 24px)); background: var(--surface); border-radius: 14px; box-shadow: 0 14px 44px var(--shadow); padding: 12px 16px 16px; } .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; cursor: move; touch-action: none; user-select: none; } .sheet-ref { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--ink); } .sheet-close { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; width: 32px; height: 32px; } .sheet-colors { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--rule); cursor: pointer; padding: 0; } .swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--surface) inset; } .swatch-clear { background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 15px; } .sheet-note-label { display: block; font-size: 12px; color: var(--muted); font-family: var(--sans); margin-bottom: 14px; } .sheet-note { display: block; width: 100%; margin-top: 6px; resize: vertical; min-height: 76px; font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 10px; padding: 10px; } /* Cross-references ("Related passages") inside the verse sheet. */ .sheet-xrefs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .sheet-xrefs[hidden] { display: none; } .sheet-xrefs-label { font-family: var(--meta); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .sheet-xrefs-empty { font-family: var(--meta); font-size: 12px; color: var(--muted); } .sheet-xrefs-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 138px; overflow-y: auto; } .xref-chip { font-family: var(--meta); font-size: 12.5px; font-weight: 600; color: var(--accent); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 11px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .xref-chip:hover { border-color: var(--accent); background: var(--cream); } .sheet-study { margin-top: 10px; } .sheet-study[hidden] { display: none; } .sheet-study-btn { display: flex; align-items: center; gap: 7px; width: 100%; font-family: var(--meta); font-size: 13px; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 12px; cursor: pointer; text-align: left; } .sheet-study-btn:hover { border-color: var(--accent); background: var(--cream); color: var(--accent); } .sheet-study-ico { font-size: 15px; line-height: 1; opacity: .8; } /* Word/phrase study window header (above the concordance list) */ .study-head { display: flex; align-items: baseline; gap: 8px; padding: 2px 2px 10px; flex-wrap: wrap; } .study-kind { font-family: var(--meta); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .study-term { font-family: var(--serif); font-size: 20px; color: var(--ink); } /* Word/phrase study distribution chart */ .study-chart { padding: 6px 10px 10px; } .study-chart-cap { font-family: var(--meta); font-size: 12px; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .study-chart-hint { color: var(--muted); opacity: .8; } .study-back { font-family: var(--meta); font-size: 12px; border: 1px solid var(--rule); background: var(--bg-soft); color: var(--ink); border-radius: 999px; padding: 3px 11px; cursor: pointer; } .study-back:hover { border-color: var(--accent); color: var(--accent); } .study-bars { display: block; width: 100%; height: auto; } .study-bar { fill: var(--accent-strong); cursor: pointer; transition: fill .1s; } .study-bar.is-nt { fill: var(--accent); } .study-bar.is-zero { fill: var(--rule); cursor: default; } .study-bar:not(.is-zero):hover { fill: var(--accent); } .study-bar.is-nt:not(.is-zero):hover { fill: #7d4310; } .study-axis-base, .study-axis-div { stroke: var(--rule); stroke-width: 1; } .study-axis-div { stroke-dasharray: 2 2; } .study-axis-lab { fill: var(--muted); font-family: var(--meta); font-size: 9px; text-anchor: start; } .study-legend { font-family: var(--meta); font-size: 11px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; } .study-legend .study-key { width: 11px; height: 11px; border-radius: 2px; display: inline-block; margin-left: 6px; } .study-legend .study-key:first-child { margin-left: 0; } .study-key.ot { background: var(--accent-strong); } .study-key.nt { background: var(--accent); } .study-tip { position: fixed; z-index: 90; transform: translate(-50%, -100%); pointer-events: none; background: var(--ink); color: var(--bg); font-family: var(--meta); font-size: 12px; padding: 4px 9px; border-radius: 7px; white-space: nowrap; box-shadow: 0 2px 10px var(--shadow); } /* ---- Person & Place studies ---- */ .search-entity { box-shadow: inset 2px 0 0 var(--accent-strong); } .search-entity .sr-text { color: var(--muted); -webkit-line-clamp: 1; } .entity-blurb { font-family: var(--serif); font-size: 15px; color: var(--ink); padding: 2px 12px 0; line-height: 1.5; } .entity-tag { color: var(--muted); font-family: var(--meta); } /* Symbol/emoji glyphs (♀ ♂ ⚖ …): the self-hosted reading fonts don't include these, so without a system symbol-font fallback they render as a "tofu" box. This narrow fallback keeps them visible on every platform (per-glyph fallback leaves surrounding Latin text untouched). Must stay after any rule that also sets font-family on these spans (e.g. .entity-tag) so it wins on combined elements. */ .glyph { font-family: "Segoe UI Symbol", "Segoe UI Emoji", "Apple Symbols", "Apple Color Emoji", "Noto Sans Symbols2", "Noto Sans Symbols", "Noto Color Emoji", sans-serif; } .entity-map { padding: 8px 10px 2px; } .entity-map svg { width: 100%; height: auto; display: block; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 10px; } .entity-map-loading { padding: 14px; font-family: var(--meta); font-size: 12px; color: var(--muted); } .entity-map-cap { font-family: var(--meta); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); margin-top: 4px; text-align: right; } .map-sea { fill: var(--bg-soft); } .map-land { fill: var(--rule); stroke: var(--muted); stroke-width: .6; opacity: .55; } .map-anchor { fill: var(--muted); opacity: .7; } .map-anchor-lab { fill: var(--muted); font-family: var(--meta); font-size: 12px; opacity: .85; } .map-here-halo { fill: var(--accent-strong); opacity: .22; } .map-here { fill: var(--accent-strong); stroke: #fff; stroke-width: 1.2; } .map-here-lab { fill: var(--accent-strong); font-family: var(--meta); font-weight: 700; font-size: 15px; text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 3; } /* Place-study mini-globe (chrome-less locator) */ .entity-globe { padding: 8px 10px 2px; } .entity-globe-mount { position: relative; width: 100%; height: 240px; border-radius: 10px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--rule); } .entity-globe-mount canvas { display: block; } .entity-globe-open { margin-top: 6px; font-family: var(--meta); font-size: 12px; font-weight: 700; color: var(--accent); background: none; border: 0; cursor: pointer; padding: 2px 0; } .entity-globe-open:hover { text-decoration: underline; } .entity-globe-fallback { display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--meta); font-size: 12px; color: var(--muted); } .sheet-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; } .sheet-actions button { font-family: var(--meta); font-weight: 500; font-size: 14px; padding: 9px 16px; border-radius: 999px; cursor: pointer; } .sheet-copy { background: var(--bg-soft); border: 1px solid var(--rule); color: var(--ink); } .sheet-copy:hover { border-color: var(--accent); color: var(--accent); } .sheet-save { background: var(--accent-strong); border: 1px solid var(--accent-strong); color: #fff; } .sheet-save:hover { background: #7d4310; border-color: #7d4310; } /* ---- Plans / Notes drawer (shared chrome) ---- */ .plans-backdrop { position: fixed; inset: 0; background: rgba(20,24,28,.5); z-index: 60; } .plans-backdrop[hidden], .plans-panel[hidden] { display: none; } .plans-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: 420px; max-width: 100%; background: var(--bg); display: flex; flex-direction: column; box-shadow: -12px 0 34px var(--shadow); animation: panel-in .2s ease; } @keyframes panel-in { from { transform: translateX(100%); } to { transform: translateX(0); } } .plans-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: var(--bg-soft); color: var(--ink); border-bottom: 1px solid var(--rule); } .plans-title { flex: 1; font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--ink); } .plans-back, .plans-close { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 22px; line-height: 1; padding: 4px 9px; border-radius: 6px; } .plans-back:hover, .plans-close:hover { background: var(--rule); color: var(--ink); } .plans-body { flex: 1; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; } .plan-active { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; } .plan-active-info { display: flex; flex-direction: column; gap: 2px; } .plan-active-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); font-weight: 700; font-family: var(--meta); } .plan-active strong { font-family: var(--serif); font-size: 17px; color: var(--ink); } .plan-continue { font: inherit; font-family: var(--meta); font-weight: 500; font-size: 14px; background: var(--accent-strong); color: #fff; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; white-space: nowrap; } .plan-continue:hover { background: #7d4310; } .plan-list { display: flex; flex-direction: column; gap: 10px; } .plan-card { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 12px; padding: 14px; cursor: pointer; font: inherit; transition: border-color .2s ease, transform .15s ease; } .plan-card:hover { border-color: var(--accent); transform: translateY(-2px); } .plan-card-main { display: flex; flex-direction: column; gap: 4px; flex: 1; } .plan-name { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--ink); } .plan-desc { font-size: 13px; color: var(--muted); line-height: 1.45; font-family: var(--sans); } .plan-meta { font-size: 12px; color: var(--accent); font-weight: 600; font-family: var(--meta); } .plan-go { font-size: 22px; color: var(--muted); } .plan-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .progress { flex: 1; height: 8px; background: var(--rule); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; background: var(--accent-strong); border-radius: 999px; transition: width .2s; } .plan-detail-actions { margin-bottom: 12px; } .plan-setactive, .plan-leave { font: inherit; font-family: var(--meta); font-weight: 500; font-size: 14px; width: 100%; padding: 10px; border-radius: 999px; cursor: pointer; } .plan-setactive { background: var(--accent-strong); color: #fff; border: 1px solid var(--accent-strong); } .plan-setactive:hover { background: #7d4310; border-color: #7d4310; } .plan-leave { background: var(--bg-soft); color: var(--danger); border: 1px solid var(--rule); } .plan-leave:hover { border-color: var(--danger); } .day-list { display: flex; flex-direction: column; } .day-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--rule); } .day-check { flex: none; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; border: 2px solid var(--rule); background: var(--surface); position: relative; } .day-row.done .day-check { background: var(--accent-strong); border-color: var(--accent-strong); } .day-row.done .day-check::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .day-cell { flex: 1; display: flex; align-items: baseline; gap: 10px; text-align: left; padding: 11px 4px; } .day-num { font-size: 12px; font-weight: 700; color: var(--muted); width: 52px; flex: none; font-family: var(--meta); } .day-refs { display: flex; flex-wrap: wrap; gap: 4px 14px; } .day-seg { font-family: var(--serif); font-size: 16px; color: var(--ink); background: transparent; border: 0; padding: 0; cursor: pointer; } .day-seg:hover { color: var(--accent); text-decoration: underline; } .day-row.done .day-seg { color: var(--muted); } /* ---- Highlights & notes drawer ---- */ .note-list { display: flex; flex-direction: column; gap: 10px; } .note-card { display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; transition: border-color .2s ease, transform .15s ease; } .note-card:hover { border-color: var(--accent); transform: translateY(-2px); } .note-head { display: flex; align-items: center; gap: 8px; } .note-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid var(--rule); } .note-ref { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--ink); } .note-text { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--muted); white-space: pre-wrap; word-break: break-word; } .notes-empty { color: var(--muted); font-size: 14px; line-height: 1.6; text-align: center; padding: 48px 16px; font-family: var(--sans); } /* Standalone (free-form) notes: a composer button + editable cards. */ .notes-new { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; font-family: var(--meta); font-weight: 600; font-size: 14px; color: #fff; background: var(--accent-strong); border: 0; border-radius: 999px; padding: 10px; cursor: pointer; margin-bottom: 14px; } .notes-new:hover { background: #7d4310; } .notes-new span { font-size: 16px; line-height: 1; } /* Standalone notes: a list of cards (tap to open) + a word-processor editor. */ .snote-row { position: relative; } .snote-card { padding-right: 40px; } /* room for the delete × */ .snote-del { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px; z-index: 1; } .snote-del:hover { background: var(--rule); color: var(--danger); } /* ---- Full-pane note editor (Word/Docs-style: toolbar + page, nothing else) ---- */ .note-editor { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* Make the editor fill its surface: a docked Notes pane (.pane-content becomes a flex column) or the drawer body in edit mode. Otherwise it falls back to a tall block. */ .pane-content.has-note-editor { display: flex; flex-direction: column; overflow: hidden; padding: 0; margin: 0; max-width: none; } .pane-content.has-note-editor > .panel-editor { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .plans-body.is-editing { padding: 0; overflow: hidden; display: flex; flex-direction: column; } /* A single, non-split notes-editor pane gets the same full-height shell as split mode so the editor fills the screen instead of collapsing to its content height. */ body.solo-editor { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } body.solo-editor .topbar { position: static; flex: 0 0 auto; } body.solo-editor #planbar { flex: 0 0 auto; } body.solo-editor .appfoot { display: none; } body.solo-editor #columns { flex: 1 1 auto; min-height: 0; align-items: stretch; overflow: hidden; max-width: none; padding: 0; } body.solo-editor .pane { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; } body.solo-editor .pane-head { position: static; flex: 0 0 auto; } body.solo-editor .pane-content { flex: 1 1 auto; min-height: 0; } .note-toolbar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; background: var(--surface); border-bottom: 1px solid var(--rule); } .note-tool { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; font-family: var(--sans); font-size: 14px; line-height: 1; } .note-tool:hover { background: var(--bg-soft); } .note-tool:active { background: var(--cream); } .note-back { font-size: 20px; color: var(--muted); } .nt-b { font-weight: 800; } .nt-i { font-style: italic; font-family: var(--serif); } .nt-u { text-decoration: underline; } .nt-s { text-decoration: line-through; } .nt-blk { font-family: var(--meta); font-weight: 700; font-size: 12px; } .nt-fn { font-family: var(--meta); font-weight: 700; font-size: 11px; } .nt-del { color: var(--danger); } .note-tool-sep { width: 1px; height: 20px; background: var(--rule); margin: 0 4px; flex: none; } .note-tool-spacer { flex: 1 1 auto; } .note-page-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--bg-soft); } .note-page { max-width: 740px; margin: 0 auto; min-height: 100%; box-sizing: border-box; padding: 28px clamp(16px, 5%, 56px) 96px; background: var(--surface); } .note-title-input { width: 100%; box-sizing: border-box; font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--ink); background: transparent; border: 0; padding: 0 0 8px; outline: none; } .note-title-input::placeholder { color: var(--muted); opacity: .5; } .note-edit-body { font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--ink); outline: none; word-break: break-word; min-height: 40vh; } .note-edit-body:empty::before { content: attr(data-placeholder); color: var(--muted); } .note-edit-body h1 { font-family: var(--serif); font-size: 24px; margin: 18px 0 8px; } .note-edit-body h2 { font-family: var(--serif); font-size: 20px; margin: 16px 0 6px; } .note-edit-body h3 { font-family: var(--serif); font-size: 17px; margin: 14px 0 6px; } .note-edit-body p { margin: 0 0 10px; } .note-edit-body ul, .note-edit-body ol { margin: 8px 0; padding-left: 26px; } .note-edit-body li { margin: 3px 0; } .note-edit-body blockquote { margin: 10px 0; padding: 4px 14px; border-left: 3px solid var(--accent); color: var(--muted); font-style: italic; } .note-edit-body a { color: var(--accent-strong); text-decoration: underline; } .note-edit-body sup.fn-ref { color: var(--accent-strong); font-weight: 700; cursor: default; } .note-footnotes { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--rule); } .note-fn-title { font-family: var(--meta); font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; } .note-footnotes ol { margin: 0; padding-left: 22px; } .note-footnotes li { font-size: 14px; line-height: 1.55; color: var(--ink); margin: 4px 0; } .note-status { flex: 0 0 auto; padding: 6px 14px; border-top: 1px solid var(--rule); background: var(--surface); text-align: right; } .note-wc { font-family: var(--meta); font-size: 12px; color: var(--muted); } /* Print a single note: hide the app, show only .note-print (covers Save-as-PDF). */ .note-print { display: none; } @media print { body.printing-note > *:not(.note-print) { display: none !important; } body.printing-note .note-print { display: block !important; } .note-print { font-family: Georgia, "Times New Roman", serif; color: #1a1a1a; max-width: 680px; margin: 0 auto; } .note-print h1 { font-size: 22pt; margin: 0 0 12pt; } .note-print h2 { font-size: 16pt; } .note-print h3 { font-size: 13pt; } .note-print .note-print-body { font-size: 12pt; line-height: 1.55; } .note-print ul, .note-print ol { padding-left: 24pt; } .note-print blockquote { border-left: 2pt solid #999; padding-left: 10pt; font-style: italic; } .note-print sup.fn-ref { font-size: 8pt; } .note-print .note-footnotes { margin-top: 18pt; padding-top: 8pt; border-top: 1pt solid #999; font-size: 10pt; } .note-print .note-fn-title { font-size: 9pt; text-transform: uppercase; letter-spacing: .05em; } } /* ---- Saved-workspaces drawer ---- */ .wf-compose { display: flex; gap: 8px; margin-bottom: 16px; } .wf-name-input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 12px; } .wf-name-input:focus { outline: none; border-color: var(--accent); } .wf-save { flex: 0 0 auto; font-family: var(--meta); font-weight: 600; font-size: 13px; color: #fff; background: var(--accent-strong); border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; white-space: nowrap; } .wf-save:hover { background: #7d4310; } .wf-card { display: flex; align-items: stretch; gap: 6px; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 12px; padding: 4px; transition: border-color .2s ease, transform .15s ease; } .wf-card:hover { border-color: var(--accent); transform: translateY(-2px); } .wf-open { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 10px; } .wf-name { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--ink); } .wf-summary { font-family: var(--meta); font-size: 12.5px; color: var(--accent); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wf-del { flex: 0 0 auto; width: 34px; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px; } .wf-del:hover { background: var(--rule); color: var(--danger); } /* With four labeled drawer buttons (Plans/Notes/Bookmarks/Workspaces), drop the labels below a wide-desktop width so the header never crowds; icons remain. */ @media (max-width: 900px) { .plans-btn .plans-label { display: none; } } /* "Bible Software" subtitle only when there's comfortable room beside the actions (desktop). Below this it would crowd the buttons or wrap to two lines, so show just the wordmark. */ @media (max-width: 1024px) { .brand-bible { display: none; } } /* Flash a verse when jumped to from notes */ @keyframes verse-flash { 0% { box-shadow: inset 0 0 0 9999px rgba(228,154,76,.28); } 100% { box-shadow: inset 0 0 0 9999px rgba(228,154,76,0); } } .verse.flash, .work-vref.flash { animation: verse-flash 1.2s ease-out; } @media (max-width: 520px) { .verse { font-size: 18px; } .pane-content { padding: 22px 16px 80px; } .plans-panel { width: 100%; } .plans-btn .plans-label { display: none; } .brand-text { font-size: 1.35rem; } /* The compact app actions fit beside the brand now; the per-pane toolbar (not the brand) is the sticky bar while reading. The toolbar's controls wrap to a second row on narrow screens, with the book + translation selects flexing. */ .topbar { position: static; } /* Brand keeps its content width (logo + wordmark) so it never collapses and lets the action buttons overlap it. The actions take the remaining width and wrap to a second row rather than running off the right edge (9 icon buttons never fit one phone row). */ .brand-wrap { flex: 0 0 auto; } .top-actions { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; } .pane-head { top: 0; } .pane-toolbar { padding: 10px 12px; flex-wrap: wrap; row-gap: 10px; } .pane-nav-main { flex: 1 1 100%; min-width: 0; } .pane-nav-tools { flex: 1 1 100%; justify-content: flex-end; } .pane-toolbar select { min-width: 0; } .pane-book { flex: 1 1 auto; min-width: 0; } .pane-source { flex: 1 1 auto; min-width: 0; max-width: none; } } /* ---- Library & the classics ---- */ /* Unified per-pane source picker (every translation + the classics in one menu). Full labels show in a single pane; capped + ellipsised once split. */ .pane-source { font-weight: 600; max-width: 260px; text-overflow: ellipsis; } /* Pill that returns to the classic you jumped out of via a cross-reference. */ .return-pill[hidden] { display: none; } .return-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--accent-strong); background: transparent; color: var(--accent); font-family: var(--meta); font-size: 13px; font-weight: 500; cursor: pointer; max-width: 220px; white-space: nowrap; } .return-pill .return-label { overflow: hidden; text-overflow: ellipsis; } .return-pill:hover { background: var(--bg-soft); border-color: var(--accent); } /* Classic reading view */ .work-byline { font-family: var(--meta); color: var(--muted); font-size: calc(14px * var(--read-scale, 1)); margin: -10px 0 26px; } .section-title { font-family: var(--serif); color: var(--ink); font-size: calc(1.2rem * var(--read-scale, 1)); font-weight: 600; margin: 0 0 16px; } /* Commentary passage anchor (e.g. "John 3:1-6") — a quiet accent sub-heading. */ .work-vref { font-family: var(--meta); font-weight: 700; letter-spacing: .02em; font-size: calc(14px * var(--read-scale, 1)); color: var(--accent-strong); margin: 26px 0 8px; scroll-margin-top: 8px; } .work-source { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--meta); font-size: 12.5px; line-height: 1.5; } /* Commentary prose: reading paragraphs under each verse's .work-vref anchor. Read-only (no per-verse soft fill or selection), so it doesn't reuse .verse. */ .comm-para { font-family: var(--serif); font-size: calc(18px * var(--read-scale, 1)); line-height: 1.7; color: var(--ink); margin: 0 0 12px; padding: 0 4px; text-indent: 1.4em; font-variant-numeric: oldstyle-nums; } .comm-para:first-of-type, .work-vref + .comm-para { text-indent: 0; } .comm-para.speaking { background: var(--bg-soft); border-radius: 4px; } .comm-intro { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); } .comm-intro > summary { cursor: pointer; font-family: var(--meta); font-size: calc(13.5px * var(--read-scale, 1)); font-weight: 700; color: var(--accent-strong); letter-spacing: .02em; } .comm-intro[open] > summary { margin-bottom: 10px; } .comm-intro .comm-para { font-size: calc(16px * var(--read-scale, 1)); } /* Scripture cross-references inside classic text */ .xref { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); } .xref:hover { color: var(--accent-strong); border-bottom-style: solid; } .xlink { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); cursor: pointer; } .xlink:hover { color: var(--accent-strong); border-bottom-style: solid; } /* Group headings inside the Library and Notes drawers */ .lib-group, .notes-group { font-family: var(--meta); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 700; color: var(--muted); margin: 20px 6px 8px; } @media (max-width: 520px) { .return-pill { max-width: 140px; } .pane-section { flex: 1 1 auto; min-width: 0; max-width: 52vw; } } /* ---- Account button + drawer ---- */ /* Reuses .theme-toggle sizing; when signed in, shows an amber initial badge. */ .account-btn.signed-in { background: var(--accent-strong); border-color: var(--accent-strong); } .account-initial { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--meta); font-weight: 700; font-size: 14px; color: #fff; } .account-pane { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; } .account-lead { font-family: var(--serif); font-size: 17px; line-height: 1.45; color: var(--ink); margin: 0; } .account-note { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; } .account-field { display: block; margin-top: 4px; } .account-input { width: 100%; box-sizing: border-box; font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 10px; padding: 11px 13px; } .account-input:focus { outline: none; border-color: var(--accent); } .account-btn-primary, .account-btn-secondary, .account-btn-danger { width: 100%; box-sizing: border-box; margin: 0; } .account-btn-danger { font-family: var(--meta); font-size: 13px; font-weight: 500; background: transparent; border: 0; color: var(--danger); padding: 10px; cursor: pointer; border-radius: 999px; margin-top: 4px; } .account-btn-danger:hover { text-decoration: underline; } .account-status { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--muted); margin: 2px 0 0; } .account-status.is-error { color: var(--danger); } .account-fine { font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--muted); margin: 6px 0 0; } .account-fine a { color: var(--accent); } /* ---- Reading-plan bottom bar ---- */ /* Appears while reading a plan day: one-tap chips for the day's readings (current = filled, already-read = dimmed), plus auto-complete + next-day. */ .planbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--bg-soft); border-top: 1px solid var(--rule); box-shadow: 0 -2px 14px var(--shadow); } .planbar[hidden] { display: none; } .planbar-day { flex: 0 0 auto; font-family: var(--meta); font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; } .planbar-segs { display: flex; gap: 8px; overflow-x: auto; flex: 1 1 auto; scrollbar-width: thin; } .planbar-seg { flex: 0 0 auto; font-family: var(--meta); font-size: 13px; font-weight: 500; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .planbar-seg:hover { border-color: var(--accent); color: var(--accent); } .planbar-seg.is-read:not(.is-current) { color: var(--muted); } .planbar-seg.is-current { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; } .planbar-next { flex: 0 0 auto; font-family: var(--meta); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 0; background: var(--accent-strong); color: #fff; cursor: pointer; white-space: nowrap; } .planbar-next:hover { background: #7d4310; } .planbar-done { flex: 0 0 auto; font-family: var(--meta); font-size: 12.5px; font-weight: 700; color: var(--accent); white-space: nowrap; } .planbar-exit { flex: 0 0 auto; background: transparent; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; } .planbar-exit:hover { color: var(--ink); } /* Keep the last verses clear of the fixed bar while a plan is open. */ body.plan-reading .pane-content { padding-bottom: 104px; } /* ---- Text-size control + read-aloud button ---- */ .textsize { position: relative; display: inline-flex; } .textsize-ico { font-family: var(--serif); font-weight: 700; font-size: 15px; line-height: 1; } .textsize-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 8px 24px var(--shadow); padding: 8px 10px; white-space: nowrap; } .textsize-pop[hidden] { display: none; } .textsize-step { font-family: var(--meta); font-weight: 700; font-size: 15px; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 8px; width: 38px; height: 34px; cursor: pointer; } .textsize-step:hover { border-color: var(--accent); color: var(--accent); } .textsize-label { font-family: var(--meta); font-size: 13px; color: var(--muted); min-width: 44px; text-align: center; } .listen-btn[hidden] { display: none; } .listen-btn .icon-listen { display: block; } .listen-btn .icon-stop { display: none; } .listen-btn.is-playing .icon-listen { display: none; } .listen-btn.is-playing .icon-stop { display: block; } .listen-btn.is-playing { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; } /* Listen control = play/stop button + a voice-picker caret + its popover. */ .pane-listen-wrap { position: relative; display: inline-flex; align-items: center; gap: 2px; } .listen-voice-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 34px; padding: 0; cursor: pointer; background: none; border: none; color: var(--muted); font-size: 11px; line-height: 1; border-radius: 6px; } .listen-voice-btn:hover { color: var(--accent); background: var(--bg-soft); } .listen-voice-btn[hidden] { display: none; } .voice-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; display: flex; flex-direction: column; min-width: 232px; padding: 6px; background: var(--bg); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 8px 24px var(--shadow); } .voice-pop[hidden] { display: none; } .voice-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; text-align: left; cursor: pointer; background: none; border: none; border-radius: 8px; color: var(--ink); } .voice-opt:hover { background: var(--bg-soft); } .voice-check { flex: 0 0 14px; width: 14px; color: var(--accent); opacity: 0; font-size: 13px; } .voice-opt.is-active .voice-check { opacity: 1; } .voice-opt.is-active .voice-name { color: var(--accent); font-weight: 600; } .voice-text { display: flex; flex-direction: column; line-height: 1.25; } .voice-name { font-family: var(--meta); font-size: 14px; } .voice-meta { font-family: var(--meta); font-size: 11.5px; color: var(--muted); } /* =========================================================================== Split workspace (Phase 2) — 2–3 resizable columns on desktop, swipeable tabs on phones. A single pane keeps the one-reader layout above; these rules engage only once a second pane is added (body.split). =========================================================================== */ /* Draggable divider between columns (desktop split only). */ .divider { flex: 0 0 10px; align-self: stretch; cursor: col-resize; background: transparent; position: relative; touch-action: none; } .divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: var(--rule); } .divider:hover::before, .divider:active::before { width: 3px; background: var(--accent); } /* Horizontal divider — between stacked panes in a column split (Phase 3). */ .divider-h { cursor: row-resize; } .divider-h::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; transform: translateY(-50%); } .divider-h:hover::before, .divider-h:active::before { height: 3px; width: auto; background: var(--accent); } /* A nested split container — a row or column subdivision of the docking grid. */ .split { display: flex; min-width: 0; min-height: 0; align-self: stretch; } /* Drag-and-snap docking: the cursor ghost + the drop-zone preview overlay. */ .dock-ghost { position: fixed; z-index: 60; pointer-events: none; white-space: nowrap; font-family: var(--meta); font-size: 13px; font-weight: 700; color: var(--accent); background: var(--surface); border: 1px solid var(--accent-strong); border-radius: 8px; padding: 5px 11px; box-shadow: 0 6px 22px var(--shadow); } .dock-overlay { position: fixed; z-index: 55; pointer-events: none; } .dock-hi { position: absolute; box-sizing: border-box; border-radius: 7px; background: rgba(228, 154, 76, 0.25); border: 2px solid var(--accent-strong); transition: left .07s ease, top .07s ease, width .07s ease, height .07s ease; } body.docking, body.docking * { cursor: grabbing !important; } body.docking { user-select: none; -webkit-user-select: none; } .ptab-dragging { opacity: .4; } /* The floating miniature you "hold" while dragging a tab/pane — an iOS-app-style lifted chip that follows the cursor with a gentle wobble. */ .dock-mini { position: fixed; z-index: 70; pointer-events: none; min-width: 120px; max-width: 240px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--accent-strong); border-radius: 12px; box-shadow: 0 16px 42px rgba(0, 0, 0, .38); opacity: 0; transition: opacity .14s ease; transform-origin: top left; animation: dock-mini-wobble 1.3s ease-in-out infinite; } .dock-mini.is-on { opacity: 1; } .dock-mini-title { font-family: var(--meta); font-weight: 700; font-size: 13px; color: var(--ink); white-space: nowrap; } @keyframes dock-mini-wobble { 0%, 100% { transform: scale(1.05) rotate(-1.8deg); } 50% { transform: scale(1.05) rotate(1.8deg); } } @media (prefers-reduced-motion: reduce) { .dock-mini { animation: none; transform: scale(1.04); } } /* =========================================================================== Welcome guide — first-run modal + reopenable from the header "?". =========================================================================== */ .guide-backdrop { position: fixed; inset: 0; background: rgba(20, 24, 28, .55); z-index: 80; } .guide-backdrop[hidden], .guide-modal[hidden] { display: none; } .guide-modal { position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(680px, calc(100vw - 28px)); max-height: min(88vh, 780px); overflow-y: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 26px 80px rgba(0, 0, 0, .45); } .guide-modal::-webkit-scrollbar { width: 0; } .guide-head { position: relative; padding: 26px 30px 16px; border-bottom: 1px solid var(--rule); } .guide-greeting { font-family: var(--serif); font-size: 23px; font-weight: 700; color: var(--ink); margin: 0 0 7px; } .guide-sub { font-family: var(--meta); font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; } .guide-sub strong { color: var(--ink); } .guide-close { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; } .guide-close:hover { background: var(--bg-soft); color: var(--ink); } .guide-body { padding: 14px 30px 26px; } .guide-section-label { font-family: var(--meta); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-strong); margin: 18px 0 11px; } .guide-starters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .guide-starter { text-align: left; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: border-color .12s ease, transform .12s ease; } .guide-starter:hover { border-color: var(--accent); transform: translateY(-1px); } .guide-starter strong { display: block; font-family: var(--meta); font-size: 14px; color: var(--ink); margin-bottom: 3px; } .guide-starter span { font-family: var(--meta); font-size: 12.5px; color: var(--muted); line-height: 1.45; } .guide-about-link { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; } /* About modal content */ .about-para { font-family: var(--meta); font-size: 13.5px; line-height: 1.6; color: var(--ink); margin: 0 0 6px; } .about-sources { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .about-sources li { font-family: var(--meta); font-size: 13px; line-height: 1.55; color: var(--muted); } .about-sources li strong { color: var(--ink); } .about-sources a { color: var(--accent); } .guide-feature { display: flex; gap: 13px; padding: 9px 0; } .guide-feature svg { flex: 0 0 auto; color: var(--accent-strong); margin-top: 2px; } .guide-feature-text strong { display: block; font-family: var(--meta); font-size: 14px; color: var(--ink); } .guide-feature-text p { margin: 2px 0 0; font-family: var(--meta); font-size: 13px; color: var(--muted); line-height: 1.5; } .guide-support { margin-top: 20px; padding: 16px 18px; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 12px; } .guide-support p { margin: 0 0 12px; font-family: var(--meta); font-size: 13.5px; color: var(--ink); line-height: 1.55; } .guide-support-btn { display: inline-block; font-family: var(--meta); font-weight: 700; font-size: 13.5px; text-decoration: none; background: var(--accent-strong); color: #fff; border-radius: 9px; padding: 9px 16px; } .guide-support-btn:hover { filter: brightness(1.06); } .guide-cta { margin-top: 20px; text-align: center; } .guide-start { font-family: var(--meta); font-weight: 700; font-size: 14px; cursor: pointer; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 9px; padding: 9px 22px; } .guide-start:hover { background: var(--bg-soft); } .guide-foot { margin: 14px 0 0; text-align: center; font-family: var(--meta); font-size: 12px; color: var(--muted); } @media (max-width: 520px) { .guide-starters { grid-template-columns: 1fr; } .guide-head { padding: 22px 20px 14px; } .guide-body { padding: 12px 20px 22px; } } /* ---- Focus mode: hide all chrome, leave only the reading text ---- */ body.focus-mode .topbar, body.focus-mode #paneTabs, body.focus-mode .pane-tabstrip, body.focus-mode .pane-toolbar { display: none; } body.focus-mode .pane-head { border: 0; box-shadow: none; } body.focus-mode .pane-content { padding-top: 56px; } /* breathing room where the chrome was */ #focusExit { position: fixed; top: 10px; right: 14px; z-index: 80; display: none; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: var(--surface); color: var(--muted); border: 1px solid var(--rule); box-shadow: 0 4px 16px var(--shadow); font-family: var(--meta); font-size: 13px; font-weight: 700; cursor: pointer; opacity: .35; transition: opacity .2s ease, color .2s ease, border-color .2s ease; } body.focus-mode #focusExit { display: inline-flex; } #focusExit:hover, #focusExit:focus-visible { opacity: 1; color: var(--ink); border-color: var(--accent); outline: none; } #focusExit svg { stroke: currentColor; } /* Active-pane indicator: an accent line just below that pane's toolbar (at the top of its content), so the pane you're hovering — which keyboard shortcuts / the verse sheet target — is clear. On .pane-content (not .pane-head) so the toolbar's own background can't cover it; inset so it doesn't shift layout as the active pane follows the cursor. */ body.split .pane.is-active .pane-content { box-shadow: inset 0 3px 0 var(--accent); } /* Full-height shell while split: each column scrolls on its own, the window does not. (Single-pane mode keeps normal page scroll, unchanged.) */ /* The same full-height shell applies when a study panel is docked in the grid (body.study-paned), so a single reading pane + the study column scroll on their own instead of the window. */ body.split, body.study-paned { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } body.split .topbar, body.study-paned .topbar { position: static; flex: 0 0 auto; } body.split #paneTabs, body.study-paned #paneTabs { flex: 0 0 auto; } /* Stretch overrides the single-pane align-items:flex-start so each column fills the shell height and its .pane-content (not the window) is what scrolls. */ body.split #columns, body.study-paned #columns { flex: 1 1 auto; min-height: 0; align-items: stretch; overflow: hidden; } body.split .appfoot, body.study-paned .appfoot { display: none; } body.split .pane, body.study-paned .pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; } body.split .pane-content, body.study-paned .pane-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-width: none; } /* In a column the header is a fixed band at the top; the content scrolls under it. */ body.split .pane-head, body.study-paned .pane-head { position: static; flex: 0 0 auto; } /* Desktop split columns: the toolbar WRAPS instead of crushing its controls to a few unreadable pixels. On the widest 2-pane layout everything fits on one row; as the column narrows the tools (then the selects) drop to a following row, each keeping a legible minimum width. Mobile uses its own rules below. */ @media (min-width: 521px) { /* The toolbar uses the fewest rows it can: each group keeps its natural width, and the tools wrap to a second row only when they genuinely won't fit beside the nav. So 1–3 wide panes sit on one row, 4 narrow panes fall to two, and nothing is ever crushed — it follows the real content + available width. */ body.split .pane-toolbar { flex-wrap: wrap; row-gap: 8px; } body.split .pane-nav-main { flex: 0 0 auto; min-width: 0; flex-wrap: nowrap; } body.split .pane-nav-tools { flex: 0 0 auto; margin-left: auto; } body.split .pane-book { flex: 0 0 auto; min-width: 0; } body.split .pane-chapter { flex: 0 0 auto; min-width: 0; } body.split .pane-section { flex: 0 0 auto; min-width: 0; } } /* Mobile: one visible pane + a horizontal tab strip. */ .pane-tabs, .pane-tabs[hidden] { display: none; } .pane.is-collapsed { display: none !important; } @media (max-width: 520px) { body.split .pane-tabs:not([hidden]) { display: flex; align-items: stretch; gap: 6px; padding: 6px 8px; background: var(--bg-soft); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: thin; } .pane-tab { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 4px 2px 12px; max-width: 62vw; } .pane-tab.is-active { border-color: var(--accent-strong); background: var(--cream); } .pane-tab-label { font-family: var(--meta); font-size: 13px; font-weight: 600; color: var(--ink); background: transparent; border: 0; padding: 6px 2px; cursor: pointer; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pane-tab.is-active .pane-tab-label { color: var(--accent); } .pane-tab-close { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; } .pane-tab-close:hover { background: var(--rule); color: var(--ink); } .pane-tab-add { flex: 0 0 auto; width: 36px; border-radius: 999px; border: 1px dashed var(--rule); background: transparent; color: var(--accent); font-size: 18px; line-height: 1; cursor: pointer; } } /* =========================================================================== Library window — large, draggable, resizable source browser (sidebar + grid) =========================================================================== */ .libwin-backdrop { position: fixed; inset: 0; background: rgba(20,24,28,.5); z-index: 70; } .libwin-backdrop[hidden], .libwin[hidden] { display: none; } .libwin { position: fixed; z-index: 71; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 18px 50px var(--shadow); overflow: hidden; } .libwin-bar { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 10px 14px; background: var(--bg-soft); border-bottom: 1px solid var(--rule); cursor: move; user-select: none; } .libwin-grip { color: var(--muted); font-size: 17px; } .libwin-title { font-family: var(--serif); font-size: 17px; color: var(--ink); } .libwin-search { flex: 1 1 auto; display: flex; max-width: 360px; margin: 0 auto; } .libwin-q { width: 100%; box-sizing: border-box; font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 9px; padding: 8px 12px; } .libwin-q:focus { outline: none; border-color: var(--accent); } .libwin-close { border: 0; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; } .libwin-close:hover { color: var(--ink); } .libwin-body { flex: 1 1 auto; display: flex; min-height: 0; } .libwin-side { flex: 0 0 178px; overflow-y: auto; padding: 10px 8px; border-right: 1px solid var(--rule); background: var(--bg); } .libwin-nav { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; font-family: var(--meta); font-size: 13.5px; color: var(--ink); cursor: pointer; } .libwin-nav:hover { background: var(--bg-soft); } .libwin-nav.on { background: var(--cream); color: var(--accent); } .libwin-nico { width: 15px; text-align: center; color: var(--muted); } .libwin-nav.on .libwin-nico { color: var(--accent); } .libwin-nlbl { flex: 1 1 auto; } .libwin-ct { font-size: 11px; color: var(--muted); } .libwin-navhdr { font-family: var(--meta); text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; font-weight: 700; color: var(--muted); margin: 14px 10px 4px; } .libwin-mainwrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .libwin-bar2 { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--rule); font-family: var(--meta); font-size: 12.5px; color: var(--muted); } .libwin-now { color: var(--accent); } .libwin-openin { display: inline-flex; align-items: center; color: var(--ink); white-space: nowrap; } .libwin-target { font: inherit; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 7px; padding: 4px 8px; cursor: pointer; } .libwin-main { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px 20px; } .libwin-sec { font-family: var(--meta); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; color: var(--muted); margin: 16px 2px 8px; } .libwin-sec:first-child { margin-top: 2px; } .libwin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; } .libwin-card { position: relative; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 11px; padding: 12px 13px; cursor: pointer; transition: border-color .15s ease, transform .12s ease; } .libwin-card:hover { border-color: var(--accent); transform: translateY(-1px); z-index: 4; } .libwin-card.is-current { border-color: var(--accent-strong); } .libwin-card.is-current .libwin-ctitle { color: var(--accent); } .libwin-ctitle { font-family: var(--serif); font-size: 14.5px; color: var(--ink); line-height: 1.25; padding-right: 18px; } .libwin-cmeta { font-family: var(--meta); font-size: 11.5px; color: var(--muted); margin-top: 3px; } .libwin-cblurb { position: absolute; left: -1px; right: -1px; top: 100%; z-index: 5; display: none; background: var(--surface); border: 1px solid var(--accent); border-top: none; border-radius: 0 0 11px 11px; padding: 9px 12px; font-family: var(--sans); font-size: 11.5px; color: var(--muted); line-height: 1.45; } .libwin-card:hover .libwin-cblurb, .libwin-card:focus-within .libwin-cblurb { display: block; } .libwin-pin { position: absolute; top: 7px; right: 7px; border: 0; background: transparent; color: var(--rule); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px; } .libwin-pin:hover { color: var(--muted); } .libwin-pin.on { color: var(--accent-strong); } .libwin-rz { position: absolute; z-index: 2; } .libwin-rz-e { top: 10px; bottom: 10px; right: -3px; width: 9px; cursor: ew-resize; } .libwin-rz-w { top: 10px; bottom: 10px; left: -3px; width: 9px; cursor: ew-resize; } .libwin-rz-s { left: 10px; right: 10px; bottom: -3px; height: 9px; cursor: ns-resize; } .libwin-rz-n { left: 10px; right: 10px; top: -3px; height: 9px; cursor: ns-resize; } .libwin-rz-se { right: -3px; bottom: -3px; width: 15px; height: 15px; cursor: nwse-resize; } .libwin-rz-nw { left: -3px; top: -3px; width: 15px; height: 15px; cursor: nwse-resize; } .libwin-rz-ne { right: -3px; top: -3px; width: 15px; height: 15px; cursor: nesw-resize; } .libwin-rz-sw { left: -3px; bottom: -3px; width: 15px; height: 15px; cursor: nesw-resize; } @media (max-width: 520px) { .libwin { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; } .libwin-rz { display: none; } .libwin-side { flex-basis: 128px; } .libwin-search { max-width: none; } } /* =========================================================================== Pane bookmark button (toolbar) =========================================================================== */ .pane-bookmark svg { transition: fill .15s ease, stroke .15s ease; } .pane-bookmark.is-bookmarked svg { fill: var(--accent); stroke: var(--accent); } /* Scroll-link button: chain icon when unlinked; a colour-coded group letter when linked (matching panes share the colour, so it's clear which scroll together). Only shown when split, since linking needs at least two panes. */ .pane-link { display: none; position: relative; } body.split .pane-link { display: inline-flex; } .pane-link .pane-link-letter { display: none; font-family: var(--meta); font-weight: 800; font-size: 12px; line-height: 1; } .pane-link.is-linked .pane-link-ico { display: none; } .pane-link.is-linked .pane-link-letter { display: inline; color: #fff; } .pane-link.is-linked { color: #fff; border-color: transparent; } .pane-link.is-linked[data-group="A"] { background: #e49a4c; } .pane-link.is-linked[data-group="B"] { background: #4f86d6; } .pane-link.is-linked[data-group="C"] { background: #4a9e5b; } .pane-link.is-linked[data-group="D"] { background: #c5559b; } .pane-link.is-linked:hover { filter: brightness(1.07); } /* =========================================================================== Settings panel =========================================================================== */ .settings-body { padding-top: 4px; } .settings-section { padding: 14px 16px; border-bottom: 1px solid var(--rule); } .settings-section:last-child { border-bottom: none; } .settings-section-head { font-family: var(--meta); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; min-height: 40px; } .setting-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; min-height: 40px; cursor: pointer; } .setting-label { font-family: var(--sans); font-size: 14px; color: var(--ink); flex: 1 1 auto; } .setting-select { font: inherit; font-size: 13px; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 10px; cursor: pointer; flex: 0 0 auto; max-width: 210px; } .setting-select:focus { outline: none; border-color: var(--accent); } /* Previewing font picker (Reading / Greek / Hebrew fonts): label above, in-font sample rows below. */ .setting-font-row { flex-direction: column; align-items: stretch; gap: 8px; } .font-picker { display: flex; flex-direction: column; gap: 5px; } .font-opt { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 9px; padding: 8px 11px; cursor: pointer; color: var(--ink); font: inherit; } .font-opt:hover { border-color: var(--accent); } .font-opt.is-sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); } .font-sample { flex: 0 0 auto; min-width: 96px; font-size: 20px; line-height: 1.1; color: var(--ink); } .font-opt-name { flex: 1 1 auto; font-family: var(--sans); font-size: 13px; color: var(--muted); } .font-opt.is-sel .font-opt-name { color: var(--ink); } .font-opt-check { flex: 0 0 auto; color: var(--accent); font-weight: 700; opacity: 0; } .font-opt.is-sel .font-opt-check { opacity: 1; } /* iOS-style toggle switch */ .setting-toggle { flex: 0 0 44px; width: 44px; height: 26px; border-radius: 13px; background: var(--rule); border: none; position: relative; cursor: pointer; transition: background .2s ease; display: inline-block; } .setting-toggle.is-on { background: var(--accent-strong); } .setting-toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .2s ease; } .setting-toggle.is-on .setting-toggle-knob { transform: translateX(18px); } /* Theme selector buttons */ .setting-theme-btns { display: flex; gap: 8px; } .setting-theme-btn { font: inherit; font-size: 13px; font-family: var(--meta); font-weight: 500; padding: 7px 14px; border-radius: 999px; cursor: pointer; background: var(--bg-soft); border: 1px solid var(--rule); color: var(--ink); transition: background .15s ease, border-color .15s ease; } .setting-theme-btn.is-active { background: var(--cream); border-color: var(--accent-strong); color: var(--accent); } .setting-theme-btn:hover:not(.is-active) { border-color: var(--muted); } .setting-accent-swatches { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .accent-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .12s, border-color .12s; outline-offset: 2px; } .accent-swatch.is-active { border-color: var(--ink); transform: scale(1.25); } .accent-swatch:hover:not(.is-active) { transform: scale(1.15); } /* Keyboard shortcuts table */ .settings-keys { width: 100%; border-collapse: collapse; font-size: 13px; } .settings-keys td { padding: 5px 6px 5px 0; color: var(--muted); vertical-align: top; } .settings-keys td:first-child { font-family: var(--meta); font-weight: 700; color: var(--ink); white-space: nowrap; width: 44%; padding-right: 14px; background: var(--bg-soft); border-radius: 5px; padding: 4px 8px; } .setting-desc { font-size: 13px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; } .setting-action-btn { font: inherit; font-family: var(--meta); font-weight: 500; font-size: 14px; background: transparent; border: 1px solid var(--rule); border-radius: 999px; color: var(--accent); padding: 9px 16px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .setting-action-btn:hover { border-color: var(--accent); background: var(--bg-soft); } /* Customizable keyboard shortcuts */ .settings-key-group { margin: 0 0 14px; } .settings-key-grouphead { font-family: var(--meta); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; } .setting-key-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; } .setting-key-label { font-size: 13.5px; color: var(--ink); } .setting-key-btn { flex: 0 0 auto; min-width: 92px; text-align: center; font-family: var(--meta); font-weight: 600; font-size: 12.5px; background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 7px; color: var(--ink); padding: 6px 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .setting-key-btn:hover { border-color: var(--muted); } .setting-key-btn.is-unset { color: var(--muted); font-weight: 500; } .setting-key-btn.is-recording { border-color: var(--accent-strong); color: var(--accent); background: var(--cream); animation: keyPulse 1s ease-in-out infinite; } @keyframes keyPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } } /* Reading DOM toggles + typography (controlled by body class) */ body.hide-verse-numbers .vnum { display: none; } .chapter-heading { font-family: var(--serif); font-size: calc(16px * var(--read-scale, 1)); font-weight: 700; color: var(--ink); line-height: 1.3; margin: 26px 0 8px; letter-spacing: .1px; } .chapter-heading + .verse, .chapter-title + .chapter-heading { margin-top: 0; } body.hide-headings .chapter-heading { display: none; } body.reader-sans .pane-content { font-family: var(--sans); } body.reader-sans .verse:not([lang]), body.reader-sans .chapter-heading { font-family: var(--sans); } body.reader-garamond .pane-content { font-family: "EB Garamond", Georgia, serif; } body.reader-garamond .verse:not([lang]), body.reader-garamond .chapter-heading { font-family: "EB Garamond", Georgia, serif; font-size: calc(20px * var(--read-scale, 1)); } body.reader-crimson .pane-content { font-family: "Crimson Pro", "Crimson Text", Georgia, serif; } body.reader-crimson .verse:not([lang]), body.reader-crimson .chapter-heading { font-family: "Crimson Pro", "Crimson Text", Georgia, serif; font-size: calc(20px * var(--read-scale, 1)); } /* Reading width (single-pane; split panes are column-constrained) */ body.read-narrow { --maxread: 560px; } body.read-wide { --maxread: 820px; } /* Line spacing */ body.reader-cozy .verse { line-height: 1.5; } body.reader-roomy .verse { line-height: 2.05; } /* Justified text */ body.reader-justify .verse { text-align: justify; text-justify: inter-word; } /* Paragraph / continuous layout: verses flow as prose instead of one-per-line. Verses stay distinct inline elements (still tappable, still highlightable), with translator headings breaking the prose into paragraphs. */ body.reader-paragraph .verse { display: inline; margin: 0; padding: 0 1px; border-radius: 3px; } body.reader-paragraph .verse::after { content: " "; } /* breathing room between verses */ body.reader-paragraph .verse:hover { box-shadow: none; background: var(--bg-soft); } body.reader-paragraph .chapter-heading { display: block; } body.reader-paragraph .chapter-heading + .verse { margin-top: 0; } body.reader-paragraph .pane-content { text-indent: 0; } /* In paragraph (continuous) mode the verses are inline, so justify must go on the prose container, not the inline .verse. (In "lines" mode the per-.verse rule above handles it — though short verses that don't wrap show no visible effect, which is expected.) */ body.reader-paragraph.reader-justify .pane-content { text-align: justify; text-justify: inter-word; } /* Classics (verseless: creeds, catechisms, prose books) ALWAYS read as discrete, first-line-indented paragraphs — in either Bible reading mode. The "paragraph" mode turns .verse inline (run-together): right for Scripture, but it would collapse a book's paragraphs, so it must never reach verseless content. */ .pane-content.verseless .verse { text-indent: 1.5em; } body.reader-paragraph .pane-content.verseless .verse { display: block; margin: 0; padding: 2px 4px; border-radius: 4px; } body.reader-paragraph .pane-content.verseless .verse::after { content: none; }