/* ===========================================
   Study Console - Full-screen preparation workspace
   =========================================== */

/* Modal overlay */
.study-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: study-fade-in 0.2s ease;
}

@keyframes study-fade-in {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Modal content container */
.study-modal-content {
    width: 95vw;
    height: 92vh;
    background: var(--background);
    /* corners: .modal-shell (css/modal-header.css) */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.14),
        0 24px 60px rgba(0, 0, 0, 0.22);
}

/* Header bar: the one header bar (css/modal-header.css). Only the drag
   cursor is this window's own. */
.study-header {
    cursor: grab;
}

.study-header:active {
    cursor: grabbing;
}

/* Restore default cursor on interactive elements inside the header */
.study-header button,
.study-header input,
.study-header select {
    cursor: pointer;
}

.study-header input[type="text"] {
    cursor: text;
}

/* Study name input: type and box from .modal-title input (modal-header.css) */
.study-name-input {
    max-width: 400px;
}
.study-name-input::placeholder {
    color: var(--text-secondary);
    font-weight: 400;
    font-style: italic;
}

.study-verse-count {
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    font-weight: 500;
}

.study-saved-badge {
    font-size: 0.72rem;
    color: var(--success);
    background: rgba(39, 174, 96, 0.1);
    border: 1px solid rgba(39, 174, 96, 0.2);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.study-live-badge {
    font-size: 0.72rem;
    color: var(--secondary);
    background: rgba(139, 115, 85, 0.1);
    border: 1px solid rgba(139, 115, 85, 0.2);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Header buttons: .modal-ctl / .modal-close (modal-header.css) */

/* Study list dialog — Mac-style overlay with search */
.study-list-overlay {
    position: absolute;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: study-fade-in 0.15s ease;
}

.study-list-dialog {
    width: 420px;
    max-height: 70vh;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.14),
        0 24px 60px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: study-dialog-in 0.2s ease-out;
}

@keyframes study-dialog-in {
    from { opacity: 0; transform: scale(0.95) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.study-list-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--border);
}

.study-list-dialog-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.study-list-dialog-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--text-secondary);
    cursor: pointer;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}

.study-list-dialog-close:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.08);
}

.study-list-search-wrap {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border);
}

.study-list-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.study-list-search:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(91, 75, 138, 0.1);
}

.study-list-search::placeholder {
    color: var(--text-secondary);
}

.study-list-items {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.study-list-empty {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.study-list-item {
    display: flex;
    align-items: center;
    padding: 0.7rem 1.15rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.study-list-item:last-child {
    border-bottom: none;
}

.study-list-item:hover {
    background: var(--highlight);
}

.study-list-item.active {
    background: var(--highlight);
    border-left: 3px solid var(--primary);
}

.study-list-item-info {
    flex: 1;
    min-width: 0;
}

.study-list-item-name {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.study-list-item-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.study-list-item-delete {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 0.3rem;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    line-height: 1;
}

.study-list-item:hover .study-list-item-delete {
    opacity: 0.5;
}

.study-list-item-delete:hover {
    opacity: 1 !important;
    color: var(--danger);
}

.study-list-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border-top: 1px solid var(--border);
    background: var(--highlight);
    border-radius: 0;
}

.study-list-dialog-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.study-list-manage-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--primary, #5B4B8A);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
}
.study-list-manage-btn:hover {
    background: var(--primary, #5B4B8A);
    color: #fff;
    border-color: var(--primary, #5B4B8A);
}

/* close button now uses shared .frosted-close-btn in styles.css */

/* Body - two panel layout */
.study-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Panels — equal 50/50 split */
.study-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.study-panel-left {
    border-right: 1px solid rgba(0, 0, 0, 0.09);
}

.study-panel-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    background: transparent;
    flex-shrink: 0;
}

.study-panel-tab {
    flex: 0 0 auto;
    padding: 0.6rem 1rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.study-panel-tab:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.03);
}

.study-panel-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.study-panel-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Dictionary move button */
.study-verses-panel {
    overflow-y: auto;
    padding: 1rem;
    flex: 1;
}

/* Study text tab */
.study-text-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 0;
    overflow: hidden;
}

/* Rich text formatting toolbar */
.study-text-toolbar {
    display: flex;
    gap: 4px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--background);
    flex-shrink: 0;
}

.study-fmt-btn {
    width: 32px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.study-fmt-btn:hover {
    background: var(--bg-tertiary);
}

.study-fmt-btn.active {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.study-fmt-sep {
    width: 1px;
    background: var(--border);
    margin: 2px 4px;
}

/* The editable mount — LAYOUT only. Its type is the written page's
   (css/study-page.css, one dress for every surface — FEAT-049 step 4a);
   StudyEditor adds the page class on mount. */
.study-text-editable {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    background: var(--background);
    outline: none;
}

.study-text-editable:empty::before {
    content: "Write your study notes here...";
    color: var(--text-secondary);
    font-style: italic;
}

/* Formatting inside the page (headings, lists, the Read preview's own
   class and type): MOVED to css/study-page.css 2026-09-27 (step 4a). The
   Read preview has no class of its own any more — the reading method
   hands out the page in the one page class. */
/* Mode toggle button in the tab bar */
.study-text-mode-btn {
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: color 0.2s;
    margin-left: auto;
}
.study-text-mode-btn:hover {
    color: var(--primary);
}
.study-text-mode-btn svg {
    vertical-align: -2px;
    margin-right: 0.3rem;
}

/* Dictionary content (tabbed behind study text or verses) */
.study-dictionary-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Dictionary word list */
.study-word-list {
    flex: 0 0 auto;
    max-height: 35%;
    overflow-y: auto;
    border-bottom: 2px solid var(--border);
}

.study-word-list-header {
    position: sticky;
    top: 0;
    background: var(--highlight);
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--primary);
    border-bottom: 1px solid var(--border);
    z-index: 1;
}

.study-word-items {
    padding: 0.25rem 0;
}

.study-word-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    border-left: 3px solid transparent;
}

.study-word-item:hover {
    background: var(--highlight);
}

.study-word-item.active {
    background: var(--highlight);
    border-left-color: var(--primary);
}

.study-word-num {
    font-weight: 600;
    color: var(--primary);
    font-size: 0.8rem;
    min-width: 3.5rem;
}

.study-word-lemma {
    font-family: 'Crimson Text', serif;
    font-size: 1.1rem;
}

.study-word-translit {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
}

.study-word-remove {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 0.25rem;
    opacity: 0;
    transition: opacity 0.15s;
    line-height: 1;
}

.study-word-item:hover .study-word-remove {
    opacity: 0.5;
}

.study-word-remove:hover {
    opacity: 1 !important;
    color: var(--text-primary);
}

/* Strong's definition panel */
.study-strongs-display {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
}

/* Empty states */
.study-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.study-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.study-empty-text {
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.study-empty-hint {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.study-dict-empty {
    padding: 1.5rem 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: center;
}

/* ─── Study content cards — shared shape, per-type border-left color. ─── */
.study-content-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    padding: 0;
    transition: box-shadow 0.2s, opacity 0.2s, transform 0.15s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), 0 4px 12px rgba(0, 0, 0, 0.05);
}
.study-content-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 6px 16px rgba(0, 0, 0, 0.07); }
.study-content-card.dragging { opacity: 0.4; transform: scale(0.98); }
.study-content-card.drag-over-above { border-top: 3px solid var(--primary); margin-top: -2px; }
.study-content-card.drag-over-below { border-bottom: 3px solid var(--primary); margin-bottom: -2px; }

.study-verse-card      { border-left: 4px solid var(--primary); }
.study-commentary-card { border-left: 4px solid var(--gold); }
.study-library-card    { border-left: 4px solid var(--accent-library); }
.study-intro-card      { border-left: 4px solid var(--accent-intro); }
.study-isbe-card       { border-left: 4px solid var(--accent-isbe); }
/* Harmony study card: wears the standard .t-harm spine like every other
   kind (owner-ruled 2026-09-15 — the legacy fourfold-gradient ::before
   stripe doubled over the modern 3px spine and is retired). */

/* Card header */
.study-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    border-radius: 10px 10px 0 0;
}

.study-card-grip {
    cursor: grab;
    color: var(--text-secondary);
    font-size: 1.1rem;
    padding: 0 0.25rem;
    user-select: none;
    letter-spacing: 2px;
}

.study-card-grip:active {
    cursor: grabbing;
}

.study-card-ref {
    font-weight: 700;
    color: var(--primary);
    font-family: 'Crimson Text', serif;
    font-size: 1rem;
    flex: 1;
}

.study-card-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Study card action buttons use .verse-action-btn from styles.css */

