/* graph.css — resource graph page: legend, inline SVG graph, list fallback.
   The graph is a normal element of the page: it scales to the available width
   (no inner scroll container); the page itself scrolls. */

.ressources-head { padding-top: 1.5rem; }
.ressources-head h1 { margin-bottom: .5rem; }
.ressources-intro { color: var(--fg-muted); margin-bottom: 1.5rem; }

/* ---- Legend (built from the editable node types) -------------------- */
.graph-legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .85rem; color: var(--fg-muted); margin: .5rem 0; }
.graph-legend .lg { display: inline-flex; align-items: center; gap: .45rem; }
.graph-legend .lg-dot { width: 11px; height: 11px; border-radius: 50%; }

/* ---- Inline SVG graph ------------------------------------------------ */
.graph-region { margin-top: 1.25rem; }
.graph-figure { display: flex; justify-content: center; }
.rgraph { width: 100%; height: auto; max-width: 100%; overflow: visible; }

/* Edges: solid stroke + group opacity (so line and arrowhead never compound
   into darker overlaps). Opacity sits on the whole group. */
.rgraph-edges { opacity: .4; }
.rgraph-node, .rgraph-edges { transition: opacity .22s ease; }
/* Hover: gently grey the whole graph except the hovered node. */
.rgraph.has-hover .rgraph-node { opacity: .4; }
.rgraph.has-hover .rgraph-node.is-hovered { opacity: 1; }
.rgraph.has-hover .rgraph-edges { opacity: .12; }
/* Only clickable nodes (wrapped in a link) get the pointer cursor;
   separators keep the default cursor. */
.rgraph-link, .rgraph-link .rgraph-label-group, .rgraph-link .rgraph-dot { cursor: pointer; }
.rgraph-label { dominant-baseline: middle; }
/* Never underline node labels (override the global a:hover rule). */
.rgraph-link, .rgraph-link:hover, .rgraph-label-group,
.rgraph-label, .rgraph-sub { text-decoration: none; }
.rgraph-link:focus-visible { outline: none; }
.rgraph-link:focus-visible .rgraph-dot { stroke: var(--fg); stroke-width: 3; }

/* ---- List fallback (mobile + SEO) ----------------------------------- */
.graph-view { display: block; }
.graph-outline-view { display: none; max-width: var(--measure); margin-inline: auto; }
.rgraph-outline { list-style: none; padding: 0; margin: 0; }
.rgraph-outline li { padding: .25rem 0 .25rem 1.4rem; position: relative; line-height: 1.5; }
.rgraph-outline li::before { content: ""; position: absolute; left: 0; top: .8em; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-50%); }
.rgraph-outline .ol-milestone { margin-top: 1rem; font-size: 1.1rem; font-weight: 700; border-top: 1px solid var(--border); padding-top: 1rem; }
.rgraph-outline .ol-milestone:first-child { border-top: 0; margin-top: 0; }
.rgraph-outline .ol-milestone::before { background: var(--node-milestone); width: 12px; height: 12px; }
.rgraph-outline .ol-section { padding-left: 2rem; }
.rgraph-outline .ol-section::before { left: .6rem; background: var(--node-section); }
.rgraph-outline .ol-step { padding-left: 2.6rem; font-size: .95rem; }
.rgraph-outline .ol-step::before { left: 1.2rem; background: var(--node-step); width: 7px; height: 7px; }
.rgraph-outline .ol-sub { color: var(--fg-muted); font-style: italic; font-weight: 400; font-size: .9em; }

/* ---- Mobile: keep the graph (preferred over the list). Scale it to fit
   the screen width inside a tall, drag-to-pan window. The list stays hidden
   (kept in DOM for SEO). */
@media (max-width: 760px) {
  .graph-figure {
    display: block;       /* not flex — keep the SVG's natural aspect ratio */
    height: 74vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: grab;
    touch-action: none;   /* JS handles 1-finger pan + 2-finger pinch-zoom */
  }
  .graph-figure.is-grabbing { cursor: grabbing; }
  .rgraph { width: 100%; max-width: 100%; height: auto; }
}