@font-face {
  font-family: 'Fraunces';
  src: url(fonts/Fraunces.woff2) format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url(fonts/Fraunces-Italic.woff2) format('woff2');
  font-weight: 300 700; font-style: italic; font-display: swap;
}

* { box-sizing: border-box; margin: 0 }
:root {
  --bg: #0b0b14; --ink: #ece9e4; --dim: #8a8ab0;
  --cyan: #63e6d3; --purple: #b39dfb; --amber: #e6b17e; --green: #7fd88f;
  --hair: #26263a;
  --panel: #0d0d18f2; --field: #0e0e19; --pop: #10101c;
  --node-a: #1a2138; --node-b: #131a2c; --node-bd: #303c5e;
  --act-a: #20294a; --act-b: #182038; --act-bd: #5b8bd0; --act-glow: #5b8bd033;
  --wire: #43507a; --wire-dim: #2c3350;
  --header-fade: #0b0b14ee;
  --f-display: 'Fraunces', Georgia, serif;
  --f-text: 'Fraunces', Georgia, serif;
  --f-data: ui-monospace, 'SF Mono', Menlo, monospace;
}
:root[data-font="brain"] {
  --f-display: 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --f-data: 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
}
:root[data-theme="light"] {
  --bg: #f2f0ea; --ink: #23232e; --dim: #70708c;
  --cyan: #0d8a78; --purple: #6d4fd0; --amber: #b0741e; --green: #2e8c44;
  --hair: #d9d6cc;
  --panel: #faf9f5f2; --field: #ffffff; --pop: #ffffff;
  --node-a: #ffffff; --node-b: #f3f1ea; --node-bd: #c9c5b8;
  --act-a: #ffffff; --act-b: #eef1f8; --act-bd: #4a76c4; --act-glow: #4a76c422;
  --wire: #9aa4c4; --wire-dim: #c8cddf;
  --header-fade: #f2f0eaee;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg: #f2f0ea; --ink: #23232e; --dim: #70708c;
    --cyan: #0d8a78; --purple: #6d4fd0; --amber: #b0741e; --green: #2e8c44;
    --hair: #d9d6cc;
    --panel: #faf9f5f2; --field: #ffffff; --pop: #ffffff;
    --node-a: #ffffff; --node-b: #f3f1ea; --node-bd: #c9c5b8;
    --act-a: #ffffff; --act-b: #eef1f8; --act-bd: #4a76c4; --act-glow: #4a76c422;
    --wire: #9aa4c4; --wire-dim: #c8cddf;
    --header-fade: #f2f0eaee;
  }
}
html, body { height: 100% }
body {
  background: var(--bg); color: var(--ink);
  font: 13.5px/1.5 var(--f-data);
  overflow: hidden;
}

header {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 18px;
  background: linear-gradient(var(--header-fade), transparent);
}
h1 { font: 600 19px/1.2 var(--f-display); white-space: nowrap; letter-spacing: .01em }
h1 a { color: var(--ink); text-decoration: none }
.dim { color: var(--dim) }
#stats { font-size: 11px; font-weight: 400 }
.head-right { margin-left: auto; display: flex; gap: 14px; align-items: center }
.head-right a { color: var(--dim); text-decoration: none }
.head-right a:hover { color: var(--ink) }

button, input, textarea {
  font: inherit; color: var(--ink); background: transparent;
  border: 1px solid var(--hair); border-radius: 3px; padding: 5px 11px;
}
button { cursor: pointer }
button:hover { border-color: var(--dim) }
button.ghost { color: var(--dim); border-color: transparent }
button.ghost:hover { color: var(--ink); border-color: var(--hair) }
button.danger:hover { color: var(--amber); border-color: var(--amber) }
textarea { background: var(--field); width: 100%; resize: vertical }

