/**
 * Scroll The Word — Layout
 * 3-column shell: Left Menu | Content Feed | Featured Panel
 * ─────────────────────────────────────────────────────────
 */

/* ── App Shell ───────────────────────────────────────────────────────────────── */
.app-shell {
    display: grid;
    grid-template-columns: var(--menu-width) 1fr var(--featured-width);
    grid-template-rows: 100vh;
    min-height: 100vh;
    max-width: 1280px;
    margin: 0 auto;
}

/* Page variant: only left menu + main content (no featured panel) */
.app-shell--page {
    grid-template-columns: var(--menu-width) 1fr;
}

/* ── Mobile Header (hidden on desktop) ───────────────────────────────────────── */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 80;
    box-shadow: var(--shadow-sm);
}

.hamburger-btn,
.avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text);
    transition: background-color var(--transition);
}

.mobile-header__login {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    padding: 6px 14px;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background-color var(--transition), color var(--transition);
}
.mobile-header__login:hover {
    background-color: var(--color-primary);
    color: #fff;
}

.hamburger-btn {
    flex-direction: column;
    gap: 5px;
}

.hamburger-btn:hover,
.avatar-btn:hover {
    background-color: var(--color-surface-alt);
}

/* Hamburger icon bars */
.hamburger-btn span {
    display: block;
    position: relative;
    width: 20px;
    height: 2px;
    background-color: var(--color-text);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}



.hamburger-btn[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.hamburger-btn[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-header__logo {
    flex: 1;
    display: flex;
    justify-content: center;
}
.mobile-header__logo a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.mobile-header__logo .logo-icon {
    flex-shrink: 0;
}

/* ── Left Menu ───────────────────────────────────────────────────────────────── */
.left-menu {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background-color: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}

.left-menu__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px 16px;
}

.left-menu__logo {
    padding: 4px 8px 24px;
}

.left-menu__logo a {
    display: flex;
    align-items: center;
    gap: 6px;
}

.left-menu__logo .logo-icon {
    flex-shrink: 0;
}

.left-menu__logo .logo-text {
    font-size: var(--text-lg);
}

/* ── Nav List ─────────────────────────────────────────────────────────────────── */
.nav-list {
    list-style: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    color: var(--color-text-2);
    font-size: var(--text-base);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
}

.nav-link:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    text-decoration: none;
}

.nav-item--active .nav-link,
.nav-link[aria-current="page"] {
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.nav-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: currentColor;
    stroke: none;
}

/* ── User Card (bottom of left menu) ─────────────────────────────────────────── */
.left-menu__user {
    border-top: 1px solid var(--color-border);
    margin-top: auto;
    position: relative;
}


.user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    color: inherit;
    transition: background-color var(--transition);
    position: relative;
}

.user-card__info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.user-card__name {
    font-weight: 600;
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-card__handle {
    font-size: var(--text-xs);
    color: var(--color-text-3);
}

.user-card:hover,
.user-card:focus-visible {
    background-color: var(--color-surface-alt);
    outline: none;
}

/* Display Options button in left menu (mobile guests) */
.left-menu__options-btn {
    display: none;  /* hidden on desktop — guests use the floating button */
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 15px 8px 0px;
    border: none;
    background: none;
    color: var(--color-text-2);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.left-menu__options-btn:hover {
    background: var(--color-bg-hover);
}
.left-menu__options-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Guest sign-in row */
.user-card--guest {
    cursor: default;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px 8px 0;
}

.user-card--guest .btn {
    justify-content: center;
    flex: 1;
    font-size: var(--text-sm);
}

/* Chevron inside user-card button */
.user-card__chevron {
    width: 14px;
    height: 14px;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--color-text-3);
    transition: transform 0.2s ease;
}
[aria-expanded="true"] .user-card__chevron {
    transform: rotate(180deg);
}

/* ── User popup ─────────────────────────────────────────────────────────────── */
.user-popup {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 8px;
    right: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    padding: 6px;
    z-index: 200;
    animation: popup-in 0.15s ease;
}

/* Fixed variant for the mobile top-bar avatar button: drops downward */
.user-popup--header {
    position: fixed;
    top: calc(var(--header-height, 56px) + 6px);
    right: 8px;
    left: auto;
    bottom: auto;
    width: 220px;
    z-index: 201;
}

@keyframes popup-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.user-popup__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: none;
    background: none;
    width: 100%;
    font-family: var(--font-ui);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--transition);
    cursor: pointer;
}
.user-popup__item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text-2);
}
.user-popup__item:hover {
    background-color: var(--color-surface-alt);
}
.user-popup__item--danger {
    color: var(--color-error, #e25b5b);
}
.user-popup__item--danger svg {
    color: var(--color-error, #e25b5b);
}
.user-popup__divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px 0;
}

/* ── Locked nav items ───────────────────────────────────────────────────────── */
.nav-item--locked .nav-link--locked {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-3);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    text-align: left;
    transition: background-color var(--transition);
    opacity: 0.6;
}
.nav-item--locked .nav-link--locked:hover {
    background-color: var(--color-surface-alt);
    opacity: 0.8;
}
.nav-lock-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-left: auto;
    color: var(--color-text-3);
}

/* ── Menu Search Bar ────────────────────────────────────────────────── */
.menu-search {
    padding: 0 4px 12px;
}

.menu-search__form {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-surface-alt);
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    transition: border-color var(--transition);
}

.menu-search__form:focus-within {
    border-color: var(--color-primary);
}

.menu-search__icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--color-text-3);
    transition: color var(--transition);
}

.menu-search__form:focus-within .menu-search__icon {
    color: var(--color-primary);
}

.menu-search__input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    outline: none;
    min-width: 0;
}

.menu-search__input::placeholder {
    color: var(--color-text-3);
}

.menu-search__input::-webkit-search-cancel-button { display: none; }

.menu-search__hint {
    margin: 4px 2px 0;
    font-size: var(--text-xs);
    color: var(--color-danger);
    display: none;
}

.menu-search__hint.is-visible {
    display: block;
}
/* ── Theme Switcher Pill ──────────────────────────────────────────────────────── */
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
    background-color: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: 3px;
    margin-top: 12px;
}

.theme-switcher__btn {
    flex: 1;
    padding: 5px 4px;
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--color-text-3);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition), color var(--transition);
}

.theme-switcher__btn:hover {
    color: var(--color-text);
}

.theme-switcher__btn.is-active {
    background-color: var(--color-surface);
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* ── Content Feed ────────────────────────────────────────────────────────────── */
.content-feed {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100vh;
    scroll-behavior: smooth;
}

.feed-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: var(--color-glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
}

/* Explicit column placement so display:none on any child doesn't shift siblings */
.feed-header .feed-title       { grid-column: 1; }
.feed-header .feed-nav         { grid-column: 2; }
.feed-header .feed-header__right { grid-column: 3; }

.feed-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-header__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* ── Feed Nav (now lives inside feed-header center column) ─────────────────── */
.feed-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}


.feed-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 34px;
    padding: 0 10px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-2);
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.feed-nav__btn:hover:not(:disabled) {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary-light);
}

.feed-nav__btn:disabled,
.feed-nav__btn[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
}

.feed-nav__btn svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    flex-shrink: 0;
}

/* Centre location label / picker trigger */
.feed-nav__picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
    min-width: 65px;
    justify-content: center;
}

.feed-nav__picker:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.feed-nav__picker svg {
    width: 14px;
    height: 14px;
    stroke: var(--color-text-3);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

/* Dividers between button groups */
.feed-nav__divider {
    width: 1px;
    height: 24px;
    background-color: var(--color-border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── Picker Popover ──────────────────────────────────────────────────────────── */
.nav-picker {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    min-width: 280px;
    overflow: hidden;
    animation: picker-in 0.15s ease;
}

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

.nav-picker__inner {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nav-picker__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.nav-picker__col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-picker__label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-3);
}

.nav-picker__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
}

/* ── Highlights filter dropdown ──────────────────────────────────────────────── */
.highlights-filter {
    position: relative;
    display: flex;
    align-items: center;
}

.highlights-filter__btn {
    /* inherits .feed-nav__btn styles */
}

.highlights-filter__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
    padding: 12px;
    background-color: var(--color-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
}

.highlights-filter__panel .select-input {
    width: 100%;
}

.highlights-filter__clear {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    text-align: center;
}
.highlights-filter__clear:hover {
    background-color: var(--color-surface-hover);
}

/* When highlights is active: hide bible nav, translation select, location bar, home-only header els */
.is-highlights .feed-nav,
.is-highlights #translationSelect,
.is-highlights .feed-location,
.is-highlights .feed-title,
.is-highlights .feed-header__right {
    display: none;
}

/* Switch feed-header from grid to flex so the hl-bar spans full width */
.is-highlights .feed-header {
    display: flex;
}

/* ── Highlights mode header bar ─────────────────────────────────────────────── */
.feed-header__hl-bar {
    display: none;
}

.is-highlights .feed-header__hl-bar {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.feed-header__hl-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.feed-header__hl-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-header__hl-sub {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-header__hl-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Highlights cards: never show images */
.is-highlights .verse-card__image {
    display: none;
}

/* Restore text that was hidden behind a fallback image overlay */
.is-highlights .verse-card__text--hidden {
    position: relative;
    width: auto;
    height: auto;
    padding-left: 18px;
    clip: auto;
    white-space: normal;
    overflow: visible;
}

/* ── Scroll-aware location bar ────────────────────────────────────────────────── */
.feed-location {
    position: sticky;
    /* JS sets exact px via ResizeObserver; 57px is the pre-render fallback */
    top: 57px;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    background-color: var(--color-glass-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-2);
    letter-spacing: 0.02em;
    /* show/hide transition */
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.25s ease, opacity 0.25s ease;
    will-change: transform, opacity;
}

.feed-location.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* ── Search-active state: hide nav arrows + location bar ────────────────────── */
.feed-location.search-active {
    display: none;
}

.search-active .feed-nav__btn,
.search-active .feed-nav__divider {
    display: none;
}

/* picker icon inside the picker button (no text label needed now) */
.feed-nav__picker .picker-icon {
    width: 16px;
    height: 16px;
    stroke: var(--color-primary);
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}

.feed-nav__picker .picker-chevron {
    width: 13px;
    height: 13px;
    stroke: var(--color-text-3);
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}

/* ── feed-nav + feed-location on mobile ────────────────────────────────────── */
@media (max-width: 767px) {
    /* Remove title + translation select from the header on mobile */
    .feed-title,
    .feed-header__right {
        display: none;
    }

    /* Highlights bar: hide descriptive subtext on narrow screens */
    .feed-header__hl-sub {
        display: none;
    }

    /* Nav takes full width of the header */
    .feed-header {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 8px 12px;
    }

    /* Reset column placement so feed-nav sits in the single column */
    .feed-header .feed-nav {
        grid-column: 1;
    }

    /* JS (ResizeObserver in bible-nav.js) sets .feed-location top precisely on all sizes */
}

.verse-feed {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    max-width: calc(var(--feed-max-width) + 40px);
    width: 100%;
    margin: 0 auto;
    align-self: stretch;
}

.feed-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--color-text-3);
    font-size: var(--text-sm);
}

.feed-end {
    text-align: center;
    padding: 32px 20px;
    color: var(--color-text-3);
    font-size: var(--text-sm);
}

.feed-end a {
    color: var(--color-primary);
    font-weight: 600;
}

.feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 72px 24px;
    color: var(--color-text-3);
    font-size: var(--text-base);
}

.feed-empty__icon {
    width: 52px;
    height: 52px;
    opacity: 0.18;
    margin-bottom: 8px;
    display: block;
}

.feed-empty__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-2);
    margin: 0;
    opacity: 0.5;
}

.feed-empty__hint {
    font-size: var(--text-sm);
    color: var(--color-text-3);
    margin: 0;
}

.feed-sentinel {
    height: 1px;
    margin: 0;
}

/* ── Search Results ──────────────────────────────────────────────────────────── */

.search-header {
    padding: 16px 20px 8px;
    font-size: var(--text-base);
    color: var(--color-text-3);
}

.search-header__query {
    color: var(--color-text-1);
}

.search-highlight {
    background-color: var(--color-highlight, rgba(255, 210, 50, 0.35));
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* ── Featured Panel ──────────────────────────────────────────────────────────── */
.featured-panel {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background-color: var(--color-surface);
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}

.featured-panel__inner {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.featured-panel__close-wrap {
    display: none; /* shown only when featured is a slideout */
    justify-content: flex-end;
}

.close-featured-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-3);
    transition: background-color var(--transition), color var(--transition);
}

.close-featured-btn:hover {
    background-color: var(--color-surface-alt);
    color: var(--color-text);
}

.close-featured-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.featured-panel__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
    padding-bottom: 4px;
    border-bottom: 2px solid var(--color-primary);
    display: block;
}

/* Study Cards */
.featured-studies {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
}

.study-card {
    padding: 16px;
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: box-shadow var(--transition);
}

.study-card:hover {
    box-shadow: var(--shadow-md);
}

.study-card__title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
}

.study-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-2);
    line-height: 1.5;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Bottom Nav (mobile only) ────────────────────────────────────────────────── */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    /* Add safe-area padding for notched devices */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    z-index: 80;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    overflow: visible; /* allow home button to rise above the bar */
}

.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 3px;
    color: var(--color-text-3);
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 4px;
    transition: color var(--transition);
    cursor: pointer;
    position: relative;
}

.bottom-nav__item:hover,
.bottom-nav__item--active,
.bottom-nav__item[aria-current="page"] {
    color: var(--color-primary);
    text-decoration: none;
}

