/* Витрина /watchlist: три книги в одном окне.

   Кадры подкладываются тегом <img> внутри карточки, а не url() из этого
   файла: Propshaft отдаёт ассеты по цифровому ключу, и адрес, вписанный в
   CSS руками, разъезжается с ним на первой же пересборке.

   Скруглённые углы здесь — исключение из общего правила прямых, объявленное
   стандартом фронта деска. Свип радиусов обязан знать про .wl-book и .wl-pill,
   иначе следующий прогон молча вернёт квадраты. */

.wl-hero { position: relative; overflow: hidden; padding: 28px 0 8px; }

.wl-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wl-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .16;                       /* кадр — фон, а не картинка под текстом */
  transform: translate3d(0, var(--wl-parallax, 0px), 0);
  will-change: transform;
}
.wl-hero > *:not(.wl-art) { position: relative; z-index: 1; }

.wl-title { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.wl-subtitle { color: #8a948c; font-size: 14px; margin-top: 2px; }
.wl-note {
  color: #8a948c; font-size: 12px; line-height: 1.5; margin: 12px 0 16px;
  max-width: 62ch;
}

.wl-books {
  display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin: 18px 0;
}
@media (max-width: 720px) { .wl-books { grid-template-columns: 1fr; } }

.wl-book {
  position: relative; overflow: hidden; border-radius: 0; padding: 16px;
  border: 1px solid rgb(255 255 255 / .08); background: #121613; box-shadow: none;
  min-height: 132px;
}
.wl-book .wl-art img { opacity: .14; transition: transform .6s ease, opacity .6s ease; }
.wl-book:hover .wl-art img { transform: scale(1.03); opacity: .2; }
.wl-book > *:not(.wl-art) { position: relative; z-index: 1; }

/* Единственная бесконечная анимация экрана: кит «дышит». */
.wl-book-whale .wl-art img { animation: wl-breathe 6s ease-in-out infinite; }
@keyframes wl-breathe { 0%, 100% { opacity: .12; } 50% { opacity: .2; } }

.wl-book-kind {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a948c;
}
.wl-book-name { font-size: 18px; font-weight: 600; margin-top: 6px; }
.wl-book-name a { color: inherit; text-decoration: none; }
.wl-book-name a:hover { color: #33ff66; }
.wl-book-total {
  font-size: 20px; margin-top: 8px; font-variant-numeric: tabular-nums;
}
.wl-book-sub { color: #8a948c; font-size: 12px; margin-top: 4px; }

.wl-pill {
  border-radius: 0; padding: 2px 8px; font-size: 11px; white-space: nowrap;
}
.wl-pill-ok { color: #33ff66; border: 1px solid rgb(51 255 102 / .35); }
.wl-pill-warn { color: #ffce54; border: 1px solid rgb(255 206 84 / .35); }

/* table-layout: fixed отдаёт ширины колонкам из <colgroup>: без него браузер
   считает ширины по содержимому первой строки, и короткая «Доля» раздувается
   до половины экрана, а соседняя колонка остаётся сжатой в то, что осталось. */
.wl-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.wl-table th {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a948c;
  text-align: left; padding: 8px 10px; font-weight: 500;
}
.wl-table td { padding: 10px; font-size: 14px; overflow-wrap: break-word; }
/* Заголовок числовой колонки — той же специфичности, что и ячейка: без
   `.wl-table th.wl-num` побеждало общее правило `.wl-table th` (класс+тег
   у него выше, чем у голого `.wl-num`), и «Доля» висела заголовком слева
   над своими же числами у правого края. */
.wl-table th.wl-num, .wl-table td.wl-num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wl-col-ticker { width: 92px; }
.wl-col-tight { width: 88px; }   /* короткие значения: класс, доля */
.wl-col-mid { width: 150px; }    /* держат, Δ срез — не сжимать в остаток */
.wl-col-value { width: 120px; }  /* суммы и деньги */
.wl-row { border-bottom: 1px solid rgb(255 255 255 / .06); }
.wl-ticker { color: #33ff66; text-decoration: none; font-weight: 600; }
.wl-ticker:hover { text-decoration: underline; }
.wl-ticker-plain { opacity: .6; cursor: help; font-weight: 600; }
.wl-holders { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.wl-chip {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid rgb(255 255 255 / .14); border-radius: 0; padding: 1px 6px;
  color: #8a948c;
}
.wl-chip-whale { border-color: rgb(98 168 255 / .4); color: #62a8ff; }
.wl-chip-desk { border-color: rgb(51 255 102 / .4); color: #33ff66; }
.wl-chip-fund { border-color: rgb(255 206 84 / .4); color: #ffce54; }
.wl-up { color: #33ff66; }
.wl-down { color: #d60000; }

/* Вспышка строки, значение которой изменилось после обновления: без неё
   видно, что экран обновился, но не видно — что именно поменялось. */
.wl-changed { animation: wl-flash .8s ease-out; }
@keyframes wl-flash {
  from { background: rgb(51 255 102 / .18); }
  to { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-art img,
  .wl-book:hover .wl-art img { transform: none; transition: none; animation: none; }
  .wl-changed { animation: none; outline: 1px solid #33ff66; }
}

.wl-book-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.wl-book-list .wl-chip { text-decoration: none; }
.wl-book-list .wl-chip:hover { border-color: rgb(51 255 102 / .5); color: #33ff66; }
.wl-holders .wl-chip { text-decoration: none; }
.wl-chip-more { color: #8a948c; }
.wl-cell-name { color: #8a948c; }
.wl-chip { white-space: nowrap; }
.wl-book { min-height: 200px; }

.wl-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px;
}
.wl-search {
  flex: 1 1 260px; min-width: 200px; padding: 8px 12px; border-radius: 0;
  border: 1px solid rgb(255 255 255 / .12); background: #0a0c0a; color: inherit;
  font: inherit; font-size: 13px;
}
.wl-search:focus { outline: none; border-color: rgb(51 255 102 / .5); }
.wl-filters { display: flex; gap: 6px; }
.wl-filter { cursor: pointer; background: none; opacity: .45; }
.wl-filter.is-on { opacity: 1; }
.wl-sort {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.wl-sort:hover { color: #33ff66; }
th[aria-sort="descending"] .wl-sort::after { content: " ↓"; }
th[aria-sort="ascending"] .wl-sort::after { content: " ↑"; }

/* Раскрывающийся список книг: крупные стоят сразу, остальные прячутся, но не
   пропадают. Треугольник браузера убран — у деска свой знак. */
.wl-more {
  margin-top: 0.5rem;
}

.wl-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0;
  color: var(--wl-muted, #8a948c);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
}

.wl-more > summary::-webkit-details-marker { display: none; }
.wl-more > summary::before { content: "+"; color: var(--wl-accent, #33ff66); }
.wl-more[open] > summary::before { content: "−"; }
.wl-more > summary:focus-visible { outline: 1px solid var(--wl-accent, #33ff66); outline-offset: 2px; }

/* Своя книга на полке: она первая и её видно. Цвет, а не размер — размер
   сдвинул бы соседей и сломал ряд. */
.wl-chip.is-featured {
  color: var(--wl-accent, #33ff66);
  border-color: currentColor;
  font-weight: 600;
}