:root {
  /* dracula — default scheme of the desktop clone */
  --bg: #282a36;
  --fg: #f8f8f2;
  --muted: #8a8fa8;
  --sel: #44475a;
  --sel-dim: #363847;
  --tree-bg: #21222c;
  --line: #3a3c4e;
  --link: #8be9fd;
  --accent: #bd93f9;
  --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-font: Consolas, ui-monospace, "Cascadia Mono", Menlo, monospace;
  --text-size: 15px;
  --side-w: 280px;
  --edit-pad: 14px; /* the text's left and right padding (wrap.js widens the right one) */
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff;
    --fg: #24292f;
    --muted: #6e7781;
    --sel: #cfe3ff;
    --sel-dim: #e8eef6;
    --tree-bg: #f6f8fa;
    --line: #d8dee4;
    --link: #0969da;
    --accent: #8250df;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font: 14px/1.4 var(--ui-font); overflow: hidden; }
button { font: inherit; color: inherit; }

#app { display: flex; height: 100dvh; }

#side {
  width: var(--side-w); min-width: 120px; max-width: 70vw;
  background: var(--tree-bg); display: flex; flex-direction: column;
}
#tree {
  flex: 1; overflow: auto; padding: 4px 0; outline: none;
  font-size: 14px; user-select: none; overscroll-behavior: contain;
}
.row {
  display: flex; align-items: center; height: 24px; padding-right: 8px;
  white-space: nowrap; cursor: default; position: relative;
}
.row .tw {
  width: 18px; flex: none; text-align: center; color: var(--muted);
  font-size: 10px; cursor: pointer;
}
.row .t { overflow: hidden; text-overflow: ellipsis; padding: 1px 4px; border-radius: 3px; }
.row.sel .t { background: var(--sel-dim); }
#tree:focus .row.sel .t, #tree:focus-within .row.sel .t { background: var(--sel); outline: 1px solid var(--accent); }
.row:hover .t { background: var(--sel-dim); }
.row.hit .t { font-weight: 700; color: var(--fg); }
.row.thit .t { font-style: italic; }
.row.thit .t::after { content: " ·"; color: var(--accent); font-style: normal; }
#filterbar {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-bottom: 1px solid var(--line); flex: none;
}
#filter {
  flex: 1; min-width: 0; height: 28px; padding: 0 8px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  font: 14px var(--ui-font); outline: none;
}
#filter:focus { border-color: var(--accent); }
#fscope {
  max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--accent); font-size: 12px;
}
#fcount { color: var(--muted); font-size: 12px; min-width: 1.5em; text-align: right; }
#find, #add, #helpbtn, #more { background: none; border: 0; font-size: 18px; line-height: 1; padding: 0 4px; color: var(--muted); cursor: pointer; }
#find:hover, #add:hover, #helpbtn:hover, #more:hover { color: var(--fg); }
#more { font-weight: 700; letter-spacing: 1px; }
#helpbtn { font-size: 15px; font-weight: 600; }
#linkchip {
  flex: 0 1 auto; min-width: 0; max-width: 40%; height: 22px; padding: 0 10px; border-radius: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--link); background: none; color: var(--link); font-size: 12px;
}
#linkchip:hover { background: var(--sel-dim); }
#linkchip[hidden] { display: none; }
#linkchip.hover { border-style: dashed; } /* the link under the mouse, not the one at the cursor */
#links {
  flex: none; display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px;
  cursor: pointer; border: 1px solid var(--line); background: none; color: var(--muted); font-size: 12px;
}
#links:hover { color: var(--link); border-color: var(--link); }
#links[hidden] { display: none; }
#editor.onlink { cursor: pointer; }
#fmode {
  flex: none; height: 24px; padding: 0 8px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: none; color: var(--muted); font-size: 12px;
}
#fmode:hover { color: var(--fg); border-color: var(--muted); }
#fmode.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
#help {
  position: fixed; inset: 0; z-index: 35; display: grid; place-items: center;
  background: rgba(0,0,0,.45); padding: 16px; outline: none;
}
#help[hidden] { display: none; }
#help .panel {
  width: min(760px, 100%); max-height: 100%; overflow: auto; padding: 18px 22px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 32px; align-items: start;
}
#help h2 { grid-column: 1 / -1; margin: 0 0 8px; font-size: 17px; font-weight: 600; }
#help section { margin-bottom: 12px; }
#help h3 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
#help dl { display: grid; grid-template-columns: minmax(0, 11em) 1fr; gap: 4px 12px; margin: 0; }
#help dt { font: 12px/1.5 var(--text-font); color: var(--fg); }
#help dd { margin: 0; color: var(--muted); font-size: 13px; }
#crumb b { cursor: text; }
#crumb a { color: inherit; text-decoration: none; border-radius: 3px; }
#crumb a:hover { color: var(--fg); text-decoration: underline; }
#dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
#dot[data-state="ok"] { background: #50fa7b; opacity: .6; }
#dot[data-state="busy"] { background: #f1fa8c; }
#dot[data-state="off"] { background: #ffb86c; }
#dot[data-state="err"] { background: #ff5555; }
.row .ren {
  flex: 1; min-width: 60px; height: 22px; padding: 0 4px; margin-right: 4px;
  font: inherit; color: var(--fg); background: var(--bg);
  border: 1px solid var(--accent); border-radius: 3px; outline: none;
}
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 37;
  max-width: min(560px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 6px;
  background: var(--sel); color: var(--fg); border: 1px solid var(--accent);
  box-shadow: 0 4px 20px rgba(0,0,0,.35); cursor: pointer;
}
#toast[hidden], #login[hidden] { display: none; }
#login {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: var(--bg); padding: 16px;
}
#login .box { display: flex; flex-direction: column; gap: 10px; width: min(320px, 100%); }
#login h1 { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
#login input, #login button {
  height: 40px; padding: 0 12px; border-radius: 6px; font-size: 16px;
  border: 1px solid var(--line); background: var(--tree-bg); color: var(--fg);
}
#login input:focus { outline: none; border-color: var(--accent); }
#login button { background: var(--accent); color: var(--bg); border: 0; font-weight: 600; cursor: pointer; }
#loginmsg { margin: 0; min-height: 1.4em; color: #ff5555; }
.row .n { margin-left: 6px; color: var(--muted); font-size: 11px; }

