/* AQcredix — 3D KPI network */
.kn-shell{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;}
@media (max-width:980px){.kn-shell{grid-template-columns:1fr;}}

.kn-stage{position:relative;width:100%;}
.kn-wrap{position:relative;width:100%;aspect-ratio:1/1;min-height:400px;border-radius:var(--r-xl);
  overflow:hidden;background:radial-gradient(circle at 50% 45%, rgba(79,70,229,.10), transparent 70%);
  touch-action:none;}
#knCanvas{width:100%;height:100%;display:block;cursor:crosshair;}

.kn-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:10px;color:var(--fg-faint);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;transition:opacity .5s ease;pointer-events:none;}
.kn-loading .spin{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);
  border-top-color:var(--accent-bright);animation:knspin .8s linear infinite;}
@keyframes knspin{to{transform:rotate(360deg);}}
.kn-loading.hidden{opacity:0;}

.kn-hit{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);background:transparent;
  border:none;border-radius:50%;cursor:pointer;padding:0;pointer-events:auto;transition:opacity .25s ease;}
.kn-hit:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px;
  background:var(--accent-bright-tint);border-radius:50%;}

/* Hidden via visibility (not display) so it still has measurable dimensions —
   the positioning code needs its real width/height to keep it on-screen. */
.kn-tip{position:absolute;z-index:30;width:min(290px, calc(100% - 20px));pointer-events:none;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:14px 16px;
  box-shadow:var(--shadow-2);opacity:0;visibility:hidden;transition:opacity .15s ease;
  max-height:calc(100% - 20px);overflow-y:auto;}
.kn-tip.show{opacity:1;visibility:visible;}
.kn-tip-head{border-left:3px solid var(--accent-bright);padding-left:10px;margin-bottom:10px;}
.kn-tip-head b{display:block;font-family:var(--font-display);font-size:14px;line-height:1.35;color:var(--fg);}
.kn-tip-dept{display:block;font-size:11px;color:var(--fg-faint);font-family:var(--font-mono);margin-top:2px;}
.kn-tip-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-size:11.5px;color:var(--fg-faint);padding:5px 0;border-top:1px solid var(--border-soft);}
.kn-tip-row span{flex-shrink:0;}
.kn-tip-row code{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-muted);text-align:right;}
.kn-tip-row b{font-family:var(--font-mono);font-size:12px;}
.kn-tip-ref{font-size:10.5px;color:var(--fg-faint);margin-top:8px;font-family:var(--font-mono);}
.kn-tip-ref b{color:var(--brand-2);}
.kn-tip-note{font-size:10px;line-height:1.55;color:var(--fg-faint);margin-top:8px;padding-top:8px;
  border-top:1px solid var(--border-soft);}

.kn-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;justify-content:center;}
.kn-legend span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--fg-muted);}
.kn-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.kn-hint{text-align:center;font-size:11px;color:var(--fg-faint);margin-top:8px;}