/* PocketLot v3 — дизайн-система.
   Собрана из двух референсов:
   · лендинг  — Vivid+Co: обсидиановый холст, масштаб вместо жирности,
                единственный хроматический объект, ноль теней;
   · кабинет  — Dovetail: ступени яркости вместо теней, чертёжная сетка,
                один акцент, плотная типографика.
   Общее у обоих: почти чёрный холст, отсутствие box-shadow, отрицательный
   трекинг на крупном кегле, один цвет действия. Поэтому это одна система,
   а не две склеенные.

   Правило радиуса (по прямой просьбе): шкала 4 / 8 / 12 и ничего между.
   Окружность — только у объектов, которые являются кругом: орб ассистента,
   аватар, точка статуса. Рядом с прямым углом круглого угла не появляется.  */

/* ─────────────────────────────────────────── токены ─────────────────────── */
:root{
  /* поверхности: ступень яркости = ступень высоты, теней нет */
  --void:#000000;
  --canvas:#0a0a0a;
  --surface:#141414;
  --raised:#1e1e1e;
  --hair:#313131;
  --edge:#454545;

  /* текст */
  --mist:#7c7c7c;   /* выключено */
  --ash:#a7a7a7;    /* второстепенное */
  --bone:#fffdf9;   /* основное, тёплая кость */

  /* единственный акцент действия */
  --spark:#6798ff;
  --spark-soft:rgba(103,152,255,.12);
  --spark-line:rgba(103,152,255,.32);

  /* семантика данных — это не бренд, а значение числа */
  --up:#5fe3a1;
  --warn:#ffb020;
  --down:#ff6b5f;

  /* призма — только артефакт героя, в интерфейс не попадает */
  --pr-r:#ff2a2a; --pr-c:#2a7fff; --pr-l:#2aff2a;

  --r-xs:4px; --r:8px; --r-lg:12px;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:64px; --s7:96px; --s8:120px;

  --shell:1200px;
  --ease:cubic-bezier(.52,.01,0,1);
  --dur:.5s;
}

*,*::before,*::after{box-sizing:border-box}
/* display у компонентов перебивает атрибут hidden, и «скрытые» кнопки
   продолжали занимать место в шапке */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--bone);
  font:400 16px/1.5 'Inter',system-ui,sans-serif;
  font-feature-settings:'cv05' 1,'ss01' 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--spark);color:var(--void)}

:focus-visible{outline:2px solid var(--spark);outline-offset:2px;border-radius:var(--r-xs)}

/* чертёжная сетка Dovetail: 1px линии шагом 48px, ~5% — фон, не рисунок */
.grid-bg{position:relative}
.grid-bg::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--raised) 1px,transparent 1px),
    linear-gradient(90deg,var(--raised) 1px,transparent 1px);
  background-size:48px 48px; opacity:.05;
}
.grid-bg > *{position:relative;z-index:1}

/* ─────────────────────────────────────── типографика ────────────────────── */
.display{font-size:clamp(56px,10.5vw,136px);font-weight:500;line-height:.98;letter-spacing:-.035em;margin:0}
.h1{font-size:clamp(40px,5.4vw,64px);font-weight:500;line-height:1.06;letter-spacing:-.03em;margin:0}
.h2{font-size:clamp(30px,3.4vw,40px);font-weight:500;line-height:1.15;letter-spacing:-.022em;margin:0}
.h3{font-size:24px;font-weight:500;line-height:1.3;letter-spacing:-.014em;margin:0}
.h4{font-size:20px;font-weight:500;line-height:1.35;letter-spacing:-.01em;margin:0}
/* крупный кегль рвётся по смыслу, а не по остатку строки */
.h1,.h2,.h3,.h4{text-wrap:balance}
.lead{font-size:20px;line-height:1.5;color:var(--ash);letter-spacing:-.005em;margin:0;max-width:52ch}
.body{font-size:16px;line-height:1.6;margin:0}
.small{font-size:14px;line-height:1.5;color:var(--ash);margin:0}
.tiny{font-size:12px;line-height:1.45;color:var(--mist);margin:0}