.study-card-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 0.25rem;
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s;
    line-height: 1;
}

.study-card-remove:hover {
    opacity: 1;
    color: var(--danger);
}

/* Card text */
.study-card-text {
    padding: 0.75rem;
    font-family: 'Crimson Text', serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
}

/* Inline Strong's links in verse text */
.study-strongs-inline {
    color: var(--primary);
    font-size: 0.7em;
    font-weight: 600;
    cursor: pointer;
    vertical-align: super;
    padding: 0 0.1rem;
    transition: color 0.15s, background 0.15s;
    border-radius: 2px;
}

.study-strongs-inline:hover {
    background: rgba(var(--primary-rgb, 139, 69, 19), 0.1);
    text-decoration: underline;
}

/* Selected Strong's word highlight in study verse cards */
.study-card-text .word-selected,
.study-strongs-inline.word-selected {
    background: var(--primary);
    color: white;
    box-shadow: 0 0 0 2px rgba(91, 75, 138, 0.3);
}

/* Notes toggle */
.study-notes-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    border-top: 1px solid var(--border);
    transition: background 0.15s;
    user-select: none;
}

.study-notes-toggle:hover {
    background: var(--highlight);
}

.study-notes-arrow {
    font-size: 0.65rem;
    transition: transform 0.15s;
}

/* Notes content */
.study-notes-content {
    border-top: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
    background: var(--highlight);
    border-radius: 0 0 8px 8px;
}

.study-notes-content.collapsed {
    display: none;
}

.study-note-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.study-note-item:last-child {
    border-bottom: none;
}

.study-note-text {
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
}

.study-note-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
}

.study-note-date {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.study-note-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.study-note-item:hover .study-note-actions {
    opacity: 1;
}

.study-note-edit,
.study-note-delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
}

.study-note-edit {
    color: var(--primary);
}

.study-note-edit:hover {
    background: var(--primary);
    color: white;
}

.study-note-delete {
    color: var(--danger);
}

.study-note-delete:hover {
    background: var(--danger);
    color: white;
}

/* Note editing */
.study-note-item.editing {
    padding: 0.5rem 0;
}

.study-note-edit-textarea,
.study-note-textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.875rem;
    resize: vertical;
    background: var(--surface);
    color: var(--text-primary);
    box-sizing: border-box;
}

.study-note-edit-textarea:focus,
.study-note-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(91, 75, 138, 0.15);
}

.study-note-edit-actions,
.study-note-add-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.study-note-save,
.study-note-submit {
    padding: 0.3rem 0.75rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.study-note-save:hover,
.study-note-submit:hover {
    background: var(--primary-dark);
}

.study-note-cancel,
.study-note-add-cancel {
    padding: 0.3rem 0.75rem;
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.study-note-cancel:hover,
.study-note-add-cancel:hover {
    background: var(--highlight);
    color: var(--text-primary);
}

/* Add study note button — in study-notes-header */
.study-note-add-btn {
    margin-left: auto;
    background: none;
    border: 1px solid var(--primary);
    color: var(--primary);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
}

.study-notes-section:hover .study-note-add-btn {
    opacity: 1;
}

.study-note-add-btn:hover {
    background: var(--primary);
    color: white;
    opacity: 1;
}

/* Add note area */
.study-note-add-area {
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
}

/* Notes placeholder - removed, using toggle with (0) instead */
.study-notes-toggle.no-notes {
    color: var(--text-secondary);
    font-weight: 400;
}

/* ================================================
   GLOBAL BIBLE NOTES TOGGLE — above verse list
   ================================================ */
.study-bible-notes-global-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.75rem;
    background: var(--highlight);
    border: 1px solid var(--border);
    border-radius: 10px; /* matches .study-content-card corners below */
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.study-bible-notes-hide-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    transition: background 0.15s, color 0.15s;
}

.study-bible-notes-hide-btn:hover {
    background: var(--border);
    color: var(--text-primary);
}

/* ================================================
   BIBLE NOTES — read-only layer on verse cards
   ================================================ */
.bible-notes-section {
    border-top: 1px solid var(--border);
    padding: 0.4rem 0.75rem;
    background: var(--highlight);
    opacity: 0.75;
}

.bible-notes-header {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.bible-note-item {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border);
}

.bible-note-item:last-child {
    border-bottom: none;
}

.bible-note-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: pre-wrap;
}

.bible-note-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.2rem;
}

.bible-note-date {
    font-size: 0.65rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

.bible-note-use-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.65rem;
    color: var(--text-secondary);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.bible-note-item:hover .bible-note-use-btn {
    opacity: 1;
}

.bible-note-use-btn:hover {
    background: var(--gold-bg);
    color: var(--gold-text);
    opacity: 1;
}

.bible-note-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.bible-note-inject-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.65rem;
    color: var(--text-secondary);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.bible-note-item:hover .bible-note-inject-btn {
    opacity: 1;
}

.bible-note-inject-btn:hover {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
    opacity: 1;
}

/* Global hide toggle — CSS class on .study-verses-panel */
.study-verses-panel.bible-notes-hidden .bible-notes-section {
    display: none;
}

/* ================================================
   STUDY NOTES — editable gold layer on verse cards
   ================================================ */
.study-notes-section {
    border-top: 1px solid var(--gold-border);
    padding: 0.4rem 0.75rem 0.5rem;
    background: var(--gold-bg);
}

.study-notes-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.3rem;
}

.study-notes-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gold-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Dark variants come from the --gold-* tokens ([data-theme="dark"] in
   styles.css) — the old prefers-color-scheme block was bound to the OS
   setting instead of the app's theme toggle and is retired. */

/* Slim bar in read-mode — holds the Edit button */
.study-read-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* Mobile bottom nav — hidden on desktop */
.study-mobile-nav {
    display: none;
    flex-direction: row;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.study-mobile-tab {
    flex: 1;
    padding: 0.6rem 0;
    font-size: 0.75rem;
    background: none;
    border: none;
    border-top: 3px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.study-mobile-tab.active {
    color: var(--primary);
    border-top-color: var(--primary);
    font-weight: 600;
}

@media (max-width: 768px) {
    .study-mobile-nav { display: flex; }

    /* Read/Edit mode toggle: icon-only on phones (tooltip keeps the word) */
    .study-mode-label { display: none; }
    .study-text-mode-btn svg { margin-right: 0; }

    /* Panels hidden by default — JS adds mobile-active to the visible one */
    .study-panel-left,
    .study-panel-right {
        display: none;
        max-height: none;
    }

    .study-panel-left.mobile-active,
    .study-panel-right.mobile-active {
        display: flex;
        flex: 1;
        max-height: none;
    }

    /* Per-panel tab bars + move-dict button replaced by bottom nav */
    .study-panel-tabs { display: none; }
}

/* Responsive */
@media (max-width: 900px) {
    .study-modal-content {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }

    .study-body {
        flex-direction: column;
    }

    .study-panel-left {
        border-right: none;
        border-bottom: 2px solid var(--border);
    }
}

@media (max-width: 480px) {
    .study-header {
        flex-direction: column;
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
        cursor: default;
        position: relative;
    }

    .study-header:active {
        cursor: default;
    }

/* DEAD 2026-09-17 — flagged for deletion (one header bar, docs/MODAL_HEADER_DESIGN.md). Nothing wears this any more. Uncomment to revert; delete after a few weeks if all is well.
   Why: the close sits inside .modal-ctls now, not as a direct child of the bar.
    .study-header > .study-close-btn {
        position: absolute;
        top: 0.5rem;
        right: 0.75rem;
    }
*/

    .study-header-left {
        gap: 0.5rem;
        min-width: 0;
        padding-right: 2rem;
    }

/* DEAD 2026-09-17 — flagged for deletion (one header bar, docs/MODAL_HEADER_DESIGN.md). Nothing wears this any more. Uncomment to revert; delete after a few weeks if all is well.
   Why: no markup carries .study-header-right; the group is .modal-ctls.
    .study-header-right {
        gap: 0.35rem;
        flex-wrap: wrap;
    }
*/

    .study-name-input {
        min-width: 120px;
        max-width: none;
        font-size: 1rem;
        padding: 0.3rem 0.5rem;
    }

    .study-new-btn,
    .study-save-menu-btn, /* the visible Save button (menu trigger) */
    .study-save-btn,
    .study-saveas-btn,
    .study-list-btn,
    .study-export-btn,
    .study-delete-btn,
    .study-mode-btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }

    .study-panel-left {
        max-height: 45%;
    }

    .study-card-text {
        font-size: 0.95rem;
    }

    .study-fmt-btn {
        min-width: 36px;
        min-height: 36px;
    }

    .study-verse-count,
    .study-saved-badge,
    .study-live-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.45rem;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   TOUCH DEVICES — show hover-only action buttons at reduced opacity
   ──────────────────────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────────────────
   COMMENTARY CARDS IN STUDY
   ──────────────────────────────────────────────────────────────────────────── */
.study-commentary-section {
    margin-top: 1rem;
}

.study-commentary-section-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold);
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--gold)33;
    margin-bottom: 0.5rem;
}

