/* ─────────────────────────────────────────────────────────────────────────
   preview.css — the two layout candidates and the token page.

   Loaded on top of app.css, which supplies the palette, the header and the
   chart styling. Only what the two shapes need differently lives here, so
   picking one later means deleting a file rather than untangling a stylesheet.
   ───────────────────────────────────────────────────────────────────────── */

.pv-bar {
  padding: 8px 22px; font-size: 12px; color: var(--muted);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.app.wide { max-width: 1180px; }

/* ─── A · cards ─────────────────────────────────────────────────────────── */

.pv-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px; margin-top: 10px;
}
.pv-card {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); padding: 20px;
  display: flex; flex-direction: column;
}
.pv-card .tk { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.pv-card .sub { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.pv-card .cap { font-size: 12px; color: var(--muted); margin-top: 4px; }

.pv-mini { margin: 16px 0 14px; min-height: 96px; }
.pv-mini svg { display: block; width: 100%; height: auto; }
.pv-mini .wait {
  font-size: 11.5px; color: var(--muted); line-height: 1.5;
  border: 1px dashed var(--border); border-radius: 10px; padding: 12px;
}

.pv-hz { display: flex; gap: 26px; }
.pv-hz .k {
  display: block; font-size: 9px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 3px;
}
.pv-hz .v { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }

.pv-status {
  margin-top: 14px; font-size: 12.5px; display: flex; align-items: center; gap: 7px;
}
.pv-status .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  flex: 0 0 auto;
}
.pv-track { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.pv-card .btn { margin-top: 16px; align-self: flex-start; }

.pv-actions { display: flex; gap: 10px; margin: 22px 0 8px; flex-wrap: wrap; }

/* ─── B · list and detail ───────────────────────────────────────────────── */

/* Три колонки: сигналы, карточка, закрытые позиции.
 *
 * Ширины крайних лежат в переменных и меняются перетяжкой; середина забирает
 * остаток. Проценты по умолчанию — 25 / 50 / 25.
 *
 * Каждая колонка прокручивается сама, а не тянет за собой страницу. До этого
 * левая колонка росла списком из семнадцати сигналов и пятидесяти четырёх
 * исходов, страница уходила на пять тысяч пикселей, и справа под карточкой
 * стояло пустое поле в половину экрана. */
.pv-split {
  --col-left: 25%;
  --col-right: 25%;
  display: grid;
  grid-template-columns: var(--col-left) 6px 1fr 6px var(--col-right);
  height: calc(100vh - 140px);
}
.pv-side, .pv-stats {
  padding: 22px 18px;
  background: var(--surface);
  overflow-y: auto;
  min-width: 0;
}
.pv-side { border-right: 1px solid var(--border); }
.pv-stats { border-left: 1px solid var(--border); }

/* Рукоятка. Шесть пикселей вместо одного: границу в пиксель мышью не поймать.
 * Видна только под курсором — постоянная полоса делила бы экран сильнее, чем
 * сами колонки. */
.pv-grip {
  cursor: col-resize;
  background: transparent;
  transition: background .12s;
}
.pv-grip:hover, .pv-grip:focus-visible, .pv-grip.dragging {
  background: var(--accent);
  outline: none;
}
/* Пока тянут, выделение текста по всей странице мешает: курсор уходит за
 * рукоятку и подсвечивает всё, через что прошёл. */
body.resizing { user-select: none; cursor: col-resize; }
.pv-side-h { font-size: 14px; font-weight: 650; margin: 0 0 16px; }
.pv-side-sec {
  font-size: 10px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--muted); margin: 26px 0 10px;
  padding-top: 18px; border-top: 1px solid var(--border);
}

.pv-list { display: flex; flex-direction: column; gap: 2px; }
.pv-item {
  text-align: left; background: transparent; border: 0; cursor: pointer;
  padding: 11px 12px; border-radius: 9px; color: inherit; font: inherit;
  border-left: 2px solid transparent;
}
.pv-item:hover { background: var(--hover); }
.pv-item[aria-current="true"] {
  background: var(--accent-soft); border-left-color: var(--accent);
}
.pv-item .t { font-size: 14.5px; font-weight: 650; letter-spacing: -.02em; }
.pv-item .m { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pv-item .w { font-size: 12.5px; font-weight: 600; margin-top: 3px; }

.pv-themes { display: flex; flex-direction: column; }
.pv-themes .row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; font-size: 12.5px; border-bottom: 1px solid var(--border);
}
.pv-themes .row span:last-child { color: var(--muted); font-size: 11px; }

/* Середина больше не ограничена девятьюстами пикселями: её ширину задаёт
   пользователь перетяжкой, и упор в max-width оставлял бы справа пустоту при
   любой раздвижке. */
.pv-detail { padding: 26px 30px 60px; overflow-y: auto; min-width: 0; }

/* ─── Token page ────────────────────────────────────────────────────────── */

.pv-back { font-size: 12.5px; margin: 0 0 20px; }
.pv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.pv-head .tk { font-size: 34px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
/* Контракт под именем: мельче имени, но читаемо — по нему сверяют монету. */
.pv-head .sub.contract { font-size: 11.5px; margin-top: 3px; opacity: .75; }
.pv-head .sub { font-size: 13px; color: var(--muted); margin-top: 6px; }

.pv-panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px;
}
.pv-panel {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; background: var(--surface);
}
.pv-panel h3 {
  font-size: 10px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--muted); margin: 0 0 12px; font-weight: 500;
}
.pv-panel .line { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 13px; }
.pv-panel .line span:last-child { color: var(--muted); text-align: right; }
.pv-panel .big { font-size: 15px; font-weight: 650; line-height: 1.4; }