.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-ligatures:none}
.eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;font-weight:400;line-height:1;letter-spacing:.085em;
  text-transform:uppercase;color:var(--ash);margin:0;
}
.eyebrow.dim{color:var(--mist)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.up{color:var(--up)} .warn{color:var(--warn)} .down{color:var(--down)}
.spark-t{color:var(--spark)}
.ash{color:var(--ash)} .mist{color:var(--mist)}

/* ────────────────────────────────────────── каркас ──────────────────────── */
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--s3)}
@media(max-width:640px){.shell{padding:0 var(--s2)}}
.band{padding:var(--s8) 0}
.band.tight{padding:var(--s7) 0}
.rule{height:1px;background:var(--hair);border:0;margin:0}
/* фиксированная шапка не должна съедать начало секции при переходе по якорю */
section[id],[id]{scroll-margin-top:96px}

.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
/* без этого абзац внутри флекс-ряда схлопывается до ширины самого
   длинного слова и рассыпается в столбик */
.row > *{min-width:0}
.gap1{gap:var(--s1)} .gap2{gap:var(--s2)} .gap3{gap:var(--s3)} .gap4{gap:var(--s4)}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1 1 auto;min-width:0}
/* на узком экране горизонтальные группы переносятся: иначе ряд кнопок
   распирает страницу и появляется боковая прокрутка всего документа */
@media(max-width:760px){
  .row{flex-wrap:wrap}
  .top-1,.top-2{flex-wrap:nowrap}
}

/* ─────────────────────────────────────── управление ─────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:var(--s1);
  height:40px;padding:0 var(--s2);
  border:1px solid transparent;border-radius:var(--r);
  background:var(--bone);color:var(--void);
  font-size:14px;font-weight:500;letter-spacing:-.006em;
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform .2s var(--ease);
}
.btn:hover{background:#e6e2db}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--edge)}
.btn.ghost:hover{border-color:var(--bone);background:rgba(255,253,249,.04)}
.btn.quiet{background:transparent;color:var(--ash);border-color:transparent;padding:0 var(--s1)}
.btn.quiet:hover{color:var(--bone);background:var(--raised)}
.btn.sm{height:32px;padding:0 12px;font-size:13px}
.btn.lg{height:48px;padding:0 var(--s3);font-size:15px}
.btn[disabled]{opacity:.4;pointer-events:none}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  height:22px;padding:0 8px;border-radius:var(--r-xs);
  background:var(--raised);color:var(--ash);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.tag.up{background:rgba(95,227,161,.1);color:var(--up)}
.tag.warn{background:rgba(255,176,32,.1);color:var(--warn)}
.tag.down{background:rgba(255,107,95,.1);color:var(--down)}
.tag.spark{background:var(--spark-soft);color:var(--spark)}

.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

.field{
  height:40px;width:100%;padding:0 12px;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  color:var(--bone);font-size:14px;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.field::placeholder{color:var(--mist)}
.field:focus{outline:0;border-color:var(--spark);background:var(--raised)}
textarea.field{height:auto;padding:10px 12px;resize:vertical;line-height:1.5}

/* собственный список вместо системного — системный выпадающий список
   выглядит чужеродно и выдаёт платформу */
