@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cinzel+Decorative:wght@400;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700&family=Fredoka:wght@400;500;600;700&display=swap');

/* ===== WARM PARCHMENT (default) ===== */
:root,
[data-theme='light'] {
    --bg: #f6f1e7;
    --bg-card: #fffcf5;
    --bg-elevated: #fffefa;
    --bg-warm: #f0e8da;
    --bg-light: #fffcf5;
    --ink: #30291f;
    --ink-soft: #5e5142;
    --ink-faint: #766858;
    --crimson: #813b39;
    --crimson-dark: #68312f;
    --crimson-light: #974b46;
    --on-crimson: #fff8e9;
    --gold: #79561f;
    --gold-light: #79561f;
    --gold-dark: #715425;
    --accent: #813b39;
    --accent-light: #974b46;
    --accent-bg: rgba(129, 59, 57, 0.09);
    --divider: #e6dac7;
    --border: #d7c5aa;
    /* Compatibility tokens for older Learn, Library, and Visuals components. */
    --border-strong: #c3ac88;
    --card-bg: var(--bg-card);
    --surface: var(--bg-elevated);
    --parchment: #fff8e9;
    --parchment-light: #fff8e9;
    --ink-muted: var(--ink-soft);
    --body: var(--sans);
    --body-font: var(--sans);
    --heading-font: var(--display);
    --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
    --transition: all 0.2s ease;
    --success: #446846;
    --error: #943f39;
    --serif: 'EB Garamond', Georgia, serif;
    --display: 'Cinzel', Georgia, serif;
    --display-deco: 'Cinzel Decorative', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius: 4px;
    --shadow: 0 1px 3px rgba(72, 51, 35, 0.09), 0 4px 12px rgba(72, 51, 35, 0.07);
    --shadow-lg: 0 4px 24px rgba(72, 51, 35, 0.16);
    --gold-gradient: linear-gradient(135deg, #8b692e 0%, #a7864b 50%, #8b692e 100%);
    --crimson-gradient: linear-gradient(135deg, #68312f 0%, #813b39 100%);
    --parchment-texture: linear-gradient(135deg, #fffcf5 0%, #f6f1e7 50%, #fffcf5 100%);
    --hero-cross-color: rgba(129, 59, 57, 0.035);
    --body-bg-image:
        radial-gradient(ellipse at 20% 0%, rgba(129, 59, 57, 0.025) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(155, 116, 46, 0.035) 0%, transparent 50%);
    --theme-icon: '\2600';
    --theme-label: 'Dark';
    --modal-overlay-bg: rgba(48, 41, 31, 0.5);
    --source-text: rgba(155, 116, 46, 0.09);
    --pulse-color: rgba(155, 116, 46, 0.16);
}

/* ===== CHARCOAL PARCHMENT (dark mode) ===== */
[data-theme='dark'] {
    --bg: #211e1b;
    --bg-card: #2d2924;
    --bg-elevated: #37312a;
    --bg-warm: #40362c;
    --bg-light: #f6f1e7;
    --ink: #ede5d7;
    --ink-soft: #c3b29b;
    --ink-faint: #b7a893;
    --crimson: #9e514a;
    --crimson-dark: #813b39;
    --crimson-light: #c88779;
    --on-crimson: #fff8e9;
    --gold: #d4b46d;
    --gold-light: #e2c98f;
    --gold-dark: #ad8c55;
    --accent: #d4b46d;
    --accent-light: #e2c98f;
    --accent-bg: rgba(212, 180, 109, 0.12);
    --divider: #493e33;
    --border: #625241;
    --border-strong: #866f54;
    --card-bg: var(--bg-card);
    --surface: var(--bg-elevated);
    --parchment: #211e1b;
    --parchment-light: #211e1b;
    --ink-muted: var(--ink-soft);
    --body: var(--sans);
    --body-font: var(--sans);
    --heading-font: var(--display);
    --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
    --transition: all 0.2s ease;
    --success: #a8d0a1;
    --error: #e4a097;
    --shadow: 0 1px 3px rgba(15, 11, 9, 0.32), 0 4px 12px rgba(15, 11, 9, 0.25);
    --shadow-lg: 0 4px 24px rgba(15, 11, 9, 0.42);
    --gold-gradient: linear-gradient(135deg, #ad8c55 0%, #d4b46d 50%, #ad8c55 100%);
    --crimson-gradient: linear-gradient(135deg, #68312f 0%, #813b39 100%);
    --parchment-texture: linear-gradient(135deg, #2d2924 0%, #37312a 50%, #2d2924 100%);
    --hero-cross-color: rgba(158, 81, 74, 0.035);
    --body-bg-image:
        radial-gradient(ellipse at 20% 0%, rgba(158, 81, 74, 0.035) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(212, 180, 109, 0.03) 0%, transparent 50%);
    --theme-icon: '\1F319';
    --theme-label: 'Light';
    --modal-overlay-bg: rgba(18, 14, 11, 0.74);
    --source-text: rgba(212, 180, 109, 0.07);
    --pulse-color: rgba(212, 180, 109, 0.18);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--sans);
    background: var(--bg);
    background-image: var(--body-bg-image);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    transition: background 0.3s, color 0.3s;
}

/* Header */
.site-header {
    background: var(--crimson-gradient);
    border-bottom: 2px solid #b79a64;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 18px rgba(48, 29, 24, 0.22);
}

.header-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 600;
    color: #f1dfba;
    text-shadow: 0 2px 4px rgba(37, 19, 17, 0.18);
}

.logo-icon {
    font-size: 1.5rem;
    color: #f1dfba;
}

.main-nav {
    display: flex;
    gap: 4px;
}

.nav-link {
    background: none;
    border: none;
    font-family: var(--display);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 248, 233, 0.82);
    padding: 8px 16px;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.nav-link:hover {
    color: #fff8e9;
    border-bottom-color: #d9bd80;
}

.nav-link.active {
    color: #fff8e9;
    border-bottom-color: #d9bd80;
    background: rgba(255, 248, 233, 0.08);
}

/* Theme Toggle */
.theme-toggle {
    background: none;
    border: 1px solid rgba(255, 248, 233, 0.55);
    color: #fff8e9;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.theme-toggle::before {
    content: var(--theme-icon);
}

.theme-toggle:hover {
    border-color: #f1dfba;
    background: rgba(255, 248, 233, 0.12);
}

[data-theme='light'] .theme-toggle {
    color: #fff8e9;
    border-color: rgba(255, 248, 233, 0.55);
}

/* Main */
#app {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 24px 64px;
    min-height: calc(100vh - 120px);
}

.view {
    display: none;
}

.view.active {
    display: block;
}

/* Daily Hero */
.daily-hero {
    background: var(--parchment-texture);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: 40px 36px;
    margin-bottom: 48px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.daily-hero::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(155, 116, 46, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.daily-hero::after {
    content: '\271D';
    position: absolute;
    bottom: -20px;
    left: -10px;
    font-size: 120px;
    color: var(--hero-cross-color);
    font-family: var(--display-deco);
    pointer-events: none;
}

.daily-badge {
    display: inline-block;
    font-family: var(--display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--on-crimson);
    background: var(--crimson-dark);
    border: 1px solid var(--gold-dark);
    padding: 4px 14px;
    border-radius: 2px;
    margin-bottom: 20px;
}

.daily-fact-container {
    position: relative;
    z-index: 1;
}

/* Fact display */
.fact-hebrew {
    font-family: var(--serif);
    font-size: 2.5rem;
    color: var(--gold-light);
    margin-bottom: 4px;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.fact-translit {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--ink);
    margin-bottom: 8px;
}

.fact-translation {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.fact-title {
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--ink);
    line-height: 1.3;
}

.fact-excerpt {
    font-family: var(--serif);
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: 20px;
}

.fact-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--ink-faint);
}

.fact-category-tag {
    background: var(--crimson-dark);
    color: var(--on-crimson);
    border: 1px solid var(--gold-dark);
    padding: 3px 10px;
    border-radius: 2px;
    font-weight: 600;
    font-family: var(--display);
    font-size: 0.7rem;
}

.fact-read-more {
    background: none;
    border: none;
    color: var(--gold-light);
    font-weight: 600;
    font-family: var(--display);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s;
}

.fact-read-more:hover {
    opacity: 0.7;
}

/* Section headers */
.home-section {
    margin-bottom: 48px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.section-header h2 {
    font-family: var(--display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--gold-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.see-all {
    background: none;
    border: none;
    color: var(--gold);
    font-weight: 500;
    font-family: var(--display);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s;
}

.see-all:hover {
    opacity: 0.7;
}

/* Category cards */
.category-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.category-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold-dark);
    border-radius: var(--radius);
    padding: 24px 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.category-card:hover {
    border-color: var(--gold);
    border-top-color: var(--gold-light);
    box-shadow: var(--shadow), 0 0 12px rgba(155, 116, 46, 0.15);
    transform: translateY(-2px);
    background: var(--bg-warm);
}

.category-card-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.category-card h3 {
    font-family: var(--display);
    font-size: 1rem;
    margin-bottom: 4px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.category-card p {
    font-size: 0.8rem;
    color: var(--ink-faint);
}

/* Fact grid */
.fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.fact-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--crimson);
    border-radius: var(--radius);
    padding: 24px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

.fact-card:hover {
    border-color: var(--gold-dark);
    border-left-color: var(--gold);
    box-shadow: var(--shadow), 0 0 12px rgba(155, 116, 46, 0.1);
    transform: translateY(-2px);
    background: var(--bg-warm);
}

.fact-card-own {
    border-left-color: var(--gold);
}

.fact-card .fact-hebrew {
    font-size: 1.8rem;
    margin-bottom: 2px;
}

.fact-card .fact-translit {
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.fact-card .fact-translation {
    font-size: 0.7rem;
    margin-bottom: 14px;
}

.fact-card .fact-title {
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.fact-card .fact-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 14px;
    flex-grow: 1;
}

.fact-card .fact-category-tag {
    font-size: 0.65rem;
    align-self: flex-start;
}

/* Library */
.library-header {
    margin-bottom: 32px;
}

.library-header h2 {
    font-family: var(--display);
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--gold-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.search-bar {
    position: relative;
    margin-bottom: 20px;
}

.search-bar svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
}

#search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--sans);
    font-size: 0.95rem;
    background: var(--bg-card);
    color: var(--ink);
    transition: border-color 0.2s;
}

#search-input:focus {
    outline: none;
    border-color: var(--gold);
}

#search-input::placeholder {
    color: var(--ink-faint);
}

.filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-pill {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 6px 16px;
    font-family: var(--display);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-pill:hover {
    border-color: var(--gold-dark);
    color: var(--gold-light);
}

.filter-pill.active {
    background: var(--crimson);
    color: var(--on-crimson);
    border-color: var(--gold-dark);
}

/* Library Sort Bar */
.library-sort-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.library-sort-label {
    font-size: 0.75rem;
    font-family: var(--body);
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
}

.library-sort-btn {
    padding: 6px 14px;
    font-size: 0.78rem;
    font-family: var(--body);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.2s;
}

.library-sort-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.library-sort-btn.active {
    background: var(--gold-dark);
    color: var(--parchment-light);
    border-color: var(--gold-dark);
}

.library-sort-dir {
    display: flex;
    gap: 6px;
    margin-left: 8px;
}

.library-sort-dir-btn {
    padding: 4px 12px;
    font-size: 0.72rem;
    font-family: var(--body);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--ink-faint);
    cursor: pointer;
    transition: all 0.2s;
}

.library-sort-dir-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.library-sort-dir-btn.active {
    background: var(--gold);
    color: var(--parchment-light);
    border-color: var(--gold);
}

/* Library Lexicon */
.library-lexicon-loading {
    text-align: center;
    padding: 30px 20px;
    color: var(--ink-faint);
    font-family: var(--body);
    font-size: 0.9rem;
}

.library-lexicon-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.library-lexicon-count {
    font-family: var(--display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
}

.library-lexicon-note {
    font-size: 0.75rem;
    color: var(--ink-faint);
    font-style: italic;
}

.library-lexicon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.lexicon-pron {
    color: var(--ink-faint);
    font-size: 0.8rem;
}

.library-lexicon-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 0 8px 0;
    flex-wrap: wrap;
}

.library-lexicon-shown {
    font-size: 0.8rem;
    color: var(--ink-faint);
    font-family: var(--body);
}

.library-load-more-btn {
    padding: 10px 28px;
    font-size: 0.85rem;
    font-family: var(--display);
    font-weight: 600;
    background: var(--crimson);
    color: var(--on-crimson);
    border: 1px solid var(--gold-dark);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.library-load-more-btn:hover {
    background: var(--gold-dark);
    color: var(--parchment-light);
}

.library-load-more-btn:active {
    transform: scale(0.98);
}

/* About */
.about-content {
    max-width: 640px;
}

.about-content h2 {
    font-family: var(--display-deco);
    font-size: 1.8rem;
    margin-bottom: 16px;
    color: var(--gold-light);
    text-align: center;
}

.about-lead {
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--ink-soft);
    margin-bottom: 24px;
    font-style: italic;
    text-align: center;
    border-bottom: 1px solid var(--divider);
    padding-bottom: 24px;
}

.about-content p {
    margin-bottom: 16px;
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.7;
}

.about-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 32px 0;
}

.about-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold-dark);
    border-radius: var(--radius);
    padding: 24px 20px;
    text-align: center;
}

.about-card-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.about-card h3 {
    font-family: var(--display);
    font-size: 1rem;
    margin-bottom: 6px;
    color: var(--ink);
    text-transform: uppercase;
}

.about-card p {
    font-size: 0.85rem;
    color: var(--ink-faint);
    margin: 0;
}

.about-note {
    background: var(--accent-bg);
    border-left: 3px solid var(--gold);
    padding: 16px 20px;
    border-radius: 2px;
    margin-top: 32px;
}

.about-note p {
    font-size: 0.85rem;
    margin: 0;
    color: var(--ink-soft);
}

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-overlay-bg);
    z-index: 200;
    padding: 20px;
    overflow-y: auto;
}

.modal-overlay.active {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.modal {
    background: var(--parchment-texture);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    max-width: 640px;
    width: 100%;
    margin: 40px auto;
    padding: 40px 36px;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: 1px solid var(--border);
    color: var(--ink-faint);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 2px;
    font-family: var(--display);
    font-size: 0.8rem;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--crimson-dark);
    color: var(--on-crimson);
    border-color: var(--gold-dark);
}

#modal-content .fact-hebrew {
    font-size: 3rem;
}

#modal-content .fact-translit {
    font-size: 1.6rem;
}

#modal-content .fact-translation {
    font-size: 0.8rem;
}

#modal-content .fact-detail-body {
    font-family: var(--serif);
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--ink-soft);
    margin: 24px 0;
    white-space: pre-line;
}

#modal-content .fact-detail-body p {
    margin-bottom: 16px;
}

#modal-content .fact-scripture {
    background: var(--crimson-dark);
    border-radius: 2px;
    padding: 16px 20px;
    margin: 24px 0;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--on-crimson);
    border-left: 3px solid var(--gold);
}

#modal-content .fact-sources {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--divider);
}

#modal-content .fact-sources h4,
.fact-sources .fact-sources-heading {
    font-family: var(--display);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold);
    margin-bottom: 10px;
}

#modal-content .fact-sources a {
    display: block;
    font-size: 0.85rem;
    color: var(--gold-light);
    text-decoration: none;
    margin-bottom: 6px;
    transition: opacity 0.2s;
}

#modal-content .fact-sources a:hover {
    opacity: 0.7;
}

#modal-content .fact-detail-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--divider);
}

/* Write View */
.write-container {
    max-width: 680px;
}

.write-header {
    margin-bottom: 32px;
}

.write-header h2 {
    font-family: var(--display);
    font-size: 1.5rem;
    margin-bottom: 8px;
    color: var(--gold-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.write-header p {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.write-section {
    margin-bottom: 24px;
}

.write-section > label {
    display: block;
    font-family: var(--display);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    margin-bottom: 8px;
}

.write-input,
.write-textarea,
.write-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--serif);
    font-size: 1rem;
    background: var(--bg-card);
    color: var(--ink);
    transition: border-color 0.2s;
}

.write-input:focus,
.write-textarea:focus,
.write-select:focus {
    outline: none;
    border-color: var(--gold);
}

.write-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.7;
}

.source-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.source-row .write-input {
    flex: 1;
}

.source-row .source-remove {
    flex-shrink: 0;
    width: 40px;
    background: var(--crimson-dark);
    color: var(--on-crimson);
    border: 1px solid var(--gold-dark);
    border-radius: 2px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.source-row .source-remove:hover {
    background: var(--crimson);
}

.add-source-btn {
    background: none;
    border: 1px dashed var(--border);
    color: var(--ink-faint);
    padding: 8px 16px;
    border-radius: 2px;
    cursor: pointer;
    font-family: var(--display);
    font-size: 0.8rem;
    transition: all 0.2s;
}

.add-source-btn:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

.write-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.btn-primary {
    background: var(--crimson);
    color: var(--on-crimson);
    border: 1px solid var(--gold-dark);
    padding: 12px 28px;
    border-radius: 2px;
    font-family: var(--display);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: var(--crimson-light);
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(155, 116, 46, 0.2);
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--ink-soft);
    border: 1px solid var(--border);
    padding: 12px 28px;
    border-radius: 2px;
    font-family: var(--display);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

.btn-small {
    padding: 8px 16px;
    font-size: 0.75rem;
}

/* My facts list */
.my-facts-list {
    margin-top: 48px;
    border-top: 1px solid var(--divider);
    padding-top: 32px;
}

.my-facts-list h3 {
    font-family: var(--display);
    font-size: 1.1rem;
    margin-bottom: 16px;
    color: var(--gold-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.my-fact-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.my-fact-content {
    flex: 1;
    cursor: pointer;
}

.my-fact-title {
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}

.my-fact-excerpt {
    font-family: var(--serif);
    font-size: 0.9rem;
    color: var(--ink-faint);
    line-height: 1.5;
}

.my-fact-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.my-fact-actions button {
    background: none;
    border: 1px solid var(--border);
    color: var(--ink-faint);
    padding: 4px 10px;
    border-radius: 2px;
    font-family: var(--display);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.my-fact-actions .btn-edit:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

.my-fact-actions .btn-delete {
    color: var(--crimson-light);
}

.my-fact-actions .btn-delete:hover {
    background: var(--crimson-dark);
    border-color: var(--crimson);
    color: var(--on-crimson);
}

.confirm-delete {
    background: var(--crimson-dark);
    border: 1px solid var(--crimson);
    padding: 16px 20px;
    border-radius: var(--radius);
    margin-top: 8px;
}

.confirm-delete p {
    font-size: 0.85rem;
    color: var(--gold-light);
    margin-bottom: 12px;
}

/* Export section */
.export-section {
    margin-top: 48px;
    border-top: 1px solid var(--divider);
    padding-top: 32px;
}

.export-section h3 {
    font-family: var(--display);
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: var(--gold-light);
    text-transform: uppercase;
}

.export-section p {
    font-size: 0.85rem;
    color: var(--ink-faint);
    margin-bottom: 16px;
}

.export-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--ink-soft);
    padding: 10px 20px;
    border-radius: 2px;
    font-family: var(--display);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.export-btn:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

/* Preview Modal */
.preview-modal-content {
    padding: 40px 36px;
}

.preview-note {
    background: var(--crimson-dark);
    border: 1px solid var(--crimson);
    border-radius: 2px;
    padding: 8px 16px;
    margin-bottom: 24px;
    font-size: 0.8rem;
    color: var(--on-crimson);
    text-align: center;
    font-family: var(--display);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--ink-faint);
}

.empty-state p {
    font-family: var(--serif);
    font-size: 1.05rem;
}

/* Bible Reader */
.bible-container {
    max-width: 720px;
}

.bible-header {
    margin-bottom: 24px;
}

.bible-header h2 {
    font-family: var(--display-deco);
    font-size: 1.7rem;
    margin-bottom: 4px;
    color: var(--gold-light);
}

.bible-subtitle {
    color: var(--ink-soft);
    font-size: 0.9rem;
    font-family: var(--display);
    letter-spacing: 0.05em;
}

/* Bible nav bar — primary row always visible, secondary collapsible */
.bible-nav-bar {
    margin-bottom: 24px;
}

.bible-nav-primary {
    display: flex;
    gap: 8px;
    align-items: center;
}

.bible-nav-secondary {
    display: none;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--divider);
}

.bible-nav-secondary.open {
    display: flex;
}

.bible-secondary-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.bible-secondary-row .bible-select,
.bible-secondary-row .btn-small {
    flex: 1;
}

.bible-select-book {
    flex: 2;
}

.bible-select-chapter {
    flex: 1;
    min-width: 80px;
}

.bible-prev-btn,
.bible-next-btn {
    flex-shrink: 0;
    width: 38px;
    padding: 8px 0 !important;
    text-align: center;
}

.bible-more-btn {
    flex-shrink: 0;
    background: var(--bg-card);
    color: var(--ink-soft);
    border: 1px solid var(--border);
    width: 38px;
    height: 38px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.bible-more-btn:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

.bible-more-btn.active {
    background: var(--crimson);
    color: var(--on-crimson);
    border-color: var(--gold-dark);
}

.bible-select {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--display);
    font-size: 0.85rem;
    background: var(--bg-card);
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.2s;
}

.bible-select:focus {
    outline: none;
    border-color: var(--gold);
}

/* Legacy nav buttons — now integrated into primary row */

.bible-reader {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold-dark);
    border-radius: var(--radius);
    padding: 40px 36px;
    min-height: 300px;
    box-shadow: var(--shadow);
}

.bible-placeholder {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-faint);
}

.bible-placeholder p {
    font-family: var(--serif);
    font-size: 1.1rem;
}

.bible-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-faint);
}

.bible-loading p {
    font-family: var(--serif);
    font-size: 1.05rem;
}

.bible-chapter-title {
    font-family: var(--display-deco);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 4px;
    padding-bottom: 0;
    border-bottom: none;
    color: var(--gold-light);
}

.bible-translation-label {
    font-family: var(--display);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--ink-faint);
    text-transform: uppercase;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--divider);
}

.bible-verse {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
    line-height: 1.8;
}

.bible-verse-num {
    flex-shrink: 0;
    font-family: var(--display);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gold);
    min-width: 24px;
    padding-top: 4px;
    text-align: right;
}

.bible-verse-text {
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--ink);
}

.bible-error {
    text-align: center;
    padding: 60px 20px;
    color: var(--crimson-light);
}

