/* --- Theming System --- Dark/light only now (Sepia mode and the old 18-option "Color Theme" accent picker were removed - see accent-* below). Switch mechanism is :root[data-theme="light"], matching the root CoA Apps site exactly (rather than this app's old body.light-mode class), so the same .theme-toggle-group/.theme-toggle-btn component and its shared "coa-theme" localStorage key work identically here. */ :root { color-scheme: dark; /* User Interface Size (Settings > App Sizing Options) - set in JS (applyUiScale() in app.js) from the ui-size-select value: 0.85 (Small), 1 (Medium - the app's existing look, unchanged), 1.15 (Large). Every UI-chrome font-size in this file that should respond to it is written as "calc(Xrem * var(--ui-scale))" instead of a plain rem value. Passage text (#verse-text and its .size-*/heading styles) and the toolbar (--toolbar-scale below - independently adjustable, not part of this) are deliberately untouched by this one. */ --ui-scale: 1; /* Dampened version of --ui-scale, anchored at 1 (Medium is identical either way) - moves 1/3 as much as --ui-scale in either direction (was 1/2), per explicit request. Only the Search/Menu buttons use this (see #search-btn/#account-settings-btn below); everything else still reads --ui-scale directly. */ --ui-scale-dampened: calc(1 + (var(--ui-scale) - 1) * 0.3333); /* Chapter-nav strip's Prev/Next arrows and audio button - own scale, separate from --ui-scale-dampened above so tuning one never moves the other. Tracks --ui-scale at full rate, but clamped between 0.75 (its Small size - a floor, so it can't keep shrinking as far as the reference text's own emergency shrink-to-fit does at Extra Small/on narrow screens) and 1 (its Medium size - a ceiling, so it never grows past that at Large/Extra Large). The strip must always fit the viewport, and the reference text is the one that actually flexes to make room for that - not these icons, which stay fixed between this floor and ceiling regardless of available space. */ --chapter-nav-icon-scale: clamp(0.75, var(--ui-scale), 1); /* Toolbar Size (Settings > App Sizing Options) - set in JS (applyToolbarScale() in app.js) from the toolbar-size-select value: 0.4 (Extra Small), 0.6 (Small), 0.7 (Medium - default), 0.85 (Large), 1 (Extra Large). Only .toolbar-btn/.toolbar-icon (the bottom Play/Scroll/Notes/Mic bar) read this - everything else's size still comes from --ui-scale above, independent of this one. Matches the Medium default exactly, so a brand-new user (nothing in localStorage yet, so the flash-prevention inline script in app.html has nothing to apply) never sees a flash from this base value to the real default. */ --toolbar-scale: 0.7; /* Default (Dark Mode) */ /* Matches the root CoA Apps site's --bg-color exactly (was pure black before). */ --bg-body: #121212; --bg-card: #111827; /* gray-900 */ --bg-expanded: #1F2937; /* Lighter for expanded state */ --bg-input: #1F2937; /* gray-800 */ --bg-hover: #374151; /* gray-700 */ --text-main: #FFFFFF; --text-muted: #9CA3AF; /* gray-400 */ /* Deliberate middle tier between the two above, for supporting text that shouldn't shout as loud as --text-main but was too faint at --text-muted (Stats labels and captions). */ --text-secondary: #D1D5DB; /* gray-300 */ /* Passage text color options (Settings > Text Options > Text Color) - three explicit tiers, dark mode: pure white (max) -> gray-200 (soft) -> gray-300 (muted). --text-color-max matches --text-main exactly here (both pure white) - it only needs to diverge from --text-main in light mode (see below). */ --text-color-max: #FFFFFF; --text-color-soft: #E5E7EB; /* gray-200 */ --text-color-muted: #D1D5DB; /* gray-300 */ /* Highlight opacity (Settings > Passage Appearance > Highlight Colors Brightness) - Default here; Soft/Bright/Very Bright override this via a class on #verse-text (see applyHighlightBrightness() in app.js). Consumed by the rgb(from ...) rules above instead of each --highlight-X variable's own baked-in alpha. Same value in both themes for every tier, so none of these need a light-mode override. */ --highlight-alpha: 0.35; /* Matches the root CoA Apps site's --border-light exactly, so every border here (modals, cards, dividers) reads as the same gray as the rest of the site, not this app's own darker gray. */ --border-color: #aaaaaa; /* Button Defaults (Dark) */ --btn-bg: #111827; /* Very Dark Gray */ --btn-hover: #1F2937; /* Dark Gray */ --btn-text: #FFFFFF; --btn-icon: #FFFFFF; /* Mic Button Defaults (Dark) */ --mic-bg: #1F2937; --mic-text: #FFFFFF; --mic-border: var(--accent-primary); /* CoA Apps accent colors (pink/green/yellow) - same hex values as the root site's --accent-pink/--accent-green/--focus-color, replacing the old single yellow reused for every accent purpose. Pink is the general-purpose border/icon/text accent, green is the secondary/bolder accent, yellow is reserved for focus rings only (matches sitewide convention). */ --accent-primary: #f472b6; /* Slightly lighter green (was #4ade80/green-400) - green-300, one step lighter, already used elsewhere in the app as --highlight-green so it's a known-good shade here too. */ --accent-secondary: #86efac; --accent-focus: #fdfd96; --error-color: #f87171; /* User-applied verse highlights (Verse Actions modal) - 20 presets, translucent so the verse text stays readable underneath. Bright-on-dark tints here, deep-on-light tints in the light override below. PRE-0.35-NORMALIZATION RECORD (dark mode), kept here to revert to if the flat 0.35 below doesn't work out - everything was 0.3 except red/gray/dark-purple (0.35), dark-blue/dark-green (0.4), and dark-teal (0.45), each bumped individually because the color read too weak/washed- out at plain 0.3 against a dark background: yellow:245,255,0,0.3 green:74,222,128,0.3 pink:244,114,182,0.3 blue:96,165,250,0.3 orange:251,146,60,0.3 purple:192,132,252,0.3 red:220,38,38,0.35 teal:45,212,191,0.3 cyan:34,211,238,0.3 gray:156,163,175,0.35 brown:217,119,6,0.3 magenta:217,70,239,0.3 lavender:216,180,254,0.3 dark-purple:147,51,234,0.35 light-pink:251,207,232,0.3 dark-pink:244,63,165,0.3 dark-red:248,113,113,0.3 dark-teal:19,78,74,0.45 dark-blue:30,64,175,0.4 dark-green:21,128,61,0.4 */ --highlight-yellow: rgba(245, 255, 0, 0.3); --highlight-green: rgba(134, 239, 172, 0.3); /* green-300 - a bit lighter than the previous green-400 */ --highlight-pink: rgba(244, 114, 182, 0.3); --highlight-blue: rgba(96, 165, 250, 0.3); --highlight-orange: rgba(251, 146, 60, 0.3); --highlight-purple: rgba(192, 132, 252, 0.3); --highlight-red: rgba(220, 38, 38, 0.3); --highlight-teal: rgba(45, 212, 191, 0.3); --highlight-cyan: rgba(34, 211, 238, 0.3); --highlight-gray: rgba(156, 163, 175, 0.3); --highlight-brown: rgba(217, 119, 6, 0.3); --highlight-magenta: rgba(217, 70, 239, 0.3); --highlight-lavender: rgba(182, 160, 252, 0.3); --highlight-dark-purple: rgba(126, 34, 206, 0.3); /* purple-700 - a tad darker than purple-600 */ --highlight-light-pink: rgba(249, 168, 212, 0.3); --highlight-dark-pink: rgba(219, 39, 119, 0.3); /* pink-600 - a tad darker than the previous shade */ --highlight-dark-red: rgba(127, 29, 29, 0.3); /* was a lighter red than --highlight-red itself (backwards from the name) - now genuinely darker, matching every other dark-* pair and light mode's own already-correct dark-red value */ --highlight-dark-teal: rgba(17, 94, 89, 0.3); /* teal-800 - a tad bit lighter than before (teal-900) */ --highlight-dark-blue: rgba(30, 64, 175, 0.3); --highlight-dark-green: rgba(21, 128, 61, 0.3); --highlight-light-blue: rgba(191, 219, 254, 0.3); /* blue-200 - paler than --highlight-blue (blue-400), same "light-" convention as --highlight-light-pink */ --highlight-bright-green: rgba(34, 197, 94, 0.3); /* green-500 - a vivid, saturated green between --highlight-green (green-400) and --highlight-dark-green (green-700) */ --highlight-light-yellow: rgba(254, 240, 138, 0.3); /* yellow-200 - the previous near-white value (255,255,224) was too close to white to read as yellow at all once blended at low alpha over a dark background; this stays visibly yellow-toned */ --highlight-dark-yellow: rgba(212, 175, 55, 0.3); /* a true gold tone (was yellow-600, more amber/orange-leaning and a touch darker) */ /* Search-term highlighting (Search results/Type Command "Search for a word/phrase") - a fixed, vibrant yellow, deliberately NOT var(--highlight-yellow) (excluded from the Highlight Colors setting and from any general "yellow"/"green" UI color tweaks; kept as its own single dedicated value). Dark mode needs a deep, saturated gold rather than a pale/bright yellow specifically because the marked text itself stays --text-main (white here) - a bright yellow background would make white text nearly unreadable on top of it. This shade (#8f6b00) is the most saturated/vibrant gold that still clears WCAG AA (4.92:1) against white text. */ --search-highlight-bg: #8f6b00; /* Desktop Page Width Variable */ --desktop-width: 75%; } /* Light Mode Overrides */ :root[data-theme="light"] { color-scheme: light; /* Matches the root CoA Apps site's --bg-color exactly. */ --bg-body: #f5f5f5; --bg-card: #FFFFFF; --bg-expanded: #F9FAFB; /* Slightly off-white for expanded */ --bg-input: #FFFFFF; --bg-hover: #E5E7EB; /* gray-200 */ --text-main: #111827; /* gray-900 */ --text-muted: #4B5563; /* gray-600 */ --text-secondary: #374151; /* gray-700 */ /* Highest Contrast is pure black here - deliberately darker than --text-main (gray-900, used everywhere else in the app's UI) so all three tiers stay visually distinct from each other in the passage text specifically: black (max) -> gray-800 (soft) -> gray-700 (muted). */ --text-color-max: #000000; --text-color-soft: #1F2937; /* gray-800 */ --text-color-muted: #374151; /* gray-700 */ /* Light mode reads slightly more opaque than dark mode at the same alpha (light backgrounds show highlight tint more readily), so each Highlight Colors Brightness tier gets its own lower alpha here. */ --highlight-alpha: 0.3; --border-color: #444444; /* Button Overrides (Light) */ --btn-bg: #F3F4F6; /* Light Gray */ --btn-hover: #E5E7EB; /* Slightly Less Light Gray */ --btn-text: #111827; --btn-icon: #000000; /* Black Icon */ /* Mic Button Overrides (Light) - Now matches btn-bg */ --mic-bg: #F3F4F6; --mic-text: #000000; --mic-border: var(--accent-primary); --accent-primary: #800d48; /* Slightly lighter green (was #097732) - green-700, one step lighter, already used elsewhere in the app as --highlight-dark-green so it's a known-good shade here too. */ --accent-secondary: #15803d; --accent-focus: #9f9f03; --error-color: #b91c1c; /* PRE-0.35-NORMALIZATION RECORD (light mode), kept here to revert to if the flat 0.35 below doesn't work out - everything was 0.3 except yellow/dark-teal (0.35), and lavender/light-pink (0.25, pulled DOWN instead of up - a pale color at the normal 0.3 read too strong/opaque against a light background): yellow:171,179,0,0.35 green:9,119,50,0.3 pink:128,13,72,0.3 blue:29,78,216,0.3 orange:194,65,12,0.3 purple:126,34,206,0.3 red:153,27,27,0.3 teal:15,118,110,0.3 cyan:14,116,144,0.3 gray:75,85,99,0.3 brown:120,53,15,0.3 magenta:134,25,143,0.3 lavender:109,40,217,0.25 dark-purple:88,28,135,0.3 light-pink:219,39,119,0.25 dark-pink:157,23,77,0.3 dark-red:127,29,29,0.3 dark-teal:17,94,89,0.35 dark-blue:30,58,138,0.3 dark-green:20,83,45,0.3 */ --highlight-yellow: rgba(171, 179, 0, 0.2); --highlight-green: rgba(34, 197, 94, 0.2); /* green-500 - lighter/brighter than before, and now correctly lighter than "Green" (bright-green, green-600) too - the old value was actually darker than it, backwards */ --highlight-pink: rgba(219, 39, 119, 0.2); /* pink-600 - previous pink-700 read as too close to dark-pink; shifted the whole family a step lighter (light-pink/pink) for real separation at every step */ --highlight-blue: rgba(29, 78, 216, 0.2); --highlight-orange: rgba(194, 65, 12, 0.2); --highlight-purple: rgba(147, 51, 234, 0.2); /* purple-600 - previous value read as nearly identical to lavender; shifted the whole family a step lighter (lavender/purple) for real separation at every step */ --highlight-red: rgba(153, 27, 27, 0.2); --highlight-teal: rgba(15, 118, 110, 0.2); --highlight-cyan: rgba(14, 116, 144, 0.2); --highlight-gray: rgba(75, 85, 99, 0.2); --highlight-brown: rgba(120, 53, 15, 0.2); --highlight-magenta: rgba(134, 25, 143, 0.2); --highlight-lavender: rgba(192, 132, 252, 0.2); /* purple-400 - lighter than the new --highlight-purple, clearly separated */ --highlight-dark-purple: rgba(74, 20, 115, 0.2); /* a tad darker than purple-900 */ --highlight-light-pink: rgba(244, 114, 182, 0.2); /* pink-400 - lighter than the new --highlight-pink, clearly separated */ --highlight-dark-pink: rgba(131, 24, 67, 0.2); /* pink-900 - a tad darker than pink-800 */ --highlight-dark-red: rgba(127, 29, 29, 0.2); --highlight-dark-teal: rgba(22, 108, 102, 0.2); /* a tad bit lighter than before (teal-800), still clearly darker than plain teal (teal-700) */ --highlight-dark-blue: rgba(30, 58, 138, 0.2); --highlight-dark-green: rgba(20, 83, 45, 0.2); --highlight-light-blue: rgba(59, 130, 246, 0.2); /* blue-500 - brighter/lighter than --highlight-blue (blue-700), same "light-" convention as --highlight-light-pink */ --highlight-bright-green: rgba(22, 163, 74, 0.2); /* green-600 - a vivid, saturated green between --highlight-green and --highlight-dark-green */ --highlight-light-yellow: rgba(253, 224, 71, 0.2); /* yellow-300 - previous yellow-500 read as darker than --highlight-yellow itself instead of lighter; this is clearly brighter */ --highlight-dark-yellow: rgba(184, 134, 11, 0.2); /* a true gold tone (was yellow-800) - a bit lighter and less brown/amber-leaning */ /* Search-term highlighting - a fixed, vibrant yellow (see the dark-mode declaration above for why this is its own variable). Near-black text (--text-main here) reads great on a bright yellow, so light mode can afford to be much more vivid than dark mode's deep gold - 12.71:1 contrast. */ --search-highlight-bg: #fdd835; } /* Tailwind's preflight used to apply this globally - without it, any bordered/padded element defaults to content-box and renders wider than its declared width/100% (border+padding get added on top instead of included), which is exactly why the passage card was overflowing wider than the header bar on mobile. */ *, *::before, *::after { box-sizing: border-box; } /* Removes the default blue flash mobile browsers paint over any tappable element on touch (verses, buttons, links, everywhere) - purely a WebKit/Chromium touch-feedback color, not a focus indicator, so removing it doesn't affect keyboard focus rings or screen reader behavior at all. */ html { -webkit-tap-highlight-color: transparent; } /* Status message color-coding (Paused/Reading/errors) - real, semantic class names, not old Tailwind color-utility lookalikes. updateStatus(msg, color) in app.js passes one of these. */ .status-warning { color: var(--accent-focus) !important; } .status-success { color: var(--accent-secondary) !important; } .status-error { color: var(--error-color) !important; } .status-muted { color: var(--text-muted) !important; } /* Theme Utility Classes */ .accent-text { color: var(--accent-primary) !important; } .accent-text-dim { color: var(--text-main) !important; } .accent-text-bold { color: var(--accent-secondary) !important; } .accent-border { border-color: var(--accent-primary) !important; } .accent-border-bold { border-color: var(--accent-secondary) !important; } .accent-border-t { border-top-color: var(--accent-focus) !important; } /* A handful of text fields/textareas (manual-input, verse-note- input, hn-search-input, fallback-input) carry .accent-border explicitly - element+class beats the plain class above so these fall in line with every other field's yellow border too. */ input.accent-border, textarea.accent-border { border-color: var(--accent-focus) !important; } /* The passage reference at the top ("John 1") reads as plain white/black (--text-main) instead of the .accent-text-bold green it inherited by default - an ID selector to win over that !important utility class without touching its other user (the Welcome modal's "Important Note!" label). */ #reference-header { color: var(--text-main) !important; } .accent-ring:focus-visible { outline-color: var(--accent-focus) !important; } /* Was a Tailwind utility with no hand-written fallback - now that Tailwind is gone, every class="hidden" toggle across the page (scripture-display, full-chapter-btn, the welcome/fallback/ copyright modals, etc.) needs this to actually work. !important because it must reliably win regardless of whatever else styles the element's display. */ .hidden { display: none !important; } /* Same story as .hidden above - the welcome/fallback modals toggle between class="hidden" and class="flex" in app.js, and .flex was also a pure Tailwind utility with nothing behind it now. */ .flex { display: flex !important; } /* Screen-reader-only announcer text (#sr-announcer) - was silently relying on Tailwind's .sr-only utility, which left it visible on screen once the CDN script was removed. */ .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; } /* --- Accessibility & High Contrast --- Matches the CoA Apps sitewide focus ring exactly (root style.css/ Access-a-Lyrics: *:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; }) - was 4px/accent- primary(pink)/:focus (not :focus-visible) before. */ :focus-visible { outline: 3px solid var(--accent-focus); outline-offset: 3px; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; position: relative; padding-top: 0 !important; background-color: var(--bg-body); color: var(--text-main); font-family: 'Verdana', 'Segoe UI', sans-serif; /* Sitewide floor for body text - matches the dropdowns' own 19px (select { font-size: 1.1875rem } below), so nothing (notes, highlights, list items, modal copy) reads smaller than the dropdowns do. Anything that needs to be bigger still overrides this; small deliberate metadata (dates, badges) still overrides it smaller on purpose. rem here (1.1875rem = 19px against the 16px root) rather than a flat px value so this - and everything that inherits it - respects the browser/OS's own text-size preference, and so a future root-level UI scale multiplier can affect it too; computed size is identical to the old 19px right now. */ font-size: calc(1.3rem * var(--ui-scale)); transition: background-color 0.3s, color 0.3s; } /* Large Touch Targets */ .touch-target { min-height: 80px; min-width: 80px; touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; transition: transform 0.1s, background-color 0.2s; } .touch-target:active { transform: scale(0.95); } /* Overrides .touch-target's 80px minimum so this button matches the 44px size of the CoA Apps site-wide mobile hamburger (.nav-toggle in the root style.css). #search-btn shares this - both buttons in .app-top-bar-actions need to match each other exactly, not just the site-wide hamburger. */ #account-settings-btn, #search-btn { /* Scales with User Interface Size at HALF the normal rate (--ui-scale-dampened, not --ui-scale directly) - 44px is still the Medium/default look, unchanged, per explicit request. */ width: calc(44px * var(--ui-scale-dampened)); height: calc(44px * var(--ui-scale-dampened)); min-width: calc(44px * var(--ui-scale-dampened)); min-height: calc(44px * var(--ui-scale-dampened)); display: flex; align-items: center; justify-content: center; border-width: 2px; border-style: solid; border-radius: 8px; cursor: pointer; flex-shrink: 0; } #account-settings-btn svg, #search-btn svg { width: calc(22px * var(--ui-scale-dampened)); height: calc(22px * var(--ui-scale-dampened)); } /* Visible "Menu"/"Search" text next to the icon - desktop only (matches the existing min-width:768px "desktop" breakpoint used elsewhere in this file). Hidden on narrower/touch-first viewports to keep these two buttons compact there; the accessible name (aria-label="Menu"/"Search" on the buttons themselves) stays exactly the same on every viewport, so screen reader users get the identical, simpler name either way regardless of whether this text happens to be visible. */ .btn-desktop-label { display: none; } @media (min-width: 768px) { #account-settings-btn, #search-btn { width: auto; padding: 0 16px; } .btn-desktop-label { display: inline; margin-left: 8px; font-weight: 700; /* Never had a font-size at all before - buttons don't inherit one by default, so this was silently stuck at the browser's own default, not scaling with anything. Damped at half the normal --ui-scale rate (own inline calc, not the shared --ui-scale-dampened var used elsewhere - that one's at 1/3 now), per explicit request. */ font-size: calc(0.95rem * (1 + (var(--ui-scale) - 1) * 0.5)); } } /* Unified Button Theme Class */ .btn-theme { background-color: var(--btn-bg); color: var(--btn-text); /* Border color is handled by specific utilities (accent-border) */ } /* filter:brightness (not a var(--btn-hover) color swap anymore) is a real "brightening" effect - it scales whatever's already there (background, border, icon) up together instead of replacing the background with a fixed color, and automatically keeps working the same way in both themes. Per explicit feedback this needed to be MORE intense than the original var(--btn-hover) swap, not a different kind of effect (a pink fill was tried and reverted - too different from what was actually wanted). */ .btn-theme:hover, .btn-theme:focus-visible { filter: brightness(1.4); } .btn-theme svg { color: var(--btn-icon); stroke: var(--btn-icon); } /* Specific override for filled icons like Play/Pause */ .btn-theme svg[fill="currentColor"] { fill: var(--btn-icon); } /* ACTIVE STATE (Listening / Reading) 1. Red Background 2. White Icon/Text 3. Theme Color Border (Crucial) */ .state-active-red { background-color: #DC2626 !important; /* Red 600 */ color: #FFFFFF !important; border-color: var(--accent-primary) !important; /* Force theme border */ } /* No fill override here - the mic icon is stroke-only (fill="none" on the SVG itself); forcing fill:#FFFFFF was turning its outline into a solid silhouette, changing its apparent shape between idle and listening states. */ .state-active-red svg { color: #FFFFFF !important; stroke: #FFFFFF !important; } /* Bottom toolbar - Play/Pause, Bible Navigation, Highlights & Notes, Microphone. Same equal-width-flex-buttons/minimal-padding idea as Access-a-Lyrics' sticky bottom bar, just 4 buttons instead of 5. Fixed (not sticky) to the viewport bottom - unlike Access-a-Lyrics' bar, this app's content above it can be very short before a passage loads, and a sticky bar just sits at wherever that short content ends rather than the actual bottom of the screen, causing a visible jump down once a passage loads and pushes it further down the page. Fixed avoids that entirely at the cost of no longer scrolling away past the footer - #app-container's bottom padding below is sized to keep the footer clear of it instead. */ .app-toolbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; /* Was 6px (and 7px before that) - tightened per explicit request, since the buttons themselves got bigger with the Large default. */ gap: 4px; /* Matches #app-container's own 700px cap below, so the two stay the same width and stay aligned with each other on wide screens - the narrower cap also leaves more gutter on the left for Verse Actions to fit into (see its own left-anchored positioning further down this file). */ max-width: 700px; margin: 0 auto; /* Bottom padding includes the device's safe-area inset so the buttons stay clear of the phone's home-indicator/gesture bar instead of sitting right underneath it (env() resolves to 0 on devices without one, so this is a no-op there). */ padding: 2px 24px calc(10px + env(safe-area-inset-bottom, 0px)); background-color: var(--bg-body); /* Same Chromium position:fixed/sticky jitter fix as .app-top-bar, for the same reason. */ will-change: transform; transform: translateY(0); /* Slower + an ease-out curve (was 0.25s ease, which read as closer to an instant snap than an actual slide) - per explicit request for a more noticeable slide effect. */ transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } /* Auto-hide on scroll (Other App Options > Hide Bottom Toolbar on Scroll - see initAutoHideBar() in app.js), same pattern as .app-top-bar.header-hidden but sliding down instead of up, since this bar is anchored to the bottom edge instead of the top. */ .app-toolbar.toolbar-hidden { transform: translateY(100%); } .app-toolbar.toolbar-hidden:focus-within { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .app-toolbar { transition: none; } } /* Floating Auto Scroll button (Passage Appearance setting, off by default) - a tall, skinny rectangle anchored to the right edge like a scrollbar thumb, roughly half the viewport height and vertically centered. Pink at rest, green while actively scrolling (see startAutoScroll()/stopAutoScroll() in app.js). Sits above the top bar/toolbar (z-40) but below every modal (z-60+), so an open modal correctly covers it. */ #auto-scroll-btn { position: fixed; top: 50%; right: 2px; transform: translateY(-50%); z-index: 45; width: 21px; height: 50vh; max-height: 420px; min-height: 200px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--accent-primary); border-radius: 8px; background-color: var(--accent-primary); color: #FFFFFF; opacity: 0.2; cursor: pointer; } #auto-scroll-btn[hidden] { display: none; } #auto-scroll-btn[aria-pressed="true"] { border-color: var(--accent-secondary); background-color: var(--accent-secondary); color: #FFFFFF; } .toolbar-btn { flex: 1 1 0; /* Without this, flex:1 1 0 can't shrink a button below its icon's own natural size (flex items default to min-width: auto, which floors shrinking at the content's intrinsic size) - however many buttons are in the toolbar (4, 5, 6+ via the beta Toolbar Icon Count preview), this is what lets them actually squeeze down to fit and stay equal widths, instead of the widest one (Bible Navigation's bigger icon) refusing to shrink as much as the rest. */ min-width: 0; display: flex; align-items: center; justify-content: center; /* px (not rem), scaled by its own --toolbar-scale (Settings > App Sizing Options > Toolbar Size) rather than the general --ui-scale everything else in this file uses - these are icon-only buttons with no text label, so there's no font-size to drive their size the way calc(Xrem * var(--ui-scale)) does elsewhere, and the user asked for toolbar size to be independently adjustable from the rest of the UI's size. */ min-height: calc(60px * var(--toolbar-scale)); padding: 2px 1px; border-width: 2px; border-style: solid; border-radius: 12px; cursor: pointer; overflow: visible; } /* Slight yellow-tinted background, per explicit request - same color-mix convention used elsewhere (e.g. .app-btn-primary). */ @supports (background-color: color-mix(in srgb, red, blue)) { .toolbar-btn { background-color: color-mix(in srgb, var(--accent-focus) 15%, var(--btn-bg)); } } /* Same [hidden]-vs-author-origin-display fix used elsewhere in this file (#verse-range-add-btn, .more-colors-toggle-btn, etc.) - .toolbar-btn's own unconditional display:flex (author-origin) otherwise beats the browser's default [hidden]{display:none} (user-agent origin) regardless of specificity, so toggling .hidden in JS (see applyToolbarIconCount() in app.js) did nothing - a placeholder that had ever been shown once would never hide again afterward. */ .toolbar-btn[hidden] { display: none; } /* width:100% (capped by max-width) instead of a flat fixed width - lets the icon shrink along with its button once there isn't room for every button at full size (see .toolbar-btn's min-width: 0 above), rather than forcing an overflow. height:auto preserves each icon's own natural aspect ratio as it shrinks - these are all square source icons already, so this doesn't change anything at full size, only once space gets tight. */ .toolbar-icon { width: 100%; max-width: calc(46px * var(--toolbar-scale)); height: auto; display: block; pointer-events: none; } /* Beta-only placeholder icon (see #toolbar-placeholder-btn/-2 in app.html) - a plain filled circle, same shrink-to-fit treatment as .toolbar-icon above so it squeezes down along with its button too. aspect-ratio:1 (a real icon's height:auto instead relies on its own source image/viewBox proportions - a plain has none, so this is what keeps it circular as it shrinks). */ .toolbar-placeholder-icon { width: 100%; max-width: calc(28px * var(--toolbar-scale)); aspect-ratio: 1; border-radius: 50%; background-color: var(--accent-primary); display: block; pointer-events: none; } /* Play/Pause - white (near-black in light mode, via var(--text-main)) triangle icon when idle, pink pause icon when playing. */ .play-pause-btn { background-color: var(--bg-card); /* Yellow again (was green, was yellow before that), per explicit request. */ border-color: var(--accent-focus); color: var(--text-main); } @supports (background-color: color-mix(in srgb, red, blue)) { .play-pause-btn { background-color: color-mix(in srgb, var(--accent-focus) 15%, var(--bg-card)); } } .play-pause-btn[aria-pressed="true"] { color: #FFFFFF; background-color: #DC2626; } .play-pause-btn:hover, .play-pause-btn:focus-visible { filter: brightness(1.1); } /* All four toolbar buttons share the same yellow border again (was green, was yellow before that) - the icons themselves are what tell them apart, not the border color. ID selectors needed to beat .accent-border's !important. */ #toolbar-notebook-btn, #toolbar-bible-nav-btn, #toolbar-highlights-btn, #toolbar-mic-btn { border-color: var(--accent-focus) !important; } /* Reading-plan/tracker placeholder icon - always --text-main (was green). #toolbar-bible-nav-btn .bible-nav-book-icon (ID + class, rather than the class alone) is needed to beat .btn-theme svg's own color/stroke rules just above (which use --btn-icon, not --text-main - close but not identical in light mode) - both color AND stroke need overriding here, not just color, since .btn-theme svg sets stroke directly rather than leaving it to inherit via currentColor. */ #toolbar-bible-nav-btn .bible-nav-book-icon { color: var(--text-main); stroke: var(--text-main); } /* Copyright link - matches Access-a-Lyrics' .site-footer a exactly (focus-color, underlined, text-color on hover/focus). */ .copyright-link { color: var(--accent-focus); text-decoration: underline; cursor: pointer; } .copyright-link:hover, .copyright-link:focus-visible { color: var(--text-main); } /* Form Elements - text field size matches Access-a-Lyrics' .field input[type=text] exactly (10px/12px padding, 17px font, no fixed height - the field's height comes from that padding/font-size like Access-a-Lyrics, not a hardcoded value). */ select, input, textarea { background-color: var(--bg-input); color: var(--text-main); border-width: 2px; border-style: solid; /* Yellow, matching the bottom toolbar's own button borders (--accent-focus) - was pink (--accent-primary). */ border-color: var(--accent-focus); padding: 10px 12px; /* Bumped up from the sitewide 1.1875rem base (was 17px before that), per explicit request to increase text fields/ dropdowns specifically - no longer matches body{}'s own size exactly. rem, not px - see the body{} comment for why. */ font-size: calc(1.3rem * var(--ui-scale)); border-radius: 0.5rem; width: 100%; font-family: inherit; } input::placeholder, textarea::placeholder { color: var(--text-muted); } /* Animations */ @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } } .listening-animation { animation: pulse-ring 2s infinite; } /* Helper for dynamic backgrounds in Tailwind classes */ .bg-dynamic-card { background-color: var(--bg-card); } .bg-dynamic-body { background-color: var(--bg-body); } .border-dynamic { border-color: var(--border-color); } .hover-dynamic:hover { background-color: var(--bg-hover); } /* Background removed per explicit request - an open accordion no longer gets a tinted card background, just the extra margin below it. */ details[open] { margin-bottom: 2rem; /* Added margin for separation when expanded */ } /* NEW: Thicker border when expanded */ details[open] > summary { border-bottom-width: 4px !important; } /* Unified Tinted Background Class (Used for Buttons and Expanded Sections) */ .bg-theme-tint { background-color: var(--bg-card); } @supports (background-color: color-mix(in srgb, red, blue)) { /* Apply tint to these specific elements */ .bg-theme-tint { background-color: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-card)) !important; } } /* Button State Overrides */ /* 1. Hover Restore for "Go" button: Forces the background back to the button hover color on hover, overriding the tint !important from the @supports block */ .hover-restore:hover, .hover-restore:focus-visible { background-color: var(--btn-hover) !important; } /* 2. Hover effect for Welcome Button */ .hover-brightness:hover { filter: brightness(1.15); } .translate-y-full { transform: translateY(100%); } .translate-y-0 { transform: translateY(0); } /* Details Marker Hide */ details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } /* Scroll Offset */ .scroll-mt-4 { scroll-margin-top: 1rem; } /* "Currently reading" marker - a yellow left-edge accent bar via an absolutely-positioned ::before (not a real border-left, which would shift the verse's padding/content by the border's width each time this class toggles on/off while Play auto-scrolls through a passage, and not an inset box-shadow, which can't extend past the paragraph's own left edge - this needs to sit 2px outside it). Positioned/sized elements never participate in layout, so the verse's content never moves regardless of state. The faint background tint is deliberately low-opacity gray (not a real color) so it doesn't compete with the user-highlight-* colors below when both apply at once - CSS cascade order (user-highlight-* declared after this) means a real highlight color always wins over this tint anyway. */ .verse-highlight { border-radius: 4px; background-color: rgba(128, 128, 128, 0.4); } /* Doesn't cover ESV verses grouped inline in a shared paragraph (span[data-verse-num]) - those can start mid-line (see the plain-inline note on #verse-text span[data-verse-num] below), so a bar anchored to the verse itself would float wherever that happens to be instead of hugging the passage's left edge. Their bar is .verse-paragraph-active::before instead, further down. */ p.verse-highlight::before, h3.verse-highlight::before, h4.verse-highlight::before { content: ""; position: absolute; top: 0; bottom: 0; left: -6px; width: 4px; background-color: var(--accent-focus); border-radius: 4px; } /* User-applied verse highlights (Verse Actions modal) - applied to the same

