/*
  ВкусВилл — компоненты для веба.
  Подключать после vv-tokens.css (и vv-fonts.css). Все цвета — через токены, поэтому работают обе темы.
  Фирменные формы из брендбука: бабл (.vv-bubble), промо-плашка (.vv-plate), акцидентный лайн (.vv-accent).
  Интерфейсные дополнения (кнопки, тэги, поиск, карточка цитаты) брендбуком не описаны и собраны на его токенах.
*/

/* ---------- Фокус: кольцо + ореол, читается на любом фоне, включая зелёный ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-halo);
}

/* ---------- Акцидентный лайн ----------
   Villula — только прописные: строчная клавиша даёт узкую литеру, прописная — широкую.
   Пишите лайн «в разнобой» (СвеЖие ПрОдУкты), чтобы чередовать ширину литер. */
.vv-accent {
  font-family: var(--font-accent);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}

/* ---------- Бабл ----------
   Верхняя грань прямая, три другие под наклоном 5°, скруглён один угол (правый нижний),
   хвостик — клин с прямым углом 90°, основание лежит на нижней грани. */
.vv-bubble {
  --vv-bubble-bg: var(--surface-raised);
  --vv-bubble-ink: var(--ink);
  --vv-bubble-side: 10px;      /* сдвиг боковых сторон ≈ tan 5° × высота */
  --vv-bubble-rise: 14px;      /* подъём нижней грани к правому краю ≈ tan 5° × ширина */
  --vv-bubble-tail: 18px;      /* высота хвостика; основание вдвое шире (угол 90°) */
  --vv-bubble-tail-at: 0.18;   /* центр хвостика, доля ширины */
  --vv-bubble-r: var(--radius-bubble);
  --vv-bubble-pad: var(--space-5);
  position: relative;
  isolation: isolate;
  margin: 0;
  color: var(--vv-bubble-ink);
  padding:
    var(--vv-bubble-pad)
    calc(var(--vv-bubble-pad) + var(--vv-bubble-side))
    calc(var(--vv-bubble-pad) + var(--vv-bubble-rise) + var(--vv-bubble-tail))
    calc(var(--vv-bubble-pad) + var(--vv-bubble-side));
}
.vv-bubble::before {
  --b: calc(100% - var(--vv-bubble-tail) - var(--vv-bubble-rise));            /* низ у правого края */
  --x: calc(100% - var(--vv-bubble-side));                                    /* правый край внизу */
  --tx: calc(var(--vv-bubble-tail-at) * 100%);                                /* центр хвостика */
  --ty: calc(100% - var(--vv-bubble-tail) - var(--vv-bubble-rise) * var(--vv-bubble-tail-at));
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vv-bubble-bg);
  clip-path: polygon(
    0 0,
    100% 0,
    var(--x) calc(var(--b) - var(--vv-bubble-r)),
    calc(var(--x) - var(--vv-bubble-r) * 0.034) calc(var(--b) - var(--vv-bubble-r) * 0.741),
    calc(var(--x) - var(--vv-bubble-r) * 0.134) calc(var(--b) - var(--vv-bubble-r) * 0.5),
    calc(var(--x) - var(--vv-bubble-r) * 0.293) calc(var(--b) - var(--vv-bubble-r) * 0.293),
    calc(var(--x) - var(--vv-bubble-r) * 0.5) calc(var(--b) - var(--vv-bubble-r) * 0.134),
    calc(var(--x) - var(--vv-bubble-r) * 0.741) calc(var(--b) - var(--vv-bubble-r) * 0.034),
    calc(var(--x) - var(--vv-bubble-r)) var(--b),
    calc(var(--tx) + var(--vv-bubble-tail)) var(--ty),
    var(--tx) calc(var(--ty) + var(--vv-bubble-tail)),
    calc(var(--tx) - var(--vv-bubble-tail)) var(--ty),
    var(--vv-bubble-side) calc(100% - var(--vv-bubble-tail))
  );
}
.vv-bubble--brand  { --vv-bubble-bg: var(--brand);  --vv-bubble-ink: var(--on-brand); }
.vv-bubble--accent { --vv-bubble-bg: var(--accent); --vv-bubble-ink: var(--on-accent); }
.vv-bubble--sunken { --vv-bubble-bg: var(--surface-sunken); }
.vv-bubble--tint   { --vv-bubble-bg: var(--surface-tint); }
.vv-bubble--tail-right { --vv-bubble-tail-at: 0.8; }
.vv-bubble--no-tail { --vv-bubble-tail: 0px; }
.vv-bubble--compact {
  --vv-bubble-pad: var(--space-3);
  --vv-bubble-side: 5px;
  --vv-bubble-rise: 6px;
  --vv-bubble-tail: 10px;
  --vv-bubble-r: 10px;
}
.vv-bubble--inline { display: inline-block; }

/* ---------- Промо-плашка ----------
   Полоса снизу или справа макета; верхняя грань под углом 2°, поднимается вправо. */
