/* Base Styles - Clean and Professional - NO EMOJIS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.7;
    background: #f9fafb;
    color: #1e3a8a;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
    /* Prevent rubber band scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
    width: 100%;
    /* Dark background prevents white flash between page navigations */
    background: #0c1a3e;
}

/* Prevent text size adjustment on mobile */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Improve touch scrolling */
body {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
    width: 100%;
    max-width: 100%;
}

/* Better text rendering on all devices */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Better tap highlighting for mobile */
* {
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.15);
    -webkit-touch-callout: none;
}

/* Prevent horizontal scroll on all elements */
* {
    max-width: 100%;
}

main,
.container,
[role="main"] {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Allow selection for text content */
.hebrew-text,
.english-text,
.commentary-text,
.definition-text,
.comment-text,
p,
span {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Disable selection for interactive elements */
button,
.verse-number,
.content-indicator,
.reaction-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Ensure proper word wrapping on mobile */
.verse-text-container,
.hebrew-text,
.english-text,
.commentary-text,
.definition-text,
.comment-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}

/* Prevent zoom on inputs for mobile Safari */
@media screen and (max-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* Header Enhancements */
header {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
}

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

header::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -15%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}

header::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(30, 58, 138, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(50px);
}

/* Navigation Enhancements */
nav {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.98);
}

/* Daily Inspiration Banner */
.daily-inspiration-header-section {
    background: #fafbfc;
    border-bottom: none;
    padding-bottom: 5px;
    margin-bottom: 0px;
}

#daily-inspiration {
    background: transparent;
}

.daily-inspiration-card {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0.35rem 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.daily-inspiration-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: linear-gradient(135deg, #fefcf7 0%, #faf8f3 100%);
    border: 1px solid #ebe7df;
    border-radius: 10px;
    padding: 1rem 1rem 0.85rem 1rem;
    padding-right: 3.25rem; /* breathing room for the floating bookmark */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    transition: background 1s ease, border-color 1s ease, box-shadow 1s ease;
}

.daily-inspiration-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.daily-inspiration-actions {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 100;
    pointer-events: auto;
}

/* Daily quote bookmark — uses .reaction-btn base, themed like verse .bookmark-btn */
.daily-quote-bookmark-btn {
    color: #1e40af;
    border-color: #bfdbfe;
    background: #dbeafe;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
}

.daily-quote-bookmark-btn .bookmark-icon {
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
    transition: transform 0.2s ease;
}

.daily-quote-bookmark-btn:hover .bookmark-icon {
    transform: translateY(-1px);
}

.daily-quote-bookmark-btn:hover {
    background: #bfdbfe;
    border-color: #93c5fd;
    box-shadow: 0 2px 4px 0 rgba(59, 130, 246, 0.15);
}

.daily-quote-bookmark-btn.is-active {
    background: #3b82f6;
    color: white;
    border-color: #2563eb;
    box-shadow: 0 2px 4px 0 rgba(37, 99, 235, 0.2);
}

/* Count number — inline next to icon, just like verse bookmark-count */
.daily-quote-bookmark-count {
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    color: inherit;
}

.daily-quote-bookmark-count.has-count {
    display: inline-flex;
}

/* Tooltip — anchored to the bookmark button's right edge */
.daily-quote-bookmark-btn.status-tooltip[data-tooltip]::after {
    left: auto !important;
    right: -4px;
    transform: translate(0, 8px) !important;
    white-space: pre-line;
    min-width: 200px;
    max-width: 280px;
    z-index: 10000;
}

.daily-quote-bookmark-btn.status-tooltip[data-tooltip]::before {
    left: auto !important;
    right: 8px;
    transform: translate(0, 0) !important;
    z-index: 9999;
}

.daily-quote-bookmark-btn.status-tooltip[data-tooltip]:hover::after {
    opacity: 1;
    transform: translate(0, 2px) !important;
}

.daily-quote-bookmark-btn.status-tooltip[data-tooltip]:hover::before {
    opacity: 1;
    transform: translate(0, 2px) !important;
}

.daily-inspiration-quotes {
    flex: 1;
    min-width: 0;
    display: block;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    line-height: 1.6;
}

.daily-inspiration-hebrew,
.daily-inspiration-translation {
    font-size: 0.875rem;
    font-weight: 500;
    color: #3f3f46;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.daily-inspiration-translation {
    font-style: italic;
    color: #52525b;
    display: block;
    margin-top: 0.25rem;
}

.quote-mark {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.15em;
    color: #a1a1aa;
    opacity: 0.6;
    line-height: 1;
    white-space: nowrap;
}

.quote-mark-start {
    margin-right: -0.1em;
}

.quote-mark-end {
    margin-left: -0.1em;
}

.daily-inspiration-hebrew {
    display: inline;
}

.quote-divider {
    color: #a1a1aa;
    font-size: 0.85rem;
    opacity: 0.5;
    margin: 0 0.15rem;
}

.daily-inspiration-source {
    position: relative;
    font-size: 0.72rem;
    font-weight: 600;
    color: #5b5566;
    letter-spacing: 0.025em;
    display: block;
    text-align: right;
    margin-top: 0.65rem;
    padding-top: 0.8rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.daily-inspiration-source::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1.4rem;
    right: -1.4rem;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #d0c8ba 18%, #b8b0a3 50%, #d0c8ba 82%, transparent 100%);
    opacity: 0.95;
}

.daily-inspiration-explanation-section {
    margin-top: 0.5rem;
}

.daily-inspiration-explanation-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #52525b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.35rem;
}

.daily-inspiration-reflection {
    font-size: 0.8rem;
    color: #27272a;
    line-height: 1.5;
    font-weight: 500;
    display: inline;
}

@media (max-width: 768px) {
    /* ── Compact mobile daily quote — minimal elegant card ── */
    .daily-inspiration-header-section {
        padding-bottom: 2px;
        margin-bottom: 0;
    }

    .daily-inspiration-card {
        padding: 0.35rem 0.65rem;
        max-width: none;
    }

    .daily-inspiration-content {
        padding: 0.7rem 0.8rem 0.6rem;
        padding-right: 2.4rem;
        border-radius: 10px;
        background: linear-gradient(140deg, #faf8f2 0%, #f5f2eb 100%);
        border: 1px solid rgba(180, 170, 148, 0.25);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }

    .daily-inspiration-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .daily-inspiration-quotes {
        gap: 0;
        padding: 0;
        width: 100%;
        line-height: 1.45;
    }

    .daily-inspiration-hebrew {
        font-size: 0.78rem;
        line-height: 1.4;
        font-weight: 500;
        color: #4a4a4a;
    }

    .daily-inspiration-translation {
        font-size: 0.74rem;
        line-height: 1.4;
        margin-top: 0.1rem;
        color: #6b6b6b;
    }

    .quote-mark {
        font-size: 0.9em;
        opacity: 0.4;
    }

    .quote-divider {
        font-size: 0.75rem;
        margin: 0 0.1rem;
    }

    /* Reflection — single line, subtle */
    .daily-inspiration-explanation-section {
        margin-top: 0.35rem;
        padding-top: 0;
    }

    .daily-inspiration-explanation-label {
        font-size: 0.58rem;
        margin-right: 0.2rem;
    }

    .daily-inspiration-reflection {
        font-size: 0.68rem;
        line-height: 1.45;
        color: #555;
    }

    /* Source — compact inline */
    .daily-inspiration-source {
        margin-top: 0.4rem;
        padding-top: 0.4rem;
        padding-left: 0;
        padding-right: 0;
        font-size: 0.6rem;
        color: #8a7e6e;
        letter-spacing: 0.04em;
    }

    .daily-inspiration-source::before {
        left: -0.8rem;
        right: -0.8rem;
        opacity: 0.6;
    }

    /* Mobile bookmark — tiny floating pill */
    .daily-inspiration-actions {
        position: absolute;
        top: 0.35rem;
        right: 0.35rem;
        z-index: 10;
    }

    .daily-quote-bookmark-btn {
        font-size: 0;
        padding: 0.22rem;
        border-radius: 6px;
        min-width: 0;
    }

    .daily-quote-bookmark-btn .bookmark-icon {
        width: 0.82rem;
        height: 0.82rem;
    }

    .daily-quote-bookmark-btn:active {
        transform: scale(0.92);
    }

    /* Hide bookmark count text on mobile */
    .daily-quote-bookmark-count {
        display: none !important;
    }
}

/* Select Dropdown Enhancement */
select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234b5563'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
}

select:hover {
    border-color: #60a5fa;
}

select:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Button Enhancements */
button {
    cursor: pointer;
    user-select: none;
}

button:active:not(:disabled) {
    transform: scale(0.98);
}

/* Icon Buttons in Header */
header button svg,
header a svg {
    flex-shrink: 0;
}

/* Responsive Button Text */
@media (max-width: 640px) {
    header button,
    header a {
        padding: 0.625rem 1rem;
        /* Ensure touch targets are at least 44px */
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Touch Target Minimum Sizes for All Devices */
button,
a,
input[type="submit"],
input[type="button"],
select {
    min-height: 44px; /* iOS recommended touch target */
    min-width: 44px;
}

/* Exception for very small decorative elements */
.reaction-icon,
.indicator-icon,
.daily-quote-bookmark-btn,
.quote-remove-btn {
    min-height: unset;
    min-width: unset;
}

/* Hebrew Text Styling - 4px LARGER than English */
[lang="he"] {
    direction: rtl;
    font-family: 'SBL Hebrew', 'Ezra SIL', 'Frank Ruehl CLM', 'David CLM', 'Times New Roman', serif;
    font-size: 1.29rem !important; /* 4px larger: 1.05rem + 0.25rem = 1.29rem */
    line-height: 1.9;
    font-weight: 400;
}

/* Support for Sefaria Hebrew text classes */
.hebrew-text span {
    font-family: inherit;
    direction: rtl;
}

.hebrew-text .mam-spi-samekh,
.hebrew-text .mam-spi-pe {
    display: inline;
}

.hebrew-text .small {
    font-size: 0.85em;
}

/* Chapter Headers - MORE SPACE (5rem top margin instead of 3rem) */
.chapter-header {
    margin: 5rem 0 3rem 0; /* INCREASED from 3rem to 5rem */
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    position: relative;
}

/* ── Double Parsha Banner ── */
.double-parsha-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.12);
}

.double-parsha-banner--bottom {
    margin-top: 2rem;
    margin-bottom: 0;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
}

.double-parsha-banner__text {
    font-size: 0.95rem;
    color: #1e3a5f;
    line-height: 1.5;
}

.double-parsha-banner__text strong {
    color: #15803d;
}

.double-parsha-banner--bottom .double-parsha-banner__text strong {
    color: #1e40af;
}

/* ── Double Parsha Section Header ── */
.double-parsha-section-header {
    margin: 1rem 0 2rem 0;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: white;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.15);
    letter-spacing: 0.5px;
}

/* ── Double Parsha Divider ── */
.double-parsha-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 6rem 0 3rem 0;
    padding: 0 0.5rem;
}

.double-parsha-divider__line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
}

.double-parsha-divider__label {
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: white;
    font-size: 1.4rem;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.15);
    white-space: nowrap;
}

/* ── Double Mitzvah Challenge Blocks ── */
.double-mitzvah-label {
    margin-bottom: 0.25rem;
}

.double-mitzvah-label__parsha {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.double-mitzvah-block {
    padding: 0.75rem;
    border-left: 3px solid #3b82f6;
    background: rgba(59, 130, 246, 0.04);
    border-radius: 0 6px 6px 0;
}

.double-mitzvah-block__name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}

/* Current Parsha Highlight */
.current-parsha-highlight {
    background: #eff6ff;
    border-left: 4px solid #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
    position: relative;
    padding-top: 3rem;
}

.current-parsha-highlight::before {
    content: "This Week's Parsha";
    position: absolute;
    top: -12px;
    left: 24px;
    background: #2563eb;
    color: white;
    padding: 4px 16px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Verse Container - IMPROVED LAYOUT */
.verse-container {
    padding: 1.25rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    cursor: pointer;
    position: relative;
}

.verse-container:hover {
    background: #f9fafb;
    border-color: #60a5fa;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
    transform: translateY(-1px);
}

/* Verses with Content */
.verse-container.has-content {
    border-left: 4px solid #3b82f6;
}

.verse-container.has-commentary {
    background: linear-gradient(to right, #eff6ff 0%, #ffffff 3%);
}

.verse-container.has-keywords {
    background: linear-gradient(to right, #fef3c7 0%, #ffffff 3%);
}

.verse-container.has-commentary.has-keywords {
    background: linear-gradient(to right, #dbeafe 0%, #fef3c7 2%, #ffffff 4%);
}

.verse-container.has-important {
    background: linear-gradient(to left, #f3e8ff 0%, #ffffff 3%);
    border-left: none;
    border-right: 4px solid #9333ea;
}

.verse-container.has-commentary.has-important {
    background: linear-gradient(to right, #dbeafe 0%, #ffffff 2%);
    border-left: 4px solid #3b82f6;
    border-right: 4px solid #9333ea;
}

.verse-container.has-keywords.has-important {
    background: linear-gradient(to right, #fef3c7 0%, #ffffff 2%);
    border-left: 4px solid #f59e0b;
    border-right: 4px solid #9333ea;
}

.verse-container.has-commentary.has-keywords.has-important {
    background: linear-gradient(to right, #dbeafe 0%, #fef3c7 2%, #ffffff 4%);
    border-left: 4px solid #3b82f6;
    border-right: 4px solid #9333ea;
}

/* Verse Content Wrapper - PROPER ALIGNMENT */
.verse-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

/* Verse Number */
.verse-number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    background: #3b82f6;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 6px;
    font-size: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Verse Text Container - HEBREW ABOVE ENGLISH */
.verse-text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Hebrew Text - ABOVE, LARGER */
.hebrew-text {
    color: #1e40af;
    text-align: right;
    font-size: 1.29rem !important; /* 4px larger */
    line-height: 1.9;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
}

/* English Text - BELOW */
.english-text {
    color: #1e3a8a;
    font-size: 1.05rem;
    line-height: 1.8;
    text-align: left;
}

/* Important Verse Button - Purple pill in Bottom Right */
.important-verse-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #9333ea, #7c3aed);
    border: none;
    cursor: pointer;
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    transition: all 0.2s ease;
    z-index: 10;
    line-height: 1.3;
    user-select: none;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.3);
}

.important-verse-btn:hover {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(147, 51, 234, 0.45);
}

.important-verse-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(147, 51, 234, 0.3);
}

/* Keyword Styling - BOLD AND OBVIOUS - NO EMOJIS */
.keyword {
    background: linear-gradient(120deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 2px solid #f59e0b;
    cursor: help;
    color: #92400e;
    font-weight: 700 !important; /* BOLD! - Force with !important */
    transition: all 0.2s ease;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline;
    font-style: normal;
}

.keyword:hover {
    background: #fcd34d;
    border-bottom-color: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

/* Verse Indicators Section - NO EMOJIS */
.verse-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

.content-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.commentary-indicator {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.commentary-indicator:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
}

.keyword-indicator {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.keyword-indicator:hover {
    background: #fde68a;
    border-color: #fcd34d;
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2);
}

/* NO EMOJI ICONS */
.indicator-icon {
    display: none;
}

/* Comment Count Badge - NO EMOJIS */
.comment-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #059669;
}

.comment-count-badge:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.4);
}

/* NO EMOJI before comment badge */
.comment-count-badge::before {
    content: '';
}

/* Remove old Discuss button */
.show-comments-btn {
    display: none;
}

/* ========================================
   REACTION BUTTONS (Emphasize & Heart)
   ======================================== */

.verse-reactions {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    margin-top: 0.65rem;
    flex-wrap: wrap;
}

.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    position: relative;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.reaction-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.reaction-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.reaction-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Emphasize Button - Amber Theme */
.emphasize-btn {
    color: #92400e;
    border-color: #fde68a;
    background: #fef3c7;
}

.emphasize-btn:hover {
    background: #fde68a;
    border-color: #fcd34d;
    box-shadow: 0 2px 4px 0 rgba(245, 158, 11, 0.15);
}

.emphasize-btn.active {
    background: #f59e0b;
    color: white;
    border-color: #d97706;
    box-shadow: 0 2px 4px 0 rgba(217, 119, 6, 0.2);
}

/* Heart Button - Plum Theme */
.heart-btn {
    color: #9d174d;
    border-color: #fbcfe8;
    background: #fce7f3;
}

.heart-btn:hover {
    background: #fbcfe8;
    border-color: #f9a8d4;
    box-shadow: 0 2px 4px 0 rgba(236, 72, 153, 0.15);
}

.heart-btn.active {
    background: #db2777;
    color: white;
    border-color: #be185d;
    box-shadow: 0 2px 4px 0 rgba(190, 24, 93, 0.2);
}

/* Bookmark Button - Blue Theme */
.bookmark-btn {
    color: #1e40af;
    border-color: #bfdbfe;
    background: #dbeafe;
}

.bookmark-btn:hover {
    background: #bfdbfe;
    border-color: #93c5fd;
    box-shadow: 0 2px 4px 0 rgba(59, 130, 246, 0.15);
}

.bookmark-btn.active {
    background: #3b82f6;
    color: white;
    border-color: #2563eb;
    box-shadow: 0 2px 4px 0 rgba(37, 99, 235, 0.2);
}

/* Reaction Icons */
.reaction-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
}

.emphasize-icon::before {
    content: '!';
}

.heart-icon::before {
    content: '\2665'; /* Unicode heart symbol */
}

.bookmark-btn .bookmark-icon {
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
    transition: transform 0.2s ease;
}

.bookmark-btn:hover .bookmark-icon {
    transform: translateY(-1px);
}


.bookmark-count {
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: inherit;
    min-width: 1.6rem;
    box-shadow: inset 0 0 0 1px rgba(30, 64, 175, 0.25);
}

.bookmark-btn.active .bookmark-count {
    background: rgba(255, 255, 255, 0.92);
    color: #1e3a8a;
}

/* Reaction Count */
.reaction-count {
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.65);
    min-width: 1.5rem;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.bookmark-tabs {
    display: inline-flex;
    gap: 0.7rem;
    margin: 0.2rem 0 0.55rem;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.88);
    padding: 0.5rem 0.65rem;
    border-radius: 14px;
    border: 1px solid #d7e3f4;
    width: fit-content;
    box-shadow: 0 16px 40px -26px rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(10px);
}

.bookmark-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.48rem 1.05rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: rgba(15, 23, 42, 0.02);
    color: #0b1f33;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    box-shadow: none;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.bookmark-tab:hover {
    background: #e7f0ff;
    border-color: #cbdcf4;
    color: #0b1f33;
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 8px 18px -18px rgba(15, 23, 42, 0.32);
}

.bookmark-tab.active {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 14px 26px -18px rgba(37, 99, 235, 0.45);
}

.bookmark-tab-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    box-shadow: inset 0 0 0 1px rgba(30, 64, 175, 0.28);
}

