/* SightGlass — all styling.

   The palette is the warm paper one this app has always used, with the Atlas
   accent: a muted violet for the application's own chrome, with prose staying
   ink on paper. Nothing text-bearing goes lighter than --ink-3.

   There are no inline styles anywhere and no injected <style> block, because
   style-src has no 'unsafe-inline'. Every state is a class or a data-
   attribute on an element and the rules live here. Setting el.style.* from
   script is fine — that is CSSOM, not covered by the directive — and it is
   how the tree's indent works. */

:root {
  --paper: #FCFCFA;     /* the page */
  --paper-2: #FAFAF7;   /* bars, tree, rail — one step back from the page */
  --raised: #FFFFFF;
  --sunk: #F4F3EF;      /* hover, code, anything pressed into the paper */
  --ink: #191918;
  --ink-2: #55544F;
  --ink-3: #8A8983;
  --rule: #EAE8E2;
  --rule-2: #E0DED7;
  --accent: #4A4470;
  --accent-hi: #3B3660;
  --accent-soft: #ECEBF4;
  --accent-edge: #CFCCE0;
  --accent-ink: #3E3960;
  --on-accent: #FCFCFA;
  --warn: #9A4B2F;
  --thumb: #D5D4CE;
  --thumb-hi: #B7B6AF;
  --flag-bg: #F0E4D8;
  --flag-ink: #8A5A32;
  --add-bg: #E8F3EA;
  --add-ink: #2F6B3D;
  --del-bg: #FBEAEA;
  --del-ink: #8A3A3A;
  --hunk-bg: #EFEEE9;

  --serif: ui-serif, Charter, "Bitstream Charter", "Iowan Old Style", "Source Serif 4", Georgia, serif;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --bar-h: 48px;
  --notebar-h: 44px;
  --tree-w: 236px;
  --rail-w: 300px;
  --hist-w: 452px;
  --measure: 700px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17181A;
    --paper-2: #1B1C1F;
    --raised: #1E1F22;
    --sunk: #232427;
    --ink: #E7E6E1;
    --ink-2: #A3A29C;
    --ink-3: #6E6D68;
    --rule: #2B2D30;
    --rule-2: #35373B;
    --accent: #A9A2D8;
    --accent-hi: #C0BAE8;
    --accent-soft: #272637;
    --accent-edge: #3C3A55;
    --accent-ink: #C0BAE8;
    --on-accent: #16151F;
    --warn: #D08A6B;
    --thumb: #3A3C41;
    --thumb-hi: #4D4F55;
    --flag-bg: #35291F;
    --flag-ink: #D8A97C;
    --add-bg: #1B2C20;
    --add-ink: #8FC79F;
    --del-bg: #2E1D1D;
    --del-ink: #D79A9A;
    --hunk-bg: #232427;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- scrollbars ----------

   This app is five nested scroll regions — tree, document, rail, drawer,
   preview — so on a machine set to "Show scroll bars: Always" the default
   chrome is five grey slabs framing the paper. A 4px pill instead, in a tone
   between the rule and the lightest ink, with no track at all.

   The two spellings cannot both be applied, and that is the trap here: Chrome
   and Safari ignore every ::-webkit-scrollbar rule on an element where
   scrollbar-width or scrollbar-color is set. Setting both, as this block first
   did, means the pseudo-elements never run and you get the browser's own
   "thin", which on macOS is barely narrower than the default. So feature-detect
   and pick one: the pseudo-elements where they exist, because they are the only
   way to name an exact width, and the standard properties in Firefox, which has
   no pseudo-elements but does honour them.

   Deliberately not hidden. Overlay scrollbars are the OS default here and this
   changes nothing for them, but somebody who turned them on wants to see where
   they are in a long note — so this makes the bar quiet, not invisible. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--thumb) transparent; }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--thumb);
  border-radius: 999px;
  /* A transparent border clipped to the padding box is what leaves air around
     the thumb; without it the pill sits hard against the edge of the pane. */
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--thumb-hi);
  background-clip: padding-box;
}

/* The sprite itself is never drawn; only its symbols are, through <use>. */
#sprite { display: none; }
.ic { width: 1em; height: 1em; flex: none; fill: none; }

.spacer { flex: 1; }
.mono { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.quiet { color: var(--ink-3); font-size: 12.5px; }

/* A label the app puts on itself where a screen is drawn but not yet wired to
   anything real. Visible on purpose: a placeholder that looks finished is how
   a gap survives to the next release. */
.wip {
  border: 1px dashed var(--rule-2); border-radius: 8px;
  padding: 12px 14px; color: var(--ink-2); line-height: 1.6; font-size: 13px;
  display: flex; flex-direction: column; gap: 4px;
}
.wip .wiptag {
  align-self: flex-start;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--flag-ink); background: var(--flag-bg);
  padding: 2px 7px; border-radius: 999px;
}
.wip .wipwhy { color: var(--ink-3); font-size: 12.5px; }