#verse-highlight uses for the "currently reading" marker, so they share its padding/border-radius automatically. rgb(from ...) (relative color syntax) pulls just the R/G/B out of each --highlight-X variable and re-applies opacity via --highlight-alpha instead of whatever alpha that variable itself was declared with - this is what lets Settings > Passage Appearance > Highlight Colors Brightness (see applyHighlightBrightness() in app.js) adjust opacity at runtime without needing 4 entire duplicate copies of every color. */ .user-highlight-yellow { background-color: rgb(from var(--highlight-yellow) r g b / var(--highlight-alpha)); } .user-highlight-green { background-color: rgb(from var(--highlight-green) r g b / var(--highlight-alpha)); } .user-highlight-pink { background-color: rgb(from var(--highlight-pink) r g b / var(--highlight-alpha)); } .user-highlight-blue { background-color: rgb(from var(--highlight-blue) r g b / var(--highlight-alpha)); } .user-highlight-orange { background-color: rgb(from var(--highlight-orange) r g b / var(--highlight-alpha)); } .user-highlight-purple { background-color: rgb(from var(--highlight-purple) r g b / var(--highlight-alpha)); } .user-highlight-red { background-color: rgb(from var(--highlight-red) r g b / var(--highlight-alpha)); } .user-highlight-teal { background-color: rgb(from var(--highlight-teal) r g b / var(--highlight-alpha)); } .user-highlight-cyan { background-color: rgb(from var(--highlight-cyan) r g b / var(--highlight-alpha)); } .user-highlight-gray { background-color: rgb(from var(--highlight-gray) r g b / var(--highlight-alpha)); } .user-highlight-brown { background-color: rgb(from var(--highlight-brown) r g b / var(--highlight-alpha)); } .user-highlight-magenta { background-color: rgb(from var(--highlight-magenta) r g b / var(--highlight-alpha)); } .user-highlight-lavender { background-color: rgb(from var(--highlight-lavender) r g b / var(--highlight-alpha)); } .user-highlight-dark-purple { background-color: rgb(from var(--highlight-dark-purple) r g b / var(--highlight-alpha)); } .user-highlight-light-pink { background-color: rgb(from var(--highlight-light-pink) r g b / var(--highlight-alpha)); } .user-highlight-dark-pink { background-color: rgb(from var(--highlight-dark-pink) r g b / var(--highlight-alpha)); } .user-highlight-dark-red { background-color: rgb(from var(--highlight-dark-red) r g b / var(--highlight-alpha)); } .user-highlight-dark-teal { background-color: rgb(from var(--highlight-dark-teal) r g b / var(--highlight-alpha)); } .user-highlight-dark-blue { background-color: rgb(from var(--highlight-dark-blue) r g b / var(--highlight-alpha)); } .user-highlight-dark-green { background-color: rgb(from var(--highlight-dark-green) r g b / var(--highlight-alpha)); } .user-highlight-light-blue { background-color: rgb(from var(--highlight-light-blue) r g b / var(--highlight-alpha)); } .user-highlight-bright-green { background-color: rgb(from var(--highlight-bright-green) r g b / var(--highlight-alpha)); } .user-highlight-light-yellow { background-color: rgb(from var(--highlight-light-yellow) r g b / var(--highlight-alpha)); } .user-highlight-dark-yellow { background-color: rgb(from var(--highlight-dark-yellow) r g b / var(--highlight-alpha)); } /* "Currently reading" (.verse-highlight) landing on an already- highlighted verse - .user-highlight-* above shares this same element and, being declared later, otherwise wins the cascade outright: the reading indicator's background silently became just "whatever this highlight color looks like right now," with no separate signal that it's also the verse being read - and it changed brightness right along with Settings > Passage Appearance > Highlight Colors Brightness, which has nothing to do with reading state. This combo gets its own fixed opacity instead (same as plain .verse-highlight's own tint) - same hue so it's still clear which color is highlighted, just no longer tied to that setting. Two classes beats .user-highlight-* on specificity alone, so no !important needed. */ .verse-highlight.user-highlight-yellow { background-color: rgb(from var(--highlight-yellow) r g b / 0.4); } .verse-highlight.user-highlight-green { background-color: rgb(from var(--highlight-green) r g b / 0.4); } .verse-highlight.user-highlight-pink { background-color: rgb(from var(--highlight-pink) r g b / 0.4); } .verse-highlight.user-highlight-blue { background-color: rgb(from var(--highlight-blue) r g b / 0.4); } .verse-highlight.user-highlight-orange { background-color: rgb(from var(--highlight-orange) r g b / 0.4); } .verse-highlight.user-highlight-purple { background-color: rgb(from var(--highlight-purple) r g b / 0.4); } .verse-highlight.user-highlight-red { background-color: rgb(from var(--highlight-red) r g b / 0.4); } .verse-highlight.user-highlight-teal { background-color: rgb(from var(--highlight-teal) r g b / 0.4); } .verse-highlight.user-highlight-cyan { background-color: rgb(from var(--highlight-cyan) r g b / 0.4); } .verse-highlight.user-highlight-gray { background-color: rgb(from var(--highlight-gray) r g b / 0.4); } .verse-highlight.user-highlight-brown { background-color: rgb(from var(--highlight-brown) r g b / 0.4); } .verse-highlight.user-highlight-magenta { background-color: rgb(from var(--highlight-magenta) r g b / 0.4); } .verse-highlight.user-highlight-lavender { background-color: rgb(from var(--highlight-lavender) r g b / 0.4); } .verse-highlight.user-highlight-dark-purple { background-color: rgb(from var(--highlight-dark-purple) r g b / 0.4); } .verse-highlight.user-highlight-light-pink { background-color: rgb(from var(--highlight-light-pink) r g b / 0.4); } .verse-highlight.user-highlight-dark-pink { background-color: rgb(from var(--highlight-dark-pink) r g b / 0.4); } .verse-highlight.user-highlight-dark-red { background-color: rgb(from var(--highlight-dark-red) r g b / 0.4); } .verse-highlight.user-highlight-dark-teal { background-color: rgb(from var(--highlight-dark-teal) r g b / 0.4); } .verse-highlight.user-highlight-dark-blue { background-color: rgb(from var(--highlight-dark-blue) r g b / 0.4); } .verse-highlight.user-highlight-dark-green { background-color: rgb(from var(--highlight-dark-green) r g b / 0.4); } .verse-highlight.user-highlight-light-blue { background-color: rgb(from var(--highlight-light-blue) r g b / 0.4); } .verse-highlight.user-highlight-bright-green { background-color: rgb(from var(--highlight-bright-green) r g b / 0.4); } .verse-highlight.user-highlight-light-yellow { background-color: rgb(from var(--highlight-light-yellow) r g b / 0.4); } .verse-highlight.user-highlight-dark-yellow { background-color: rgb(from var(--highlight-dark-yellow) r g b / 0.4); } /* Highlight Colors Brightness tiers (Settings > Passage Appearance) - override --highlight-alpha (0.35 dark / 0.3 light default) via a class toggled on the root element () by applyHighlightBrightness() in app.js - was scoped to #verse-text only, so anywhere else .user-highlight-* renders (e.g. the Highlights & Notes browser's Highlights tab) never picked up Soft/Bright, always showing Default's alpha regardless of the actual setting. Same color as Default/Soft either way, just a different opacity - light mode uses slightly lower alpha per tier than dark mode. */ :root.highlight-brightness-soft { --highlight-alpha: 0.25; } :root.highlight-brightness-bright { --highlight-alpha: 0.45; } :root[data-theme="light"].highlight-brightness-soft { --highlight-alpha: 0.2; } :root[data-theme="light"].highlight-brightness-bright { --highlight-alpha: 0.4; } /* Small note indicator appended after a verse's text when it has a saved note - "sr-only" text alongside it (in the JS that builds it) announces this to screen readers too, since it's added content rather than replacing the verse's own accessible name. */ .verse-note-indicator { margin-left: 0.35em; color: var(--accent-focus); font-style: normal; } /* Selah (Psalms) - built as its own line, indented here to set it apart from the poetry lines around it, matching how it's typically set in print. Two paths build it: appendVerseText()/ isolateSelah() in app.js for any non-ESV translation (a real
before it), and splitSelahFromLines()/ createPoetryVerseElement() for the ESV poetry-layout case, where it also gets .poetry-row-indent - the two indents stack, giving Selah a bit more indent than an ordinary indented line. */ .selah-line { display: inline-block; margin-left: 2em; font-style: italic; font-weight: bold; } /* Dynamic Paragraph Spacing */ #verse-text p { margin-bottom: var(--para-spacing, 1rem); } /* Passage display - width is NOT restrained beyond #app-container's own max-width (700px - see #app-container below for why this is narrower than Access-a-Lyrics' matching .app-shell/.lyrics-pane 900px). width:100% + main's align-items:center is what actually centers this card within the page; text-align:left is explicit so the card being centered never implies its own text should be too. */ /* This element's real background color is always set inline by applyPassageBg() in app.js (the Passage Background setting), which wins over anything set here regardless of specificity - .bg-dynamic-card's --bg-card (in the markup's class list) only ever shows for a brief instant before that JS runs. No border/ shadow/rounding on mobile - removes the "boxed" look entirely, per explicit request. Restored on desktop (see the media query below). */ #scripture-display { width: 100%; box-sizing: border-box; padding: 28px 24px 40px; text-align: left; } @media (min-width: 768px) { #scripture-display { /* No border on desktop either now (was 2px solid var(--border-color)), just shadow/rounding to still read as its own area. */ border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } } /* Was margin-bottom: 1.5rem + padding-bottom: 1rem (40px of gap between the reference and the first verse) back when this row also held the Previous/Next buttons. Those are gone, so the