.bookmark-panels {
    width: 100%;
    position: relative;
    height: 420px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #d7e3f4;
    border-radius: 16px;
    box-shadow: 0 18px 38px -28px rgba(15, 23, 42, 0.32);
    padding: 0.85rem 0.85rem 0.65rem;
}

.bookmark-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease;
    padding: 0.35rem 0.55rem 0.9rem 0.45rem;
}

.bookmark-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bookmarks-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bookmark-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.95rem 1rem;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fdfefe;
    color: #0f172a;
    cursor: pointer;
    box-shadow: 0 8px 18px -16px rgba(15, 23, 42, 0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease, background 0.2s ease;
    font: inherit;
}

.bookmark-item:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 14px 24px -18px rgba(15, 23, 42, 0.36);
    background: #f6f9ff;
}

.bookmark-item:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.bookmark-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.bookmark-item-ref {
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a;
}

.bookmark-item-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.12);
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.bookmark-item-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #1f2937;
    word-break: break-word;
}

.bookmark-item-meta {
    font-size: 0.78rem;
    color: #6b7280;
}

.bookmark-item-date {
    font-weight: 500;
}

/* Custom scrollbar for bookmark panels */
.bookmark-panel::-webkit-scrollbar {
    width: 8px;
}

.bookmark-panel::-webkit-scrollbar-track {
    background: transparent;
}

.bookmark-panel::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.bookmark-panel::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

@media (max-width: 640px) {
    .bookmark-panels {
        height: 380px;
    }

    .bookmark-item {
        padding: 0.875rem;
    }

    .bookmark-item-count {
        font-size: 0.7rem;
        padding: 0.125rem 0.375rem;
    }

    .bookmark-item-text {
        font-size: 0.8125rem;
    }
}

.quote-bookmarks-list {
    gap: 0.75rem;
    display: flex;
    flex-direction: column;
}

.quote-bookmark-item {
    width: 100%;
    padding: 0.95rem 1rem;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fdfefe;
    box-shadow: 0 8px 18px -16px rgba(15, 23, 42, 0.32);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease, background 0.2s ease;
}

.quote-bookmark-item:hover {
    box-shadow: 0 14px 24px -18px rgba(15, 23, 42, 0.36);
    border-color: rgba(59, 130, 246, 0.3);
    background: #f6f9ff;
}

.quote-bookmark-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: #4b5563;
    font-size: 0.8rem;
}

.quote-bookmark-source {
    font-weight: 600;
    color: #1f2937;
    letter-spacing: 0.01em;
}

.quote-remove-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    transition: all 0.2s ease;
    cursor: pointer;
}

.quote-remove-btn:hover {
    color: #ef4444;
    border-color: #fca5a5;
    background: #fef2f2;
}

.quote-bookmark-translation {
    font-weight: 600;
    color: #111827;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.quote-bookmark-hebrew {
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.5;
}

.quote-bookmark-reflection {
    color: #6b7280;
    line-height: 1.5;
    font-size: 0.875rem;
}

/* Community Quotes Tab */

.community-tab-pill {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 100%) !important;
    color: #7c3aed !important;
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.3) !important;
}

.bookmark-tab.active .community-tab-pill {
    background: rgba(255, 255, 255, 0.28) !important;
    color: white !important;
    box-shadow: none !important;
}

.community-quotes-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.community-quote-card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 28px -14px rgba(15, 23, 42, 0.38);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.community-quote-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px -16px rgba(15, 23, 42, 0.48);
}

.community-quote-header {
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.community-quote-source {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
    letter-spacing: 0.04em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-quote-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    background: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.97);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.community-quote-body {
    background: #ffffff;
    padding: 0.85rem 1rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.community-quote-translation {
    font-size: 0.91rem;
    line-height: 1.62;
    color: #111827;
    font-style: italic;
    font-weight: 500;
}

.community-quote-hebrew {
    font-size: 1rem;
    color: #374151;
    text-align: right;
    direction: rtl;
    font-weight: 500;
    line-height: 1.7;
    border-right: 3px solid #e5e7eb;
    padding-right: 0.6rem;
}

.community-quote-reflection {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.55;
}

.community-quote-savers {
    margin-top: 0.15rem;
}

.community-avatars-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.community-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 800;
    color: white;
    border: 2px solid white;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
    cursor: default;
    letter-spacing: 0;
}

.community-avatars-row .community-avatar:not(:first-child) {
    margin-left: -7px;
}

.community-quotes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    gap: 0.4rem;
    text-align: center;
    padding: 2rem;
}

.community-quotes-empty-icon {
    font-size: 2rem;
    margin-bottom: 0.3rem;
}

.community-quotes-empty-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #6b7280;
}

.community-quotes-empty-hint {
    font-size: 0.82rem;
    color: #9ca3af;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.community-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

/* Dynamic Verse Background Colors */

/* Reaction left-border lines — ::before pseudo-element so hover box-shadow can't override */
.verse-container[data-emphasize]:not([data-emphasize="0"])::before,
.verse-container[data-heart]:not([data-heart="0"])::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: inherit;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    pointer-events: none;
    z-index: 1;
}

.verse-container[data-emphasize]:not([data-emphasize="0"])::before {
    background: rgba(245, 158, 11, 0.85);
}

.verse-container[data-heart]:not([data-heart="0"])::before {
    background: rgba(219, 39, 119, 0.85);
}

/* When both reactions exist, widen and split the stripe */
.verse-container[data-emphasize]:not([data-emphasize="0"])[data-heart]:not([data-heart="0"])::before {
    background: linear-gradient(to right, rgba(245, 158, 11, 0.85) 50%, rgba(219, 39, 119, 0.75) 50%);
    width: 12px;
}

/* Subtle border glow stays on the container itself — independent of the left line */
.verse-container[data-emphasize]:not([data-emphasize="0"]) {
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.22);
}

.verse-container[data-heart]:not([data-heart="0"]) {
    box-shadow: inset 0 0 0 1px rgba(219, 39, 119, 0.18);
}

.verse-container[data-emphasize]:not([data-emphasize="0"])[data-heart]:not([data-heart="0"]) {
    box-shadow: inset 0 0 0 1px rgba(109, 40, 217, 0.22);
}

/* Amber gradient for emphasize - intensity increases with each reaction */
.verse-container[data-emphasize="1"] {
    background: linear-gradient(to right, rgba(253, 230, 138, 0.28) 0%, rgba(255, 255, 255, 0.98) 55%) !important;
}

.verse-container[data-emphasize="2"] {
    background: linear-gradient(to right, rgba(252, 211, 77, 0.38) 0%, rgba(255, 255, 255, 0.97) 55%) !important;
}

.verse-container[data-emphasize="3"] {
    background: linear-gradient(to right, rgba(251, 191, 36, 0.5) 0%, rgba(255, 255, 255, 0.96) 55%) !important;
}

.verse-container[data-emphasize="4"] {
    background: linear-gradient(to right, rgba(245, 158, 11, 0.62) 0%, rgba(255, 255, 255, 0.95) 55%) !important;
}

/* 5+ emphasize reactions - richest amber tone */
.verse-container[data-emphasize]:not([data-emphasize="0"]):not([data-emphasize="1"]):not([data-emphasize="2"]):not([data-emphasize="3"]):not([data-emphasize="4"]) {
    background: linear-gradient(to right, rgba(217, 119, 6, 0.74) 0%, rgba(255, 255, 255, 0.94) 55%) !important;
}

/* Plum gradient for heart - intensity increases with each reaction */
.verse-container[data-heart="1"] {
    background: linear-gradient(to right, rgba(247, 209, 229, 0.28) 0%, rgba(255, 255, 255, 0.98) 55%) !important;
}

.verse-container[data-heart="2"] {
    background: linear-gradient(to right, rgba(244, 171, 205, 0.38) 0%, rgba(255, 255, 255, 0.97) 55%) !important;
}

.verse-container[data-heart="3"] {
    background: linear-gradient(to right, rgba(236, 72, 153, 0.5) 0%, rgba(255, 255, 255, 0.96) 55%) !important;
}

.verse-container[data-heart="4"] {
    background: linear-gradient(to right, rgba(219, 39, 119, 0.62) 0%, rgba(255, 255, 255, 0.95) 55%) !important;
}

/* 5+ heart reactions - richest plum tone */
.verse-container[data-heart]:not([data-heart="0"]):not([data-heart="1"]):not([data-heart="2"]):not([data-heart="3"]):not([data-heart="4"]) {
    background: linear-gradient(to right, rgba(190, 24, 93, 0.74) 0%, rgba(255, 255, 255, 0.94) 55%) !important;
}

/* When both reactions exist, blend them */
.verse-container[data-emphasize]:not([data-emphasize="0"])[data-heart]:not([data-heart="0"]) {
    background: linear-gradient(to right,
        rgba(253, 230, 138, 0.35) 0%,
        rgba(244, 114, 182, 0.35) 16%,
        rgba(255, 255, 255, 0.95) 60%) !important;
}

/* Ensure text remains readable on colored backgrounds */
.verse-container[data-emphasize]:not([data-emphasize="0"]) .verse-number,
.verse-container[data-heart]:not([data-heart="0"]) .verse-number {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.verse-container[data-emphasize]:not([data-emphasize="0"]) .hebrew-text,
.verse-container[data-emphasize]:not([data-emphasize="0"]) .english-text,
.verse-container[data-heart]:not([data-heart="0"]) .hebrew-text,
.verse-container[data-heart]:not([data-heart="0"]) .english-text {
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

/* Bookmark highlight glow */
.bookmark-highlight {
    animation: bookmarkGlow 2.4s ease-out forwards;
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.68) 0%, rgba(255, 255, 255, 0.97) 100%) !important;
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.26), 0 20px 32px -18px rgba(15, 23, 42, 0.45);
}

@keyframes bookmarkGlow {
    0% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.35), 0 26px 38px -16px rgba(15, 23, 42, 0.5);
    }
    60% {
        box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.22), 0 20px 32px -18px rgba(15, 23, 42, 0.35);
    }
    100% {
        box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2);
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
}

.animate-slideUp {
    animation: slideUp 0.3s ease-out;
}

/* Commentary Styling */
.commentary-item {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.1);
}

.commentary-item:hover {
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}

.commentary-source {
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 0.75rem;
    font-size: 1.1em;
}

.commentary-text {
    color: #1e3a8a;
    line-height: 1.8;
    font-size: 1rem;
}

/* Definition Styling */
.definition-container {
    padding: 2rem;
    background: #eff6ff;
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
}

.definition-word {
    font-weight: 700;
    color: #1e40af;
    font-size: 1.3em;
    margin-bottom: 0.75rem;
}

.definition-text {
    color: #1e3a8a;
    line-height: 1.8;
    font-size: 1rem;
}

/* ========================================
   SEFARIA DICTIONARY LAYOUT
   Classic serif, hierarchical, print-style
   ======================================== */

.sefaria-dict {
    font-family: 'EB Garamond', 'Garamond', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    background: #faf9f4;
    color: #000;
    padding: 1.6rem 1.8rem 1.4rem;
    border-radius: 6px;
    border: 1px solid #e5e0d0;
    line-height: 1.55;
    font-size: 0.97rem;
    margin-bottom: 1.25rem;
}

.sefaria-dict:last-child {
    margin-bottom: 0;
}

.sdict-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.15rem;
}

.sdict-headword {
    font-size: 1.45rem;
    font-weight: 700;
    direction: rtl;
    unicode-bidi: embed;
    line-height: 1.2;
}

.sdict-pos {
    font-size: 0.92rem;
    color: #111;
}

.sdict-lang {
    font-size: 0.88rem;
    color: #555;
    margin-left: 0.55rem;
    font-style: italic;
}

.sdict-translit {
    font-size: 0.92rem;
    color: #444;
    font-style: italic;
    margin-left: 0.4rem;
    letter-spacing: 0.01em;
}

.sdict-source {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid #e5e0d0;
    padding-bottom: 0.5rem;
}

.sdict-senses {
    list-style-type: decimal;
    margin: 0;
    padding: 0;
}

.sdict-senses--l1 {
    padding-left: 1.4rem;
}

.sdict-senses--l2 {
    padding-left: 1.6rem;
    margin-top: 0.25rem;
}

.sdict-senses--l3 {
    padding-left: 1.6rem;
    margin-top: 0.15rem;
}

.sdict-sense {
    line-height: 1.6;
}

.sdict-sense--l1 {
    margin-bottom: 0.55rem;
}

.sdict-sense--l2 {
    margin-bottom: 0.3rem;
    color: #111;
}

.sdict-sense--l3 {
    margin-bottom: 0.15rem;
    color: #222;
}

.sdict-no-result {
    font-style: italic;
    color: #666;
    padding: 0.5rem 0;
}

.sdict-kjv {
    font-size: 0.82rem;
    color: #777;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid #e5e0d0;
    line-height: 1.5;
    font-style: italic;
}

/* Word header — highlighted word + transliteration shown at top of panel */
.sdict-word-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1.1rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #e2e8f0;
}

.sdict-word-display {
    font-family: 'EB Garamond', 'Garamond', Palatino, Georgia, serif;
    font-size: 1.75rem;
    font-weight: 700;
    direction: rtl;
    unicode-bidi: embed;
    color: #0f172a;
    line-height: 1.2;
}

.sdict-word-translit {
    font-family: 'EB Garamond', 'Garamond', Palatino, Georgia, serif;
    font-size: 1.05rem;
    font-style: italic;
    color: #475569;
}

/* "See other definitions" collapsible */
.sdict-other-wrap {
    margin-top: 0.9rem;
}

.sdict-other-toggle {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0;
    user-select: none;
}

.sdict-other-toggle::-webkit-details-marker { display: none; }

.sdict-other-toggle::before {
    content: '▸';
    font-size: 0.7rem;
    transition: transform 0.18s ease;
    display: inline-block;
}

.sdict-other-wrap[open] > .sdict-other-toggle::before {
    transform: rotate(90deg);
}

.sdict-other-entries {
    margin-top: 0.6rem;
}

.sdict-other-entries .sefaria-dict {
    background: #f5f3ec;
    border-color: #ddd8c8;
    margin-bottom: 0.75rem;
}

.sdict-other-entries .sefaria-dict:last-child {
    margin-bottom: 0;
}

