yamlover 0.3.4 → 0.3.6

package/src/client/styles.css

@@ -1,1212 +0,0 @@
-:root {
-  --bg: #1e1e2e;
-  --bg-alt: #181825;
-  --panel: #24273a;
-  --line: #363a4f;
-  --fg: #cad3f5;
-  --dim: #8087a2;
-  --accent: #8aadf4;
-  --key: #91d7e3;
-  --string: #a6da95;
-  --number: #f5a97f;
-  --bool: #c6a0f6;
-  --null: #ed8796;
-  --sel: #363a4f;
-  --font: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body,
-#root {
-  height: 100%;
-  margin: 0;
-}
-
-body {
-  background: var(--bg);
-  color: var(--fg);
-  font-family: var(--font);
-  /* base reading size — TOC labels, breadcrumb, and rendered prose all inherit it.
-     14px sits closer to the larger default size of the PDF/DjVu page renderers. */
-  font-size: 14px;
-}
-
-.app {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-
-/* --- top bar / breadcrumbs ------------------------------------------------ */
-.topbar {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 8px 14px;
-  background: var(--bg-alt);
-  border-bottom: 1px solid var(--line);
-  flex: 0 0 auto;
-}
-.crumbs {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  min-height: 1.3em; /* keep the bar from collapsing before the head loads */
-}
-.crumb {
-  color: var(--fg);
-  text-decoration: none;
-}
-.crumb:hover {
-  color: var(--accent);
-  text-decoration: underline;
-}
-.crumb-sep {
-  color: var(--dim);
-  margin: 0 6px;
-}
-
-/* --- long-running server tasks (indexing, hashing, …) ---------------------- */
-.task-strip {
-  margin-left: auto; /* park the chips at the topbar's right edge */
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  min-width: 0;
-}
-.task-chip {
-  display: inline-flex;
-  flex-direction: column;
-  gap: 3px;
-  max-width: 320px;
-  font-size: 12px;
-  color: var(--dim);
-}
-.task-chip.error {
-  color: var(--null);
-}
-.task-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.task-counts {
-  color: var(--fg);
-}
-.task-bar {
-  display: block;
-  height: 3px;
-  border-radius: 2px;
-  background: var(--line);
-  overflow: hidden;
-  position: relative;
-}
-.task-bar-fill {
-  display: block;
-  height: 100%;
-  background: var(--accent);
-  transition: width 0.2s ease;
-}
-.task-chip.done .task-bar-fill {
-  background: var(--string);
-}
-.task-chip.error .task-bar-fill {
-  background: var(--null);
-  width: 100%;
-}
-.task-bar-fill.indeterminate {
-  width: 40%;
-  position: absolute;
-  animation: task-sweep 1.2s ease-in-out infinite;
-}
-@keyframes task-sweep {
-  0% { left: -40%; }
-  100% { left: 100%; }
-}
-
-/* --- body split ----------------------------------------------------------- */
-.body {
-  display: flex;
-  flex: 1 1 auto;
-  min-height: 0;
-}
-.pane {
-  height: 100%;
-  overflow: auto; /* LHS and RHS scroll independently */
-}
-.left {
-  flex: 0 0 auto;
-  background: var(--panel);
-  border-right: 1px solid var(--line);
-  padding: 8px 0;
-}
-.right {
-  flex: 1 1 auto;
-  padding: 14px 18px;
-}
-/* programmatically focused on TOC click (so the keyboard drives the viewer) — no focus ring */
-.right:focus {
-  outline: none;
-}
-.splitter {
-  flex: 0 0 5px;
-  cursor: col-resize;
-  background: var(--line);
-}
-.splitter:hover {
-  background: var(--accent);
-}
-
-/* --- tree ----------------------------------------------------------------- */
-.tree-row {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 1px 8px 1px 0;
-  white-space: nowrap;
-}
-.tree-row.selected {
-  background: var(--sel);
-}
-.tree-label {
-  cursor: pointer;
-}
-.tree-label:hover {
-  color: var(--accent);
-}
-
-/* type/format icon */
-.icon {
-  display: inline-block;
-  width: 1.6em;
-  text-align: center;
-  flex: 0 0 auto;
-  font-size: 12px;
-}
-.t-struct {
-  color: var(--key);
-}
-.t-str {
-  color: var(--string);
-}
-.t-num {
-  color: var(--number);
-}
-.t-bool {
-  color: var(--bool);
-}
-.t-null {
-  color: var(--null);
-}
-.t-bin,
-.t-fmt {
-  color: var(--dim);
-}
-/* binary type glyph: the bits "0110" boxed into a little square (the TOC icon and
-   the explorer grid render the same mark) */
-.icon.binsq,
-.dirview-icon.binsq {
-  width: auto;
-  font-family: var(--mono, monospace);
-  font-size: 6px;
-  font-weight: 700;
-  line-height: 1;
-  border: 1px solid currentColor;
-  border-radius: 2px;
-  padding: 2px 2px;
-}
-.dirview-icon.binsq {
-  flex: none;
-  margin: 0 2px; /* keep the label column roughly aligned with the 22px emoji icons */
-}
-.toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  background: none;
-  border: none;
-  color: var(--dim);
-  cursor: pointer;
-  padding: 0;
-  flex: 0 0 auto;
-}
-.toggle .chevron {
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 1;
-  transition: transform 0.12s ease;
-}
-.toggle.open .chevron {
-  transform: rotate(90deg);
-}
-.toggle.loading {
-  opacity: 0.4;
-}
-.toggle:hover {
-  color: var(--accent);
-}
-.toggle.leaf {
-  cursor: default;
-}
-
-/* --- node view ------------------------------------------------------------ */
-.nodehead {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start; /* dock chips + tabs to the LEFT (text is left-aligned) */
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  border-bottom: 1px solid var(--line);
-  padding-bottom: 8px;
-  margin-bottom: 10px;
-}
-/* separates the type/format chips from the representation tabs in the node bar */
-.bar-sep {
-  color: var(--dim);
-  opacity: 0.5;
-  user-select: none;
-}
-/* the markdown/asciidoc reading-width control, beside its renderer tab; red when invalid */
-.markup-width {
-  width: 5ch;
-  background: var(--bg-alt);
-  color: var(--fg);
-  border: 1px solid var(--line);
-  border-radius: 4px;
-  padding: 2px 4px;
-  font: inherit;
-  font-family: var(--font);
-  font-size: 12px;
-  text-align: right;
-}
-.markup-width.invalid {
-  border-color: #f38ba8;
-  color: #f38ba8;
-}
-.nodemeta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-.nodepath {
-  color: var(--accent);
-}
-.tag {
-  font-size: 11px;
-  padding: 1px 7px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  color: var(--fg);
-}
-.tag.dim {
-  color: var(--dim);
-}
-.nodedesc {
-  color: var(--dim);
-  margin: 0 0 12px;
-  font-style: italic;
-}
-.tabs {
-  display: flex;
-  gap: 4px;
-}
-.tab {
-  background: none;
-  border: 1px solid var(--line);
-  color: var(--dim);
-  padding: 2px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: var(--font);
-  font-size: 12px;
-}
-.tab.active {
-  color: var(--bg);
-  background: var(--accent);
-  border-color: var(--accent);
-}
-
-/* --- code ----------------------------------------------------------------- */
-.code {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-  line-height: 1.55;
-  font-family: var(--font);
-}
-.code.raw {
-  color: var(--fg);
-}
-.k {
-  color: var(--key);
-}
-.s {
-  color: var(--string);
-}
-.n {
-  color: var(--number);
-}
-.b {
-  color: var(--bool);
-}
-.null {
-  color: var(--null);
-}
-.punct {
-  color: var(--dim);
-}
-.c {
-  color: var(--dim);
-  font-style: italic;
-}
-.descend {
-  color: var(--accent);
-  text-decoration: none;
-  border-bottom: 1px dashed var(--accent);
-  cursor: pointer;
-}
-.descend:hover {
-  background: var(--sel);
-}
-/* an external (off-tree) marklower link — solid underline marks it leaves the app */
-.extlink {
-  color: var(--accent);
-  text-decoration: underline;
-  cursor: pointer;
-}
-.extlink:hover {
-  background: var(--sel);
-}
-/* divider between the relations panel and the value, in the data views */
-.reldiv {
-  border: none;
-  border-top: 1px solid var(--border, var(--dim));
-  margin: 8px 0;
-}
-
-/* --- chapter renderer (x-yamlover-chapter) -------------------------------- */
-.chapter {
-  line-height: 1.65;
-  max-width: 70ch;
-}
-.chapter-title {
-  font-size: 22px;
-  font-weight: 700;
-  margin: 0 0 4px;
-  color: var(--fg);
-}
-.chapter-subtitle {
-  margin: 0 0 18px;
-  color: var(--dim);
-  font-style: italic;
-}
-.chapter-prose {
-  margin: 0 0 14px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-.chapter-link {
-  font-size: 15px;
-  font-weight: 600;
-  margin: 18px 0 8px;
-}
-.chapter-link a {
-  border-bottom-width: 0;
-}
-
-/* a numbered chunk: an index gutter (linking to the chunk's own node) + body.
-   Align the index to the top, not the baseline: a replaced element (image /
-   diagram) has its baseline at its *bottom* edge, which would drop the index
-   below the object — flex-start keeps it at the body's top-left for prose and
-   media alike. */
-.chunk {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  scroll-margin-top: 12px; /* a chunk targeted via #/chunks[n] isn't flush to the top */
-}
-a.chunk-index {
-  text-decoration: none;
-}
-.chunk-index {
-  flex: 0 0 auto;
-  min-width: 2.2em; /* fits the § prefix + a digit, keeps the gutter right-aligned */
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-  font-size: 12px;
-  color: var(--dim);
-  user-select: none;
-  border-bottom-width: 0;
-}
-a.chunk-index:hover {
-  color: var(--accent);
-}
-.chunk-body {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-/* an image / diagram chunk sits flush with its index: drop the standalone-view
-   top padding so the object's top-left corner meets the gutter (the index) */
-.chunk-body .filemedia {
-  padding-top: 0;
-}
-/* full-page media reused inline as a chunk: cap the heights that otherwise fill
-   the viewport (the standalone html iframe / pdf page), so a chapter body stays
-   readable when it interleaves an HTML or PDF chunk */
-.chunk-body .filehtml {
-  height: 340px;
-}
-.chunk-body .filepdf {
-  height: auto; /* a chapter-embedded pdf is capped, not the full-viewport frame */
-  max-height: 460px;
-  overflow: auto;
-}
-
-.error {
-  color: var(--null);
-  padding: 12px;
-}
-.loading {
-  color: var(--dim);
-  padding: 12px;
-}
-/* a full-window hint shown while dragging file(s) over the page (drop = upload). pointer-events:
-   none so the drag/drop events still reach the document listeners underneath. */
-.drop-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 2000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  background: rgba(24, 24, 37, 0.55);
-  border: 3px dashed var(--accent);
-  color: var(--fg);
-  font-size: 18px;
-  letter-spacing: 0.02em;
-}
-/* transient paste/upload status, pinned to the corner of the right pane */
-.paste-toast {
-  position: fixed;
-  bottom: 16px;
-  right: 16px;
-  z-index: 1000;
-  padding: 8px 14px;
-  background: var(--panel);
-  color: var(--fg);
-  border: 1px solid var(--accent);
-  border-radius: 6px;
-  font-size: 13px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-}
-
-/* ---- file renderers: image / html / pdf / djvu / markup ------------------ */
-.filemedia {
-  padding: 12px 0;
-  overflow: auto;
-  max-width: 900px; /* don't span the whole pane (001) */
-}
-/* PDF / DjVu are a stable scroll VIEWPORT (like the Leaflet map), so ctrl/alt-wheel zoom enlarges
-   the pages and they scroll in BOTH axes within the frame — never clipped to a fixed-width column. */
-.filepdf,
-.filedjvu {
-  padding: 12px;
-  overflow: auto;
-  height: calc(100vh - 160px);
-  min-height: 360px;
-}
-/* focused on mount so the keyboard scrolls the document — no focus ring on the scroller */
-.filepdf:focus,
-.filedjvu:focus {
-  outline: none;
-}
-.fileimage {
-  /* keep the image's own aspect ratio — never stretch (007) */
-  max-width: 100%;
-  max-height: 80vh;
-  width: auto;
-  height: auto;
-  object-fit: contain;
-  display: block;
-  margin: 0 0 12px; /* left-aligned, like every other resource (004) */
-  background: #fff;
-}
-/* a PlantUML diagram is an SVG on a white card, padded so it doesn't crowd the edges */
-.fileimage.plantuml {
-  max-height: none; /* let a tall diagram grow; the pane scrolls */
-  padding: 12px;
-  border: 1px solid var(--border, #313244);
-  border-radius: 6px;
-}
-.filehtml {
-  width: 100%;
-  height: calc(100vh - 120px);
-  border: 1px solid var(--border, #313244);
-  background: #fff;
-}
-.filepdf .react-pdf__Page,
-.djvu-page-wrap {
-  margin: 0 0 12px; /* left-aligned (004) */
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
-}
-/* a DjVu page: a positioned wrapper (sized inline to the display width) holding the decoded page
-   <canvas>, its OCR text layer (selectable), the marquee overlay, and the annotation region divs */
-.djvu-page-wrap {
-  position: relative;
-}
-.djvu-page {
-  display: block;
-  width: 100%;
-  max-width: none;
-  background: #fff;
-}
-/* a not-yet-decoded page (windowed rendering) — fills the wrapper's estimated height */
-.djvu-placeholder {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #fff;
-  color: #888;
-  font-size: 12px;
-}
-/* OCR text layer: transparent positioned spans over the page → native browser text selection */
-.djvu-textlayer {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  overflow: hidden;
-  line-height: 1;
-}
-.djvu-textlayer span {
-  position: absolute;
-  color: transparent;
-  white-space: pre;
-  transform-origin: 0 0;
-  cursor: text;
-}
-
-/* rendered Markdown / AsciiDoc body */
-.markup {
-  line-height: 1.55;
-  word-break: break-word;
-  max-width: 72ch; /* a readable measure — don't run the full pane width (001) */
-  padding-left: 1.6rem; /* a gutter to hold the per-heading `§` anchors (like a chunk's) */
-}
-.markup :first-child {
-  margin-top: 0;
-}
-.markup h1,
-.markup h2,
-.markup h3 {
-  color: var(--fg);
-  margin: 18px 0 8px;
-}
-/* a heading targeted via #slug isn't flush to the top (mirrors .chunk); relative
-   so its `§` anchor can sit in the left gutter (like a chunk's index) */
-.markup :is(h1, h2, h3, h4, h5, h6) {
-  position: relative;
-  scroll-margin-top: 12px;
-}
-.markup a {
-  color: var(--accent);
-}
-/* the per-heading `§` fragment anchor: a marker right-aligned in the left gutter,
-   matching a chapter chunk's §N index (same 12px size and `--dim` colour, accent on
-   hover). A fixed rem offset (not em) so every heading level lines up in the same
-   gutter instead of scaling with its font size. */
-.markup .header-anchor {
-  position: absolute;
-  left: -1.6rem;
-  width: 1.6rem;
-  box-sizing: border-box;
-  padding-right: 0.45rem; /* the gap before the heading text */
-  text-align: right;
-  font-size: 12px; /* a constant size, not the heading's, so all gutters match (= .chunk-index) */
-  font-weight: normal;
-  line-height: inherit;
-  color: var(--dim);
-  text-decoration: none;
-  user-select: none;
-}
-.markup :is(h1, h2, h3, h4, h5, h6):hover .header-anchor,
-.markup .header-anchor:hover {
-  color: var(--accent);
-}
-.markup code {
-  font-family: var(--mono, monospace);
-  background: var(--bg-alt);
-  padding: 1px 4px;
-  border-radius: 3px;
-}
-.markup pre {
-  background: var(--bg-alt);
-  padding: 10px;
-  border-radius: 4px;
-  overflow: auto;
-}
-.markup pre code {
-  background: none;
-  padding: 0;
-}
-.markup img {
-  max-width: 100%;
-}
-.markup blockquote {
-  border-left: 3px solid var(--border, #313244);
-  margin: 10px 0;
-  padding-left: 12px;
-  color: var(--dim);
-}
-
-/* ---- csv / tsv table renderer -------------------------------------------- */
-/* the CSV parsing controls (separator + header), inline in the node bar beside the
-   renderer tab — like the markdown/asciidoc width input */
-.csv-toolbar {
-  display: inline-flex;
-  gap: 12px;
-  align-items: center;
-  color: var(--dim);
-  font-size: 12px;
-}
-
-/* plain text, shown verbatim (no markup, no re-flow) */
-.plaintext {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-family: var(--font);
-  font-size: 13px;
-  line-height: 1.55;
-  color: var(--fg);
-}
-/* a node-bar selector beside a renderer's tab (plaintext encoding, explorer view) */
-.enc-control {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--dim);
-  font-size: 12px;
-}
-.enc-control select {
-  background: var(--bg-alt);
-  color: var(--fg);
-  border: 1px solid var(--border, #313244);
-  border-radius: 4px;
-  padding: 2px 4px;
-  font: inherit;
-  font-family: var(--font);
-}
-.csv-toolbar label {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-.csv-toolbar select {
-  background: var(--bg-alt);
-  color: var(--fg);
-  border: 1px solid var(--border, #313244);
-  border-radius: 4px;
-  padding: 2px 4px;
-  font: inherit;
-  font-family: var(--font);
-}
-.csv-scroll {
-  overflow: auto;
-  max-width: 100%;
-}
-.csv-table {
-  border-collapse: collapse;
-  font-size: 13px;
-}
-.csv-table th,
-.csv-table td {
-  border: 1px solid var(--border, #313244);
-  padding: 3px 8px;
-  text-align: left;
-  vertical-align: top;
-  white-space: pre-wrap;
-}
-.csv-table thead th {
-  position: sticky;
-  top: 0;
-  background: var(--bg-alt);
-  color: var(--fg);
-  font-weight: 600;
-}
-.csv-table tbody tr:nth-child(even) {
-  background: rgba(255, 255, 255, 0.025); /* faint zebra striping */
-}
-.csv-empty {
-  color: var(--dim);
-}
-
-/* ---- spreadsheet (xls/xlsx) sheet tabs ----------------------------------- */
-.sheet-tabs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin: 4px 0 12px;
-}
-.sheet-tab {
-  background: var(--bg-alt);
-  color: var(--dim);
-  border: 1px solid var(--border, #313244);
-  border-radius: 4px;
-  padding: 2px 10px;
-  font: inherit;
-  font-family: var(--font);
-  font-size: 12px;
-  cursor: pointer;
-}
-.sheet-tab.active {
-  color: var(--fg);
-  border-color: var(--accent);
-}
-.sheet-tab:hover {
-  color: var(--fg);
-}
-
-/* ---- kml / kmz map renderer (Leaflet) ------------------------------------ */
-.filemap {
-  width: 100%;
-  height: calc(100vh - 160px);
-  min-height: 360px;
-  border: 1px solid var(--border, #313244);
-  border-radius: 6px;
-}
-/* a map embedded inline as a chapter chunk: cap the height so the page stays readable */
-.chunk-body .filemap.chunk-map {
-  height: 380px;
-}
-/* annotations: the per-material action bar + the inline highlight mark */
-.annotate-bar {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 10px;
-}
-.annotate-count {
-  color: var(--dim);
-  font-size: 12px;
-}
-/* the floating menu raised by a text selection: a color palette + copy + cancel */
-.annotate-menu {
-  position: fixed;
-  z-index: 1000; /* above Leaflet panes (≤700) so it floats over an image/map selection */
-  display: flex;
-  flex-wrap: wrap; /* swatches+tools on the first row; recents and the tag-path input wrap below */
-  align-items: center;
-  gap: 6px;
-  padding: 5px 7px;
-  max-width: 280px;
-  background: var(--bg-alt);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
-}
-.annotate-palette {
-  display: flex;
-  gap: 4px;
-}
-.annotate-swatch {
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  border-radius: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  cursor: pointer;
-}
-.annotate-swatch.sel {
-  outline: 2px solid var(--fg); /* the pre-selected / last-used color */
-  outline-offset: 1px;
-}
-.annotate-tool {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 26px;
-  height: 24px;
-  background: var(--bg);
-  border: 1px solid var(--line);
-  color: var(--fg);
-  font: inherit;
-  font-size: 15px;
-  line-height: 1;
-  padding: 0 6px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-.annotate-tool:hover {
-  border-color: var(--dim);
-}
-/* the explicit ✓ confirm (commit) and 🗑 discard/delete — clearly distinct, accent-tinted */
-.annotate-tool.ok {
-  color: #a6e3a1;
-  border-color: rgba(166, 227, 161, 0.5);
-}
-.annotate-tool.ok:hover {
-  background: rgba(166, 227, 161, 0.18);
-  border-color: #a6e3a1;
-}
-.annotate-tool.danger {
-  color: #f38ba8;
-  border-color: rgba(243, 139, 168, 0.5);
-}
-.annotate-tool.danger:hover {
-  background: rgba(243, 139, 168, 0.18);
-  border-color: #f38ba8;
-}
-/* the recently applied NAMED tags — a row of small badges below the swatches */
-.annotate-recents {
-  flex-basis: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-.annotate-recents .tagtag,
-.annotate-suggest .tagtag {
-  border: 0;
-  font: inherit;
-  font-size: 11px;
-  cursor: pointer;
-}
-/* the assigned / pre-selected tag, framed EXACTLY like the selected color swatch: a ring with a
-   gap (the swatch's outline-offset). The ring cannot live on .tagtag itself: filter is applied
-   BEFORE clip-path on the same element, so the luggage-tag clip would cut it away. On the
-   unclipped WRAPPER the child is clipped first; then a first round of hard offset drop-shadows
-   in the MENU BACKGROUND color grows the silhouette by 1px (the gap), and a second round in
-   the foreground color rings that — gap + ring, both following the actual tag shape. */
-.annotate-recents .tagframe,
-.annotate-suggest .tagframe {
-  display: inline-flex;
-}
-.annotate-recents .tagframe.sel,
-.annotate-suggest .tagframe.sel {
-  filter:
-    drop-shadow(1px 0 0 var(--bg-alt))
-    drop-shadow(-1px 0 0 var(--bg-alt))
-    drop-shadow(0 1px 0 var(--bg-alt))
-    drop-shadow(0 -1px 0 var(--bg-alt))
-    drop-shadow(1.5px 0 0 var(--fg))
-    drop-shadow(-1.5px 0 0 var(--fg))
-    drop-shadow(0 1.5px 0 var(--fg))
-    drop-shadow(0 -1.5px 0 var(--fg));
-}
-/* apply ANY tag by its node path (Enter commits) */
-.annotate-taginput {
-  flex-basis: 100%;
-  min-width: 0;
-  padding: 3px 6px;
-  background: var(--bg);
-  border: 1px solid var(--line);
-  border-radius: 5px;
-  color: var(--fg);
-  font: inherit;
-  font-size: 12px;
-}
-.annotate-taginput:focus {
-  outline: none;
-  border-color: var(--dim);
-}
-/* the typeahead: the path input plus a suggestion list below it, spanning the menu width */
-.annotate-typeahead {
-  flex-basis: 100%;
-  min-width: 0;
-  position: relative;
-}
-.annotate-typeahead .annotate-taginput {
-  width: 100%;
-  box-sizing: border-box;
-}
-/* matched named tags as badges (the highlighted one rings via .tagframe.sel) */
-.annotate-suggest {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-top: 5px;
-  max-height: 132px;
-  overflow-y: auto;
-}
-/* a region annotation drawn over a PDF page (the image overlay uses a Leaflet rectangle) */
-.pdf-page {
-  position: relative;
-}
-/* a far-from-viewport page not yet mounted (windowed rendering) — keeps the scroll height */
-.pdf-placeholder {
-  background: #fff;
-  opacity: 0.06;
-}
-/* Zoom is a CSS transform on .pdf-content (scales the rendered pages with NO re-raster → no
-   blink). The transformed content is taken out of flow, so .pdf-sizer reserves its scaled
-   footprint to keep the scroll height correct. */
-.pdf-sizer {
-  position: relative;
-}
-.pdf-content {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-/* drag-marquee overlay for pages with no usable text layer (scanned/pathological PDF, or a DjVu
-   with no OCR) — above the text layer (z 2), below the editable region divs so saved regions
-   stay clickable */
-.pdf-marquee,
-.djvu-marquee {
-  position: absolute;
-  inset: 0;
-  z-index: 3;
-  cursor: crosshair;
-  user-select: none;
-}
-.pdf-region,
-.djvu-region {
-  position: absolute;
-  box-sizing: border-box;
-  /* above the text layer (z 2) and the marquee overlay (z 3) so a saved region is the topmost
-     element at its rectangle — otherwise a text-layer span or the marquee swallows the click and
-     the edit/delete menu never opens */
-  z-index: 4;
-  border: 2px solid #f9e2af;
-  background: rgba(249, 226, 175, 0.18);
-  pointer-events: none; /* the live preview must not block selecting text under it */
-}
-.pdf-region.editable,
-.djvu-region.editable {
-  pointer-events: auto; /* a saved region is clickable → the edit menu */
-  cursor: pointer;
-}
-mark.yo-annotation {
-  /* background-color + border-bottom-color are set inline from the annotation's selector.color
-     (fallbacks here for marks saved before colors existed) */
-  background-color: rgba(249, 226, 175, 0.30); /* a soft highlight; the note rides in the title tooltip */
-  color: inherit;
-  border-bottom: 2px solid #f9e2af;
-  border-radius: 2px;
-  cursor: help;
-}
-
-/* the pan/zoom image viewer reuses the map container; its backdrop is the page background, so a
-   picture panned/zoomed past the edges sits on the same canvas as the rest of the page. The
-   compound `.leaflet-container` selector overrides Leaflet's own default gray (#ddd) backdrop. */
-.fileimagemap,
-.fileimagemap.leaflet-container {
-  background: var(--bg);
-}
-/* a view where plain-drag SELECTS (image/map full view): the crosshair signals "drag to annotate";
-   hold ctrl/alt to pan. The live rubber-band + saved region rectangles carry their highlight color
-   inline (Leaflet path options); a saved region shows a help cursor for its note tooltip. */
-.yo-selectable.leaflet-container {
-  cursor: crosshair;
-}
-.leaflet-interactive.yo-region {
-  cursor: pointer; /* click a region → the edit menu (recolor / delete) */
-}
-/* Leaflet popups carry the feature's (often HTML) KML description */
-.map-popup-desc {
-  margin-top: 4px;
-  max-height: 200px;
-  overflow: auto;
-}
-
-/* ---- legacy .doc download fallback --------------------------------------- */
-.office-fallback {
-  max-width: 60ch;
-  line-height: 1.55;
-  color: var(--fg);
-}
-.office-fallback a.descend {
-  color: var(--accent);
-}
-
-/* ---- fb2 ebook renderer -------------------------------------------------- */
-.fb2-body {
-  font-family: var(--mono, monospace);
-}
-.fb2-cover {
-  max-width: 320px;
-  max-height: 60vh;
-  display: block;
-  margin: 0 0 18px;
-  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
-}
-.fb2-body .fb2-title {
-  font-size: 17px;
-  font-weight: 700;
-  color: var(--fg);
-  margin: 22px 0 10px;
-}
-.fb2-body .fb2-subtitle {
-  font-weight: 600;
-  margin: 14px 0 8px;
-}
-.fb2-body .fb2-cite {
-  font-style: italic;
-}
-.fb2-body .fb2-poem {
-  margin: 12px 0;
-  padding-left: 16px;
-  font-style: italic;
-}
-.fb2-body .fb2-stanza {
-  margin: 8px 0;
-}
-.fb2-body .fb2-text-author {
-  text-align: right;
-  color: var(--dim);
-  font-style: italic;
-}
-.fb2-body .fb2-img {
-  max-width: 100%;
-  display: block;
-  margin: 12px 0;
-}
-
-/* ---- epub ebook renderer ------------------------------------------------- */
-.epub-body img {
-  max-width: 100%;
-  height: auto;
-}
-.epub-body .epub-doc + .epub-doc {
-  margin-top: 24px;
-  padding-top: 24px;
-  border-top: 1px solid var(--line);
-}
-
-/* ---- explorer renderer: a file-manager icon grid of a node's members, uplinks
-   (the `..` parent and upstream `*`/`~` sources) leading it. Also the tag page
-   (the materials filed under the tag, its description in the header). ---- */
-.dirhead {
-  padding: 14px 8px 0;
-}
-.dirview {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 6px;
-  padding: 12px 8px;
-}
-.dirview-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 210px;
-  padding: 5px 8px;
-  border-radius: 6px;
-  color: var(--fg);
-  text-decoration: none;
-  border-bottom: 0; /* override the global link underline */
-  cursor: pointer;
-}
-.dirview-item:hover {
-  background: var(--panel);
-}
-/* keyboard selection (roving focus — arrows walk, Enter opens) */
-.dirview-item:focus {
-  outline: none;
-  background: var(--panel);
-  box-shadow: 0 0 0 2px var(--accent) inset;
-}
-.dirview-icon {
-  flex: none;
-  width: 22px;
-  text-align: center;
-}
-.dirview-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 13px;
-}
-.dirview-label .val {
-  color: var(--dim);
-}
-/* an uplink (a relation: `..`, an upstream ref/tag) — the way OUT, drawn apart */
-.dirview-up {
-  border: 1px dashed var(--line);
-  color: var(--dim);
-}
-.dirview-up:hover {
-  border-color: var(--accent);
-}
-.dirview-empty {
-  color: var(--dim);
-  font-style: italic;
-}
-/* large icons (the default view): tiles, the icon above a centered label */
-.dirview.dirview-lg {
-  gap: 10px;
-}
-.dirview-lg .dirview-item {
-  flex-direction: column;
-  justify-content: flex-start;
-  width: 120px;
-  padding: 10px 6px 8px;
-  gap: 7px;
-  text-align: center;
-}
-.dirview-lg .dirview-icon {
-  width: auto;
-  font-size: 36px;
-  line-height: 1;
-}
-.dirview-lg .dirview-icon.binsq {
-  font-size: 11px;
-  padding: 6px 5px;
-  margin: 9px 0; /* keep tile icon rows level with the 36px glyphs */
-}
-.dirview-lg .dirview-label {
-  max-width: 100%;
-  white-space: normal;
-  overflow-wrap: anywhere;
-  display: -webkit-box;
-  -webkit-line-clamp: 2; /* a long name wraps to two lines, then ellipsizes */
-  -webkit-box-orient: vertical;
-}
-
-/* tag references shown in a node's header bar: a colored luggage-tag shape — one
-   end rectangular, the other a triangular point with a punched hole. The color is
-   a stable hash of the tag name (see tagColor). */
-.tagtag {
-  position: relative;
-  display: inline-block;
-  color: #fff;
-  font-size: 11px;
-  line-height: 1.45;
-  padding: 1px 9px 1px 17px; /* extra left clears the point + hole */
-  text-decoration: none;
-  border-bottom: 0; /* override the global link underline */
-  cursor: pointer;
-  white-space: nowrap;
-  clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
-}
-.tagtag::before {
-  content: "";
-  position: absolute;
-  left: 4px;
-  top: 50%;
-  width: 4px;
-  height: 4px;
-  margin-top: -2px;
-  border-radius: 50%;
-  background: var(--bg); /* the bar behind shows through — a punched hole */
-}
-.tagtag:hover {
-  filter: brightness(1.18);
-}
-.tagdesc {
-  text-align: left;
-  color: var(--dim);
-  font-style: italic;
-  margin: 8px 0 0;
-}