/* Translation Manager: the Covenant Hall look (tokens, login, shell, sidebar, cards, forms, settings), trimmed. */
:root {
    --ink: #16221E;
    --ink-2: #1E2C27;
    --ink-line: rgba(255, 255, 255, 0.09);
    --ink-text: #F4F2EC;
    --ink-text-muted: rgba(244, 242, 236, 0.56);
    --ink-text-faint: rgba(244, 242, 236, 0.38);

    --paper: #FAF9F5;
    --surface: #FFFFFF;
    --surface-hover: #FFFDF8; /* a card's hover shade, a touch warmer than --surface */
    --line: #E7E3D8;
    --line-strong: #D9D4C5;

    --text: #1E241F;
    --text-muted: #6E756E;
    --text-faint: #98988C;

    /* Note tables, drawn the way Notion draws them (see .note-prose table). */
    --table-line: rgba(55, 53, 47, 0.09);
    --table-head: rgba(55, 53, 47, 0.035);
    --table-head-text: rgba(55, 53, 47, 0.65);
    --table-accent: #2383E2;
    --table-select: rgba(35, 131, 226, 0.14);
    --table-hover: rgba(55, 53, 47, 0.08);
    --table-popover-shadow: 0 0 0 1px rgba(15, 15, 15, 0.05), 0 3px 6px rgba(15, 15, 15, 0.1), 0 9px 24px rgba(15, 15, 15, 0.2);

    --brass: #A47A2E;
    --brass-strong: #8A6524;
    --brass-tint: #F1E4C8;
    --brass-tint-line: #E3D0A0;

    --brick: #A0432C;
    --brick-strong: #7A2E1C;
    --brick-tint: #F7E4DE;
    --brick-tint-line: #E7C3B6;

    --sage: #4C7A5D;
    --sage-strong: #2F5B40;
    --sage-tint: #E1EEE3;
    --sage-tint-line: #C3DFC9;

    --dusk: #3F5673;
    --dusk-tint: #E7EDF4;

    --success: #2d7a3e;
    --quote-tint: rgba(20, 25, 20, 0.06); /* a quoted message's own tint, inside a bubble that's var(--surface) */
    --words-of-christ: #B0361F; /* the Bible's red letters */

    --shadow-sm: 0 1px 2px rgba(20, 25, 20, 0.06);
    --shadow-md: 0 8px 24px rgba(20, 25, 20, 0.08);
    --shadow-lg: 0 24px 56px rgba(15, 20, 15, 0.22);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    color-scheme: light; /* native controls (checkboxes, scrollbars, the calendar's own bits) follow along */
}

:root[data-theme="dark"] {
    --paper: #17191A;
    --surface: #202325;
    --surface-hover: #262A2C;
    --line: rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 255, 255, 0.18);

    --text: #EDEBE4;
    --text-muted: rgba(237, 235, 228, 0.64);
    --text-faint: rgba(237, 235, 228, 0.42);

    --table-line: rgba(255, 255, 255, 0.094);
    --table-head: rgba(255, 255, 255, 0.03);
    --table-head-text: rgba(255, 255, 255, 0.46);
    --table-select: rgba(35, 131, 226, 0.28);
    --table-hover: rgba(255, 255, 255, 0.055);
    --table-popover-shadow: 0 0 0 1px rgba(255, 255, 255, 0.094), 0 3px 6px rgba(0, 0, 0, 0.3), 0 9px 24px rgba(0, 0, 0, 0.5);

    --brass-tint: rgba(164, 122, 46, 0.20);
    --brass-tint-line: rgba(164, 122, 46, 0.45);
    --brick-tint: rgba(160, 67, 44, 0.20);
    --brick-tint-line: rgba(160, 67, 44, 0.45);
    --sage-tint: rgba(76, 122, 93, 0.22);
    --sage-tint-line: rgba(76, 122, 93, 0.48);
    --dusk-tint: rgba(63, 86, 115, 0.28);

    --success: #5FBE77;
    --quote-tint: rgba(255, 255, 255, 0.08);
    --words-of-christ: #E8826B;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

p {
    margin: 0 0 12px;
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
* {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(900px 560px at 50% -8%, #24352E 0%, transparent 60%),
        var(--ink);
}

.login-card {
    background: var(--surface);
    padding: 40px 38px 36px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 380px;
}

.login-mark {
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
}

.login-mark img,
.sidebar-brand .mark img,
.mobile-topbar-brand .mark img {
    display: block;
    width: 100%;
    height: 100%;
}

.login-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-strong);
    margin-bottom: 10px;
}

.login-card h1 {
    font-style: italic;
    font-size: 27px;
    margin-bottom: 6px;
}

.login-card p.subtitle {
    color: var(--text-muted);
    font-size: 13.5px;
    margin-bottom: 28px;
}

.login-role {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: var(--paper);
    border: 1px solid var(--line);
}

.login-role input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.login-role span {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.login-role input:checked + span {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.login-role input:focus-visible + span {
    outline: 2px solid var(--brass);
    outline-offset: 1px;
}

.login-remember {
    margin: 4px 0 4px;
}

.login-remember-hint {
    margin: 0 0 18px;
    font-size: 11.5px;
    color: var(--text-faint);
}

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"],
.field input[type="date"],
.field input[type="number"],
.field input[type="url"],
.field input[type="file"],
.field select,
.field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-body);
    background: var(--surface);
    color: var(--text);
}

.field textarea {
    resize: vertical;
    line-height: 1.5;
}

.field .tagify {
    --tags-border-color: var(--line-strong);
    --tags-hover-border-color: var(--line-strong);
    --tags-focus-border-color: var(--brass);
    --tag-bg: var(--brass-tint);
    --tag-hover: var(--brass-tint-line);
    --tag-text-color: var(--text);
    --tag-remove-btn-bg--hover: var(--brass-strong);
    --tag-remove-bg: var(--brass-tint-line);
    --tag-border-radius: 6px;
    --tag-pad: 0.25em 0.55em;
    --placeholder-color: var(--text-muted);
    --placeholder-color-focus: var(--text-muted);
    width: 100%;
    padding: 4px 6px;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-body);
    background: var(--surface);
}

.field .tagify--focus {
    box-shadow: 0 0 0 3px rgba(164, 122, 46, 0.15);
}

.field .hint,
.field-note {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 5px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--brass);
    box-shadow: 0 0 0 3px rgba(164, 122, 46, 0.15);
}

.checkbox-field {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 14px;
}

.checkbox-field input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brass);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--ink);
    color: var(--ink-text); /* not var(--paper): that's the page's own colour, which flips in dark mode, unlike this button */
    border: 1px solid var(--ink);
    padding: 10px 18px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
    text-align: center;
    transition: background .15s ease;
}

.btn:hover {
    background: var(--ink-2);
}

.btn-auto {
    width: auto;
}

.btn-small {
    width: auto;
    padding: 7px 14px;
    font-size: 12.5px;
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--line-strong);
}

.btn-secondary:hover {
    background: var(--paper);
}

.btn-danger {
    background: var(--brick);
    border-color: var(--brick);
}

.btn-danger:hover {
    background: var(--brick-strong);
}

.error {
    background: var(--brick-tint);
    color: var(--brick-strong);
    border: 1px solid var(--brick-tint-line);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}

.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.form-actions .btn {
    width: auto;
}

.shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 258px;
    flex-shrink: 0;
    background: var(--ink);
    color: var(--ink-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    transition: width .2s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 16px 18px 18px;
}

.brand-link,
.mobile-topbar-brand {
    text-decoration: none;
    color: inherit;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sidebar-brand .mark {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
}

.sidebar-brand .mark-logo {
    background: var(--surface);
    object-fit: cover;
}

.sidebar-brand .word {
    font-family: var(--font-display);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--ink-text);
    line-height: 1.25;
}

.sidebar-brand .word small {
    display: block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-text-faint);
    margin-top: 2px;
    font-weight: 400;
}

.sidebar-nav {
    flex: 1;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    white-space: nowrap;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-text-muted);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.sidebar-link:hover {
    background: var(--ink-2);
    color: var(--ink-text);
}

.sidebar-link.active {
    background: rgba(164, 122, 46, 0.18);
    color: #EFD9A8;
}

.sidebar-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sidebar-toggle {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--ink-text-faint);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.sidebar-toggle:hover {
    background: var(--ink-2);
    color: var(--ink-text);
}

.sidebar-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform .2s ease;
}

.sidebar.sidebar-collapsed {
    width: 68px;
}

.sidebar-collapsed .sidebar-brand {
    flex-direction: column;
    gap: 14px;
    padding: 22px 0 16px;
}

.sidebar-collapsed .sidebar-brand .word {
    display: none;
}

.sidebar-collapsed .sidebar-toggle {
    margin-left: 0;
}

.sidebar-collapsed .sidebar-toggle svg {
    transform: scaleX(-1);
}

.sidebar-collapsed .sidebar-nav {
    padding: 6px 10px;
    overflow-x: hidden;
}

.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding: 10px 0;
}

.sidebar-collapsed .sidebar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sidebar-collapsed .sidebar-link .nav-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9.5px;
    box-shadow: 0 0 0 2px var(--ink);
}

.sidebar-collapsed .sidebar-footer {
    padding: 12px 8px;
}

.sidebar-collapsed .avatar-btn {
    justify-content: center;
}

.sidebar-collapsed .avatar-btn .who {
    display: none;
}

.sidebar-collapsed .avatar-dropdown {
    right: auto;
    left: 8px;
    width: 200px;
}

.sidebar-footer {
    border-top: 1px solid var(--ink-line);
    padding: 12px;
    position: relative;
}

.avatar-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-text);
    text-align: left;
}

.avatar-btn:hover {
    background: var(--ink-2);
}

.avatar-btn img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--ink-line);
    flex-shrink: 0;
}

.avatar-btn .who {
    min-width: 0;
    flex: 1;
}

.avatar-btn .who .name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avatar-btn .who .email {
    font-size: 10.5px;
    color: var(--ink-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-mono);
    margin-top: 1px;
}

.avatar-dropdown {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(100% + 8px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: none;
    z-index: 30;
}

.avatar-dropdown.open {
    display: block;
}

.avatar-dropdown a,
.avatar-dropdown button {
    display: block;
    width: 100%;
    padding: 11px 15px;
    font-size: 13.5px;
    text-decoration: none;
    color: var(--text);
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-body);
    cursor: pointer;
}

.avatar-dropdown a:hover,
.avatar-dropdown button:hover {
    background: var(--paper);
}

.avatar-dropdown a.logout {
    color: var(--brick);
    border-top: 1px solid var(--line);
}

.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 40px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    flex-wrap: wrap;
}

.page-header .eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.page-header h1 {
    font-size: 21px;
}

.content {
    padding: 32px 40px 56px;
    flex: 1;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.content.wide {
    max-width: none;
    margin: 0;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.card h2 {
    font-size: 16.5px;
    margin-bottom: 6px;
}

.directory-header h2 {
    margin-bottom: 0;
}

button.edit-link {
    background: none;
    cursor: pointer;
}

.mark-form select {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.household-members a {
    text-decoration: none;
    color: var(--text);
}

.household-members a:hover {
    color: var(--brass-strong);
}

.form-section-title {
    font-size: 15px;
    margin: 26px 0 14px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.field label .optional {
    font-weight: 400;
    color: var(--text-muted);
}

.empty-state {
    margin: 8px 0 0;
    padding: 28px 0 12px;
    text-align: center;
}

.empty-state a {
    color: var(--brass-strong);
}

.current-file a {
    color: var(--brass-strong);
}

.page-header .form-actions .btn {
    width: auto;
}

.avatar-stack {
    display: inline-flex;
    align-items: center;
    padding-left: 8px;
}

.avatar-stack img,
.avatar-more {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    margin-left: -8px;
    object-fit: cover;
    background: var(--paper);
}

.avatar-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-muted);
    background: var(--line);
}

.picker-item:has(input:checked) {
    border-color: var(--brass);
    background: var(--brass-tint);
}

.picker-item input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--brass);
}

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

.settings-avatar-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.settings-avatar-preview img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
}

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 22, 18, 0.55);
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.modal-overlay.open {
    display: flex;
}

.modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 28px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal h3 {
    font-size: 17px;
    margin-bottom: 16px;
}

.modal p {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 20px;
}

.mobile-topbar {
    display: none;
}

.mobile-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-topbar-brand .mark {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
}

.mobile-topbar-brand .word {
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink-text);
    max-width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--ink-text);
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-menu-btn:hover {
    background: var(--ink-2);
}

.mobile-menu-btn svg {
    width: 22px;
    height: 22px;
}

.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--ink);
    z-index: 200;
    flex-direction: column;
}

.mobile-menu-overlay.open {
    display: flex;
}

.mobile-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 22px 28px;
    overflow-y: auto;
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 22px;
}

.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-menu-link {
    display: block;
    width: 100%;
    padding: 14px 12px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink-text-muted);
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.mobile-menu-link:hover {
    background: var(--ink-2);
    color: var(--ink-text);
}

.mobile-menu-link.active {
    background: rgba(164, 122, 46, 0.18);
    color: #EFD9A8;
}

.mobile-menu-link.logout {
    color: #E3A08F;
}

.mobile-menu-account {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--ink-line);
}

.mobile-menu-who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 16px;
}

.mobile-menu-who img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--ink-line);
    flex-shrink: 0;
}

.mobile-menu-who .name {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-text);
}

.mobile-menu-who .email {
    display: block;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--ink-text-faint);
    margin-top: 2px;
}

body.menu-open {
    overflow: hidden;
}

@media (max-width: 860px) {
.shell {
        flex-direction: column;
    }
.sidebar {
        display: none;
    }
.mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        background: var(--ink);
        padding: 8px 10px 8px 14px;
        position: sticky;
        top: 0;
        z-index: 40;
    }
.page-header {
        padding: 18px 20px;
    }
.content {
        padding: 24px 20px 40px;
    }
}

@media (max-width: 480px) {
.login-card {
        padding: 30px 24px 26px;
    }
.card {
        padding: 20px 18px;
    }
.content {
        padding: 18px 14px 32px;
    }
.page-header {
        padding: 16px 14px;
    }
.settings-avatar-preview {
        flex-wrap: wrap;
    }
.field-row {
        grid-template-columns: 1fr;
    }
}

.submission-actions p {
    margin: 0;
}

.pdf-viewer > * {
    position: absolute;
    inset: 0;
}

.table-menu button {
    height: 28px;
    padding: 0 8px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.table-menu button:hover {
    background: var(--table-hover);
}

.table-menu button.is-active {
    color: var(--table-accent);
}

.table-menu button.is-danger:hover {
    background: rgba(235, 87, 87, 0.1);
    color: #EB5757;
}

.bubble-menu button {
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--ink-text);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
}

