/* Стартовые экраны «Главной» (js/app/home-start.js) и быстрая настройка (js/app/quickstart.js).
   Только токены из tokens.css и классы-образцы app-ui.css: обе темы получаются сами,
   телефон 375 px без прокрутки вбок. */

/* ── гость: экран-обещание ────────────────────────────────────── */
.gs-hero { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5) var(--sp-4); }
.gs-title { font: 600 24px/1.18 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.gs-text { color: var(--ink-2); font-size: 14px; line-height: 1.5; }

/* Карточка-пример подборки: показывает, как выглядит результат */
.gs-sample { display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-block); background: var(--s2); }
.gs-badge { align-self: flex-start; margin-bottom: var(--sp-1); padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.gs-vac { font: 600 15px/1.35 var(--font-ui); letter-spacing: -.01em; overflow-wrap: anywhere; }
.gs-vac-meta { color: var(--ink-2); font: 500 var(--fs-mono) var(--font-mono); }
.gs-vac-why { color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }

.gs-note { color: var(--ink-3); font-size: 12.5px; line-height: 1.45; text-align: center; }
.gs-steps-title { padding-top: var(--sp-1); }
.gs-steps { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0;
  list-style: none; }
.gs-steps li { display: flex; align-items: baseline; gap: var(--sp-3); color: var(--ink-2); font-size: 13.5px; }
.gs-steps li .mono-label { flex: none; color: var(--ink-3); }

/* ── вошёл, но настройку закрыл ───────────────────────────────── */
.gs-setup { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ── очередь на подбор (app/capacity.py): мест меньше, чем людей ── */
.gs-wait { display: flex; flex-direction: column; gap: var(--sp-2); }
.gs-wait-pos { color: var(--ink); font: 600 var(--fs-mono) var(--font-mono); }
.gs-wait .gs-title { font-size: 20px; }

/* ── первые находки ──────────────────────────────────────────── */
.gs-first { display: flex; flex-direction: column; gap: var(--sp-3); }
.gs-picks-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.gs-pick { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--s1); }
.gs-pick-title { font: 600 15px/1.35 var(--font-ui); letter-spacing: -.01em; overflow-wrap: anywhere; }
.gs-pick-emp { color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.gs-pick-meta { color: var(--ink-2); font: 500 var(--fs-mono) var(--font-mono); }
.gs-pick-why { color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
.gs-pick-open { width: 100%; margin-top: var(--sp-2); }
.gs-line { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }

.gs-boost, .gs-empty { display: flex; flex-direction: column; gap: var(--sp-2); }
.gs-boost-title, .gs-empty-title { font: 600 16px/1.3 var(--font-display); letter-spacing: -.01em; }
.gs-boost .btn, .gs-empty .btn { margin-top: var(--sp-1); }

/* ── быстрая настройка «Что ищем» ────────────────────────────── */
.qs { display: flex; flex-direction: column; gap: var(--sp-4); }
.qs-read p { display: flex; align-items: center; gap: var(--sp-2); }
.qs-resume { color: var(--ink-2); font-size: 13.5px; }
.qs-resume b { color: var(--ink); font-weight: 600; }
.qs-box { display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4); border-radius: var(--r-block); background: var(--s2); }
.qs-box.bad { border: 1px solid var(--bad); background: none; }
.qs-box-title { font: 600 16px/1.3 var(--font-ui); letter-spacing: -.01em; }

/* Чипы запросов: переносятся по строкам, нажатый выделен акцентом */
.qs-chips { flex-wrap: wrap; }
.qs-chip { max-width: 100%; min-height: var(--tap); padding: 6px 12px;
  white-space: normal; text-align: left; line-height: 1.3; }
.qs-chip b { flex: none; color: var(--ink-3); font: 600 12px var(--font-mono); }
.qs-chip[aria-pressed="true"] b { color: var(--accent-text); }
.qs-chip[aria-pressed="false"] { border-style: dashed; background: none; color: var(--ink-3); }

.qs-money { display: flex; flex-direction: column; gap: var(--sp-3); }
.qs-more-row { display: flex; justify-content: center; }
.qs-more { min-height: 36px; font-size: 12.5px; color: var(--ink-2); }

@media (max-width: 380px) {
  .gs-title { font-size: 22px; }
  .gs-hero { padding: var(--sp-4); }
}

/* ── подсказка города (js/app/city-picker.js) ───────────────────── */
.city-pick { position: relative; }
.city-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  max-height: 232px; margin: 0; padding: 4px; overflow-y: auto; list-style: none;
  border: 1px solid var(--line); border-radius: var(--r-block); background: var(--s2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
.city-opt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2);
  padding: 8px 10px; border-radius: var(--r-card); cursor: pointer; }
.city-opt[aria-selected="true"], .city-opt:hover { background: var(--s1); }
.city-name { color: var(--ink); font: 500 14px/1.35 var(--font-ui); overflow-wrap: anywhere; }
.city-opt[aria-selected="true"] .city-name { color: var(--accent); }
.city-parent { color: var(--ink-3); font: 500 var(--fs-mono) var(--font-mono); }
.city-empty { padding: 10px; color: var(--ink-3); font-size: 13px; }