/* ================================================================
   Study Reformed - Classic & Scholarly Theme
   ================================================================ */

/* -- Light Mode Palette (Classic - default) -- */
:root {
    --wm-primary: #6B2737;
    --wm-primary-hover: #522030;
    --wm-primary-rgb: 107, 39, 55;
    --wm-secondary: #4A5568;
    --wm-secondary-hover: #3D4654;
    --wm-accent: #B8860B;
    --wm-accent-hover: #9A7209;
    --wm-accent-light: #D4A843;
    --wm-accent-rgb: 184, 134, 11;

    --wm-body-bg: #FAF6F1;
    --wm-card-bg: #FFFFFF;
    --wm-card-border: #E8E0D8;
    --wm-border: #DDD5CC;
    --wm-code-bg: #F0EBE4;

    --wm-text: #2D2A26;
    --wm-text-muted: #6B6560;

    --wm-success: #2D6A4F;
    --wm-danger: #A4243B;

    --wm-navbar-bg: #2D2A26;

    /* Override Bootstrap variables */
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 107, 39, 55;
    --bs-secondary: var(--wm-secondary);
    --bs-secondary-rgb: 74, 85, 104;
    --bs-success: var(--wm-success);
    --bs-danger: var(--wm-danger);

    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 250, 246, 241;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 45, 42, 38;
    --bs-border-color: var(--wm-border);

    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 107, 39, 55;
    --bs-link-hover-color: var(--wm-primary-hover);

    --bs-body-font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;

    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236B6560'/%3E%3C/svg%3E");
}

/* -- Dark Mode Palette -- */
[data-bs-theme="dark"] {
    --wm-primary: #D4899A;
    --wm-primary-hover: #E0A0B0;
    --wm-primary-rgb: 212, 137, 154;
    --wm-secondary: #A0AEC0;
    --wm-accent: #D4A843;
    --wm-accent-hover: #E0BC5C;
    --wm-accent-light: #D4A843;

    --wm-body-bg: #1A1816;
    --wm-card-bg: #242220;
    --wm-card-border: #3D3835;
    --wm-border: #3D3835;
    --wm-code-bg: #2A2725;

    --wm-text: #E8E0D8;
    --wm-text-muted: #9B9590;

    --wm-success: #52B788;
    --wm-danger: #E07A8A;

    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 212, 137, 154;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 26, 24, 22;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 232, 224, 216;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 212, 137, 154;
    --bs-link-hover-color: var(--wm-primary-hover);

    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%239B9590'/%3E%3C/svg%3E");
}

/* ================================================================
   Color Schemes
   ================================================================ */

/* -- Ocean -- */
[data-color-scheme="ocean"] {
    --wm-primary: #1B4965;
    --wm-primary-hover: #143B52;
    --wm-primary-rgb: 27, 73, 101;
    --wm-secondary: #5A7D8F;
    --wm-secondary-hover: #4A6A7A;
    --wm-accent: #2A9D8F;
    --wm-accent-hover: #228176;
    --wm-accent-light: #52B5A5;
    --wm-accent-rgb: 42, 157, 143;
    --wm-body-bg: #F5F9FA;
    --wm-card-bg: #FFFFFF;
    --wm-card-border: #D6E3E8;
    --wm-border: #C8D8DE;
    --wm-code-bg: #E8F0F2;
    --wm-text: #1A2A32;
    --wm-text-muted: #5A6F78;
    --wm-navbar-bg: #1A2A32;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 27, 73, 101;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 245, 249, 250;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 26, 42, 50;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 27, 73, 101;
    --bs-link-hover-color: var(--wm-primary-hover);
}

[data-color-scheme="ocean"][data-bs-theme="dark"] {
    --wm-primary: #7EB8D0;
    --wm-primary-hover: #96CAE0;
    --wm-primary-rgb: 126, 184, 208;
    --wm-secondary: #90AFC0;
    --wm-accent: #52B5A5;
    --wm-accent-hover: #6FC8BA;
    --wm-accent-light: #52B5A5;
    --wm-accent-rgb: 82, 181, 165;
    --wm-body-bg: #141D22;
    --wm-card-bg: #1C2830;
    --wm-card-border: #2E4050;
    --wm-border: #2E4050;
    --wm-code-bg: #1E2C35;
    --wm-text: #DEE8ED;
    --wm-text-muted: #8A9DA8;
    --wm-navbar-bg: #1A2A32;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 126, 184, 208;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 20, 29, 34;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 222, 232, 237;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 126, 184, 208;
    --bs-link-hover-color: var(--wm-primary-hover);
}

/* -- Forest -- */
[data-color-scheme="forest"] {
    --wm-primary: #2D5016;
    --wm-primary-hover: #234010;
    --wm-primary-rgb: 45, 80, 22;
    --wm-secondary: #5C6B4F;
    --wm-secondary-hover: #4D5A42;
    --wm-accent: #C07D1A;
    --wm-accent-hover: #A06A14;
    --wm-accent-light: #D4993D;
    --wm-accent-rgb: 192, 125, 26;
    --wm-body-bg: #F7F5F0;
    --wm-card-bg: #FFFFFF;
    --wm-card-border: #DDD8CE;
    --wm-border: #D0CBBC;
    --wm-code-bg: #ECE8DF;
    --wm-text: #2A2820;
    --wm-text-muted: #68645A;
    --wm-navbar-bg: #1E2218;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 45, 80, 22;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 247, 245, 240;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 42, 40, 32;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 45, 80, 22;
    --bs-link-hover-color: var(--wm-primary-hover);
}