.study-commentary-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    border-radius: 10px 10px 0 0;
    flex-wrap: wrap;
}

/* Commentary card action buttons use .verse-action-btn from styles.css */

.study-commentary-remove {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 0.25rem;
    opacity: 0.5;
    transition: all 0.15s;
}

.study-commentary-remove:hover {
    color: var(--danger);
    opacity: 1;
}

.study-commentary-text {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary);
    max-height: 120px;
    overflow: hidden;
    position: relative;
}

.study-commentary-text:not(.expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, var(--background));
}

.study-commentary-text.expanded {
    max-height: none;
}

.study-commentary-expand {
    display: block;
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid var(--border);
    color: var(--gold);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem;
    cursor: pointer;
}

.study-commentary-expand:hover {
    background: var(--gold)10;
}

.study-commentary-footer {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-top: 1px solid var(--border);
}

.study-commentary-inject-btn {
    background: none;
    border: none;
    color: var(--gold);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

.study-commentary-inject-btn:hover {
    background: var(--gold)15;
}

/* ─── Library cards in study ─── */
.study-library-ref {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.study-library-text {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary);
    max-height: 120px;
    overflow: hidden;
    position: relative;
}
.study-library-text:not(.expanded)::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40px;
    background: linear-gradient(transparent, var(--background));
}
.study-library-text.expanded {
    max-height: none;
}
.study-library-expand {
    display: block;
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid var(--border);
    color: var(--accent-library);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem;
    cursor: pointer;
}
.study-library-expand:hover {
    background: rgba(123,104,174,0.06);
}
.study-library-footer {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-top: 1px solid var(--border);
}
.study-library-inject-btn {
    background: none;
    border: none;
    color: var(--accent-library);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}
.study-library-inject-btn:hover {
    background: rgba(123,104,174,0.08);
}

@media (hover: none) {
    .study-list-item-delete { opacity: 0.5; }
    .study-word-remove { opacity: 0.5; }
    .study-note-add-btn { opacity: 0.7; }
    .study-note-actions { opacity: 0.7; }
    .bible-note-use-btn { opacity: 0.7; }
    .bible-note-inject-btn { opacity: 0.7; }
    .study-commentary-remove { opacity: 0.5; }
    .study-commentary-actions button { opacity: 0.7; }
}

/* ── Save dropdown menu ───────────────────────────────────────────────── */
.study-save-menu-wrap {
    position: relative;
    display: inline-block;
}
.study-save-menu {
    display: none;
    position: fixed;
    min-width: 140px;
    background: var(--surface);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    z-index: 10010;
    overflow: hidden;
}
.study-save-menu.open {
    display: block;
}
.frosted-header .study-save-menu-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.85rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
}
.study-save-menu-item:hover {
    background: rgba(123,104,174,0.10);
}


/* ─── Harmony study card body (C1 condensed + per-witness expand) ─── */
.study-harmony-body { padding: 0.55rem 0.8rem 0.65rem; }
.study-harmony-sect { font-size: 0.72rem; color: var(--text-secondary); font-weight: 500; }
.study-harmony-witness { margin-bottom: 0.5rem; }
.study-harmony-witness-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.study-harmony-witness-ref {
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.study-harmony-expand {
    margin-left: auto;
    flex-shrink: 0;
    border: none;
    background: none;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--primary);
    cursor: pointer;
    padding: 0 2px;
}
.study-harmony-expand:hover { text-decoration: underline; }
.study-harmony-condensed,
.study-harmony-full {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-top: 0.15rem;
}
.study-harmony-vnum {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--primary);
    vertical-align: super;
    margin-right: 0.2rem;
}
.study-harmony-silent {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-secondary);
    margin: 0.25rem 0;
}
.study-harmony-commentary {
    margin-top: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: var(--gold-bg, rgba(255, 248, 220, 0.35));
    border-left: 3px solid var(--gold, #D4A017);
    border-radius: 4px;
    font-size: 0.82rem;
    line-height: 1.55;
}
.study-harmony-accreditation {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--text-secondary);
}
.study-harmony-open-btn {
    border: none;
    background: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    padding: 0.15rem 0.2rem;
}
.study-harmony-open-btn:hover { text-decoration: underline; }

/* Owner ruling 2026-09-04: a verse already living IN a study neither
   re-sends itself to a study nor "shares" from inside one (people
   would read it as sharing the study). Those two tools hide on verse
   cards expanded inside the console; tag/note/commentary/refs remain. */