.bubble-menu button:hover {
    background: var(--ink-2);
}

.bubble-menu button.is-active {
    background: rgba(164, 122, 46, 0.35);
    color: #EFD9A8;
}

.markdown-body h1 { font-size: 2em; }

.markdown-body h2 { font-size: 1.5em; }

.markdown-body h3 { font-size: 1.25em; }

.markdown-body p {
    color: inherit;
}

.markdown-body li:has(> input[type="checkbox"]) {
    list-style: none;
}

.markdown-body li > input[type="checkbox"] {
    margin: 0 0.45em 0 -1.3em;
    vertical-align: middle;
}

.markdown-body img {
    max-width: 100%;
}

.markdown-body a {
    color: var(--brass-strong);
}

.modal.event-modal {
    max-width: 560px;
}

.event-datetime input {
    min-width: 0;
}

.event-datetime input[type="date"] {
    flex: 1.4;
}

.field .event-datetime input[type="time"],
.field input[type="time"] {
    flex: 1;
    padding: 10px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: 14px var(--font-body);
    background: var(--surface);
    color: var(--text);
}

.field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
}

.event-visibility label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font-size: 13.5px;
    cursor: pointer;
}

.event-visibility label:has(input:checked) {
    border-color: var(--brass);
    background: var(--brass-tint);
}

.event-visibility input {
    margin: 3px 0 0;
    accent-color: var(--brass);
}

.event-color input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.event-color input:checked + span {
    box-shadow: 0 0 0 2px var(--text);
}

.event-color input:focus-visible + span {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
}

@media (max-width: 860px) {
.modal.event-modal {
        padding: 22px 18px;
    }
}

.issue-picker .form-actions {
    margin-top: 14px;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--brick);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.mobile-menu-link .nav-badge {
    margin-left: 8px;
}

.mobile-menu-btn {
    position: relative;
}

.nav-badge-float {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    font-size: 10px;
    box-shadow: 0 0 0 2px var(--ink);
}

.people-check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
}

.crop-stage img {
    display: block;
    max-width: 100%;
}

.toast img {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.btn-collections {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    gap: 5px;
}

.btn-collections svg {
    width: 13px;
    height: 13px;
}

.view-toggle {
    display: inline-flex;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}

.view-toggle a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-left: 1px solid var(--line-strong);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
}

.view-toggle a:first-child {
    border-left: 0;
}

.view-toggle a:hover {
    color: var(--text);
}

.view-toggle a[aria-current="page"] {
    background: var(--brass-tint);
    color: var(--brass-strong);
}

.view-toggle svg {
    width: 15px;
    height: 15px;
}

.page-header h1.collection-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.move-option:has(input[type="radio"]:checked) {
    border-color: var(--brass-tint-line);
    background: var(--brass-tint);
}

.move-option input[type="radio"] {
    margin: 0;
    accent-color: var(--brass);
}

.move-option-new input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    font: 14px var(--font-body);
}

.move-option-new input[type="text"]:focus {
    outline: none;
    border-color: var(--brass);
}

@media (max-width: 480px) {
.page-header .form-actions {
        flex-wrap: wrap;
    }
}

.field textarea.link-url-input {
    font-family: var(--font-mono);
    font-size: 13px;
    word-break: break-all;
    resize: vertical;
}

.prayer-archived-note p {
    margin: 0;
}

.page-header h1 .tag {
    vertical-align: middle;
    margin-left: 8px;
}

.prayer-side .card {
    margin-bottom: 0;
}

.prayer-add h2 {
    font-size: 16px;
    margin-bottom: 14px;
}

@media (max-width: 1000px) {
.prayer-add-collapsed h2 {
        margin-bottom: 0;
    }
}

.prayer-edit .field label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comment-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.comment-form textarea:focus {
    outline: none;
    border-color: var(--brass);
}

/* In the sidebar footer, to the right of the account button. */
.sidebar-footer {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 4px;
}

.sidebar-footer .avatar-btn {
    min-width: 0;
}

.mobile-bell .nav-badge-float {
    top: -3px;
    right: -5px;
}


.theme-toggle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-text-faint);
    cursor: pointer;
    transition: color .15s ease;
}

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

.theme-toggle svg {
    width: 16px;
    height: 16px;
}

.theme-toggle .theme-icon-moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-icon-sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-icon-moon {
    display: block;
}

.mobile-bell {
    position: relative;
    margin-left: auto;
    text-decoration: none;
}

.mobile-bell svg {
    width: 22px;
    height: 22px;
}

.btn-share svg {
    width: 16px;
    height: 16px;
}

.share-add input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    background: var(--surface);
}

.share-add input:focus {
    outline: none;
    border-color: var(--brass);
}

.share-result img,
.share-person img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--line);
}

.share-person select {
    padding: 6px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: var(--surface);
    font: inherit;
    font-size: 13px;
}

.shared-by img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.request-access h2 {
    margin-bottom: 8px;
}

.request-access p {
    color: var(--text-muted);
}

.request-role label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px;
    border-radius: 6px;
    font-size: 13.5px;
    cursor: pointer;
}

.request-role label:has(input:checked) {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

.request-access-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.request-access-form .btn {
    align-self: center;
}

.login-card.offline-card {
    max-width: 520px;
}

.offline-card p.subtitle {
    margin-bottom: 20px;
}

.mc-thumb-pick img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.has-media-viewer {
    overflow: hidden;
}

img.mv-media {
    cursor: zoom-in;
    -webkit-user-drag: none;
}

.media-viewer.is-zoomed img.mv-media {
    cursor: grab;
}

.mv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-head h3 {
    font-size: 16px;
}

.off-file > a.off-link:hover {
    background: var(--paper);
}

.sidebar-link.is-unavailable,
.mobile-menu-link.is-unavailable {
    opacity: 0.45;
}

.settings-logo-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--ink);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    max-width: 360px;
}

.settings-logo-preview img {
    max-height: 40px;
    max-width: 200px;
    display: block;
    object-fit: contain;
}

.settings-logo-default-label {
    font-size: 12px;
    color: var(--ink-text-muted);
}

.settings-success {
    color: var(--success);
    font-size: 14px;
    margin-bottom: 18px;
}

.glightbox-open .modal-overlay.open {
    z-index: 1000001;
}

.glightbox-clean .gslide-desc .glightbox-actions .btn {
    color: #000;
}

:root[data-theme="dark"] .glightbox-clean .gdesc-inner {
    background: #1a2820;
}

:root[data-theme="dark"] .glightbox-clean .gslide-title {
    color: #e8e0d5;
}

:root[data-theme="dark"] .glightbox-clean .gslide-desc .glightbox-actions .btn {
    color: var(--ink-text);
}

.theme-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.theme-swatch input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-swatch-preview {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    width: 52px;
    height: 36px;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}

.theme-swatch--active .theme-swatch-preview,
.theme-swatch:hover .theme-swatch-preview {
    border-color: var(--brass);
}

.theme-swatch--active .theme-swatch-preview {
    box-shadow: 0 0 0 2px var(--brass);
}

.theme-swatch-bg {
    flex: 3;
    display: block;
}

.theme-swatch-accent {
    flex: 2;
    display: block;
}

.theme-swatch-label {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.theme-swatch--active .theme-swatch-label {
    color: var(--brass);
    font-weight: 600;
}

.share-public-toggle input {
    margin-top: 3px;
}

.share-public-link input {
    flex: 1;
    min-width: 0;
    font-size: 13px;
}

body.public-share {
    background: var(--paper);
    color: var(--text);
}

:root[data-theme="dark"] .public-logo-light {
    display: none;
}

:root[data-theme="dark"] .public-logo-dark {
    display: inline;
}

.download-menu-list a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text);
    font-size: 13.5px;
    text-decoration: none;
}

.download-menu-list a:hover {
    background: var(--paper);
}

.quiz-question textarea,
.quiz-option input[type="text"],
.quiz-limit input {
    padding: 8px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
}

.quiz-question textarea {
    width: 100%;
    resize: vertical;
}

.quiz-option input[type="text"] {
    flex: 1;
    min-width: 0;
}

.quiz-option input[type="radio"],
.quiz-choice input[type="radio"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--sage);
}

.quiz-limit input {
    width: 90px;
}

.quiz-choice:has(input:checked) {
    border-color: var(--sage-tint-line);
    background: var(--sage-tint);
}

.quiz-form textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    resize: vertical;
}

/* "Emoji | GIF" at the bottom of the smiley's panel (assets/js/inbox.js), when GIFs are on. */
.picker-switch {
    flex: none;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    border-top: 1px solid var(--line);
}

.gif-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shortcut-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mention-option img {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.lec-search input {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 42px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.lec-filters select {
    height: 44px;
    max-width: 100%;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.lec-result-line a {
    margin-left: 10px;
}

.lec-hero h2 {
    margin-bottom: 8px;
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.12;
    color: var(--ink-text);
}

.lec-hero p {
    margin-bottom: 10px;
    color: rgba(244, 242, 236, 0.82);
}

.lec-hero .btn-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: var(--ink-text);
    border-color: rgba(255, 255, 255, 0.3);
}

.lec-row-head h2 {
    font-size: 19px;
}

.lec-strip > * {
    flex: none;
    scroll-snap-align: start;
}

.lec-strip-lecture > * {
    width: 260px;
}

.lec-strip-series > * {
    width: 300px;
}

.lec-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lec-speaker img {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--surface);
    box-shadow: var(--shadow-sm);
}

.lec-series-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lec-speaker-chip img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.lec-watch-side h2 {
    margin-bottom: 10px;
    font-size: 16px;
}

.lec-watch-side h2 a {
    text-decoration: none;
}

.lec-cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lec-form-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lec-manage img {
    width: 96px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    object-fit: cover;
}

.lec-guests img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.lec-guest-form .field {
    margin-bottom: 0;
}

@media (max-width: 700px) {
.lec-strip-lecture > * {
        width: 72vw;
    }
.lec-strip-series > * {
        width: 78vw;
    }
}

@media (max-width: 700px) {
.lec-filters select {
        flex: 1 1 140px;
    }
.lec-hero h2 {
        font-size: 30px;
    }
.lec-hero p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
.lec-row-head h2 {
        font-size: 17px;
    }
.lec-strip-lecture > * {
        width: 66vw;
    }
.lec-strip-series > * {
        width: 74vw;
    }
}

@media (max-width: 700px) {
.lec-hero h2 {
        margin-bottom: 8px;
        font-size: 32px;
    }
.lec-hero-actions .btn {
        justify-content: center;
        width: 100%;
        min-height: 48px;
        border-radius: 12px;
        font-size: 15.5px;
    }
.lec-hero .btn-secondary {
        background: rgba(60, 64, 62, 0.82);
        border-color: transparent;
    }
}

.hy-paste textarea {
    width: 100%;
    margin: 8px 0;
    padding: 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
}

.hy-edit-head select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}

.hy-edit-section textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-article, 'Gentium Book Plus', Georgia, serif);
    font-size: 17px;
    line-height: 1.5;
    resize: vertical;
}

.pr-cover h1 {
    margin: 0;
    font-size: calc(7vmin * var(--hy-size, 1));
    line-height: 1.12;
}

.pr-cover p {
    margin: 2vh 0 0;
    font-size: calc(3vmin * var(--hy-size, 1));
    color: var(--pr-muted);
}

.staff-perms td label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 16px;
    font-weight: 400;
    white-space: nowrap;
}

.staff-perms .hint {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12.5px;
}

.svc-inline .field {
    flex: 1;
    min-width: 200px;
    margin: 0;
}