/* ---------- setup ---------- */
#setup { max-width: 30rem; margin: 12vh auto; padding: 0 1.5rem; }
#setup h1 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; margin: 0 0 .4rem; }
#setup p.lede { color: var(--ink-2); line-height: 1.6; margin: 0 0 2rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; margin-bottom: .35rem; color: var(--ink-2); }
.field input {
  width: 100%; padding: .55rem .65rem; font: inherit; font-family: var(--mono); font-size: 13px;
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: 5px;
}
.field .hint { margin-top: .3rem; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.primary {
  background: var(--accent); color: var(--on-accent); padding: .55rem 1.1rem;
  border-radius: 6px; font-weight: 500;
}
.primary:hover { background: var(--accent-hi); }
.err { color: var(--warn); margin-top: 1rem; line-height: 1.5; }

/* ---------- shell ---------- */
#app { display: none; height: 100%; grid-template-rows: auto auto 1fr; }
#app.on { display: grid; }

#appbar {
  display: flex; align-items: center; gap: 14px;
  height: var(--bar-h); padding: 0 16px; flex: none;
  border-bottom: 1px solid var(--rule); background: var(--paper);
}
.brand { font-family: var(--serif); font-size: 15px; font-weight: 500; }
.tabs { display: flex; gap: 2px; margin-left: -6px; }
.tab {
  padding: 5px 11px; border-radius: 6px; font-size: 13px; color: var(--ink-2);
  transition: background .1s ease, color .1s ease;
}
.tab:hover { background: var(--sunk); }
.tab.on { color: var(--accent); background: var(--accent-soft); font-weight: 500; }

#searchbtn {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 11px; width: 260px; text-align: left;
  background: var(--sunk); border: 1px solid var(--rule-2); border-radius: 999px;
  color: var(--ink-3); font-size: 13px;
}
#searchbtn:hover { border-color: var(--accent-edge); }
#searchbtn .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbd { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.repo { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.repo b { color: var(--ink-2); font-weight: 500; }

.hbtn {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border-radius: 6px; color: var(--ink-2); font-size: 13px;
  transition: background .1s ease, color .1s ease;
}
/* `hidden` is a UA rule, and any author `display` beats it — so a .hbtn set
   hidden from script would stay on screen without this. That is what keeps
   Discard and Commit out of the reading bar, and Pin, On this page, History
   and Edit out of the editing one. */
.hbtn[hidden] { display: none; }
.hbtn:hover { background: var(--sunk); color: var(--ink); }
/* A toggle that is on. The same tint the active app-bar tab uses, because it
   is the same claim: this is what you are looking at. */
.hbtn.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.hbtn.on:hover { background: var(--accent-soft); color: var(--accent-ink); }
.hbtn.go { background: var(--accent); color: var(--on-accent); font-weight: 500; }
.hbtn.go:hover { background: var(--accent-hi); color: var(--on-accent); }
.hbtn.go .kbd { color: inherit; opacity: .7; }
.iconbtn { padding: 4px 6px; border-radius: 5px; color: var(--ink-2); display: inline-flex; }
.iconbtn:hover { background: var(--sunk); color: var(--ink); }

/* ---------- note bar ---------- */
#notebar {
  display: flex; align-items: center; gap: 12px;
  height: var(--notebar-h); padding: 0 16px; flex: none;
  border-bottom: 1px solid var(--rule); background: var(--paper-2);
}
#notebar[hidden] { display: none; }
/* Editing tints the row and swaps its right-hand cluster. It does not move,
   resize, or change anything above it. */
body.editing #notebar { background: var(--sunk); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.crumb { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.crumb b { color: var(--ink); font-weight: 500; }
.status { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.status.dirty { color: var(--warn); }
.status.ok { color: var(--accent); }
/* Unsaved is a state, not a message, so it reads as a pill rather than a line
   of status text that scrolls past. */
body.editing .status.dirty {
  color: var(--flag-ink); background: var(--flag-bg);
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
}

.seg { display: flex; gap: 4px; padding: 3px; background: var(--rule); border-radius: 7px; }
.seg[hidden] { display: none; }
.segbtn { padding: 3px 9px; border-radius: 5px; font-size: 12px; color: var(--ink-3); }
.segbtn:hover { color: var(--ink-2); }
.segbtn.on { background: var(--paper); color: var(--accent); font-weight: 500; }
.segbtn:disabled { color: var(--ink-3); opacity: .5; cursor: default; }
/* Small enough to live inside a 12px segmented button and still be read. */
.wipmini {
  margin-left: 5px; padding: 1px 4px; border-radius: 999px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em;
  color: var(--flag-ink); background: var(--flag-bg); vertical-align: 1px;
}
.segbtn.on .wipmini { color: var(--flag-ink); }

/* ---------- views ---------- */
#views { min-height: 0; position: relative; }
.view { display: none; height: 100%; min-height: 0; }
.view.on { display: block; overflow-y: auto; }
/* One row, exactly the height of the view. Spelled out rather than left
   implicit: an undeclared row is an `auto` track sized to the tallest item, so
   the column would grow to the full height of the document and the scroll
   would land on nothing. minmax(0, 1fr) pins it to the container instead, and
   the three panes scroll inside it. Every nested scroll region below does the
   same thing, and for the same reason. */
#view-note.on { display: grid;
                grid-template-columns: var(--tree-w) minmax(0, 1fr) var(--rail-w);
                grid-template-rows: minmax(0, 1fr);
                overflow: hidden; position: relative; }
