/* =============================================================================
   Обсяг і терміни — секція 09.

   Ритм за art-direction §7, переглянуто 2026-09-09. Було: три рівні колонки з
   підсвіченою серединою. Стало: ШКАЛА ОБСЯГУ — шість щаблів від найлегшого до
   найважчого, з індикатором, що росте.

   Чому змінено. Три картки описували тип договору, а відвідувач шукає свою
   задачу, термін і суму. Форма при цьому копіювала SaaS-прайсинг — три
   колонки, підсвічена середина, бейдж «Most projects» — і обіцяла ціни,
   яких тоді в розмітці не було. Розрив між обіцянкою форми і вмістом
   читався як недороблена секція.

   ЦІНИ Є, і це теж рішення. У кожному щаблі стоїть діапазон у доларах —
   нижня і верхня межа, а не «from». «From» називає тільки дно, тому нічого
   не каже тому, хто прикидає бюджет: верхньої межі в нього немає. Дві межі
   разом відповідають на перше питання покупця ще до листування — і тим, кому
   це по кишені, і тим, кому ні.

   Проти сусідів: 08 — світлий асиметричний bento, 11 — світлий split із
   портретом. Тут темна панель і щільний пронумерований реєстр, якого немає
   ні до, ні після.

   Індикатор — та сама мова, що на рейці: доріжка і заливка. Довжину заливки
   рахує CSS із --step і --steps, тому додавання щабля в адмінці перераховує
   всю шкалу саме собою.

   ДВІ ГРУПИ, 2026-09-12. Шість щаблів ішли однією драбиною, і бурштиновий
   індикатор ріс 01→06 — а суми з п'ятого рядка падають: інтеграції вдвічі
   дешевші за систему, місячне партнерство — ще вчетверо. Індикатор казав
   «важче», число казало «дешевше». Справа не в цінах: рядки 05 і 06 просто не
   на тій драбині. Інтеграція чіпляється до будь-чого з перших чотирьох,
   партнерство — це режим роботи, а не розмір проєкту.

   Тому перелік розділений підписом групи, і ранжує тільки перша: 1/4 … 4/4.
   У другій доріжки немає взагалі — місце під неї лишається, щоб колонка
   номерів не з'їхала, але порожня доріжка не малюється: вона читалася б як
   «нуль з чотирьох», тобто як ранг.

   Список при цьому лишається ОДИН. Треки живуть на .levels, рядки беруть їх
   через subgrid; два окремі <ol> знову дали б колонки, пораховані з власного
   вмісту, — той самий розкид у 84px, який цим subgrid і полагодили.
   ============================================================================= */

.levels {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--border-hairline);
}

.level {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "gauge num name"
    "gauge num examples"
    "gauge num price"
    "gauge num timing";
  gap: var(--space-3xs) var(--space-sm);
  align-items: start;
  padding-block: var(--row-pad);
  border-block-end: var(--border-hairline);
}

/* ---- індикатор ---------------------------------------------------------------
   Вертикальна доріжка із заливкою знизу: шкала «росте» разом зі складністю.
   Та сама мова, що на рейці — доріжка і заливка. Довжину заливки рахує CSS із
   --step і --steps, тому доданий в адмінці щабель перераховує всю шкалу сам.

   Висота доріжки СТАЛА, а не на всю висоту рядка. Спершу вона тягнулася по
   рядку — і заливка четвертого щабля виходила майже такою ж, як п'ятого, бо
   рядки різної висоти. Індикатор, який не можна порівняти між рядками, не
   індикатор. Тепер шкала однакова скрізь, і росте тільки заповнення. */
.level__gauge {
  grid-area: gauge;
  position: relative;
  align-self: center;
  inline-size: var(--space-3xs);
  block-size: var(--space-xl);
  border-radius: var(--radius-chip);
  background: var(--surface-hairline-strong);
  overflow: hidden;
}

.level__fill {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: calc(var(--step) / var(--steps) * 100%);
  background: var(--accent);
}

/* Останній щабель драбини заповнений повністю — це кінець шкали, і він
   світиться так само, як остання поділка рейки. Ознаку дає шаблон, а не
   :last-child: останній рядок списку тепер належить другій групі, у якої шкали
   немає. */
.level--peak .level__fill { box-shadow: var(--shadow-lamp-soft); }

/* Поза шкалою — доріжка не малюється, місце під неї лишається. */
.level--offscale .level__gauge { background: none; }

