/* sitegraph viewer. Colours are custom properties; dark mode is Quarto's
   body.quarto-dark, [data-theme="dark"], or the system setting.

   Eighteen categorical colours: Tableau 20 without its greys (grey is
   "other"), in the order sitegraph/palette.py gives them, so that the first
   n are as far apart as n of them can be. Generated by
   `python -m sitegraph.palette`; a test checks this block matches. A
   category's colour is its rank by number of pages, and the same in both
   themes. */
.sitegraph,
.sitegraph-local {
  --sitegraph-1: #1f77b4;
  --sitegraph-2: #dbdb8d;
  --sitegraph-3: #d62728;
  --sitegraph-4: #2ca02c;
  --sitegraph-5: #e377c2;
  --sitegraph-6: #17becf;
  --sitegraph-7: #ff7f0e;
  --sitegraph-8: #f7b6d2;
  --sitegraph-9: #8c564b;
  --sitegraph-10: #9467bd;
  --sitegraph-11: #9edae5;
  --sitegraph-12: #c49c94;
  --sitegraph-13: #bcbd22;
  --sitegraph-14: #ff9896;
  --sitegraph-15: #ffbb78;
  --sitegraph-16: #98df8a;
  --sitegraph-17: #c5b0d5;
  --sitegraph-18: #aec7e8;
  --sitegraph-other: #b4b3ad;
  --sitegraph-surface: var(--bs-body-bg, #ffffff);
  --sitegraph-ink: var(--bs-body-color, #212529);
  --sitegraph-muted: var(--bs-secondary-color, #6c757d);
  --sitegraph-border: var(--bs-border-color, #dee2e6);
  position: relative;
}

body.quarto-dark :is(.sitegraph, .sitegraph-local),
:root[data-theme="dark"] :is(.sitegraph, .sitegraph-local) {
  --sitegraph-other: #6b6a66;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body:not(.quarto-light) :is(.sitegraph, .sitegraph-local) {
    --sitegraph-other: #6b6a66;
  }
}

.sitegraph-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.sitegraph-row,
.sitegraph-legend,
.sitegraph-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: center;
}
.sitegraph-row { gap: 0.5rem 1.5rem; }
.sitegraph-search {
  flex: 1 1 14rem;
  max-width: 24rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--sitegraph-border);
  border-radius: 4px;
  background: var(--sitegraph-surface);
  color: var(--sitegraph-ink);
  font: inherit;
}
.sitegraph-search.sitegraph-no-match { border-color: var(--sitegraph-3); }
.sitegraph-slider {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--sitegraph-muted);
}
.sitegraph-slider input { width: 8rem; accent-color: var(--sitegraph-1); }
.sitegraph-colour-count { min-width: 1.5em; color: var(--sitegraph-ink); }
.sitegraph-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.1rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--sitegraph-ink);
  font: inherit;
}
button.sitegraph-legend-item { cursor: pointer; }
button.sitegraph-legend-item:hover,
button.sitegraph-legend-item[aria-pressed="true"] { border-color: var(--sitegraph-border); }
.sitegraph-swatch {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: currentColor;
}
.sitegraph-toggle { cursor: pointer; color: var(--sitegraph-muted); }

.sitegraph-stage {
  position: relative;
  height: clamp(420px, 75vh, 900px);
  border: 1px solid var(--sitegraph-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--sitegraph-surface);
}
.sitegraph-svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.sitegraph-svg:active { cursor: grabbing; }

