/* TENVO — лист лотов, панель фильтров над ним, экраны публичного подбора.
   Ни одного нового цвета и шрифта: всё из css/tokens.css. */

/* ── каркас экрана ──────────────────────────────────────────────────── */
.page { max-width: 1320px; margin: 0 auto; padding: var(--s6) var(--gutter) var(--s7); }
.page-head { margin-bottom: var(--s5); }
.page-head h1 { max-width: 16ch; }
.page-head .lead { margin-top: var(--s4); max-width: 50ch; color: var(--ink-soft); hyphens: none; }

/* ── лист: шапка + панель фильтров + строки ─────────────────────────── */
.sheet { background: var(--sheet); border: var(--line) solid var(--rule-strong); }
.sheet-head {
  padding: var(--s4) var(--s5);
  border-bottom: 2px solid var(--ink);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline;
}
.sheet-head h2 { font-size: var(--t-h3); letter-spacing: -0.01em; }
.sheet-meta { font-size: var(--t-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-left: auto; }

/* панель фильтров — вплотную над списком, прилипает при прокрутке */
.bar {
  position: sticky; top: 0; z-index: 10;
  background: var(--sheet-alt);
  border-bottom: var(--line) solid var(--rule-strong);
  padding: var(--s3) var(--s5);
  display: grid; gap: var(--s3);
}
.bar[data-static] { position: static; }
.bar-fields { display: flex; flex-wrap: wrap; gap: var(--s3); }
.bar-f { display: flex; flex-direction: column; gap: var(--s1); min-width: 10rem; flex: 1 1 10rem; }
.bar-f-wide { flex: 2 1 16rem; }
.bar-f label { font-size: var(--t-small); font-weight: 600; }
.bar-f input, .bar-f select {
  min-height: 44px; padding: 0 var(--s3);
  font: 400 var(--t-small)/1 var(--text);
  border: var(--line) solid var(--rule-strong); border-radius: var(--r-none);
  background: var(--sheet); color: var(--ink);
}
.bar-f input::placeholder { color: var(--ink-soft); }
.bar-state { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; }
.bar-count { font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-sort { margin-left: auto; display: flex; align-items: center; gap: var(--s2); font-size: var(--t-small); color: var(--ink-soft); }
.bar-sort select { min-height: 44px; padding: 0 var(--s2); font: 400 var(--t-small)/1 var(--text); border: var(--line) solid var(--rule-strong); background: var(--sheet); color: var(--ink); border-radius: var(--r-none); }
.bar-apply { display: none; }

.picks { display: flex; flex-wrap: wrap; gap: var(--s2); }
.picks:empty { display: none; }
.pick-tag {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 32px; padding: 0 var(--s3);
  font-size: var(--t-small); background: var(--accent-soft); color: var(--ink);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
}
.picks-clear { background: none; border: 0; color: var(--accent); font: 400 var(--t-small)/1 var(--text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }

/* ── строки листа ───────────────────────────────────────────────────── */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto auto;
  gap: var(--s4); align-items: start;
  padding: var(--s4) var(--s5);
  border-top: var(--line) solid var(--rule);
}
.row:first-child { border-top: 0; }
.row-due {
  background: var(--sheet-alt); color: var(--ink);
  padding: var(--s2) var(--s3); font-variant-numeric: tabular-nums;
}
.row[data-soon="1"] .row-due { background: var(--due-soft); color: var(--due); }
.due-day { display: block; font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.1; }
.due-time { display: block; font-size: var(--t-small); }
.row-name { font-weight: 500; }
.row-meta { margin-top: var(--s1); font-size: var(--t-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.row-why { margin-top: var(--s2); font-size: var(--t-small); color: var(--ink-soft); }
.row-why mark { font-weight: 600; }
.row-sum { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.row-sum small { display: block; font-size: var(--t-small); font-weight: 400; color: var(--ink-soft); }
.row-act { display: flex; flex-direction: column; gap: var(--s2); }

.tag { display: inline-block; padding: 0 var(--s2); border-radius: var(--r-pill); font-size: var(--t-small); white-space: nowrap; }
.tag-new { background: var(--open-soft); color: var(--open); }
.tag-warn { background: var(--due-soft); color: var(--due); }

.sheet-empty { padding: var(--s6) var(--s5); color: var(--ink-soft); }
.sheet-empty:empty { display: none; }
.sheet-foot {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center;
  padding: var(--s3) var(--s5);
  border-top: var(--line) solid var(--rule-strong);
  background: var(--sheet-alt); font-size: var(--t-small); color: var(--ink-soft);
}
.sheet-foot .more-link { margin-left: auto; }
.sheet-more { padding: var(--s4) var(--s5); border-top: var(--line) solid var(--rule); display: flex; justify-content: center; }

.bar-open { display: none; }

.status-line { margin-top: var(--s4); font-size: var(--t-small); color: var(--ink-soft); }

/* ── телефон: своя композиция, а не сжатый десктоп ──────────────────── */
@media (max-width: 760px) {
  .top-in { flex-wrap: nowrap; gap: var(--s3); }
  .top-nav { display: none; }
  .top-cta { padding: 0 var(--s4); font-size: var(--t-small); min-height: 44px; }

  .row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); padding: var(--s4); }
  .row-due { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--s2); }
  .due-day { font-size: var(--t-body); }
  .row-main { grid-column: 1 / -1; }
  .row-sum { grid-column: 1; text-align: left; }
  .row-act { grid-column: 2; align-items: flex-end; }

  /* фильтры прячутся за кнопку «Фильтры (N)» и раскрываются панелью */
  .bar-open {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s3);
    min-height: 48px; margin-bottom: var(--s3); padding: 0 var(--s4);
    font: 500 var(--t-body)/1 var(--text);
    background: var(--sheet); color: var(--ink);
    border: var(--line) solid var(--ink); border-radius: var(--r-none); cursor: pointer;
  }
  .bar-open-count { font-size: var(--t-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .bar[data-bar-panel] { position: static; display: none; }
  .bar[data-bar-panel][data-open] { display: grid; }
  .bar-apply { display: flex; }
  .bar-apply .btn { width: 100%; }
  .bar-fields { flex-direction: column; }
  .bar-f, .bar-f-wide { flex: 1 1 auto; width: 100%; }

  /* поле и кнопка подбора на телефоне — друг под другом: иначе в поле помещается
     четыре буквы, а подпись кнопки ломается на две строки (замер 390px, 20.10.2026) */
  .pick-row { flex-direction: column; }
  .pick-row .btn { width: 100%; }

  .hero { padding: var(--s6) var(--gutter); }
  .sec, .price { padding-top: var(--s7); }
}

/* нижние разделы на телефоне — список ссылок, а не скрытое меню */
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.foot-nav a { color: var(--ink); }