/* «История поисков» на экране «Расходы» (волна 5 дизайна экранов, G6 и G7).
   Селекторы держат силу `.traty-istoriya table.rows …`: файл подключён до
   `dizayn2.css`, и общие правила листа нового вида не должны его перебить. */

.traty-istoriya table.rows td.num { font-family: inherit; font-size: inherit; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.traty-istoriya table.rows td.traty-spisano { font-weight: 600; color: var(--ink); }
.traty-istoriya table.rows .traty-kogda { white-space: nowrap; color: var(--fg-2); }
.traty-istoriya .traty-telefon { display: none; }
.traty-istoriya .traty-dolya {
  display: block;
  width: 64px;
  height: 4px;
  margin: 6px 0 0 auto;
  border-radius: 99px;
  background: var(--sunken);
  overflow: hidden;
}
.traty-istoriya .traty-dolya i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

/* Оборванный поиск виден сразу: подложка строки и метка словами. */
.traty-istoriya table.rows tr.traty-sboy,
.traty-istoriya table.rows tbody tr.traty-sboy:hover { background: color-mix(in oklch, var(--stop) 7%, transparent); }
.traty-istoriya .traty-metka {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 9px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--stop);
  background: color-mix(in oklch, var(--stop) 12%, transparent);
}
.traty-istoriya .traty-sboy .traty-dolya i { background: var(--stop); }

/* Телефон: карточка в три строки — название и сумма, ниже одной строкой
   «когда · цена у N из M · по X ₽»; хвост с ценой не рвётся. Карточка
   нажимается целиком: ссылка названия растянута на всю строку. */
@media (max-width: 680px) {
  .traty-istoriya table.rows tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 0;
    padding: 12px 14px;
  }
  .traty-istoriya table.rows td { display: inline; padding: 0; }
  .traty-istoriya table.rows td::before { content: none; }
  .traty-istoriya table.rows td.traty-chto { order: 1; flex: 1 1 calc(100% - 8rem); min-width: 0; padding-right: 12px; }
  .traty-istoriya table.rows td.traty-spisano { order: 2; flex: none; font-size: 15px; }
  .traty-istoriya table.rows td.traty-kogda,
  .traty-istoriya table.rows td.traty-kto,
  .traty-istoriya table.rows td.traty-nashli,
  .traty-istoriya table.rows td.traty-zp { order: 3; font-size: 13px; color: var(--fg-2); }
  .traty-istoriya table.rows td.traty-kogda { flex-basis: auto; margin-top: 4px; }
  .traty-istoriya table.rows td.traty-kto::before,
  .traty-istoriya table.rows td.traty-nashli::before,
  .traty-istoriya table.rows td.traty-zp::before { content: "\00a0·\00a0"; color: var(--fg-3); font-size: inherit; }
  .traty-istoriya table.rows td.traty-zp-net { display: none; }
  .traty-istoriya table.rows td.traty-zp { white-space: nowrap; }
  .traty-istoriya .traty-telefon { display: inline; }
  .traty-istoriya .traty-kogda:has(.traty-telefon) .traty-polno { display: none; }
  .traty-istoriya .traty-dolya { display: none; }
  .traty-istoriya .traty-ssylka {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
  }
  .traty-istoriya .traty-ssylka::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .traty-istoriya .traty-ssylka:focus-visible::after { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
  .traty-istoriya .traty-chto .sub { display: table; }
  .traty-istoriya .traty-metka { padding: 4px 10px; }
  .traty-istoriya table.rows tr.traty-sboy { border-color: var(--stop); box-shadow: 0 0 0 1px var(--stop) inset; }
  /* Метка обрыва уезжает в конец карточки отдельной строкой. */
  .traty-istoriya table.rows tr.traty-sboy .traty-chto { display: contents; }
  .traty-istoriya table.rows tr.traty-sboy .traty-ssylka { order: 1; flex: 1 1 calc(100% - 8rem); min-width: 0; padding-right: 12px; }
  .traty-istoriya table.rows tr.traty-sboy .traty-metka { flex-basis: auto; }
  .traty-istoriya table.rows tr.traty-sboy .traty-metka { order: 4; margin-top: 8px; }
}