/* Страница книги: плитки шапки, вкладки, карта долей.
 *
 * Углы прямые — как на всём сайте (правило владельца 25.08.2026). Акцент один,
 * терминальный зелёный; красный только там, где речь про убыль доли.
 */
.wl-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: rgb(138 148 140 / .18);
  border: 1px solid rgb(138 148 140 / .18);
  margin: 18px 0 20px;
}

.wl-tile { background: #0d110e; padding: 12px 14px; display: grid; gap: 6px; }

.wl-tile-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8a948c;
}

.wl-tile-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Вкладки — ссылки, и выглядят как ссылки: подчёркнутая активная, остальные
   приглушены. Кнопочный вид обещал бы состояние, которого у них нет. */
.wl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid rgb(138 148 140 / .18);
  margin-bottom: 18px;
}

.wl-tab {
  padding: 9px 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8a948c;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.wl-tab:hover { color: #f4f6f4; }
.wl-tab.is-on { color: #33ff66; border-bottom-color: #33ff66; }

.wl-h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8a948c;
  margin: 18px 0 8px;
}

/* Карта долей. Полотно тянется по ширине; клетка — доля, цвет — движение. */
.wl-map-wrap { border: 1px solid rgb(138 148 140 / .18); background: #0d110e; padding: 8px; }
.wl-map { display: block; width: 100%; height: auto; }

.wl-map-cell rect {
  stroke: #0a0c0a;
  stroke-width: .35;
  transition: opacity .15s ease;
}

.wl-map-cell text { fill: #06120a; font-weight: 700; pointer-events: none; }
.wl-map-cell text.wl-map-pct { font-weight: 500; opacity: .72; }
.wl-map-cell:hover rect { opacity: .82; }

.wl-map-add rect { fill: #33ff66; }
.wl-map-new rect { fill: #7dffab; }
.wl-map-hold rect { fill: #1f6b45; }
.wl-map-hold text { fill: #d8f5e2; }
.wl-map-trim rect { fill: #8a1f1f; }
.wl-map-trim text { fill: #ffd9d9; }
.wl-map-exit rect { fill: #d60000; }
.wl-map-exit text { fill: #fff; }

.wl-map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.wl-key { display: inline-block; width: 10px; height: 10px; }
.wl-map-legend .wl-map-add { background: #33ff66; }
.wl-map-legend .wl-map-new { background: #7dffab; }
.wl-map-legend .wl-map-trim { background: #8a1f1f; }
.wl-map-legend .wl-map-hold { background: #1f6b45; }

/* Профиль: подпись и значение парой, без таблицы — полей мало и они разной
   длины. */
/* Рамку несёт КАЖДАЯ клетка, а не общий короб.
   ⚠️ Замер 27.08.2026: заливка стояла на сетке, и хвост последнего ряда —
   место, где полей уже нет, — печатался большой серой плитой. Пустое место
   читалось как поле без значения. */
.wl-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
}

.wl-fact {
  background: #0d110e;
  box-shadow: 0 0 0 1px rgb(138 148 140 / .18);
  padding: 12px 14px;
  display: grid;
  gap: 4px;
}

.wl-fact dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8a948c;
}

.wl-fact dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.wl-fact dd a { color: inherit; border-bottom: 1px solid rgb(138 148 140 / .45); }
.wl-fact dd a:hover, .wl-fact dd a:focus-visible { color: #33ff66; }

/* Справка о портфеле: своя строка во всю ширину. Абзац в клетке сетки
   коротких значений переносился в колонку шириной с подпись «следят». */
.wl-about {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgb(138 148 140 / .18);
  background: #0d110e;
}

.wl-about-label {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8a948c;
}

.wl-about-text { margin: 0 0 8px; max-width: 76ch; font-size: 14px; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .wl-map-cell rect { transition: none; }
}

/* Секторы столбиками: доля — длина, число имён и деньги подписью. Круг здесь
   не годится — секторов бывает больше десятка, и дольки становятся нитками. */
.wl-bars { display: grid; gap: 12px; }
.wl-bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.wl-bar-pct { font-variant-numeric: tabular-nums; color: #8a948c; }
.wl-bar-track { height: 8px; background: rgb(138 148 140 / .16); margin: 5px 0 4px; }
.wl-bar-fill { height: 100%; background: #33ff66; }
.wl-bar-sub { font-size: 11px; color: #8a948c; margin: 0; }

/* Кривая капитала: две линии, без заливки и без сетки — вопрос вкладки «обошёл
   ли фонд индекс», и всё лишнее на этот вопрос не отвечает. */
.wl-curve-wrap { border: 1px solid rgb(138 148 140 / .18); background: #0d110e; padding: 10px; margin-top: 16px; }
/* Высота задана, а не выведена из пропорций: полотно 100×50 растянутое по
   ширине карточки даёт полметра пустоты, в которой линия теряется. */
.wl-curve { display: block; width: 100%; height: 220px; }
.wl-curve polyline { fill: none; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.wl-curve-mw { stroke: #33ff66; }
.wl-curve-bench { stroke: #8a948c; }
.wl-key-mw { background: #33ff66; }
.wl-key-bench { background: #8a948c; }

/* Знак книги стоит слева от имени и не толкает его: колонка фиксированной
   ширины, имя следующей. */
.wl-hero-book { display: flex; align-items: center; gap: 14px; }
.wl-hero-mark { flex: 0 0 auto; }


/* ── Резервы биржи ───────────────────────────────────────────────────────
   Плитки, таблица монет и полоска доли. Углы острые — как на всей витрине;
   тени не используются, разделение даёт граница в один пиксель. */

.wl-res-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--wl-line, #23282400);
  border: 1px solid var(--wl-line, #232824);
  margin-bottom: 1.25rem;
}

.wl-res-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  background: var(--wl-card, #121613);
  outline: 1px solid var(--wl-line, #232824);
}

.wl-res-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wl-muted, #8a948c);
}

.wl-res-value {
  font-size: 22px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.wl-res-value-sm { font-size: 15px; }

.wl-stale {
  align-self: flex-start;
  padding: 0 0.4rem;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0a0c0a;
  background: #ffce54;
}

.wl-res-note {
  margin: 0 0 0.9rem;
  max-width: 68ch;
  line-height: 1.6;
  color: var(--wl-muted, #8a948c);
}

.wl-chip-src {
  margin-right: 0.5rem;
  padding: 0.1rem 0.45rem;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wl-accent, #33ff66);
  border: 1px solid currentColor;
  white-space: nowrap;
}

/* Широкая таблица прокручивается ВНУТРИ своей коробки: горизонтальная
   прокрутка всей страницы на телефоне ломает чтение соседних вкладок. */
.wl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wl-res-caption {
  padding-bottom: 0.5rem;
  font-size: 12px;
  text-align: left;
  color: var(--wl-muted, #8a948c);
}

.wl-table-res td.num,
.wl-table-res th.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wl-res-share-col { width: 24%; }

.wl-res-share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wl-res-track {
  flex: 1 1 auto;
  min-width: 48px;
  height: 6px;
  background: var(--wl-line, #232824);
}

.wl-res-fill {
  display: block;
  height: 100%;
  background: var(--wl-accent, #33ff66);
}

.wl-res-pct {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--wl-muted, #8a948c);
  min-width: 3.2em;
  text-align: right;
}

@media (max-width: 900px) {
  .wl-res-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .wl-res-tiles { grid-template-columns: 1fr; }
  .wl-res-value { font-size: 19px; }
  .wl-res-share-col { width: auto; }
}

/* Полоска — украшение поверх числа: тем, кто просит меньше движения, она не
   мешает, но и анимации у неё нет — убирать нечего. Правило оставлено на
   случай, если появится переход. */
@media (prefers-reduced-motion: reduce) {
  .wl-res-fill { transition: none; }
}

/* ── Интерактивная кривая ────────────────────────────────────────────────
   Перекрестие и подсказка появляются по наведению и по стрелкам с
   клавиатуры: график, доступный только мышью, недоступен половине читателей. */

.wl-curve-wrap {
  position: relative;
}

.wl-curve-wrap[data-curve="on"] { cursor: crosshair; }

.wl-curve-wrap:focus-visible {
  outline: 1px solid var(--wl-accent, #33ff66);
  outline-offset: 2px;
}

.wl-curve-cursor {
  stroke: var(--wl-muted, #8a948c);
  stroke-width: 0.3;
  opacity: 0;
  vector-effect: non-scaling-stroke;
}

.wl-curve-cursor.is-on { opacity: 0.6; }

.wl-curve-dot {
  opacity: 0;
  vector-effect: non-scaling-stroke;
}

.wl-curve-dot.is-on { opacity: 1; }
.wl-curve-dot-mw { fill: var(--wl-accent, #33ff66); }
.wl-curve-dot-bench { fill: var(--wl-muted, #8a948c); }

/* Ряд, снятый кликом по легенде, исчезает целиком — приглушённая линия
   читается как «данные хуже», а не как «я его убрал». */
.wl-curve-mw.is-off,
.wl-curve-bench.is-off { display: none; }

.wl-curve-tip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: none;
  gap: 0.35rem;
  flex-direction: column;
  padding: 0.5rem 0.7rem;
  background: var(--wl-card, #121613);
  border: 1px solid var(--wl-line, #232824);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.wl-curve-tip.is-on { display: flex; }

.wl-curve-tip-date {
  color: var(--wl-muted, #8a948c);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

.wl-curve-tip-row b {
  margin-left: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.wl-legend-key {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.75rem;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.wl-legend-key.is-off { opacity: 0.45; }
.wl-legend-key:focus-visible { outline: 1px solid var(--wl-accent, #33ff66); outline-offset: 2px; }

/* Сетка кривой: три линии низкого контраста. Частая сетка спорит с самой
   кривой за внимание, а голая линия не отвечает на вопрос «сколько». */
.wl-curve-grid {
  stroke: var(--wl-line, #232824);
  stroke-width: 0.3;
  vector-effect: non-scaling-stroke;
}

.wl-curve-axis {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.4rem 0 0;
  color: var(--wl-muted, #8a948c);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.wl-curve-axis-mid { text-align: center; }

@media (max-width: 560px) {
  .wl-curve-axis { flex-wrap: wrap; }
}