/* One side track, three states. The rail and the history panel are never up
   together, so they share it; with neither up the track goes away rather than
   standing empty, and the document takes the width. */
#view-note.on.norail { grid-template-columns: var(--tree-w) minmax(0, 1fr); }
#view-note.on.hist { grid-template-columns: var(--tree-w) minmax(0, 1fr) var(--hist-w); }
.page { max-width: 1060px; margin: 0 auto; padding: 40px 48px 64px;
        display: flex; flex-direction: column; gap: 30px; }
.page.narrow { max-width: 780px; }

h1.big { font-family: var(--serif); font-weight: 500; font-size: 32px; margin: 0;
         letter-spacing: -.01em; }
.lede2 { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }

/* A section head is a small caps label with a hairline running to the right
   of it — the only ruling on these pages. */
.sec { display: flex; align-items: baseline; gap: 10px; }
.sec span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.sec i { flex: 1; height: 1px; background: var(--rule); }
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.homegrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 34px; }

/* A list row: serif title, one line of grey excerpt, meta on the right. Used
   by Recently changed and by the tag listing. */
.rowlist { display: flex; flex-direction: column; }
.row {
  display: flex; gap: 16px; align-items: baseline; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: 7px;
}
.row:hover { background: var(--sunk); }
.row .grow { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.row .rtitle { font-family: var(--serif); font-size: 16.5px; color: var(--ink); }
.row .rsub { font-size: 12.5px; color: var(--ink-3);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .rmeta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }

.cards { display: flex; gap: 10px; flex-wrap: wrap; }
.card {
  padding: 9px 12px; border: 1px solid var(--rule); border-radius: 7px;
  display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0;
}
.card:hover { border-color: var(--accent-edge); }
.card .ctitle { font-family: var(--serif); font-size: 14.5px; color: var(--ink); }
.card .cpath { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }

.pinlist { display: flex; flex-direction: column; gap: 2px; }
.pinlink {
  display: flex; align-items: baseline; gap: 9px; padding: 4px 6px; border-radius: 5px;
  font-size: 14.5px; text-align: left;
}
.pinlink:hover { background: var(--sunk); }
.pinlink .ic { color: var(--accent); width: .7em; height: .7em; }
.pinlink span { font-family: var(--serif); color: var(--ink); }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { padding: 4px 10px; background: var(--sunk); color: var(--ink-2);
        border-radius: 999px; font-size: 12.5px; }
.chip:hover { background: var(--accent-soft); color: var(--accent-ink); }
.chip.on { background: var(--accent); color: var(--on-accent); font-weight: 500; }
.chip .n { color: var(--ink-3); margin-left: 5px; font-variant-numeric: tabular-nums; }
.chip.on .n { color: inherit; opacity: .7; }

.panel { padding: 13px 14px; border: 1px solid var(--rule); border-radius: 8px;
         display: flex; flex-direction: column; gap: 9px; font-size: 13px;
         color: var(--ink-2); line-height: 1.55; }
.panelrow { display: flex; gap: 9px; align-items: center; }
.ghostbtn { padding: 4px 10px; border: 1px solid var(--accent); color: var(--accent);
            border-radius: 6px; font-size: 12px; font-weight: 500; }
.ghostbtn:hover { background: var(--accent-soft); }
.ghostbtn:disabled { border-color: var(--rule-2); color: var(--ink-3); cursor: default; background: none; }

/* ---------- files view ---------- */
.filebox { display: flex; flex-direction: column; gap: 1px;
           border: 1px solid var(--rule); border-radius: 8px; padding: 8px; }
.filerow { display: flex; align-items: baseline; gap: 8px; width: 100%;
           padding: 6px 10px; border-radius: 5px; font-size: 13.5px; text-align: left; }
.filerow:hover { background: var(--sunk); }
.filerow .ic { color: var(--ink-3); width: .7em; height: .7em; }
.filerow.indent { padding-left: 30px; }
.filerow.dir { color: var(--ink-2); }
.filerow.other { color: var(--ink-3); cursor: default; }
.filerow.other:hover { background: none; }
.filerow .fmeta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ---------- tree ---------- */
#tree { border-right: 1px solid var(--rule); background: var(--paper-2);
        overflow-y: auto; min-height: 0; padding: .5rem 0 3rem; }