/* ========================================
   COMMENT PANEL STYLES
   ======================================== */

/* ── Comment Panel Overlay ── */
#comment-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 40, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#comment-overlay.visible {
    opacity: 1;
}

#comment-overlay.hidden {
    display: none;
}

/* ── Comment Panel (slide-in drawer) ── */
.comment-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: calc(100vw - 2rem);
    max-width: 420px;
    height: 100%;
    background: #f8fafc;
    box-shadow: -8px 0 40px rgba(15, 23, 42, 0.18);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(148, 163, 184, 0.15);
}

.comment-panel.active {
    transform: translateX(0);
}

/* ── Panel Header ── */
.comment-panel-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    color: white;
    padding: 1.1rem 1.35rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border-bottom: none;
    flex-shrink: 0;
}

.comment-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.01em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.close-panel-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.close-panel-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ── Panel Body ── */
.comment-panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Username Setup Section ── */
.username-setup {
    background: #f0f4ff;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid #e2e8f0;
}

.username-setup.hidden {
    display: none;
}

.username-prompt {
    color: #334155;
    font-weight: 600;
    margin-bottom: 0.6rem;
    font-size: 0.82rem;
}

.username-input-group {
    display: flex;
    gap: 0.4rem;
}

.username-input {
    flex: 1;
    padding: 0.5rem 0.7rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #1e293b;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.username-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.save-username-btn {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.save-username-btn:hover {
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

/* ── Username Display ── */
.username-display {
    background: #f8fafc;
    padding: 0.6rem 1.15rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.username-display.hidden {
    display: none;
}

.username-label {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 500;
}

.current-username {
    color: #334155;
    font-weight: 700;
    font-size: 0.82rem;
}

/* ── Comments List ── */
.comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    scroll-behavior: smooth;
}

.comments-list::-webkit-scrollbar { width: 4px; }
.comments-list::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.2);
    border-radius: 999px;
}

.loading-comments {
    text-align: center;
    color: #94a3b8;
    padding: 2.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.no-comments {
    text-align: center;
    color: #94a3b8;
    padding: 2.5rem 1rem;
}

.no-comments p {
    margin-bottom: 0.25rem;
}

.no-comments p:first-child {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
}

.no-comments .text-sm {
    font-size: 0.78rem;
    color: #94a3b8;
}

/* ── Comment Item ── */
.comment-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.65rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.15s, border-color 0.15s;
}

.comment-item:hover {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
    border-color: #cbd5e1;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.comment-user {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.82rem;
}

.comment-time {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 500;
}

.comment-text {
    color: #334155;
    line-height: 1.6;
    font-size: 0.88rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ── Add Comment Section ── */
.add-comment-section {
    padding: 0.85rem 1rem;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.add-comment-section textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.88rem;
    resize: none;
    min-height: 68px;
    color: #1e293b;
    background: #f8fafc;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    line-height: 1.5;
}

.add-comment-section textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
    background: #fff;
}

.add-comment-section textarea::placeholder {
    color: #94a3b8;
}

.add-comment-section textarea:disabled {
    background: #f1f5f9;
    cursor: not-allowed;
    opacity: 0.7;
}

.submit-comment-btn {
    width: 100%;
    margin-top: 0.55rem;
    padding: 0.65rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.18s;
    letter-spacing: 0.01em;
}

.submit-comment-btn:hover:not(:disabled) {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
    transform: translateY(-1px);
}

.submit-comment-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.comment-status {
    margin-top: 0.4rem;
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    font-size: 0.78rem;
    text-align: center;
    font-weight: 600;
}

.comment-status.success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.comment-status.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Authentication Modal Layout */
#login-modal,
#reset-password-modal {
    padding: clamp(1.5rem, 4vw, 3rem);
}

#login-modal > div,
#reset-password-modal > div {
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
}

/* ============================================
   Info Panel / Commentary Modal — Clean & Modern
   ============================================ */

.info-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    background: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0px);
    transition: background 0.25s ease, backdrop-filter 0.25s ease;
}

.info-panel-overlay.is-visible {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
}

.info-panel-dialog {
    width: 100%;
    max-width: 56rem;
    max-height: 88vh;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.3),
                0 0 0 1px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.info-panel-overlay.is-visible .info-panel-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.info-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfd;
    flex-shrink: 0;
}

.info-panel-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin: 0;
}

.info-panel-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.info-panel-close:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

.info-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.info-panel-body::-webkit-scrollbar {
    width: 6px;
}

.info-panel-body::-webkit-scrollbar-track {
    background: transparent;
}

.info-panel-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.info-panel-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

#info-content p {
    margin-bottom: 1.1rem;
    line-height: 1.8;
    color: #1e293b;
    font-size: 0.95rem;
}

#info-content p:last-child {
    margin-bottom: 0;
}

#info-content.info-content-bookmarks {
    padding-top: 0.25rem;
}

/* Significance sections inside commentary */
#info-content .sig-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin-bottom: 0.85rem;
}

#info-content .sig-section:last-child {
    margin-bottom: 0;
}

#info-content .sig-section-label {
    margin-bottom: 0.35rem;
}

#info-content .sig-section-text {
    color: #1e293b;
    font-size: 0.95rem;
    line-height: 1.75;
}

#info-content .sig-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.07em;
    font-size: 0.72rem;
    padding: 0.15rem 0.6rem;
    border-radius: 6px;
    background: #e0edff;
    color: #1d4ed8;
    margin-right: 0.4rem;
}

#info-content .sig-label::after {
    content: ':';
    font-weight: 700;
    margin-left: 0.05rem;
}

#info-content .sig-label-name {
    background: #fef3c7;
    color: #92400e;
}

#info-content .sig-label-context {
    background: #cffafe;
    color: #0e7490;
}

#info-content .sig-label-summary {
    background: #ede9fe;
    color: #5b21b6;
}

#info-content .sig-label-core {
    background: #dbeafe;
    color: #1e3a8a;
}

#info-content .sig-label-takeaway {
    background: #dcfce7;
    color: #166534;
}

/* Read-More Toggle for Reflections */
.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more-btn {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-top: -0.15rem;
    transition: color 0.15s ease;
}

.read-more-btn:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Info Panel responsive */
@media (max-width: 768px) {
    .info-panel-overlay {
        padding: 0.75rem;
        align-items: center;
        justify-content: center;
    }

    .info-panel-dialog {
        max-height: 80vh;
        max-height: 80dvh;
        border-radius: 16px;
        transform: translateY(16px) scale(0.96);
        box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.35),
                    0 0 0 1px rgba(15, 23, 42, 0.08);
    }

    .info-panel-overlay.is-visible .info-panel-dialog {
        transform: translateY(0) scale(1);
    }

    .info-panel-header {
        padding: 0.85rem 1rem;
    }

    .info-panel-body {
        padding: 1rem;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .info-panel-title {
        font-size: 0.95rem;
    }

    .info-panel-close {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    #login-modal,
    #reset-password-modal {
        padding: 1.25rem;
    }

    #login-modal > div,
    #reset-password-modal > div {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .info-panel-overlay {
        padding: 0.5rem;
    }

    .info-panel-dialog {
        max-height: 78vh;
        max-height: 78dvh;
    }

    .info-panel-header {
        padding: 0.75rem 0.9rem;
    }

    .info-panel-body {
        padding: 0.85rem;
    }

    #login-modal,
    #reset-password-modal {
        padding: 1rem;
    }
}

/* Main Content Mobile Spacing */
@media (max-width: 768px) {
    main.container {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    #content-area {
        padding: 1.25rem !important;
    }

    #parsha-title {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    #parsha-reference {
        font-size: 1rem !important;
        margin-bottom: 1.25rem !important;
    }
}

@media (max-width: 640px) {
    main.container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #content-area {
        padding: 1rem !important;
        border-radius: 8px;
    }

    #parsha-title {
        font-size: 1.35rem !important;
        line-height: 1.3;
    }

    #parsha-reference {
        font-size: 0.95rem !important;
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 480px) {
    main.container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    #content-area {
        padding: 0.875rem !important;
    }

    #parsha-title {
        font-size: 1.25rem !important;
    }

    #parsha-reference {
        font-size: 0.9rem !important;
    }
}

/* ========================================
   MOBILE RESPONSIVE - COMPREHENSIVE
   ======================================== */

/* Header Mobile Optimizations */
/* PROFESSIONAL RESPONSIVE HEADER CSS */

/* Base Header Styling */
.header-main {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    background: linear-gradient(135deg, #152046 0%, #1e3794 50%, #1e3794 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 20px rgba(10, 20, 50, 0.4);
    padding-bottom: 0;
}

.header-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.7rem 1.5rem;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.header-branding-section {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding-left: 0;
}

.header-branding-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.3s ease;
    padding: 0.2rem 0;
    text-align: left;
    width: auto;
    max-width: 100%;
}

.header-branding-button:hover {
    opacity: 0.85;
}

.header-branding-button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 4px;
    border-radius: 4px;
}

.header-branding-button:active {
    opacity: 0.8;
}

.header-logo {
    display: block;
    height: 2.59em;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    transition: opacity 0.25s;
}

.header-logo-shabbat {
    display: none;
}

.header-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 0 1 auto;
}

.header-title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-size: clamp(1.2rem, 1.8vw, 1.4rem) !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    margin: 0;
    color: #ffffff;
    text-shadow: none;
    letter-spacing: 0.02em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.68rem !important;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    line-height: 1.25 !important;
    max-width: 55ch;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
    text-shadow: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.header-actions-wrapper {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: visible;
}

.header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    width: auto;
    max-width: 100%;
    justify-content: flex-end;
    align-items: center;
    overflow: visible;
}

.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    line-height: 1.3;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
}

.header-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 1.5px;
    background: #ffffff;
    border-radius: 1px;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.header-btn:hover {
    color: #ffffff;
}

.header-btn:hover::after {
    width: 100%;
}

.header-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 4px;
    border-radius: 2px;
}

.header-btn-primary {
    color: #ffffff;
    font-weight: 500;
}

.header-btn-primary::after {
    width: 4px;
    height: 4px;
    bottom: -6px;
    background: #ffffff;
    border-radius: 50%;
}

.header-btn-primary:hover::after {
    width: 4px;
    height: 4px;
}

.header-btn-secondary {
    color: rgba(255, 255, 255, 0.7);
}

.header-btn-secondary:hover {
    color: #ffffff;
}

.header-btn-text {
    display: inline;
    white-space: nowrap;
    text-align: center;
}

@media (max-width: 768px) {
    .header-logo-default,
    .header-logo-shabbat {
        display: none;
    }

    .header-container {
        flex-direction: column;
        gap: 0.6rem;
        padding: 0.7rem 1rem;
    }

    .header-title {
        font-size: 1.1rem;
    }

    .header-subtitle {
        font-size: 0.6rem;
        line-height: 1.2;
    }

    .header-actions-wrapper {
        width: 100%;
        justify-content: center;
    }

    .header-actions {
        width: 100%;
        justify-content: center;
        gap: 18px;
    }

    .header-btn {
        font-size: 0.72rem;
        padding: 0.25rem 0;
    }
}

@media (min-width: 768px) {
    .header-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .header-actions-wrapper {
        flex: 1 1 auto;
        display: flex;
        justify-content: flex-end;
    }

    .header-actions {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 24px;
        width: auto;
    }
}

@media (min-width: 1024px) {
    .header-actions {
        gap: 28px;
    }

    .header-btn {
        font-size: 0.82rem;
        padding: 0.3rem 0;
    }
}

.nav-desktop {
    display: none;
}

.nav-mobile {
    display: block;
}

@media (min-width: 720px) {
    .nav-desktop {
        display: flex;
    }

    .nav-mobile {
        display: none;
    }
}

/* Navigation Mobile Optimizations */
@media (max-width: 768px) {
    nav {
        padding: 0.75rem 0 !important;
    }

    nav .container {
        padding: 0.75rem 1rem !important;
    }

    nav label {
        font-size: 0.875rem !important;
    }

    nav select {
        font-size: 0.875rem !important;
        padding: 0.625rem 2.5rem 0.625rem 0.75rem !important;
    }

    nav button {
        font-size: 0.875rem !important;
        padding: 0.625rem 0.875rem !important;
    }
}