/* Active indicator: soft chip behind the icon for non-home items */
.bottom-nav__item--active:not(.bottom-nav__item--home) .nav-icon,
.bottom-nav__item[aria-current="page"]:not(.bottom-nav__item--home) .nav-icon {
    background-color: var(--color-primary-light);
    border-radius: 8px;
    padding: 4px;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
}

/* Reset browser default styling when .bottom-nav__item is a <button> */
button.bottom-nav__item {
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

button.bottom-nav__item:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    color: var(--color-text-3);
}

.bottom-nav__item .nav-icon {
    width: 24px;
    height: 24px;
}

.bottom-nav__item .nav-icon {
    width: 24px;
    height: 24px;
}

/* ── Home centre button ───────────────────────────────────────────────────────── */

.bottom-nav__item--signup {
    color: var(--color-primary);
}
.bottom-nav__item--signup span {
    font-weight: 600;
}

.bottom-nav__item--home {
    background-color: var(--color-primary);
    border-radius: 16px;
    border: 2px solid transparent; /* reserve space so active border causes no layout shift */
    color: var(--color-primary-light);
    padding: 8px 12px; /* 2px less than before to offset the always-present border */
    flex: none;
    min-width: 56px;
    align-self: flex-start;
    margin-top: -5px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
    transition: color var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.bottom-nav__item--home:hover,
.bottom-nav__item--home.bottom-nav__item--active,
.bottom-nav__item--home[aria-current="page"] {
    background-color: var(--color-primary);
    border: 2px solid #fff;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    text-decoration: none;
}

/* ── Options floating button (desktop) ───────────────────────────────────────── */
.options-float-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 70;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    opacity: 0.35;
    transition: background var(--transition), transform var(--transition), opacity var(--transition);
}
.options-float-btn:hover {
    background: var(--color-primary-hover);
    transform: scale(1.08);
    opacity: 1;
}
.options-float-btn svg {
    width: 20px;
    height: 20px;
}

/* Inside scroll view / study detail / plan detail, account for the featured panel */
.app-shell:not(.app-shell--page) .options-float-btn {
    right: calc(max(0px, (100vw - 1280px) / 2) + var(--featured-width) + 16px);
}

/* ── Options panel ───────────────────────────────────────────────────────────── */
.options-panel {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;   /* sheet slides in from bottom on mobile */
    justify-content: center;
}
.options-panel[hidden] { display: none; }

.options-panel__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    animation: optionsFadeIn 160ms ease both;
}

@keyframes optionsFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.options-panel__sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    background: var(--color-surface);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 0 0 24px;
    animation: optionsSlideUp 200ms ease both;
    box-shadow: var(--shadow-lg);
}

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

.options-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--color-border);
}

.options-panel__title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
}

.options-panel__close {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-text-3);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: color var(--transition);
}
.options-panel__close:hover { color: var(--color-text); }

.options-panel__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}
.options-panel__row--column {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.options-panel__row--column .theme-switcher {
    width: 100%;
    margin-top: 0;
}

/* ── Highlight Color Picker ───────────────────────────────────────────────────── */
.highlight-color-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.highlight-color-swatch {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    padding: 3px;
    cursor: pointer;
    transition: border-color var(--transition), transform var(--transition);
}

.highlight-color-swatch span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.highlight-color-swatch:hover {
    transform: scale(1.12);
    border-color: var(--color-text-3);
}

.highlight-color-swatch.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.highlight-color-picker--locked .highlight-color-swatch {
    opacity: 0.45;
    cursor: not-allowed;
}
.highlight-color-picker--locked .highlight-color-swatch:hover {
    transform: none;
}

.options-panel__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-2);
}

/* Toggle labels */
.options-toggle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: default;
}
.options-toggle__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}
.options-toggle__sub {
    font-size: var(--text-xs);
    color: var(--color-text-3);
}

/* Toggle switch button */
.toggle-btn {
    flex-shrink: 0;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    border: none;
    background: var(--color-border-strong);
    cursor: pointer;
    padding: 3px;
    transition: background var(--transition);
    display: flex;
    align-items: center;
}
.toggle-btn[aria-checked="true"] {
    background: var(--color-primary);
}
.toggle-btn__thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform var(--transition);
}
.toggle-btn[aria-checked="true"] .toggle-btn__thumb {
    transform: translateX(18px);
}

/* Small toggle variant (used for sub-toggles in options panel & profile) */
.toggle-btn--sm {
    width: 36px;
    height: 22px;
    padding: 2px;
}
.toggle-btn--sm .toggle-btn__thumb {
    width: 18px;
    height: 18px;
}
.toggle-btn--sm[aria-checked="true"] .toggle-btn__thumb {
    transform: translateX(14px);
}

/* Sub-toggle row — indented, slightly muted */
.options-panel__row--sub {
    padding-left: 28px;
    background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}
.options-panel__row--sub .options-toggle__label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-3);
}

/* Desktop: center panel, not bottom sheet */
@media (min-width: 768px) {
    .options-float-btn { display: flex; }   /* shown on desktop */
    .options-panel {
        align-items: center;
    }
    .options-panel__sheet {
        border-radius: var(--radius);
        max-width: 400px;
        padding-bottom: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   STUDIES PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Studies main content area ───────────────────────────────────────────────── */
.studies-page {
    overflow-y: auto;
    height: 100vh;
    padding: 0;
}

.studies-page__header {
    max-width: 720px;
    margin-bottom: 36px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.studies-page__title {
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-primary);
    margin: 0 0 8px;
}

.studies-page__subtitle {
    font-size: var(--text-base);
    color: var(--color-text-2);
    margin: 0;
}

/* ── Search ──────────────────────────────────────────────────────────────────── */
.studies-search {
    max-width: 720px;
    margin-bottom: 48px;
}

.studies-search__wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.studies-search__wrap:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.studies-search__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-text-3);
}

.studies-search__input {
    flex: 1;
    border: none;
    background: none;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    color: var(--color-text);
    outline: none;
}

.studies-search__input::placeholder {
    color: var(--color-text-3);
}

/* ── Suggestion chips ────────────────────────────────────────────────────────── */
.studies-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.study-chip {
    padding: 5px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-surface);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-2);
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.study-chip:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ── Section wrapper ─────────────────────────────────────────────────────────── */
.studies-section {
    margin-bottom: 48px;
}

.studies-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.studies-section__header .studies-section__title {
    margin-bottom: 0;
}

/* ── Contributor teaser (shown to members on studies + groups pages) ─────────── */
.contributor-teaser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.contributor-teaser__body {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--color-text-2);
}
.contributor-teaser__body svg {
    flex-shrink: 0;
    color: var(--color-primary);
}
.contributor-teaser__link {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}
.contributor-teaser__link:hover { text-decoration: underline; }
.contributor-teaser__dismiss {
    background: none; border: none; cursor: pointer;
    font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px;
    color: var(--color-text-3); transition: background .12s, color .12s;
}
.contributor-teaser__dismiss:hover { background: var(--color-border); color: var(--color-text-1); }

.studies-section__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-3);
    margin: 0 0 12px;
}

.studies-section__title svg {
    width: 14px;
    height: 14px;
    color: var(--color-text-3);
    flex-shrink: 0;
}

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

/* Hero variant: wider cards, 2-col baseline */
.study-grid--hero {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

/* List variant: tighter 3-col grid */
.study-grid--list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

/* ── Study filter bar ────────────────────────────────────────────────────────── */
.study-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.study-filter-chip {
    padding: 5px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-surface);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-2);
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.study-filter-chip:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.study-filter-chip.is-active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.study-filter-chip--more {
    border-style: dashed;
}

/* ── Study pagination + empty filter ─────────────────────────────────────────── */
.study-pagination {
    text-align: center;
    margin-top: 24px;
}

.study-empty-filter {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    padding: 2rem 0;
}

/* ── Study card ──────────────────────────────────────────────────────────────── */
.study-grid .study-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform 0.2s ease;
}

.study-grid .study-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.study-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-surface-alt);
    flex-shrink: 0;
}

.study-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.study-grid .study-card:hover .study-card__image img {
    transform: scale(1.05);
}

.study-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 3px 10px;
    border-radius: 999px;
}

.study-card__toc-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(0,0,0,0.45);
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, background .15s ease;
    backdrop-filter: blur(4px);
}
.study-card:hover .study-card__toc-btn,
.study-card:focus-within .study-card__toc-btn {
    opacity: 1;
}
.study-card__toc-btn:hover {
    background: rgba(0,0,0,0.7);
    color: #fff;
}
@media (max-width: 600px) {
    .study-card__toc-btn { opacity: 1; }
}

.plan-toc-list__item--locked { opacity: 0.5; }
.plan-toc-list__link--locked {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 20px;
    color: var(--color-text-3);
    cursor: default;
}

/* ── Shared TOC Modal (used by plans + studies) ───────────────────────────────── */
.plan-toc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    animation: planTocFadeIn .15s ease;
}
@keyframes planTocFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.plan-toc-dialog {
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: 14px;
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,.2));
    overflow: hidden;
    animation: planTocSlideUp .2s ease;
}
@keyframes planTocSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.plan-toc-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    gap: 12px;
}
.plan-toc-dialog__title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text-1);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.plan-toc-dialog__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--color-text-3);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}
.plan-toc-dialog__close:hover {
    background: var(--color-surface-alt);
    color: var(--color-text-1);
}
.plan-toc-dialog__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    overscroll-behavior: contain;
}
.plan-toc-dialog__loading,
.plan-toc-dialog__error {
    text-align: center;
    padding: 32px 20px;
    color: var(--color-text-3);
    font-size: var(--text-sm);
}
.plan-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}
.plan-toc-list__item {
    border-bottom: 1px solid var(--color-border);
}
.plan-toc-list__item:last-child {
    border-bottom: none;
}
.plan-toc-list__link {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--color-text-1);
    transition: background .12s ease;
}
.plan-toc-list__link:hover {
    background: var(--color-surface-alt);
}
.plan-toc-list__day {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-primary);
    min-width: 50px;
    flex-shrink: 0;
}
.plan-toc-list__detail {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.plan-toc-list__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-2);
}
.plan-toc-list__reading {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 600px) {
    .plan-toc-dialog {
        width: 95%;
        max-height: 85vh;
        border-radius: 14px 14px 0 0;
    }
    .plan-toc-backdrop {
        align-items: flex-end;
    }
}

.study-card__body {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.study-card__title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.study-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-2);
    line-height: 1.6;
    flex: 1;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.study-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.study-card__count {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-3);
}

.study-card__count svg {
    width: 13px;
    height: 13px;
}

/* ── Hero study card (featured) ─────────────────────────────────────────────── */
.study-card--hero {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    cursor: pointer;
    display: block;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    border: none;
    background: var(--color-surface-alt);
    outline: 2px solid transparent;
    outline-offset: 3px;
}
.study-card--hero:hover,
.study-card--hero:focus-visible {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    outline-color: var(--color-primary);
}
.study-card--hero:focus-visible {
    outline-style: solid;
}
.study-card--hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.study-card--hero:hover .study-card--hero__img,
.study-card--hero:focus-visible .study-card--hero__img {
    transform: scale(1.05);
}
.study-card--hero__overlay {
    position: absolute;
    inset: 0;
    /* Stronger scrim toward the bottom so text is always readable */
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.05) 0%,
        rgba(0,0,0,0.18) 40%,
        rgba(0,0,0,0.72) 100%
    );
}
.study-card--hero__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.study-card--hero__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    /* reset anything inherited from .study-card__badge layout */
    align-self: unset;
    margin-bottom: 0;
}
/* ── Featured panel: compact 125px tall cards ─────────────────────── */
.featured-studies .study-card--hero {
    aspect-ratio: unset;
    height: 125px;
}
.featured-studies .study-card--hero.study-card--hero--tall {
    height: 150px;
}
.study-card--hero__title {
    font-size: var(--text-lg);
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.study-card--hero__desc {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.82);
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
/* Right-panel featured studies: let desc expand when title is short */
.featured-studies .study-card--hero__title {
    flex-shrink: 0;
}
.featured-studies .study-card--hero__desc {
    -webkit-line-clamp: 2;
    flex: 1;
    min-height: 0;
}
/* Edit shortcut — top-right corner, only visible on My Studies hero cards */
.study-card--hero__edit-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 4px 10px;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: #fff;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background 0.18s ease;
}
.study-card--hero__edit-btn:hover {
    background: rgba(0,0,0,0.7);
}
/* Featured panel: tighter content padding */
.featured-studies .study-card--hero__content {
    padding: 14px 14px 14px;
}

/* ── Results / empty state ───────────────────────────────────────────────────── */
.studies-empty {
    font-size: var(--text-sm);
    color: var(--color-text-3);
    font-style: italic;
    padding: 24px 0;
}

/* ── Studies page responsive ─────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .app-shell--page {
        grid-template-columns: 1fr;
    }
    .studies-page {
        height: auto;
        min-height: 100vh;
    }
}

@media (max-width: 767px) {
    .study-grid {
        grid-template-columns: 1fr;
    }
    .page-sticky-header__right .btn-label {
        display: none;
    }
    .page-sticky-header__right .persp-search-trigger {
        padding: 7px;
    }
    .page-sticky-header__right .btn--sm {
        padding: 6px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PERSPECTIVES PAGE
══════════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────────────────────────────────── */
.perspectives-page {
    overflow-y: auto;
    height: 100vh;
    padding: 0;
}

.perspectives-page__header {
    max-width: 720px;
    margin-bottom: 36px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.perspectives-page__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.perspectives-page__title {
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-primary);
    margin: 0 0 6px;
}

