/* ══════════════════════════════════════════════════════════════
   Notespark — SectionView light-theme fixes + Craft-style author marks
   Isolated file. Load AFTER app.css / nota-layout.css / nota-shell.css.
   ══════════════════════════════════════════════════════════════ */

/* ── Breadcrumb / back button — these had no theme-light rules,
      so they inherited dark-theme (near-white) colours and vanished
      on the light background. ── */
.nota.theme-light .section-back-btn {
    color: var(--n-text-3) !important;
    background: var(--n-surface) !important;
    border-radius: 8px;
}

    .nota.theme-light .section-back-btn:hover {
        color: var(--n-text) !important;
        background: var(--n-surface-hover) !important;
    }

.nota.theme-light .editor-breadcrumb {
    color: var(--n-text-3) !important;
}

.nota.theme-light .breadcrumb-sep {
    color: var(--n-text-4) !important;
}

.nota.theme-light .notes-panel-title {
    color: var(--n-text) !important;
}

.nota.theme-light .note-count {
    color: var(--n-text-3) !important;
    background: var(--n-surface) !important;
}

/* Editor toolbar icon buttons — keep them quiet on light */
.nota.theme-light .editor-toolbar .icon-btn {
    color: var(--n-text-3) !important;
}

    .nota.theme-light .editor-toolbar .icon-btn:hover {
        color: var(--n-text) !important;
        background: var(--n-surface-hover) !important;
    }

/* TipTap formatting toolbar on light paper */
.nota.theme-light .tt-toolbar {
    border-bottom: 1px solid var(--n-border-light);
}

.nota.theme-light .tt-btn {
    color: var(--n-text-2) !important;
}

    .nota.theme-light .tt-btn:hover {
        background: var(--n-surface-hover) !important;
        color: var(--n-text) !important;
    }

/* ══════════════════════════════════════════════════════════════
   Author attribution marks — Craft style.

   Default: HIDDEN. The marks only appear when the document actually
   has more than one author, and then only on blocks where authorship
   CHANGES (not repeated down every line).

   nota-authors.js adds:
     .has-multiple-authors  → on .tiptap-container when >1 distinct author
     [data-author-change]   → on blocks whose author differs from the one above
   ══════════════════════════════════════════════════════════════ */

/* Hide every author bubble by default — single-author notes stay clean.
   NOTE: nota-layout.css has `.nota.theme-light .tiptap-container .ProseMirror
   [data-author-id]::before`, which is MORE specific than a bare
   `.tiptap-container ...` selector and was winning, so the bubbles came back.
   These selectors match that specificity (and then some) so they hold. */
.nota .tiptap-container .ProseMirror [data-author-id]::before,
.nota.theme-light .tiptap-container .ProseMirror [data-author-id]::before {
    display: none !important;
}

/* Multi-author document: show only where authorship changes */
.nota .tiptap-container.has-multiple-authors .ProseMirror [data-author-id][data-author-change]::before,
.nota.theme-light .tiptap-container.has-multiple-authors .ProseMirror [data-author-id][data-author-change]::before {
    display: flex !important;
}

/* Light-theme polish for the bubble itself */
.nota.theme-light .tiptap-container .ProseMirror [data-author-id]::before {
    box-shadow: 0 1px 3px rgba(70,55,30,0.18);
    border: 2px solid #fff;
}

/* ══════════════════════════════════════════════════════════════
   THREE-CARD LAYOUT (desktop)
   sidebar | note list | editor — each a rounded card floating on
   the warm canvas, matching the shell pattern.

   .nota-main was the card; now it becomes a transparent container
   so its two children can float as siblings instead.
   ══════════════════════════════════════════════════════════════ */

/* Outer panel stops being a card ONLY on the section route, where its two
   children become cards themselves. `:has(.section-page)` keeps Home's
   .nota-main card intact (rounded corners + shadow) — the section page is
   the only view that renders .section-page. */
.nota.theme-light.desktop .nota-main:has(.section-page) {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 8px 0 0 !important;
}

    /* Content bar sits on canvas only when the cards are below it */
    .nota.theme-light.desktop .nota-main:has(.section-page) .nota-content-bar {
        background: transparent !important;
        border-bottom: none !important;
    }

/* Give the section page room so its cards can breathe */
.nota.theme-light.desktop .section-page {
    gap: 10px; /* inner gutter: note-list ↔ editor */
    padding: 0; /* no inner padding — .nota-main's own margin
                                already provides the gutter, so the section
                                cards line up with the sidebar on BOTH routes */
    background: transparent;
}

/* ── Card 2: the note list ── */
.nota.theme-light.desktop .notes-panel {
    background: #f8f4ec !important; /* warm cream, like the sidebar */
    border: none !important;
    border-right: none !important;
    border-radius: 16px !important;
    box-shadow: var(--n-shadow-sm);
    overflow: hidden;
}

.nota.theme-light.desktop .notes-panel-header {
    background: transparent !important;
    border-bottom: 1px solid var(--n-border-light) !important;
}

/* ── Card 3: the editor ── */
.nota.theme-light.desktop .editor-panel {
    background: #fffdf9 !important; /* lightest paper — the writing surface */
    border-radius: 16px !important;
    box-shadow: var(--n-shadow-sm);
    overflow: hidden;
}

.nota.theme-light.desktop .editor-toolbar {
    background: transparent !important;
    border-bottom: 1px solid var(--n-border-light) !important;
}

/* Divider sits in the gap between the two cards */
.nota.theme-light.desktop .notes-divider {
    align-self: center;
    height: calc(100% - 16px);
}

