/* graph.css — the public system graph (system.html, graph.js; owner 2026-10-31). Colours from the tokens of site.css, both themes.
   version: 0.1.0 · created 2026-10-31 by Pascal Ehlig, ITS · edited 2026-10-31 by Pascal Ehlig, ITS */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.g-intro{padding:var(--s5,1.5rem) 0 var(--s3,.75rem)}
.g-empty{padding:var(--s3,.75rem) var(--s4,1rem);border:1px dashed var(--border);border-radius:var(--r,8px);background:var(--info-bg);color:var(--info)}
.g-box{margin:var(--s4,1rem) 0 var(--s6,2rem)}
.g-trail{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;margin-bottom:var(--s3,.75rem);color:var(--muted)}
.g-trail button{min-height:44px;padding:0 .5rem;border:0;background:none;color:var(--link);font:inherit;cursor:pointer;text-decoration:underline dotted}
.g-trail button[aria-current]{color:var(--text);text-decoration:none;font-weight:600}
.g-stage{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:var(--s4,1rem);align-items:start}
.g-stage svg{width:100%;height:auto;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r,8px)}
.g-edge{stroke:var(--border);stroke-width:1.5}
.g-node{cursor:pointer}
.g-node circle{fill:var(--surface);stroke:var(--muted);stroke-width:2;transition:r .2s ease,fill .2s ease}
.g-node text{fill:var(--text);font:600 13px var(--sans,system-ui);paint-order:stroke;stroke:var(--sunken);stroke-width:4px}
.g-node:hover circle{fill:var(--accent)}
.g-workshop circle{stroke:var(--accent)}
.g-tag circle{stroke:var(--info)}
.g-project circle{stroke:var(--ok);fill:var(--ok-bg)}
.g-focus circle{fill:var(--action);stroke:var(--action)}
.g-focus text{fill:var(--on-action);stroke:none}
.g-dot{fill:var(--muted);stroke:none}
.g-up text{font-weight:400;fill:var(--muted)}
.g-list{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.g-item{width:100%;min-height:44px;text-align:left;padding:.4rem .6rem;border:1px solid var(--border);border-radius:var(--r,8px);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-item:focus-visible,.g-trail button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.g-detail{margin-top:var(--s4,1rem);padding:var(--s3,.75rem);border:1px solid var(--border);border-radius:var(--r,8px);background:var(--surface)}
.g-detail h3{margin:0 0 .25rem;font-size:var(--t-h3,1.25rem)}
@media (max-width:720px){.g-stage{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.g-node circle{transition:none}}