/* Особистий кабінет «Стейки Карпат» — стилі екранів E1–E7.
   Токени взяті зі скіла steaky-karpat-design (кольори, шрифти, радіуси, тіні,
   моушн). Нічого не вигадано: значення скопійовані один-в-один, щоб кабінет
   виглядав частиною бренду, а не окремим сервісом.
   Мобайл-фьорст: базові правила — для телефона, десктоп отримує лише ширшу
   колонку і трохи більше повітря. */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Golos+Text:wght@400;500;600;700;800&display=swap');

:root {
  --brand-gold: #ffc62d;
  --brand-gold-deep: #f5a623;
  --brand-red: #bc131e;
  --brand-red-deep: #96101a;

  --paper: #f5f5f5;
  --paper-warm: #faf6ee;
  --ink-900: #14110f;
  --ink-700: #3a3532;
  --ink-500: #6b625c;
  --ink-400: #938b85;
  --line-200: #e6e2dc;
  --line-300: #d6d0c8;
  --white: #ffffff;

  --success: #2f8f4e;
  --success-soft: #e5f3ea;
  --warning: #e8920c;
  --warning-soft: #fdf1dc;
  --danger: #bc131e;
  --danger-soft: #fbe6e7;
  --info: #2b6cb0;
  --info-soft: #e6eff8;

  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(20, 17, 15, .06);
  --shadow-sm: 0 2px 8px rgba(20, 17, 15, .08);
  --shadow-md: 0 8px 22px rgba(20, 17, 15, .10);
  --shadow-red: 0 10px 26px rgba(188, 19, 30, .28);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --focus-ring: 0 0 0 3px rgba(188, 19, 30, .28);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-red); text-decoration: none; }

/* --- Каркас --------------------------------------------------------------- */

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px 96px;      /* знизу — місце під панель навігації */
}

.wrap--auth { padding-bottom: 32px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--line-200);
}

.topbar__in {
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar__logo { width: 38px; height: 38px; border-radius: var(--radius-pill); display: block; }

.topbar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}

.topbar__sub { font-size: 13px; color: var(--ink-500); }

.topbar__back {
  margin-left: auto;
  font-size: 14px;
  color: var(--ink-500);
  white-space: nowrap;
}

/* --- Типографіка ---------------------------------------------------------- */

.h1, .h2, .h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin: 0 0 12px;
  font-weight: 600;
}

.h1 { font-size: 27px; }
.h2 { font-size: 21px; }
.h3 { font-size: 18px; }

.eyebrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin: 0 0 8px;
}

.muted { color: var(--ink-500); }
.small { font-size: 14px; }
.caption { font-size: 13px; color: var(--ink-500); }
.strong { font-weight: 600; }
.center { text-align: center; }

.section-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--ink-500);
  margin: 24px 0 10px;
}

/* --- Картки --------------------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  margin-bottom: 12px;
}

.card--flat { box-shadow: none; }
.card--warm { background: var(--paper-warm); }
.card--tap { display: block; color: inherit; transition: transform var(--ease) 200ms, box-shadow var(--ease) 200ms; }
.card--tap:active { transform: scale(.995); }

@media (hover: hover) {
  .card--tap:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

.row { display: flex; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }
.row--top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 12px; }

/* --- Кнопки --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  cursor: pointer;
  transition: filter 120ms var(--ease), transform 120ms var(--ease);
}

.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn--primary { background: var(--brand-red); color: #fff; box-shadow: var(--shadow-red); }
.btn--primary:hover { filter: brightness(.93); }

.btn--gold { background: var(--brand-gold); color: var(--ink-900); }
.btn--gold:hover { filter: brightness(.95); }

.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border: 2px solid var(--line-300);
}

/* Ряд кнопок-дій усередині повідомлення (мобайл — стовпчиком). */
.btnrow { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
@media (min-width: 480px) { .btnrow { flex-direction: row; } }
.btn--ghost:hover { border-color: var(--ink-400); }

.btn--quiet {
  background: transparent;
  color: var(--ink-500);
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 500;
  min-height: 44px;
}

.btn--sm { min-height: 40px; font-size: 14px; width: auto; padding: 0 16px; }
.btn-row { display: flex; gap: 8px; }
.btn-row .btn { width: auto; flex: 1; }

/* --- Форми ---------------------------------------------------------------- */

.field { margin-bottom: 16px; }

.label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 6px;
}