:root[data-theme="dark"] .label-0 { --label-bg: #2B593F; --label-fg: rgba(255, 255, 255, 0.88); }

:root[data-theme="dark"] .label-1 { --label-bg: #89632A; --label-fg: rgba(255, 255, 255, 0.88); }

:root[data-theme="dark"] .label-2 { --label-bg: #28456C; --label-fg: rgba(255, 255, 255, 0.88); }

:root[data-theme="dark"] .label-3 { --label-bg: #6E3630; --label-fg: rgba(255, 255, 255, 0.88); }

:root[data-theme="dark"] .label-4 { --label-bg: #492F64; --label-fg: rgba(255, 255, 255, 0.88); }

:root[data-theme="dark"] .label-5 { --label-bg: #5A5A5A; --label-fg: rgba(255, 255, 255, 0.88); }

.photo-field input[type="url"] {
    margin-top: 8px;
}

.event-kind label { cursor: pointer; }

.event-kind input { position: absolute; opacity: 0; pointer-events: none; }

.event-kind label:has(input:checked) span { background: var(--ink); color: var(--ink-text); }

.event-kind label:has(input:focus-visible) span { outline: 2px solid var(--brass); outline-offset: -2px; }

.device-list { list-style: none; margin: 0; padding: 0; }

.device-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }

.device-list li:first-child { border-top: 0; }

.device-icon { font-size: 22px; flex: none; }

.device-info { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }

.device-meta { flex-basis: 100%; font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }

.device-this { font-size: 11px; font-weight: 600; color: var(--success); background: var(--sage-tint, transparent); border-radius: 999px; padding: 1px 8px; }

.device-list form { flex: none; }


/* ---- Notes (copied from Covenant Hall) ---- */
.success {
    background: var(--sage-tint);
    color: var(--sage-strong);
    border: 1px solid var(--sage-tint-line);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}

.table-scroll {
    overflow-x: auto;
    position: relative;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
    color: var(--text-muted);
}

.icon-btn:hover {
    background: var(--brick-tint);
    border-color: var(--brick-tint-line);
    color: var(--brick);
}

.icon-btn svg {
    width: 15px;
    height: 15px;
}

.list-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.search-input {
    flex: 1;
    min-width: 200px;
    padding: 9px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: var(--font-body);
    background: var(--surface);
    color: var(--text);
}

.search-input:focus {
    outline: none;
    border-color: var(--brass);
    box-shadow: 0 0 0 3px rgba(164, 122, 46, 0.15);
}

.icon-btn-placeholder {
    display: inline-block;
    width: 28px;
    margin-left: 6px;
    vertical-align: middle;
}

.eyebrow-link {
    text-decoration: none;
}

.eyebrow-link:hover {
    color: var(--brass-strong);
}

.resource-row .icon-btn {
    margin-left: 0;
    flex-shrink: 0;
}

@media (max-width: 860px) {
.icon-btn {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 480px) {
.resource-row .icon-btn {
        margin-left: auto;
    }
}

.notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 22px;
}

.note-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.note-card:hover,
.note-card:focus-within {
    border-color: var(--brass-tint-line);
    box-shadow: var(--shadow-md);
}

.note-card:has(:focus-visible) {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

.note-thumb {
    display: block;
    height: 220px;
    padding: 16px 18px 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.note-page {
    position: relative;
    display: block;
    height: 100%;
    padding: 14px 14px 0;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(20, 25, 20, 0.12);
    overflow: hidden;
}

.note-page::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36px;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--surface));
}

.note-page-inner {
    width: 200%;
    transform: scale(0.5);
    transform-origin: top left;
    pointer-events: none;
}

.note-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 8px 11px 14px;
}

.note-meta-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.note-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.note-card-link:focus-visible {
    outline: none;
}

.note-edited {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

.note-card .icon-btn {
    position: relative;
    z-index: 2;
}

.note-new-btn {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.note-page-new {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brass);
}

.note-page-new::after {
    display: none;
}

.note-page-new svg {
    width: 46px;
    height: 46px;
}

.note-documents {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 12px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.note-document {
    /* Badge beside the name and details; the action buttons on a line of their own underneath, so the name gets the
       row's full width. */
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 4px 12px;
    padding: 10px 12px 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.note-document-type {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--dusk-tint);
    color: var(--dusk);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
}

.note-document-pdf {
    background: var(--brick-tint);
    color: var(--brick);
}

.note-document-jpg,
.note-document-jpeg,
.note-document-png {
    background: var(--sage-tint);
    color: var(--sage-strong);
}

.note-document-mp3,
.note-document-wav {
    background: var(--brass-tint);
    color: var(--brass-strong);
}

.note-document-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.note-document .icon-btn {
    margin-left: 0;
}

.icon-btn-download:hover,
.icon-btn-rename:hover {
    background: var(--brass-tint);
    border-color: var(--brass-tint-line);
    color: var(--brass-strong);
}

.doc-main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.doc-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-name {
    display: flex;
    align-items: baseline;
    max-width: min(640px, 100%);
}

.doc-name .doc-name-input {
    flex: 0 1 auto;
    width: auto;
    min-width: 4ch;
    /* Grow with the text so the extension sits right after the name (the size attribute covers older browsers). */
    field-sizing: content;
}

.doc-name-ext {
    flex: none;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--text-muted);
}

.doc-viewer {
    flex: 1;
    min-height: 0;
}

.doc-credit {
    margin: 0;
    padding: 6px 16px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 11px;
}

.doc-credit a {
    color: inherit;
}

.note-heading {
    flex: 1;
    min-width: 0;
}

.note-title-input {
    display: block;
    width: 100%;
    max-width: 640px;
    margin-left: -8px;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--text);
}

.note-title-input:hover {
    border-color: var(--line);
}

.note-title-input:focus {
    outline: none;
    border-color: var(--brass);
    background: var(--surface);
}

.save-status {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.save-status[data-state="error"] {
    color: var(--brick);
    white-space: normal;
}

.note-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 40px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.toolbar-select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
}

.toolbar-hint {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--text-muted);
}

.toolbar-hint kbd {
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
}

.note-canvas {
    padding: 32px 40px 72px;
}

.note-sheet {
    max-width: 816px;
    min-height: 70vh;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.note-editor .note-prose {
    min-height: 70vh;
    padding: 48px 64px 96px;
    outline: none;
}

.note-prose > :first-child {
    margin-top: 0;
}

.note-prose li > p {
    margin: 0;
}

.note-prose .is-empty[data-placeholder]::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    color: var(--text-faint);
    pointer-events: none;
}

.note-prose ul[data-type="taskList"] {
    padding-left: 0.2em;
    list-style: none;
}

.note-prose ul[data-type="taskList"] > li {
    display: flex;
    align-items: flex-start;
    gap: 0.55em;
}

.note-prose ul[data-type="taskList"] > li > label {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: 1.7em;
    user-select: none;
}

.note-prose ul[data-type="taskList"] > li > label input {
    margin: 0;
    accent-color: var(--brass);
    cursor: pointer;
}

.note-prose ul[data-type="taskList"] > li > div {
    flex: 1;
    min-width: 0;
}

.note-prose ul[data-type="taskList"] > li > div > p {
    margin: 0;
}

.note-prose ul[data-type="taskList"] > li[data-checked="true"] > div {
    color: var(--text-muted);
    text-decoration: line-through;
}

.note-prose .tableWrapper {
    margin: 4px 0 1em;
    padding-bottom: 2px;
    overflow-x: auto;
}

.note-prose table {
    width: max-content;
    max-width: 100%;
    margin: 4px 0 1em;
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.9em;
    line-height: 1.5;
}

.note-prose .tableWrapper table {
    display: table;
    width: 100%;
    max-width: none;
    margin: 0;
    table-layout: fixed;
}

.note-prose table th,
.note-prose table td {
    position: relative;
    min-width: 120px;
    height: 33px;
    padding: 7px 9px;
    border: 1px solid var(--table-line);
    background: none;
    color: var(--text);
    vertical-align: top;
    overflow-wrap: anywhere;
}

.note-prose table th {
    background: var(--table-head);
    font-weight: 600;
    text-align: left;
}

.note-prose th > p,
.note-prose td > p {
    min-height: 1.5em;
}

.table-menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    max-width: calc(100vw - 16px);
    align-items: center;
    gap: 1px;
    padding: 4px;
    background: var(--surface);
    border-radius: 6px;
    box-shadow: var(--table-popover-shadow);
}

.table-menu[hidden] {
    display: none;
}

.note-prose th p,
.note-prose td p {
    margin: 0;
}

.note-prose .selectedCell {
    background: var(--table-select);
}

.note-prose .selectedCell::after {
    content: '';
    position: absolute;
    inset: -1px;
    border: 1px solid var(--table-accent);
    pointer-events: none;
}

.note-prose table:has(.selectedCell) {
    caret-color: transparent;
}

.note-prose hr.ProseMirror-selectednode {
    border-top-color: var(--brass);
}

.bubble-menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    display: flex;
    width: max-content;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--ink);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}

.bubble-menu svg {
    width: 15px;
    height: 15px;
    vertical-align: middle;
}

.bubble-menu-sep {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--ink-line);
}

.slash-menu {
    position: absolute;
    z-index: 60;
    width: 260px;
    max-height: 320px;
    padding: 6px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
}

.slash-menu-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 6px;
    background: none;
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
}

.slash-menu-item:hover,
.slash-menu-item.is-selected {
    background: var(--paper);
}

.slash-menu-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}

.slash-menu-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.slash-menu-empty {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.markdown-body {
    color: var(--text);
    line-height: 1.7;
    overflow-wrap: break-word;
}

.markdown-body > :first-child {
    margin-top: 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin: 1.3em 0 0.5em;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--text);
}

.markdown-body h4 { font-size: 1.1em; }

.markdown-body h5,
.markdown-body h6 { font-size: 1em; }

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body blockquote,
.markdown-body pre,
.markdown-body table {
    margin: 0 0 1em;
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 1.6em;
}

.markdown-body li + li {
    margin-top: 0.25em;
}

.markdown-body blockquote {
    padding: 0.1em 1em;
    border-left: 3px solid var(--brass-tint-line);
    color: var(--text-muted);
}

.markdown-body code,
.markdown-body pre {
    font-family: var(--font-mono);
}

.markdown-body :not(pre) > code {
    padding: 0.1em 0.35em;
    font-size: 0.88em;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.markdown-body pre {
    padding: 14px 16px;
    overflow-x: auto;
    font-size: 0.88em;
    line-height: 1.55;
    background: var(--ink);
    color: var(--ink-text);
    border-radius: 8px;
}

.markdown-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.markdown-body th,
.markdown-body td {
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
}

.markdown-body th {
    background: var(--paper);
    font-weight: 600;
}

.markdown-body hr {
    margin: 1.6em 0;
    border: none;
    border-top: 1px solid var(--line-strong);
}

@media (min-width: 861px) {
.note-toolbar {
        position: sticky;
        top: 0;
        z-index: 5;
    }
}

@media (max-width: 860px) {
.notes-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 14px;
    }
.note-thumb {
        height: 180px;
    }
.note-heading {
        flex-basis: 100%;
    }
.note-toolbar {
        padding: 8px 14px;
    }
.toolbar-hint {
        display: none;
    }
.note-canvas {
        padding: 14px 14px 40px;
    }
.note-sheet,
    .note-editor .note-prose {
        min-height: 60vh;
    }
.note-editor .note-prose {
        padding: 24px 20px 64px;
    }
.doc-main .page-header {
        padding: 12px 14px;
        gap: 8px;
    }
.doc-main .form-actions {
        flex-wrap: wrap;
    }
.doc-main .save-status {
        flex-basis: 100%;
        white-space: normal;
    }
}

@media (max-width: 860px) {
.event-visibility,
    .modal.event-modal .field-row {
        grid-template-columns: 1fr;
    }
.modal.event-modal {
        padding: 22px 18px;
    }
}

.people-modal .search-input {
    width: 100%;
    margin-bottom: 10px;
}

.people-modal .group-head-row .search-input {
    flex: 1;
    min-width: 0;
    width: auto;
    margin-bottom: 0;
}

.icon-btn-collections:hover {
    background: var(--brass-tint);
    border-color: var(--brass-tint-line);
    color: var(--brass-strong);
}

.resources-controls {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.resources-controls .list-controls {
    flex: 1;
    min-width: 240px;
}

.note-document-actions {
    grid-column: 2;
    display: flex;
    gap: 2px;
    margin-left: -6px;
}

.note-document-actions .icon-btn {
    margin-left: 0;
}

.library-foot .icon-btn {
    flex: none;
    width: 26px;
    height: 26px;
    margin-left: 0;
}

.icon-btn-folder:hover {
    background: var(--brass-tint);
    border-color: var(--brass-tint-line);
    color: var(--brass-strong);
}

.note-document-note {
    background: var(--brass-tint);
    color: var(--brass-strong);
}

.note-document-note svg {
    width: 20px;
    height: 20px;
}

.note-document-link {
    background: var(--sage-tint);
    color: var(--sage-strong);
}

.note-document-link {
    position: relative;
}

.note-document-link > svg {
    width: 20px;
    height: 20px;
}

.prayer-actions .icon-btn {
    margin-left: 0;
}

.icon-btn-share:hover,
.icon-btn-copy:hover {
    background: var(--brass-tint);
    border-color: var(--brass-tint-line);
    color: var(--brass-strong);
}

.icon-btn-share.is-shared,
.btn-share.is-shared {
    background: var(--sage-tint);
    border-color: var(--sage-tint-line);
    color: var(--sage-strong);
}

.doc-menu {
    display: contents;
}

.doc-mobile-only {
    display: none;
}

@media (min-width: 861px) and (max-width: 1180px) {
.doc-back.doc-mobile-only {
        display: flex;
        flex: none;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: var(--text);
    }
.doc-back.doc-mobile-only:hover {
        background: var(--paper);
    }
.doc-back.doc-mobile-only svg {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 860px) {
.doc-mobile-only {
        display: block;
    }
.doc-back,
    .doc-icon-btn {
        display: flex;
    }
body.doc-page .mobile-topbar,
    body.doc-page .doc-credit {
        display: none;
    }
.doc-header {
        position: relative;
        flex-wrap: nowrap;
        gap: 2px;
        padding: 4px 6px;
    }
.doc-header .note-heading {
        flex: 1 1 0;
        min-width: 0;
    }
.doc-header .eyebrow,
    .doc-header .heading-collections {
        display: none;
    }
.doc-header .doc-name-input,
    .doc-header .note-title-input,
    .doc-header .doc-title {
        font-size: 17px;
    }
.doc-header .doc-name-ext {
        font-size: 13px;
    }
.doc-header .form-actions {
        flex: none;
        flex-wrap: nowrap;
        gap: 0;
    }
.doc-back,
    .doc-icon-btn {
        flex: none;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--text);
        cursor: pointer;
        position: relative;
    }
.doc-back:hover,
    .doc-icon-btn:hover,
    .doc-icon-btn[aria-pressed="true"] {
        background: var(--paper);
    }
.doc-icon-btn[aria-pressed="true"] {
        color: var(--brass-strong);
    }
.doc-back svg,
    .doc-icon-btn svg {
        width: 22px;
        height: 22px;
    }
.doc-menu-toggle[data-state="dirty"]::after,
    .doc-menu-toggle[data-state="error"]::after {
        content: "";
        position: absolute;
        top: 8px;
        right: 8px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--brass);
    }
.doc-menu-toggle[data-state="error"]::after {
        background: var(--brick);
    }
.doc-menu {
        display: none;
        position: absolute;
        top: calc(100% - 2px);
        right: 8px;
        z-index: 50;
        min-width: 230px;
        max-width: calc(100vw - 16px);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 6px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        box-shadow: var(--shadow-lg);
    }
.doc-menu.open {
        display: flex;
    }
.doc-menu .save-status {
        padding: 8px 12px 10px;
        border-bottom: 1px solid var(--line);
        white-space: normal;
    }
.doc-menu .btn {
        justify-content: flex-start;
        width: 100%;
        padding: 11px 12px;
        border: 0;
        border-radius: 8px;
        background: none;
        color: var(--text);
        font-size: 14.5px;
        font-weight: 500;
    }
.doc-menu .btn:hover:not(:disabled) {
        background: var(--paper);
    }
.doc-menu .btn:disabled {
        color: var(--text-faint);
        cursor: default;
    }
.doc-menu #saveBtn {
        font-weight: 600;
    }
.doc-menu .btn-danger {
        color: var(--brick);
    }
.doc-menu .btn svg {
        width: 18px;
        height: 18px;
        flex: none;
    }
.doc-menu form {
        display: block;
    }
.doc-menu-credit {
        margin: 4px 0 0;
        padding: 8px 12px 4px;
        border-top: 1px solid var(--line);
        color: var(--text-muted);
        font-size: 11px;
    }
.doc-menu-credit a {
        color: inherit;
    }
body.doc-page .docx-toolbar {
        max-height: 0;
        overflow: hidden;
        border-bottom-width: 0;
    }
body.doc-page.docx-toolbar-open .docx-toolbar {
        max-height: none;
        overflow: visible;
        border-bottom-width: 1px;
    }
body.doc-page .note-toolbar {
        display: none;
    }
body.doc-page.note-toolbar-open .note-toolbar {
        display: flex;
    }
}

.off-controls .search-input {
    flex: 1;
    min-width: 200px;
    max-width: 420px;
}

.note-print {
    background: #FFFFFF;
    color: #1E241F;
}

.note-print-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 10px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--text-muted);
}

.note-print-sheet {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 24px 64px;
    color: #1E241F;
}

.note-print-title {
    font-size: 2em;
    margin: 0 0 0.6em;
}

@media print {
.note-print-bar {
        display: none;
    }
.note-print-sheet {
        max-width: none;
        padding: 0;
    }
.note-print-sheet h1,
    .note-print-sheet h2,
    .note-print-sheet h3 {
        break-after: avoid;
    }
.note-print-sheet pre,
    .note-print-sheet blockquote,
    .note-print-sheet table,
    .note-print-sheet img {
        break-inside: avoid;
    }
.note-print-sheet a {
        color: inherit;
    }
}