#split { width: 5px; flex: none; cursor: col-resize; background: var(--line); opacity: .5; }
#split:hover, #split.drag { opacity: 1; background: var(--accent); }

#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#bar {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px;
  border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px;
}
#nav { display: flex; flex: none; margin-left: -6px; }
#nav .nav {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--muted); cursor: pointer;
}
#nav .nav svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
#nav .nav:hover:not(:disabled) { color: var(--fg); background: var(--sel-dim); }
#nav .nav:focus-visible { outline: 1px solid var(--accent); }
#nav .nav:disabled { opacity: .35; cursor: default; }
#crumb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#crumb b { color: var(--fg); font-weight: 600; }
#status { white-space: nowrap; }
#tools, #scrim { display: none; }

#editor {
  flex: 1; width: 100%; resize: none; border: 0; outline: none; margin: 0;
  padding: 10px var(--edit-pad); background: var(--bg); color: var(--fg);
  font: var(--text-size)/1.5 var(--text-font); tab-size: 4; caret-color: var(--caret, var(--fg));
  scrollbar-gutter: stable; /* the wrap column mustn't move when a scrollbar appears */
}
#editor::selection { background: var(--sel); }
#editor.nowrap { white-space: pre; overflow-wrap: normal; overflow-x: auto; }

/* The wrap ruler: a tick per column, longer every 5 and 10, numbers every 10. */
#ruler {
  position: relative; flex: none; height: 16px; overflow: hidden; cursor: col-resize;
  touch-action: none; user-select: none; -webkit-user-select: none;
  border-bottom: 1px solid var(--line); background-color: var(--bg);
  background-image:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px var(--cw)),
    repeating-linear-gradient(to right, var(--muted) 0 1px, transparent 1px calc(var(--cw) * 5)),
    repeating-linear-gradient(to right, var(--muted) 0 1px, transparent 1px calc(var(--cw) * 10));
  background-size: 100% 4px, 100% 6px, 100% 10px;
  background-position: var(--x0) 100%, var(--x0) 100%, var(--x0) 100%;
  background-repeat: no-repeat;
}
#ruler[hidden] { display: none; }
#ruler .rticks span {
  position: absolute; top: 1px; padding-left: 3px; font: 9px/1 var(--ui-font); color: var(--muted); pointer-events: none;
}
#ruler .rhandle { position: absolute; top: 0; bottom: 0; width: 14px; margin-left: -7px; outline: none; cursor: col-resize; }
#ruler .rhandle::before {
  content: ""; position: absolute; left: 1px; top: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--accent);
}
#ruler .rhandle::after { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 1px; background: var(--accent); }
#ruler .rhandle.fit::before { border-top-color: var(--muted); }
#ruler .rhandle.fit::after { background: var(--muted); }
#ruler .rhandle:focus-visible::before { border-top-color: var(--fg); }
#ruler .rlabel {
  position: absolute; top: 2px; display: none; transform: translateX(calc(-100% - 9px)); pointer-events: none;
  padding: 0 4px; border-radius: 3px; font: 600 10px/12px var(--ui-font); color: var(--bg); background: var(--accent);
}
#ruler.drag .rlabel, #ruler:hover .rlabel, #ruler .rhandle:focus-visible + .rlabel { display: block; }

