/* Позиции на фьючерсах: то, чего нет в общем наборе раздела. */
.oi-tabs { margin-top: var(--cf-space-24); overflow-x: auto; scrollbar-width: none; }
.oi-tabs .an-pro-badge { margin-left: var(--cf-space-6); font-size: 11px; padding: 3px 5px; }
.oi-side { display: grid; gap: var(--cf-space-16); align-content: start; }

/* Две полосы «лонг / шорт»: для позиций и для людей. Цвет - вид серии
   (лонг синий, шорт серый), а не оценка. */
.oi-split { display: grid; gap: var(--cf-space-18); }
.oi-split__grp b { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--cf-space-8); }
.oi-split__row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--cf-space-10); align-items: center; font-size: 13px; color: var(--cf-ink-3); }
.oi-split__row + .oi-split__row { margin-top: var(--cf-space-8); }
.oi-bar { position: relative; display: flex; height: 26px; border-radius: var(--cf-radius-sm); overflow: hidden; background: var(--cf-surface-2); }
.oi-bar span { display: flex; align-items: center; padding: 0 var(--cf-space-8); font-size: 12.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 0; }
.oi-bar .l { background: var(--cf-accent-soft); color: var(--cf-accent); box-shadow: inset 0 0 0 1px var(--cf-accent-ring, transparent); }
.oi-bar .s { background: var(--cf-surface-3); color: var(--cf-ink-2); justify-content: flex-end; flex: 1 1 auto; }


.oi-week { width: 100%; border-collapse: collapse; font-size: 14px; }
.oi-week th { text-align: left; font-weight: 500; color: var(--cf-ink-3); font-size: 13px; padding: 0 0 var(--cf-space-8); }
.oi-week td { padding: var(--cf-space-8) 0; border-top: 1px solid var(--cf-line); font-variant-numeric: tabular-nums; }
.oi-week td.num, .oi-week th.num { text-align: right; }

.oi-fresh { margin-top: var(--cf-space-14); }
.oi-fresh .cf-callout { align-items: center; flex-wrap: wrap; }
.oi-fresh .an-pro-badge { flex: none; }


/* Экран перекосов у подписчика. */
.sk-bar { display: flex; flex-wrap: wrap; gap: var(--cf-space-10); align-items: center; margin: var(--cf-space-20) 0 var(--cf-space-14); }
.sk-bar .cf-search { width: min(320px, 100%); }
.an-table th[aria-sort] button::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; vertical-align: 1px; }
.an-table th[aria-sort="descending"] button::after { border-top-color: currentColor; border-bottom: 0; }
.an-table th[aria-sort="ascending"] button::after { border-bottom-color: currentColor; border-top: 0; }
.an-table th[aria-sort] button { color: var(--cf-accent); }
.an-table tbody tr[data-href]:hover { background: var(--cf-surface-2); }
.an-table td .an-mono { width: 26px; height: 26px; font-size: 10.5px; margin-right: var(--cf-space-10); vertical-align: middle; }
.an-table td small { display: block; color: var(--cf-ink-3); font-size: 12.5px; }
.oi-asset { display: flex; align-items: center; }
@media (max-width: 767px) {
  .oi-split__row { grid-template-columns: 104px minmax(0, 1fr); }
  #oiChart { --an-h: 420px !important; }
}
.sk-all { display: inline-flex; align-items: center; gap: var(--cf-space-8); font-size: 13.5px; color: var(--cf-ink-2); cursor: pointer; }

.oi-split__hint { margin: 0; }

.oi-th-bar { min-width: 180px; }
#oiTop td .oi-bar { min-width: 160px; }

/* Экран перекосов: полосы лонг/шорт и шкала положения за год. */
.an-table th.sk-th-bar { text-align: left; }
#skewTable td .oi-bar { min-width: 150px; }
.sk-pos { display: inline-grid; grid-template-columns: 96px 2.2em; align-items: center; gap: var(--cf-space-10); }
.sk-pos__t { position: relative; height: 6px; border-radius: var(--cf-radius-bar); background: var(--cf-surface-3); }
.sk-pos__t::before, .sk-pos__t::after { content: ""; position: absolute; top: 0; bottom: 0; width: 5%; background: var(--cf-accent-soft); }
.sk-pos__t::before { left: 0; border-radius: var(--cf-radius-bar) 0 0 var(--cf-radius-bar); }
.sk-pos__t::after { right: 0; border-radius: 0 var(--cf-radius-bar) var(--cf-radius-bar) 0; }
.sk-pos__t i { z-index: 1; }
.sk-pos__t i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--cf-ink-3);
  box-shadow: 0 0 0 2px var(--cf-surface); }
.sk-pos.is-ext .sk-pos__t i { background: var(--cf-accent); }
.sk-pos b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.sk-pos.is-ext b { color: var(--cf-accent); }