/* OBSCURA OS: Notes.
 *
 * The layout of a desktop notebook app, in a browser tab: a ribbon of
 * actions down the left edge, the file tree beside it, tabs and panes in
 * the middle, the note's backlinks, links, tags and outline on the right,
 * and a status bar along the foot. Everything is built from the site's own
 * colour tokens, so it follows the colourway and the light or dark mode
 * like every other page rather than inventing its own.
 */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--text-sm);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ the app
   Notes opens as an application of its own and fills the window. The
   site's bar, footer and the reading underneath the tool stand aside while
   it is open; Help has the way back. */
body.noteline-app { overflow: hidden; }
body.noteline-app .os-topbar,
body.noteline-app .os-footer,
body.noteline-app .os-toolnav,
body.noteline-app .nl-below { display: none !important; }
/* On a desk the privacy badge sits small in the status bar's left-hand
   end; on a touch screen it keeps the size a finger needs. */
@media (pointer: fine) {
  body.noteline-app #ppBadge { left: 6px; bottom: 2px; min-height: 20px; padding: 1px 8px; font-size: calc(11px * var(--text-scale, 1)); box-shadow: none; }
}

@keyframes nl-arrive { from { opacity: 0; } }

.nl-window {
  --nl-left: 260px;
  --nl-right: 300px;
  --nl-bar: 38px;
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: 44px var(--nl-left) minmax(0, 1fr) var(--nl-right);
  grid-template-rows: minmax(0, 1fr) 26px;
  grid-template-areas: "ribbon left main right" "status status status status";
  background: var(--paper);
  font-size: var(--text-xs);
  animation: nl-arrive .2s ease-out both;
}
.nl-window.no-left { grid-template-columns: 44px 0 minmax(0, 1fr) var(--nl-right); }
.nl-window.no-right { grid-template-columns: 44px var(--nl-left) minmax(0, 1fr) 0; }
.nl-window.no-left.no-right { grid-template-columns: 44px 0 minmax(0, 1fr) 0; }
.nl-window.no-left .nl-left, .nl-window.no-right .nl-right { display: none; }
/* Each region is pinned to its own area. A panel hidden with display:none
   leaves the grid altogether, and automatic placement would then move
   everything after it up one column. */
.nl-ribbon { grid-area: ribbon; }
.nl-left { grid-area: left; }
.nl-main { grid-area: main; }
.nl-right { grid-area: right; }
.nl-status { grid-area: status; }
.nl-mobilebar { display: none; }

.nl-grow { flex: 1 1 auto; }
.nl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* An icon button: the ribbon's, the panels', the headers'. */
.nl-ic, .nl-rb, .nl-side-tab {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: var(--ink-faint); cursor: pointer;
}
.nl-ic svg, .nl-rb svg, .nl-side-tab svg { width: 16px; height: 16px; }
.nl-ic:hover, .nl-rb:hover, .nl-side-tab:hover { background: var(--paper-inset); color: var(--ink); }
.nl-ic.on, .nl-side-tab.on { color: var(--accent-strong); }
.nl-side-tab.on { background: var(--paper-inset); }
.nl-ic:disabled { opacity: .35; cursor: default; background: transparent; }
.nl-ic:focus-visible, .nl-rb:focus-visible, .nl-side-tab:focus-visible, .nl-row:focus-visible, .nl-tab:focus-visible,
.nl-btn:focus-visible, .nl-match:focus-visible, .nl-out-item:focus-visible, .nl-tag:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------------------------------------------------------- the ribbon */
.nl-ribbon {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 5px 0; background: var(--paper); border-right: 1px solid var(--rule);
}
.nl-rb { width: 32px; height: 32px; }
.nl-rb svg { width: 18px; height: 18px; }
#nlToggleLeft { margin-bottom: 8px; }