#strip {
  display: flex; gap: 8px; padding: 8px 10px; overflow-x: auto; flex: none;
  border-top: 1px solid var(--line); background: var(--tree-bg); scrollbar-width: thin;
}
#strip[hidden] { display: none; }
#strip .tile {
  flex: none; height: 96px; min-width: 48px; padding: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; overflow: hidden; border: 1px solid var(--line); background: var(--bg);
  cursor: pointer; outline-offset: 2px; position: relative;
}
#strip .tile:focus-visible { outline: 2px solid var(--accent); }
#strip .tile:hover { border-color: var(--muted); }
#strip img { height: 100%; width: auto; display: block; }
#strip .wait, #strip .doc, #strip .up { width: 96px; }
#strip .wait { background: linear-gradient(90deg, var(--bg), var(--sel-dim), var(--bg)) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
#strip .doc, #strip .up { flex-direction: column; gap: 6px; padding: 6px; }
#strip .doc b { font-size: 15px; color: var(--accent); }
#strip .doc span, #strip .up span {
  max-width: 100%; font-size: 11px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
#strip .up { cursor: default; border-style: dashed; }
#strip .up i { width: 100%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--p, 0%), var(--line) 0); }
#attach, #wrapbtn { background: none; border: 0; padding: 0 4px; color: var(--muted); cursor: pointer; display: flex; }
#attach:hover, #wrapbtn:hover { color: var(--fg); }
#wrapbtn.on { color: var(--accent); }
#main { position: relative; }
#main.drop::after {
  content: "Drop to attach to this page"; position: absolute; inset: 6px; z-index: 5; pointer-events: none;
  display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--accent); font-size: 16px;
}

#viewer {
  position: fixed; inset: 0; z-index: 36; background: #0d0d10f2; color: #eee;
  display: flex; flex-direction: column; outline: none;
}
#viewer[hidden] { display: none; }
#viewer .vbar {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 14px; flex: none;
  font-size: 13px; background: #000a;
}
#viewer .vname { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewer .vinfo { flex: 1; color: #999; white-space: nowrap; overflow: hidden; }
#viewer .vbar button, #viewer .vdl {
  height: 28px; padding: 0 10px; border-radius: 4px; border: 1px solid #555; background: none;
  color: #eee; cursor: pointer; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center;
}
#viewer .vbar button:hover, #viewer .vdl:hover { background: #fff2; }
#viewer .vstage { flex: 1; position: relative; overflow: hidden; touch-action: none; cursor: grab; }
#viewer .vstage:active { cursor: grabbing; }
#viewer .vimg { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-select: none; }
#viewer .vpre { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: blur(3px); opacity: .7; }
/* Prev/next: round buttons centred on the image area (below the 40px bar). */
#viewer .vnav {
  position: absolute; top: calc(50% + 20px); transform: translateY(-50%);
  width: 48px; height: 48px; padding: 0; border: 1px solid #fff3; border-radius: 50%;
  display: grid; place-items: center; background: #000a; color: #fff; cursor: pointer;
  opacity: .6; transition: opacity .15s, background-color .15s; -webkit-tap-highlight-color: transparent;
}
#viewer .vnav svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
#viewer .vnav:hover, #viewer .vnav:focus-visible { opacity: 1; background: #000d; }
#viewer .vnav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#viewer .vnav:active { transform: translateY(-50%) scale(.92); }
#viewer .vnav[data-a=prev] { left: max(12px, env(safe-area-inset-left)); }
#viewer .vnav[data-a=next] { right: max(12px, env(safe-area-inset-right)); }
#viewer .vnav[hidden] { display: none; }

