/* Chart framing and sheets are reference components; argo-chart.js owns the drawing. */
.argo-chart { display: flex; min-width: 0; color: var(--ink); }
.argo-chart-wrap, .argo-chart-stage { position: relative; width: 100%; min-width: 0; }
.argo-chart-stage > svg { display: block; width: 100%; height: auto; }
.argo-pop, .argo-sheet { background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-sheet); border: 0; border-radius: 0; padding: var(--s4); max-width: var(--measure); }
.argo-pop { position: absolute; z-index: 20; width: min(20rem, 100%); }
.argo-pop-kind, .argo-pop-meta, .argo-pop-note { font-family: var(--mono); font-size: var(--t-1); line-height: var(--lh-1); color: var(--ink-soft); }
.argo-pop-title { font-size: var(--t1); line-height: var(--lh1); }
.argo-pop p + p { margin-top: var(--s3); }
.argo-chips, .argo-tally { display: flex; flex-wrap: wrap; gap: var(--s3); }
.argo-tally { font-family: var(--mono); font-size: var(--t-1); color: var(--ink-soft); }
.argo-keys { display: none; }
.chart-with-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s5); }
.aspects-phone { display: block; }
.chart-aspects { display: none; margin-top: var(--s4); }
.chart-aspects summary { min-height: var(--tap); cursor: pointer; text-decoration: underline; }
.chart-aspects .grid { max-width: none; width: 100%; }
.chart-aspects .grid svg { max-width: none; }
.grid svg { display: block; width: 100%; height: auto; }
@media (min-width: 760px) { .aspects-phone { display: none; } .chart-aspects { display: block; } }
@media (min-width: 1024px) { .chart-with-grid { grid-template-columns: minmax(0,2fr) minmax(0,1fr); } }