/* BozNotes: the bozcode brutalist look (Syne + JetBrains Mono, navy #1E3A5F, accent #3D7AB8). */

@font-face {
    font-family: 'Syne';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/syne-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
}

:root {
    --bn-navy: #1E3A5F;
    --bn-accent: #3D7AB8;
    --bn-ink: #111;
    --bn-paper: #f4f5f7;
    --bn-page: #c8cdd2;
    --bn-muted: #3a5470;
    --bn-error: #9b1c1c;
    --bn-font-display: 'Syne', 'Segoe UI', Arial, sans-serif;
    --bn-font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    min-height: 100vh;
    background: var(--bn-page);
    color: var(--bn-ink);
    font-family: var(--bn-font-mono);
    font-size: 15px;
    line-height: 1.6;
}

.bn-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bn-navy);
    border-bottom: 3px solid var(--bn-ink);
}

.bn-brand {
    font-family: var(--bn-font-display);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    color: #fff;
    text-decoration: none;
}

.bn-brand span { color: #9cc3e8; }

.bn-main {
    max-width: 44rem;
    margin: 2.5rem auto;
    padding: 0 1rem;
}

.bn-card {
    background: var(--bn-paper);
    border: 2px solid var(--bn-ink);
    box-shadow: 6px 6px 0 var(--bn-accent);
    padding: 1.75rem;
}

.bn-card h1 {
    font-family: var(--bn-font-display);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

.bn-card p + p { margin-top: 0.75rem; }

.bn-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bn-muted);
    margin-bottom: 0.4rem;
}

code {
    font-family: var(--bn-font-mono);
    background: #e3e7ec;
    padding: 0 0.3em;
}

.bn-login { max-width: 24rem; margin: 0 auto; }

.bn-login form { display: grid; gap: 0.4rem; }

.bn-login label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.5rem;
}

.bn-login input[type="text"],
.bn-login input[type="password"] {
    font: inherit;
    padding: 0.6rem 0.7rem;
    border: 2px solid var(--bn-ink);
    background: #fff;
    min-height: 44px;
}

.bn-login input:focus { outline: 3px solid var(--bn-accent); outline-offset: 1px; }

.bn-login .bn-btn { margin-top: 1rem; }

.bn-error {
    border: 2px solid var(--bn-error);
    color: var(--bn-error);
    background: #fdecec;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
}

.bn-btn {
    font: inherit;
    font-weight: 700;
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    background: var(--bn-accent);
    color: #fff;
    border: 2px solid var(--bn-ink);
    box-shadow: 3px 3px 0 var(--bn-ink);
    cursor: pointer;
}

.bn-btn:hover { background: var(--bn-navy); }

.bn-btn:active { transform: translate(3px, 3px); box-shadow: none; }

.bn-btn-ghost {
    background: transparent;
    border-color: #9cc3e8;
    box-shadow: none;
    color: #fff;
}

.bn-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* --- Phase 2: search, quick switcher, note view ----------------------------------- */

.bn-main { max-width: 52rem; }

kbd {
    font-family: var(--bn-font-mono);
    font-size: 0.72em;
    padding: 0.05em 0.4em;
    border: 1px solid currentColor;
    border-bottom-width: 2px;
    border-radius: 3px;
    white-space: nowrap;
}