.pv-related { margin-top: 26px; }
.pv-related .row {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.pv-related .row .t { font-weight: 650; min-width: 84px; }
.pv-related .row .n { color: var(--muted); flex: 1; }

.pv-none { font-size: 12.5px; color: var(--muted); font-style: normal; }

/* На узком экране колонки становятся друг под другом, и тянуть нечего:
   рукоятки убираются, высота отпускается. */
@media (max-width: 900px) {
  .pv-split { grid-template-columns: 1fr; height: auto; }
  .pv-side, .pv-stats, .pv-detail { overflow-y: visible; }
  .pv-side { border-right: 0; border-bottom: 1px solid var(--border); }
  .pv-stats { border-left: 0; border-top: 1px solid var(--border); }
  .pv-grip { display: none; }
  .pv-panels { grid-template-columns: 1fr; }
}

/* ─── Taxonomy links ────────────────────────────────────────────────────── */
/*
 * Coloured, not underlined. These names appear several times on one screen and
 * underlining every one turns the page into a wall of links; the colour is
 * enough to say "this word is explained elsewhere".
 */
.tax-link {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.tax-link:hover { text-decoration: none; border-bottom-color: var(--accent); }
.tax-path { color: var(--muted); }

.as-link {
  background: none; border: 0; padding: 0; color: inherit; font: inherit;
  cursor: pointer; text-align: left;
}
.as-link:hover { color: var(--accent); }

/* ─── Pro block in the sidebar ──────────────────────────────────────────── */

.pv-locked {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; text-align: center; margin-top: 4px;
}
.pv-locked-n { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.pv-locked-t { font-size: 12px; color: var(--muted); margin: 8px 0 12px; }

/* ─── Token reference ───────────────────────────────────────────────────── */

.modal {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: color-mix(in srgb, #000 62%, transparent);
}
.modal[hidden] { display: none; }
.modal-card {
  position: relative; width: 100%; max-width: 520px;
  max-height: 86vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px 26px 22px;
}
.modal-close {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 0; color: var(--muted);
  font-size: 15px; cursor: pointer; padding: 6px 9px; border-radius: 7px;
}
.modal-close:hover { background: var(--hover); color: var(--text); }
.modal-card h2 { font-size: 24px; letter-spacing: -.03em; margin: 0 0 4px; }
.modal-name { font-size: 14px; font-weight: 400; color: var(--muted); }
.modal-path { font-size: 12.5px; margin: 0 0 18px; }

.modal-kv {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 18px;
  font-size: 13.5px; padding-top: 14px; border-top: 1px solid var(--border);
}
.modal-kv .k { color: var(--muted); }
.modal-kv .v { text-align: right; font-weight: 600; }

.modal-slot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted); line-height: 1.55;
}
.modal-slot .lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .11em;
  margin-bottom: 6px;
}

/* ─── Token reference · content ─────────────────────────────────────────── */

.modal-rank { font-size: 15px; font-weight: 650; color: var(--muted); }
.modal-meta { font-size: 12.5px; color: var(--muted); margin: 6px 0 2px; }

.modal-blurb {
  font-size: 13.5px; line-height: 1.6;
  border-left: 2px solid var(--accent); padding: 2px 0 2px 14px;
  margin: 16px 0 4px;
}
.modal-src { color: var(--muted); font-size: 12px; }

.modal-box {
  margin-top: 16px; padding: 14px 16px;
  background: var(--surface-2); border-radius: 11px;
}
.modal-box .lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--muted); margin-bottom: 10px;
}
.modal-box .modal-kv { border-top: 0; padding-top: 0; }
.modal-kv .v { word-break: break-all; }
.modal-links { margin: 0; font-size: 13.5px; }
.modal-note {
  font-size: 12px; color: var(--muted); line-height: 1.55; margin: 8px 0 0;
}