#shareTargets .search-input {
    width: 100%;
    margin-bottom: 8px;
}

.note-document-shortcut {
    position: relative;
    width: 34px;
    height: 46px;
    padding: 0;
    background: var(--sage-tint);
    color: var(--sage-strong);
}

.note-document-shortcut img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
}

.note-document-shortcut > svg {
    width: 20px;
    height: 20px;
}

.note-document.is-locked .note-title {
    color: var(--text-muted);
}

.note-document.is-locked .note-document-shortcut {
    opacity: 0.55;
}

.shortcut-modal .search-input {
    width: 100%;
    margin-bottom: 10px;
}

.article-prose sup.fn-ref.ProseMirror-selectednode {
    background: var(--brass-tint);
    border-radius: 3px;
}

.attach-search .search-input {
    width: 100%;
    max-width: none;
}

.table-panel {
    position: absolute;
    z-index: 70;
    padding: 6px;
    background: var(--surface);
    color: var(--text);
    border: none;
    border-radius: 6px;
    box-shadow: var(--table-popover-shadow);
    font-size: 14px;
}

.table-picker {
    padding: 10px;
}

.table-picker-grid {
    display: grid;
    gap: 3px;
}

.table-picker-cell {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--table-line);
    border-radius: 2px;
    background: var(--surface);
    cursor: pointer;
}

.table-picker-cell.is-on {
    background: var(--table-select);
    border-color: var(--table-accent);
}

.table-picker-label {
    margin-top: 8px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

.note-prose th.col-typed::after {
    content: attr(data-col-type);
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--table-head-text);
}

.note-prose td.cell-t-checkbox {
    cursor: pointer;
    text-align: center;
}

.note-prose td.cell-t-checkbox > p {
    font-size: 0;
}

.note-prose td.cell-t-checkbox::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--table-head-text);
    border-radius: 3px;
    vertical-align: middle;
    background: transparent;
}

.note-prose td.cell-t-checkbox.is-checked::before {
    border-color: var(--table-accent);
    background: var(--table-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.note-prose td.cell-t-date,
.note-prose td.cell-t-select {
    cursor: pointer;
}

.note-prose td.cell-t-date.is-empty::before {
    content: 'Pick a date';
    color: var(--text-faint);
    font-size: 0.9em;
}

.note-prose td.cell-t-number {
    font-variant-numeric: tabular-nums;
}

.note-prose td.has-label > p,
.select-chip {
    display: inline-block;
    padding: 0 6px;
    border-radius: 3px;
    font-size: 0.95em;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--label-bg);
    color: var(--label-fg);
}

.note-prose th.col-typed > p {
    display: inline;
}

.select-menu-input,
.table-date-input {
    width: 100%;
    padding: 5px 8px;
    border: none;
    border-radius: 4px;
    background: var(--table-hover);
    color: var(--text);
    font: inherit;
    box-shadow: inset 0 0 0 1px var(--table-line);
}

.table-date-input {
    position: absolute;
    z-index: 70;
    width: auto;
}

.note-prose .note-mention {
    padding: 0 3px;
    border-radius: 4px;
    background: var(--brass-tint);
    color: var(--brass-strong);
    font-weight: 600;
}

.toolbar-hint-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--brass-strong);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.toolbar-hint-link:hover {
    text-decoration: underline;
}

.note-help kbd {
    display: inline-block;
    min-width: 20px;
    padding: 1px 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    white-space: pre;
    color: var(--text-muted);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
}

.note-help-item p kbd {
    padding: 0 4px;
    font-size: 10.5px;
}

.note-help-foot kbd {
    margin-right: 2px;
}

.note-focus-btn {
    position: fixed;
    right: 64px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: var(--table-popover-shadow);
    cursor: pointer;
    transition: right 0.22s ease, color 0.15s, background 0.15s;
}

.note-focus-btn:hover,
.note-focus-btn[aria-pressed="true"] {
    color: var(--text);
    background: var(--paper);
}

.note-focus-btn svg {
    width: 18px;
    height: 18px;
}

body.note-help-open .note-focus-btn {
    right: 424px;
}

body.note-focus .sidebar,
body.note-focus .mobile-topbar,
body.note-focus .doc-header,
body.note-focus .note-toolbar {
    display: none;
}

body.note-focus .note-canvas {
    padding-top: 40px;
}

@media (max-width: 860px) {
.note-focus-btn {
        right: 60px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
body.note-help-open .note-focus-btn {
        display: none;
    }
}

body.note-borderless .note-canvas {
    padding-left: 0;
    padding-right: 0;
}

body.note-borderless .note-sheet {
    max-width: none;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.note-borderless .note-editor .note-prose {
    box-sizing: content-box;
    max-width: 708px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(20px, 6vw, 96px);
    padding-right: clamp(20px, 6vw, 96px);
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.toolbar-btn:hover {
    background: var(--paper);
}

.toolbar-btn svg {
    width: 18px;
    height: 18px;
}

#noteReadingBtn .icon-locked,
body.note-reading #noteReadingBtn .icon-unlocked {
    display: none;
}

body.note-reading #noteReadingBtn .icon-locked {
    display: inline;
}

body.note-reading #noteReadingBtn {
    color: var(--text);
    background: var(--paper);
}

body.note-reading .note-toolbar > :not(#noteReadingBtn) {
    display: none;
}

body.note-reading .note-canvas {
    padding-top: 12px;
}

body.note-reading .note-prose {
    cursor: auto;
    caret-color: transparent;
}


/* ---- Bible (copied from Covenant Hall) ---- */
.verse-card {
    background: var(--ink);
    border-color: var(--ink);
    text-align: center;
    padding: 30px 32px;
}

.verse-text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink-text);
    max-width: 640px;
    margin: 0 auto 10px;
}

.verse-ref {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brass-tint);
    margin: 0;
}

.bible-ref {
    color: inherit;
    text-decoration: underline dotted var(--brass);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.bible-ref:hover {
    color: var(--brass-strong);
    text-decoration-style: solid;
}

.bible-ref-card {
    position: absolute;
    z-index: 60;
    width: min(380px, calc(100vw - 24px));
    padding: 12px 14px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    line-height: 1.55;
}

.bible-ref-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.bible-ref-card-head span {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
}

.bible-ref-card-text {
    max-height: 220px;
    margin: 0 0 8px;
    overflow-y: auto;
}

.bible-ref-card-text sup {
    margin-right: 1px;
    font-size: 0.7em;
    color: var(--brass-strong);
}

.bible-ref-card-open {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brass-strong);
}

.bible-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bible-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.bible-picker-btn svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.bible-picker-btn:hover svg {
    color: var(--brass);
}

.bible-version {
    position: relative;
}

.bible-version-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 10px 0 13px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.bible-version-btn:hover,
.bible-version-btn[aria-expanded="true"] {
    border-color: var(--brass-tint-line);
}

.bible-version-btn svg {
    width: 15px;
    height: 15px;
    color: var(--text-muted);
}

.bible-version-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: 340px;
    max-width: calc(100vw - 28px);
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.bible-version-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bible-version-filters select {
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
}

.bible-version-filters .search-input {
    min-width: 0;
}

.bible-version-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}

.bible-version-list a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 13.5px;
}

.bible-version-list a:hover,
.bible-version-list a:focus-visible {
    background: var(--paper);
}

.bible-version-list a.active {
    background: var(--brass-tint);
}

.bible-version-abbr {
    min-width: 44px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.bible-version-list a.active .bible-version-abbr {
    color: var(--text);
}

.bible-version-empty {
    margin: 10px 4px 4px;
    font-size: 13px;
}

.bible-search-form .search-input {
    width: 250px;
}

.bible-content {
    max-width: 720px;
}

.bible-text {
    font-family: var(--bible-font, var(--font-display));
    /* The reading options on /bible/settings (bible_reading_head()); without them, these defaults. */
    font-size: var(--bible-size, 18.5px);
    line-height: var(--bible-line-height, 1.75);
    text-align: var(--bible-align, start);
    hyphens: var(--bible-hyphens, manual);
    color: var(--text);
}

.bible-text[data-layout="verses"] .bible-v::before {
    content: "";
    display: block;
    margin-top: 0.35em;
}

.bible-text[data-layout="verses"] .bible-v {
    margin-left: 0;
}

.bible-text[data-layout="verses"] .bible-p {
    margin-bottom: 0;
}

.bible-text p {
    color: inherit;
    margin: 0 0 14px;
    display: flow-root; /* holds the chapter number floated in it, even when it's a one-line paragraph */
}

.bible-heading {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    margin: 30px 0 8px;
}

.bible-text > .bible-heading:first-child {
    margin-top: 0;
}

.bible-ms1,
.bible-ms {
    font-family: var(--font-display);
    font-size: 19px;
    text-align: center;
    margin: 30px 0 4px;
}

.bible-s2 {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 20px;
}

.bible-refs {
    font-family: var(--font-body);
    font-size: 12.5px;
    font-style: italic;
    color: var(--text-muted) !important;
    margin: -4px 0 12px !important;
}

.bible-refs a {
    color: inherit;
}

.bible-refs a:hover {
    color: var(--brass-strong);
}

.bible-text .bible-mr {
    text-align: center;
}

.bible-text .bible-d {
    font-style: italic;
    font-size: 16px;
    color: var(--text-muted);
}

.bible-text .bible-qa {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: 22px 0 4px;
}

.bible-poetry {
    margin: 0 0 14px;
}

.bible-text .bible-poetry p {
    text-align: start; /* never justified: stretching a line of poetry to the margin spreads its words apart */
    hyphens: manual;
    margin: 0;
    padding-left: 2.4em;
    text-indent: -2em;
}

.bible-text .bible-poetry .bible-q2,
.bible-text .bible-poetry .bible-li2 {
    padding-left: 4em;
}

.bible-text .bible-poetry .bible-q3 {
    padding-left: 5.4em;
}

.bible-text .bible-poetry .bible-qr {
    text-align: right;
    font-style: italic;
}

.bible-text .bible-poetry .bible-qc,
.bible-text .bible-pc {
    text-align: center;
    text-indent: 0;
}

.bible-break {
    height: 12px;
}

.bible-table-wrap {
    overflow-x: auto;
    margin: 0 0 14px;
}

.bible-table {
    border-collapse: collapse;
    font-size: 0.92em;
}

.bible-table th,
.bible-table td {
    padding: 2px 14px 2px 0;
    text-align: start;
    vertical-align: top;
}

.bible-table th {
    font-family: var(--font-body);
    font-size: 0.8em;
    font-weight: 600;
    color: var(--text-muted);
}

.bible-table .bible-cell-right {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.bible-table .bible-cell-center {
    text-align: center;
}

.bible-chapter-num {
    float: left;
    font-size: 3.1em;
    line-height: 0.95;
    font-weight: 600;
    margin: 0.04em 0.16em 0 0;
    color: var(--brass);
}

.bible-chapter-num-line {
    float: none;
    margin: 0 0 6px;
}

.bible-v {
    font-family: var(--font-body);
    font-size: 0.58em;
    font-weight: 600;
    color: var(--text-faint);
    margin: 0 0.2em 0 0.15em;
    vertical-align: 0.55em;
    line-height: 0;
}

.bible-v,
.bible-chapter-num {
    scroll-margin-top: 90px;
}

.bible-wj {
    color: var(--words-of-christ);
}

.bible-add,
.bible-tl,
.bible-it {
    font-style: italic;
}

.bible-nd {
    font-variant: small-caps;
}

.bible-qs {
    font-style: italic;
}

.bible-hl {
    background: var(--brass-tint);
    box-shadow: 0 0 0 2px var(--brass-tint);
    border-radius: 2px;
}

.bible-fn {
    font-family: var(--font-body);
    font-size: 0.56em;
    font-weight: 600;
    font-style: normal;
    color: var(--brass);
    text-decoration: none;
    vertical-align: 0.6em;
    line-height: 0;
    padding: 0 0.15em;
}

.bible-fn:hover {
    color: var(--brass-strong);
}

.bible-fn-pop {
    position: absolute;
    z-index: 60;
    max-width: min(360px, calc(100vw - 16px));
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text);
}

.bible-fq,
.bible-fqa {
    font-style: italic;
}

.bible-notes {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--text-muted);
}

.bible-notes h2 {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.bible-notes ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bible-notes li {
    margin-bottom: 5px;
    scroll-margin-top: 90px;
}

.bible-notes li:target {
    color: var(--text);
}

.bible-notes-letter {
    display: inline-block;
    min-width: 1.4em;
    font-weight: 600;
    color: var(--brass);
    text-decoration: none;
}

.bible-pager {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 36px;
}

.bible-pager .btn svg {
    width: 15px;
    height: 15px;
}

.bible-source {
    margin-top: 28px;
    font-size: 12px;
    color: var(--text-faint);
    text-align: center;
}

.bible-source a {
    color: inherit;
}

.modal.bible-picker {
    max-width: 640px;
    padding: 20px 24px 24px;
}

.bible-picker-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.bible-picker-head h3 {
    flex: 1;
    margin: 0;
}

.bible-picker-head button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.bible-picker-head button:hover {
    background: var(--paper);
    color: var(--text);
}

.bible-picker-head svg {
    width: 18px;
    height: 18px;
}

.bible-picker-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 14px 0 8px;
}

.bible-picker-books {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 2px 8px;
}

.bible-picker-books a {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--text);
    text-decoration: none;
}

.bible-picker-books a:hover,
.bible-picker-chapters a:hover {
    background: var(--paper);
}

.bible-picker-books a.active {
    background: var(--brass-tint);
    font-weight: 600;
}

.bible-picker-chapters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 6px;
    padding-top: 8px;
}

.bible-picker-chapters a {
    padding: 10px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
}

.bible-results-count {
    font-size: 13px;
    margin-bottom: 14px;
}

.bible-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bible-results a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    text-decoration: none;
}

.bible-results a:hover strong {
    color: var(--brass-strong);
}

.bible-results strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}

.bible-results span {
    font-family: var(--bible-font, var(--font-display));
    font-size: 16px;
    line-height: 1.6;
}

.bible-results mark {
    background: var(--brass-tint);
    color: inherit;
    border-radius: 2px;
}

@media (max-width: 860px) {
.bible-toolbar {
        width: 100%;
    }
.bible-search-form {
        flex: 1;
        width: auto;
    }
.bible-search-form .search-input {
        width: 100%;
        min-width: 0;
    }
.bible-text {
        font-size: var(--bible-size, 17.5px);
    }
}

@media (max-width: 480px) {
.bible-pager .btn {
        padding: 9px 12px;
        font-size: 12.5px;
    }
}