.bn-bar-nav { display: flex; align-items: center; gap: 0.75rem; }
.bn-bar-link { color: #dbe8f5; text-decoration: none; font-size: 0.85rem; display: inline-flex; gap: 0.4rem; align-items: center; min-height: 44px; }
.bn-bar-link:hover { color: #fff; }
.bn-user { opacity: 0.75; font-weight: 400; }

.bn-searchbar { display: flex; gap: 0.6rem; align-items: stretch; }

.bn-search-input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 1.05rem;
    padding: 0.7rem 0.9rem;
    border: 2px solid var(--bn-ink);
    background: #fff;
    box-shadow: 4px 4px 0 var(--bn-accent);
    min-height: 48px;
}

.bn-search-input:focus { outline: 3px solid var(--bn-accent); outline-offset: 2px; }

.bn-btn-quiet {
    background: var(--bn-paper);
    color: var(--bn-ink);
    box-shadow: 3px 3px 0 var(--bn-ink);
}

.bn-btn-quiet:hover { background: #e3e7ec; }

.bn-popover {
    margin: auto; /* main CSS zeroes margins, which would pin the popover to a corner */
    max-width: min(40rem, calc(100vw - 2rem));
    padding: 1.25rem 1.5rem;
    border: 2px solid var(--bn-ink);
    box-shadow: 6px 6px 0 var(--bn-accent);
    background: var(--bn-paper);
    color: var(--bn-ink);
}

.bn-popover h2 { font-family: var(--bn-font-display); font-size: 1.25rem; margin-bottom: 0.75rem; }
.bn-popover p { font-size: 0.85rem; margin-top: 0.75rem; color: var(--bn-muted); }
.bn-syntax { border-collapse: collapse; font-size: 0.85rem; }
.bn-syntax td { padding: 0.3rem 0.75rem 0.3rem 0; vertical-align: top; border-bottom: 1px solid #d5dbe2; }
.bn-syntax td:first-child { white-space: nowrap; }

.bn-results { margin-top: 1.5rem; }

.bn-section {
    font-family: var(--bn-font-display);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.bn-count { font-size: 0.8rem; color: var(--bn-muted); margin: 0.75rem 0; }
.bn-degraded { color: var(--bn-error); }
.bn-empty { padding: 1rem; border: 2px dashed var(--bn-muted); }

.bn-facets:empty { display: none; }
.bn-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.5rem; }
.bn-chips-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bn-muted); margin-right: 0.25rem; }

.bn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    color: var(--bn-ink);
    background: var(--bn-paper);
    border: 2px solid var(--bn-ink);
    text-decoration: none;
}