/* -------------------------------------------------------- the sidebars */
.nl-left, .nl-right {
  position: relative; display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden; background: var(--paper);
}
.nl-left { border-right: 1px solid var(--rule); }
.nl-right { border-left: 1px solid var(--rule); }
.nl-side-tabs {
  display: flex; align-items: center; gap: 2px; flex: none;
  height: var(--nl-bar); padding: 0 8px; border-bottom: 1px solid var(--rule);
}
.nl-lhead { display: flex; align-items: center; gap: 4px; flex: none; min-height: 34px; padding: 3px 6px 3px 12px; }
.nl-ltitle { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-tools { display: flex; align-items: center; gap: 1px; }
.nl-rhead { justify-content: center; padding: 3px 6px; flex: none; }
.nl-rhead:empty { display: none; }
.nl-lbody, .nl-rbody { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 2px 0 18px; }
.nl-vault {
  display: flex; align-items: center; gap: 2px; flex: none;
  padding: 5px 6px; border-top: 1px solid var(--rule);
}
.nl-vault-name {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border: 0; border-radius: 5px; background: transparent; cursor: pointer;
  color: var(--ink); font: 600 var(--text-xs) var(--font-sans, inherit); text-align: left;
}
.nl-vault-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-vault-name svg { flex: none; color: var(--ink-faint); }
.nl-vault-name:hover { background: var(--paper-inset); }
.nl-resize { position: absolute; top: 0; bottom: 0; width: 5px; cursor: col-resize; z-index: 3; }
.nl-left .nl-resize { right: -3px; }
.nl-right .nl-resize { left: -3px; }
.nl-resize:hover, .nl-resize:focus-visible { background: var(--accent-soft); outline: none; }

/* the tree */
.nl-row {
  display: flex; align-items: center; gap: 5px; min-height: 26px;
  padding: 2px 10px 2px 8px; margin: 0 6px; border-radius: 5px;
  cursor: pointer; -webkit-user-select: none; user-select: none; color: var(--ink-soft); white-space: nowrap;
}
.nl-row:hover { background: var(--paper-inset); color: var(--ink); }
.nl-row.on { background: var(--paper-inset); color: var(--ink); font-weight: 600; }
.nl-row.drop { background: var(--accent-soft); outline: 1px dashed var(--accent-strong); outline-offset: -1px; }
.nl-row svg { width: 14px; height: 14px; flex: none; opacity: .75; }
.nl-row .nl-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nl-row.folder { color: var(--ink); }
.nl-chev { display: inline-grid; place-items: center; width: 14px; flex: none; transition: transform .12s ease; opacity: .6; }
.nl-chev svg { width: 13px; height: 13px; }
.nl-row.folder.closed .nl-chev { transform: rotate(-90deg); }
.nl-rename {
  flex: 1 1 auto; min-width: 0; padding: 1px 5px; border: 1px solid var(--accent); border-radius: 4px;
  background: var(--paper-raised); color: var(--ink); font: inherit;
}
.nl-empty { padding: 14px; margin: 0; color: var(--ink-faint); font-size: calc(12.5px * var(--text-scale, 1)); line-height: 1.55; }
.nl-unresolved { opacity: .7; font-style: italic; }

/* panes of results: search, backlinks, links */
.nl-search-box { padding: 4px 10px 6px; }
.nl-search-row { display: flex; align-items: center; gap: 4px; }
.nl-search-tools { display: flex; gap: 2px; justify-content: center; margin-top: 4px; }
.nl-input {
  width: 100%; min-width: 0; padding: 5px 9px; font: var(--text-xs) var(--font-sans, inherit);
  color: var(--ink); background: var(--paper-raised);
  border: 1px solid var(--rule-strong); border-radius: 5px;
}
.nl-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.nl-pane-filter { margin: 4px 10px 8px; width: calc(100% - 20px); }
.nl-hint { font-size: var(--text-2xs); color: var(--ink-faint); margin: 6px 2px 0; line-height: 1.5; }
.nl-section {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 8px 12px 4px; border: 0; background: none; text-align: left;
  font: 600 var(--text-2xs) var(--font-sans, inherit); color: var(--ink-faint);
}
button.nl-section { cursor: pointer; }
button.nl-section:hover { color: var(--ink); }
.nl-section svg { transition: transform .12s ease; }
.nl-section.closed svg { transform: rotate(-90deg); }
.nl-count { margin-left: auto; font: calc(11px * var(--text-scale, 1)) var(--font-mono, monospace); color: var(--ink-faint); }
.nl-result { margin: 0 6px 4px; }
.nl-result-head { display: flex; align-items: center; gap: 4px; padding: 3px 6px 3px 2px; border-radius: 5px; cursor: pointer; color: var(--ink); font-weight: 600; }
.nl-result-head:hover { background: var(--paper-inset); }
.nl-result-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-result-fold { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; background: none; color: var(--ink-faint); cursor: pointer; }
.nl-result-fold svg { transition: transform .12s ease; }
.nl-result.closed .nl-result-fold svg { transform: rotate(-90deg); }
.nl-result.closed .nl-result-lines { display: none; }
.nl-match {
  position: relative; margin: 2px 0 2px 20px; padding: 5px 8px; border-radius: 5px;
  background: var(--paper-raised); border: 1px solid var(--rule);
  font-size: calc(12.5px * var(--text-scale, 1)); line-height: 1.5; color: var(--ink-soft); cursor: pointer; word-break: break-word;
}
.nl-match:hover { border-color: var(--rule-strong); }
.nl-match mark { background: var(--warn-soft); color: var(--ink); border-radius: 2px; padding: 0 1px; }
.nl-ctx { color: var(--ink-faint); }
.nl-link-btn {
  display: block; margin: 5px 0 0 auto; padding: 2px 10px; border: 1px solid var(--rule-strong); border-radius: 4px;
  background: var(--paper); color: var(--ink); font: var(--text-2xs) var(--font-sans, inherit); cursor: pointer;
}
.nl-link-btn:hover { border-color: var(--accent); color: var(--accent-strong); }

/* tags and the outline */
.nl-tag {
  display: flex; align-items: center; gap: 6px; min-height: 26px; margin: 0 6px; padding: 2px 10px 2px 12px;
  border-radius: 5px; cursor: pointer; color: var(--ink-soft);
}
.nl-tag:hover { background: var(--paper-inset); color: var(--ink); }
.nl-tag b { flex: 1 1 auto; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-tag span { font: calc(11px * var(--text-scale, 1)) var(--font-mono, monospace); color: var(--ink-faint); }
.nl-tag-fold { display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; background: none; color: var(--ink-faint); cursor: pointer; }
.nl-tag-fold svg { transition: transform .12s ease; }
.nl-tag-fold.closed svg { transform: rotate(-90deg); }
.nl-fold-gap { display: inline-block; width: 16px; flex: none; }
.nl-out-item {
  display: flex; align-items: center; gap: 4px; min-height: 26px; margin: 0 6px; padding-right: 10px; border-radius: 5px;
  cursor: pointer; color: var(--ink-soft); overflow: hidden; white-space: nowrap;
}
.nl-out-item span:last-child { overflow: hidden; text-overflow: ellipsis; }
.nl-out-item:hover { background: var(--paper-inset); color: var(--ink); }

/* ------------------------------------------------------------ the panes */
.nl-main { display: flex; min-width: 0; min-height: 0; background: var(--paper); }
.nl-panes { flex: 1 1 auto; display: flex; min-width: 0; min-height: 0; }
.nl-panes > * { flex: 1 1 0; }
.nl-split { display: flex; min-width: 0; min-height: 0; }
.nl-split.is-row { flex-direction: row; }
.nl-split.is-column { flex-direction: column; }
.nl-divider { flex: none; background: var(--rule); position: relative; z-index: 2; }
.is-row > .nl-divider { width: 1px; cursor: col-resize; }
.is-column > .nl-divider { height: 1px; cursor: row-resize; }
.nl-divider::after { content: ""; position: absolute; inset: -3px; }
.nl-divider:hover, .nl-divider:focus-visible { background: var(--accent); outline: none; }
.nl-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--paper-raised); }