@media (max-width: 640px) {
    nav .container {
        padding: 0.625rem 0.75rem !important;
    }

    nav label {
        font-size: 0.8rem !important;
    }

    nav select {
        font-size: 0.8rem !important;
        padding: 0.5rem 2.25rem 0.5rem 0.625rem !important;
    }

    nav button {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    nav button svg {
        width: 1rem;
        height: 1rem;
    }
}

@media (max-width: 480px) {
    nav .container {
        padding: 0.5rem 0.625rem !important;
    }

    nav select {
        font-size: 0.75rem !important;
    }

    nav button {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.625rem !important;
    }
}

/* Tablet and Below - 768px */
@media (max-width: 768px) {
    /* Full-width comment panel on mobile */
    .comment-panel {
        width: 100%;
        right: -100%;
    }

    /* Better verse container spacing */
    .verse-container {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    /* Optimized typography for tablets */
    [lang="he"] {
        font-size: 1.19rem !important; /* Still 4px larger than mobile English */
        line-height: 1.8;
    }

    .english-text {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    /* Adjusted verse numbers */
    .verse-number {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    /* Chapter headers */
    .chapter-header {
        font-size: 1.35rem;
        margin: 4rem 0 2rem 0;
        padding: 1.25rem 1.5rem;
    }

    /* Commentary and info panels */
    .commentary-item {
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }

    /* Definition containers */
    .definition-container {
        padding: 1.5rem;
    }
}

/* Double parsha responsive - Tablet */
@media (max-width: 768px) {
    .double-parsha-banner {
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }

    .double-parsha-banner__text {
        font-size: 0.875rem;
    }

    .double-parsha-section-header {
        font-size: 1.2rem;
        padding: 0.75rem 1rem;
    }

    .double-parsha-divider {
        margin: 5rem 0 2.5rem 0;
    }

    .double-parsha-divider__label {
        font-size: 1.2rem;
        padding: 0.625rem 1.5rem;
    }
}

/* Small Mobile Devices - 640px and Below */
@media (max-width: 640px) {
    /* Better body padding on small screens */
    body {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .double-parsha-banner {
        flex-direction: column;
        text-align: center;
        padding: 0.75rem;
    }

    .double-parsha-banner__text {
        font-size: 0.8rem;
    }

    .double-parsha-section-header {
        font-size: 1.1rem;
        padding: 0.625rem 0.75rem;
    }

    .double-parsha-divider {
        margin: 4rem 0 2rem 0;
    }

    .double-parsha-divider__label {
        font-size: 1.1rem;
        padding: 0.5rem 1rem;
    }

    /* Optimized verse containers for small screens */
    .verse-container {
        padding: 0.875rem;
        margin-bottom: 0.875rem;
        border-radius: 6px;
    }

    /* Content wrapper adjustments */
    .verse-content-wrapper {
        gap: 0.75rem;
    }

    /* Smaller verse numbers on mobile */
    .verse-number {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.95rem;
        border-radius: 6px;
    }

    /* Mobile-optimized text sizes */
    [lang="he"] {
        font-size: 1.15rem !important;
        line-height: 1.85;
        padding: 0.375rem 0;
    }

    .english-text {
        font-size: 0.9rem;
        line-height: 1.65;
    }

    /* Chapter headers for small mobile */
    .chapter-header {
        font-size: 1.2rem;
        margin: 3rem 0 1.5rem 0;
        padding: 1rem 1.25rem;
    }

    .chapter-header::before {
        top: -1.75rem;
        width: 70%;
    }

    /* Indicators and badges */
    .verse-indicators {
        gap: 0.375rem;
        margin-top: 0.625rem;
        padding-top: 0.625rem;
    }

    .content-indicator {
        padding: 0.3rem 0.625rem;
        font-size: 0.8rem;
        gap: 0.2rem;
    }

    .comment-count-badge {
        padding: 0.3rem 0.625rem;
        font-size: 0.8rem;
    }

    /* Reaction buttons for mobile */
    .verse-reactions {
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .reaction-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
        gap: 0.3rem;
    }

    .reaction-icon {
        font-size: 0.85rem;
        width: 1rem;
    }

    .reaction-count {
        font-size: 0.7rem;
        padding: 0.1rem 0.375rem;
        min-width: 1.35rem;
    }

    /* Touch-friendly keyword styling */
    .keyword {
        padding: 3px 7px;
        border-radius: 4px;
    }

    /* Commentary styling for mobile */
    .commentary-item {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 6px;
    }

    .commentary-source {
        font-size: 1rem;
        margin-bottom: 0.625rem;
    }

    .commentary-text {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    /* Definition containers */
    .definition-container {
        padding: 1.25rem;
        border-radius: 6px;
    }

    .definition-word {
        font-size: 1.15em;
        margin-bottom: 0.625rem;
    }

    .definition-text {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    /* Comment panel optimizations */
    .comment-panel-header {
        padding: 1rem;
    }

    .comment-panel-title {
        font-size: 1.1rem;
    }

    .close-panel-btn {
        font-size: 1.75rem;
        width: 28px;
        height: 28px;
    }

    .comments-list {
        padding: 0.75rem;
    }

    .comment-item {
        padding: 0.875rem;
        margin-bottom: 0.875rem;
        border-radius: 5px;
    }

    .comment-user {
        font-size: 0.85rem;
    }

    .comment-time {
        font-size: 0.7rem;
    }

    .comment-text {
        font-size: 0.875rem;
        line-height: 1.55;
    }

    .add-comment-section {
        padding: 0.875rem;
    }
}

/* Mitzvah Reflection Reactions */
.mitzvah-message-reactions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.mitzvah-message-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
    color: #4b5563;
}

.mitzvah-message-reaction-btn:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.mitzvah-message-reaction-btn.active {
    background-color: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
    font-weight: 600;
}

.mitzvah-reaction-icon {
    font-size: 1rem;
}

.mitzvah-reaction-count {
    min-width: 1rem;
    text-align: center;
}

    .add-comment-section textarea {
        padding: 0.625rem;
        font-size: 0.875rem;
        min-height: 70px;
        border-radius: 5px;
    }

    .submit-comment-btn {
        margin-top: 0.625rem;
        padding: 0.625rem;
        font-size: 0.875rem;
        border-radius: 5px;
    }

    .username-setup {
        padding: 0.875rem;
    }

    .username-input {
        padding: 0.5rem;
        font-size: 0.875rem;
        border-radius: 4px;
    }

    .save-username-btn {
        padding: 0.5rem 0.875rem;
        font-size: 0.875rem;
        border-radius: 4px;
    }

    .username-display {
        padding: 0.625rem 0.875rem;
    }

    .username-label {
        font-size: 0.8rem;
    }

    .current-username {
        font-size: 0.875rem;
    }
}

/* Extra Small Mobile - 480px and Below */
@media (max-width: 480px) {
    /* Even tighter spacing for very small screens */
    .verse-container {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .verse-content-wrapper {
        gap: 0.625rem;
    }

    /* Compact verse numbers */
    .verse-number {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
        border-radius: 5px;
    }

    /* Very small screen text optimization */
    [lang="he"] {
        font-size: 1.1rem !important;
        line-height: 1.8;
    }

    .english-text {
        font-size: 0.875rem;
        line-height: 1.6;
    }

    /* Compact chapter headers */
    .chapter-header {
        font-size: 1.1rem;
        margin: 2.5rem 0 1.25rem 0;
        padding: 0.875rem 1rem;
    }

    /* Smaller indicators */
    .content-indicator {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .comment-count-badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Compact reactions */
    .reaction-btn {
        padding: 0.35rem 0.625rem;
        font-size: 0.75rem;
    }

    .reaction-icon {
        font-size: 0.8rem;
    }

    .reaction-count {
        font-size: 0.65rem;
        padding: 0.075rem 0.3rem;
    }

    /* Commentary adjustments */
    .commentary-item {
        padding: 0.875rem;
        margin-bottom: 0.875rem;
    }

    .commentary-source {
        font-size: 0.95rem;
    }

    .commentary-text {
        font-size: 0.875rem;
    }

    /* Definition adjustments */
    .definition-container {
        padding: 1rem;
    }

    .definition-word {
        font-size: 1.05em;
    }

    .definition-text {
        font-size: 0.875rem;
    }
}

/* Very Small Screens - 375px and Below (iPhone SE, etc.) */
@media (max-width: 375px) {
    /* Ultra-compact for smallest devices */
    .verse-container {
        padding: 0.625rem;
        margin-bottom: 0.625rem;
    }

    .verse-number {
        width: 1.875rem;
        height: 1.875rem;
        font-size: 0.8rem;
    }

    [lang="he"] {
        font-size: 1.05rem !important;
    }

    .english-text {
        font-size: 0.85rem;
    }

    .chapter-header {
        font-size: 1rem;
        padding: 0.75rem 0.875rem;
        margin: 2rem 0 1rem 0;
    }

    .reaction-btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.7rem;
    }

    .content-indicator,
    .comment-count-badge {
        padding: 0.2rem 0.4rem;
        font-size: 0.7rem;
    }
}

/* Landscape Mode Optimizations for Mobile */
@media (max-width: 896px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    header .container {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    nav .container {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .verse-container {
        margin-bottom: 0.75rem;
    }

    .chapter-header {
        margin-top: 2rem;
        margin-bottom: 1.25rem;
        padding: 0.75rem 1rem;
    }

    main.container {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* Make comment panel narrower in landscape */
    .comment-panel {
        width: calc(100vw - 3rem);
        max-width: 320px;
        right: -340px;
    }

    .comment-panel.active {
        right: 0;
    }
}

/* Very narrow landscape screens (phones) */
@media (max-width: 667px) and (orientation: landscape) {
    .comment-panel {
        width: calc(100vw - 2.5rem);
        max-width: 300px;
        right: -320px;
    }

    header h1 {
        font-size: 1.15rem !important;
    }

    header p {
        display: none; /* Hide subtitle in narrow landscape */
    }

    header img {
        height: 2.25rem !important;
        width: 2.25rem !important;
    }

    .verse-number {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }
}

/* Loading and Error Messages Mobile Optimization */
@media (max-width: 640px) {
    #loading-message {
        padding: 2rem 1rem !important;
        font-size: 0.875rem;
    }

    #loading-message .h-8.w-8 {
        height: 1.75rem !important;
        width: 1.75rem !important;
    }

    #error-message {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem;
        border-radius: 6px;
    }

    #error-message strong {
        font-size: 0.875rem;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #93c5fd;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #60a5fa;
}

/* Thin scrollbar for mobile */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 6px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
    }
}

/* Print Styles */
@media print {
    header, nav, #info-panel, #go-to-weekly, .comment-panel, #comment-overlay, .verse-indicators, .chapter-header::before {
        display: none !important;
    }
    
    .verse-container {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #e5e7eb;
    }

    body {
        background: white;
    }
}

/* Accessibility Focus Styles */
*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Loading Animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Pulse Animation */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Utility Classes for Multiple Definitions */
.mb-4 {
    margin-bottom: 1.5rem;
}

/* ========================================
   TEXT SIZE CONTROL WIDGET - SUBTLE VERSION
   ======================================== */

/* Text Size Adjustment Classes - ONLY affects Torah verses */
body.torah-text-size-small #parsha-text .hebrew-text {
    font-size: 1.05rem !important;
    line-height: 1.75;
}

body.torah-text-size-small #parsha-text .english-text {
    font-size: 0.85rem !important;
    line-height: 1.6;
}

body.torah-text-size-medium #parsha-text .hebrew-text {
    font-size: 1.29rem !important; /* Default */
    line-height: 1.9;
}

body.torah-text-size-medium #parsha-text .english-text {
    font-size: 1.05rem !important; /* Default */
    line-height: 1.8;
}

body.torah-text-size-large #parsha-text .hebrew-text {
    font-size: 1.5rem !important;
    line-height: 2.0;
}

body.torah-text-size-large #parsha-text .english-text {
    font-size: 1.2rem !important;
    line-height: 1.9;
}

body.torah-text-size-xlarge #parsha-text .hebrew-text {
    font-size: 1.7rem !important;
    line-height: 2.1;
}

body.torah-text-size-xlarge #parsha-text .english-text {
    font-size: 1.35rem !important;
    line-height: 2.0;
}

/* Text Size Control Widget - Compact Header Button */
.text-size-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 100;
}

.text-size-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1e3a5f;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(30, 58, 95, 0.25);
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(6px);
}

.text-size-toggle:hover,
.text-size-toggle:focus-visible {
    background: rgba(30, 58, 95, 0.12);
    border-color: rgba(30, 58, 95, 0.35);
    color: #0f2844;
}

.text-size-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(191, 219, 254, 0.6);
}

.text-size-icon {
    display: inline-flex;
    align-items: baseline;
    gap: 0.18rem;
}

.text-size-icon span:first-child {
    font-size: 0.75rem;
    line-height: 1;
}

.text-size-icon span:last-child {
    font-size: 1rem;
    line-height: 1;
}

.text-size-toggle-label {
    display: none;
    opacity: 0.85;
}

.text-size-caret {
    width: 0.65rem;
    height: 0.65rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.7;
}

.text-size-control.open .text-size-caret {
    transform: rotate(180deg);
    opacity: 0.9;
}

.text-size-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 10rem;
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 40px -15px rgba(15, 23, 42, 0.45);
    padding: 0.35rem 0.35rem 0.4rem;
    z-index: 9999;
    display: none;
}

.text-size-control.open .text-size-menu {
    display: block;
}

.text-size-menu::before {
    content: '';
    position: absolute;
    top: -0.4rem;
    right: 1.4rem;
    width: 0.8rem;
    height: 0.8rem;
    background: #ffffff;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    transform: rotate(45deg);
    z-index: 0;
}

.text-size-menu .text-size-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.6rem;
    border-radius: 0.55rem;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d4ed8;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.text-size-menu .text-size-btn:hover {
    background: rgba(59, 130, 246, 0.12);
    color: #1e40af;
}

.text-size-menu .text-size-btn.active {
    background: rgba(59, 130, 246, 0.18);
    color: #1e3a8a;
}

.text-size-option-note {
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.02em;
}

.text-size-btn[data-size="torah-text-size-small"] .text-size-option-note {
    font-size: 0.68rem;
}

.text-size-btn[data-size="torah-text-size-medium"] .text-size-option-note {
    font-size: 0.78rem;
}

.text-size-btn[data-size="torah-text-size-large"] .text-size-option-note {
    font-size: 0.92rem;
}

.text-size-btn[data-size="torah-text-size-xlarge"] .text-size-option-note {
    font-size: 1.05rem;
}

.text-size-control-fallback {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

@media (min-width: 768px) {
    .text-size-control-fallback {
        margin-top: 0;
    }
}

@media (min-width: 640px) {
    .text-size-toggle-label {
        display: inline;
    }
}

@media (max-width: 768px) {
    .text-size-menu {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .text-size-menu::before {
        right: auto;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
    }
}

/* ========================================
   USER STATUS HEADER BAR STYLES
   ======================================== */

/* Community status bar — smooth reveal to prevent layout shift.
   Override Tailwind's .hidden (display:none) so we can transition height. */
#community-status-bar {
    display: block !important;       /* always in flow — never display:none */
    max-height: 0;
    min-height: 0;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    z-index: 40;
    position: relative;
    opacity: 0;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out, opacity 0.25s ease-out;
}

#community-status-bar:not(.hidden) {
    min-height: 38px;
    max-height: 60px;
    padding: 0.3rem 0 !important;
    opacity: 1;
    overflow-x: clip;
    overflow-y: visible;
}

#community-status-bar .container {
    padding: 0 !important;
    min-height: 38px;
    overflow-x: clip;
    overflow-y: visible;
}

/* Loading skeleton for presence bar */
.presence-loading-skeleton {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem;
}
.presence-skeleton-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.35);
    animation: presencePulse 1.4s ease-in-out infinite;
}
.presence-skeleton-bar {
    width: 56px;
    height: 10px;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.2);
    animation: presencePulse 1.4s ease-in-out 0.15s infinite;
}
.presence-skeleton-bar--short {
    width: 36px;
    animation-delay: 0.3s;
}
@keyframes presencePulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

#community-status-content {
    gap: 0.65rem !important;
    font-size: 0.68rem;
    align-items: center;
    flex-wrap: wrap;
    min-height: 38px;
    padding: 0.35rem 1.25rem;
    overflow-x: clip;
    overflow-y: visible;
    width: 100%;
}

.status-leading-dot {
    width: 0.3rem;
    height: 0.3rem;
    flex-shrink: 0;
}

#community-status-content .text-xs,
#community-status-content .text-sm {
    font-size: 0.62rem;
}

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

/* Online user badges - beautiful green pill style */
#header-online-users-list span[class*="bg-green"] {
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-flex;
    align-items: center;
}

.status-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(15, 23, 42, 0.14);
}

.status-tooltip {
    position: relative;
    cursor: default;
}

.status-tooltip::after,
.status-tooltip::before {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.status-tooltip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translate(-50%, 8px);
    background: linear-gradient(135deg, rgba(24, 35, 52, 0.95) 0%, rgba(12, 19, 33, 0.95) 100%);
    color: #f8fafc;
    padding: 0.65rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: normal;
    max-width: min(320px, calc(100vw - 48px));
    min-width: 220px;
    text-align: left;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.32);
    z-index: 1000;
    letter-spacing: 0.18px;
    line-height: 1.45;
    pointer-events: none;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.status-tooltip[data-tooltip]::before {
    content: '';
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translate(-50%, 0);
    border-width: 7px;
    border-style: solid;
    border-color: rgba(24, 35, 52, 0.95) transparent transparent transparent;
    z-index: 999;
    pointer-events: none;
}

.status-tooltip[data-tooltip]:hover::after {
    opacity: 1;
    transform: translate(-50%, 2px);
}

.status-tooltip[data-tooltip]:hover::before {
    opacity: 1;
    transform: translate(-50%, 2px);
}

.status-tooltip[data-tooltip]:focus-visible::after,
.status-tooltip[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 2px);
}

.status-tooltip:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.8);
    outline-offset: 3px;
}

/* Interaction tooltips on reaction buttons (desktop only) */
.reaction-btn.status-tooltip[data-tooltip] {
    position: relative;
    z-index: 1;
}

/* Boost z-index of verse container when tooltip is active */
.verse-container:has(.reaction-btn.status-tooltip[data-tooltip]:hover) {
    z-index: 10001 !important;
    position: relative;
}

/* Only show tooltips on true hover devices (desktop) */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .reaction-btn.status-tooltip[data-tooltip]:hover::after {
        opacity: 1;
        transform: translate(-50%, 2px);
        white-space: pre-line; /* Preserve line breaks in tooltip */
        min-width: 240px;
        max-width: 320px;
        z-index: 10000; /* Very high z-index to appear above all verses */
    }

    .reaction-btn.status-tooltip[data-tooltip]:hover::before {
        opacity: 1;
        transform: translate(-50%, 2px);
        z-index: 9999; /* Arrow just below tooltip */
    }

    /* Left-aligned tooltips (for buttons near left edge) */
    .reaction-btn.status-tooltip.tooltip-align-left[data-tooltip]:hover::after {
        left: 0;
        transform: translateY(2px);
    }

    .reaction-btn.status-tooltip.tooltip-align-left[data-tooltip]:hover::before {
        left: 20px;
        transform: translateY(2px);
    }

    /* Right-aligned tooltips (for buttons near right edge) */
    .reaction-btn.status-tooltip.tooltip-align-right[data-tooltip]:hover::after {
        left: auto;
        right: 0;
        transform: translateY(2px);
    }

    .reaction-btn.status-tooltip.tooltip-align-right[data-tooltip]:hover::before {
        left: auto;
        right: 20px;
        transform: translateY(2px);
    }
}

/* Disable tooltips entirely on touch/mobile devices */
@media (hover: none) or (pointer: coarse) {
    .reaction-btn.status-tooltip[data-tooltip]::after,
    .reaction-btn.status-tooltip[data-tooltip]::before {
        display: none !important;
    }
}

/* Loading state styling */
.reaction-btn.status-tooltip.loading {
    cursor: wait;
}

.status-scroll {
    flex-wrap: nowrap;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
    padding: 0.22rem 0; /* extra breathing room to avoid clipping shadows */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}

.status-scroll::-webkit-scrollbar {
    height: 6px;
}

.status-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.status-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
}

/* Smooth transitions for status text */
#header-your-status {
    transition: opacity 0.2s ease;
}

#header-your-status > .text-xs:first-child {
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

#header-your-username {
    white-space: nowrap;
    font-weight: 700;
    color: #1e40af;
    background: rgba(59, 130, 246, 0.08);
    padding: 0.3rem 0.6rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.status-section {
    position: relative;
}

.status-section.status-section--with-divider::before {
    content: '•';
    color: #9ca3af;
    font-size: 0.75rem;
    margin-right: 0.5rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.32);
    color: #374151;
    font-weight: 600;
    font-size: 0.76rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    transition: all 0.25s ease;
    white-space: nowrap;
    height: fit-content;
    line-height: 1.25;
    position: relative;
    z-index: 25;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.status-badge--green {
    border-color: rgba(34, 197, 94, 0.55);
    color: #15803d;
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.95) 0%, rgba(220, 252, 231, 0.85) 100%);
}