/* ---- підпис групи ------------------------------------------------------------
   Тихий розділювач у переліку, не другий заголовок секції: моно, мікрокегль,
   капс, приглушений колір — рівно те саме рішення, що для груп в архіві послуг
   (.services-index__group-title). Своєї лінійки не має: рядок вище вже закінчено
   волосяною межею, і друга під підписом здвоїла б її.

   ПІДПИС ЖИВЕ ВСЕРЕДИНІ ПЕРШОГО РЯДКА ГРУПИ, 2026-09-14. Раніше це був власний
   <li role="presentation"> між рядками: сітка від нього не страждала, зате
   страждав перелік. Список, у якому частина прямих дітей не пункти списку,
   перевірялки позначають як зламаний, а з ролі presentation виходить, що в
   <ol> лежить вузол, який нічим не є.

   Прибрати роль було не можна — тоді в переліку ставало вісім позицій замість
   шести, і два з них не щаблі. Винести підпис із <ol> теж не можна: він мусить
   лишатися елементом ТІЄЇ САМОЇ сітки, інакше треки терміну й ціни рахуються
   для кожної групи окремо й повертається розкид правих країв, заради якого і
   робився subgrid.

   Тому підпис переїхав у перший <li> групи й став іще однією смугою його
   сітки, на всю ширину (grid-area: label). Колонки при цьому не змінились
   узагалі: рядок і далі бере треки в .levels через subgrid, а нова смуга —
   це рядок, а не колонка. У переліку рівно шість пунктів, усі вони щаблі,
   заголовок лишається заголовком третього рівня в дереві доступності й
   читається перед першим щаблем своєї групи. */

.level--group {
  padding-block-start: var(--space-lg);
  grid-template-areas:
    "label label label"
    "gauge num name"
    "gauge num examples"
    "gauge num price"
    "gauge num timing";
}

/* Перша група стоїть одразу під волосяною межею .levels, і зайве повітря там
   читалося б як провал, а не як розділювач: їй вистачає звичайного поля рядка
   (--row-pad і --space-md — те саме число). */
.level--group:first-child {
  padding-block-start: var(--row-pad);
}