/* New note sits above the filter, outlined rather than tinted: it is the one
   thing in this column that writes, and everything below it only navigates. */
#tree-new {
  display: flex; align-items: center; gap: 8px;
  width: calc(100% - 1rem); margin: .25rem .5rem .75rem; padding: .45rem .6rem;
  font: inherit; font-size: 13px; color: var(--ink); text-align: left;
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 6px;
  cursor: pointer;
}
#tree-new:hover { background: var(--accent-soft); border-color: var(--accent-edge);
                  color: var(--accent-ink); }
#tree-new .plus { color: var(--accent); font-size: 13px; line-height: 1; }

#filter {
  width: calc(100% - 1rem); margin: .25rem .5rem .5rem; padding: .35rem .5rem;
  font: inherit; font-size: 13px; background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--rule);
}
#filter::placeholder { color: var(--ink-3); }
/* Rows are divs with role="button", not <button>, because a real button will
   not start a drag. They therefore have to bring their own button-ness. */
.node { display: flex; align-items: baseline; gap: .4rem; width: 100%; text-align: left;
        padding: .25rem .5rem .25rem 0; line-height: 1.45; font-size: 13.5px;
        color: inherit; background: none; border: 0;
        border-radius: 5px; cursor: pointer; user-select: none; -webkit-user-select: none;
        touch-action: none; transition: background .08s ease; }
.node:hover { background: var(--rule); }
.node.sel { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.node.sel .nm { color: var(--accent); font-weight: 500; }
.node .tw { width: .85rem; flex: none; color: var(--ink-3); font-size: 10px; }
.node .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir > .nm { color: var(--ink-2); }
.kids.hid { display: none; }
/* A note with unsaved edits is marked where you would look for it. */
.node .dirty { flex: none; color: var(--flag-ink); font-size: 9px; }

/* ---------- pinned ---------- */
/* Deliberately not hover-to-reveal: the sidebar is reachable on a phone
   through the Files toggle, where there is no hover and a hidden control is
   simply gone. Dim is enough. */
#pinned { padding: .15rem 0 .55rem; }
#pinned:empty { display: none; }
.sechead { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px;
           text-transform: uppercase; letter-spacing: .08em; margin: .3rem .5rem .3rem 8px; }
.pinrow { display: flex; align-items: stretch; border-radius: 5px; }
.pinrow:hover { background: var(--rule); }
.pinrow .node { padding-left: 8px; }
.pinrow .node:hover { background: none; }
.node.missing .nm { color: var(--warn); text-decoration: line-through; }
.unpin { flex: none; padding: 0 .55rem; color: var(--ink-3); font-size: 15px;
         line-height: 1; opacity: .4; }
.pinrow:hover .unpin, .unpin:focus-visible { opacity: 1; }
.unpin:hover { color: var(--warn); }

/* ---------- dragging ---------- */
/* The drop target is a folder and everything in it, so the highlight is on the
   whole block. Regions nest; aimAt lights only the innermost one under the
   pointer, and the tree's own background stands for the repository root. */
.folder { border-radius: 5px; }
.folder.drop, #treelist.drop {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.folder.drop > .node.dir > .nm { color: var(--accent); font-weight: 500; }
#treelist.drop { min-height: 60px; }

/* Rows are grabbable, but only once a drag is actually under way — a grab
   cursor on every row would suggest the whole tree is furniture to be moved. */
body.dragging { cursor: grabbing; }
body.dragging .node { cursor: grabbing; }
body.dragging .node:hover { background: none; }

/* Follows the cursor. pointer-events: none matters: without it the ghost is
   the only thing ever under the pointer and elementFromPoint finds no target. */
.ghost {
  position: fixed; z-index: 60; pointer-events: none;
  padding: .25rem .55rem; border-radius: 5px;
  background: var(--accent); color: var(--on-accent);
  font-size: 12px; font-family: var(--mono);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* Only shown mid-drag, and sticky so it stays reachable in a long tree. */
#droproot {
  position: sticky; top: 0; z-index: 2;
  margin: .1rem .5rem .4rem; padding: .45rem .5rem;
  background: var(--paper-2);
  border: 1px dashed var(--rule-2); border-radius: 5px;
  color: var(--ink-3); font-size: 12px; text-align: center;
}

/* ---------- the pane ---------- */
#pane { position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 0; }
#reading { overflow-y: auto; min-width: 0; min-height: 0; }
#editor, #previewwrap, #empty { display: none; }

body.m-source #reading, body.m-split #reading { display: none; }
body.m-source #editor, body.m-split #editor { display: block; }
body.m-split #previewwrap { display: block; }
body.m-split #pane { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.noopen #reading, body.noopen #editor, body.noopen #previewwrap { display: none; }
body.noopen #empty { display: block; }

#empty { color: var(--ink-3); padding: 3rem 2rem; max-width: 40rem; margin: 0 auto; line-height: 1.7; }
#empty code { font-family: var(--mono); font-size: 12.5px; background: var(--sunk);
              padding: .1em .35em; border-radius: 3px; }