.status-badge--green:hover {
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.96) 0%, rgba(220, 252, 231, 0.88) 100%);
    border-color: rgba(34, 197, 94, 0.65);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.12);
}

.status-badge--yellow {
    border-color: rgba(250, 204, 21, 0.45);
    color: #a16207;
    background: linear-gradient(135deg, rgba(255, 251, 235, 0.92) 0%, rgba(254, 243, 199, 0.82) 100%);
}

.status-badge--yellow:hover {
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.95) 0%, rgba(253, 224, 71, 0.85) 100%);
    border-color: rgba(250, 204, 21, 0.65);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.12);
}

.status-badge--gray {
    border-color: rgba(148, 163, 184, 0.35);
    color: #475569;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.8) 100%);
}

.status-badge--gray:hover {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.95) 0%, rgba(226, 232, 240, 0.85) 100%);
    border-color: rgba(148, 163, 184, 0.55);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(148, 163, 184, 0.08);
}

.status-dot {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    flex-shrink: 0;
    display: inline-block;
}

.status-dot--green {
    background-color: #22c55e;
}

.status-dot--yellow {
    background-color: #facc15;
}

.status-dot--gray {
    background-color: #94a3b8;
}

.status-dot--pulse {
    animation: statusPulse 1.3s ease-in-out infinite;
}

@keyframes statusPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.65;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.status-time {
    font-size: 0.65rem;
    font-weight: 500;
}

.status-text--green {
    color: #166534 !important;
}

.status-text--yellow {
    color: #b45309 !important;
}

.status-text--gray {
    color: #4b5563 !important;
}

/* Compact status text styling */
.status-time {
    display: inline;
    font-size: 0.6rem;
    font-weight: 500;
    margin-left: 0.15rem;
    opacity: 0.86;
}

#community-status-content .text-sm {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #1f2937;
    opacity: 0.78;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

#community-status-bar .status-badge {
    gap: 0.3rem;
    padding: 0.32rem 0.72rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    border-color: rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.86);
}

#community-status-bar .status-badge--green {
    border-color: rgba(34, 197, 94, 0.45);
    color: #166534;
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.98) 0%, rgba(187, 247, 208, 0.9) 100%);
}

#community-status-bar .status-badge--yellow {
    border-color: rgba(250, 204, 21, 0.48);
    color: #b45309;
    background: linear-gradient(135deg, rgba(255, 251, 235, 0.98) 0%, rgba(253, 224, 71, 0.88) 100%);
}

#community-status-bar .status-badge--gray {
    border-color: rgba(148, 163, 184, 0.4);
    color: #475569;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.98) 0%, rgba(226, 232, 240, 0.9) 100%);
}

#community-status-bar .status-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
}

#community-status-bar .status-dot {
    width: 0.3rem;
    height: 0.3rem;
}

#community-status-bar .status-time {
    font-size: 0.58rem;
    margin-left: 0.12rem;
}

#community-status-bar #header-your-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

#community-status-bar #header-your-status span {
    font-size: 0.6rem;
    line-height: 1.12;
}

#header-your-username {
    font-weight: 600;
    color: #1f2937;
    background: transparent;
    border: 0;
    padding: 0;
}

#header-your-login-time {
    font-weight: 500;
}

/* Better spacing for online users list */
#header-online-users-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    row-gap: 0.3rem;
    align-items: center;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    min-height: 1.8rem;
    padding: 0.2rem 0.18rem 0.24rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 0.18rem;
}

#header-online-concurrency {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: #1f2937;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.015em;
    white-space: nowrap;
    box-shadow: none;
    opacity: 0.78;
}

#header-online-concurrency::before {
    display: none;
}

#header-online-users-list .status-badge--presence {
    gap: 0.28rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #1f2937;
    font-weight: 600;
    font-size: 0.64rem;
    line-height: 1.08;
    box-shadow: none;
    backdrop-filter: blur(6px);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#header-online-users-list .status-badge--presence:hover {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(148, 163, 184, 0.38);
    transform: translateY(-1px);
    /* Keep hover emphasis without blur clipping inside scroll container */
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.14) !important;
}

#header-online-users-list .status-badge--presence.status-badge--green {
    border-color: rgba(34, 197, 94, 0.35);
    color: #166534;
    background: rgba(240, 253, 244, 0.6);
}

#header-online-users-list .status-badge--presence.status-badge--yellow {
    border-color: rgba(250, 204, 21, 0.35);
    color: #b45309;
    background: rgba(255, 251, 235, 0.6);
}

#header-online-users-list .status-badge--presence.status-badge--gray {
    border-color: rgba(148, 163, 184, 0.3);
    color: #475569;
    background: rgba(248, 250, 252, 0.6);
}

#header-online-users-list .status-badge--active {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(240, 253, 244, 0.75);
    box-shadow: 0 3px 8px rgba(34, 197, 94, 0.08);
}

.status-badge__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
    line-height: 1.14;
    min-width: 0;
}

.status-name--presence {
    font-size: 0.66rem;
    letter-spacing: 0.01em;
}

.status-time--detail {
    font-size: 0.58rem;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.65);
    letter-spacing: 0.01em;
    margin-left: 0;
    display: block;
    white-space: normal !important;
}

.status-dot--compact {
    width: 0.38rem;
    height: 0.38rem;
}

#header-online-users-list .status-dot--compact {
    margin-top: 0.06rem;
}

/* Status name styling - displays friend's name */
.status-name {
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    color: inherit;
}

/* Status time styling - subtle, minimal last login indicator */
.status-time {
    font-size: 0.62rem;
    font-weight: 500;
    margin-left: 0.2rem;
    opacity: 0.72;
    letter-spacing: 0.005em;
    color: inherit;
    display: inline;
    white-space: nowrap;
}

/* Enhance time display for better readability within badge */
.status-badge .status-time {
    opacity: 0.68;
    font-weight: 400;
    font-size: 0.61rem;
    letter-spacing: 0.01em;
}

/* Enhanced badge hover effects */
.status-badge {
    position: relative;
    cursor: default;
    outline: none;
}

.status-badge:hover {
    z-index: 30;
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.15);
}

/* Improve native tooltip visibility */
.status-badge[title] {
    /* Ensure tooltips show above other elements */
}

.status-badge[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 135%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(30, 41, 59, 0.96) 100%);
    color: #ffffff;
    padding: 0.65rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: normal;
    width: max-content;
    max-width: 300px;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.1) inset;
    line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    animation: tooltipFadeIn 0.25s ease-out;
    letter-spacing: 0.3px;
}

.status-badge[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 128%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(15, 23, 42, 0.97);
    z-index: 100;
    pointer-events: none;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Weekly Holiday Spotlight */
.weekly-holiday-box {
    position: relative;
    overflow: hidden;
    margin: 0 0 2rem;
    border-radius: 18px;
    border: 1px solid rgba(180, 83, 9, 0.22);
    background: linear-gradient(140deg, #fff7ed 0%, #fef3c7 55%, #fefce8 100%);
    box-shadow: 0 16px 38px rgba(146, 64, 14, 0.16);
}

.weekly-holiday-box__glow {
    position: absolute;
    top: -70px;
    right: -40px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.42) 0%, rgba(251, 191, 36, 0) 70%);
    pointer-events: none;
}

.weekly-holiday-box__content {
    position: relative;
    z-index: 1;
    padding: 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.weekly-holiday-box__eyebrow {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 800;
    color: #92400e;
}

.weekly-holiday-box__title {
    margin: 0;
    font-size: clamp(1.35rem, 2.3vw, 1.8rem);
    line-height: 1.2;
    font-weight: 800;
    color: #78350f;
}

.weekly-holiday-box__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.72;
    color: #451a03;
    max-width: 74ch;
}

.weekly-holiday-box__actions {
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
}

.weekly-holiday-box__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.15rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #b45309, #92400e);
    box-shadow: 0 12px 24px rgba(146, 64, 14, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.weekly-holiday-box__button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(146, 64, 14, 0.34);
}

.weekly-holiday-box__link {
    font-size: 0.92rem;
    font-weight: 650;
    color: #9a3412;
    text-decoration: none;
    border-bottom: 1px dashed rgba(154, 52, 18, 0.45);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.weekly-holiday-box__link:hover {
    color: #7c2d12;
    border-color: rgba(124, 45, 18, 0.75);
}

/* Weekly Mitzvah Challenge */
.mitzvah-challenge {
    margin-bottom: 2.5rem;
}

.mitzvah-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.97) 0%, rgba(246,250,255,0.95) 100%);
    border: 1px solid rgba(99,133,175,0.2);
    border-radius: 20px;
    padding: 1.5rem 1.6rem;
    box-shadow: 0 8px 36px rgba(15,30,60,0.1), 0 2px 8px rgba(15,30,60,0.06);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mitzvah-card__header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: background 0.18s ease;
    border-radius: 12px;
    padding: 0.4rem 0.5rem;
    margin: -0.4rem -0.5rem;
}

.mitzvah-card__header:hover {
    background-color: rgba(241,245,249,0.7);
}

/* ── Chavruta group switcher ── */
.mitzvah-chavruta-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(148,163,184,0.15);
    margin-bottom: 0.15rem;
}

.mitzvah-chavruta-tab {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #475569;
    background: rgba(241,245,249,0.9);
    border: 1px solid rgba(148,163,184,0.28);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.mitzvah-chavruta-tab:hover {
    background: rgba(224,232,240,0.9);
    color: #1e3a8a;
    border-color: rgba(99,133,175,0.35);
}

.mitzvah-chavruta-tab.active {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}

.mitzvah-toggle-icon {
    transition: transform 0.3s ease;
    color: #64748b;
    flex-shrink: 0;
}

.mitzvah-toggle-icon.expanded {
    transform: rotate(180deg);
}

.mitzvah-collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.mitzvah-card__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e3a8a;
    letter-spacing: -0.01em;
}

.mitzvah-card__mitzvah {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    border-radius: 14px;
    padding: 0.55rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.mitzvah-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.35;
}

.mitzvah-label__he {
    font-size: 1.08rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.01em;
}

.mitzvah-label__sub {
    font-size: 0.94rem;
    color: #334155;
    display: inline-flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    align-items: center;
}

.mitzvah-label__translit {
    font-weight: 600;
}

.mitzvah-label__eng {
    font-style: italic;
    opacity: 0.9;
}

.mitzvah-label__divider {
    font-size: 0.8rem;
    color: rgba(51, 65, 85, 0.65);
}

.mitzvah-card__body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.mitzvah-card--closed {
    border-color: rgba(148, 163, 184, 0.4);
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.75), rgba(255, 255, 255, 0.95));
}

.mitzvah-card--closed .mitzvah-card__countdown {
    color: #475569;
    background: rgba(148, 163, 184, 0.22);
    border-color: rgba(148, 163, 184, 0.32);
}

.mitzvah-card__section {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background: rgba(248, 250, 252, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-left: 3px solid rgba(37, 99, 235, 0.3);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}

.mitzvah-card__section-title {
    font-size: 0.72rem;
    font-weight: 800;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.mitzvah-card__text p {
    color: #1f2937;
    line-height: 1.6;
    font-size: 0.94rem;
    margin-bottom: 0.75rem;
}

.mitzvah-card__text p:last-child {
    margin-bottom: 0;
}

.mitzvah-card__divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0), rgba(148, 163, 184, 0.35), rgba(148, 163, 184, 0));
}

.mitzvah-card__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.mitzvah-card__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.mitzvah-card__countdown {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ea580c;
    background: rgba(234, 88, 12, 0.12);
    border: 1px solid rgba(234, 88, 12, 0.3);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mitzvah-card__countdown.is-closed {
    color: #475569;
    background: rgba(148, 163, 184, 0.22);
    border-color: rgba(148, 163, 184, 0.32);
}

.mitzvah-card__subheading {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.mitzvah-checklist {
    position: relative;
    background: linear-gradient(160deg, rgba(241, 245, 249, 0.94), rgba(255, 255, 255, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    padding: 1.1rem 1.3rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 14px 28px -26px rgba(15, 23, 42, 0.35);
    z-index: 0;
}

.mitzvah-checklist > * {
    position: relative;
    z-index: 1;
}

.mitzvah-checklist::before {
    content: "";
    position: absolute;
    top: 2.15rem;
    left: 1.35rem;
    right: 1.35rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.15), rgba(14, 165, 233, 0.25), rgba(37, 99, 235, 0.15));
    opacity: 0.7;
}

.mitzvah-checklist .mitzvah-card__subheading {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.58);
    margin-bottom: 0.35rem;
}

.mitzvah-checklist__label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.88);
    line-height: 1.45;
    padding-top: 0.75rem;
}

.mitzvah-checklist__input {
    width: 1rem;
    height: 1rem;
    border-radius: 0.3rem;
    border: 1.5px solid rgba(37, 99, 235, 0.45);
    accent-color: #2563eb;
    box-shadow: 0 2px 4px -3px rgba(15, 23, 42, 0.5);
}

.mitzvah-checklist__text {
    line-height: 1.45;
    letter-spacing: 0.01em;
}

.mitzvah-checklist__helper {
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(15, 23, 42, 0.62);
}

.mitzvah-checklist__helper[data-state='success'] {
    color: rgba(4, 120, 87, 0.78);
}

.mitzvah-checklist__helper[data-state='status'] {
    color: rgba(37, 99, 235, 0.78);
}

.mitzvah-checklist__helper[data-state='error'] {
    color: rgba(185, 28, 28, 0.82);
}

/* Compact Checklist - Integrated into chat */
.mitzvah-checklist-compact {
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.7), rgba(224, 242, 254, 0.5));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
}

.mitzvah-checklist__label-compact {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.8);
}

.mitzvah-checklist__text-compact {
    line-height: 1.4;
}

.mitzvah-checklist__helper-compact {
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(15, 23, 42, 0.65);
    margin-top: 0.4rem;
    margin-left: 1.6rem;
}

.mitzvah-checklist__helper-compact[data-state='success'] {
    color: rgba(4, 120, 87, 0.85);
}

.mitzvah-checklist__helper-compact[data-state='status'] {
    color: rgba(37, 99, 235, 0.85);
}

.mitzvah-checklist__helper-compact[data-state='error'] {
    color: rgba(185, 28, 28, 0.9);
    font-weight: 500;
}

.mitzvah-chat {
    background: linear-gradient(160deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.mitzvah-chat__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.mitzvah-chat__auth {
    font-size: 0.82rem;
    color: #0f172a;
    opacity: 0.7;
    margin: 0;
}

.mitzvah-chat__messages {
    max-height: 260px;
    overflow-y: auto;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.2);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.mitzvah-chat-empty {
    margin: 0;
    color: rgba(15, 23, 42, 0.6);
    font-size: 0.9rem;
    text-align: center;
}

.mitzvah-chat-message {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.mitzvah-chat-message--self {
    background: rgba(239, 246, 255, 0.9);
    border-color: rgba(59, 130, 246, 0.25);
}

.mitzvah-chat-message__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.82rem;
    color: #1f2937;
    font-weight: 600;
}

.mitzvah-chat-message__time {
    font-weight: 500;
    color: rgba(15, 23, 42, 0.55);
}

.mitzvah-chat-message__body {
    font-size: 0.92rem;
    color: #111827;
    line-height: 1.55;
    word-break: break-word;
}

.mitzvah-message-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(59, 130, 246, 0.12);
}

.mitzvah-message-reactions {
    display: flex;
    gap: 0.65rem;
}

.mitzvah-message-actions {
    display: flex;
    gap: 0.4rem;
}

.mitzvah-action-btn {
    background: none;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    cursor: pointer;
    color: #64748b;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mitzvah-action-btn:hover {
    background: rgba(241, 245, 249, 0.9);
    color: #334155;
    border-color: rgba(148, 163, 184, 0.55);
}

.mitzvah-action-delete:hover {
    background: rgba(254, 226, 226, 0.8);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.35);
}

.mitzvah-action-save {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border-color: rgba(59, 130, 246, 0.3);
}

.mitzvah-action-save:hover {
    background: rgba(59, 130, 246, 0.2);
}

.mitzvah-action-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.mitzvah-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.mitzvah-edit-textarea {
    width: 100%;
    resize: vertical;
    min-height: 60px;
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.5;
    color: #111827;
    background: #fff;
    box-sizing: border-box;
}

.mitzvah-edit-textarea:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.mitzvah-edit-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}