.perspectives-page__subtitle {
    font-size: var(--text-base);
    color: var(--color-text-2);
    margin: 0;
}

/* ── Search trigger ──────────────────────────────────────────────────────────── */
.persp-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-3);
    font-size: var(--text-sm);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color var(--transition), color var(--transition);
}
.persp-search-trigger:hover {
    border-color: var(--color-text-3);
    color: var(--color-text);
}

/* Wider search trigger for studies page */
.persp-search-trigger--studies,
.persp-search-trigger--wide {
    min-width: 250px;
}

/* ── Type badge ──────────────────────────────────────────────────────────────── */
.persp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}

.persp-badge--article {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.persp-badge--link {
    background: var(--color-surface-alt);
    color: var(--color-text-2);
    border: 1px solid var(--color-border);
}

.persp-badge--draft {
    background: var(--color-warning);
    color: #fff;
}

/* ── Drafts section ──────────────────────────────────────────────────────────── */
.persp-drafts-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
}
.persp-drafts-section .persp-section-label {
    padding-bottom: 0;
}
.persp-card--draft {
    /*border: 1px dashed var(--color-primary-light);*/
    opacity: 0.85;
}
.persp-card--draft .persp-card__body {
    padding: 0px 14px;
}
.persp-card--draft:hover { opacity: 1; }

/* ── Author chip ─────────────────────────────────────────────────────────────── */
.persp-author-chip {
    display: flex;
    align-items: center;
    gap: 10px;
}
.persp-author-chip--md,
.persp-author-chip--sm { gap: 7px; }
.persp-author-chip__avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
    overflow: hidden;
    line-height: 1.2;
}
.persp-author-chip--sm .persp-author-chip__avatar {
    width: 26px;
    height: 26px;
    font-size: 0.65rem;
}
.persp-author-chip--md .persp-author-chip__avatar {
    width: 32px;
    height: 32px;
    font-size: 0.65rem;
}
.persp-author-chip__name--link {
    text-decoration: none;
}
.persp-author-chip__name--link:hover {
    text-decoration: underline;
}
.persp-author-chip__date {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    line-height: 1.2;
}

/* ── Author bio sections ───────────────────────────────────────────────────── */
.persp-author-bio {
    margin: 18px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.persp-author-bio__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.persp-author-bio__text,
.persp-author-profile-hero__bio {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--color-text-2);
}
.persp-author-bio__text {
    font-style: italic;
    font-weight: 200;
}
.persp-author-chip__name--about {
    color: var(--color-text-3);
}
.persp-author-bio__more {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.persp-author-bio__more:hover {
    text-decoration: underline;
}

.persp-author-profile-hero {
    margin: 16px 0 8px;
    padding: 32px 48px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 720px;
}
.persp-author-profile-hero__top {
    display: flex;
    align-items: center;
    gap: 16px;
}
.persp-author-profile-hero__avatar {
    width: 100px;
    height: 100px;
    border-radius: 999px;
    overflow: hidden;
    flex: 0 0 100px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.14), rgba(30, 64, 175, 0.08));
    color: var(--color-primary);
    font-weight: 700;
    font-size: 2rem;
}
.persp-author-profile-hero__avatar .persp-author-chip__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.persp-author-profile-hero__identity {
    min-width: 0;
}
.persp-author-profile-hero__name {
    margin: 0;
    font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.8rem);
    line-height: 1.2;
    font-family: var(--font-heading);
    color: var(--color-text-1);
}
.persp-author-profile-hero__handle {
    margin: 6px 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-3);
}
.persp-author-profile-hero__divider {
    width: 100%;
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--color-border), transparent);
    margin: 0;
}
.persp-author-profile-hero__bio {
    max-width: 72ch;
}

@media (max-width: 680px) {
    .persp-author-profile-hero__top {
        align-items: flex-start;
        gap: 12px;
    }
    .persp-author-profile-hero__avatar {
        width: 84px;
        height: 84px;
        flex-basis: 84px;
        font-size: 1.55rem;
    }
}

/* ── Featured post card ──────────────────────────────────────────────────────── */
.persp-featured-section {
    margin-bottom: 48px;
}
.persp-featured {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow var(--transition);
}

/* Horizontal layout when container is wide enough */
@container (min-width: 775px) {
    .persp-featured {
        display: grid;
        grid-template-columns: 340px 1fr;
    }
    .persp-featured__image-link { height: 100%; }
    .persp-featured__image {
        aspect-ratio: auto;
        height: 100%;
    }
}
.persp-featured:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
.persp-featured__image-link { display: block; position: relative; }
.persp-featured__image {
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--color-surface-alt);
}
.persp-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.persp-featured:hover .persp-featured__image img { transform: scale(1.03); }
.persp-featured__body {
    padding: 22px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.persp-featured__meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.persp-featured__title {
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
}
.persp-featured__title a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition);
}
.persp-featured__title a:hover { color: var(--color-primary); }
.persp-featured__subtitle {
    font-size: var(--text-base);
    color: var(--color-text-2);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.persp-featured__footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* ── Section label ───────────────────────────────────────────────────────────── */
.persp-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-3);
    margin: 0 0 12px;
}
.persp-section-label svg {
    width: 14px;
    height: 14px;
    color: var(--color-text-3);
    flex-shrink: 0;
}


/* ── Article list ────────────────────────────────────────────────────────────── */
.persp-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Article card ────────────────────────────────────────────────────────────── */
.persp-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
    padding: 24px 0;
    border-bottom: 1px dashed var(--color-primary-light);
}

.persp-card:first-child { border-top: none; }
.persp-card--draft:first-child { border-top: 1px dashed var(--color-primary-light); }

.persp-card__image {
    order: 1;
    display: block;
    width: 200px;
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface-alt);
    text-decoration: none;
    position: relative;
}

/* ── External-link overlay badge ────────────────────────────────────────────── */
.persp-ext-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
}
.persp-card__image .persp-ext-badge {
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.persp-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.persp-card:hover .persp-card__image img { transform: scale(1.04); }

.persp-card__body {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.persp-card__meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.persp-card__read-time {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    font-weight: 500;
}

.persp-card__title {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.persp-card__title-link {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition);
}

.persp-card__title-link:hover { color: var(--color-primary); }

.persp-card__subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-2);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.persp-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.persp-card__author {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-2);
}

.persp-card__date { font-size: var(--text-xs); color: var(--color-text-3); }

.persp-card__edit-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-text-3);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.persp-card__edit-btn:hover { color: var(--color-primary); background: var(--color-surface-alt); }

.persp-card__discard-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-text-3);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.persp-card__discard-btn:hover { color: var(--color-danger); background: var(--color-surface-alt); }

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.persp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 80px 24px;
    color: var(--color-text-3);
    text-align: center;
}
.persp-empty svg { width: 48px; height: 48px; opacity: 0.4; }
.persp-empty p { font-size: var(--text-sm); font-style: italic; margin: 0; }

/* ── Not found ───────────────────────────────────────────────────────────────── */
.persp-not-found {
    padding: 48px 0;
    color: var(--color-text-2);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Single article view ─────────────────────────────────────────────────────── */
.persp-article { max-width: 900px; margin: 0 auto; }

.persp-article__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-2);
    text-decoration: none;
    margin-bottom: 32px;
    transition: color var(--transition);
}
.persp-article__back svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--transition); }
.persp-article__back:hover { color: var(--color-primary); }
.persp-article__back:hover svg { transform: translateX(-3px); }

.persp-article__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.persp-article__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text);
    margin: 0;
}

.persp-article__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-2);
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

.persp-article__byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.persp-article__read-time {
    font-size: var(--text-sm);
    color: var(--color-text-3);
    white-space: nowrap;
}

/* ── Divider ─────────────────────────────────────────────────────────────────── */
.persp-divider { border: none; border-top: 1px solid var(--color-border); margin: 0; }

/* ── Action bar (heart + share) ──────────────────────────────────────────────── */
.persp-article__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.persp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--color-text-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: color var(--transition), background var(--transition);
}
.persp-action-btn:hover { background: var(--color-surface-alt); color: var(--color-text-2); }

/* Heart toggle */
.persp-action-btn__heart-filled { display: none; }
.persp-action-btn--heart.is-liked .persp-action-btn__heart-outline { display: none; }
.persp-action-btn--heart.is-liked .persp-action-btn__heart-filled { display: block; }
.persp-action-btn--heart.is-liked { color: #e53e3e; }
.persp-action-btn--heart.is-liked:hover { color: #c53030; background: #fff5f5; }

/* Edit link */
.persp-action-btn--edit { color: var(--color-primary); text-decoration: none; }
.persp-action-btn--edit:hover { color: var(--color-primary); background: var(--color-surface-alt); }

/* ── Cover figure (below action bar) ────────────────────────────────────────── */
.persp-article__figure {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface-alt);
    margin: 0 0 32px;
}
.persp-article__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.persp-article__link-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 0;
}
.persp-article__source { font-size: var(--text-sm); color: var(--color-text-3); font-style: italic; }

/* ── Prose body ──────────────────────────────────────────────────────────────── */
.prose {
    font-family: var(--font-verse);
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--color-text);
}
.prose h2 { font-size: var(--text-xl); font-weight: 700; margin: 2em 0 0.6em; }
.prose h3 { font-size: var(--text-lg); font-weight: 700; margin: 1.8em 0 0.5em; }
.prose p  { margin: 0 0 1.2em; }
.prose blockquote {
    border-left: 3px solid var(--color-primary);
    margin: 1.5em 0;
    padding: 0.5em 1.25em;
    color: var(--color-text-2);
    font-style: italic;
}
.prose a  { color: var(--color-primary); text-decoration: underline; }
.prose ul, .prose ol { padding-left: 1.5em; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose img { max-width: 100%; border-radius: var(--radius-sm); margin: 1.5em 0; }
.prose hr { border: none; border-top: 1px solid var(--color-border); margin: 2em 0; }

/* ── Search Modal ────────────────────────────────────────────────────────────── */
.persp-search-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
}
.persp-search-modal[hidden] { display: none; }
.persp-search-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
}
.persp-search-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
}
.persp-search-modal__input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
}
.persp-search-modal__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-3); }
.persp-search-modal__input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--text-base);
    color: var(--color-text);
    outline: none;
    min-width: 0;
}
.persp-search-modal__input::placeholder { color: var(--color-text-3); }
.persp-search-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--color-text-3);
    cursor: pointer;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: color var(--transition), background var(--transition);
}
.persp-search-modal__close:hover { color: var(--color-text); background: var(--color-surface-alt); }
.persp-search-modal__results {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    max-height: 380px;
    overflow-y: auto;
}
.persp-search-modal__result-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    transition: background var(--transition);
}
.persp-search-modal__result-link:hover { background: var(--color-surface-alt); text-decoration: none; }
.persp-search-modal__result-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm, 6px);
    object-fit: cover;
    flex-shrink: 0;
}
.persp-search-modal__result-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.persp-search-modal__result-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.persp-search-modal__result-meta { font-size: var(--text-xs); color: var(--color-text-3); }
.persp-search-modal__section-label {
    padding: 8px 16px 4px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-3);
    list-style: none;
    pointer-events: none;
}

.persp-search-modal__empty {
    padding: 20px 16px;
    font-size: var(--text-sm);
    color: var(--color-text-3);
    text-align: center;
    margin: 0;
}