#editor {
  width: 100%; height: 100%; padding: 44px max(2rem, calc(50% - 21rem)) 90px;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.7;
  background: var(--paper); color: var(--ink); border: 0; resize: none; outline: none;
}
body.m-split #editor { padding: 30px 24px 60px; }
#previewwrap { overflow-y: auto; min-height: 0; border-left: 1px solid var(--rule);
               background: var(--paper-2); }

/* The preview parses the whole body in one pass, so a note's own "# Title" is
   an ordinary first h1 rather than the document head the reading column
   builds. Given the same size so the two columns agree. */
#preview .docbody > h1:first-child {
  font-weight: 500; font-size: 38px; line-height: 1.12; letter-spacing: -.01em;
  margin: 0 0 28px; padding-bottom: 22px; border-bottom: 1px solid var(--rule);
}
#preview { max-width: var(--measure); margin: 0 auto; padding: 30px 28px 80px; }

/* ---------- the document ---------- */
#doc, #preview {
  font-family: var(--serif); font-size: 18px; line-height: 1.68; color: var(--ink);
}
#doc { max-width: var(--measure); margin: 0 auto; padding: 44px 40px 90px; }

/* The document head: one serif title and one quiet byline, in place of a
   frontmatter table. Everything else about the file is in the rail. */
.dochead { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.doctitle { font-family: var(--serif); font-weight: 500; font-size: 38px; line-height: 1.12;
            letter-spacing: -.01em; margin: 0 0 14px; }
.byline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
          font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); }
.byline .dot { color: var(--rule-2); }
.byline .chip { padding: 2px 9px; font-size: 11.5px; }

#doc h1, #doc h2, #doc h3, #doc h4,
#preview h1, #preview h2, #preview h3, #preview h4 {
  font-weight: 600; line-height: 1.28; margin: 1.7em 0 .5em;
}
#doc h1, #preview h1 { font-size: 1.75em; font-weight: 500; margin-top: 1.2em; }
#doc h2, #preview h2 { font-size: 1.22em; }
#doc h3, #preview h3 { font-size: 1.06em; }
#doc p, #preview p { margin: 0 0 1em; text-wrap: pretty; }
#doc li, #preview li { margin: 0 0 .35em; }
#doc ul, #doc ol, #preview ul, #preview ol { margin: 0 0 1em; padding-left: 1.3em; }
#doc a, #preview a { color: var(--accent); text-decoration: none;
                     border-bottom: 1px solid var(--accent-edge); }
#doc a:hover { border-bottom-color: var(--accent); }
#doc a.missing { color: var(--warn); border-bottom: 1px dotted var(--warn); }
#doc a.ext::after, #preview a.ext::after { content: "\2197"; font-size: .7em; vertical-align: super; opacity: .5; }
#doc code, #preview code { font-family: var(--mono); font-size: .78em; background: var(--sunk);
                           padding: .1em .3em; border-radius: 3px; }
#doc pre, #preview pre {
  background: var(--sunk); border: 1px solid var(--rule); border-radius: 6px;
  padding: 12px 14px; overflow-x: auto; margin: 0 0 1.2em;
  /* Named here and not only on the <code> inside, because the block editor
     puts a textarea in this element and it inherits from here. */
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
}
#doc pre code, #preview pre code { background: none; padding: 0; font-size: 13px; line-height: 1.6; }
#doc blockquote, #preview blockquote {
  margin: 0 0 1.2em; padding: 2px 0 2px 18px; border-left: 2px solid var(--accent-edge);
  color: var(--ink-2); font-style: italic;
}
#doc table, #preview table { border-collapse: collapse; width: 100%;
                             font-family: var(--sans); font-size: 14px; }
#doc th, #doc td, #preview th, #preview td {
  text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--rule);
}
#doc th, #preview th { font-weight: 600; }
#doc hr, #preview hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }

/* GFM task lists. marked renders them as a plain <li> holding a checkbox, so
   without this you get a bullet and a box on the same line. :has() is what
   tells the two kinds of list item apart, since there is no class to match. */
#doc li:has(> input[type="checkbox"]),
#preview li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.35em; }
#doc li > input[type="checkbox"],
#preview li > input[type="checkbox"] {
  width: .8em; height: .8em; margin: 0 .55em 0 0;
  accent-color: var(--accent);
  vertical-align: baseline;
}
/* Inert while reading and live while editing — ticking a box edits the file,
   so it belongs in a draft. Dimmed rather than greyed: it is showing a fact,
   not refusing a click. */
