/* Детали дизайн-системы на сайте (новая витрина, часть 1; спецификация docs/roadmap/specs/02-design-system.md,
   раздел 3) — перенесены из эталона docs/design/reference/components.css по мере надобности витрины.
   Размеры — только токены (tokens.css), цвета — только роли темы: это стережёт tests/design/test_tokens_guard.py
   и tests/form/test_no_colour_hides_outside_the_theme.py. Прежние экраны (app.css) переезжают на эти детали
   в своих частях. */

/* Общее правило кнопок прежних экранов (`button` в app.css: золотая заливка, тень, отступы, ширина во
   всю строку) деталям эталона не подходит — они начинают с чистого листа. */
.icon-btn, .menu__item, .segments__item, .context-card, .btn {
  width: auto; min-height: 0; margin: 0; box-shadow: none; background-image: none;
  font: inherit; letter-spacing: normal;
}

/* ── Кнопки ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-lg); padding: 0 var(--space-5); border-radius: var(--radius-md);
  border: 1px solid transparent; background: var(--panel); color: var(--ink);
  font-weight: var(--weight-semibold); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Кнопка-значок ────────────────────────────────────────────────────── */
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--icon-button); height: var(--icon-button); padding: 0; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--ink); text-decoration: none; cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease);
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--tint); }
.icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.icon-btn svg { width: var(--icon-lg); height: var(--icon-lg); }
.icon-btn[hidden] { display: none; }
.icon-btn__dot {
  position: absolute; top: var(--space-2); right: var(--space-2); width: var(--space-3); height: var(--space-3);
  /* Точка — роль «терракотовый» темы: в «Оформлении» она и подписана «точкой о непрочитанном». */
  border-radius: var(--radius-pill); background: var(--terra); border: 2px solid var(--page);
}

/* ── Выпадающие меню (Р21: вниз к ближнему краю) ──────────────────────── */
.menu {
  z-index: var(--z-dropdown); min-width: calc(var(--space-8) * 4); max-width: min(var(--menu-max), calc(100vw - var(--space-4)));
  padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-2); overflow: auto;
  font-family: var(--font-text); font-size: var(--text-md); line-height: var(--leading-text);
  animation: menu-in var(--motion-base) var(--ease);
}
.menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(calc(var(--space-1) * -1)); } }
.menu__head { display: grid; padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); }
.menu__head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control-md);
  padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.menu__item:hover, .menu__item:focus-visible, .menu__item[aria-current="page"] { background: var(--tint); }
.menu__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.menu__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__sub { display: block; color: var(--muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__count {
  min-width: var(--space-5); height: var(--space-5); padding: 0 var(--space-2); border-radius: var(--radius-pill);
  background: var(--err); color: var(--on-accent); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  display: inline-flex; align-items: center; justify-content: center;
}
.menu__sep { height: 1px; margin: var(--space-2) 0; background: var(--border); }

/* Дополнения пунктов меню: две строки, значок, значение. */
.menu__text { display: grid; min-width: 0; flex: 1; line-height: var(--leading-title); }
.menu__item:has(.menu__text) { min-height: var(--control-lg); }
.menu__emoji { font-size: var(--title-sm); flex: none; }
.menu__value { font-weight: var(--weight-semibold); white-space: nowrap; }
.menu__item svg { width: var(--icon-md); height: var(--icon-md); color: var(--gold); flex: none; }

/* ── Вкладки (сегменты) ───────────────────────────────────────────────── */
.segments {
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
  display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-md);
  background: var(--cream); min-height: var(--control-lg);
}
.segments__item {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-md); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer;
  transition: background-color var(--motion-base) var(--ease), color var(--motion-base) var(--ease);
}
.segments__item:hover { background: var(--tint); }
.segments__item[aria-pressed="true"] { background: var(--panel); color: var(--accent); box-shadow: var(--shadow-1); }
.segments__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Карточки второй строки: заведение и кошелёк ─────────────────────── */
.context-card {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0; height: var(--context-card-h);
  padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--panel); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.context-card:hover, .context-card[aria-expanded="true"] { border-color: var(--gold2); box-shadow: var(--shadow-1); }
