/* Візуальна система Mini App (46-miniapp-visual-system.md): кольори лише з теми
   Telegram через токени нижче; жодних зовнішніх ресурсів (CSP: style-src 'self'). */

:root {
  --bg: var(--tg-theme-secondary-bg-color, var(--tg-theme-bg-color, #efeff4));
  --surface: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #ffffff));
  --text: var(--tg-theme-text-color, #111114);
  --hint: var(--tg-theme-hint-color, #63636a);
  --link: var(--tg-theme-link-color, #1d6fb8);
  --accent: var(--tg-theme-button-color, #1d6fb8);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --danger: var(--tg-theme-destructive-text-color, #c0271e);
  --separator: var(--tg-theme-section-separator-color, var(--tg-theme-hint-color, #e3e3e8));
  --qr-bg: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.35;
}

/* Відступи сторінки має лише #view; безпечна зона — знизу й з боків. Висота не менша за
   вікно Mini App, тож `actions` (нижче) стоять біля нижнього краю (49). */
#view {
  display: flex;
  flex-direction: column;
  min-height: var(--tg-viewport-stable-height, 100vh);
  padding: 16px;
  padding-bottom: calc(
    16px + var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px)
  );
  padding-left: calc(
    16px + var(--tg-safe-area-inset-left, 0px) + var(--tg-content-safe-area-inset-left, 0px)
  );
  padding-right: calc(
    16px + var(--tg-safe-area-inset-right, 0px) + var(--tg-content-safe-area-inset-right, 0px)
  );
  color: var(--text);
}

[aria-busy="true"] { opacity: 0.5; }

/* Каркас екрана */
.screen { display: flex; flex-direction: column; flex-grow: 1; gap: 20px; }
.screen-title { margin: 0; font-size: 24px; font-weight: 700; }
.section { display: flex; flex-direction: column; gap: 8px; }
.screen > form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.screen > form:last-child { flex-grow: 1; }
.section-title {
  margin: 0 12px;
  color: var(--hint);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Мінімальна висота інтерактивних елементів */
.btn, .chip, .check, .row, .row-action, .field, .back-link, .tile { min-height: 44px; }

.back-link {
  display: flex;
  align-items: center;
  color: var(--link);
  text-decoration: none;
  cursor: pointer;
}
.has-native-back .back-link { display: none; }

/* Картка й рядки */
.card {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface);
  list-style: none;
}
.card > * + * { border-top: 1px solid var(--separator); }

.check, .field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  color: var(--text);
  text-decoration: none;
}

/* Рядок: назва й підрядок ліворуч, дія чи лічильник праворуч (47) */
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  min-height: 52px;
  padding: 8px 16px;
  color: var(--text);
  text-decoration: none;
}
/* Перехід — це `a[data-view]` без `href`: вказівник йому дає лише це правило (54). */
[data-view] { cursor: pointer; }
.row > * { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.row > .row-action, .row > .row-count { grid-column: 2; grid-row: 1 / span 2; }
/* Стрілка рядка лічильника — третя (неявна) колонка; рядки без неї її не мають. */
.row > .icon { grid-column: 3; grid-row: 1 / span 2; }
.row-action { display: flex; align-items: center; margin: 0; }
.row-sub { color: var(--hint); font-size: 13px; }
/* Посилання переходу — текстова частина рядка списку (56) */
.row-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}
.row-link .row-title { color: var(--link); }
.row-link:active { opacity: 0.6; }
.row-count { color: var(--hint); font-variant-numeric: tabular-nums; }
/* Готовий QR: назви й термін під зображенням у тій самій картці */
.card > .row-title, .card > .row-sub { margin: 0; padding: 8px 16px; text-align: center; }
.card > .row-sub { padding-top: 0; border-top: 0; }

/* Плитки головної (47) */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  min-height: 132px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.tile .row-title { font-size: 17px; font-weight: 600; }
.tile-primary { background: var(--accent); color: var(--accent-text); }
.tile-primary .row-title { color: var(--accent-text); }
.tile-primary .row-sub { color: var(--accent-text); }

/* Рядок вибору: назва ліворуч, круглий індикатор праворуч (порядок міняє `order`).
   Системне поле сховано візуально, але лишається в DOM і отримує фокус; стан показує
   сусідній селектор від :checked (49). */
.check { position: relative; justify-content: flex-start; min-height: 52px; cursor: pointer; }
.check-label { flex-grow: 1; min-width: 0; overflow-wrap: anywhere; }
.check-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  order: 1;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 2px solid var(--hint);
  border-radius: 50%;
  background: transparent;
  color: var(--accent-text);
}
.check-mark .icon { opacity: 0; }
:checked + .check-mark {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
:checked + .check-mark .icon { opacity: 1; }
:focus-visible + .check-mark { outline: 2px solid var(--accent); outline-offset: 2px; }
.field input {
  width: 96px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--separator);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: right;
}
input { accent-color: var(--accent); }
.check input, .chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

/* Варіанти (радіо): три рівні колонки, ряди зліва направо (шість днів — два ряди по три);
   вигляд несе лише `chip-label` */
.chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.chip { position: relative; display: flex; min-height: 48px; cursor: pointer; }
.chip-label {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 4px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  white-space: nowrap;
}
:checked + .chip-label { background: var(--accent); color: var(--accent-text); }
:focus-visible + .chip-label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Кнопки */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.row-action .btn {
  width: auto;
  min-height: 44px;
  background: transparent;
  font-size: 15px;
}
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-secondary { background: var(--surface); color: var(--link); }
.btn-danger { background: var(--surface); color: var(--danger); }
/* Посилання-кнопка без тла; стоїть після `.btn`, щоб перемогти його (однакова
   специфічність); тому правила з `.btn` усередині `.actions` тут немає (49). */
.btn-link {
  min-height: 44px;
  background: transparent;
  color: var(--link);
  font-size: 15px;
}
button:disabled { opacity: 0.5; cursor: default; }
.actions { display: flex; flex-direction: column; gap: 8px; }
.actions form { margin: 0; }
/* Дії притиснуті донизу, коли вмісту менше за вікно (49) */
.screen > .actions:last-child,
.screen > form:last-child > .actions:last-child { margin-top: auto; }

/* Повідомлення й тексти */
.notice {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--separator);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
}
.notice-error { border-color: var(--danger); color: var(--danger); }
#view > .notice { margin-bottom: 12px; }
#notice {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 8px 16px 0;
  padding: 12px 16px;
  border: 1px solid var(--danger);
  border-radius: 10px;
  background: var(--surface);
  color: var(--danger);
  font-size: 14px;
}
.empty { margin: 0; padding: 16px; color: var(--hint); font-size: 15px; text-align: center; }
.hint { margin: 0; color: var(--hint); font-size: 13px; overflow-wrap: anywhere; }
.hint-center { font-size: 14px; text-align: center; }
.screen-title + .hint { font-size: 15px; }
.section > .hint { padding: 0 12px; }
.url { margin: 0; color: var(--text); font-size: 14px; overflow-wrap: anywhere; user-select: text; }

.qr {
  display: block;
  box-sizing: content-box;
  width: 240px;
  height: 240px;
  margin: 0 auto;
  padding: 12px;
  background: var(--qr-bg);
  image-rendering: pixelated;
}

/* Іконки (49): розмір і колір — лише тут, у розмітці їх немає */
.icon { display: block; flex-shrink: 0; width: 24px; height: 24px; }
.tile .icon { width: 26px; height: 26px; color: var(--accent); }
.tile-primary .icon { color: var(--accent-text); }
.row .icon { width: 18px; height: 18px; color: var(--hint); }
.hero-icon .icon { width: 34px; height: 34px; }
.check-mark .icon { width: 16px; height: 16px; }

/* Готове запрошення: круг із галочкою, заголовок і пояснення по центру */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.hero .screen-title { font-size: 22px; }
.hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
}

/* Готовий QR: картка по центру, без ліній між зображенням і підписами */
.qr-card { padding: 24px 16px; text-align: center; }
.qr-card > * { border-top: 0; }
.qr-card .row-title { font-size: 18px; font-weight: 600; }
.qr-card .row-sub { font-size: 15px; }

[hidden] { display: none; }