/* Компоненты: всё, что повторилось дважды. Класс с модификаторами, описание – docs/design-system.md → Компоненты.
   Появляются по ходу сборки; ничего не заводится «на будущее». */

/* Плашка – белая таблетка с еле заметной обводкой (меню, переключатель языка) */
.pill {
  display: inline-flex;
  align-items: center;
  height: var(--control-h);
  padding-inline: var(--control-pad);
  border-radius: var(--radius-pill);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  white-space: nowrap;
  transition: border-color var(--dur-250) var(--ease-out);
}
a.pill:hover { border-color: var(--color-line-strong); }

/* Кнопка – главное действие: фиолетовая таблетка, белый текст 10,5:1; hover-приём lift: приподнимается, тень растёт */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-pill);
  background: var(--color-action);
  color: var(--color-fg-on-accent);
  box-shadow: var(--shadow-btn);
  transition: transform var(--dur-350) var(--ease-out), box-shadow var(--dur-350) var(--ease-out);
}
.btn:hover { transform: translateY(var(--lift-y)); box-shadow: var(--shadow-btn-hover); }

/* Карточка интерфейса Travoll – блок доски: стекло, мягкие тени, наклон --rot. Внутри: фото, тип блока с точкой, название, подпись.
   Цвет друга, который её держит, – --friend (аватар и курсор) */
.ui-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-m);
  rotate: var(--rot, 0deg);
  background: var(--color-glass);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--color-glass-edge);
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--color-glass-highlight);
}
.ui-card__photo { overflow: hidden; border-radius: var(--radius-m) var(--radius-m) 0 0; }
.ui-card__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ui-card__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--card-body-pad); }
.ui-card__body .body-s { color: var(--color-fg-muted); }
.ui-card__type { display: flex; align-items: center; gap: var(--space-6); }
.ui-card__type::before { content: ''; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--color-decor); }
/* Ambient-приём drift (docs/motion.md): карточка спокойно покачивается, при наведении замирает. Только при включённом движении */
.has-motion .ui-card--drift { animation: drift var(--dur, 7s) ease-in-out var(--del, 0s) infinite; }
.has-motion .ui-card--drift:hover { animation-play-state: paused; }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: var(--dx, var(--drift-x)) var(--drift-y); } }

/* Аватар друга – круглый стикер на углу карточки: фото, белое кольцо, обводка цветом друга, лёгкий наклон */
.avatar {
  position: absolute;
  left: var(--avatar-x);
  top: var(--avatar-y);
  z-index: var(--z-section);
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 50%;
  overflow: hidden;
  background: var(--friend);
  border: var(--avatar-ring) solid var(--color-bg-elevated);
  box-shadow: var(--shadow-avatar);
  rotate: -8deg;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Курсор друга с именем (как в Figma). Ambient-приём wander: ходит своим маршрутом, отдельно от карточки */
.cursor {
  position: absolute;
  right: var(--cursor-x);
  bottom: var(--cursor-y);
  z-index: var(--z-section);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  pointer-events: none;
}
.cursor svg { width: var(--cursor-w); height: var(--cursor-h); filter: var(--drop-cursor); }
.cursor path { fill: var(--friend); stroke: var(--color-bg-elevated); }
.cursor b { margin-top: var(--cursor-label-top); padding: var(--cursor-label-pad); line-height: var(--lh-tight); font-weight: var(--fw-semibold); border-radius: var(--radius-label); background: var(--friend); color: var(--color-fg); box-shadow: var(--shadow-label); }
.has-motion .cursor { animation: wander var(--cd, 7s) ease-in-out var(--cdl, 0s) infinite; }
.has-motion .ui-card--drift:hover .cursor { animation-play-state: paused; }
@keyframes wander { 0%, 100% { translate: 0 0; } 18%, 30% { translate: var(--wander-a); } 52% { translate: var(--wander-b); } 70%, 82% { translate: var(--wander-c); } }
@keyframes wander-sm { 0%, 100% { translate: 0 0; } 30% { translate: var(--wander-sm-a); } 60% { translate: var(--wander-sm-b); } }

/* Заметка друга – бумажный стикер с рукописным текстом и скотчем, приклеен к карточке (один элемент) */
.note {
  position: absolute;
  right: var(--note-x);
  top: var(--note-y);
  z-index: var(--z-section);
  width: var(--note-w);
  padding: var(--note-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  border-radius: var(--radius-s);
  background: var(--color-note);
  rotate: 6deg;
  box-shadow: var(--shadow-card);
}
.note .body-s { color: var(--color-fg-faint); }
/* Скотч – общий для всех стикеров сайта */
.tape::before {
  content: '';
  position: absolute;
  left: 50%;
  top: var(--tape-y);
  width: var(--tape-w);
  height: var(--tape-h);
  translate: -50% 0;
  rotate: -4deg;
  background: var(--color-tape);
  box-shadow: var(--shadow-tape);
}

/* Стикер места – картинка с белой обводкой, наклеена на правый верхний угол карточки поверх неё */
.sticker {
  position: absolute;
  right: var(--sx);
  top: var(--sy);
  z-index: var(--z-hero);
  width: auto;
  height: var(--sticker-h);
  rotate: var(--tr, 0deg);
  pointer-events: none;
  filter: var(--drop-sticker);
}

/* Карточка на доске внутри окна: белая, без стекла (backdrop-filter в окне и в 3D не нужен); находка из соцсетей – строкой с миниатюрой */
.ui-card--solid { background: var(--color-bg-elevated); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--color-line); }
.ui-card--find { flex-direction: row; align-items: center; gap: var(--space-8); padding: var(--space-8); }
.ui-card--find img { width: var(--thumb); height: var(--thumb); flex: none; border-radius: var(--radius-thumb); object-fit: cover; }
.ui-card--find .ui-card__body { padding: 0; }
/* Курсор друга прямо на доске: место задаёт секция, маршрута нет */
.cursor--free { right: auto; bottom: auto; z-index: var(--z-hero); }
.has-motion .cursor--free { animation: none; }

/* Липкий лист – цветная плашка на высоту экрана, стоит на месте, пока секция прокручивается (devices, reviews).
   Цвет и поля – у секции; высота дорожки – .has-motion .<секция> { height: … } */
.sticky-sheet { position: sticky; top: var(--sheet-inset); height: calc(100svh - var(--sheet-inset) * 2); margin-inline: var(--sheet-inset); display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: clip; }
/* Марка – белая рамка с зубчиками по краю (маска --stamp-mask): фото и подпись внутри. Тень – у родителя (маска её срезает) */
.stamp { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--stamp-pad); background: var(--color-bg-elevated); -webkit-mask: var(--stamp-mask); mask: var(--stamp-mask); }
.stamp__img { width: 100%; aspect-ratio: var(--stamp-ratio); object-fit: cover; }
.stamp__txt { display: flex; flex-direction: column; gap: var(--space-8); padding: 0 var(--space-4) var(--space-4); }
.stamp__txt .body-s { color: var(--color-fg-muted); }