/* ── Perspectives page responsive ────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .perspectives-page {
        height: auto;
        min-height: 100vh;
    }
}

@media (max-width: 767px) {
    .perspectives-page__title-row {
        flex-direction: column;
        gap: 12px;
    }

    .persp-featured-section {
        margin-bottom: 0;
    }

    .persp-featured {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--color-border);
        background: none;
        box-shadow: none;
        padding: 24px 0;
    }
    .persp-featured:hover { box-shadow: none; }
    .persp-featured__image-link {
        order: 1;
        height: auto;
    }
    .persp-featured__image {
        aspect-ratio: 16 / 9;
        border-radius: var(--radius-sm);
        height: auto;
    }
    .persp-featured__body {
        order: 2;
        padding: 0;
        gap: 6px;
    }
    .persp-featured__title {
        font-size: var(--text-base);
        font-weight: 700;
    }
    .persp-featured__subtitle {
        font-size: var(--text-sm);
        -webkit-line-clamp: 2;
    }
    .persp-featured__footer {
        gap: 10px;
    }

    .persp-card {
        grid-template-columns: 1fr;
    }

    .persp-card__image {
        order: 1;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .persp-card__body {
        order: 2;
    }

    .persp-search-modal {
        padding-top: 24px;
    }
}

/* ── Perspective article inline comments ─────────────────────────────────────── */
.persp-comments {
    max-width: 900px;
    margin: 40px auto 0;
    border-top: 1px solid var(--color-border);
    padding-top: 32px;
}
.persp-comments__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 20px;
}
.persp-comments__heading svg { color: var(--color-text-3); flex-shrink: 0; }
.persp-comments__group-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--color-surface-alt);
    color: var(--color-text-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px 10px;
    margin-left: auto;
}
.persp-comments__loading {
    font-size: var(--text-sm);
    color: var(--color-text-3);
    text-align: center;
    padding: 16px 0;
}
.persp-comments__empty {
    font-size: var(--text-sm);
    color: var(--color-text-3);
    text-align: center;
    padding: 16px 0;
    margin: 0;
}
.persp-comments__list { display: flex; flex-direction: column; gap: 0; }
.persp-comment {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}
.persp-comment:last-child { border-bottom: none; }
.persp-comment__avatar {
    flex-shrink: 0;
}
.persp-comment__content { flex: 1; min-width: 0; }
.persp-comment__meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.persp-comment__author { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.persp-comment__author--clickable { cursor: pointer; }
.persp-comment__author--clickable:hover { color: var(--color-primary); }
.persp-comment__time { font-size: var(--text-xs); color: var(--color-text-3); }
.persp-comment__body {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-2);
    white-space: pre-wrap;
    word-break: break-word;
}
.persp-comments__form {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.persp-comments__input {
    flex: 1;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color var(--transition);
}
.persp-comments__input:focus { border-color: var(--color-primary); }
.persp-comment__actions { margin-top: 6px; }
.persp-comments__more {
    display: block;
    width: 100%;
    padding: 8px;
    border: none;
    background: none;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.persp-comments__more:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════════
   NAV BADGE + DISABLED NAV ITEM
══════════════════════════════════════════════════════════════════════════════ */

.nav-badge {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--color-surface-alt);
    color: var(--color-text-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px 8px;
    flex-shrink: 0;
    pointer-events: none;
}

/* Notification-count badge (colored pill) */
.nav-item--has-badge .nav-badge {
    background: var(--color-primary, #4f46e5);
    color: #fff;
    border: none;
    text-transform: none;
    letter-spacing: 0;
    min-width: 18px;
    text-align: center;
    font-size: 0.6rem;
    padding: 1px 6px;
}

.nav-item--disabled .nav-link {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   NOTIFICATIONS PAGE
══════════════════════════════════════════════════════════════════════════════ */

.notif-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.notif-list {
    display: flex;
    flex-direction: column;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    cursor: pointer;
}

.notif-item:hover {
    background: var(--color-glass-bg);
    text-decoration: none;
}

.notif-item--unread {
    background: color-mix(in srgb, var(--color-primary, #4f46e5) 6%, transparent);
}

.notif-item--unread:hover {
    background: color-mix(in srgb, var(--color-primary, #4f46e5) 10%, transparent);
    text-decoration: none;
}

.notif-item__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-text-3);
    margin-top: 2px;
}

.notif-item__icon svg {
    width: 100%;
    height: 100%;
}

.notif-item__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-item__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notif-item__avatar-initials {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-2);
}

.notif-item__content {
    flex: 1;
    min-width: 0;
}

.notif-item__heading {
    font-size: var(--text-sm);
    color: var(--color-text);
    margin: 0;
    line-height: 1.35;
}

.notif-item__heading strong {
    font-weight: 600;
}

.notif-item__detail {
    font-size: var(--text-xs);
    color: var(--color-text-2);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-item__msg-title {
    color: var(--color-text-3);
    font-weight: 600;
    font-size: var(--text-sm);
}

.notif-item__time {
    font-size: 0.65rem;
    color: var(--color-text-3);
    margin-top: 2px;
    display: block;
}

.notif-item__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary, #4f46e5);
    margin-top: 6px;
}

.notif-loading {
    text-align: center;
    padding: 32px 16px;
    color: var(--color-text-3);
    font-size: var(--text-sm);
}

.notif-load-more {
    text-align: center;
    padding: 16px;
}

.notif-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--color-text-3);
}

.notif-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.4;
}

/* ── Reflections page ────────────────────────────────────────────────────────── */
.reflections-page {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh;
    padding: 0;
}

.reflections-page__header {
    max-width: 960px;
    margin-bottom: 36px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.reflections-page__title {
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-primary);
    margin: 0 0 8px;
}

.reflections-page__subtitle {
    font-size: var(--text-base);
    color: var(--color-text-2);
    margin: 0;
}

.reflections-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.reflections-body {
    flex: 1;
    min-width: 0;
    padding: 32px 48px 80px;
    overflow-y: auto;
}

/* ── Timeline sidebar ────────────────────────────────────────────────────────── */
.refl-timeline {
    width: 200px;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 24px 16px 80px 0;
    border-left: 1px solid var(--color-border);
}

.refl-timeline__inner {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 20px;
}

/* Vertical line behind dots */
.refl-timeline__inner::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 7px;
    width: 2px;
    background: var(--color-border);
    border-radius: 1px;
}

.refl-timeline__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    text-align: left;
    font-family: var(--font-ui);
    position: relative;
}

.refl-timeline__item:hover {
    background: var(--color-surface-alt);
}

.refl-timeline__item.is-active {
    background: var(--color-primary-light);
}

.refl-timeline__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border);
    flex-shrink: 0;
    transition: background var(--transition), box-shadow var(--transition);
    position: absolute;
    left: -16px;
}

.refl-timeline__item:hover .refl-timeline__dot,
.refl-timeline__item.is-active .refl-timeline__dot {
    background: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.refl-timeline__label {
    flex: 1;
    min-width: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.refl-timeline__item.is-active .refl-timeline__label {
    color: var(--color-primary);
}

.refl-timeline__count {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-3);
    background: var(--color-surface-alt);
    border-radius: 10px;
    padding: 1px 6px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.refl-timeline__item.is-active .refl-timeline__count {
    background: var(--color-primary);
    color: #fff;
}

.refl-timeline__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 12px;
    color: var(--color-text-3);
}
.refl-timeline__empty svg {
    margin-bottom: 10px;
    opacity: .45;
}
.refl-timeline__empty p {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}
.refl-timeline__empty span {
    font-size: var(--text-xs);
    margin-top: 4px;
    opacity: .7;
}

/* ── Sticky header ───────────────────────────────────────────────────────────── */
.reflections-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background-color: var(--color-glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
}

.reflections-header__left {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.reflections-header__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reflections-header__sub {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reflections-header__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Filter dropdown ─────────────────────────────────────────────────────────── */
.refl-filter {
    position: relative;
    display: flex;
    align-items: center;
}

.refl-filter__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-2);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.refl-filter__btn:hover,
.refl-filter__btn.is-active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.refl-filter__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
    padding: 14px;
    background-color: var(--color-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
}

.refl-filter__label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-3);
    margin: 0 0 2px;
}

.refl-filter__panel select,
.refl-filter__panel input[type="number"] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-family: var(--font-ui);
}

.refl-filter__range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.refl-filter__range input {
    flex: 1;
    width: 0;
}

.refl-filter__apply {
    padding: 7px 14px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-ui);
}

.refl-filter__apply:hover {
    background: var(--color-primary-hover);
}

.refl-filter__sep {
    height: 1px;
    background: var(--color-border);
    margin: 2px 0;
}

.refl-filter__clear {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: var(--text-sm);
    color: var(--color-text-2);
    cursor: pointer;
    font-family: var(--font-ui);
    text-align: center;
}

.refl-filter__clear:hover {
    background: var(--color-surface);
}

.refl-filter__switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
}

.refl-filter__switch-label {
    font-size: var(--text-sm);
    color: var(--color-text-2);
}

/* ── Print button ────────────────────────────────────────────────────────────── */
.refl-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-2);
    font-size: var(--text-sm);
    font-family: var(--font-ui);
    cursor: pointer;
    white-space: nowrap;
}

.refl-print-btn:hover {
    background: var(--color-surface);
    color: var(--color-text);
}

/* ── Book sections ───────────────────────────────────────────────────────────── */
.reflections-book {
    margin-bottom: 48px;
}

.reflections-book__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-3);
    margin: 0 0 12px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--color-border);
    width: auto;
    position: relative;
}

/* ── Chapter navigation (in book heading) ────────────────────────────────────── */
.refl-ch-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
}

.refl-ch-nav__label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    margin-right: 4px;
    white-space: nowrap;
}

.refl-ch-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-2);
    cursor: pointer;
    padding: 0;
    transition: background var(--transition), color var(--transition);
}

.refl-ch-nav__btn:hover:not(:disabled) {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.refl-ch-nav__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ── Chapter picker popover ──────────────────────────────────────────────────── */
.refl-ch-picker {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 160px;
    max-width: 280px;
    padding: 10px;
    background: var(--color-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.refl-ch-picker__title {
    width: 100%;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-3);
    margin-bottom: 2px;
}

.refl-ch-picker__item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-family: var(--font-ui);
    cursor: pointer;
    transition: background var(--transition);
}

.refl-ch-picker__item:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.refl-ch-picker__item.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.refl-ch-picker__item--all {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
    font-weight: 600;
}

.refl-ch-picker__count {
    font-size: 10px;
    opacity: 0.5;
    font-weight: 400;
}

/* ── Individual notes ────────────────────────────────────────────────────────── */
.reflections-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 0;
    margin-bottom: 6px;
    border-bottom: 1px dashed var(--color-primary-light);
}

.reflections-note__meta {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
}

.reflections-note__ref {
    font-size: var(--text-sm);
    font-weight: 600;
}

.reflections-note__ref a {
    color: var(--color-primary);
    text-decoration: none;
}

.reflections-note__ref a:hover {
    text-decoration: underline;
}

.reflections-note__date {
    font-size: var(--text-xs);
    color: var(--color-text-3);
}

.reflections-note__verse {
    font-size: var(--text-sm);
    color: var(--color-text-3);
    line-height: 1.65;
    font-style: italic;
    padding: 0 0 6px 0;
    min-height: 1.2em; /* reserve space while loading */
}

/* Range verse lines inside the preview */
.refl-verse-line {
    display: block;
}

.refl-verse-num {
    font-style: normal;
    font-size: 0.72em;
    font-weight: 600;
    vertical-align: super;
    color: var(--color-text-3);
    margin-right: 3px;
    opacity: 0.7;
}

.refl-verse-text {
    /* inherits italic + color from parent */
}

.reflections-note__content {
    font-size: var(--text-sm);
    line-height: 1.75;
    color: var(--color-text);
    padding-left: 8px;
    margin-left: 10px;
    border-left: 2px solid var(--color-border);
}

.reflections-note__content img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    margin: 6px 0;
}

.reflections-note__content blockquote {
    margin: 8px 0;
    padding: 8px 14px;
    border-left: 3px solid var(--color-primary-light);
    color: var(--color-text-2);
    font-style: italic;
}

.reflections-note__content ul {
    padding-left: 20px;
    margin: 6px 0;
}

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.reflections-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 72px 24px;
    text-align: center;
}

.reflections-empty__icon {
    width: 52px;
    height: 52px;
    opacity: 0.18;
    color: var(--color-text);
}

.reflections-empty__title {
    font-size: var(--text-lg);
    font-weight: 700;
    opacity: 0.5;
    margin: 0;
}

.reflections-empty__hint {
    font-size: var(--text-sm);
    color: var(--color-text-3);
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .reflections-page {
        height: auto;
        min-height: 100vh;
    }

    .reflections-body {
        padding: 24px 20px calc(var(--bottom-nav-height) + 24px);
    }

    .refl-timeline {
        display: none;
    }
}

@media (max-width: 767px) {
    .reflections-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .reflections-note {
        gap: 6px;
    }

    .reflections-note__content {
        border-left: none;
        padding-left: 0;
    }
}

/* ── Reflections Panel — user notes in featured panel ────────────────────────── */
.reflections-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}
.reflections-note-item {
    padding: 10px 12px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.reflections-note-item__ref {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}
.reflections-note-item__body {
    font-size: var(--text-sm);
    color: var(--color-text-2);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}
.reflections-note-item__body.is-expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}
.reflections-note-item__body p { margin: 0 0 4px; }
.reflections-note-item__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}
.reflections-note-item__more {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin-top: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
}
.reflections-note-item__more:hover { text-decoration: underline; }
.reflections-empty {
    font-size: var(--text-sm);
    color: var(--color-text-3);
    padding: 8px 0;
    margin: 0;
}

/* Locked toggle (guest state) */
.toggle-btn--locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}
.toggle-btn__lock {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: var(--color-text-3);
}

/* ── Context Panel — resource items ─────────────────────────────────────────── */
.context-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.context-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition: box-shadow var(--transition), border-color var(--transition);
    font-family: inherit;
    font-size: inherit;
    color: var(--color-text);
}

.context-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.context-item__play {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
}

.context-item__play svg {
    width: 18px;
    height: 18px;
}

.context-item__thumb {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm, 6px);
    object-fit: cover;
}

.context-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.context-item__source {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    line-height: 1;
}

.context-item__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Video Modal ─────────────────────────────────────────────────────────────── */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal[hidden] {
    display: none;
}

.video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(2px);
}

.video-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(90vw, 880px);
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.video-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.video-modal__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-modal__close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-3);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition);
}

.video-modal__close:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

/* 16:9 aspect ratio wrapper */
.video-modal__iframe-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.video-modal__iframe-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── Print ───────────────────────────────────────────────────────────────────── */
@page {
    margin: 12mm 15mm 13mm;
}