.modal-chain {
  display: flex; gap: 12px; align-items: baseline;
  padding: 6px 0; font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.modal-chain:last-child { border-bottom: 0; }
.modal-chain .chain { color: var(--muted); min-width: 92px; text-transform: capitalize; }
.modal-chain .addr {
  font: 500 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all; text-align: left;
}
.modal-chain .addr.none { color: var(--muted); font-family: inherit; font-size: 12.5px; }

.pv-item .v {
  font-size: 11px; color: var(--muted); margin-top: 3px;
  text-transform: lowercase;
}

/* ─── Where the charts are ──────────────────────────────────────────────── */
/*
 * Shown under the "not enough days yet" panel. A reader who lands on a token
 * that is still filling its window sees the same blank space as a broken
 * feature; naming the tokens that do have a line makes it a route instead.
 */
.chart-elsewhere {
  margin-top: 12px; font-size: 12.5px; color: var(--muted);
}
.chart-elsewhere .as-link { font-weight: 600; color: var(--accent); }

/* ─── Attention and price, each under its own name ───────────────────────────
 *
 * The card opened with three bare percentages that were price changes on a page
 * about attention, and nothing said so. Two labelled blocks now: attention
 * first because it is what put the token on the screen, price second because it
 * is what has not happened yet.
 */
.pv-block { margin-top: 20px; }
.block-k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin-bottom: 8px;
}
.pv-hz .v.att { color: var(--attention); }
.pv-hz .h { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }

/* The sign on attention. Green when the hour is about something good for the
   token, red when it is about something bad, and the ordinary attention colour
   when the posts carry no direction — most hours, and the absence of colour is
   the correct reading for them. */
.pv-hz .v.att.up { color: var(--success); }
.pv-hz .v.att.down { color: var(--danger); }

/* The key phrase of the hour in the sidebar, coloured by its sign. */
.pv-item .v.up { color: var(--success); }
.pv-item .v.down { color: var(--danger); }

/* What the hour was about, in the model's own words. Sized as a statement
   rather than a caption: on a card selected for attention, this is the line a
   reader takes away. */
.att-say {
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  margin: 12px 0 0;
}
.att-say.up { color: var(--success); }
.att-say.down { color: var(--danger); }
.att-say.flat { color: var(--text); }
.att-say.muted { color: var(--muted); font-weight: 400; font-size: 13px; }