.bible-error p {
    font-family: var(--serif);
    font-size: 1.05rem;
}

/* Interlinear verse comparison */
.bible-verse-block {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--divider);
}

.bible-verse-block:last-child {
    border-bottom: none;
}

.bible-verse-num-small {
    font-family: var(--display);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gold);
    margin-right: 6px;
}

.bible-verse-esv {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--ink);
    line-height: 1.7;
    margin-bottom: 4px;
}

.bible-verse-original {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--ink-soft);
    line-height: 1.8;
    margin-bottom: 4px;
    direction: rtl;
}

.bible-verse-greek {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--ink-soft);
    line-height: 1.8;
    margin-bottom: 4px;
}

.bible-verse-lang-label {
    font-family: var(--display);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
    margin-right: 6px;
}

/* Related Insights */
.bible-insights {
    margin-top: 32px;
}

.bible-insights-title {
    font-family: var(--display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gold-light);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bible-insight-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--crimson);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.bible-insight-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow), 0 0 12px rgba(155, 116, 46, 0.15);
    border-left-color: var(--gold);
    background: var(--bg-warm);
}

.bible-insight-category {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--display);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold);
    margin-bottom: 6px;
}

.bible-insight-title {
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

.bible-insight-excerpt {
    font-family: var(--serif);
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.6;
}

.bible-insight-empty {
    color: var(--ink-faint);
    font-family: var(--serif);
    font-size: 0.95rem;
    text-align: center;
    padding: 20px;
}

/* Compare button active state */
#bible-compare.active {
    background: var(--crimson);
    color: var(--on-crimson);
    border-color: var(--gold-dark);
}

/* Audio playback */
.bible-audio-btn {
    background: var(--crimson);
    color: var(--on-crimson);
    border: 1px solid var(--gold-dark);
    padding: 8px 16px;
    border-radius: 2px;
    font-family: var(--display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.bible-audio-btn:hover {
    background: var(--crimson-light);
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(155, 116, 46, 0.2);
}

.bible-download-btn {
    background: var(--bg-card);
    color: var(--gold-light);
    border: 1px solid var(--gold-dark);
    padding: 8px 16px;
    border-radius: 2px;
    font-family: var(--display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.bible-download-btn:hover {
    background: var(--gold-dark);
    color: var(--bg);
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(155, 116, 46, 0.2);
}

.bible-download-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.bible-download-btn:disabled::after {
    content: '...';
}

/* Audio download progress bar */
.audio-progress-container {
    display: none;
    align-items: center;
    gap: 8px;
    min-width: 200px;
}

.audio-progress-container.active {
    display: flex;
}

.audio-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.audio-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--crimson), var(--gold));
    border-radius: 3px;
    transition: width 0.4s ease;
    width: 0%;
}

.audio-progress-fill.indeterminate {
    width: 30%;
    animation: indeterminate-slide 1.2s ease-in-out infinite;
}

@keyframes indeterminate-slide {
    0% { margin-left: -30%; }
    100% { margin-left: 100%; }
}

.audio-progress-text {
    font-size: 0.7rem;
    color: var(--ink-muted);
    font-family: var(--sans);
    white-space: nowrap;
}


.bible-audio-btn.playing {
    background: var(--gold);
    color: var(--bg);
    border-color: var(--gold-light);
}

.bible-audio-btn-small {
    background: var(--bg-card);
    color: var(--ink-soft);
    border: 1px solid var(--border);
    width: 34px;
    height: 34px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.bible-audio-btn-small:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

.bible-audio-controls {
    display: none;
    align-items: center;
    gap: 6px;
}

.bible-audio-controls.active {
    display: flex;
}

.bible-audio-speed {
    padding: 6px 8px;
    font-size: 0.75rem;
    width: auto;
}

/* Currently speaking verse */
.bible-verse-speaking {
    background: rgba(155, 116, 46, 0.15) !important;
    box-shadow: inset 3px 0 0 var(--gold) !important;
    border-radius: 4px !important;
    animation: speaking-pulse 1.5s ease-in-out infinite;
}

@keyframes speaking-pulse {
    0%, 100% {
        background: rgba(155, 116, 46, 0.12);
    }
    50% {
        background: rgba(155, 116, 46, 0.22);
    }
}

/* Verse highlighting */
.bible-verse-highlight {
    background: var(--bg-warm);
    border-radius: 2px;
    transition: background 0.3s, box-shadow 0.3s;
}

.bible-verse-highlight.bible-verse-highlight-hebrew {
    background: var(--source-text);
    box-shadow: inset 3px 0 0 var(--gold);
}

.bible-verse-highlight.bible-verse-highlight-greek {
    background: var(--source-text);
    box-shadow: inset 3px 0 0 var(--gold);
}

.bible-verse-highlight.bible-verse-block {
    padding-left: 12px;
    margin-left: -12px;
    border-radius: 2px;
}

.bible-verse-highlight.bible-verse {
    padding-left: 8px;
    margin-left: -8px;
    border-radius: 2px;
}

/* Pulse animation on hover */
.bible-verse-pulse {
    animation: verse-pulse 0.8s ease-in-out infinite;
}

@keyframes verse-pulse {
    0%, 100% {
        background: var(--source-text);
        box-shadow: inset 3px 0 0 var(--gold);
    }
    50% {
        background: var(--pulse-color);
        box-shadow: inset 3px 0 0 var(--gold), 0 0 8px var(--pulse-color);
    }
}

/* Insight verse label */
.bible-insight-verses {
    font-weight: 700;
    color: var(--gold);
}

/* Write View form */
.write-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold-dark);
    border-radius: var(--radius);
    padding: 32px 28px;
    box-shadow: var(--shadow);
}

/* ===== MOBILE BOTTOM NAV ===== */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--crimson-gradient);
    border-top: 2px solid #b79a64;
    z-index: 100;
    box-shadow: 0 -4px 18px rgba(48, 29, 24, 0.22);
    padding: 0;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-nav-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    padding: 10px 4px 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: rgba(255, 248, 233, 0.8);
    font-family: var(--sans);
}

.mobile-nav-link.active {
    color: #fff8e9;
    background: rgba(255, 248, 233, 0.1);
}

.mobile-nav-link:hover {
    color: #fff8e9;
}

.mobile-nav-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.mobile-nav-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ===== APP STORE SECTION ===== */
.app-download-section {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--divider);
    text-align: center;
}

.app-download-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.app-download-badge-icon {
    font-size: 2rem;
    color: var(--gold-light);
    filter: drop-shadow(0 0 6px rgba(155, 116, 46, 0.3));
}

.app-download-header h3 {
    font-family: var(--display-deco);
    font-size: 1.3rem;
    color: var(--gold-light);
    margin: 0;
}

.app-download-subtitle {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--ink-soft);
    margin-bottom: 28px;
    font-style: italic;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.app-store-badges {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.app-store-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 24px;
    text-decoration: none;
    transition: all 0.2s;
    overflow: hidden;
    min-width: 200px;
}

.app-store-badge:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow), 0 0 16px rgba(155, 116, 46, 0.15);
    transform: translateY(-2px);
}

.app-store-badge-google {
    background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
    border-color: #333;
}

.app-store-badge-apple {
    background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
    border-color: #333;
}

.badge-content {
    display: flex;
    align-items: center;
    gap: 12px;
    filter: opacity(0.6);
}

.badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge-icon svg {
    color: #fff;
}

.badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.badge-label {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.7);
}

.badge-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.badge-coming-soon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    font-family: var(--display);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--on-crimson);
    background: var(--crimson);
    padding: 3px 12px;
    border-radius: 2px;
    border: 1px solid var(--gold-dark);
    pointer-events: none;
    white-space: nowrap;
}

.app-features-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
}

.app-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.app-feature-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 640px) {
    .header-inner {
        padding: 0 12px;
        height: 52px;
    }

    .logo {
        font-size: 1rem;
        gap: 6px;
    }

    .logo-icon {
        font-size: 1.1rem;
    }

    /* Hide top nav on mobile — use bottom nav instead */
    .main-nav {
        display: none;
    }

    .theme-toggle {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    /* Show mobile bottom nav */
    .mobile-nav {
        display: flex;
    }

    /* Add bottom padding so content isn't hidden behind nav */
    body {
        padding-bottom: 70px;
    }

    #app {
        padding: 20px 12px 24px;
    }

    .daily-hero {
        padding: 24px 16px;
        margin-bottom: 32px;
    }

    .daily-hero::after {
        font-size: 60px;
    }

    .daily-badge {
        font-size: 0.6rem;
        padding: 3px 10px;
    }

    .fact-hebrew {
        font-size: 2rem;
    }

    .fact-translit {
        font-size: 1.2rem;
    }

    .fact-translation {
        font-size: 0.75rem;
        margin-bottom: 14px;
    }

    .fact-title {
        font-size: 1.2rem;
    }

    .fact-excerpt {
        font-size: 1rem;
    }

    /* Category cards — stack on mobile */
    .category-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .category-card {
        padding: 16px 12px;
    }

    .category-card-icon {
        font-size: 1.4rem;
    }

    .category-card h3 {
        font-size: 0.85rem;
    }

    .category-card p {
        font-size: 0.7rem;
    }

    /* Fact grid — single column on mobile */
    .fact-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .fact-card {
        padding: 16px;
    }

    .fact-card .fact-title {
        font-size: 1rem;
    }

    .fact-card .fact-excerpt {
        font-size: 0.9rem;
    }

    /* Library */
    .library-header h2 {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }

    #search-input {
        padding: 10px 12px 10px 40px;
        font-size: 0.9rem;
    }

    .filter-pills {
        gap: 6px;
    }

    .filter-pill {
        padding: 5px 12px;
        font-size: 0.7rem;
    }

    /* Bible reader — mobile optimized */
    .bible-header h2 {
        font-size: 1.3rem;
    }

    .bible-subtitle {
        font-size: 0.8rem;
    }

    .bible-nav-primary {
        gap: 6px;
    }

    .bible-select {
        font-size: 0.8rem;
        padding: 10px 12px;
    }

    .bible-select-book {
        flex: 2;
    }

    .bible-select-chapter {
        flex: 1;
        min-width: 60px;
    }

    .bible-prev-btn,
    .bible-next-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .bible-more-btn {
        width: 36px;
        height: 36px;
    }

    .bible-secondary-row {
        flex-direction: row;
    }

    .bible-secondary-row .bible-audio-btn,
    .bible-secondary-row .bible-download-btn {
        flex: 1;
        text-align: center;
        padding: 10px 8px;
        font-size: 0.7rem;
    }

    .bible-audio-controls {
        justify-content: center;
    }

    .audio-progress-container {
        width: 100%;
        min-width: unset;
    }

    .bible-reader {
        padding: 20px 16px;
    }

    .bible-verse {
        gap: 6px;
        margin-bottom: 2px;
    }

    .bible-verse-text {
        font-size: 1.05rem;
        line-height: 1.75;
    }

    .bible-verse-num {
        font-size: 0.65rem;
        min-width: 18px;
        padding-top: 3px;
    }

    /* Interlinear layout on mobile */
    .bible-verse-block {
        padding: 10px 0;
    }

    .bible-verse-esv {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .bible-verse-original,
    .bible-verse-greek {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* Write form */
    .write-form {
        padding: 20px 16px;
    }

    .form-row.form-row-2 {
        flex-direction: column;
        gap: 0;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions button {
        width: 100%;
        text-align: center;
    }

    .my-fact-item {
        flex-direction: column;
        gap: 10px;
    }

    .my-fact-actions {
        justify-content: flex-end;
    }

    .source-row {
        flex-direction: column;
    }

    .source-row .source-remove {
        width: 100%;
        padding: 8px;
    }

    /* About */
    .about-content h2 {
        font-size: 1.4rem;
    }

    .about-cards {
        grid-template-columns: 1fr;
    }

    /* App store badges — stack on mobile */
    .app-store-badges {
        flex-direction: column;
        align-items: center;
    }

    .app-store-badge {
        width: 100%;
        max-width: 260px;
    }

    .app-download-header h3 {
        font-size: 1.1rem;
    }

    .app-download-subtitle {
        font-size: 0.95rem;
    }

    .app-features-preview {
        grid-template-columns: 1fr;
    }

    /* Modal */
    .modal {
        padding: 24px 16px;
        margin: 16px auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    #modal-content .fact-hebrew {
        font-size: 2.2rem;
    }

    #modal-content .fact-detail-body {
        font-size: 1rem;
    }

    #modal-content .fact-scripture {
        padding: 12px 16px;
        font-size: 0.95rem;
    }

    /* Footer */
    .site-footer p {
        font-size: 0.75rem;
    }
}

/* ===== KIDS SECTION ===== */
:root {
    --kids-font: 'Fredoka', 'Inter', sans-serif;
}

.kids-container {
    max-width: 800px;
}

/* Queue bar */
.kids-queue-bar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--crimson);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 28px;
    box-shadow: var(--shadow);
}

.kids-queue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.kids-queue-title {
    font-family: var(--kids-font);
    font-size: 1rem;
    font-weight: 600;
    color: var(--gold-light);
}

.kids-queue-count {
    font-family: var(--kids-font);
    font-size: 0.8rem;
    color: var(--ink-faint);
}

.kids-queue-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.kids-queue-empty {
    font-family: var(--kids-font);
    font-size: 0.85rem;
    color: var(--ink-faint);
    text-align: center;
    padding: 8px 0;
}

.kids-queue-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--kids-font);
    font-size: 0.85rem;
    color: var(--ink-soft);
    transition: all 0.2s;
}

.kids-queue-item.active {
    border-color: var(--gold);
    background: var(--accent-bg);
    box-shadow: 0 0 8px rgba(155, 116, 46, 0.1);
}

.kids-queue-item-emoji {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.kids-queue-item-title {
    flex: 1;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kids-queue-item-ref {
    font-size: 0.7rem;
    color: var(--ink-faint);
    flex-shrink: 0;
}

.kids-queue-item-remove {
    background: none;
    border: none;
    color: var(--ink-faint);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.kids-queue-item-remove:hover {
    color: var(--crimson);
    background: var(--accent-bg);
}

.kids-queue-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kids-queue-controls .kids-narration-play {
    flex: 1;
    justify-content: center;
}

.kids-queue-clear {
    background: var(--bg-elevated);
    color: var(--ink-soft);
    border: 1px solid var(--border);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.kids-queue-clear:hover {
    border-color: var(--crimson);
    color: var(--crimson);
}

/* Add to queue button on story cards */
.kids-queue-add-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--crimson);
    color: var(--on-crimson);
    border: 1px solid var(--gold-dark);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}

.kids-queue-add-btn:hover {
    background: var(--gold);
    color: var(--bg);
    border-color: var(--gold-light);
    transform: scale(1.1);
}

/* ===== NOTIFICATION SETTINGS ===== */
.notif-toggle {
    background: rgba(255, 248, 233, 0.08);
    color: var(--on-crimson);
    border: 1px solid rgba(255, 248, 233, 0.55);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.notif-toggle:hover {
    border-color: #f1dfba;
    background: rgba(255, 248, 233, 0.15);
}

.notif-toggle.has-settings {
    border-color: #d9bd80;
    color: var(--on-crimson);
}

.modal-notif {
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
}

.notif-header {
    text-align: center;
    margin-bottom: 24px;
}

.notif-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 8px;
}

.notif-header h2 {
    font-family: var(--display-deco);
    font-size: 1.6rem;
    color: var(--gold-light);
    margin-bottom: 6px;
}

.notif-desc {
    font-size: 0.9rem;
    color: var(--ink-soft);
    font-family: var(--display);
}

.notif-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--divider);
}

.notif-section:last-of-type {
    border-bottom: none;
}

.notif-label {
    display: block;
    font-family: var(--display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}

.notif-hint {
    font-size: 0.8rem;
    color: var(--ink-faint);
    margin-bottom: 12px;
}

.notif-time-input {
    background: var(--bg-elevated);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 10px 16px;
    font-size: 1.1rem;
    font-family: var(--display);
    width: 100%;
    color-scheme: dark;
    cursor: pointer;
}

.notif-time-input:focus {
    outline: none;
    border-color: var(--gold);
}

.notif-perm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.notif-perm-status {
    font-size: 0.8rem;
    font-family: var(--display);
}

.notif-perm-status.granted {
    color: var(--success);
}

.notif-perm-status.denied {
    color: var(--error);
}

.notif-topics {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notif-topic-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.notif-topic-item:hover {
    border-color: var(--gold);
}

.notif-topic-item.checked {
    border-color: var(--gold-dark);
    background: var(--accent-bg);
}

.notif-topic-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-strong);
    border-radius: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.notif-topic-item.checked .notif-topic-checkbox {
    background: var(--gold);
    border-color: var(--gold-light);
}

.notif-topic-check-icon {
    color: var(--bg);
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.2s;
}

.notif-topic-item.checked .notif-topic-check-icon {
    opacity: 1;
}

.notif-topic-label {
    font-size: 0.9rem;
    color: var(--ink);
    font-family: var(--display);
}

.notif-verses-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.notif-verse-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 2px;
}

.notif-verse-ref {
    flex: 1;
    font-size: 0.9rem;
    color: var(--ink);
    font-family: var(--display);
}

.notif-verse-remove {
    background: none;
    border: none;
    color: var(--ink-faint);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 2px;
    transition: all 0.2s;
}

.notif-verse-remove:hover {
    color: var(--error);
    background: var(--accent-bg);
}

.notif-verse-empty {
    font-size: 0.85rem;
    color: var(--ink-faint);
    text-align: center;
    padding: 8px 0;
}

.notif-verse-add {
    display: flex;
    gap: 8px;
}

.notif-verse-input {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-elevated);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 2px;
    font-size: 0.9rem;
    font-family: var(--display);
}

.notif-verse-input:focus {
    outline: none;
    border-color: var(--gold);
}

.notif-actions {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

@media (max-width: 640px) {
    .modal-notif {
        max-width: 100%;
        max-height: 92vh;
    }

    .notif-header h2 {
        font-size: 1.3rem;
    }

    .notif-desc {
        font-size: 0.8rem;
    }

    .notif-time-input {
        font-size: 1rem;
    }

    .notif-perm-row {
        flex-direction: column;
        align-items: stretch;
    }

    .notif-perm-row .btn-small {
        text-align: center;
    }

    .notif-topic-item {
        padding: 8px 10px;
    }

    .notif-verse-add {
        flex-direction: column;
    }

    .notif-verse-add .btn-small {
        text-align: center;
    }
}

.kids-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 32px 24px;
    background: var(--parchment-texture);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.kids-header-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 8px;
}

.kids-header h2 {
    font-family: var(--kids-font);
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold-light);
    margin-bottom: 8px;
}

.kids-subtitle {
    font-family: var(--kids-font);
    font-size: 1.05rem;
    color: var(--ink-soft);
}

/* Story grid */
.kids-story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.kids-story-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold-dark);
    border-radius: 8px;
    padding: 24px 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.kids-story-card:hover {
    border-color: var(--gold);
    border-top-color: var(--gold-light);
    box-shadow: var(--shadow), 0 0 16px rgba(155, 116, 46, 0.15);
    transform: translateY(-3px);
    background: var(--bg-warm);
}

.kids-story-emoji {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 12px;
}

.kids-story-title {
    font-family: var(--kids-font);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.3;
}

.kids-story-desc {
    font-family: var(--kids-font);
    font-size: 0.8rem;
    color: var(--ink-faint);
    line-height: 1.4;
}

.kids-story-tag {
    display: inline-block;
    margin-top: 10px;
    background: var(--crimson-dark);
    color: var(--on-crimson);
    border: 1px solid var(--gold-dark);
    padding: 3px 10px;
    border-radius: 12px;
    font-family: var(--kids-font);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Story reader */
.kids-story-reader {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.kids-back-btn {
    background: none;
    border: none;
    color: var(--gold-light);
    font-family: var(--kids-font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 16px;
    transition: opacity 0.2s;
}

.kids-back-btn:hover {
    opacity: 0.7;
}

.kids-story-content {
    background: var(--parchment-texture);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: 40px 36px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.kids-story-content .kids-story-emoji {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 16px;
}

.kids-story-content h3 {
    font-family: var(--kids-font);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--gold-light);
    text-align: center;
    margin-bottom: 8px;
}

.kids-story-meta {
    text-align: center;
    font-family: var(--kids-font);
    font-size: 0.8rem;
    color: var(--ink-faint);
    margin-bottom: 28px;
}

.kids-story-text {
    font-family: var(--kids-font);
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--ink-soft);
}

.kids-story-text p {
    margin-bottom: 16px;
}

.kids-story-text .verse-ref {
    display: block;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--ink-faint);
    font-style: italic;
}

.kids-story-lesson {
    margin-top: 28px;
    padding: 16px 20px;
    background: var(--accent-bg);
    border-left: 3px solid var(--gold);
    border-radius: 2px;
    font-family: var(--kids-font);
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.6;
}

.kids-story-lesson strong {
    color: var(--gold-light);
}

/* Narration bar */
.kids-narration-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: sticky;
    bottom: 80px;
    z-index: 50;
}