/* Phone: the tree slides in over the editor; a toolbar at the bottom. */
@media (max-width: 700px) {
  #split { display: none; }
  #side {
    position: fixed; inset: 0 auto 0 0; z-index: 10; width: 85vw; max-width: 420px;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .18s ease-out, visibility 0s .18s;
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
  }
  body.side-open #side {
    transform: none; visibility: visible; transition: transform .18s ease-out;
    box-shadow: 0 0 24px rgba(0,0,0,.4);
  }
  #side.drag { transition: none; }
  body.side-open #scrim {
    display: block; position: fixed; inset: 0; z-index: 9; background: rgba(0,0,0,.45);
  }
  #ruler { height: 22px; }
  #status, #bar #nav, #bar #links, #bar #wrapbtn, #bar #attach, #bar #add, #bar #find, #bar #helpbtn, #bar #more { display: none; }
  #bar { height: 40px; font-size: 14px; padding-top: env(safe-area-inset-top); box-sizing: content-box; }
  #crumb a { padding: 8px 0; }
  #linkchip { height: 28px; border-radius: 14px; font-size: 13px; max-width: 50%; }
  #tools {
    display: flex; flex: none; border-top: 1px solid var(--line); background: var(--tree-bg);
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  #tools button {
    flex: 1; min-width: 0; height: 52px; padding: 0; border: 0; background: none; color: var(--muted);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 10px; -webkit-tap-highlight-color: transparent;
  }
  #tools button:active { color: var(--fg); background: var(--sel-dim); }
  #tools button:disabled { opacity: .35; }
  #tools svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .row { height: 40px; font-size: 16px; }
  .row .tw { width: 28px; font-size: 12px; align-self: stretch; display: flex; align-items: center; justify-content: center; }
  #filter { height: 38px; font-size: 16px; }
  #fmode { height: 30px; }
  #editor { font-size: 16px; } /* avoids iOS zoom on focus */
  #strip .tile, #strip .wait, #strip .doc, #strip .up { height: 72px; }
  #strip .wait, #strip .doc, #strip .up { width: 72px; }
  #viewer .vbar [data-a=fit], #viewer .vbar [data-a=one] { display: none; }
  #viewer .vnav { width: 40px; height: 40px; opacity: .5; } /* smaller; swipe works too */
  #viewer .vnav svg { width: 20px; height: 20px; }
  #toast { bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* The ⋯ menu (a sheet at the bottom on phones) */
.menu {
  position: fixed; z-index: 34; min-width: 250px; max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px); overflow: auto; padding: 4px 0; outline: none;
  background: var(--tree-bg); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4); font-size: 13px; overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu h3 {
  margin: 8px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
}
.menu h3 span { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--fg); }
.menu .mi {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 5px 12px; border: 0; margin: 0;
  background: none; color: var(--fg); text-align: left; cursor: pointer; outline: none; font: inherit;
}
.menu .mi span { flex: 1; white-space: nowrap; }
.menu .mi .vals { display: grid; }
.menu .mi .vals > span { grid-area: 1 / 1; }
.menu .mi .vals > span + span { visibility: hidden; }
.menu .mi kbd { color: var(--muted); font: 11px var(--text-font); white-space: nowrap; }
.menu .mi:hover { background: var(--sel-dim); }
.menu .mi:focus { background: var(--sel); }
.menu .cyc { display: flex; align-items: stretch; }
.menu .cyc .mi { flex: 1; min-width: 0; }
.menu .arr {
  width: 32px; flex: none; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.menu .arr svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.menu .arr:hover { color: var(--fg); background: var(--sel-dim); }
.menu.sheet {
  left: 0; right: 0; bottom: 0; top: auto; max-width: none; max-height: 80dvh; border-radius: 14px 14px 0 0;
  padding: 6px 0 calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); /* dims the page behind */
}
.menu.sheet .mi { padding: 11px 18px; font-size: 15px; }
.menu.sheet h3 { margin: 10px 18px 2px; }
.menu.sheet .mi kbd { display: none; }
.menu.sheet .arr { width: 52px; font-size: 22px; }

/* [[ suggestions at the cursor, the backlinks list and Go to */
.popup {
  position: fixed; z-index: 34; min-width: 240px; max-width: min(520px, calc(100vw - 16px));
  max-height: min(320px, 45vh); display: flex; flex-direction: column; padding: 4px 0; outline: none;
  background: var(--tree-bg); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); font-size: 13px; overscroll-behavior: contain;
}
.popup[hidden] { display: none; }
.popup.dialog {
  left: 50%; top: 12vh; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); max-height: 70vh;
}
.popup h2 { margin: 6px 12px 8px; font-size: 14px; font-weight: 600; }
.popup h2[hidden], .popup .q[hidden] { display: none; }
.popup > div { overflow: auto; min-height: 0; overscroll-behavior: contain; }
.popup .q {
  margin: 0 12px 6px; padding: 6px 8px; font: inherit; font-size: 14px; color: inherit;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px; outline: none;
}
.popup .q:focus { border-color: var(--accent); }
.popup h3 {
  margin: 8px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.popup .none { margin: 6px 12px 8px; color: var(--muted); }
.popup .it { padding: 4px 12px; cursor: pointer; }
.popup .it > div { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; overflow: hidden; }
.popup .it b { font-weight: 600; flex: none; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
.popup .it .path, .popup .it small {
  color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.popup .it small { display: block; font-family: var(--text-font); }
.popup .it:hover { background: var(--sel-dim); }
.popup .it.on { background: var(--sel); }
@media (max-width: 700px) {
  .popup .it { padding: 8px 12px; font-size: 15px; }
  .popup .q { font-size: 16px; } /* 16px keeps iOS from zooming in */
}