.mitzvah-chat__composer {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.mitzvah-chat__input {
    width: 100%;
    resize: vertical;
    min-height: 90px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    padding: 0.75rem 0.9rem;
    font-size: 0.95rem;
    line-height: 1.5;
    font-family: inherit;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

.mitzvah-chat__input:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.mitzvah-chat__input:disabled {
    background: rgba(241, 245, 249, 0.8);
    color: rgba(100, 116, 139, 0.8);
}

.mitzvah-chat__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mitzvah-chat__submit {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mitzvah-chat__submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.22);
}

.mitzvah-chat__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.mitzvah-chat__hint {
    font-size: 0.8rem;
    color: rgba(15, 23, 42, 0.5);
}

.mitzvah-chat__status {
    font-size: 0.85rem;
    min-height: 1.2rem;
    color: rgba(15, 23, 42, 0.65);
}

.mitzvah-chat-status--success {
    color: #047857 !important;
}

@media (max-width: 1024px) {
    .mitzvah-card__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .mitzvah-card__grid > * {
        width: 100%;
    }
}

.mitzvah-locked {
    margin-bottom: 2rem;
}

#parsha-text {
    margin-top: 2rem;
}

.mitzvah-locked__card {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 16px;
    padding: 1.75rem;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.mitzvah-locked__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 0.5rem;
}

.mitzvah-locked__text {
    font-size: 1rem;
    color: #1f2937;
    margin: 0;
}

.mitzvah-leaderboard {
    background: linear-gradient(160deg, rgba(251, 251, 252, 0.95), rgba(248, 250, 252, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.mitzvah-leaderboard__header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mitzvah-leaderboard__subtitle {
    font-size: 0.82rem;
    color: rgba(15, 23, 42, 0.6);
    margin: 0;
}

.mitzvah-leaderboard__list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
}

.mitzvah-leaderboard__empty,
.mitzvah-leaderboard__error {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(15, 23, 42, 0.6);
    text-align: center;
}

.mitzvah-leaderboard__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    transition: transform 0.12s ease;
}

.mitzvah-leaderboard__item:hover {
    transform: translateX(2px);
}

.mitzvah-leaderboard__item.is-self,
.mitzvah-leaderboard__item--self {
    background: rgba(239, 246, 255, 0.95);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.1);
}

.mitzvah-leaderboard__rank {
    font-weight: 700;
    color: #1e3a8a;
    font-size: 1rem;
    min-width: 1.5rem;
}

.mitzvah-leaderboard__name-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.mitzvah-leaderboard__name {
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mitzvah-leaderboard__count {
    font-weight: 700;
    color: #047857;
    font-size: 0.95rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.mitzvah-leaderboard__badge {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   WEEKLY MITZVAH CHALLENGE — mc-* namespace (v2)
══════════════════════════════════════════════════ */

.mc-wrap {
    margin-bottom: 2rem;
}

.mc-card {
    background: #ffffff;
    border: 1px solid rgba(30, 60, 120, 0.12);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(17, 44, 84, 0.10);
}

/* ── Header ── */
.mc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    background: linear-gradient(135deg, #0f2550 0%, #1a3a7e 55%, #2456b4 100%);
    cursor: pointer;
    user-select: none;
    transition: filter 0.15s;
    gap: 0.75rem;
}

.mc-header:hover { filter: brightness(1.07); }

.mc-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.mc-eyebrow {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(207, 154, 50, 0.88);
}

.mc-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin: 0;
}

.mc-header-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.mc-countdown {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.22rem 0.6rem;
    border-radius: 100px;
    background: rgba(207, 154, 50, 0.18);
    color: rgba(240, 194, 84, 0.97);
    border: 1px solid rgba(207, 154, 50, 0.26);
    white-space: nowrap;
}

.mc-countdown:empty { display: none; }

.mc-countdown.is-closed {
    background: rgba(148, 163, 184, 0.18);
    color: rgba(200, 215, 235, 0.8);
    border-color: rgba(148, 163, 184, 0.22);
}

.mc-chevron {
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.mc-chevron.expanded { transform: rotate(180deg); }

/* ── Chavruta tabs ── */
.mc-tabs {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.4rem 0.65rem;
}

.mc-tab {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.28rem 0.75rem;
    border-radius: 100px;
    background: rgba(224, 232, 240, 0.8);
    color: #334155;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.mc-tab:hover { background: rgba(210, 222, 235, 0.95); color: #1e3a8a; }

.mc-tab.active {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: #ffffff;
}

/* ── Featured section (The Mitzvah) ── */
.mc-section--featured {
    padding: 1.1rem 1.4rem;
    background: linear-gradient(135deg, rgba(236, 245, 255, 0.75) 0%, rgba(244, 248, 255, 0.4) 100%);
    border-bottom: 1px solid rgba(30, 60, 120, 0.08);
}

/* ── Two-column sections ── */
.mc-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid rgba(30, 60, 120, 0.08);
}

.mc-two-col .mc-section {
    padding: 1rem 1.4rem;
    border-left: 1px solid rgba(30, 60, 120, 0.08);
}

.mc-two-col .mc-section:first-child { border-left: none; }

/* ── Section label (eyebrow above content) ── */
.mc-section-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #2456b4;
    margin: 0 0 0.4rem 0;
}

/* ── Mitzvah content ── */
.mc-mitzvah-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f1f3e;
    margin-bottom: 0.3rem;
}

.mc-mitzvah-title p, .mc-mitzvah-title strong { font-weight: 700; color: #0f1f3e; }

.mc-mitzvah-text {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.6;
}

.mc-mitzvah-text p { margin-bottom: 0.35rem; }
.mc-mitzvah-text p:last-child { margin-bottom: 0; }

.mc-section-text {
    font-size: 0.86rem;
    color: #374151;
    line-height: 1.6;
}

.mc-section-text p { margin-bottom: 0.35rem; }
.mc-section-text p:last-child { margin-bottom: 0; }

/* ── Bottom interactive grid ── */
.mc-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
}

/* Completion row spans full width */
.mc-completion {
    grid-column: 1 / -1;
    padding: 0.8rem 1.4rem;
    background: rgba(241, 245, 249, 0.65);
    border-top: 1px solid rgba(30, 60, 120, 0.08);
    border-bottom: 1px solid rgba(30, 60, 120, 0.08);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mc-completion-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.mc-completion-check {
    width: 1rem;
    height: 1rem;
    accent-color: #2563eb;
    cursor: pointer;
    flex-shrink: 0;
}

.mc-completion-check:disabled { cursor: not-allowed; }

.mc-completion-helper {
    font-size: 0.77rem;
    color: #64748b;
    margin: 0;
}

/* ── Chat ── */
.mc-chat {
    background: linear-gradient(160deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.9));
    border-right: 1px solid rgba(30, 60, 120, 0.08);
    padding: 1rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.mc-chat-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.mc-chat-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.mc-chat-auth {
    font-size: 0.77rem;
    color: rgba(15, 23, 42, 0.5);
    margin: 0;
}

.mc-messages {
    max-height: 230px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 48px;
}

.mc-messages-empty {
    margin: 0;
    color: rgba(15, 23, 42, 0.5);
    font-size: 0.84rem;
    font-style: italic;
}

.mc-composer {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.mc-composer-input {
    width: 100%;
    resize: vertical;
    min-height: 60px;
    padding: 0.5rem 0.7rem;
    background: rgba(255, 255, 255, 0.88);
    border: 1.5px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.6rem;
    font-size: 0.84rem;
    color: #0f172a;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.mc-composer-input:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.09);
}

.mc-composer-input:disabled {
    background: rgba(241, 245, 249, 0.8);
    color: rgba(100, 116, 139, 0.75);
}

.mc-composer-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.mc-send-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border: none;
    border-radius: 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.42rem 0.95rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.mc-send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.22);
}

.mc-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.mc-composer-hint {
    font-size: 0.74rem;
    color: rgba(15, 23, 42, 0.42);
}

.mc-chat-status {
    font-size: 0.81rem;
    min-height: 1.1rem;
    margin: 0;
}

/* ── Leaderboard ── */
.mc-leaderboard {
    background: linear-gradient(160deg, rgba(251, 251, 252, 0.95), rgba(248, 250, 252, 0.9));
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.mc-leaderboard-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.mc-leaderboard-sub {
    font-size: 0.77rem;
    color: rgba(15, 23, 42, 0.52);
    margin: 0;
}

.mc-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.2rem;
}

.mc-leaderboard-empty, .mc-leaderboard-error {
    font-size: 0.84rem;
    color: rgba(15, 23, 42, 0.52);
    margin: 0;
    font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .mc-two-col {
        grid-template-columns: 1fr;
    }
    .mc-two-col .mc-section {
        border-left: none;
        border-top: 1px solid rgba(30, 60, 120, 0.08);
    }
    .mc-two-col .mc-section:first-child { border-top: none; }
    .mc-bottom-grid { grid-template-columns: 1fr; }
    .mc-chat {
        border-right: none;
        border-bottom: 1px solid rgba(30, 60, 120, 0.08);
    }
}

.mitzvah-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    /* Prevent background scroll chaining while modal is open */
    overscroll-behavior: contain;
}

.mitzvah-modal:not(.hidden) {
    pointer-events: auto;
    opacity: 1;
}

.mitzvah-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    /* Prevent scroll/touch gestures from reaching the page underneath */
    touch-action: none;
}

.mitzvah-modal__panel {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: 2.5rem 2.25rem;
    width: min(520px, calc(100vw - 2rem));
    /* Keep the modal within the viewport and allow internal scrolling when content is long */
    max-height: calc(100vh - 2rem);
    overflow: hidden; /* content area will scroll */
    box-shadow: 0 32px 64px rgba(15, 23, 42, 0.28);
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mitzvah-modal:not(.hidden) .mitzvah-modal__panel {
    transform: translateY(0);
    opacity: 1;
}

.mitzvah-modal__close {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 1.6rem;
    color: rgba(15, 23, 42, 0.6);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.mitzvah-modal__close:hover {
    color: rgba(15, 23, 42, 0.85);
}

.mitzvah-modal__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* Scroll only the content, keep panel chrome stable */
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    /* Keep text away from the scrollbar, esp. Hebrew on the right */
    padding-inline-end: max(0.75rem, env(safe-area-inset-right));
}

.mitzvah-modal__eyebrow {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2563eb;
    margin: 0;
}

.mitzvah-modal__title {
    font-size: 1.75rem;
    margin: 0;
    color: #0f172a;
    font-weight: 800;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mitzvah-modal__mitzvah {
    font-size: 1rem;
    color: #1e293b;
    font-weight: 600;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mitzvah-modal__mitzvah .mitzvah-label__he {
    font-size: 1.25rem;
    /* Hebrew (rtl) needs a little breathing room from the right edge */
    padding-inline-start: 0.5rem;
}

.mitzvah-modal__mitzvah .mitzvah-label__sub {
    font-size: 1rem;
}

.mitzvah-modal__countdown {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ea580c;
    background: rgba(234, 88, 12, 0.12);
    border: 1px solid rgba(234, 88, 12, 0.3);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    width: fit-content;
}

.mitzvah-modal__summary {
    color: #1f2937;
    line-height: 1.6;
    font-size: 1rem;
    /* Prevent long words/URLs from causing horizontal overflow */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mitzvah-modal__paragraph {
    margin-bottom: 0.85rem;
}

.mitzvah-modal__paragraph:last-child {
    margin-bottom: 0;
}

.mitzvah-modal__paragraph p {
    margin: 0;
    color: inherit;
    line-height: inherit;
    font-size: inherit;
}

.mitzvah-modal__callout {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

.mitzvah-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    position: sticky;
    position: -webkit-sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 24%);
    padding-top: 0.75rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    margin-top: 0.25rem;
}

.mitzvah-modal__primary,
.mitzvah-modal__secondary {
    flex: 1 1 160px;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mitzvah-modal__primary {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28);
}

.mitzvah-modal__primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.32);
}

.mitzvah-modal__secondary {
    background: rgba(15, 23, 42, 0.05);
    color: #1f2937;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.mitzvah-modal__secondary:hover {
    transform: translateY(-1px);
}

/* Use dynamic viewport height when supported to avoid iOS toolbar issues */
@supports (height: 100dvh) {
    .mitzvah-modal__panel {
        max-height: calc(100dvh - 2rem);
    }
}

/* Lock background scroll when modal is open */
html.no-scroll,
body.no-scroll {
    overflow: hidden !important;
    height: 100%;
    overscroll-behavior: contain;
}

/* Compact padding on very small viewports */
@media (max-width: 420px), (max-height: 560px) {
    .mitzvah-modal__panel {
        padding: 1.25rem 1rem;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #community-status-bar {
        min-height: 44px;
        padding: 0.3rem 0 !important;
    }

    #community-status-content {
        padding: 0.35rem 1rem;
        gap: 0.7rem !important;
    }

    #header-online-users-list .status-badge {
        font-size: 0.66rem;
        padding: 0.32rem 0.65rem;
    }

    #header-your-status {
        gap: 0.3rem;
    }

    .status-time {
        font-size: 0.6rem;
    }

    .status-badge[title]:hover::after {
        max-width: 280px;
        font-size: 0.64rem;
        padding: 0.45rem 0.7rem;
    }

    .status-tooltip[data-tooltip]::after {
        max-width: 280px;
        font-size: 0.64rem;
        padding: 0.45rem 0.7rem;
    }
}

/* ========================================
   SIDEBAR NAVIGATION — FIXED LEFT DRAWER
   ======================================== */

body.sidebar-nav-enabled {
    --site-sidebar-width: 232px;
    --site-sidebar-collapsed-width: 60px;
    --sidebar-transition: 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop: shift page content right */
@media (min-width: 961px) {
    body.sidebar-nav-enabled {
        padding-left: var(--site-sidebar-width);
        transition: padding-left var(--sidebar-transition);
    }
    body.sidebar-nav-enabled.sidebar-nav-collapsed {
        padding-left: var(--site-sidebar-collapsed-width);
    }
}

/* ── Fixed sidebar — real glass panel ───────────────────────────────────── */
body.sidebar-nav-enabled .site-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: var(--site-sidebar-width);
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 0.75rem calc(1.5rem + env(safe-area-inset-bottom));
    /* ── Blue-tinted glass: transparent + heavy blur ── */
    background: linear-gradient(
        162deg,
        rgba(219, 234, 254, 0.28) 0%,
        rgba(147, 197, 253, 0.14) 45%,
        rgba(224, 242, 254, 0.24) 100%
    );
    backdrop-filter: blur(52px) saturate(200%) brightness(1.06);
    -webkit-backdrop-filter: blur(52px) saturate(200%) brightness(1.06);
    /* ── Glass edges: bright insets + blue glow ── */
    border-right: 1px solid rgba(255, 255, 255, 0.40);
    box-shadow:
        6px 0 48px rgba(59, 130, 246, 0.10),
        4px 0 24px rgba(15, 23, 42, 0.05),
        inset 1px 0 0 rgba(255, 255, 255, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset -1px 0 0 rgba(59, 130, 246, 0.08);
    /* Allow button shadows to render; text-size portal handles its own overflow */
    overflow-x: clip;
    overflow-y: auto;
    transition: width var(--sidebar-transition), padding var(--sidebar-transition);
}

body.sidebar-nav-enabled .header-branding-section {
    flex: 1 1 auto;
    min-width: 0;
}

body.sidebar-nav-enabled .header-container {
    position: relative;
    gap: 0;
}

/* ── Sidebar head ───────────────────────────────────────────────────────── */
body.sidebar-nav-enabled .site-sidebar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.5rem;
    border-bottom: none;
    box-shadow: none;
    min-height: 0;
    flex-shrink: 0;
}

body.sidebar-nav-enabled .site-sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.18s;
}

body.sidebar-nav-enabled .site-sidebar-brand-link:hover {
    opacity: 0.8;
}

body.sidebar-nav-enabled .site-sidebar-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

body.sidebar-nav-enabled .site-sidebar-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    border: none;
    outline: none;
    box-shadow: none;
    filter: none;
}

body.sidebar-nav-enabled .site-sidebar-brand-copy {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: center;
    align-self: center;
    min-width: 0;
    overflow: hidden;
    padding-top: 0;
}

body.sidebar-nav-enabled .site-sidebar-title {
    color: rgba(16, 42, 102, 0.75);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.01em;
    line-height: 1.15;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: none;
    text-rendering: optimizeLegibility;
    transition: opacity var(--sidebar-transition), width var(--sidebar-transition);
}