.kids-narration-play {
    background: var(--crimson);
    color: var(--on-crimson);
    border: 1px solid var(--gold-dark);
    padding: 12px 28px;
    border-radius: 24px;
    font-family: var(--kids-font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kids-narration-play:hover {
    background: var(--crimson-light);
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(155, 116, 46, 0.2);
}

.kids-narration-play.playing {
    background: var(--gold);
    color: var(--bg);
}

.kids-narration-stop {
    background: var(--bg-elevated);
    color: var(--ink-soft);
    border: 1px solid var(--border);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.kids-narration-stop:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

/* Mobile responsive for kids */
@media (max-width: 640px) {
    .kids-header {
        padding: 24px 16px;
    }

    .kids-header h2 {
        font-size: 1.5rem;
    }

    .kids-story-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .kids-story-card {
        padding: 16px 12px;
    }

    .kids-story-emoji {
        font-size: 2.2rem;
    }

    .kids-story-title {
        font-size: 0.9rem;
    }

    .kids-story-desc {
        font-size: 0.7rem;
    }

    .kids-story-content {
        padding: 24px 16px;
    }

    .kids-story-content h3 {
        font-size: 1.3rem;
    }

    .kids-story-text {
        font-size: 1rem;
        line-height: 1.8;
    }

    .kids-narration-bar {
        bottom: 70px;
        padding: 12px;
    }

    .kids-narration-play {
        padding: 10px 20px;
        font-size: 0.8rem;
    }

    .kids-queue-bar {
        padding: 12px 14px;
        margin-bottom: 20px;
    }

    .kids-queue-title {
        font-size: 0.9rem;
    }

    .kids-queue-item {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .kids-queue-item-title {
        font-size: 0.8rem;
    }

    .kids-queue-controls .kids-narration-play {
        padding: 8px 14px;
        font-size: 0.75rem;
    }

    .kids-queue-clear {
        width: 36px;
        height: 36px;
    }

    .kids-queue-add-btn {
        width: 24px;
        height: 24px;
        font-size: 1rem;
    }
}


/* Random verse toggle switch */
.notif-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 2px;
}

.notif-switch-label {
    font-size: 0.9rem;
    color: var(--ink);
    font-family: var(--display);
}

.notif-switch {
    width: 44px;
    height: 24px;
    background: var(--border-strong);
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.notif-switch.on {
    background: var(--gold);
}

.notif-switch-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--bg);
    border-radius: 50%;
    transition: left 0.2s;
}

.notif-switch.on .notif-switch-slider {
    left: 22px;
}

/* ===== LEXICON VIEW ===== */
.lexicon-container {
    max-width: 860px;
}

.lexicon-header {
    text-align: center;
    margin-bottom: 32px;
}

.lexicon-header h2 {
    font-family: var(--display-deco);
    font-size: 1.7rem;
    color: var(--gold-light);
    margin-bottom: 6px;
}

.lexicon-subtitle {
    font-size: 0.9rem;
    color: var(--ink-soft);
    font-family: var(--display);
}

.lexicon-search-bar {
    margin-bottom: 28px;
}

/* Quick lexicon search at top of Learn tab */
.learn-quick-search {
    margin-bottom: 32px;
    padding: 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold-dark);
    border-radius: 2px;
}

.learn-quick-search-wrap {
    position: relative;
    margin-bottom: 12px;
}

.learn-quick-search-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.lexicon-quick-filter-btn {
    padding: 6px 16px;
    background: var(--bg-card);
    color: var(--ink-soft);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: var(--display);
    transition: all 0.2s;
}

.lexicon-quick-filter-btn:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

.lexicon-quick-filter-btn.active {
    background: var(--crimson);
    color: var(--on-crimson);
    border-color: var(--gold-dark);
}

.learn-quick-results {
    margin-bottom: 8px;
}

.learn-quick-results:empty {
    display: none;
}

.lexicon-search-input-wrap {
    position: relative;
    margin-bottom: 12px;
}

.lexicon-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
}

.lexicon-search-input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    background: var(--bg-card);
    color: var(--ink);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold-dark);
    border-radius: 2px;
    font-size: 0.95rem;
    font-family: var(--sans);
}

.lexicon-search-input::placeholder,
.notif-verse-input::placeholder,
.visuals-search-input::placeholder {
    color: var(--ink-soft);
    opacity: 1;
}

.lexicon-search-input:focus {
    outline: none;
    border-color: var(--gold);
}

.lexicon-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.lexicon-filter-btn {
    padding: 6px 16px;
    background: var(--bg-elevated);
    color: var(--ink-soft);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: var(--display);
    transition: all 0.2s;
}

.lexicon-filter-btn:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

.lexicon-filter-btn.active {
    background: var(--crimson);
    color: var(--on-crimson);
    border-color: var(--gold-dark);
}

.lexicon-sort-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.lexicon-sort-label {
    font-size: 0.75rem;
    font-family: var(--body);
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
}

.lexicon-sort-btn {
    padding: 6px 14px;
    font-size: 0.78rem;
    font-family: var(--body);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.2s;
}

.lexicon-sort-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.lexicon-sort-btn.active {
    background: var(--gold-dark);
    color: var(--parchment-light);
    border-color: var(--gold-dark);
}

.lexicon-sort-direction {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.lexicon-sort-dir-btn {
    padding: 4px 12px;
    font-size: 0.72rem;
    font-family: var(--body);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--ink-faint);
    cursor: pointer;
    transition: all 0.2s;
}

.lexicon-sort-dir-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.lexicon-sort-dir-btn.active {
    background: var(--gold);
    color: var(--parchment-light);
    border-color: var(--gold);
}

.lexicon-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lexicon-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--ink-faint);
    font-family: var(--display);
    font-size: 0.9rem;
}

.lexicon-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold-dark);
    border-radius: 2px;
    padding: 20px 24px;
    transition: all 0.2s;
}

.lexicon-card:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow);
}

.lexicon-card-lang {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 2px 10px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.lexicon-card-lang.hebrew {
    background: var(--crimson-dark);
    color: var(--on-crimson);
    border: 1px solid var(--gold-dark);
}

.lexicon-card-lang.greek {
    background: var(--accent-bg);
    color: var(--gold-light);
    border: 1px solid var(--gold-dark);
}

.lexicon-card-lang.aramaic {
    background: var(--bg-warm);
    color: var(--gold-light);
    border: 1px solid var(--gold-dark);
}

.lexicon-card-original {
    font-size: 2rem;
    font-weight: 600;
    color: var(--gold-light);
    margin-bottom: 4px;
    direction: rtl;
}

.lexicon-card-original.greek {
    direction: ltr;
}

.lexicon-card-translit {
    font-size: 1.1rem;
    color: var(--ink);
    font-family: var(--display);
    font-style: italic;
    margin-bottom: 8px;
}

.lexicon-card-english {
    font-size: 0.95rem;
    color: var(--ink-soft);
    font-family: var(--display);
    margin-bottom: 10px;
}

.lexicon-card-definition {
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.7;
    border-top: 1px solid var(--divider);
    padding-top: 10px;
}

/* Lexicon stats dashboard */
.lexicon-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.lexicon-stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 20px;
    text-align: center;
}

.lexicon-stat-card.lexicon-stat-total {
    background: var(--bg-warm);
    border-color: var(--gold-dark);
}

.lexicon-stat-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold-light);
    font-family: var(--display);
    line-height: 1;
    margin-bottom: 6px;
}

.lexicon-stat-total .lexicon-stat-num {
    color: var(--gold-light);
}

.lexicon-stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    font-family: var(--display);
}

/* Featured entries badge */
.lexicon-card-featured {
    border-left: 3px solid var(--gold-dark);
}

/* Section labels */
.lexicon-section-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    font-family: var(--display);
    margin: 24px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--divider);
    font-weight: 600;
}

.lexicon-section-label:first-child {
    margin-top: 0;
}

/* Loading indicator */
.lexicon-loading {
    text-align: center;
    padding: 24px;
    color: var(--ink-faint);
    font-style: italic;
}

/* KJV definition */
.lexicon-card-kjv {
    font-size: 0.82rem;
    color: var(--ink-faint);
    font-style: italic;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--divider);
}

/* Translation view in Bible reader */
.bible-translate-view {
    margin-top: 20px;
}

.bible-translate-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold);
    border-radius: 2px;
}

.bible-translate-label {
    font-family: var(--display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-light);
}

.bible-translate-source {
    font-size: 0.8rem;
    color: var(--ink-faint);
    margin-left: auto;
}

.bible-translate-verse {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 16px 20px;
    margin-bottom: 10px;
}

.bible-translate-verse-num {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gold);
    font-family: var(--display);
    margin-right: 8px;
    vertical-align: top;
}

.bible-translate-words {
    display: inline;
}

.bible-translate-word {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 4px 8px;
    border-radius: 2px;
    cursor: help;
    transition: background 0.2s;
    border-bottom: 1px dotted var(--border-strong);
}

.bible-translate-word:hover {
    background: var(--accent-bg);
    border-bottom-color: var(--gold);
}

.bible-translate-word-original {
    font-size: 1.1rem;
    color: var(--gold-light);
    direction: rtl;
}

.bible-translate-word-original.greek {
    direction: ltr;
}

.bible-translate-word-gloss {
    display: block;
    font-size: 0.7rem;
    color: var(--ink-faint);
    font-family: var(--display);
    font-style: italic;
    margin-top: 2px;
}

.bible-translate-word-tooltip {
    position: absolute;
    background: var(--bg-elevated);
    border: 1px solid var(--gold-dark);
    border-radius: 4px;
    padding: 12px 16px;
    max-width: 300px;
    font-size: 0.85rem;
    color: var(--ink-soft);
    box-shadow: var(--shadow);
    z-index: 100;
    line-height: 1.6;
    display: none;
}

.bible-translate-word-tooltip.show {
    display: block;
}

/* Mobile responsive for lexicon */
@media (max-width: 640px) {
    .lexicon-header h2 {
        font-size: 1.3rem;
    }

    .lexicon-search-input {
        font-size: 0.85rem;
    }

    .lexicon-filter-btn {
        padding: 5px 12px;
        font-size: 0.75rem;
    }

    .lexicon-sort-btn {
        padding: 5px 10px;
        font-size: 0.7rem;
    }

    .lexicon-sort-dir-btn {
        padding: 3px 10px;
        font-size: 0.68rem;
    }

    .lexicon-card {
        padding: 16px;
    }

    .lexicon-card-original {
        font-size: 1.6rem;
    }

    .lexicon-card-translit {
        font-size: 1rem;
    }

    .bible-translate-word {
        padding: 3px 6px;
    }

    .bible-translate-word-original {
        font-size: 1rem;
    }
}

/* ===== LEARN SECTION ===== */
.learn-container {
    max-width: 900px;
}

.learn-header {
    text-align: center;
    margin-bottom: 24px;
}

.learn-header h2 {
    font-family: var(--display-deco);
    font-size: 1.7rem;
    color: var(--gold-light);
    margin-bottom: 6px;
}

.learn-subtitle {
    font-size: 0.9rem;
    color: var(--ink-soft);
    font-family: var(--display);
}

.learn-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
}

.learn-tab-btn {
    padding: 8px 24px;
    background: var(--bg-card);
    color: var(--ink-soft);
    border: 1px solid var(--border);
    border-top: 2px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: var(--display);
    font-weight: 500;
    transition: all 0.2s;
}

.learn-tab-btn:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

.learn-tab-btn.active {
    border-top: 2px solid var(--gold);
    color: var(--gold-light);
    background: var(--bg-elevated);
}

.learn-section {
    margin-bottom: 32px;
}

.learn-section-title {
    font-family: var(--display-deco);
    font-size: 1.15rem;
    color: var(--gold-light);
    margin-bottom: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--divider);
}

/* Alphabet grid */
.learn-alphabet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.learn-letter-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 16px;
    text-align: center;
    transition: all 0.2s;
}

.learn-letter-card:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow);
}

.learn-letter-display {
    font-size: 2.4rem;
    color: var(--gold-light);
    margin-bottom: 6px;
    direction: rtl;
}

.learn-letter-display.greek {
    direction: ltr;
}

.learn-letter-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    font-family: var(--display);
    margin-bottom: 4px;
}

.learn-letter-sound {
    font-size: 0.75rem;
    color: var(--gold);
    font-family: var(--display);
    font-style: italic;
    margin-bottom: 6px;
}

.learn-letter-note {
    font-size: 0.7rem;
    color: var(--ink-faint);
    line-height: 1.5;
    border-top: 1px solid var(--divider);
    padding-top: 6px;
}

/* Grammar tips */
.learn-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.learn-tip-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold-dark);
    border-radius: 2px;
    padding: 16px 18px;
    transition: all 0.2s;
}

.learn-tip-card:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow);
}

.learn-tip-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-light);
    font-family: var(--display);
    margin-bottom: 6px;
}

.learn-tip-text {
    font-size: 0.8rem;
    color: var(--ink-soft);
    line-height: 1.7;
}

/* Resources */
.learn-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.learn-resource-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 18px 20px;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

.learn-resource-card:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow);
}

.learn-resource-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.learn-resource-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.learn-resource-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
}

.badge-free {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
}

.badge-paid {
    background: rgba(184, 134, 11, 0.15);
    color: var(--gold);
    border: 1px solid var(--gold-dark);
}

.learn-resource-paid {
    opacity: 0.85;
}

.learn-resource-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gold-light);
    font-family: var(--display);
    text-decoration: none;
    flex: 1;
}

.learn-resource-title:hover {
    color: var(--gold);
    text-decoration: underline;
}

.learn-resource-type {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--crimson-dark);
    color: var(--on-crimson);
    border: 1px solid var(--gold-dark);
    white-space: nowrap;
    flex-shrink: 0;
}

.learn-resource-desc {
    font-size: 0.78rem;
    color: var(--ink-soft);
    line-height: 1.6;
}

.learn-resource-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--gold);
    text-decoration: none;
    font-family: var(--display);
}

.learn-resource-link:hover {
    color: var(--gold-light);
    text-decoration: underline;
}

/* Mobile responsive for Learn */
@media (max-width: 640px) {
    .learn-header h2 {
        font-size: 1.3rem;
    }

    .learn-tab-btn {
        padding: 6px 18px;
        font-size: 0.85rem;
    }

    .learn-alphabet-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .learn-letter-display {
        font-size: 2rem;
    }

    .learn-tips-grid,
    .learn-resources-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== LEARN SECTION EXTENSIONS ===== */
.learn-section-desc {
    font-size: 0.82rem;
    color: var(--ink-faint);
    font-family: var(--display);
    margin-bottom: 14px;
    margin-top: -4px;
}

/* ===== FLASHCARDS ===== */
.flashcard-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.flashcard {
    width: 320px;
    height: 200px;
    perspective: 1000px;
    cursor: pointer;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.flashcard-front {
    background: var(--bg-card);
    border: 2px solid var(--gold-dark);
    border-radius: 8px;
}

.flashcard-back {
    background: var(--bg-elevated);
    border: 2px solid var(--gold);
    border-radius: 8px;
    transform: rotateY(180deg);
}

.flashcard-word {
    font-size: 2.2rem;
    color: var(--gold-light);
    margin-bottom: 8px;
    direction: rtl;
}

.flashcard-word.greek {
    direction: ltr;
}

.flashcard-translit {
    font-size: 0.9rem;
    color: var(--ink-soft);
    font-family: var(--display);
    font-style: italic;
}

.flashcard-hint {
    font-size: 0.7rem;
    color: var(--ink-faint);
    margin-top: 12px;
    font-family: var(--display);
}

.flashcard-english {
    font-size: 1.4rem;
    color: var(--gold-light);
    margin-bottom: 6px;
    font-family: var(--display);
    font-weight: 600;
}

.flashcard-cat {
    font-size: 0.7rem;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--display);
}

.flashcard-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.flashcard-btn {
    padding: 8px 20px;
    background: var(--bg-card);
    color: var(--ink-soft);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold-dark);
    border-radius: 2px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: var(--display);
    transition: all 0.2s;
}

.flashcard-btn:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

.flashcard-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.flashcard-counter {
    font-size: 0.8rem;
    color: var(--ink-faint);
    font-family: var(--display);
    min-width: 60px;
    text-align: center;
}

.flashcard-shuffle {
    margin-top: 4px;
}

.flashcard-shuffle-btn {
    padding: 6px 16px;
    background: var(--bg-elevated);
    color: var(--ink-soft);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: var(--display);
    transition: all 0.2s;
}

.flashcard-shuffle-btn:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

/* ===== READING PRACTICE ===== */
.reading-practice-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reading-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold-dark);
    border-radius: 2px;
    padding: 20px 24px;
    transition: all 0.2s;
}

.reading-card:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow);
}

.reading-ref {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold);
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.reading-original {
    font-size: 1.4rem;
    color: var(--gold-light);
    margin-bottom: 10px;
    direction: rtl;
    line-height: 2;
}

.reading-original.greek {
    direction: ltr;
}

.reading-words {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: 4px;
}

.reading-word {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: help;
    transition: background 0.2s;
    border-bottom: 1px dotted var(--border-strong);
    min-width: 50px;
}

.reading-word:hover {
    background: var(--accent-bg);
    border-bottom-color: var(--gold);
}

.reading-word-original {
    font-size: 1.1rem;
    color: var(--gold-light);
    direction: rtl;
    margin-bottom: 2px;
}

.reading-word-original.greek {
    direction: ltr;
}

.reading-word-gloss {
    font-size: 0.7rem;
    color: var(--ink-soft);
    font-family: var(--display);
    font-style: italic;
    text-align: center;
}

.reading-translation {
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.7;
    margin-bottom: 10px;
    font-family: var(--display);
}

.reading-note {
    font-size: 0.78rem;
    color: var(--ink-faint);
    line-height: 1.6;
    border-top: 1px solid var(--divider);
    padding-top: 8px;
}

/* ===== VERB PARADIGMS ===== */
.paradigm-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.paradigm-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 20px 24px;
    overflow-x: auto;
}

.paradigm-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gold-light);
    font-family: var(--display);
    margin-bottom: 4px;
}

.paradigm-root {
    font-size: 0.78rem;
    color: var(--ink-faint);
    font-family: var(--display);
    font-style: italic;
    margin-bottom: 14px;
}

.paradigm-table {
    width: 100%;
    border-collapse: collapse;
}

.paradigm-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    font-family: var(--display);
    border-bottom: 2px solid var(--gold-dark);
}

.paradigm-table td {
    padding: 8px 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--divider);
}

.paradigm-table tr:last-child td {
    border-bottom: none;
}

.paradigm-form {
    font-size: 1.1rem;
    color: var(--gold-light);
    direction: rtl;
}

.paradigm-form.greek {
    direction: ltr;
}

.paradigm-translit {
    color: var(--ink-faint);
    font-style: italic;
    font-size: 0.8rem;
}

/* ===== DIPHTHONGS ===== */
.diphthong-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.diphthong-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 16px;
    transition: all 0.2s;
}

.diphthong-card:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow);
}

.diphthong-combo {
    font-size: 1.6rem;
    color: var(--gold-light);
    margin-bottom: 4px;
    direction: rtl;
}

.diphthong-combo.greek {
    direction: ltr;
}

.diphthong-sound {
    font-size: 0.75rem;
    color: var(--gold);
    font-family: var(--display);
    font-style: italic;
    margin-bottom: 6px;
}

.diphthong-example {
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin-bottom: 6px;
    direction: rtl;
}

.diphthong-example.greek {
    direction: ltr;
}

.diphthong-note {
    font-size: 0.7rem;
    color: var(--ink-faint);
    line-height: 1.5;
    border-top: 1px solid var(--divider);
    padding-top: 6px;
}

/* ===== QUIZ ===== */
.quiz-area {
    min-height: 280px;
}

.quiz-start {
    text-align: center;
    padding: 40px 20px;
}

.quiz-start-btn {
    padding: 14px 36px;
    background: var(--crimson-dark);
    color: var(--on-crimson);
    border: 1px solid var(--gold-dark);
    border-radius: 2px;
    cursor: pointer;
    font-size: 1rem;
    font-family: var(--display);
    font-weight: 600;
    transition: all 0.2s;
}

.quiz-start-btn:hover {
    background: var(--crimson);
    border-color: var(--gold);
    box-shadow: var(--shadow);
}

.quiz-question {
    text-align: center;
}

.quiz-progress {
    font-size: 0.75rem;
    color: var(--ink-faint);
    font-family: var(--display);
    margin-bottom: 20px;
}

.quiz-score {
    font-size: 0.75rem;
    color: var(--gold);
    font-family: var(--display);
    margin-bottom: 16px;
}

.quiz-word-display {
    font-size: 2.4rem;
    color: var(--gold-light);
    margin-bottom: 8px;
    direction: rtl;
}

.quiz-word-display.greek {
    direction: ltr;
}

.quiz-translit {
    font-size: 0.9rem;
    color: var(--ink-soft);
    font-family: var(--display);
    font-style: italic;
    margin-bottom: 20px;
}

.quiz-prompt {
    font-size: 0.85rem;
    color: var(--ink-soft);
    font-family: var(--display);
    margin-bottom: 16px;
}

.quiz-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
}

.quiz-option {
    padding: 14px 16px;
    background: var(--bg-card);
    color: var(--ink);
    border: 1px solid var(--border);
    border-top: 2px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: var(--display);
    transition: all 0.2s;
}

.quiz-option:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

.quiz-option.correct {
    background: var(--accent-bg);
    border-color: var(--gold);
    color: var(--gold-light);
}

.quiz-option.wrong {
    background: var(--crimson-dark);
    border-color: var(--crimson);
    color: var(--on-crimson);
}

.quiz-option:disabled {
    cursor: default;
}

.quiz-result {
    text-align: center;
    padding: 30px 20px;
}

.quiz-result-score {
    font-size: 2rem;
    color: var(--gold-light);
    font-family: var(--display-deco);
    margin-bottom: 8px;
}

.quiz-result-msg {
    font-size: 0.9rem;
    color: var(--ink-soft);
    font-family: var(--display);
    margin-bottom: 20px;
}

.quiz-retry-btn {
    padding: 12px 28px;
    background: var(--crimson-dark);
    color: var(--on-crimson);
    border: 1px solid var(--gold-dark);
    border-radius: 2px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: var(--display);
    transition: all 0.2s;
}

.quiz-retry-btn:hover {
    background: var(--crimson);
    border-color: var(--gold);
}