.input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 17px;               /* < 16px змушує iOS зумити сторінку при фокусі */
  color: var(--ink-900);
  background: var(--white);
  border: 1px solid var(--line-300);
  border-radius: var(--radius-md);
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}

.input:focus { outline: 0; border-color: var(--brand-red); box-shadow: var(--focus-ring); }

.input--code {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: .32em;
  text-align: center;
  padding-left: 26px;            /* компенсація трекінгу, щоб цифри стояли по центру */
}

.hint { font-size: 13px; color: var(--ink-500); margin-top: 6px; }
.hint a { color: var(--brand-red); }

/* Тумблер способу входу (E1): два рівноцінні сегменти-посилання. Саме
   посилання, не JS-таби — екран входу мусить працювати без скриптів.
   Активний сегмент = біла «кнопка» на теплому тлі, як перемикач. */
.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 4px 0 20px;
  background: var(--paper-warm);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-pill);
}

.seg__item {
  flex: 1;
  min-height: 44px;              /* повноцінна ціль для пальця */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-500);
  border-radius: var(--radius-pill);
  transition: color 120ms var(--ease), background 120ms var(--ease),
              box-shadow 120ms var(--ease);
}

.seg__item:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

.seg__item--on {
  background: var(--white);
  color: var(--brand-red);
  box-shadow: var(--shadow-sm);
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-700);
  cursor: pointer;
}

.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand-red); flex: none; }

/* --- Бейджі й повідомлення ------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge--ok { background: var(--success-soft); color: var(--success); }
.badge--wait { background: var(--warning-soft); color: #a5670a; }
.badge--gift { background: #fdf3d8; color: #8a6206; }
.badge--off { background: #f0ede9; color: var(--ink-500); }
.badge--gold { background: var(--brand-gold); color: var(--ink-900); }
/* Позначка м'якого запуску в шапці. Свідомо тиха: це чесність, а не акція —
   вона не повинна перетягувати увагу з назви екрана. */
.badge--beta {
  background: var(--paper-warm);
  color: var(--ink-500);
  border: 1px solid var(--line-300);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1px 7px;
  vertical-align: middle;
  margin-left: 6px;
}

.note {
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 12px;
}

.note--error { background: var(--danger-soft); color: var(--brand-red-deep); }
.note--ok { background: var(--success-soft); color: #1f6b39; }
.note--info { background: var(--info-soft); color: #1f4e80; }

/* --- Банер e-mail --------------------------------------------------------- */

.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper-warm);
  border: 1px solid #eadfc6;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 14px;
}

.banner__x {
  background: none;
  border: 0;
  color: var(--ink-400);
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}

/* --- Замовлення ----------------------------------------------------------- */

.order__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.order__num {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
}

.order__sum { font-family: var(--font-display); font-size: 19px; font-weight: 600; white-space: nowrap; }
.order__date { font-size: 13px; color: var(--ink-500); }
.order__items { font-size: 14px; color: var(--ink-700); margin: 8px 0 0; }
.order__more { color: var(--ink-400); }

.line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line-200);
}

.line:first-child { border-top: 0; }

.line__pic {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--paper-warm);
  border: 1px solid var(--line-200);
}

.line__pic--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-400);
  text-transform: uppercase;
}

.line__name { font-weight: 500; font-size: 15px; line-height: 1.3; }
.line__meta { font-size: 13px; color: var(--ink-500); margin-top: 4px; }
.line__sum { margin-left: auto; text-align: right; white-space: nowrap; font-weight: 600; font-size: 15px; }

.line__pick { display: flex; align-items: flex-start; padding-top: 15px; }
.line__pick input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand-red); }
/* «Улюблене»: рядок у два поверхи — зверху фото з назвою, знизу «замовляли
   N разів» + кількість + галочка на всю ширину картки. Три елементи стають
   в один ряд лише так: у колонці поруч із фото на них бракує ширини. */
.line--fav { flex-direction: column; align-items: stretch; gap: 8px; }
.line__head { display: flex; align-items: center; gap: 10px; }
.line__pickrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Дата з лічильником стискається першою, але не в нуль: коли не влазить —
   контроли з'їжджають на свій рядок, а не ріжуть текст. */
.line__pickrow .line__meta { margin-top: 0; flex: 1 1 130px; min-width: 130px; }

/* Галочка остання в рядку і притиснута до правого краю: підсумок вибору.
   Поле дотику ширше за саму рамку — палець влучає, не цілячись. */