.bn-chip:hover { background: #dce8f4; }
.bn-chip-on { background: var(--bn-navy); color: #fff; }
.bn-chip-on:hover { background: var(--bn-accent); }
.bn-chip-count { color: var(--bn-muted); }

.bn-hits { list-style: none; display: grid; gap: 0.9rem; }

.bn-hit {
    background: var(--bn-paper);
    border: 2px solid var(--bn-ink);
    box-shadow: 4px 4px 0 var(--bn-accent);
    padding: 0.9rem 1.1rem;
    overflow-wrap: anywhere;
}

.bn-hit-title {
    font-family: var(--bn-font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--bn-navy);
    text-decoration: none;
}

.bn-hit-title:hover { text-decoration: underline; }

.bn-hit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    font-size: 0.75rem;
    color: var(--bn-muted);
    margin-top: 0.2rem;
}

.bn-tag { color: var(--bn-accent); text-decoration: none; }
.bn-kind { border: 1px solid var(--bn-muted); padding: 0 0.35rem; }
.bn-snippet { font-size: 0.85rem; margin-top: 0.5rem; color: #2a3a4c; }

mark, .bn-first-match { background: #ffe58a; color: inherit; padding: 0 0.1em; }

.bn-more { list-style: none; text-align: center; }

.bn-switcher {
    margin: 12vh auto auto; /* main CSS zeroes margins; a <dialog> needs them to centre */
    width: min(38rem, calc(100vw - 2rem));
    padding: 0;
    border: 3px solid var(--bn-ink);
    box-shadow: 8px 8px 0 var(--bn-accent);
    background: var(--bn-paper);
    color: var(--bn-ink);
}

.bn-switcher::backdrop { background: rgba(14, 30, 50, 0.45); }

.bn-switcher-input {
    width: 100%;
    font: inherit;
    font-size: 1.05rem;
    padding: 0.85rem 1rem;
    border: 0;
    border-bottom: 2px solid var(--bn-ink);
    background: #fff;
    outline: none;
}

.bn-switcher-list { list-style: none; max-height: 50vh; overflow-y: auto; }

.bn-switcher-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    padding: 0.55rem 1rem;
    min-height: 44px;
    cursor: pointer;
    border-bottom: 1px solid #dde3ea;
}

.bn-switcher-item[aria-selected="true"] { background: var(--bn-navy); color: #fff; }
.bn-switcher-item[aria-selected="true"] .bn-switcher-detail { color: #b9d3ee; }
.bn-switcher-title { font-weight: 700; overflow-wrap: anywhere; }
.bn-switcher-detail { font-size: 0.75rem; color: var(--bn-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.bn-switcher-search .bn-switcher-title { font-weight: 400; font-style: italic; }
.bn-switcher-help { font-size: 0.7rem; color: var(--bn-muted); padding: 0.5rem 1rem; }

.bn-note-head { margin-bottom: 1rem; }
.bn-note-head h1 { font-family: var(--bn-font-display); font-weight: 800; font-size: 2rem; line-height: 1.15; overflow-wrap: anywhere; }

.bn-source {
    background: var(--bn-paper);
    border: 2px solid var(--bn-ink);
    box-shadow: 6px 6px 0 var(--bn-accent);
    padding: 1.25rem;
    font-family: var(--bn-font-mono);
    font-size: 0.88rem;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .bn-main { margin-top: 1.25rem; }
    /* One sideways-scrolling row per chip group, so the results stay near the top. */
    .bn-facets .bn-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; }
    .bn-chip { flex: 0 0 auto; }
    .bn-bar-link kbd, .bn-user { display: none; }
    .bn-card h1, .bn-note-head h1 { font-size: 1.6rem; }
}

/* --- Phase 3: three-pane layout, rendered notes, tree, dialogs ---------------------- */

.bn-bar-start { display: flex; align-items: center; gap: 0.75rem; }
.bn-bar-button { background: none; border: 0; font: inherit; cursor: pointer; padding: 0 0.25rem; }
.bn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.bn-pane-toggle {
    font: inherit;
    font-size: 1.1rem;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    color: inherit;
    border: 2px solid currentColor;
    cursor: pointer;
}

.bn-bar .bn-pane-toggle { color: #dbe8f5; border-color: #9cc3e8; }

.bn-layout {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem 1rem 3rem;
    max-width: 96rem;
    margin: 0 auto;
    align-items: start;
}

.bn-layout-three { grid-template-columns: 15rem minmax(0, 1fr) 17rem; }
.bn-layout-two { grid-template-columns: 15rem minmax(0, 1fr); }
.bn-layout-three.bn-left-off { grid-template-columns: minmax(0, 1fr) 17rem; }
.bn-layout-three.bn-right-off { grid-template-columns: 15rem minmax(0, 1fr); }
.bn-layout-three.bn-left-off.bn-right-off, .bn-layout-two.bn-left-off { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 901px) {
    .bn-left-off .bn-left, .bn-right-off .bn-right { display: none; }
}

.bn-center { min-width: 0; max-width: 50rem; width: 100%; justify-self: center; }

.bn-pane {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--bn-paper);
    border: 2px solid var(--bn-ink);
    padding: 0.75rem;
    font-size: 0.82rem;
}

.bn-pane-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bn-muted);
    margin-bottom: 0.5rem;
}

.bn-icon-btn {
    font: inherit;
    font-size: 1rem;
    min-width: 32px;
    min-height: 32px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--bn-ink);
}

.bn-icon-btn:hover { border-color: var(--bn-ink); }

.bn-tree-list { list-style: none; padding-left: 0; }
.bn-tree-list .bn-tree-list { padding-left: 0.9rem; border-left: 1px dotted #b9c3cd; margin-left: 0.35rem; }
.bn-tree-folder summary, .bn-tree-note, .bn-tree-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    min-height: 30px;
}
.bn-tree-folder summary { cursor: pointer; list-style: none; font-weight: 700; }
.bn-tree-folder summary::-webkit-details-marker { display: none; }
.bn-tree-folder summary::before { content: "▸"; width: 1em; flex: none; color: var(--bn-muted); }
.bn-tree-folder details[open] > summary::before { content: "▾"; }
.bn-tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-tree-note a, .bn-tree-file a {
    flex: 1;
    color: var(--bn-ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.15rem 0.25rem;
}
.bn-tree-file a { color: var(--bn-muted); }
.bn-tree-note a:hover, .bn-tree-file a:hover { background: #dce8f4; }
.bn-current > a { background: var(--bn-navy); color: #fff; }
.bn-tree-menu {
    font: inherit;
    min-width: 28px;
    min-height: 28px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--bn-muted);
    opacity: 0;
}
.bn-tree-folder summary:hover .bn-tree-menu, .bn-tree-note:hover .bn-tree-menu,
.bn-tree-menu:focus-visible, .bn-current .bn-tree-menu { opacity: 1; }
.bn-current .bn-tree-menu { color: #fff; }
.bn-tree-empty, .bn-tree-lazy { color: var(--bn-muted); font-style: italic; padding-left: 1.2rem; }

.bn-note {
    background: var(--bn-paper);
    border: 2px solid var(--bn-ink);
    box-shadow: 6px 6px 0 var(--bn-accent);
    padding: 1.25rem 1.75rem 2rem;
}

.bn-note-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
    border-bottom: 2px solid var(--bn-ink);
    padding-bottom: 0.6rem;
    margin-bottom: 1.25rem;
}

.bn-crumbs { font-size: 0.75rem; color: var(--bn-muted); overflow-wrap: anywhere; }
.bn-note-tools { display: flex; align-items: center; gap: 0.5rem; }
.bn-note-tools .bn-btn { min-height: 36px; padding: 0.3rem 0.8rem; }
.bn-save-status { font-size: 0.75rem; color: var(--bn-muted); min-width: 6rem; text-align: right; }
.bn-save-status.bn-bad { color: var(--bn-error); font-weight: 700; }
.bn-inline-title { font-family: var(--bn-font-display); font-weight: 800; font-size: 2rem; line-height: 1.15; margin-bottom: 1rem; }

.bn-conflict {
    border: 2px solid var(--bn-error);
    background: #fdecec;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}
.bn-conflict p + p, .bn-conflict .bn-dialog-buttons { margin-top: 0.6rem; }
.bn-conflict pre { max-height: 14rem; overflow: auto; background: #fff; border: 1px solid #e3b4b4; padding: 0.5rem; margin-top: 0.5rem; white-space: pre-wrap; }

/* Rendered Markdown */
.bn-rendered { font-family: var(--bn-font-mono); font-size: 0.95rem; line-height: 1.7; overflow-wrap: anywhere; }
.bn-rendered > * + * { margin-top: 0.85rem; }
.bn-rendered h1, .bn-rendered h2, .bn-rendered h3, .bn-rendered h4, .bn-rendered h5, .bn-rendered h6 {
    font-family: var(--bn-font-display);
    line-height: 1.2;
    margin-top: 1.6rem;
    scroll-margin-top: 1rem;
}
.bn-rendered h1 { font-size: 2rem; font-weight: 800; margin-top: 0; }
.bn-rendered h2 { font-size: 1.5rem; }
.bn-rendered h3 { font-size: 1.2rem; }
.bn-rendered h4, .bn-rendered h5, .bn-rendered h6 { font-size: 1rem; }
.bn-rendered ul, .bn-rendered ol { padding-left: 1.5rem; }
.bn-rendered li + li { margin-top: 0.2rem; }
.bn-rendered li > ul, .bn-rendered li > ol { margin-top: 0.2rem; }
.bn-rendered .contains-task-list { list-style: none; padding-left: 0.4rem; }
.bn-rendered .task-list-item-checkbox { width: 1.05rem; height: 1.05rem; margin-right: 0.45rem; vertical-align: -0.15rem; accent-color: var(--bn-accent); cursor: pointer; }
.bn-rendered .task-list-item-checkbox:disabled { cursor: default; }
.bn-rendered blockquote { border-left: 4px solid var(--bn-accent); padding: 0.25rem 0 0.25rem 1rem; color: #33475b; }
.bn-rendered code { font-size: 0.9em; }
.bn-rendered pre { background: #fbfbfa; border: 2px solid var(--bn-ink); padding: 0.85rem 1rem; overflow-x: auto; line-height: 1.5; }
.bn-rendered pre code { background: none; padding: 0; }
.bn-rendered table { border-collapse: collapse; display: block; overflow-x: auto; }
.bn-rendered th, .bn-rendered td { border: 1px solid #9aa7b4; padding: 0.3rem 0.6rem; }
.bn-rendered th { background: #e3e7ec; }
.bn-align-right { text-align: right; }
.bn-align-center { text-align: center; }
.bn-rendered hr { border: 0; border-top: 2px solid var(--bn-ink); }
.bn-rendered img { max-width: 100%; height: auto; border: 2px solid var(--bn-ink); }
.bn-rendered a { color: var(--bn-accent); }
.bn-rendered a.bn-wikilink { color: var(--bn-navy); font-weight: 700; text-decoration-thickness: 2px; }
.bn-rendered a.bn-unresolved, .bn-rendered .bn-unresolved { color: #8a5a00; text-decoration-style: dashed; font-weight: 400; }
.bn-rendered a.bn-external::after { content: "↗"; font-size: 0.75em; margin-left: 0.1em; }
.bn-rendered .bn-tag { text-decoration: none; background: #e3ecf5; padding: 0 0.3em; }
.bn-embed { border: 2px solid var(--bn-ink); border-left-width: 6px; padding: 0.6rem 0.9rem; background: #fbfbfa; }
.bn-embed > * + * { margin-top: 0.6rem; }
.bn-embed-head { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.bn-embed-media { max-width: 100%; }
.bn-rendered .footnotes { font-size: 0.85rem; color: #33475b; }

/* Right pane */
.bn-panel + .bn-panel { margin-top: 1.25rem; border-top: 2px solid var(--bn-ink); padding-top: 0.75rem; }
.bn-panel-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bn-muted); margin-bottom: 0.5rem; }
.bn-count-badge { background: var(--bn-navy); color: #fff; padding: 0 0.4em; margin-left: 0.25rem; }
.bn-panel-empty, .bn-panel-meta { color: var(--bn-muted); font-style: italic; }
.bn-panel-meta { margin-top: 0.5rem; font-style: normal; }
.bn-outline { list-style: none; }
.bn-outline a { color: var(--bn-ink); text-decoration: none; display: block; padding: 0.1rem 0; }
.bn-outline a:hover { color: var(--bn-accent); }
.bn-outline-2 { padding-left: 0.75rem; }
.bn-outline-3 { padding-left: 1.5rem; }
.bn-outline-4, .bn-outline-5, .bn-outline-6 { padding-left: 2.25rem; }
.bn-backlinks { list-style: none; display: grid; gap: 0.6rem; }
.bn-backlink-title { font-weight: 700; color: var(--bn-navy); text-decoration: none; }
.bn-backlink-context { color: #33475b; font-size: 0.78rem; margin-top: 0.15rem; overflow-wrap: anywhere; }

/* Action dialog */
.bn-dialog {
    margin: 15vh auto auto; /* main CSS zeroes margins; a <dialog> needs them */
    width: min(30rem, calc(100vw - 2rem));
    border: 3px solid var(--bn-ink);
    box-shadow: 8px 8px 0 var(--bn-accent);
    background: var(--bn-paper);
    color: var(--bn-ink);
    padding: 1.25rem 1.5rem;
}
.bn-dialog::backdrop { background: rgba(14, 30, 50, 0.45); }
.bn-dialog-title { font-family: var(--bn-font-display); font-size: 1.3rem; margin-bottom: 0.75rem; overflow-wrap: anywhere; }
.bn-dialog-body { display: grid; gap: 0.4rem; }
.bn-dialog-body label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.bn-dialog-body input, .bn-dialog-body select {
    font: inherit;
    padding: 0.5rem 0.6rem;
    border: 2px solid var(--bn-ink);
    background: #fff;
    min-height: 44px;
    width: 100%;
}
.bn-dialog-body .bn-choice { display: grid; gap: 0.5rem; }
.bn-dialog-body .bn-choice .bn-btn { text-align: left; }
.bn-dialog-message { font-size: 0.85rem; margin-top: 0.6rem; min-height: 1.2em; }
.bn-dialog-message.bn-bad { color: var(--bn-error); }
.bn-dialog-buttons { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; }
.bn-btn-danger { background: var(--bn-error); }
.bn-btn-danger:hover { background: #6e1414; }

/* Editor host: CodeMirror's own look is set in the editor bundle. */
.bn-editor-host { border: 2px solid var(--bn-ink); background: #fff; min-height: 60vh; }

/* Narrow screens: one column; the side panes slide out over it as drawers (boznotes.js opens
   and closes them, with a backdrop that takes the taps outside). */
@media (max-width: 900px) {
    .bn-layout, .bn-layout-three, .bn-layout-two { grid-template-columns: minmax(0, 1fr); padding: 1rem 0.75rem 3rem; }
    .bn-left, .bn-right {
        position: fixed;
        z-index: 60;
        top: 0;
        bottom: 0;
        width: min(20rem, 85vw);
        max-height: none;
        padding-top: max(0.75rem, env(safe-area-inset-top));
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
        overscroll-behavior: contain;
        visibility: hidden;
        transition: transform 0.22s ease, visibility 0s linear 0.22s;
    }
    .bn-left { left: 0; border-width: 0 2px 0 0; padding-left: max(0.75rem, env(safe-area-inset-left)); transform: translateX(-104%); }
    .bn-right { right: 0; border-width: 0 0 0 2px; padding-right: max(0.75rem, env(safe-area-inset-right)); transform: translateX(104%); }
    .bn-left-on .bn-left, .bn-right-on .bn-right { visibility: visible; transform: none; transition: transform 0.22s ease; }
    .bn-pane:focus { outline: none; }
    .bn-note { padding: 1rem; }
    .bn-tree-menu { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .bn-left, .bn-right, .bn-left-on .bn-left, .bn-right-on .bn-right { transition: none; }
}

.bn-editor-host { min-height: 0; }
.bn-editor-host .cm-editor { min-height: 60vh; }
.bn-editor-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-bottom: 2px solid var(--bn-ink);
    background: var(--bn-paper);
    font-size: 0.78rem;
}
.bn-editor-bar label { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 32px; cursor: pointer; font-weight: 700; }
.bn-editor-bar input { width: 1rem; height: 1rem; accent-color: var(--bn-accent); }
.bn-editor-hint { color: var(--bn-muted); }
.bn-pane-actions { display: flex; gap: 0.25rem; }
.bn-text-btn {
    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: none;
    min-height: 28px;
    padding: 0 0.45rem;
    background: transparent;
    border: 1px solid var(--bn-ink);
    color: var(--bn-ink);
    cursor: pointer;
}
.bn-text-btn:hover { background: #dce8f4; }


/* --- Phase 4: backlinks, mentions, graph, tags, maintenance --------------------------- */

.bn-panel-link { float: right; text-transform: none; letter-spacing: 0; font-size: 0.75rem; color: var(--bn-accent); }
.bn-panel-subtitle { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bn-muted); margin: 1rem 0 0.4rem; }
.bn-backlink-count { color: var(--bn-muted); font-size: 0.75rem; }
.bn-backlink-context a.bn-self { background: #ffe58a; color: var(--bn-ink); padding: 0 0.15em; }
.bn-mention { display: flex; gap: 0.5rem; align-items: flex-start; justify-content: space-between; margin-top: 0.25rem; }
.bn-mention .bn-backlink-context { margin-top: 0; flex: 1; }
.bn-mention .bn-text-btn { flex: none; }
.bn-mention-error { color: var(--bn-error); font-size: 0.75rem; }
.bn-pane-nav { display: flex; flex-wrap: wrap; gap: 0 0.75rem; border-top: 2px solid var(--bn-ink); margin-top: 0.75rem; padding-top: 0.6rem; }
.bn-pane-nav a { color: var(--bn-navy); font-weight: 700; text-decoration: none; }
.bn-pane-nav a:hover { color: var(--bn-accent); }

.bn-center.bn-wide { max-width: none; }
.bn-graph-controls { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: flex-end; font-size: 0.8rem; margin-bottom: 0.75rem; }
.bn-graph-controls label { display: grid; gap: 0.2rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.bn-graph-controls input, .bn-graph-controls select { font: inherit; font-size: 0.85rem; text-transform: none; letter-spacing: 0; padding: 0.35rem 0.45rem; border: 2px solid var(--bn-ink); background: #fff; min-height: 38px; }
.bn-graph-controls .bn-check { display: flex; align-items: center; gap: 0.4rem; min-height: 38px; }
.bn-graph-controls .bn-check input { min-height: 0; width: 1rem; height: 1rem; }
.bn-graph { position: relative; height: min(72vh, 52rem); background: #fbfbfa; border: 2px solid var(--bn-ink); box-shadow: 6px 6px 0 var(--bn-accent); }
.bn-graph-status, .bn-graph-note, .bn-graph-help { font-size: 0.8rem; color: var(--bn-muted); margin: 0.4rem 0; }
.bn-graph-note { color: var(--bn-ink); border-left: 4px solid var(--bn-accent); padding-left: 0.6rem; }

.bn-lede { color: #33475b; margin-bottom: 1rem; }
.bn-tag-tree { list-style: none; padding-left: 0; }
.bn-tag-tree .bn-tag-tree { padding-left: 1.2rem; border-left: 1px dotted #b9c3cd; margin-left: 0.4rem; }
.bn-tag-tree li { margin: 0.2rem 0; }
.bn-tag-tree summary { cursor: pointer; }
.bn-tag-count { color: var(--bn-muted); font-size: 0.8rem; }
.bn-maintenance h2 { font-family: var(--bn-font-display); font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.bn-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.bn-table th, .bn-table td { border: 1px solid #9aa7b4; padding: 0.35rem 0.5rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.bn-table th { background: #e3e7ec; }
.bn-num { text-align: right; width: 4rem; }
.bn-plain-list { list-style: none; display: grid; gap: 0.25rem; font-size: 0.88rem; }
.bn-more-list { margin-top: 1rem; }
.bn-more-list summary { cursor: pointer; font-weight: 700; }
.bn-maintenance .bn-unresolved { color: #8a5a00; text-decoration-style: dashed; }

/* --- Phase 6: offline reading, phones -------------------------------------------------------- */

.bn-saved h1 { font-family: var(--bn-font-display); font-weight: 800; font-size: 2rem; line-height: 1.15; margin-bottom: 0.75rem; }
.bn-saved .bn-search-input { width: 100%; margin-bottom: 1.25rem; }
.bn-saved-list:empty { display: none; }

/* Offline: a banner, and the controls that need the server turned off (boznotes.js). */
.bn-offline-banner {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding: 0.5rem max(1rem, env(safe-area-inset-right)) 0.5rem max(1rem, env(safe-area-inset-left));
    background: #ffe58a;
    color: var(--bn-ink);
    border-bottom: 3px solid var(--bn-ink);
    font-size: 0.85rem;
    font-weight: 700;
}
.bn-offline-banner[hidden] { display: none; }
.bn-offline-banner .bn-btn { padding: 0.3rem 0.9rem; }
.bn-read-only [data-offline-off] { opacity: 0.45; cursor: not-allowed; }

/* Drawers: the backdrop, a close button, and no page scrolling behind them. */
.bn-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(14, 30, 50, 0.45); touch-action: none; }
.bn-backdrop[hidden] { display: none; }
html.bn-drawer-open { overflow: hidden; }
.bn-drawer-close { display: none; }
.bn-right-head { display: none; }
@media (max-width: 900px) {
    .bn-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        font: inherit;
        font-size: 1.3rem;
        background: transparent;
        border: 2px solid var(--bn-ink);
        color: var(--bn-ink);
        cursor: pointer;
    }
    .bn-right-head { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
}

/* The header and safe areas (an iPhone app runs under the status bar: black-translucent). */
.bn-bar {
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}
.bn-brand { display: inline-flex; align-items: center; min-height: 44px; }

/* Phones: Search, New note and Today move to a bar at the bottom, in thumb reach. */
.bn-bottom-bar { display: none; }
@media (max-width: 640px) {
    .bn-bar-nav .bn-bar-link { display: none; }
    .bn-bar-nav .bn-btn { padding: 0.35rem 0.7rem; }
    .bn-has-bottom-bar { padding-bottom: calc(59px + env(safe-area-inset-bottom)); }
    .bn-bottom-bar {
        position: fixed;
        z-index: 45;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        background: var(--bn-navy);
        border-top: 3px solid var(--bn-ink);
    }
    .bn-bottom-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-height: 56px;
        font: inherit;
        font-size: 0.72rem;
        font-weight: 700;
        color: #dbe8f5;
        background: none;
        border: 0;
        text-decoration: none;
        cursor: pointer;
    }
    .bn-bottom-item svg { width: 22px; height: 22px; }
    .bn-bottom-item:active { background: rgba(255, 255, 255, 0.12); }
    .bn-bottom-item:disabled { opacity: 0.45; cursor: not-allowed; }
}

/* Touch: every control at least 44 px each way. Links inside sentences (note text, backlink
   lines, snippets) are left as text, as WCAG 2.5.8 allows. */
@media (max-width: 900px), (pointer: coarse) {
    .bn-note-tools .bn-btn { min-height: 44px; min-width: 44px; }
    .bn-tree-folder summary, .bn-tree-note, .bn-tree-file { min-height: 44px; }
    .bn-tree-note a, .bn-tree-file a { display: flex; align-items: center; min-height: 44px; }
    .bn-tree-menu { min-width: 44px; min-height: 44px; opacity: 1; }
    .bn-text-btn { min-height: 44px; padding: 0 0.7rem; }
    .bn-outline a { display: flex; align-items: center; min-height: 44px; }
    .bn-hit-title, .bn-backlink-title, .bn-panel-link, .bn-panel-tags .bn-tag, .bn-tag-tree .bn-tag, .bn-table a, .bn-plain-list a, .bn-pane-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 44px;
    }
    .bn-chip { min-height: 44px; min-width: 44px; }
    .bn-editor-bar label { min-height: 44px; }
    .bn-graph-controls input, .bn-graph-controls select, .bn-graph-controls .bn-check { min-height: 44px; }

    /* Task checkboxes: a 22 px box in the middle of a 44 px target, each task its own 44 px row. */
    .bn-rendered .contains-task-list { padding-left: 0; }
    .bn-rendered .task-list-item { position: relative; padding: 9px 0 9px 46px; }
    .bn-rendered .task-list-item + .task-list-item { margin-top: 0; }
    .bn-rendered .contains-task-list .contains-task-list { margin-top: 9px; }
    .bn-rendered .task-list-item-checkbox {
        position: absolute;
        left: 0;
        top: 0;
        width: 44px;
        height: 44px;
        margin: 0;
        -webkit-appearance: none;
        appearance: none;
        background-color: #fff;
        box-shadow: inset 0 0 0 11px var(--bn-paper), inset 0 0 0 13px var(--bn-ink);
    }
    .bn-rendered .task-list-item-checkbox:checked {
        background: var(--bn-navy) url('../icons/tick.svg') center / 14px no-repeat;
    }
    .bn-rendered .task-list-item-checkbox:focus-visible { outline: 3px solid var(--bn-accent); outline-offset: -9px; }
    .bn-rendered .task-list-item-checkbox:disabled { opacity: 0.5; }
}

/* Typing on a phone. 16 px text, or iOS zooms in on every field; while the keyboard is up
   (boznotes.js sets bn-keyboard) the bottom bar hides, and the note's header (Done and the save
   status) stays at the top of what is visible (--bn-viewport-top: iOS shifts the view). */
@media (max-width: 900px), (pointer: coarse) {
    input, select, textarea, .bn-dialog-body input, .bn-dialog-body select, .bn-switcher-input { font-size: 16px; }
    .bn-editor-host .cm-editor { font-size: 16px; }
    .bn-editing .bn-note-head {
        position: sticky;
        top: var(--bn-viewport-top, 0px);
        z-index: 5;
        background: var(--bn-paper);
        padding-top: 0.5rem;
    }
}
@media (max-width: 640px) {
    .bn-keyboard .bn-bottom-bar { display: none; }
    .bn-keyboard.bn-has-bottom-bar { padding-bottom: 0; }
    .bn-editing .bn-crumbs, .bn-editor-hint { display: none; }
}

.bn-backlink-context a { color: var(--bn-navy); }