.search-wrap { position: relative; flex: 0 1 340px }
#search { width: 100%; background: var(--field) }
#search-results {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
  background: var(--pop); border: 1px solid var(--hair); border-radius: 3px;
  max-height: 50vh; overflow-y: auto;
}
#search-results div { padding: 6px 11px; cursor: pointer }
#search-results div:hover, #search-results div.sel { background: var(--field); color: var(--cyan) }
#search-results .lb { color: var(--dim); font-size: 12px; margin-left: 8px }
#search-results div { display: flex; align-items: center; gap: 7px }
#search-results .lb { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.s-ic { width: 15px; height: 15px; border-radius: 3px; object-fit: cover }
.s-tag { color: var(--amber) }
.s-deg { color: var(--dim); font-size: 10.5px; margin-left: auto }

/* ---- plex ---- */
#plex-viewport {
  position: fixed; inset: 0; overflow: hidden; touch-action: none;
  cursor: grab; user-select: none;
}
#plex-viewport:active { cursor: grabbing }
#world { position: absolute; left: 0; top: 0; width: 0; height: 0 }
#wires { pointer-events: none; overflow: visible }

.node {
  position: absolute; left: 0; top: 0;
  max-width: 180px; padding: 4px 12px;
  white-space: nowrap;
  cursor: pointer; text-align: center;
  font-family: var(--f-display);
  background: linear-gradient(var(--node-a), var(--node-b));
  border: 1px solid var(--node-bd); border-radius: 7px;
  box-shadow: 0 2px 8px #00000055;
  transition: border-color .12s, box-shadow .12s;
}
/* activation choreography: exits fade first, movers travel, entries fade in last */
.node.n-move {
  transition: transform .85s cubic-bezier(.3,.75,.25,1) .1s,
    opacity .3s, border-color .12s, box-shadow .12s;
}
.node.n-enter { transition: opacity .48s ease .68s, border-color .12s, box-shadow .12s }
.node.n-exit {
  transition: opacity .42s ease, transform .42s ease;
  opacity: 0 !important;
}
.node:hover { border-color: var(--cyan); box-shadow: 0 0 12px #63e6d326; z-index: 5 !important }
.node.selected { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 14px #63e6d333 }
.node .row-nm { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0 }
.node .nm { display: block; overflow: hidden; text-overflow: ellipsis }
.node .ic { width: 18px; height: 18px; border-radius: 4px; flex: none; object-fit: cover }
.node .ic-emoji { font-size: 14px; line-height: 1; width: auto; height: auto; border-radius: 0 }
.z-active .ic-emoji { font-size: 19px }
.p-ic { width: 24px; height: 24px; border-radius: 5px; object-fit: cover; vertical-align: -3px }
.p-ic-emoji { font-size: 19px }
.s-ic-emoji { font-size: 13px; width: 15px; text-align: center }
.z-active .ic { width: 24px; height: 24px }
/* one-liner label floats below the card, TheBrain-style */
.node .lb {
  position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 230px;
  font: italic 12px/1.35 var(--f-text); color: var(--dim);
  white-space: normal; text-align: center;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.z-active .lb, .node:hover .lb { opacity: 1 }
.node .tp { display: block; font: 10.5px/1.4 var(--f-data); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; margin-top: 1px }
:root[data-font="brain"] .node { text-align: left }
:root[data-font="brain"] .node .row-nm { justify-content: flex-start }
:root[data-font="brain"] .node .lb { font-style: normal; font-size: 11px }
.node.k-tag .nm::before { content: '#'; color: var(--amber); margin-right: 2px }
.node.k-type { font-style: italic }
.node.expander { color: var(--dim); border-style: dashed }
.node.expander:hover { color: var(--cyan) }

.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip {
  font: 11.5px/1.6 var(--f-data); padding: 2px 10px; border: 1px solid var(--hair);
  border-radius: 20px; cursor: pointer; color: var(--dim); background: transparent;
  display: inline-flex; align-items: center; gap: 5px;
}
.chip img { width: 14px; height: 14px; border-radius: 3px; object-fit: cover }
.chip:hover { color: var(--cyan); border-color: var(--cyan) }
.chip.tag::before { content: '# '; color: var(--amber) }

#theme-btn { min-width: 34px }
#brain-sel, #font-sel {
  color: var(--dim); border-color: transparent; background: transparent;
  max-width: 220px; text-overflow: ellipsis;
}
#brain-sel:hover, #font-sel:hover { color: var(--ink); border-color: var(--hair) }
#brain-sel option, #font-sel option { background: var(--pop); color: var(--ink) }
progress {
  width: 100%; height: 6px; appearance: none; border: none;
  background: var(--hair); border-radius: 3px; overflow: hidden;
}
progress::-webkit-progress-bar { background: var(--hair) }
progress::-webkit-progress-value { background: var(--cyan) }
progress::-moz-progress-bar { background: var(--cyan) }
dialog.wide { width: min(560px, 94vw) }
.nb-intro { font: 13px/1.6 var(--f-text) }
.drop-zone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 34px 20px; cursor: pointer; text-align: center;
  border: 2px dashed var(--node-bd); border-radius: 10px;
  background: linear-gradient(var(--node-a), var(--node-b));
  transition: border-color .15s, box-shadow .15s;
}
.drop-zone:hover, .drop-zone.over { border-color: var(--cyan); box-shadow: 0 0 18px #63e6d322 }
.dz-big { font: 550 17px/1.3 var(--f-display) }
.dz-file { color: var(--cyan); font-size: 13px }
button.primary {
  color: var(--bg); background: var(--cyan); border-color: var(--cyan);
  font-weight: 600; padding: 8px 18px;
}
button.primary:hover { filter: brightness(1.1) }
button.primary:disabled { opacity: .5; cursor: default }
.z-active {
  max-width: 250px; font-size: 17px; font-weight: 550;
  background: linear-gradient(var(--act-a), var(--act-b));
  border: 1px solid var(--act-bd); border-radius: 8px;
  box-shadow: 0 0 22px var(--act-glow), 0 2px 10px #00000033;
  cursor: default; padding: 7px 18px;
}
.z-active:hover { border-color: var(--act-bd); box-shadow: 0 0 22px var(--act-glow), 0 2px 10px #00000033 }
.z-sibling {
  font-size: 11.5px; color: var(--dim); max-width: 150px; padding: 2px 9px;
  background: transparent; border-color: var(--wire-dim); box-shadow: none;
}
.z-jump, .z-child, .z-parent { font-size: 13.5px; font-weight: 420 }

.gate {
  position: absolute; width: 20px; height: 20px; padding: 0;
  border-radius: 50%; border: 1px solid var(--node-bd);
  color: var(--dim); font-size: 13px; line-height: 1;
  background: var(--node-b); opacity: 0; transition: opacity .15s;
}
.z-active:hover .gate { opacity: 1 }
.gate:hover { color: var(--cyan); border-color: var(--cyan) }
.g-top { top: -10px; left: 50%; transform: translateX(-50%) }
.g-bottom { bottom: -10px; left: 50%; transform: translateX(-50%) }
.g-left { left: -10px; top: 50%; transform: translateY(-50%) }

/* ---- pin bar ---- */
#pin-bar {
  position: fixed; top: 54px; left: 0; right: 0; z-index: 18;
  display: flex; gap: 6px; padding: 4px 18px; flex-wrap: wrap;
  pointer-events: none;
}
#pin-bar .chip { pointer-events: auto; background: var(--bg) }
#pin-bar .chip img { width: 14px; height: 14px; border-radius: 3px }

/* ---- side panel ---- */
#panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 15;
  width: min(420px, 92vw);
  background: var(--panel); border-left: 1px solid var(--hair);
  padding: 64px 20px 20px;
  overflow-y: auto;
  transition: transform .25s;
  display: flex; flex-direction: column; gap: 12px;
}
#panel.closed { transform: translateX(100%) }
#panel-grip {
  position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  cursor: col-resize; z-index: 2;
}
#panel-grip:hover { background: linear-gradient(90deg, var(--cyan), transparent); opacity: .4 }
#tag-picker { position: relative }
#tag-picker input { width: 140px; font-size: 12px; padding: 3px 9px; border-radius: 20px }
#tp-suggest, #tl-suggest {
  position: absolute; z-index: 5; background: var(--pop);
  border: 1px solid var(--hair); border-radius: 4px; max-height: 220px; overflow-y: auto;
  min-width: 180px;
}
#tp-suggest:empty, #tl-suggest:empty { display: none }
#tp-suggest div, #tl-suggest div { padding: 5px 11px; cursor: pointer }
#tp-suggest div:hover, #tl-suggest div:hover, #tl-suggest div.sel { background: var(--field); color: var(--cyan) }
.chip .x { margin-left: 3px; opacity: .5 }
.chip .x:hover { opacity: 1; color: var(--amber) }
.note-view a[href^="t/"] { color: var(--purple) }
.panel-head { display: flex; align-items: baseline; gap: 8px }
.panel-head h2 { font: 550 21px/1.25 var(--f-display); flex: 1 }
.note-view { font: 14.5px/1.7 var(--f-text) }
.note-view h4, .note-view h5, .note-view h6 { font-family: var(--f-display); font-weight: 550 }
#p-label { font: italic 13px/1.5 var(--f-text) }
.note-view h4, .note-view h5, .note-view h6 { margin: 12px 0 4px }
.note-view p { margin: 8px 0 }
.note-view a { color: var(--cyan) }
.note-view img { max-width: 100% }
.note-view pre { background: var(--field); padding: 10px; overflow-x: auto; font-size: 12.5px }
.note-view code { color: var(--amber) }
.note-edit textarea { min-height: 220px }
.md-toolbar { display: flex; gap: 4px; align-items: center; margin-bottom: 6px }
.md-toolbar button, .md-toolbar label {
  padding: 2px 9px; font-size: 12.5px; color: var(--dim);
  border: 1px solid var(--hair); border-radius: 3px; cursor: pointer; background: transparent;
}
.md-toolbar button:hover, .md-toolbar label:hover { color: var(--cyan); border-color: var(--cyan) }
.md-toolbar .hint { font-size: 10.5px; margin-left: auto }
.h-list { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column }
.h-row { display: flex; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--hair); font-size: 12.5px; align-items: baseline }
.h-row .when { color: var(--dim); font-size: 11px; white-space: nowrap }
.h-row .what { flex: 1 }
.h-row .op-undo, .h-row .op-redo { color: var(--amber) }
.h-row .op-create, .h-row .op-restore { color: var(--green) }
.h-row .op-delete { color: var(--purple) }
.h-row a { color: var(--cyan); cursor: pointer }
#p-attachments { display: flex; flex-wrap: wrap; gap: 8px }
#p-attachments img { max-width: 120px; max-height: 90px; border-radius: 3px; display: block }
#p-attachments a { color: var(--cyan); font-size: 12.5px; border: 1px solid var(--hair); padding: 3px 8px; border-radius: 3px; text-decoration: none }
.panel-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hair) }
.upload-btn { border: 1px solid transparent; border-radius: 3px; padding: 5px 11px; color: var(--dim); cursor: pointer }
.upload-btn:hover { color: var(--ink); border-color: var(--hair) }

body:not(.editor) .editor-only { display: none !important }

dialog {
  background: var(--pop); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 4px;
  width: min(440px, 92vw); padding: 20px;
}
dialog::backdrop { background: #000a }
.stack { display: flex; flex-direction: column; gap: 12px }
.row { display: flex; gap: 12px; align-items: center }
.row.end { justify-content: flex-end }
#a-suggest div { padding: 5px 10px; cursor: pointer; color: var(--dim) }
#a-suggest div:hover { color: var(--cyan) }

#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 10px);
  background: var(--pop); border: 1px solid var(--hair); border-radius: 3px;
  padding: 8px 16px; opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none; z-index: 30; color: var(--cyan);
}
#toast.show { opacity: 1; transform: translate(-50%, 0) }

@media (max-width: 640px) {
  header { gap: 8px; padding: 10px 12px }
  .search-wrap { flex: 1 }
  #stats, #font-sel { display: none }
  .head-right { gap: 8px }
  /* panel becomes a bottom sheet; tap the active thought to toggle it */
  #panel {
    top: 42%; width: 100vw; border-left: none; border-top: 1px solid var(--hair);
    padding-top: 16px; border-radius: 14px 14px 0 0;
  }
  #panel.closed { transform: translateY(110%) }
}