/* ── Collapse / expand arrow button ────────────────────────────────────── */
body.sidebar-nav-enabled .site-sidebar-collapse {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.22);
    color: rgba(59, 130, 246, 0.8);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7),
                0 1px 4px rgba(59,130,246,0.06);
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body.sidebar-nav-enabled .site-sidebar-collapse svg {
    width: 16px;
    height: 16px;
    display: block;
    transition: transform var(--sidebar-transition);
}

body.sidebar-nav-enabled .site-sidebar-collapse:hover {
    background: rgba(255, 255, 255, 0.45);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9),
                0 2px 8px rgba(59,130,246,0.10);
}

body.sidebar-nav-enabled .site-sidebar-collapse:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

/* ── Nav items — scrollable flex column ─────────────────────────────────── */
body.sidebar-nav-enabled .site-sidebar .header-actions {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.28rem;
    flex: 1;
    min-height: 0;          /* required so flex child can actually scroll */
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Mobile-only close button inside the drawer ─────────────────────────── */
body.sidebar-nav-enabled .site-sidebar-close-btn {
    display: none; /* shown only on mobile via media query */
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    margin-left: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.50);
    background: rgba(255, 255, 255, 0.22);
    color: rgba(30, 58, 138, 0.75);
    border-radius: 9px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    transition: background 0.16s ease, border-color 0.16s ease;
}

body.sidebar-nav-enabled .site-sidebar-close-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

body.sidebar-nav-enabled .site-sidebar-close-btn:hover {
    background: rgba(255, 255, 255, 0.42);
    border-color: rgba(255, 255, 255, 0.82);
}

body.sidebar-nav-enabled .site-sidebar .header-btn {
    width: 100%;
    /* Override generic mobile header flex sizing (50% height basis). */
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 12px;
    min-height: 44px;
    text-align: left;
    overflow: visible;
    font-size: 0.84rem;
    font-weight: 600;
    box-shadow: none !important;
}

body.sidebar-nav-enabled .site-sidebar .header-btn::after {
    display: none;
}

body.sidebar-nav-enabled .site-sidebar .header-btn-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    opacity: 0.72;
}

body.sidebar-nav-enabled .site-sidebar .header-btn-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keep sign-out separated from regular nav actions. */
body.sidebar-nav-enabled .site-sidebar .site-sidebar-signout {
    margin-top: auto;
    order: 999;
}

/* ── Sidebar account section (Bookmarks, Account, Sign Out) ── */
body.sidebar-nav-enabled .site-sidebar-account-section {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

body.sidebar-nav-enabled .site-sidebar-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(147, 197, 253, 0.4) 50%, transparent 95%);
    margin: 0.4rem 0.5rem 0.5rem;
}


body.sidebar-nav-enabled .site-sidebar-account-section .header-btn {
    width: 100%;
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    min-height: 44px;
    text-align: left;
    overflow: visible;
    font-size: 0.84rem;
    font-weight: 600;
}

body.sidebar-nav-enabled .site-sidebar-account-section .site-sidebar-signout {
    color: #991b1b;
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(254, 226, 226, 0.3);
}

body.sidebar-nav-enabled .site-sidebar-account-section .site-sidebar-signout:hover {
    background: rgba(254, 226, 226, 0.55);
    border-color: rgba(239, 68, 68, 0.35);
}

/* ── User pill inside sidebar — dark text on bright background ── */
body.sidebar-nav-enabled .site-sidebar .header-user-pill {
    color: #1e3a8a;
    background: rgba(30, 58, 138, 0.08);
    border-color: rgba(30, 58, 138, 0.18);
    width: 100%;
    justify-content: flex-start;
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
}
body.sidebar-nav-enabled .site-sidebar .header-user-pill:hover {
    background: rgba(30, 58, 138, 0.14);
    border-color: rgba(30, 58, 138, 0.28);
}
body.sidebar-nav-enabled .site-sidebar .header-user-chevron {
    color: #1e3a8a;
}
body.sidebar-nav-enabled .site-sidebar-account-section #header-user-dropdown-container {
    width: 100%;
}

/* ── Secondary nav buttons — glass pills ── */
body.sidebar-nav-enabled .site-sidebar .header-btn-secondary {
    /* Crystal glass: barely-there fill + bright border */
    background: rgba(255, 255, 255, 0.18);
    color: #1e3a8a;
    border: 1px solid rgba(255, 255, 255, 0.52);
    /* Inset-only shadows — no outer shadows that get clipped by scroll container */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 -1px 0 rgba(59, 130, 246, 0.05);
    transition: background 0.17s ease, border-color 0.17s ease,
                box-shadow 0.17s ease, color 0.17s ease;
}

body.sidebar-nav-enabled .site-sidebar .header-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.40);
    border-color: rgba(255, 255, 255, 0.82);
    color: #1d4ed8;
    transform: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(59, 130, 246, 0.06);
}

/* Primary button (Home) in sidebar — dark text on light background, same as secondary */
body.sidebar-nav-enabled .site-sidebar .header-btn-primary {
    color: #1e3a8a;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 -1px 0 rgba(59, 130, 246, 0.05);
}

body.sidebar-nav-enabled .site-sidebar .header-btn-primary:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.40);
    border-color: rgba(255, 255, 255, 0.82);
    color: #1d4ed8;
}

/* Tint party.png to match the blue icon style */
body.sidebar-nav-enabled .site-sidebar .header-btn img.header-btn-icon {
    filter: brightness(0) saturate(100%) invert(17%) sepia(86%) saturate(700%) hue-rotate(209deg) brightness(85%) opacity(0.68);
}

body.sidebar-nav-enabled .site-sidebar .header-btn-secondary:active {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
    transform: none;
}

/* ── Active page indicator ── */
body.sidebar-nav-enabled .site-sidebar .header-btn--active {
    background: rgba(29, 78, 216, 0.13);
    color: #1d4ed8;
    border-color: rgba(29, 78, 216, 0.32);
    box-shadow:
        inset 3px 0 0 #3b82f6,
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    font-weight: 700;
}

body.sidebar-nav-enabled .site-sidebar .header-btn--active .header-btn-icon {
    color: #2563eb;
    opacity: 1;
}

body.sidebar-nav-enabled .site-sidebar .header-btn--active img.header-btn-icon {
    filter: brightness(0) saturate(100%) invert(26%) sepia(94%) saturate(1800%) hue-rotate(215deg) brightness(95%);
}

body.sidebar-nav-enabled .site-sidebar .header-btn--active:hover {
    background: rgba(29, 78, 216, 0.18);
    border-color: rgba(29, 78, 216, 0.40);
}

/* Primary button (home) — same tinted active style as secondary buttons (no white icon) */
body.sidebar-nav-enabled .site-sidebar .header-btn-primary.header-btn--active {
    background: rgba(29, 78, 216, 0.13);
    color: #1d4ed8;
    border-color: rgba(29, 78, 216, 0.32);
    box-shadow:
        inset 3px 0 0 #3b82f6,
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ── Text size control ──────────────────────────────────────────────────── */
body.sidebar-nav-enabled .site-sidebar .text-size-control {
    width: 100%;
}

body.sidebar-nav-enabled .site-sidebar .text-size-toggle {
    width: 100%;
    justify-content: flex-start;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.6rem 0.75rem;
    color: #1e3a8a;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 -1px 0 rgba(59, 130, 246, 0.05),
        0 1px 3px rgba(15, 23, 42, 0.04);
    gap: 0.6rem;
    min-height: 44px;
    transition: background 0.17s ease, border-color 0.17s ease, box-shadow 0.17s ease;
}

body.sidebar-nav-enabled .site-sidebar .text-size-toggle:hover,
body.sidebar-nav-enabled .site-sidebar .text-size-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.40);
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(59, 130, 246, 0.06),
        0 2px 10px rgba(59, 130, 246, 0.09);
}

body.sidebar-nav-enabled .site-sidebar .text-size-menu {
    left: 0;
    right: auto;
    transform: none;
    min-width: 100%;
    top: calc(100% + 0.4rem);
    z-index: 210;
}

body.sidebar-nav-enabled .site-sidebar .text-size-menu::before {
    left: 1rem;
    right: auto;
    transform: rotate(45deg);
}

/* ── Hamburger toggle — fixed pill, always visible on mobile ────────────── */
body.sidebar-nav-enabled .site-header-nav-toggle {
    /* Hidden on desktop; shown on mobile via media query below */
    display: none;
    position: fixed;
    right: 0.85rem;
    z-index: 300; /* above sidebar (200) and backdrop (196) */
    border: 1px solid rgba(255, 255, 255, 0.38);
    background: rgba(59, 130, 246, 0.82);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    color: #ffffff;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    padding: 0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: background 0.18s ease, box-shadow 0.18s ease,
                transform 0.15s ease;
}

body.sidebar-nav-enabled .site-header-nav-toggle:hover,
body.sidebar-nav-enabled .site-header-nav-toggle:focus-visible {
    background: rgba(37, 99, 235, 0.95);
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body.sidebar-nav-enabled .site-header-nav-toggle:active {
    transform: scale(0.94);
}

body.sidebar-nav-enabled .site-header-nav-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(191, 219, 254, 0.7);
}

/* Hamburger icon — 3 horizontal bars stacked vertically */
body.sidebar-nav-enabled .site-header-nav-toggle-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 20px;
    height: 14px;
}

body.sidebar-nav-enabled .site-header-nav-toggle-icon span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    flex-shrink: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

/* ── Backdrop ───────────────────────────────────────────────────────────── */
body.sidebar-nav-enabled .site-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 196;
}

/* ═══════════════════════════════════════════════════════════════════════
   COLLAPSED STATE — icon-only strip (desktop)
   ═══════════════════════════════════════════════════════════════════════ */
body.sidebar-nav-enabled.sidebar-nav-collapsed .site-sidebar {
    width: var(--site-sidebar-collapsed-width);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Hide brand link entirely in collapsed state so collapse button stays visible */
body.sidebar-nav-enabled.sidebar-nav-collapsed .site-sidebar-brand-link {
    display: none;
}

body.sidebar-nav-enabled.sidebar-nav-collapsed .site-sidebar-title {
    opacity: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Center the collapse button when it's the only item in the head */
body.sidebar-nav-enabled.sidebar-nav-collapsed .site-sidebar-head {
    justify-content: center;
}

/* Rotate arrow to point right (expand direction) */
body.sidebar-nav-enabled.sidebar-nav-collapsed .site-sidebar-collapse svg {
    transform: rotate(180deg);
}

body.sidebar-nav-enabled.sidebar-nav-collapsed .site-sidebar .header-btn {
    justify-content: center;
    padding: 0.6rem 0.4rem;
}

body.sidebar-nav-enabled.sidebar-nav-collapsed .site-sidebar .header-btn-text {
    display: none;
}

/* Active indicator persists in collapsed mode (icon-only) */
body.sidebar-nav-enabled.sidebar-nav-collapsed .site-sidebar .header-btn--active {
    background: rgba(29, 78, 216, 0.13);
    border-color: rgba(29, 78, 216, 0.30);
    box-shadow: inset 3px 0 0 #3b82f6;
}

body.sidebar-nav-enabled.sidebar-nav-collapsed .site-sidebar .text-size-toggle {
    justify-content: center;
    padding: 0.52rem 0.4rem;
}

body.sidebar-nav-enabled.sidebar-nav-collapsed .site-sidebar .text-size-toggle-label,
body.sidebar-nav-enabled.sidebar-nav-collapsed .site-sidebar .text-size-caret {
    display: none !important;
}

body.sidebar-nav-enabled.sidebar-nav-collapsed .site-sidebar .text-size-menu {
    top: 0;
    left: calc(100% + 0.5rem);
    right: auto;
    min-width: 11rem;
}

body.sidebar-nav-enabled.sidebar-nav-collapsed .site-sidebar .text-size-menu::before {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE (≤960px) — fixed hamburger + left glass drawer
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {

    /* No left-padding on mobile — sidebar is a hidden drawer */
    body.sidebar-nav-enabled {
        padding-left: 0 !important;
    }

    /* Show hamburger pill — vertically centered in sticky header */
    body.sidebar-nav-enabled .site-header-nav-toggle {
        display: inline-flex;
        top: 0.65rem;
    }

    /* Hide user pill on mobile — sidebar has Account & Sign Out */
    body.sidebar-nav-enabled #header-user-dropdown-container {
        display: none !important;
    }

    /* Hide logo on mobile — hamburger menu already shows it */
    body.sidebar-nav-enabled .header-logo-default,
    body.sidebar-nav-enabled .header-logo-shabbat {
        display: none;
    }

    /* Keep header title from overlapping where the hamburger pill floats */
    body.sidebar-nav-enabled .header-container {
        padding-right: 4.5rem;
    }

    body.sidebar-nav-enabled .header-title {
        font-size: clamp(1.3rem, 5.5vw, 2rem);
        white-space: normal;
    }

    body.sidebar-nav-enabled .header-subtitle {
        font-size: 0.8rem;
        max-width: 34ch;
    }

    /* ── Mobile drawer — glass panel, slides in from left ── */
    body.sidebar-nav-enabled .site-sidebar {
        width: min(82vw, 290px);
        padding: 1.25rem 0.9rem 2rem;
        transform: translateX(-100%);
        /* Solid enough to read over any page content */
        background: linear-gradient(
            160deg,
            rgba(239, 246, 255, 0.96) 0%,
            rgba(219, 234, 254, 0.92) 50%,
            rgba(224, 242, 254, 0.95) 100%
        );
        backdrop-filter: blur(40px) saturate(180%);
        -webkit-backdrop-filter: blur(40px) saturate(180%);
        border-right: 1px solid rgba(147, 197, 253, 0.55);
        box-shadow:
            10px 0 60px rgba(15, 23, 42, 0.22),
            inset 1px 0 0 rgba(255, 255, 255, 0.85),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-x: clip;   /* allow button shadows; portal handles text-size dropdown */
        overflow-y: auto;
    }

    /* Nav items scroll inside the drawer */
    body.sidebar-nav-enabled .site-sidebar .header-actions {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
    }

    /* Show the close (X) button inside the drawer header */
    body.sidebar-nav-enabled .site-sidebar-close-btn {
        display: inline-flex;
    }

    /* Hide the collapse arrow on mobile — only the X button is needed */
    body.sidebar-nav-enabled .site-sidebar-collapse {
        display: none;
    }

    /* Sidebar head — just logo + close, no container */
    body.sidebar-nav-enabled .site-sidebar-head {
        align-items: flex-start;
        padding-bottom: 0.7rem;
        margin-bottom: 0.55rem;
        border-bottom: none;
        box-shadow: none;
        min-height: 0;
    }

    body.sidebar-nav-enabled .site-sidebar-brand-link {
        gap: 0.8rem;
        align-items: center;
    }

    body.sidebar-nav-enabled .site-sidebar-logo {
        width: 42px;
        height: 42px;
    }

    body.sidebar-nav-enabled .site-sidebar-title {
        font-size: 0.82rem;
        line-height: 1.15;
        color: rgba(16, 42, 102, 0.75);
    }

    /* Nav buttons — compact touch targets */
    body.sidebar-nav-enabled .site-sidebar .header-btn {
        flex: 0 0 auto;
        justify-content: flex-start;
        font-size: 0.85rem;
        min-height: 42px;
        border-radius: 12px;
        padding: 0.6rem 0.9rem;
        gap: 0.6rem;
        background: rgba(255, 255, 255, 0.40);
        border: 1px solid rgba(255, 255, 255, 0.65);
    }

    body.sidebar-nav-enabled .site-sidebar .header-btn-text {
        display: inline;
    }

    body.sidebar-nav-enabled .site-sidebar .header-btn-secondary {
        background: rgba(255, 255, 255, 0.40);
        color: #1e3a8a;
    }

    body.sidebar-nav-enabled .site-sidebar .header-btn-secondary:hover,
    body.sidebar-nav-enabled .site-sidebar .header-btn-secondary:active {
        background: rgba(255, 255, 255, 0.65);
    }

    /* Active page indicator — mobile drawer */
    body.sidebar-nav-enabled .site-sidebar .header-btn--active {
        background: rgba(29, 78, 216, 0.14);
        color: #1d4ed8;
        border-color: rgba(29, 78, 216, 0.30);
        box-shadow: inset 3px 0 0 #3b82f6;
        font-weight: 700;
    }

    body.sidebar-nav-enabled .site-sidebar .header-btn--active:hover,
    body.sidebar-nav-enabled .site-sidebar .header-btn--active:active {
        background: rgba(29, 78, 216, 0.20);
    }

    /* Text size control — compact target */
    body.sidebar-nav-enabled .site-sidebar .text-size-toggle {
        justify-content: flex-start;
        font-size: 0.85rem;
        min-height: 42px;
        border-radius: 12px;
        padding: 0.6rem 0.9rem;
        background: rgba(255, 255, 255, 0.40);
        border: 1px solid rgba(255, 255, 255, 0.65);
    }

    body.sidebar-nav-enabled .site-sidebar .text-size-toggle-label,
    body.sidebar-nav-enabled .site-sidebar .text-size-caret {
        display: inline;
    }

    body.sidebar-nav-enabled .site-sidebar .text-size-menu {
        top: calc(100% + 0.4rem);
        left: 0;
        right: auto;
        transform: none;
        min-width: 100%;
        z-index: 9999;
    }

    body.sidebar-nav-enabled .site-sidebar .text-size-menu::before {
        left: 1rem;
        top: -0.4rem;
        transform: rotate(45deg);
    }

    /* Account section — compact touch targets on mobile */
    body.sidebar-nav-enabled .site-sidebar-account-section .header-btn {
        font-size: 0.85rem;
        min-height: 42px;
        border-radius: 12px;
        padding: 0.6rem 0.9rem;
        gap: 0.6rem;
        background: rgba(255, 255, 255, 0.40);
        border: 1px solid rgba(255, 255, 255, 0.65);
    }

    body.sidebar-nav-enabled .site-sidebar-account-section .site-sidebar-signout {
        color: #991b1b;
        border-color: rgba(239, 68, 68, 0.25);
        background: rgba(254, 226, 226, 0.35);
    }

    /* ── Open state ── */
    body.sidebar-nav-enabled.sidebar-nav-mobile-open .site-sidebar {
        transform: translateX(0);
    }

    body.sidebar-nav-enabled.sidebar-nav-mobile-open .site-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Hamburger → X animation */
    body.sidebar-nav-enabled.sidebar-nav-mobile-open .site-header-nav-toggle-icon span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.sidebar-nav-enabled.sidebar-nav-mobile-open .site-header-nav-toggle-icon span:nth-child(2) {
        opacity: 0;
    }

    body.sidebar-nav-enabled.sidebar-nav-mobile-open .site-header-nav-toggle-icon span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* Bookmarks loading spinner wrapper */
.bookmarks-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: #94a3b8;
    font-size: 0.875rem;
}

/* ══════════════════════════════════════════
   MODERN HEADER — User Pill & Dropdown
   (shared across all pages)
   ══════════════════════════════════════════ */

/* Header overrides removed — all styles consolidated in base .header-main */

/* Make active-page button use a gold-tinted style */
/* primary/secondary button overrides removed — defined in base styles above */

/* ─── User pill trigger ─── */
/* ═══════════════════════════════════════════════
   USER DROPDOWN — Pill trigger + panel
   ═══════════════════════════════════════════════ */

/* ─── Pill container — reserves space to prevent header shift ─── */
#header-user-dropdown-container {
    min-width: 96px;
    display: flex;
    align-items: center;
    position: relative;
}

/* ─── Trigger pill ─── */
.header-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 8px;
    border-radius: 0;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-family: inherit;
    position: relative;
    animation: pillFadeIn 0.3s ease both;
}

