/* folio: the few things the shared sheet does not cover. */
.skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--text-strong); color: var(--bg); padding: 8px 14px; border-radius: var(--pill); }
.skip:focus { left: 12px; }
.ui-brand { font-weight: 600; letter-spacing: -.02em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.up { color: var(--ok); }
td.down { color: var(--bad); }
table.ranking td, table.ranking th { vertical-align: middle; }
.bar-cell { width: 34%; min-width: 120px; }
.bar { display: block; position: relative; height: 10px; background: linear-gradient(var(--line-2), var(--line-2)) 50% 0 / 1px 100% no-repeat; }
.bar::after { content: ""; position: absolute; top: 1px; bottom: 1px; left: 50%; width: calc(var(--w) / 2); border-radius: 2px; background: currentColor; }
.bar.down::after { left: auto; right: 50%; }
.bar.up { color: var(--ok); }
.bar.down { color: var(--bad); }
.ui-figure svg { width: 100%; height: auto; display: block; overflow: visible; }
.ui-figure .axis { stroke: var(--line-2); stroke-width: 1; }
.ui-figure .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ui-figure .line.model { stroke: var(--accent); }
.ui-figure .line.momentum { stroke: var(--faint); stroke-dasharray: 4 4; }
.ui-figure .tick { fill: var(--faint); font-size: 12px; }
.ui-figure .label { font-size: 12.5px; font-weight: 600; }
.ui-figure .label.model { fill: var(--accent); }
.ui-figure .label.momentum { fill: var(--faint); }
.ui-foot p { max-width: 60em; }
.foot-legal { padding-top: 16px; border-top: 1px solid var(--line); }
td code { white-space: nowrap; }
td.nowrap { white-space: nowrap; }
td.group { text-transform: capitalize; font-weight: 600; color: var(--text-strong); }
@media (max-width: 640px) {
  .bar-cell, th.bar-head, table.ranking .fund { display: none; }
  table.ranking th.num { white-space: normal; }
  table.ranking th, table.ranking td { padding-inline: 8px; }
}