.nl-tabbar {
  display: flex; align-items: flex-end; gap: 2px; flex: none;
  height: var(--nl-bar); padding: 0 6px 0 4px; background: var(--paper); border-bottom: 1px solid var(--rule);
}
.nl-tabbar > .nl-ic { align-self: center; }
.nl-tabs { display: flex; align-items: flex-end; gap: 1px; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; height: 100%; }
.nl-tabs::-webkit-scrollbar { display: none; }
.nl-tab {
  position: relative; display: flex; align-items: center; gap: 6px; flex: 0 1 200px; min-width: 70px;
  height: 30px; padding: 0 5px 0 12px; border-radius: 7px 7px 0 0;
  color: var(--ink-faint); cursor: pointer; white-space: nowrap; -webkit-user-select: none; user-select: none;
}
.nl-tab:hover { background: var(--paper-inset); color: var(--ink); }
.nl-tab.on { background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule); clip-path: inset(-1px -1px 0 -1px); }
.nl-pane.focused .nl-tab.on .nl-tname { font-weight: 600; }
.nl-tab .nl-tname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nl-tab .nl-x {
  display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; opacity: 0;
}
.nl-tab:hover .nl-x, .nl-tab.on .nl-x { opacity: .7; }
.nl-tab .nl-x:hover { background: var(--rule); opacity: 1; }

.nl-viewhead {
  display: flex; align-items: center; gap: 2px; flex: none;
  height: var(--nl-bar); padding: 0 8px; background: var(--paper-raised);
}
.nl-crumbs {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 8px; color: var(--ink-faint); overflow: hidden; white-space: nowrap;
}
.nl-crumb { padding: 2px 4px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; cursor: pointer; }
.nl-crumb:hover { background: var(--paper-inset); color: var(--ink); }
.nl-crumb-sep { opacity: .6; }
.nl-crumb-title { padding: 2px 4px; border-radius: 4px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; cursor: text; }
.nl-crumb-title:hover { background: var(--paper-inset); }
.nl-crumbs .nl-rename { flex: 0 1 280px; }

.nl-sheet { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; background: var(--paper-raised); }
.nl-doc { padding: 24px 40px 40vh; }
.nl-doc.readable { max-width: 760px; margin: 0 auto; }
.nl-title {
  display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; background: transparent;
  color: var(--ink); font: 700 calc(var(--nl-font, 16px) * 1.9)/1.2 var(--font-sans, inherit);
}
.nl-title:focus { outline: none; }
.nl-title[hidden] { display: none; }
/* theme.css sets every field on a touch screen to 16px, !important, so a
   phone does not zoom into a small one. The title is a field, and it came
   out at body size, under the note's own headings; it is well over 16px
   in any case, so it is put back, as firmly as that rule and more
   specifically. */
@media (pointer: coarse) {
  .nl-doc input.nl-title:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]) { font-size: calc(var(--nl-font, var(--text-md)) * 1.9) !important; }
}

/* ---------------------------------------------------- Live Preview
   The note's own text, one element per line: the markers of the lines
   the caret is not on are hidden, and the rest is drawn as it reads. */
.nl-lp {
  position: relative; outline: none; min-height: 40vh;
  font-size: var(--nl-font, var(--text-md)); line-height: 1.65; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: break-word; tab-size: 4; caret-color: var(--ink);
}
.nl-lp.lp-empty::before { content: attr(data-placeholder); position: absolute; left: 0; top: 0; color: var(--ink-faint); pointer-events: none; }
.lp-line { min-height: 1.65em; }
.lp-line:not(.lp-on) .lp-mk { display: none; }
.lp-on .lp-mk { color: var(--ink-faint); }
.lp-gone { display: none; }
.lp-h { font-weight: 700; line-height: 1.3; color: var(--ink); }
.lp-h1 { font-size: 1.8em; margin: .5em 0 .15em; }
.lp-h2 { font-size: 1.5em; margin: .45em 0 .1em; }
.lp-h3 { font-size: 1.28em; margin: .4em 0 .1em; }
.lp-h4 { font-size: 1.12em; }
.lp-h5, .lp-h6 { font-size: 1em; color: var(--ink-soft); }
.lp-code, .lp-fm, .lp-table, .lp-comment-block { font-family: var(--font-mono, monospace); font-size: .88em; }
.lp-code { background: var(--paper-inset); padding: 0 14px; }
.lp-code-top { border-radius: 6px 6px 0 0; padding-top: 4px; }
.lp-code-end { border-radius: 0 0 6px 6px; padding-bottom: 4px; }
.lp-fence { color: var(--ink-faint); }
.lp-fence.lp-off { font-size: 0; min-height: 8px; }
.lp-fm, .lp-comment-block { color: var(--ink-faint); }
.lp-quote { border-left: 3px solid var(--rule-strong); padding-left: 14px; color: var(--ink-soft); }
.lp-callout { border-left-color: var(--accent-strong); background: var(--paper-inset); color: var(--ink); padding-right: 14px; }
.lp-q-top.lp-callout { border-top-right-radius: 6px; padding-top: 6px; }
.lp-q-end.lp-callout { border-bottom-right-radius: 6px; padding-bottom: 6px; }
.lp-co-head { font-weight: 700; color: var(--accent-strong); }
.lp-co-icon { display: inline-block; width: 1.1em; margin-right: 6px; vertical-align: -.15em; }
.lp-co-icon svg { width: 1em; height: 1em; }
.lp-on .lp-co-icon, .lp-on .lp-co-name { display: none; }
.lp-co-name::before { content: attr(data-name); }
.lp-callout.co-warn { border-left-color: var(--warn); } .lp-callout.co-warn.lp-co-head { color: var(--warn); }
.lp-callout.co-danger { border-left-color: var(--danger); } .lp-callout.co-danger.lp-co-head { color: var(--danger); }
.lp-callout.co-good, .lp-callout.co-teal { border-left-color: var(--good); } .lp-callout.co-good.lp-co-head, .lp-callout.co-teal.lp-co-head { color: var(--good); }
.lp-callout.co-quiet { border-left-color: var(--rule-strong); } .lp-callout.co-quiet.lp-co-head { color: var(--ink-soft); }
.lp-callout.co-purple { border-left-color: var(--accent); }
.lp-hr:not(.lp-on) { background: linear-gradient(var(--rule-strong), var(--rule-strong)) center / 100% 1px no-repeat; }
/* A bullet and a task's brackets keep their place in the line, hidden,
   and what is drawn over them is the dot or the box. */
