/* "Every program at one scale" (compare/index.html, scale.js). */

#fig-eight .ctl.top { margin: 0 0 var(--s3); }
#fig-eight .seg { display: flex; flex: 1 1 auto; }
#fig-eight .seg > button { flex: 1 1 auto; }
#fig-eight .seg > button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 700; }
#fig-eight .sc-rows { position: relative; display: grid; grid-template-columns: minmax(12rem, 18rem) minmax(6rem, 1fr) auto; gap: var(--s1) var(--s3); align-items: center; }
#fig-eight .sc-axis { grid-column: 2; position: relative; height: 1.5rem; border-bottom: 1px solid var(--line); }
#fig-eight .sc-tick { position: absolute; bottom: 0; top: 0; border-left: 1px solid var(--line); }
#fig-eight .sc-tick span { position: absolute; bottom: 2px; left: 3px; color: var(--muted); font: 500 .6875rem/1 var(--mono); white-space: nowrap; }
#fig-eight .sc-tick:nth-child(even) span { display: none; }
#fig-eight .sc-group { grid-column: 1 / -1; margin: var(--s3) 0 0; color: var(--muted); font: var(--lab); letter-spacing: var(--ls-lab); text-transform: uppercase; }
#fig-eight .sc-row { display: contents; }
#fig-eight .sc-name { display: flex; flex-direction: column; min-width: 0; }
#fig-eight .sc-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--fs-ui)/1.3 var(--mono); }
#fig-eight .sc-name small { color: var(--muted); font-size: var(--fs-small); }
#fig-eight .sc-track { display: block; height: 18px; background: var(--sunk); }
#fig-eight .sc-track > i { display: block; height: 100%; background: var(--c-in); }
#fig-eight .sc-row.train .sc-track > i { background: var(--d2); }
#fig-eight .sc-row.child .sc-track > i { background: var(--d1); }
#fig-eight .sc-val { font: 600 var(--fs-ui)/1.3 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 40em) {
  #fig-eight .sc-rows { grid-template-columns: minmax(0, 1fr) auto; }
  #fig-eight .sc-axis { display: none; }
  #fig-eight .sc-name { grid-column: 1 / -1; margin-top: var(--s2); }
}