.sel{position:relative}
.sel-btn{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s1);
  height:40px;width:100%;padding:0 12px;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  font-size:14px;cursor:pointer;text-align:left;
  transition:border-color var(--dur) var(--ease);
}
.sel-btn:hover{border-color:var(--edge)}
.sel[data-open="1"] .sel-btn{border-color:var(--spark);background:var(--raised)}
.sel[data-open="1"] .sel-caret{transform:rotate(180deg)}
.sel-caret{transition:transform var(--dur) var(--ease);color:var(--mist);flex:none}
.sel-list{
  position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:100%;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  padding:4px;max-height:288px;overflow:auto;
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.sel[data-open="1"] .sel-list{opacity:1;transform:none;pointer-events:auto}
.sel-opt{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:8px 10px;border-radius:var(--r-xs);font-size:14px;cursor:pointer;
  color:var(--ash);white-space:nowrap;
}
.sel-opt:hover{background:var(--raised);color:var(--bone)}
.sel-opt[aria-selected="true"]{color:var(--bone)}
.sel-opt[aria-selected="true"] .sel-mark{opacity:1}
.sel-mark{opacity:0;color:var(--spark)}

/* ─────────────────────────────────────── поверхности ────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  padding:var(--s3);
}
.card.flat{background:transparent}
.card.tall{padding:var(--s4)}
.panel{background:var(--raised);border:1px solid var(--hair);border-radius:var(--r);padding:var(--s2)}

.grid{display:grid;gap:var(--s2)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

/* метрика: значение крупно, дельта строкой под ним */
.metric .m-l{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.metric .m-v{
  font-size:40px;font-weight:500;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.metric .m-v small{font-size:20px;font-weight:400;color:var(--ash);letter-spacing:-.01em}
.metric .m-d{margin-top:10px;font-size:13px;color:var(--ash);display:flex;align-items:center;gap:6px}

/* таблица: почти без разделителей, читается столбцами, а не сеткой */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;font-weight:400;letter-spacing:.075em;text-transform:uppercase;
  color:var(--mist);text-align:left;padding:0 var(--s2) 12px 0;white-space:nowrap;
  border-bottom:1px solid var(--hair);
}
.tbl td{
  padding:14px var(--s2) 14px 0;border-bottom:1px solid rgba(49,49,49,.5);
  vertical-align:middle;
}
.tbl tbody tr{transition:background .2s var(--ease)}
.tbl tbody tr:hover{background:rgba(255,253,249,.022)}
.tbl .r{text-align:right;padding-right:0}
.tbl th.r{padding-right:0}
.tbl .n{font-variant-numeric:tabular-nums;white-space:nowrap}
/* на узком экране таблица уезжает вбок целиком, а не ломает ячейки
   в столбик — цифры сравнивают глазами по строке */
.tbl-wrap{overflow-x:auto;margin:0 calc(var(--s3) * -1);padding:0 var(--s3)}
@media(max-width:820px){.tbl{min-width:760px}}

/* ─────────────────────────────────────── подсказка ──────────────────────── */
/* На <details>: открывается с клавиатуры, закрывается Esc. Тело поповера
   позиционируется как fixed и координаты ему считает JS — внутри таблицы
   с горизонтальной прокруткой абсолютный поповер обрезался контейнером
   и подсказка просто не появлялась. */
.hint{display:inline-flex;align-items:center;vertical-align:middle}
.hint > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;width:16px;height:16px;border-radius:50%;flex:none;
  border:1px solid var(--edge);color:var(--mist);
  font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.hint > summary::-webkit-details-marker{display:none}
.hint > summary:hover,.hint[open] > summary{color:var(--bone);border-color:var(--bone)}
.hint-body{
  position:fixed;z-index:200;left:-9999px;top:0;
  width:320px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  padding:var(--s2);text-align:left;
  font-size:13px;line-height:1.55;color:var(--ash);font-weight:400;
  letter-spacing:0;text-transform:none;
  /* заголовок таблицы задаёт nowrap, и текст подсказки наследовал его,
     вылезая одной строкой за экран */
  white-space:normal;
}
/* ярлык и кружок подсказки — одна строка с общей серединой, иначе кружок
   уезжает под базовую линию мелкого надзаголовка */
.lbl-i{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
/* оптическая поправка: кружок 16 px рядом с прописным надзаголовком 12 px
   геометрически центрирован, но глазом сидит низко — поднимаем на пиксель */
.lbl-i .hint,.metric .m-l .hint{margin-top:-1px}
.hint-body b{color:var(--bone);font-weight:500}
.hint-body .hint-fig{
  margin:0 0 12px;border-radius:var(--r-xs);overflow:hidden;
  background:var(--void);border:1px solid var(--hair);
}
.hint-body .hint-src{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--hair);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mist);
}

/* ──────────────────────────────────────── тумблер ───────────────────────── */
/* Режим виден без наведения: дорожка меняет цвет, ползунок едет, подпись
   называет текущее состояние. Радиусы 8/4 — как у всего остального,
   капсулы в системе нет. */
.tgl{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.tgl input{position:absolute;opacity:0;width:0;height:0}
.tgl .track{
  position:relative;width:40px;height:22px;flex:none;
  background:var(--raised);border:1px solid var(--hair);border-radius:var(--r);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
/* смещения считаются от внутреннего края дорожки, а рамка 1 px в него
   не входит: при box-sizing 40×22 внутри остаётся 38×20, поэтому
   поле вокруг ползунка 14 px — ровно 3 px, а ход — 18 px */
.tgl .track::after{
  content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;
  background:var(--mist);border-radius:var(--r-xs);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.tgl input:checked + .track{background:var(--spark-soft);border-color:var(--spark)}
.tgl input:checked + .track::after{transform:translateX(18px);background:var(--spark)}
.tgl input:focus-visible + .track{outline:2px solid var(--spark);outline-offset:2px}
.tgl .lbl{font-size:13px;color:var(--ash);white-space:nowrap;transition:color .3s var(--ease)}
.tgl input:checked ~ .lbl{color:var(--bone)}

/* суммы, скрытые приватным режимом */
.hushed{filter:blur(9px);opacity:.5;user-select:none;pointer-events:none;
  transition:filter var(--dur) var(--ease),opacity var(--dur) var(--ease)}

/* ─────────────────────────────── переключатель вида ────────────────────── */
/* вложенные радиусы 8 и 4: внутренний равен внешнему минус отступ,
   поэтому углы кнопок повторяют угол обоймы, а не спорят с ним */
.segm{display:inline-flex;gap:2px;padding:2px;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--r)}
.segm button{
  display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;
  border:0;border-radius:var(--r-xs);background:transparent;color:var(--mist);
  font-size:13px;cursor:pointer;white-space:nowrap;
  transition:background .28s var(--ease),color .28s var(--ease);
}
.segm button:hover{color:var(--ash)}
.segm button[aria-pressed="true"]{background:var(--raised);color:var(--bone)}

/* ──────────────────────────────────── плитки объектов ───────────────────── */
/* Один и тот же разметочный блок в двух видах. Переключение — классом на
   обёртке, а не перерисовкой: список подменяется htmx, и при перерисовке
   выбранный вид сбрасывался бы на каждый фильтр. */
.list{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.tile-head{min-width:0}
.tile-price{order:1}
.tile-meta{order:2}

.list-wrap.rows .list{grid-template-columns:1fr;gap:0}
.list-wrap.rows .tile{flex-direction:row;align-items:center;gap:16px;padding:12px 0;
  background:transparent;border:0;border-bottom:1px solid rgba(49,49,49,.6);border-radius:0}
.list-wrap.rows .tile:hover{transform:none;background:rgba(255,253,249,.03)}
.list-wrap.rows .tile-shot{width:96px;height:64px;flex:none;aspect-ratio:auto;
  border:1px solid var(--hair);border-radius:var(--r-xs);overflow:hidden}
.list-wrap.rows .tile-shot .attr{display:none}
.list-wrap.rows .tile-body{flex-direction:row;align-items:center;gap:var(--s3);padding:0}
.list-wrap.rows .tile-head{flex:1 1 auto}
.list-wrap.rows .tile-meta{order:1;flex:0 1 auto;justify-content:flex-end;gap:4px 14px}
.list-wrap.rows .tile-price{order:2;flex:none;margin:0;padding:0;border:0;
  flex-direction:column;align-items:flex-end;gap:6px;min-width:150px}
@media(max-width:820px){
  .list-wrap.rows .tile-body{flex-wrap:wrap}
  .list-wrap.rows .tile-meta{flex-basis:100%;justify-content:flex-start;order:3}
}

.tiles{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.tile{
  display:flex;flex-direction:column;overflow:hidden;cursor:pointer;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.tile:hover{border-color:var(--edge);transform:translateY(-2px)}
.tile-shot{position:relative;aspect-ratio:16/10;background:var(--void);
  border-bottom:1px solid var(--hair)}
.tile-shot canvas{width:100%;height:100%}
/* атрибуция уходит в небо: снизу она ложится прямо на витрину, по которой
   объект и узнают */
.tile-shot .attr{position:absolute;left:8px;top:8px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ash);background:rgba(10,10,10,.72);
  padding:3px 6px;border-radius:var(--r-xs)}
.tile-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.tile-addr{font-size:15px;font-weight:500;letter-spacing:-.008em;line-height:1.3}
.tile-price{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-top:12px;border-top:1px solid rgba(49,49,49,.6);margin-top:auto}
.tile-price b{font-size:20px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--mist);
  font-variant-numeric:tabular-nums}
.tile-meta span{white-space:nowrap}

/* ─────────────────────────── строка «показатель — значение» ────────────── */
/* Общий компонент: живёт и в карточке объекта, и в результатах расчётов.
   Пока он был объявлен только в карточке, те же строки на экранах расчёта
   слипались в одну — ярлык и число без разделения. */
.fact{display:flex;justify-content:space-between;gap:var(--s2);padding:9px 0;
  border-bottom:1px solid rgba(49,49,49,.5);font-size:14px}
.fact:last-child{border-bottom:0}
.fact .k{color:var(--ash);flex:none}
.fact .v{text-align:right;font-weight:500;font-variant-numeric:tabular-nums;min-width:0}

/* ─────────────────────────────── экран расчёта ─────────────────────────── */
/* Слева ползунки, справа результат. Ползунки липкие: при длинном результате
   иначе приходится скроллить вверх, чтобы поменять одно значение. */
.calc{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:var(--s3);align-items:start}
.calc-side{position:sticky;top:124px}
@media(max-width:900px){.calc{grid-template-columns:1fr}.calc-side{position:static}}

.ctl{display:flex;flex-direction:column;gap:6px;padding:13px 0;
  border-bottom:1px solid rgba(49,49,49,.6)}
.ctl:last-child{border-bottom:0}
.ctl .ct{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);font-size:14px}
.ctl .cv{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.ctl .note{font-size:11px;color:var(--mist);line-height:1.45}

/* системный ползунок выдаёт платформу — рисуем свой */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;
  background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--edge);border-radius:2px}
input[type=range]::-moz-range-track{height:2px;background:var(--edge);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
  margin-top:-6px;border-radius:50%;background:var(--bone);border:0;
  transition:box-shadow .3s var(--ease)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--bone);border:0}
input[type=range]:hover::-webkit-slider-thumb,
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--spark-soft)}