/* ── With the full-width top bar in place, the content bar inside
      .nota-main is redundant on the section route (breadcrumb removed,
      search moved out). Hide it so the note-list and editor cards
      start at the same top edge as the sidebar. ── */
.nota.theme-light.desktop .nota-main:has(.section-page) .nota-content-bar {
    display: none !important;
}

/* Cards fill the shell height and align with the sidebar */
.nota.theme-light.desktop .nota-main:has(.section-page) {
    margin: 0 8px 18px 0 !important; /* bottom gutter matches the sidebar */
}

.nota.theme-light.desktop .section-page {
    height: 100%;
    align-items: stretch;
}

/* ── Tighter note-list card stacking ──
   The section note list had generous vertical gaps; Craft stacks these
   closely. Scoped to .notes-list so the Home card grid is unaffected. */
.nota.theme-light.desktop .notes-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 10px 10px;
}

    .nota.theme-light.desktop .notes-list .note-card {
        margin: 0 !important; /* gap handles the spacing now */
        padding: 11px 13px !important;
        border-radius: 11px !important;
    }

    .nota.theme-light.desktop .notes-list .note-card-title {
        margin-bottom: 3px;
        line-height: 1.3;
    }

    .nota.theme-light.desktop .notes-list .note-card-preview {
        line-height: 1.4;
    }

/* ── Even gutters between all three cards ──
   The sidebar↔note-list gap comes from margins; the note-list↔editor gap
   comes from .section-page's `gap`. They're set to match (10px) so the
   three cards are evenly spaced. */
.nota.theme-light.desktop .nota-main:has(.section-page) {
    margin-left: 10px !important;
}

/* ── Pin button active state ──
   SectionView adds `.pinned` to the toolbar button when the note is pinned,
   but nothing styled it, so pinned and unpinned looked identical. */
.nota.theme-light .editor-toolbar .icon-btn.pinned {
    background: var(--n-accent-dim) !important;
    color: var(--n-accent-text) !important;
    box-shadow: inset 0 1px 3px rgba(108,92,231,0.25);
}

    .nota.theme-light .editor-toolbar .icon-btn.pinned:hover {
        background: rgba(108,92,231,0.18) !important;
    }

/* ── Align the toolbar avatar with the note title ──
   The toolbar and the editor body had different left padding, so the
   avatar sat left of the title's "M". Pin both to the same value. */
.nota.theme-light.desktop .editor-toolbar {
    padding-left: 34px !important;
    padding-right: 34px !important;
}

.nota.theme-light.desktop .editor-body {
    padding-left: 34px !important;
    padding-right: 34px !important;
}

/* The avatar block is .collab-stack. It carried margin-left:16px +
   padding-left:16px + a border-left divider — designed to separate it
   from the breadcrumb that used to sit before it. That breadcrumb has
   moved to the top bar, so the offset and divider now just push the
   avatar out of alignment. Strip them. */
.nota.theme-light.desktop .editor-toolbar .toolbar-left {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.nota.theme-light.desktop .collab-stack {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
}

    /* first avatar shouldn't be pulled left by the stack-overlap offset,
   and its ring should be paper — not the (now blue) --n-bg */
    .nota.theme-light.desktop .collab-stack .collab-avatar:first-child {
        margin-left: 0 !important;
    }

.nota.theme-light .collab-avatar {
    border-color: #fffdf9 !important;
}

.nota.theme-light.desktop .editor-title-input {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   Note-card hover actions (pin / trash)
   Mirrors the sidebar pattern: hidden at rest, revealed on hover, so
   the card stays clean but you can act without opening the note.
   ══════════════════════════════════════════════════════════════ */
.nota.theme-light.desktop .notes-list .note-card {
    position: relative;
}

.note-card-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.notes-list .note-card:hover .note-card-actions,
.notes-list .note-card.active .note-card-actions {
    opacity: 1;
}

.nc-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--n-border-light);
    border-radius: 6px;
    color: var(--n-text-4);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .nc-act:hover {
        background: #fff;
        color: var(--n-text);
        border-color: var(--n-card-border-hover);
    }

    /* A pinned note keeps its marker visible even when not hovered */
    .nc-act.pinned {
        opacity: 1;
        color: var(--n-accent-text);
        border-color: rgba(108,92,231,0.35);
        background: var(--n-accent-dim);
    }

.notes-list .note-card .note-card-actions:has(.nc-act.pinned) {
    opacity: 1;
}

.nc-act.danger:hover {
    color: var(--n-danger);
    border-color: rgba(220,38,38,0.35);
    background: var(--n-danger-bg);
}

/* The old 📌 badge is redundant now the pin button shows state */
.notes-list .note-card .pin-badge {
    display: none;
}

/* Keep the title clear of the buttons */
.notes-list .note-card-title {
    padding-right: 52px;
}

/* ══════════════════════════════════════════════════════════════
   Locked-section gate
   Shown when a password-protected notebook is reached by ANY route —
   Home card, search result, tag, pinned note or a pasted URL.
   ══════════════════════════════════════════════════════════════ */
.section-locked {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: #fffdf9;
    border-radius: 16px;
    margin: 0 8px 18px 10px;
}

.section-locked-card {
    width: 100%;
    max-width: 360px;
    text-align: center;
}

.section-locked-icon {
    display: flex;
    justify-content: center;
    color: #b58a3c;
    margin-bottom: 14px;
}

.section-locked-card h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    color: var(--n-text);
}

.section-locked-card p {
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--n-text-3);
}

.section-locked-card .form-input {
    width: 100%;
    text-align: center;
}

.section-locked-error {
    margin-top: 10px;
    font-size: 13px;
    color: var(--n-danger);
}

.section-locked-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}