/* A writing desk: note shelf on the left, the page in front of you.
           Full-height app — the topbar sits above, the editor fills the rest. */
        body {
            padding: 0;
            margin: 0;
            height: 100dvh;
            overflow: hidden;
        }

        .editor-container {
            display: flex;
        }

        /* ------------------------------------------------------ shelf */
        .notes-sidebar {
            flex: 0 0 296px;
            width: 296px;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .sidebar-header {
            padding: 20px 20px 16px;
        }

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

        .sidebar-title {
            display: flex;
            align-items: baseline;
            gap: 10px;
            font: 400 24px/1.2 var(--font-serif);
            letter-spacing: -.03em;
        }

        .sidebar-count {
            color: var(--subtle-foreground);
            font-family: var(--font-mono);
            font-size: 10px;
            letter-spacing: .04em;
        }

        .btn-new-note {
            min-height: 32px;
            padding: 5px 12px 5px 10px;
            border-color: var(--foreground);
            background: var(--foreground);
            color: var(--background);
            font-size: 12.5px;
        }

        .btn-new-note:hover {
            border-color: var(--brand);
            background: var(--brand);
            color: var(--on-brand);
        }

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

        .note-search {
            position: relative;
        }

        .note-search svg {
            position: absolute;
            left: 11px;
            top: 50%;
            width: 14px;
            height: 14px;
            margin-top: -7px;
            color: var(--subtle-foreground);
            pointer-events: none;
        }

        #noteSearch {
            width: 100%;
            min-height: 36px;
            padding-left: 32px;
            background: var(--background);
            font-size: 13px;
        }

        #noteSearch::-webkit-search-cancel-button {
            opacity: .5;
        }

        .notes-list {
            flex: 1;
            overflow-y: auto;
            border-top: 1px solid var(--border);
        }

        .note-item {
            position: relative;
            padding: 15px 20px 14px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background-color var(--motion-fast) var(--ease-standard);
        }

        .note-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--brand);
            transform: scaleY(0);
            transition: transform var(--motion-settle) var(--ease-standard);
        }

        .note-item:hover {
            background: var(--secondary);
        }

        .note-item.active {
            background: var(--background);
        }

        .note-item.active::before {
            transform: none;
        }

        .note-item:focus-visible {
            outline-offset: -2px;
        }

        .note-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 4px;
        }

        .note-title {
            min-width: 0;
            overflow: hidden;
            font: 400 17px/1.3 var(--font-serif);
            letter-spacing: -.015em;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .note-item.active .note-title {
            color: var(--brand);
        }

        .note-title.is-untitled {
            color: var(--muted-foreground);
            font-style: italic;
        }

        .note-preview {
            display: -webkit-box;
            overflow: hidden;
            color: var(--muted-foreground);
            font-size: 12.5px;
            line-height: 1.55;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .note-preview.is-empty {
            color: var(--subtle-foreground);
            font-style: italic;
        }

        .note-date {
            flex: 0 0 auto;
            color: var(--subtle-foreground);
            font-family: var(--font-mono);
            font-size: 10px;
            white-space: nowrap;
        }

        .empty-state {
            padding: 48px 24px;
            color: var(--muted-foreground);
            font-size: 13px;
            line-height: 1.6;
            text-align: center;
        }

        .empty-state strong {
            display: block;
            margin-bottom: 4px;
            color: var(--foreground);
            font: 400 19px var(--font-serif);
        }

        /* ------------------------------------------------------- desk */
        .editor-main {
            flex: 1;
            min-width: 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .editor-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 14px 20px 14px 28px;
            border-bottom: 1px solid var(--border);
        }

        .editor-title-input {
            flex: 1;
            min-width: 0;
        }

        /* Borderless serif title; id selector outbeats papers.css input chrome. */
        #noteTitle {
            padding: 2px 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            font: 400 26px/1.25 var(--font-serif);
            letter-spacing: -.03em;
            text-overflow: ellipsis;
        }

        #noteTitle::placeholder {
            color: var(--subtle-foreground);
        }

        .save-stamp {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            flex: 0 0 auto;
            margin-right: 8px;
            color: var(--subtle-foreground);
            font-size: 10px;
            white-space: nowrap;
        }

        .save-stamp:not(:empty)::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--viz-sage);
        }

        .save-stamp.is-pending::before {
            background: var(--border-strong);
        }

        .save-stamp.is-error {
            color: var(--destructive);
        }

        .save-stamp.is-error::before {
            background: var(--destructive);
        }

        /* Quiet actions: text until hovered. Delete only warns on approach. */
        .editor-action {
            min-height: 32px;
            padding: 5px 10px;
            border-color: transparent;
            background: transparent;
            color: var(--muted-foreground);
            font-size: 13px;
        }

        .editor-action svg {
            width: 14px;
            height: 14px;
        }

        .editor-action:hover {
            border-color: var(--border);
            background: var(--background);
            color: var(--foreground);
        }

        .btn-delete:hover {
            border-color: color-mix(in srgb, var(--destructive) 35%, transparent);
            background: var(--destructive-soft);
            color: var(--destructive);
        }

        /* Phones show one pane at a time; the switch only appears there. */
        .pane-switch { display: none; }

        .editor-content {
            flex: 1;
            min-height: 0;
            display: flex;
            overflow: hidden;
        }

        .editor-pane {
            flex: 1;
            min-width: 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            border-right: 1px solid var(--border);
        }

        .editor-pane:last-child {
            border-right: none;
        }

        .preview-side {
            background: var(--raised);
        }

        .pane-label {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            padding: 9px 28px;
            border-bottom: 1px solid var(--border);
            color: var(--subtle-foreground);
            font-family: var(--font-mono);
            font-size: 10px;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        .pane-meta {
            letter-spacing: .02em;
            text-transform: none;
        }

        .editor-textarea {
            flex: 1;
            min-height: 0;
            padding: 28px 28px 64px;
            border: 0;
            border-radius: 0;
            background: transparent;
            resize: none;
            font-family: var(--font-mono);
            font-size: 13.5px;
            line-height: 1.8;
            tab-size: 2;
            caret-color: var(--brand);
        }

        #noteContent:focus-visible {
            border: 0;
            box-shadow: none;
            outline: none;
        }

        /* Preview: the reading surface, set like the collection's articles. */
        .preview-pane {
            flex: 1;
            min-width: 0;
            min-height: 0;
            padding: 30px 40px 72px;
            overflow-y: auto;
            color: var(--prose);
            font-family: var(--font-serif);
            font-size: 17px;
            letter-spacing: -0.005em;
            line-height: 1.75;
            overflow-wrap: anywhere;
        }

        .preview-pane > * {
            max-width: 66ch;
        }

        .preview-pane:empty::before {
            content: 'Your formatted note appears here as you write. Try a # heading, **bold**, a - list, or a > quote.';
            display: block;
            max-width: 34ch;
            margin: 14vh auto 0;
            color: var(--subtle-foreground);
            font-size: 16px;
            font-style: italic;
            line-height: 1.7;
            text-align: center;
        }

        .preview-pane > :first-child {
            margin-top: 0;
        }

        .preview-pane :is(h1, h2, h3) {
            color: var(--foreground);
            font-family: var(--font-serif);
            font-weight: 400;
            text-wrap: balance;
        }

        .preview-pane h1 {
            margin: 34px 0 14px;
            font-size: 32px;
            letter-spacing: -.035em;
            line-height: 1.15;
        }

        .preview-pane h2 {
            margin: 30px 0 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border);
            font-size: 23px;
            letter-spacing: -.025em;
            line-height: 1.3;
        }

        .preview-pane h3 {
            margin: 24px 0 6px;
            font-size: 19px;
            font-style: italic;
            letter-spacing: -.01em;
            line-height: 1.35;
        }

        .preview-pane p {
            margin: 0 0 14px 0;
        }

        .preview-pane ul, .preview-pane ol {
            margin: 0 0 14px 22px;
            padding-left: 0;
        }

        .preview-pane ul ul, .preview-pane ol ol,
        .preview-pane ul ol, .preview-pane ol ul {
            margin: 4px 0 4px 22px;
        }

        .preview-pane li {
            margin-bottom: 4px;
            padding-left: 4px;
        }

        .preview-pane li::marker {
            color: var(--brand);
            font-family: var(--font-sans);
            font-size: .85em;
        }

        .preview-pane li > ul, .preview-pane li > ol {
            margin-top: 4px;
        }

        /* Nested ordered list styling: 1, a, i, 1... */
        .preview-pane ol {
            list-style-type: decimal;
        }

        .preview-pane ol ol {
            list-style-type: lower-alpha;
        }

        .preview-pane ol ol ol {
            list-style-type: lower-roman;
        }

        .preview-pane ol ol ol ol {
            list-style-type: decimal;
        }

        .preview-pane code {
            font-size: .8em;
        }

        .preview-pane pre {
            margin: 0 0 16px 0;
            background: var(--surface);
        }

        .preview-pane pre code {
            font-size: 12.5px;
        }

        .preview-pane blockquote {
            margin: 4px 0 14px 0;
            padding: 2px 0 2px 18px;
            border-left: 2px solid var(--brand);
            color: var(--muted-foreground);
            font-style: italic;
        }

        .preview-pane a {
            color: var(--brand);
            text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent);
        }

        .preview-pane a:hover {
            text-decoration-color: var(--brand);
        }

        .preview-pane strong {
            color: var(--foreground);
            font-weight: 700;
        }

        .preview-pane em {
            font-style: italic;
        }

        .preview-pane del {
            color: var(--subtle-foreground);
            text-decoration-color: var(--brand);
        }

        .mobile-toggle {
            display: none;
        }

        /* --------------------------------------------------- phones */
        @media (max-width: 768px) {
            /* An app on phones too: topbar, then one full-height pane that
               scrolls on its own. Write and Preview trade places. */
            body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
            body > .site-topbar { flex: none; }
            .page-edit .editor-container { flex: 1; min-height: 0; height: auto; }

            .notes-sidebar {
                position: fixed;
                left: 0;
                top: 65px;
                bottom: 0;
                width: min(320px, 86vw);
                z-index: 200;
                box-shadow: 0 0 0 100vmax transparent;
                transform: translateX(-102%);
                transition: transform var(--motion-settle) var(--ease-standard),
                            box-shadow var(--motion-settle) var(--ease-standard);
            }

            .notes-sidebar.mobile-open {
                transform: translateX(0);
                box-shadow: 0 0 0 100vmax hsl(var(--shadow-color) / .35);
            }

            .mobile-toggle {
                display: inline-flex;
                position: fixed;
                right: 16px;
                bottom: max(16px, env(safe-area-inset-bottom));
                z-index: 250;
                min-height: 44px;
                padding: 10px 18px 10px 15px;
                border-color: var(--foreground);
                border-radius: 999px;
                background: var(--foreground);
                color: var(--background);
                font-size: 14px;
                box-shadow: 0 12px 24px -12px hsl(var(--shadow-color) / .6);
            }

            .mobile-toggle:hover {
                border-color: var(--brand);
                background: var(--brand);
                color: var(--on-brand);
            }

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

            .editor-main { width: 100%; }
            .editor-header { flex-wrap: wrap; gap: 4px 6px; padding: 16px 20px 12px; }
            #noteTitle { flex-basis: 100%; font-size: 28px !important; }
            .save-stamp { margin-right: auto; }
            .pane-switch { display: block; padding: 10px 20px; border-bottom: 1px solid var(--border); }
            .pane-switch .segmented { display: flex; width: 100%; }
            .pane-switch .segmented > button { flex: 1; }
            .editor-content { flex-direction: column; }
            .editor-content[data-view="write"] .preview-side,
            .editor-content[data-view="preview"] .editor-pane:not(.preview-side) { display: none; }
            .editor-pane { border-right: none; }
            .preview-side .pane-label { display: none; }
            .pane-label { padding-inline: 20px; }
            /* Room at the bottom so the All notes button never covers text. */
            .editor-textarea { padding: 20px 20px 96px; font-size: 16px !important; }
            .preview-pane { padding: 22px 20px 96px; overflow-y: auto; }
            .preview-pane:empty::before { margin-top: 40px; }
        }