[data-color-scheme="forest"][data-bs-theme="dark"] {
    --wm-primary: #8FBF75;
    --wm-primary-hover: #A5D08E;
    --wm-primary-rgb: 143, 191, 117;
    --wm-secondary: #A0AE90;
    --wm-accent: #D4993D;
    --wm-accent-hover: #E0AD55;
    --wm-accent-light: #D4993D;
    --wm-accent-rgb: 212, 153, 61;
    --wm-body-bg: #181A14;
    --wm-card-bg: #222418;
    --wm-card-border: #3A3D30;
    --wm-border: #3A3D30;
    --wm-code-bg: #262820;
    --wm-text: #E0DED6;
    --wm-text-muted: #969488;
    --wm-navbar-bg: #1E2218;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 143, 191, 117;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 24, 26, 20;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 224, 222, 214;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 143, 191, 117;
    --bs-link-hover-color: var(--wm-primary-hover);
}

/* -- Stone -- */
[data-color-scheme="stone"] {
    --wm-primary: #4A4440;
    --wm-primary-hover: #3A3430;
    --wm-primary-rgb: 74, 68, 64;
    --wm-secondary: #6B6560;
    --wm-secondary-hover: #5A5450;
    --wm-accent: #B5703C;
    --wm-accent-hover: #9A5F30;
    --wm-accent-light: #CB8C5A;
    --wm-accent-rgb: 181, 112, 60;
    --wm-body-bg: #F5F3F0;
    --wm-card-bg: #FFFFFF;
    --wm-card-border: #E0DCD6;
    --wm-border: #D4CFC8;
    --wm-code-bg: #EEEBE6;
    --wm-text: #2E2C28;
    --wm-text-muted: #787068;
    --wm-navbar-bg: #2A2826;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 74, 68, 64;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 245, 243, 240;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 46, 44, 40;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 74, 68, 64;
    --bs-link-hover-color: var(--wm-primary-hover);
}

[data-color-scheme="stone"][data-bs-theme="dark"] {
    --wm-primary: #B0A8A0;
    --wm-primary-hover: #C0B8B0;
    --wm-primary-rgb: 176, 168, 160;
    --wm-secondary: #908880;
    --wm-accent: #CB8C5A;
    --wm-accent-hover: #D8A06E;
    --wm-accent-light: #CB8C5A;
    --wm-accent-rgb: 203, 140, 90;
    --wm-body-bg: #1A1918;
    --wm-card-bg: #242220;
    --wm-card-border: #3D3835;
    --wm-border: #3D3835;
    --wm-code-bg: #2A2725;
    --wm-text: #E0DCD6;
    --wm-text-muted: #989088;
    --wm-navbar-bg: #2A2826;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 176, 168, 160;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 26, 25, 24;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 224, 220, 214;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 176, 168, 160;
    --bs-link-hover-color: var(--wm-primary-hover);
}

/* -- Royal -- */
[data-color-scheme="royal"] {
    --wm-primary: #4A2060;
    --wm-primary-hover: #3A1850;
    --wm-primary-rgb: 74, 32, 96;
    --wm-secondary: #5C5070;
    --wm-secondary-hover: #4C4260;
    --wm-accent: #C8963C;
    --wm-accent-hover: #B08030;
    --wm-accent-light: #D8AE5C;
    --wm-accent-rgb: 200, 150, 60;
    --wm-body-bg: #F8F5FA;
    --wm-card-bg: #FFFFFF;
    --wm-card-border: #E2D8E8;
    --wm-border: #D6CCE0;
    --wm-code-bg: #F0EAF4;
    --wm-text: #2A2430;
    --wm-text-muted: #6A6075;
    --wm-navbar-bg: #221E28;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 74, 32, 96;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 248, 245, 250;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 42, 36, 48;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 74, 32, 96;
    --bs-link-hover-color: var(--wm-primary-hover);
}

[data-color-scheme="royal"][data-bs-theme="dark"] {
    --wm-primary: #C098D8;
    --wm-primary-hover: #D0AEE4;
    --wm-primary-rgb: 192, 152, 216;
    --wm-secondary: #A090B8;
    --wm-accent: #D8AE5C;
    --wm-accent-hover: #E4C070;
    --wm-accent-light: #D8AE5C;
    --wm-accent-rgb: 216, 174, 92;
    --wm-body-bg: #1A161E;
    --wm-card-bg: #24202A;
    --wm-card-border: #3D3548;
    --wm-border: #3D3548;
    --wm-code-bg: #2A2530;
    --wm-text: #E4DCE8;
    --wm-text-muted: #9890A0;
    --wm-navbar-bg: #221E28;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 192, 152, 216;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 26, 22, 30;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 228, 220, 232;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 192, 152, 216;
    --bs-link-hover-color: var(--wm-primary-hover);
}

/* ================================================================
   Typography
   ================================================================ */

body {
    font-family: var(--bs-body-font-family);
    transition: background-color 0.3s ease, color 0.3s ease;
}


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ================================================================
   Bootstrap Component Overrides (Sass-compiled values)
   ================================================================ */

