/* Діаграма Ганта для розділу «Етапи робіт» + заголовки блоків КП.
   Власний файл, щоб не чіпати app.css — там паралельно працює інший розділ.
   Класи з префіксами .gn- (Гант) і .stg-blockhead/.stg-weeks/.stg-result
   (доповнення до списку етапів). Змінні беру ті самі, що й портал, інакше
   темна тема лишиться світлою плямою: --surface, --ink, --rule, --accent. */

.gn-wrap{
  margin:0 0 16px;
  border:1px solid var(--rule);
  border-radius:14px;
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--lift);
}

/* Шапка: заголовок, дата старту, легенда, масштаб */
.gn-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 13px;
  border-bottom:1px solid var(--rule);
}
.gn-head h3{margin:0; font-size:13.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink)}
.gn-head .gn-sub{font-size:11.5px; color:var(--ink-3)}
.gn-spacer{flex:1 1 auto; min-width:0}

.gn-start{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--ink-3);
  background:var(--surface-2);
  border:1px solid var(--rule);
  border-radius:9px; padding:4px 8px;
}
.gn-start b{color:var(--ink); font-weight:600}
.gn-start button{
  border:0; background:transparent; cursor:pointer; padding:2px 4px;
  color:var(--accent-ink); font:inherit; font-weight:600; border-radius:6px;
}
.gn-start button:hover{background:var(--accent-soft)}
.gn-prov{
  font-size:10.5px; color:var(--open); background:var(--open-soft);
  border:1px solid var(--rule); border-radius:7px; padding:3px 7px; white-space:nowrap;
}

.gn-legend{display:inline-flex; align-items:center; gap:11px; font-size:11px; color:var(--ink-3); flex-wrap:wrap}
.gn-legend i{display:inline-flex; align-items:center; gap:5px; font-style:normal}
.gn-legend i::before{content:''; width:10px; height:10px; border-radius:3px; background:var(--c)}

.gn-zoom{display:inline-flex; border:1px solid var(--rule); border-radius:9px; overflow:hidden}
.gn-zoom button{
  border:0; background:transparent; cursor:pointer; font:inherit; font-size:11.5px;
  padding:5px 10px; color:var(--ink-3);
}
.gn-zoom button:hover{color:var(--ink)}
.gn-zoom button.is-on{background:var(--accent); color:var(--accent-on); font-weight:600}

/* Полотно. Горизонтальна прокрутка ЖИВЕ ТУТ — сторінка вбік не їде. */
.gn-scroll{
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  max-width:100%;
}
.gn-canvas{position:relative; min-width:100%}

/* Шкала часу */
.gn-axis{
  position:sticky; top:0; z-index:3;
  display:flex; background:var(--surface);
  border-bottom:1px solid var(--rule);
}
.gn-axis-l{
  flex:0 0 var(--lw); width:var(--lw);
  position:sticky; left:0; z-index:4;
  background:var(--surface);
  border-right:1px solid var(--rule);
  font-size:10.5px; color:var(--ink-3);
  display:flex; align-items:flex-end; padding:6px 10px;
}
.gn-axis-r{position:relative; height:44px; flex:0 0 auto}
.gn-mon{
  position:absolute; top:0; bottom:0;
  border-left:1px solid var(--rule-2);
  font-size:10.5px; color:var(--ink-2); font-weight:600;
  padding:6px 0 0 6px; white-space:nowrap; overflow:hidden;
}

/* Номер тижня займає ВСЮ ширину свого тижня і центрується в ній — інакше
   число висить на межі й читається як підпис до лінії, а не до проміжку.
   Розділювач лівого краю є в кожної комірки, зокрема й у безіменної: пропуск
   номера при вузькому масштабі не повинен читатись як пропуск тижня. */