/* Mobile responsive for new sections */
@media (max-width: 640px) {
    .flashcard {
        width: 260px;
        height: 170px;
    }

    .flashcard-word {
        font-size: 1.8rem;
    }

    .flashcard-english {
        font-size: 1.1rem;
    }

    .reading-original {
        font-size: 1.1rem;
    }

    .reading-words {
        flex-direction: column;
    }

    .reading-word {
        min-width: auto;
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
    }

    .reading-word-original {
        margin-bottom: 0;
    }

    .quiz-options {
        grid-template-columns: 1fr;
    }

    .quiz-word-display {
        font-size: 1.8rem;
    }

    .paradigm-table td {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .diphthong-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   Maps & Timelines
   ===================================================== */

.maps-timeline-wrapper {
    width: 100%;
    grid-column: 1 / -1;
}

.maps-section, .timeline-section {
    margin-bottom: 48px;
}

.maps-timeline-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.maps-timeline-section-header h3 {
    font-family: var(--heading-font);
    font-size: 1.5rem;
    color: var(--ink);
    margin: 0;
}

.maps-timeline-icon {
    font-size: 1.5rem;
}

.maps-timeline-count {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--ink-faint);
    background: var(--surface);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

/* Era filter buttons */
.maps-era-filters, .timeline-era-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.maps-era-btn, .timeline-era-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-faint);
    font-family: var(--body-font);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.maps-era-btn:hover, .timeline-era-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.maps-era-btn.active, .timeline-era-btn.active {
    background: var(--accent);
    color: var(--parchment);
    border-color: var(--accent);
}

/* Interactive map */
.bible-map-container {
    width: 100%;
    height: 500px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    z-index: 1;
}

.leaflet-container {
    background: var(--bg);
    font-family: var(--body-font);
}

.leaflet-popup-content-wrapper {
    background: var(--surface);
    color: var(--ink);
    border-radius: 10px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

.leaflet-popup-tip {
    background: var(--surface);
}

.leaflet-popup-content {
    margin: 0;
    width: 280px !important;
}

.map-popup {
    padding: 4px;
}

.map-popup-title {
    font-family: var(--heading-font);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}

.map-popup-era {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.map-popup-body {
    font-family: var(--serif);
    font-size: 0.85rem;
    color: var(--ink-faint);
    line-height: 1.6;
    margin-bottom: 8px;
}

.map-popup-scripture {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--accent);
}

.leaflet-control-attribution {
    background: var(--surface);
    color: var(--ink-faint);
    font-size: 0.7rem;
}

.leaflet-control-zoom a {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border);
}

.leaflet-control-zoom a:hover {
    background: var(--accent);
    color: var(--parchment);
}

/* Map cards grid */
.maps-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.map-card {
    cursor: pointer;
}

.map-card-era {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(201, 168, 99, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Bar graph timeline */
.tl-bar-graph {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.tl-axis {
    position: relative;
    height: 32px;
    margin-bottom: 8px;
    margin-left: 100px;
}

.tl-axis-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border);
}

.tl-axis-ticks {
    position: relative;
    width: 100%;
    height: 100%;
}

.tl-axis-tick {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
}

.tl-axis-tick-line {
    width: 1px;
    height: 8px;
    background: var(--ink-faint);
    margin: 0 auto;
}

.tl-axis-tick-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--ink-faint);
    white-space: nowrap;
    display: block;
    margin-top: 2px;
}

.tl-bars-container {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

.tl-bars-container::-webkit-scrollbar {
    width: 6px;
}

.tl-bars-container::-webkit-scrollbar-track {
    background: var(--surface);
    border-radius: 3px;
}

.tl-bars-container::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px;
}

.tl-bar-row {
    display: flex;
    align-items: center;
    height: 28px;
    margin-bottom: 2px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.tl-bar-row:hover {
    background: var(--surface);
}

.tl-bar-label {
    width: 100px;
    flex-shrink: 0;
    text-align: right;
    padding-right: 12px;
}

.tl-bar-date {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--ink-faint);
    white-space: nowrap;
}

.tl-bar-track {
    flex: 1;
    position: relative;
    height: 24px;
}

.tl-bar-era-band {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    opacity: 0.3;
    border-radius: 2px;
}

.tl-bar {
    position: absolute;
    top: 2px;
    bottom: 2px;
    min-width: fit-content;
    border-radius: 4px;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    white-space: nowrap;
}

.tl-bar:hover {
    transform: scaleY(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 5;
}

.tl-bar-title {
    font-family: var(--body-font);
    font-size: 0.72rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
    font-weight: 500;
}

.tl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.tl-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--body-font);
    font-size: 0.75rem;
    color: var(--ink-faint);
}

.tl-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Responsive timeline */
@media (max-width: 768px) {
    .tl-axis {
        margin-left: 70px;
    }

    .tl-bar-label {
        width: 70px;
        font-size: 0.65rem;
    }

    .tl-bar-title {
        font-size: 0.65rem;
    }

    .bible-map-container {
        height: 350px;
    }

    .maps-timeline-section-header h3 {
        font-size: 1.2rem;
    }
}

/* =====================================================
   Tab Directory (sticky section navigation)
   ===================================================== */

.tab-directory {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--surface);
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

.tab-directory::-webkit-scrollbar {
    height: 4px;
}

.tab-directory::-webkit-scrollbar-track {
    background: var(--surface);
}

.tab-directory::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 2px;
}

.dir-pill {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--ink-faint);
    font-family: var(--body-font);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.dir-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface);
}

.dir-pill:active {
    transform: scale(0.96);
}

@media (max-width: 768px) {
    .tab-directory {
        padding: 8px 12px;
    }

    .dir-pill {
        padding: 5px 12px;
        font-size: 0.75rem;
    }
}

/* =====================================================
   Collapsible Sections (preview + expand)
   ===================================================== */

.section-collapsible {
    position: relative;
}

.section-collapsible .section-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
}

.section-collapse-toggle .collapse-arrow {
    transition: transform 0.3s;
    font-size: 0.8rem;
    color: var(--ink-faint);
    flex-shrink: 0;
    margin-left: 8px;
}

.section-collapsible.collapsed .collapse-arrow {
    transform: rotate(-90deg);
}

.section-collapse-content {
    overflow: hidden;
    transition: max-height 0.4s ease;
    max-height: 10000px;
}

.section-collapsible.collapsed .section-collapse-content {
    max-height: 220px;
}

.section-collapsible.collapsed .section-collapse-content::after {
    content: '';
    position: absolute;
    bottom: 44px;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--card-bg));
    pointer-events: none;
    z-index: 1;
}

.section-collapse-preview-hint {
    display: none;
    text-align: center;
    padding: 8px 0 4px;
    font-family: var(--body-font);
    font-size: 0.8rem;
    color: var(--accent);
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.section-collapsible.collapsed .section-collapse-preview-hint {
    display: block;
}

@media (max-width: 768px) {
    .section-collapsible.collapsed .section-collapse-content {
        max-height: 180px;
    }
}

/* =====================================================
   Visuals Tab
   ===================================================== */

.visuals-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.visuals-header {
    text-align: center;
    margin-bottom: 24px;
}

.visuals-header h2 {
    font-family: var(--serif);
    font-size: 1.8rem;
    color: var(--ink);
    margin-bottom: 8px;
}

.visuals-subtitle {
    color: var(--ink-faint);
    font-family: var(--serif);
    font-size: 1rem;
    font-style: italic;
}

.visuals-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 24px;
    color: var(--ink-faint);
}

.visuals-search-bar input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--body-font);
    font-size: 0.95rem;
    color: var(--ink);
}

/* =====================================================
   Vocabulary Cards
   ===================================================== */

.vocab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.vocab-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.vocab-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.vocab-card-original {
    font-size: 1.6rem;
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.2;
}

.vocab-card-original.greek {
    font-family: 'EB Garamond', serif;
}

.vocab-card-translit {
    font-family: var(--serif);
    font-style: italic;
    color: var(--accent);
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.vocab-card-english {
    font-family: var(--body-font);
    color: var(--ink);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.vocab-card-category {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-faint);
    background: rgba(0,0,0,0.05);
    padding: 2px 8px;
    border-radius: 10px;
}

.vocab-more {
    text-align: center;
    margin-top: 20px;
}

.vocab-more-btn {
    display: inline-block;
    font-family: var(--body-font);
    font-size: 0.9rem;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 24px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.vocab-more-btn:hover {
    background: var(--card-bg);
    border-color: var(--accent);
}

@media (max-width: 768px) {
    .vocab-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .vocab-card-original {
        font-size: 1.4rem;
    }
}

/* Visuals: separated Maps and Timeline sections */
.visuals-subsection {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 40px;
    scroll-margin-top: 140px;
}
.visuals-sublabel {
    font-family: var(--display);
    font-size: 1.1rem;
    color: var(--ink);
    margin: 24px 0 12px;
}
@media (max-width: 640px) {
    .visuals-subsection { padding: 16px; }
}

/* ===== Timeline (readable redesign) ===== */
.visual-timeline { display: block; }
.tl-empty { color: var(--ink-faint); text-align: center; padding: 24px; font-family: var(--serif); }
.tl-overview {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; margin-bottom: 28px; background: var(--bg-elevated);
}
.tl-overview-head {
    font-family: var(--display); font-size: 1rem; color: var(--ink);
    margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.tl-overview-head small { font-family: var(--sans); font-size: .75rem; color: var(--ink-faint); }
.tl-ov-row {
    display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 12px; align-items: center;
    width: 100%; padding: 6px 4px; background: none; border: 0; border-radius: var(--radius);
    cursor: pointer; text-align: left; color: var(--ink);
}
.tl-ov-row:hover { background: var(--accent-bg); }
.tl-ov-label { display: flex; flex-direction: column; line-height: 1.25; }
.tl-ov-label strong { font-family: var(--sans); font-size: .85rem; font-weight: 600; }
.tl-ov-label small { font-family: var(--sans); font-size: .72rem; color: var(--ink-faint); }
.tl-ov-track { height: 22px; background: var(--divider); border-radius: 11px; overflow: hidden; }
.tl-ov-bar { display: flex; align-items: center; justify-content: flex-end; height: 100%; border-radius: 11px; padding-right: 8px; min-width: 28px; }
.tl-ov-count { font-family: var(--sans); font-size: .72rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

.tl-group {
    border-left: 4px solid var(--era-color); background: var(--bg-elevated);
    border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; scroll-margin-top: 140px;
}
.tl-group-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tl-group-swatch { width: 12px; height: 12px; border-radius: 50%; background: var(--era-color); flex-shrink: 0; }
.tl-group-header h4 { font-family: var(--display); font-size: 1.15rem; color: var(--ink); margin: 0; flex: 1; }
.tl-group-count { font-family: var(--sans); font-size: .75rem; color: var(--ink-faint); }
.tl-event-list { list-style: none; margin: 0; padding: 0 0 0 6px; border-left: 2px dashed var(--border); margin-left: 5px; }
.tl-event {
    position: relative; display: flex; gap: 12px; padding: 12px 12px 12px 18px; margin: 4px 0;
    border-radius: var(--radius); cursor: pointer; transition: background .15s;
}
.tl-event:hover, .tl-event:focus-visible { background: var(--accent-bg); outline: none; }
.tl-event-dot {
    position: absolute; left: -13px; top: 18px; width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--bg-elevated);
}
.tl-event-body { flex: 1; min-width: 0; }
.tl-event-date { font-family: var(--sans); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tl-event-title { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); margin: 2px 0 4px; line-height: 1.3; }
.tl-event-excerpt {
    font-family: var(--serif); font-size: .98rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tl-event-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-family: var(--sans); font-size: .75rem; }
.tl-event-scripture { color: var(--ink-faint); }
.tl-event-more { color: var(--accent); font-weight: 600; }
.tl-group-toggle {
    margin: 8px 0 0 18px; background: none; border: 1px solid var(--border); color: var(--ink);
    font-family: var(--sans); font-size: .8rem; padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.tl-group-toggle:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) {
    .tl-ov-row { grid-template-columns: 120px 1fr; gap: 8px; }
    .tl-group { padding: 12px; }
    .tl-event { padding: 10px 8px 10px 14px; }
}

/* ===== Genealogy ===== */
.gen-intro { font-family: var(--serif); font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.5; }
.gen-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 24px; }
.gen-path-step {
    display: inline-flex; align-items: center; gap: 8px; background: var(--bg-elevated); border: 1px solid var(--border);
    color: var(--ink); font-family: var(--sans); font-size: .82rem; padding: 6px 12px 6px 6px; border-radius: 999px; cursor: pointer;
}
.gen-path-step span {
    width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700;
}
.gen-path-step:hover { border-color: var(--accent); }
.gen-path-arrow { color: var(--ink-faint); font-size: .9rem; }
.gen-seg { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; scroll-margin-top: 140px; }
.gen-seg-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.gen-seg-step {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--crimson); color: #fff;
    display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700;
}
.gen-seg-titles { flex: 1; min-width: 0; }
.gen-seg-titles h4 { font-family: var(--display); font-size: 1.15rem; color: var(--ink); margin: 0; }
.gen-seg-titles p { font-family: var(--serif); font-size: .95rem; color: var(--ink-faint); margin: 2px 0 0; line-height: 1.4; }
.gen-seg-ref { font-family: var(--sans); font-size: .75rem; color: var(--accent); text-decoration: none; white-space: nowrap; border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; }
.gen-seg-ref:hover { border-color: var(--accent); }
.gen-line-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin: 0 0 12px 44px; gap: 2px; flex-wrap: wrap; }
.gen-line-btn { background: none; border: 0; color: var(--ink-soft); font-family: var(--sans); font-size: .8rem; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.gen-line-btn.active { background: var(--accent); color: #fff; font-weight: 600; }
.gen-list { list-style: none; margin: 0 0 0 15px; padding: 0 0 0 0; border-left: 2px solid var(--border); }
.gen-person { position: relative; display: flex; gap: 12px; padding: 8px 0 8px 0; margin-left: -15px; }
.gen-num {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--border);
    color: var(--ink-soft); font-family: var(--sans); font-size: .72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; margin-left: 1px;
}
.gen-info { flex: 1; min-width: 0; padding-top: 3px; }
.gen-name-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.gen-name { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--ink); }
.gen-meaning { font-family: var(--serif); font-style: italic; font-size: .92rem; color: var(--ink-soft); }
.gen-years { font-family: var(--sans); font-size: .72rem; color: var(--ink-faint); background: var(--bg-card); padding: 2px 8px; border-radius: 999px; }
.gen-note { font-family: var(--serif); font-size: .95rem; color: var(--ink-soft); margin: 3px 0 0; line-height: 1.45; }
.gen-highlight .gen-num { background: var(--crimson); border-color: var(--gold); color: #fff; }
.gen-highlight .gen-name { color: var(--crimson-light); font-size: 1.25rem; }
.gen-seg-toggle {
    margin: 10px 0 0 44px; background: none; border: 1px solid var(--border); color: var(--ink);
    font-family: var(--sans); font-size: .8rem; padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.gen-seg-toggle:hover { border-color: var(--accent); color: var(--accent); }
.gen-sources { font-family: var(--sans); font-size: .75rem; color: var(--ink-faint); margin-top: 12px; line-height: 1.6; }
.gen-sources a { color: var(--accent); }
@media (max-width: 640px) {
    .gen-seg { padding: 14px; }
    .gen-seg-head { flex-wrap: wrap; }
    .gen-seg-ref { margin-left: 44px; }
    .gen-line-toggle, .gen-seg-toggle { margin-left: 0; }
    .gen-path-arrow { display: none; }
}

/* ===== Timeline: horizontal rail + inline explanations ===== */
.tl-rail-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 28px; background: var(--bg-elevated); }
.tl-rail-wrap { display: flex; align-items: center; gap: 8px; }
.tl-rail-nav {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.tl-rail-nav:hover { border-color: var(--accent); color: var(--accent); }
.tl-rail {
    position: relative; flex: 1; min-width: 0; display: flex; gap: 12px; overflow-x: auto;
    scroll-snap-type: x proximity; padding: 26px 4px 12px; scrollbar-width: thin; outline: none;
    -webkit-overflow-scrolling: touch;
}
.tl-rail:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: var(--radius); }
.tl-rail-line { display: none; }
.tl-rail-item::before { content: ""; position: absolute; top: -19px; left: -13px; right: -1px; height: 2px; background: var(--border); }
.tl-rail-item:first-of-type::before { left: 50%; }
.tl-rail-item:last-of-type::before { right: 50%; }
.tl-rail-item {
    position: relative; flex: 0 0 170px; scroll-snap-align: center; text-align: left; cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--border); border-top: 4px solid var(--era-color);
    border-radius: var(--radius); padding: 12px 12px 10px; margin-top: 12px; color: var(--ink);
    display: flex; flex-direction: column; gap: 4px; transition: transform .15s, box-shadow .15s;
}
.tl-rail-item:hover { transform: translateY(-2px); }
.tl-rail-item.active { box-shadow: 0 0 0 2px var(--era-color); transform: translateY(-3px); }
.tl-rail-dot {
    position: absolute; top: -25px; left: 50%; transform: translateX(-50%);
    width: 14px; height: 14px; border-radius: 50%; background: var(--era-color); border: 2px solid var(--bg-elevated);
}
.tl-rail-item.active .tl-rail-dot { width: 18px; height: 18px; top: -27px; }
.tl-rail-date { font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--era-color); }
.tl-rail-title { font-family: var(--serif); font-size: 1rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.tl-rail-era { font-family: var(--sans); font-size: .68rem; color: var(--ink-faint); margin-top: auto; }
.tl-rail-detail {
    margin-top: 12px; border-left: 4px solid var(--era-color, var(--accent)); background: var(--bg-card);
    border-radius: var(--radius); padding: 14px 16px; min-height: 120px;
}
.tl-rail-detail-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tl-rail-pos { font-family: var(--sans); font-size: .72rem; color: var(--ink-faint); }
.tl-rail-brief { font-family: var(--serif); font-size: 1.02rem; line-height: 1.55; color: var(--ink-soft); margin: 4px 0 10px; }
.tl-rail-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--sans); font-size: .78rem; }
.tl-rail-detail-actions .tl-event-scripture { margin-right: auto; }
.tl-step-btn, .tl-full-btn {
    background: none; border: 1px solid var(--border); color: var(--ink); font-family: var(--sans);
    font-size: .78rem; padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.tl-step-btn:disabled { opacity: .4; cursor: default; }
.tl-step-btn:not(:disabled):hover, .tl-full-btn:hover { border-color: var(--accent); color: var(--accent); }
.tl-full-btn { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.tl-list-head { margin: 0 0 12px; }
.tl-event.open { background: var(--accent-bg); }
.tl-event-detail { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border); }
.tl-event-detail p { font-family: var(--serif); font-size: .98rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 8px; }
.tl-event.open .tl-event-excerpt { display: none; }
@media (max-width: 640px) {
    .tl-rail-nav { display: none; }
    .tl-rail-item { flex-basis: 150px; }
    .tl-rail-detail-actions .tl-event-scripture { width: 100%; }
}

/* Overview chart: single full-width column (labels inside bars) */
.tl-ov-row { display: block; padding: 4px 0; }
.tl-ov-row:hover { background: none; }
.tl-ov-row:hover .tl-ov-track { box-shadow: 0 0 0 2px var(--accent); }
.tl-ov-track { position: relative; display: block; height: 34px; border-radius: 8px; background: var(--divider); }
.tl-ov-bar { position: absolute; inset: 0 auto 0 0; display: block; height: 100%; border-radius: 8px; padding: 0; min-width: 0; opacity: .55; }
.tl-ov-text {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 12px;
    font-family: var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden;
}
.tl-ov-text strong { font-size: .85rem; font-weight: 600; }
.tl-ov-text small { font-size: .72rem; opacity: .9; }
.tl-ov-text em { font-style: normal; font-size: .72rem; font-weight: 700; margin-left: auto; }
.tl-rail::-webkit-scrollbar { height: 8px; }
.tl-rail::-webkit-scrollbar-track { background: var(--divider); border-radius: 4px; }
.tl-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
@media (max-width: 640px) { .tl-ov-text small { display: none; } }

/* ===== Minimized sections: title + brief description ===== */
.section-summary { display: none; }
.section-collapsible.minimized > .section-collapse-content,
.section-collapsible.minimized > .section-collapse-preview-hint { display: none !important; }
.section-collapsible.minimized > .section-summary {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px;
    padding: 4px 0 2px; cursor: pointer;
    font-family: var(--serif); font-size: .98rem; line-height: 1.5; color: var(--ink-soft);
}
.section-summary-open {
    font-family: var(--sans); font-size: .78rem; font-weight: 600; color: var(--accent); white-space: nowrap;
}
.section-collapsible.minimized > .section-summary:hover .section-summary-open { text-decoration: underline; }
.section-collapsible.minimized .section-collapse-toggle .collapse-arrow:last-child { transform: rotate(-90deg); }
.section-collapsible:not(.minimized):not(.collapsed) .section-collapse-toggle .collapse-arrow:last-child { transform: none; }
.visuals-subsection.minimized { padding-bottom: 16px; }
.visuals-subsection .section-collapse-toggle { cursor: pointer; }
.visuals-subsection .section-collapse-toggle .collapse-arrow { margin-left: 10px; }
.visuals-subsection.section-collapsible .section-collapse-content { max-height: none; overflow: visible; }
.visuals-subsection.section-collapsible .section-collapse-content::after { display: none; }

.dir-minimize-toggle {
    margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent;
    font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); cursor: pointer;
}
.dir-minimize-toggle:hover { border-color: var(--accent); color: var(--ink); }
.dir-switch { position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--border); transition: background .2s; }
.dir-switch span { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .2s; }
.dir-minimize-toggle.on { color: var(--ink); border-color: var(--accent); }
.dir-minimize-toggle.on .dir-switch { background: var(--accent); }
.dir-minimize-toggle.on .dir-switch span { transform: translateX(12px); }
@media (min-width: 769px) {
    .tab-directory { flex-wrap: wrap; overflow-x: visible; white-space: normal; row-gap: 6px; }
}
.tab-directory::-webkit-scrollbar { height: 6px; }
.tab-directory::-webkit-scrollbar-track { background: transparent; }
.tab-directory::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.logo { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.logo:active { opacity: .8; }
.section-toggle-label { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
/* Only the arrow icon rotates — never text labels */
.section-collapse-toggle .collapse-arrow:not(:last-child),
.section-collapse-toggle .section-toggle-label { transform: none !important; }

/* ===== Bible bookmark ===== */
.bible-bookmark-bar {
    display: flex; align-items: center; gap: 12px;
    margin: 12px 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
    font-family: var(--sans); font-size: .85rem; color: var(--ink-soft); background: var(--bg-elevated);
}
.bible-bookmark-bar.has-bm { border-left: 3px solid var(--crimson-light); }
.bible-bookmark-bar .bm-icon { color: var(--crimson-light); display: inline-flex; flex: none; }
.bm-intro { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.4; }
.bm-intro strong { color: var(--ink); font-size: .9rem; }
.bm-intro span { color: var(--ink-soft); font-size: .77rem; }
.bm-dropdown { position: relative; flex: none; }
.bible-bookmark-bar button {
    font-family: var(--sans); font-size: .8rem; cursor: pointer;
}
.bm-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 6px 11px; border: 1px solid var(--border); border-radius: 7px;
    background: var(--bg-card); color: var(--ink); font-weight: 600;
}
.bm-toggle:hover, .bm-toggle[aria-expanded="true"] { border-color: var(--accent); }
.bm-toggle:focus-visible, .bm-panel button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bm-count { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; color: var(--accent); background: var(--bg-elevated); font-size: .73rem; }
.bm-chevron { color: var(--ink-soft); font-size: 1rem; line-height: 1; transition: transform .2s; }
.bm-toggle[aria-expanded="true"] .bm-chevron { transform: rotate(180deg); }
.bm-panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 500;
    width: min(360px, calc(100vw - 36px)); max-height: min(56vh, 440px);
    overflow-y: auto; overscroll-behavior: contain; padding: 6px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.bm-panel[hidden] { display: none; }
.bm-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 8px 11px; border-bottom: 1px solid var(--divider);
    font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint);
}
.bible-bookmark-bar .bm-save-current {
    padding: 5px 0; border: 0; background: transparent; color: var(--accent);
    font-weight: 700; white-space: nowrap; text-transform: none; letter-spacing: 0;
}
.bm-save-current:hover { text-decoration: underline; }
.bm-save-current:disabled { color: var(--ink-faint); cursor: not-allowed; text-decoration: none; }
.bm-empty { margin: 0; padding: 16px 10px; color: var(--ink-soft); font-size: .82rem; line-height: 1.5; }
.bm-row { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--divider); }
.bm-row:last-child { border-bottom: 0; }
.bible-bookmark-bar .bm-go {
    display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 3px;
    min-width: 0; padding: 11px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); text-align: left;
}
.bm-go strong { font-family: var(--display); font-size: .92rem; }
.bm-go span { color: var(--ink-soft); font-size: .73rem; }
.bm-go:hover, .bm-remove:hover { background: var(--bg-elevated); }
.bible-bookmark-bar .bm-remove {
    flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--ink-soft); font-size: 1.3rem; line-height: 1;
}
@media (max-width: 560px) {
    .bible-bookmark-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
    .bm-intro { flex: 1 1 calc(100% - 34px); }
    .bm-intro span { font-size: .73rem; }
    .bm-dropdown { width: 100%; }
    .bm-toggle { width: 100%; gap: 8px; padding: 6px 8px; font-size: .78rem; }
    .bm-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); width: auto; max-height: min(58vh, 440px); }
}