.study-harmony-full .verse-action-bar .bookmark-verse-btn,
.study-harmony-full .verse-action-bar .share-verse-btn { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   FEAT-035 S1 — THE WRITING DESK: the bar, the whisper, the split Save,
   and the F4 dialogs (StudyDialogs.js). The old header/nudge/save-menu
   dress above goes dead here and is swept at S7.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The bar: the one header bar (modal-header.css). The title holds the
      name field and the whisper on one line. ── */
.study-bar .study-titlebox {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* ── The whisper — save-state line beside the study name ── */
.study-whisper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 0;
    min-height: 1em;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 1;
}

/* The whisper keeps its own small sans type inside the serif title */
.study-header .study-whisper,
.study-header .study-whisper span {
    font-size: 0.69rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    color: var(--text-secondary);
}

.study-header .study-whisper.dirty,
.study-header .study-whisper.dirty span { color: #a04435; }
.study-header .study-whisper.saved,
.study-header .study-whisper.saved span { color: #2E7D46; }

.study-whisper-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C0392B;
    display: none;
    flex-shrink: 0;
}
.study-whisper.dirty .study-whisper-dot { display: inline-block; }

.study-whisper .study-whisper-save {
    border: none;
    background: none;
    color: var(--gold);
    font-size: 0.69rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

/* ── New · Studies · Export · Study Mode: shared .modal-ctl ── */
.study-gbtn .study-gbtn-ct { opacity: 0.55; }

/* ── The split Save ── */
.study-savewrap {
    display: flex;
    margin-left: 4px;
}
/* Save: shared .modal-ctl.is-primary; only the join with the caret is its own */
.study-savewrap:has(.study-pcaret) .study-pbtn { border-radius: 10px 0 0 10px; }
.study-save-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FFD9D2;
    display: none;
    flex-shrink: 0;
}
.study-savewrap.dirty .study-save-dot { display: block; }
.study-pcaret {
    border-left-color: rgba(255, 255, 255, 0.35);
    border-radius: 0 10px 10px 0;
    padding: 0 8px;
    font-size: 10px;
}
.study-savewrap.saved .study-pbtn,
.study-savewrap.saved .study-pcaret {
    background: #2E7D46;
    border-color: #2E7D46;
}

/* ── F4 dialogs (StudyDialogs.js) ── */
.study-dlg-overlay {
    position: absolute;
    inset: 0;
    z-index: 300; /* above the Studies list overlay (200) */
    background: rgba(0, 0, 0, 0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: study-fade-in 0.15s ease;
}
.study-dlg {
    background: var(--surface);
    border-radius: 14px;
    min-width: 340px;
    max-width: 430px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}
.study-dlg-h {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0.6rem 0.9rem;
}
.study-dlg-h h3 { margin: 0; }
.study-dlg-b { padding: 1rem 0.95rem; }
.study-dlg-b p {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.study-dlg-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--background);
    color: var(--text-primary);
}
.study-dlg-input:focus {
    outline: none;
    border-color: var(--primary);
}
.study-dlg-f {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 0.95rem 0.95rem;
}
.study-dlg-f button {
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.study-dlg-ok {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
}
.study-dlg-ok.danger {
    background: #C0392B;
    border-color: #C0392B;
}
.study-dlg-cancel {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
/* The three-door gate (FEAT-045): a quieter danger door beside the primary */
.study-dlg-alt.danger {
    background: var(--surface);
    border: 1px solid #C0392B;
    color: #C0392B;
}
.study-dlg-alt.danger:hover { background: #C0392B; color: #fff; }
.study-dlg-f .study-dlg-cancel:first-child { margin-right: auto; }
.study-dlg-note { font-size: 0.78rem; color: var(--text-secondary); margin: 0.35rem 0 0; }
/* Hosted on document.body (the gate can open with the console closed):
   fixed, and above Settings (10000), the credits modal (10001), the cap dialog (10650) */
.study-dlg-overlay.is-app { position: fixed; z-index: 10700; }

/* ── Bar + dialogs on phones (full S6 mobile pass comes later) ── */
@media (max-width: 480px) {
    .study-gbtn { padding: 0.3rem 0.4rem; font-size: 0.72rem; }
    .study-pbtn { padding: 0.3rem 0.7rem; font-size: 0.72rem; }
    .study-dlg { min-width: 0; width: calc(100vw - 48px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   FEAT-035 S2 — THE SHEETS: one grammar for the content stream.
   Kind = spine color + nav-icon eyebrow. Scoped to .study-sheet so the
   legacy verse cards (S3 replaces them) are untouched.
   ═══════════════════════════════════════════════════════════════════════ */

.study-modal {
    --sp-verse: #5B4B8A;
    --sp-comm: #2E5D3A;
    --sp-lib: #7A5C1E;
    --sp-intro: #33607E;
    --sp-isbe: #8B3A3A;
    --sp-harm: #B85C38;
    --sp-map: #2C6E5D;
    --sp-word: #6B4E8E;
}

/* ── The sheet frame ── */
.study-sheet.study-content-card {
    position: relative;
    background: var(--surface);
    border: none;
    border-left: 3px solid var(--border);
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 3px 12px rgba(0, 0, 0, 0.05);
    margin: 0 0 12px;
    padding: 0;
    scroll-margin: 12px;
}
.study-sheet.study-content-card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09), 0 10px 26px rgba(0, 0, 0, 0.09);
}
.study-sheet.t-comm { border-left-color: var(--sp-comm); }
.study-sheet.t-lib { border-left-color: var(--sp-lib); }
.study-sheet.t-intro { border-left-color: var(--sp-intro); }
.study-sheet.t-isbe { border-left-color: var(--sp-isbe); }
.study-sheet.t-harm { border-left-color: var(--sp-harm); }
.study-sheet.t-word { border-left-color: var(--sp-word); }
.study-sheet.t-map { border-left-color: var(--sp-map); }

/* ── Eyebrow row ── */
.study-sheet .sh-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px 0;
}
.study-sheet .sh-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.study-sheet .sh-kind svg { width: 13px; height: 13px; flex-shrink: 0; }
.study-sheet.t-comm .sh-kind { color: var(--sp-comm); }
.study-sheet.t-lib .sh-kind { color: var(--sp-lib); }
.study-sheet.t-intro .sh-kind { color: var(--sp-intro); }
.study-sheet.t-isbe .sh-kind { color: var(--sp-isbe); }
.study-sheet.t-harm .sh-kind { color: var(--sp-harm); }
.study-sheet.t-map .sh-kind { color: var(--sp-map); }
.study-sheet .sh-tr {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ── Hover actions ── */
.study-sheet .sh-acts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.13s;
}
.study-sheet:hover .sh-acts { opacity: 1; }
@media (hover: none) {
    .study-sheet .sh-acts { opacity: 0.75; }
}
.study-sheet .study-card-grip.grip {
    color: var(--text-secondary);
    cursor: grab;
    font-size: 0.8rem;
    padding: 0 3px;
    letter-spacing: -2px;
}
.study-sheet .abtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 23px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    padding: 0;
}
.study-sheet .abtn svg { width: 12px; height: 12px; }
.study-sheet .abtn:hover { color: var(--primary); border-color: var(--primary); }
.study-sheet .abtn.on { color: var(--primary); border-color: var(--primary); background: var(--highlight); }
.study-sheet .abtn .bdg {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--primary);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    border-radius: 7px;
    min-width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
}
.study-sheet .study-card-remove.xbtn {
    border: none;
    background: none;
    color: var(--text-secondary);
    opacity: 0.55;
    font-size: 0.9rem;
    cursor: pointer;
    width: 22px;
    height: 22px;
    line-height: 1;
    padding: 0;
}
.study-sheet .study-card-remove.xbtn:hover { opacity: 1; color: #C0392B; }

/* ── Serif ref line ── */
.study-sheet .sh-ref {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 3px 14px 0;
}
.study-sheet .sh-ref-sub {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Prose bodies (existing classes, sheet dress) ── */
.study-sheet .study-commentary-text,
.study-sheet .study-library-text {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-primary);
    padding: 6px 16px 4px;
    max-height: 78px;
    overflow: hidden;
    position: relative;
}
.study-sheet .study-commentary-text.expanded,
.study-sheet .study-library-text.expanded {
    max-height: none;
}
.study-sheet .study-commentary-text:not(.expanded)::after,
.study-sheet .study-library-text:not(.expanded)::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 32px;
    background: linear-gradient(transparent, var(--surface));
}

/* ── Foot ── */
.study-sheet .sh-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 11px;
    flex-wrap: wrap;
}
.study-sheet .morebtn {
    border: none;
    background: none;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.study-sheet .injbtn {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 0.69rem;
    font-weight: 600;
    cursor: pointer;
}
.study-sheet .injbtn:hover { color: var(--primary); border-color: var(--primary); }
.study-sheet .openbtn {
    border: none;
    background: none;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.study-sheet .openbtn:hover { text-decoration: underline; }
.study-sheet .chip {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 0.69rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--background);
    color: var(--text-secondary);
}
.study-sheet .chip:hover { background: var(--highlight); color: var(--primary); }
.study-sheet .chip svg { width: 11px; height: 11px; }

/* ── Notes drawer (legacy note DOM inside, new dress) ── */
.study-sheet .study-notes-drawer {
    display: none;
    border-top: 1px dashed var(--border);
    padding: 9px 16px 12px;
    background: var(--background);
    border-radius: 0 0 11px 11px;
}
.study-sheet .study-notes-drawer.open { display: block; }
.study-sheet .study-notes-drawer .study-notes-section {
    border-top: none;
    margin: 0;
    padding: 0;
    background: none;
}
.study-sheet .study-notes-drawer .study-notes-header {
    padding: 0 0 4px;
    border: none;
    background: none;
}
.study-sheet .study-notes-drawer .study-note-item {
    font-size: 0.78rem;
    line-height: 1.6;
    padding: 8px 11px;
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 7px;
}
.study-sheet .study-notes-drawer .study-note-textarea,
.study-sheet .study-notes-drawer .study-note-edit-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--primary);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.78rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    resize: vertical;
    min-height: 50px;
    background: var(--surface);
    color: var(--text-primary);
}

/* ── Harmony witnesses inside sheets ── */
.study-sheet .study-harmony-body { padding: 4px 16px 2px; }
.study-sheet .study-harmony-witness {
    border-left: 3px solid var(--border);
    padding: 2px 0 2px 10px;
    margin-bottom: 9px;
}
.study-sheet .study-harmony-expand {
    margin-left: auto;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 999px;
    padding: 1px 10px;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}
.study-sheet .study-harmony-expand:hover {
    color: var(--primary);
    border-color: var(--primary);
    text-decoration: none;
}
.study-sheet .study-harmony-condensed,
.study-sheet .study-harmony-full {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.92rem;
}

/* ── Map inside sheets ── */
.study-sheet .study-map-body { padding: 6px 16px 0; }
.study-sheet .study-map-img {
    width: 100%;
    border-radius: 9px;
    border: 1px solid var(--border);
    display: block;
}
.study-sheet .study-map-credit {
    font-size: 0.7rem;
    color: var(--text-secondary);
    padding: 5px 2px 0;
}
.study-sheet .study-map-missing {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-secondary);
    padding: 8px 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   FEAT-035 S3 — THE HOLDER: verse sheets carry THE reader VerseCard.
   ═══════════════════════════════════════════════════════════════════════ */

/* HOLDER LAW (owner-ruled): a verse living IN the study neither re-sends
   itself to a study nor shares from inside one — extends the standing
   .study-harmony-full suppression rule to the sheet mount scope. */
.study-sheet-verse .verse-action-bar .bookmark-verse-btn,
.study-sheet-verse .verse-action-bar .share-verse-btn,
.study-sheet-passage .verse-action-bar .bookmark-verse-btn,
.study-sheet-passage .verse-action-bar .share-verse-btn { display: none; }

.study-sheet-verse {
    padding: 2px 14px 6px;
}
.study-sheet-verse .verse-container {
    margin: 0;
    padding: 0.35rem 0.2rem;
    background: transparent;
}

/* Bible-note mirrors ride inside the sheet body */
.study-sheet .bible-notes-section {
    margin: 0 14px 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   FEAT-035 S4 — THE DESK: content stream · manuscript page · dictionary
   column (D1). Three columns; the page is a 62ch paper sheet with a
   sticky pen tray; the dictionary collapses to a labeled spine.
   ═══════════════════════════════════════════════════════════════════════ */

.study-desk { display: flex; }

/* Column heads share one line grammar */
.study-desk .study-colhead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 8px;
    flex-shrink: 0;
    background: none;
    border-bottom: none;
}

/* ── Content stream (left) ── */
.study-desk .study-panel-left.study-col-content {
    flex: 0 0 40%;
    min-width: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}
.study-desk .study-verses-panel {
    padding: 2px 14px 40px;
    background: var(--background);
}

/* ── Manuscript (center) ── */
.study-desk .study-panel-right.study-col-ms {
    flex: 1 1 auto;
    min-width: 0;
    border-right: 1px solid var(--border);
    background: var(--background);
    display: flex;
    flex-direction: column;
}
.study-ms-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 8px 26px 46px;
}
.study-desk .study-text-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
}
.study-page {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    max-width: 62ch;
    margin: 0 auto;
    min-height: 92%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 14px 34px rgba(0, 0, 0, 0.07);
    padding: 34px 42px 60px;
    position: relative;
}
/* The gold margin thread */
.study-page::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 30px;
    width: 1px;
    background: linear-gradient(transparent, rgba(232, 217, 160, 0.55) 12%, rgba(232, 217, 160, 0.55) 88%, transparent);
    pointer-events: none;
}