.sitegraph-fill-1 { fill: var(--sitegraph-1); color: var(--sitegraph-1); }
.sitegraph-fill-2 { fill: var(--sitegraph-2); color: var(--sitegraph-2); }
.sitegraph-fill-3 { fill: var(--sitegraph-3); color: var(--sitegraph-3); }
.sitegraph-fill-4 { fill: var(--sitegraph-4); color: var(--sitegraph-4); }
.sitegraph-fill-5 { fill: var(--sitegraph-5); color: var(--sitegraph-5); }
.sitegraph-fill-6 { fill: var(--sitegraph-6); color: var(--sitegraph-6); }
.sitegraph-fill-7 { fill: var(--sitegraph-7); color: var(--sitegraph-7); }
.sitegraph-fill-8 { fill: var(--sitegraph-8); color: var(--sitegraph-8); }
.sitegraph-fill-9 { fill: var(--sitegraph-9); color: var(--sitegraph-9); }
.sitegraph-fill-10 { fill: var(--sitegraph-10); color: var(--sitegraph-10); }
.sitegraph-fill-11 { fill: var(--sitegraph-11); color: var(--sitegraph-11); }
.sitegraph-fill-12 { fill: var(--sitegraph-12); color: var(--sitegraph-12); }
.sitegraph-fill-13 { fill: var(--sitegraph-13); color: var(--sitegraph-13); }
.sitegraph-fill-14 { fill: var(--sitegraph-14); color: var(--sitegraph-14); }
.sitegraph-fill-15 { fill: var(--sitegraph-15); color: var(--sitegraph-15); }
.sitegraph-fill-16 { fill: var(--sitegraph-16); color: var(--sitegraph-16); }
.sitegraph-fill-17 { fill: var(--sitegraph-17); color: var(--sitegraph-17); }
.sitegraph-fill-18 { fill: var(--sitegraph-18); color: var(--sitegraph-18); }
.sitegraph-fill-other { fill: var(--sitegraph-other); color: var(--sitegraph-other); }

/* A 1.5px surface ring around each node, and a gap between pie wedges. */
.sitegraph-node path { stroke: var(--sitegraph-surface); stroke-width: 1; }
.sitegraph-ring { fill: none; stroke: var(--sitegraph-surface); stroke-width: 1.5; }
.sitegraph-node { cursor: pointer; outline: none; }
.sitegraph-node:focus-visible .sitegraph-ring { stroke: var(--sitegraph-ink); stroke-width: 2; }
.sitegraph-category-mark {
  fill: var(--sitegraph-surface);
  stroke: var(--sitegraph-muted);
  stroke-width: 1.5;
}

.sitegraph-edge { stroke: var(--sitegraph-ink); stroke-opacity: 0.22; stroke-width: 1; }
.sitegraph-edge-source { stroke-dasharray: 4 3; stroke-opacity: 0.3; }
.sitegraph-edge-category { stroke-dasharray: 1 3; stroke-opacity: 0.25; }

.sitegraph-label {
  fill: var(--sitegraph-ink);
  paint-order: stroke;
  stroke: var(--sitegraph-surface);
  stroke-linejoin: round;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.sitegraph-labelled .sitegraph-label { opacity: 1; }
.sitegraph-node-category .sitegraph-label { fill: var(--sitegraph-muted); font-style: italic; }

/* A hovered node with its neighbours, or a category's posts. */
.sitegraph-focusing .sitegraph-node { opacity: 0.15; transition: opacity 0.15s; }
.sitegraph-focusing .sitegraph-edge { stroke-opacity: 0.05; }
.sitegraph-focusing .sitegraph-node.sitegraph-near { opacity: 1; }
.sitegraph-focusing .sitegraph-edge.sitegraph-near { stroke-opacity: 0.6; stroke-width: 1.5; }

.sitegraph-tooltip {
  position: absolute;
  z-index: 1;
  max-width: 22rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--sitegraph-border);
  border-radius: 4px;
  background: var(--sitegraph-surface);
  color: var(--sitegraph-ink);
  font-size: 0.85rem;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
}
.sitegraph-tooltip div div { color: var(--sitegraph-muted); }

.sitegraph-list { margin-top: 1rem; }
.sitegraph-list summary { cursor: pointer; }
.sitegraph-list li { margin-bottom: 0.4rem; }
.sitegraph-list li div { font-size: 0.9rem; color: var(--sitegraph-muted); }
.sitegraph-error { color: var(--sitegraph-muted); }

/* With a focus: the focused page, and the depth control. */
.sitegraph-node-focus .sitegraph-ring { stroke: var(--sitegraph-ink); stroke-width: 2.5; }
.sitegraph-depth { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--sitegraph-muted); }
.sitegraph-depth button {
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--sitegraph-border);
  border-radius: 4px;
  background: none;
  color: var(--sitegraph-ink);
  font: inherit;
  cursor: pointer;
}
.sitegraph-depth button[aria-pressed="true"] { background: var(--sitegraph-border); }

