/* Figure 4. No state gives more: the largest value over every state as a top eigenvalue, for the visitor's acts and for
   thousands of random commuting acts. Every class is prefixed tb4- and every token is scoped to the figure. */
.tb4 {
  --tb-paper: #faf8f3; --tb-ink: #1d1d1b; --tb-body: #2a2926; --tb-soft: #3c3a36; --tb-hair: #8a8a8a;
  --tb-rule: color-mix(in srgb, var(--tb-ink) 16%, var(--tb-paper));
  --tb-c: #009fe3; --tb-m: #e6007e; --tb-c-text: #0072b5; --tb-m-text: #c4006b; --tb-lost: #c8401f;
  --tb-text: "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tb-display: "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tb-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  margin: 0; padding: clamp(1rem, 2.4vw, 1.75rem); background: var(--tb-paper); color: var(--tb-body);
  border: 1px solid var(--tb-ink); font-family: var(--tb-text); font-weight: 420; line-height: 1.42;
  font-optical-sizing: auto; box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
  .tb4 { --tb-paper: #141413; --tb-ink: #faf8f3; --tb-body: #e9e6df; --tb-soft: #c9c5bc; --tb-hair: #8a8a8a;
    --tb-c: #2bb3f0; --tb-m: #ff3d9e; --tb-c-text: #2bb3f0; --tb-m-text: #ff6fb6; --tb-lost: #ff6a3d; }
}
.tb4 *, .tb4 *::before, .tb4 *::after { box-sizing: border-box; }
.tb4-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tb4-hide { display: none !important; }
.tb4-label { margin: 0; font: 700 .72rem/1.3 var(--tb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tb-soft); }
.tb4-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: baseline; padding-bottom: .75rem; border-bottom: 1px solid var(--tb-rule); }
.tb4-live { color: var(--tb-ink); }
.tb4-live::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; background: var(--tb-m); vertical-align: .05rem; }
.tb4-lede { margin: .8rem 0 0; max-width: 46rem; font-size: 1.08rem; font-weight: 450; line-height: 1.32; color: var(--tb-ink); }
.tb4-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); padding-top: 1rem; }
.tb4-col { min-width: 0; }
.tb4-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .8rem; align-items: center; margin-top: .8rem; }
.tb4-slider .tb4-label { grid-column: 1 / -1; color: var(--tb-ink); }
.tb4-slider input { width: 100%; min-height: 32px; accent-color: var(--tb-ink); }
.tb4-slider input:focus-visible, .tb4-ctl button:focus-visible { outline: 2px solid var(--tb-ink); outline-offset: 2px; }
.tb4-slider output { font: 700 .95rem/1 var(--tb-mono); color: var(--tb-ink); min-width: 3.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.tb4-read { margin-top: 1rem; padding-top: .6rem; border-top: 3px solid var(--tb-ink); }
.tb4-num { margin: .2rem 0 0; font-family: var(--tb-display); font-weight: 860; letter-spacing: -.05em; line-height: .9;
  font-size: clamp(2.1rem, 3.5vw, 3rem); color: var(--tb-ink); font-variant-numeric: tabular-nums lining-nums; }
.tb4-sub { margin: .45rem 0 0; font: 400 .8rem/1.4 var(--tb-mono); color: var(--tb-soft); font-variant-numeric: tabular-nums; }
.tb4-spec { margin-top: 1rem; padding-top: .6rem; border-top: 1px solid var(--tb-rule); }
.tb4-ev, .tb4-hist { position: relative; height: 4.5rem; margin: 1.9rem .6rem 1.6rem; }
.tb4-hist { height: 9rem; margin-top: 1rem; }
.tb4-axis { position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--tb-hair); }
.tb4-ev > span:not(.tb4-axis), .tb4-hist > span:not(.tb4-axis) { position: absolute; bottom: 0; }
.tb4 i { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .35rem; font: 650 .78rem/1 var(--tb-text); font-style: normal; color: var(--tb-soft); white-space: nowrap; }
.tb4-tk { width: 1px; height: .45rem; background: var(--tb-hair); }
.tb4-lim { width: 2px; height: 100%; background: var(--tb-ink); margin-left: -1px; }
.tb4-lim i { color: var(--tb-ink); top: -1.15rem; margin-top: 0; }
.tb4-e { width: .7rem; height: .7rem; margin-left: -.35rem; bottom: 1.2rem !important; border-radius: 50%; border: 2px solid var(--tb-c); background: var(--tb-paper); }
.tb4-bar { background: var(--tb-c); border-right: 1px solid var(--tb-paper); }
.tb4-best { width: 0; height: 100%; border-left: 2px dashed var(--tb-m); }
.tb4-count { margin: .5rem 0 0; font-size: .95rem; line-height: 1.4; color: var(--tb-ink); font-variant-numeric: tabular-nums; }
.tb4-ctl { margin-top: .8rem; }
.tb4-ctl button { appearance: none; border: 1px solid var(--tb-ink); border-radius: 0; background: transparent; color: var(--tb-ink); cursor: pointer;
  min-height: 40px; padding: 0 .8rem; font: 700 .66rem/1 var(--tb-mono); letter-spacing: .12em; text-transform: uppercase; }
.tb4-ctl button:hover { background: color-mix(in srgb, var(--tb-ink) 8%, transparent); }
.tb4-ctl button:disabled { opacity: .5; cursor: progress; }
.tb4-cap { margin: 1rem 0 0; max-width: 52rem; font-size: .92rem; line-height: 1.42; color: var(--tb-body); }
@media (max-width: 820px) { .tb4-grid { grid-template-columns: minmax(0, 1fr); } }
@media (forced-colors: active) {
  .tb4 { border-color: CanvasText; }
  .tb4-live::before, .tb4-lim, .tb4-tk, .tb4-bar { forced-color-adjust: none; background: CanvasText; }
  .tb4-bar { border-right-color: Canvas; }
  .tb4-e { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .tb4-best { border-left-color: CanvasText; }
}
@media print { .tb4 { background: none; } .tb4-ctl { display: none; } .tb4-read, .tb4-spec, .tb4-hist, .tb4-count { break-inside: avoid; }
  .tb4-tk, .tb4-lim, .tb4-bar, .tb4-e { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tb4-grid { display: block; } .tb4-col + .tb4-col { margin-top: 1.5rem; break-inside: avoid; } .tb4-slider { break-inside: avoid; } }

/* print: a head or label stays with what follows it (grids that hold labels print as blocks) */
@media print { .tb4-head, p.tb4-label { break-inside: avoid; break-after: avoid; } }