.lp-line:not(.lp-on) .lp-bullet { position: relative; visibility: hidden; }
.lp-line:not(.lp-on) .lp-bullet::after { content: "\2022"; position: absolute; left: 0; color: var(--ink-faint); visibility: visible; }
.lp-num { color: var(--ink-faint); }
.lp-line:not(.lp-on) .lp-task {
  position: relative; display: inline-block; width: 1.5em; overflow: hidden; vertical-align: top;
  visibility: hidden; cursor: pointer;
}
.lp-line:not(.lp-on) .lp-task::before {
  content: ""; position: absolute; left: .05em; top: .35em; width: .9em; height: .9em;
  border: 1.5px solid var(--ink-faint); border-radius: 3px; visibility: visible;
}
.lp-line:not(.lp-on) .lp-task.on::before { background: var(--accent-strong); border-color: var(--accent-strong); }
.lp-line:not(.lp-on) .lp-task.on::after {
  content: ""; position: absolute; left: .34em; top: .47em; width: .28em; height: .5em;
  border: solid var(--paper-raised); border-width: 0 2px 2px 0; transform: rotate(45deg); visibility: visible;
}
.lp-done { color: var(--ink-faint); text-decoration: line-through; }
.lp-on.lp-taskline { text-decoration: none; }
.lp-ic { font-family: var(--font-mono, monospace); font-size: .88em; background: var(--paper-inset); border-radius: 4px; padding: 1px 4px; }
.lp-wl, .lp-link { color: var(--accent-strong); }
.lp-line:not(.lp-on) .lp-wl, .lp-line:not(.lp-on) .lp-link { cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent-soft); text-underline-offset: 3px; }
/* A link to a note not made yet is still a link, and reads as one: in the
   link colour, told apart by its dashed underline, drawn in that colour so
   the dashes show. In the faint grey it had, it could hardly be read in
   either theme. */
.lp-wl.lp-missing { text-decoration-style: dashed; }
.lp-line:not(.lp-on) .lp-wl.lp-missing { text-decoration-color: currentColor; }
.lp-tag { color: var(--good); background: var(--good-soft); border-radius: 999px; padding: 0 .45em; font-size: .9em; }
.lp-line:not(.lp-on) .lp-tag { cursor: pointer; }
.lp-comment { color: var(--ink-faint); }
.lp-fn { color: var(--accent-strong); font-size: .8em; }
.nl-lp mark, .nl-read mark { background: var(--warn-soft); color: var(--ink); border-radius: 2px; padding: 0 1px; }
.lp-widget { margin: .35em 0; cursor: text; white-space: normal; border-radius: 6px; }
.lp-widget:hover { box-shadow: 0 0 0 1px var(--rule); }
.lp-widget .nl-read > *:last-child { margin-bottom: 0; }

::highlight(nl-find) { background-color: var(--warn-soft); }
::highlight(nl-find-on) { background-color: var(--accent-soft); color: var(--ink); }

/* ---------------------------------------------------------- Source mode
   A transparent textarea over a highlighted copy of itself, so the source
   stays editable while it reads with some colour. Both layers must share
   every metric exactly or the caret drifts. */
.nl-edit-wrap { position: relative; }
.nl-hl, .nl-source {
  font-family: inherit;
  font-size: var(--nl-font, var(--text-md));
  font-weight: 400;
  font-style: normal;
  line-height: 1.7;
  letter-spacing: 0;
  tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  margin: 0;
  padding: 0;
  border: 0;
}
.nl-hl { position: absolute; inset: 0; pointer-events: none; color: var(--ink); overflow: hidden; }
.nl-source {
  position: relative; display: block; width: 100%; min-height: 40vh; resize: none; overflow: hidden;
  background: transparent; color: transparent; caret-color: var(--ink); outline: none;
}
.nl-source::selection { background: var(--accent-soft); color: transparent; }
.nl-source::placeholder { color: var(--ink-faint); }
/* highlight tokens: colours only, never a weight, a slant or a size */
.hl-h { color: var(--accent-strong); }
.hl-mark { color: var(--ink-faint); }
.hl-b { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.hl-i { color: var(--ink-soft); }
.hl-s { text-decoration: line-through; opacity: .7; }
.hl-code { color: var(--accent-strong); background: var(--paper-inset); border-radius: 3px; }
.hl-fence { color: var(--ink-soft); background: var(--paper-inset); display: inline-block; width: 100%; }
.hl-link, .hl-wl, .hl-list { color: var(--accent-strong); }
.hl-tag, .hl-task { color: var(--good); }
.hl-quote { color: var(--ink-soft); }
.hl-fm, .hl-hr { color: var(--ink-faint); }
.nl-hl mark { background: var(--warn-soft); color: var(--ink); padding: 0; }

/* The formatting row: shown on a touch screen or a narrow one, where a
   keyboard shortcut or a right click is not to hand. */
.nl-fmt { display: none; align-items: center; gap: 2px; flex: none; padding: 3px 8px; border-bottom: 1px solid var(--rule); background: var(--paper-raised); overflow-x: auto; scrollbar-width: none; }
.nl-fmt button {
  flex: none; min-width: 34px; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-soft); font: 600 var(--text-xs) var(--font-sans, inherit); cursor: pointer;
}
.nl-fmt button:hover { background: var(--paper-inset); color: var(--ink); }
.nl-fmt button[data-fmt="italic"] { font-style: italic; }