@media print {
    .left-menu,
    .bottom-nav,
    .mobile-header,
    .refl-timeline {
        display: none !important;
    }

    .reflections-layout {
        display: block !important;
    }

    /* Kill the sticky header completely — position:sticky can still reserve
       height in print flow even when display:none in some browsers */
    .reflections-header {
        display: none !important;
        position: static !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    /* Reset all viewport-height constraints so content determines page length */
    .app-shell {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-rows: none !important;
        overflow: visible !important;
        padding: 0 !important;  /* clear responsive.css padding-top: var(--header-height) */
    }

    .app-main,
    .app-main > * {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .reflections-page {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .reflections-body {
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 0 48px !important;
        margin: 0 !important;
    }

    /* First book heading flush to top — no gap from hidden sticky header */
    .reflections-book:first-child {
        margin-top: 0 !important;
    }

    .reflections-book {
        page-break-inside: avoid;
    }

    .reflections-note {
        page-break-inside: avoid;
        margin-bottom: 4px !important;
    }

    .reflections-note__date {
        display: none !important;
    }

    .reflections-book__heading {
        color: #aaa !important;
    }

    .reflections-note__content {
        padding-left: 12px !important;
    }

    /* Print-only footer — sits in the @page bottom margin, below all content */
    .reflections-print-footer {
        display: block !important;
        position: fixed;
        bottom: 4mm;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 9pt;
        color: #999;
        letter-spacing: 0.02em;
    }
}

/* Hide print-only footer on screen */
.reflections-print-footer {
    display: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE STICKY HEADER — shared by Studies, Perspectives list, Groups
   Mirrors the reflections-header pattern.
══════════════════════════════════════════════════════════════════════════════ */
.page-sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background-color: var(--color-glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
}

.page-sticky-header__left {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.page-sticky-header__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-sticky-header__sub {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-sticky-header__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Page content area below the sticky header */
.page-content {
    padding: 32px 48px 80px;
    container-type: inline-size;
}

/* Article and 404 views inside perspectives-page need their own padding
   now that the page shell has padding:0 */
.persp-article {
    padding: 40px 48px 80px;
}

.persp-not-found {
    padding: 40px 48px 60px;
}

@media (max-width: 1023px) {
    .page-content {
        padding: 24px 24px calc(var(--bottom-nav-height) + 24px);
    }
    .persp-article,
    .persp-not-found {
        padding: 24px 24px calc(var(--bottom-nav-height) + 24px);
    }
}

@media (max-width: 767px) {
    .page-sticky-header__sub { display: none; }
    .page-content {
        padding: 20px 16px calc(var(--bottom-nav-height) + 20px);
    }
    .persp-article,
    .persp-not-found {
        padding: 20px 16px calc(var(--bottom-nav-height) + 20px);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   STUDY BUILDER PAGE
══════════════════════════════════════════════════════════════════════════════ */
.study-builder-page {
    overflow-y: auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.builder-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    color: var(--color-text-3);
    text-decoration: none;
    transition: color var(--transition);
}
.builder-back:hover { color: var(--color-primary); text-decoration: none; }
.builder-back svg { width: 13px; height: 13px; flex-shrink: 0; }

.builder-content {
    padding: 32px 48px 100px;
    max-width: 820px;
    flex: 1 0 auto;
}

/* Meta fields */
.builder-meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-border);
}

.builder-meta__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.builder-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.builder-field__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-2);
}

.builder-field__input,
.builder-field__textarea {
    padding: 10px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.builder-field__input:focus,
.builder-field__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.builder-field__input.is-invalid {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger) 18%, transparent);
}

.builder-field__textarea {
    min-height: 72px;
    resize: vertical;
    line-height: 1.6;
}

.builder-field--check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.builder-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-1);
    cursor: pointer;
}
.builder-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.builder-field__hint {
    font-size: var(--text-xs);
    color: var(--color-text-3);
}

.builder-field__hint.is-error {
    color: var(--color-danger);
}

.builder-cover-upload {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.builder-cover-remove-btn {
    flex: 0 0 auto;
}

.builder-cover-upload input[type="file"] {
    max-width: 100%;
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: var(--text-sm);
    color: var(--color-text-2);
}

.builder-cover-upload input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 7px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text-1);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.builder-cover-upload input[type="file"]::-webkit-file-upload-button {
    margin-right: 10px;
    padding: 7px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text-1);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.builder-cover-upload input[type="file"]:hover::file-selector-button,
.builder-cover-upload input[type="file"]:hover::-webkit-file-upload-button {
    background: var(--color-accent-fill);
}

.builder-cover-upload input[type="file"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.builder-field__input.is-disabled,
.builder-field__input:disabled {
    background: var(--color-bg);
    color: var(--color-text-3);
    cursor: not-allowed;
    opacity: .8;
}

/* Sections */
/* Cover image preview */
.builder-cover-preview {
    display: none;
    margin-top: 8px;
    border-radius: var(--radius);
    overflow: hidden;
}
.builder-cover-preview.is-visible { display: block; }
.builder-cover-preview.is-loading,
.builder-cover-preview.is-error { display: block; }
.builder-cover-preview img {
    max-width: 100%;
    max-height: 125px;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
}
.builder-cover-preview.is-error img,
.builder-cover-preview.is-loading img { display: none; }
.builder-cover-preview__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.builder-cover-preview__msg {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    padding: 4px 0;
}
.builder-cover-preview.is-error .builder-cover-preview__msg {
    color: var(--color-danger);
}

.builder-sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 16px;
}

.builder-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.builder-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    border-radius: var(--radius) var(--radius) 0 0;
}

.builder-section__num {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-3);
    white-space: nowrap;
}

.builder-section__lock-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--color-text-3);
}
.builder-section__lock-icon svg {
    width: 100%;
    height: 100%;
}

.builder-section__title-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    padding: 4px 0;
    min-width: 0;
    outline: none;
}

.builder-section__title-input::placeholder {
    color: var(--color-text-3);
    font-weight: 400;
}

.builder-section__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--color-text-3);
    cursor: pointer;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
}
.builder-section__toggle:hover {
    background: var(--color-accent-fill);
    color: var(--color-text);
}
.builder-section__toggle svg { width: 16px; height: 16px; }

.builder-section__menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--color-text-3);
    cursor: pointer;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
}
.builder-section__menu-btn:hover {
    background: var(--color-accent-fill);
    color: var(--color-text);
}
.builder-section__menu-btn svg { width: 14px; height: 14px; }

.builder-intro-empty-hint {
    display: block;
    padding: 10px;
    font-style: italic;
}

/* Collapsed section hides its body */
.builder-section.is-collapsed .builder-section__body { display: none; }
.builder-section.is-collapsed .builder-section__head { border-bottom: none; }

/* 3-dot dropdown menu */
.builder-section-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 200;
    min-width: 220px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 4px 0;
    margin-top: 4px;
}
.builder-section-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}
.builder-section-menu__item:hover {
    background: var(--color-accent-fill);
}
.builder-section-menu__item svg { width: 16px; height: 16px; flex-shrink: 0; }
.builder-section-menu__item--danger { color: var(--color-danger); }
.builder-section-menu__item--danger:hover { background: rgba(211,47,47,0.08); }

.builder-section__items {
    display: flex;
    flex-direction: column;
}

/* Item */
.builder-item {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--color-border);
}
.builder-item:last-child { border-bottom: none; }

.builder-item__type-icon {
    width: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14px;
    color: var(--color-text-3);
    border-right: 1px solid var(--color-border);
}
.builder-item__type-icon svg { width: 15px; height: 15px; }

.builder-item__body {
    flex: 1;
    padding: 10px 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.builder-item__actions {
    width: 40px;
    flex-shrink: 0;
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.builder-item__move,
.builder-item__drag-handle,
.builder-item__remove {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-3);
    border-bottom: 1px solid var(--color-border);
    transition: color var(--transition), background var(--transition);
}
.builder-item__actions > *:last-child { border-bottom: none; }

.builder-item__move,
.builder-item__remove {
    flex: 0 0 30px;
}

.builder-item__drag-handle {
    flex: 1 1 auto;
    min-height: 38px;
}

.builder-item__remove {
    margin-top: auto;
}

.builder-item__move:hover,
.builder-item__drag-handle:hover,
.builder-item__remove:hover { color: var(--color-danger); background: var(--color-accent-fill); }

.builder-item__move:disabled {
    opacity: .35;
    cursor: not-allowed;
    color: var(--color-text-3);
    background: transparent;
}

.builder-item__drag-handle {
    cursor: grab;
}
.builder-item__drag-handle:active {
    cursor: grabbing;
}

.builder-item.is-dragging {
    opacity: .55;
    background: var(--color-accent-fill);
}

.builder-item__move svg,
.builder-item__drag-handle svg,
.builder-item__remove svg { width: 14px; height: 14px; }

/* Verse range input */
.builder-verse-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text);
    transition: border-color var(--transition);
}
.builder-verse-input:focus { outline: none; border-color: var(--color-primary); }
.builder-verse-input.is-invalid { border-color: var(--color-danger); }
.builder-verse-input.is-valid   { border-color: var(--color-success); }

.builder-verse-hint  { font-size: var(--text-xs); color: var(--color-text-3); }
.builder-verse-error { font-size: var(--text-xs); color: var(--color-danger); display: none; }
.builder-verse-input.is-invalid ~ .builder-verse-error { display: block; }

.builder-verse-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.builder-verse-advanced {
    margin-top: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
}

.builder-verse-advanced > summary {
    cursor: pointer;
    list-style: none;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-2);
    user-select: none;
}

.builder-verse-advanced__chev {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-3);
}

.builder-verse-advanced__chev svg {
    width: 14px;
    height: 14px;
    display: block;
}

.builder-verse-advanced__chev-down {
    display: none !important;
}

.builder-verse-advanced[open] .builder-verse-advanced__chev-right {
    display: none !important;
}

.builder-verse-advanced[open] .builder-verse-advanced__chev-down {
    display: block !important;
}

.builder-verse-advanced > summary::-webkit-details-marker {
    display: none;
}

.builder-verse-advanced__body {
    padding: 0 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.builder-verse-tools__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.builder-verse-tools__group--inline {
    flex-direction: row;
    align-items: center;
    align-self: end;
    gap: 8px;
}

.builder-verse-group-toggle {
    appearance: none;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--color-border-strong), #000 6%);
    background: color-mix(in oklab, var(--color-text-3), transparent 65%);
    position: relative;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.builder-verse-group-toggle::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition);
}

.builder-verse-group-toggle:checked {
    background: var(--color-primary);
    border-color: color-mix(in oklab, var(--color-primary), #000 16%);
}

.builder-verse-group-toggle:checked::after {
    transform: translateX(14px);
}

.builder-verse-group-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary), #fff 78%);
}

.builder-verse-tools__label {
    font-size: var(--text-xs);
    color: var(--color-text-3);
}

.builder-verse-tools--color {
    grid-template-columns: 1fr auto;
    align-items: end;
}

.builder-verse-emphasis {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.builder-verse-emphasis__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
}

.builder-verse-emphasis__actions .ae-btn,
.builder-verse-emphasis__actions .btn--sm {
    height: 30px;
}

.builder-verse-color-btn {
    gap: 6px;
}

.builder-verse-color-btn__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--color-border), #000 12%);
    display: inline-block;
}

.builder-verse-color-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.builder-verse-color-dot {
    width: 20px;
    height: 20px;
    border: 1px solid color-mix(in oklab, var(--color-border), #000 10%);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
}

.builder-verse-color-dot:hover,
.builder-verse-color-dot.is-selected {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary), #fff 70%);
}

.builder-verse-emphasis__preview {
    margin: 0;
    padding: 8px 10px;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: 1.5;
    min-height: 44px;
}

.builder-verse-emphasis__preview.is-translation-locked {
    opacity: 0.85;
}

.builder-verse-emphasis__preview.is-split-editable .builder-verse-emphasis__text {
    cursor: pointer;
    position: relative;
}

.builder-verse-emphasis__preview.is-split-editable .builder-verse-emphasis__text.is-hover-split-candidate::after {
    content: '';
    position: absolute;
    left: var(--split-hover-x, 0px);
    top: 0.1em;
    bottom: 0.1em;
    border-left: 1px dashed color-mix(in oklab, var(--color-text-3), transparent 35%);
    pointer-events: none;
}

.builder-verse-emphasis__block + .builder-verse-emphasis__block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border);
}

.builder-verse-emphasis__label {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    margin-bottom: 4px;
}

.builder-verse-emphasis__text {
    margin: 0;
}

.builder-verse-split-side {
    transition: background-color var(--transition);
}

.builder-verse-emphasis__preview.is-split-editable .builder-verse-split-side:hover {
    background: color-mix(in oklab, var(--color-primary), transparent 88%);
    border-radius: 4px;
}

.builder-verse-split-marker {
    display: inline-block;
    width: 0;
    height: 1.1em;
    border-left: 2px solid var(--color-primary);
    margin: 0 4px;
    vertical-align: text-bottom;
}

/* Note editor — uses re-toolbar / re-editable from cards.css for shared styling */
.builder-note-toolbar {
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.builder-item__body .re-editable {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.builder-item__body .re-editable:empty::before { content: attr(data-placeholder); color: var(--color-text-3); pointer-events: none; }

/* Link in editor */
.builder-item__body .re-editable a {
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

.builder-item__body .re-editable img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px 0;
    border-radius: var(--radius-sm);
}

/* Link dialog */
.builder-link-dialog {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.builder-link-dialog__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.35);
}
.builder-link-dialog__box {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
    padding: 20px 24px;
    width: 360px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.builder-link-dialog__heading {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
}
.builder-link-dialog__label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-2);
}
.builder-link-dialog__input {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text);
    outline: none;
    transition: border-color var(--transition);
}
.builder-link-dialog__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}
.builder-link-dialog__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.builder-link-dialog__spacer { flex: 1; }
.builder-link-dialog__btn {
    padding: 7px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text-2);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.builder-link-dialog__btn:hover {
    background: var(--color-bg);
}
.builder-link-dialog__btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.builder-link-dialog__btn--primary:hover {
    opacity: .9;
    background: var(--color-primary);
}
.builder-link-dialog__btn--danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
}
.builder-link-dialog__btn--danger:hover {
    background: var(--color-danger);
    color: #fff;
}

/* Video / image */
.builder-url-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text);
    transition: border-color var(--transition);
}
.builder-url-input:focus { outline: none; border-color: var(--color-primary); }
.builder-url-input.is-invalid { border-color: var(--color-danger); }