/* The local graph card (sitegraph-local.js). */
.sitegraph-local {
  margin: 0 0 1rem;
  font-size: 0.85rem;
}
main > .sitegraph-local {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sitegraph-border);
}
.sitegraph-local-fold { margin-top: 0.4rem; }
.sitegraph-local-fold:first-child { margin-top: 0; }
.sitegraph-local-graph > summary { font-weight: 600; }
.sitegraph-local-graph .sitegraph-local-fold > summary { font-weight: normal; }
.sitegraph-local-fold > summary {
  cursor: pointer;
  color: var(--sitegraph-muted);
}
.sitegraph-local-graph > summary { display: list-item; position: relative; padding-right: 2rem; }
.sitegraph-local-picture { max-width: 320px; }
.sitegraph-local-svg { display: block; width: 100%; height: auto; }
.sitegraph-local-svg .sitegraph-edge { stroke-opacity: 0.45; }
.sitegraph-local-chord { stroke: var(--sitegraph-muted); stroke-opacity: 0.2; stroke-width: 1; }
.sitegraph-local-arrowhead { fill: var(--sitegraph-muted); }
.sitegraph-local-hit { fill: transparent; }
.sitegraph-local-dot .sitegraph-ring { stroke-width: 1.5; }
.sitegraph-local-dot:hover .sitegraph-ring,
.sitegraph-local-dot:focus-visible .sitegraph-ring,
.sitegraph-local-dot.sitegraph-local-hot .sitegraph-ring { stroke: var(--sitegraph-ink); stroke-width: 2.5; }
.sitegraph-local-self .sitegraph-ring { stroke: var(--sitegraph-ink); stroke-width: 2.5; }
/* A fixed height, so the lists below do not move as the pointer does. */
.sitegraph-local-caption {
  height: 3.9em;
  overflow: hidden;
  margin: 0.2rem 0 0;
  max-width: 320px;
  line-height: 1.3;
  text-align: left;
  color: var(--sitegraph-muted);
}
.sitegraph-local-caption strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--sitegraph-ink);
  font-weight: 600;
}
.sitegraph-local-caption span { display: block; white-space: nowrap; }
.sitegraph-local-enlarge {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  padding: 0.15rem;
  border: 1px solid var(--sitegraph-border);
  border-radius: 4px;
  background: var(--sitegraph-surface);
  color: var(--sitegraph-muted);
  cursor: pointer;
}
.sitegraph-local-enlarge svg { width: 13px; height: 13px; }
.sitegraph-local-enlarge:hover { color: var(--sitegraph-ink); }
.sitegraph-local-fold ul { margin: 0.2rem 0 0; padding-left: 0; list-style: none; }
.sitegraph-local-fold li {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  margin: 0.15rem 0;
  line-height: 1.3;
}
.sitegraph-local-swatch { flex: none; width: 0.75em; height: 0.75em; position: relative; top: 0.08em; }
.sitegraph-local-swatch .sitegraph-ring { stroke-width: 1; }
/* Titles read as a list, like the table of contents beside it. */
.sitegraph-local-fold li > a { color: var(--sitegraph-ink); text-decoration: none; }
.sitegraph-local-fold li > a:hover,
li.sitegraph-local-hot > a { text-decoration: underline; }

/* The enlarged graph. */
.sitegraph-dialog {
  width: min(96vw, 1400px);
  height: 90vh;
  padding: 0.75rem 1rem 1rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 8px;
  background: var(--bs-body-bg, #ffffff);
  color: var(--bs-body-color, #212529);
}
.sitegraph-dialog[open] { display: flex; flex-direction: column; }
.sitegraph-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.sitegraph-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.sitegraph-dialog-close {
  border: none;
  background: none;
  color: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.sitegraph-in-dialog { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sitegraph-in-dialog .sitegraph-stage { flex: 1; height: auto; min-height: 300px; }