/* fallow-ignore-file unused-file */
/* Loaded via docs/zensical.toml's extra_css, a TOML config fallow's JS
   import graph can't trace. */
@layer inwards-diagrams {
  @keyframes diagram-edge-flow {
    to {
      stroke-dashoffset: -10;
    }
  }

  .homepage-loop-wrap {
    max-inline-size: 100%;
    overflow-x: auto;
  }

  /* The loop is drawn top to bottom, 380 units wide, so it fits a phone
     at its natural text size and never needs the wrapper to scroll. */
  #homepage-loop {
    display: block;
    inline-size: 100%;
    max-inline-size: 380px;
    block-size: auto;
    font-family: var(--md-text-font-family, sans-serif);
    font-size: 15px;
  }

  /* Nodes in Paper 2 with ink labels; the hook, which is Inwards, in Hunk;
     the end state outlined in Added, since it is the pass. */
  #homepage-loop .hl-node rect {
    fill: var(--inw-paper-2, var(--md-default-bg-color));
    stroke: var(--md-default-fg-color--light);
    stroke-width: 1;
  }

  #homepage-loop .hl-node text {
    fill: var(--md-default-fg-color);
    text-anchor: middle;
    dominant-baseline: middle;
  }

  #homepage-loop .hl-node--inwards rect {
    fill: var(--md-primary-fg-color);
    stroke: var(--md-primary-fg-color);
  }

  #homepage-loop .hl-node--inwards text {
    fill: var(--md-primary-bg-color);
    font-weight: 700;
  }

  #homepage-loop .hl-node--end rect {
    stroke: var(--inw-added, var(--md-default-fg-color--light));
    stroke-width: 1.5;
  }

  #homepage-loop .hl-node:focus-visible {
    outline: none;
  }

  #homepage-loop .hl-node:focus-visible rect {
    stroke: var(--md-default-fg-color);
    stroke-width: 2.5;
  }

  #homepage-loop .hl-edge {
    fill: none;
    stroke: var(--md-default-fg-color--light);
    stroke-width: 2;
  }

  #homepage-loop .hl-edge-dashed {
    stroke-dasharray: 5 4;
  }

  #homepage-loop .hl-arrowhead {
    fill: var(--md-default-fg-color--light);
  }

  #homepage-loop .hl-edge-label {
    fill: var(--md-default-fg-color--light);
    font-size: 14px;
    text-anchor: start;
  }

  /* Hovering (or focusing, for keyboard users) a node highlights the arrows
     connected to it. Node IDs are known and stable (hand-written SVG, not
     Mermaid-generated), so :has() can target them directly. The color
     change applies regardless of motion preference; only the flowing
     dash animation is gated, so reduced-motion users still get feedback. */
  #homepage-loop:has(#hl-agent:hover, #hl-agent:focus-visible) #hl-edge-to-hook,
  #homepage-loop:has(#hl-hook:hover, #hl-hook:focus-visible) #hl-edge-to-hook,
  #homepage-loop:has(#hl-hook:hover, #hl-hook:focus-visible) #hl-edge-clean,
  #homepage-loop:has(#hl-hook:hover, #hl-hook:focus-visible) #hl-edge-violation,
  #homepage-loop:has(#hl-agent:hover, #hl-agent:focus-visible) #hl-edge-violation,
  #homepage-loop .hl-edge.is-active {
    stroke: var(--md-accent-fg-color);

    @media (prefers-reduced-motion: no-preference) {
      stroke-dasharray: 6 4;
      animation: diagram-edge-flow 0.6s linear infinite;
    }
  }

  /* Quadrant chart (positioning): hand-built SVG, not Mermaid.
     Mermaid's quadrantChart is one of the diagram types Zensical doesn't
     auto-theme, and neither per-diagram themeVariables nor a raw CSS
     var() reference survive Mermaid's own color handling for it (both
     were tried and both silently fell back to Mermaid's stock grey).
     Plain CSS custom properties on a hand-authored SVG don't have that
     problem, the same reasoning that already applies to #homepage-loop. */
  .quadrant-chart-wrap {
    max-inline-size: 100%;
    overflow-x: auto;
  }

  #quadrant-chart {
    inline-size: 100%;
    min-inline-size: 600px;
    block-size: auto;
    font-family: var(--md-text-font-family, sans-serif);
  }

  #quadrant-chart .qc-title {
    font-size: 16px;
    text-anchor: middle;
    fill: var(--md-default-fg-color);
  }

  #quadrant-chart .qc-quadrant {
    fill: color-mix(in srgb, var(--md-default-fg-color) 6%, transparent);
  }

  #quadrant-chart .qc-divider {
    stroke: var(--md-default-fg-color--lighter);
    stroke-width: 1;
  }

  #quadrant-chart .qc-quadrant-label {
    font-size: 13px;
    fill: var(--md-default-fg-color--light);
  }

  #quadrant-chart .qc-axis-label {
    font-size: 12px;
    fill: var(--md-default-fg-color--light);
  }

  #quadrant-chart .qc-point circle {
    fill: var(--md-default-fg-color--light);
  }

  #quadrant-chart .qc-point-target circle {
    fill: var(--md-primary-fg-color);
    stroke: var(--md-accent-fg-color);
    stroke-width: 2;
  }

  #quadrant-chart .qc-point text {
    font-size: 11px;
    text-anchor: middle;
    fill: var(--md-default-fg-color);
  }
}