.builder-video-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface-alt);
    display: none;
}
.builder-video-preview iframe { width: 100%; height: 100%; border: none; }
.builder-video-preview.is-visible { display: block; }

.builder-image-preview {
    display: none;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.builder-image-preview img { max-width: 100%; max-height: 200px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.builder-image-preview.is-visible { display: block; }

.builder-field-sm {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text);
}
.builder-field-sm:focus { outline: none; border-color: var(--color-primary); }

.study-verse-excerpt-toggle {
    margin-top: 6px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-primary);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* Add item toolbar */
.builder-add-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.builder-add-items__label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-3);
}

.builder-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-2);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.builder-add-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.builder-add-btn svg { width: 11px; height: 11px; }

/* Add section */
.builder-add-section-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-3);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
    margin-top: 8px;
}
.builder-add-section-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}
.builder-add-section-btn svg { width: 15px; height: 15px; }

/* Sticky save footer */
.builder-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 48px;
    background: var(--color-glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-border);
}

.builder-footer__left,
.builder-footer__right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.builder-footer__right {
    margin-left: auto;
}

.builder-footer__left .btn {
    min-width: 108px;
    justify-content: center;
}

.builder-footer .btn {
    line-height: 1.2;
}

@media (min-width: 768px) {
    .builder-footer .btn {
        min-height: 30px;
    }
}

.builder-footer__icon {
    display: none;
    width: 20px;
    height: 20px;
    line-height: 0;
}

.builder-footer__icon svg {
    width: 100%;
    height: 100%;
}

.builder-footer__label {
    display: inline;
}

.builder-save-status {
    font-size: var(--text-sm);
    color: var(--color-text-3);
    min-width: 0;
}
.builder-save-status.is-saving { color: var(--color-text-2); }
.builder-save-status.is-saved  { color: var(--color-success); }
.builder-save-status.is-error  { color: var(--color-danger); }

@media (max-width: 1023px) {
    .builder-content { padding: 24px; }
    .builder-footer  { padding: 12px 24px; }
    .builder-meta__row { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .app-shell--builder {
        /* Study Builder does not render bottom-nav, so don't reserve that space. */
        padding-bottom: 0;
    }

    .study-builder-page {
        /* Account for fixed mobile header; keep builder as the scroll container. */
        height: calc(100dvh - var(--header-height));
    }

    .builder-content { padding: 16px; }
    .builder-footer  {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        gap: 8px;
    }
    .builder-content {
        /* Prevent content from being hidden behind fixed footer. */
        padding-bottom: calc(16px + 86px + env(safe-area-inset-bottom));
    }
    .builder-footer__left,
    .builder-footer__right {
        gap: 6px;
    }
    .builder-footer__left .btn {
        min-width: 40px;
    }
    .builder-footer__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .builder-footer__label {
        display: none;
    }
    .builder-footer .btn {
        min-width: 40px;
        min-height: 40px;
        padding: 8px;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   GROUPS PAGE
══════════════════════════════════════════════════════════════════════════════ */
.groups-page {
    overflow-y: auto;
    height: 100vh;
    padding: 0;
}

.groups-section {
    margin-bottom: 36px;
}

.groups-section__heading {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-3);
    margin: 0 0 14px;
}

/* Groups grid — horizontal card layout */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    align-items: start;
}

/* Group card — image on top, info below */
.group-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    cursor: pointer;
}
.group-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.group-card__image {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--color-primary-light);
    overflow: hidden;
}
.group-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.group-card__image-initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
}
.group-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--color-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
}
.group-card__badge--member {
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.25);
}
.group-card__badge--leader {
    background: #7c3aed;
    color: #fff;
}

.group-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.group-card__name {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.group-card__desc {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
}
.group-card__meta {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    margin: 0 0 6px;
}
.group-card__footer {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.group-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-2);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.group-card__btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.group-card__btn svg { width: 13px; height: 13px; }

/* Group clusters (parent + children) */
.group-cluster {
    display: contents;
}
.group-cluster--has-children {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.group-cluster--has-children > .group-card {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.group-cluster__children {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    overflow: hidden;
}
.group-card--child {
    flex: 1 1 160px;
    border: none;
    border-radius: 0;
    background: var(--color-surface);
    min-height: auto;
    display: flex;
    align-items: stretch;
}
.group-card--child .group-card__thumb {
    width: 52px;
    flex-shrink: 0;
    overflow: hidden;
    margin: 4px;
    border-radius: var(--radius-sm);
}
.group-card--child .group-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.group-card--child .group-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 10px 14px;
    flex: 1;
    min-width: 0;
}
.group-card--child .group-card__name {
    font-size: var(--text-sm);
    margin: 0;
}
.group-card__level-tag {
    display: inline-block;
    width: fit-content;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: var(--radius-xs, 4px);
    background: var(--color-primary-light);
    color: var(--color-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Empty state */
.groups-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 24px;
    color: var(--color-text-3);
    text-align: center;
}
.groups-empty svg { width: 52px; height: 52px; opacity: 0.25; }
.groups-empty__title { font-size: var(--text-lg); font-weight: 700; color: var(--color-text-2); margin: 0; opacity: 0.6; }
.groups-empty__hint  { font-size: var(--text-sm); margin: 0; max-width: 340px; }

/* Group / Invite modal */
.group-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.group-modal[hidden] { display: none; }

.group-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
}

.group-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.group-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.group-modal__title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.group-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--color-text-3);
    font-size: 1.3rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: color var(--transition), background var(--transition);
}
.group-modal__close:hover { color: var(--color-text); background: var(--color-surface-alt); }

.group-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.group-modal__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-2);
}

.group-modal__input,
.group-modal__textarea {
    padding: 10px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.group-modal__input:focus,
.group-modal__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.group-modal__textarea { min-height: 68px; resize: vertical; line-height: 1.55; }

.group-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ── Generic STW Modal overlay ─────────────────────────────────────────────── */
.stw-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    padding: 20px;
}
.stw-modal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    overflow: hidden;
}
.stw-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
}
.stw-modal__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.stw-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--color-text-3);
    font-size: 1.3rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: color var(--transition), background var(--transition);
}
.stw-modal__close:hover { color: var(--color-text); background: var(--color-surface-alt); }

/* Invite info */
.invite-id-display {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.invite-id-display__label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-3);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.invite-id-display__value {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: 0.12em;
}

.invite-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.invite-link-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text-2);
    min-width: 0;
}

.invite-note {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    background: var(--color-surface-alt);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    line-height: 1.6;
}

/* Invite method blocks */
.invite-method {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}
.invite-method:last-child { border-bottom: none; }
.invite-method__head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.invite-secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-success, #16a34a);
    background: color-mix(in srgb, var(--color-success, #16a34a) 10%, transparent);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

/* Email invite form */
.invite-email-field {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.invite-email-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text);
    min-width: 0;
    resize: none;
    overflow: hidden;
    line-height: 1.5;
    field-sizing: content;
    min-height: 36px;
    max-height: 120px;
}
.invite-email-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.invite-email-result {
    font-size: var(--text-xs);
    line-height: 1.5;
    min-height: 1.5em;
}
.invite-email-result--success { color: var(--color-success, #16a34a); }
.invite-email-result--error   { color: var(--color-danger); }

/* Add study to group */
.group-study-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.group-study-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.group-study-item:hover { background: var(--color-bg-hover, rgba(0,0,0,.03)); }
.group-study-item.is-added { opacity: 1; }
.group-study-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.group-study-item__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}
.group-study-item__desc {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.group-study-item__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.js-pacing-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs) !important;
}
.js-pacing-btn svg {
    flex-shrink: 0;
}
#detailStudySearchResults,
#createBrowseList {
    padding-top: 6px;
}
.group-study-list__section-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-3);
    margin: 12px 0 4px;
    padding: 0 2px;
}
/* legacy avatar rules removed — superseded by .group-card__image */

/* Group detail modal — wider panel */
.group-modal__panel--detail {
    max-width: 520px;
}

/* Group detail description */
.group-detail__desc {
    font-size: var(--text-sm);
    color: var(--color-text-2);
    line-height: 1.6;
    margin: 0;
}

/* Edit toggle — pushed right, muted */
.group-detail__edit-row {
    display: flex;
    justify-content: flex-end;
}
.group-detail__edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-3);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition);
}
.group-detail__edit-btn:hover {
    color: var(--color-text);
}
.group-detail__edit-btn svg {
    opacity: 0.6;
}

/* Group detail sections */
.group-detail__section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.group-detail__section-title {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-3);
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}

/* Subgroup thumbnail in detail view */
.group-detail__sg-thumb {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.group-detail__sg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Member list */
.group-detail__members {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.group-detail__member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
}

.group-detail__member-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.group-detail__member-avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: 700;
}

.group-detail__member-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-detail__member-handle {
    font-weight: 400;
    color: var(--color-text-3);
    font-size: var(--text-xs);
}

.group-detail__member-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--color-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}
.group-detail__member-badge--leader {
    background: #7c3aed;
}
.group-detail__member-menu {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--color-text-3);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    line-height: 1;
}
.group-detail__member-menu:hover {
    background: var(--color-surface-hover, rgba(0,0,0,.06));
    color: var(--color-text);
}

/* Group detail studies container */
.group-detail__studies {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Study search in group detail */
.group-detail__study-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.group-detail__study-search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.group-detail__study-search-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text-3);
}
.group-detail__study-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text);
    outline: none;
    min-width: 0;
}
.group-detail__study-search-input::placeholder {
    color: var(--color-text-3);
}

.group-study-search-results:not(:empty) {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    max-height: 320px;
    overflow-y: auto;
}

.group-study-search-results .group-study-item {
    border-radius: var(--radius-sm);
    padding: 6px 8px;
}

/* Comment placeholder action button */
.comment-btn[disabled] {
    opacity: 0.35;
    cursor: default;
}

/* Badge showing thread/comment count on the comment button */
.comment-btn {
    position: relative;
}
.comment-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    font-family: var(--font-ui);
}

/* Join group page */
.join-group-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 24px;
    background: var(--color-bg);
}

.join-group-card {
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.join-group-card__logo {
    text-align: center;
    margin-bottom: 4px;
}

.join-group-card__logo a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.join-group-card__title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    margin: 0 0 -8px;
}

.join-group-card__group-name {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-primary);
    text-align: center;
    margin: 0;
}

.join-group-card__sub {
    font-size: var(--text-sm);
    color: var(--color-text-3);
    text-align: center;
    margin: -10px 0 0;
}

.join-group-card__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.join-group-card__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-2);
}

.join-group-card__input {
    padding: 11px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.join-group-card__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.join-group-card__error {
    font-size: var(--text-sm);
    color: var(--color-danger);
    text-align: center;
    display: none;
}
.join-group-card__error.is-visible { display: block; }

@media (max-width: 767px) {
    .group-card { flex-wrap: wrap; }
    .group-card__actions { width: 100%; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COMMENT PANEL
   Slide-in panel for group verse discussions.
   Three views: thread list → thread → drill (Twitter/X-style).
══════════════════════════════════════════════════════════════════════════════ */

/* ── Panel shell ──────────────────────────────────────────────────────────── */
.comment-panel {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    pointer-events: none;
}
.comment-panel.is-open { pointer-events: auto; }

.comment-panel__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.comment-panel.is-open .comment-panel__backdrop { opacity: 1; }

.comment-panel__sheet {
    position: relative;
    width: min(460px, 100vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.22);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.comment-panel.is-open .comment-panel__sheet { transform: translateX(0); }

/* ── Header ───────────────────────────────────────────────────────────────── */
.comment-panel__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.comment-panel__breadcrumbs {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.cp-crumb {
    font-size: var(--text-sm);
    color: var(--color-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    background: none;
    border: none;
    padding: 0;
    cursor: default;
    font-family: var(--font-ui);
    flex-shrink: 1;
    min-width: 0;
}
/* Navigable middle crumbs — grey, pointer, no bold */
.cp-crumb--link {
    color: var(--color-text-3);
    cursor: pointer;
    flex-shrink: 1;
}
.cp-crumb--link:hover { color: var(--color-text-2); text-decoration: underline; }
/* Root crumb (verse ref) — bold + primary, never shrinks away */
.cp-crumb--root {
    color: var(--color-primary);
    font-weight: 600;
    flex-shrink: 0;
}
.cp-crumb--root:hover { color: var(--color-primary-dark, var(--color-primary)); text-decoration: none; }
/* Current/active crumb — bold grey */
.cp-crumb--current {
    font-weight: 600;
    color: var(--color-text-2);
    flex-shrink: 1;
}
/* Ellipsis stand-in for collapsed middle crumbs */
.cp-crumb--ellipsis {
    flex-shrink: 0;
    max-width: none;
    padding: 0 1px;
}
.cp-crumb-sep {
    color: var(--color-text-3);
    font-size: var(--text-sm);
    margin: 0 1px;
}

.comment-panel__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: none;
    border: none;
    color: var(--color-text-2);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.comment-panel__close:hover { background: var(--color-surface-alt); color: var(--color-text); }

/* ── Subheader (verse label / thread title / back button) ─────────────────── */
.comment-panel__subheader {
    display: flex;
    flex-direction: column;
    padding: 8px 16px 8px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    min-width: 0;
}
/* thread & drill views: title + back button sit in a row */
.comment-panel__subheader:has(.cp-back-btn) {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.cp-verse-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-3);
}
.cp-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    margin-left: auto;
    background: none;
    border: none;
    padding: 4px 4px 4px 8px;
    border-radius: 6px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
    font-family: var(--font-ui);
    transition: background var(--transition);
}
.cp-back-btn:hover { background: var(--color-surface-alt); }
.cp-thread-title {
    margin: 0;
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Verse text preview shown in subheader on the thread list view */
.cp-verse-text {
    margin: 4px 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-2);
    font-style: italic;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-left: 2px solid var(--color-border);
    padding-left: 10px;
}
.cp-verse-text.is-expanded {
    display: block;
    overflow: visible;
}
.cp-verse-expand {
    display: block;
    margin-top: 4px;
    margin-left: 12px;
    background: none;
    border: none;
    padding: 0;
    font-size: var(--text-xs);
    color: var(--color-primary);
    cursor: pointer;
    font-family: var(--font-ui);
}
.cp-verse-expand:hover { text-decoration: underline; }

/* ── Body (scrollable) ────────────────────────────────────────────────────── */
.comment-panel__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Footer (compose + action btns) ──────────────────────────────────────── */
.comment-panel__footer {
    flex-shrink: 0;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Loading dots ─────────────────────────────────────────────────────────── */
.cp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 0;
}
.cp-loading__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary-light);
    animation: cp-pulse 1.2s ease-in-out infinite;
}
.cp-loading__dot:nth-child(2) { animation-delay: 0.2s; }
.cp-loading__dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes cp-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
    40%           { opacity: 1;    transform: scale(1); }
}

/* ── Thread list ──────────────────────────────────────────────────────────── */
.cp-thread-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    text-align: left;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    margin-bottom: 8px;
    font-family: var(--font-ui);
}
.cp-thread-item:hover {
    border-color: var(--color-primary-light);
    background: var(--color-surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}
.cp-thread-item__top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cp-thread-item__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cp-thread-item__author {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}
.cp-thread-item__time {
    font-size: var(--text-xs);
    color: var(--color-text-3);
}
.cp-thread-item__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}
.cp-thread-item__preview {
    font-size: var(--text-sm);
    color: var(--color-text-2);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cp-thread-item__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}