#bible-text .bible-verse,
#bible-text .bible-verse-block { position: relative; padding-right: 46px; }
#bible-text .bible-verse { position: relative; padding-right: 46px; }
.verse-bm-btn {
    position: absolute; top: 0; right: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 6px; background: transparent; color: var(--ink-faint); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#bible-text .bible-verse:hover .verse-bm-btn,
#bible-text .bible-verse-block:hover .verse-bm-btn,
.verse-bm-btn:focus-visible { opacity: .75; }
.verse-bm-btn:hover { color: var(--crimson-light); opacity: 1 !important; }
@media (hover: none) { .verse-bm-btn { opacity: .4; } }
.verse-bookmarked .verse-bm-btn { opacity: 1 !important; color: var(--crimson-light); }
.verse-bookmarked .verse-bm-btn svg { width: 20px; height: 26px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
#bible-text .verse-bookmarked { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--crimson-light) 10%, transparent)); border-radius: 6px; }
.verse-bm-flash { animation: verseBmFlash 1.8s ease; }
@keyframes verseBmFlash { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ===== Custom dropdown pickers ===== */
.dd-wrap { position: relative; display: flex; min-width: 0; }
.dd-wrap .dd-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); }
.dd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; min-height: 38px; }
.dd-btn .dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn .dd-caret { color: var(--gold); font-size: .8rem; flex-shrink: 0; }
.dd-wrap.open .dd-btn { border-color: var(--gold); }
.dd-panel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 400; min-width: 100%; width: max-content; max-width: min(92vw, 360px);
    max-height: 55vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background: var(--bg-card); border: 1px solid var(--gold); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.35); padding: 6px;
}
.dd-panel[hidden] { display: none; }
.dd-title { font-family: var(--sans); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: 6px 8px 4px; }
.dd-group { font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); padding: 10px 8px 4px; }
.dd-opt {
    display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); cursor: pointer;
    font-family: var(--display); font-size: .9rem; padding: 9px 10px; border-radius: 5px; touch-action: manipulation;
}
.dd-opt:hover, .dd-opt:focus-visible { background: var(--bg-elevated); outline: none; }
.dd-opt.on { background: var(--gold); color: var(--bg-card); font-weight: 700; }
.dd-grid { width: min(92vw, 320px); }
.dd-grid .dd-opt { display: inline-flex; align-items: center; justify-content: center; width: calc(20% - 4px); margin: 2px; padding: 10px 0; text-align: center; }
.dd-empty { padding: 12px; font-family: var(--sans); font-size: .85rem; color: var(--ink-soft); }
.bible-nav-primary .dd-wrap.bible-select-chapter .dd-panel { left: auto; right: 0; }
.bible-nav-primary .dd-wrap.bible-select-book .dd-panel { width: min(92vw, 300px); }
@media (max-width: 768px) {
    .dd-panel { position: fixed; left: 8px !important; right: 8px !important; top: auto; bottom: 72px; width: auto; max-width: none; max-height: 60vh; }
    .dd-grid .dd-opt { width: calc(16.66% - 4px); }
}
/* Let the Bible pickers overflow the navigation box */
#bible-nav-bar:not(.collapsed) > .section-collapse-content { overflow: visible; max-height: none; }
#bible-nav-bar .dd-wrap.open { z-index: 401; }
.dd-panel { z-index: 1200; }
/* Version switch: all four versions always visible */
.version-switch { position: relative; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.version-switch-label { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-right: 2px; }
.version-opt {
    flex: 1 1 0; min-width: 56px; min-height: 38px; padding: 8px 10px; cursor: pointer; touch-action: manipulation;
    font-family: var(--display); font-size: .9rem; font-weight: 600; letter-spacing: .04em;
    border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--ink);
}
.version-opt:hover { border-color: var(--gold); }
.version-opt.on { background: var(--gold); border-color: var(--gold); color: var(--bg-card); }
.version-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 768px) { .version-switch-label { width: 100%; } }

/* Today: a quiet, guided reading sequence above the existing library shelves. */
#view-home .today-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0 20px;
}
#view-home .today-eyebrow {
    display: block;
    color: var(--gold-light);
    font: 600 0.75rem/1.4 var(--sans);
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
#view-home .today-heading h2 {
    margin-top: 4px;
    color: var(--ink);
    font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.2 var(--display);
}
#view-home .today-date {
    color: var(--ink-soft);
    font: 0.9rem/1.4 var(--serif);
    text-align: right;
}
#view-home .daily-hero {
    padding: clamp(22px, 4vw, 38px);
    margin-bottom: 18px;
}
#view-home .daily-badge {
    margin-bottom: 16px;
}
#view-home .daily-fact-container .fact-hebrew { font-size: clamp(1.8rem, 5vw, 2.5rem); }
#view-home .daily-fact-container .fact-title { font-size: clamp(1.2rem, 3vw, 1.55rem) !important; }
#view-home .daily-fact-container .fact-excerpt {
    max-width: 63ch;
    margin-bottom: 14px;
    line-height: 1.55;
}
#view-home .daily-fact-container .fact-meta { flex-wrap: wrap; }
#view-home .today-passage-label {
    color: var(--ink-soft);
    font: 0.85rem var(--sans);
}
#view-home .today-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 46px;
    margin-top: 22px;
    padding: 10px 19px;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    background: var(--crimson);
    color: #fff7e8;
    font: 600 0.875rem var(--display);
    letter-spacing: 0.03em;
}
#view-home .today-primary:hover { background: var(--crimson-light); }
#view-home .today-primary:focus-visible,
#view-home .today-step:focus-visible,
#view-home .today-continue-btn:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
}
#view-home .today-path {
    padding: 22px 26px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}
#view-home .today-section-top h2,
#view-home .today-continue h2,
#view-home .today-explore-heading h2 {
    margin: 4px 0 14px;
    color: var(--ink);
    font: 600 clamp(1.05rem, 2.6vw, 1.3rem)/1.3 var(--display);
}
#view-home .today-steps { border-top: 1px solid var(--divider); }
#view-home .today-step {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    min-height: 72px;
    padding: 11px 3px;
    border: 0;
    border-bottom: 1px solid var(--divider);
    background: transparent;
    color: var(--ink);
    text-align: left;
}
#view-home .today-step:last-child { border-bottom: 0; }
#view-home .today-step:hover .today-step-copy strong,
#view-home .today-continue-btn:hover { color: var(--gold-light); }
#view-home .today-step-number {
    width: 32px;
    flex: none;
    color: var(--gold-light);
    font: 600 0.82rem var(--display);
}
#view-home .today-step-copy { display: flex; flex: 1; flex-direction: column; gap: 2px; }
#view-home .today-step-copy strong { font: 600 1rem var(--serif); }
#view-home .today-step-copy small {
    color: var(--ink-soft);
    font: 0.85rem/1.35 var(--sans);
}
#view-home .today-step > span:last-child { color: var(--gold-light); }
#view-home .today-continue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding: 19px 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-warm);
}
#view-home .today-continue[hidden] { display: none; }
#view-home .today-continue h2 { margin-bottom: 4px; }
#view-home .today-continue p { color: var(--ink-soft); font: 1.05rem var(--serif); }
#view-home .today-continue-btn {
    min-height: 44px;
    padding: 8px 2px;
    border: 0;
    background: transparent;
    color: var(--gold-light);
    font: 600 0.875rem var(--sans);
    cursor: pointer;
    text-align: left;
}
#view-home .today-explore-heading { margin: 46px 0 20px; }
#view-home .today-explore-heading h2 { margin-bottom: 4px; }
#view-home .today-explore-heading p { color: var(--ink-soft); font: 1.05rem/1.4 var(--serif); }
@media (max-width: 600px) {
    #view-home .today-heading { align-items: start; flex-direction: column; gap: 7px; }
    #view-home .today-date { text-align: left; }
    #view-home .daily-hero { padding: 22px 20px; }
    #view-home .today-primary { width: 100%; justify-content: space-between; }
    #view-home .today-path { padding: 19px 19px 8px; }
    #view-home .today-continue { align-items: start; flex-direction: column; gap: 10px; padding: 19px; }
    #view-home .today-explore-heading { margin-top: 38px; }
}
.version-switch .dd-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); padding: 0 !important; border: 0 !important; }
/* Listen bar: always visible, outside the Navigation section */
.bible-listen-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0; }
.bible-listen-row { display: flex; gap: 8px; align-items: center; }
.bible-listen-bar .audio-progress-container.active { flex-basis: 100%; }
@media (max-width: 768px) {
    .bible-listen-bar { gap: 8px; }
    .bible-listen-row { width: 100%; }
    .bible-listen-row .bible-audio-btn, .bible-listen-row .bible-download-btn { flex: 1; text-align: center; padding: 10px 8px; }
    .bible-listen-bar .bible-audio-controls.active { width: 100%; justify-content: center; }
}
/* Narrator pickers */
.narrator-row { display: flex; align-items: center; gap: 8px; }
.narrator-label { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.narrator-row .dd-wrap { min-width: 150px; }
.kids-narration-bar { flex-wrap: wrap; }
.kids-narration-bar .dd-wrap.narrator-select { min-width: 130px; }
@media (max-width: 768px) {
    .narrator-row { width: 100%; }
    .narrator-row .dd-wrap { flex: 1; }
}
/* Keep "Ch 23" readable on phones */
.bible-nav-primary .dd-wrap.bible-select-chapter { flex: 0 0 auto; min-width: 84px; }
.bible-nav-primary .dd-wrap.bible-select-chapter .dd-btn { padding-left: 10px; padding-right: 8px; gap: 4px; }
.bible-nav-primary .dd-wrap.bible-select-book { flex: 1 1 0; min-width: 0; }

/* ===== Today palette refinement ===== */
#view-home {
    --today-wash: color-mix(in srgb, var(--crimson) 5%, var(--bg-card));
    --today-chip: color-mix(in srgb, var(--gold) 14%, transparent);
    --today-rule: color-mix(in srgb, var(--gold) 45%, var(--border));
}
#view-home .today-eyebrow { color: var(--gold-dark); }
[data-theme='dark'] #view-home .today-eyebrow { color: var(--gold); }
#view-home .today-heading { border-bottom: 1px solid var(--today-rule); margin-bottom: 22px; padding-bottom: 16px; }

/* Discovery card: calm parchment with a single crimson accent */
#view-home .daily-hero {
    background:
        linear-gradient(160deg, var(--today-wash) 0%, var(--bg-card) 55%, var(--bg-card) 100%);
    border: 1px solid var(--today-rule);
    border-left: 4px solid var(--crimson);
    border-top: 1px solid var(--today-rule);
}
#view-home .daily-hero::before { display: none; }
#view-home .daily-hero::after {
    left: auto; right: 22px; bottom: -28px; font-size: 150px;
    color: color-mix(in srgb, var(--gold) 9%, transparent);
}
#view-home .daily-badge {
    background: color-mix(in srgb, var(--crimson) 10%, transparent);
    color: var(--crimson);
    border: 1px solid color-mix(in srgb, var(--crimson) 35%, transparent);
    border-radius: 999px;
    padding: 4px 12px;
}
[data-theme='dark'] #view-home .daily-badge { color: var(--crimson-light); border-color: color-mix(in srgb, var(--crimson-light) 45%, transparent); }
#view-home .daily-fact-container .fact-title { color: var(--ink); }
#view-home .daily-fact-container .fact-excerpt { color: var(--ink-soft); }
#view-home .fact-meta .fact-category-tag,
#view-home .fact-card .fact-category-tag {
    background: var(--today-chip);
    color: var(--gold-dark);
    border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
    border-radius: 999px;
    padding: 3px 11px;
}
[data-theme='dark'] #view-home .fact-meta .fact-category-tag,
[data-theme='dark'] #view-home .fact-card .fact-category-tag { color: var(--gold-light); }
#view-home .today-passage-label { color: var(--ink-soft); font-weight: 500; }
#view-home .today-passage-label::before { content: '\2022'; margin-right: 10px; color: var(--gold); }
#view-home .today-primary { background: var(--crimson-dark); border-color: var(--crimson-dark); color: var(--on-crimson); box-shadow: 0 2px 8px color-mix(in srgb, var(--crimson-dark) 25%, transparent); }
#view-home .today-primary:hover { background: var(--crimson); border-color: var(--gold); }
[data-theme='dark'] #view-home .today-primary { background: var(--crimson); border-color: var(--crimson-light); }
[data-theme='dark'] #view-home .today-primary:hover { background: var(--crimson-light); color: var(--bg); }

/* Reading path */
#view-home .today-path { border-color: var(--today-rule); }
#view-home .today-step { border-radius: 6px; transition: background 0.2s; }
#view-home .today-step:hover { background: var(--accent-bg); }
#view-home .today-step-number {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--today-chip); color: var(--gold-dark); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
    font-size: 0.78rem;
}
[data-theme='dark'] #view-home .today-step-number { color: var(--gold-light); }
#view-home .today-step > span:last-child { color: var(--gold-dark); font-size: 1.05rem; }
[data-theme='dark'] #view-home .today-step > span:last-child { color: var(--gold); }
#view-home .today-step:hover .today-step-copy strong { color: var(--crimson); }
[data-theme='dark'] #view-home .today-step:hover .today-step-copy strong { color: var(--gold-light); }

/* Continue reading */
#view-home .today-continue { background: var(--bg-card); border-color: var(--today-rule); border-left: 4px solid var(--gold); }
#view-home .today-continue-btn { color: var(--crimson); }
[data-theme='dark'] #view-home .today-continue-btn { color: var(--gold-light); }

/* Explore shelves */
#view-home .today-explore-heading { padding-top: 22px; border-top: 1px solid var(--today-rule); }
#view-home .section-header h2 { color: var(--ink); font-size: 1.05rem; letter-spacing: 0.1em; }
#view-home .section-header h2::before { content: ''; display: inline-block; width: 18px; height: 2px; margin: 0 10px 4px 0; vertical-align: middle; background: var(--gold); }
#view-home .see-all { color: var(--crimson); }
[data-theme='dark'] #view-home .see-all { color: var(--gold-light); }
#view-home .category-card { border-color: var(--today-rule); border-top: 1px solid var(--today-rule); }
#view-home .category-card-icon {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    background: var(--today-chip); color: var(--gold-dark); font-size: 1.4rem;
}
[data-theme='dark'] #view-home .category-card-icon { color: var(--gold-light); }
#view-home .category-card p { color: var(--ink-soft); }
#view-home .category-card:hover { background: var(--bg-card); border-color: var(--gold); transform: translateY(-2px); }
#view-home .fact-card { border-color: var(--today-rule); border-left-color: var(--crimson); }
#view-home .daily-hero::after { color: color-mix(in srgb, var(--gold) 6%, transparent); z-index: 0; }
@media (max-width: 600px) { #view-home .daily-hero::after { display: none; } }

/* ===== Clear, consistent topic headers ===== */
.section-collapsible > .section-collapse-toggle {
    gap: 12px;
    padding: 10px 0 12px;
    margin-bottom: 12px;
    border-bottom: 2px solid color-mix(in srgb, var(--gold) 45%, var(--border));
}
.section-collapse-toggle > .section-toggle-label,
.section-collapse-toggle > h2,
.section-collapse-toggle > h3,
.section-collapse-toggle > div > h2,
.section-collapse-toggle .section-header h2,
.section-collapse-toggle > .kids-queue-title {
    display: block;
    margin: 0;
    padding: 2px 0 2px 12px;
    border: 0;
    border-left: 4px solid var(--gold);
    font-family: var(--display);
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
}
.section-collapse-toggle > .kids-queue-title { font-family: var(--kids-font); text-transform: none; letter-spacing: 0; }
#view-kids .section-collapse-toggle > .section-toggle-label { font-family: var(--kids-font); text-transform: none; letter-spacing: 0; }
.section-collapse-toggle > div > h2 + p { margin: 6px 0 0 16px; }
/* Visuals cards already lead with an icon; keep the icon, align the title left */
.maps-timeline-section-header.section-collapse-toggle h3 {
    flex: 1; min-width: 0; text-align: left; border-left: 0; padding-left: 0;
}
.maps-timeline-section-header .maps-timeline-count { margin-left: 0; }
/* Arrow as a visible, tappable chip */
.section-collapsible > .section-collapse-toggle > .collapse-arrow {
    display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    margin-left: auto; font-size: 0.72rem; color: var(--gold-dark);
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
[data-theme='dark'] .section-collapsible > .section-collapse-toggle > .collapse-arrow { color: var(--gold-light); }
.section-collapsible > .section-collapse-toggle:hover > .collapse-arrow { background: var(--gold); color: var(--bg-card); }
.section-collapsible > .section-collapse-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
/* Today shelves */
#view-home .section-header { padding-bottom: 12px; border-bottom: 2px solid color-mix(in srgb, var(--gold) 45%, var(--border)); }
#view-home .section-header h2 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); font-weight: 700; padding-left: 12px; border-left: 4px solid var(--gold); }
#view-home .section-header h2::before { display: none; }
#kids-story-grid-wrapper { display: block; }
.maps-timeline-section-header .maps-timeline-count { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; }

/* =====================================================
   CHUNK 1 — Reading comfort + accessibility
   ===================================================== */

/* ---- Screen-reader helpers ---- */
.sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.skip-link {
    position: fixed; top: 8px; left: 8px; z-index: 1000; transform: translateY(-160%);
    padding: 12px 18px; border-radius: var(--radius); background: var(--bg-card); color: var(--ink);
    border: 2px solid var(--gold); font: 600 1rem var(--sans); text-decoration: underline;
}
.skip-link:focus { transform: none; }
#app:focus, #page-title:focus { outline: none; }

/* ---- Visible keyboard focus everywhere ---- */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="switch"], [role="checkbox"]):focus-visible {
    outline: 3px solid var(--gold) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--bg) 85%, transparent) !important;
}
.site-header :where(a, button, [role="button"]):focus-visible,
.mobile-nav :where(button):focus-visible {
    outline-color: #fff8e9 !important;
    box-shadow: 0 0 0 5px rgba(48, 29, 24, 0.55) !important;
}
.modal :where(h1, h2, h3)[tabindex="-1"]:focus { outline: none; }
.modal :where(h1, h2, h3)[tabindex="-1"]:focus-visible { outline: 2px dashed var(--gold) !important; outline-offset: 4px !important; box-shadow: none !important; }

/* ---- Header: reading-comfort button ---- */
.header-inner { gap: 8px; }
.comfort-toggle {
    margin-left: auto;
    background: rgba(255, 248, 233, 0.08); color: #fff8e9; border: 1px solid rgba(255, 248, 233, 0.55);
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 0.95rem/1 Georgia, 'EB Garamond', serif; letter-spacing: 0;
}
.comfort-toggle:hover { background: rgba(255, 248, 233, 0.18); }
.theme-toggle, .notif-toggle { width: 40px; height: 40px; }

/* ---- Fixed chrome never covers content ---- */
:root { --header-h: 64px; --mobile-nav-h: 0px; }
.tab-directory { top: var(--header-h); }
.view [id], .view section { scroll-margin-top: calc(var(--header-h) + 64px); }
@media (max-width: 768px) {
    body { padding-bottom: calc(var(--mobile-nav-h, 64px) + 16px) !important; }
    .bm-panel { bottom: calc(var(--mobile-nav-h, 64px) + 8px) !important; }
    .dd-panel { bottom: calc(var(--mobile-nav-h, 64px) + 8px) !important; }
    .view [id], .view section { scroll-margin-bottom: calc(var(--mobile-nav-h, 64px) + 16px); }
}

