/* Analytical framing shared by site and Mini App. No global element overrides. */
.viz-overview, .viz-story {
  --viz-rule: var(--line, var(--border));
  min-width: 0; padding: var(--space-5); border: 1px solid var(--viz-rule);
  border-radius: var(--radius); background: var(--surface); color: var(--text);
}
.viz-overview { margin: var(--space-4) 0; }
.viz-overview[hidden] { display: none; }
/* Reuse for identity art / explanatory figures; the host reserves dimensions. */
.viz-media { overflow: hidden; }
.viz-media > img, .viz-media > svg { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.viz-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); }
.viz-heading > div, .viz-ranking, .viz-context { min-width: 0; }
.viz-heading h2, .viz-story h3 { font-family: var(--font-display, Inter); font-size: clamp(1rem, 1.7vw, 1.4rem); line-height: 1.45; font-weight: 500; margin: var(--space-2) 0; overflow-wrap: anywhere; }
.viz-kicker { color: var(--accent); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; margin: 0; }
.viz-note, .viz-caption, .viz-track-meta { color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.65; }
.viz-note { margin: var(--space-2) 0; }
.viz-control { display: grid; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-dim); flex-shrink: 0; }
.viz-control select { min-height: 44px; max-width: 100%; font: inherit; color: var(--text); border: 1px solid var(--line, var(--border)); border-radius: var(--radius); background: var(--surface-alt); padding: var(--space-2); }
.viz-comparison-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(180px, 1fr); gap: var(--space-5); margin-top: var(--space-4); }
.viz-ranking { margin: 0; }
.viz-ranking figcaption { color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.6; }
.viz-ranking ol { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-4); }
.viz-rank-label, .viz-track-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: var(--fs-sm); }
.viz-rank-label span, .viz-track-label span { overflow-wrap: anywhere; min-width: 0; }
.viz-rank-label strong, .viz-track-label strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.viz-ranking small { font-size: var(--fs-2xs); color: var(--text-dim); }
.viz-bar { height: 6px; margin: var(--space-2) 0 var(--space-1); background: var(--surface-alt); border-radius: 3px; }
.viz-bar i { display: block; width: var(--position); height: 100%; background: var(--accent); opacity: .6; border-radius: inherit; }
.viz-ranking li:first-child .viz-bar i { opacity: 1; }
.viz-context { border-left: 1px solid var(--line, var(--border)); padding-left: var(--space-5); font-size: var(--fs-sm); }
.viz-reference { display: block; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; font-variant-numeric: tabular-nums; margin-top: var(--space-3); }
.viz-tracks { display: grid; gap: var(--space-5); margin-block: var(--space-5); }
.viz-track { position: relative; margin: var(--space-3) 6px; height: 6px; border-radius: 3px; background: var(--surface-alt); border: 1px solid var(--line, var(--border)); }
.viz-median { position: absolute; left: 50%; top: -5px; height: 14px; border-left: 1px dashed var(--text-dim); }
.viz-track-dot { position: absolute; left: var(--position); top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: var(--accent); border: 2px solid var(--surface); border-radius: 50%; }
.viz-track-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-2xs); }
.viz-history { display: block; width: 100%; height: 186px; margin-top: var(--space-4); overflow: visible; }
.viz-history text { fill: var(--text-dim); font-family: var(--font-ui, Inter, sans-serif); font-size: 12px; font-variant-numeric: tabular-nums; }
.viz-grid { stroke: var(--line, var(--border)); stroke-dasharray: 3 5; }
.viz-line { stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.viz-point { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.viz-game-buttons { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-1); scrollbar-width: thin; }
.viz-game-buttons button { display: grid; place-items: center; gap: var(--space-1); flex: 1 0 48px; min-height: 54px; padding: var(--space-2) var(--space-1); font: inherit; font-size: var(--fs-2xs); color: var(--text-dim); background: var(--surface-alt); border: 1px solid var(--line, var(--border)); border-radius: var(--radius); cursor: pointer; }
.viz-game-buttons strong { color: var(--text); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.viz-game-buttons button[aria-pressed=true] { border-color: var(--accent); color: var(--accent); }
.viz-caption { min-height: 2.5em; }
.viz-data { font-size: var(--fs-xs); color: var(--text-dim); }
.viz-data summary { min-height: 44px; display: list-item; align-content: center; cursor: pointer; }
.viz-data table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.viz-data th, .viz-data td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--line, var(--border)); }
.viz-data td:last-child { text-align: right; }
.viz-game-buttons button:focus-visible, .viz-control select:focus-visible, .viz-data summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 680px) {
  .viz-overview, .viz-story { padding: var(--space-4); }
  .viz-heading { flex-direction: column; }
  .viz-control { width: 100%; }
  .viz-control select { width: 100%; }
  .viz-comparison-grid { grid-template-columns: minmax(0, 1fr); }
  .viz-context { border-left: 0; border-top: 1px solid var(--line, var(--border)); padding: var(--space-4) 0 0; }
}