.line__pick--end {
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  padding: 0 2px 0 10px;
  flex: none;
  touch-action: manipulation;
  cursor: pointer;
}

/* Довгі рядки з CRM (адреса доставки) не мають перетворювати картку на полотно */
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid var(--ink-900);
  margin-top: 12px;
  padding-top: 12px;
}

.total__val { font-family: var(--font-display); font-size: 24px; font-weight: 700; }

/* --- Менеджер ------------------------------------------------------------- */

.mgr { display: flex; align-items: center; gap: 12px; }

.mgr__ava {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: var(--brand-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.mgr__name { font-weight: 600; }

/* --- Нижня навігація ------------------------------------------------------ */

.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--white);
  border-top: 1px solid var(--line-200);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav__in { max-width: 560px; margin: 0 auto; display: flex; }

.nav__item {
  flex: 1;
  padding: 10px 4px 12px;
  text-align: center;
  color: var(--ink-500);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}

.nav__item--on { color: var(--brand-red); }
.nav__ico { display: block; font-size: 19px; line-height: 1.2; margin-bottom: 2px; }

/* --- Дрібниці ------------------------------------------------------------- */

.list-reset { list-style: none; padding: 0; margin: 0; }

.kv { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line-200); }
.kv:first-child { border-top: 0; }
.kv__k { color: var(--ink-500); font-size: 14px; }
.kv__v { text-align: right; font-weight: 500; word-break: break-word; }

.empty { text-align: center; padding: 48px 16px; color: var(--ink-500); }
.empty__ico { font-family: var(--font-display); font-size: 44px; color: var(--line-300); }

.foot { text-align: center; color: var(--ink-400); font-size: 12px; padding: 24px 0 8px; }

@media (min-width: 640px) {
  .wrap { max-width: 620px; padding-bottom: 40px; }
  .topbar__in { max-width: 620px; }
  .nav__in { max-width: 620px; }
}

/* --- Етап 5: режим «увійти як клієнт», адмінка, політика ------------------ */

/* Постійна жовта смуга режиму перегляду (6.2-бис). Липне до верху, щоб її
   було видно на будь-якій довгій сторінці. */
.impbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--brand-gold);
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  box-shadow: var(--shadow-sm);
}

.impbar__stop {
  border: 1.5px solid var(--ink-900);
  background: none;
  color: var(--ink-900);
  font: inherit;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  cursor: pointer;
}

.foot__link { color: var(--ink-400); text-decoration: underline; }
.foot .foot__link:hover { color: var(--ink-700); }

.foot + .foot { padding-top: 0; }

/* Довгий текст політики: та сама типографіка, трохи щільніша. */
.legal h2 { font-family: var(--font-display); font-size: 18px; margin: 20px 0 6px; text-transform: uppercase; letter-spacing: .02em; }
.legal p, .legal li { font-size: 14px; color: var(--ink-700); line-height: 1.55; }
.legal ul { padding-left: 18px; margin: 6px 0; }

/* Адмінка: службова таблиця стану. */
.sys { width: 100%; border-collapse: collapse; font-size: 13px; }
.sys td { padding: 4px 6px; border-bottom: 1px solid var(--line-200); }
.sys td:last-child { text-align: right; color: var(--ink-500); }
.sys .bad { color: var(--brand-red); font-weight: 700; }

/* Лого в шапці — тепер посилання на магазин: прибираємо синій підклад лінка. */
.topbar__in > a { display: flex; line-height: 0; }

/* Аватар менеджера з Telegram: та сама кругла плашка, але фото. */
.mgr__ava--img { object-fit: cover; background: var(--line-200); }

/* Кількість в «Улюбленому»: компактне поле праворуч у рядку товару. */
.qty-box { flex: none; text-align: center; }
.qty-box__in { width: 64px; min-height: 40px; padding: 4px 6px; text-align: center; font-size: 15px; }
.qty-box__cap { display: block; font-size: 11px; color: var(--ink-400); margin-top: 2px; }