/* --------------------------------------------------------- reading view */
.nl-read { font-size: var(--nl-font, var(--text-md)); line-height: 1.7; color: var(--ink); }
.nl-read > *:first-child { margin-top: 0; }
.nl-read h1, .nl-read h2, .nl-read h3, .nl-read h4, .nl-read h5, .nl-read h6 { line-height: 1.3; margin: 1.4em 0 .45em; scroll-margin-top: 12px; }
.nl-read h1 { font-size: 1.8em; }
.nl-read h2 { font-size: 1.5em; }
.nl-read h3 { font-size: 1.28em; }
.nl-read h4 { font-size: 1.12em; }
.nl-read h5, .nl-read h6 { font-size: 1em; color: var(--ink-soft); }
.nl-read p { margin: 0 0 1em; }
.nl-read ul, .nl-read ol { margin: 0 0 1em; padding-left: 1.5em; }
.nl-read li { margin-bottom: .3em; }
.nl-read li > ul, .nl-read li > ol { margin: .3em 0 0; }
.nl-read blockquote { margin: 0 0 1em; padding: 2px 0 2px 16px; border-left: 3px solid var(--rule-strong); color: var(--ink-soft); }
.nl-read hr { border: none; border-top: 1px solid var(--rule); margin: 1.8em 0; }
.nl-read code { font-family: var(--font-mono, monospace); font-size: .88em; background: var(--paper-inset); border-radius: 4px; padding: 1px 5px; }
.nl-read pre { position: relative; background: var(--paper-inset); border-radius: 6px; padding: 13px 15px; overflow: auto; margin: 0 0 1em; }
.nl-read pre code { background: none; padding: 0; font-size: var(--text-xs); }
.nl-read pre .nl-lang { position: absolute; top: 6px; right: 58px; font: calc(10px * var(--text-scale, 1)) var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.nl-copy { position: absolute; top: 4px; right: 6px; padding: 1px 8px; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--paper-raised); color: var(--ink-soft); font: calc(11px * var(--text-scale, 1)) var(--font-sans, inherit); cursor: pointer; opacity: 0; }
.nl-read pre:hover .nl-copy, .nl-copy:focus-visible { opacity: 1; }
.nl-read table { border-collapse: collapse; margin: 0 0 1em; font-size: .94em; display: block; overflow-x: auto; }
.nl-read th, .nl-read td { border: 1px solid var(--rule); padding: 6px 10px; text-align: left; vertical-align: top; }
.nl-read th { background: var(--paper-inset); font-weight: 700; }
.nl-read a { color: var(--accent-strong); text-decoration: underline; text-decoration-color: var(--accent-soft); text-underline-offset: 3px; }
.nl-read a.nl-wl.missing { text-decoration-style: dashed; text-decoration-color: currentColor; }
.nl-read .nl-hashtag { font-size: .9em; color: var(--good); background: var(--good-soft); border-radius: 999px; padding: 1px 8px; text-decoration: none; white-space: nowrap; }
.nl-read .nl-task { list-style: none; margin-left: -1.35em; }
.nl-read .nl-task input { margin-right: 7px; accent-color: var(--accent-strong); }
.nl-read .nl-task.done { color: var(--ink-faint); text-decoration: line-through; }
.nl-read .nl-fn { font-size: .82em; vertical-align: super; color: var(--accent-strong); text-decoration: none; }
.nl-read .nl-footnotes { border-top: 1px solid var(--rule); margin-top: 2em; padding-top: .8em; font-size: .9em; color: var(--ink-soft); }
.nl-read .nl-math, .nl-lp .nl-math { font-family: var(--font-mono, monospace); background: var(--paper-inset); border-radius: 4px; padding: 1px 5px; }
.nl-read img { max-width: 100%; height: auto; border-radius: 6px; }
.nl-read h1, .nl-read h2, .nl-read h3, .nl-read h4, .nl-read h5, .nl-read h6 { position: relative; }
.nl-hfold {
  position: absolute; left: -26px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--ink-faint); cursor: pointer; opacity: 0;
}
.nl-hfold svg { transition: transform .12s ease; }
.nl-read :hover > .nl-hfold, .nl-hfold:focus-visible, .is-folded > .nl-hfold { opacity: 1; }
.is-folded > .nl-hfold svg { transform: rotate(-90deg); }
.nl-flash { animation: nl-flash 1.4s ease-out; }

/* page preview */
.nl-popover {
  position: fixed; z-index: 10065; width: min(460px, calc(100vw - 16px)); max-height: 340px; overflow: auto;
  padding: 10px 16px 12px; border-radius: 8px; background: var(--paper-raised);
  box-shadow: 0 0 0 1px var(--rule-strong), 0 14px 36px rgba(0, 0, 0, .2);
}
.nl-popover-title { margin-bottom: 6px; font-size: var(--text-2xs); font-weight: 700; color: var(--ink-faint); }
.nl-popover .nl-read { font-size: var(--text-sm); }
@keyframes nl-flash { from { background: var(--accent-soft); } }

/* properties */
.nl-props { margin: 0 0 1.2em; padding-bottom: .6em; border-bottom: 1px solid var(--rule); font-size: .9em; }
.nl-props-head { font-weight: 600; color: var(--ink-soft); margin-bottom: .3em; }
.nl-prop { display: grid; grid-template-columns: minmax(90px, 30%) 1fr; gap: 10px; padding: 3px 0; }
.nl-prop-key { color: var(--ink-faint); }
.nl-prop-chip { display: inline-block; margin: 0 4px 2px 0; padding: 0 8px; border-radius: 999px; background: var(--paper-inset); }
.nl-prop-empty { color: var(--ink-faint); font-style: italic; }

/* callouts */
.nl-callout { border-left: 4px solid var(--accent-strong); background: var(--paper-inset); border-radius: 6px; padding: 10px 14px; margin: 0 0 1em; }
.nl-callout .nl-co-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent-strong); margin-bottom: 4px; list-style: none; }
details.nl-callout > summary { cursor: pointer; }
details.nl-callout > summary::-webkit-details-marker { display: none; }
.nl-co-fold { margin-left: auto; display: inline-grid; transition: transform .12s ease; }
details.nl-callout:not([open]) .nl-co-fold { transform: rotate(-90deg); }
details.nl-callout:not([open]) > .nl-co-head { margin-bottom: 0; }
.nl-callout .nl-co-head svg { width: 16px; height: 16px; flex: none; }
.nl-callout > *:last-child { margin-bottom: 0; }
.nl-callout.co-warn { border-left-color: var(--warn); } .nl-callout.co-warn .nl-co-head { color: var(--warn); }
.nl-callout.co-danger { border-left-color: var(--danger); } .nl-callout.co-danger .nl-co-head { color: var(--danger); }
.nl-callout.co-good, .nl-callout.co-teal { border-left-color: var(--good); } .nl-callout.co-good .nl-co-head, .nl-callout.co-teal .nl-co-head { color: var(--good); }
.nl-callout.co-quiet { border-left-color: var(--rule-strong); } .nl-callout.co-quiet .nl-co-head { color: var(--ink-soft); }
.nl-callout.co-purple { border-left-color: var(--accent); }