#doc li > input[type="checkbox"]:disabled { opacity: .7; cursor: default; }
#doc li > input[type="checkbox"]:not(:disabled) { cursor: pointer; }
#doc li:has(> input:checked), #preview li:has(> input:checked) { color: var(--ink-3); }
#doc img, #preview img { max-width: 100%; }

/* Linked from, under the document. Text only, and the excerpt is sliced from
   the note that did the linking — never its HTML. */
.backlinks { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--rule);
             display: flex; flex-direction: column; gap: 12px; font-family: var(--sans); }
.backlinks .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ---------- non-markdown files ---------- */
/* The reading column is a serif measure built for prose. Source files want the
   opposite: monospace, full width, and no line-length limit. */
#doc.kind-text, #doc.kind-image, #doc.kind-unviewable {
  max-width: none; font-family: var(--sans); font-size: 14px;
}
#doc.kind-text pre {
  background: var(--raised); border: 1px solid var(--rule); border-radius: 6px;
  padding: .9rem 1rem; overflow-x: auto; margin: 0;
}
#doc.kind-text code { font-size: 12.5px; line-height: 1.6; background: none; padding: 0; }

.imgwrap {
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: var(--raised);
  border: 1px solid var(--rule); border-radius: 6px;
}
.imgwrap img { max-width: 100%; height: auto; }

.notice {
  max-width: 32rem; margin: 2rem auto; padding: 1.5rem;
  background: var(--raised); border: 1px solid var(--rule); border-radius: 8px;
  text-align: center; line-height: 1.6; color: var(--ink-2);
}
.notice .nh { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); margin: 0 0 .4rem; }
.notice p { margin: 0 0 1rem; }
.notice a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-edge); }

/* Non-markdown entries stay visible but recede, so the knowledge base still
   reads as the point of the tree. */
.node.other .nm { color: var(--ink-3); }
.node.other.sel .nm { color: var(--accent); }

/* ---------- in-place block editing ----------

   There is no block chrome, on purpose. The block is a slice of the file
   computed on the fly, not a thing the document contains, and the editor
   should not claim otherwise: clicking a paragraph replaces the rendered text
   with its own markdown, in the same element, at the same size, in the same
   place. The only visible change is that the markers appear and a caret shows
   up.

   That is why the editor's element is an <h2> or a <p> or a <pre> rather than
   a generic wrapper — the rules that render a heading are the rules that show
   its source, so there is no second copy of the document's typography to keep
   in step, and nothing reflows on the way in or out. */
.blk { cursor: text; }
.blk textarea {
  width: 100%; display: block; padding: 0; border: 0; outline: none;
  background: none; resize: none; overflow: hidden;
  font: inherit; color: inherit; letter-spacing: inherit;
}
/* A textarea does not inherit these two the way the rest of the font shorthand
   inherits, and a heading whose source sat on the wrong baseline would give the
   whole trick away. */
.blk textarea { line-height: inherit; text-align: inherit; }
/* Lists and tables have no element of their own to borrow spacing from. */
.raw-list, .raw-table { margin: 0 0 1em; }

/* The last line of the document, which is where a new block starts. Drawn in
   the document's own type so it reads as the next empty paragraph rather than
   as a button sitting under the text. */
.addblock {
  display: block; width: 100%; text-align: left; padding: 0; margin: 0 0 1em;
  font: inherit; color: var(--ink-3); cursor: text;
}
.addblock:hover { color: var(--ink-2); }

/* ---------- the rail ---------- */
#rail { border-left: 1px solid var(--rule); background: var(--paper-2);
        display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#rail[hidden] { display: none; }
/* flex: 1 and min-height: 0 together. Without the second one a flex item
   refuses to shrink below its content, so the rail would push past the bottom
   of the window instead of scrolling. */
#railbody { flex: 1; min-height: 0; padding: 14px 16px 30px; overflow-y: auto;
            display: flex; flex-direction: column; gap: 22px; }