/* ---- Larger tap targets on touch / small screens ---- */
@media (max-width: 768px), (pointer: coarse) {
    .theme-toggle, .notif-toggle, .comfort-toggle { width: 44px !important; height: 44px !important; }
    .dir-pill, .dir-minimize-toggle, .filter-pill, .lexicon-quick-filter-btn, .lexicon-filter-btn, .lexicon-sort-btn,
    .lexicon-sort-dir-btn, .library-sort-btn, .library-sort-dir-btn, .learn-tab-btn, .maps-era-btn, .timeline-era-btn,
    .gen-seg-toggle, .version-opt, .btn-small, .btn-secondary, .bible-more-btn, .bible-audio-btn, .bible-download-btn,
    .kids-queue-add-btn, .kids-queue-clear, .kids-queue-item-remove, .notif-verse-remove, .btn-remove-source, .btn-add-source,
    .export-btn, .vocab-more-btn, .library-load-more-btn, .tl-step-btn, .tl-full-btn, .tl-group-toggle, .flashcard-btn,
    .flashcard-shuffle-btn, .quiz-start-btn, .quiz-retry-btn, .kids-back-btn, .fact-read-more, .today-continue-alt {
        min-height: 44px;
    }
    .lexicon-sort-dir-btn, .library-sort-dir-btn, .notif-verse-remove, .btn-remove-source, .kids-queue-item-remove, .bible-more-btn { min-width: 44px; }
    .see-all { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
    .modal-close { width: 44px !important; height: 44px !important; }
    .section-collapse-toggle .collapse-arrow[role="button"] { width: 44px !important; height: 44px !important; min-width: 44px; }
    .verse-bm-btn { width: 44px; height: 44px; }
    .notif-topic-item { min-height: 44px; }
    .notif-switch { min-width: 52px; min-height: 32px; }
    .mobile-nav-link { min-height: 56px; }
}

/* ---- No hover-only actions ---- */
.verse-bm-btn { opacity: .45; }
.verse-bm-btn:focus-visible, .bible-verse:focus-within .verse-bm-btn, .bible-verse-block:focus-within .verse-bm-btn { opacity: 1 !important; }

/* ---- State is never shown by color alone ---- */
:where(.filter-pill, .lexicon-quick-filter-btn, .lexicon-filter-btn, .lexicon-sort-btn, .library-sort-btn, .maps-era-btn,
       .timeline-era-btn, .gen-seg-toggle, .learn-tab-btn, .version-opt):is(.active, .on, [aria-pressed="true"], [aria-checked="true"]) {
    font-weight: 700 !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.nav-link[aria-current="page"], .mobile-nav-link[aria-current="page"] .mobile-nav-label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.notif-topic-item.checked::before { content: '✓ '; font-weight: 700; }
.fact-detail-sources a, .fact-sources a, .modal-content a, #modal-content a, .resource-card a, .learn-resource a, .site-footer a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Contrast fixes found by the audit ---- */
[data-theme='light'] .lexicon-stat-label { color: var(--ink-soft); }

/* ---- Continue where you left off ---- */
#view-home .today-continue { flex-wrap: wrap; }
#view-home .today-continue-btn[hidden] { display: none; }
#view-home .today-continue-btn:not([hidden]) {
    min-height: 48px; padding: 10px 18px; border: 1px solid var(--crimson-dark); border-radius: var(--radius);
    background: var(--crimson-dark); color: var(--on-crimson); font-weight: 600;
}
#view-home .today-continue-btn:not([hidden]):hover { background: var(--crimson); color: var(--on-crimson); }
[data-theme='dark'] #view-home .today-continue-btn:not([hidden]) { background: var(--crimson); border-color: var(--crimson-light); color: var(--on-crimson); }
#view-home .today-continue-more { flex-basis: 100%; list-style: none; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid var(--divider); display: grid; gap: 6px; }
#view-home .today-continue-more[hidden] { display: none; }
#view-home .today-continue-alt {
    width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--ink);
    font: 500 0.95rem/1.35 var(--sans); text-align: left; cursor: pointer;
}
#view-home .today-continue-alt:hover { border-color: var(--gold); }
#view-home .today-continue-alt-label { flex: 1; }
#view-home .today-continue-recent {
    flex: none; padding: 2px 8px; border: 1px solid var(--gold); border-radius: 999px; color: var(--ink-soft);
    font: 600 0.72rem/1.4 var(--sans); letter-spacing: .02em;
}
#view-home .today-continue-alt-arrow { color: var(--gold-dark); flex: none; }
@media (max-width: 600px) { #view-home .today-continue-btn:not([hidden]) { width: 100%; text-align: center; } }

/* ---- Reading comfort dialog ---- */
.modal-comfort { max-width: 560px; }
.modal-comfort h2 { font: 700 1.4rem/1.25 var(--display); color: var(--ink); margin: 0 48px 6px 0; }
.comfort-desc { color: var(--ink-soft); margin-bottom: 18px; }
.comfort-group { border: 0; margin: 0 0 18px; padding: 0; }
.comfort-group legend { font: 700 0.95rem var(--sans); color: var(--ink); margin-bottom: 8px; padding: 0; }
.comfort-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.comfort-options-5 { grid-template-columns: repeat(5, 1fr); }
.comfort-opt { position: relative; display: block; }
.comfort-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.comfort-opt > span {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 6px 4px;
    border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-card); color: var(--ink);
    font: 500 0.82rem/1.2 var(--sans); text-align: center;
}
.comfort-opt input:checked + span { border: 2px solid var(--crimson); background: var(--accent-bg); font-weight: 700; }
.comfort-opt input:checked + span::after { content: '✓ Selected'; font-size: 0.68rem; font-weight: 600; color: var(--ink-soft); }
.comfort-opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.comfort-sample { font-family: Georgia, serif; line-height: 1; color: var(--ink); }
.comfort-sample-smaller { font-size: 14px; } .comfort-sample-standard { font-size: 16px; } .comfort-sample-large { font-size: 18px; }
.comfort-sample-larger { font-size: 20px; } .comfort-sample-largest { font-size: 24px; }
.comfort-switch {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; margin-bottom: 6px; position: relative;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); cursor: pointer;
}
.comfort-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.comfort-switch-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.comfort-switch-text strong { font: 600 0.95rem var(--sans); color: var(--ink); }
.comfort-switch-text small { font: 0.82rem/1.35 var(--sans); color: var(--ink-soft); }
.comfort-note { color: var(--ink) !important; font-weight: 600 !important; }
.comfort-switch-track {
    flex: none; position: relative; width: 64px; height: 30px; border-radius: 999px; border: 2px solid var(--border-strong);
    background: var(--bg-warm); display: inline-flex; align-items: center;
}
.comfort-switch-thumb { position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-soft); transition: left .15s; }
.comfort-switch-state::before { content: 'Off'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 700 0.68rem var(--sans); color: var(--ink); }
.comfort-switch input:checked ~ .comfort-switch-track { background: var(--crimson-dark); border-color: var(--crimson-dark); }
.comfort-switch input:checked ~ .comfort-switch-track .comfort-switch-thumb { left: 37px; background: #fff8e9; }
.comfort-switch input:checked ~ .comfort-switch-track .comfort-switch-state::before { content: 'On'; left: 9px; right: auto; color: #fff8e9; }
.comfort-switch input:focus-visible ~ .comfort-switch-track { outline: 3px solid var(--gold); outline-offset: 2px; }
.comfort-preview { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 12px 14px; margin: 4px 0 16px; background: var(--bg-card); }
.comfort-preview-label { display: block; font: 700 0.72rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.comfort-preview p { font: 1.1rem var(--serif); color: var(--ink); margin: 0; }
.comfort-preview-ref { font: 0.8rem var(--sans); color: var(--ink-soft); white-space: nowrap; }
.comfort-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.comfort-actions button { min-height: 44px; }
.comfort-hint { margin-top: 12px; font: 0.8rem var(--sans); color: var(--ink-soft); }
@media (max-width: 480px) {
    .modal-comfort { padding: 28px 16px 20px !important; margin: 8px auto !important; }
    .comfort-options-5 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Text size (scales every rem-based size; respects browser zoom) ---- */
html[data-font-size="smaller"] { font-size: 93.75%; }
html[data-font-size="large"]   { font-size: 112.5%; }
html[data-font-size="larger"]  { font-size: 125%; }
html[data-font-size="largest"] { font-size: 150%; }
@media (max-width: 640px) {
    html[data-font-size="largest"] { font-size: 137.5%; }
    html[data-font-size="larger"], html[data-font-size="largest"] { overflow-wrap: anywhere; }
    html:is([data-font-size="larger"], [data-font-size="largest"]) .mobile-nav-label { font-size: 0.58rem; }
    html:is([data-font-size="larger"], [data-font-size="largest"]) .logo { font-size: 0.9rem; }
}

/* ---- Line spacing ---- */
html[data-line-spacing="relaxed"] :is(p, li, dd, blockquote, textarea, .bible-verse, .bible-verse-esv, .bible-verse-block, .fact-excerpt, .fact-detail-body, .kids-story-text, .section-summary, .definition, .lexicon-def) { line-height: 1.85 !important; }
html[data-line-spacing="extra"] :is(p, li, dd, blockquote, textarea, .bible-verse, .bible-verse-esv, .bible-verse-block, .fact-excerpt, .fact-detail-body, .kids-story-text, .section-summary, .definition, .lexicon-def) { line-height: 2.15 !important; word-spacing: 0.06em; }
html[data-line-spacing="extra"] :is(p, li) + :is(p, li) { margin-top: 0.6em; }

/* ---- Readable font ---- */
html[data-readable-font] {
    --serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Verdana, sans-serif;
    --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Verdana, sans-serif;
    --display-deco: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Verdana, sans-serif;
    --kids-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Verdana, sans-serif;
}
html[data-readable-font] :is(h1, h2, h3, h4, .nav-link, .logo, .section-toggle-label, .learn-section-title, .fact-title, .today-eyebrow, .btn-primary, .btn-secondary, .today-primary, .dir-pill, .fact-category-tag, .daily-badge, legend) {
    text-transform: none !important; letter-spacing: 0.01em !important; font-variant: normal !important;
}
html[data-readable-font] :is(p, li, .fact-excerpt, .fact-detail-body, .bible-verse-esv) { font-style: normal; }

/* ---- High contrast (light) ---- */
html[data-contrast="high"][data-theme='light'], html[data-contrast="high"]:not([data-theme]) {
    --bg: #fffdf8; --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-warm: #f7efe2;
    --ink: #140f09; --ink-soft: #2f261c; --ink-faint: #3d3226;
    --crimson: #6b1f1c; --crimson-dark: #561614; --crimson-light: #6b1f1c;
    --gold: #5a3d0c; --gold-light: #5a3d0c; --gold-dark: #4a320a;
    --accent: #6b1f1c; --accent-light: #6b1f1c;
    --divider: #6d5c45; --border: #5c4b35; --border-strong: #2f261c;
    --parchment-texture: #ffffff; --body-bg-image: none;
}
/* ---- High contrast (dark) ---- */
html[data-contrast="high"][data-theme='dark'] {
    --bg: #0f0d0b; --bg-card: #1a1714; --bg-elevated: #221e1a; --bg-warm: #26211b;
    --ink: #ffffff; --ink-soft: #f0e6d6; --ink-faint: #e2d6c3;
    --crimson: #b3443c; --crimson-dark: #922f29; --crimson-light: #ffb3a6;
    --gold: #ffd98a; --gold-light: #ffe3a8; --gold-dark: #f5cc75;
    --accent: #ffd98a; --accent-light: #ffe3a8;
    --divider: #a08a6c; --border: #b89f7e; --border-strong: #e8d6b8;
    --parchment-texture: #1a1714; --body-bg-image: none;
}
html[data-contrast="high"] :is(.fact-card, .category-card, .modal, .today-continue, .today-path, .daily-hero, .section-collapsible, .kids-story-card, .map-card, .comfort-switch, .comfort-opt > span) { border-width: 2px !important; border-color: var(--border-strong) !important; }
html[data-contrast="high"] main a, html[data-contrast="high"] .modal a { text-decoration: underline !important; text-decoration-thickness: 2px !important; }
html[data-contrast="high"] ::placeholder { color: var(--ink-faint) !important; opacity: 1; }
html[data-contrast="high"] .site-header, html[data-contrast="high"] .mobile-nav { background: #3d0f0d !important; border-color: #ffd98a !important; }
html[data-contrast="high"] .mobile-nav-link { color: #ffffff !important; opacity: 1 !important; }
html[data-contrast="high"] :focus-visible { outline-width: 4px !important; }

/* ---- Reduced motion: device preference or the in-app switch ---- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
html[data-reduce-motion] { scroll-behavior: auto !important; }
html[data-reduce-motion] *, html[data-reduce-motion] *::before, html[data-reduce-motion] *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
.site-footer a { color: inherit; font-weight: 600; }
#view-home .today-continue { margin: 0 0 18px; }

/* ---- Notes form: labelled, full-width fields with comfortable targets (uses existing .write-input look) ---- */
.fact-form { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.fact-form .form-row { display: flex; gap: 16px; }
.fact-form .form-row > .form-group { flex: 1; min-width: 0; }
.fact-form .form-group { display: flex; flex-direction: column; gap: 6px; }
.fact-form .form-group > label { font: 600 0.9rem/1.35 var(--sans); color: var(--ink); }
.fact-form .required { color: var(--crimson); }
.fact-form .hint, .fact-form .form-hint { font: 0.82rem/1.45 var(--sans); color: var(--ink-soft); }
.fact-form :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select, textarea) {
    width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius);
    font: 1rem/1.5 var(--serif); background: var(--bg-card); color: var(--ink);
}
.fact-form textarea { min-height: 96px; resize: vertical; }
.fact-form #fact-body { min-height: 200px; }
.fact-form :is(input, select, textarea):focus { border-color: var(--gold); }
.fact-form ::placeholder { color: var(--ink-faint); opacity: 1; }
.fact-form .form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.fact-form .form-actions button, .fact-form .btn-preview { min-height: 44px; }
.fact-form .btn-preview { padding: 10px 18px; border: 1px solid var(--gold); border-radius: var(--radius); background: transparent; color: var(--ink); font: 600 0.9rem var(--sans); cursor: pointer; }
@media (max-width: 640px) { .fact-form .form-row { flex-direction: column; gap: 16px; } }

/* ---- Remaining small targets on touch screens ---- */
@media (max-width: 768px), (pointer: coarse) {
    .leaflet-touch .leaflet-bar a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
    .tl-ov-row, .gen-path-step, .gen-line-btn, .bm-toggle, .bible-select.dd-btn, .dd-btn { min-height: 44px; }
    .view :is(input[type=text], input[type=search], input:not([type]), input[type=time], select) { min-height: 44px; }
    .kids-story-title[data-kbd] { min-height: 44px; display: flex; align-items: center; justify-content: center; }
}

/* ---- Timeline overview labels stay readable on any era colour ---- */
.tl-ov-text :is(strong, small, em) { background: var(--bg-card); color: var(--ink); padding: 1px 6px; border-radius: 4px; opacity: 1; }
.tl-rail-date { color: color-mix(in srgb, var(--era-color) 50%, var(--ink)); }
.tl-event-more[role="button"] { cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 768px), (pointer: coarse) { .tl-event-more[role="button"] { min-height: 44px; } }
/* Era colour stays on the dot/rail; the date text itself uses readable ink */
.tl-event-date { color: var(--ink-soft) !important; }
.gen-line-btn.active { background: var(--crimson-dark); color: var(--on-crimson); }
/* Bottom-nav labels never break mid-word at large text sizes */
.mobile-nav-label { white-space: nowrap; overflow-wrap: normal !important; word-break: keep-all; }
html:is([data-font-size="larger"], [data-font-size="largest"]) .mobile-nav-label { font-size: min(0.58rem, 10px) !important; letter-spacing: 0 !important; }
html:is([data-font-size="larger"], [data-font-size="largest"]) .mobile-nav-icon { font-size: min(1.2rem, 20px); }
/* Header keeps the brand on one line with the added reading-comfort button */
.logo { white-space: nowrap; flex-shrink: 0; }
@media (min-width: 769px) {
    .header-inner { max-width: 1000px; height: auto; min-height: 64px; flex-wrap: wrap; }
    .main-nav { min-width: 0; flex-wrap: wrap; }
}
@media (min-width: 641px) and (max-width: 960px) {
    .header-inner { padding: 0 12px; gap: 4px; }
    .main-nav { gap: 0 !important; min-width: 0; }
    .nav-link { padding: 8px 6px !important; font-size: 0.72rem; letter-spacing: 0.02em; }
    .logo { font-size: 1rem; }
    .comfort-toggle, .theme-toggle, .notif-toggle { width: 38px !important; height: 38px !important; }
}

/* =====================================================
   CHUNK 2 — Simple / Study display mode
   Study (default) = everything as before. Simple hides advanced
   controls with CSS only; "Explore deeper" on each screen shows them.
   ===================================================== */

/* ---- Mode picker in the Reading & display dialog ---- */
.mode-current { font-weight: 500; color: var(--ink-soft); }
.mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-opt { position: relative; display: block; }
.mode-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mode-opt-card {
    display: flex; flex-direction: column; gap: 4px; min-height: 96px; height: 100%; padding: 12px 14px;
    border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-card); color: var(--ink);
}
.mode-opt-card strong { font: 700 1.05rem var(--sans); }
.mode-opt-card small { font: 0.82rem/1.4 var(--sans); color: var(--ink-soft); }
.mode-opt input:checked + .mode-opt-card { border: 2px solid var(--crimson); background: var(--accent-bg); }
.mode-opt input:checked + .mode-opt-card strong::after { content: '  ✓ Selected'; font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); }
.mode-opt input:focus-visible + .mode-opt-card { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 420px) { .mode-options { grid-template-columns: 1fr; } .mode-opt-card { min-height: 0; } }

/* ---- Simple-mode guide bar + Explore deeper ---- */
.mode-intro, .fact-deeper-toggle, .mode-summary-label { display: none; }
html[data-mode="simple"] .mode-intro {
    display: block; margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--border);
    border-left: 4px solid var(--gold); border-radius: var(--radius); background: var(--bg-card);
}
html[data-mode="simple"] #view-home .mode-intro { margin-top: 18px; }
.mode-intro-eyebrow { display: block; font: 700 0.72rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.mode-intro-text { font: 1rem/1.6 var(--sans); color: var(--ink); margin: 0 0 12px; }
.mode-intro-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mode-intro-action {
    min-height: 44px; padding: 10px 18px; border: 1px solid var(--crimson-dark); border-radius: var(--radius);
    background: var(--crimson-dark); color: var(--on-crimson); font: 600 0.95rem var(--sans); cursor: pointer;
}
[data-theme='dark'] .mode-intro-action { background: var(--crimson); border-color: var(--crimson-light); }
.deeper-toggle {
    min-height: 44px; padding: 10px 16px; border: 1px solid var(--gold); border-radius: var(--radius);
    background: transparent; color: var(--ink); font: 600 0.92rem/1.35 var(--sans); text-align: left; cursor: pointer;
}
.deeper-toggle:hover { background: var(--accent-bg); }
.deeper-toggle[aria-expanded="true"] { border-style: dashed; }
@media (max-width: 600px) { .mode-intro-actions > button { width: 100%; justify-content: center; text-align: center; } }

/* ---- Simple: larger, calmer text (stacks with Reading comfort text size) ---- */
html[data-mode="simple"] { font-size: 106.25%; }
html[data-mode="simple"][data-font-size="smaller"] { font-size: 100%; }
html[data-mode="simple"][data-font-size="large"] { font-size: 118.75%; }
html[data-mode="simple"][data-font-size="larger"] { font-size: 131.25%; }
html[data-mode="simple"][data-font-size="largest"] { font-size: 150%; }
@media (max-width: 640px) { html[data-mode="simple"][data-font-size="largest"] { font-size: 137.5%; } }
html[data-mode="simple"]:not([data-line-spacing="relaxed"]):not([data-line-spacing="extra"]) :is(.fact-excerpt, .fact-detail-body p, .bible-verse-esv, .kids-story-text p, .mode-intro-text) { line-height: 1.75; }

/* ---- Simple: advanced material hidden until "Explore deeper" ---- */
html[data-mode="simple"] .view:not(.deeper-open) > .tab-directory,
/* Today: one clear path; categories and recent studies wait below */
html[data-mode="simple"] #view-home:not(.deeper-open) :is(.today-explore-heading, .home-section),
/* Bible: reading, Listen, versions and bookmarks stay; comparison tools wait */
html[data-mode="simple"] #view-bible:not(.deeper-open) :is(#bible-compare, #bible-translate, .narrator-row, #bible-download-audio, .dd-wrap.bible-audio-speed, #bible-audio-speed, #bible-insights),
/* Learn: search, language tabs, vocabulary, alphabet, flashcards, quiz stay */
html[data-mode="simple"] #view-learn:not(.deeper-open) :is(.lexicon-sort-bar, .lexicon-sort-direction, #learn-grammar-section, #learn-resources-section, #learn-reading-section, #learn-paradigms-section, #learn-pronunciation-section),
/* Library: search + categories stay */
html[data-mode="simple"] #view-library:not(.deeper-open) #library-sort-bar,
/* Notes: required fields stay; optional ones show when they hold something */
html[data-mode="simple"] #view-write:not(.deeper-open) :is(.mode-optional:not(.is-filled), .my-facts-actions),
/* Kids: Listen and Stop stay */
html[data-mode="simple"] #view-kids:not(.deeper-open) #kids-narration-bar :is(.dd-wrap, select),
/* Visuals: map and timeline stay */
html[data-mode="simple"] #view-visuals:not(.deeper-open) :is(.maps-era-filters, .timeline-era-filters, #visuals-genealogy-section) {
    display: none !important;
}

/* ---- Simple: one clear next action on Today ---- */
html[data-mode="simple"] #view-home:has(#today-continue:not([hidden])) .today-primary {
    background: transparent !important; color: var(--ink) !important; border: 1px solid var(--gold) !important; box-shadow: none !important;
}
html[data-mode="simple"] #view-home .today-steps small { font-size: 0.9rem; }

/* ---- Study detail: summary first in Simple mode ---- */
html[data-mode="simple"] .mode-summary-label {
    display: inline-block; margin: 12px 0 6px; padding: 2px 10px; border: 1px solid var(--gold); border-radius: 999px;
    font: 700 0.72rem/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
}
html[data-mode="simple"] .fact-deeper-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 16px; }
html[data-mode="simple"] #modal-content:not(.deeper-open) .fact-deeper { display: none; }
html[data-contrast="high"] :is(.mode-intro, .mode-opt-card) { border-width: 2px !important; border-color: var(--border-strong) !important; }
.fact-sources .fact-sources-heading { font-weight: 600; line-height: 1.4; margin-top: 0; }
:root:not([data-theme='dark']) .lexicon-stat-label { color: var(--ink-soft); }
.fact-simple-summary { display: none; }
html[data-mode="simple"] #modal-content .fact-simple-summary { display: block; margin: 4px 0 12px; }
html[data-mode="simple"] #modal-content .fact-simple-summary p { font: 1.15rem/1.75 var(--serif); color: var(--ink); margin: 0; }
html[data-mode="simple"] #modal-content .fact-excerpt { display: none; }
html[data-mode="simple"] #modal-content.deeper-open .fact-simple-summary { display: none; }