/* Pen tray — sticky pill above the page; the legacy toolbar element
   keeps its class (controller wiring) and wears the pill dress.
   ONE ROW, NEVER TWO (FEAT-049 4b, owner 2026-09-27 "very sloppy"): the
   pens are ranked; as the column narrows rank 3 then rank 2 fold into
   the More (⋯) menu, which shows only when something is folded. The row
   never wraps and never clips. Container queries read the column. */
.study-ms-tools {
    position: sticky;
    top: 6px;
    z-index: 10;
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
    container-type: inline-size;   /* the tray reads its own column's width */
}
.study-ms-tools .study-text-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 6px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
    margin: 0;
    max-width: 100%;
}
.study-ms-tools .study-fmt-btn {
    border: none;
    background: none;
    border-radius: 99px;
    width: auto;            /* the base rule fixes 32px; the tray's pens are their natural width */
    min-width: 26px;
    height: 25px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.study-ms-tools .study-fmt-btn:hover,
.study-ms-tools .study-fmt-btn.active {
    background: var(--highlight);
    color: var(--primary);
}
.study-ms-tools .study-fmt-sep {
    width: 1px;
    height: 14px;
    background: var(--border);
    margin: 0 2px;
    flex: none;
}
.study-fmt-rank1b, .study-fmt-rank2, .study-fmt-rank3 { display: contents; }

/* Folding. Rank 3 (Align, Size, Colour, Insert, Clear) under 880 px;
   rank 2 (S, Highlight, Link, lists) under 560 px; B I U under 340 px. More appears with
   the first fold and holds exactly what folded. */
.study-fmt-more, .study-fmt-more-sep, .study-fmt-more-rank1b, .study-fmt-more-rank2, .study-fmt-more-rank3 { display: none; }
@container (max-width: 880px) {
    .study-fmt-rank3 { display: none; }
    .study-fmt-more { display: inline-flex; }
    .study-fmt-more-sep { display: block; }
    .study-fmt-more-rank3 { display: block; }
    .study-ms-tools .study-fmt-word { display: none; }
}
@container (max-width: 560px) {
    .study-fmt-rank2 { display: none; }
    .study-fmt-more-rank2 { display: block; }
    .study-ms-tools .study-mode-label { display: none; }
    .study-ms-tools .study-style-label { min-width: 0; }
}
@container (max-width: 400px) {
    .study-ms-tools .study-text-toolbar { padding: 4px 3px; }
    .study-ms-tools .study-fmt-sep { margin: 0 1px; }
}
@container (max-width: 340px) {
    .study-fmt-rank1b { display: none; }
    .study-fmt-more-rank1b { display: block; }
}

/* Menus: a list of pens under a button; each item shows its name in its
   own type and its shortcut. A row holds pens side by side. */
.study-fmt-menu { position: relative; display: inline-flex; flex: none; }
.study-ms-tools .study-fmt-dd { gap: 4px; padding: 0 8px; font-size: 0.78rem; font-weight: 500; }
.study-fmt-menu.open > .study-fmt-dd { background: var(--highlight); color: var(--primary); }
.study-style-label { min-width: 68px; text-align: left; }
.study-fmt-caret { font-size: 0.7rem; opacity: 0.7; }
.study-fmt-plus { font-size: 1rem; line-height: 1; margin-top: -1px; }
.study-fmt-menu-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 208px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    z-index: 20;
}
.study-fmt-menu-list[hidden] { display: none; }
.study-fmt-more .study-fmt-menu-list { left: auto; right: 0; min-width: 232px; }
.study-ms-tools .study-fmt-item {
    width: 100%;
    height: auto;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.86rem;
    color: var(--text-primary);
    text-align: left;
}
.study-ms-tools .study-fmt-item.active { background: var(--highlight); color: var(--primary); }
.study-fmt-item kbd {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.68rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.study-fmt-row { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; }
.study-fmt-row .study-fmt-btn { height: 28px; min-width: 28px; }
.study-fmt-row-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 8px 8px 2px;
}
.study-fmt-row-label:first-child { padding-top: 4px; }
/* Each style item drawn in its own type (the mock) */
.study-mi-p .study-fmt-item-label { font-family: 'Crimson Text', Georgia, serif; font-size: 0.95rem; }
.study-mi-h .study-fmt-item-label { font-family: 'Crimson Text', Georgia, serif; font-size: 1.15rem; font-weight: 700; }
.study-mi-sh .study-fmt-item-label { font-family: 'Crimson Text', Georgia, serif; font-size: 1rem; font-weight: 700; }
.study-mi-ul .study-fmt-item-label::before { content: '•'; margin-right: 8px; color: var(--text-secondary); }
.study-mi-ol .study-fmt-item-label::before { content: '1.'; margin-right: 8px; color: var(--text-secondary); font-size: 0.8em; }

/* The wizard (FEAT-058): the desk's dialog frame; fields stacked */
.study-wz .study-wz-field + .study-wz-field { margin-top: 12px; }
.study-wz .study-wz-in { width: 100%; box-sizing: border-box; }
.study-wz .study-wz-opt { text-transform: none; font-weight: 400; letter-spacing: 0; }
.study-wz .study-qw-msg { display: block; min-height: 1.2em; margin-top: 8px; font-size: 0.8rem; color: var(--text-secondary); }
.study-wz .study-qw-msg.bad { color: var(--danger, #b23a3a); }
.study-mi-ico { display: inline-flex; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; color: var(--text-secondary); }
.study-mi-ico svg { width: 14px; height: 14px; }

/* Alignment, size and colour (4b) */
.study-align-glyph, .study-size-glyph, .study-color-glyph { display: inline-flex; align-items: center; }
.study-align-glyph svg { display: block; }
.study-size-glyph { font-size: 0.8rem; font-weight: 600; letter-spacing: -0.02em; }
.study-size-glyph.is-set { color: var(--primary); }
.study-color-glyph { position: relative; font-weight: 700; font-size: 0.85rem; padding-bottom: 3px; }
.study-color-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: transparent; }
.study-ms-tools .study-fmt-size { padding: 0 8px; font-family: 'Crimson Text', Georgia, serif; color: var(--text-primary); }
.study-fmt-sizes { align-items: baseline; }
.study-fmt-swatches { gap: 6px; padding: 6px; }
.study-ms-tools .study-fmt-swatch {
    width: 24px; height: 24px; min-width: 0;
    border-radius: 50%;
    background: var(--swatch);
    border: 2px solid transparent;
    padding: 0;
}
.study-ms-tools .study-fmt-swatch:hover { background: var(--swatch); border-color: var(--border); }
.study-ms-tools .study-fmt-swatch.active { background: var(--swatch); border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--surface) inset; }
.study-ms-tools .study-fmt-swatch-none { background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); font-size: 0.7rem; }
.study-ms-tools .study-fmt-swatch-none:hover, .study-ms-tools .study-fmt-swatch-none.active { background: var(--highlight); color: var(--primary); border-color: var(--primary); }

/* On a phone a menu is a sheet under the tray, spanning the tray's width.
   BUG 2026-10-04 (owner demo, iPhone): it was a bottom sheet anchored to
   the screen edge with position: fixed — on WebKit the keyboard covers
   that edge, and the tray's container-type pins fixed children to the
   tray instead of the screen. Absolute under the tray depends on neither:
   the tray is sticky at the top and stays in view with the keyboard up. */