/* an embedded note */
.nl-embed { display: block; border-left: 3px solid var(--accent-soft); padding: 4px 0 4px 14px; margin: 0 0 1em; }
.nl-embed > .nl-embed-head { font-size: .82em; color: var(--ink-faint); margin-bottom: 4px; }
.nl-embed > .nl-embed-head a { color: inherit; text-decoration: none; }
.nl-embed > .nl-embed-head a:hover { color: var(--accent-strong); }

/* A picture the note points at but nobody can find. It says so in words
   rather than leaving the browser's broken-image icon, because the note is
   right and only the bytes are missing. */
.nl-att-missing { display: inline-block; font-size: calc(12.5px * var(--text-scale, 1)); color: var(--ink-soft); background: var(--paper-inset); border: 1px dashed var(--rule-strong); border-radius: 6px; padding: 2px 8px; }

/* ------------------------------------------------------ an empty tab */
.nl-empty-tab { display: grid; place-items: center; min-height: 60%; padding: 40px 20px; }
.nl-empty-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nl-empty-actions button {
  display: flex; gap: 10px; align-items: baseline; padding: 6px 12px; border: 0; border-radius: 6px;
  background: none; color: var(--accent-strong); font: calc(15px * var(--text-scale, 1)) var(--font-sans, inherit); cursor: pointer;
}
.nl-empty-actions button:hover { background: var(--paper-inset); }
.nl-empty-actions span { color: var(--ink-faint); font-size: calc(12.5px * var(--text-scale, 1)); }

/* --------------------------------------------------------- find in note */
.nl-find { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.nl-find-row { display: flex; align-items: center; gap: 4px; }
.nl-find .nl-input { flex: 1 1 auto; max-width: 420px; }
.nl-find-count { min-width: 64px; text-align: right; font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; }
.nl-ic span[aria-hidden] { font: 600 var(--text-2xs) var(--font-mono, monospace); }

/* ---------------------------------------------------------- the graph */
.nl-graph-view { position: relative; height: 100%; min-height: 300px; }
.nl-graph-view.is-local { height: 100%; min-height: 260px; }
.nl-graph-host { position: absolute; inset: 0; overflow: hidden; }
.nl-gcanvas { display: block; outline: none; touch-action: none; }
.nl-gcanvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.nl-graph-controls { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-height: calc(100% - 16px); }
.nl-graph-gear { background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); }
.nl-graph-panel {
  width: 240px; overflow: auto; padding: 8px 12px; border-radius: 8px;
  background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 8px 24px rgba(0, 0, 0, .12);
}
.nl-graph-panel[hidden] { display: none; }
.nl-graph-group + .nl-graph-group { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); }
.nl-graph-title { font-weight: 600; margin-bottom: 4px; color: var(--ink-soft); }
.nl-graph-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; color: var(--ink-soft); }
.nl-graph-row.is-slider { flex-direction: column; align-items: stretch; gap: 0; }
.nl-graph-row input[type=range] { width: 100%; accent-color: var(--accent-strong); }
.nl-graph-panel .nl-input { margin-bottom: 4px; }

/* a switch, as the settings and the graph panel use */
.nl-switch { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; background: var(--rule-strong); cursor: pointer; transition: background .15s ease; }
.nl-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper-raised); transition: transform .15s ease; }
.nl-switch:checked { background: var(--accent-strong); }
.nl-switch:checked::after { transform: translateX(14px); }
.nl-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------- status bar */
.nl-status {
  display: flex; align-items: center; justify-content: flex-end; gap: 2px;
  padding: 0 8px; background: var(--paper); border-top: 1px solid var(--rule);
  font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; overflow: hidden;
}
.nl-status-item { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; }
button.nl-status-item { cursor: pointer; }
button.nl-status-item:hover { background: var(--paper-inset); color: var(--ink); }
.nl-status-item:empty, .nl-status-item[hidden] { display: none; }
#nlSaved.bad { color: var(--danger); font-weight: 600; }

/* ------------------------------------------------------------ overlays */
.nl-menu {
  position: fixed; z-index: 10060; min-width: 200px; max-width: 320px; max-height: calc(100vh - 8px); max-height: calc(100dvh - 8px); overflow: auto;
  padding: 5px; border-radius: 8px; background: var(--paper-raised);
  box-shadow: 0 0 0 1px var(--rule-strong), 0 12px 32px rgba(0, 0, 0, .18);
}
.nl-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 3px 10px 3px 6px;
  border: 0; border-radius: 5px; background: none; color: var(--ink); font: var(--text-xs) var(--font-sans, inherit); text-align: left; cursor: pointer;
}
.nl-menu-item:hover, .nl-menu-item:focus, .nl-menu-item.open { background: var(--paper-inset); outline: none; }
.nl-menu-item:disabled { opacity: .45; cursor: default; background: none; }
.nl-menu-item.danger { color: var(--danger); }
.nl-menu-icon { display: inline-grid; place-items: center; width: 16px; flex: none; color: var(--ink-faint); }
.nl-menu-label { flex: 1 1 auto; }
.nl-menu-more { display: inline-grid; color: var(--ink-faint); }
.nl-menu-keys { flex: none; margin-left: var(--space-4); font: inherit; font-size: var(--text-2xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.nl-menu-sep { height: 1px; margin: 4px 6px; background: var(--rule); }

.nl-dialog {
  padding: 0; border: 0; border-radius: 10px; color: var(--ink); background: var(--paper-raised);
  box-shadow: 0 0 0 1px var(--rule-strong), 0 24px 60px rgba(0, 0, 0, .3);
}
.nl-dialog::backdrop, .nl-prompt::backdrop { background: rgba(0, 0, 0, .4); }
.nl-dialog.is-small { width: min(460px, calc(100vw - 32px)); }
.nl-dialog form { padding: 20px 22px 18px; }
.nl-dialog h2 { margin: 0 0 10px; font-size: calc(17px * var(--text-scale, 1)); }
.nl-dialog p { margin: 0 0 10px; color: var(--ink-soft); line-height: 1.55; }
.nl-dialog-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.nl-check { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: var(--text-xs); }
.nl-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 14px;
  border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--paper); color: var(--ink);
  font: 600 var(--text-xs) var(--font-sans, inherit); cursor: pointer;
}
.nl-btn:hover { border-color: var(--accent); }
.nl-btn.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent, #fff); }
.nl-btn.danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger, #fff); }