/* ===== Chunk 3: Optional learning paths (Today) ===== */
#view-home .today-path-rec {
    margin: 18px 0;
    padding: 22px 26px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    background: var(--bg-card);
}
#view-home .today-path-rec[hidden] { display: none; }
#view-home .today-path-rec h2 { margin: 4px 0 8px; color: var(--ink); font: 600 clamp(1.05rem, 2.6vw, 1.3rem)/1.3 var(--display); }
#view-home .today-path-rec h2:focus { outline: none; }
#view-home .today-path-rec h2:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
#view-home .path-lead { color: var(--ink-soft); font: 1rem/1.55 var(--serif); margin: 0 0 14px; max-width: 62ch; }
#view-home .path-options { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
#view-home .path-option {
    display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 72px; height: 100%;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-warm); color: var(--ink); text-align: left; cursor: pointer;
}
#view-home .path-option strong { font: 600 1rem/1.3 var(--serif); }
#view-home .path-option small { color: var(--ink-soft); font: 0.85rem/1.4 var(--sans); }
#view-home .path-option:hover { border-color: var(--gold); }
#view-home .path-choose-foot, #view-home .path-rec-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 12px; }
#view-home .path-skip, #view-home .path-change {
    min-height: 44px; padding: 8px 2px; border: 0; background: transparent;
    color: var(--gold-light); font: 600 0.875rem var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
#view-home .path-foot-note { color: var(--ink-soft); font: 0.82rem/1.4 var(--sans); }
#view-home .path-primary {
    display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; width: 100%; min-height: 52px; margin-top: 6px;
    padding: 11px 18px; border: 1px solid var(--gold); border-radius: var(--radius);
    background: var(--crimson); color: #fff7e8; text-align: left; cursor: pointer;
}
#view-home .path-primary-label { flex: 1 1 auto; font: 600 0.95rem/1.35 var(--sans); }
#view-home .path-primary small { order: 3; flex-basis: 100%; font: 0.8rem/1.35 var(--sans); color: #f6e7cf; }
#view-home .path-primary .path-arrow { flex: none; }
#view-home .path-primary:hover { background: var(--crimson-dark); }
#view-home .path-more-title { margin: 16px 0 4px; color: var(--ink-soft); font: 600 0.78rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
#view-home .path-more { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--divider); }
#view-home .path-more li { border-bottom: 1px solid var(--divider); }
#view-home .path-more-btn {
    display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 10px 2px;
    border: 0; background: transparent; color: var(--ink); font: 1rem/1.35 var(--serif); text-align: left; cursor: pointer;
}
#view-home .path-more-btn span { color: var(--gold-light); flex: none; }
#view-home .path-more-btn:hover { color: var(--gold-light); }
#view-home .path-talk { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); background: var(--bg-warm); }
#view-home .path-talk-label { display: block; color: var(--ink-soft); font: 600 0.75rem/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
#view-home .path-talk p { margin: 4px 0 0; color: var(--ink); font: 1.05rem/1.55 var(--serif); }
#view-home .path-option:focus-visible, #view-home .path-skip:focus-visible, #view-home .path-change:focus-visible,
#view-home .path-primary:focus-visible, #view-home .path-more-btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
/* Simple mode: keep a single main action on Today when Continue is already showing */
html[data-mode="simple"] #view-home:has(#today-continue:not([hidden])) .path-primary { background: transparent; color: var(--ink); }
html[data-mode="simple"] #view-home:has(#today-continue:not([hidden])) .path-primary small { color: var(--ink-soft); }
html[data-mode="simple"] #view-home:has(#today-continue:not([hidden])) .path-primary .path-arrow { color: var(--gold-light); }
html[data-mode="simple"] #view-home:has(#today-continue:not([hidden])) .path-primary:hover { background: var(--bg-warm); }
.path-settings-options { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
    #view-home .today-path-rec { padding: 19px; }
    #view-home .path-options { grid-template-columns: 1fr; }
    .path-settings-options { grid-template-columns: 1fr; }
}
#view-home .path-primary { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; row-gap: 2px; }
#view-home .path-primary-label { grid-column: 1; grid-row: 1; }
#view-home .path-primary .path-arrow { grid-column: 2; grid-row: 1; align-self: center; }
#view-home .path-primary small { grid-column: 1 / -1; grid-row: 2; }

/* ===== Chunk 4: Teaching Library (inside Library) ===== */
.teaching-library { margin: 18px 0 26px; padding: 22px 26px; border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: var(--radius); background: var(--bg-card); }
.teaching-library > .section-collapse-toggle h2 { font: 600 clamp(1.15rem, 2.8vw, 1.45rem)/1.3 var(--display); color: var(--ink); margin: 0; }
.tch-intro { color: var(--ink-soft); font: 1rem/1.6 var(--serif); margin: 10px 0 12px; max-width: 70ch; }
.tch-demo-note { margin: 0 0 14px; padding: 10px 12px; border: 1px dashed var(--gold); border-radius: var(--radius); background: var(--bg-warm); color: var(--ink); font: 0.875rem/1.5 var(--sans); }
.tch-views { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.tch-view-btn { min-height: 44px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-warm); color: var(--ink); font: 600 0.875rem var(--sans); cursor: pointer; }
.tch-view-btn[aria-pressed="true"] { background: var(--crimson); border-color: var(--crimson); color: #fff7e8; }
.tch-n { font-weight: 400; }
.tch-search { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.tch-search label, .tch-filter label, .tch-progress-field label, .tch-note-label { color: var(--ink); font: 600 0.82rem var(--sans); }
.tch-search input, .tch-filter select, .tch-progress-field select, .tch-progress-field input, #tch-report-note {
    width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-card); color: var(--ink); font: 1rem var(--sans); box-sizing: border-box;
}
.tch-search input:focus-visible, .tch-filter select:focus-visible, .tch-progress-field select:focus-visible, .tch-progress-field input:focus-visible, #tch-report-note:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.tch-filters { margin: 0 0 8px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--bg-warm); }
.tch-filters > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 8px 12px; cursor: pointer; color: var(--ink); font: 600 0.9rem var(--sans); }
.tch-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding: 4px 12px 10px; }
.tch-filter { display: flex; flex-direction: column; gap: 4px; }
.tch-clear { margin: 0 12px 12px; }
.tch-count { color: var(--ink-soft); font: 0.875rem var(--sans); margin: 8px 0 12px; }
.tch-count:focus { outline: none; }
.tch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tch-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: q; }
.tch-queue > li { counter-increment: q; position: relative; }
.tch-queue > li .tch-card-top::before { content: counter(q) "."; font: 700 0.9rem var(--sans); color: var(--gold-light); margin-right: 6px; }
.tch-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); min-width: 0; }
.tch-card.is-demo { border-style: dashed; }
.tch-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.tch-provider { color: var(--ink-soft); font: 600 0.75rem/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.tch-demo-badge { padding: 2px 8px; border: 1px solid var(--gold); border-radius: 999px; color: var(--ink); font: 600 0.72rem var(--sans); }
.tch-title { margin: 2px 0 0; color: var(--ink); font: 600 1.1rem/1.35 var(--serif); overflow-wrap: anywhere; }
.tch-title:focus { outline: none; }
.tch-creator { margin: 0; color: var(--ink-soft); font: 0.9rem var(--sans); }
.tch-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; padding: 0; }
.tch-badges li { padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-warm); color: var(--ink); font: 0.78rem var(--sans); }
.tch-covers { margin: 0; color: var(--ink); font: 0.9rem/1.45 var(--sans); }
.tch-k { color: var(--ink-soft); font-weight: 600; margin-right: 4px; }
.tch-summary, .tch-why { margin: 4px 0 0; color: var(--ink); font: 1rem/1.55 var(--serif); }
.tch-label { display: block; color: var(--ink-soft); font: 600 0.72rem/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.tch-more { margin-top: 4px; border-top: 1px solid var(--divider); }
.tch-more > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--gold-light); font: 600 0.85rem var(--sans); }
.tch-more dl { margin: 0 0 6px; display: grid; gap: 6px; }
.tch-more dl div { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 8px; }
.tch-more dt { color: var(--ink-soft); font: 600 0.8rem var(--sans); }
.tch-more dd { margin: 0; color: var(--ink); font: 0.85rem/1.45 var(--sans); overflow-wrap: anywhere; }
.tch-progress { display: grid; grid-template-columns: minmax(130px, 40%) 1fr; gap: 10px; padding: 10px 0 2px; border-top: 1px solid var(--divider); }
.tch-progress-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tch-optional { font-weight: 400; color: var(--ink-soft); }
.tch-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.tch-open { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--crimson); color: #fff7e8; font: 600 0.875rem var(--sans); text-decoration: none; cursor: pointer; }
.tch-open:hover { background: var(--crimson-dark); }
.tch-btn { min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-warm); color: var(--ink); font: 600 0.85rem var(--sans); cursor: pointer; }
.tch-btn[aria-pressed="true"] { border-color: var(--gold); }
.tch-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.tch-btn:hover:not(:disabled) { border-color: var(--gold); }
.tch-link-btn { min-height: 44px; padding: 8px 2px; border: 0; background: transparent; color: var(--ink-soft); font: 0.82rem var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.tch-nolink { color: var(--ink-soft); font: 0.85rem var(--sans); }
.tch-more-btn { margin-top: 14px; width: 100%; }
.tch-open:focus-visible, .tch-btn:focus-visible, .tch-link-btn:focus-visible, .tch-view-btn:focus-visible, .tch-more > summary:focus-visible, .tch-filters > summary:focus-visible, .tch-report-list summary:focus-visible, .tch-report-preview:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.tch-empty { padding: 22px 16px; border: 1px dashed var(--border); border-radius: var(--radius); text-align: center; color: var(--ink); }
.tch-empty h3 { margin: 0 0 6px; font: 600 1.1rem var(--serif); color: var(--ink); }
.tch-empty p { margin: 0 0 12px; color: var(--ink-soft); font: 0.95rem/1.5 var(--sans); }
.tch-resume { margin: 4px 0 14px; padding: 14px 16px; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--bg-warm); }
.tch-eyebrow { display: block; color: var(--gold-light); font: 600 0.72rem/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.tch-resume h3 { margin: 4px 0 2px; font: 600 1.05rem/1.35 var(--serif); color: var(--ink); }
.tch-resume-meta { margin: 0; color: var(--ink-soft); font: 0.875rem var(--sans); }
.tch-report-list { margin-top: 18px; border-top: 1px solid var(--divider); }
.tch-report-list summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ink); font: 600 0.875rem var(--sans); }
.tch-report-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tch-report-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--divider); border-radius: var(--radius); color: var(--ink); font: 0.875rem var(--sans); }
.tch-report-list li span { color: var(--ink-soft); }
.tch-hint { color: var(--ink-soft); font: 0.85rem/1.5 var(--sans); }
/* Dialogs */
.modal-tch { max-width: 520px; }
.modal-tch h2 { font: 700 1.3rem/1.25 var(--display); color: var(--ink); margin: 0 48px 10px 0; }
.modal-tch p { color: var(--ink); font: 0.95rem/1.55 var(--sans); }
.tch-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tch-limit { padding: 10px 12px; border-radius: var(--radius); background: var(--bg-warm); }
.tch-report-res { font-weight: 600; }
.tch-reasons { margin: 8px 0; padding: 0; border: 0; }
.tch-reasons legend { color: var(--ink); font: 600 0.9rem var(--sans); margin-bottom: 6px; }
.tch-reason { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; color: var(--ink); font: 0.92rem/1.35 var(--sans); cursor: pointer; }
.tch-reason input { width: 20px; height: 20px; flex: none; accent-color: var(--crimson); }
.tch-error { color: var(--crimson); font-weight: 600; }
.tch-report-preview { white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--bg-warm); color: var(--ink); font: 0.82rem/1.5 ui-monospace, Menlo, monospace; max-height: 180px; overflow: auto; }
[data-theme="dark"] .tch-error { color: #f0a59b; }
/* Simple mode: keep search + two basic filters; the rest waits behind "Explore deeper" unless in use */
html[data-mode="simple"] #view-library:not(.deeper-open) .tch-filter-adv:not(.is-filled) { display: none; }
@media (max-width: 600px) {
    .teaching-library { padding: 18px 16px; }
    .tch-grid { grid-template-columns: 1fr; }
    .tch-filter-grid { grid-template-columns: 1fr 1fr; }
    .tch-progress { grid-template-columns: 1fr; }
    .tch-more dl div { grid-template-columns: 1fr; gap: 0; }
    .tch-actions .tch-open { flex: 1 1 100%; justify-content: center; }
    .tch-actions .tch-btn { flex: 1 1 auto; }
}
@media (max-width: 380px) { .tch-filter-grid { grid-template-columns: 1fr; } }
.tch-collection-note { margin: 0 0 12px; color: var(--ink-soft); font: 0.875rem/1.5 var(--sans); }

/* ===== Gentle reminders (Chunk 6) ===== */
#view-home .today-reminder { margin: 18px 0 0; padding: 18px 22px; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--bg-card); }
#view-home .today-reminder[hidden] { display: none; }
#view-home .today-reminder h2 { margin: 4px 0 6px; color: var(--ink); font: 600 1.25rem/1.3 var(--serif); }
.rem-body { margin: 0 0 12px; color: var(--ink); font: 1rem/1.55 var(--serif); }
.rem-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rem-options { margin-top: 10px; }
.rem-options > summary, .rem-how > summary, .rem-earlier > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ink); font: 600 0.875rem var(--sans); }
.rem-options > summary:focus-visible, .rem-how > summary:focus-visible, .rem-earlier > summary:focus-visible, .rem-choice input:focus-visible, .rem-select:focus-visible, .rem-time:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.rem-feedback { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.rem-sm { font-size: 0.8rem; padding: 6px 10px; }
.rem-panel { margin-bottom: 8px; }
.rem-status { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-warm); color: var(--ink); font: 0.9rem/1.5 var(--sans); }
.rem-status strong { display: block; margin-bottom: 2px; }
.rem-fieldset { border: 0; margin: 0; min-width: 0; }
.rem-fieldset[hidden] { display: none; }
.rem-fieldset > legend { padding: 0; }
.rem-radios, .rem-cats { display: grid; gap: 4px; }
.rem-choice { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 4px; color: var(--ink); font: 0.95rem/1.4 var(--sans); cursor: pointer; }
.rem-choice input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--crimson); }
.rem-cat span { display: flex; flex-direction: column; gap: 2px; }
.rem-cat small { color: var(--ink-soft); font-size: 0.82rem; }
.rem-inline, .rem-times > div { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; color: var(--ink); font: 600 0.85rem var(--sans); }
.rem-inline[hidden], .rem-times[hidden] { display: none; }
.rem-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rem-select, .rem-time { min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); color: var(--ink); font: 1rem var(--sans); }
[data-theme="dark"] .rem-time { color-scheme: dark; }
.rem-muted ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rem-muted li { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink); font: 0.9rem var(--sans); }
.rem-how p { margin: 0 0 8px; color: var(--ink-soft); font: 0.875rem/1.55 var(--sans); }
.rem-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.rem-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--divider); border-radius: var(--radius); color: var(--ink); font: 0.9rem/1.45 var(--sans); }
.rem-item-meta { color: var(--ink-soft); font-size: 0.8rem; }
.rem-item-body { color: var(--ink); }
@media (max-width: 430px) { .rem-times { grid-template-columns: 1fr; } #view-home .today-reminder { padding: 16px; } }
.notif-verse-input { min-height: 44px; }

/* ===== Family tools, Talk About It, prayer journal (Chunk 7) ===== */
.kids-family { margin: 0 0 18px; }
.fam-title { margin: 0 0 4px; color: var(--ink); font: 600 1.15rem/1.3 var(--serif); }
.fam-lead, .fam-hint { margin: 0 0 10px; color: var(--ink-soft); font: 0.875rem/1.5 var(--sans); }
.fam-block { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--bg-card); min-width: 0; }
.fam-block > legend { padding: 0 4px; color: var(--ink); font: 600 0.95rem var(--sans); }
.fam-sub { margin: 0 0 4px; color: var(--ink); font: 600 0.95rem var(--sans); }
.fam-switch { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; color: var(--ink); font: 1rem var(--sans); }
.fam-switch input { width: 22px; height: 22px; accent-color: var(--crimson); flex: none; }
.fam-switch small { display: block; color: var(--ink-soft); font-size: 0.8rem; }
.fam-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fam-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-warm); color: var(--ink); font: 600 0.875rem var(--sans); cursor: pointer; }
.fam-chip input { width: 18px; height: 18px; margin: 0; accent-color: var(--crimson); }
.fam-chip:has(input:checked) { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.fam-chip:has(input:focus-visible), .fam-switch:has(input:focus-visible) { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.fam-listen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.fam-listen-btn { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.fam-listen-btn small { color: var(--ink-soft); font-weight: 400; font-size: 0.8rem; }
.fam-details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ink); font: 600 0.95rem var(--sans); }
.fam-details > summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.fam-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fam-plan { padding: 12px 14px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--bg-warm); }
.fam-plan.is-active { border-color: var(--gold); }
.fam-plan-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.fam-plan h4 { margin: 0; color: var(--ink); font: 600 1rem/1.35 var(--serif); }
.fam-plan-meta { color: var(--ink-soft); font: 0.8rem var(--sans); }
.fam-plan > p { margin: 4px 0 10px; color: var(--ink); font: 0.9rem/1.5 var(--sans); }
.fam-days { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.fam-day { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 4px 0; border-bottom: 1px solid var(--divider); }
.fam-check { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font: 0.95rem/1.35 var(--sans); cursor: pointer; flex: 1 1 200px; }
.fam-check input { width: 20px; height: 20px; accent-color: var(--crimson); flex: none; }
.fam-check input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.fam-day.is-done .fam-check span { color: var(--ink-soft); }
.fam-next { margin-left: 6px; color: var(--gold-light); font: italic 600 0.8rem var(--sans); }
.fam-day-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fam-finished { color: var(--ink); font: 0.9rem var(--sans); }
.fam-inline { border: 0; margin: 0; padding: 0; }
.fam-inline > legend { padding: 0; color: var(--ink); font: 600 0.875rem var(--sans); }
.fam-sample { margin: 8px 0 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius); }
#view-kids[data-kids-text="larger"] .kids-story-text { font-size: 1.35rem; }
#view-kids[data-kids-text="largest"] .kids-story-text { font-size: 1.6rem; }
#view-kids[data-kids-roomy] .kids-story-text { line-height: 2.25; }
#view-kids[data-kids-roomy] .kids-story-text p { margin-bottom: 22px; }
.kids-talk { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--bg-warm); text-align: left; }
.kids-talk h4 { margin: 0 0 2px; color: var(--ink); font: 600 1.15rem var(--serif); }
.kids-talk-label { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0 0 8px; color: var(--ink-soft); font: 600 0.78rem/1.4 var(--sans); letter-spacing: 0.04em; }
.kids-talk-list { margin: 0 0 10px; padding-left: 1.4em; color: var(--ink); font: 1.05rem/1.6 var(--serif); }
.kids-talk-list li { margin-bottom: 6px; }
.kids-talk-age { display: inline-block; margin-right: 4px; color: var(--ink-soft); font: 600 0.78rem var(--sans); }
.kids-talk-prayer { margin: 0 0 12px; color: var(--ink); font: 1rem/1.55 var(--serif); }
#view-home .today-family { margin-top: 18px; padding: 19px 26px; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--bg-card); }
#view-home .today-family[hidden] { display: none; }
#view-home .today-family h2 { margin: 4px 0 10px; color: var(--ink); }
.fam-today-grid { display: grid; gap: 8px; }
.fam-today-plan { width: 100%; text-align: left; }
.fam-today-sub { margin: 14px 0 6px; color: var(--ink-soft); font: 600 0.78rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.fam-today-foot { margin-top: 10px; gap: 4px 18px; }
@media (max-width: 600px) { #view-home .today-family { padding: 18px; } }
/* Prayer journal */
.pj-private { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-warm); color: var(--ink); font: 0.9rem/1.5 var(--sans); }
.pj-form { display: grid; gap: 6px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--bg-card); }
.pj-form-title, .pj-sub { margin: 0 0 4px; color: var(--ink); font: 600 1.05rem var(--serif); }
.pj-form label, .pj-search label, .pj-filter label { color: var(--ink); font: 600 0.875rem var(--sans); }
.pj-opt { color: var(--ink-soft); font-weight: 400; }
.pj-form input[type=text], .pj-form textarea, .pj-search input, .pj-filter select, #pj-confirm-typed { min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); color: var(--ink); font: 1rem/1.5 var(--sans); width: 100%; box-sizing: border-box; }
.pj-form textarea { resize: vertical; font-family: var(--serif); font-size: 1.05rem; }
.pj-form :is(input, textarea):focus-visible, .pj-tools :is(input, select):focus-visible, #pj-confirm-typed:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.pj-err { min-height: 0; margin: 0; color: var(--crimson); font: 600 0.85rem var(--sans); }
[data-theme="dark"] .pj-err { color: #f2a7a0; }
.pj-tags { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 4px 0; padding: 0; }
.pj-tags > legend { width: 100%; margin-bottom: 6px; padding: 0; color: var(--ink); font: 600 0.875rem var(--sans); }
.pj-answered-row[hidden] { display: none; }
.pj-tools { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-bottom: 6px; }
.pj-search, .pj-filter { display: flex; flex-direction: column; gap: 4px; }
.pj-count { margin: 4px 0 8px; color: var(--ink-soft); font: 0.85rem var(--sans); }
.pj-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.pj-entry article { padding: 12px 14px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--bg-card); }
.pj-entry.is-answered article { border-left: 4px solid var(--gold); }
.pj-entry h4 { margin: 0; color: var(--ink); font: 600 1rem var(--serif); }
.pj-meta { margin: 2px 0 6px; color: var(--ink-soft); font: 0.8rem var(--sans); }
.pj-text { margin: 0 0 10px; color: var(--ink); font: 1rem/1.6 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; }
.pj-empty { padding: 14px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--ink); font: 0.95rem var(--sans); }
.pj-foot { padding-top: 12px; border-top: 1px solid var(--divider); }
.tch-btn.pj-danger { color: var(--crimson); border-color: var(--crimson); }
[data-theme="dark"] .tch-btn.pj-danger { color: #f2a7a0; border-color: #b8584f; }
.pj-confirm-delete { background: #9e2b22 !important; color: #fff !important; }
.pj-confirm-delete:disabled { opacity: 0.5; cursor: not-allowed; }
.pj-typed-label { display: block; margin: 10px 0 4px; font: 600 0.875rem var(--sans); color: var(--ink); }
@media (max-width: 480px) { .pj-tools { grid-template-columns: 1fr; } }
/* Confirm dialogs (note delete, prayer journal delete) — previously unstyled */
.confirm-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 12, 8, 0.62); }
.confirm-box { width: min(440px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 22px 22px 18px; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--bg-card); color: var(--ink); box-shadow: 0 18px 50px rgba(0,0,0,0.35); box-sizing: border-box; }
.confirm-box h3 { margin: 0 0 10px; color: var(--ink); font: 600 1.2rem/1.3 var(--serif); }
.confirm-box p { margin: 0 0 10px; color: var(--ink); font: 0.95rem/1.55 var(--sans); }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.confirm-actions button { min-height: 44px; }
.confirm-actions button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
#family-panel[hidden] { display: none; }

