/* BIO 202 path-diagram controls — the arrow IS the slider.
   Companion to paths.js. Colours are pulled from the host page's variables
   where they exist, so a diagram sits inside a lesson's palette rather than
   next to it. */

.paths-root { margin:2px 0 0; }
.paths-svg { width:100%; height:auto; display:block; touch-action:none; }

/* boxes: the nouns */
.paths-box-bg { fill:#fff; stroke:#cfcbbd; stroke-width:1.4; }
.paths-box-bg.outcome { fill:#f4f2ea; stroke:#b8b3a4; }
.paths-box-label { font:12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
                   fill:#1d1d1b; text-anchor:middle; pointer-events:none; }
.paths-box-sub { font:10.5px -apple-system, sans-serif; fill:#6b6b68;
                 text-anchor:middle; pointer-events:none; }

/* arrows: the verbs, and the controls */
/* The visible arrow is decoration only. All pointer traffic belongs to the
   fat invisible twin underneath it -- otherwise a thick arrow paints over its
   own hit target and swallows the drag that was meant to thin it. */
.paths-arrow { fill:none; stroke:#2f6b8f; stroke-linecap:round; pointer-events:none; }
.paths-arrow.dark { stroke:#c4c0b4; }
.paths-arrow.zero { stroke:#c4c0b4; stroke-dasharray:5 5; }
/* A signed arrow pulling the other way. Thickness is already carrying the
   magnitude, so the direction has to be carried by something else. */
.paths-arrow.down { stroke:#9a6b1f; }
.paths-arrow-value.down { fill:#9a6b1f; }
.paths-arrow.selected { stroke:#b23a48; }
.paths-arrow.ghost { stroke:#cfcbbd; stroke-dasharray:3 6; stroke-width:1.6; }

.paths-hit { fill:none; stroke:transparent; stroke-width:26; cursor:ns-resize; outline:none;
             pointer-events:stroke; }
.paths-hit:focus-visible + .paths-arrow,
.paths-hit:focus + .paths-arrow { stroke:#b23a48; }

/* The plate an arrow runs behind, so a label stays readable on top of a
   stroke of any weight. Override --paths-plate if the panel is not white. */
.paths-label-plate { fill:var(--paths-plate, #fff); pointer-events:none; }
.paths-arrow-label { font:11px -apple-system, sans-serif; fill:#4a4842;
                     text-anchor:middle; pointer-events:none; }
.paths-arrow-value { font:600 12.5px ui-monospace, Menlo, monospace; fill:#2f6b8f;
                     text-anchor:middle; pointer-events:none; }
.paths-arrow-value.selected { fill:#b23a48; }
.paths-arrow-value.dark { fill:#a9a69c; }

/* the − / + steppers that appear on the selected arrow */
.paths-leader { stroke:#1d1d1b; stroke-width:1; stroke-dasharray:2 3; opacity:0.45; pointer-events:none; }
.paths-step { cursor:pointer; }
.paths-step circle { fill:#fff; stroke:#b23a48; stroke-width:1.3; }
.paths-step text { font:600 13px ui-monospace, Menlo, monospace; fill:#b23a48;
                   text-anchor:middle; pointer-events:none; }
.paths-step:hover circle { fill:#f4d3d7; }

.paths-note { font-size:12.5px; color:#6b6b68; margin-top:6px; min-height:2.4em; line-height:1.4; }
.paths-note b { color:#1d1d1b; font-weight:600; }