/* Buttons */
.btn-primary {
    --bs-btn-bg: var(--wm-primary);
    --bs-btn-border-color: var(--wm-primary);
    --bs-btn-hover-bg: var(--wm-primary-hover);
    --bs-btn-hover-border-color: var(--wm-primary-hover);
    --bs-btn-active-bg: var(--wm-primary-hover);
    --bs-btn-active-border-color: var(--wm-primary-hover);
    --bs-btn-disabled-bg: var(--wm-primary);
    --bs-btn-disabled-border-color: var(--wm-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--wm-primary);
    --bs-btn-border-color: var(--wm-primary);
    --bs-btn-hover-bg: var(--wm-primary);
    --bs-btn-hover-border-color: var(--wm-primary);
    --bs-btn-active-bg: var(--wm-primary);
    --bs-btn-active-border-color: var(--wm-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--wm-secondary);
    --bs-btn-border-color: var(--wm-secondary);
    --bs-btn-hover-bg: var(--wm-secondary);
    --bs-btn-hover-border-color: var(--wm-secondary);
}

/* Text utilities */
.text-primary { color: var(--wm-primary) !important; }
.text-secondary { color: var(--wm-secondary) !important; }

/* Background utilities */
.bg-primary { background-color: var(--wm-primary) !important; }

/* Badges */
.text-bg-primary {
    background-color: var(--wm-primary) !important;
    color: #fff !important;
}

.text-bg-secondary {
    background-color: var(--wm-secondary) !important;
    color: #fff !important;
}

/* Border */
.border-primary { border-color: var(--wm-primary) !important; }
.border-primary-subtle { border-color: color-mix(in srgb, var(--wm-primary) 25%, var(--bs-body-bg)) !important; }

/* ================================================================
   Links & Transitions
   ================================================================ */

a {
    transition: color 0.15s ease;
}

.btn {
    transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-outline-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--wm-primary-rgb), 0.25);
}

.btn-primary:active,
.btn-outline-primary:active {
    transform: translateY(0);
}

/* Breadcrumb links */
.breadcrumb-item a {
    color: var(--wm-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb-item a:hover {
    color: var(--wm-primary);
}

/* ================================================================
   Navbar
   ================================================================ */

.navbar {
    background-color: var(--wm-navbar-bg) !important;
    border-bottom: 2px solid var(--wm-accent);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.navbar-brand {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: 0.03em;
    color: #FAF6F1 !important;
}

.navbar-brand:hover {
    color: var(--wm-accent-light) !important;
}

.navbar .nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    transition: color 0.15s ease;
}

.navbar .nav-link:hover {
    color: var(--wm-accent-light) !important;
}

/* Search form in navbar */
.navbar .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #FAF6F1;
    font-size: 0.875rem;
}

.navbar .form-control:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--wm-accent-light);
    box-shadow: 0 0 0 0.2rem rgba(var(--wm-accent-rgb), 0.25);
}

.navbar .form-control::placeholder {
    color: rgba(250, 246, 241, 0.5);
}

.navbar .form-select {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #FAF6F1;
    font-size: 0.875rem;
}

/* Appearance dropdown */
#appearance-dropdown {
    border-color: rgba(255, 255, 255, 0.2);
    color: #FAF6F1;
    font-size: 1rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#appearance-dropdown:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--wm-accent-light);
}

#appearance-dropdown::after {
    display: none;
}

.appearance-menu {
    min-width: 200px;
    padding: 0.5rem 0;
}

.scheme-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
}

.scheme-check {
    display: none;
}

.scheme-option.active .scheme-check {
    display: inline;
}

.scheme-option.active {
    font-weight: 500;
}

/* Collapsed navbar: right-justify all items */
@media (max-width: 991.98px) {
    .navbar-collapse .navbar-nav {
        align-items: flex-end;
    }

    .navbar-collapse .navbar-nav .nav-link,
    .navbar-collapse .navbar-nav .nav-item {
        text-align: right;
    }

    .navbar-collapse form.d-flex {
        justify-content: flex-end;
    }

    .navbar-collapse .dropdown {
        align-self: flex-end;
    }
}

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

.card {
    border: 1px solid var(--wm-card-border);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
}

.card-header {
    background-color: color-mix(in srgb, var(--wm-primary) 4%, var(--bs-body-bg));
    border-bottom: 1px solid var(--wm-card-border);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
}

.card-body {
    padding: 1.25rem 1.5rem;
}

/* Featured card */
.card-featured {
    border-left: 4px solid var(--wm-accent) !important;
}

[data-bs-theme="dark"] .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* List group items */
.list-group-item {
    border-color: var(--wm-card-border);
    transition: background-color 0.15s ease, padding-left 0.15s ease;
}

.list-group-item-action:hover {
    background-color: color-mix(in srgb, var(--wm-primary) 4%, var(--bs-body-bg));
    padding-left: calc(var(--bs-list-group-item-padding-x) + 4px);
}

/* ================================================================
   Hero Section
   ================================================================ */

.hero-section {
    background: linear-gradient(
        180deg,
        var(--bs-body-bg) 0%,
        color-mix(in srgb, var(--wm-primary) 6%, var(--bs-body-bg)) 100%
    );
    border-bottom: 1px solid var(--wm-border);
}

.hero-bg-pattern {
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' width='40' height='40'%3E%3Cpath d='M20,0 L40,20 L20,40 L0,20 Z' fill='none' stroke='%236B2737' stroke-width='0.5'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%236B2737'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}