.railsec { display: flex; flex-direction: column; gap: 9px; }
.railsec > .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.railnote { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

.toc { display: flex; flex-direction: column; gap: 1px; }
.toc a { display: block; color: var(--ink-2); text-decoration: none;
         font-size: 13px; line-height: 1.45; padding: 4px 0 4px 11px;
         border-left: 2px solid transparent; }
.toc a:hover { color: var(--accent); }
/* The heading currently on screen, from an IntersectionObserver over the
   document. */
.toc a.here { color: var(--accent); border-left-color: var(--accent); font-weight: 500; }
.toc a[data-l="3"] { padding-left: 22px; font-size: 12.5px; }
.toc a[data-l="4"] { padding-left: 33px; font-size: 12.5px; }

.linkrow { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px;
           text-align: left; color: var(--ink); padding: 1px 0; }
.linkrow:hover { color: var(--accent); }
.linkrow .ic { width: .6em; height: .6em; color: var(--accent); }
.linkrow.gone { color: var(--warn); cursor: default; }
.linkrow.gone .ic { color: var(--warn); }
.linkrow .why { color: var(--ink-3); }

.fm { margin: 0; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.fm div { display: flex; gap: .5rem; line-height: 1.5; }
.fm dt { color: var(--ink-3); flex: none; min-width: 4.5rem; font-family: var(--mono); font-size: 11.5px; }
.fm dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.path { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); word-break: break-all; line-height: 1.5; }

/* ---------- diffs ---------- */
.diff { border: 1px solid var(--rule-2); border-radius: 7px; overflow: hidden;
        background: var(--paper); font-family: var(--mono); font-size: 11.5px; line-height: 1.7; }
.diff .hunk { padding: 4px 9px; background: var(--hunk-bg); color: var(--ink-3);
              font-size: 10.5px; letter-spacing: .05em; }
.diff .d { padding: 3px 9px; white-space: pre-wrap; word-break: break-word; }
.diff .d.del { background: var(--del-bg); color: var(--del-ink); }
.diff .d.add { background: var(--add-bg); color: var(--add-ink); }
.diff .d.same { color: var(--ink-3); }
.commitmsg {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 12.5px; line-height: 1.5;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: 6px; resize: vertical;
}
.commitmsg:focus { outline: none; border-color: var(--accent); }

/* ---------- history panel ---------- */
/* A column beside the note, on the same track as the rail — not a sheet over
   it. The document stays where it is, only narrower, which is the whole point
   of answering a question about it without taking it off the screen. */
#drawer { border-left: 1px solid var(--rule); background: var(--paper);
          display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#drawer[hidden] { display: none; }
#drawerbox { display: flex; flex-direction: column; flex: 1;
             min-width: 0; min-height: 0; }
.drawerhead { display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 44px;
              flex: none; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.drawerhead b { font-size: 12.5px; font-weight: 500; }
.drawertop { padding: 16px 20px 0; flex: none; display: flex; flex-direction: column; gap: 4px; }
.drawertop .count { font-family: var(--serif); font-size: 18px; }
#drawerlist { padding: 14px 12px 20px; overflow-y: auto; flex: 1; min-height: 0;
              display: flex; flex-direction: column; gap: 4px; }
.drawerfoot { flex: none; border-top: 1px solid var(--rule); background: var(--paper-2);
              padding: 10px 16px; display: flex; align-items: center; gap: 14px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.check input { accent-color: var(--accent); }

.ver { border: 1px solid transparent; border-radius: 9px; }
.ver.open { border-color: var(--accent-edge); background: var(--accent-soft); overflow: hidden; }
.verhead { width: 100%; padding: 11px 12px; display: flex; align-items: baseline; gap: 12px;
           text-align: left; border-radius: 8px; }
.verhead:hover { background: var(--sunk); }
.ver.open .verhead { background: var(--accent-soft); border-radius: 0; }
.ver.open .verhead:hover { background: var(--accent-soft); }
.verhead .grow { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.verhead .vmsg { font-size: 13.5px; font-weight: 500; color: var(--ink);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ver.open .verhead .vmsg { color: var(--accent-ink); }
.verhead .vmeta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
                  display: flex; gap: 7px; }
.verhead .ic { width: .7em; height: .7em; color: var(--ink-3); }
.verbody { padding: 12px; display: flex; flex-direction: column; gap: 12px; background: var(--paper); }
.verbody .top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.badge { padding: 4px 10px; background: var(--accent-soft); color: var(--accent-ink);
         border-radius: 999px; font-size: 11px; font-weight: 500; }
.tag-chore { padding: 1px 7px; border-radius: 999px; background: var(--sunk);
             color: var(--ink-3); font-size: 10.5px; font-family: var(--mono); }

/* ---------- full-screen compare ---------- */
#compare { position: fixed; inset: 0; z-index: 90; background: var(--paper);
           display: flex; flex-direction: column; }
#compare[hidden] { display: none; }
.comparehead { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 48px;
               flex: none; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
#comparebody { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px 60px; }

/* ---------- palette ---------- */
#pal { position: fixed; inset: 0; background: rgba(25,25,24,.28); display: none;
       align-items: flex-start; justify-content: center; z-index: 95; }
#pal.on { display: flex; }
#palbox { margin-top: 12vh; width: min(34rem, 92vw); background: var(--paper);
          border: 1px solid var(--rule-2); border-radius: 10px; overflow: hidden;
          box-shadow: 0 22px 60px rgba(25,25,24,.24); }
#palq { width: 100%; padding: .85rem 1rem; font: inherit; font-size: 15px; border: 0;
        border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); }
#palq:focus { outline: none; }
#palq::placeholder { color: var(--ink-3); }
#palist { max-height: 22rem; overflow-y: auto; padding: 6px; }
.pi { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
      padding: 8px 11px; border-radius: 6px; }