/* Цвет друга – модификатор для аватаров, курсоров и плашек интерфейса */
.f-dana { --friend: var(--color-friend-dana); }
.f-leo { --friend: var(--color-friend-leo); }
.f-tess { --friend: var(--color-friend-tess); }
.f-maya { --friend: var(--color-friend-maya); }
/* Нарисованная волна листа – толстая полупрозрачная белая линия по диагонали за содержимым (how, devices) */
.sheet-wave { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.sheet-wave path { fill: none; stroke: var(--color-wave); stroke-width: var(--wave-w); stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Кнопка стора – тёмная плашка со значком и двумя строками: «Скачать в» и название стора (devices, дальше финал) */
.store { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-20) var(--space-8) var(--space-16); border-radius: var(--radius-thumb); background: var(--color-fg); color: var(--color-fg-on-accent); box-shadow: var(--shadow-card); transition: transform var(--dur-350) var(--ease-out); }
.store:hover { transform: translateY(var(--lift-y)); }
.store__icon { width: var(--store-icon); height: var(--store-icon); flex: none; }
.store__txt { display: flex; flex-direction: column; gap: var(--space-2); white-space: nowrap; text-align: left; }
/* Пара кнопок сторов – всегда одной ширины: колонки 1fr растягиваются по самой широкой */
.stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.stores > .store { justify-content: center; }

/* Сообщение чата: плашка друга/помощника; --me – своё, акцентная плашка с белым текстом (4,7:1). how (AI-чат), faq */
.msg { display: flex; flex-direction: column; gap: var(--space-6); max-width: 78%; padding: var(--space-8) var(--space-12); border-radius: var(--radius-msg); background: var(--color-bg-elevated); box-shadow: var(--shadow-msg); }
.msg--me { align-self: flex-end; border-radius: var(--radius-msg-me); background: var(--color-accent); box-shadow: none; }
.msg.msg--me .body-s, .msg--me .body-l, .msg--me .title-xxs, .msg--me .wave { color: var(--color-fg-on-accent); }
.msg__name { font-weight: var(--fw-semibold); }

/* Форма вопроса: поля вопроса и контакта одной ширины, кнопка; после отправки – благодарность (faq, подвал) */
.qform__fields { display: flex; gap: var(--space-8); }
.qform__input { flex: 1 1 0; min-width: 0; height: var(--faq-input-h); padding-inline: var(--space-20); border-radius: var(--radius-pill); border: 1px solid var(--color-line-strong); background: var(--color-field); outline: none; transition: border-color var(--dur-250) var(--ease-out); }
.qform__input::placeholder { color: var(--color-placeholder); }
.qform__input:focus { border-color: var(--color-action); }
.qform__send { flex: none; gap: var(--space-8); padding-block: 0; height: var(--faq-input-h); }
.qform__send svg { width: var(--ui-glyph); height: var(--ui-glyph); }
.qform__done { display: none; }
/* Вертикальная форма: поле над кнопкой, обе во всю ширину колонки (подписка в подвале) */
.qform--stack { max-width: var(--qform-stack-w); }
.qform--stack .qform__fields { flex-direction: column; }
.qform--stack .qform__input { flex: none; }
.qform.is-sent .qform__fields { display: none; }
.qform.is-sent .qform__done { display: block; }
@media (max-width: 768px) {
  .qform__fields { flex-direction: column; }
  .qform__input { flex: none; }
}

/* Меню: приём roll – буквы по очереди уезжают вверх, снизу приезжает та же буква цветом акцента (буквы режет main.js) */
.roll { display: inline-block; overflow: hidden; vertical-align: top; }
.roll__ch { display: inline-block; white-space: pre; text-shadow: 0 var(--roll-y) 0 var(--color-accent); transition: translate var(--dur-350) var(--ease-out) calc(var(--i) * var(--roll-step)); }
a.pill:hover .roll__ch { translate: 0 calc(var(--roll-y) * -1); }

/* Свой курсор сайта – стрелка цвета акцента, рядом стикер-пальма, как плашка с именем у курсоров друзей (решение Насти; initMyCursor).
   Острие стрелки – точка мыши. Только мышь (pointer: fine); системный курсор скрыт, в полях ввода – текстовый */
.me-cursor { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); display: flex; align-items: flex-start; gap: var(--space-2); pointer-events: none; transform-origin: 0 0; transition: scale var(--dur-250) var(--ease-out), opacity var(--dur-250) var(--ease-out); }
.me-cursor svg { width: var(--cursor-w); height: var(--cursor-h); filter: var(--drop-cursor); }
.me-cursor path { fill: var(--color-accent); stroke: var(--color-bg-elevated); }
.me-cursor img { width: var(--me-cursor-w); height: auto; margin-top: var(--cursor-label-top); rotate: 8deg; filter: var(--drop-sticker); transition: rotate var(--dur-250) var(--ease-out); }
.me-cursor.is-hover { scale: 1.25; }
.me-cursor.is-hover img { rotate: -14deg; }
.me-cursor.is-light path { fill: var(--color-bg-elevated); stroke: var(--color-accent); }
.me-cursor.is-out { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .has-my-cursor, .has-my-cursor * { cursor: none; }
  .has-my-cursor input, .has-my-cursor textarea { cursor: text; }
}