is the only child left and that much space just read as a hole under the title. */ #scripture-display .passage-top-row { display: flex; flex-direction: column; margin-bottom: 0.6rem; padding-bottom: 0; } #scripture-display .passage-nav-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; width: 100%; } /* Status/dictation feedback text - updateStatus() in app.js regenerates #status-area's own className/innerHTML with Tailwind classes on every call (flex flex-col items-center justify-center, text-xl sm:text-2xl, etc.), all dead now. Targeting the IDs/ structure directly here means it stays centered regardless of whatever className JS assigns each time. */ /* No margin-bottom here - main's own flex "gap: 24px" already creates the entire header-to-passage-card gap on its own; a margin here on top of that gap was just double-counting the same space, making it look padded even with nothing (or one short line) in #status-area/#dictation-feedback below. */ #main-header { text-align: center; } #status-area { display: flex; flex-direction: column; align-items: center; text-align: center; font-weight: 500; /* Tall enough for the two-line transient+persistent stack (div:first-child + div:last-child below) to not visibly jump the passage card when it appears, but not so tall that a single short line (e.g. "Loading...") leaves obvious dead air below it before the passage card starts. */ min-height: 2rem; font-size: calc(1.3rem * var(--ui-scale)); } #status-area div:first-child:not(:only-child) { font-size: calc(1.3rem * var(--ui-scale)); opacity: 0.9; margin-bottom: 0.25rem; } #status-area div:last-child { font-size: calc(1.45rem * var(--ui-scale)); font-weight: 700; } #dictation-feedback { margin-top: 0.5rem; font-style: italic; font-size: calc(1.3rem * var(--ui-scale)); text-align: center; } /* Both areas sit empty (no text/children at all) whenever there's nothing to report - #status-area between messages (see updateStatus()'s idle/DEFAULT_INSTRUCTION case in app.js, which clears it to "" rather than showing permanent instruction text), #dictation-feedback until the first voice command is heard. :empty only matches true no-children emptiness (not even a whitespace text node), which both idle states above actually are - collapsing them here removes #status-area's min-height and #dictation-feedback's margin-top too, so neither leaves an awkward blank gap while unused. */ #status-area:empty, #dictation-feedback:empty { display: none; } #manual-input-container { width: 100%; max-width: 28rem; display: flex; gap: 8px; } #manual-input-container input { flex-grow: 1; } /* Search field + Go button - yellow border instead of the default pink accent-border. */ #manual-input-container input, #manual-input-container button { border-color: var(--accent-focus) !important; } @supports (background-color: color-mix(in srgb, red, blue)) { /* Yellow tint (was inheriting .app-btn-primary's pink tint, mismatched against this button's own yellow border), per explicit request. */ #manual-input-container button { background-color: color-mix(in srgb, var(--accent-focus) 15%, var(--bg-card)) !important; } #manual-input-container button:hover, #manual-input-container button:focus-visible { background-color: color-mix(in srgb, var(--accent-focus) 28%, var(--bg-card)) !important; } } /* Search Results (Type Command dialog - see performBibleSearch() in app.js). #search-tab-group reuses .hn-tab-group/.hn-tab as-is (same look as the Highlights & Notes tabs), per explicit request, rather than a second, differently-styled tab component. */ #search-results-heading { font-size: calc(1.3rem * var(--ui-scale)); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-main); margin: 20px 0 4px; } #search-results-meta { font-size: calc(1.3rem * var(--ui-scale)); color: var(--text-muted); margin: 0 0 12px; } .search-result-item { display: block; width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid var(--divider-color); font-family: inherit; cursor: pointer; color: var(--text-main); padding: 12px 4px; } .search-result-item:last-child { border-bottom: none; } @media (hover: hover) { .search-result-item:hover { background: var(--bg-hover); border-radius: 8px; } } .search-result-ref-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; } /* Matches .hn-item-ref/.hn-note-ref/.search-result-snippet - all four (both browser lists' reference+content, and this) unified to the same 1.375rem, per explicit request - was 1.1rem. */ .search-result-ref { font-weight: 700; color: var(--accent-secondary); font-size: calc(1.3rem * var(--ui-scale)); } /* Bigger + text-main (white in dark mode, black in light), per explicit request - was a small muted-gray badge before. Border added per a later follow-up so it reads as a distinct pill badge (e.g. "ESV", "ASV") rather than plain inline text. */ .search-result-version { display: inline-block; font-weight: 800; color: var(--text-main); font-size: calc(1.3rem * var(--ui-scale)); border: 2px solid var(--border-color); border-radius: 999px; padding: 1px 10px; } /* Matches .hn-item-text/.hn-note-text's shared size (both browser lists' own verse/note content) - was 1.1rem. */ .search-result-snippet { font-size: calc(1.3rem * var(--ui-scale)); line-height: 1.5; color: var(--text-main); } .search-result-snippet mark { background: var(--search-highlight-bg); color: var(--text-main); border-radius: 2px; padding: 0 2px; } #reference-header { text-align: center; width: 100%; /* Scales with the passage Text Size setting now (was a flat 1.75rem/2rem) - --passage-text-size is kept in sync with #verse-text's own computed font-size by applyTextSize() in app.js. 1.1x keeps this bigger than the 0.85em section/subheadings below it, per explicit request. */ font-size: calc(var(--passage-text-size, 30px) * 1.3); font-weight: 800; margin: 0; /* Overrides the smaller shared .scroll-mt-4 (1rem) on this element specifically - scrolling here on chapter navigation needs enough top clearance to also keep the top Previous/Next row (and the sticky top bar above it) visible, not just the heading itself. */ scroll-margin-top: 170px; } #verse-text { overflow-wrap: break-word; } /* Text Color (Settings > Passage Text Options) - all three tiers get their own explicit class now (Highest Contrast included), toggled by applyTextColor() in app.js. Highest Contrast used to just rely on plain inheritance from body's color: var(--text-main), but in light mode --text-color-max is deliberately pure black - a step darker than --text-main (gray-900, used everywhere else in the app's UI) - so it needs its own rule to actually apply rather than silently falling back to --text-main. Scoped to #verse-text itself (not body) so this only ever affects passage reading text, never the rest of the app's UI. */ #verse-text.text-color-max { color: var(--text-color-max); } #verse-text.text-color-soft { color: var(--text-color-soft); } #verse-text.text-color-muted { color: var(--text-color-muted); } /* Same three tiers for the Bible Navigation book list, which mirrors the passage's appearance settings (see mirrorPassageClass() in app.js). Set on the list itself so the book buttons inherit it. */ #bible-nav-list.text-color-max { color: var(--text-color-max); } #bible-nav-list.text-color-soft { color: var(--text-color-soft); } #bible-nav-list.text-color-muted { color: var(--text-color-muted); } #bible-nav-history-list.text-color-max { color: var(--text-color-max); } #bible-nav-history-list.text-color-soft { color: var(--text-color-soft); } #bible-nav-history-list.text-color-muted { color: var(--text-color-muted); } /* Passage Appearance settings (Settings menu) - real semantic class names (not the old Tailwind-lookalike leading-*/text-*/font-* values), toggled onto #verse-text by applyTextSize()/ applyLineSpacing()/applyTextWeight()/applyPassageWidth() in app.js. Font-size scale/line-height values match what Tailwind's text-lg..text-7xl/leading-tight..loose actually were, just under new names. */ .size-tiny { font-size: 0.75rem; } .size-xxs { font-size: 1rem; } .size-xs { font-size: 1.125rem; } .size-sm { font-size: 1.25rem; } .size-md { font-size: 1.5rem; } .size-lg { font-size: 1.875rem; } /* Extra Large shrunk down a bit (was 3rem - too big a jump from Large's 1.875rem); Extra Extra Large now sits at that old Extra Large value instead, so nothing above it changed size, just its label (was "Huge"). Huge is now a new, genuinely bigger step above Extra Extra Large. */ .size-xl { font-size: 2.25rem; } .size-xxl { font-size: 3rem; } .size-huge { font-size: 4rem; } .spacing-tight { line-height: 1.25; } .spacing-normal { line-height: 1.5; } .spacing-relaxed { line-height: 1.625; } .spacing-loose { line-height: 2; } .weight-normal { font-weight: 400; } .weight-semibold { font-weight: 600; } .weight-bold { font-weight: 700; } /* Medium/Narrow shifted down a notch (was 2rem/3rem, 4rem/6rem on desktop) - Narrow now sits at the old Medium value, and Medium is a new, less-narrow value between Wide and the new Narrow. */ .width-wide { padding-left: 0; padding-right: 0; } .width-medium { padding-left: 1rem; padding-right: 1rem; } .width-narrow { padding-left: 2rem; padding-right: 2rem; } @media (min-width: 768px) { .width-medium { padding-left: 2rem; padding-right: 2rem; } .width-narrow { padding-left: 4rem; padding-right: 4rem; } } /* Each verse paragraph in #verse-text is focusable (tabIndex=0, for the reading/highlight feature) - small padding+radius so the focus ring has breathing room, matching what its dead "rounded p-1" Tailwind classes used to give it. */ #verse-text p { /* Left padding is fixed at 14px regardless of .verse-highlight state (4px reserved for its ::before accent bar + 10px clear gap before the text) so toggling that class on/off during Play never shifts the text - only padding-left is asymmetric here specifically to reserve that space consistently. position:relative so .verse-highlight::before (the "currently reading" bar) can anchor to this