/* Степер кількості «− 1 +» як на сайті: рамка, мінус/плюс червоні. */
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid rgba(188, 19, 30, .45);
  border-radius: var(--radius-md);
  background: var(--white);
  flex: none;
}
.stepper__btn {
  border: 0;
  background: none;
  color: var(--brand-red);
  font-size: 18px;
  font-weight: 700;
  /* 40×44 — палець на телефоні влучає з першого разу (34×40 було замало). */
  width: 40px;
  min-height: 44px;
  cursor: pointer;
  line-height: 1;
  touch-action: manipulation;   /* без паузи на «а раптом подвійний тап» */
  -webkit-user-select: none;
  user-select: none;
}
/* Мінус на одиниці: видно, що впертись нижче нікуди, а не що кнопка мертва. */
.stepper__btn:disabled { color: var(--ink-400); opacity: .45; cursor: default; }
.stepper__in {
  width: 34px;
  border: 0;
  text-align: center;
  font: inherit;
  font-weight: 700;
  color: var(--ink-900);
  background: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper__in::-webkit-outer-spin-button,
.stepper__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__in:focus { outline: none; }
/* Сірий степер = рядок НЕ поїде менеджеру. Разом із порожньою галочкою це
   дає людині впевненість, що зайвого в заявці не буде: видно числом, а не
   лише квадратиком. «+» лишається червоним — це запрошення додати. */
/* «Показати ще» — тиха кнопка під списком, не конкурує з «Передати заявку»,
   але з рамкою: без неї на телефоні не видно, що це можна натиснути. */
.fav-more { display: flex; justify-content: center; margin: 0 0 12px; }
.fav-more .btn {
  min-width: 60%;
  border: 1px solid var(--line-200);
  background: var(--white);
  color: var(--ink-700);
}
/* Межа «мої товари → пропозиції магазину» всередині того самого списку. */
.fav-more__title { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-200); }

.stepper--off { border-color: var(--line-200); }
.stepper--off .stepper__in { color: var(--ink-400); }
.stepper--off [data-minus] { color: var(--ink-400); }

/* --- Доставка: плашка «де моя посилка» ------------------------------------
   Головний привід зайти в кабінет. Тому вона стоїть НАД карткою менеджера і
   вирішує питання клієнта одним поглядом: стан великим кеглем, місто й
   відділення — рядком нижче, номер ТТН — щоб скопіювати в застосунок НП.
   Кольором керує тон стану (`tone` з np_status.py), а не сам текст статусу. */

.track {
  border: 1px solid var(--line-200);
  border-left: 4px solid var(--ink-400);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.track--go   { border-left-color: var(--info); }
.track--act  { border-left-color: var(--brand-gold-deep); background: var(--paper-warm); }
.track--done { border-left-color: var(--success); }
.track--warn { border-left-color: var(--brand-red); }
.track--wait { border-left-color: var(--ink-400); }

.track__state {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
}

.track__where { font-size: 14px; color: var(--ink-700); margin: 4px 0 0; }
.track__meta  { font-size: 12px; color: var(--ink-500); margin: 6px 0 0; }

.track__ttn {
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--ink-700);
  font-weight: 600;
}

/* Копіювання ТТН — саме те, що людина робить руками: переносить номер у
   застосунок Нової Пошти. Кнопка тиха, бо це допоміжна дія. */
.track__copy {
  background: none;
  border: 1px solid var(--line-300);
  border-radius: var(--radius-pill);
  color: var(--ink-500);
  font: inherit;
  font-size: 11px;
  padding: 1px 8px;
  margin-left: 6px;
  cursor: pointer;
}
.track__copy:hover { border-color: var(--ink-400); color: var(--ink-700); }

/* Посилання на сайт НП — свідомо найтихіший елемент плашки. Якщо зробити його
   кнопкою, клієнт піде туди й у кабінет більше не повернеться. */
.track__np { font-size: 12px; color: var(--ink-500); text-decoration: underline; }

/* --- Ритм замовлень (E2) --------------------------------------------------
   Шкала частоти замовлень, підписана рівнями. Кольори — теплова карта: чим
   частіші замовлення, тим гарячіший стовпчик, тож рух ліворуч сам собою
   читається як «гарячіше і краще». Блок компактний свідомо: він не мусить
   відсувати список замовлень за межу першого екрана — стеля 240 px. */

:root {
  /* Теплова шкала: полум'я → жар → іскра → дим → холод. Два верхні тони —
     брендові (червоний і золото), два нижні свідомо холодні й тьмяні. */
  --heat-1: #bc131e;
  --heat-2: #e2621a;
  --heat-3: #ffc62d;
  --heat-4: #b3aca2;
  --heat-5: #8fa0b3;
}