.gn-wk{
  position:absolute; bottom:0; height:15px;
  display:flex; align-items:center; justify-content:center;
  border-left:1px solid color-mix(in oklab, var(--rule) 78%, transparent);
  font-size:9.5px; line-height:1; color:var(--ink-2);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
  white-space:nowrap; overflow:hidden; box-sizing:border-box;
}
.gn-wk i{
  font-style:normal; font-size:8px; font-weight:700;
  color:var(--ink-3); margin-right:2px; letter-spacing:.02em;
}
.gn-wk.is-mute{color:transparent}

/* Рядки */
.gn-rows{position:relative}

/* Сітка полотна. Ієрархія: місяць > тиждень > зебра.
   Лежить під смугами (.gn-bar має свій фон) і під лінією «сьогодні» (z-index 6). */
.gn-grid{position:absolute; inset:0; z-index:0; pointer-events:none}
.gn-grid i{position:absolute; top:0; bottom:0; display:block}
.gn-g-zeb{
  background:color-mix(in oklab, var(--ink) 2.5%, transparent);
}
.gn-g-day{
  width:1px; background:color-mix(in oklab, var(--rule) 45%, transparent);
}
.gn-g-wk{
  width:1px; background:color-mix(in oklab, var(--rule) 85%, transparent);
}
.gn-g-mon{
  width:1px; background:var(--rule-2);
}
/* У «Днях» межа тижня має лишатись помітнішою за денні лінії. */
.gn-wrap.is-days .gn-g-wk{background:var(--rule-2); opacity:.75}
/* Рядки стоять НАД сіткою, але самі прозорі — тому лінії тижнів просвічують
   крізь них, а смуги етапів лишаються поверх ліній. */
.gn-row{position:relative; z-index:1; display:flex; align-items:stretch; border-bottom:1px solid var(--rule)}
.gn-row:last-child{border-bottom:0}
.gn-row.is-done .gn-name b{color:var(--ink-3)}