.cp-thread-item__participants {
    display: flex;
    align-items: center;
    gap: -4px;
}
.cp-thread-item__count {
    font-size: var(--text-xs);
    color: var(--color-text-3);
}
.cp-thread-item__count em { color: var(--color-primary); font-style: normal; }

/* ── Avatar ───────────────────────────────────────────────────────────────── */
/* Comment avatars now use shared .stw-avatar */
.cp-author--clickable { cursor: pointer; }
.cp-author--clickable:hover { color: var(--color-primary); }

/* ── Comment nodes ────────────────────────────────────────────────────────── */
/* Sticky wrapper — direct flex child of the scroll container so sticky actually works */
.cp-sticky-post {
    position: sticky;
    top: -12px;            /* cancel body padding-top so element glues to the true scroll edge */
    z-index: 2;
    background: var(--color-surface);
    /* Bleed to body edges so no content can scroll through the sides or top */
    margin: -12px -16px 0; /* matches body padding: 12px 16px */
    padding: 12px 16px 8px;
}
/* First comment in thread — the opening post, visually prominent */
.cp-comment--first-post {
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    margin-bottom: 0;
}
.cp-comment--first-post .cp-comment__inner {
    padding: 12px;
}
.cp-comment--first-post .cp-comment__text {
    font-size: var(--text-base, 0.9375rem);
    line-height: 1.65;
}
.cp-comment--first-post .cp-comment__author {
    font-size: var(--text-sm);
    font-weight: 700;
}
/* Replies divider */
.cp-replies-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 6px;
}
.cp-replies-divider::before,
.cp-replies-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}
.cp-replies-divider span {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-3);
    white-space: nowrap;
}
/* Sub-replies only (depth ≥ 2) — border aligns under the depth-1 parent's avatar center */
/* avatar is 28px wide, centered → connector left edge at 13px. margin-left:13px aligns border. */
.cp-comment--reply {
    padding-left: 10px;
    border-left: 2px solid var(--color-border);
    margin-left: 13px;
}

/* Collapse vertical gaps between a comment with a connector and the sibling that follows it,
   so the connector line and the child's left border form a continuous visual line. */
.cp-comment--has-connector {
    margin-bottom: 0;
}
.cp-comment--has-connector > .cp-comment__inner {
    padding-bottom: 0;
}
.cp-comment--has-connector + .cp-comment > .cp-comment__inner {
    padding-top: 6px; /* border-left on outer div stays flush; content gets breathing room */
}

.cp-comment {
    position: relative;
    margin-bottom: 2px;
}
.cp-comment--highlight {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 60%);
    border-radius: var(--radius-sm);
}
.cp-comment--notif-highlight {
    animation: cp-highlight-fade 2s ease-out;
    border-radius: var(--radius-sm);
}
@keyframes cp-highlight-fade {
    0%, 30% { background: rgba(var(--color-primary-rgb, 59,130,246), .15); }
    100% { background: transparent; }
}

.cp-comment__inner {
    display: flex;
    gap: 10px;
    padding: 10px 0;
}

/* Vertical connector (OP chain) */
.cp-comment__avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 0;
}
.cp-comment__connector {
    flex: 1;
    width: 2px;
    min-height: 16px;
    background: var(--color-border);
    border-radius: 1px;
    margin-top: 4px;
}
.cp-comment--chain-node .cp-comment__inner {
    padding-top: 6px;
}

.cp-comment__body-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cp-comment__header {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.cp-comment__author {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}
.cp-comment__time {
    font-size: var(--text-xs);
    color: var(--color-text-3);
}
.cp-comment__reply-to {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    margin-top: -2px;
}
.cp-comment__text {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
}
.cp-comment__deleted {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-3);
    font-style: italic;
}
.cp-comment__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

/* ── Helpful button ───────────────────────────────────────────────────────── */
.cp-helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 99px;
    padding: 3px 8px;
    font-size: var(--text-xs);
    font-family: var(--font-ui);
    color: var(--color-text-3);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.cp-helpful-btn:hover {
    border-color: var(--color-primary-light);
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.cp-helpful-btn.is-active {
    color: var(--color-primary);
    border-color: var(--color-primary-light);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.cp-helpful-btn__count {
    font-weight: 600;
}
.cp-helpful-btn__count:empty {
    display: none;
}

/* ── Inline reply + delete btns ──────────────────────────────────────────── */
.cp-reply-inline-btn,
.cp-delete-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--text-xs);
    font-family: var(--font-ui);
    cursor: pointer;
    color: var(--color-text-3);
    transition: color var(--transition);
}
.cp-reply-inline-btn:hover { color: var(--color-primary); }
.cp-delete-btn:hover { color: var(--color-danger); }

/* ── Drill button (reply teaser) ──────────────────────────────────────────── */
.cp-drill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 5px 12px;
    font-size: var(--text-xs);
    font-family: var(--font-ui);
    color: var(--color-primary);
    cursor: pointer;
    margin: 4px 0 8px 36px;
    transition: background var(--transition), border-color var(--transition);
}
.cp-drill-btn:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); border-color: var(--color-primary-light); }
.cp-drill-btn__avatars {
    display: flex;
    align-items: center;
}
.cp-drill-btn__avatars .stw-avatar {
    margin-left: -5px;
    border: 1.5px solid var(--color-surface);
    flex-shrink: 0;
}
.cp-drill-btn__avatars .stw-avatar:first-child { margin-left: 0; }

/* ── Compose bar ──────────────────────────────────────────────────────────── */
.cp-compose {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 6px;
}
.cp-compose__input { flex: 1; min-width: 0; }
.cp-compose__input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    line-height: 1.5;
    resize: none;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.cp-compose__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.cp-compose__footer {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* New thread compose */
.cp-new-thread-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cp-new-thread-form__title {
    margin: 0;
}

/* Inline reply box */
.cp-inline-reply {
    margin: 0 0 8px 36px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cp-inline-reply__cancel {
    align-self: flex-start;
    background: none;
    border: none;
    font-size: var(--text-xs);
    color: var(--color-text-3);
    cursor: pointer;
    font-family: var(--font-ui);
    padding: 0;
}
.cp-inline-reply__cancel:hover { color: var(--color-text); }

/* ── New thread button ────────────────────────────────────────────────────── */
.cp-new-thread-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.cp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 16px;
    gap: 10px;
    min-height: 120px;
}
.cp-empty__text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-3);
    line-height: 1.6;
}

/* ── Error message ────────────────────────────────────────────────────────── */
.cp-error {
    font-size: var(--text-sm);
    color: var(--color-danger);
    margin: 0;
}

/* ── Back button ──────────────────────────────────────────────────────────── */
.cp-back-main-btn { align-self: flex-start; }

/* ── Group modal toggle/hint ──────────────────────────────────────────────── */
.group-modal__field--toggle {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.group-modal__toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    user-select: none;
}
.group-modal__toggle {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.group-modal__hint {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-3);
    line-height: 1.5;
    padding-left: 26px;
}

/* ── Prevent body scroll when panel is open ───────────────────────────────── */
body.comment-panel-open { overflow: hidden; }

@media (max-width: 480px) {
    .comment-panel__sheet { width: 100vw; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   WRITE PERSPECTIVE PAGE  (.persp-write)
   Article creation / edit page — two-column editor + sidebar layout.
═══════════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────────────────────────────── */
.persp-write {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    background: var(--color-surface);
}

/* ── Sticky header bar ───────────────────────────────────────────────────── */
.persp-write__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px;
    height: 54px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 30;
}

.persp-write__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--color-text-2);
    text-decoration: none;
    transition: color 0.15s;
}
.persp-write__back:hover { color: var(--color-primary); }

.persp-write__header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.persp-write__action-icon {
    display: none;
    width: 20px;
    height: 20px;
    line-height: 0;
}

.persp-write__action-icon svg {
    width: 100%;
    height: 100%;
}

.persp-write__action-label {
    display: inline;
}

.persp-write__status {
    font-size: var(--text-xs);
    color: var(--color-text-3);
    margin-right: 4px;
}
.persp-write__status--error { color: var(--color-danger, #dc2626); }

@media (max-width: 767px) {
    .persp-write__header-actions .btn {
        min-width: 40px;
        min-height: 40px;
        padding: 8px;
        justify-content: center;
    }

    .persp-write__action-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .persp-write__action-label {
        display: none;
    }
}

/* ── Two-column layout ───────────────────────────────────────────────────── */
.persp-write__content {
    display: flex;
    flex: 1;
    min-height: 0;
    align-items: flex-start;
}

.persp-write__main {
    flex: 1;
    min-width: 0;
    padding: 24px 36px 60px;
    max-width: 780px;
    border-right: 1px solid var(--color-border);
}

.persp-write__sidebar {
    width: 280px;
    flex-shrink: 0;
    padding: 20px 20px 40px;
    position: sticky;
    top: 54px;
    max-height: calc(100vh - 54px);
    overflow-y: auto;
}

/* ── Cover image ─────────────────────────────────────────────────────────── */
.persp-write__cover-section {
    margin-bottom: 20px;
}

.persp-write__cover-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-input-bg, var(--color-surface));
    color: var(--color-text-1);
    font-size: var(--text-sm);
    font-family: var(--font-mono, monospace);
    outline: none;
    transition: border-color 0.15s;
}
.persp-write__cover-input:focus { border-color: var(--color-primary); }

.persp-write__cover-preview {
    position: relative;
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg);
    max-height: 360px;
}
.persp-write__cover-preview img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
}
.persp-write__cover-clear {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s;
}
.persp-write__cover-clear:hover { background: rgba(0,0,0,0.8); }

/* ── Title / subtitle as borderless auto-resize textareas ────────────────── */
.persp-write__title,
.persp-write__subtitle {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--color-text-1);
    font-family: var(--font-verse, var(--font-sans));
    overflow: hidden;
    padding: 0;
}

.persp-write__title {
    font-size: clamp(22px, 3.5vw, 34px);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 10px;
}
.persp-write__title::placeholder { color: var(--color-text-3); }

.persp-write__subtitle {
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-2);
    margin-bottom: 24px;
}
.persp-write__subtitle::placeholder { color: var(--color-text-3); }

/* ── Editor wrap ─────────────────────────────────────────────────────────── */
.persp-write__editor-wrap {
    border-top: 1px solid var(--color-border);
    padding-top: 4px;
}

.persp-write__link-placeholder {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    margin: 8px 0;
    border-radius: 8px;
    background: var(--color-hover, rgba(0,0,0,.04));
    color: var(--color-text-3);
    font-size: var(--text-sm);
    font-style: italic;
}

/* ── ArticleEditor toolbar ───────────────────────────────────────────────── */
.ae-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    position: sticky;
    top: 54px;
    z-index: 20;
    overflow-x: auto;
    scrollbar-width: none;
}
.ae-toolbar::-webkit-scrollbar { display: none; }

.ae-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--color-text-2);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}
.ae-btn:hover {
    background: var(--color-hover, rgba(0,0,0,0.06));
    color: var(--color-text-1);
}
.ae-btn--label { font-weight: 700; font-size: 12px; min-width: 30px; }
.ae-btn--text  { font-size: var(--text-xs); color: var(--color-text-3); min-width: auto; }
.ae-btn--sm    { font-size: var(--text-xs); color: var(--color-text-3); min-width: auto; }

.ae-sep {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    flex-shrink: 0;
    margin: 0 3px;
}
.ae-sep--flex,
.ae-flex-spacer { flex: 1; width: auto; background: none; margin: 0; }

/* ── Paste warning banner ────────────────────────────────────────────────── */
.ae-paste-warn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--color-warn-bg, #fff8e1);
    color: var(--color-warn-text, #78520a);
    font-size: var(--text-sm);
    border-left: 3px solid #f9a825;
    border-radius: 0 4px 4px 0;
    margin: 6px 0;
}