/* the settings */
.nl-dialog.is-settings { width: min(980px, calc(100vw - 32px)); height: min(720px, calc(100vh - 48px)); height: min(720px, calc(100dvh - 48px)); }
.nl-set-wrap { position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr); height: 100%; }
.nl-set-nav { padding: 14px 8px; background: var(--paper); border-right: 1px solid var(--rule); overflow: auto; }
.nl-set-group { padding: 10px 10px 4px; font-size: var(--text-2xs); font-weight: 600; color: var(--ink-faint); }
.nl-set-tab { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: 5px; background: none; color: var(--ink-soft); font: var(--text-xs) var(--font-sans, inherit); text-align: left; cursor: pointer; }
.nl-set-tab:hover { background: var(--paper-inset); color: var(--ink); }
.nl-set-tab.on { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.nl-set-body { padding: 20px 28px 40px; overflow: auto; }
.nl-set-body h2 { margin: 0 0 14px; font-size: var(--text-lg); }
.nl-set-close { position: absolute; top: 8px; right: 8px; }
.nl-set-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--rule); }
.nl-set-info { flex: 1 1 auto; min-width: 0; }
.nl-set-name { display: block; font-weight: 600; color: var(--ink); }
.nl-set-desc, .nl-set-preview { font-size: calc(12.5px * var(--text-scale, 1)); color: var(--ink-faint); margin-top: 2px; line-height: 1.5; }
.nl-set-preview { color: var(--accent-strong); }
.nl-set-control { display: flex; align-items: center; gap: 6px; flex: none; max-width: 55%; }
.nl-set-control .nl-input { width: 240px; }
.nl-set-control input[type=range] { width: 180px; accent-color: var(--accent-strong); }
.nl-set-filter { margin-bottom: 8px; }
.nl-keys { flex-wrap: wrap; justify-content: flex-end; }
.nl-key-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 2px 1px 6px; border-radius: 5px; background: var(--paper-inset); }
.nl-key-x { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--ink-faint); cursor: pointer; }
.nl-key-x:hover { color: var(--danger); }
.nl-key-wait { width: auto; padding: 0 8px; font-size: var(--text-2xs); color: var(--accent-strong); }
kbd { font: calc(11px * var(--text-scale, 1)) var(--font-mono, monospace); color: var(--ink-soft); padding: 1px 5px; border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--paper-raised); }
kbd + kbd { margin-left: 2px; }