@media (max-width: 768px) {
    .study-fmt-menu { position: static; }   /* the sheet positions against the tray, not the button */
    .study-fmt-menu-list, .study-fmt-more .study-fmt-menu-list {
        position: absolute;
        top: calc(100% + 6px);
        left: 10px;
        right: 10px;
        bottom: auto;
        min-width: 0;
        max-height: 60vh;
        overflow-y: auto;
        padding: 8px;
        border-radius: 14px;
        z-index: 1200;
    }
    .study-ms-tools .study-fmt-item { padding: 11px 12px; font-size: 1rem; }
    .study-fmt-row .study-fmt-btn { height: 36px; min-width: 36px; }
    .study-ms-tools .study-fmt-swatch { width: 30px; height: 30px; }
}

/* The editor inside the page — the page scrolls, not the editable.
   LAYOUT only; the page's type (h3, p, the <div> line, pre-wrap) is
   css/study-page.css (step 4a). */
.study-page .study-text-editable {
    flex: none;
    overflow: visible;
    min-height: 40vh;
    padding: 0;
    border: none;
    background: transparent;
    outline: none;
}

/* THE EDITOR (FEAT-049 step 2): a selected card or block atom wears a
   quiet ring; the drop line is the engine's. */
.study-page .study-text-editable .ProseMirror-selectednode { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.study-page .study-text-editable hr.ProseMirror-selectednode { outline-offset: 6px; }
.study-page .study-text-editable .study-page-break.ProseMirror-selectednode { outline-offset: 10px; border-radius: 4px; }
.study-page .study-text-editable .study-injected-block.ProseMirror-selectednode { box-shadow: 0 0 0 2px var(--primary); outline: none; }
.study-page .study-drop-line { background: var(--primary); }
.study-page .ProseMirror-gapcursor { display: none; pointer-events: none; position: relative; }
.study-page .ProseMirror-gapcursor:after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid var(--text-primary); animation: study-gapcursor-blink 1.1s steps(2, start) infinite; }
.study-page .ProseMirror-focused .ProseMirror-gapcursor { display: block; }
@keyframes study-gapcursor-blink { to { visibility: hidden; } }
.study-fmt-btn:disabled { opacity: .35; cursor: default; }

/* Read mode: pen tray gone (not rendered); page shows the read bar */
.study-page-read .study-read-bar {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 10px;
    border: none;
    background: none;
}
/* .study-page .study-text-preview — RETIRED 2026-09-27 (step 4a): the Read
   page is the one page class, dressed by css/study-page.css. */

/* ── Dictionary column (right, D1) ── */
.study-col-dict {
    flex: 0 0 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-left: none;
    background: var(--background);
    transition: flex-basis 0.18s ease;
    overflow: hidden;
}
.study-dict-head { padding: 10px 14px 6px; }
.study-dict-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
}
.study-dict-title svg { width: 14px; height: 14px; }
.study-dict-ct { font-size: 0.66rem; color: var(--text-secondary); white-space: nowrap; }
.study-dict-collapse {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 4px;
}
.study-dict-collapse:hover { color: var(--primary); }
.study-desk .study-dictionary-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.study-desk .study-word-list { max-height: 34%; }
.study-desk .study-word-list-header { display: none; } /* colhead carries it */

.study-desk.dict-collapsed .study-col-dict {
    flex-basis: 0;
    border-left: none;
}
.study-dict-spine {
    display: none;
    flex: 0 0 30px;
    border-left: 1px solid var(--border);
    background: var(--background);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.study-desk.dict-collapsed .study-dict-spine { display: flex; }
.study-dict-spine span {
    writing-mode: vertical-rl;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
}

@keyframes study-dict-flash {
    0% { box-shadow: inset 3px 0 0 var(--primary); }
    100% { box-shadow: inset 0 0 0 transparent; }
}
.study-col-dict.dict-flash { animation: study-dict-flash 0.9s ease; }

/* ── Desk responsive (interim — S6 does the true mobile pass) ── */
@media (max-width: 1200px) {
    .study-col-dict { flex: 0 0 260px; }
    .study-desk .study-panel-left.study-col-content { flex: 0 0 36%; }
}
@media (max-width: 900px) {
    /* .study-body stacks (legacy rule) — columns become rows */
    .study-desk .study-panel-left.study-col-content { flex: none; border-right: none; }
    .study-desk .study-panel-right.study-col-ms { flex: 1; border-right: none; }
    .study-col-dict { flex: none; max-height: 45%; border-top: 2px solid var(--border); }
    .study-dict-spine { display: none !important; }
    .study-desk.dict-collapsed .study-col-dict { flex: none; }
}
@media (max-width: 768px) {
    /* Single-panel switching — the dict column joins the grammar.
       Selectors match the desk base rules' specificity so the hide wins. */
    .study-desk .study-panel-left.study-col-content,
    .study-desk .study-panel-right.study-col-ms,
    .study-desk .study-col-dict { display: none; max-height: none; }
    .study-desk .study-panel-left.study-col-content.mobile-active,
    .study-desk .study-panel-right.study-col-ms.mobile-active,
    .study-desk .study-col-dict.mobile-active { display: flex; flex: 1; max-height: none; }
    .study-desk .study-colhead { display: flex; } /* keep Content (N) label */
    .study-ms-scroll { padding: 8px 10px 46px; }
    .study-page { padding: 20px 18px 40px; }
    .study-page::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FEAT-035 S5 — THE RIBBON: the study's spine. Intentional adds only;
   nav-icon pills, chains for same-verse groups, jump · reorder · quote.
   ═══════════════════════════════════════════════════════════════════════ */

.study-ribbon {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.study-rb-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold);
    flex-shrink: 0;
    margin-right: 2px;
}
.study-rb-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: grab;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.study-rb-pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.study-rb-pill:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12); }
.study-rb-pill.dragging { opacity: 0.4; }
.study-rb-pill.drop-before { box-shadow: -3px 0 0 var(--primary); }
.study-rb-pill.drop-after { box-shadow: 3px 0 0 var(--primary); }
.study-rb-pill.t-verse svg { color: var(--sp-verse); }
.study-rb-pill.t-comm svg { color: var(--sp-comm); }
.study-rb-pill.t-lib svg { color: var(--sp-lib); }
.study-rb-pill.t-intro svg { color: var(--sp-intro); }
.study-rb-pill.t-isbe svg { color: var(--sp-isbe); }
.study-rb-pill.t-harm svg { color: var(--sp-harm); }
.study-rb-pill.t-map svg { color: var(--sp-map); }
.study-rb-lbl {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Connected assets (R1, as mocked): a simple border wraps the chain,
   a small dot connects the pills inside. */
.study-rb-chain {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 4px;
    background: var(--background);
    flex-shrink: 0;
}
.study-rb-chain .study-rb-pill {
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.study-rb-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-secondary);
    opacity: 0.6;
    margin: 0 5px;
    flex-shrink: 0;
}
.study-rb-hint {
    font-size: 0.62rem;
    color: var(--text-secondary);
    opacity: 0.75;
    flex-shrink: 0;
    font-style: italic;
    margin-left: auto;
    padding-left: 10px;
}

/* Jump flash on the target sheet */
/* THE LANDING FLASH (owner-ruled 2026-09-15): the target card takes
   one gold breath — ring + warm wash — and fades, so the eye lands
   exactly where the pill sent it. Same grammar as the map-slice landing. */
