/* Compact local-sample graph. Motion changes SVG transforms, opacity and counters only. */
.tier-graph {
  --color-pick-a: var(--color-blue);
  --color-pick-b: var(--color-accent);
  --color-pick-c: var(--color-red);
  --color-pick-d: var(--color-faint);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  gap: var(--tier-graph-gap, 8px);
  color: var(--color-ink);
  font-family: var(--font-body);
}
.tier-graph-heading { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.tier-graph-heading h3 { margin: 0; font-size: 15px; line-height: 1.2; font-weight: 750; letter-spacing: -.4px; }
.tier-graph-sample { padding: 2px 5px; border: 1px solid var(--color-rule); border-radius: 3px; color: var(--color-muted); font-size: 10px; line-height: 1.25; white-space: nowrap; }
.tier-graph-legend { display: flex; align-items: center; gap: 12px; min-height: 14px; color: var(--color-muted); font: 10px/1 var(--font-mono); }
.tier-graph-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.tier-graph-legend-item.is-selected-choice { color: var(--color-ink); font-weight: 750; }
.tier-graph-key { width: 7px; height: 7px; border-radius: 1px; }
.tier-graph-key--a { background: var(--color-pick-a, var(--color-blue)); }
.tier-graph-key--b { background: var(--color-pick-b, var(--color-accent)); }
.tier-graph-key--c { background: var(--color-pick-c, var(--color-red)); }
.tier-graph-key--d { background: var(--color-pick-d, var(--color-faint)); }
.tier-graph-choice { margin-left: auto; color: var(--color-muted); font: 10px/1 var(--font-body); white-space: nowrap; }
.tier-graph-rows { display: flex; flex-direction: column; flex: 1; gap: var(--tier-rows-gap, 3px); min-height: 0; }
.tier-graph-row { display: grid; grid-template-columns: var(--tier-rank-width, 100px) minmax(0, 1fr) 36px; align-items: center; gap: 8px; flex: 1 1 0; min-height: 0; max-height: var(--tier-row-height, 28px); padding: 1px 5px; border-radius: 4px; }
.tier-graph-row.is-selected-tier { background: var(--color-accent-tint, var(--color-paper-3)); }
.tier-graph-rank { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tier-graph-emblem { display: block; width: 20px; height: 20px; flex: none; object-fit: contain; }
.tier-graph-name { color: var(--color-muted); font-size: 12px; line-height: 1; white-space: nowrap; }
.tier-graph-name-short { display: none; color: var(--color-muted); font-size: 12px; line-height: 1; white-space: nowrap; }
.tier-graph-row.is-selected-tier .tier-graph-name-short { color: var(--color-accent); font-weight: 750; }
.tier-graph-row.is-selected-tier .tier-graph-name { color: var(--color-accent); font-weight: 750; }
.tier-graph-track { height: 8px; min-width: 0; overflow: clip; border-radius: 3px; background: var(--color-paper-3); }
.tier-graph-bar { display: block; width: 100%; height: 8px; overflow: visible; }
.tier-graph-segment--a { fill: var(--color-pick-a, var(--color-blue)); }
.tier-graph-segment--b { fill: var(--color-pick-b, var(--color-accent)); }
.tier-graph-segment--c { fill: var(--color-pick-c, var(--color-red)); }
.tier-graph-segment--d { fill: var(--color-pick-d, var(--color-faint)); }
.tier-graph-segment.is-selected-choice { stroke: var(--color-ink); stroke-width: .35px; }
.tier-graph-glint { fill: var(--color-ink); pointer-events: none; }
.tier-graph-value { color: var(--color-muted); font: 11px/1 var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.tier-graph-row.is-selected-tier .tier-graph-value { color: var(--color-accent); font-weight: 750; }
.tier-graph[data-revealed="false"] .tier-graph-value { color: var(--color-faint); }
.tier-graph-sr-only { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 560px) {
  .tier-graph { gap: var(--tier-graph-gap, 5px); }
  .tier-graph-heading { min-height: 20px; }
  .tier-graph-heading h3 { font-size: 13px; }
  .tier-graph-sample { font-size: 9px; padding: 1px 4px; }
  .tier-graph-row { grid-template-columns: var(--tier-rank-width, 84px) minmax(0, 1fr) 32px; gap: 5px; max-height: var(--tier-row-height, 18px); padding-inline: 3px; }
  .tier-graph-emblem { width: 16px; height: 16px; }
  .tier-graph-rank { gap: 4px; }
  .tier-graph-name { font-size: 10px; }
  .tier-graph-value { font-size: 10px; }
  .tier-graph-track, .tier-graph-bar { height: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .tier-graph *, .tier-graph *::before, .tier-graph *::after { animation: none !important; transition: none !important; }
}
/* Every main bar now measures the selected call, on one common 0–100 scale. */
.tier-graph-segment--selected{fill:var(--color-accent)}
.tier-graph-heading{min-width:0;gap:5px}
.tier-graph-heading h3{min-width:0;overflow-wrap:anywhere}
.tier-graph-sample{flex:none}