/* Выбор схемы: карточка-переключатель. Системный radio мелкий и выдаёт
   платформу, а выбор схемы сделки — не мелкое решение. */
.opt{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;
  border:1px solid var(--hair);border-radius:var(--r);font-size:14px;color:var(--ash);
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.opt:hover{border-color:var(--edge);color:var(--bone)}
.opt input{accent-color:var(--spark);flex:none}
.opt:has(input:checked){border-color:var(--spark);background:var(--spark-soft);color:var(--bone)}
.opts{display:flex;flex-direction:column;gap:6px}

/* пока идёт пересчёт, блок притухает — иначе кажется, что интерфейс завис */
.htmx-request.calc-out,.calc-out.htmx-request{opacity:.45}
.calc-out{transition:opacity .12s ease}

/* ───────────────────────────────── инструмент расчёта ──────────────────── */
/* Сеткой, а не столбцом кнопок: так видно, что платформа умеет посчитать
   по этому объекту, и выбор идёт глазами, а не чтением списка. */
.tool{
  display:flex;flex-direction:column;gap:6px;padding:14px;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  cursor:pointer;text-align:left;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.tool:hover{border-color:var(--spark);background:var(--raised)}
.tool .tn{font-size:14px;font-weight:500;color:var(--bone)}
.tool .td{font-size:12px;color:var(--mist);line-height:1.4}
.tool svg{color:var(--ash)}

/* ─────────────────────────────────────── шкала ──────────────────────────── */
.therm{height:3px;background:var(--raised);border-radius:2px;overflow:hidden}
.therm i{display:block;height:100%;border-radius:2px;background:var(--up);
  transition:width var(--dur) var(--ease)}

/* ────────────────────────────────────── лента ───────────────────────────── */
.feed{display:flex;flex-direction:column}
.feed-i{display:grid;grid-template-columns:70px minmax(0,1fr);gap:var(--s2);
  padding:12px 0;border-bottom:1px solid rgba(49,49,49,.5)}
.feed-i:last-child{border-bottom:0}

/* ───────────────────────────────────── диалог ───────────────────────────── */
/* Реплика брокера — плашкой справа, ответ платформы — во всю ширину слева:
   ответ почти всегда карточка с расчётом, и сжимать её в «пузырь» вредно. */
.msg{display:flex;margin-bottom:var(--s2)}
.msg.me{justify-content:flex-end}
.msg.me .bub{
  max-width:min(82%,560px);padding:10px 14px;font-size:14px;line-height:1.55;
  background:var(--raised);border:1px solid var(--hair);border-radius:var(--r);
  color:var(--bone);white-space:pre-wrap;overflow-wrap:anywhere;
}
.msg.ai .bub{width:100%;max-width:min(92%,760px)}

/* Риск в разборе договора: тяжесть — цветом полосы слева, а не заливкой,
   иначе три «высоких» риска подряд превращают экран в сплошное красное. */
.risk{
  border:1px solid var(--hair);border-left:2px solid var(--edge);
  border-radius:var(--r-xs);padding:12px 14px;
}
.risk.high{border-left-color:var(--down)}
.risk.medium{border-left-color:var(--warn)}

/* Ход диалога, записанный до смены системы. В базе он лежит готовым HTML
   с классами прежней вёрстки: перерисовать его нечем — исходных данных
   не осталось, только разметка. На новой оболочке эти классы не оформляются
   ничем, зато остаются обрезка по ширине, фиксированные высоты и наложения,
   и старая переписка выглядит сломанной. Здесь они снимаются, чтобы текст
   просто читался. Область действия — только архивные сообщения. */
.legacy{font-size:14px;line-height:1.55;color:var(--ash)}
.legacy *{
  max-width:100%!important;width:auto!important;height:auto!important;
  overflow:visible!important;text-overflow:clip!important;white-space:normal!important;
  position:static!important;float:none!important;transform:none!important;
  box-shadow:none!important;background:transparent!important;border:0!important;
  color:inherit!important;padding:0!important;margin:0!important;
  font-size:inherit!important;line-height:inherit!important;
}
.legacy div,.legacy p{display:block!important;margin-bottom:6px!important}
.legacy a{color:var(--spark)!important;display:inline!important}
.legacy b,.legacy strong{color:var(--bone)!important;font-weight:500!important}
.legacy img,.legacy svg{display:none!important}

/* Список диалогов слева */
.conv{
  display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r-xs);
  font-size:13px;color:var(--ash);transition:background .2s var(--ease),color .2s var(--ease);
}
.conv:hover{background:var(--raised);color:var(--bone)}
.conv[aria-current="page"]{background:var(--raised);color:var(--bone)}
.conv .t{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Полотно чата занимает высоту экрана под шапкой: прокручивается лента,
   а не страница — форма ввода всегда под рукой. */
.chat{display:grid;grid-template-columns:236px minmax(0,1fr);gap:var(--s2);
  height:calc(100vh - 190px);min-height:460px}
@media(max-width:900px){.chat{grid-template-columns:1fr}.chat-side{display:none}}
.chat-side{display:flex;flex-direction:column;min-height:0;padding:12px}
.chat-main{display:flex;flex-direction:column;min-height:0;padding:var(--s2)}
.chat-log{flex:1 1 auto;overflow-y:auto;min-height:0;padding-right:4px}

/* ─────────────────────────────── выдвижная панель ───────────────────────── */
/* Форма, которая нужна изредка, не должна занимать верх экрана постоянно.
   Панель приходит справа поверх содержимого и уходит по Esc или по фону. */
.drawer{position:fixed;inset:0;z-index:110;display:flex;justify-content:flex-end;
  pointer-events:none;visibility:hidden}
.drawer[open],.drawer.on{pointer-events:auto;visibility:visible}
.drawer .veil{position:absolute;inset:0;background:rgba(10,10,10,.7);
  backdrop-filter:blur(4px);opacity:0;transition:opacity .35s var(--ease)}
.drawer.on .veil{opacity:1}
.drawer-body{
  position:relative;width:min(460px,100%);height:100%;overflow-y:auto;
  background:var(--surface);border-left:1px solid var(--hair);
  padding:var(--s3);transform:translateX(100%);
  transition:transform .4s var(--ease);
}
.drawer.on .drawer-body{transform:none}
.drawer-h{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s2);margin-bottom:var(--s3)}
@media(prefers-reduced-motion:reduce){
  .drawer .veil,.drawer-body{transition:none}
}

/* ──────────────────────────────── миниатюра объекта ─────────────────────── */
.thumb{
  width:96px;height:64px;flex:none;border-radius:var(--r-xs);overflow:hidden;
  background:var(--void);border:1px solid var(--hair);
  transition:border-color .3s var(--ease);
}
.thumb canvas{width:100%;height:100%}
tr:hover .thumb{border-color:var(--edge)}

/* ────────────────────────────────── пустое состояние ────────────────────── */
.empty{
  border:1px dashed var(--hair);border-radius:var(--r);
  padding:var(--s6) var(--s3);text-align:center;
}
.empty .e-t{font-size:18px;font-weight:500;letter-spacing:-.01em;margin:0 0 8px}
.empty .e-s{font-size:14px;color:var(--ash);margin:0 auto var(--s3);max-width:44ch;line-height:1.6}

/* ────────────────────────────────────── шапка приложения ────────────────── */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.top-1{display:flex;align-items:center;gap:var(--s3);height:60px}
.top-2{display:flex;align-items:center;gap:var(--s3);height:44px;overflow-x:auto;scrollbar-width:none}
.top-2::-webkit-scrollbar{display:none}

.mark{display:flex;align-items:center;gap:10px;flex:none;font-weight:500;letter-spacing:-.02em;font-size:17px}
.mark .glyph{width:22px;height:22px;flex:none}
.mark span{color:var(--mist);font-weight:400}

.nav{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  display:flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--r);
  font-size:14px;color:var(--ash);white-space:nowrap;
  transition:color .28s var(--ease),background .28s var(--ease);
}
.nav a:hover{color:var(--bone);background:var(--raised)}
.nav a[aria-current="page"]{color:var(--bone);background:var(--raised)}