.rhythm { padding: 12px 14px 10px; }

.rhythm__h {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .05em;
  margin: 0;
}

/* Бейдж рівня фарбується тим самим тоном, що й стовпчик — щоб зв'язок
   «мій рівень = мій стовпчик» читався без пояснень. */
.rhythm__badge { color: #fff; gap: 3px; }

/* Піктограма рівня. Кольорове емодзі на кольоровому бейджі читається гірше,
   тож даємо йому власну світлу підкладку. */
.rhythm__ico { font-size: 11px; line-height: 1; }
.rhythm__badge--t1 { background: var(--heat-1); }
.rhythm__badge--t2 { background: var(--heat-2); }
.rhythm__badge--t3 { background: var(--heat-3); color: var(--ink-900); }
.rhythm__badge--t4 { background: var(--heat-4); color: var(--ink-900); }
.rhythm__badge--t5 { background: var(--heat-5); }
/* Рівень ось-ось згасне — бейдж переходить у попереджувальний тон. */
.rhythm__badge--warn { box-shadow: 0 0 0 2px var(--warning-soft); }

.rhythm__lead {
  margin: 4px 0 8px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-900);
}

.rhythm__chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  /* 10 px згори — місце під напис «ви»/«сюди». Без цього на високому
     стовпчику напис вилазив за верх графіка й наїжджав на текст. */
  height: 70px;
  padding-top: 10px;
  box-sizing: border-box;
}

.rhythm__col {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.rhythm__bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  min-height: 3px;
  /* Яскравість — властивість самої шкали, а не позначки «це ви»: найчастіший
     ритм горить на повну, найрідший майже згас. Тому все, що ЛІВОРУЧ від
     клієнта, завжди яскравіше за його стовпчик — туди хочеться рухатись. */
  opacity: var(--glow, .6);
  background: var(--tone, var(--heat-3));
}

.rhythm__col--t1 { --tone: var(--heat-1); --glow: 1;   }
.rhythm__col--t2 { --tone: var(--heat-2); --glow: .88; }
.rhythm__col--t3 { --tone: var(--heat-3); --glow: .74; }
.rhythm__col--t4 { --tone: var(--heat-4); --glow: .58; }
.rhythm__col--t5 { --tone: var(--heat-5); --glow: .44; }

.rhythm__col .rhythm__bar { background: var(--tone, var(--heat-3)); }

/* Свій стовпчик — на повну насиченість, з рамкою в кольорі свого рівня і
   написом «ви». Колір тут не єдина ознака: напис читається і на чорно-білому
   екрані. Темної обводки немає свідомо — вона читалась як помилка друку. */
.rhythm__col--mine .rhythm__bar,
.rhythm__col--target .rhythm__bar {
  position: relative;
  /* Тіло стовпчика ховає промінь у своїх межах. Контур малюємо box-shadow —
     він малюється ПОЗА боксом, тож overflow його не обрізає. */
  overflow: hidden;
  /* Не піднімаємо яскравість до максимуму: інакше стовпчик «Холоду» світився б
     сильніше за «Полум'я», і шкала перестала б кликати вперед. Досить трохи
     насиченості — впізнаваність дає контур. */
  opacity: calc(var(--glow, .6) + .18);
  filter: saturate(1.15);
  /* Статичний контур: тонка світла лінія назовні (щоб не злипався із
     сусідами) і темніший тон свого рівня. У чистому тоні контур зливався б
     із заливкою — найпомітніше на «Димі», де тон і так сірий. */
  box-shadow: 0 0 0 1px var(--white),
              0 0 0 2px color-mix(in srgb, var(--tone, var(--ink-400)) 62%, #14110f);
}

/* Промінь: пряма світла смуга, що раз за разом проходить тілом стовпчика
   знизу вгору. Ядро тепле — біло-жовте, з вузьким жовтим шлейфом по краях;
   чистий білий виглядав як відблиск скла, а не як жар. Рухається лише смуга —
   рамка стоїть на місці. */
.rhythm__beam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  min-height: 15px;
  background: linear-gradient(to top,
              rgba(255, 176, 60, 0),
              rgba(255, 206, 110, .45) 32%,
              rgba(255, 243, 200, .85) 55%,
              rgba(255, 255, 255, .95) 66%,
              rgba(255, 226, 150, .5) 80%,
              rgba(255, 196, 90, 0));
  animation: rhythm-beam 2.6s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes rhythm-beam {
  0%   { transform: translateY(110%);  opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(-160%); opacity: 0; }
}

/* Ціль для тих, хто поза шкалою: те саме, але тихіше — це не теперішній стан
   клієнта, а те, куди йому дійти. */
.rhythm__col--target .rhythm__beam { opacity: .7; }

/* Хто просив систему зменшити рух — отримує статичний стовпчик. */
@media (prefers-reduced-motion: reduce) {
  .rhythm__beam { animation: none; opacity: .35; transform: translateY(-20%); }
}

.rhythm__you {
  position: absolute;
  /* Рівно у поле, зарезервоване padding-ом графіка: напис стоїть НАД
     стовпчиком, на білому, а не поверх кольору й відблиску. */
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-900);
  /* Напис лягає то на білий фон, то на кольоровий стовпчик — світлий ореол
     тримає його читабельним в обох випадках. */
  text-shadow: 0 0 3px var(--white), 0 0 2px var(--white), 0 0 1px var(--white);
}