/* ── Editable article body ───────────────────────────────────────────────── */
.ae-editable {
    min-height: 480px;
    padding: 24px 0 60px;
    font-family: var(--font-verse, var(--font-sans));
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.85;
    color: var(--color-text-1);
    outline: none;
    word-break: break-word;
}
.ae-editable:empty::before {
    content: attr(data-placeholder);
    color: var(--color-text-3);
    pointer-events: none;
}
.ae-editable h2 { font-size: 1.4em; font-weight: 700; margin: 1.4em 0 0.5em; }
.ae-editable h3 { font-size: 1.15em; font-weight: 600; margin: 1.2em 0 0.4em; }
.ae-editable blockquote {
    margin: 1em 0;
    padding: 6px 16px;
    border-left: 3px solid var(--color-primary);
    color: var(--color-text-2);
    font-style: italic;
}
.ae-editable ul, .ae-editable ol { padding-left: 1.5em; margin: 0.8em 0; }
.ae-editable li { margin: 0.25em 0; }
.ae-editable a  { color: var(--color-primary); text-decoration: underline; }
.ae-editable hr { border: none; border-top: 1px solid var(--color-border); margin: 2em 0; }
.ae-editable img { max-width: 100%; border-radius: 6px; display: block; margin: 1em auto; }

/* ── Color wrap inside ae-toolbar ────────────────────────────────────────── */
.ae-color-wrap    { position: relative; display: inline-flex; align-items: center; }
.ae-color-swatch  { width: 22px; height: 22px; border-radius: 4px; border: 2px solid var(--color-border); cursor: pointer; padding: 0; flex-shrink: 0; }
.ae-color-popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 200; }

/* ── Sidebar form elements ───────────────────────────────────────────────── */
.pw-meta-section {
    margin-bottom: 18px;
}
.pw-meta-section__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-3);
    margin-bottom: 6px;
}
.pw-meta-section__label--mt { margin-top: 10px; }

.pw-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-input-bg, var(--color-surface));
    color: var(--color-text-1);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.15s;
}
.pw-input:focus { border-color: var(--color-primary); }
.pw-input--sm   { max-width: 100px; }
.pw-input--mono { font-family: var(--font-mono, monospace); font-size: 12px; }

.pw-source-logo-preview {
    margin-top: 10px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-height: 44px;
    border-radius: 999px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface-2, #f8fafc);
    overflow: hidden;
    position: relative;
    display: block;
    flex-shrink: 0;
}

.pw-source-logo-preview img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
    display: block !important;
}

#externalLogoPreview { border-radius: 999px; overflow: hidden; }
#externalLogoPreviewImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
    display: block !important;
}

.pw-source-logo-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.pw-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
}

.pw-meta-hint {
    margin: 5px 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-3);
    line-height: 1.5;
}

.pw-stw-author-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font-size: var(--text-xs);
    color: var(--color-text-2);
    cursor: pointer;
    user-select: none;
}
.pw-stw-author-toggle input[type="checkbox"] { cursor: pointer; }

.pw-slug-wrap {
    display: flex;
    gap: 6px;
}
.pw-slug-regen {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-2);
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
}
.pw-slug-regen:hover { background: var(--color-hover, rgba(0,0,0,0.06)); }

.pw-groups-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.pw-group-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--color-text-1);
    cursor: pointer;
}
.pw-group-checkbox {
    width: 15px;
    height: 15px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
    cursor: pointer;
}

.pw-view-link {
    display: inline-block;
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}
.pw-view-link:hover { text-decoration: underline; }

/* ── Write Article button in Perspectives header ─────────────────────────── */
.persp-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ── Responsive: sidebar collapses below editor on small screens ─────────── */
@media (max-width: 900px) {
    .persp-write__content {
        flex-direction: column;
    }
    .persp-write__main {
        padding: 20px 20px 40px;
        max-width: none;
        border-right: none;
    }
    .persp-write__sidebar {
        width: 100%;
        border-top: 1px solid var(--color-border);
        position: static;
        max-height: none;
        padding: 20px;
    }
}
@media (max-width: 600px) {
    .persp-write__main { padding: 16px 16px 40px; }
    .persp-write__header { padding: 0 14px; }
    .ae-toolbar { top: 0; }
}

/* ═══ @Mentions dropdown ═══════════════════════════════════════════════════ */
.stw-mention-dropdown {
    position: fixed; z-index: 9999;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); box-shadow: 0 6px 20px rgba(0,0,0,.15);
    max-height: 240px; overflow-y: auto;
    padding: 4px 0;
}
.stw-mention-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; cursor: pointer; font-size: var(--text-sm);
}
.stw-mention-item:hover, .stw-mention-item--active {
    background: var(--color-bg-hover, rgba(0,0,0,.05));
}
.stw-mention__avatar {
    width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.stw-mention__avatar--initials {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 600;
}
.stw-mention-item__name { font-weight: 500; }
.stw-mention-item__handle { color: var(--color-text-3); font-size: var(--text-xs); }

/* Mention spans inside contenteditable */
.stw-mention {
    color: var(--color-primary); font-weight: 600;
    background: rgba(var(--color-primary-rgb, 59,130,246), .1);
    border-radius: 3px; padding: 0 2px;
    user-select: all; -webkit-user-select: all;
}

/* Contenteditable placeholder + base styling */
.fel-editable {
    min-height: 1.4em; outline: none; word-wrap: break-word; overflow-wrap: break-word;
    white-space: pre-wrap;
}
.fel-editable:empty::before {
    content: attr(data-placeholder); color: var(--color-text-3); pointer-events: none;
}

/* Rendered mention links in post/reply bodies */
.stw-mention-link {
    color: var(--color-primary); font-weight: 600; cursor: pointer;
}
.stw-mention-link:hover { text-decoration: underline; }

/* Mention hover tooltip */
.stw-mention-tooltip {
    position: fixed; z-index: 10000;
    display: flex; align-items: center; gap: 8px;
    background: #323232; color: #fff;
    padding: 6px 10px; border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    font-size: var(--text-xs); font-weight: 500;
    pointer-events: none; white-space: nowrap;
}
.stw-mention-tooltip__avatar {
    width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.stw-mention-tooltip__avatar--initials {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 600;
    width: 24px; height: 24px; border-radius: 50%;
}

/* ═══ Send arrow button (replaces Post/Reply text) ════════════════════════ */
.stw-send-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%;
    background: var(--color-primary); color: #fff; cursor: pointer;
    flex-shrink: 0; transition: opacity .15s, filter .15s;
}
.stw-send-btn:disabled { opacity: .4; cursor: not-allowed; }
.stw-send-btn:not(:disabled):hover { filter: brightness(1.1); }
.stw-send-btn svg { width: 18px; height: 18px; }

/* ═══ Compose avatar (inline avatar beside input) ═════════════════════════ */
.stw-compose-avatar {
    width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.stw-compose-avatar--initials {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 600;
}

/* ═══ Fellowship event posts ══════════════════════════════════════════════ */
.fel-event-rsvp { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.fel-rsvp-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    padding: 4px 10px; font-size: var(--text-xs); font-family: inherit; cursor: pointer;
    color: var(--color-text-2); transition: background .15s, border-color .15s, color .15s;
}
.fel-rsvp-btn:hover { background: var(--color-bg-hover, rgba(0,0,0,.04)); }
.fel-rsvp-btn.is-active { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.fel-rsvp-btn.is-active-down { border-color: var(--color-danger); color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
.fel-rsvp-count { font-weight: 600; min-width: 12px; text-align: center; }
.fel-rsvp-attendees { font-size: var(--text-xs); color: var(--color-text-3); margin-top: 4px; }
.fel-rsvp-status { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.fel-rsvp-status__text { font-size: var(--text-sm); color: var(--color-primary); font-weight: 600; }
.fel-rsvp-status__list-btn {
    background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    padding: 3px 10px; font-size: var(--text-xs); font-family: inherit; cursor: pointer;
    color: var(--color-text-2); transition: background .15s;
}
.fel-rsvp-status__list-btn:hover { background: var(--color-bg-hover, rgba(0,0,0,.04)); }
.fel-rsvp-change-btn {
    background: none; border: none; padding: 0; font-size: var(--text-xs); font-family: inherit;
    color: var(--color-text-3); cursor: pointer; text-decoration: underline;
}
.fel-rsvp-change-btn:hover { color: var(--color-primary); }
.fel-event-rsvp-mini { font-size: var(--text-xs); color: var(--color-text-3); padding: 4px 0; cursor: pointer; }
.fel-event-rsvp-mini:hover { color: var(--color-primary); }
.fel-rsvp-modal__section { margin-bottom: 12px; }
.fel-rsvp-modal__section-title { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.fel-rsvp-modal__list { display: flex; flex-direction: column; gap: 2px; }
.fel-rsvp-modal__empty { font-size: var(--text-xs); color: var(--color-text-3); padding: 4px 0; }
.fel-rsvp-modal__hint { font-size: var(--text-xs); color: var(--color-text-3); padding: 4px 0; cursor: pointer; }
.fel-rsvp-collapse-icon { transform: rotate(-90deg); transition: transform .2s; }

/* ═══ Fellowship new thread toolbar ══════════════════════════════════════ */
.fel-nt-toolbar {
    display: flex; gap: 4px; align-items: center;
}
.fel-nt-toolbar__btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    padding: 5px 10px; font-size: var(--text-xs); font-family: inherit; cursor: pointer;
    color: var(--color-text-2); transition: background .15s, border-color .15s;
}
.fel-nt-toolbar__btn:hover { background: var(--color-bg-hover, rgba(0,0,0,.04)); border-color: var(--color-primary); color: var(--color-primary); }
.fel-nt-toolbar__btn.is-active { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.fel-nt-toolbar__btn svg { width: 14px; height: 14px; }

/* ═══ Group study cover thumbnail ════════════════════════════════════════ */
.group-study-item__cover {
    width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0;
    background: var(--color-bg-hover, rgba(0,0,0,.06));
}
.group-study-item__cover--placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
    background: var(--color-bg-hover, rgba(0,0,0,.06)); color: var(--color-text-3);
}
.group-study-item__cover--placeholder svg { width: 18px; height: 18px; }

/* ═══ Event badge ════════════════════════════════════════════════════════ */
.fel-event-badge {
    display: inline-flex; align-items: center; padding: 2px 8px;
    font-size: var(--text-xs); font-weight: 600; border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary); white-space: nowrap; margin-left: auto;
}
.fel-first-post--event { }
.fel-thread-item--event { border-left: 3px solid var(--color-primary); }

/* ═══ Event date bar ═════════════════════════════════════════════════════ */
.fel-thread-item__title-row {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
}
.fel-thread-item__title-row .fel-thread-item__title { margin: 0; }
.fel-event-date-bar {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--text-sm); color: var(--color-primary); font-weight: 600;
    white-space: nowrap;
}
.fel-thread-item__title-row .fel-event-date-bar { margin-left: auto; }
.fel-event-date-bar svg { flex-shrink: 0; }

/* ═══ Event date/time inputs in new thread form ══════════════════════════ */
.fel-nt-event-dates {
    display: flex; flex-direction: column; gap: 6px; padding: 8px 0;
}
.fel-nt-event-dates__allday {
    font-size: var(--text-xs); color: var(--color-text-2); display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
.fel-nt-event-dates__fields {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.fel-nt-event-dates__row {
    display: flex; align-items: center; gap: 6px; flex: 1; min-width: 200px;
}
.fel-nt-event-dates__label {
    font-size: var(--text-xs); font-weight: 600; color: var(--color-text-2);
    white-space: nowrap;
}
.fel-nt-event-dates__input {
    flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    font-size: var(--text-sm); font-family: inherit; background: var(--color-surface, #fff); color: inherit;
}

/* ═══ Group perspectives section ═════════════════════════════════════════ */
.group-persp-list { display: flex; flex-direction: column; gap: 8px; }
.group-persp-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px; border-radius: var(--radius-md); background: var(--color-surface, #fff);
    border: 1px solid var(--color-border); text-decoration: none; color: inherit;
    transition: background .15s;
}
.group-persp-item:hover { background: var(--color-bg-hover, rgba(0,0,0,.03)); text-decoration: none; }
.group-persp-item__cover {
    width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0;
    background: var(--color-bg-hover, rgba(0,0,0,.06));
}
.group-persp-item__cover--placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--radius-sm); flex-shrink: 0;
    background: var(--color-bg-hover, rgba(0,0,0,.06)); color: var(--color-text-3);
}
.group-persp-item__cover--placeholder svg { width: 20px; height: 20px; }
.group-persp-item__info { flex: 1; min-width: 0; }
.group-persp-item__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    font-size: var(--text-sm); font-weight: 600; margin: 0 0 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.group-persp-item__author { font-size: var(--text-xs); color: var(--color-text-3); display: inline; }
.group-persp-item__desc { font-size: var(--text-xs); color: var(--color-text-2); margin-top: 2px; }

/* ═══ Shared Avatar ══════════════════════════════════════════════════════ */
.stw-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary-light, color-mix(in srgb, var(--color-primary) 15%, transparent));
    color: var(--color-primary);
    font-weight: 700;
    font-family: var(--font-ui);
    flex-shrink: 0;
    user-select: none;
    overflow: hidden;
    line-height: 1;
}
.stw-avatar--photo { background: transparent; }
.stw-avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ═══ Role dot badge (avatar overlay) ════════════════════════════════════ */
.stw-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.stw-role-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-surface, #fff);
    z-index: 1;
}
.stw-role-dot--admin { background: var(--color-primary); }
.stw-role-dot--leader { background: #7c3aed; }