.subnav{display:flex;align-items:center;gap:var(--s3)}
.subnav a{
  position:relative;font-size:13px;color:var(--mist);white-space:nowrap;
  padding:12px 0;transition:color .28s var(--ease);
}
.subnav a:hover{color:var(--ash)}
.subnav a[aria-current="page"]{color:var(--bone)}
.subnav a[aria-current="page"]::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--bone);
}

/* на узком экране шапка отдаёт место разделам: остаток токенов и подпись
   горячей клавиши уходят, они дублируются внутри экранов */
/* Ширина шапки не зависит от экрана — .shell ограничен, и бюджет строки
   фиксирован. Он не вмещает и счётчик токенов, и чип горячей клавиши, поэтому
   чип убран: сочетание продолжает работать, о нём написано в самой панели
   ассистента, а баланс токенов должен быть виден всегда — платные действия
   списывают его молча, и узнать об этом перед клиентом уже поздно. */
.top-1 .kbd{display:none}
/* Ниже этой ширины меню начинает обрезаться — счётчик уступает место разделам.
   Баланс остаётся в кабинете, а обрезанный пункт навигации не остаётся нигде. */
@media(max-width:1180px){
  #pl-tokens{display:none}
}
@media(max-width:760px){
  .top-1{height:56px;gap:var(--s2)}
  .mark span{display:none}
  .top-1 > .row .tag{display:none}
  .top-2{height:40px}
}