specifically. */ position: relative; padding: 2px 4px 2px 14px; border-radius: 4px; /* Extra scroll margin so auto-scrolling to the current verse during Play also tends to keep the Previous/Next chapter buttons in view too (top row near the start of a passage, bottom row near the end), instead of scrolling tight to just the verse text and cutting them off. Top value trimmed down (was 190px) so the verse itself sits higher on screen after each auto-scroll, with less empty space reserved above it. */ scroll-margin-top: 130px; scroll-margin-bottom: 220px; cursor: pointer; } /* Verse number badge - built via createVerseElement()/ createPoetryVerseElement() in app.js. Targeted by its own class rather than :first-child - a Song of Solomon verse split across a mid-verse speaker label renders its continuation with no number at all (see "segments" in parseEsvHtmlResponse), which made the whole continuation's text span the accidental first-child and get bolded along with it. No margin-right here - the number's own textContent ends with a non-breaking space instead, so the number and its verse's first word can never be split apart by a line wrap (a CSS margin gap, unlike a real space character, isn't itself a valid wrap point, but relying on that felt too fragile to trust for "never" - a real non-breaking space guarantees it). */ /* Semi Bold is the default (no class needed) - Verse Number Boldness (Settings > Verse Number Options) overrides this via .verse-num-weight-regular/-bold below, toggled by applyVerseNumWeight() in app.js. */ #verse-text .verse-num-badge { font-weight: 600; user-select: none; } #verse-text.verse-num-weight-regular .verse-num-badge { font-weight: 400; } #verse-text.verse-num-weight-bold .verse-num-badge { font-weight: 800; } /* Verse Numbers: Superscript/Large Superscript (Settings > Text Options) - raises and shrinks the number, classic print-Bible style, toggled by applyVerseNumStyle() in app.js. em-based shrink so it scales with whatever Text Size is set, same reasoning as the non-breaking space above keeping the number glued to its verse. Large Superscript is the same raised position, just noticeably bigger than plain Superscript's size (was 1.25x/0.8125em, tuned down to a flat 0.9em per explicit follow-up), per explicit request - still reads as a superscript, just a bit bigger than the classic print-Bible size. */ #verse-text.verse-num-superscript .verse-num-badge { vertical-align: super; font-size: 0.65em; } #verse-text.verse-num-superscript-large .verse-num-badge { vertical-align: super; font-size: 0.9em; } /* ESV only - section heading (nested under the passage's own h2 reference) and the wrapper multiple grouped verses share a paragraph inside (see displayScripture()'s ESV layout branch). */ .passage-heading { position: relative; font-weight: bold; font-size: 0.85em; /* var(--accent-secondary) (was a separate hardcoded hex per theme) - those had drifted out of sync with the rest of the app's green (accent-secondary, the BCV icon, etc.), so this now shares the exact same variable everything else does and can't drift again. */ color: var(--accent-secondary); margin: 1.25rem 0 0.75rem; padding: 2px 4px 2px 14px; border-radius: 4px; scroll-margin-top: 130px; scroll-margin-bottom: 220px; } /* Crossway's "subheading" tier (psalm/song superscriptions, Psalm 119's acrostic letters, Song of Solomon's "She"/"He"/"Others" speaker labels) - same green treatment as .passage-heading, just italic and a touch smaller, so it still reads as a heading rather than body text but doesn't compete with a real section title. */ .passage-subheading { position: relative; font-weight: bold; font-style: italic; font-size: 0.75em; color: var(--accent-secondary); margin: 0.75rem 0 0.25rem; padding: 2px 4px 2px 14px; border-radius: 4px; scroll-margin-top: 130px; scroll-margin-bottom: 220px; } /* Same Paragraph Spacing setting (Settings menu) that governs the gap between verses for every other translation - see "Dynamic Paragraph Spacing" / --para-spacing above. position: relative so .verse-paragraph-active::before (the currently- reading accent bar for a verse grouped inline in here - see the comment there) can anchor to this paragraph's own left edge. padding-left applies to every line that starts fresh at this paragraph's left edge, so every one gets the same bar clearance - not just the paragraph's first verse, but any later verse's wrapped continuation line too, since word-wrap sends those back to the left edge exactly the same way. 10px here + the 4px left padding on #verse-text span[data-verse-num] below matches the 14px/12px clear-gap pattern p.verse-highlight/.passage-heading already use, so the bar sits the same distance from text everywhere. Doesn't affect a verse that starts mid-line (right after the previous verse on the same line) - padding only matters where a line actually touches this edge. text-indent is separate - a traditional first-line-of-a- paragraph indent, stacking on top of the padding above but (unlike padding) only for this paragraph's actual first line, same as a book/document paragraph style. */ .verse-paragraph { position: relative; text-indent: 1em; padding-left: 10px; margin-bottom: var(--para-spacing, 1rem); } /* Poetic books (Job, Psalms, Proverbs, Ecclesiastes, Song of Solomon, Lamentations - see POETIC_BOOKS in app.js) - the .verse-paragraph counterpart for these, grouping every verse in one of Crossway's own paragraphs (a stanza) under the same Paragraph Spacing gap, but otherwise doing nothing else - no bar-clearance padding or book-style first-line indent, since poetry doesn't flow verses inline the way prose does (each one is its own real

