/* The run class names below must mirror STATUS_CLASSES and TAKEN_EDGE_CLASS in
   web/graph_sessions/run_paint.py, and lib/graph/graph_css_test.mjs compares
   the two. */

.gframe { display: flex; flex-direction: column; min-height: 0; height: calc(100vh - 300px); }
.gframe.tall { height: calc(100vh - 260px); }
.gframe.short { height: 400px; flex: none; }
.gframe > .gwrap { flex: 1; }
.gwrap { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); min-height: 0; }
.gstage { position: relative; flex: 1; min-height: 0; }
.gcanvas { position: absolute; inset: 0; overflow: hidden; background: var(--bg); cursor: grab; touch-action: none; }
.gcanvas.is-dragging { cursor: grabbing; }
.glayer { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.gplane { position: relative; }
.gtools { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 3px; z-index: 2; }
.gstage:has(.gpanel:not([hidden])) .gtools { right: 472px; }
.gpanel { position: absolute; top: 0; right: 0; bottom: 0; width: 460px; max-width: 70%; background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; z-index: 3; }
.gpanel[hidden] { display: none; }
.gp-head { padding: 16px 16px 12px; display: flex; gap: 8px; align-items: flex-start; border-bottom: 1px solid var(--line); }
.gp-head .sub { margin-top: 3px; }
.gp-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; scrollbar-color: var(--line-hard) transparent; }
.gp-body > .codeview { flex: 1; min-height: 240px; }
.gp-desc { font-size: 15px; line-height: 1.55; }
.gp-label { margin-bottom: 4px; }
.route { appearance: none; background: none; border: 0; border-bottom: 1px solid var(--line); width: 100%; text-align: left; color: var(--ink); cursor: pointer; padding: 10px 0; display: flex; align-items: center; gap: 10px; font: inherit; font-size: 14px; }
.route:hover { background: var(--paper-2); }
.route svg { width: 15px; height: 15px; color: var(--ink-faint); flex: none; }
.glegend { display: flex; gap: 18px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); background: var(--surface); flex: none; }
.glegend span { display: inline-flex; align-items: center; gap: 6px; }
.glegend svg { width: 13px; height: 13px; }
.glegend .lg-happy { color: var(--ok); }
.glegend .lg-sad { color: var(--danger); }

.gnode { position: absolute; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-hard); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; text-align: left; cursor: pointer; color: var(--ink); appearance: none; }
.gnode:hover { border-color: var(--ink); }
.gnode:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gnode svg { width: 14px; height: 14px; color: var(--ink-soft); flex: none; }
.gnode .gn-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gnode .gn-chev { display: inline-flex; margin-left: auto; }
.gnode.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.gnode[data-k="person"] { border-style: dashed; }
.gnode[data-k="start"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.gnode[data-k="start"] svg { color: var(--on-ink); }
.gnode[data-k="happy"] { border-color: var(--ok); color: var(--ok); }
.gnode[data-k="happy"] svg { color: var(--ok); }
.gnode[data-k="sad"] { border-color: var(--danger); color: var(--danger); }
.gnode[data-k="sad"] svg { color: var(--danger); }

.gnode.run-ran { border-color: var(--ok-solid); box-shadow: inset 0 0 0 1px var(--ok-solid); }
.gnode.run-running,
.gnode.run-paused { border-color: var(--ember); box-shadow: inset 0 0 0 1px var(--ember); }
.gnode.run-error,
.gnode.run-dead { border-color: var(--bad-solid); box-shadow: inset 0 0 0 1px var(--bad-solid); }
.gnode.run-skipped { border-style: dashed; color: var(--ink-faint); background: var(--bg); }
.gnode.run-skipped svg { color: var(--ink-faint); }

.gedges { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.gedges path { fill: none; stroke: var(--ink-ghost); stroke-width: 1.5; stroke-linejoin: round; }
.gedges path.dashed { stroke-dasharray: 4 4; }
.gedges path.graph-edge-taken { stroke: var(--ok); stroke-width: 2; }