.context-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.context-card__logo {
  width: calc(var(--space-6) + var(--space-2)); height: calc(var(--space-6) + var(--space-2)); flex: none;
  border-radius: var(--radius-pill); background: var(--cream); object-fit: contain; padding: var(--space-1);
}
.context-card__text { display: grid; min-width: 0; flex: 1; line-height: var(--leading-title); }
.context-card__title { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-card__sub { color: var(--muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-card__chevron { width: var(--icon-md); height: var(--icon-md); color: var(--muted); flex: none; }
.context-card--venue .context-card__sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.context-card--wallet { background: linear-gradient(135deg, var(--panel), var(--cream)); }
.context-card--wallet .context-card__emoji { font-size: var(--title-md); flex: none; }
.context-card__unit { font-family: var(--font-text); font-size: var(--text-sm); color: var(--muted); font-weight: var(--weight-regular); }
.context-card--wallet .context-card__title { font-family: var(--font-title); font-size: var(--title-sm); font-weight: var(--weight-medium); }
.context-card--wallet .context-card__text { justify-items: center; text-align: center; }
.context-card--wallet .context-card__title, .context-card--wallet .context-card__sub { max-width: 100%; }
.context-card--wallet .context-card__sub { font-size: var(--text-xs); }
.context-card--login .context-card__text { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.context-card--login .context-card__text::before { content: "🎁"; }
.context-card--login .context-card__title { white-space: normal; font-family: var(--font-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
/* Узкая карточка кошелька: название и время — двумя строками, а не обрезкой посередине слова. */
@media (max-width: 1099px) {
  .context-card--wallet .context-card__sub { display: flex; flex-direction: column; align-items: center; }
  .context-card--wallet .context-card__sub > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .context-card--wallet .context-card__dot { display: none; }
}

/* ── Шторка снизу (телефон) ──────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-cookie); background: var(--veil);
  display: grid; place-items: end stretch; animation: fade-in var(--motion-base) var(--ease);
}
@keyframes fade-in { from { opacity: 0; } }
.drawer {
  max-height: 92vh; overflow: auto; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-3);
  padding-bottom: env(safe-area-inset-bottom); animation: sheet-in var(--motion-slow) var(--ease);
  font-family: var(--font-text); font-size: var(--text-md); line-height: var(--leading-text);
}
@keyframes sheet-in { from { transform: translateY(100%); } }
.drawer__grip { width: var(--space-7); height: var(--space-1); margin: var(--space-2) auto; border-radius: var(--radius-pill); background: var(--border); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-5); }
.drawer__head h3 { margin: 0; font-family: var(--font-title); font-size: var(--title-sm); font-weight: var(--weight-medium); line-height: var(--leading-title); }
.drawer__body { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.menu.menu--in-sheet { position: static !important; width: 100%; max-width: none; max-height: none; padding: 0; border: 0; box-shadow: none; animation: none; }
.menu--in-sheet .menu__head { display: none; }

/* Слой выпадающих меню — вне потока страницы; своего слоя наложения у него нет: каждое меню встаёт
   своим `--z-dropdown`, шторка — поверх всего. */
.layer { display: contents; }

/* ── Телефон: всё, во что тычут пальцем, — не меньше --tap ───────────── */
@media (max-width: 767px) {
  .icon-btn { width: var(--tap); height: var(--tap); }
  .menu__item { min-height: var(--tap); }
}

@media (max-width: 767px) {
  .segments__item { min-height: var(--tap); }
}

@media (prefers-reduced-motion: reduce) {
  .menu, .overlay, .drawer { animation: none; }
  .icon-btn, .segments__item, .context-card { transition: none; }
}