.avatar{
  width:28px;height:28px;border-radius:50%;flex:none;
  background:var(--raised);border:1px solid var(--edge);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:500;color:var(--ash);
}
.kbd{
  display:inline-flex;align-items:center;gap:2px;padding:2px 6px;
  border:1px solid var(--hair);border-radius:var(--r-xs);
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--mist);
}

/* ────────────────────────────────────── орб ассистента ──────────────────── */
/* круг → при наведении подсказки → при нажатии уезжает вправо, оставляя
   за собой строку ввода; сам круг становится кнопкой отправки справа */
.orb{
  position:fixed;right:32px;bottom:32px;z-index:80;
  display:flex;align-items:center;justify-content:flex-end;
  transition:right var(--dur) var(--ease);
}
.orb.open{right:24px}
@media(max-width:640px){.orb{right:16px;bottom:16px} .orb.open{right:12px}}

.orb-ball{
  position:relative;z-index:2;flex:none;
  width:56px;height:56px;border-radius:50%;
  border:1px solid var(--edge);background:var(--surface);color:var(--bone);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.orb-ball::after{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  background:radial-gradient(60% 60% at 50% 30%,var(--spark-soft),transparent 70%);
  opacity:0;transition:opacity var(--dur) var(--ease);
}
.orb:hover .orb-ball,.orb.open .orb-ball{border-color:var(--spark)}
.orb:hover .orb-ball::after,.orb.open .orb-ball::after{opacity:1}
.orb-ball svg{position:relative;z-index:1;transition:transform var(--dur) var(--ease)}
.orb.open .orb-ball svg{transform:rotate(90deg)}

/* строка ввода — «след» круга. Ширина едет от нуля, поэтому внутренние
   отступы живут на самом поле: padding на схлопнутом контейнере не даёт
   ему стать нулевым и оставляет торчащий обрубок. */
.orb-bar{
  display:flex;align-items:center;
  width:0;height:56px;overflow:hidden;padding:0;
  margin-right:-28px;
  background:var(--surface);border:1px solid var(--hair);border-right:0;
  border-radius:28px 0 0 28px;
  transition:width var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.orb.open .orb-bar{width:min(460px,calc(100vw - 96px));border-color:var(--edge)}
.orb-bar input{
  flex:1 1 auto;min-width:0;height:100%;padding:0 44px 0 24px;
  background:transparent;border:0;outline:0;font-size:15px;
  opacity:0;transition:opacity .3s var(--ease) .18s;
}
.orb-bar input::placeholder{color:var(--mist)}
.orb.open .orb-bar input{opacity:1}

/* подсказки при наведении на закрытый круг */
.orb-tips{
  position:absolute;right:0;bottom:calc(100% + 12px);width:320px;max-width:80vw;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  padding:var(--s2);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.orb:hover .orb-tips{opacity:1;transform:none;pointer-events:auto}
.orb.open .orb-tips{opacity:0;transform:translateY(6px);pointer-events:none}
.orb-tip{
  display:block;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:var(--r-xs);
  background:transparent;color:var(--ash);font-size:13px;cursor:pointer;line-height:1.4;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.orb-tip:hover{background:var(--raised);color:var(--bone)}

/* ─────────────────────────────────────── появление ──────────────────────── */
[data-rise]{opacity:0;transform:translateY(18px)}
[data-rise].in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-rise]{opacity:1;transform:none}
}

/* ──────────────────────────────────────── печать ────────────────────────── */
/* документ, который уходит клиенту, живёт на бумаге, а не на холсте */
.paper{background:#fffdf9;color:#101010}
@media print{
  .no-print{display:none!important}
  body{background:#fff}
}

/* ─────────────────────────────── документ на бумаге ────────────────────── */
/* Что уходит клиенту или собственнику и почти всегда печатается, живёт
   на бумаге, а не на холсте. Система та же — гарнитура, шкала радиусов,
   волосяные линии, надзаголовки; сменилась подложка. */
.sheet{
  --ink:#101010; --ink-2:#4a4a48; --ink-3:#87847e;
  --line:#ddd8ce; --line-2:#efebe3;
  --pos:#1f7a4d; --neg:#a5342b; --wrn:#8a5a00; --acc:#2b52b8;
  width:min(860px,100%);margin:var(--s4) auto var(--s8);
  background:#fffdf9;color:var(--ink);border-radius:var(--r);
  padding:56px 60px 48px;
}
@media(max-width:640px){.sheet{padding:28px 22px;margin-top:var(--s2)}}
.sheet .eyebrow{color:var(--ink-3)}
.sheet .tiny{color:var(--ink-3)}
.sheet .small{color:var(--ink-2)}
.sheet h1{font-size:32px;font-weight:500;letter-spacing:-.026em;line-height:1.12;margin:0}
.sheet h2{font-size:15px;font-weight:500;letter-spacing:-.005em;margin:0 0 var(--s2)}
.sheet .s-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--ink)}
.sheet .s-sec{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.sheet .s-sec:last-of-type{border-bottom:0}
.sheet .fact{border-bottom-color:var(--line-2)}
.sheet .fact .k{color:var(--ink-3)}
.sheet .fact .v{color:var(--ink)}
.sheet .panel{background:#f6f2ea;border-color:var(--line);color:var(--ink-2)}
.sheet .tag{background:#efebe3;color:var(--ink-2)}
.sheet .tag.up{background:#e7f2ea;color:var(--pos)}
.sheet .tag.warn{background:#f7efdf;color:var(--wrn)}
.sheet .tag.down{background:#f6e6e4;color:var(--neg)}
.sheet .up{color:var(--pos)} .sheet .warn{color:var(--wrn)} .sheet .down{color:var(--neg)}
.sheet .tbl th{color:var(--ink-3);border-bottom-color:var(--ink)}
.sheet .tbl td{border-bottom-color:var(--line-2)}
.sheet .tbl tbody tr:hover{background:transparent}
.sheet .m-v{color:var(--ink)}

.doc-bar{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);
  /* полоса лежит внутри колонки контента, но должна идти во всю ширину окна */
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.doc-bar .shell{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);height:56px;flex-wrap:wrap}

@media print{
  body{background:#fff}
  .no-print,.top,.orb,.pl-foot,#nb-cookie,.doc-bar{display:none!important}
  .sheet{margin:0;width:100%;padding:0;border-radius:0}
  .sheet .s-sec{break-inside:avoid}
  .view{animation:none;padding:0}
}