/* Вкладка «Офферы» и редактор владельца (Этап-1 §2). Цвета только через токены, анимируются только transform и opacity. */

.offers-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.offers-head__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}
.offers-head__sub {
  color: var(--mute);
  font-size: var(--t-small);
}
.offers-head__btns {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.offers-head__btns:empty {
  display: none;
}
@media (max-width: 639px) {
  .offers-head__btns {
    width: 100%;
  }
  .offers-head__btns .btn {
    flex: 1;
  }
}

.offers-tools {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.offers-search {
  position: relative;
  max-width: 520px;
}
.offers-search .field__input {
  padding-left: var(--s-8);
  padding-right: var(--s-8);
}
.offers-search__icon {
  position: absolute;
  left: var(--s-4);
  color: var(--mute);
  pointer-events: none;
}
.offers-search__clear {
  position: absolute;
  right: 4px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-s);
  color: var(--mute);
}
.offers-search__clear[hidden] {
  display: none;
}
.offers-chips .chip-tab {
  min-height: 44px;
}
/* на компьютере у мыши нет горизонтальной прокрутки: чипы переносятся на вторую строку */
@media (min-width: 1024px) {
  .offers-chips {
    flex-wrap: wrap;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.offers-unchecked {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-s);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: var(--t-small);
  line-height: 1.43;
}

.offers-list__item {
  display: flex;
  min-width: 0;
}
.offers-list__item > .offer {
  flex: 1;
  min-width: 0;
}
.offers-list {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1024px) {
  .offers-list {
    grid-template-columns: repeat(2, minmax(0, 620px));
  }
}

/* ---------- Карточка оффера ---------- */
.offer {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  touch-action: pan-y;
}
.offer.is-drag {
  z-index: var(--z-dock);
  background: var(--raised);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-raised);
}
.offer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 24px;
}
.offer__num {
  flex: none;
  font: 800 1.375rem / 1 var(--f-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--mute);
}
.offer__num::before {
  content: "№\00a0";
}
.offer__title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.offer__name {
  font: 700 var(--t-h2) / var(--t-lh-h2) var(--f-text);
  overflow-wrap: anywhere;
}
/* условия: плашка с иконкой, КАПС-фрагменты выделены, текст из данных как есть */
.offer__terms {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4);
  border-radius: var(--r-m);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.offer__terms > .icon {
  flex: none;
  margin-top: 2px;
  color: var(--accent-text);
}
.offer__terms-text {
  min-width: 0;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: anywhere;
}
.offer__caps {
  font-weight: 800;
  color: var(--warn);
}
.offer__caps-cd {
  font-weight: 700;
  color: var(--text);
}
/* целевое действие: главное, что смотрит обработчик */
.offer__cd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-4);
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.offer__cd-label {
  color: var(--accent-text);
}
.offer__cd-text {
  white-space: pre-line;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.offer.is-open .offer__cd-text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.offer__more {
  min-height: 44px;
  padding: 0 var(--s-3);
  margin-left: calc(var(--s-3) * -1);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border-radius: var(--r-s);
  color: var(--accent-text);
  font-weight: 600;
}
.offer__more[hidden] {
  display: none;
}
.offer__more .icon {
  transition: transform var(--dur-fast) var(--ease-out);
}
.offer.is-open .offer__more .icon {
  transform: rotate(180deg);
}
.offer__tail {
  margin-top: auto; /* подпись срока и полоса владельца прижаты к низу: в сетке нижние края ровные */
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.offer__meta {
  color: var(--text-2);
  font-size: var(--t-small);
  font-weight: 600;
}
.offer__how {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Полоса владельца */
.offer__own {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface-2);
  border-radius: var(--r-m);
}
.offer__own-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}
.offer__lock {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.offer__lock .icon {
  color: var(--mute);
}
.offer__amount {
  font: 800 var(--t-num-s) / 1.1 var(--f-display);
  font-variant-numeric: tabular-nums;
}
.offer__amount-now {
  font: 500 var(--t-small) / 1.43 var(--f-text);
  color: var(--mute);
}
.offer__amount-sub {
  color: var(--mute);
  font-size: var(--t-small);
}
.offer__link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
  font-size: var(--t-small);
  user-select: all;
  -webkit-user-select: all;
}
.offer__own-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.offer__own-actions .btn--secondary {
  flex: 1;
  min-width: 140px;
}
.offer__own .btn--icon {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.offer__handle {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: -10px -8px -10px 0;
  border-radius: var(--r-s);
  color: var(--mute);
  cursor: grab;
  touch-action: none;
}
.offer__handle:active {
  cursor: grabbing;
}
.offer__handle[hidden] {
  display: none;
}
.btn--icon[aria-disabled="true"] {
  color: var(--disabled);
}

/* Снятые офферы */
.offers-removed {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.offers-removed__toggle {
  min-height: 44px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  margin-left: calc(var(--s-3) * -1);
  border-radius: var(--r-s);
  color: var(--text-2);
  font-weight: 600;
}
.offers-removed__toggle .icon {
  transition: transform var(--dur-fast) var(--ease-out);
}
.offers-removed.is-open .offers-removed__toggle .icon {
  transform: rotate(90deg);
}
.offers-removed__list[hidden] {
  display: none;
}
.offer-gone {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.offer-gone__name {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.offer-gone__btns {
  display: flex;
  gap: var(--s-2);
}

/* ---------- Лист «Изменить оффер» ---------- */
.sheet__body--form {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.offer-form-root,
.offer-form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.offer-form[hidden] {
  display: none;
}
.offer-form__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-2) var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  overscroll-behavior: contain;
}
.offer-form__actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5) var(--s-3);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--raised);
}
.offer-form__sub {
  display: flex;
  gap: var(--s-3);
}
.offer-form__cancel {
  flex: 1;
}
.offer-form__save {
  flex: 2;
}
.offer-form__danger {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.seg--grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.seg--grid2 .chip-tab {
  justify-content: center;
  min-height: 44px;
}
.offer-var__row .chip-tab {
  min-height: 44px;
}
.offer-form__row2 {
  display: flex;
  gap: var(--s-3);
}
.offer-form__row2 > * {
  flex: 1;
  min-width: 0;
}
.offer-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.offer-form__net {
  color: var(--text-2);
  font-size: var(--t-small);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.offer-form__lockline {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-2);
  font-size: var(--t-small);
}
.offer-form__lockline .icon {
  color: var(--mute);
}
.offer-var {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface-2);
  border-radius: var(--r-m);
}
.offer-var__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.offer-form__warns {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.offer-form__warns[hidden] {
  display: none;
}
.offer-warn {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-s);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: var(--t-small);
  line-height: 1.43;
}
.offer-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-5) var(--s-5);
}
.offer-confirm[hidden] {
  display: none;
}
.offer-confirm__btns {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ---------- Настройки: метки в ссылках ---------- */
.tags {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.tag-net {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface-2);
  border-radius: var(--r-m);
}
.tag-net__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.tag-net__name {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}
.tag-net__ex {
  color: var(--text-2);
  font-size: var(--t-small);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Переключатели внутри тёмных плашек: контур, чтобы выбранное и невыбранное различались на фоне плашки */
.offer-var .chip-tab,
.tag-net .chip-tab {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.offer-var .chip-tab[aria-checked="true"],
.tag-net .chip-tab[aria-checked="true"] {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

/* Переключатель внутри тёмной плашки сети */
.tag-net .switch {
  padding: 0;
}