/* Flora graph widget */

/* =========================================================
 *  Sidebar widget
 *  ========================================================= */

#flora-graph-widget {
margin-top: 1.75rem;
padding-top: 1.25rem;
border-top: 1px solid var(--flora-surface0);
}

.flora-graph-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  gap: 0.75rem;
  margin: 0 0 0.75rem;

  color: var(--flora-lavender);

  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.flora-graph-heading a {
  color: var(--flora-blue);

  font-size: 0.8rem;
  font-weight: 500;

  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.14em;
  text-transform: capitalize;
}

.flora-graph-heading a:hover {
  color: var(--flora-lavender);
}


/* =========================================================
 *  Graph frame
 *  ========================================================= */

.flora-graph-frame {
  position: relative;

  width: 100%;
  height: 260px;

  overflow: hidden;

  border: 1px solid var(--flora-surface0);
  border-radius: 12px;

  background:
  color-mix(
    in srgb,
    var(--flora-mantle) 86%,
            transparent
  );

  box-shadow:
  inset 0 0 0 1px
  color-mix(
    in srgb,
    var(--flora-surface1) 25%,
            transparent
  );
}

.flora-graph-frame.flora-graph-full {
  height: min(72vh, 780px);
  min-height: 480px;

  margin-top: 1rem;

  border-radius: 14px;
}


/* =========================================================
 *  SVG
 *  ========================================================= */

.flora-graph-svg {
  display: block;

  width: 100%;
  height: 100%;

  touch-action: none;
  user-select: none;
}


/* =========================================================
 *  Edges
 *  ========================================================= */

.flora-graph-edge {
  stroke: var(--flora-overlay0);
  stroke-opacity: 0.34;
  stroke-width: 1.1;
}

.flora-graph-edge.parent {
  stroke: var(--flora-mauve);
  stroke-opacity: 0.5;
  stroke-width: 1.3;
}

.flora-graph-edge.reference {
  stroke: var(--flora-green);
  stroke-opacity: 0.38;
}

.flora-graph-edge.backlink {
  stroke: var(--flora-yellow);
  stroke-opacity: 0.34;
}


/* =========================================================
 *  Nodes
 *  ========================================================= */

.flora-graph-node {
  cursor: grab;
}

.flora-graph-node:active {
  cursor: grabbing;
}

.flora-graph-node circle {
  fill: var(--flora-surface1);
  stroke: var(--flora-overlay0);

  stroke-width: 1.3;

  transition:
  r 100ms ease,
  filter 100ms ease,
  stroke-width 100ms ease;
}

.flora-graph-node:hover circle {
  filter: brightness(1.16);
  stroke-width: 1.8;
}


/* Current page */

.flora-graph-node.current circle {
  fill: var(--flora-blue);
  stroke: var(--flora-lavender);

  stroke-width: 2.4;
}


/* Parent */

.flora-graph-node.parent circle {
  fill: var(--flora-mauve);
}


/* References */

.flora-graph-node.reference circle {
  fill: var(--flora-green);
}


/* Backlinks */

.flora-graph-node.backlink circle {
  fill: var(--flora-yellow);
}


/* =========================================================
 *  Labels
 *  ========================================================= */

.flora-graph-label {
  fill: var(--flora-text);

  font-family:
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  sans-serif;

  font-size: 11px;
  font-weight: 500;

  paint-order: stroke;

  stroke: var(--flora-base);
  stroke-width: 3px;
  stroke-linejoin: round;

  pointer-events: none;
}


/* =========================================================
 *  Status / loading text
 *  ========================================================= */

.flora-graph-status {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  padding: 1rem;

  color: var(--flora-subtext);

  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
}


/* =========================================================
 *  Full graph toolbar
 *  ========================================================= */

.flora-graph-toolbar {
  display: flex;
  flex-wrap: wrap;

  gap: 0.55rem;

  margin: 0.75rem 0 0;
}

.flora-graph-toolbar button,
.flora-graph-toolbar input {
  border: 1px solid var(--flora-surface0);
  border-radius: 8px;

  background: var(--flora-mantle);
  color: var(--flora-text);

  font: inherit;

  transition:
  border-color 120ms ease,
  background 120ms ease;
}

.flora-graph-toolbar button:hover,
.flora-graph-toolbar input:focus {
  border-color: var(--flora-lavender);
}

.flora-graph-toolbar button {
  padding: 0.38rem 0.7rem;

  cursor: pointer;
}

.flora-graph-toolbar button:hover {
  background: var(--flora-surface0);
}

.flora-graph-toolbar input {
  min-width: 14rem;

  padding: 0.38rem 0.6rem;

  outline: none;
}

.flora-graph-toolbar input::placeholder {
  color: var(--flora-subtext);
}


/* =========================================================
 *  Full graph page
 *  ========================================================= */

#flora-full-graph {
margin-top: 1.25rem;
}


/* =========================================================
 *  Mobile
 *  ========================================================= */

@media (max-width: 999px) {
  #flora-graph-widget {
  display: none;
  }
}