.gn-name{
  flex:0 0 var(--lw); width:var(--lw);
  position:sticky; left:0; z-index:2;
  background:var(--surface);
  border-right:1px solid var(--rule);
  padding:7px 10px; min-width:0;
  display:flex; align-items:center; gap:8px;
}
.gn-name .gn-n{
  flex:0 0 auto; width:20px; height:20px; border-radius:6px;
  background:var(--surface-2); color:var(--ink-3);
  font-size:10.5px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
.gn-name .gn-t{min-width:0; flex:1 1 auto}
/* ПРАВКА 14.09 — назва етапу НЕ обрізається трикрапкою.

   Було: «Технічне завдання та …», «Дизайн і користувацьк…», тобто назву
   не прочитати, поки не наведеш. Це стала вимога власника по всьому
   порталу: дата, сума й назва не обрізаються ніколи.

   Замість nowrap+ellipsis — перенос на другий рядок і трохи менший кегль.
   Обмежуємо ДВОМА рядками: третій розсунув би висоту рядка Ганта і збив
   вирівнювання зі смугами праворуч. Два рядки вміщають усі 15 назв із КП —
   перевірено на найдовшій («CRM з автоматизованою системою продажів»). */
.gn-name b{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  font-size:11.5px; font-weight:600; line-height:1.22; color:var(--ink);
  overflow:hidden; white-space:normal; overflow-wrap:anywhere;
}
/* Підрядок «тижні 1-4 · 01.09.2026–28.09.2026» теж не обрізаємо: дати —
   саме той тип даних, який власник просив не різати ніколи. Дозволяємо
   перенос і трохи зменшуємо кегль, щоб діапазон читався цілком. */
.gn-name span{
  display:block; font-size:10px; color:var(--ink-3); margin-top:1px;
  line-height:1.3; white-space:normal; overflow-wrap:anywhere;
}

.gn-track{position:relative; flex:0 0 auto; padding:7px 0; min-height:38px}

/* Смуга етапу */
.gn-bar{
  position:absolute; top:8px; height:24px;
  border-radius:7px;
  background:var(--bc);
  color:#fff; cursor:grab;
  display:flex; align-items:center;
  box-shadow:0 1px 2px rgba(19,28,26,.16);
  user-select:none; touch-action:pan-y;
  overflow:hidden; min-width:16px;
}
.gn-bar:active{cursor:grabbing}
.gn-bar.is-ro{cursor:default}
.gn-bar.is-drag{box-shadow:var(--lift-2); z-index:5}
.gn-bar.is-late{outline:2px solid var(--danger); outline-offset:1px}

/* Прогрес усередині смуги — скільки пунктів етапу завершено */
.gn-fill{
  position:absolute; left:0; top:0; bottom:0;
  background:rgba(255,255,255,.32);
  pointer-events:none;
}
.gn-lab{
  position:relative; z-index:1;
  font-size:10.5px; font-weight:600; padding:0 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
}

/* Ручки зміни тривалості */
.gn-h{position:absolute; top:0; bottom:0; width:10px; cursor:ew-resize; z-index:2}
.gn-h::after{
  content:''; position:absolute; top:50%; transform:translateY(-50%);
  left:3px; width:3px; height:11px; border-radius:2px;
  background:rgba(255,255,255,.7);
}
.gn-h.l{left:0} .gn-h.r{right:0}
.gn-bar.is-ro .gn-h{display:none}

/* Сьогодні */
/* Лінія «сьогодні» йде крізь усі рядки, тому підпис ставимо НЕ зверху (там
   перший рядок — смуга блоку, і напис лягав просто на неї), а знизу полотна,
   де під ним завжди порожньо. */
.gn-today{position:absolute; top:0; bottom:0; width:2px; background:var(--danger); z-index:6; pointer-events:none}
.gn-today::before{
  content:'сьогодні'; position:absolute; bottom:2px; left:4px;
  font-size:9.5px; font-weight:600; color:var(--danger); white-space:nowrap;
  background:var(--surface); padding:1px 4px; border-radius:4px;
  border:1px solid var(--rule);
}

/* Розділювач блоків усередині Ганта */
.gn-blk{position:relative; z-index:1; display:flex; align-items:stretch; background:var(--surface-2); border-bottom:1px solid var(--rule)}
.gn-blk-l{
  flex:0 0 var(--lw); width:var(--lw);
  position:sticky; left:0; z-index:2;
  background:var(--surface-2);
  border-right:1px solid var(--rule);
  padding:6px 10px; font-size:11px; font-weight:700; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gn-blk-r{flex:0 0 auto; position:relative; padding:6px 10px; font-size:10.5px; color:var(--ink-3); white-space:nowrap}

/* ---------- верхньорівнева смуга блоків оплати ---------- */

/* Дужка над діапазоном блоку: видно, що транші всередині належать одному
   блоку КП, і скільки блок коштує разом. Саме «верхньорівнево», як просив
   Кирило, — самі транші лишаються окремими лініями нижче. */
.gn-bands{position:relative; z-index:1; display:flex; align-items:stretch; border-bottom:1px solid var(--rule); background:var(--surface)}
.gn-bands-l{
  flex:0 0 var(--lw); width:var(--lw);
  position:sticky; left:0; z-index:4;
  background:var(--surface); border-right:1px solid var(--rule);
  padding:5px 10px; font-size:10.5px; font-weight:600; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gn-bands-r{position:relative; flex:0 0 auto; height:26px}
.gn-band{
  position:absolute; top:4px; height:18px;
  border-radius:5px;
  border:1px solid var(--accent); border-bottom-width:2px;
  background:var(--accent-soft);
  display:flex; align-items:center; overflow:hidden;
}
.gn-band-2{border-color:var(--t2); background:var(--t2s)}
.gn-band-t{
  font-size:10px; font-weight:700; color:var(--ink);
  padding:0 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- віхи оплат ---------- */

/* Вертикальна лінія через усю діаграму + підпис із сумою.
   Оплачено — суцільна зелена; заплановано — пунктирна помаранчева. */
.gn-pay{position:absolute; top:0; bottom:0; width:0; z-index:5; pointer-events:none}
.gn-pay-l{
  position:absolute; top:0; bottom:0; left:-1px; width:2px;
  background:var(--pay, #2E7D32);
}
.gn-pay.is-due .gn-pay-l{
  background:none;
  border-left:2px dashed var(--open);
}
.gn-pay.is-paid{--pay:#2E7D32}

/* Підпис починається НИЖЧЕ смуги блоку (перший рядок полотна ~28px):
   інакше він лягає просто на заголовок «Блок 1 · 4 етапів». */
.gn-pay-t{
  position:absolute; top:calc(32px + var(--tier) * 30px); left:4px;
  pointer-events:auto; cursor:grab;
  border:1px solid var(--rule); border-radius:7px;
  background:var(--surface); padding:2px 6px;
  font:inherit; text-align:left; line-height:1.15;
  box-shadow:var(--lift); white-space:nowrap; max-width:150px; overflow:hidden;
}
.gn-pay-t:active{cursor:grabbing}
.gn-pay-t:disabled{cursor:default}
.gn-pay-t b{display:block; font-size:10.5px; font-weight:700; color:var(--ink)}
.gn-pay-t i{display:block; font-size:9.5px; font-style:normal; color:var(--ink-3); margin-top:1px}
.gn-pay.is-paid .gn-pay-t{border-color:#2E7D32; background:var(--accent-soft)}
.gn-pay.is-due .gn-pay-t{border-color:var(--open); background:var(--open-soft)}
/* Попередня дата — підпис із «?» і приглушеним тоном: не видавати за узгоджену */
.gn-pay.is-prov .gn-pay-t{border-style:dashed; opacity:.92}

/* Щільний режим: траншів багато, тому підпис стискається до суми.
   Дата ховається (вона в підказці), сума лишається — її просив Кирило.
   При наведенні підпис піднімається над сусідами і показує все. */
.gn-pay.is-dense .gn-pay-t{max-width:74px; padding:2px 5px}
.gn-pay.is-dense .gn-pay-t b{font-size:9.5px}
.gn-pay.is-dense .gn-pay-t i{display:none}
.gn-pay.is-dense .gn-pay-t:hover,
.gn-pay.is-dense .gn-pay-t:focus-visible{
  max-width:none; z-index:20; box-shadow:var(--lift-2);
}
.gn-pay.is-dense .gn-pay-t:hover i,
.gn-pay.is-dense .gn-pay-t:focus-visible i{display:block}

.gn-addpay{
  border:1px solid var(--rule); border-radius:9px; background:var(--surface);
  font:inherit; font-size:11.5px; font-weight:600; color:var(--ink-2);
  padding:5px 10px; cursor:pointer;
}
.gn-addpay:hover{border-color:var(--accent); color:var(--accent-ink)}

/* «!» біля суми — умови ще не узгоджені. Дрібний, але помітний: цифру
   поруч не можна читати як остаточну. */
.gn-rev{
  display:inline-flex; align-items:center; justify-content:center;
  width:12px; height:12px; margin-left:4px; border-radius:50%;
  background:var(--danger); color:#fff;
  font-style:normal; font-size:9px; font-weight:800; line-height:1;
  vertical-align:1px;
}

.gn-legend .gn-lg-pay::before{background:#2E7D32}
.gn-legend .gn-lg-due::before{background:var(--open)}

/* ---------- відсоток виконання ---------- */

.gn-pct{
  flex:0 0 auto; margin-left:auto;
  border:1px solid var(--rule); border-radius:7px;
  background:var(--surface-2); color:var(--ink-2);
  font:inherit; font-size:10.5px; font-weight:700;
  padding:3px 6px; cursor:default; white-space:nowrap;
}
.gn-pct.can{cursor:pointer}
.gn-pct.can:hover{border-color:var(--accent); color:var(--accent-ink)}
/* Виставлено вручну — видно, що цифра не з пунктів */
.gn-pct.is-man{border-style:dashed; border-color:var(--accent); color:var(--accent-ink)}
.gn-man{font-style:normal; opacity:.75}

/* Пояснювальний рядок у вікні (назва етапу, про що взагалі йдеться).
   Це НЕ підпис поля, тому без капса й розрядки .fld > span — раніше назва
   етапу малювалась як «ТЕХНІЧНЕ ЗАВДАННЯ ТА ПРОЄКТУВАННЯ АРХІТЕКТУРИ». */
.gn-formsub{
  font-size:13px; font-weight:600; line-height:1.4;
  color:var(--ink); margin-bottom:2px;
}
.gn-formsub + .fld{margin-top:0}
/* Пояснення (не назва) — звичайною вагою і приглушено. */
.gn-formsub.is-note{font-size:12.5px; font-weight:400; color:var(--ink-2)}

.gn-delnote{color:var(--danger)}

/* Рядок із галочкою у вікні. Не використовую .fld-row з app.css — там
   сітка на три колонки, і галочка з підписом роз'їхались би. */
.gn-chk{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--ink-2);
}
.gn-chk input{flex:0 0 auto; width:16px; height:16px; margin:0}
/* Підпис галочки — звичайне речення, а не назва поля: тому перебиваю
   капс і розрядку з .fld > span. «РАХУВАТИ АВТОМАТИЧНО З ПУНКТІВ (ЗАРАЗ
   11% — 1 З 9)» капсом читається гірше за той самий текст малими. */
.gn-chk > span{
  min-width:0;
  font-family:var(--sans); font-size:12.5px; font-weight:400;
  letter-spacing:normal; text-transform:none; color:var(--ink-2);
}

/* Підказка під час перетягування */
.gn-tip{
  position:fixed; z-index:90; pointer-events:none;
  background:var(--ink); color:var(--surface);
  font-size:11.5px; font-weight:600; padding:5px 9px; border-radius:8px;
  box-shadow:var(--lift-2); white-space:nowrap;
}

/* ---------- доповнення до списку етапів ---------- */

/* Заголовок блоку КП між картками етапів */
.stg-blockhead{
  display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
  margin:18px 0 9px; padding:0 2px 8px;
  border-bottom:1px solid var(--rule);
}
.stg-blockhead:first-child{margin-top:2px}
.stg-bh-t{min-width:0; flex:1 1 340px}
.stg-bh-t b{display:block; font-size:13.5px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.stg-bh-t span{display:block; font-size:11.5px; color:var(--ink-3); margin-top:3px; line-height:1.4}
.stg-bh-m{display:inline-flex; align-items:center; gap:12px; font-size:11.5px; color:var(--ink-3); flex-wrap:wrap}
.stg-bh-m b{color:var(--ink); font-weight:700}

/* Термін за КП у шапці картки етапу */
.stg-weeks{
  font-size:11px; color:var(--ink-3);
  background:var(--surface-2); border:1px solid var(--rule);
  border-radius:7px; padding:2px 7px; white-space:nowrap;
}

/* Результат етапу — критерій приймання з КП */
.stg-result{
  margin:10px 0 0; padding:9px 11px;
  background:var(--surface-2); border-radius:10px;
  font-size:12px; line-height:1.5; color:var(--ink-2);
}
.stg-result b{
  display:block; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-3); margin-bottom:4px;
}

/* Телефон: ліва колонка вужча, легенда окремим рядком */
@media (max-width:560px){
  .gn-head{padding:10px 11px; gap:8px}
  .gn-legend{width:100%; order:9}
  .stg-blockhead{margin-top:14px}

  /* Віхи оплат на вузькому екрані. Повний підпис «6 956 USDT / 01.09.2026»
     поруч із сусіднім перетворює діаграму на кашу, тому лишаємо тільки суму
     одним рядком, а дату ховаємо — вона є в підказці й у «Фінансуванні».
     Поверхи розводження теж тісніші. */
  .gn-pay-t{max-width:96px; padding:2px 5px; top:calc(28px + var(--tier) * 22px)}
  .gn-pay-t b{font-size:9.5px}
  .gn-pay-t i{display:none}
  .gn-pct{font-size:10px; padding:2px 5px}
}