/*
 * Фирменные куски, общие для лендинга и экранов входа: логотип, тёмная плашка над заголовком,
 * круг с иконкой, коралловая панель, клетки и стикеры 3D-иллюстраций.
 * Геометрия иллюстраций — часть иллюстрации, не токен (docs/tokens-audit.md).
 */

/* Логотип */
.logo {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-1-5) var(--space-5) var(--space-1-5) var(--space-1-5);
  border-radius: var(--radius-panel); background: var(--color-bg-muted);
  color: var(--color-text); text-decoration: none;
}
.logo:hover { color: var(--color-text); }
.logo__mark {
  width: 40px; height: 40px; border-radius: var(--radius-field);
  background: var(--color-bg-brand); border: var(--border-width-button) solid var(--color-border-ink);
  display: grid; place-items: center; color: var(--color-text-on-brand);
  font: var(--font-weight-display-xl) 22px/var(--line-height-single) var(--font-display); /* 22px и 40×40 — часть логотипа, не токен (tokens-audit, разделы 2 и 6) */
}
.logo__name {
  font-size: var(--font-size-button); line-height: var(--line-height-single);
  font-weight: var(--font-weight-overline); letter-spacing: var(--letter-spacing-overline);
}

/* Тёмная плашка-надпись над крупным заголовком (фон — neutral-900, отдельного токена тёмного фона нет) */
.tag-dark {
  align-self: flex-start;
  padding: var(--space-2-5) var(--space-4); border-radius: var(--radius-pill);
  background: var(--color-text); color: var(--color-accent);
  font-size: var(--font-size-overline); line-height: var(--line-height-single);
  font-weight: var(--font-weight-overline); letter-spacing: var(--letter-spacing-overline);
}

/* Аватар с инициалами (один цвет для всех — tokens-audit, раздел 5) */
.avatar {
  width: var(--size-avatar); height: var(--size-avatar); flex: none; border-radius: var(--radius-pill);
  display: grid; place-items: center; background: var(--color-avatar-bg); color: var(--color-avatar-text);
  font-size: var(--font-size-helper); line-height: var(--line-height-single); font-weight: var(--font-weight-h4);
}

/* Круг с иконкой рядом с текстом */
.icon-disc {
  width: var(--size-icon-tile); height: var(--size-icon-tile); flex: none; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--color-bg-surface); border: var(--border-width-field) solid var(--color-border-dashed);
}

/* «Пилюля» с жёлтой плиткой: ЗАПИСАТЬСЯ / ВЫБРАТЬ ВРЕМЯ */
.pill-link {
  align-self: flex-start;
  display: inline-flex; align-items: stretch; gap: var(--space-1);
  border-radius: var(--radius-pill); color: var(--color-text); text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-spring);
}
.pill-link:hover { color: var(--color-text); transform: translate(var(--shift-hover), var(--shift-hover-card)); }
.pill-link:active { transform: scale(var(--scale-pressed)); }
.pill-link:focus-visible { outline-color: var(--color-focus-ring-on-brand); outline-offset: var(--focus-ring-offset-button); }
.pill-link__tile {
  width: var(--size-pill-action); height: var(--size-pill-action); border-radius: var(--radius-block);
  background: var(--color-accent); display: grid; place-items: center;
}
.pill-link__label {
  display: flex; align-items: center; height: var(--size-pill-action); padding: 0 var(--space-6);
  border-radius: var(--radius-pill); background: var(--color-bg-muted);
  font-size: var(--font-size-button); line-height: var(--line-height-button);
  font-weight: var(--font-weight-button); letter-spacing: var(--letter-spacing-button);
  text-transform: uppercase;
}

/* Контурная кнопка на коралле: лендинг («Войти» в hero), З5 («Добавить в календарь», «На главную»); работает и для <button> */
.btn-outline-brand {
  display: inline-flex; align-items: center; gap: var(--space-2); height: var(--size-pill-action); padding: 0 var(--space-6);
  border-radius: var(--radius-pill); border: var(--border-width-button) solid var(--color-border-ink); background: transparent;
  color: var(--color-text); text-decoration: none; text-transform: uppercase; cursor: pointer;
  font-family: var(--font-text); font-size: var(--font-size-button); line-height: var(--line-height-button);
  font-weight: var(--font-weight-button); letter-spacing: var(--letter-spacing-button);
  transition: background-color var(--duration-instant) var(--ease-standard);
}
.btn-outline-brand:hover { background: var(--color-bg-muted); color: var(--color-text); }
.btn-outline-brand:focus-visible { outline-offset: var(--focus-ring-offset-button); }
.btn-outline-brand:disabled { cursor: default; color: var(--color-text-description); border-color: var(--color-text-description); }
.btn-outline-brand:disabled:hover { background: transparent; }

/* Коралловая панель */
.brand-wrap { padding: var(--space-4); background: var(--color-bg-page); }
.brand-panel {
  /* линия на коралле — rgba(30,25,20,.3) из прототипа: цвет из токена, прозрачность — числом */
  --brand-divider: color-mix(in srgb, var(--color-border-ink) 30%, transparent);
  background: var(--color-bg-brand); border-radius: var(--radius-hero);
}
.brand-panel :focus-visible { outline-color: var(--color-focus-ring-on-brand); }

/* Список преимуществ на коралле: круг с иконкой и жирная подпись */
.brand-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.brand-list li { display: flex; align-items: center; gap: var(--space-3); }
.brand-list .icon-disc { background: var(--color-bg-muted); border: 0; }
.brand-list span:last-child { font-size: var(--font-size-h4); line-height: var(--line-height-h4); font-weight: var(--font-weight-h4); }

/* ---------- 3D-иллюстрации ---------- */
.illu {
  --illu-plate: rotateX(58deg) rotateZ(-45deg);
  position: relative;
}
.illu__cell { background: var(--color-bg-page); border: var(--border-width-button) solid var(--color-border-ink); border-radius: var(--radius-badge); }
.illu__cell--busy { background: repeating-linear-gradient(135deg, var(--color-bg-muted) 0 4px, var(--color-border) 4px 8px); }
.illu__cell--picked { background: var(--color-button-primary-bg); color: var(--color-text-on-brand); display: grid; place-items: center; }
.illu__cell--ok { background: var(--color-success); color: var(--color-text-on-brand); display: grid; place-items: center; }
.illu__cell--white { background: var(--color-bg-surface); }
.illu__sticker {
  position: absolute; display: grid; place-items: center;
  border: var(--border-width-ink) solid var(--color-border-ink); box-shadow: var(--shadow-raised);
}
/* Стикер «✓ 14:00»; положение задаёт страница */
.illu__sticker--time {
  display: flex; align-items: center; gap: var(--space-2-5);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-field); background: var(--color-bg-surface);
  font-family: var(--font-display); font-size: var(--font-size-h3); line-height: var(--line-height-single); font-weight: var(--font-weight-display-xl);
  transform: rotate(6deg);
}
.illu__check {
  width: var(--size-marker); height: var(--size-marker); border-radius: var(--radius-pill); background: var(--color-success);
  border: var(--border-width-button) solid var(--color-border-ink); color: var(--color-text-on-brand);
  display: grid; place-items: center;
}