.view-picker{display:flex;margin-left:auto;gap:2px;flex-shrink:0}
.view-picker button{min-height:32px;color:#aaa}
.view-picker button[aria-pressed="true"]{background:var(--ui-active);border-color:var(--ui-accent);color:var(--ui-bright)}
.workspace[data-view="infographic"]{display:block}
.workspace[data-view="infographic"]>.inputs{display:contents}
.workspace[data-view="infographic"] .matrix-panel,.workspace[data-view="infographic"]>.results,.workspace[data-view="infographic"]>.quickstats{display:none}
.workspace[data-view="infographic"] .summary-panel{margin-bottom:12px}
.workspace[data-view="infographic"] .summary-metrics{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px}
.workspace[data-view="infographic"] .totals{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:24px}
.infographic-panel .panel-head{flex-wrap:wrap}
.shell .infographic-panel{background:var(--ui-panel-surface)}
.infographic-grid{background:transparent}
.infographic-panel .toggle{min-height:32px;align-items:center}
.infographic-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));column-gap:18px;row-gap:20px;padding:10px 18px;isolation:isolate}
.infographic-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1;color:#777}
.infographic-connectors path{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linejoin:round;stroke-linecap:round}
.infographic-connectors .next{color:var(--ui-accent)}
.checkpoint{justify-self:center;width:56px;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;background:transparent;padding:3px 4px;transition:opacity .2s}
.checkpoint:hover{background:transparent}
.checkpoint:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.checkpoint.completed{opacity:.28}
.checkpoint.completed:not(:disabled):hover,.checkpoint.completed:focus-visible{opacity:.65}
.checkpoint:disabled{cursor:default}
.checkpoint-icon{position:relative;display:grid;place-items:center;width:40px;height:40px}
.checkpoint-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.checkpoint-fallback{color:var(--ui-soft);font-size:18px}
.checkpoint-level{font-size:12px;color:var(--ui-bright);font-weight:600}
@media(max-width:1000px){.toolbar .view-picker{width:auto}.toolbar>.view-picker{margin-left:auto}}
@media(max-width:780px){.workspace[data-view="infographic"] .summary-metrics{grid-template-columns:minmax(0,1fr);gap:8px}.workspace[data-view="infographic"] .totals{grid-template-columns:minmax(0,1fr);gap:0}.view-picker{margin-left:auto}.view-picker button{min-height:40px}.toolbar{gap:12px}.infographic-grid{column-gap:18px;row-gap:20px}}
@media(prefers-reduced-motion:reduce){.checkpoint{transition:none}}

.priority-context{margin-left:auto;min-width:0;text-align:right;font-size:11px;line-height:1.4;color:var(--ui-soft)}
#infographic-context{color:var(--ui-accent)}
.infographic-controls{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;min-width:0}
.helper-control{min-width:0;white-space:normal;flex-wrap:wrap}
.helper-panel{position:fixed;z-index:50;box-sizing:border-box;width:min(460px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;padding:20px;background:#19191d;color:#d9d9d9;border:1px solid var(--helper-accent,#777);border-radius:5px;box-shadow:0 8px 24px #0009}
.helper-location{display:grid;place-items:center;min-width:0}
.helper-location svg{display:block;width:100%;max-height:380px;overflow:visible}
.helper-heading{display:flex;gap:8px;align-items:center;margin-top:16px;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.helper-heading img{width:40px;height:40px;object-fit:contain;flex-shrink:0}
.helper-explanation{margin-top:16px;font-size:13px;line-height:1.6;max-height:240px;overflow:auto;overflow-wrap:anywhere}
.helper-location[hidden]{display:none}
.helper-location[hidden]+.helper-heading{margin-top:0}
.matrix-skill{fill:#5522cc;stroke:#9674e8;stroke-width:1.5}
.matrix-mastery{fill:#882266;stroke:#c06b9f;stroke-width:1.5}
.matrix-enhancement{fill:#336699;stroke:#78aacc;stroke-width:1.5}
.matrix-common{fill:#666699;stroke:#a3adc8;stroke-width:1.5}
.matrix-other{opacity:.4}.matrix-locked{opacity:.2}
.matrix-target polygon{stroke:var(--helper-accent);stroke-width:4;filter:drop-shadow(0 0 3px var(--helper-accent))}
.matrix-lock{fill:#6a6376}.matrix-lock-loop{fill:none;stroke:#6a6376;stroke-width:3}
.matrix-centre{fill:#302738;stroke:#776581;stroke-width:2}
.checkpoint.skill-hover .checkpoint-icon{filter:drop-shadow(0 0 5px var(--skill-accent))}
.checkpoint.completed.skill-hover{opacity:.65}

@media(hover:none),(pointer:coarse){.helper-control{display:none}}