/* ===== Study tools: focus reading, reading plans, book context, glossary (Chunk 8) ===== */
.bible-study-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.study-tool[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.focus-bar { position: sticky; top: 0; z-index: 120; display: flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: 0 6px 18px rgba(48, 29, 24, 0.12); }
.focus-bar[hidden] { display: none; }
.focus-btn { min-height: 44px; min-width: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-warm); color: var(--ink); font: 600 0.9rem var(--sans); cursor: pointer; }
.focus-btn:hover { border-color: var(--gold); }
.focus-btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.focus-title-btn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--serif); font-size: 1rem; }
.focus-exit { white-space: nowrap; }
html[data-reading-focus]:has(#view-bible.active) :is(.site-header, .mobile-nav, .site-footer, #dir-bible, #view-bible .mode-intro, #view-bible .bible-header, #bible-bookmark-bar, #bible-study-tools, #bible-context, #bible-insights, #reading-plans-section) { display: none !important; }
html[data-reading-focus]:has(#view-bible.active) #bible-listen-bar:not(:has(.audio-progress-container.active)) { display: none; }
html[data-reading-focus]:not([data-focus-nav]):has(#view-bible.active) #bible-nav-bar { display: none; }
html[data-reading-focus]:has(#view-bible.active) body { padding-bottom: 24px !important; }
html[data-reading-focus]:has(#view-bible.active) .bible-reader { border-top-width: 1px; box-shadow: none; }
@media (max-width: 600px) { html[data-reading-focus]:has(#view-bible.active) .bible-reader { padding: 22px 16px; } }
/* Plan bar under the chapter */
.plan-chapter-bar { margin: 14px 0 18px; padding: 12px 14px; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--bg-warm); }
.plan-chapter-bar[hidden] { display: none; }
.plan-bar-label { margin: 0 0 8px; color: var(--ink); font: 0.95rem/1.45 var(--sans); }
.plan-bar-actions, .plan-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.plan-mark.is-done { border-color: var(--gold); color: var(--ink); }
.study-label { display: inline-block; margin-right: 6px; color: var(--ink-soft); font: 600 0.72rem/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
/* Plans */
.plan-intro { margin: 0 0 14px; color: var(--ink); font: 0.95rem/1.55 var(--sans); }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plan-card { padding: 14px 16px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--bg-card); }
.plan-card.is-current { border-color: var(--gold); }
.plan-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.plan-title { margin: 0; color: var(--ink); font: 600 1.1rem/1.3 var(--serif); }
.plan-tag { color: var(--ink-soft); font: 600 0.78rem var(--sans); }
.plan-lead { margin: 6px 0 6px; color: var(--ink); font: 0.95rem/1.55 var(--sans); }
.plan-status { margin: 0 0 6px; color: var(--ink-soft); font: 0.85rem var(--sans); }
.plan-meter { height: 6px; margin: 0 0 10px; border-radius: 3px; background: var(--divider); overflow: hidden; }
.plan-meter span { display: block; height: 100%; background: var(--gold-dark); }
.plan-finished { color: var(--ink); font: 600 0.9rem var(--sans); }
.plan-days { margin-top: 10px; }
.plan-days > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ink); font: 600 0.9rem var(--sans); }
.plan-days > summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.plan-day-list { list-style: none; margin: 4px 0 0; padding: 0; }
.plan-day { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--divider); }
.plan-check { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-height: 44px; color: var(--ink); font: 0.95rem/1.35 var(--sans); cursor: pointer; }
.plan-check input { width: 20px; height: 20px; flex: none; accent-color: var(--crimson); }
.plan-check input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.plan-day.is-done .plan-check span { color: var(--ink-soft); }
.plan-next { color: var(--gold-light); font: italic 600 0.8rem var(--sans); }
.plan-read { flex: none; }
.plan-teach { margin: 10px 0 0; color: var(--ink-soft); font: 0.85rem/1.5 var(--sans); }
/* Context */
.ctx-where { margin: 0 0 10px; color: var(--ink); font: 0.95rem/1.5 var(--sans); }
.ctx-legend, .ctx-note, .ctx-empty { margin: 0 0 12px; color: var(--ink-soft); font: 0.85rem/1.55 var(--sans); }
.ctx-empty { color: var(--ink); font-size: 0.95rem; }
.ctx-pill { display: inline-block; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); font: 600 0.75rem/1.6 var(--sans); white-space: nowrap; }
.ctx-block { margin: 0 0 16px; padding-top: 12px; border-top: 1px solid var(--divider); }
.ctx-h { margin: 0 0 6px; color: var(--ink); font: 600 1.02rem/1.35 var(--serif); }
.ctx-kind { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--bg-warm); color: var(--ink-soft); font: 600 0.72rem/1.7 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }
.ctx-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ctx-items p { margin: 0 0 2px; color: var(--ink); font: 1rem/1.6 var(--serif); }
.ctx-src { color: var(--ink-soft); font: 0.8rem/1.5 var(--sans); }
.ctx-src a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.ctx-src a:hover { color: var(--ink); }
.ctx-src-bible { font-style: italic; }
.ctx-pp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.ctx-pp h4 { margin: 0 0 4px; color: var(--ink-soft); font: 600 0.78rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.ctx-pp ul { margin: 0; padding-left: 1.1em; color: var(--ink); font: 0.95rem/1.6 var(--sans); }
.ctx-xlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--ink); font: 0.92rem/1.6 var(--sans); }
.ctx-x-label { display: block; color: var(--ink-soft); font: 600 0.75rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 480px) { .ctx-pp { grid-template-columns: 1fr; } }
/* Tappable glossary words and link-style buttons inside study text */
.gloss-term { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline dotted var(--gold-dark); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.gloss-term:hover { color: var(--gold-light); }
.gloss-term:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; border-radius: 2px; }
.ctx-xlist .tch-link-btn, .ctx-pp .tch-link-btn, .plan-teach .tch-link-btn { display: inline; min-height: 0; padding: 0; text-align: left; }
@media (pointer: coarse) {
    .gloss-term, .ctx-xlist .tch-link-btn, .ctx-pp .tch-link-btn, .plan-teach .tch-link-btn { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 2px; }
    .ctx-items p .gloss-term, .plan-lead .gloss-term { min-height: 0; line-height: inherit; display: inline; padding: 6px 0; }
}
.gloss-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.gloss-item { width: 100%; min-height: 44px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--ink); text-align: left; cursor: pointer; }
.gloss-item strong { font: 600 1rem var(--serif); }
.gloss-item span { color: var(--ink-soft); font: 0.82rem/1.45 var(--sans); }
.gloss-item:hover { border-color: var(--gold); }
.gloss-item:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
/* Glossary / word help dialog */
.modal-study .study-eyebrow { margin: 0; color: var(--ink-soft); font: 600 0.75rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.modal-study h2 { margin: 2px 0 10px; }
.study-def { margin: 0 0 10px; color: var(--ink); font: 1.05rem/1.6 var(--serif); }
.study-src, .study-note { margin: 0 0 12px; color: var(--ink-soft); font: 0.85rem/1.55 var(--sans); }
.study-src a { color: var(--ink); text-decoration: underline; }
.study-sub { margin: 14px 0 6px; color: var(--ink); font: 600 0.95rem var(--sans); }
.study-word { display: grid; gap: 2px; margin: 0 0 8px; padding: 10px 12px; border-radius: var(--radius); background: var(--bg-warm); }
.study-word-orig { font-size: 1.6rem; line-height: 1.4; color: var(--ink); }
.study-word-say, .study-word-mean { color: var(--ink); font: 1rem/1.5 var(--sans); }
.study-word-lang { color: var(--ink-soft); font: 0.78rem var(--sans); }
.study-k { display: inline-block; min-width: 4.2em; color: var(--ink-soft); font: 600 0.75rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.study-lex { margin: 0 0 8px; }
.study-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Translate view words with word help */
.bible-translate-word[data-dict] { cursor: pointer; border-radius: 4px; }
.bible-translate-word[data-dict]:hover { background: var(--bg-warm); }
.bible-translate-word[data-dict]:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.pron-note { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--bg-card); }
.pron-note h4 { margin: 0 0 6px; color: var(--ink); font: 600 1rem var(--serif); }
.pron-note p { margin: 0 0 6px; color: var(--ink); font: 0.9rem/1.55 var(--sans); }
@media (max-width: 430px) { .focus-bar { gap: 4px; padding: 4px; } .focus-btn { padding: 8px 8px; font-size: 0.85rem; } }
.focus-bar { flex-wrap: wrap; }
.focus-title-btn { flex: 1 1 6.5em; white-space: normal; text-overflow: clip; }

/* ===== Chunk 9: Verse Memory ===== */
.bible-bookmark-bar .bm-memorize {
    flex: none; min-height: 44px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 7px;
    background: var(--bg-card); color: var(--ink); font-weight: 600; cursor: pointer;
}
.bible-bookmark-bar .bm-memorize:hover:not(:disabled) { border-color: var(--accent); }
.bible-bookmark-bar .bm-memorize:disabled { opacity: .55; cursor: not-allowed; }
.bible-bookmark-bar .bm-memorize:focus-visible, .bm-row .bm-mem:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bible-bookmark-bar .bm-mem {
    flex: none; min-height: 44px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent;
    color: var(--accent); font: 700 .75rem var(--sans); cursor: pointer;
}
.bible-bookmark-bar .bm-mem:hover { background: var(--bg-elevated); text-decoration: underline; }
@media (max-width: 560px) { .bible-bookmark-bar .bm-memorize { width: 100%; } }

.mem-counts { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.mem-counts li { padding: 10px 12px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--bg-card); color: var(--ink-soft); font: .85rem/1.4 var(--sans); }
.mem-counts strong { display: block; color: var(--ink); font: 600 1.15rem var(--serif); }
.mem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mem-card { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.mem-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.mem-card-ref { margin: 0; color: var(--ink); font: 600 1.05rem var(--serif); }
.mem-trans { color: var(--ink-soft); font: 600 .75rem var(--sans); letter-spacing: .05em; }
.mem-status { padding: 1px 9px; border-radius: 999px; background: var(--bg-warm); color: var(--ink); font: 600 .75rem/1.8 var(--sans); }
.mem-preview, .mem-note-line, .mem-hint, .mem-empty, .mem-step { margin: 6px 0; color: var(--ink-soft); font: .9rem/1.55 var(--sans); }
.mem-note-line .study-label { margin-right: 4px; }
.mem-more, .mem-settings { margin-top: 10px; }
.mem-more > summary, .mem-settings > summary, .pq-saved-box > summary {
    min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ink); font: 600 .88rem var(--sans);
}
.mem-more > summary:focus-visible, .mem-settings > summary:focus-visible, .pq-saved-box > summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; border-radius: 4px; }
.mem-sched { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.tch-btn.mem-danger { color: var(--crimson); border-color: var(--crimson); }
.mem-form label, .pq-form label, .pq-edit-form label { display: block; margin: 12px 0 4px; color: var(--ink); font: 600 .88rem var(--sans); }
.mem-optional { color: var(--ink-soft); font-weight: 400; }
.mem-select, .mem-num, .mem-form textarea, .mem-type, .pq-form textarea, .pq-edit-form input, .pq-edit-form textarea, #mem-type-input {
    width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-card); color: var(--ink); font: 1rem/1.5 var(--sans); box-sizing: border-box;
}
.mem-num { max-width: 7em; }
.mem-select:focus-visible, .mem-num:focus-visible, .mem-form textarea:focus-visible, #mem-type-input:focus-visible, .pq-form textarea:focus-visible, .pq-edit-form input:focus-visible, .pq-edit-form textarea:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 1px; }
.mem-modes, .mem-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.mem-mode[aria-pressed="true"] { background: var(--bg-elevated); border-color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.mem-practice { min-height: 6rem; }
.mem-verse-text { margin: 8px 0 12px; padding: 12px 14px; border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg-warm); color: var(--ink); font: 1.1rem/1.75 var(--serif); }
.mem-verse-text .study-label { display: block; margin-bottom: 4px; }
.mem-blank { color: var(--ink-faint); letter-spacing: .05em; }
.mem-hit { background: color-mix(in srgb, var(--gold) 22%, transparent); border-radius: 3px; }
.mem-feedback { margin: 10px 0 6px; color: var(--ink); font: .95rem/1.55 var(--sans); }
.mem-ref-inputs { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.mem-ref-inputs > div { min-width: 6em; }
.mem-ref-line { margin: 6px 0; }
.mem-unavail, .pq-unavail { margin: 10px 0; padding: 12px 14px; border: 1px dashed var(--border-strong, var(--border)); border-radius: var(--radius); background: var(--bg-card); color: var(--ink); font: .92rem/1.55 var(--sans); }
.mem-unavail p, .pq-unavail p { margin: 0 0 8px; }
.mem-next, .mem-after { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--divider); }
.mem-already { color: var(--ink-soft); font: .85rem var(--sans); }
html[data-mode="simple"] .mem-study-only { display: none; }
.modal-mem { max-width: 640px; }
@media (max-width: 430px) { .mem-verse-text { font-size: 1.02rem; } .mem-modes .tch-btn, .mem-sched .tch-btn { flex: 1 1 calc(50% - 6px); } }

/* ===== Chunk 9: Passage Questions ===== */
.pq-form { margin: 0; }
.pq-fieldset { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--divider); border-radius: var(--radius); }
.pq-fieldset legend { padding: 0 6px; color: var(--ink); font: 600 .95rem var(--sans); }
#pq-passage-label { font-family: var(--serif); }
.pq-ref-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: flex-end; margin-bottom: 6px; }
.pq-ref-row > div:first-child { flex: 1 1 12em; }
.pq-ref-row label { margin-top: 0; }
.pq-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.pq-cat { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 !important; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); cursor: pointer; font-weight: 500 !important; }
.pq-cat input { width: 20px; height: 20px; flex: none; accent-color: var(--gold); }
.pq-cat:has(input:checked) { border-color: var(--gold); background: var(--bg-elevated); }
.pq-cat:has(input:focus-visible) { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.pq-errors { margin: 8px 0 0; color: var(--crimson); font: 600 .9rem var(--sans); }
html[data-theme='dark'] .pq-errors { color: var(--crimson-light); }
[aria-invalid="true"] { border-color: var(--crimson) !important; }
.pq-answer:not(:empty) { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--divider); }
.pq-answer-title { margin: 0 0 8px; color: var(--ink); font: 600 1.2rem/1.35 var(--serif); }
.pq-answer-title:focus { outline: none; }
.pq-answer-title:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.pq-answer-ref { display: block; color: var(--ink-soft); font: 600 .85rem var(--sans); }
.pq-asked { margin: 0 0 4px; color: var(--ink); font: .95rem/1.5 var(--sans); }
.pq-block { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--divider); border-left-width: 3px; border-radius: var(--radius); background: var(--bg-card); }
.pq-bible { border-left-color: var(--gold); }
.pq-context, .pq-notes { border-left-color: var(--accent); }
.pq-interp, .pq-views { border-left-color: var(--crimson-light); }
.pq-apply { border-left-color: var(--ink-faint); }
.pq-h { margin: 0 0 8px; color: var(--ink); font: 600 1rem/1.4 var(--sans); }
.pq-bible-line { margin: 0 0 8px; }
.pq-facts, .pq-views, .pq-steps, .pq-reflect { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pq-reflect li, .pq-steps li { color: var(--ink); font: 1rem/1.6 var(--serif); }
.pq-reflect li::before { content: '?'; display: inline-block; width: 1.4em; color: var(--gold); font-weight: 700; }
.pq-fact { font-weight: 600; text-align: left; }
.pq-fact-kind { display: block; color: var(--ink-soft); font: .78rem/1.5 var(--sans); }
.pq-facts p, .pq-views p { margin: 4px 0; color: var(--ink); font: .95rem/1.55 var(--serif); }
.pq-views h5 { margin: 0; color: var(--ink); font: 600 .95rem var(--sans); }
.pq-views li { padding: 8px 0; border-bottom: 1px solid var(--divider); }
.pq-views li:last-child { border-bottom: 0; }
.pq-common { margin: 8px 0 2px; color: var(--ink); font: .95rem/1.55 var(--serif); }
.pq-limit { margin: 10px 0; padding: 10px 12px; border-radius: var(--radius); background: var(--bg-warm); color: var(--ink); font: .9rem/1.55 var(--sans); }
.pq-crisis { margin-top: 18px; padding: 16px; border: 2px solid var(--gold); border-radius: var(--radius); background: var(--bg-card); color: var(--ink); }
.pq-crisis h4 { margin: 0 0 8px; font: 600 1.1rem var(--serif); }
.pq-crisis p { margin: 0 0 8px; font: 1rem/1.6 var(--sans); }
.pq-crisis:focus { outline: none; }
.pq-crisis:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.pq-saved-box { margin-top: 18px; padding: 4px 14px 12px; border: 1px solid var(--divider); border-radius: var(--radius); }
.pq-saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pq-saved-item { padding: 10px 0; border-bottom: 1px solid var(--divider); }
.pq-saved-item:last-child { border-bottom: 0; }
.pq-saved-ref, .pq-saved-q { margin: 0 0 4px; color: var(--ink); font: .92rem/1.5 var(--sans); }
.pq-saved-q { font-family: var(--serif); }
.pq-edit-form { margin-top: 8px; }
.pq-edit-form[hidden] { display: none; }
html[data-mode="simple"] .pq-study-only { display: none; }
html[data-contrast="high"] :is(.mem-card, .pq-block, .pq-cat, .pq-fieldset, .pq-saved-box, .mem-counts li) { border-width: 2px; border-color: var(--border-strong); }
@media (max-width: 430px) { .pq-cats { grid-template-columns: 1fr; } .pq-block { padding: 10px 12px; } .pq-save-row .tch-btn, .pq-save-row .tch-open { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .mem-card, .pq-block, .pq-cat { transition: none !important; } }
.pq-demo { margin: 4px 0 10px; color: var(--ink); font: .88rem/1.5 var(--sans); }
.pq-demo .study-label { margin-right: 4px; }
[data-theme="dark"] .tch-btn.mem-danger { color: #f2a7a0; border-color: #b8584f; }
.mem-intro { margin: 0 0 12px; color: var(--ink-soft); font: .95rem/1.6 var(--sans); }
.pq-form label.pq-cat { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 500; }
.pq-form label.pq-cat span { flex: 1; }

/* =====================================================
   Backup and restore (backup.js) — Chunk 10
   ===================================================== */
.backup-section .section-collapse-content { padding-top: 4px; }
.bk-intro { margin: 0 0 12px; color: var(--ink); font: 1rem/1.6 var(--sans); }
.bk-private { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: var(--radius); background: var(--bg-warm); color: var(--ink); font: 0.9rem/1.5 var(--sans); }
.bk-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.bk-actions .tch-btn, .bk-actions .tch-link-btn { min-height: 44px; }
.bk-status { min-height: 1.2em; margin: 6px 0 12px; color: var(--ink); font: 600 0.92rem/1.5 var(--sans); }
.bk-status:empty { margin: 0; min-height: 0; }
.bk-sub { display: block; margin: 18px 0 6px; color: var(--ink); font: 600 1.05rem var(--serif); }
.bk-what { display: block; margin: 2px 0 6px; color: var(--ink-soft); font: 0.9rem/1.5 var(--sans); }
.bk-list { margin: 4px 0 10px; padding-left: 1.2em; color: var(--ink); font: 0.92rem/1.55 var(--sans); }
.bk-list li { margin: 3px 0; }
.bk-more { margin: 14px 0; padding: 10px 14px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--bg-card); }
.bk-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ink); font: 600 0.95rem var(--sans); }
.bk-fieldset { margin: 14px 0; padding: 4px 14px 10px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--bg-card); }
.bk-fieldset legend { padding: 0 6px; margin: 0; }
.bk-checks { display: grid; gap: 4px; }
.bk-check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 6px 0; color: var(--ink); font: 0.92rem/1.45 var(--sans); cursor: pointer; }
.bk-check input, .bk-radio input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--crimson); }
.bk-check .bk-what { margin: 0; font-size: 0.85rem; }
.bk-text { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); color: var(--ink); font: 0.8rem/1.4 var(--mono); }
.bk-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bk-file-label { display: inline-flex; align-items: center; cursor: pointer; }
.bk-file:focus-visible + .bk-file-label, .bk-file-label:has(+ .bk-file:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.bk-actions:has(.bk-file:focus-visible) .bk-file-label { outline: 3px solid var(--gold); outline-offset: 2px; }
.bk-last { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-warm); }
.bk-last .bk-sub { margin-top: 0; }
.bk-links { margin: 16px 0 4px; font: 0.9rem/1.6 var(--sans); }
.bk-links a { color: var(--crimson); text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; min-height: 44px; }
.bk-mode-hint { display: none; margin: 8px 0; color: var(--ink-soft); font: 0.9rem/1.5 var(--sans); }
html[data-mode="simple"] #view-write:not(.deeper-open) .bk-detail { display: none; }
html[data-mode="simple"] #view-write:not(.deeper-open) .bk-mode-hint { display: block; }
.bk-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 6px 0 10px; color: var(--ink); font: 0.92rem/1.5 var(--sans); }
.bk-meta dt { font-weight: 600; }
.bk-meta dd { margin: 0; }
.bk-choice { margin: 8px 0; padding: 6px 12px 8px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--bg-card); color: var(--ink); font: 0.92rem var(--sans); }
.bk-choice legend { padding: 0 4px; }
.bk-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
#bk-modal-title:focus { outline: none; }
#bk-modal-title:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.site-footer a { display: inline-block; padding: 6px 2px; }

/* Scripturewell motto (About) and wide-screen logo sizing so the longer name keeps the header on one row */
.brand-motto { font-family: var(--display); font-size: .95rem; letter-spacing: .04em; color: var(--crimson); text-align: center; margin: -6px 0 18px; }
[data-theme='dark'] .brand-motto { color: var(--gold); }
@media (min-width: 961px) { .site-header .logo > span:not(.logo-icon) { font-size: .89em; } }