@keyframes pillFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.header-user-pill:hover {
    background: transparent;
    color: #ffffff;
}

.header-user-pill:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* ─── Avatar circle ─── */
.header-user-avatar {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(140deg, #c89a35, #e8c060);
    color: #1a2544;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* ─── Chevron ─── */
.header-user-chevron {
    width: 0.6rem;
    height: 0.6rem;
    opacity: 0.45;
    transition: transform 0.3s ease, opacity 0.3s ease;
    flex-shrink: 0;
    margin-left: -2px;
}

.header-user-pill:hover .header-user-chevron {
    opacity: 0.7;
}

.header-user-pill[aria-expanded="true"] .header-user-chevron {
    transform: rotate(180deg);
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════
   DROPDOWN PANEL
   ═══════════════════════════════════════════════ */
.header-dropdown {
    position: fixed;
    right: 1rem;
    top: 3.6rem;
    width: min(340px, calc(100vw - 1rem));
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.18),
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    pointer-events: none;
    transition:
        opacity 0.15s ease,
        transform 0.2s cubic-bezier(0.32, 1.2, 0.54, 1);
    transform-origin: top right;
    z-index: 999999;
}

.header-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ─── Header block ─── */
.header-dropdown-header {
    padding: 1rem 1.15rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}

.header-dropdown-avatar-lg {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(140deg, #1a2544, #2a4a8a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(26, 37, 68, 0.2);
}

.header-dropdown-user-info {
    flex: 1;
    min-width: 0;
}

.header-dropdown-display-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 0.1rem;
    line-height: 1.3;
}

.header-dropdown-email {
    font-size: 0.72rem;
    color: #8a8a9a;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

/* Legacy label — hidden in new design */
.header-dropdown-signed-in-label {
    display: none;
}

/* ─── Sections ─── */
.header-dropdown-section {
    padding: 0.4rem 0.45rem;
}

.header-dropdown-section + .header-dropdown-section {
    border-top: 1px solid #f4f4f5;
}

/* ─── Menu items ─── */
.header-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.82rem;
    color: #3a3a4a;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 0.6rem;
    font-family: inherit;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
    line-height: 1.35;
}

.header-dropdown-item:hover {
    background: #f0f4ff;
    color: #1a3a8a;
}

.header-dropdown-item--danger {
    color: #c53030;
}

.header-dropdown-item--danger:hover {
    background: #fff5f5;
    color: #9b2c2c;
}

/* ─── Icons inside items ─── */
.header-dropdown-icon {
    width: 1.05rem;
    height: 1.05rem;
    opacity: 0.45;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.header-dropdown-item:hover .header-dropdown-icon {
    opacity: 0.8;
}

.header-dropdown-item--danger .header-dropdown-icon {
    color: #c53030;
    opacity: 0.55;
}

.header-dropdown-item--danger:hover .header-dropdown-icon {
    opacity: 0.85;
}

/* ─── Dropdown backdrop (click-away) ─── */
.header-dropdown-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999998;
}

.header-dropdown-backdrop.open {
    display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   Cross-Document View Transitions (progressive enhancement)
   Header stays in place, content slides on navigation.
   Browsers without support simply navigate normally (no white flash
   thanks to the dark html background).
   ══════════════════════════════════════════════════════════════════════ */
@view-transition {
    navigation: auto;
}

/* Header persists across navigations — no flicker */
.header-main {
    view-transition-name: site-header;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation: none;
    mix-blend-mode: normal;
}

/* Content below the header slides */
::view-transition-old(root) {
    animation: vt-slide-out 0.2s ease-in both;
}

::view-transition-new(root) {
    animation: vt-slide-in 0.2s ease-out both;
}

@keyframes vt-slide-out {
    to {
        opacity: 0;
        transform: translateX(-40px);
    }
}

@keyframes vt-slide-in {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Shared Footer
   ══════════════════════════════════════════════════════════════════════ */
.shared-footer {
    position: relative;
    margin-top: 4rem;
    padding: 1.75rem 0 0;
    background: linear-gradient(180deg, #0a1628 0%, #0c1a3e 40%, #16285e 100%);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.85rem;
    line-height: 1.35;
    overflow: hidden;
}

/* Hard reset: prevent Tailwind preflight & global styles from inflating the footer */
.shared-footer *,
.shared-footer *::before,
.shared-footer *::after {
    background-color: transparent;
    backdrop-filter: none;
    margin: 0;
    padding: 0;
    border: 0;
    min-height: 0;
}
.shared-footer nav {
    background: transparent;
    backdrop-filter: none;
}
.shared-footer ul,
.shared-footer li {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.4;
}
.shared-footer h3 {
    margin: 0 0 0.35rem;
    line-height: 1.3;
}

/* Subtle golden glow at top */
.footer-glow {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 3px;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.55) 0%, transparent 70%);
    pointer-events: none;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Top: brand + nav columns ────────────────────────────────────── */
.footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 1.2rem;
}

/* Brand */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 320px;
    flex-shrink: 0;
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.2s;
}
.footer-logo-link:hover { opacity: 0.85; }

.footer-logo-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: contain;
}

.footer-site-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffffff;
}

.footer-tagline {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    max-width: 320px;
    line-height: 1.55;
}

/* Cycling quote */
.footer-quote {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    max-width: 380px;
    line-height: 1.55;
    min-height: 3.5em;
    margin-top: 1.4rem;
    transition: opacity 0.6s ease;
}

.footer-quote-author {
    display: block;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(212, 175, 55, 0.45);
    margin-top: 0.35rem;
}

/* Nav columns */
.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 3.5rem;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 1.5rem;
}

/* ── Footer support column ───────────────────────────────────────── */
.footer-support-col {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex-shrink: 0;
    max-width: 200px;
    margin-left: auto;
}

.footer-support-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
    max-width: 200px;
    margin-bottom: 0.6rem;
}

.footer-support-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, rgba(200, 154, 53, 0.25), rgba(200, 154, 53, 0.15));
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.footer-support-btn:hover {
    background: linear-gradient(135deg, rgba(200, 154, 53, 0.4), rgba(200, 154, 53, 0.25));
    border-color: rgba(212, 175, 55, 0.5) !important;
}
.footer-support-btn svg {
    stroke: rgba(212, 175, 55, 0.8);
}



.footer-nav-heading {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(212, 175, 55, 0.7);
    margin-bottom: 0.4rem;
}

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer-nav-list li a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.78rem;
    transition: color 0.2s, padding-left 0.2s;
    display: inline-block;
    padding: 0.05rem 0;
}

.footer-nav-list li a:hover {
    color: #ffffff;
    padding-left: 4px;
}

/* ── Divider ─────────────────────────────────────────────────────── */
.footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 20%, rgba(212, 175, 55, 0.2) 50%, rgba(255, 255, 255, 0.12) 80%, transparent);
}

/* ── Bottom bar ──────────────────────────────────────────────────── */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.8rem 0 1rem;
}

.footer-copyright {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-legal a {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-legal a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.footer-legal-dot {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.7rem;
}

.footer-verse {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
    text-align: right;
}

.footer-verse-hebrew {
    font-size: 0.85rem;
    color: rgba(212, 175, 55, 0.45);
    font-style: italic;
}

.footer-verse-ref {
    margin-left: 0.4rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.25);
}

/* ── Footer responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .shared-footer {
        margin-top: 2.5rem;
        padding: 2rem 0 0;
    }

    .footer-top {
        flex-direction: column;
        gap: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .footer-brand {
        align-items: center;
        text-align: center;
        width: 100%;
    }
    .footer-logo-link {
        justify-content: center;
    }
    .footer-tagline { max-width: none; }
    .footer-quote { max-width: none; text-align: center; font-size: 0.92rem; }

    .footer-nav {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        text-align: center;
        justify-items: center;
        width: 100%;
    }

    /* Learn = 1st child → top-left */
    .footer-nav-col:nth-child(1) { order: 1; }
    /* Account = 3rd child → top-right */
    .footer-nav-col:nth-child(3) { order: 2; }
    /* Holidays = 2nd child → bottom, full width */
    .footer-nav-col:nth-child(2) { order: 3; grid-column: 1 / -1; }

    .footer-nav-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-support-col {
        align-items: center;
        text-align: center;
        max-width: 280px;
        margin: 0 auto;
        width: 100%;
    }

    .footer-support-text {
        max-width: 280px;
        text-align: center;
    }

    .footer-support-btn {
        margin: 0 auto 1.2rem;
        justify-content: center;
    }

    .footer-support-chazak {
        text-align: center;
    }

    .footer-nav-list {
        align-items: center;
    }

    .footer-nav-list li a:hover {
        padding-left: 0;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        padding: 1rem 0 1.2rem;
    }
    .footer-verse { text-align: center; }

}

@media (max-width: 480px) {
    .footer-nav {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 1rem;
    }
}

/* ── Read-only mode: dim interaction buttons for users without a group ── */
[data-readonly] .verse-reactions .reaction-btn,
[data-readonly] .verse-reactions .bookmark-btn {
    opacity: 0.5;
}
[data-readonly] .daily-quote-bookmark-btn,
[data-readonly] .comment-input-section,
[data-readonly] .mitzvah-chat-input-section {
    display: none !important;
}

/* Notification dot for incomplete profile in Settings dropdown link */
.settings-notif-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #ef4444;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Red dot on header avatar when profile is incomplete */
.header-user-avatar {
    position: relative;
}
.profile-incomplete-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 1.5px solid #1a1a2e;
    pointer-events: none;
}

/* Birthday section highlight when arriving from notification */
.birthday-highlight {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15), 0 4px 20px rgba(239, 68, 68, 0.1) !important;
}
.birthday-highlight .gold-line {
    background: linear-gradient(90deg, transparent, #ef4444, transparent) !important;
}

/* ── Holiday reading mode ─────────────────────────────────────────────────
   Applied to <body> by js/main.js when Sefaria's Parashat Hashavua is a
   holiday reading (e.g. "Pesach Day 1") rather than a regular weekly parsha.
   Color #b7791f matches --holiday-gold used elsewhere in css/holiday-pages.css
   so holiday weeks feel visually consistent with the dedicated holiday pages.
*/
body.is-holiday-reading {
    /* Warm sand tint over the default #f9fafb so holiday readings feel
       visibly distinct from regular weeks without being loud. Matches the
       --holiday-sand palette used in css/holiday-pages.css. */
    background: #fff8eb;
}
body.is-holiday-reading #parsha-title {
    color: #b7791f;
}

/* ── Special Reading section header ───────────────────────────────────────
   One header per section (Torah / Maftir / Haftarah). The label line
   includes the book name so no separate book banner is needed. Clean,
   quiet, no background fill — the header sits as a typographic divider
   between verse blocks, not a box on the page. */
.special-reading-section-header {
    margin: 3rem 0 1.5rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid rgba(183, 121, 31, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.special-reading-section-header:first-child {
    margin-top: 0.5rem;
}
.special-reading-section-label {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b7791f;
}
.special-reading-section-ref {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e3a8a;
    letter-spacing: -0.01em;
}
.special-reading-section-error {
    margin: 0.5rem 0 1.5rem;
    padding: 0.75rem 1rem;
    color: #991b1b;
    background: #fef2f2;
    border-left: 3px solid #991b1b;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* ── Haftarah / Prophets styling ───────────────────────────────────────────
   Sections from the Prophets (Nach) get a green accent on the section
   header and — crucially — paint the individual .verse-container cards
   themselves green, not the wrapper. This mirrors the default Torah verse
   card treatment (white card, subtle border, hover state) but in mint. */
.special-reading-section-header.is-haftarah {
    border-bottom-color: rgba(4, 120, 87, 0.3);
}
.special-reading-section-header.is-haftarah .special-reading-section-label {
    color: #047857;
}
.special-reading-section-header.is-haftarah .special-reading-section-ref {
    color: #064e3b;
}

/* Verse cards inside a Haftarah section — the Torah cards stay white. */
.special-reading-section-body.is-haftarah .verse-container {
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.special-reading-section-body.is-haftarah .verse-container:hover {
    background: #d1fae5;
    border-color: #047857;
    box-shadow: 0 2px 8px rgba(4, 120, 87, 0.12);
}
.special-reading-section-body.is-haftarah .verse-container .verse-number {
    background: #047857;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(4, 120, 87, 0.25);
}
.special-reading-section-body.is-haftarah .chapter-header {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(4, 120, 87, 0.2);
}

/* Holiday significance blurb shown above each section's verses. Hidden
   while empty so users don't see a flash before the JSON loads. */
.special-reading-significance {
    margin: 0.75rem 0 1.25rem;
    padding: 1rem 1.25rem;
    background: #fffbeb;
    border-left: 4px solid #d4a017;
    border-radius: 0 8px 8px 0;
    color: #5c4a1f;
    font-size: 0.95rem;
    line-height: 1.6;
    font-style: italic;
}
.special-reading-significance.is-empty {
    display: none;
}
.special-reading-significance.is-haftarah {
    background: #ecfdf5;
    border-left-color: #047857;
    color: #064e3b;
}

/* Structured holiday significance modal (Name Meaning / Context /
   Readings / Significance). Rendered inside #info-content. */
.holiday-significance {
    max-width: 100%;
}
.holiday-significance__title {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-size: 1.875rem;
    font-weight: 700;
    color: #b7791f;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #fde68a;
    letter-spacing: 0.01em;
}
.holiday-significance__section {
    margin-bottom: 1.5rem;
}
.holiday-significance__section:last-child {
    margin-bottom: 0;
}
.holiday-significance__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #b7791f;
    margin: 0 0 0.5rem;
}
.holiday-significance__body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: #1f2937;
}