, see .poetry-line below) so neither is needed here. */ .poetry-stanza { margin-bottom: var(--para-spacing, 1rem); } /* Each verse is its own line (unlike prose's inline-flowing spans). margin-bottom:0 overrides #verse-text p's own default so consecutive verses in the same stanza read as one continuous block, with only the wrapping .poetry-stanza's own margin marking an actual stanza break. margin-top:0 is needed too - #verse-text p never sets a top margin itself, so every

was still getting the browser's own ~1em default margin-block-start, which read as a gap above every single verse (not just between stanzas). padding-left is just the same 14px bar-clearance every other verse/heading uses - actual line indentation is per-row below, not applied to the whole

. */ #verse-text p.poetry-line { margin-top: 0; margin-bottom: 0; padding-left: 14px; } /* Indentation is a property of each individual printed LINE (Crossway's own "line"/"indent line" span classes - see createPoetryVerseElement()/parseEsvHtmlResponse() in app.js), not "everything after a verse's first line" - a single hanging-indent trick on the whole

can't reproduce Lamentations, which alternates base/indent every line within one verse. display:inline-block so padding-left only shifts a row's own start, since each row already sits on its own visual line via the
createPoetryVerseElement() inserts between them - a row's own word-wrap continuation lines return to the same offset (this row's content box), which is the standard/ expected hanging behavior for a long line. */ .poetry-row { display: inline; overflow-wrap: break-word; word-break: break-word; } /* inline-block only on the INDENTED rows, not every row - an inline-block box gets its own soft wrap opportunity immediately before it even with no actual space there, which on a narrow viewport let the browser break the line between the verse number and the verse's first (never indented) row, stranding the number alone above it - the same problem createVerseElement solves with a non-breaking space, but that trick only works between two plain inline runs, not against an inline-block. Every indented row is already preceded by a real
(see createPoetryVerseElement in app.js), which forces its own line break regardless of display type, so inline-block is safe here - there's nothing for it to wrap away from. */ .poetry-row-indent { display: inline-block; max-width: 100%; padding-left: 1.5em; overflow-wrap: break-word; word-break: break-word; /* box-sizing:border-box so padding-left is INSIDE the 100% max-width cap, not added on top of it - this app never sets box-sizing:border-box globally, and the default content-box would let a full-width-content row plus 1.5em of padding exceed 100% of the container, which is exactly the overflow this rule exists to prevent (worse at large text sizes, where 1.5em itself gets bigger). */ box-sizing: border-box; } /* Currently-reading accent bar for a verse grouped inline in this paragraph (counterpart to p.verse-highlight::before/ h3.verse-highlight::before above, for standalone verses/ headings). Lives on the paragraph instead of the verse itself, since the verse can start mid-line and the bar needs to hug the paragraph's left edge regardless of where that is. --bar-top/--bar-height are set in JS (setVerseHighlightBar() in app.js) from the verse's own bounding rect relative to this paragraph's, whenever that verse becomes the one being read. */ .verse-paragraph-active::before { content: ""; position: absolute; top: var(--bar-top, 0); height: var(--bar-height, 100%); left: -6px; width: 4px; background-color: var(--accent-focus); border-radius: 4px; } /* Individual verses inside a .verse-paragraph are inline (span, not

) so consecutive verses read as one continuous flow - verse 2 can start mid-line right where verse 1's text ends (plus a small gap from the padding below), wrapping normally like any other run of text, rather than each verse forcing its own row. Plain inline, not inline-block - inline-block was tried first, but it sizes to the full available width as soon as a verse's text is long enough to wrap at all, which pushed every following verse down onto a new row instead of continuing beside it. Background/highlight color (.verse-highlight, .user-highlight-*) still repeats correctly across every wrapped line either way; only the currently-reading accent bar is the tradeoff of going back to plain inline - it lives on the paragraph wrapper instead (.verse-paragraph-active::before above), not this element, for exactly that reason. */ #verse-text span[data-verse-num] { padding: 2px 4px; border-radius: 4px; scroll-margin-top: 130px; scroll-margin-bottom: 220px; cursor: pointer; } #full-chapter-btn { width: 100%; font-size: calc(1.3rem * var(--ui-scale)); margin-bottom: 24px; } @media (min-width: 640px) { #full-chapter-btn { width: auto; } } /* Page scaffolding (#app-container/main) - hand-written now that Tailwind is gone from this page entirely. #app-container was originally a match for Access-a-Lyrics' .app-shell (max-width 900px, centered, same padding) - now deliberately narrower (see max-width below) to leave more gutter for Verse Actions. body's own layout properties (flex column, min-height, padding-top:0) live in the base "body" rule above - it carries no horizontal/ bottom padding of its own (that lives on #app-container). */ #app-container { width: 100%; /* Narrowed from 900px so wide screens leave more of a gutter on the left for Verse Actions to fit into without overlapping the passage (see its left-anchored positioning further down this file) - .app-toolbar matches this same 700px so the two stay visually aligned. */ max-width: 700px; margin: 0 auto; /* Bottom padding cleared to keep the footer/copyright link out from under the now permanently-fixed .app-toolbar (~80px tall, plus whatever safe-area inset it added for the home indicator/gesture bar). */ padding: 24px 24px calc(180px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; flex: 1 0 auto; } /* Desktop gets a bit more room (800px, was 700px on every size) - per explicit request, mobile is unaffected (rarely matters there anyway, since phone viewports are almost always narrower than either cap). .app-toolbar and .sticky-chapter-nav both deliberately match this same value everywhere else in the file so their buttons stay aligned with the passage's own edges - they need the identical override here too, or they'd fall out of sync with this container on desktop specifically. */ @media (min-width: 768px) { #app-container, .app-toolbar, .sticky-chapter-nav { max-width: 800px; } } main { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 24px; flex-grow: 1; } /* On mobile, the passage card (and everything else in the column) should sit almost flush with the screen edges - the card's own padding (#scripture-display below) still keeps the actual verse text comfortably inset, only its border moves closer to the edge. The top bar/toolbar get the same reduced side padding so they stay visually aligned with the passage instead of framing it with a wider margin than the passage itself has. */ @media (max-width: 639px) { #app-container { padding-left: 2px; padding-right: 2px; } /* .app-top-bar's copy of this moved to right after its own base rule further down - same equal-specificity/source- order issue explained there. #app-container above and .app-toolbar below are unaffected by that same bug right now (not touched here), but would need the identical treatment if either ever stops applying too. */ .app-toolbar { padding-left: 2px; padding-right: 2px; } } /* "Back to info page" link - mirrors Access-a-Lyrics' own .back-to-coa-apps styling exactly (accent-green, 14px, no underline until hover/focus). Lives in .app-menu-top-row now (top of Settings), so its own margin is reset there - the row itself owns the spacing instead. */ .back-link-app { display: inline-block; /* Pinned to the pre-tweak green (not var(--accent-secondary)) - excluded from this session's "make all greens lighter" request, same exclusion as the theme toggle/login-signup. */ color: #4ade80; font-weight: 700; font-size: calc(1.3rem * var(--ui-scale)); text-decoration: none; margin: 4px 0 18px; } :root[data-theme="light"] .back-link-app { color: #097732; } /* Theme toggle + CoA Apps link share a row at the top of Settings - inline with each other when there's room, wrapping to stack (link below the toggle) on narrow viewports. */ .app-menu-top-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; } .app-menu-top-row .app-menu-theme-toggle, .app-menu-top-row .back-link-app { margin: 0; } .back-link-app:hover, .back-link-app:focus-visible { color: var(--accent-focus); text-decoration: underline; } /* Inline title logo (H1, main header) - dark/light SVG pair, same icon-for-dark/icon-for-light show-one-hide-other convention as the product-hero-icon on index.html, keyed off :root[data-theme] same as the rest of this app's theming now (see applyMode() in app.js). Sized to match Access-a-Lyrics' .app-icon (28px) exactly. */ .app-title-icon { width: 28px; height: 28px; flex-shrink: 0; } /* Title text - 20px/800 weight/10px gap to the logo at rest, same as Access-a-Lyrics' .site-title. .app-top-bar no longer wraps (see flex-wrap:nowrap above) - the search/hamburger buttons need to stay pinned top-right always, so the title shrinks instead when things don't fit, via the 4.5vw fluid middle term below (kicks in under ~440px viewport width; wider than that, clamp just caps at the normal 1.25rem). overflow/white-space/min-width are a last-resort safety net for anything even the smallest clamp size can't fit. */ h1.app-title-text { display: flex; align-items: center; gap: 10px; margin: 0; font-size: calc(clamp(0.9rem, 4.5vw, 1.25rem) * var(--ui-scale)); font-weight: 800; color: var(--text-main); min-width: 0; flex-shrink: 1; overflow: hidden; white-space: nowrap; } /* Generic show-one-hide-other dark/light icon swap - shared by the title logo above and the toolbar's BCV/Highlights icons below. */ .icon-for-dark { display: inline; } .icon-for-light { display: none; } :root[data-theme="light"] .icon-for-dark { display: none; } :root[data-theme="light"] .icon-for-light { display: inline; } /* Top bar (logo, app name, hamburger menu) - styled like Access-a- Lyrics' .site-header: sticky, full-width (it's a sibling of #app-container now, not nested inside it, so its background spans edge to edge), padding 14px 24px, surface background, border- bottom. z-index sits below the app menu dialog (z-60/61). */ .app-top-bar { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; /* Extra top padding for the status bar (time/battery/signal) when this is launched as an installed iPhone app (Safari's "Add to Home Screen") - viewport-fit=cover (see app.html) lets the page draw under that area in standalone mode, unlike a normal Safari tab, where Safari's own chrome already keeps content clear of it. env() resolves to 0 there (and on every other browser/platform), so this is a no-op everywhere except that one specific context. */ padding: calc(7px + env(safe-area-inset-top, 0px)) 24px 7px; /* Matches modals (.app-menu-card uses --bg-body), per explicit request - was --bg-card. */ background-color: var(--bg-body); border-bottom: 2px solid var(--divider-color); /* Kept as a transparent border rather than "border: none" in the Top case below, so dropping the line never shifts the page by 2px. */ /* Forces this onto its own compositing layer - a common, safe fix for Chromium's known position:sticky jitter/misalignment bugs during scroll, independent of whatever the exact trigger is on this page. */ will-change: transform; transform: translateY(0); /* Slower + an ease-out curve (was 0.25s ease, which read as closer to an instant snap than an actual slide) - per explicit request for a more noticeable slide effect, same tuning as .app-toolbar's own transition. */ transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } /* Placed AFTER the base rule above deliberately, not left folded into the earlier @media (max-width: 639px) block alongside #app-container/.app-toolbar's own padding reduction - that block sits earlier in the file, and CSS gives the LATER of two equal-specificity rules the win regardless of which one is wrapped in a matching media query, so the copy placed there was being silently beaten by this rule's own 24px above it (same bug already fixed for .sticky-chapter-nav elsewhere in this file). This one, coming after, correctly wins on mobile instead - less space from the screen edges to the icon/menu button, per explicit request. Desktop (the base rule's 24px) is untouched. */ @media (max-width: 639px) { .app-top-bar { padding-left: 2px; padding-right: 2px; } } /* Chapter Nav Strip Position = Top: the strip pins directly beneath this bar, so its own top edge and this divider stacked into a double line. Only the Top position has that problem - in the Bottom position the strip is nowhere near, and the divider is the only thing separating the bar from the passage, so it stays. The class is toggled on documentElement by applyPositionClass() in app.js. */ :root.chapter-nav-top .app-top-bar { border-bottom-color: transparent; } /* The strip row's own top padding, the other half of the dead space between the app title and the arrows beneath it. The top bar's side of that gap is now handled by its halved base padding above. Keyed off the absence of the Bottom class rather than :root.chapter-nav-top so it stays correct even in the first frame after a switch, before the root class and the strip class have both landed. */ .sticky-chapter-nav:not(.sticky-chapter-nav-bottom) .sticky-chapter-nav-row { padding-top: 6px; } /* Auto-hide on scroll (app.js toggles this on/off by scroll direction), same pattern as Access-a-Lyrics' .site-header.header-hidden. Transform, not display/visibility, so the bar stays in the a11y tree - screen reader and Tab-key navigation are unaffected either way. The :focus-within escape hatch covers the one real gap: a sighted keyboard user who tabs into a header control while it's scrolled off-screen would otherwise land on an invisible focus target. */ /* Groups the search and hamburger-menu buttons together on the right - .app-top-bar's own justify-content:space-between only ever expected two children (the title and one button); wrapping both buttons here keeps that space-between behaving the same (title left, this pair right) instead of spreading three items across the bar. */ .app-top-bar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .app-top-bar.header-hidden { transform: translateY(-100%); } .app-top-bar.header-hidden:focus-within { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .app-top-bar { transition: none; } #verse-actions-dialog .app-menu-card { transition: none; } } /* Sticky chapter-nav strip (beta only, see initStickyChapterNav() in app.js) - top offset is a CSS var the same script keeps in sync with .app-top-bar's real height, dropping to 0 while the auto-hide behavior above has translated the top bar away, so this never floats with an empty gap above it. z-index one below .app-top-bar (40) so the top bar still wins if they ever overlap during the hide/show transition. */ .sticky-chapter-nav { position: sticky; top: var(--sticky-nav-top, 64px); z-index: 39; /* Column layout - .sticky-chapter-nav-row and the audio player panel are siblings inside this same sticky/fixed container, so the panel inherits whichever positioning mode (top vs bottom) is active without needing its own. Order between them flips via flex-direction below (Top: row then panel - panel opens downward. Bottom: reversed - panel opens upward), same principle proven out in the mockup's .strip-slot/#bottomSlot trick. */ display: flex; flex-direction: column; /* Matches #app-container's/.app-toolbar's own 700px cap so this strip lines up with the passage view's actual width instead of spanning the full viewport edge to edge. width: 100% explicit (not just relying on a block-level flex container's implicit auto-width filling its parent) - #app-container sets this same belt-and-suspenders width alongside its own max-width/margin:auto pair. */ width: 100%; max-width: 700px; margin: 0 auto; background-color: var(--bg-card); } /* Full-bleed border, per explicit request - the strip's own box stays capped at 700px (so the buttons inside it don't move), but this pseudo-element ignores that cap entirely (left:50% + width:100vw + translateX(-50%) centers a full-viewport-wide box regardless of how narrow its own parent is) so just the line spans edge to edge on any viewport size. Bottom edge by default (Top position - see .sticky-chapter-nav-row above); flipped to the top edge for the Bottom position variant below. Positioned off of .sticky-chapter-nav itself, not a separate wrapper - its own sticky/fixed positioning already establishes the containing block this needs. */ .sticky-chapter-nav::before { content: ""; position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); bottom: 0; border-bottom: 2px solid var(--divider-color); pointer-events: none; } .sticky-chapter-nav-row { display: flex; align-items: center; /* space-between pushes Previous to the left edge and Next to the right edge (per explicit request) - the reference text between them lands close to center on its own since both buttons are the same width. */ justify-content: space-between; gap: 16px; padding: 12px 16px; } /* Tightened gap around the reference/audio group - toggled by fitStickyChapterNavRef() in app.js only when the reference doesn't fit at its normal size and normal gap. Tried before the font itself shrinks (see that function) - reclaiming space by tightening spacing is less noticeable than shrinking legible text, so it's the first thing tried, not the last resort. */ .sticky-chapter-nav-row.tight-gap { gap: 8px; } /* Reference + audio buttons grouped together, per explicit request - with Prev/Next equal width, .sticky-chapter-nav-row's own space-between (above) already centers this group in the remaining space between them, as long as this group itself just sizes to its own content rather than stretching. */ .sticky-chapter-nav-center { display: flex; align-items: center; gap: 8px; } /* Bottom position (Settings > Experimental Features > Chapter Nav Strip Position) - fixed instead of sticky, matching .app-toolbar's own left:0/right:0 + max-width/margin:auto technique, anchored just above the toolbar via --sticky-nav-bottom (toolbar's own current height, kept in sync by initStickyChapterNav() for the same reason --sticky-nav-top is - the Toolbar Size setting changes it). border moves to the top edge - it's now the edge facing away from the toolbar, separating this strip from the passage content above it instead of below. flex-direction reversed so the audio player panel renders above the nav row instead of below it - it should open away from the toolbar it's pinned above, same as the Top position opens away from the top bar. */ .sticky-chapter-nav.sticky-chapter-nav-bottom { position: fixed; top: auto; left: 0; right: 0; bottom: var(--sticky-nav-bottom, 70px); flex-direction: column-reverse; } /* Drawn bottom-up here, so the strips are ordered explicitly: from the top, TTB bar, then the player right under it, then the minimized strip, then the chapter row - per explicit request that the TTB bar sit above the player. (In the top layout the source order already reads that way.) */ .sticky-chapter-nav.sticky-chapter-nav-bottom .sticky-chapter-nav-row { order: 0; } .sticky-chapter-nav.sticky-chapter-nav-bottom .audio-player-panel { order: 2; } /* Two audio bars (TTB, Bible): the one whose player is open sits right on the player; the other above it. Classes throughout, not ids - an id here outranked the .ttb-bar-open rule and the open bar was not moving. */ .sticky-chapter-nav.sticky-chapter-nav-bottom .ttb-bar { order: 4; } .sticky-chapter-nav.sticky-chapter-nav-bottom .ttb-bar.ttb-bar-open { order: 3; } .sticky-chapter-nav.sticky-chapter-nav-bottom .ttb-bar.minimized-bar { order: 1; } /* Top layout (drawn top-down): same idea the other way round. */ .sticky-chapter-nav:not(.sticky-chapter-nav-bottom) .ttb-bar { order: 2; } .sticky-chapter-nav:not(.sticky-chapter-nav-bottom) .ttb-bar.ttb-bar-open { order: 3; } .sticky-chapter-nav:not(.sticky-chapter-nav-bottom) .ttb-bar.minimized-bar { order: 1; } .sticky-chapter-nav:not(.sticky-chapter-nav-bottom) .audio-player-panel { order: 4; } /* Flips the full-bleed border (see .sticky-chapter-nav::before above) to the top edge instead of the bottom, matching the comment above about which edge should have it in this position. */ .sticky-chapter-nav.sticky-chapter-nav-bottom::before { bottom: auto; top: 0; border-bottom: none; border-top: 2px solid var(--divider-color); } /* Toggled by syncOffset() in app.js only while the toolbar is hidden (bottom: 0 above, otherwise). Extra bottom PADDING, not a bigger "bottom" offset - repositioning the whole box up by the safe-area amount (an earlier attempt) cleared the device's home-indicator/gesture bar but left an empty gap below the strip that the passage behind it showed through. Padding instead keeps the box flush with the true edge while its own background still extends all the way down through the safe area - same technique .app-toolbar itself already uses for the same safe area, just via padding instead of an offset. Scoped to only the toolbar-hidden state - the toolbar's own offsetHeight (used for --sticky-nav-bottom whenever it's visible) already includes this same padding, so adding it again here too would double up and push this strip's content up too far. */ .sticky-chapter-nav.sticky-chapter-nav-bottom.toolbar-hidden-gap { padding-bottom: env(safe-area-inset-bottom, 0px); } /* Top-position equivalent of the rule above - toggled by syncOffset() in app.js only while the top bar is auto-hidden (top: 0 above, otherwise), so this strip's own background still clears the iOS status bar in standalone/home-screen mode even when there's no visible top bar above it to do that job. */ .sticky-chapter-nav.header-hidden-gap { padding-top: env(safe-area-inset-top, 0px); } /* Placed AFTER the base rule above deliberately, not folded into the earlier @media (max-width: 639px) block alongside #app-container/.app-top-bar/.app-toolbar's own padding reduction - that block sits earlier in the file, and CSS gives the LATER of two equal-specificity rules the win regardless of which one is wrapped in a matching media query, so a copy of this override placed there was being silently beaten by the base rule's max-width:700px above it. This one, coming after, correctly wins on mobile instead. */ @media (max-width: 639px) { .sticky-chapter-nav { max-width: 100%; } .sticky-chapter-nav-row, .audio-player-panel { padding-left: 2px; padding-right: 2px; } } .sticky-chapter-nav[hidden] { display: none; } .sticky-chapter-nav-btn { display: flex; align-items: center; justify-content: center; /* Rectangular (wider than tall), per explicit request - the arrow icon (was a plain chevron) needs more horizontal room than a square button comfortably gives it. Scales with --chapter-nav-icon-scale (see its definition near the top of this file) - reduced twice (from 36/46px to 32/40px to 28/36px) to leave the reference room before it has to shrink, then nudged back up a step on request; the audio button next to it kept its own original size. */ height: calc(32px * var(--chapter-nav-icon-scale)); /* Slightly narrower than before (was 52px), per explicit request. */ width: calc(40px * var(--chapter-nav-icon-scale)); min-height: calc(32px * var(--chapter-nav-icon-scale)); min-width: calc(40px * var(--chapter-nav-icon-scale)); padding: 0; /* A small 2px gutter on each side, per explicit request - the icon inside is fixed-size and centered regardless of padding, so this is margin (visible breathing room around the button itself) rather than padding (which would be invisible here). */ margin: 0 2px; flex-shrink: 0; /* No outline here - the arrows carry the strip on their own, and a box around each competed with the reference between them. Bigger, heavier glyphs instead (see the svg rule). */ border: none; border-radius: 8px; background: transparent; /* Gray arrows (was --text-main), per explicit request. */ color: var(--border-color); cursor: pointer; /* Suppresses the native translucent tap-highlight flash on touch (same convention as .touch-target elsewhere) - the :hover rule below is already excluded from touch via (hover: hover), but this covers the browser's own default tap feedback too, which is a separate mechanism. */ -webkit-tap-highlight-color: transparent; } /* (hover: hover) only matches devices that support a real hover state (mouse/trackpad) - touch devices report hover:none, so a tap never triggers this "stuck hover" color flash there, per explicit request. :focus-visible (keyboard) is unaffected - it's a separate rule below, not gated on hover support. */ @media (hover: hover) { .sticky-chapter-nav-btn:hover { filter: brightness(1.4); } } .sticky-chapter-nav-btn:focus-visible { filter: brightness(1.4); } .sticky-chapter-nav-btn svg { stroke-width: 4; /* Overrides the fixed width/height="28" attributes in the markup - CSS wins over an SVG's own presentation attributes, same scaling as the button box above (28px, then 24px, now back up a step at 28px on request). */ width: calc(28px * var(--chapter-nav-icon-scale)); height: calc(28px * var(--chapter-nav-icon-scale)); } /* Now a