.pi .b { flex: 1; font-family: var(--serif); font-size: 15px; color: var(--ink);
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi .p { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.pi.on { background: var(--accent-soft); }
.pi.on .b { color: var(--accent-ink); font-weight: 500; }
.palnone { padding: 14px 12px; font-size: 13px; color: var(--ink-3); }

/* ---------- context menu ---------- */
/* Positioned from the pointer and flipped when it would leave the viewport,
   so a right-click at the bottom of a long sidebar opens upwards. */
.menu {
  position: fixed; z-index: 100; min-width: 13rem; padding: .3rem;
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 8px;
  box-shadow: 0 10px 34px rgba(0,0,0,.20), 0 2px 6px rgba(0,0,0,.08);
  animation: pop .09s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(-3px) scale(.985); } }
.mi {
  display: flex; align-items: baseline; gap: .6rem; width: 100%;
  padding: .32rem .5rem; border-radius: 5px; text-align: left;
  font-size: 13px; color: var(--ink); line-height: 1.5;
}
.mi .milabel { flex: 1; }
.mi .mihint { flex: none; font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
.mi.on:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.mi.on:not(:disabled) .mihint { color: var(--accent); }
.mi.danger { color: var(--warn); }
.mi.danger.on { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.mi:disabled { color: var(--ink-3); cursor: default; }
.mi:focus-visible { outline: none; }
.msep { height: 1px; margin: .3rem .4rem; background: var(--rule); }

/* ---------- dialogs ---------- */
/* Replacing prompt() and confirm(): those block the page, cannot be styled,
   and read as a browser warning rather than part of the application. */
.sheet {
  position: fixed; inset: 0; z-index: 110; display: flex;
  align-items: flex-start; justify-content: center;
  background: rgba(25,25,24,.28); animation: fade .12s ease-out;
}
@keyframes fade { from { opacity: 0; } }
.sheetbox {
  margin-top: 18vh; width: min(26rem, 92vw); padding: 1.1rem 1.2rem 1rem;
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 10px;
  box-shadow: 0 20px 56px rgba(0,0,0,.26);
  animation: rise .14s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.sheettitle { margin: 0 0 .7rem; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.sheetbody { margin: -.3rem 0 .9rem; color: var(--ink-2); line-height: 1.55; font-size: 13px; }
.sheetinput {
  width: 100%; padding: .5rem .6rem; font: inherit; font-family: var(--mono); font-size: 13px;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: 5px;
}
.sheetinput:focus { outline: none; border-color: var(--accent); }
.sheeterr { margin: .45rem 0 0; color: var(--warn); font-size: 12.5px; line-height: 1.4; }
.sheetrow { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.sheetbtn {
  padding: .4rem .85rem; border-radius: 6px; font-size: 13px;
  color: var(--ink-2); border: 1px solid transparent;
}
.sheetbtn:hover { background: var(--sunk); color: var(--ink); }
.sheetbtn.primary { background: var(--accent); color: var(--on-accent); font-weight: 500; }
.sheetbtn.primary:hover { background: var(--accent-hi); }
.sheetbtn.danger { background: var(--warn); color: var(--on-accent); font-weight: 500; }
.sheetbtn.danger:hover { filter: brightness(1.08); }

/* ---------- narrow ---------- */
/* The rail folds into nothing, and below 900px the history panel takes the
   whole width — the mobile answer without a second layout. */
@media (max-width: 1100px) {
  #view-note.on { grid-template-columns: var(--tree-w) minmax(0, 1fr); }
  #rail { display: none; }
  #searchbtn { width: 44px; }
  #searchbtn .lbl, #searchbtn .kbd { display: none; }
}
@media (max-width: 900px) {
  #view-note.on { grid-template-columns: minmax(0, 1fr); }
  #tree { display: none; }
  body.nav #tree { display: block; position: absolute; inset: 0 auto 0 0;
                   width: var(--tree-w); z-index: 30; overflow-y: auto; }
  #doc { padding: 28px 20px 70px; font-size: 17px; }
  .doctitle { font-size: 30px; }
  .page { padding: 28px 20px 60px; }
  .homegrid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .backlinks .grid { grid-template-columns: minmax(0, 1fr); }
  /* No room for a column beside the note, so history takes the screen. */
  #view-note.on.hist { grid-template-columns: minmax(0, 1fr); }
  #view-note.on.hist #pane, #view-note.on.hist #tree { display: none; }
  .repo { display: none; }
  body.m-split #pane { grid-template-columns: minmax(0, 1fr); }
  body.m-split #previewwrap { display: none; }
}
@media (min-width: 901px) { #navtoggle { display: none; } }

/* ---------- refinement ---------- */
/* Opening a note settles it into place. Deliberately not while editing: the
   block editor redraws the column every time focus moves, and a document that
   faded in on every click would be unusable. */
body:not(.editing) #doc { animation: settle .16s ease-out; }
@keyframes settle { from { opacity: 0; transform: translateY(4px); } }