/* Ритм ще формується або перервався — стовпчик позначений, але приглушений. */
/* Ритм ще формується або перервався — контур є, але тьмяніший. */
.rhythm__col--soft 
.rhythm__col--soft ~ .rhythm__you, .rhythm__col--soft .rhythm__you { color: var(--ink-500); }

/* Зони рівнів = легенда шкали. */
.rhythm__zones { display: flex; gap: 2px; margin: 4px 0 7px; }

.rhythm__zone {
  flex-basis: 0;
  /* Зона мусить вмістити назву рівня, навіть якщо її стовпчики злилися в один
     (так буває з «Полум'ям»: у корзині «до 10 днів» менше 30 людей, і вона
     зливається із сусідньою). Без цього назва обрізалась на «Полу…». */
  min-width: 46px;
  display: flex;
  flex-direction: column;
  text-align: center;
  line-height: 1.15;
  color: var(--ink-400);
  border-top: 2px solid currentColor;
  padding-top: 3px;
  overflow: hidden;
}

.rhythm__zname { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Діапазон у тижнях під назвою — щоб було видно, як рахується рівень
   (вимога власника 04.09.2026). Тижні, а не дні: пороги кратні семи, тож
   переказ точний, і «до 3 тижнів» тримається в голові краще за «до 21 дня». */
.rhythm__zspan {
  font-size: 8px;
  color: var(--ink-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rhythm__zone--t1 { color: var(--heat-1); }
.rhythm__zone--t2 { color: var(--heat-2); }
.rhythm__zone--t3 { color: #c99a12; }   /* золото на білому нечитабельне — темніше */
.rhythm__zone--t4 { color: #8d867c; }
.rhythm__zone--t5 { color: var(--heat-5); }

/* Зона, у якій стоїть клієнт, — жирним: підказка «ось ти», продубльована
   до кольору. */
.rhythm__zone--on .rhythm__zname { font-weight: 700; }

/* Окремого рядка «частіше / рідше» немає свідомо: напрямок уже задають самі
   зони — від Полум'я ліворуч до Холоду праворуч — і теплові кольори. Кожен
   зайвий рядок коштує 16 px, а блок мусить триматись у 240. */

.rhythm__detail { margin: 0; font-size: 14px; line-height: 1.3; color: var(--ink-700); }
.rhythm__sep { color: var(--ink-400); margin: 0 4px; }
.rhythm__hint { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-500); line-height: 1.3; }

/* Попередження про втрату рівня і згадка про вже втрачений — темніші за
   звичайну підказку: це найважливіший рядок у блоці. */
.rhythm__hint--warn,
.rhythm__hint--lost { color: var(--ink-700); font-weight: 500; }

/* Дія в підказці. Вертикальний padding робить зону натискання приблизно
   44 px заввишки, не додаючи висоти самому блоку. */
.rhythm__link {
  display: inline-block;
  padding: 6px 0;
  font-weight: 600;
  color: var(--brand-red);
  white-space: nowrap;
}

/* Вузькі телефони: назви рівнів під стовпчиками стають тіснішими. */
@media (max-width: 379px) {
  .rhythm__tick { font-size: 8px; }
}

/* Найвужчі екрани (≤359 px, iPhone SE першого покоління): порівняння з базою
   переносить рядок і додає 18 px висоти. */
@media (max-width: 359px) {
  .rhythm__base { display: none; }
}