.bible-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-muted);
}

.bible-settings-btn:hover {
    color: var(--text);
    border-color: var(--brass-tint-line);
}

.bible-settings-btn svg {
    width: 17px;
    height: 17px;
}

.bible-translation-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.bible-translation-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.bible-translation-abbr {
    min-width: 52px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--brass-tint);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.bible-translation-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
}

.bible-translation-info a {
    text-decoration: none;
}

.bible-translation-info a:hover {
    color: var(--brass-strong);
}

.bible-translation-info .text-muted {
    font-size: 12.5px;
}

.bible-fonts-intro {
    font-size: 13px;
}

.bible-reading-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 14px;
    margin-top: 14px;
}

.bible-reading-preview {
    margin: 4px 0 8px;
    padding: 18px 20px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
}

.bible-fonts-heading {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    margin: 22px 0 2px;
}

@media (max-width: 860px) {
.bible-reading-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bible-font-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 4px 20px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.bible-font-row .field {
    margin-bottom: 0;
}

.bible-font-preview {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text);
}

@media (max-width: 700px) {
.bible-font-row {
        grid-template-columns: 1fr;
    }
}

.bible-upload-form {
    margin-top: 14px;
}

.bible-link-row {
    display: flex;
    gap: 8px;
}

.bible-link-row input {
    flex: 1;
    min-width: 0;
}

.bible-bd {
    font-weight: 600;
}

.bible-upload-status {
    margin-top: 18px;
}

.bible-upload-status p {
    color: var(--text);
    font-size: 13.5px;
    margin-bottom: 8px;
}

.bible-upload-status progress {
    width: 100%;
    height: 8px;
    accent-color: var(--brass);
}

.bible-upload-status ul {
    margin: 10px 0 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.bible-upload-status .bible-upload-error {
    color: var(--brick);
}

.bible-upload-status .bible-upload-warning {
    color: var(--brass-strong);
}

:root[data-theme="dark"] .bible-upload-status .bible-upload-warning {
    color: var(--brass);
}

@media (max-width: 480px) {
.bible-translation-list li {
        flex-wrap: wrap;
    }
}

.bible-split-btn.active {
    background: var(--brass-tint);
    border-color: var(--brass-tint-line);
    color: var(--text);
}

.bible-content-split {
    max-width: 1400px;
    padding-top: 16px;
    padding-bottom: 12px;
}

.bible-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    height: 75vh; /* replaced by the script with what fits under the header */
}

.bible-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}

.bible-pane-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 10px 6px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    font-size: 13px;
}

.bible-pane-abbr {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
}

.bible-pane-name {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bible-compare-select {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
}

.bible-pane-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.bible-pane-close:hover {
    background: var(--surface);
    color: var(--text);
}

.bible-pane-close svg {
    width: 17px;
    height: 17px;
}

.bible-pane-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 26px 24px;
}

.bible-pane-scroll .bible-v,
.bible-pane-scroll .bible-chapter-num,
.bible-pane-scroll .bible-notes li {
    scroll-margin-top: 16px;
}

@media (max-width: 860px) {
.bible-content-split {
        padding: 10px 10px 8px;
    }
.bible-split {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
    }
.bible-pane-head {
        min-height: 40px;
        padding: 4px 6px 4px 12px;
    }
.bible-pane-scroll {
        padding: 14px 16px 18px;
    }
}

.bible-text [data-v] {
    cursor: pointer;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.bible-wm {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.bible-mark-yellow { background-color: rgba(250, 204, 21, 0.38); }

.bible-mark-green { background-color: rgba(74, 222, 128, 0.32); }

.bible-mark-blue { background-color: rgba(96, 165, 250, 0.32); }

.bible-mark-pink { background-color: rgba(244, 114, 182, 0.32); }

.bible-mark-orange { background-color: rgba(251, 146, 60, 0.34); }

.bible-mark-purple { background-color: rgba(168, 85, 247, 0.28); }

.bible-mark-teal { background-color: rgba(45, 212, 191, 0.32); }

.bible-mark-red { background-color: rgba(248, 113, 113, 0.34); }

.bible-ms-underline,
.bible-ms-double,
.bible-ms-wavy,
.bible-ms-dotted {
    text-decoration-line: underline;
    text-decoration-color: var(--brick);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.bible-ms-underline { text-decoration-style: solid; }

.bible-ms-double { text-decoration-style: double; text-decoration-thickness: 1.5px; }

.bible-ms-wavy { text-decoration-style: wavy; text-decoration-thickness: 1.5px; }

.bible-ms-dotted { text-decoration-style: dotted; }

.bible-ms-strike {
    text-decoration: line-through;
    text-decoration-color: var(--brick);
    text-decoration-thickness: 2px;
}

.bible-ms-box {
    outline: 1.5px solid var(--brick);
    outline-offset: 1px;
    border-radius: 3px;
}

.bible-bookmarked::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.75em;
    margin-left: 0.15em;
    background: var(--brick);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
    vertical-align: baseline;
}

.bible-text .bible-sel {
    /* A border rather than text-decoration, which an underline mark already uses; on a line of text it doesn't change
       the line's height. */
    border-bottom: 2px dotted var(--brass);
}

.bible-note-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    margin: 0 0.15em;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--brass);
    vertical-align: -0.12em;
    cursor: pointer;
}

.bible-note-btn:hover {
    background: var(--brass-tint);
}

.bible-note-btn svg {
    width: 0.85em;
    height: 0.85em;
}

.bible-actions {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 70;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    max-width: calc(100vw - 24px);
    padding: 10px 12px 10px 16px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
}

.bible-actions-ref {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.bible-actions-ref.bible-actions-error {
    color: var(--brick);
    white-space: normal;
}

.bible-actions-colors {
    display: flex;
    gap: 6px;
}

.bible-swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    cursor: pointer;
}

.bible-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
}

.bible-swatch-none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--text-muted);
}

.bible-swatch-none svg {
    width: 16px;
    height: 16px;
}

.bible-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
}

.bible-action-btn:hover {
    background: var(--paper);
}

.bible-action-btn[aria-pressed="true"] {
    background: var(--brass-tint);
    border-color: var(--brass-tint-line);
}

.bible-action-btn svg,
.bible-action-close svg {
    width: 16px;
    height: 16px;
}

.bible-action-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.bible-action-close:hover {
    background: var(--paper);
    color: var(--text);
}

.bible-note-pop {
    max-width: min(380px, calc(100vw - 16px));
}

.bible-note-pop-ref {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.bible-note-pop-actions {
    display: flex;
    gap: 14px;
}

.bible-note-pop-delete {
    color: var(--brick);
}

.bible-style-wrap {
    position: relative;
}

.bible-style-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    z-index: 2;
    min-width: 210px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.bible-style-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.bible-style-item span {
    min-width: 36px;
    font-weight: 600;
}

.bible-style-item:hover {
    background: var(--paper);
}

.bible-style-item[aria-checked="true"] {
    background: var(--brass-tint);
}

.bible-note-pop-body > :first-child { margin-top: 0; }

.bible-note-pop-body > :last-child { margin-bottom: 0; }

.bible-note-pop-body {
    margin: 0 0 8px;
    max-height: 40vh;
    overflow: auto;
    color: var(--text);
}

.modal.bible-note-modal {
    max-width: 640px;
}

.note-editor.bible-note-editor {
    margin-bottom: 14px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
}

.note-editor.bible-note-editor .note-prose {
    min-height: 180px;
    max-height: 50vh;
    padding: 12px 14px;
    overflow: auto;
}

.exe {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 120;
    flex-direction: column;
    background: #3a3d3b;
}

.exe.open {
    display: flex;
}

body.exe-open {
    overflow: hidden;
}

.exe-toolbar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
    padding: 8px 12px;
    overflow-x: auto;
    background: var(--surface);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}

.exe-title {
    flex: 0 0 auto; /* the toolbar scrolls sideways rather than squeezing the name away */
    width: clamp(150px, 22vw, 280px);
    min-width: 150px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    text-overflow: ellipsis;
}

.exe-title:hover,
.exe-title:focus {
    border-color: var(--line-strong);
}

.exe-status {
    flex: 0 0 auto;
    min-width: 54px;
    font-size: 11.5px;
    opacity: 0.7;
}

.exe-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.exe-sep {
    flex-shrink: 0;
    width: 1px;
    height: 24px;
    background: var(--line-strong);
}

.exe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
}

.exe-btn[hidden] {
    display: none;
}

.exe-btn svg {
    width: 18px;
    height: 18px;
}

.exe-btn:hover:not(:disabled) {
    background: var(--paper);
}

.exe-btn[aria-pressed="true"] {
    background: var(--brass-tint);
    border-color: var(--brass-tint-line);
}

.exe-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.exe-text-btn {
    font-weight: 600;
}

.exe-wide {
    padding: 0 10px;
    border-color: var(--line-strong);
}

.exe-zoom {
    min-width: 54px;
}

.exe-swatch {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    cursor: pointer;
}

.exe-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
}

.exe-swatch-custom {
    position: relative;
    overflow: hidden;
    background: conic-gradient(#e11d48, #f59e0b, #84cc16, #06b6d4, #6366f1, #e11d48);
}

.exe-swatch-custom input {
    position: absolute;
    inset: -6px;
    width: 40px;
    height: 40px;
    opacity: 0;
    cursor: pointer;
}

.exe-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

.exe-size span {
    display: block;
    border-radius: 50%;
    background: var(--text);
}

.exe-size[aria-pressed="true"] {
    background: var(--brass-tint);
    border-color: var(--brass-tint-line);
}

.exe-stage {
    position: relative;
    flex: 1;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: crosshair;
}

.exe-stage[data-tool="select"] {
    cursor: default;
}

.exe-stage[data-tool="hand"],
.exe-stage.is-hand {
    cursor: grab;
}

.exe-stage.is-panning {
    cursor: grabbing;
}

.exe-stage[data-tool="eraser"] {
    cursor: cell;
}

.exe-stage[data-tool^="mark-"],
.exe-stage[data-tool="type"],
.exe-stage[data-tool="text"] {
    cursor: text;
}

.exe-world {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19800px;
    height: 6000px; /* set from the text's size when it opens (bible-exegesis.js): 8.5 text-widths and heights of room all round */
    transform-origin: 0 0;
    background: #fbfaf6;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.exe-text {
    position: absolute; /* its place is set from bible-exegesis.js */
    top: 0;
    left: 0;
    width: 1100px;
    padding: 0;
    color: #1d1d1b;
    font-size: 38px;
    line-height: 2.6;
    text-align: start;
}

.exe-ins {
    padding: 0 0.15em;
    font-family: var(--font-body);
    font-size: 0.8em;
    font-style: normal;
    font-weight: 600;
    white-space: pre-wrap; /* spaces, tabs and new lines are kept as typed */
    tab-size: 4;
}

.exe-ins-live {
    min-width: 2px;
    border-right: 2px solid currentColor;
    animation: exe-caret 1s steps(1) infinite;
}

@keyframes exe-caret {
    50% { border-right-color: transparent; }
}

.exe-type-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    resize: none;
}

.exe-caption {
    margin-bottom: 18px;
    color: #6b6a63;
    font-family: var(--font-body);
    font-size: 0.5em;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
}

.exe-verses {
    margin: 0;
    color: #1d1d1b;
}

.exe-vnum {
    margin-right: 0.15em;
    color: #8a6d1f;
    font-family: var(--font-body);
    font-size: 0.42em;
    font-weight: 700;
}

.exe-dark .exe-world {
    background: #1a1c1b;
}

.exe-dark .exe-text,
.exe-dark .exe-verses {
    color: #ece9e1;
}

.exe-dark .exe-caption {
    color: #9a978d;
}

.exe-dark .exe-vnum {
    color: #d9b45a;
}

.exe-dark .exe-label-box {
    background: rgba(26, 28, 27, 0.85);
}

.exe-verse {
    margin: 0;
}

.exe-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.exe-label-box {
    position: absolute;
    z-index: 3;
    min-width: 120px;
    padding: 2px 6px;
    border: 1px dashed;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.85);
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.25;
    resize: none;
    overflow: hidden;
}

.exe-save {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 22, 18, 0.55);
}

.exe-sessions {
    position: fixed;
    z-index: 130; /* above exegesis mode itself, so the list opens from the page or from inside it */
}