/* Окно интерфейса Travoll: шапка доски и тело. Используется в how (экраны шагов) и на экране ноутбука devices */
.win { display: flex; flex-direction: column; border-radius: var(--radius-window); overflow: hidden; background: var(--color-bg-elevated); box-shadow: var(--shadow-lift); }
.win__bar { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--color-line); }
.win__bar .title-m { white-space: nowrap; }
.win__body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.win__body--dots { background-color: var(--color-board); background-image: var(--board-dots); background-size: var(--board-dots-size) var(--board-dots-size); }
.push { margin-left: auto; }
/* Переключатель «Доска / Карта» */
.tabs { display: flex; padding: var(--space-2); border-radius: var(--radius-pill); background: var(--color-chip); }
.tabs > span { height: var(--ui-chip-h); padding-inline: var(--space-12); display: grid; place-items: center; border-radius: var(--radius-pill); font-weight: var(--fw-semibold); color: var(--color-fg-muted); }
.tabs > .is-on { background: var(--color-bg-elevated); color: var(--color-fg); box-shadow: var(--shadow-tab); }
/* Кнопка внутри интерфейса – фиолетовая, белый текст */
.ubtn { height: var(--ui-btn-h); padding-inline: var(--space-12); display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--color-action); color: var(--color-fg-on-accent); font-weight: var(--fw-semibold); white-space: nowrap; }
/* Стопка аватаров друзей: фото, белое кольцо, обводка цветом друга */
.avs { display: flex; }
.avs > img { width: var(--avatar-s); height: var(--avatar-s); margin-left: calc(var(--space-8) * -1); border-radius: 50%; border: var(--avatar-ring) solid var(--color-bg-elevated); object-fit: cover; box-shadow: var(--shadow-label); }
.avs > img:first-child { margin-left: 0; }
/* Колонки дней доски */
.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.lane { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-8); border-radius: var(--radius-panel); }
.lane--1 { background: var(--color-lane-1); }
.lane--2 { background: var(--color-lane-2); }
.lane--3 { background: var(--color-lane-3); }
.lane__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); }
.lane__head > .body-s { color: var(--color-fg-muted); }
.lane__day { height: var(--ui-chip-h-s); padding-inline: var(--space-8); display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--color-bg-elevated); font-weight: var(--fw-semibold); }
/* Голосовая волна – svg из столбиков, цвет – currentColor */
.wave { width: auto; height: var(--ui-glyph); color: var(--color-decor); }

@media (max-width: 960px) {
  .avatar { width: var(--avatar-mobile); height: var(--avatar-mobile); left: var(--avatar-x-mobile); top: var(--avatar-y-mobile); }
  .cursor { right: var(--cursor-x-mobile); bottom: var(--cursor-y-mobile); }
  .has-motion .cursor { animation-name: wander-sm; }
  .sticker { height: var(--sticker-h-mobile); }
}
@media (max-width: 768px) {
  .btn { padding: var(--btn-pad-y-mobile) var(--btn-pad-x-mobile); }
}