[data-bs-theme="dark"] .hero-bg-pattern {
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' width='40' height='40'%3E%3Cpath d='M20,0 L40,20 L20,40 L0,20 Z' fill='none' stroke='%23D4899A' stroke-width='0.5'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23D4899A'/%3E%3C/svg%3E");
}

.hero-section h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--wm-primary);
}

/* Ornamental divider */
.ornamental-divider {
    display: block;
    margin: 0 auto;
}

/* Heading flourish */
.heading-flourish {
    display: block;
    margin: 0 auto;
}

/* Section headings */
.section-heading {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--wm-border);
}

/* ================================================================
   Feature card icons
   ================================================================ */

.feature-icon {
    display: block;
    margin: 0 auto 1rem;
}

/* ================================================================
   Footer
   ================================================================ */

.site-footer {
    background-color: color-mix(in srgb, var(--wm-primary) 3%, var(--bs-body-bg));
    border-top: 1px solid var(--wm-border);
}

.footer-link {
    color: var(--wm-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-link:hover {
    color: var(--wm-primary);
    text-decoration: underline;
}

[data-bs-theme="dark"] .site-footer {
    background-color: color-mix(in srgb, var(--wm-primary) 5%, var(--bs-body-bg));
}

/* ================================================================
   Catechism Text Styling
   ================================================================ */

.question-text {
    font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    line-height: 1.7;
}

.answer-text {
    font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    line-height: 1.8;
}

/* Confession section headers (e.g., Second Helvetic all-caps headers) */
.confession-section-header {
    color: var(--wm-primary);
    letter-spacing: 0.02em;
}

/* Commentary */
.commentary-text {
    font-size: 0.95rem;
    line-height: 1.8;
}

.commentary-text p {
    margin-bottom: 1.25rem;
}

.fisher-subquestions .border-start {
    border-color: var(--wm-secondary) !important;
}

.fisher-subquestions p {
    font-size: 0.93rem;
    line-height: 1.6;
}

/* Scripture text */
.esv-text {
    font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    font-size: 0.93rem;
    line-height: 1.8;
    color: var(--bs-body-color);
}

/* A proof reference is a link when we can resolve it to a book of the
   Scripture index, and plain text when we cannot. The two must not look
   alike: only the link carries the primary colour and underline. */
.scripture-ref {
    font-size: 0.95rem;
    transition: color 0.15s ease;
}

a.scripture-ref {
    color: var(--wm-primary);
    text-decoration: none;
}

a.scripture-ref:hover,
a.scripture-ref:focus-visible {
    color: var(--wm-primary-hover);
    text-decoration: underline;
}

span.scripture-ref {
    color: var(--bs-body-color);
}

.scripture-passage .border-start {
    border-color: var(--wm-primary) !important;
}

/* ── Presenter mode ──
   A group is reading this from across a room: type scales with the viewport,
   the page chrome gets out of the way, and nothing scrolls. */
.presenter {
    max-width: none;
    padding: 0;
}

.presenter-stage {
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3vh 5vw;
    outline: none;
}

.presenter-slide { max-width: 60rem; text-align: center; }

.presenter-number {
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 1.2rem;
}

.presenter-question {
    font-size: clamp(1.9rem, 4.6vw, 3.4rem);
    line-height: 1.22;
    margin-bottom: 1.6rem;
}

.presenter-answer {
    font-size: clamp(1.3rem, 2.9vw, 2.2rem);
    line-height: 1.45;
}

.presenter-proofs {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    color: var(--bs-secondary-color, #6c757d);
    margin-top: 1.2rem;
}

.presenter-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.6rem;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--wm-border);
}

.presenter-btn {
    border: 1px solid var(--wm-border);
    background: transparent;
    color: var(--bs-body-color);
    border-radius: 0.35rem;
    padding: 0.35rem 0.9rem;
    text-decoration: none;
    font-size: 0.9rem;
}

.presenter-btn:hover { border-color: var(--wm-accent, #8a6d3b); }

.presenter-progress {
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.85rem;
    min-width: 4rem;
    text-align: center;
}

/* The presenter view hides the site chrome entirely. */
body:has(.presenter) .navbar,
body:has(.presenter) footer {
    display: none;
}

/* ── Practice heatmap ── */
.practice-heatmap {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.practice-week {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    gap: 3px;
}

.practice-day {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--wm-border) 55%, transparent);
}

.practice-day.is-future { visibility: hidden; }

.practice-level-1 { background: color-mix(in srgb, var(--wm-accent, #8a6d3b) 35%, transparent); }
.practice-level-2 { background: color-mix(in srgb, var(--wm-accent, #8a6d3b) 55%, transparent); }
.practice-level-3 { background: color-mix(in srgb, var(--wm-accent, #8a6d3b) 78%, transparent); }
.practice-level-4 { background: var(--wm-accent, #8a6d3b); }

/* ── Pick up where you left off ── */
.continue-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.6rem;
}

.continue-item {
    display: block;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--wm-border);
    border-radius: 0.45rem;
    background: var(--wm-card-bg, transparent);
    text-decoration: none;
    color: var(--bs-body-color);
}

.continue-item:hover {
    border-color: var(--wm-accent, #8a6d3b);
}

.continue-kind {
    display: block;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--bs-secondary-color, #6c757d);
}

.continue-title { display: block; font-weight: 600; }

.continue-detail {
    display: block;
    font-size: 0.82rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* ── Search suggestions ── */
.navbar form { position: relative; }

.suggest-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    min-width: 20rem;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1060;
    background: var(--bs-body-bg);
    border: 1px solid var(--wm-border);
    border-radius: 0.4rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: 0.3rem 0;
}

.suggest-group {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-secondary-color, #6c757d);
    padding: 0.5rem 0.8rem 0.2rem;
}

.suggest-item,
.suggest-all {
    display: block;
    padding: 0.35rem 0.8rem;
    text-decoration: none;
    color: var(--bs-body-color);
}

.suggest-item.is-active,
.suggest-item:hover,
.suggest-item:focus,
.suggest-all.is-active,
.suggest-all:hover {
    background: color-mix(in srgb, var(--wm-accent, #8a6d3b) 14%, transparent);
}

.suggest-name { display: block; font-weight: 600; font-size: 0.9rem; }

.suggest-detail {
    display: block;
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggest-all {
    border-top: 1px solid var(--wm-border);
    margin-top: 0.3rem;
    font-size: 0.85rem;
}

/* ── Keyboard shortcuts help ── */
.shortcuts-help {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 1080;
    background: var(--bs-body-bg);
    border: 1px solid var(--wm-border);
    border-radius: 0.5rem;
    padding: 0.9rem 1.1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    font-size: 0.86rem;
}

.shortcuts-help dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.8rem;
    margin: 0.5rem 0 0;
}

.shortcuts-help dt { font-family: var(--bs-font-monospace, monospace); }
.shortcuts-help dd { margin: 0; color: var(--bs-secondary-color, #6c757d); }

/* ── Memorisation drills ── */
.drill-modes {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.drill-mode {
    border: 1px solid var(--wm-border);
    border-radius: 999px;
    padding: 0.25rem 0.8rem;
    font-size: 0.82rem;
    text-decoration: none;
    color: var(--bs-body-color);
}

.drill-mode.is-active {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

.drill-mode:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

/* First letters: monospaced so the underscores line up as a rhythm. */
.drill-initials {
    font-family: var(--bs-font-monospace, ui-monospace, monospace);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    line-height: 2;
    word-spacing: 0.3em;
}

.drill-cloze {
    font-size: 1.05rem;
    line-height: 2.1;
}

.drill-gap {
    display: inline-block;
    min-width: 4.5rem;
    border-bottom: 2px solid var(--wm-accent, #8a6d3b);
    margin-bottom: -2px;
}

.drill-marked {
    line-height: 2;
}

.drill-w {
    border-radius: 2px;
    padding: 0 2px;
}

.drill-correct { color: inherit; }

.drill-missing,
.drill-wrong {
    background-color: #f7dcdc;
    text-decoration: underline;
    text-decoration-style: wavy;
}

[data-bs-theme="dark"] .drill-missing,
[data-bs-theme="dark"] .drill-wrong {
    background-color: #43201f;
    color: #f5d9d8;
}

/* Practice streak */
.practice-streak {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}

/* ── Cross-edition diff ── */
.diff-text {
    line-height: 1.7;
}

ins.diff-ins {
    background-color: #d8f0dc;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

del.diff-del {
    background-color: #f7dcdc;
    text-decoration: line-through;
}

[data-bs-theme="dark"] ins.diff-ins {
    background-color: #1e3a24;
    color: #d9f2df;
}

[data-bs-theme="dark"] del.diff-del {
    background-color: #43201f;
    color: #f5d9d8;
}

.diff-row.diff-unchanged .diff-text {
    color: var(--bs-secondary-color, #6c757d);
}

/* ── Session handout ──
   Screen-readable, but laid out for paper: a group leader prints it or saves
   it as a PDF from the browser. */
.handout {
    max-width: 46rem;
}

.handout-header {
    border-bottom: 2px solid var(--wm-border);
    padding-bottom: 0.75rem;
}

.handout-answer {
    font-size: 1.02rem;
    line-height: 1.6;
}

.handout-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    margin-top: 1.1rem;
    margin-bottom: 0.4rem;
}

.handout-proofs,
.handout-prompts {
    padding-left: 1.2rem;
}

.handout-leader {
    border-left: 3px solid var(--wm-border);
    padding-left: 0.9rem;
}

.handout-footer {
    border-top: 1px solid var(--wm-border);
    padding-top: 0.75rem;
}

@media print {
    .handout {
        max-width: none;
    }
    .handout-item {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .handout-item h2 {
        break-after: avoid;
    }
    .handout a {
        text-decoration: none;
        color: inherit;
    }
    .handout-leader {
        border-left-color: #999;
    }
}

/* ── Comparison: narrow-screen document switcher ──
   Below lg the comparison columns stack, so a side-by-side reading becomes
   three documents in sequence. The tabs show one at a time instead. */
.comparison-doc-tabs {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 0.5rem 0;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--wm-border);
    -webkit-overflow-scrolling: touch;
}

.comparison-doc-tabs .doc-tab {
    flex: 0 0 auto;
    border: 1px solid var(--wm-border);
    background: transparent;
    color: var(--bs-body-color);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.comparison-doc-tabs .doc-tab.is-active {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

.comparison-doc-tabs .doc-tab:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    #comparison-columns.has-doc-tabs .comparison-col {
        display: none !important;
    }
    #comparison-columns.has-doc-tabs .comparison-col.is-active {
        display: block !important;
    }
}

/* Belt and braces with Bootstrap's display utilities: the switcher and the
   desktop column checkboxes are mutually exclusive, and must stay that way
   even if the Bootstrap stylesheet fails to load. */
@media (min-width: 992px) {
    .comparison-doc-tabs {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .comparison-col-toggles {
        display: none !important;
    }
}

/* Search hits — distinct from a reader's saved highlights below. */
mark.search-hit {
    background-color: #d1e7ff;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

[data-bs-theme="dark"] mark.search-hit {
    background-color: #1c3d5a;
    color: #e9f2ff;
}

/* User highlights */
mark.user-highlight {
    background-color: #fff3cd;
    border-radius: 2px;
    padding: 0 1px;
    cursor: pointer;
}

mark.user-highlight:hover {
    background-color: #ffe69c;
}

[data-bs-theme="dark"] mark.user-highlight {
    background-color: #664d03;
    color: #fff;
}

[data-bs-theme="dark"] mark.user-highlight:hover {
    background-color: #997404;
}

/* User annotations (inline comments) */

/* Wrapper that holds annotatable content + right-side margin notes */
.annotation-wrapper {
    position: relative;
}

.annotation-margin {
    position: absolute;
    top: 0;
    right: -220px;
    width: 200px;
}

.annotation-note {
    position: absolute;
    font-size: 0.78rem;
    line-height: 1.35;
    padding: 6px 8px;
    border-left: 2px solid var(--wm-accent);
    background: color-mix(in srgb, var(--wm-accent) 6%, var(--bs-body-bg));
    border-radius: 0 4px 4px 0;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    word-wrap: break-word;
    max-height: 4.5em;
    overflow: hidden;
}

.annotation-note:hover,
.annotation-note.active {
    background: color-mix(in srgb, var(--wm-accent) 15%, var(--bs-body-bg));
    border-left-color: var(--wm-primary);
}

.annotation-note .annotation-note-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

mark.user-annotation {
    background-color: color-mix(in srgb, var(--wm-accent) 20%, transparent);
    border-bottom: 2px solid var(--wm-accent);
    border-radius: 2px;
    padding: 0 1px;
    cursor: pointer;
    position: relative;
}

mark.user-annotation:hover,
mark.user-annotation.active {
    background-color: color-mix(in srgb, var(--wm-accent) 35%, transparent);
}

[data-bs-theme="dark"] mark.user-annotation {
    background-color: color-mix(in srgb, var(--wm-accent) 25%, transparent);
}

[data-bs-theme="dark"] .annotation-note {
    background: color-mix(in srgb, var(--wm-accent) 10%, var(--bs-body-bg));
}

[data-bs-theme="dark"] .annotation-note:hover,
[data-bs-theme="dark"] .annotation-note.active {
    background: color-mix(in srgb, var(--wm-accent) 20%, var(--bs-body-bg));
}

/* On screens too narrow for the margin, stack notes below */
@media (max-width: 1399.98px) {
    .annotation-margin {
        position: static;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--wm-border, #dee2e6);
    }
    .annotation-note {
        position: static;
        max-height: none;
    }
    .annotation-note .annotation-note-text {
        -webkit-line-clamp: unset;
    }
}

.annotation-popover {
    background: var(--wm-card-bg, #fff);
    border: 1px solid var(--wm-border, #dee2e6);
    border-radius: 8px;
    padding: 12px;
    max-width: 320px;
    z-index: 1060;
    position: absolute;
}

.annotation-popover-header {
    border-bottom: 1px solid var(--wm-border, #dee2e6);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.annotation-popover textarea {
    font-family: var(--bs-body-font-family);
    font-size: 0.875rem;
}

/* ================================================================
   Navigation Components
   ================================================================ */

/* Tabs */
.nav-tabs .nav-link {
    transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-tabs .nav-link.active {
    color: var(--wm-primary);
    border-bottom-color: var(--wm-primary);
    font-weight: 500;
}

/* Accordion */
.accordion-button {
    transition: background-color 0.2s ease;
}

.accordion-button:not(.collapsed) {
    color: var(--wm-primary);
    background-color: color-mix(in srgb, var(--wm-primary) 4%, var(--bs-body-bg));
}

/* Topic accordion */
#topic-accordion .accordion-item {
    scroll-margin-top: 1rem;
}

#topic-accordion .accordion-button {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
}

#topic-accordion .accordion-button:not(.collapsed) {
    background-color: color-mix(in srgb, var(--wm-primary) 4%, var(--bs-body-bg));
    color: var(--wm-primary);
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

#topic-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: var(--bs-border-color);
}

#topic-accordion .accordion-body {
    padding: 1rem 1.25rem 1.5rem;
}

#topic-accordion .accordion-body .list-group-item {
    font-size: 0.93rem;
}

/* ================================================================
   Form Styling
   ================================================================ */

.form-control-override {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

/* Allow annotation margin to overflow into padding on wide screens */
@media (min-width: 1400px) {
    #section-mode-content {
        padding-right: 220px;
    }
}

/* ================================================================
   Focus Styles
   ================================================================ */

:focus-visible {
    outline: 2px solid var(--wm-primary);
    outline-offset: 2px;
}

.nav-link:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--wm-primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* ================================================================
   Print Styles
   ================================================================ */

@media print {
    nav.navbar, footer, form,
    .breadcrumb, .highlight-popover, .annotation-popover,
    .ornamental-divider, .heading-flourish,
    .hero-bg-pattern { display: none !important; }
    mark.user-annotation { background: none !important; border: none !important; }
    .annotation-margin { display: none !important; }
    .tab-content > .tab-pane { display: block !important; opacity: 1 !important; }
    .accordion-collapse { display: block !important; height: auto !important; }
    .nav-tabs { display: none !important; }
    .card { break-inside: avoid; border: 1px solid #ddd !important; box-shadow: none !important; }
    .commentary-text { break-inside: avoid; }
    body { color: #000 !important; background: #fff !important; }

    a { color: #000 !important; text-decoration: none !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
    .container { max-width: 100% !important; }
}

/* ================================================================
   Full-width page bands
   ================================================================ */

.page-band {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}

.page-band-content {
    position: relative;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}



/* Bootstrap pairs a container's 0.75rem side padding with a row's default
   1.5rem gutter, and cancels the row's negative margins against it. A row
   asking for a wider gutter — g-5 is 3rem — pulls 0.75rem past the container
   on each side, so the page scrolls sideways at every width. Every document
   home, the Scripture index and book pages, the learn pages and both auth
   pages did exactly that. Give the container back the difference, and the
   wider gutter is spent between the columns rather than outside the page. */
.gutter-wide {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Column separator — applied to grid columns site-wide */
.col-separator {
    border-left: 2px solid color-mix(in srgb, var(--wm-primary) 25%, transparent);
    padding-left: 1.5rem !important;
}

/* ── Sidebar toggle ── */
.sidebar-hide-btn {
    background: none;
    border: none;
    padding: 0.1rem 0.3rem;
    color: var(--wm-text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
}
.sidebar-hide-btn:hover {
    opacity: 1;
    color: var(--wm-primary);
}

.sidebar-show-tab {
    position: absolute;
    left: 0;
    top: 1.75rem;
    z-index: 10;
    width: auto;
    background: var(--wm-bg);
    border: 1px solid var(--wm-border);
    border-left: 2px solid var(--wm-primary);
    border-radius: 0 0.25rem 0.25rem 0;
    padding: 0.5rem 0.25rem;
    color: var(--wm-text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    transition: color 0.15s;
}
.sidebar-show-tab:hover {
    color: var(--wm-primary);
    border-color: var(--wm-primary);
}

/* When sidebar is hidden */
#nav-col.sidebar-hidden {
    display: none !important;
}
#main-col.sidebar-expanded {
    flex: 0 0 100%;
    max-width: 100%;
}

.page-band-header {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--wm-border);
}

.page-band-featured {
    background-color: color-mix(in srgb, var(--wm-accent) 7%, var(--bs-body-bg));
    border-top: 2px solid color-mix(in srgb, var(--wm-accent) 30%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--wm-accent) 15%, transparent);
}

.page-band-muted {
    background-color: color-mix(in srgb, var(--wm-primary) 4%, var(--bs-body-bg));
    border-top: 1px solid var(--wm-border);
    border-bottom: 1px solid var(--wm-border);
}

/* ================================================================
   Flat sidebar (replaces card-based sidebar)
   ================================================================ */

.flat-sidebar {
    position: sticky;
    top: 70px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.flat-section-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wm-text-muted);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--wm-border);
    margin-bottom: 0.5rem;
}

/* Flat tradition toggles on home page */
.tradition-toggle.active {
    color: var(--wm-primary);
    font-weight: 500;
}

/* ================================================================
   Question-detail sidebar alignment
   ================================================================ */

/* ================================================================
   See-also preview panel
   ================================================================ */
.see-also-preview-panel {
    position: sticky;
    top: 1rem;
}

.see-also-link.active {
    font-weight: 700;
    text-decoration: underline;
}

.btn-close-sm {
    font-size: 0.6rem;
}

#preview-answer {
    font-size: 0.95rem;
    line-height: 1.7;
}

#preview-title {
    font-size: 0.95rem;
}

/* ── Tradition filter ── */
.doc-tradition-hidden {
    display: none !important;
}

.tradition-check {
    visibility: hidden;
}

/* ── Chapter / Section view mode ── */
.chapter-mode-item {
    cursor: pointer;
    border: none !important;
    border-bottom: 1px solid var(--wm-border) !important;
    border-radius: 0 !important;
    padding: 0.35rem 0.5rem !important;
    margin-bottom: 0 !important;
    transition: background-color 0.15s;
}

.chapter-mode-item:last-child {
    border-bottom: none !important;
}

.chapter-mode-item .chapter-item-title {
    font-size: 1rem;
    margin-bottom: 0.15rem !important;
    color: var(--wm-primary);
}

.chapter-mode-item .answer-text {
    font-size: 0.92rem;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.chapter-mode-item .answer-text p {
    margin-bottom: 0.25rem;
}

.chapter-mode-item:hover {
    background-color: rgba(var(--wm-primary-rgb), 0.04);
}

#chapter-mode-content > h4 {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--wm-primary);
}

/* ================================================================
   Study workflow surfaces
   ================================================================ */

.study-search-panel {
    background: color-mix(in srgb, var(--wm-primary) 4%, var(--bs-body-bg));
    border: 1px solid var(--wm-border);
    border-radius: 0.5rem;
    padding: 1rem;
}

.study-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.study-suggestions a {
    border: 1px solid var(--wm-border);
    border-radius: 999px;
    color: var(--wm-text-muted);
    font-size: 0.78rem;
    padding: 0.15rem 0.55rem;
    text-decoration: none;
}

.study-suggestions a:hover {
    border-color: var(--wm-primary);
    color: var(--wm-primary);
}

.study-card {
    position: relative;
    border: 1px solid var(--wm-border);
    border-left: 3px solid var(--wm-primary);
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--wm-card-bg) 94%, var(--bs-body-bg));
    color: var(--bs-body-color);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 8rem;
    padding: 1rem;
    text-decoration: none;
}

.study-card > i {
    color: var(--wm-primary);
    font-size: 1.35rem;
}

.study-card-title {
    color: var(--bs-body-color);
    font-weight: 700;
}

.study-card-text {
    color: var(--wm-text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.study-card-link:hover,
.study-card:has(.stretched-link:hover) {
    border-color: var(--wm-primary);
    background: color-mix(in srgb, var(--wm-primary) 4%, var(--bs-body-bg));
}

.study-inline-link {
    border-bottom: 1px solid var(--wm-border);
    color: var(--bs-body-color);
    display: block;
    min-height: 4.5rem;
    padding: 0.7rem 0;
    text-decoration: none;
}

.study-inline-link span {
    color: var(--wm-text-muted);
    display: block;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 0.2rem;
}

.study-inline-link:hover strong {
    color: var(--wm-primary);
}

.study-callout,
.study-action-bar,
.study-continue {
    align-items: center;
    background: color-mix(in srgb, var(--wm-accent) 6%, var(--bs-body-bg));
    border: 1px solid color-mix(in srgb, var(--wm-accent) 22%, var(--wm-border));
    border-radius: 0.45rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

.study-action-bar {
    background: color-mix(in srgb, var(--wm-primary) 4%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--wm-primary) 18%, var(--wm-border));
}

.study-atlas-panel {
    background: color-mix(in srgb, var(--wm-card-bg) 88%, var(--bs-body-bg));
    border: 1px solid var(--wm-border);
    border-left: 3px solid var(--wm-accent);
    border-radius: 0.45rem;
    padding: 1rem;
}

[data-bs-theme="dark"] .study-atlas-chip {
    border-left-color: var(--locus-color, var(--wm-accent));
}

/* Parallel reading: one row per section, every edition level with the others.
   The alignment is structural rather than scripted, so it survives printing,
   a narrow screen, and JavaScript being off. */
.parallel-heads {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-body-bg);
    padding-top: 0.35rem;
    border-bottom: 1px solid var(--wm-border);
}

.parallel-row {
    border-bottom: 1px solid var(--wm-border);
    padding: 0.85rem 0;
}

.parallel-row:last-child {
    border-bottom: 0;
}

.parallel-row-edited {
    border-left: 3px solid var(--wm-accent);
    margin-left: -3px;
}

.parallel-text {
    font-size: 0.95rem;
    line-height: 1.6;
}

.parallel-absent {
    opacity: 0.6;
}

/* Below lg the columns stack, so each edition needs its own separator to stay
   legible as a block rather than running into the next one. */
@media (max-width: 991.98px) {
    .parallel-cell + .parallel-cell {
        border-top: 1px dashed var(--wm-border);
        padding-top: 0.6rem;
    }
}

@media print {
    .parallel-heads { position: static; }
    .parallel-row { break-inside: avoid; }
}

/* The comparison offer on a confession chapter. Deliberately quieter than
   the Atlas panel above it: it is an invitation, not the chapter's content. */
.chapter-compare-panel {
    background: color-mix(in srgb, var(--wm-card-bg) 88%, var(--bs-body-bg));
    border: 1px solid var(--wm-border);
    border-left: 3px solid var(--wm-primary);
    border-radius: 0.45rem;
    padding: 0.85rem 1rem;
}

/* Skip link — self-contained so it still works if Bootstrap's utility
   classes fail to load. */
.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -3rem;
    z-index: 1080;
    padding: 0.5rem 0.9rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--wm-border);
    border-radius: 0.25rem;
    transition: top 0.15s ease-in-out;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0.5rem;
}

#main-content:focus {
    outline: none;
}

.study-atlas-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Locus accent. The eight Atlas colours are bright pastels chosen against the
   Atlas's dark ground; on a light card they are too faint to read as a
   boundary, so darken them there and use them as-is in dark mode. Falls back
   to the theme accent when no locus colour is set. */
.study-atlas-chip {
    border-left-color: color-mix(in srgb, var(--locus-color, var(--wm-accent)) 65%, #333);
    align-items: center;
    background: color-mix(in srgb, var(--wm-card-bg) 82%, var(--bs-body-bg));
    border: 1px solid var(--wm-border);
    border-left: 4px solid var(--wm-accent);
    border-radius: 0.
/* The teaching guide's aside: a short card beside a long list of lessons.
   It follows the reader down rather than stretching to the list's height. */
@media (min-width: 992px) {
    .learn-aside {
        position: sticky;
        top: 1rem;
    }
}