.exe-session-list {
    max-height: 50vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.exe-session-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.exe-session-list .exe-session-open {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.exe-session-list .exe-session-open strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exe-session-list small {
    color: var(--text-muted);
}

.exe-session-list .exe-session-del {
    padding: 4px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: none;
    color: var(--brick);
    font-size: 12px;
    cursor: pointer;
}

.exe-save[hidden] {
    display: none;
}

.exe-save-box {
    width: 100%;
    max-width: 420px;
    padding: 22px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.exe-save-box h3 {
    margin: 0 0 14px;
}

.exe-save-box label {
    display: block;
    margin: 10px 0 4px;
    font-size: 13px;
    font-weight: 600;
}

.exe-save-box input[type="text"],
.exe-save-box select {
    width: 100%;
    margin-bottom: 4px;
    padding: 9px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
}

.exe-save-box .form-actions {
    margin-top: 16px;
}

.exe-save-done {
    margin: 10px 0 0;
    color: var(--success);
    font-weight: 600;
}

.exe-print {
    display: none;
}

@media print {
body.exe-printing > *:not(#exegesis) {
        display: none !important;
    }
body.exe-printing .exe {
        position: static;
        display: block;
        background: none;
    }
body.exe-printing .exe-toolbar,
    body.exe-printing .exe-stage {
        display: none;
    }
body.exe-printing .exe-print {
        display: block;
        max-width: 100%;
        max-height: 98vh;
        margin: 0 auto;
    }
}

.bible-marks-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.bible-marks-filters .search-input {
    flex: 1 1 260px;
}

.bible-marks-filters select {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
}

.bible-marks-list {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.bible-marks-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.bible-marks-row:last-child {
    border-bottom: none;
}

.bible-marks-main {
    flex: 1;
    min-width: 0;
}

.bible-marks-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.bible-marks-ref {
    font-weight: 600;
    color: var(--text);
}

a.bible-marks-ref:hover {
    color: var(--brass-strong);
}

.bible-marks-kind {
    font-size: 12.5px;
    color: var(--text-muted);
}

.bible-marks-text {
    color: var(--text);
    margin: 6px 0 0;
    line-height: 1.55;
}

.bible-marks-note {
    margin-top: 8px;
    padding: 8px 12px;
    border-left: 3px solid var(--brass);
    background: var(--paper);
    border-radius: 0 6px 6px 0;
}

.bible-marks-note > :first-child { margin-top: 0; }

.bible-marks-note > :last-child { margin-bottom: 0; }

.bible-marks-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
}

@media (max-width: 600px) {
.bible-actions {
        left: 12px;
        right: 12px;
        bottom: 12px;
        transform: none;
        max-width: none;
        justify-content: space-between;
    }
.bible-action-btn span {
        display: none;
    }
}

.exe-label-tools {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: #1f2a26;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    user-select: none;
}

.exe-label-tools > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: inherit;
    font: 700 12px var(--font-body);
    cursor: pointer;
}

.exe-label-tools > *:hover {
    background: rgba(255, 255, 255, 0.16);
}

.exe-label-tools .exe-label-move {
    cursor: move;
    touch-action: none;
}

.exe-label-tools svg {
    width: 16px;
    height: 16px;
}

.bible-ref-card-chapter {
    font-size: 12px;
    color: var(--text-muted);
}

.bible-ref-card {
    /* Positions the version menu. */
    position: absolute;
}

.bible-ref-card-version {
    padding: 2px 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11.5px;
    cursor: pointer;
}

.bible-ref-card-version:hover {
    background: var(--paper);
    color: var(--text);
}

.bible-ref-card-versions {
    position: absolute;
    top: 38px;
    right: 10px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: calc(100% - 20px);
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
}

.bible-ref-card-versions[hidden] {
    display: none;
}

.bible-ref-card-versions button {
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.bible-ref-card-versions button:hover,
.bible-ref-card-versions button[aria-selected="true"] {
    background: var(--paper);
}

.bible-ref-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bible-ref-card-copy {
    display: flex;
    padding: 4px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.bible-ref-card-copy:hover {
    background: var(--paper);
    color: var(--text);
}

.bible-ref-card-copy svg {
    width: 16px;
    height: 16px;
}

.bible-offline-ctl {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bible-offline-ctl progress {
    width: 120px;
}

.bible-offline-status {
    font-size: 12.5px;
    color: var(--text-muted);
}

.bible-offline-status.error {
    color: var(--brick);
}

.bible-offline-hint {
    margin-top: 14px;
}

.bible-version-offline {
    margin-left: auto;
    padding-left: 8px;
    font-size: 12px;
    color: var(--success);
}

.bible-offline-empty {
    text-align: left;
    max-width: 640px;
    margin: 0 auto;
}

.bible-offline-empty strong {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
}

.bible-offline-choices {
    margin: 6px 0 0;
    padding-left: 20px;
}

.bible-sync-note {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 271;
    max-width: calc(100vw - 32px);
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--ink-text);
    font-size: 12.5px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.bible-sync-note a {
    color: inherit;
    text-decoration: underline;
}

.bible-sync-note[hidden] {
    display: none;
}

body:has(.offline-banner:not([hidden])) .bible-actions {
    bottom: 56px;
}


/* ---- Drive (copied from Covenant Hall) ---- */
.text-muted {
    color: var(--text-muted);
    font-size: 13px;
}

.lesson-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--brass-tint);
    color: var(--text);
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}

a.lesson-tag:hover {
    background: var(--brass-tint-line);
}

.directory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.edit-link {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brass-strong);
    border: 1px solid var(--brass-tint-line);
    border-radius: 6px;
    text-decoration: none;
    background: var(--brass-tint);
}

.edit-link:hover {
    background: var(--brass);
    color: #fff;
    border-color: var(--brass);
}

.inline-form {
    display: inline;
    margin-left: 6px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.result-count {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

.page-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-info {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

.page-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    background: var(--surface);
}

.page-btn:hover {
    border-color: var(--brass);
    color: var(--brass-strong);
}

.page-btn.disabled {
    color: var(--text-faint);
    pointer-events: none;
    background: var(--paper);
}

td .tag {
    margin-left: 6px;
}

.picker-text,
.resource-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.picker-text strong,
.resource-text strong {
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-text span,
.resource-text span {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-items {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.resource-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.resource-item:first-child {
    border-top: none;
    padding-top: 0;
}

.resource-item .resource-text {
    flex: 1;
}

.resource-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--dusk-tint);
    color: var(--dusk);
}

.resource-link-icon svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 860px) {
.shell {
        flex-direction: column;
    }
.sidebar {
        display: none;
    }
.mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        background: var(--ink);
        padding: 8px 10px 8px 14px;
        position: sticky;
        top: 0;
        z-index: 40;
    }
.page-header {
        padding: 18px 20px;
    }
.content {
        padding: 24px 20px 40px;
    }
.icon-btn {
        width: 34px;
        height: 34px;
    }
.page-btn {
        padding: 8px 14px;
    }
}

@media (max-width: 480px) {
.login-card {
        padding: 30px 24px 26px;
    }
.card {
        padding: 20px 18px;
    }
.content {
        padding: 18px 14px 32px;
    }
.page-header {
        padding: 16px 14px;
    }
.field-row {
        grid-template-columns: 1fr;
    }
.directory-header {
        align-items: flex-start;
    }
}

.notes-section-title {
    font-size: 15px;
    margin: 8px 0 16px;
}

.pdf-viewer {
    position: relative;
}

.docx-toolbar {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.docx-editor {
    overflow: auto;
    padding: 24px 0;
    background: var(--paper);
}

@media (max-width: 860px) {
.docx-editor {
        padding: 16px 14px;
        background: var(--surface); /* the whole screen looks like the page, and taps below the text still type */
    }
}

@media (min-width: 861px) {
.note-toolbar {
        position: sticky;
        top: 0;
        z-index: 5;
    }
}

@media (max-width: 860px) {
.notes-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 14px;
    }
.note-thumb {
        height: 180px;
    }
.note-heading {
        flex-basis: 100%;
    }
.note-toolbar {
        padding: 8px 14px;
    }
.toolbar-hint {
        display: none;
    }
.note-canvas {
        padding: 14px 14px 40px;
    }
.note-sheet,
    .note-editor .note-prose {
        min-height: 60vh;
    }
.note-editor .note-prose {
        padding: 24px 20px 64px;
    }
.doc-main .page-header {
        padding: 12px 14px;
        gap: 8px;
    }
.doc-main .form-actions {
        flex-wrap: wrap;
    }
.doc-main .save-status {
        flex-basis: 100%;
        white-space: normal;
    }
}

.crop-overlay {
    z-index: 300;
}

.crop-modal {
    max-width: 480px;
}

.crop-stage {
    height: min(58vh, 380px);
    margin-bottom: 10px;
    background: var(--paper);
    border-radius: 10px;
    overflow: hidden;
}

.crop-tools {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.collection-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.collection-pills:not(:empty) {
    margin-top: 5px;
}

.collection-pill {
    font-size: 11.5px;
    padding: 1px 8px;
}

.heading-collections {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.heading-collections .collection-pills:not(:empty) {
    margin-top: 0;
}

.collections-modal {
    max-width: 480px;
}

.collections-item {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 22px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.collection-card {
    display: flex;
    flex-direction: column;
    padding: 14px 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.collection-card:hover {
    border-color: var(--brass-tint-line);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.collection-stack {
    position: relative;
    display: block;
    height: 118px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: var(--paper);
    overflow: hidden;
}

.collection-sheet {
    position: absolute;
    left: 16%;
    right: 16%;
    padding: 10px 10px 0;
    height: 92px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    box-shadow: 0 2px 6px rgba(20, 25, 20, 0.08);
    font-family: var(--font-display);
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.collection-sheet:nth-child(1) { top: 20px; transform: rotate(-5deg) translateX(-10px); }

.collection-sheet:nth-child(2) { top: 16px; transform: rotate(4deg) translateX(8px); }

.collection-sheet:last-child { top: 14px; transform: none; }

.collection-name {
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.collection-card:hover .collection-name {
    color: var(--brass-strong);
}

.collection-count {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.collection-title svg {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--brass);
}

.collection-summary {
    margin: -6px 0 12px;
    color: var(--text-muted);
    font-size: 13.5px;
}

@media (max-width: 860px) {
.collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 14px;
    }
.collection-stack {
        height: 96px;
    }
.collection-sheet {
        height: 76px;
    }
}

.collections-suggest {
    margin: -4px 0 18px;
}

.collections-suggest-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.collections-suggest-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
}

.collections-suggest-pill {
    border: 1px dashed var(--brass-tint-line);
    background: var(--surface);
    font-family: var(--font-body);
    cursor: pointer;
}

.collections-suggest-pill:hover {
    background: var(--brass-tint);
}

.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.folder-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.folder-card-item {
    position: relative;
}

.folder-card-item .folder-card {
    padding-bottom: 40px;
}

.folder-card-actions {
    position: absolute;
    bottom: 6px;
    right: 10px;
    display: flex;
}

.folder-card-actions .icon-btn {
    margin-left: 2px;
}

.folder-card:hover {
    border-color: var(--brass-tint-line);
    background: var(--surface-hover);
    box-shadow: var(--shadow-sm);
}

.folder-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--brass-tint);
    color: var(--brass-strong);
}

.folder-icon svg {
    width: 22px;
    height: 22px;
}

.folder-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.folder-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

.folder-count {
    font-size: 12px;
    color: var(--text-muted);
}

.folder-path {
    display: block;
    font-size: 12px;
    color: var(--text-faint);
}

.folder-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
}

.move-options .move-option {
    padding-left: calc(10px + var(--depth, 0) * 18px);
}

.move-option.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.drop-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.drop-hint svg {
    flex: none;
    width: 16px;
    height: 16px;
}

.drop-hint strong {
    font-weight: 600;
    color: var(--text);
}

@media (hover: none) {
.drop-hint {
        display: none;
    }
}

.folder-card.is-drop-target {
    border-color: var(--brass);
    background: var(--brass-tint);
    box-shadow: 0 0 0 3px var(--brass-tint-line);
}

.drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 22, 18, 0.45);
    pointer-events: none;
}

.drop-overlay[hidden] {
    display: none;
}

.drop-overlay-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 34px 48px;
    border: 2px dashed var(--brass);
    border-radius: 16px;
    background: var(--surface);
    font-size: 18px;
    text-align: center;
}

.drop-overlay-box span {
    font-size: 14px;
    color: var(--text-muted);
}

.drop-panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 260;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(380px, calc(100vw - 32px));
    max-height: 60vh;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.drop-panel[hidden] {
    display: none;
}

.drop-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.drop-panel li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 13px;
}

.drop-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drop-status {
    flex: none;
    max-width: 55%;
    text-align: right;
    color: var(--text-muted);
}

.drop-panel li[data-state="done"] .drop-status {
    color: var(--success);
}

.drop-panel li[data-state="error"] .drop-status {
    color: var(--brick-strong);
}

.folders-empty {
    margin: -4px 0 26px;
    font-size: 13.5px;
}

.folder-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--text-muted);
    text-decoration: none;
}

.folder-label:hover {
    color: var(--brass-strong);
}

.folder-label svg {
    width: 12px;
    height: 12px;
}

.folder-title svg {
    color: var(--brass);
}

.folder-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.folder-bar .collection-summary {
    margin: 0;
}

.folder-manage {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.folder-manage form {
    display: contents;
}

.move-modal {
    max-width: 440px;
}

.move-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 18px;
}

.move-option[hidden] {
    display: none;
}

.move-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.move-option:hover {
    background: var(--paper);
}

.move-option-icon {
    flex: none;
    width: 18px;
    height: 14px;
    border-radius: 2px 4px 3px 3px;
    background: var(--brass);
    opacity: 0.75;
}

.move-option-top {
    background: none;
    border: 1.5px dashed var(--text-faint);
}

.move-option-plus {
    background: none;
    border: 1.5px solid var(--brass);
}

@media (max-width: 480px) {
.page-header .form-actions {
        flex-wrap: wrap;
    }
}

.link-badge {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sage-strong);
    color: #fff;
    box-shadow: 0 0 0 2px var(--surface);
}

.link-badge svg {
    width: 10px;
    height: 10px;
}