/* the quick switcher, the command palette and every "choose one" */
.nl-prompt {
  width: min(700px, calc(100vw - 32px)); max-height: 70vh; margin: 10vh auto auto; padding: 0;
  border: 0; border-radius: 10px; background: var(--paper-raised); color: var(--ink);
  box-shadow: 0 0 0 1px var(--rule-strong), 0 24px 60px rgba(0, 0, 0, .3); overflow: hidden;
}
.nl-prompt[open] { display: flex; flex-direction: column; }
.nl-prompt > input { flex: none; width: 100%; padding: 14px 18px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); font: var(--text-md) var(--font-sans, inherit); }
.nl-prompt > input:focus { outline: none; }
.nl-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px; }
.nl-opt { display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.nl-opt.sel { background: var(--paper-inset); }
.nl-opt-none { color: var(--ink-faint); cursor: default; }
.nl-opt-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.nl-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-where { font-size: var(--text-2xs); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-kbd { flex: none; }
.nl-hit-ch { color: var(--accent-strong); font-weight: 700; }
.nl-prompt-hints { display: flex; flex-wrap: wrap; gap: 4px 16px; flex: none; padding: 8px 14px; border-top: 1px solid var(--rule); font-size: var(--text-2xs); color: var(--ink-faint); }

/* [[ suggestions */
.nl-ac {
  position: fixed; z-index: 10050; min-width: 240px; max-width: 380px; max-height: 260px; overflow: auto; padding: 4px;
  background: var(--paper-raised); border-radius: 8px; box-shadow: 0 0 0 1px var(--rule-strong), 0 12px 30px rgba(0, 0, 0, .2);
}
.nl-ac[hidden] { display: none; }
.nl-ac > div { display: flex; align-items: baseline; gap: 8px; padding: 5px 10px; border-radius: 5px; cursor: pointer; color: var(--ink); }
.nl-ac > div.sel { background: var(--paper-inset); }
.nl-ac-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-ac .nl-new { flex: none; font-size: calc(11.5px * var(--text-scale, 1)); color: var(--ink-faint); }

/* notices, top right, as a desktop app gives them */
.nl-toast {
  position: fixed; top: 12px; right: 14px; z-index: 10070; max-width: min(420px, calc(100vw - 28px));
  padding: 10px 14px; border-radius: 8px; background: var(--paper-raised); color: var(--ink);
  box-shadow: 0 0 0 1px var(--rule-strong), 0 10px 28px rgba(0, 0, 0, .18);
  font-size: var(--text-xs); line-height: 1.45; pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease;
}
.nl-toast.show { opacity: 1; transform: none; }

.nl-scrim { display: none; position: fixed; inset: 0; z-index: 10005; background: rgba(0, 0, 0, .38); }
.nl-scrim.on { display: block; }

/* ------------------------------------------------------------ small screens
   The ribbon goes, the two sidebars slide in over the note, and a bar
   across the top holds the buttons that bring them. */
@media (max-width: 820px) {
  .nl-window, .nl-window.no-left, .nl-window.no-right, .nl-window.no-left.no-right {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 46px minmax(0, 1fr) 26px;
    grid-template-areas: "top" "main" "status";
  }
  .nl-mobilebar { grid-area: top; display: flex; align-items: center; gap: 4px; padding: 0 4px; background: var(--paper); border-bottom: 1px solid var(--rule); }
  .nl-mobile-title { flex: 1 1 auto; min-width: 0; text-align: center; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nl-ribbon { display: none; }
  .nl-left, .nl-right, .nl-window.no-left .nl-left, .nl-window.no-right .nl-right { display: none; }
  /* The drawers stop short of the status bar, where the privacy badge is. */
  body.show-left .nl-left, body.show-right .nl-right {
    display: flex; position: fixed; top: 0; bottom: 26px; z-index: 10010; width: min(320px, 88vw);
    box-shadow: 0 0 40px rgba(0, 0, 0, .25);
  }
  body.show-left .nl-left { left: 0; }
  body.show-right .nl-right { right: 0; }
  .nl-resize { display: none; }
  .nl-doc { padding: 16px 18px 40vh; }
  .nl-fmt { display: flex; }
  .nl-split.is-row { flex-direction: column; }
  .nl-status .nl-status-item:not(#nlWords):not(#nlSaved) { display: none; }
  /* One bar, not four. The bar across the top, the tab strip, the note's
     own header and the formatting row stood two hundred pixels tall before
     the note began. Now the note's header (back, forward, its name,
     reading or editing, more) sits in the bar between the file list's
     button and the side panel's, where the bar only repeated the name;
     the tab strip shows once there is a second tab to choose; and back
     and forward give their room to the name until there is somewhere to
     go. The pane is not positioned, so its header is placed in the
     window, which is. */
  .nl-pane.focused > .nl-viewhead {
    position: absolute; top: 0; left: 100px; right: 52px; z-index: 3;
    height: 46px; padding: 0; background: var(--paper);
  }
  .nl-pane.focused > .nl-viewhead .nl-crumbs { justify-content: flex-start; padding: 0 4px; }
  .nl-viewhead :is(.nl-back, .nl-fwd):disabled { display: none; }
  .nl-tabbar:not(:has(.nl-tab + .nl-tab)) { display: none; }
}
@media (pointer: coarse) {
  .nl-fmt { display: flex; }
  .nl-ic, .nl-rb, .nl-side-tab, .nl-fmt button, .nl-status-item, .nl-vault-name, .nl-btn, .nl-crumb, .nl-link-btn, .nl-menu-item { min-width: 44px; min-height: 44px; }
  .nl-crumb-title { display: inline-flex; align-items: center; min-height: 44px; }
  /* A finger has no hover to find the fold arrows by, so they are shown,
     at a finger's size, in front of the heading. */
  .nl-hfold { position: static; display: inline-grid; transform: none; width: 44px; height: 44px; vertical-align: middle; opacity: .7; }
  .nl-tab .nl-x { width: 44px; height: 44px; opacity: .7; }
  .nl-tab { height: 44px; }
  .nl-tabbar, .nl-viewhead, .nl-side-tabs { height: 50px; }
  .nl-row, .nl-tag, .nl-out-item, .nl-opt { min-height: 44px; }
  /* A held finger on a row or a tab opens its menu, not the callout. */
  .nl-row, .nl-tab { -webkit-touch-callout: none; -webkit-user-select: none; }
  /* The bar between panes is dragged by a finger: wide enough to find,
     and a drag on it moves the bar rather than the page. */
  .nl-divider { touch-action: none; }
  .nl-divider::after { inset: -10px; }
  .nl-input, .nl-rename, .nl-prompt > input, .nl-find .nl-input { font-size: var(--text-md); }
  .nl-window { grid-template-rows: minmax(0, 1fr) 44px; }
}
@media (max-width: 820px) and (pointer: coarse) {
  .nl-window, .nl-window.no-left, .nl-window.no-right, .nl-window.no-left.no-right { grid-template-rows: 50px minmax(0, 1fr) 44px; }
  .nl-pane.focused > .nl-viewhead { top: 3px; height: 44px; }
  body.show-left .nl-left, body.show-right .nl-right { bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) { .nl-window, .nl-toast, .nl-flash { animation: none; transition: none; } }

/* The one note being printed, built as a page of its own so what goes on
   paper is the reading view and not the editor. */
.nl-print { display: none; }
.nl-print h1.nl-print-title { font-size: calc(26px * var(--text-scale, 1)); margin: 0 0 4px; }
.nl-print .nl-print-meta { font-size: var(--text-2xs); color: var(--ink-soft); margin: 0 0 18px; }
.nl-print img { max-width: 100%; height: auto; border-radius: 6px; }

@media print {
  body.noteline-app { overflow: visible; }
  .nl-window { position: static; display: block; }
  .nl-ribbon, .nl-left, .nl-right, .nl-tabbar, .nl-viewhead, .nl-fmt, .nl-status, .nl-mobilebar, .nl-find, .nl-below { display: none !important; }
  .nl-sheet { overflow: visible; }
  .nl-doc { max-width: none; padding: 0; }
  /* With one note chosen for printing, that note is the whole page: the
     app, the site around it and anything else on the page stand down,
     named by what they are not rather than one by one, so a part added
     to this page later cannot turn up on the paper. */
  body.nl-printing > *:not(.nl-print) { display: none !important; }
  body.nl-printing .nl-print { display: block; }
  .nl-print { color: #000; background: #fff; }
  .nl-print a { color: #000; }
  .nl-print pre, .nl-print code { background: #f4f4f4; }
  .nl-print .nl-copy { display: none; }
  @page { margin: 18mm; }
}