/* Клієнтська сторінка. Мобільна за замовчуванням — її відкривають з телефона
   біля увімкненої консолі. Легка: без шрифтів ззовні, без бібліотек, без картинок.

   Кольори, кеглі й відступи — з tokens.css. Літералів тут немає. */

@import url("tokens.css");

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font: var(--text-base) / var(--leading-normal) var(--font);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-10);
}

/* Пластина табло: тонка рамка й лінійка згори замість круглої картки з тінню. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow);
}

h1 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.sub { color: var(--fg-muted); margin: 0 0 var(--space-6); }
/* На сторінках без дії під текстом (заглушка, ненайдений маршрут) нижній відступ
   абзацу лишав би в картці порожню смугу заввишки з рядок. */
.card > .sub:last-child { margin-bottom: 0; }

/* Кнопка — велика: телефон тримають однією рукою, дивлячись на телевізор */
.btn {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-fg);
  font: inherit;
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }

.steps { margin: 0; padding-inline-start: var(--space-6); }
.steps li { margin-bottom: var(--space-3); }
.steps li:last-child { margin-bottom: 0; }

/* ── Пластина коду ─────────────────────────────────────────────────────────
   Шість цифр — головний об'єкт сторінки, тому вони отримують найбільший кегль,
   бурштин і власну поверхню.

   Одне поле, а не шість: на телефоні вставка коду, backspace і автозаповнення
   в шести окремих інпутах ламаються. Ритм комірок дають засічки під цифрами —
   вони читаються як слоти, але не вдають те, чим не є. */

.code-slot {
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.code {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 0 0 var(--space-2);
  border: 0;
  border-bottom: 2px solid var(--line);
  background: transparent;
  color: var(--accent);
  font: 600 var(--text-2xl) / 1.1 var(--font-mono);
  font-variant-numeric: var(--tnum);
  letter-spacing: 0.24em;
  text-indent: 0.24em;   /* компенсує трекінг останнього знака, щоб рядок стояв по центру */
  text-align: center;
  direction: ltr;
  -webkit-appearance: none;
  transition: border-color var(--dur) var(--ease);
}

.code::placeholder { color: var(--line); }
.code:hover { border-bottom-color: var(--fg-dim); }
.code:focus { border-bottom-color: var(--accent); }

.code-ticks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.code-ticks i { display: block; height: 2px; background: var(--line); }

/* Помилка. Колір — не єдиний канал: контейнер несе role="alert" у шаблоні,
   і текст сам називає, що виправити. */
.err {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--bad-bg);
  color: var(--bad);
  font-weight: 500;
}

.err::before { content: "!"; font-weight: 700; }

.warn {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  background: var(--accent-bg);
  border-radius: var(--radius);
}

.meta {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  margin: var(--space-4) 0 0;
  font-variant-numeric: var(--tnum);
}

.mark {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.mark.ok  { background: var(--ok-bg);  color: var(--ok); }
.mark.bad { background: var(--bad-bg); color: var(--bad); }

/* Стан очікування. Обертання — підсилення, не носій змісту: текст поруч
   каже те саме, тому при prefers-reduced-motion воно просто зупиняється. */
/* Очікування: три пластини табло, що перекидаються по черзі. Обертання кола
   тут читалось би як завантаження сторінки; тут же йде операція на консолі. */
.spin {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.spin i {
  width: 14px;
  height: 20px;
  background: var(--line);
  border-radius: 1px;
  animation: flap 1.2s var(--ease) infinite;
}

.spin i:nth-child(2) { animation-delay: 0.15s; }
.spin i:nth-child(3) { animation-delay: 0.3s; }

@keyframes flap {
  0%, 60%, 100% { background: var(--line); transform: scaleY(1); }
  30% { background: var(--accent); transform: scaleY(0.55); }
}

.help {
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}

.help summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--accent);
  font-weight: 500;
}

.help p { color: var(--fg-muted); font-size: var(--text-sm); }

/* Схематичний скрін консолі — щоб не тягнути картинку на повільному з'єднанні */
.shot {
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--shot-from), var(--shot-to));
  color: var(--shot-fg);
  text-align: center;
}

.shot-qr {
  width: 92px;
  height: 92px;
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(0deg,  var(--shot-fg) 0 6px, var(--shot-to) 6px 12px),
    repeating-linear-gradient(90deg, var(--shot-fg) 0 6px, var(--shot-to) 6px 12px);
  background-blend-mode: difference;
}

.shot-code {
  font: 600 var(--text-md) / 1 var(--font-mono);
  letter-spacing: 0.18em;
  direction: ltr;
}

.shot-cap { font-size: var(--text-xs); opacity: 0.75; margin-top: var(--space-2); }

/* ── Корінець перепустки ───────────────────────────────────────────────────
   Смуга «видав» угорі: ім'я реселлера ліворуч, публічний код лінка праворуч.
   Це те, що робить сторінку іменним квитком, а не анонімною формою, і те, що
   відрізняє її від сторінки виробника консолі. */

.rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--line);
}

.rail-id { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }

.rail-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}

.rail-v {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-side { display: flex; align-items: center; gap: var(--space-3); }

/* Публічний код — те, що клієнт називає в переписці. Завжди зліва направо. */
.rail-code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  direction: ltr;
  white-space: nowrap;
}

/* Перемикач мови. Обов'язковий тап для арабомовного клієнта, тому повна
   ціль дотику, а не декоративна пігулка. */
.langs { display: flex; gap: var(--space-1); }

.langs a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--fg-muted);
  font-size: var(--text-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.langs a:hover { color: var(--fg); background: var(--surface-2); }

.langs a.on {
  color: var(--fg);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Нижній рядок — умови видачі. Моноширинний і розріджений: це напис на квитку,
   а не абзац тексту. */
.foot {
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  margin: var(--space-6) 0 0;
}

/* ── Арабська й трекінг ────────────────────────────────────────────────────
   Арабське письмо курсивне: літери з'єднуються, і будь-який letter-spacing
   рве в'язь на окремі знаки. Моноширинна латиниця арабських гліфів не має
   взагалі, тому текст падає у системний запасний шрифт.

   Тому все, що в латиниці має трекінг і моноширину, у RTL їх втрачає.
   Виняток — `.rail-code` і `.code`: їхній вміст латинський навіть на
   арабській сторінці, і саме там моноширина потрібна. */

[dir="rtl"] :is(.foot, .btn, .rail-k, .meta, .shot-cap) {
  font-family: var(--font);
  letter-spacing: normal;
  text-transform: none;
}