.vv-plate {
  --vv-plate-bg: var(--accent);
  --vv-plate-ink: var(--on-accent);
  --vv-plate-rise: 10px;
  position: relative;
  isolation: isolate;
  color: var(--vv-plate-ink);
  padding: calc(var(--space-3) + var(--vv-plate-rise)) var(--space-5) var(--space-3);
}
.vv-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vv-plate-bg);
  clip-path: polygon(0 var(--vv-plate-rise), 100% 0, 100% 100%, 0 100%);
}
.vv-plate--brand  { --vv-plate-bg: var(--brand);  --vv-plate-ink: var(--on-brand); }
.vv-plate--yellow { --vv-plate-bg: var(--promo-yellow); --vv-plate-ink: var(--graphite); }

/* ---------- Кнопки ---------- */
.vv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-m);
  background: var(--brand);
  color: var(--on-brand);
  font: 500 16px/1.2 var(--font-text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.vv-btn:hover { background: var(--green-80); }
.vv-btn:active { transform: translateY(1px); }
.vv-btn--accent { background: var(--accent); color: var(--on-accent); }
.vv-btn--accent:hover { filter: brightness(0.92); }
.vv-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.vv-btn--ghost:hover { background: var(--surface-tint); }
.vv-btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: 14px; }
.vv-btn svg { width: 20px; height: 20px; flex: none; }

/* ---------- Ссылка ---------- */
.vv-link {
  color: var(--brand-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.vv-link:hover { text-decoration-thickness: 2px; }

/* ---------- Тэг ---------- */
.vv-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--surface-tint);
  color: var(--ink);
  font: 400 14px/20px var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease;
}
.vv-tag:hover { background: var(--green-30); color: var(--graphite); }
.vv-tag[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); font-weight: 500; }
.vv-tag__count { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.vv-tag:hover .vv-tag__count { color: inherit; }
.vv-tag[aria-pressed="true"] .vv-tag__count { color: inherit; }
.vv-tag--static { min-height: 26px; padding: 0 var(--space-2); font-size: 13px; cursor: default; }
.vv-tag--static:hover { background: var(--surface-tint); color: var(--ink); }
.vv-tag--on-brand { background: var(--surface-raised); color: var(--ink); }

/* ---------- Поле поиска ---------- */
.vv-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px;
  border-radius: var(--radius-m);
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.vv-search:focus-within {
  box-shadow: inset 0 0 0 2px var(--focus-ring), 0 0 0 3px var(--focus-halo);
}
.vv-search__icon {
  position: absolute;
  left: 18px;
  width: 22px;
  height: 22px;
  color: var(--ink-muted);
  pointer-events: none;
}
.vv-search__input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 var(--space-2) 0 46px;
  border: 0;
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--ink);
  font: 400 18px/1.2 var(--font-text);
  appearance: none;
}
.vv-search__input::placeholder { color: var(--ink-muted); }
.vv-search__input:focus-visible { outline: none; box-shadow: none; }
.vv-search__input::-webkit-search-cancel-button { display: none; }
.vv-search__clear {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}
.vv-search__clear:hover { background: var(--surface-tint); color: var(--ink); }
.vv-search__clear svg { width: 18px; height: 18px; }

/* ---------- Поле формы ---------- */
.vv-field { display: grid; gap: 6px; min-width: 0; }
.vv-field__label { font: 500 14px/20px var(--font-text); color: var(--ink); }
.vv-field__hint { font: 400 13px/18px var(--font-text); color: var(--ink-muted); }
.vv-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font: 400 16px/1.2 var(--font-text);
  appearance: none;
}
.vv-input::placeholder { color: var(--ink-muted); }
.vv-input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring), 0 0 0 3px var(--focus-halo); }
.vv-input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger-text); }
select.vv-input {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  cursor: pointer;
}
.vv-error { margin: 0; color: var(--danger-text); font: 500 14px/20px var(--font-text); }
.vv-error:empty { display: none; }

/* ---------- Карточка цитаты (комментарий спикера) ---------- */
.vv-quote {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface-raised);
  color: var(--ink);
  min-width: 0;
}
.vv-quote__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  font: 400 14px/20px var(--font-text);
  color: var(--ink-muted);
}
.vv-quote__outlet { color: var(--ink); font-weight: 500; }
.vv-quote__title { margin: 0; font: 500 20px/26px var(--font-text); text-wrap: balance; }
.vv-quote__text { font: 400 18px/28px var(--font-text); }
.vv-quote__text p { margin: 0; }
.vv-quote__text p + p { margin-top: var(--space-2); }
.vv-quote__speaker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: calc(var(--space-2) * -1);
  padding-left: calc(var(--vv-bubble-tail-at, 0.18) * 100% - 22px);
  font: 400 14px/20px var(--font-text);
}
.vv-quote__speaker b { display: block; font-weight: 500; color: var(--ink); }
.vv-quote__speaker b + span { color: var(--ink-muted); }
.vv-quote__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.vv-quote__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vv-quote__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.vv-quote mark { background: var(--highlight); color: var(--on-highlight); border-radius: 3px; padding: 0 2px; }

/* ---------- Аватар-монограмма ---------- */
.vv-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--brand-text);
  font: 700 15px/1 var(--font-text);
}
.vv-avatar img { width: 26px; height: auto; }

/* ---------- Силуэт продукта (для паттернов) ----------
   Задайте маску инлайном: style="-webkit-mask-image:url(...); mask-image:url(...)". Цвет — color. */
.vv-silhouette {
  display: block;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .vv-btn, .vv-tag { transition: none; }
}