.comment {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* In the sidebar footer, to the right of the account button. */
.sidebar-footer {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 4px;
}

:root[data-theme="dark"] img[src^="/assets/img/logo-dark.png"] {
    content: url('/assets/img/logo-white.png');
}

.notification {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.notification:hover {
    border-color: var(--brass-tint-line);
    box-shadow: var(--shadow-sm);
}

.reader-settings-btn {
    padding: 6px 9px;
}

.reader-settings-btn svg {
    width: 17px;
    height: 17px;
    display: block;
}

.reader-settings-btn[aria-expanded="true"] {
    background: var(--brass-tint);
    border-color: var(--brass-tint-line);
}

.reader-choice {
    display: flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.reader-choice button {
    flex: 1;
    min-width: 0;
    padding: 6px 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}

.reader-choice button:hover {
    background: var(--surface);
}

.reader-choice button[aria-pressed="true"] {
    background: var(--surface);
    border-color: var(--brass-tint-line);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

.share-modal {
    max-width: 480px;
}

.share-add {
    position: relative;
    margin-bottom: 16px;
}

.share-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 5;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    max-height: 260px;
    overflow-y: auto;
}

.share-result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    border-radius: 7px;
    background: none;
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.share-result:hover,
.share-result:focus {
    background: var(--paper);
    outline: none;
}

.share-result span,
.share-person-text span {
    color: var(--text-muted);
    font-size: 12px;
}

.share-result-none {
    padding: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.share-section-label {
    margin: 0 0 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.share-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
}

.share-person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.share-person-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 13.5px;
}

.share-person-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-owner {
    font-size: 12.5px;
    color: var(--text-muted);
    padding-right: 8px;
}

.share-hint {
    display: block;
    margin-bottom: 18px;
}

.share-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.share-actions-right {
    display: flex;
    gap: 8px;
}

.share-copy svg {
    width: 15px;
    height: 15px;
}

.shared-by {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.share-role {
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    background: var(--dusk-tint);
    color: var(--dusk);
}

.folder-shared-by {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.folder-shared-by .share-role {
    margin-top: 0;
}

.folder-shared-line {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

.folder-shared-line img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.link-form-folder {
    margin: 0;
    padding: 9px 0;
    font-size: 14px;
}

.share-requests {
    margin-bottom: 14px;
    padding: 10px 12px 4px;
    border: 1px solid var(--brass-tint-line);
    border-radius: 10px;
    background: var(--surface-hover);
}

.share-request {
    flex-wrap: wrap;
}

.share-request-message {
    font-style: italic;
    overflow-wrap: anywhere;
}

.share-request-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    padding-left: 40px;
}

.request-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 520px;
    margin: 20px auto 0;
    padding: 36px 32px;
}

.request-access-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--brass-tint);
    color: var(--brass-strong);
}

.request-access-icon svg {
    width: 26px;
    height: 26px;
}

.request-access-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    margin-top: 18px;
}

.reader-focus-exit {
    position: fixed;
    top: 8px;
    right: 22px; /* clear of a PDF's scroll bar */
    z-index: 25;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    opacity: .25;
    cursor: pointer;
    transition: opacity .3s ease;
}

.reader-focus-exit-pdf {
    top: auto;
    bottom: 12px;
}

.reader-focus-exit[hidden] {
    display: none;
}

.reader-focus-exit svg {
    width: 18px;
    height: 18px;
}

.reader-focus-exit.is-visible,
.reader-focus-exit:hover,
.reader-focus-exit:focus-visible {
    opacity: 1;
}

body.reader-focus .sidebar,
body.reader-focus .mobile-topbar,
body.reader-focus .page-header,
body.reader-focus .epub-footer {
    display: none;
}

@media (min-width: 861px) and (max-width: 1180px) {
.doc-back.doc-mobile-only {
        display: flex;
        flex: none;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: var(--text);
    }
.doc-back.doc-mobile-only:hover {
        background: var(--paper);
    }
.doc-back.doc-mobile-only svg {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 860px) {
.doc-mobile-only {
        display: block;
    }
.doc-back,
    .doc-icon-btn {
        display: flex;
    }
body.doc-page .mobile-topbar,
    body.doc-page .doc-credit {
        display: none;
    }
.doc-header {
        position: relative;
        flex-wrap: nowrap;
        gap: 2px;
        padding: 4px 6px;
    }
.doc-header .note-heading {
        flex: 1 1 0;
        min-width: 0;
    }
.doc-header .eyebrow,
    .doc-header .heading-collections {
        display: none;
    }
.doc-header .doc-name-input,
    .doc-header .note-title-input,
    .doc-header .doc-title {
        font-size: 17px;
    }
.doc-header .doc-name-ext {
        font-size: 13px;
    }
.doc-header .form-actions {
        flex: none;
        flex-wrap: nowrap;
        gap: 0;
    }
.doc-back,
    .doc-icon-btn {
        flex: none;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--text);
        cursor: pointer;
        position: relative;
    }
.doc-back:hover,
    .doc-icon-btn:hover,
    .doc-icon-btn[aria-pressed="true"] {
        background: var(--paper);
    }
.doc-icon-btn[aria-pressed="true"] {
        color: var(--brass-strong);
    }
.doc-back svg,
    .doc-icon-btn svg {
        width: 22px;
        height: 22px;
    }
.doc-menu-toggle[data-state="dirty"]::after,
    .doc-menu-toggle[data-state="error"]::after {
        content: "";
        position: absolute;
        top: 8px;
        right: 8px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--brass);
    }
.doc-menu-toggle[data-state="error"]::after {
        background: var(--brick);
    }
.doc-menu {
        display: none;
        position: absolute;
        top: calc(100% - 2px);
        right: 8px;
        z-index: 50;
        min-width: 230px;
        max-width: calc(100vw - 16px);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 6px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        box-shadow: var(--shadow-lg);
    }
.doc-menu.open {
        display: flex;
    }
.doc-menu .save-status {
        padding: 8px 12px 10px;
        border-bottom: 1px solid var(--line);
        white-space: normal;
    }
.doc-menu .btn {
        justify-content: flex-start;
        width: 100%;
        padding: 11px 12px;
        border: 0;
        border-radius: 8px;
        background: none;
        color: var(--text);
        font-size: 14.5px;
        font-weight: 500;
    }
.doc-menu .btn:hover:not(:disabled) {
        background: var(--paper);
    }
.doc-menu .btn:disabled {
        color: var(--text-faint);
        cursor: default;
    }
.doc-menu #saveBtn {
        font-weight: 600;
    }
.doc-menu .btn-danger {
        color: var(--brick);
    }
.doc-menu .btn svg {
        width: 18px;
        height: 18px;
        flex: none;
    }
.doc-menu form {
        display: block;
    }
.doc-menu-credit {
        margin: 4px 0 0;
        padding: 8px 12px 4px;
        border-top: 1px solid var(--line);
        color: var(--text-muted);
        font-size: 11px;
    }
.doc-menu-credit a {
        color: inherit;
    }
body.doc-page .docx-toolbar {
        max-height: 0;
        overflow: hidden;
        border-bottom-width: 0;
    }
body.doc-page.docx-toolbar-open .docx-toolbar {
        max-height: none;
        overflow: visible;
        border-bottom-width: 1px;
    }
body.doc-page .note-toolbar {
        display: none;
    }
body.doc-page.note-toolbar-open .note-toolbar {
        display: flex;
    }
}

.glightbox-actions {
    display: flex;
    gap: 8px;
    padding: 16px 0 4px;
    align-items: center;
}

.quota-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.quota-bar-track {
    flex: 1;
    max-width: 320px;
    height: 8px;
    border-radius: 4px;
    background: var(--line);
    overflow: hidden;
}

.quota-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.quota-bar-label {
    flex: none;
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.resource-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.resource-toolbar form {
    display: flex;
    margin: 0;
}

.resource-tool {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.resource-tool svg {
    width: 17px;
    height: 17px;
    flex: none;
}

.resource-tool:hover {
    background: var(--paper);
}

.resource-tool:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 1px;
}

.resource-tool.is-primary {
    background: var(--ink);
    color: var(--ink-text);
}

.resource-tool.is-primary:hover {
    background: var(--ink-2);
}

.resource-toolbar-sep {
    width: 1px;
    align-self: stretch;
    margin: 4px 4px;
    background: var(--line);
}

@media (max-width: 760px) {
.resource-tool span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
.resource-tool {
        padding: 10px 12px;
    }
}

.share-public {
    margin: 4px 0 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.share-public-toggle {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}

.share-public-toggle span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.share-public-toggle small {
    color: var(--text-muted);
    font-size: 12px;
}

.share-public-link {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.public-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.public-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.public-logo {
    height: 28px;
    width: auto;
}

.public-logo-dark {
    display: none;
}

.public-signin {
    color: var(--text-muted);
    font-size: 14px;
}

.public-main {
    padding: 32px 20px 72px;
}

.public-sheet {
    padding: 40px 48px 56px;
    min-height: 0;
}

.public-head {
    margin-bottom: 24px;
}

.public-facts {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.public-sheet .note-editor .note-prose {
    min-height: 0;
    padding: 0;
}

.public-pdf {
    display: block;
    width: 100%;
    height: 78vh;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.public-fallback {
    margin: 10px 0 0;
    font-size: 13px;
}

.public-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius-md);
}

.public-audio {
    width: 100%;
}

.public-download {
    padding: 32px 0;
    text-align: center;
}

@media (max-width: 700px) {
.public-bar {
        padding: 10px 16px;
    }
.public-main {
        padding: 16px 12px 48px;
    }
.public-sheet {
        padding: 24px 18px 32px;
    }
}

@media (max-width: 860px) {
.bible-toolbar {
        width: 100%;
    }
.bible-search-form {
        flex: 1;
        width: auto;
    }
.bible-search-form .search-input {
        width: 100%;
        min-width: 0;
    }
.bible-text {
        font-size: var(--bible-size, 17.5px);
    }
}

@media (max-width: 480px) {
.bible-pager .btn {
        padding: 9px 12px;
        font-size: 12.5px;
    }
}

@media (max-width: 860px) {
.bible-reading-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
.bible-font-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
.bible-translation-list li {
        flex-wrap: wrap;
    }
}

@media (max-width: 860px) {
.bible-content-split {
        padding: 10px 10px 8px;
    }
.bible-split {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
    }
.bible-pane-head {
        min-height: 40px;
        padding: 4px 6px 4px 12px;
    }
.bible-pane-scroll {
        padding: 14px 16px 18px;
    }
}

@media print {
.note-print-bar {
        display: none;
    }
.note-print-sheet {
        max-width: none;
        padding: 0;
    }
.note-print-sheet h1,
    .note-print-sheet h2,
    .note-print-sheet h3 {
        break-after: avoid;
    }
.note-print-sheet pre,
    .note-print-sheet blockquote,
    .note-print-sheet table,
    .note-print-sheet img {
        break-inside: avoid;
    }
.note-print-sheet a {
        color: inherit;
    }
}

.download-menu {
    position: relative;
}

.download-menu summary {
    list-style: none;
}

.download-menu summary::-webkit-details-marker {
    display: none;
}

.download-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    min-width: 190px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.download-menu-list small {
    display: block;
    color: var(--text-muted);
    font-size: 11.5px;
}

@media print {
body.exe-printing > *:not(#exegesis) {
        display: none !important;
    }
body.exe-printing .exe {
        position: static;
        display: block;
        background: none;
    }
body.exe-printing .exe-toolbar,
    body.exe-printing .exe-stage {
        display: none;
    }
body.exe-printing .exe-print {
        display: block;
        max-width: 100%;
        max-height: 98vh;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
.bible-actions {
        left: 12px;
        right: 12px;
        bottom: 12px;
        transform: none;
        max-width: none;
        justify-content: space-between;
    }
.bible-action-btn span {
        display: none;
    }
}

/* "Emoji | GIF" at the bottom of the smiley's panel (assets/js/inbox.js), when GIFs are on. */
.picker-switch {
    flex: none;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    border-top: 1px solid var(--line);
}

.journal-chip {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--brass-tint);
    border: 1px solid var(--brass-tint-line);
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
}

.hymn-count {
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

.hymn-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.journal-chip.is-on {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ink-text);
}

.note-help-btn {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: var(--table-popover-shadow);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: right 0.22s ease, color 0.15s, background 0.15s;
}

.note-help-btn:hover,
.note-help-btn[aria-expanded="true"] {
    color: var(--text);
    background: var(--paper);
}

.note-help {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: 100vw;
    background: var(--surface);
    color: var(--text);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
}

.note-help.open {
    transform: none;
    visibility: visible;
    transition: transform 0.22s ease;
}

body.note-help-open .note-help-btn {
    right: 380px;
}

.note-help-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 12px;
}

.note-help-head h2 {
    font-size: 18px;
}

.note-help-head p {
    margin: 2px 0 0;
    font-size: 13px;
}

.note-help-close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.note-help-close:hover {
    background: var(--table-hover);
    color: var(--text);
}

.note-help-close svg {
    width: 18px;
    height: 18px;
}

.note-help-search {
    position: relative;
    margin: 0 18px 8px;
}

.note-help-search svg {
    position: absolute;
    top: 50%;
    left: 9px;
    width: 15px;
    height: 15px;
    color: var(--text-faint);
    transform: translateY(-50%);
    pointer-events: none;
}

.note-help-search input {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 30px;
    border: none;
    border-radius: 6px;
    background: var(--table-hover);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    box-shadow: inset 0 0 0 1px var(--table-line);
}

.note-help-search input:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--table-accent), 0 0 0 3px var(--table-select);
}

.note-help-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 10px 24px;
}

.note-help-section {
    padding: 10px 0 4px;
}

.note-help-section + .note-help-section {
    border-top: 1px solid var(--line);
}

.note-help-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px 4px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--table-head-text);
}

.note-help-section h3 svg {
    width: 15px;
    height: 15px;
}

.note-help-hint {
    margin: 0 8px 6px;
    font-size: 12.5px;
}

.note-help-section ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.note-help-item {
    padding: 7px 8px;
    border-radius: 6px;
}

.note-help-item:hover {
    background: var(--table-hover);
}

.note-help-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
}

.note-help-item-head strong {
    font-weight: 500;
}

.note-help-item p {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.note-help-keys {
    display: flex;
    flex: none;
    gap: 3px;
}

.note-help-item code {
    padding: 0 4px;
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--table-hover);
    border-radius: 3px;
}

.note-help-empty {
    margin: 20px 8px;
    text-align: center;
    font-size: 13px;
}

.note-help-foot {
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--text-muted);
}

@media (min-width: 1200px) {
body.note-help-open .main {
        padding-right: 360px;
    }
}

@media (max-width: 860px) {
.note-help {
        width: 100vw;
        border-left: none;
    }
body.note-help-open .note-help-btn {
        display: none;
    }
.note-help-btn {
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
.note-help-foot {
        display: none;
    }
}

.note-help-or {
    align-self: center;
    font-size: 11px;
    color: var(--text-faint);
}

.note-help-combo {
    white-space: nowrap;
}

@media (max-width: 860px) {
.note-focus-btn {
        right: 60px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
body.note-help-open .note-focus-btn {
        display: none;
    }
}


/* ---- Tables and form bits (copied from Covenant Hall) ---- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

table.data-table th {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1.5px solid var(--line-strong);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

table.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    color: var(--text);
}

table.data-table tbody tr:hover {
    background: var(--paper);
}

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

table.data-table td.cover-cell {
    width: 1%;
    padding-right: 0;
}

@media (max-width: 480px) {
.page-header .form-actions {
        flex-wrap: wrap;
    }
}

/* ---- Projects ---- */
.project-blurb { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.project-overdue { color: var(--brick); font-weight: 600; }
.project-summary { margin-bottom: 24px; }
.project-facts { display: flex; flex-wrap: wrap; gap: 8px 36px; }
.project-facts > div { display: flex; flex-direction: column; gap: 2px; }
.project-fact-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.project-description { margin: 16px 0 0; color: var(--text); line-height: 1.55; }
.project-section { font-family: var(--font-display); font-size: 20px; margin: 8px 0 12px; }
.project-source-kind { display: block; font-size: 12px; color: var(--text-muted); }
.project-mine td { background: var(--brass-tint); }
.project-assign select { min-width: 180px; }
.project-add { margin-top: 24px; }
.project-add h2 { margin-bottom: 4px; }
.project-add-hint { color: var(--text-muted); font-size: 14px; margin: 0 0 18px; }
.project-source-choice { display: inline-flex; width: auto; max-width: 100%; }
.project-source-choice label span { white-space: nowrap; padding-left: 18px; padding-right: 18px; }
.project-assign select {
    font: inherit;
    font-size: 14px;
    padding: 7px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}
.project-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--line); color: var(--text-muted); }
.project-status-in_progress { background: var(--brass-tint); color: var(--brass-strong); }
.project-status-review { background: var(--dusk-tint); color: var(--dusk); }
.project-status-done { background: var(--sage-tint); color: var(--success); }
.csv-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 20px; margin-top: 16px; }
.csv-map select { width: 100%; }
.csv-preview td, .csv-preview th { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* ---- A note's side window (assets/js/note-reference-pane.js) ---- */
.ref-pane {
    position: sticky;
    top: 0;
    align-self: flex-start;
    flex: 0 0 var(--ref-width, 440px);
    width: var(--ref-width, 440px);
    height: 100vh;
    display: flex;
    background: var(--surface);
    border-left: 1px solid var(--line-strong);
}
.ref-pane[hidden] { display: none; }
.ref-resize {
    flex: 0 0 7px;
    margin-left: -4px;
    cursor: col-resize;
    position: relative;
    z-index: 2;
    touch-action: none;
}
.ref-resize::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 3px; width: 2px;
    background: transparent;
    transition: background 0.15s;
}
.ref-resize:hover::after, .ref-resize:focus-visible::after, body.ref-resizing .ref-resize::after { background: var(--brass); }
.ref-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ref-bar { display: flex; align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--line); }
.ref-tabs { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px; padding: 6px 6px 0; overflow-x: auto; scrollbar-width: none; }
.ref-tabs::-webkit-scrollbar { display: none; }
.ref-tab {
    display: flex;
    align-items: center;
    flex: 0 1 170px;
    min-width: 90px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--text-muted);
}
.ref-tab:hover { background: var(--surface-hover); }
.ref-tab.active { background: var(--surface); border-color: var(--line); color: var(--text); margin-bottom: -1px; }
.ref-tab-label {
    flex: 1;
    min-width: 0;
    padding: 8px 4px 8px 10px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.ref-tab-close, .ref-tab-add, .ref-close {
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
}
.ref-tab-close { width: 22px; height: 22px; margin-right: 6px; flex: none; }
.ref-tab-close:hover, .ref-tab-add:hover, .ref-close:hover { background: var(--line); color: var(--text); }
.ref-tab-add { width: 28px; height: 28px; margin: 0 0 4px 2px; flex: none; font-size: 19px; }
.ref-close { width: 34px; margin: 6px 6px 0 0; font-size: 20px; }
.ref-body { position: relative; flex: 1; min-height: 0; }
.ref-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--paper); }
.ref-frame[hidden] { display: none; }
body.ref-resizing { cursor: col-resize; user-select: none; }
body.ref-resizing .ref-frame { pointer-events: none; }
.ref-chooser { position: absolute; inset: 0; overflow-y: auto; padding: 18px; }
.ref-chooser[hidden] { display: none; }
.ref-chooser-block { margin-bottom: 24px; }
.ref-chooser-block h3 { font-family: var(--font-display); font-size: 16px; margin: 0 0 10px; }
.ref-chooser input[type="text"], .ref-chooser input[type="search"] {
    width: 100%;
    padding: 9px 12px;
    font: inherit;
    font-size: 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}