@keyframes study-rb-flash {
    0% { box-shadow: 0 0 0 3px rgba(138, 109, 47, 0.55); background-color: #fdf8ec; }
    100% { box-shadow: 0 0 0 3px rgba(138, 109, 47, 0); background-color: var(--surface); }
}
.study-content-card.rb-flash,
.study-verse-card.rb-flash { animation: study-rb-flash 1.4s ease; }

/* Page as drop target */
.study-page.droppable {
    outline: 2px dashed var(--primary);
    outline-offset: 4px;
}

/* The undecorated verse quote's credit line */
.study-quote-credit {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .study-rb-hint { display: none; }
    .study-ribbon { padding: 6px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FEAT-035 S6 — THE PHONE: one-line bar, ribbon strip, icon tabs.
   Overrides the legacy ≤480 column-stacked header (rules above).
   ═══════════════════════════════════════════════════════════════════════ */

/* Icon tabs (all widths; visible ≤768 via .study-mobile-nav rule) */
.study-mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.study-mobile-tab svg { width: 19px; height: 19px; }
.study-mobile-tab span { font-size: 0.66rem; font-weight: 600; }

@media (max-width: 768px) {
    /* Ghost buttons go icon-only — the one-line bar */
    .study-gbtn-label { display: none; }
    .study-gbtn { padding: 6px 7px; }
}

@media (max-width: 480px) {
    /* ONE-LINE header (defeats the legacy column stack above) */
    .study-header.study-bar {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 0.4rem 0.6rem;
        cursor: default;
    }
/* DEAD 2026-09-17 — flagged for deletion (one header bar, docs/MODAL_HEADER_DESIGN.md). Nothing wears this any more. Uncomment to revert; delete after a few weeks if all is well.
   Why: reset of the absolute close above; same reason.
    .study-header.study-bar > .study-close-btn {
        position: static;
        top: auto;
        right: auto;
    }
*/
    .study-bar .study-header-left.study-titlebox {
        flex: 1;
        min-width: 0;
        padding-right: 0;
    }
    .study-bar .study-name-input {
        min-width: 0;
        width: 100%;
        max-width: none;
        font-size: 0.95rem;
        padding: 0.1rem 0.3rem;
    }
    .study-bar .study-whisper {
        padding-left: 0.3rem;
        white-space: nowrap;
        overflow: hidden;
    }
    .study-header.study-bar .study-whisper span,
    .study-header.study-bar .study-whisper .study-whisper-save { font-size: 0.6rem; white-space: nowrap; }
    .study-bar .modal-ctls {
        flex-wrap: nowrap;
        gap: 2px;
        flex-shrink: 0;
    }
    .study-bar .modal-mark { display: none; } /* the microscope yields to the name */
    .study-pbtn { padding: 0.3rem 0.55rem; }
    .study-pbtn .study-save-lbl { display: none; } /* icon + dot say it */
    .study-pbtn svg { margin: 0; }
}

/* ═══ S5 tweak (owner, 2026-09-14): chained groups move as one — the
   little grab circle at the top of the chain capsule. ═══ */
.study-ribbon { padding-top: 12px; }
.study-rb-chain { position: relative; }
.study-rb-grab {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid var(--primary);
    cursor: grab;
    z-index: 2;
}
.study-rb-grab:hover { background: var(--primary); }
.study-rb-chain.dragging { opacity: 0.4; }

/* ═══════════════════════════════════════════════════════════════════════
   FEAT-036 — THE PASSAGE SEND + THE CARD LAW (owner-ruled 2026-09-14)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── THE CHOOSER (StudySend) — the atlas-send-menu grammar, verbatim ── */
.study-send-menu {
    position: fixed;
    /* THE chooser serves every host it can be summoned from — reader,
       atlas, ISBE panels, the trail popup (z 20000). Same single
       constant as the selection pill (owner-reported 2026-09-15:
       chooser opened BEHIND the trail popup at its old 10300). */
    z-index: 26000;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-width: min(340px, calc(100vw - 16px));
}
.study-send-menu button {
    border: none;
    background: none;
    text-align: left;
    padding: 11px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: var(--text-primary);
    min-height: var(--touch-target-min);
}
.study-send-menu button + button,
.study-send-menu .study-send-thru { border-top: 1px solid var(--border); }
.study-send-menu button:hover { background: var(--highlight); }
.study-send-menu b { font-size: 0.88rem; }
.study-send-menu span { font-size: 0.74rem; color: var(--text-secondary); }

/* ── The through-verse rail: THE CLAMP IS THE RAIL (R-P2) ── */
.study-send-thru { padding: 10px 14px 12px; }
.study-send-thru-cap {
    font-size: 0.74rem;
    color: var(--text-secondary);
    margin-bottom: 7px;
}
.study-send-thru-cap em { opacity: 0.8; }
.study-send-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 96px;
    overflow-y: auto;   /* Ps 119 scrolls; the rail never invents verses */
}
.study-send-chip {
    min-width: 34px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px 6px 1px;
    line-height: 1.1;
}
.study-send-chip:hover { border-color: var(--primary); color: var(--primary); }
.study-send-chip.end { border-style: dashed; }
.study-send-chip small {
    font-size: 0.5rem;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
}

/* ── Passage sheets: the holder scope (Scripture rendered live) ── */
.study-sheet-passage {
    padding: 2px 14px 6px;
}
.study-sheet-passage .verse-container {
    margin: 0;
    padding: 0.35rem 0.2rem;
    background: transparent;
}
.study-sheet-passage .chapter-paragraph {
    margin: 0 0 0.55rem;
}

/* Verse labels in the passage sheet's collective note mirror (R-P6) */
.bible-note-verse {
    font-weight: 700;
    font-size: 0.74rem;
    color: var(--primary);
}

/* Dictionary word card (ninth kind) — the lemma reads like the entry */
.study-word-card .study-word-lemma-ref {
    font-size: 1.15rem;
    font-weight: 700;
}

/* Card compaction (owner-ruled 2026-09-14) moved to css/study-cards.css —
   ONE card sheet for the desk, the community and the preview (2026-09-26). */

/* ═══════════════════════════════════════════════════════════════════════
   FEAT-037 — THE MAP SLICE (owner-ruled 2026-09-14): clip a plate
   detail onto the page. Window-not-copy; one elegant width (R-M5).
   ═══════════════════════════════════════════════════════════════════════ */

.mclip-overlay {
    position: fixed;
    inset: 0;
    z-index: 10400;
    background: rgba(30, 26, 20, 0.74);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 10px;
    box-sizing: border-box;
    overflow: hidden;
}
.mclip-bar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--surface);
    border-radius: 12px;
    padding: 10px 16px;
    max-width: min(960px, 96vw);
    box-shadow: var(--shadow-lg);
    z-index: 1;
}
.mclip-pvbox { text-align: center; }
.mclip-pv {
    display: block;
    border: 2px solid #8a6d2f;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: var(--highlight);
    margin: 0 auto;
}
.mclip-pv img { position: absolute; display: block; max-width: none; }
.mclip-pvlbl {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #8a6d2f;
    margin-top: 3px;
    text-transform: uppercase;
}
.mclip-words b { display: block; font-size: 0.9rem; color: var(--text-primary); }
.mclip-words span { font-size: 0.74rem; color: var(--text-secondary); }
.mclip-caption {
    flex: 1 1 200px;
    min-width: 160px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.82rem;
    background: var(--background);
    color: var(--text-primary);
}
.mclip-place, .mclip-cancel {
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
}
.mclip-place { background: #8a6d2f; color: #fff; }
.mclip-place.armed { animation: mclipPulse 1.6s ease-out infinite; }
@keyframes mclipPulse {
    0% { box-shadow: 0 0 0 0 rgba(138, 109, 47, 0.55); }
    70% { box-shadow: 0 0 0 12px rgba(138, 109, 47, 0); }
    100% { box-shadow: 0 0 0 0 rgba(138, 109, 47, 0); }
}
.mclip-cancel { background: var(--highlight); color: var(--text-primary); }
.mclip-stage {
    position: relative;
    flex: 0 1 auto;
    overflow: hidden;
    border-radius: 6px;
    user-select: none;
    touch-action: none;
}
.mclip-img { display: block; max-width: 94vw; max-height: calc(100vh - 190px); }
.mclip-rect {
    position: absolute;
    border: 2px solid #8a6d2f;
    box-sizing: border-box;
    border-radius: 2px;
    cursor: move;
    box-shadow: 0 0 0 9999px rgba(20, 16, 10, 0.55);
}
.mclip-rect::after {
    content: '';
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #8a6d2f;
    border-radius: 50%;
    cursor: nwse-resize;
}

/* The placed slice's card dress (width, caption, note) and the harmony
   rows moved to css/study-cards.css — ONE card sheet (2026-09-26). The
   window itself (.study-msl-view + img) lives in css/study-slice.css. */

/* ── The content column head: house eyebrow, not a v1 tab (owner-ruled
   2026-09-15 — same grammar as the Ribbon label). ── */
.study-col-content .study-panel-tab,
.study-col-content .study-panel-tab.active {
    background: none;
    border: none;
    padding: 2px 0;
    cursor: default;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ═══ THE LIVING RIBBON (owner-ruled 2026-09-15 — visual cues only) ═══ */

/* 2 — the grip confesses draggability */
.study-rb-grip {
    color: var(--border);
    font-size: 0.68rem;
    line-height: 1;
    letter-spacing: -1px;
    cursor: grab;
    flex-shrink: 0;
}
.study-rb-pill:hover { transform: translateY(-1px); }
.study-rb-pill:active .study-rb-grip { cursor: grabbing; }

/* 1 — scroll-spy: the piece in view wears the gold line */
.study-rb-pill { position: relative; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.study-rb-pill.rb-here { border-color: var(--gold); background: var(--surface); }
.study-rb-pill.rb-here::after {
    content: '';
    position: absolute;
    left: 10px; right: 10px; bottom: -1px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
}

/* 4 — two-way street: the answered pill pulses once */
@keyframes rb-pill-pulse {
    0% { box-shadow: 0 0 0 0 rgba(138, 109, 47, 0.45); }
    100% { box-shadow: 0 0 0 9px rgba(138, 109, 47, 0); }
}
.study-rb-pill.rb-pulse { animation: rb-pill-pulse 0.7s ease 1; }

/* 3 — the once-per-session teaching shimmer */
@keyframes rb-shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 420px 0; }
}
.study-ribbon.rb-teach .study-rb-pill {
    background-image: linear-gradient(100deg,
        rgba(138, 109, 47, 0) 20%, rgba(138, 109, 47, 0.14) 50%, rgba(138, 109, 47, 0) 80%);
    background-size: 420px 100%;
    animation: rb-shimmer 1.6s ease 2;
}
.study-ribbon.rb-teach .study-rb-hint { opacity: 1; color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
    .study-ribbon.rb-teach .study-rb-pill,
    .study-rb-pill.rb-pulse,
    .study-content-card.rb-flash,
    .study-verse-card.rb-flash { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   FEAT-041 — THE QUESTIONNAIRE (2026-09-16). The tenth kind: its sheet,
   the + door at the top of the content window, and the wizard dialog
   (a wide StudyDialogs shell). Design: docs/QUESTIONNAIRE_CARD_DESIGN.md
   ═══════════════════════════════════════════════════════════════════ */
.study-modal { --sp-quest: #4A5A78; }
.study-rb-pill.t-quest svg { color: var(--sp-quest); }
.study-sheet.t-quest { border-left-color: var(--sp-quest); }
.study-sheet.t-quest .sh-kind { color: var(--sp-quest); }
/* FEAT-058: the quotation sheet — the house gold, as its card wears */
.study-rb-pill.t-cite svg { color: #8a6d2f; }
.study-sheet.t-cite { border-left-color: #8a6d2f; }
.study-sheet.t-cite .sh-kind { color: #8a6d2f; }
.study-quotation-text { font-family: 'Crimson Text', Georgia, serif; font-size: 1rem; line-height: 1.6; }
.study-quest-list { margin: 4px 0 0; padding-left: 1.15rem; font-size: 0.86rem; line-height: 1.45; color: var(--text-primary); }
.study-quest-list li { margin: 2px 0; }
.study-quest-hint, .study-quest-empty { color: var(--text-secondary); font-size: 0.72rem; }

/* The + door — sits with the eyebrow in the content column head */
.study-col-content .study-colhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.study-add-btn {
    flex: none;
    width: 26px; height: 26px;
    border-radius: 999px;
    border: 1px solid var(--primary);
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary);
    font-size: 1.05rem; line-height: 1;
    display: grid; place-items: center;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.study-add-btn:hover { background: rgba(var(--primary-rgb), 0.18); }
.study-send-menu button.study-send-dim { opacity: 0.5; cursor: not-allowed; }

/* The wizard */
.study-dlg.study-dlg-wide { max-width: 640px; width: min(640px, calc(100vw - 48px)); max-height: calc(100% - 40px); display: flex; flex-direction: column; }
.study-qw-b { overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.study-qw-field { display: block; }
.study-qw-lbl { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 4px; }
.study-qw-prompt {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: 9px;
    padding: 9px 12px;
    font-family: 'Crimson Text', Georgia, serif; font-size: 1rem; line-height: 1.5;
    background: var(--background); color: var(--text-primary);
    resize: vertical; min-height: 56px;
}
.study-qw-prompt:focus { outline: none; border-color: var(--primary); }
.study-qw-own { font-size: 0.78rem; color: var(--text-secondary); }

/* Manuscript tabs (FEAT-041 preview): Study · one per questionnaire ·
   Reference. A preview is the report PART in the report's own frame
   (StudyExport.frameDocument) — what you preview is what prints. */
.study-col-ms .study-ms-tabs { padding: 0 0.6rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; flex: none; }
.study-col-ms .study-ms-tabs::-webkit-scrollbar { display: none; }
.study-col-ms .study-ms-tabs .study-panel-tab { padding: 0.45rem 0.7rem; font-size: 0.72rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.study-col-ms .study-ms-tabs .study-panel-tab svg { width: 12px; height: 12px; }
.study-ms-preview { padding: 0; }
.study-preview-frame { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; background: #fff; }
.study-qw-live { border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; background: rgba(var(--primary-rgb), 0.03); display: flex; flex-direction: column; gap: 10px; }
.study-qw-eyebrow { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.study-qw-kinds { display: flex; gap: 6px; }
.study-qw-kind, .study-qw-add, .study-qw-addchoice {
    border: 1px solid var(--border); background: var(--surface); color: var(--text-primary);
    border-radius: 999px; padding: 5px 12px; font-size: 0.78rem; font-weight: 500; cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.study-qw-kind.on, .study-qw-add { background: var(--primary); border-color: var(--primary); color: #fff; }
.study-qw-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); }
.study-qw-stepper button { border: 0; background: none; width: 32px; height: 30px; font-size: 1rem; cursor: pointer; color: var(--text-primary); }
.study-qw-stepper output { min-width: 34px; text-align: center; font-weight: 600; font-size: 0.9rem; }
.study-qw-chrow { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.study-qw-chrow .study-dlg-input { flex: 1; padding: 7px 10px; }
.study-qw-rm { border: 0; background: none; color: var(--text-secondary); cursor: pointer; font-size: 1rem; }
.study-qw-rm:disabled { opacity: 0.35; cursor: default; }
.study-qw-box { width: 13px; height: 13px; border: 1.4px solid var(--text-primary); border-radius: 2px; flex: none; display: inline-block; }
.study-qw-layouts { display: flex; gap: 8px; flex-wrap: wrap; }
.study-qw-layout { border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; font-size: 0.8rem; cursor: pointer; display: flex; gap: 8px; align-items: center; background: var(--surface); color: var(--text-primary); }
.study-qw-layout:has(input:checked) { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.09); }
.study-qw-layout input { accent-color: var(--primary); margin: 0; }
.study-qw-preview { font-family: 'Crimson Text', Georgia, serif; font-size: 0.95rem; }
.study-qw-preview .study-qw-c { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.study-qw-preview .study-qw-c i { color: var(--text-secondary); }
.study-qw-lay-row { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.study-qw-lay-row .study-qw-c { display: inline-flex; }
.study-qw-lay-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.study-qw-addrow { display: flex; gap: 8px; align-items: center; }
.study-qw-msg { font-size: 0.76rem; color: var(--text-secondary); }
.study-qw-msg.bad { color: #C0392B; font-weight: 600; }
.study-qw-sofar { display: flex; flex-direction: column; gap: 6px; }
.study-qw-list { display: flex; flex-direction: column; gap: 6px; }
.study-qw-item { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; font-size: 0.84rem; background: var(--surface); }
.study-qw-item-k { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); min-width: 56px; }
.study-qw-item-p { flex: 1; font-family: 'Crimson Text', Georgia, serif; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.study-qw-item-h { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; }
.study-qw-item button { border: 0; background: none; color: var(--text-secondary); padding: 2px 4px; cursor: pointer; font-size: 0.9rem; }
.study-qw-item button:disabled { opacity: 0.3; cursor: default; }
.study-qw-none { font-size: 0.8rem; color: var(--text-secondary); }
.study-qw-f { align-items: center; }
.study-qw-foot { flex: 1; font-size: 0.72rem; color: var(--text-secondary); }
@media (max-width: 480px) {
    .study-dlg.study-dlg-wide { width: calc(100vw - 24px); max-height: calc(100% - 24px); }
    .study-qw-foot { display: none; }
    .study-qw-item-h { display: none; }
}
/* Print-order drag on the manuscript tabs (FEAT-041) */
.study-col-ms .study-ms-tab[draggable="true"] { cursor: grab; }
.study-col-ms .study-ms-tab.drop-before { box-shadow: inset 3px 0 0 var(--gold); }
.study-col-ms .study-ms-tab.drop-after { box-shadow: inset -3px 0 0 var(--gold); }
/* Phones: the per-panel tab bars are replaced by the bottom nav (rule at
   ~1257) — but the manuscript tabs ARE the print preview and the print
   order, so they stay. */
@media (max-width: 768px) {
    .study-col-ms .study-ms-tabs { display: flex; }
}