.level__group-title {
  grid-area: label;
  margin: 0;
  /* 4px власного відступу плюс 4px row-gap рядка = ті самі 8px до назви
     щабля, що були в окремого <li> підпису. */
  margin-block-end: var(--space-3xs);
  font-family: var(--font-readout);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.level__num {
  grid-area: num;
  font-size: var(--fs-readout-label);
  font-weight: var(--fw-readout);
  letter-spacing: var(--tracking-numeric);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.level__name {
  grid-area: name;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.level__examples {
  grid-area: examples;
  max-inline-size: var(--measure);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

/* Термін — показник, тому моно й бурштин. Бурштин у цій секції належить
   пігулці й індикатору і більше нікому: другий бурштиновий рядок зробив би
   реєстр строкатим, а ціна поруч має важити кеглем, а не кольором. */
.level__timing {
  grid-area: timing;
  justify-self: start;
  margin-block-start: var(--space-3xs);
  padding: var(--pill-pad);
  border: var(--border-hairline);
  border-radius: var(--radius-chip);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
}

/* Ціна — число, по якому людина вирішує, чи писати взагалі, тому вона на
   щабель більша за опис поруч: на --fs-small обидва важили по 14px і ціна
   читалася в рядку третьою, після бурштинової пігулки. Один щабель, не два:
   --fs-readout розірвав би шестиколонковий рядок, а --fs-lead зрівняв би ціну
   з назвою щабля. Не в пілюлі: пілюля вже зайнята терміном, і дві пілюлі поруч
   читалися б як два однакові за вагою факти. Колір — звичайний текст, не
   бурштин: бурштин на сторінці означає активний стан, а не «дорого».

   На вузькому екрані ціна стоїть ВИЩЕ пігулки терміну, хоч у розмітці йде
   після неї: пігулка обведена акцентом і перетягує погляд, а в одну колонку
   першим має читатися число. На широкому екрані порядок повертається до
   логічного: термін, потім ціна — там вони в одному рядку й не конкурують. */
.level__price {
  grid-area: price;
  justify-self: start;
  margin-block-start: var(--space-2xs);
  font-size: var(--fs-body);
  font-weight: var(--fw-readout);
  letter-spacing: var(--tracking-numeric);
  color: var(--text-primary);
  white-space: nowrap;
}

.level:hover .level__num { color: var(--accent); }

/* ---- підвал секції -----------------------------------------------------------
   Формати договору одним рядком: це відповідь на питання, яке виникає на
   дзвінку, і воно не варте третини секції. Далі — пояснення, що означають
   нижня і верхня межі діапазону, і одна дія. */

.pricing__foot {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
  justify-items: start;
}

/* Знімаємо успадковану від p міру: 66ch при 12px моно різали рядок форматів
   на два з сиротою «FOR STUDIOS», хоча праворуч лишалося понад 700px. Це не
   абзац, а один технічний рядок — міра йому не потрібна. */
/* Накреслення звичайне, не моно. Рядок називає формати договору — це умова,
   а не показання: нічого не вимірює, не вирівнюється в стовпчик і не стоїть
   поруч із числом. Капслок і розрядка лишаються — вони й роблять із нього
   технічну мітку. */
.pricing__formats {
  max-inline-size: none;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.pricing__note {
  max-inline-size: var(--measure);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

@media (min-width: 64rem) {
  .pricing__foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--space-2xl);
  }

  .pricing__formats { grid-column: 1 / -1; }
}

/* ---- проміжна розкладка 1024–1280 ---------------------------------------------
   Шестиколонковий рядок вмикається лише від 80rem — на 1024 приклади там
   розсипались на чотири рядки, і брейкпойнт підняли свідомо. Але стовпчикова
   розкладка на цих ширинах лишала праворуч 220–386px мертвого поля, а iPad
   Pro 11" горизонтально — це 1194px, тобто сегмент не маргінальний.

   Тому проміжний крок: назва з прикладами ліворуч, термін із ціною праворуч.
   Ширина використана, рядок лишається рядком, приклади мають місце на два рядки
   замість чотирьох.

   Колонки й тут лічить .levels, а не .level. Це та сама вимога, що у 80rem:
   щойно кожен рядок починає рахувати треки зі свого вмісту, праві краї пігулок
   і цін розходяться. Правило одне на обидві широкі розкладки.

   Праворуч термін СТОЇТЬ ВИЩЕ ціни — на відміну від вузької розкладки, де ціна
   навмисно йде першою. Там вони в одній колонці й пігулка, обведена акцентом,
   перетягувала б погляд із числа. Тут це не одна колонка, а правий край рядка,
   і порядок повертається до логічного — той самий, що в шестиколонковому
   рядку: спершу термін, потім сума. */
@media (min-width: 64rem) {
  .levels {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    column-gap: var(--space-md);
  }

  .level {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-areas:
      "gauge num name     timing"
      "gauge num examples price";
    /* Свій column-gap у subgrid перекриває батьківський, тому його треба
       повторити — інакше рядки стоять на 1rem, а треки .levels на 1.5rem. */
    column-gap: var(--space-md);
  }

  /* Смуга підпису повторює нову розкладку рядка: чотири треки замість трьох. */
  .level--group {
    grid-template-areas:
      "label label label label"
      "gauge num name     timing"
      "gauge num examples price";
  }

  .level__timing {
    justify-self: end;
    margin-block-start: 0;
  }

  /* Ціна стоїть у другому рядку сітки, тому власний відступ їй більше не
     потрібен — його дає row-gap. Із відступом вона з'їжджала нижче за перший
     рядок прикладів, з якими має читатися в парі. */
  .level__price {
    justify-self: end;
    margin-block-start: 0;
  }
}

/* ---- шестиколонковий рядок ----------------------------------------------------
   Від 80rem, а не від 64rem. Рівно на 64rem шість колонок уже не вміщалися:
   назви ламалися на два рядки, приклади на три-чотири, а між пігулкою терміну
   й ціною лишалося 22px — вирівнювання по центру переставало читатися. Діапазон
   1024–1280 віддає стовпчикову розкладку: краще високий рядок, ніж стиснутий.

   Колонки лічить .levels, а не .level. Доти кожен щабель був власним грідом і
   рахував треки лише зі свого вмісту — ліві краї прикладів гуляли на 42px, праві
   краї пігулок на 84px. Реєстр, у якому колонки не збігаються, не реєстр. Тепер
   треки одні на всю шкалу, а кожен рядок бере їх через subgrid. */
@media (min-width: 80rem) {
  .levels {
    grid-template-columns: auto auto minmax(0, 0.9fr) minmax(0, 1.4fr) auto auto;
    column-gap: var(--space-md);
  }

  .level {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-areas: "gauge num name examples timing price";
    align-items: center;
    /* Тільки колонки. row-gap лишається базовим (--space-3xs): у звичайному
       рядку тут одна смуга й міжрядковий проміжок ні на що не впливає, а в
       рядку з підписом групи він і має бути тими самими 4px, що й у вузькій
       розкладці. */
    column-gap: var(--space-md);
  }

  .level--group {
    grid-template-areas:
      "label label label label label label"
      "gauge num name examples timing price";
  }

  .level__timing {
    justify-self: end;
    margin-block-start: 0;
  }

  /* Колонка ціни тепер спільна для всіх щаблів, тому ширину їй задає найдовший
     діапазон, а не запасні 11ch, які тут стояли раніше. */
  .level__price {
    display: grid;
    justify-items: end;
    justify-self: end;
    margin-block-start: 0;
  }

  /* Одиниця («/ month») сходить під суму окремим рядком, щоб за правим краєм
     колонки шикувалося число, а не рядок цілком: у спільному рядку суфікс тягнув
     єдиний абонентський щабель на 67px лівіше за решту. Кегль менший — це
     позначка одиниці, а не друге число. У вузькій розкладці колонки немає,
     тому там одиниця лишається в рядку зі сумою. */
  .level__unit {
    font-size: var(--fs-micro);
    color: var(--text-muted);
  }
}

/* ---- телефон ------------------------------------------------------------------
   Шість щаблів по 24px поля зверху й знизу — 288px повітря в реєстрі, який на
   телефоні йде на два з половиною екрани. Сам рядок не міняється: ні кегль
   назви, ні прикладів, ні ціни. */
@media not all and (min-width: 48rem) {
  .level { padding-block: var(--space-sm); }

  .pricing__foot { margin-block-start: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .level__num { transition: none; }
}