.skill-graph{--graph-border:#cbd5e1}.skill-graph button{cursor:pointer;border:1px solid var(--graph-border);background:var(--surface-card,white);min-height:38px;color:inherit;border-radius:8px;padding:6px 12px}.skill-graph button:disabled{cursor:wait;opacity:.5}.skill-graph button:focus-visible,.skill-graph input:focus-visible,.skill-graph a:focus-visible{outline-offset:3px;outline:3px solid #2563eb}.skill-graph-tools{flex-wrap:wrap;align-items:end;gap:16px 32px;display:flex}.skill-graph-tools form{flex:1;min-width:240px}.skill-graph-tools form>div{gap:8px;margin-top:8px;display:flex}.skill-graph-tools input[type=search]{border:1px solid var(--graph-border);border-radius:8px;width:100%;min-width:0;padding:8px 12px}.skill-graph-tools fieldset{border:0;flex-wrap:wrap;gap:12px;padding:0;display:flex}.skill-graph-tools legend{margin-bottom:8px}.skill-graph-tools label{align-items:center;gap:6px;display:inline-flex}.graph-hierarchy{color:#2563eb}.graph-prerequisite{color:#a16207}.skill-graph-results{flex-wrap:wrap;gap:8px;max-height:100px;margin:8px -4px;padding:10px 4px;display:flex;overflow-y:auto}.skill-graph-results button[aria-pressed=true]{color:#2563eb;border-color:#2563eb}.skill-graph-stage{border:1px solid var(--graph-border);background:#f8fafc;border-radius:16px;height:540px;position:relative;overflow:hidden}.skill-graph-canvas{touch-action:none;cursor:grab;width:100%;height:100%;display:block}.skill-graph-canvas:active{cursor:grabbing}.skill-graph-zoom{background:var(--surface-card,white);color:var(--text-primary,#1e293b);border-radius:8px;align-items:center;gap:8px;display:flex;position:absolute;top:12px;left:12px}.skill-graph-card{border:1px solid var(--graph-border);background:var(--surface-card,white);border-radius:12px;width:280px;max-height:calc(100% - 32px);padding:16px;position:absolute;top:16px;right:16px;overflow-y:auto;box-shadow:0 4px 16px #0f172a12}.skill-graph-card-controls{justify-content:space-between;gap:12px;display:flex}.skill-graph-card-controls button:first-child{touch-action:none}.skill-graph-card-body{color:inherit;overflow-wrap:anywhere;margin:16px 0;text-decoration:none;display:block}.skill-graph-card-body h2{margin:0;font-size:20px}.skill-graph-card-body p{white-space:pre-wrap;margin:8px 0}.skill-graph-loading{text-align:center;color:#475569;width:100%;position:absolute;top:40%}.skill-graph-notice{color:#475569;background:#e2e8f0;border-radius:8px;max-width:calc(100% - 24px);padding:8px 12px;position:absolute;top:58px;left:12px}@media (max-width:640px){.skill-graph-stage{height:clamp(400px,62svh,560px)}.skill-graph-results{max-height:72px}.skill-graph-card{width:auto;max-height:45%;padding:12px;inset:auto 8px 8px}.skill-graph-card-body{margin:8px 0}.skill-graph-card.is-collapsed{max-height:100px}}.skill-graph-tools form button{white-space:nowrap;flex-shrink:0}