.ref-chooser-row { display: flex; gap: 8px; margin-bottom: 8px; }
.ref-chooser-row .btn { flex: none; width: auto; }
.ref-chooser-list { list-style: none; margin: 10px 0 0; padding: 0; }
.ref-chooser-list button {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.ref-chooser-list button:hover { background: var(--line); }
.ref-chooser-kind { flex: none; width: 64px; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.ref-chooser-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-chooser-none { padding: 8px 10px; color: var(--text-muted); font-size: 14px; }

/* A page inside the side window: no app chrome. */
html.embedded .sidebar, html.embedded .mobile-topbar, html.embedded .mobile-menu-overlay, html.embedded .note-focus-btn, html.embedded .ref-pane, html.embedded #refPaneToggle { display: none !important; }
html.embedded .shell { display: block; }
html.embedded .main { margin: 0; }

@media (max-width: 860px) {
    .ref-pane { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; flex-basis: auto; }
    .ref-resize { display: none; }
}

/* The round buttons at the bottom right of a note stay beside the side window, not under it. */
body.ref-open .note-focus-btn { right: calc(var(--ref-width, 440px) + 64px); }
body.ref-open .note-help-btn { right: calc(var(--ref-width, 440px) + 20px); }
@media (max-width: 860px) {
    body.ref-open .note-focus-btn, body.ref-open .note-help-btn { display: none; }
}

/* The side window as a browser window of its own (/reference) */
body[data-ref-window] { overflow: hidden; }
body[data-ref-window] .ref-pane { position: fixed; inset: 0; width: 100%; height: 100%; flex: none; border-left: 0; }
.ref-icon { border: 0; background: none; color: var(--text-muted); cursor: pointer; border-radius: 6px; width: 34px; margin: 6px 0 0; display: flex; align-items: center; justify-content: center; }
.ref-icon svg { width: 17px; height: 17px; }
.ref-icon:hover { background: var(--line); color: var(--text); }

/* Web tabs in the side window */
.ref-browser { display: flex; align-items: center; gap: 2px; padding: 6px 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ref-browser[hidden] { display: none; }
.ref-browser .ref-icon { margin: 0; width: 32px; height: 32px; flex: none; }
.ref-browser .ref-icon:disabled { opacity: 0.35; cursor: default; }
.ref-browser .ref-icon:disabled:hover { background: none; color: var(--text-muted); }
.ref-address {
    flex: 1;
    min-width: 0;
    margin: 0 4px;
    padding: 7px 12px;
    font: inherit;
    font-size: 13.5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--text);
}
.ref-address:focus { outline: none; border-color: var(--brass); background: var(--surface); }
.ref-notice { position: absolute; inset: 0; overflow-y: auto; padding: 22px; background: var(--surface); }
.ref-notice[hidden] { display: none; }
.ref-notice-box { max-width: 420px; margin: 40px auto 0; }
.ref-notice-box h3 { font-family: var(--font-display); font-size: 18px; margin: 0 0 8px; }
.ref-notice-box p { color: var(--text-muted); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.ref-reader { max-width: 680px; margin: 14px auto 0; line-height: 1.6; }
.ref-reader h2 { font-family: var(--font-display); font-size: 22px; }
.ref-reader img { max-width: 100%; height: auto; }

/* ---- Dictionary ---- */
.dict-search { margin-bottom: 20px; }
.dict-hint { color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.dict-heading { font-family: var(--font-display); font-size: 18px; margin: 26px 0 12px; }
.dict-card { margin-bottom: 8px; }
.dict-title { font-family: var(--font-display); font-size: 28px; margin: 0 0 14px; }
.dict-group { margin-bottom: 16px; }
.dict-pos { display: inline-block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-strong); }
.dict-meanings { margin: 0; padding-left: 22px; font-size: 17px; line-height: 1.7; }
.dict-meanings li::marker { color: var(--text-faint); font-size: 13px; }
.dict-others { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dict-others a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14px; text-decoration: none; }
.dict-others a:hover { border-color: var(--brass); color: var(--brass-strong); }
.dict-reverse { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.dict-reverse:first-child { border-top: 0; }
.dict-word { font-weight: 600; color: var(--text); }
.dict-malayalam { color: var(--text-muted); font-size: 15px; }
.dict-credit { margin-top: 36px; font-size: 12px; color: var(--text-faint); }
.dict-admin { margin-top: 18px; font-size: 14px; }
.dict-admin summary { cursor: pointer; color: var(--text-muted); }
.dict-admin form { margin-top: 12px; }

.dict-which { margin: -6px 0 16px; font-size: 13px; color: var(--text-muted); }
.dict-which strong { color: var(--brass-strong); font-weight: 600; }

/* The dictionary card on a note (Ctrl+click a word; assets/js/note-dictionary.js) */
.dict-card-pop {
    position: fixed;
    z-index: 200;
    width: min(360px, calc(100vw - 20px));
    max-height: min(420px, calc(100vh - 20px));
    display: flex;
    flex-direction: column;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.dict-card-head { display: flex; align-items: center; gap: 4px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.dict-card-head strong { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 18px; overflow-wrap: anywhere; }
.dict-card-close { border: 0; background: none; color: var(--text-muted); font-size: 20px; line-height: 1; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; }
.dict-card-close:hover, .dict-card-copy:hover { background: var(--line); color: var(--text); }
.dict-card-body { overflow-y: auto; padding: 10px 14px 12px; font-size: 14px; color: var(--text-muted); }
.dict-card-dict { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.dict-card-pos { margin: 8px 0 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-strong); }
.dict-card-meanings { list-style: none; margin: 0; padding: 0; }
.dict-card-meanings li { display: flex; align-items: flex-start; gap: 6px; padding: 4px 0; font-size: 16px; line-height: 1.5; color: var(--text); }
.dict-card-meanings li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dict-card-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; background: none; color: var(--text-faint); border-radius: 6px; cursor: pointer; }
.dict-card-copy svg { width: 15px; height: 15px; }
.dict-card-copy.copied { color: var(--success); }
.dict-card-more { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--brass-strong); }

/* Transliterate button and the little message after it */
.translit-glyph { font-weight: 700; font-size: 15px; line-height: 1; }
.toolbar-btn .translit-glyph { display: inline-flex; width: 16px; justify-content: center; }
.bubble-menu [data-transliterate] .translit-glyph { font-size: 14px; }
[data-transliterate].is-busy { opacity: 0.55; cursor: progress; }
.note-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 300;
    max-width: min(520px, calc(100vw - 32px));
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: var(--ink);
    color: var(--ink-text);
    font-size: 14px;
    line-height: 1.45;
    box-shadow: var(--shadow-lg);
}
.note-toast[hidden] { display: none; }
.note-toast.is-error { background: var(--brick); color: #fff; }

/* The Bible card's insert buttons (assets/js/bible-refs.js, on a note) */
.bible-ref-card-insert { display: flex; gap: 6px; margin: 8px 0 2px; }
.bible-ref-card-insert button {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.bible-ref-card-insert button:hover { border-color: var(--brass); color: var(--brass-strong); }


/* ---- Notifications (copied from Covenant Hall) ---- */
.notify-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 14px 10px;
    padding: 10px 12px;
    border: 1px solid var(--brass-tint-line);
    border-radius: 10px;
    background: var(--brass-tint);
    font-size: 12.5px;
    line-height: 1.4;
}

.toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 14px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brass);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    text-decoration: none;
    animation: toast-in .25s ease;
}

.toast-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.toast-text span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

.toast-close {
    flex: none;
    align-self: flex-start;
    padding: 0 4px;
    border: 0;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}

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

@media (prefers-reduced-motion: reduce) {
.toast { animation: none; }
}

@media (max-width: 860px) {
.toast-stack {
        right: 16px;
        bottom: 16px;
    }
}

.notify-banner-page {
    margin: 0 0 16px;
}

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notification-unread {
    background: var(--surface-hover);
    border-color: var(--brass-tint-line);
}

.notification-photo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--line);
}

.notification-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.notification-message {
    font-size: 14px;
    overflow-wrap: anywhere;
}

.notification:not(.notification-unread) .notification-message {
    color: var(--text-muted);
}

.notification:not(.notification-unread) .notification-message strong {
    color: var(--text);
    font-weight: 600;
}

.notification-body {
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.notification-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

.notification-dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--brick);
}

/* Assignment page: details and the comment thread */
.assignment-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.project-comments { margin-left: 8px; font-size: 12px; color: var(--text-muted); }
.project-row-actions { white-space: nowrap; }
.project-row-actions .icon-btn { display: inline-flex; vertical-align: middle; }
.thread-empty { color: var(--text-muted); font-size: 14px; margin: 0 0 16px; }
.comment-group { margin-bottom: 18px; }
.comment { display: flex; gap: 12px; padding: 4px 0; }
.comment-photo { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.comment-reply .comment-photo { width: 28px; height: 28px; }
.comment-main { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: baseline; gap: 10px; }
.comment-head strong { font-size: 14px; }
.comment-time { font-size: 12px; color: var(--text-faint); }
.comment-body { margin-top: 2px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-actions { display: flex; gap: 14px; margin-top: 4px; }
.comment-action { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0; font: inherit; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
.comment-action:hover { color: var(--text); }
.comment-action svg { width: 14px; height: 14px; }
.comment-like.liked { color: var(--brick); }
.comment-like.liked svg { fill: currentColor; }
.comment-delete:hover { color: var(--brick); }
.comment-replies { margin: 6px 0 0 24px; padding-left: 18px; border-left: 2px solid var(--line); }
.comment-flash { animation: commentFlash 2.4s ease-out; }
@keyframes commentFlash { from { background: var(--brass-tint); } to { background: transparent; } }
.thread-compose, .reply-box { margin-top: 14px; }
.thread-compose textarea, .reply-box textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: 15px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    resize: vertical;
}
.thread-compose textarea:focus, .reply-box textarea:focus { outline: none; border-color: var(--brass); }
.thread-compose-row { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 8px; }
.thread-error { margin-right: auto; color: var(--brick); font-size: 13px; }

/* Users */
.tab-count { margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--line); color: var(--text-muted); font-size: 11.5px; font-weight: 600; }
.view-toggle a[aria-current="page"] .tab-count { background: var(--surface); color: var(--brass-strong); }
.user-name { display: inline-flex; align-items: center; gap: 10px; }
.user-photo { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.user-inactive td { opacity: 0.6; }
.user-inactive td.project-row-actions { opacity: 1; }
.user-work { color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.user-inline-form { display: inline-block; margin: 0 4px; vertical-align: middle; }
.user-role-choice { display: inline-flex; width: auto; max-width: 100%; }
.user-role-choice label span { white-space: nowrap; padding-left: 22px; padding-right: 22px; }
.user-password-row { display: flex; gap: 8px; }
.user-password-row input { flex: 1; min-width: 0; }
.user-password-row .btn { flex: none; width: auto; }
.checkbox-field { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; font-size: 14.5px; }

.nav-badge[hidden] { display: none; }


/* ---- Photos and cropping (copied from Covenant Hall) ---- */
.photo-field {
    flex: 1;
    min-width: 220px;
    margin-bottom: 0;
}

@media (max-width: 480px) {
.settings-avatar-preview {
        flex-wrap: wrap;
    }
}

.crop-overlay:not(.crop-rect) .crop-stage .cropper-view-box,
.crop-overlay:not(.crop-rect) .crop-stage .cropper-face {
    border-radius: 50%;
}
.photo-link-label { display: block; margin-top: 14px; }

/* Proofread mode: what an admin typed in it is red (a <span class="proofread"> in the Markdown) */
.proofread, .markdown-body .proofread, .note-prose .proofread { color: #d93025; }
:root[data-theme="dark"] .proofread, :root[data-theme="dark"] .note-prose .proofread, :root[data-theme="dark"] .markdown-body .proofread { color: #ff7b72; }
#proofreadBtn[aria-pressed="true"] { color: #d93025; border-color: #d93025; background: rgba(217, 48, 37, 0.08); }
:root[data-theme="dark"] #proofreadBtn[aria-pressed="true"] { color: #ff7b72; border-color: #ff7b72; background: rgba(255, 123, 114, 0.12); }
body.note-proofreading .note-sheet { box-shadow: inset 3px 0 0 #d93025; }

/* Notes attached to an assignment */
.attached-notes { list-style: none; margin: 0 0 16px; padding: 0; }
.attached-notes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.attached-notes li:first-child { border-top: 0; padding-top: 0; }
.attached-notes .user-inline-form { margin-left: auto; }
.attach-form { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px; }
.attach-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
.attach-row select { flex: 1 1 220px; min-width: 0; }
.attach-row select + select { flex: 0 1 140px; }
.attach-form select { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }