yamlover 0.3.0

package/src/client/styles.css

@@ -0,0 +1,1115 @@
+: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;
+}
+.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;
+}
+.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 {
+  margin: 0 0 12px; /* left-aligned (004) */
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
+}
+/* a decoded DjVu page — width is driven inline by the zoom factor (ctrl/alt-wheel) */
+.djvu-page {
+  display: block;
+  max-width: none;
+  background: #fff;
+}
+
+/* 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 {
+  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 {
+  display: inline-flex;
+}
+.annotate-recents .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);
+}
+/* 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;
+}
+.pdf-region {
+  position: absolute;
+  box-sizing: border-box;
+  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 {
+  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);
+}
+.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;
+}