/* ===== Garne CRM — design tokens ===== */
:root{
  /* Масштаб усього інтерфейсу. 0.75 — те, на чому зупинився власник: на широкому екрані
     100% виглядали надто великими. Це не font-size: шрифти, відступи й іконки в цьому CSS
     задані в пікселях, і сам лише font-size їх не зменшив би — масштабувати треба все
     разом, рівно як це робить зум браузера. Значення змінюється в «Моєму профілі» й живе
     в localStorage, бо це властивість екрана, а не людини: з ноутбука й з монітора зручні
     різні числа, і з сервера тут керувати нічим. */
  --ui-scale:1;

  --paper:#FFFFFF;
  /* Фон світліший (власник, 03.10): пісочний відтінок на великому екрані читався як
     сірувата пляма під білими картками. Лишаємо теплий тон, але піднімаємо світлоту —
     картки на ньому мають проступати, а не тонути. */
  --sky:#FDFBF9;
  --sky-deep:#F7F1E9;
  --sky-line:#F0E9DF;
  --ink:#191410;
  --ink-soft:#4A4036;
  --ink-invert:#0B1626; /* always-dark surface (tooltips/toasts) — deliberately NOT overridden in dark theme, since white text on it must stay readable in both themes */
  --slate:#6E6256;
  --slate-2:#988B7C;
  --visa:#DE9450;
  --visa-ink:#A06B3A;
  --visa-soft:#FBF0E4;
  /* Точний колір логотипа ProPart. НЕ для тексту: на білому дає 2.18:1,
     тобто нижче порога WCAG. Тільки знак, декор і заливки без тексту зверху. */
  --brand-logo:#E6A165;
  --stamp:#C15A42;
  --stamp-soft:#F7EAE6;
  --good:#1B8A5A;
  --good-soft:#E6F5EE;
  --amber:#A6813F;
  --amber-soft:#F5EFDE;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-card:0 1px 2px rgba(11,22,38,.04), 0 1px 1px rgba(11,22,38,.03);
  --shadow-pop:0 12px 32px rgba(11,22,38,.14), 0 2px 8px rgba(11,22,38,.08);
  /* Manrope — одна гарнітура на все. Раніше їх було дві: Space Grotesk для заголовків і
     Inter для тексту, і на стику вони сперечалися між собою — різна ширина літер, різний
     ритм. Manrope тримає і заголовок, і дрібний підпис, має щільні накреслення для великих
     чисел і залишається читабельною на 11 пікселях, де більшість геометричних гарнітур
     розсипається. */
  --font-display:'Manrope', system-ui, sans-serif;
  --font-body:'Manrope', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --slogan:#D9CDBD;
}

/* ─── Petition Workspace ─────────────────────────────────────────────────────────────── */
/* Робоче місце по ОДНІЙ справі, а не стос звичайних карток CRM. Три колонки, у кожної свій
   скрол: ліворуч тільки критерії з простим статусом, у центрі розмова з AI (там же жива
   генерація й сама чернетка), праворуч рівно одне поточне питання.
   Рахунок ведеться під 1440 і 1280; нижче 1080 колонки перетворюються на вкладки, бо три
   вузькі колонки на планшеті — це три нечитабельні колонки, а не три робочі. */
.petition-workspace-open-btn{background:linear-gradient(135deg,#172554,#334e86);color:#fff;border:none;white-space:nowrap}
.petition-workspace-open-btn svg{width:17px;height:17px;margin-right:7px;vertical-align:-4px}
/* НА ВЕСЬ ЕКРАН. Власник: «давай открывается на весь экран… там справа переписка».
   Робоче місце петиції — не картка серед інших карток: людина сидить у ньому годину й
   читає довгий юридичний текст. Тому воно вибиває себе з відступів сторінки на всю
   ширину вікна (padding головної області — 24px з боків, звідси відʼємні поля) і бере всю
   висоту під шапкою CRM. Ліва колонка критеріїв і права переписка з Susan лишаються на
   місці — ширшає центр, тобто саме текст, заради якого сюди приходять.

   ШРИФТ. Тут же живе --pw-fs: базовий кегль цього екрана. Він був 12.5px і на великому
   моніторі читався як дрібний шрифт у договорі («мелко»). Розміри нижче рахуються від
   нього, тож змінити читабельність усього робочого місця можна одним числом. */
.petition-workspace-page{
  --pw-fs:14px;
  height:calc(100vh - 84px); min-height:650px; display:flex; flex-direction:column;
  color:var(--ink); margin:-4px calc(-1 * var(--pw-bleed,24px)) 0;
  padding:0 12px;
}
@media (max-width:900px){ .petition-workspace-page{--pw-bleed:12px; --pw-fs:13.5px} }

/* ── Верхня смуга: хто це, у якому стані справа, головні дії ── */
.petition-workspace-top{min-height:64px;display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--paper);border:1px solid var(--sky-line);border-radius:14px 14px 0 0}
.petition-workspace-ident{min-width:190px;flex:none;margin-right:auto}
/* Дві кнопки виклику панелей (матеріали, уточнення) — одна група, бо це однакові речі:
   довідка, по яку ходять нападами. Стоять у шапці поруч, щоб їх шукали в одному місці. */
.pw-summon{display:flex;align-items:center;gap:8px;flex:none}
.pw-summon .btn{white-space:nowrap}
/* Число уточнень підсвічується лише коли їх справді треба закривати: жовта кнопка при нулі
   відкритих питань була б тривогою без приводу. */
.pw-summon-btn.is-attention{border-color:color-mix(in srgb,var(--amber) 45%,transparent);color:var(--amber)}
.pw-summon-btn.is-attention svg{color:var(--amber)}
.pw-summon .btn.active{background:var(--visa-soft);border-color:var(--visa);color:var(--visa-ink)}
/* Пошук клієнта за кнопкою: поле розкривається під іконкою, а не займає середину смуги. */
.pw-switch{position:relative;flex:none}
.pw-switch .petition-workspace-client-search{position:absolute;top:38px;right:0;width:320px;max-width:70vw;margin-left:0;z-index:26}
.petition-workspace-ident h2{font-size:19px;margin:1px 0;line-height:1.2}
.petition-workspace-ident .hint{font-size:11.5px;letter-spacing:.05em}
.petition-workspace-client-search{position:relative;flex:1;max-width:360px;margin-left:auto}
.petition-workspace-client-search input{width:100%;height:36px;background:var(--sky);border-color:transparent}
.petition-workspace-search-results{position:absolute;z-index:25;top:41px;left:0;right:0;background:var(--paper);border:1px solid var(--sky-line);border-radius:12px;box-shadow:var(--shadow-pop);overflow:hidden}
.petition-workspace-search-results button{display:flex;flex-direction:column;width:100%;padding:10px 13px;border:0;border-bottom:1px solid var(--sky-line);background:transparent;text-align:left;color:var(--ink);cursor:pointer}
.petition-workspace-search-results button:hover{background:var(--sky)}
.petition-workspace-search-results button:focus-visible{outline:2px solid var(--visa);outline-offset:-2px}
.petition-workspace-search-results span{font-size:12.5px;color:var(--slate);margin-top:2px}
.petition-workspace-top-actions{display:flex;gap:8px;flex:none}

/* ── Смуга прогресу: три числа, за якими видно стан справи без жодного кліку ──
   Перша плитка ширша за решту навмисно: під смугою критеріїв стоїть легенда з підписами
   кольорів, і без запасу ширини вона перенеслась би на другий рядок. Раніше плиток було
   п'ять, кольори смуги не були підписані ніде, а сегментів було десять при знаменнику 8. */
/* Один рядок замість смуги плиток. 87 px даних, які читають один раз, стали 34 px речення,
   яке читають один раз. Смужка кольорів лишилась — вона єдина тут відповідає одним поглядом,
   а не словами; плитки з легендою й окремими числами відкриваються кнопкою «Деталі». */
.petition-progress-line{display:flex;align-items:center;gap:12px;min-height:34px;padding:7px 16px;
  background:var(--paper);border:1px solid var(--sky-line);border-top:0}
.petition-progress-bar-thin{flex:none;width:96px;margin:0}
.petition-progress-sentence{flex:1;min-width:0;font-size:12.5px;color:var(--slate);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.petition-progress-toggle{flex:none;border:0;background:transparent;color:var(--slate);
  font:700 10.5px/1.4 var(--font-body);cursor:pointer;padding:3px 4px;border-radius:6px}
.petition-progress-toggle:hover{color:var(--visa)}
.petition-progress-toggle:focus-visible{outline:2px solid var(--visa);outline-offset:1px}
.petition-progress-strip{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--sky-line);border:1px solid var(--sky-line);border-top:0}
.petition-progress-tile{background:var(--paper);padding:9px 15px 10px;display:flex;flex-direction:column;gap:1px;min-width:0}
.petition-progress-label{font:700 9px/1.4 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--slate-2)}
.petition-progress-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
.petition-progress-note{font-size:11.5px;color:var(--slate);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.petition-progress-headline{display:flex;align-items:baseline;gap:7px;min-width:0}
.petition-progress-headline>b{font-size:21px;font-weight:800;line-height:1.2;letter-spacing:-.015em;flex:none}
.petition-progress-headline>b i{font-style:normal;font-size:13px;font-weight:700;color:var(--slate-2)}
.petition-progress-tile small{font-size:11.5px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.petition-progress-tile.is-attention .petition-progress-headline>b{color:var(--amber)}
.petition-progress-bar{display:flex;gap:2px;margin:2px 0 3px}
/* flex-grow приходить інлайном і дорівнює кількості критеріїв у стані — ширина сегмента
   чесно показує, скільки їх, а сума сегментів завжди дорівнює знаменнику біля числа. */
.petition-progress-bar i{flex:1 1 0;min-width:4px;height:5px;border-radius:2px;background:var(--sky-deep)}
.petition-progress-legend{display:flex;flex-wrap:wrap;align-items:center;gap:1px 11px;min-width:0}
.petition-progress-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--slate);white-space:nowrap}
.petition-progress-chip>i{width:7px;height:7px;border-radius:2px;background:var(--sky-deep);flex:none}
.petition-progress-chip>b{color:var(--ink);font-weight:800}
/* Один словник кольорів на смугу й на легенду: підпис у легенді має бути того самого кольору,
   що й сегмент, інакше легенда пояснює не те, що людина бачить. */
.petition-progress-bar i.state-ready,.petition-progress-chip>i.state-ready{background:var(--good)}
.petition-progress-bar i.state-working,.petition-progress-chip>i.state-working{background:var(--visa)}
.petition-progress-bar i.state-needs-input,.petition-progress-chip>i.state-needs-input{background:var(--amber)}
.petition-progress-bar i.state-insufficient,.petition-progress-chip>i.state-insufficient{background:var(--stamp)}
.petition-progress-bar i.state-not-started,.petition-progress-chip>i.state-not-started{background:var(--sky-deep)}

/* ── Вкладки для вузьких екранів: три колонки не влазять, тож стають трьома вкладками ── */
.petition-mobile-tabs{display:none;gap:5px;padding:8px 12px;background:var(--paper);border:1px solid var(--sky-line);border-top:0}
.petition-mobile-tabs button{flex:1;border:1px solid var(--sky-line);background:var(--paper);color:var(--slate);font-size:13px;font-weight:700;padding:8px;border-radius:9px;cursor:pointer;font-family:var(--font-body)}
.petition-mobile-tabs button.active{background:var(--visa);border-color:var(--visa);color:var(--visa-on,#fff)}
.petition-mobile-tabs button:focus-visible{outline:2px solid var(--visa);outline-offset:2px}
.petition-mobile-tabs button span{margin-left:5px;border-radius:8px;padding:1px 6px;font-size:11.5px;background:var(--amber-soft);color:var(--amber)}
.petition-mobile-tabs button.active span{background:rgba(255,255,255,.24);color:#fff}

.petition-workspace-loading,.petition-workspace-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:var(--paper);border:1px solid var(--sky-line);border-top:0;border-radius:0 0 14px 14px}
.petition-workspace-empty{justify-content:flex-start;text-align:left;padding:0}
/* ── Стартовий екран Petition Workspace ──────────────────────────────────────────────
   Розкладка з макета власника: велика ліва картка з власною шапкою («ПЕТИЦІЯ EB-1A /
   Оберіть клієнта»), а праворуч дві вужчі — «Швидкий старт» і «Стан справи».
   Тло екрана — --sky, самі картки — --paper: у темній темі --paper дорівнює тлу сторінки,
   і без цієї пари картки злилися б із фоном у суцільну пляму. Жодного кольору повз токени
   тут немає — п'ять крапок легенди й позначки кроків беруть ті самі --good/--visa/--amber/
   --stamp/--sky-deep, якими підписані стани критеріїв усередині справи. */
.petition-workspace-page.is-landing .petition-workspace-empty{
  border-top:1px solid var(--sky-line);border-radius:14px;background:var(--sky);overflow-y:auto}
.petition-landing{width:100%;max-width:1240px;margin:0 auto;padding:24px 24px 32px;
  display:grid;grid-template-columns:minmax(0,1.95fr) minmax(316px,1fr);gap:20px;align-items:start}
.pl-card{background:var(--paper);border:1px solid var(--sky-line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);min-width:0}
/* Шапка картки — окрема смуга з тонкою лінією під нею, як у макеті. На стартовому екрані
   верхня смуга сторінки не показується, тож пошук по всіх клієнтах живе саме тут. */
.pl-head{display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:12px 22px;border-bottom:1px solid var(--sky-line)}
.pl-head-ident .hint{font-size:11.5px;letter-spacing:.08em}
.pl-head-ident b{display:block;margin-top:2px;font:800 17px/1.25 var(--font-display);
  letter-spacing:-.018em;color:var(--ink)}
.pl-head .petition-workspace-client-search{max-width:270px;margin-left:auto}
.pl-head-stack{flex-direction:column;align-items:flex-start;gap:1px;padding:12px 16px}
.pl-head-stack b{font:800 13.5px/1.3 var(--font-display);letter-spacing:-.012em;color:var(--ink)}
.pl-head-stack small{font-size:12.5px;color:var(--slate-2)}

/* Тіло лівої картки: колонка по центру. Ширина обмежена не карткою, а рядком тексту —
   на 1440 без цього заголовок і абзац розтягуються на пів метра й перестають читатись. */
.pl-body{padding:34px 26px 24px}
.pl-body>*{max-width:660px;margin-left:auto;margin-right:auto}
.pl-body .petition-start-title{text-align:center;max-width:17ch;font-size:clamp(24px,2.1vw,31px)}
.pl-body .petition-start-lead{text-align:center;max-width:62ch}
.pl-body .petition-start-states{align-items:center;margin-top:22px}
.pl-body .petition-start-states .petition-progress-legend{justify-content:center}
/* «Не почато» — блідо-сіра крапка. У темній темі --sky-deep майже дорівнює тлу картки, і
   крапка зникала зовсім; тонке кільце робить її видимою в обох темах, лишаючись найтихішою
   з п'яти. Правка навмисно звужена до легенди стартового екрана. */
.pl-body .petition-start-states .petition-progress-chip>i{width:8px;height:8px;border-radius:50%}
.pl-body .petition-start-states .petition-progress-chip>i.state-not-started{
  box-shadow:inset 0 0 0 1px var(--slate-2)}
.pl-body .petition-start-steps{margin-top:24px}
.petition-start-step-num{font:700 11px/1.5 var(--font-mono);letter-spacing:.06em;color:var(--slate-2);flex:none;padding-top:2px}

/* Десять критеріїв — розкриваються кнопкою «Переглянути критерії» праворуч. Стан поруч
   з'являється лише коли справу обрано: намальований стан без справи був би вигадкою. */
.pl-criteria{margin-top:24px;border:1px solid var(--sky-line);border-radius:var(--radius-md);overflow:hidden}
.pl-criteria-head{padding:10px 14px;background:var(--sky);border-bottom:1px solid var(--sky-line);
  display:flex;flex-direction:column;gap:2px}
.pl-criteria-head b{font-size:14px;font-weight:800}
.pl-criteria-head small{font-size:12.5px;color:var(--slate-2)}
.pl-criteria-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--sky-line)}
.pl-criteria-row:last-child{border-bottom:0}
.pl-criteria-row>b{flex:1;font-size:14px;font-weight:600;color:var(--ink)}
.pl-criteria-roman{font:700 10.5px/1 var(--font-mono);color:var(--slate-2);width:34px;flex:none}
.pl-criteria-state{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--slate)}
.pl-criteria-state>i{width:7px;height:7px;border-radius:2px;background:var(--sky-deep);flex:none}
.pl-criteria-state>i.state-ready{background:var(--good)}
.pl-criteria-state>i.state-working{background:var(--visa)}
.pl-criteria-state>i.state-needs-input{background:var(--amber)}
.pl-criteria-state>i.state-insufficient{background:var(--stamp)}
.pl-criteria-state>i.state-not-started{background:var(--sky-deep);box-shadow:inset 0 0 0 1px var(--slate-2)}

/* Вибір справи. Список нікуди не подівся з екрана — він стоїть під поясненням, бо саме
   з нього починається робота, а головна кнопка праворуч без нього вимкнена. */
.pl-picker{margin-top:26px;padding-top:20px;border-top:1px solid var(--sky-line);
  display:flex;flex-direction:column;gap:10px}

/* Права колонка: дві картки, які їдуть за прокруткою пояснення. */
.pl-side{min-width:0;display:flex;flex-direction:column;gap:18px;position:sticky;top:14px}
.pl-quick-body{padding:6px 16px 16px;display:flex;flex-direction:column;gap:9px}
.pl-steps-list{display:flex;flex-direction:column}
.pl-step{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--sky-line)}
.pl-step:last-child{border-bottom:0}
.pl-step-tile{width:33px;height:33px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--sky);color:var(--slate-2)}
.pl-step-tile svg{width:16px;height:16px}
.pl-step.is-current .pl-step-tile{background:var(--visa-soft);color:var(--visa)}
.pl-step.is-done .pl-step-tile{background:var(--good-soft);color:var(--good)}
.pl-step-text{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.pl-step-text b{font-size:14px;font-weight:700;color:var(--ink)}
.pl-step-text small{font-size:12.5px;line-height:1.45;color:var(--slate)}
/* Позначка кроку. Три стани, три різні фігури — не лише колір: зелена галочка (зроблено),
   пунктирне синє кільце (зараз), порожнє сіре (ще не дійшли). Так їх видно і тому, хто
   кольори розрізняє гірше. */
.pl-mark{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center}
.pl-mark.is-pending{border:2px solid var(--sky-deep)}
.pl-mark.is-current{border:2px dashed var(--visa)}
.pl-mark.is-done{color:var(--good)}
.pl-mark svg{width:20px;height:20px}
.btn.pl-secondary{width:100%;justify-content:center;margin-top:2px}
.btn.pl-secondary svg{width:16px;height:16px;flex:none}

/* «Стан справи»: три числа обраної справи. Прочерк, доки справи немає. */
.pl-metric{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--sky-line)}
.pl-metric:last-of-type{border-bottom:0}
.pl-metric-ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.pl-metric-ic svg{width:15px;height:15px}
.pl-metric-ic.tone-visa{background:var(--visa-soft);color:var(--visa)}
.pl-metric-ic.tone-good{background:var(--good-soft);color:var(--good)}
.pl-metric-ic.tone-amber{background:var(--amber-soft);color:var(--amber)}
.pl-metric-ic.tone-slate{background:var(--sky);color:var(--slate-2)}
.pl-metric-label{flex:1;min-width:0;font-size:13px;color:var(--slate)}
.pl-metric-value{font:800 14px/1 var(--font-display);color:var(--ink);white-space:nowrap}

/* Спільне з попереднім стартовим екраном: заголовок, вступ, кроки, список справ і головна
   кнопка лишились тими самими елементами — змінилась лише розкладка навколо них. */
.petition-start-title{margin:0;font:800 clamp(26px,2.3vw,34px)/1.18 var(--font-display);letter-spacing:-.022em;color:var(--ink);max-width:19ch;text-wrap:balance}
.petition-start-lead{margin:15px 0 0;max-width:56ch;font-size:15px;line-height:1.65;color:var(--ink-soft)}
.petition-start-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:1px;background:var(--sky-line);border-top:1px solid var(--sky-line);border-bottom:1px solid var(--sky-line)}
.petition-start-step{display:flex;gap:16px;padding:15px 2px;background:var(--paper)}
.petition-start-step-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.petition-start-step-body b{font-size:15px;font-weight:700;color:var(--ink)}
.petition-start-step-body small{font-size:14px;line-height:1.6;color:var(--slate);max-width:60ch}
.petition-start-states{display:flex;flex-direction:column;gap:9px}
.petition-start-states>small{font-size:12.5px;color:var(--slate-2)}
.petition-start-states .petition-progress-legend{gap:7px 16px}
.petition-start-states .petition-progress-chip{font-size:12.5px}
.petition-start-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.petition-start-panel-head b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.petition-start-panel-head span{font:600 10px/1.4 var(--font-mono);letter-spacing:.05em;color:var(--slate-2);white-space:nowrap}
.petition-start-note{margin:0;font-size:12.5px;line-height:1.55;color:var(--slate-2)}
.petition-start-list{width:100%;border:1px solid var(--sky-line);border-radius:var(--radius-md);background:var(--paper);overflow:hidden;max-height:min(46vh,400px);overflow-y:auto}
.petition-start-row{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:0;border-bottom:1px solid var(--sky-line);background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.petition-start-row:last-child{border-bottom:0}
.petition-start-row:hover{background:var(--sky)}
.petition-start-row:focus-visible{outline:2px solid var(--visa);outline-offset:-2px}
/* Тестова справа лишається клікабельною (перевірки ними й живуть), але візуально тихіша
   за живого клієнта — щоб її не відкрили замість справжньої справи. */
.petition-start-row.is-test .petition-start-initials{background:var(--sky);color:var(--slate-2)}
.petition-start-initials{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--sky-deep);color:var(--visa);font:800 11px/1 var(--font-body);flex:none}
.petition-start-name{display:flex;flex-direction:column;min-width:0;flex:1}
.petition-start-row-top{display:flex;align-items:center;gap:7px;min-width:0}
.petition-start-name b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.petition-start-name small{font-size:12px;color:var(--slate);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.petition-start-go{width:15px;color:var(--slate-2);flex:none}
/* Обраний рядок — та сама пара кольорів, що й активний пункт лівої панелі (visa-soft/visa):
   вибір має читатися як вибір, а не як ховер, бо саме від нього залежить, чи ввімкнена
   головна кнопка праворуч. */
.petition-start-row.is-picked{background:var(--visa-soft)}
.petition-start-row.is-picked .petition-start-name b{color:var(--visa-ink)}
.petition-start-row.is-picked .petition-start-go{color:var(--visa)}
.petition-start-row.is-picked .petition-start-initials{background:var(--visa);color:var(--visa-on,#fff)}
/* Головна дія екрана: на всю ширину картки й помітно більша за звичайну кнопку, але саме
   «відносно велика» — висота задана падингом, а не фіксованим числом, тож підпис у два
   рядки (вузька колонка, 1280px) не обрізається. Селектор із .btn навмисно: сам блок кнопок
   у styles.css нижче за цей розділ, і при однаковій вазі .btn перебивав би падинг. */
.btn.petition-start-cta{width:100%;justify-content:center;padding:12px 14px;font-size:15px;border-radius:12px;
  box-shadow:0 6px 16px color-mix(in srgb,var(--visa) 26%,transparent);white-space:normal;text-align:center;
  line-height:1.3;margin-top:4px}
.btn.petition-start-cta:disabled{box-shadow:none}
.btn.petition-start-cta svg{width:17px;height:17px;flex:none}
.petition-start-cta-note{margin-top:-3px}
/* Нижче ~1120px дві колонки перестають бути двома. Права колонка йде НИЖЧЕ пояснення, а не
   вище: інструмент (список справ) тепер живе в лівій картці, і саме він має бути першим. */
@media (max-width:1120px){
  .petition-landing{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px 14px 26px}
  .pl-side{position:static}
  .pl-body{padding:26px 18px 20px}
  .pl-body .petition-start-title{max-width:22ch}
  .pl-head{flex-wrap:wrap;padding:12px 16px}
  .pl-head .petition-workspace-client-search{max-width:none;width:100%;margin-left:0}
}
.petition-workspace-error{margin-top:16px;border:1px solid color-mix(in srgb,var(--stamp) 40%,transparent);background:var(--stamp-soft)}
.petition-workspace-alert{display:flex;align-items:flex-start;gap:10px;padding:9px 14px;background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);color:var(--ink)}
.petition-workspace-alert>span{width:20px;color:var(--stamp);flex:none}
.petition-workspace-alert div{flex:1;min-width:0}
.petition-workspace-alert p{font-size:13px;margin:2px 0 0;white-space:pre-wrap}
.petition-workspace-alert .icon-btn{width:28px;height:28px;flex:none}

/* ── Каркас трьох колонок ── */
/* Дві колонки, не три. Колонка уточнень стала висувною панеллю (.pw-questions-panel нижче):
   писати треба постійно, а відповідати на уточнення — нападами, і 376 px, які вона тримала
   завжди, тепер належать тексту. Ліва колонка ще й згортається до рейки. */
/* Колонок знову три, але третя — це переписка з Susan, а не питання. Власник просив саме
   так: «давай справа переписка, зліва щось відбувається». Тому вона постійна й не вкладка:
   сенс у тому, що розмова і текст живуть одночасно — сказав «напиши критерій нагород», і
   зліва пішла чернетка, а розмова лишилась на місці. Уточнення й папки клієнта як були
   висувними панелями, так і лишились: вони накривають саме цю колонку. */
.petition-workspace-grid{flex:1;min-height:0;display:grid;grid-template-columns:256px minmax(0,1fr) var(--pw-susan-w,376px);border:1px solid var(--sky-line);border-top:0;border-radius:0 0 14px 14px;background:var(--paper);overflow:hidden}
.petition-workspace-grid.is-left-collapsed{grid-template-columns:58px minmax(0,1fr) var(--pw-susan-w,376px)}
.petition-workspace-left{min-height:0;overflow-y:auto;padding:12px 10px 20px;border-right:1px solid var(--sky-line);background:color-mix(in srgb,var(--sky) 55%,var(--paper))}
.petition-left-head-actions{display:flex;align-items:center;gap:2px;margin-left:auto}
/* Згорнута рейка: римська цифра й крапка стану лишаються, назва йде в підказку. */
.is-left-collapsed .petition-workspace-left{padding:12px 6px 20px}
.is-left-collapsed .petition-panel-head{padding:2px 0 11px}
.is-left-collapsed .petition-criterion-row{padding:6px 4px;justify-content:center;gap:0}
.is-left-collapsed .petition-criterion-name,
.is-left-collapsed .petition-criterion-count,
.is-left-collapsed .petition-team-details{display:none}
.is-left-collapsed .petition-criterion-dot{position:absolute;right:4px;top:6px}
.is-left-collapsed .petition-criterion-row{position:relative}
.petition-workspace-right{min-height:0;display:flex;flex-direction:column;border-left:1px solid var(--sky-line);background:color-mix(in srgb,var(--sky) 55%,var(--paper))}
/* Панель уточнень. Розміри й тінь — ті самі, що в панелі папок клієнта (.pw-files-panel):
   це два виклики одного жанру, і різна поведінка в них читалась би як два різні механізми.
   z-index так само НЕМАЄ навмисно — див. коментар біля .pw-files-panel. */
.pw-questions-panel{position:absolute;top:0;right:0;bottom:0;width:var(--pw-susan-w,376px);max-width:100%;
  background:var(--paper);box-shadow:-22px 0 44px -30px rgba(11,22,38,.45)}
:root[data-theme="dark"] .pw-questions-panel{box-shadow:-22px 0 44px -26px rgba(0,0,0,.6)}
.petition-workspace-center{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--paper)}

/* ── Праворуч: Susan ── */
/* Обличчя, а не абстрактна іскра: помічницю звати Susan, вона стоїть у «Роботах» тим самим
   портретом (assets/susan.png), і людина має розмовляти з кимось, а не з полем вводу. */
.pw-susan{min-width:0}
.pw-susan .petition-chat{flex:1;min-height:0;border-radius:0}
.pw-susan-head{align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--sky-line);background:var(--paper);flex:none}
.pw-susan-ava{position:relative;width:34px;height:34px;flex:none}
.pw-susan-ava img{width:34px;height:34px;border-radius:11px;object-fit:cover;object-position:50% 50%;display:block}
.pw-susan-ava .online-dot{position:absolute;right:-2px;bottom:-2px}
.pw-susan-ident{display:flex;flex-direction:column;min-width:0;margin-right:auto;gap:1px}
.pw-susan-ident b{font-size:calc(var(--pw-fs) + 0.5px);line-height:1.25}
.pw-susan-ident small{font-size:calc(var(--pw-fs) - 2px);color:var(--slate);line-height:1.3}
.pw-susan-scope{flex:none;padding:10px 12px;border-bottom:1px solid var(--sky-line);background:var(--visa-soft);color:var(--ink-soft);font-size:calc(var(--pw-fs) - 1.5px);line-height:1.6}
.pw-susan-msg-ava{overflow:hidden;background:var(--sky-deep)}
.pw-susan-msg-ava img{width:100%;height:100%;object-fit:cover;display:block}
/* Підказки — це готові ФРАЗИ, а не кнопки-дії: вони йдуть у те саме поле, тож наступного
   разу людина напише таку саму сама. */
.pw-susan-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.pw-susan-chip{border:1px solid var(--sky-line);background:var(--sky);color:var(--visa);font:700 10.5px/1.35 var(--font-body);padding:6px 10px;border-radius:999px;cursor:pointer;text-align:left;max-width:100%}
.pw-susan-chip:hover{background:var(--visa-soft);border-color:var(--visa)}
.pw-susan-chip:focus-visible{outline:2px solid var(--visa);outline-offset:1px}
.pw-susan .petition-chat-scroll{padding:14px 12px 10px}
.pw-susan .petition-composer{padding:10px 12px 12px}
.pw-susan .petition-msg.is-user .petition-msg-body{max-width:92%}

/* ── Центр: чернетка розділу як робота, а не як репліка в чаті ── */
.pw-draft-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
/* ЛИСТ ДОКУМЕНТА, А НЕ КАРТКА ІНТЕРФЕЙСУ.
   Власник показав, як має виглядати робоча область: біла сторінка з юридичним текстом
   посередині, папки ліворуч, Susan праворуч. Це не косметика — це те, ЯК людина читає
   написане. Текст петиції їде адвокату й далі в USCIS у вигляді сторінки, і побачити
   його треба таким, яким його побачать ТАМ: із полями, зі шрифтом із засічками, з
   довжиною рядка, на якій око не губиться. Чернетка, набрана дрібним інтерфейсним
   шрифтом на всю ширину екрана, читається як лог, і вичитувати її ніхто не буде.

   max-width на сам аркуш, а не на колонку: колонка може бути якою завгодно широкою
   (робоче місце на весь екран), а рядок довший за ~90 знаків уже нечитабельний —
   око не знаходить початок наступного. Тому аркуш стоїть по центру, а не розтягується. */
.pw-draft-pane{background:var(--sky, #f2f6fc)}
.pw-draft-card{background:#fff;border:1px solid var(--sky-line);border-radius:4px;
  padding:15px 17px;box-shadow:0 2px 10px rgba(20,32,60,.09);margin:0 auto 16px;max-width:860px}
/* Всередині картки документ уже не має власної рамки: дві вкладені рамки читались як
   помилка верстки. */
.pw-draft-card>.petition-section-preview{border:0;padding:0;background:transparent}
.pw-draft-empty b{display:block;font-size:calc(var(--pw-fs) + 1px);margin-bottom:6px;color:var(--ink)}
.pw-draft-empty p{margin:0;font-size:calc(var(--pw-fs) - 0.5px);line-height:1.65;color:var(--slate)}
.petition-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 11px}
.petition-panel-head>b{font-size:calc(var(--pw-fs) - 0.5px);letter-spacing:.01em}
.petition-panel-head .icon-btn{width:28px;height:28px}
.petition-panel-head .icon-btn svg{width:15px;height:15px}

/* ── Ліворуч: тільки критерії. Простий статус словами, а не кодом READY/PARTIAL ── */
.petition-criteria-list{display:flex;flex-direction:column;gap:3px}
.petition-criterion-row{display:flex;align-items:center;width:100%;gap:9px;padding:8px 9px;border:1px solid transparent;background:transparent;color:var(--ink);border-radius:10px;text-align:left;cursor:pointer;transition:background .12s ease,border-color .12s ease}
.petition-criterion-row:hover{background:var(--paper);border-color:var(--sky-line)}
.petition-criterion-row:focus-visible{outline:2px solid var(--visa);outline-offset:1px}
.petition-criterion-row.active{background:var(--paper);border-color:var(--sky-line);box-shadow:0 3px 14px rgba(31,50,91,.09)}
.petition-criterion-row.active .petition-criterion-roman{background:var(--visa);color:var(--visa-on,#fff)}
.petition-criterion-row.state-na{opacity:.6}
.petition-criterion-roman{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--sky-deep);color:var(--visa);font:700 10px/1 var(--font-mono);flex:none}
.petition-criterion-name{display:flex;min-width:0;flex:1;flex-direction:column;align-items:flex-start;gap:4px}
/* Назва критерію переноситься на два рядки, а не обрізається: на 1280 колонка вужча за
   «Оригінальний внесок у галузь», і трикрапка робила ліву колонку нечитабельною. */
.petition-criterion-name>b{font-size:calc(var(--pw-fs) - 1px);font-weight:700;line-height:1.3;max-width:100%;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.petition-criterion-name .pill{font-size:11px;padding:1px 7px;max-width:100%}
.petition-criterion-count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--amber-soft);color:var(--amber);font:800 10px/20px var(--font-mono);text-align:center;flex:none}
/* Стан НЕобраного критерію — крапка того самого кольору, що й сегмент смуги прогресу.
   Десять пігулок зі словами поспіль читались як десять однакових плям: підпис був у
   кожного рядка, а знайти серед них обраний не виходило. Слова лишились в обраного рядка,
   у підказці кожного рядка й у шапці центру над самим текстом. */
.petition-criterion-dot{width:7px;height:7px;border-radius:2px;background:var(--sky-deep);flex:none}
.petition-criterion-dot.state-ready{background:var(--good)}
.petition-criterion-dot.state-working{background:var(--visa)}
.petition-criterion-dot.state-needs-input{background:var(--amber)}
.petition-criterion-dot.state-insufficient{background:var(--stamp)}
.petition-criterion-dot.state-not-started{background:var(--sky-deep)}
.petition-criterion-dot.state-na{background:transparent;border:1px solid var(--sky-deep)}

/* Технічні подробиці лишаються доступними, але за згорткою: власник просив прибрати жаргон
   з головного екрана, а не видалити його з системи. */
.petition-team-details{margin:15px 4px 0;border-top:1px solid var(--sky-line);padding-top:11px}
.petition-team-details>summary{display:flex;align-items:center;gap:6px;padding:4px;font-size:12.5px;font-weight:700;color:var(--slate);cursor:pointer;list-style:none;border-radius:7px}
.petition-team-details>summary::-webkit-details-marker{display:none}
.petition-team-details>summary::before{content:'▸';font-size:10.5px;color:var(--slate-2)}
.petition-team-details[open]>summary::before{content:'▾'}
.petition-team-details>summary:hover{color:var(--visa)}
.petition-team-details>summary:focus-visible{outline:2px solid var(--visa);outline-offset:1px}
.petition-detail-block{margin-top:13px}
.petition-detail-block>b{display:block;font:800 9px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2);margin-bottom:5px}
.petition-stage-line{display:flex;align-items:center;gap:8px;padding:4px 5px;color:var(--slate);font-size:12px;border-radius:7px}
.petition-stage-line>span{width:18px;height:18px;border:1px solid var(--sky-line);border-radius:50%;display:grid;place-items:center;font-size:10.5px;background:var(--paper);flex:none}
.petition-stage-line>b{font-weight:700;font-size:12px}
.petition-stage-line.active{background:var(--visa-soft);color:var(--visa)}
.petition-stage-line.active>span{background:var(--visa);border-color:var(--visa);color:var(--visa-on,#fff)}
.petition-stage-line.done{color:var(--ink)}
.petition-stage-line.done>span{background:var(--good);border-color:var(--good);color:#fff}
.petition-source-line{display:flex;justify-content:space-between;gap:8px;padding:5px 2px;font-size:11.5px;border-bottom:1px dashed var(--sky-line)}
.petition-source-line span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--slate)}
.petition-source-line b{white-space:nowrap;color:var(--visa);font-size:11.5px}
.petition-method-line{display:flex;flex-direction:column;gap:2px;padding:7px 2px;border-bottom:1px dashed var(--sky-line)}
.petition-method-line b{font-size:11px;line-height:1.3}
.petition-method-line span{font-size:9.5px;color:var(--slate)}
.petition-method-line code{font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--visa)}
.petition-activity{display:flex;align-items:flex-start;gap:8px;padding:8px 2px;border-bottom:1px solid var(--sky-line)}
.petition-activity>span{width:14px;color:var(--visa);flex:none}
.petition-activity div{display:flex;flex-direction:column;min-width:0}
.petition-activity b{font-size:11.5px;line-height:1.35;overflow-wrap:anywhere}
.petition-activity small{font-size:9.5px;color:var(--slate);margin-top:3px}
.petition-job{display:grid;grid-template-columns:64px 1fr auto;gap:6px;align-items:center;padding:7px 2px;border-bottom:1px dashed var(--sky-line);font-size:10.5px}
.petition-job>span{font-weight:800}
.job-succeeded{color:var(--good)}.job-failed{color:var(--stamp)}.job-running{color:var(--amber)}

/* ── Центр: заголовок критерію + перемикач вигляду ── */
.petition-workspace-center-head{min-height:62px;display:flex;align-items:center;justify-content:space-between;column-gap:14px;row-gap:9px;flex-wrap:wrap;padding:9px 20px;border-bottom:1px solid var(--sky-line)}
/* flex-basis 250px, а не 0: при вужчому центрі назва критерію інакше стискалась до «Нагороди
   та пр…» — заголовок екрана має бути читабельним, тож замість обрізання перемикач вигляду
   переїжджає на другий рядок. */
.petition-center-title{display:flex;align-items:center;gap:11px;min-width:0;flex:1 1 250px}
.petition-center-title .petition-criterion-roman{width:32px;height:32px;font-size:12.5px}
.petition-center-title-text{min-width:0}
.petition-center-title-text h3{font-size:calc(var(--pw-fs) + 4px);margin:0;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.petition-center-sub{display:flex;align-items:center;gap:8px;margin-top:3px;min-width:0}
.petition-center-sub .hint{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.petition-workspace-tabs{display:flex;gap:3px;padding:3px;background:var(--sky);border-radius:10px;flex:none}
/* Вкладки в ОДИН рядок. Їх сім, і на середній ширині вони переносились на другий рядок —
   центр отримував дві смуги керування замість однієї, а текст критерію зсувався вниз.
   Замість переносу — горизонтальна прокрутка самої смуги: сім вкладок завжди читаються
   як один ряд, а до дальніх дотягуються прокруткою, як у будь-якому редакторі. */
.petition-workspace-tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
.petition-workspace-tabs::-webkit-scrollbar{display:none;}
.petition-workspace-tabs button{border:0;background:transparent;color:var(--slate);font-size:calc(var(--pw-fs) - 1.5px);font-weight:700;padding:6px 9px;border-radius:8px;cursor:pointer;white-space:nowrap;font-family:var(--font-body);flex:none}
.petition-workspace-tabs button:hover{color:var(--ink)}
.petition-workspace-tabs button:focus-visible{outline:2px solid var(--visa);outline-offset:1px}
.petition-workspace-tabs button.active{background:var(--paper);color:var(--visa);box-shadow:0 2px 8px rgba(31,50,91,.08)}
.petition-workspace-tabs button span{margin-left:5px;background:var(--sky-deep);color:var(--visa);border-radius:8px;padding:1px 5px;font-size:10.5px}
.petition-workspace-tabs button.active span{background:var(--visa-soft)}

/* ── Центр: сама розмова ── */
.petition-chat{flex:1;min-height:0;display:flex;flex-direction:column;background:color-mix(in srgb,var(--sky) 55%,var(--paper))}
.petition-chat-scroll{flex:1;min-height:0;overflow-y:auto;padding:20px 20px 12px}
.petition-chat-thread{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.petition-msg{display:flex;gap:10px;align-items:flex-start}
.petition-msg-avatar{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;background:linear-gradient(145deg,var(--visa-soft),var(--sky-deep));color:var(--visa)}
.petition-msg-avatar svg{width:15px;height:15px}
.petition-msg-body{flex:1;min-width:0;background:var(--paper);border:1px solid var(--sky-line);border-radius:4px 14px 14px 14px;padding:12px 15px;box-shadow:var(--shadow-card)}
.petition-msg-who{font:800 9px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2);margin-bottom:6px}
.petition-msg-who small{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-weight:600;font-size:11px}
.petition-msg-body>p{font-size:var(--pw-fs);line-height:1.65;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.petition-msg-body>small.hint{display:block;margin-top:8px;font-size:calc(var(--pw-fs) - 2.5px);line-height:1.45}
/* Розмітка відповіді моделі (js/markdown.js). Клас спільний, а не «петиційний»: щойно
   markdown знадобиться ще десь, стилі вже є. Кольори — токенами, тож темна тема безкоштовно. */
.md{font-size:14px;line-height:1.65;color:var(--ink-soft);overflow-wrap:anywhere}
.md>*:first-child{margin-top:0}
.md>*:last-child{margin-bottom:0}
.md p{margin:0 0 8px}
.md ul,.md ol{margin:0 0 9px;padding-left:19px;display:flex;flex-direction:column;gap:3px}
.md li{margin:0}
.md li::marker{color:var(--slate-2)}
.md strong{font-weight:700;color:var(--ink)}
.md em{font-style:italic}
.md h4,.md h5,.md h6{margin:13px 0 6px;color:var(--ink);font-weight:800;letter-spacing:-.01em;line-height:1.35}
.md h4{font-size:15px}
.md h5{font-size:14.5px}
.md h6{font-size:14px}
.md code{font:600 11.5px/1.5 var(--font-mono);background:var(--sky);border:1px solid var(--sky-line);border-radius:5px;padding:1px 5px}
.md pre{margin:0 0 9px;background:var(--sky);border:1px solid var(--sky-line);border-radius:9px;padding:9px 11px;overflow-x:auto}
.md pre code{border:0;background:none;padding:0;white-space:pre}
.md blockquote{margin:0 0 9px;padding:2px 0 2px 11px;border-left:2px solid var(--sky-line);color:var(--slate)}
.md a{color:var(--visa)}
.petition-msg-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.petition-msg.is-user{flex-direction:row-reverse}
.petition-msg.is-user .petition-msg-body{flex:0 1 auto;max-width:86%;margin-left:auto;background:var(--visa-soft);border-color:color-mix(in srgb,var(--visa) 20%,transparent);border-radius:14px 4px 14px 14px;box-shadow:none}
.petition-msg.is-user .petition-msg-who{color:var(--visa-ink)}
.petition-msg.is-tool .petition-msg-body{background:var(--sky);border-style:dashed;box-shadow:none}
.petition-msg.is-document .petition-msg-body{padding:12px}
.petition-typing{display:flex;gap:4px;align-items:center;height:16px}
.petition-typing i{width:6px;height:6px;border-radius:50%;background:var(--slate-2);animation:petitionTyping 1.2s ease-in-out infinite}
.petition-typing i:nth-child(2){animation-delay:.15s}
.petition-typing i:nth-child(3){animation-delay:.3s}
@keyframes petitionTyping{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* "Описати критерій" — жива генерація одного критерію (draft-petition-criterion, SSE).
   Панель живе як окрема репліка в стрічці: доки триває стрім, збереженої версії секції ще
   немає, і показати текст, який ще пишеться, всередині «готового» документа означало б
   збрехати про його статус. */
.petition-gen-panel.is-error{border-color:color-mix(in srgb,var(--stamp) 35%,transparent)}
.petition-gen-head{display:flex;align-items:center;gap:9px}
.petition-gen-dot{width:8px;height:8px;border-radius:50%;background:var(--visa);flex:none;animation:petitionGenPulse 1.1s ease-in-out infinite}
.petition-gen-panel.is-error .petition-gen-dot{animation:none;background:var(--stamp)}
.petition-gen-panel.is-stopped .petition-gen-dot{animation:none;background:var(--slate-2)}
@keyframes petitionGenPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.petition-gen-stage{font-size:12.5px;font-weight:700;color:var(--visa)}
.petition-gen-panel.is-error .petition-gen-stage{color:var(--stamp)}
.petition-gen-text{margin-top:12px;font-family:Georgia,serif;font-size:14px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);min-height:26px}
.petition-gen-cursor{display:inline-block;width:7px;height:14px;margin-left:1px;background:var(--visa);vertical-align:text-bottom;animation:petitionGenBlink .9s step-end infinite}
@keyframes petitionGenBlink{0%,100%{opacity:1}50%{opacity:0}}
.petition-gen-error{margin-top:10px;padding:10px 12px;border-radius:9px;background:var(--stamp-soft);color:var(--stamp);font-size:12.5px;line-height:1.5}
.petition-gen-actions{margin-top:12px;display:flex;gap:8px}

/* ── Чернетка розділу: виглядає як документ, а не як ще одна картка CRM ── */
/* Той самий випадок, що й у .file-preview-doc: фон прибитий білим, а color:var(--ink) у
   темній темі світлий — аркуш петиції ставав білим по білому. */
.petition-section-preview{background:#fff;color:#0b1626;border:0;border-radius:0;
  padding:56px 72px 64px}
.petition-section-preview h3{font-family:Georgia,serif;font-size:19px;line-height:1.35;
  margin:0 0 20px;color:#0b1626;text-align:center;font-weight:700}
/* Вирівнювання по ширині й перенос по складах — так набирають юридичний документ.
   overflow-wrap:anywhere тут прибрано навмисно: він рве слова посеред літер, і в
   надрукованому тексті це виглядає як помилка набору. */
.petition-section-preview>p{font-family:Georgia,serif;font-size:14.5px;line-height:1.85;
  margin:0 0 14px;white-space:pre-wrap;text-align:justify;hyphens:auto;}
@media (max-width:1100px){ .petition-section-preview{padding:32px 28px 36px} }
/* Лист рекомендувача і зібрана петиція — теж аркуші. Вони вже малюються тією самою
   розміткою (.petition-section-preview), тож лишається дати їм рамку сторінки: усередині
   картки рекомендувача вигляд аркуша інакше не читається — біле на білому. */
.petition-recommender-card > .petition-section-preview,
.petition-final-assembly{border:1px solid var(--sky-line);border-radius:4px;
  box-shadow:0 2px 10px rgba(20,32,60,.09);margin-top:12px;max-width:860px}
/* У листі шапку не центруємо: у діловому листі дата й звертання стоять ліворуч, і
   вирівняти їх по центру означало б зробити з листа оголошення. */
.petition-recommender-card > .petition-section-preview h3{text-align:left}
.petition-version-meta{display:flex;justify-content:space-between;gap:10px;font:700 9px/1.4 var(--font-mono);color:var(--slate-2);text-transform:uppercase;letter-spacing:.05em}
.petition-status-line{display:flex;align-items:center;gap:8px;margin-top:12px}
/* Попередження й рекомендації навмисно НЕ схожі на текст петиції: це підказки менеджеру, і
   вони ніколи не потрапляють в експорт (buildDocx читає лише paragraphs і weaknesses). */
.petition-warnings{margin-top:18px;padding:13px;border-left:3px solid var(--amber);background:var(--amber-soft);border-radius:0 9px 9px 0;font-size:12.5px;font-family:var(--font-body)}
.petition-warnings b{display:block;margin-bottom:6px;color:var(--amber)}
.petition-warnings ul{padding-left:0;margin:0;list-style:none}
.petition-warnings li{padding:5px 0;border-top:1px dashed color-mix(in srgb,var(--amber) 30%,transparent);line-height:1.5}
.petition-warnings li:first-child{border-top:none}
.petition-warnings li small{display:block;color:var(--slate);margin-top:2px;font-size:11px}
.petition-recommendations{margin-top:14px;padding:13px;border-left:3px solid var(--visa);background:var(--visa-soft);border-radius:0 9px 9px 0;font-size:12.5px;font-family:var(--font-body)}
.petition-recommendations b{display:block;margin-bottom:6px;color:var(--visa-ink)}
.petition-rec-item{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-top:1px dashed color-mix(in srgb,var(--visa) 25%,transparent)}
.petition-rec-item:first-child{border-top:none}
.petition-rec-item>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.petition-rec-item b{margin:0;font-size:12.5px;color:var(--ink)}
.petition-rec-item small{color:var(--slate);font-size:11px;line-height:1.45}
/* Зауваження AI під чернеткою — одним рядком-згорткою, а не трьома кольоровими блоками
   між абзацами. Вони відповідають на «що з цим текстом не так» — питання, яке ставлять
   ПІСЛЯ читання, а стояли посеред самого тексту й забирали найбільше кольору на екрані. */
.pw-draft-notes{margin-top:18px;border-top:1px solid var(--sky-line);padding-top:11px}
.pw-draft-notes>summary{cursor:pointer;font:700 11px/1.4 var(--font-body);color:var(--slate);padding:3px;list-style:none;display:flex;align-items:center;gap:6px;border-radius:7px}
.pw-draft-notes>summary::-webkit-details-marker{display:none}
.pw-draft-notes>summary::before{content:'▸';font-size:10.5px;color:var(--slate-2)}
.pw-draft-notes[open]>summary::before{content:'▾'}
.pw-draft-notes>summary:hover{color:var(--visa)}
.pw-draft-notes>summary:focus-visible{outline:2px solid var(--visa);outline-offset:1px}
.pw-draft-notes .petition-warnings:first-of-type{margin-top:10px}
.petition-weaknesses,.petition-placeholders{margin-top:18px;padding:13px;border-left:3px solid var(--amber);background:var(--amber-soft);border-radius:0 9px 9px 0;font-size:12.5px;font-family:var(--font-body)}
.petition-weaknesses ul{padding-left:17px;margin:7px 0 0;line-height:1.55}
.petition-placeholders{border-left-color:var(--visa);background:var(--visa-soft)}
.petition-placeholders p{margin:5px 0 0;line-height:1.5;color:var(--ink-soft)}

/* ── Композер: текст, голос, файл ── */
.petition-composer{flex:none;border-top:1px solid var(--sky-line);background:var(--paper);padding:11px 20px 13px}
/* Та сама смуга тексту, що й у чернетки (.petition-chat-thread, 780px). Коли центр став
   ширшим за колонку тексту, поле вводу поїхало ширше за самі повідомлення — і рядок, у
   який пишуть, перестав стояти під рядком, який читають. Лінію зверху лишаємо на всю
   ширину: вона відділяє зони, а не належить колонці тексту. */
.petition-composer>*{max-width:780px;margin-left:auto;margin-right:auto}
.petition-composer>textarea{width:100%;resize:none;font-size:14px;line-height:1.55;min-height:50px;max-height:150px}
.petition-composer-tools{display:flex;align-items:center;gap:7px;margin-top:8px}
.petition-composer-tools>.btn{margin-left:auto}
.petition-file-input{display:none}
.petition-voice-note{font-size:11.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}
.petition-workspace-page .icon-btn{width:32px;height:32px}
.petition-workspace-page .icon-btn svg{width:15px;height:15px}
.petition-workspace-page .icon-btn:focus-visible{outline:2px solid var(--visa);outline-offset:1px}
.petition-workspace-page .icon-btn:disabled{opacity:.4;cursor:not-allowed}
.petition-workspace-page .icon-btn.is-recording{background:var(--stamp-soft);color:var(--stamp);animation:petitionRec 1.4s ease-out infinite}
@keyframes petitionRec{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--stamp) 45%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}

/* ── Інші вигляди центру: редактор, докази, уся петиція ── */
.petition-workspace-scroll{flex:1;min-height:0;overflow-y:auto;padding:18px 20px}
.petition-section-editor{max-width:860px;margin:auto}
.petition-section-editor label{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-weight:700;font-size:12.5px}
.petition-section-editor textarea{resize:vertical;white-space:pre-wrap;font:13px/1.65 Georgia,serif}
.petition-editor-warning{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:10px;background:var(--visa-soft);color:var(--ink-soft);font-size:12px;margin-bottom:14px}
.petition-editor-warning b{color:var(--visa-ink)}
.petition-editor-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.petition-source-card{display:flex;align-items:center;gap:11px;border:1px solid var(--sky-line);border-radius:10px;padding:10px;margin-bottom:7px;max-width:860px}
.petition-source-card div{display:flex;flex-direction:column;min-width:0}
.petition-source-card b{font-size:13px;overflow-wrap:anywhere}
.petition-source-card small{color:var(--slate);font-size:11.5px;margin-top:2px}
.petition-empty-section{padding:36px 24px;text-align:center;color:var(--slate);font-size:13px;line-height:1.6}
.petition-final-assembly{max-width:850px;margin:auto;padding:36px 52px;box-shadow:0 10px 35px rgba(31,50,91,.09)}
.petition-final-assembly article{border-top:1px solid var(--sky-line);margin-top:34px;padding-top:18px}
.petition-final-assembly article>p{font-family:Georgia,serif;font-size:14px;line-height:1.78;white-space:pre-wrap;overflow-wrap:anywhere}

/* ── Праворуч: рівно одне питання ── */
.petition-questions-head{flex:none;padding:12px 8px 11px 14px;border-bottom:1px solid var(--sky-line)}
/* Три елементи в шапці панелі: назва, гортання черги, закрити. space-between розкидав би їх
   по третинах — гортання має триматись назви, а хрестик стояти в куті. */
.petition-questions-head .petition-question-nav{margin-left:auto}
.petition-question-nav{display:flex;align-items:center;gap:4px;font:700 10.5px/1 var(--font-mono);color:var(--slate)}
.petition-workspace-page .petition-question-nav .icon-btn{width:26px;height:26px}
.petition-answer-saved{display:flex;align-items:flex-start;gap:9px;margin:10px 12px 0;padding:10px 11px;background:var(--good-soft);border:1px solid color-mix(in srgb,var(--good) 30%,transparent);border-radius:11px}
.petition-answer-saved>span{width:15px;color:var(--good);flex:none;margin-top:1px}
.petition-answer-saved>div{flex:1;min-width:0}
.petition-answer-saved b{display:block;font-size:12.5px;line-height:1.35;color:var(--good)}
.petition-answer-saved small{display:block;margin-top:3px;font-size:11.5px;line-height:1.5;color:var(--ink-soft)}
.petition-workspace-page .petition-answer-saved .icon-btn{width:24px;height:24px;flex:none;background:transparent}
.petition-workspace-right-scroll{flex:1;min-height:0;overflow-y:auto;padding:12px}
.petition-question{padding:14px;border:1px solid var(--sky-line);border-radius:13px;background:var(--paper);box-shadow:var(--shadow-card)}
.petition-question-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.petition-question-criterion{max-width:70%;border:0;background:var(--visa-soft);color:var(--visa-ink);border-radius:99px;padding:3px 9px;font:700 10px/1.4 var(--font-body);cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.petition-question-criterion:hover{background:var(--sky-deep)}
.petition-question-criterion:focus-visible{outline:2px solid var(--visa);outline-offset:1px}
.petition-question>b{display:block;font-size:14.5px;line-height:1.45}
.petition-question>p{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:7px 0 0}
.petition-gap-label{font-weight:700;color:var(--slate)}
.petition-question-status{display:inline-flex;margin-top:8px;padding:3px 8px;border-radius:7px;background:var(--amber-soft);color:var(--amber);font-size:11.5px;font-weight:700}
.petition-answer-label{display:block;margin:13px 0 5px;font:800 9px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2)}
.petition-question textarea{width:100%;resize:vertical;font-size:13px;line-height:1.55;white-space:pre-wrap}
.petition-answer-tools{display:flex;align-items:center;gap:7px;margin-top:8px}
.petition-attached{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.petition-attached .link-chip{font-size:11.5px;gap:4px;padding:3px 6px 3px 9px}
.petition-workspace-page .petition-attached .icon-btn{width:18px;height:18px;background:transparent}
.petition-workspace-page .petition-attached .icon-btn svg{width:11px;height:11px}
.petition-question-sources{margin-top:10px}
.petition-question-sources summary{cursor:pointer;font-size:11.5px;color:var(--visa);font-weight:700}
.petition-question-sources label{display:flex;align-items:flex-start;gap:6px;padding:5px 0;font-size:11.5px}
.petition-question-sources input{width:auto;margin-top:2px}
.petition-question-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.petition-question-actions .btn{font-size:12.5px;padding:7px 8px;justify-content:center}
.petition-question-actions .btn:first-child{grid-column:1 / -1}
.petition-question-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--sky-line)}
.petition-question-foot .hint{flex:1;font-size:11px;line-height:1.45}
.petition-linkish{flex:none;border:0;background:transparent;color:var(--slate);font:700 10px/1.4 var(--font-body);cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:2px}
.petition-linkish:hover{color:var(--visa)}
.petition-linkish:focus-visible{outline:2px solid var(--visa);outline-offset:1px}
.petition-linkish:disabled{opacity:.45;cursor:not-allowed}
.petition-right-empty{padding:34px 16px;text-align:center;color:var(--slate)}
.petition-right-empty b{display:block;font-size:14px;color:var(--ink);margin-bottom:6px}
.petition-right-empty p{font-size:12.5px;line-height:1.6;margin:0}
.petition-handled{margin-top:14px;border-top:1px solid var(--sky-line);padding-top:11px}
.petition-handled>summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--slate);padding:3px}
.petition-handled>summary:hover{color:var(--visa)}
.petition-handled-row{display:flex;gap:8px;align-items:flex-start;padding:8px 2px;border-bottom:1px dashed var(--sky-line)}
.petition-handled-row>div{min-width:0}
.petition-handled-row b{display:block;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.petition-handled-row small{display:block;margin-top:3px;font-size:11px;color:var(--slate);line-height:1.45}

/* ── 1280 і трохи нижче: колонки стискаються, але жодна кнопка не має виїжджати за край ── */
@media(max-width:1440px){
  .petition-workspace-grid{grid-template-columns:240px minmax(0,1fr) var(--pw-susan-w,352px)}
  .petition-workspace-grid.is-left-collapsed{grid-template-columns:58px minmax(0,1fr) var(--pw-susan-w,352px)}
  /* Панель уточнень тримає ту саму ширину, що й переписка під нею: висуваючись, вона має
     накрити колонку Susan рівно, а не з'їхати на піксель. */
  .pw-questions-panel{width:352px}
  .petition-final-assembly{padding:30px 38px}
}
@media(max-width:1300px){
  .petition-workspace-grid{grid-template-columns:224px minmax(0,1fr) var(--pw-susan-w,328px)}
  .petition-workspace-grid.is-left-collapsed{grid-template-columns:58px minmax(0,1fr) var(--pw-susan-w,328px)}
  .pw-questions-panel{width:328px}
  .petition-chat-scroll{padding:16px 14px 10px}
  .petition-composer{padding:10px 14px 12px}
  .petition-workspace-center-head{padding:10px 14px}
  .petition-workspace-scroll{padding:16px 14px}
}
/* ── Планшет і телефон: три колонки стають трьома вкладками ── */
@media(max-width:1080px){
  .petition-workspace-page{height:auto;min-height:0}
  .petition-mobile-tabs{display:flex}
  .petition-workspace-top{flex-wrap:wrap}
  .pw-switch{order:3;flex-basis:100%}
  .pw-switch .petition-workspace-client-search{position:static;width:auto;max-width:none;margin-top:8px}
  .petition-workspace-client-search{max-width:none;margin-left:0}
  /* Плиток три, тож рядок лишається один — але перевага в ширині першій потрібна менше. */
  .petition-progress-strip{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr)}
  .petition-progress-sentence{white-space:normal}
  .petition-workspace-grid{grid-template-columns:1fr;height:72vh;min-height:520px}
  .petition-workspace-grid.is-left-collapsed{grid-template-columns:1fr}
  /* Колонок тут немає — панель уточнень стає звичайною вкладкою, як була. */
  .pw-questions-panel{position:static;width:auto;box-shadow:none}
  /* Згортання лівої колонки тут сенсу не має: колонок немає, є вкладки. Скидаємо все, що
     рейка ховає, інакше вкладка «Критерії» показала б самі римські цифри. */
  .is-left-collapsed .petition-workspace-left{padding:12px 10px 20px}
  .is-left-collapsed .petition-criterion-row{padding:8px 9px;justify-content:flex-start;gap:9px}
  .is-left-collapsed .petition-criterion-name{display:flex}
  .is-left-collapsed .petition-criterion-count,
  .is-left-collapsed .petition-team-details{display:block}
  .petition-workspace-grid>.petition-workspace-left,
  .petition-workspace-grid>.petition-workspace-center,
  .petition-workspace-grid>.petition-workspace-right{display:none;border-left:0;border-right:0}
  .petition-workspace-grid[data-mobile-tab="criteria"]>.petition-workspace-left{display:block}
  .petition-workspace-grid[data-mobile-tab="work"]>.petition-workspace-center{display:flex}
  /* Дві різні речі в одній колонці .petition-workspace-right: переписка з Susan і панель
     уточнень. На вузькому екрані вони мусять розійтись по СВОЇХ вкладках, інакше вкладка
     «Питання» показувала б обидві одна під одною. */
  .petition-workspace-grid[data-mobile-tab="susan"]>.pw-susan{display:flex}
  .petition-workspace-grid[data-mobile-tab="questions"]>.pw-questions-panel{display:flex}
  .petition-final-assembly{padding:24px 20px}
}
@media(max-width:640px){
  /* На телефоні легенда критеріїв не влазить у півекрана — віддаємо їй увесь рядок, а два
     решта числа стають під нею парою. */
  .petition-progress-strip{grid-template-columns:repeat(2,1fr)}
  .petition-progress-tile-wide{grid-column:1/-1}
  .petition-workspace-ident{min-width:0}
  .pw-summon{flex-wrap:wrap}
  .petition-question-actions{grid-template-columns:1fr}
  .petition-question-actions .btn:first-child{grid-column:auto}
  .petition-workspace-tabs{width:100%;overflow-x:auto}
}
/* ── Public contract signing ──────────────────────────────────────────────── */
.contract-sign-page{min-height:100vh;background:linear-gradient(145deg,#eef4ff,#f7fafc 55%,#edf7f2);padding:24px;color:#172033;box-sizing:border-box;font-family:Manrope,Arial,sans-serif}
.contract-sign-page h1,.contract-sign-page h2,.contract-sign-page h3{color:#172033}
.contract-sign-brand{max-width:980px;margin:0 auto 18px;display:flex;align-items:center;gap:11px}.contract-sign-brand small{display:block;color:#667085}.contract-sign-logo{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#1747d1;color:#fff;font-size:25.5px;font-weight:800;box-shadow:0 8px 22px #1747d133}
.contract-sign-state{max-width:620px;margin:14vh auto;padding:42px;text-align:center;background:#fff;border:1px solid #dce5f1;border-radius:22px;box-shadow:0 16px 48px #1f33551a}.contract-sign-error{border-color:#f1b9b9}.contract-sign-success{border-color:#a9dfc1}.contract-sign-check{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:#dff7e9;color:#147a47;font-size:36px;font-weight:800}
.contract-sign-head,.contract-sign-notice,.contract-sign-paper,.contract-sign-confirm{box-sizing:border-box;max-width:980px;margin-left:auto;margin-right:auto}.contract-sign-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:14px}.contract-sign-head h1{font-size:26.5px;margin:0 0 4px}.contract-sign-head p{margin:0;color:#667085}.contract-sign-expiry{text-align:right;font-size:13px;color:#667085}.contract-sign-notice{padding:14px 16px;background:#fff8dc;border:1px solid #eed887;border-radius:12px;font-size:14.5px;margin-bottom:16px}.contract-sign-notice code{word-break:break-all}
.contract-sign-paper{padding:64px 70px;background:#fff;border:1px solid #dce5f1;border-radius:12px;box-shadow:0 14px 42px #1f335516;font:15px/1.58 Arial,sans-serif}.contract-block{margin:0 0 9px}.contract-block.title{text-align:center;font-size:23.5px;font-weight:700;margin:18px 0}.contract-block.heading{font-size:18px;font-weight:700;margin-top:18px}.contract-block.subheading{font-weight:700}.contract-sign-columns{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin:20px 0}.contract-sign-pagebreak{border:0;border-top:1px dashed #aab4c3;margin:30px 0}
.contract-sign-manager{margin:20px 0;padding:15px;border:1px solid #c9d6ea;border-radius:11px;background:#f8faff}.contract-sign-manager span{display:block;font:700 12px/1.3 Manrope,Arial,sans-serif;color:#536987}.contract-sign-manager img{display:block;width:auto;max-width:min(100%,320px);max-height:130px;margin-top:8px}/* 320px лишається стелею НАВМИСНО: у вже виданих pending-посиланнях рамка підпису на всю ширину колонки, і зняти стелю означало б розтягнути підпис Наталії в документі, який клієнт уже відкривав. min(100%,320px) додає лише те, чого бракувало: у вузькій рамці картинка тепер не вилазить за неї, тож повзунок ширини для підпису GARNE нарешті щось означає. */
.contract-sign-field{margin:22px 0;padding:16px;border:3px solid #2f6feb;border-radius:15px;background:#f5f8ff;box-shadow:0 0 0 5px #2f6feb18}.contract-sign-field-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.contract-sign-field-head p{margin:2px 0 0;font:12px Manrope,Arial,sans-serif;color:#60718a}.contract-sign-canvas{display:block;width:100%;height:220px;background:#fff;border:2px dashed #8aa7d8;border-radius:10px;touch-action:none;cursor:crosshair}
.contract-sign-confirm{margin-top:18px;margin-bottom:40px;padding:20px;background:#fff;border:1px solid #dce5f1;border-radius:15px;box-shadow:0 12px 36px #1f335514}.contract-sign-confirm label{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5}.contract-sign-confirm input{width:20px;height:20px;margin-top:1px;flex:none}.contract-sign-submit{min-height:48px;margin:16px 0 8px;font-size:16px}.contract-sign-inline-error{margin:12px 0 0;color:#b42318;font-weight:650}
.contract-sign-manager-box{margin-top:9px;padding:9px 11px;border:1px solid var(--sky-line);border-radius:10px;background:var(--sky)}.contract-sign-manager-box summary{cursor:pointer;font-weight:700;color:var(--visa-ink)}.contract-sign-manager-grid{display:grid;grid-template-columns:1fr;gap:9px;margin-top:12px}.contract-sign-manager-grid label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-soft);min-width:0}.contract-sign-manager-grid label:nth-child(3){max-width:150px}
.contract-sign-manager-grid select,.contract-sign-manager-grid input{width:100%;max-width:100%;min-width:0}.contract-sign-manager-grid .btn{align-self:end;justify-self:start}
/* select у цій сітці інакше розтягується під довжину найдовшого варіанта (напр. "57. CONTRACTOR:
   GARNE LLC Florida Limited...") і виштовхує все праворуч за межі видимої панелі — кнопка
   "Створити захищене посилання" технічно існує в DOM, але людина її фізично не бачить без
   горизонтальної прокрутки, якої ніхто не робить. min-width:0 на label саме собою не досить:
   select усередині grid-колонки все одно бере свій природний розмір. */
.contract-sign-manager-grid select{width:100%;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/* Посилання на підпис — довгий рядок в вузькій колонці. min-width:260px розпирав панель
   зсередини (grid-колонка росте під min-content вмісту) і виштовхував кнопку «Створити
   захищене посилання» за край екрана. Тепер поле стискається до нуля й обрізає текст,
   а повне посилання людина бере кнопкою «Копіювати», а не виділенням мишею. */
.contract-sign-manager-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.contract-sign-manager-actions input{flex:1 1 0;min-width:0;font-family:var(--font-mono);font-size:12.5px;text-overflow:ellipsis}
.contract-sign-manager-actions .btn{flex:none}
.contract-sign-pipeline{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:11px}.contract-sign-pipeline span{padding:4px 8px;border:1px solid var(--sky-line);border-radius:999px;background:var(--paper);color:var(--slate);font-size:12px}.contract-sign-pipeline span.done{border-color:color-mix(in srgb,var(--good) 42%,var(--sky-line));color:var(--good)}.contract-sign-pipeline span.current{background:var(--good-soft);font-weight:800}
.contract-card-list{display:grid;gap:6px;margin-top:7px}.contract-card-item{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:7px 9px;background:var(--sky);border-radius:9px}.contract-card-item>span:first-child{flex:1;min-width:180px}
@media(max-width:700px){.contract-sign-page{padding:14px 0}.contract-sign-brand,.contract-sign-head,.contract-sign-notice,.contract-sign-confirm{margin-left:14px;margin-right:14px}.contract-sign-head{align-items:flex-start;flex-direction:column}.contract-sign-expiry{text-align:left}.contract-sign-paper{padding:30px 18px;border-radius:0;border-left:0;border-right:0}.contract-sign-columns{grid-template-columns:1fr;gap:12px}.contract-sign-manager img{max-width:100%}.contract-sign-canvas{height:190px}.contract-sign-state{margin:12vh 14px;padding:30px 20px}}
@media(max-width:700px){.contract-sign-manager-actions input{min-width:100%}}

/* ── Місце й розмір підпису: ОДНА верстка для прев'ю в CRM і для сторінки клієнта ────────
   Менеджер обирає місце й розмір поля перед відправкою (js/contracts/SignaturePlacer.js).
   Ширина зберігається у ВІДСОТКАХ ширини сторінки (--sign-w), а не в пікселях: договір
   перетікає під екран клієнта, і 600px, обрані на моніторі 1440px, на телефоні 390px просто
   вилізли б за край. Піксельна підлога 260px тримає поле придатним для підпису пальцем, а
   нижче 700px обидва поля беруть усю колонку й стають одне під одним — там вибір ширини
   вже нічого не вирішує, вирішує можливість розписатись.
   Одні й ті самі класи використовує і прев'ю в CRM: дві «схожі» верстки розійшлися б, і
   менеджер бачив би не те, що клієнт. */
.contract-sign-slot{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px;margin:22px 0}
.contract-sign-slot>*{box-sizing:border-box;width:min(100%,max(260px,var(--sign-w,100%)));min-width:min(100%,260px);margin-top:0;margin-bottom:0}
.contract-sign-slot>.sign-align-left{margin-right:auto;margin-left:0}
.contract-sign-slot>.sign-align-center{margin-left:auto;margin-right:auto}
.contract-sign-slot>.sign-align-right{margin-left:auto;margin-right:0}
/* Висота поля клієнта — вибір менеджера, але зі стелею у відсотках екрана: 320px на
   телефоні в альбомній орієнтації з'їли б увесь екран разом із кнопкою «Підписати». */
.contract-sign-canvas{height:clamp(110px,var(--sign-h,220px),46vh)}
@media(max-width:700px){.contract-sign-slot{gap:12px}.contract-sign-slot>*{width:100%;min-width:0;margin-left:0;margin-right:0}}

/* ── Вибір місця підпису перед відправкою (js/contracts/SignaturePlacer.js) ──────────── */
.sign-place-overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;background:rgba(11,22,38,.55)}
.sign-place-modal{position:relative;display:flex;flex-direction:column;width:min(1180px,100%);height:min(88vh,100%);background:var(--paper);border:1px solid var(--sky-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);overflow:hidden}
.sign-place-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--sky-line)}
.sign-place-head p{margin:3px 0 0}
.sign-place-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sign-place-phone{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft)}
.sign-place-phone input{width:16px;height:16px}
.sign-place-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 254px;min-height:0}
.sign-place-scroll{overflow:auto;background:var(--sky);padding:16px}
.sign-place-paper{max-width:820px;margin:0 auto;padding:40px 44px;font-size:15px}
.sign-place-paper.is-phone{max-width:390px;padding:26px 16px}
/* Режим «як на телефоні»: медіа-запит дивиться на ширину ВІКНА, а не контейнера, тож
   усередині CRM на 1440px він не спрацював би. Повторюємо ту саму поведінку вручну — щоб
   менеджер побачив, як його вибір звузиться на телефоні, ще ДО того, як відправить. */
.sign-place-paper.is-phone .contract-sign-slot>*{width:100%;min-width:0;margin-left:0;margin-right:0}
.sign-place-hit{cursor:pointer;border-radius:6px;outline:1px solid transparent}
.sign-place-hit:hover{background:var(--visa-soft);outline-color:color-mix(in srgb,var(--visa) 30%,transparent)}
.sign-place-hit.is-drop{background:var(--visa-soft);outline-color:var(--visa)}
.sign-place-ghost{position:relative;cursor:pointer}
.sign-place-ghost.is-active{box-shadow:0 0 0 3px color-mix(in srgb,var(--visa) 45%,transparent)}
/* Рамка, яку зараз тягнуть, лишається на старому місці (щоб не зсувати текст під курсором),
   тож вона мусить сама сказати «це я їду» — інакше здається, що перетягування не почалось. */
.sign-place-ghost.is-dragging{opacity:.45;outline:2px dashed color-mix(in srgb,var(--visa) 55%,transparent);outline-offset:3px}
.sign-place-stub{margin-top:8px;height:56px;display:grid;place-items:center;border:1px dashed #8aa7d8;border-radius:8px;background:#fff;font:11px var(--font-body);color:#60718a;text-align:center;padding:0 8px}
.sign-place-pad{display:grid;place-items:center}
.sign-place-grip{position:absolute;top:-11px;left:-11px;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:var(--visa);color:#fff;font-size:13px;line-height:1;cursor:grab;touch-action:none}
.sign-place-corner{position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;padding:0;border:2px solid var(--paper);border-radius:5px;background:var(--visa);cursor:nwse-resize;touch-action:none}
.sign-place-side{display:flex;flex-direction:column;gap:14px;padding:14px;border-left:1px solid var(--sky-line);overflow:auto}
.sign-place-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sign-place-row{display:flex;flex-direction:column;gap:6px}
.sign-place-row input[type=range]{width:100%}
.sign-place-label{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.sign-place-place,.sign-place-aligns{display:flex;gap:6px;flex-wrap:wrap}
.sign-place-note{margin:0}
/* Місце, куди стане рамка. Кульки на кінцях і підпис — щоб це читалось як позначка вставки,
   а не як випадкове підкреслення абзацу: тонку синю риску посеред синіх посилань договору
   просто не помічали. */
.sign-place-dropline{position:fixed;height:3px;border-radius:2px;background:var(--visa);box-shadow:0 0 0 3px color-mix(in srgb,var(--visa) 22%,transparent);pointer-events:none;z-index:70}
.sign-place-dropline::before,.sign-place-dropline::after{content:'';position:absolute;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--visa)}
.sign-place-dropline::before{left:-4px}
.sign-place-dropline::after{right:-4px}
.sign-place-droptag{position:absolute;left:0;bottom:14px;white-space:nowrap;padding:4px 9px;border-radius:var(--radius-sm);background:var(--visa);color:var(--paper);font:700 11.5px/1.25 var(--font-body);box-shadow:var(--shadow-pop)}
.sign-place-droptag::after{content:'';position:absolute;left:13px;bottom:-3px;width:8px;height:8px;background:var(--visa);transform:rotate(45deg);border-radius:1px}
/* Біля верхнього краю вікна прокрутки над лінією місця немає — підпис іде під неї. */
.sign-place-droptag.is-below{bottom:auto;top:14px}
.sign-place-droptag.is-below::after{bottom:auto;top:-3px}
.sign-place-summary{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink-soft);min-width:0;overflow-wrap:anywhere}
.sign-place-summary b{font-size:12.5px}
@media(max-width:900px){.sign-place-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}.sign-place-side{border-left:0;border-top:1px solid var(--sky-line)}.sign-place-paper{padding:24px 16px}}

/* Dark theme — same token names, dark values, toggled via [data-theme="dark"] on <html>
   (see setTheme() in store.js). Every component already reads colors through var(--token),
   so this single block re-themes the whole app with no per-component changes needed. */
:root[data-theme="dark"]{
  --paper:#141A24;
  --sky:#1B222E;
  --sky-deep:#222A38;
  --sky-line:#2B3444;
  --ink:#ECF1F8;
  --ink-soft:#B9C3D6;
  --slate:#8B96AC;
  --slate-2:#6B7690;
  --visa:#E6A165;
  --visa-ink:#F0C193;
  --visa-soft:#2E2318;
  --brand-logo:#E6A165;
  --stamp:#E8593A;
  --stamp-soft:#3A2420;
  --good:#33B37B;
  --good-soft:#1B3428;
  --amber:#D99A3D;
  --amber-soft:#3A2E14;
  --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.2);
  --shadow-pop:0 12px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  --slogan:#3A4557;
}

/* Нічна — чорно-помаранчева (власник, 20.09.2026). Не «ще темніша темна»: тло майже чорне,
   як у нічних темах месенджерів, а акцент теплий. Саме тому вона окрема, а не темна з іншим
   акцентом — на #0D0D0F інакше поводяться межі й тіні, і сірі #2B3444 з темної теми на ньому
   читаються як бруд. Акцент усе одно можна перебити вручну: --visa задає applyAccent(). */
:root[data-theme="night"]{
  --paper:#0D0D0F;
  --paper-2:#141417;
  --sky:#17171B;
  --sky-deep:#1F1F24;
  --sky-line:#2A2A30;
  --sky-soft:#17171B;
  --ink:#F2EFEA;
  --ink-soft:#C9C2B8;
  --ink-invert:#0D0D0F;
  --slate:#948C80;
  --slate-2:#6E675D;
  --visa:#E6A165;
  --visa-ink:#EDB07A;
  --visa-soft:#2C1D0D;
  --brand-logo:#E6A165;
  --stamp:#F2603C;
  --stamp-soft:#33180F;
  --good:#3FBE86;
  --good-soft:#12291D;
  --amber:#E0A93F;
  --amber-soft:#2E2210;
  --shadow-card:0 1px 2px rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.4);
  --shadow-pop:0 12px 32px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5);
  --slogan:#3A352C;
}

/* Вибір теми й кольору в меню профілю. */
.theme-pick{padding:8px 12px 10px; border-bottom:1px solid var(--sky-line);}
.theme-pick__row{display:flex; gap:6px;}
.theme-opt{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 4px; border:1px solid var(--sky-line); border-radius:9px;
  background:var(--paper); color:var(--ink-soft); cursor:pointer;
  font-size:11px; font-family:var(--font-body); line-height:1.2;
}
.theme-opt svg{width:15px; height:15px;}
.theme-opt:hover{border-color:var(--visa);}
.theme-opt.active{border-color:var(--visa); color:var(--visa); background:var(--visa-soft); font-weight:600;}
.theme-pick__dots{display:flex; gap:7px; margin-top:9px; flex-wrap:wrap;}
.accent-dot{
  width:20px; height:20px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid transparent; outline:1px solid var(--sky-line); outline-offset:-1px;
}
/* Обраний кружечок — кільце навколо, а не галочка всередині: галочка на темному колі
   зливається, а кільце видно на будь-якому. */
.accent-dot.active{border-color:var(--paper); box-shadow:0 0 0 2px var(--ink-soft);}
/* «За темою» — половинки двох типових кольорів, щоб було видно, що це не окремий колір. */
.accent-dot--auto{background:linear-gradient(135deg, #A85F1F 0 50%, #F97316 50% 100%);}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
svg{width:1em; height:1em; flex-shrink:0; display:inline-block;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  line-height:1.5;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--ink); margin:0; letter-spacing:-0.02em;}
::selection{background:var(--visa-soft); color:var(--visa-ink);}
a{color:inherit;}
button{font-family:inherit;}

::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--sky-line); border-radius:8px; border:2px solid var(--paper);}
::-webkit-scrollbar-thumb:hover{background:var(--slate-2);}

.mono{font-family:var(--font-mono);}

/* ===== App shell ===== */
.shell{display:flex; height:100vh; overflow:hidden;}

.rail{
  /* 224px вистачало, доки шрифт був дрібним. Після підняття кегля «Дашборд керівника» і
     «Опитування клієнтів» почали обрізатись трьома крапками — власник: «зроби, щоб не
     губилось». Розширили смугу, а не зменшили назад шрифт: назва розділу, яку не видно
     цілком, змушує вгадувати, куди тиснеш. */
  width:252px;
  /* Панель світла. Темно-синій варіант ми пробували (власник показав макет із темною
     колонкою) — і на живому екрані він програв: подивившись, власник сказав «поверни як
     було, краще». Лишаю це в коментарі, щоб за пів року хтось не почав пробувати заново. */
  background:var(--paper);
  border-right:1px solid var(--sky-line);
  display:flex; flex-direction:column; align-items:stretch;
  padding:18px 12px 14px;
  flex-shrink:0;
  z-index:20;
}
.rail-brand{
  display:flex; align-items:center; gap:10px;
  margin:0 0 22px 4px;
}
.rail-logo{
  width:40px; height:40px; border-radius:12px;
  box-shadow:0 4px 10px rgba(168,95,31,.25);
  background:linear-gradient(135deg, var(--visa), var(--visa-ink));
  display:flex; align-items:center; justify-content:center;
  /* Знак завжди БІЛИЙ, навіть на світлому піщаному акценті (рішення власника, 03.10.2026:
     «білий тут має бути, не чорний»). Це не недогляд контрасту: у ProPart біла версія знака
     — офіційна (logo-white.png), а логотипи й так виведені з-під вимог WCAG до контрасту.
     Саме тому тут жорсткий #fff, а не --visa-on, який рахує підпис за яскравістю. */
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:16px;
  flex-shrink:0;
}
.rail-logo svg{width:23px; height:23px;}
/* Назва у два рядки, а не «ProPart Desk» в один. Рахунок простий: смуга 252px, з них
   на текст лишається ~170px після відступів, знака й проміжку, а рядок у 18px Manrope Bold
   займає ~165px — тобто влазив би впритул і обрізався б трьома крапками на перший же
   довший бренд. Два рядки читаються як нормальний продуктовий локап: ProPart — компанія,
   Desk — сама система. */
.rail-brand-lockup{
  display:flex; flex-direction:column; gap:1px; min-width:0;
}
.rail-brand-label{
  font-family:var(--font-display); font-weight:700; font-size:18px;
  color:var(--ink); letter-spacing:-.01em; white-space:nowrap; line-height:1.1;
}
.rail-brand-product{
  font-family:var(--font-display); font-weight:600; font-size:11px;
  color:var(--slate-2); letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
}
/* Партнерський логотип на публічному дашборді клієнта (ClientView.js) — окремий контейнер від
   .rail-logo, навмисно. .rail-logo — квадрат під іконку-гліф на кольоровому фоні (як у GARNE).
   Лого партнера — растрове зображення довільних пропорцій (INFO+ — широкий wordmark ~4.5:1
   після обрізки прозорих полів навколо самого знака; Move Nation — майже квадрат), і та сама
   квадратна рамка стискала б широкий лого по ширині, лишаючи його вдвічі нижчим за GARNE —
   саме це й було проблемою до фіксу. Тут висота зафіксована так само, як у GARNE (40px), а
   ширина вільна (object-fit:contain), тож символ партнера завжди такий самий на зріст, скільки
   б місця не займав по горизонталі. max-width — лише запобіжник від аномально широкого файлу
   (INFO+ за такої висоти й пропорції займає ≈180px), не звичайний режим роботи. */
.partner-logo{
  height:40px; width:auto; max-width:200px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.partner-logo img{height:100%; width:auto; max-width:200px; object-fit:contain; display:block;}
/* Раніше rail-nav був суто іконками (76px), тепер завжди розгорнутий — підпис читається без
   ховеру. Пункти лишаються кнопками зі своєю шириною 100%, а не фіксованим квадратом.
   overflow-y тут, а не на .rail: логотип згори й «Вийти» знизу мають лишатись на місці, коли
   екран низький, а не з'їжджати разом зі списком — скролиться лише сам список пунктів. Якщо
   overflow повісити на .rail, min-height:0 тут змушує flex стиснути цей блок, а його вміст,
   не маючи власного overflow, просто вилазить поверх «Вийти» замість того, щоб скролитись. */
/* overflow-x:hidden — інакше під «Вийти» висіла горизонтальна смуга прокрутки: пункти меню
   на 4px ширші за колонку (203 проти 199), і браузер малював повзунок заради цих чотирьох
   пікселів. Гортати список розділів убік нікому не треба — там нема куди. */
.rail-nav{display:flex; flex-direction:column; gap:2px; flex:1; width:100%; min-height:0; overflow-y:auto; overflow-x:hidden;}
.rail-item{
  width:100%; min-height:44px; border-radius:12px;
  display:flex; align-items:center; gap:12px;
  padding:0 12px;
  color:var(--slate); cursor:pointer; position:relative;
  transition:background .15s ease, color .15s ease;
  border:none; background:none;
  text-align:left; flex-shrink:0;
}
.rail-item-icon{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex-shrink:0; position:relative;
}
.rail-item-icon svg{width:22px; height:22px; stroke-width:2.3;}
/* Довгі підписи («Написання петиції») не мають розпирати панель — обрізаються з трьома
   крапками, повний текст лишається в title атрибуті кнопки. */
.rail-item-label{
  /* Замість трьох крапок — перенос на другий рядок. Довгих назв у меню дві, і другий
     рядок у них чесніший за обрізок: людина читає розділ, а не здогадується про нього. */
  font-size:15px; font-weight:600; line-height:1.25;
  flex:1; min-width:0; overflow-wrap:break-word;
}
.rail-item:hover{background:var(--sky); color:var(--ink);}
.rail-item.active{background:var(--visa-soft); color:var(--visa);}
.rail-item .dot{
  position:absolute; top:9px; right:10px;
  width:8px; height:8px; border-radius:50%;
  background:var(--stamp); border:2px solid var(--paper);
}
/* Раніше бейдж сідав абсолютно поверх іконки (кнопка була квадратом 52×52, нікуди більше
   класти не було). Тепер рядок на всю ширину панелі, і той самий absolute-офсет ліг би поверх
   тексту підпису. Бейдж — звичайний flex-елемент праворуч рядка: підпис усихає до еліпсису
   раніше, ніж дійде до нього, а не ховається під ним. */
.rail-item-badge{position:static; flex-shrink:0; margin-left:auto;}
/* Зовнішній пункт меню малюється <a> — браузер підкреслив би підпис, а в рейці підкреслень немає ні в кого. */
a.rail-item{text-decoration:none;}
.rail-item--logout{flex-shrink:0; margin-top:8px;}

/* Меню налаштувань. Той самий rail-item, але підпис може займати два рядки, тож значок
   притиснутий до першого рядка, а не відцентрований по всій висоті рядка. Ширина колонки
   значка фіксована — підписи вишикувані в один стовпчик незалежно від ширини емодзі. */
/* Розкладка Налаштувань. Раніше стояла inline-стилем «220px 1fr» без жодного мобільного
   правила — і на телефоні під вміст лишалось близько 135 пікселів: кнопки там були, але
   розчавлені до непридатності. Власник, 26.09.2026: «у мене на мобільній версії немає опції
   додати людину абсолютно» — вона була, просто її не можна було ні побачити, ні натиснути. */
.settings-layout{display:grid; grid-template-columns:220px 1fr; gap:20px; align-items:start;}
/* Кнопка «назад» живе лише в телефонній розкладці (див. блок телефонних примітивів). */
.settings-back{display:none; align-items:center; gap:6px; margin:-4px 0 12px -6px;
  border:0; background:none; cursor:pointer; padding:11px 6px; min-height:44px;
  font:650 14.5px/1 var(--font-body); color:var(--visa); font-family:var(--font-body);}
.settings-back svg{width:17px; height:17px;}
@media(max-width:860px){
  /* Список розділів стає горизонтальною стрічкою над вмістом: на вузькому екрані
     вертикальне меню на пів сторінки — це сторінка, на якій нічого не видно. */
  .settings-layout{grid-template-columns:1fr; gap:12px;}
  .settings-layout > .card:first-child{display:flex; flex-wrap:wrap; gap:6px; padding:10px;}
  .settings-layout .settings-nav-item{width:auto; flex:0 0 auto; padding:8px 12px;}
  .settings-layout .settings-nav-label{font-size:13px;}
}
.settings-nav-item{
  width:100%; min-height:0; height:auto; align-items:flex-start; justify-content:flex-start;
  gap:9px; padding:9px 11px; border-radius:9px;
}
.settings-nav-emoji{
  flex:none; width:20px; text-align:center; font-size:15.5px; line-height:17px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--font-body);
}
.settings-nav-label{flex:1; min-width:0; font-size:14px; font-weight:600; line-height:17px;}
.settings-nav-badge{margin-left:auto; flex:none; align-self:center;}

.main{flex:1; display:flex; flex-direction:column; min-width:0; background:var(--sky); }

.topbar{
  height:64px; flex-shrink:0; background:var(--paper); border-bottom:1px solid var(--sky-line);
  display:flex; align-items:center; gap:16px; padding:0 24px;
}
.search-box{
  flex:1; max-width:420px; height:38px; background:var(--sky); border-radius:10px;
  display:flex; align-items:center; gap:8px; padding:0 12px; color:var(--slate-2);
}
/* The search box draws its own pill, so the input inside it stays bare. Written with the same
   :not() chain as the element-level control rule further down, because that rule counts four
   attribute selectors and would otherwise out-specify a plain `.search-box input`. */
.search-box input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]){
  border:none; background:none; outline:none; box-shadow:none; padding:0; border-radius:0;
  font-size:15px; color:var(--ink); width:100%; font-family:var(--font-body);
}
.search-box svg{width:16px; height:16px; flex-shrink:0;}

.topbar-spacer{flex:1;}
/* The line the firm sells with, sitting in the empty stretch of the top bar. It takes the place
   of the old spacer, so it also does the spacer's job of pushing the controls to the right.
   Deliberately barely-there: it should register once and then stop being noticed, so it is
   drawn a shade off the bar itself rather than in any real colour. Hidden on narrow screens,
   where that stretch belongs to the search box and the controls. */
.topbar-slogan{
  flex:1; min-width:0; text-align:center; padding:18px 12px;
  font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1;
  letter-spacing:.02em; color:var(--slogan);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  user-select:none; pointer-events:none;
}
@media (max-width:1240px){ .topbar-slogan{font-size:16px; padding:18px 8px;} }
@media (max-width:1000px){ .topbar-slogan{display:none;} .topbar .search-box{flex:1;} }

.role-switch{
  display:flex; align-items:center; gap:6px; background:var(--sky); border-radius:10px; padding:4px; font-size:14px;
}
.role-switch button{
  border:none; background:none; padding:6px 10px; border-radius:7px; cursor:pointer; color:var(--slate); font-weight:600;
  font-family:var(--font-body);
}
.role-switch button.active{background:var(--paper); color:var(--visa); box-shadow:var(--shadow-card);}

.icon-btn{
  width:38px; height:38px; border-radius:10px; border:none; background:var(--sky);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); cursor:pointer; position:relative;
  transition:background .15s, transform .1s ease;
}
.icon-btn:hover{background:var(--sky-deep);}
.icon-btn:active{transform:scale(.92);}
.icon-btn:disabled{opacity:.35; cursor:not-allowed;}
.icon-btn:disabled:hover{background:var(--sky);}
.icon-btn svg{width:17px; height:17px;}
/* Telegram-кнопка в метаданих картки клієнта (поруч із «Відповідальний») — не другорядна дія
   серед дрібних іконок хедера, а основний спосіб написати клієнту, тож помітно більша за
   звичайний icon-btn. Коло, не квадрат зі скругленням — на цьому розмірі так читається як
   самостійна кнопка, а не квадратна плитка. */
.telegram-btn-lg{width:46px; height:46px; border-radius:50%;}
.telegram-btn-lg svg{width:22px; height:22px;}
/* The chat selector is anchored beside the left-most control in the client header.  Generic
   .pop opens towards the left (`right:0`), which put this particular panel underneath the
   fixed navigation rail and clipped half of the form.  This one must grow into the card. */
.chat-channel-pop{
  top:50px; left:0; right:auto; width:min(300px, calc(100vw - 32px)); padding:14px;
  transform-origin:top left;
}
.client-chat-control{position:relative; order:2; max-width:100%;}
.client-head-row .resp-project{order:1;}
.client-head-row .client-place{order:3;}
.client-head-row > .gap-dot,.client-head-row > .gap-text{order:4;}
.chat-channel-btn{
  min-height:44px; padding:0 14px; border-radius:22px; border:1px solid var(--sky-line);
  background:var(--sky); color:var(--ink-soft); display:inline-flex; align-items:center;
  justify-content:center; gap:8px; font:700 12.5px/1 var(--font-body); cursor:pointer;
  white-space:nowrap; transition:background .15s, transform .1s ease;
}
.chat-channel-btn:hover{background:var(--sky-deep);}
.chat-channel-btn:active{transform:scale(.97);}
.chat-channel-btn__icon{display:flex; width:23px; height:23px; flex:0 0 23px;}
.chat-channel-btn__icon svg{width:100%; height:100%;}
.client-chat-pop{
  left:0; right:auto; top:50px; width:min(320px, calc(100vw - 32px)); padding:14px;
  overflow:visible; transform-origin:top left;
}
.badge-count{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; border-radius:9px;
  background:var(--stamp); color:white; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
  padding:0 4px; border:2px solid var(--paper); font-family:var(--font-body);
}
/* An unanswered question pulses until it's dealt with — a static count reads the same as the
   ordinary "you have new tasks" badge and gets tuned out. */
.badge-count--ask{animation:badge-pulse 1.6s ease-in-out infinite;}

/* Кнопка «Перенесення дедлайну» в задачах.
   Не вкладка поруч із «Мої / Поставлені», і це свідомо: ті дві — два погляди на один список,
   а тут справа, яка ЧЕКАЄ рішення. Доки не відповіли — людина не знає, до якого числа їй
   здавати роботу, тож кнопка світиться бурштином, а лічильник пульсує тим самим рухом, що й
   непрочитане питання. Відповіли на всі — кнопка зникає сама. */
.deadline-req-btn{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  border:1px solid var(--amber); background:color-mix(in srgb, var(--amber) 10%, var(--paper));
  color:var(--ink); border-radius:10px; padding:8px 12px; font-weight:600;
}
.deadline-req-btn:hover{background:color-mix(in srgb, var(--amber) 18%, var(--paper));}
.deadline-req-btn--active{background:var(--amber); border-color:var(--amber); color:#fff;}
.deadline-req-btn--active .deadline-req-count{background:#fff; color:var(--amber);}

/* Пошук клієнта у вікні «Додати завдання».
   Власний список замість <select>: дві попередні спроби провалились саме на ньому —
   розгорнутий список не згортається після вибору, згорнутий ховає знайдене. Тут список
   малюється під полем і зникає, щойно людина обрала рядок. */
.client-pick{position:relative;}
.client-pick input{width:100%;}
/* ── Вікно фільтрів списку клієнтів ───────────────────────────────────────────────────
   Кнопка носить кількість увімкнених фільтрів. Без цієї цифри звужений список читається як
   «у нас поменшало клієнтів», а не як «стоїть фільтр» — особливо після оновлення сторінки,
   бо вибір зберігається (persistedRef у store.js). */
.client-filters-btn.has-active{border-color:var(--visa); color:var(--visa);}
.client-filters-count{
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--visa); color:var(--visa-on,#fff); font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.filter-row{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.filter-row > label{font-size:12px; font-weight:600; color:var(--slate-2); letter-spacing:.02em;}
/* Партнери — чипами: їх обирають по кілька одразу, і обране має бути видно все й одразу,
   а не ховатись за одним рядком випадайки. */
/* Рупор «є PR-активності» на критерії й на папці. Inline-flex і vertical-align — щоб він
   стояв на одному рядку з назвою й не збивав її базову лінію, навіть коли назва переноситься. */
.pr-mark{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:-2px;
  width:21px; height:21px; border-radius:6px; flex-shrink:0;
  background:color-mix(in srgb, var(--visa) 14%, transparent); color:var(--visa);
}
.pr-mark svg{width:14px; height:14px;}
/* Цитата в шапці «Клієнтів». Раніше стиль стояв inline у шаблоні — винесений сюди, щоб
   випадкова правка розмітки не забрала його з собою разом із рядком. */
.clients-quote{
  font-style:italic; text-align:right; margin:0 40px 6px 0; flex:0 1 auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── Рядки задачі: клієнт і виконавці ─────────────────────────────────────────────────
   Обидва рядки були одним і тим самим сірим 12.5px на #8592AA — це контраст 3.14:1 при
   нормі 4.5, тобто текст об'єктивно недочитувався (власник, 19.09.2026: «сірий шрифт якийсь
   дрібний і погано видно»). Але справа не лише в контрасті: це РІЗНІ за важливістю речі.
   Ім'я клієнта відповідає «про кого задача» — його шукають очима в списку з чотирьохсот
   рядків. «Поставив → Виконавець» — службова довідка, потрібна рідше. Тому клієнт став
   помітним (10.27:1), а рядок людей лишився дрібним, але вже читабельним (5.39:1). */
/* Кегль тут піднятий двічі, і другий раз — після того, як власник подивився на живий екран
   і сказав «дуже дрібно» вже на 13.5px. Причина не в смаку: цей список читають з робочої
   відстані на великому моніторі, де 12–13px перетворюються на сірий шум. 15px — це той
   розмір, з якого рядок читається, не нахиляючись до екрана. */
.task-title{font-weight:600; font-size:16px; line-height:1.4;}
/* .hint.task-client, а не просто .task-client: обидва селектори однаково специфічні, а
   .hint{font-size:12.5px} оголошений НИЖЧЕ в цьому файлі — тож він перемагав, і кегль мовчки
   лишався старим. Побачити це можна лише в computed style браузера: у самому CSS правило
   виглядає бездоганно. */
.hint.task-client{
  font-size:15.5px; color:var(--ink-soft); font-weight:600;
  display:inline-flex; align-items:center; gap:7px; margin-top:2px;
}
.hint.task-client::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--visa); flex-shrink:0;
}
/* Задача без клієнта — звичайна річ (taskClientLabel повертає порожній рядок). Без цього
   правила від неї лишалася б сама синя крапка, що висить у повітрі й нічого не означає. */
.hint.task-client:empty{display:none;}
/* 13.5px, а не 12: власник подивився на живий список і сказав «нічого не видно» вдруге.
   Рядок довгий («Поставив: Юлія Дитюк (Проджект-менеджмент EB 1A / EB 2 NIW) → Виконавець:
   Анастасія Шеміцька (Фінанси)»), і саме на довгому рядку дрібний кегль втомлює найшвидше. */
/* Колір теж піднятий до --ink-soft: на великому моніторі --slate (5.39:1) усе одно читався
   як сірий шум — власник сказав «дуже погано читається» вже після першого підняття кегля.
   Ієрархія лишається за вагою й крапкою біля клієнта, а не за блідістю службового рядка. */
.hint.task-people{font-size:15px; color:var(--ink-soft); margin-top:4px; line-height:1.5;}
/* «від кого» — приписка до рядка клієнта, а не окремий рядок: легша за назву клієнта, щоб
   око спершу читало задачу й клієнта, а вже потім, за потреби, автора. */
/* Колонка дедлайну в рядку задачі. Була прибита інлайном width:212px — на телефоні це
   означало, що з 390 px екрана 212 забирає дата, ще 113 кнопка «Виконано», ще пілюля
   статусу, а назві задачі лишалось кілька пікселів, і вона сипалась по одній літері в
   рядок. Власник, 30.09.2026, зі знімком: «як ніби тобі дав розробник, який взагалі не
   дивився CRM». Тепер ширина в класі — її можна перевизначити на вузькому екрані. */
.task-dl-col{text-align:right; width:212px; flex:none;}
.task-main{flex:1; min-width:0;}
.task-sub{display:flex; align-items:center; flex-wrap:wrap; gap:0 9px; min-width:0;}
.task-from{font-weight:400; font-size:13px; color:var(--slate);}
/* Згортка секції: уся шапка — ціль натискання, а не самі три слова. Стрілка повертається,
   щоб стан читався без підпису «розгорнути». */
.section-fold{cursor:pointer; user-select:none; margin-bottom:0;}
.section-fold.is-open{margin-bottom:14px;}
.section-fold:hover .section-title{color:var(--visa);}
.section-fold__chev{display:inline-flex; margin-left:8px; transition:transform .15s ease; vertical-align:middle;}
.section-fold__chev svg{width:15px; height:15px;}
.section-fold.is-open .section-fold__chev{transform:rotate(90deg);}
/* Крапка-роздільник лише тоді, коли ліворуч справді щось є. Задача без клієнта інакше
   починалась із самотнього «· від Алла Хоменко». */
.task-sub > :not(.task-from) + .task-from::before{content:'· '; opacity:.5;}
.hint.task-dl-change{font-size:14.5px; color:var(--ink-soft); margin-top:6px; line-height:1.5;}

/* Годинник на час завантаження дашборда. Емодзі, а не спінер із CSS: стрілка, що обходить
   циферблат, читається як «іде час», а не як «щось крутиться», — і саме це питання виникає,
   коли екран довго порожній. */
.dash-clock{font-size:34px; line-height:1; user-select:none;}

/* ── Клікабельні цифри дашборда ───────────────────────────────────────────────────────
   Число, за яким стоїть список, має виглядати як число, а не як кнопка: керівник читає
   картку, а не шукає, куди тиснути. Тому ніякої рамки — лише значок списку поруч і підсвітка
   на наведенні, щоб той, хто захоче перевірити, зрозумів, що це можливо. */
.metric-drill{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  background:none; border:none; padding:0; cursor:pointer; color:inherit; font:inherit;
}
.metric-drill__hint{display:inline-flex; color:var(--slate-2); opacity:.55; transition:opacity .12s, color .12s;}
.metric-drill__hint svg{width:15px; height:15px;}
.metric-drill:hover .num{color:var(--visa);}
.metric-drill:hover .metric-drill__hint{opacity:1; color:var(--visa);}
.metric-bar-row{display:flex; align-items:center; gap:12px; margin-bottom:9px; border-radius:7px;}
.metric-bar-row.is-drillable{cursor:pointer; margin-left:-6px; margin-right:-6px; padding:3px 6px;}
.metric-bar-row.is-drillable:hover{background:var(--sky-soft, #F1F5F9);}
/* Партнер на плитці дошки. Дрібніший за pill у ряду чипів вище навмисно: це довідка «чий
   клієнт», а не характеристика кейсу, і вона не повинна сперечатися за увагу з типом візи. */
/* Без заливки: колір крапки вже називає партнера, а плашка навколо кожного імені додавала
   дошці ще один шар прямокутників поверх і так рясної картки. */
.kanban-source{
  display:inline-flex; align-items:center; gap:5px; flex-shrink:1; min-width:0;
  padding:0; font-size:11px; font-weight:600; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kanban-source__dot{width:6px; height:6px; border-radius:50%; flex-shrink:0;}
.filter-chips{display:flex; flex-wrap:wrap; gap:7px;}
.filter-chip{
  border:1px solid var(--sky-line); background:var(--paper); color:var(--ink-soft);
  border-radius:999px; padding:7px 13px; font-size:12.5px; font-family:var(--font-body);
  cursor:pointer; transition:background .12s, border-color .12s, color .12s;
}
.filter-chip:hover{border-color:var(--visa);}
.filter-chip.active{background:var(--visa); border-color:var(--visa); color:var(--visa-on,#fff); font-weight:600;}
/* Перемикачі «так / ні / усі» тягнемо на всю ширину рядка, щоб вони стояли в одну колонку
   з випадайками вище — інакше вікно виглядає зібраним із двох різних форм. */
.filter-switch{width:100%;}
.filter-switch button{flex:1; white-space:nowrap;}
@media (max-width:560px){
  .filter-switch{flex-wrap:wrap;}
  .filter-switch button{flex:1 1 30%;}
}
.client-pick-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:none; background:none; cursor:pointer; color:var(--slate-2);
  display:flex; align-items:center; padding:2px; line-height:0;
}
.client-pick-clear:hover{color:var(--ink-soft);}
.client-pick-list{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40;
  background:var(--paper); border:1px solid var(--sky-line); border-radius:10px;
  box-shadow:var(--shadow-pop); overflow:auto; max-height:260px; padding:4px;
}
.client-pick-row{
  display:flex; align-items:baseline; gap:8px; width:100%; text-align:left;
  border:none; background:none; cursor:pointer; padding:7px 9px; border-radius:7px;
  font-family:inherit; font-size:13.5px; color:var(--ink);
}
.client-pick-row:hover,.client-pick-row.is-active{background:var(--sky);}
.client-pick-row.is-picked{color:var(--visa); font-weight:600;}
.client-pick-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.client-pick-sub{font-size:11.5px; color:var(--slate-2); flex:none;}
.client-pick-empty{padding:10px; font-size:12.5px; color:var(--slate-2);}

.deadline-req-count{
  min-width:19px; height:19px; border-radius:10px; padding:0 5px;
  background:var(--stamp); color:#fff; font-size:11.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  animation:badge-pulse 1.6s ease-in-out infinite;
}
/* Deploy notice. Deliberately a dismissible strip and not a blocking overlay: shipping a fix
   must not stop 55 people mid-sentence, so the tab just offers the reload. */
.update-bar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:80;
  display:flex; align-items:center; gap:12px; padding:10px 12px 10px 16px;
  background:var(--paper); border:1px solid var(--sky-line); border-radius:14px;
  box-shadow:0 14px 38px rgba(20,30,60,.16);
}
.update-bar-text{font-size:14.5px; font-weight:600; color:var(--ink);}
.update-bar-ic{display:flex; color:var(--visa);}
.update-bar-ic svg{width:17px; height:17px;}
@keyframes badge-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.22);}}

.avatar{
  width:41px; height:41px; border-radius:12px; background:var(--visa-soft); color:var(--visa-ink);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; font-family:var(--font-display);
  flex-shrink:0;
}
.avatar.sm{width:30px; height:30px; font-size:13px; border-radius:8px;}

/* Presence dot. Sits on the avatar rather than beside the name so it reads at a glance in a
   list, the way it does in a messenger. The ring is the page background, not white — otherwise
   it draws a white halo in dark theme. */
.avatar-wrap{position:relative; display:inline-flex; flex-shrink:0;}

/* Avatar crop viewport. The square is the visible area; everything outside is dimmed so it is
   obvious what will be kept. */
.crop-stage{
  position:relative; overflow:hidden; border-radius:16px; background:var(--sky-deep);
  cursor:grab; touch-action:none; user-select:none; flex-shrink:0;
}
.crop-stage:active{cursor:grabbing;}
.crop-stage img{position:absolute; left:0; top:0; max-width:none; pointer-events:none; display:block;}
.crop-mask{
  position:absolute; inset:0; pointer-events:none; border-radius:16px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85), inset 0 0 0 3px rgba(11,22,38,.12);
}

.online-dot{
  position:absolute; left:-2px; bottom:-2px; width:11px; height:11px; border-radius:99px;
  background:#22C55E; border:2px solid var(--paper); box-shadow:0 0 0 1px rgba(11,22,38,.06);
}
.avatar-wrap .avatar.sm + .online-dot{width:9px; height:9px; border-width:1.5px;}
.avatar-wrap .avatar.lg + .online-dot{width:14px; height:14px;}
/* Elizabeth у розділі «Команда». Окрема картка над відділами: вона не людина з бази, і в
   лічильники відділів не входить (див. коментар у Team.js). */
.team-ai-card .team-person{width:100%;}
.team-ai-ava{position:relative; flex:0 0 auto; line-height:0;}
/* Кругле, а не заокруглений квадрат. Власник: «и пусть круглые будут тоже все как
   елизабет» — у шапці Elizabeth кругла, і три помічниці в «Роботах» мусять читатись як
   та сама сутність, а не як три різні віджети. */
.team-ai-face{width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:50% 50%; display:block;}

.avatar.lg{width:64px; height:64px; font-size:22.5px; border-radius:16px;}

.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px 6px 4px 4px; border-radius:10px;}
.user-chip:hover{background:var(--sky);}
.user-chip .name{font-size:14.5px; font-weight:600; color:var(--ink);}
.user-chip .role{font-size:12.5px; color:var(--slate);}

.view{flex:1; overflow-y:auto; padding:28px 32px 60px;}

/* ===== Page header ===== */
.page-head{margin-bottom:24px;}
.page-head h1{font-size:25.5px; font-weight:700;}
.page-head p{color:var(--slate); font-size:15px; margin-top:4px;}
.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--visa);
  margin-bottom:6px; display:block;
}

/* ===== Cards / surfaces ===== */
.card{
  background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.pad-lg{padding:24px;}
.pad-md{padding:18px;}

/* ===== Stat tiles ===== */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px;}
.stat-tile{
  background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-lg);
  padding:18px 20px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, box-shadow .15s, transform .15s;
}
.stat-tile[style*="cursor:pointer"]:hover{border-color:var(--visa); box-shadow:var(--shadow-card); transform:translateY(-1px);}
.stat-tile .top{display:flex; align-items:center; justify-content:space-between;}
.stat-tile .icon{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.stat-tile .icon svg{width:17px; height:17px;}
.stat-tile .num{font-family:var(--font-display); font-size:32px; font-weight:700; line-height:1;}
.stat-tile .label{color:var(--slate); font-size:14px; font-weight:500;}
.stat-tile .trend{font-size:12.5px; font-weight:600; padding:2px 7px; border-radius:6px;}

/* ===== Finance: client payments journal ===== */
.fin-summary{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px;}
.fin-summary .num{font-family:var(--font-display); font-size:27.5px; font-weight:700; line-height:1.25;}
.fin-summary .label{color:var(--slate); font-size:14px; font-weight:500; margin-top:6px;}
.fin-summary-amounts div{line-height:1.3;}
.fin-filters-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px; align-items:center;}
.fin-filters-grid input, .fin-filters-grid select{width:100%;}
/* Рядок деталей платежу в аналітиці. На вузькому екрані дозволяємо переноситись, а не
   викидати кнопку «Відкрити» за межі таблиці — на телефоні фінансист теж дивиться. */
.fin-analytics-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:7px 0; border-bottom:1px solid var(--sky-line);}
.fin-analytics-row:last-child{border-bottom:none;}
.fin-payment-row{gap:16px;}
.fin-pay-date{width:150px; flex-shrink:0; font-size:14.5px;}
.fin-detail-grid{display:grid; grid-template-columns:130px 1fr; row-gap:12px; column-gap:12px; font-size:15px;}
.fin-detail-label{color:var(--slate); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.03em; padding-top:2px;}
@media (max-width:720px){
  .fin-summary{grid-template-columns:1fr;}
  .fin-payment-row{flex-wrap:wrap;}
  .fin-pay-date{width:auto;}
}

/* Банер «N платежів чекають перевірки» у Фінансах. Жовтий, а не червоний: це не поломка,
   а робота, до якої не дійшли руки, — і червоним на цьому екрані позначені відхилені. */
.fin-pending-bar{display:flex; gap:14px; align-items:center; margin-bottom:14px;
  background:var(--amber-soft); border:1px solid var(--amber-soft);}
.fin-pending-bar b{color:var(--amber);}
@media (max-width:560px){ .fin-pending-bar{flex-wrap:wrap;} .fin-pending-bar .btn{width:100%;} }

/* Панель масової дії над таблицею оплат партнера. Синя, а не жовта: це не попередження, а
   дія, яку людина сама щойно почала, обравши рядки. */
.pay-bulk-bar{display:flex; gap:10px; align-items:center; margin-bottom:12px;
  background:var(--visa-soft); border:1px solid var(--visa-soft);}
@media (max-width:560px){ .pay-bulk-bar{flex-wrap:wrap;} .pay-bulk-bar .btn{width:100%;} }

/* Галочка «розрахунок з партнером проведено» — поруч зі статусом. Збільшена площа натиску:
   у таблиці рядок сам по собі клікабельний, і промах по чекбоксу відкривав би деталі. */
.pay-settle{display:inline-flex; align-items:center; padding:2px 8px 2px 0; cursor:pointer; vertical-align:middle;}
.pay-settle input{width:16px; height:16px; cursor:pointer; accent-color:var(--good);}

/* Попап скріншота оплати. Окремий шар, а не нова вкладка: фінансист звіряє скрін із
   графами форми, і вкладка щоразу забирала форму з очей. */
.shot-pop{position:fixed; inset:0; z-index:9000; background:rgba(15,23,42,.82);
  display:flex; align-items:center; justify-content:center; padding:32px;}
.shot-pop img, .shot-pop iframe{max-width:92vw; max-height:88vh; border-radius:12px; background:#fff; border:none;}
.shot-pop iframe{width:92vw; height:88vh;}
.shot-pop-x{position:absolute; top:16px; right:20px; width:38px; height:38px; border:none; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; font-size:24px; line-height:1; cursor:pointer;}
.shot-pop-x:hover{background:rgba(255,255,255,.26);}
.shot-pop-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:64px; border:none;
  border-radius:12px; background:rgba(255,255,255,.14); color:#fff; font-size:30px; line-height:1; cursor:pointer;}
.shot-pop-nav:hover{background:rgba(255,255,255,.26);}
.shot-pop-prev{left:18px;} .shot-pop-next{right:18px;}
.shot-pop-count{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px;}
@media (max-width:560px){ .shot-pop{padding:12px;} .shot-pop-nav{width:36px; height:52px; font-size:24px;} }

/* Прев'ю скріншотів у формі оплати. Висота ~1 см на екрані — рівно щоб упізнати, що це за
   переказ, і не займати пів форми. Власник просив саме такий розмір. */
.pay-shots{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.pay-shot{position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden;
  border:1px solid var(--sky-line); background:var(--sky); flex-shrink:0;}
.pay-shot img{width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in;}
.pay-shot-pdf{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font:700 12px/1 Manrope,Arial,sans-serif; color:var(--slate); cursor:pointer;}
.pay-shot-x{position:absolute; top:2px; right:2px; width:18px; height:18px; border:none; border-radius:50%;
  background:rgba(17,24,39,.6); color:#fff; font-size:13px; line-height:1; cursor:pointer; padding:0;}
.pay-shot-x:hover{background:rgba(17,24,39,.85);}

/* Моніка — помічниця, якій диктують оплату. Клас, а не інлайн-стилі: аватар показується
   у двох місцях (на сторінці кабінету і всередині форми), і розмір має мінятись один раз.
   На телефоні рядок ламається на два, інакше кнопка «Диктувати» видавлює текст у нитку. */
.monica-bar{display:flex; gap:12px; align-items:center;}
.monica-ava{width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:50% 25%; flex-shrink:0; display:block;}
@media (max-width:560px){
  .monica-bar{flex-wrap:wrap;}
  .monica-bar .btn{width:100%;}
}

/* Розподіл партнерських грошей у картці клієнта.
   Власник, 26.09.2026: «перевір відступи і дизайн, щоб було все дуже красиво… як в
   інтерфейсі монобанка». Звідси й будова: окремі плитки з повітрям усередині, дрібний
   сірий підпис над великим числом — а не рядок цифр упритул, де око не бачить, де
   закінчується одна сума і починається інша.
   Сітка auto-fit, а не фіксовані колонки: партнерів по клієнту буває один, а буває три,
   і колонки мають самі підлаштуватись, не лишаючи дірки праворуч. */
.partner-split{display:grid; grid-template-columns:repeat(auto-fit, minmax(168px,1fr)); gap:12px; margin:2px 0 14px;}
.partner-split-tile{background:var(--sky); border-radius:var(--radius-lg); padding:15px 18px; display:flex; flex-direction:column; gap:9px; min-width:0;}
.partner-split-tile .label{color:var(--slate); font-size:13px; font-weight:500; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.partner-split-tile .num{font-family:var(--font-display); font-size:25px; font-weight:700; line-height:1;}
.partner-split-tile.is-ours .num{color:var(--good);}
.partner-split-note{margin:-6px 0 14px; color:var(--stamp); font-size:12.5px; line-height:1.5;}
/* Частки в самому рядку оплати. Не дає числу злипнутись із пігулкою «Підтверджено». */
.partner-row-split{margin-top:5px; white-space:nowrap; font-size:12.5px; color:var(--slate);}
@media (max-width:560px){
  .partner-split{grid-template-columns:repeat(2,1fr); gap:10px;}
  .partner-split-tile{padding:13px 14px;}
  .partner-split-tile .num{font-size:21px;}
  .partner-row-split{white-space:normal;}
}

/* ===== Stamp rail — signature component ===== */
.stamp-rail{display:flex; align-items:flex-start; overflow-x:auto; overflow-y:hidden; padding-bottom:2px;}
.stamp-node{display:flex; flex-direction:column; align-items:center; position:relative; flex:1 1 0; min-width:72px;}
.stamp-ring{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--sky-line); background:var(--paper); color:var(--slate-2); font-size:13px; font-weight:700;
  font-family:var(--font-mono); flex-shrink:0; z-index:2; transition:all .2s;
}
.stamp-node.done .stamp-ring{
  border-color:var(--visa); background:var(--visa); color:white;
  box-shadow:0 0 0 3px var(--visa-soft);
}
.stamp-node.current .stamp-ring{
  border:2.5px solid var(--stamp); background:var(--stamp-soft); color:var(--stamp);
  box-shadow:0 0 0 4px var(--stamp-soft);
  transform:rotate(-6deg);
}
.stamp-node .line{
  position:absolute; top:17px; left:50%; width:100%; height:2px; background:var(--sky-line); z-index:1;
}
.stamp-node.done .line{background:var(--visa);}
.stamp-node:last-child .line{display:none;}
.stamp-label{margin-top:8px; font-size:12px; text-align:center; color:var(--slate); font-weight:600; white-space:nowrap; line-height:1.25; padding:0 2px;}
.stamp-node.current .stamp-label{color:var(--stamp);}
.stamp-node.done .stamp-label{color:var(--ink-soft);}

/* compact inline stamp rail for headers */
.stamp-rail.compact .stamp-ring{width:24px; height:24px; font-size:11.5px;}
.stamp-rail.compact .stamp-node{min-width:26px;}
.stamp-rail.compact .stamp-node .line{top:11px;}
.stamp-rail.compact .stamp-label{display:none;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14.5px; border-radius:10px;
  padding:9px 15px; cursor:pointer; border:1px solid transparent; font-family:var(--font-body); transition:all .12s;
  white-space:nowrap;
}
.btn:active:not(:disabled){transform:scale(.97);}
.btn svg{width:15px; height:15px;}
/* --visa-on рахується з яскравості акценту (applyAccent у store.js): на світлому
   помаранчевому підпис чорний, на темному синьому — білий. Фолбек white — на випадок, якщо
   скрипт іще не встиг виставити змінну. */
/* Основна кнопка: БІЛИЙ підпис (рішення власника, 03.10.2026). Але не на світлому
   піщаному — на ньому білий дає 2.6:1, тобто напис розмитий, а не контрастний. Тому
   заливка береться на тон глибше (--visa-ink, #A0683A): білий на ньому — 4.9:1, норма
   WCAG AA, і колір лишається фірмовим. Світлий піщаний нікуди не подівся: він працює в
   чипах, підкладках і акцентах, де тексту зверху немає. */
.btn-primary{background:var(--visa-ink); color:#fff;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:var(--sky); color:var(--ink-soft);}
.btn-ghost:hover{background:var(--sky-deep);}
.btn-outline{background:var(--paper); color:var(--ink-soft); border-color:var(--sky-line);}
.btn-outline:hover{border-color:var(--slate-2);}
.btn-danger{background:var(--stamp-soft); color:var(--stamp);}
/* Посилання клієнта — термін дії, відкликання, журнал (Етап 10 форм USCIS, ТЗ §15). */
.btn-danger-outline{color:var(--stamp); border-color:var(--stamp);}
.share-guard{margin-top:12px; padding-top:10px; border-top:1px dashed var(--line);}
.share-guard-row{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.share-guard-row input{flex:1 1 140px; min-width:0;}
.share-guard-log{margin-top:10px;}
.share-guard-log b{display:block; font-size:12px; color:var(--slate); margin-bottom:4px;}
.share-guard-ev{display:flex; justify-content:space-between; gap:8px; font-size:12.5px; padding:3px 0; border-bottom:1px solid var(--line);}
.share-guard-ev small{color:var(--slate); white-space:nowrap;}
.btn-danger:hover{filter:brightness(.93);}
/* A secondary action that still reads as an action: the tinted fill alone was pale enough next to
   a primary button to look disabled, so it keeps a faint border of its own colour. */
.btn-soft{background:var(--visa-soft); color:var(--visa); border-color:color-mix(in srgb, var(--visa) 22%, transparent);}
.btn-soft:hover{filter:brightness(.96);}
.btn-sm{padding:6px 11px; font-size:13px; border-radius:8px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

/* ===== Callouts — short inline notes that need to read as a note, not as body text ===== */
.callout{
  font-size:13px; line-height:1.5; padding:9px 12px; border-radius:10px;
  border:1px solid transparent; color:var(--ink-soft); background:var(--sky);
}
.callout-amber{background:var(--amber-soft); border-color:var(--amber); color:var(--amber);}
.callout-visa{background:var(--visa-soft); border-color:transparent; color:var(--visa-ink);}
.callout-stamp{background:var(--stamp-soft); border-color:transparent; color:var(--stamp);}
.callout-good{background:var(--good-soft); border-color:transparent; color:var(--good);}

/* ===== Badges / pills ===== */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; padding:3px 9px; border-radius:99px; letter-spacing:.02em; white-space:nowrap;}
.pill svg{width:11px; height:11px; flex-shrink:0;}
.pill-visa{background:var(--visa-soft); color:var(--visa-ink);}
.pill-good{background:var(--good-soft); color:var(--good);}
.pill-amber{background:var(--amber-soft); color:var(--amber); font-weight:600;}
.pill-stamp{background:var(--stamp-soft); color:var(--stamp); font-weight:600;}
.pill-slate{background:var(--sky); color:var(--slate);}
.pill-test{background:transparent; color:var(--slate-2); border:1px solid var(--sky-line); font-size:10.5px; font-weight:600; padding:1px 6px;}
/* «Сьогодні день народження» в шапці картки клієнта. Тепло, але не тривожно: це привід
   написати людині, а не проблема, тож ані червоного, ані синього «до дії» тут не треба. */
/* Це не просто плашка, а кнопка: відкриває привітання. Тому їй потрібні курсор і відгук на
   наведення — інакше людина дивиться на неї як на напис і не здогадується натиснути. */
.pill-birthday{background:#FFF4E0; color:#8A5A12; border:1px solid #F3D9A8; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:12.5px; font-weight:700;
  line-height:1; padding:5px 11px; border-radius:999px; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;}
.pill-birthday:hover{background:#FFEBC7; border-color:#E8C888; transform:translateY(-1px);}
.pill-birthday:active{transform:none;}
.pill-birthday:focus-visible{outline:2px solid var(--visa); outline-offset:2px;}
/* Менеджер по роботі з негативом (migration_39_manager_attention.sql). Навмисно НЕ --stamp/
   круглий, як gap-dot: той означає «не вистачає полів», зовсім інша річ, і поруч на тому ж
   рядку картки їх легко сплутати, якщо колір і форма однакові. */
.manager-attention-pill{background:var(--stamp-soft);color:var(--stamp);border:1px solid color-mix(in srgb,var(--stamp) 32%,transparent);white-space:normal;line-height:1.25}
.manager-attention-open-btn{background:var(--stamp-soft);color:var(--stamp);border:1px solid color-mix(in srgb,var(--stamp) 35%,var(--sky-line))}
.manager-attention-resolve-btn{background:var(--good-soft);color:var(--good);border:1px solid color-mix(in srgb,var(--good) 35%,var(--sky-line))}
.manager-attention-card{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--stamp-soft);border:1px solid color-mix(in srgb,var(--stamp) 30%,transparent);display:flex;flex-direction:column;gap:5px;font-size:14px}
.manager-attention-card__title{font-weight:800;color:var(--stamp)}
.manager-attention-text{white-space:pre-wrap;overflow-wrap:anywhere}
.manager-attention-resolved{margin-top:10px;padding:8px 11px;border-radius:8px;background:var(--good-soft);color:var(--good);font-size:13px}
.manager-attention-dot{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:4px;background:var(--visa);color:#fff;font:800 10px/1 var(--font-mono);flex-shrink:0;margin-left:6px;vertical-align:middle;}
.client-grade-badge{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px; border-radius:999px; font-size:12.5px; font-weight:800; line-height:1; margin-left:5px; vertical-align:middle;}
.client-grade-picker{display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 5px 0 9px; border:1px solid currentColor; border-radius:999px; font-size:11.5px; font-weight:750; transition:background .15s ease,color .15s ease;}
.client-grade-picker select{appearance:none; -webkit-appearance:none; border:0; outline:0; background:transparent; color:inherit; font:800 11px/1 var(--font-body); cursor:pointer; padding:3px 15px 3px 3px; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 7px) 50%,calc(100% - 3px) 50%; background-size:4px 4px,4px 4px; background-repeat:no-repeat;}
.client-grade-picker option{color:var(--ink); background:var(--paper);}
.client-grade-empty{color:var(--slate-2); background:var(--sky); border-color:var(--sky-line);}
.client-grade-a{color:#137a4b; background:#e6f7ee; border-color:#91d4b3;}
.client-grade-b{color:#1e5fc7; background:#eaf2ff; border-color:#9abcf2;}
.client-grade-c{color:#b75a00; background:#fff0df; border-color:#f2b875;}
/* Оцінка дашборду (1-10) — той самий пікер, колір за шкалою, а не за буквою (01.09). */
.dashboard-rating-picker b{font-weight:800;}
.dashboard-rating-empty{color:var(--slate-2); background:var(--sky); border-color:var(--sky-line);}
.dashboard-rating-red{color:#b7332a; background:#fdecea; border-color:#f2a89e;}
.dashboard-rating-yellow{color:#a3720a; background:#fff6df; border-color:#f2d375;}
.dashboard-rating-green{color:#137a4b; background:#e6f7ee; border-color:#91d4b3;}
/* «Готовий до написання» (migration_100 UI, 02.09) — той самий пікер-пілюля, що dashboard-
   rating-picker поруч, лише замість select/числа — чекбокс; сірий, доки не відмічено,
   зелений після (та сама пара кольорів, що dashboard-rating-green/empty). */
.criterion-ready-toggle{display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px 0 9px; border:1px solid currentColor; border-radius:999px; font-size:11.5px; font-weight:750; cursor:pointer; color:var(--slate-2); background:var(--sky); border-color:var(--sky-line);}
.criterion-ready-toggle.on{color:#137a4b; background:#e6f7ee; border-color:#91d4b3;}
.criterion-ready-toggle input{margin:0; accent-color:#137a4b;}
.criterion-ready-toggle span{display:flex; width:14px; height:14px;}
.criterion-ready-toggle span svg{width:100%; height:100%;}
/* Пілюля, яка зараз не є керуванням: не клікається й видно, що не клікається. Пунктир —
   щоб «вимкнено» читалось і без кольору (друк, високий контраст, дальтонізм). */
.pill.is-inactive{opacity:.55; cursor:default; border:1px dashed var(--sky-line); background:transparent; color:var(--slate-2);}
/* Довгий вільний текст (статус кейсу з Налаштувань) у фіксованій ширині картки/колонки —
   обрізаємо власним трикрапком, а не даємо вилізти за межі. */
/* display:inline-block, а не успадкований від .pill inline-flex. text-overflow:ellipsis не
   діє всередині флекс-контейнера — текст там стає анонімним флекс-елементом, і браузер
   просто РІЖЕ його без трикрапки. На дошці клієнтів це виглядало як «Pending Paro» і
   «Asylum Pendi»: статус справи, обрізаний посеред слова й без жодної позначки, що він
   обрізаний. У .status-chip іконки немає (прапор — це текст), тож inline-flex тут не
   потрібен узагалі. */
.status-chip{display:inline-block; max-width:120px; min-width:0; overflow:hidden;
  text-overflow:ellipsis; vertical-align:middle;}

/* ===== Kanban ===== */
.kanban-wrap{position:relative;}
/* macOS hides scrollbars until you scroll, and a plain mouse wheel doesn't scroll sideways —
   so the board needs a visible track and buttons, or the right-hand stages are unreachable. */
/* scroll-behavior:smooth тут стояти НЕ може: автопрокрутка під час перетягування посуває
   дошку маленькими кроками кожні 24 мс, а кожен такий крок при smooth починає нову плавну
   анімацію з нуля — вони гасять одне одного, і дошка не зрушує ані на піксель. Кнопкам ‹ ›
   плавність не потрібна звідси: scrollBoard() просить її явно через scrollBy({behavior}). */
/* Стовпці тягнуться на всю висоту, навіть коли в них одна картка.
   Інакше після пошуку по прізвищу дошка стискається в смужку заввишки з одну картку: смуга
   прокрутки злітає під самий верх, а весь простір під нею стає мертвим — курсор там уже не
   над дошкою, і горизонтальна прокрутка не працює. Людина возить пальцем по порожньому
   й не розуміє, чому нічого не рухається. */
.kanban{display:flex; gap:16px; overflow-x:auto; padding-bottom:10px; align-items:stretch;
  min-height:min(64vh, 640px);}
.kanban::-webkit-scrollbar{height:10px;}
.kanban::-webkit-scrollbar-track{background:var(--sky); border-radius:6px;}
.kanban::-webkit-scrollbar-thumb{background:var(--sky-line); border-radius:6px;}
.kanban::-webkit-scrollbar-thumb:hover{background:var(--slate);}
.kanban-nav{
  position:sticky; position:absolute; top:120px; z-index:20;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--sky-line);
  background:var(--paper); box-shadow:var(--shadow-pop); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
}
.kanban-nav:hover{color:var(--visa); border-color:var(--visa);}
.kanban-nav svg{width:16px; height:16px;}
.kanban-nav--left{left:6px;}
.kanban-nav--right{right:6px;}
.kanban-col{
  width:272px; flex-shrink:0; background:var(--sky); border-radius:var(--radius-lg); padding:12px; border:1px solid var(--sky-line);
  transition:width .18s ease;
}
/* Порожній етап звужується. Етапів п'ятнадцять, на екран уміщається чотири — і половину з
   них займали колонки без жодної картки. Не ховаємо зовсім і не робимо вужче за 168 px:
   у порожню колонку саме й перетягують картку, і ціль для перетягування має лишитись
   такою, у яку можна влучити. */
.kanban-col--empty{width:168px;}
.kanban-col--empty .kanban-col-title{font-size:12.5px; color:var(--slate);}
.kanban-col-head{padding:6px 6px 12px; display:flex; align-items:center; gap:10px;}
.kanban-col-head .stamp-ring{width:28px; height:28px; font-size:12.5px;}
.kanban-col-title{font-size:14px; font-weight:700; color:var(--ink-soft); flex:1; line-height:1.25;}
.kanban-col-count{font-family:var(--font-mono); font-size:12.5px; color:var(--slate); background:var(--paper); border-radius:6px; padding:2px 6px; border:1px solid var(--sky-line);}
.kanban-list{min-height:40px; display:flex; flex-direction:column; gap:10px;}
.kanban-card{
  background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-md); padding:13px 14px;
  cursor:grab; box-shadow:var(--shadow-card); transition:box-shadow .15s, transform .15s;
}
.kanban-card:hover{box-shadow:var(--shadow-pop); transform:translateY(-1px);}
.kanban-card.sortable-ghost{opacity:.35;}
.kanban-card.sortable-drag{box-shadow:var(--shadow-pop); cursor:grabbing;}
.kanban-card-top{display:flex; align-items:center; gap:8px; margin-bottom:9px;}
/* Ім'я — головне на картці, тому воно більше й важче за все решта. До 28.09.2026 усі
   п'ять елементів картки важили однаково, і дошка з 560 карток читалась як суцільна сітка
   плашок (власник: «як дешева адмінка, а треба як монобанк»). */
.kanban-card-name{font-weight:650; font-size:15.5px; letter-spacing:-.01em; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Один сірий рядок замість чотирьох плашок: тип візи · дата · статуси · подано. */
.kanban-card-line{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0 5px; margin-bottom:9px;
  font-size:11.5px; line-height:1.5; color:var(--slate); min-width:0;
}
.kanban-card-line > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.kc-type{font-weight:700;}
.kc-sep{opacity:.5; font-weight:700;}
.kc-filed{color:var(--good); font-weight:600;}
.kanban-card-meta{display:flex; align-items:center; justify-content:space-between; margin-top:10px;}
.kanban-card-assignees{display:flex;}
.kanban-card-assignees .avatar{margin-left:-6px; border:2px solid var(--paper); box-shadow:0 0 0 1px rgba(11,22,38,.06);}
.kanban-card-assignees .avatar:first-child{margin-left:0;}

/* ===== Tabs ===== */
.tabbar{display:flex; gap:4px; border-bottom:1px solid var(--sky-line); margin-bottom:22px; overflow-x:auto;}
.tab{
  /* Inactive tabs used to be the same washed-out grey as disabled text, so «Огляд», «Доказова
     база» and the rest read as unavailable rather than clickable. */
  /* Картка клієнта дійшла до 12 вкладок (Бонуси — остання), і на звичайному екрані вони більше
     не влазять без горизонтальної прокрутки — власник попросив 02.09 звузити відступи. */
  padding:11px 3px; margin-right:8px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;
  border:none; border-bottom:2.5px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:5px;
  transition:color .15s ease, border-color .15s ease;
  /* .tab is used on both <div> and <button>; without this reset the button variants render with
     the browser's own grey chrome and stop looking like tabs at all. */
  background:none; font-family:inherit; line-height:1.2;
}
.tab:hover{color:var(--visa);}
.tab.active{color:var(--visa); border-color:var(--visa);}
.tab .lock{width:12px; height:12px; opacity:.5;}
/* Marks a tab whose panel already holds content, so it is visible without switching to it. */
.tab-dot{width:6px; height:6px; border-radius:99px; background:var(--good); flex-shrink:0;}

/* ===== Tables / rows ===== */
.row-list{display:flex; flex-direction:column;}
.row-item{display:flex; align-items:center; gap:14px; padding:13px 4px; border-bottom:1px solid var(--sky-line); border-radius:8px; transition:background .12s ease;}
.row-item:last-child{border-bottom:none;}
/* Довгий текст без пробілів — реальний випадок, а не теоретичний: одне вставлене посилання
   або злите докупи слово розсувало рядок за межі екрана й ламало всю сторінку. Flex сам по
   собі цього не стримує: елемент має власну мінімальну ширину за вмістом, доки не сказати
   інакше. Тому і перенос, і min-width:0 — разом, бо поодинці жодне не рятує. */
.row-item{overflow-wrap:anywhere;}
/* Рядок задачі може вирости через блок уточнень. Тоді аватар і статус мають лишатись
   угорі, поруч із назвою задачі, а не зависати посередині високого рядка. */
.row-item--top{align-items:flex-start;}
/* Нова задача на мені (та, що рахується цифрою на «Завдання») — синя смужка зліва й легкий
   фон, щоб у списку з десятків «Нова» було видно, яка саме нова ДЛЯ МЕНЕ (Юлія Дитюк, 11.09). */
.row-item--fresh{background:color-mix(in srgb, var(--visa) 7%, transparent); box-shadow:inset 3px 0 0 var(--visa); padding-left:10px;}
.row-item > *{min-width:0;}
.row-item textarea, .row-item input{max-width:100%;}
/* Уточнення росте вниз разом із текстом, а не ховає його у власний скрол: людина пише
   думку і має бачити її цілком. Стеля потрібна, щоб один довгий запис не відсунув решту
   задач за межу екрана. */
.row-item textarea{field-sizing:content; min-height:2.6em; max-height:340px;}
.row-item[style*="cursor:pointer"]:hover{background:var(--sky);}

/* ===== Data table (list view) ===== */
.data-table{width:100%; border-collapse:collapse; font-size:14px;}
.data-table th{text-align:left; padding:10px 14px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--slate); border-bottom:1px solid var(--sky-line); white-space:nowrap;}
.data-table td{padding:12px 14px; border-bottom:1px solid var(--sky-line); vertical-align:middle;}
.data-table tbody tr{cursor:pointer; transition:background .12s;}
.data-table tbody tr:hover{background:var(--sky);}
.data-table tbody tr:last-child td{border-bottom:none;}
/* Збільшено на прохання власника: 11.5px відлік до подачі кейсу — це головна цифра на
   сторінці клієнта, а виглядала вона як дрібна службова позначка. Той самий крок, що вже
   зробили для .task-deadline у CRM. */
.deadline-chip{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; padding:4px 11px; border-radius:99px; white-space:nowrap;}
.deadline-chip svg{width:12px; height:12px;}
.stack-avatars{display:flex; align-items:center;}
.stack-avatars .avatar{margin-left:-8px; border:2px solid var(--paper); box-shadow:0 0 0 1px rgba(11,22,38,.06);}
.stack-avatars .avatar:first-child{margin-left:0;}

/* ===== Empty states ===== */
.empty{text-align:center; padding:50px 20px; color:var(--slate);}
.empty svg{width:38px; height:38px; color:var(--slate-2); margin-bottom:12px;}
.empty h3{font-size:15.5px; color:var(--ink-soft); margin-bottom:5px;}
.empty p{font-size:14px;}

/* ===== Notification popover ===== */
.pop{
  position:absolute; top:52px; right:0; width:360px; background:var(--paper); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop); border:1px solid var(--sky-line); z-index:200; overflow:hidden;
  transform-origin:top right; animation:popdown .14s cubic-bezier(.16,1,.3,1);
}
@keyframes popdown{from{transform:scale(.95) translateY(-4px); opacity:0;} to{transform:scale(1) translateY(0); opacity:1;}}
.pop-head{padding:14px 16px; border-bottom:1px solid var(--sky-line); font-weight:700; font-size:15px; display:flex; justify-content:space-between; align-items:center;}
.pop-list{max-height:400px; overflow-y:auto;}
.pop-item{padding:12px 16px; display:flex; gap:11px; border-bottom:1px solid var(--sky-line); cursor:pointer;}
.pop-item:hover{background:var(--sky);}
.pop-item .dot-icon{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.pop-item .dot-icon svg{width:15px; height:15px;}
.pop-item .txt{font-size:14px; line-height:1.4;}
.pop-item .txt b{font-weight:700;}
.pop-item .time{font-size:12.5px; color:var(--slate-2); margin-top:3px;}
.pop-item.unread{background:var(--visa-soft)}
.pop-item.unread:hover{background:var(--sky-deep)}

/* ===== Modal / drawer ===== */
.overlay{position:fixed; inset:0; background:rgba(11,22,38,.42); z-index:300; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); animation:overlayin .16s ease;}
@keyframes overlayin{from{opacity:0;} to{opacity:1;}}
.drawer{position:fixed; top:0; right:0; bottom:0; width:66.6667vw; max-width:1100px; min-width:480px; background:var(--paper); z-index:301; box-shadow:var(--shadow-pop); display:flex; flex-direction:column; animation:slidein .22s cubic-bezier(.16,1,.3,1);}
@keyframes slidein{from{transform:translateX(24px); opacity:0;} to{transform:translateX(0); opacity:1;}}
.modal{width:480px; max-width:92vw; max-height:88vh; display:flex; flex-direction:column;
       background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow-pop);
       animation:popin .16s cubic-bezier(.16,1,.3,1);}
.modal > .drawer-head, .modal > .drawer-foot{flex-shrink:0;}
.modal > .drawer-body{flex:1; min-height:0; overflow-y:auto;}
/* The document preview popup. A class rather than inline sizing, so the phone breakpoint below
   can widen it — an inline width beats any max-width a media query could set. */
/* Передперегляд на майже весь екран.
   70vw × 70vh було замало: скан паспорта — це або широка розворотка, або висока сторінка, і
   в обох випадках документ ужимався так, що читати доводилось качаючи. Тепер вікно займає
   майже все вікно браузера, а сам документ вписується в нього цілком — і горизонтальний,
   і вертикальний, бо object-fit:contain тримає пропорції в будь-який бік. */
.modal-preview{width:min(96vw, 1600px); max-width:96vw; height:94vh; display:flex; flex-direction:column;}
.modal-preview .drawer-head{padding:14px 20px;}
.modal-preview .drawer-body{
  padding:10px 14px;
  /* min-height:0 — без цього дочірній елемент flex не стискається нижче свого вмісту, і
     max-height:100% на картинці рахується від висоти, якої ще немає. Наслідок: скан
     розгортається на повний розмір, вилазить за вікно, і документ доводиться гортати
     замість того, щоб бачити цілком. */
  min-height:0; flex:1 1 auto; overflow:auto;
}
.modal-preview .drawer-body > img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block; margin:auto;
}
.modal-preview .drawer-foot{padding:12px 20px;}
@keyframes popin{from{transform:scale(.96); opacity:0;} to{transform:scale(1); opacity:1;}}
/* Критерій — єдина шухляда, що відкривається на весь екран.
   Причина проста: усередині сітка папок, а в кожній папці ще сітка файлів. На двох третинах
   ширини це давало дві вузькі колонки, у яких папки гортаються нескінченно вниз, і людина
   втрачає загальну картину саме тоді, коли вона потрібна найбільше — коли збирає докази. */
/* Усередині відкритої папки — спокійний, читабельний розмір. Дрібні плитки потрібні були
   тільки там, де вміст десятка папок ділив один екран; тут ділити нема з ким. */
.file-grid.file-grid-md{grid-template-columns:repeat(auto-fill, 125px); gap:16px; justify-content:start;}
.file-grid.file-grid-md .file-tile-name{font-size:12.5px; -webkit-line-clamp:2;}

/* Задачі критерію — окремий розділ на весь екран, а не дрібний блок унизу довгої сторінки.
   Там читають і ставлять роботу людям, тож розмір тексту має бути такий самий, як у
   звичайному списку задач, а не як у підпису під картинкою. */
.crit-tasks .field > label{font-size:15px; color:var(--ink); margin-bottom:9px;}
.crit-tasks .field{margin-bottom:22px !important;}
.crit-tasks .row-item{padding:12px 6px; font-size:15px;}
.crit-tasks .row-item .hint{font-size:14px;}
.crit-tasks input[type="text"], .crit-tasks input:not([type]), .crit-tasks input[type="datetime-local"]{font-size:15px;}
.crit-tasks .row-item input[type="checkbox"]{width:17px; height:17px;}

/* Розділи критерію — головна навігація всередині вікна: людина щоразу вирішує, чим саме
   зараз займається. Були три текстові посилання з тонкою рискою під активним, тобто
   найлегше, що є на екрані, — власник питав «тут юзабилити делается?» саме дивлячись на
   них. Тепер сегментний перемикач: видно і що це перемикач, і що зараз обрано. */
.crit-tabs{
  display:inline-flex; gap:4px; flex-wrap:wrap; margin:0 auto 22px; padding:4px;
  border-radius:14px; background:var(--sky); border:1px solid var(--sky-line);
  max-width:100%;
}
.crit-tabs button{
  appearance:none; background:none; border:none; cursor:pointer; padding:9px 16px;
  border-radius:10px; font-family:inherit; font-size:15px; font-weight:700;
  color:var(--slate); letter-spacing:-.01em; transition:color .12s, background .12s, box-shadow .12s;
}
.crit-tabs button:hover{color:var(--ink);}
.crit-tabs button.active{color:var(--visa-ink); background:var(--paper); box-shadow:var(--shadow-card);}

/* ── Стратегія критерію («Як ми плануємо закрити критерій») ───────────────────────────── */
/* План на ВЕСЬ критерій виглядав точно так само, як опис однієї задачі під ним, а стан
   збереження — самотнім сірим словом під полем. Тепер це окрема панель із власним
   заголовком і станом-пігулкою: видно і що це важливіше за задачу, і чи воно записалось. */
.crit-plan{
  padding:16px 18px 18px; margin:0 auto 24px; border-radius:var(--radius-lg);
  background:var(--sky); border:1px solid var(--sky-line);
}
.crit-plan-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px;}
.crit-plan-title{font-family:var(--font-display); font-size:17px; font-weight:800; line-height:1.3; color:var(--ink); flex:1; min-width:0;}
.crit-plan-state{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
  border-radius:999px; font-size:13px; font-weight:700;
  background:var(--good-soft); color:var(--good);
}
.crit-plan-state svg{width:13px; height:13px;}
.crit-plan-state.is-dirty{background:var(--amber-soft); color:var(--amber);}
.crit-plan-state.is-error{background:var(--stamp-soft); color:var(--stamp);}
.crit-plan-state.is-saving{background:var(--sky-deep); color:var(--ink-soft);}
/* Поле стратегії навмисно лишається полем із рамкою — на відміну від описів задач, які
   стали просто текстом. Різниця у вигляді і є тією ієрархією, якої бракувало. */
.crit-plan textarea{background:var(--paper); font-size:15px; line-height:1.6; resize:none; overflow:auto; max-height:420px;}

/* ── Меню критерію (шапка шухляди) ───────────────────────────────────────────────────── */
/* «Видалити критерій» стояло постійною кнопкою в підвалі, навпроти «Зберегти» — рівною
   вагою з дією, яку роблять щодня. Видалення критерію разом з усім, що в ньому зібрано, на
   такому місці — це один випадковий клік. Тепер воно під «…» і з підтвердженням. */
.crit-menu{position:relative;}
.crit-menu-pop{
  position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:230px; padding:6px;
  background:var(--paper); border:1px solid var(--sky-line); border-radius:14px;
  box-shadow:var(--shadow-pop); animation:popdown .14s cubic-bezier(.16,1,.3,1); transform-origin:top right;
}
.crit-menu-item{
  display:flex; align-items:center; gap:9px; width:100%; padding:10px 12px; border:none;
  background:none; border-radius:10px; cursor:pointer; font-family:inherit; font-size:15px;
  font-weight:600; color:var(--stamp); text-align:left; transition:background .12s;
}
.crit-menu-item svg{width:15px; height:15px; flex-shrink:0;}
.crit-menu-item:hover:not(:disabled){background:var(--stamp-soft);}
.crit-menu-item:disabled{color:var(--slate-2); cursor:not-allowed;}
.crit-menu-note{padding:4px 12px 8px; margin:0; font-size:12.5px; line-height:1.45; color:var(--slate-2);}

.empty-folder{min-height:160px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--sky-line); border-radius:12px;}

/* Виділення файлів і контекстне меню — поведінка звичайного файлового менеджера. */
.pick-area{position:relative; user-select:none; min-height:120px;}
.file-pick{border-radius:12px; padding:4px; border:1.5px solid transparent;}
.file-pick.sel{border-color:var(--visa); background:var(--sky);}
.band{position:absolute; z-index:5; border:1px solid var(--visa); background:rgba(37,99,235,.10); border-radius:4px; pointer-events:none;}

.sel-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 12px; margin-bottom:12px; border-radius:10px;
  background:var(--sky); border:1px solid var(--sky-line); font-size:14.5px;
}

.ctx-menu{
  position:fixed; z-index:1200; min-width:196px; padding:6px;
  background:var(--paper); border:1px solid var(--sky-line); border-radius:10px; box-shadow:var(--shadow-pop);
  display:flex; flex-direction:column;
  /* Страховка для низького вікна: placeCtx() підсуває меню вгору, але якщо воно вище за саме
     вікно, підсовувати нікуди — і нижні пункти лишились би недосяжними. Прокрутка всередині
     меню гарантує, що «Видалити» можна дістати на будь-якій висоті екрана. */
  max-height:calc(100vh - 16px); overflow-y:auto;
  /* Смуга прокрутки ВИДИМА завжди, а не лише під час руху. macOS і iOS ховають її за
     замовчуванням — і людина не здогадується, що список крутиться: бачить обрізане меню й
     вважає, що нижніх пунктів просто немає. Юлія Ващенко, 17.09.2026, намалювала цей повзунок
     червоним на скріншоті: «зробити курсор, і все буде видно». */
  scrollbar-width:thin; scrollbar-color:var(--slate-2) transparent;
}
.ctx-menu::-webkit-scrollbar{width:9px;}
.ctx-menu::-webkit-scrollbar-track{background:transparent;}
.ctx-menu::-webkit-scrollbar-thumb{
  background:var(--slate-2); border-radius:6px;
  /* Рамка кольором меню робить повзунок вужчим на вигляд, не звужуючи зону захоплення. */
  border:2px solid var(--paper); background-clip:padding-box;
}
.ctx-menu::-webkit-scrollbar-thumb:hover{background:var(--ink-soft); background-clip:padding-box;}
.ctx-menu button{
  appearance:none; border:none; background:none; text-align:left; cursor:pointer;
  padding:7px 10px; border-radius:7px; font-size:15px; color:var(--ink);
}
.ctx-menu button:hover:not(:disabled){background:var(--sky);}
.ctx-menu button:disabled{opacity:.4; cursor:default;}
.ctx-menu button.danger{color:var(--stamp);}
.ctx-sep{height:1px; margin:4px 6px; background:var(--sky-line);}

/* Свій випадаючий список (js/components/CustomSelect.js) — заміна нативного <select>, коли
   нативна ОС-панель виглядає чужою в дизайні CRM (власник, 03.09, «не стандартний
   маковський»). Той самий візерунок карток-меню, що й .ctx-menu вище, але заякорений під
   тригером, а не в точці кліку. */
.csel{position:relative; display:inline-block; min-width:0;}
.csel-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid var(--sky-line); background:var(--sky); border-radius:10px; padding:9px 12px;
  font-size:14px; font-family:inherit; color:var(--ink); cursor:pointer; text-align:left;
  transition:border-color .12s, background .12s;
}
.csel-trigger:hover{border-color:var(--visa);}
.csel-trigger.is-open{border-color:var(--visa); background:var(--paper); box-shadow:0 0 0 3px var(--visa-soft);}
.csel-trigger-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.csel-trigger-ic{flex-shrink:0; width:16px; height:16px; color:var(--slate-2); display:flex; transition:transform .15s;}
.csel-trigger-ic svg{width:16px; height:16px;}
.csel-trigger.is-open .csel-trigger-ic{transform:rotate(180deg); color:var(--visa);}
.csel.is-disabled .csel-trigger{opacity:.55; cursor:not-allowed;}
.csel-panel{
  position:absolute; z-index:1200; top:calc(100% + 6px); left:0; min-width:100%; max-height:320px;
  overflow-y:auto; padding:6px; background:var(--paper); border:1px solid var(--sky-line);
  border-radius:12px; box-shadow:var(--shadow-pop); display:flex; flex-direction:column; gap:1px;
}
.csel-opt{
  appearance:none; border:none; background:none; display:flex; align-items:center; gap:8px;
  text-align:left; cursor:pointer; padding:8px 10px; border-radius:8px; font-size:14px;
  color:var(--ink); white-space:nowrap;
}
.csel-opt:hover{background:var(--sky);}
.csel-opt.is-selected{background:var(--visa-soft); color:var(--visa-ink); font-weight:700;}
.csel-opt-check{flex-shrink:0; width:15px; height:15px; color:var(--visa);}
.csel-opt-check svg{width:15px; height:15px;}
.csel-group-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--slate-2); padding:10px 10px 4px;}
.csel-group-label:first-child{padding-top:6px;}

/* Папки в критерії — як у Finder: значок, назва, лічильник. Дії ховаються до наведення,
   щоб сітка лишалась спокійною й читалась як список папок, а не як панель кнопок.
   align-items:start (не stretch за замовчуванням у grid) — власник, 07.09, скрін
   «до фига пустого места»: без цього кожен рядок сітки розтягував УСІ картки до висоти
   найбільшої (18-файлова «Шаблони» роздувала сусідні порожні картки на весь свій зріст). */
.folder-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; align-items:start;}
.folder-tile{
  /* Колонкою, не рядком — icon+назва+дії живуть у своєму рядку (.folder-tile-top), файли
     нижче на всю ширину. Раніше все стояло в один рядок: великий значок (68×57) і п'ять
     кнопок дій з'їдали майже всю ширину картки, і назві на кшталт «Шаблони» не лишалось
     місця — вона переносилась посеред слова («Шабло/ни»). Власник, 07.09: «выглядит
     просто по-уродски». */
  position:relative; cursor:pointer; display:flex; flex-direction:column; gap:8px;
  padding:12px 14px; border-radius:var(--radius-md); border:1px solid var(--sky-line);
  background:var(--paper); transition:border-color .12s, transform .12s, box-shadow .12s;
}
.folder-tile:hover{border-color:var(--visa); transform:translateY(-1px); box-shadow:var(--shadow-pop);}
/* padding-right звільняє місце під галочку «зібрано» (.folder-collected-check нижче) —
   вона абсолютно спозиціонована в тому ж куті, куди тепер (колонковий макет) впирається
   і сам рядок дій; без відступу вони накладались. */
.folder-tile-top{display:flex; align-items:center; gap:10px; padding-right:20px;}
.folder-tile-ic{display:flex; align-items:center; justify-content:center; flex-shrink:0;}
/* Менший значок (був 68×57) — це не документ на весь екран, а рядок у списку; звільнене
   місце йде назві, а не порожньому простору навколо мультяшної іконки. */
.folder-tile-ic svg{width:34px; height:28px; display:block; filter:drop-shadow(0 1px 2px rgba(11,22,38,.18));}
.folder-tile-body{flex:1; min-width:0;}
/* Один рядок з «…» замість переносу — назва тепер сама у своєму рядку на всю ширину
   картки, тож навіть довгі назви критеріїв не переносяться посеред слова; повна назва —
   в title (див. шаблон). */
.folder-tile-name{font-weight:700; font-size:14px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.folder-tile-count{margin-top:1px; font-size:12.5px; font-weight:600; color:var(--slate-2); font-variant-numeric:tabular-nums;}
.folder-tile-who{font-weight:500; color:var(--slate);}
/* Раніше опакіті йшло на нуль до наведення миші — власник, 03.09: «удалить не могу» про
   папку, яку нічим не наведеш надійно на трекпаді. Кнопка завжди видна: рідше «не можу
   знайти, куди тиснути», ніж коли її доводилось шукати наведенням.
   Одна кнопка «⋯» замість рядка з п'яти іконок — власник, 07.09: «давай это открывать в
   формате три точки… так давай везде». Відкриває ctx-menu (той самий, що й правий клік). */
.folder-tile-more{width:26px; height:26px; border-radius:8px; flex-shrink:0; margin-left:auto;}
.folder-tile-more svg{width:16px; height:16px;}
/* Назви файлів усередині плитки — власник, 03.09: «щоб було видно, що там за файли», а не
   лише число. На всю ширину картки (не в колонці поруч зі значком і кнопками, як раніше) —
   саме тому в 03.09 версії короткі імена все одно обрізались до «Letter f…». */
/* max-height+scroll, а не безмежний ріст — «щоб повністю було видно, всі файли» (03.09)
   лишається правдою (нічого не обрізано, є прокрутка), але сама плитка більше не тягне
   всю сітку за собою до висоти найбільшої папки (07.09, «ужасно» на скріні). */
.folder-tile-files{display:flex; flex-direction:column; gap:1px; max-height:74px; overflow-y:auto;}
/* flex-shrink:0 — без нього flex-контейнер із max-height (вище) не прокручував рядки,
   а СТИСКАВ усі 18 в 88px разом, і текст ставав нечитним замість того, щоб з'явився скрол. */
.folder-tile-file{font-size:12px; color:var(--slate-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-shrink:0;}
.folder-tile-file--more{font-weight:600;}

/* Галочка «зібрано» — власник, 03.09: «збираєш, збираєш, потім усе зібрав, ставиш галочку —
   цю папку можна не чіпати». Кутова кнопка поверх плитки (яка й так position:relative),
   зелена лише коли позначено — порожнє коло решту часу не змагається за увагу з назвою. */
/* Пара кроків «зібрано → написано». Один вигляд на всі місця, де ці два кроки є: папка
   всередині критерію і сама картка критерію (власник, 16.09.2026: «сделай такой же вид и в
   основных папках критериев»). Базовий вигляд тут, а куди саме кнопка стає — вирішує той,
   хто її ставить: на папці вона притиснута в куток (.folder-*-check нижче), на картці
   критерію стоїть у рядку з рештою позначок. */
.step-check{
  width:22px; height:22px; border-radius:50%; flex-shrink:0; cursor:pointer; padding:0;
  border:1.5px solid var(--sky-line); background:var(--paper);
  display:flex; align-items:center; justify-content:center; color:var(--slate);
  transition:background .12s, border-color .12s, color .12s;
}
.step-check svg{width:12.5px; height:12.5px;}
.step-check:disabled{opacity:.45; cursor:not-allowed;}
.step-check--collected{color:#fff;}
.step-check--collected:hover:not(:disabled){border-color:#16a34a;}
.step-check--collected.checked{background:#16a34a; border-color:#16a34a;}
.step-check--written:hover:not(:disabled){border-color:var(--visa); color:var(--visa);}
.step-check--written.checked{background:var(--visa); border-color:var(--visa); color:#fff;}

.folder-collected-check{position:absolute; top:8px; right:8px;}
/* Другий крок — «написано». Та сама кругла кнопка поруч із зеленою, але синя (--visa): два
   кроки мають відрізнятись боковим зором, без наведення на підказку. Поки матеріал не
   зібрано, кнопка бліда й не натискається — писати ще нема про що. */
.folder-written-check{position:absolute; top:8px; right:34px;}
.folder-list-row .folder-written-check{left:36px; right:auto;}
/* Дві кнопки в кутку замість однієї — рядку дій треба вдвічі більше місця, інакше «⋯»
   опиняється рівно під синьою кнопкою (видно на першому ж знімку). Відступ додаємо лише
   тим плиткам, де другий крок справді є, щоб решта критеріїв не втрачала ширину назви. */
.folder-tile:has(.folder-written-check) .folder-tile-top{padding-right:46px;}
/* Раніше зібрана папка тьмяніла (opacity:.55) — власник, 03.09: «не делай что бы она стала
   более прозрачной, просто галочку и все». Позначку залишає сама зелена галочка вище,
   без жодного ефекту на тайл. */

/* Список замість плиток — власник, 03.09: «щоб можна було дивитись списком», той самий
   .role-switch перемикач, що Дошка/Список у Clients.js. */
.folder-list-view{display:flex; flex-direction:column; gap:6px;}
.folder-list-row{
  position:relative; cursor:pointer; display:flex; align-items:center; gap:12px;
  /* 40px зліва звільняли під одну галочку «зібрано»; із другим кроком «написано» поруч
     потрібно 66px, інакше синя кнопка лягла б на іконку папки. */
  padding:10px 14px 10px 66px; border-radius:var(--radius-md); border:1px solid var(--sky-line);
  background:var(--paper); transition:border-color .12s;
}
.folder-list-row:hover{border-color:var(--visa);}
.folder-list-row .folder-collected-check{left:10px; right:auto;}
.folder-list-ic{display:flex; align-items:center; flex-shrink:0;}
.folder-list-ic svg{width:30px; height:25px; display:block;}
.folder-list-body{flex:1; min-width:0;}
.folder-list-name{font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.folder-list-files{margin-top:2px; font-size:12px; color:var(--slate-2); overflow-wrap:break-word;}
/* Опакіті теж прибрано (folder-tile-acts вище) — те саме, «удалить не могу». */

/* «Список зібраного» (ClientCard.js, critTab==='summary' — усередині відкритого критерію,
   не по всіх критеріях одразу: власник, 03.09, спершу просив top-level вкладку, потім
   відкотив і показав саме на рядок critTab — «заходиш усередину критерію»). Папки → файли,
   суцільним переліком, щоб «великими мазками» побачити, що зібрано. */
.es-crit-done{
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; background:#16a34a; color:#fff; flex-shrink:0;
}
.es-crit-done svg{width:10px; height:10px;}
.es-folder{margin-top:12px; padding-left:4px; border-left:2px solid var(--sky-line);}
.es-folder-head{display:flex; align-items:center; gap:8px; padding-left:10px;}
.es-folder-ic{display:flex; flex-shrink:0;}
.es-folder-ic svg{width:18px; height:15px;}
.es-folder-name{font-weight:600; font-size:13.5px;}
.es-file-row{
  display:flex; align-items:center; gap:10px; padding:3px 0 3px 30px; font-size:13px;
}
.es-file-name{display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--ink-soft); border-radius:6px; flex-shrink:0; max-width:45%;}
.es-file-name svg{width:14px; height:14px; flex-shrink:0; color:var(--slate-2);}
.es-file-name:hover{color:var(--visa); background:var(--sky);}
/* Коментар до доказу — власник, 03.09: «пару тез, пару речень», спершу під файлом, потім
   попросив «збоку, а не під документом» — той самий v-autogrow, що й скрізь у картці,
   тепер у тому самому рядку. border лише на фокусі, щоб порожні поля не рябіли рамками. */
.es-file-comment{
  flex:1; min-width:0; font-size:12.5px; resize:none; overflow:hidden;
  border:1px solid transparent; background:transparent; padding:2px 6px; color:var(--ink-soft);
}
.es-file-comment:hover, .es-file-comment:focus{border-color:var(--sky-line); background:var(--paper);}

/* Посилання на публікацію — та сама плитка, що й папка, але кругла зелена іконка замість
   жовтої папки Finder: різниця повинна читатись боковим зором, без прочитання підпису. */
.link-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px;}
.link-tile{
  position:relative; cursor:pointer; display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius:var(--radius-md); border:1px solid var(--sky-line);
  background:var(--paper); transition:border-color .12s, transform .12s, box-shadow .12s;
}
.link-tile:hover{border-color:var(--good); transform:translateY(-1px); box-shadow:var(--shadow-pop);}
.link-tile-ic{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:42px; height:42px; border-radius:50%; background:var(--good-soft); color:var(--good);
}
.link-tile-ic svg{width:19px; height:19px; display:block;}
.link-tile-body{flex:1; min-width:0;}
.link-tile-name{font-weight:700; font-size:14.5px; line-height:1.3; word-break:break-word;}
.link-tile-url{margin-top:4px; font-size:12.5px; color:var(--slate); word-break:break-word;}

/* Шапка відкритої папки: назва зверху, поруч кнопка повернення й завантаження. */
.folder-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--sky-line);
}
.folder-head-name{margin:0; font-size:20px;}

.drawer.drawer-full{width:100vw; max-width:100vw; left:0;}
/* На весь екран вміст притискався до самого краю — на широкому моніторі це читається
   як обрізана сторінка. Відступ по боках робить поле зору спокійнішим. */
.drawer.drawer-full .drawer-body{padding:22px 44px;}
.drawer.drawer-full .drawer-head{padding-left:44px; padding-right:44px;}
.drawer.drawer-full .drawer-foot{padding-left:44px; padding-right:44px;}

/* Папки розкладаємо по наявній ширині, а не жорстко на дві колонки. */
.crit-folders{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px;}

/* Прев'ю всередині папки — удвічі дрібніші за звичайні: тут вони слугують упізнаванням
   («той самий скан»), а не читанням. Читати відкривають на весь екран. */
/* Ширина фіксована, а не 1fr: у широкій папці частка вільного місця розтягувала плитки
   назад до 140px, і зменшення не працювало саме там, де воно потрібне. */
.file-grid.file-grid-sm{grid-template-columns:repeat(auto-fill, 54px); gap:8px; justify-content:start;}
.file-grid.file-grid-sm .file-tile-name{font-size:11px; margin-top:4px; -webkit-line-clamp:1;}
.file-grid.file-grid-sm .file-tile-generic svg{width:13px; height:13px;}
.file-grid.file-grid-sm .file-tile-generic{gap:3px;}
.file-grid.file-grid-sm .file-tile-ext{font-size:9px; padding:0 4px;}
.file-grid.file-grid-sm .file-tile-exhibit{left:3px; top:3px; min-width:14px; height:14px; padding:0 3px; font-size:9.5px; border-radius:4px;}
.file-grid.file-grid-sm .file-tile-remove{width:15px; height:15px; border-radius:5px;}
.file-grid.file-grid-sm .file-tile-remove svg{width:9px; height:9px;}

/* Те саме для згенерованих документів критерію. */
.crit-docs-sm{grid-template-columns:repeat(auto-fill, minmax(66px, 80px)) !important;}
.crit-docs-sm .crit-doc-sheet{height:86px;}
.crit-docs-sm .crit-doc-preview{transform:scale(.26); width:385%;}
.crit-docs-sm .crit-doc-name{font-size:11.5px; margin-top:4px;}
.crit-docs-sm .crit-doc-tag{font-size:10.5px;}

.drawer-head{padding:20px 22px; border-bottom:1px solid var(--sky-line); display:flex; align-items:center; justify-content:space-between;}
.drawer-body{padding:22px; overflow-y:auto; flex:1;}
.drawer-foot{padding:16px 22px; border-top:1px solid var(--sky-line); display:flex; gap:10px; justify-content:flex-end;}

.field{margin-bottom:16px;}
.field label{display:block; font-size:14px; font-weight:600; color:var(--ink-soft); margin-bottom:6px;}

/* Controls are styled at the element level, not only inside .field. Half the app's inputs live in
   plain flex rows next to a button, and when the styling was scoped to .field those rendered as
   raw browser widgets — the reason parts of the UI looked unfinished. .field now only owns
   spacing and labels. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select, textarea{
  width:100%; border:1px solid var(--sky-line); background:var(--sky); border-radius:10px; padding:10px 12px;
  font-size:15px; font-family:var(--font-body); color:var(--ink); outline:none;
  transition:border-color .12s, background .12s, box-shadow .12s;
}
/* A select sitting inline — the stage picker next to a client's name, a period picker in a card
   header — has to be as wide as the option it shows, not as wide as its container. Full width is
   right only inside a .field, where it lines up with the inputs above and below it. */
select{width:auto; max-width:100%;}
.field select{width:100%;}
input[type="checkbox"], input[type="radio"]{width:auto; flex-shrink:0; accent-color:var(--visa);}
/* background-COLOR, not the shorthand: the shorthand would wipe the select chevron on focus. */
input:focus, select:focus, textarea:focus{border-color:var(--visa); background-color:var(--paper); box-shadow:0 0 0 3px var(--visa-soft);}
input::placeholder, textarea::placeholder{color:var(--slate-2);}
input:disabled, select:disabled, textarea:disabled{opacity:.55; cursor:not-allowed;}
/* No blanket min-height: a textarea that asks for rows="2" is a one-line note, and forcing it to
   70px made every short field in the criterion drawer and the brief look bloated. The floor stays
   only where the markup gives no rows hint at all. */
/* «щоб якщо текст надрукований, воно показувало його повністю» (власник, 03.09) — жодна
   textarea в CRM більше не ховає надрукований текст за скролом і не чекає, поки людина сама
   потягне за ріжок. Висоту рахує директива v-autogrow (js/app.js) через scrollHeight; тут —
   лише resize:none (ручний resize більше не потрібен і заважав би директиві) й overflow:hidden
   (без нього під час росту на мить блимає власна скролсмуга textarea). */
textarea{resize:none; overflow:hidden; line-height:1.55;}
textarea:not([rows]){min-height:70px;}
.field textarea:not([rows]){min-height:70px;}
/* Native select chrome differs wildly between macOS and Windows; one drawn chevron keeps the
   control the same height and shape as the inputs beside it. */
select:not([multiple]){
  appearance:none; -webkit-appearance:none; padding-right:32px; cursor:pointer;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjNUM2Qjg1JyBzdHJva2Utd2lkdGg9JzIuNCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSdNNiA5bDYgNiA2LTYnLz48L3N2Zz4=");
  background-repeat:no-repeat; background-position:right 10px center; background-size:14px;
}
:root[data-theme="dark"] select:not([multiple]){
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjOEI5NkFDJyBzdHJva2Utd2lkdGg9JzIuNCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cGF0aCBkPSdNNiA5bDYgNiA2LTYnLz48L3N2Zz4=");
}

/* ===== Evidence cards ===== */
.evidence-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.evidence-card{border:1px solid var(--sky-line); border-radius:var(--radius-md); padding:16px 20px; display:flex; gap:18px; align-items:center; transition:background .15s, border-color .15s;}
.evidence-card .ic{width:36px; height:36px; border-radius:10px; background:var(--sky); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.evidence-card .ic svg{width:17px; height:17px; color:var(--slate);}
.crit-folder{position:relative; width:68px; height:57px; flex-shrink:0;}
.crit-folder-svg{display:block;}
.crit-folder-svg svg{width:68px; height:57px; display:block; filter:drop-shadow(0 1px 2px rgba(11,22,38,.18));}
/* Емодзі сидить на передній стінці, трохи нижче середини — там, де на справжній папці
   наліпка, і де воно не наїжджає на язичок. */
.crit-folder-check{position:absolute; right:-3px; bottom:-3px; width:20px; height:20px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center;}
.crit-folder-check svg{width:20px; height:20px; color:var(--good);}
.crit-folder.done .crit-folder-svg svg{opacity:.85;}
.evidence-card.filled{background:var(--good-soft); border-color:var(--good);}

.evidence-card.not-planned{opacity:.5; filter:grayscale(.6);}
.evidence-card h4{font-size:15.5px; font-weight:700; margin-bottom:4px;}
/* Скільки всередині — це те, за чим шукають потрібний критерій очима. Дрібним світло-сірим
   воно фактично не читалось, тому розмір і контраст як у звичайного тексту. */
.evidence-card p{font-size:15.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
.evidence-card.filled p{color:var(--ink);}
.evidence-links{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.link-chip{display:inline-flex; align-items:center; gap:5px; background:var(--sky); border-radius:7px; padding:4px 9px; font-size:12.5px; font-weight:600; color:var(--ink-soft); max-width:100%; min-width:0;}
.link-chip svg{width:11px; height:11px;}
/* File names coming from Drive run to 200 characters. Without this a single one stretches its
   card past the grid and pushes the whole column off-screen. The full name stays available in
   the tooltip. */
.link-chip > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; display:inline-block; max-width:46ch; vertical-align:bottom;}
.link-chip > span:first-child svg{vertical-align:-1px; margin-right:4px;}
.link-chip-action{display:inline-flex; cursor:pointer; opacity:.55; transition:opacity .12s, color .12s;}
.link-chip-action:hover{opacity:1; color:var(--stamp);}
.link-chip-action svg{width:11px; height:11px;}

/* ===== Дрібниці, спільні для задач критерію в кількох місцях картки клієнта ===== */
/* Ці класи використовує не лише шухляда критерію, а й зведений список «Задачі по критеріях»
   на вкладці «Задачі», тож вони живуть окремо від .ctask-* нижче. */
.task-card-check{padding-top:2px; flex-shrink:0;}
.task-card-check input{width:18px; height:18px; accent-color:var(--good);}
.task-multiline-title,.task-multiline-description{white-space:pre-wrap; overflow-wrap:anywhere;}
.criterion-task-text,.criterion-task-note{white-space:pre-wrap; overflow-wrap:anywhere;}
/* Глобальне правило a{color:inherit} робить посилання невидимим як посилання — а тут воно
   саме має проситись, щоб клієнт зрозумів: адресу в задачі можна натиснути. */
.task-multiline-description a,.criterion-task-note a,.task-multiline-title a{
  color:var(--visa); text-decoration:underline; text-underline-offset:2px;}
.task-templates{display:flex; flex-wrap:wrap; gap:7px;}
/* Текстова дія всередині картки задачі («додати приклад»). 11.5px власник читав як «мілко»
   на кожному екрані сьогодні — тут той самий розмір, що й у решти дрібного тексту CRM. */
.task-link-action{background:none; border:none; padding:0; font-size:14px; color:var(--ink-soft); cursor:pointer; display:inline-flex; align-items:center; gap:5px; font-weight:600; transition:color .12s;}
.task-link-action svg{width:13px; height:13px;}
.task-link-action:hover{color:var(--visa);}

/* ══ Задачі критерію в КАРТЦІ КЛІЄНТА (js/pages/ClientCard.js, шухляда критерію) ═══════════
   Внутрішній екран, не клієнтський. Клієнтський список задач того самого критерію живе в
   ClientView.js і має власні класи .crit-* — навмисно ІНШИЙ префікс: одного разу спільна
   назва (.crit-doc-name) мовчки перемалювала плитки в CRM, і помітили це не одразу.

   Власник, побачивши попередню версію: «не красиво как в админке дешевой». Що саме він
   бачив на знімку:
     · опис кожної задачі — окрема рамка сталої висоти. Один рядок тексту або порожньо —
       усе одно п'ять рядків порожнечі; довгий опис — та сама рамка з власною смугою
       прокрутки, тобто інструкцію не видно ні так, ні так;
     · форма «нова задача» такої ж ваги, як справжня задача, і своя під КОЖНОЮ роллю —
       чотири великі порожні прямокутники на екрані, де реальних задач дві;
     · «Задачі для PR-відділу» — звичайний <label> поля, тобто рівно та сама вага, що й у
       назви задачі під ним: де закінчується одна роль і починається наступна, не видно;
     · дедлайн — підпис, голий datetime-input, пігулка і текстове «прибрати» впритул.

   Кольори — лише токенами: у CRM є темна тема, і зашитий hex у ній світиться чужим. ══════ */

/* Шухляда критерію відкривається на всю ширину екрана (drawer-full) заради сітки папок у
   сусідній вкладці. Для тексту це задовго — опис задачі розтягувався на 1180 px. Задачам
   віддаємо звичайну колонку по центру, папки лишаються на всю ширину. */
.ctask-col{max-width:1000px; margin-left:auto; margin-right:auto;}

/* ── Заголовок ролі ──────────────────────────────────────────────────────────────────── */
.ctask-group{margin:0 0 28px;}
.ctask-group:last-child{margin-bottom:0;}
.ctask-group-head{display:flex; align-items:center; gap:13px; margin:0 0 13px;}
.ctask-group-ic{
  width:42px; height:42px; flex-shrink:0; border-radius:13px; background:var(--sky);
  display:flex; align-items:center; justify-content:center; font-size:22.5px; line-height:1;
}
.ctask-group-text{min-width:0; flex:1;}
.ctask-group-name{font-family:var(--font-display); font-size:19px; font-weight:800; line-height:1.25; letter-spacing:-.01em; color:var(--ink);}
.ctask-group-sub{font-size:14px; line-height:1.45; color:var(--slate); margin-top:3px;}
.ctask-group-n{
  flex-shrink:0; min-width:30px; height:26px; padding:0 10px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--sky); color:var(--ink-soft); font-size:14px; font-weight:800;
  font-variant-numeric:tabular-nums;
}
/* Кольором виділена рівно одна група — «Клієнт». Це єдині задачі, які людина побачить у
   себе в кабінеті, тож переплутати роль тут дорожче, ніж будь-де. Розфарбувати всі чотири
   означало б не виділити жодну. */
.ctask-group.is-client .ctask-group-ic{background:var(--visa-soft);}
.ctask-group.is-client .ctask-group-n{background:var(--visa); color:#fff;}
.ctask-group.is-client .ctask-group-sub{color:var(--visa-ink); font-weight:600;}

/* ── Картка задачі ───────────────────────────────────────────────────────────────────── */
.ctask-list{display:flex; flex-direction:column; gap:10px;}
.ctask{
  border:1px solid var(--sky-line); border-radius:var(--radius-lg); background:var(--paper);
  padding:15px 17px; transition:border-color .15s, box-shadow .15s;
}
.ctask:hover{border-color:var(--sky-deep); box-shadow:var(--shadow-card);}
.ctask.is-done{background:var(--sky);}
/* Смуга кольору зліва повторює бейдж групи: коли прокрутив заголовок, картка сама каже,
   що це клієнтська задача. */
.ctask-group.is-client .ctask{box-shadow:inset 3px 0 0 var(--visa);}
.ctask-group.is-client .ctask:hover{box-shadow:inset 3px 0 0 var(--visa), var(--shadow-card);}
.ctask-head{display:flex; align-items:flex-start; gap:12px;}
.ctask-check{flex-shrink:0; display:flex; padding-top:1px;}
.ctask-check input{width:20px; height:20px; accent-color:var(--good); cursor:pointer;}
.ctask-title{flex:1; min-width:0; font-size:16px; font-weight:700; line-height:1.45; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere;}
.ctask.is-done .ctask-title{color:var(--slate); font-weight:600; text-decoration:line-through; text-decoration-color:var(--slate-2);}
.ctask-del{flex-shrink:0; width:30px; height:30px; color:var(--slate-2);}
.ctask-del:hover{color:var(--stamp);}
/* Відступ рівно під назву: усе, що стосується задачі, вишикувано під її текстом, а не під
   чекбоксом — саме це й робить із чотирьох рядків один об'єкт. */
.ctask-body{margin-left:32px; margin-top:9px; display:flex; flex-direction:column; gap:11px;}

/* ── Опис задачі ─────────────────────────────────────────────────────────────────────── */
/* Не рамка, а текст, який росте під вміст (директива v-autogrow у ClientCard.js).
   Порожній опис — один рядок з підказкою, довгий — видно цілком. Поле лишається
   редагованим завжди: жодного «спершу клікни, щоб відкрити редактор» тут не з'явилось,
   персонал сидить у цьому екрані весь день. */
.ctask-note{
  display:block; width:calc(100% + 20px); margin:-4px -10px; padding:5px 10px;
  font-family:inherit; font-size:15px; line-height:1.6; color:var(--ink-soft);
  background:transparent; border:1px solid transparent; border-radius:10px;
  resize:none; overflow:auto; min-height:0; max-height:420px;
  white-space:pre-wrap; overflow-wrap:anywhere;
  field-sizing:content; /* сучасні браузери роблять це самі; директива — підстраховка */
  transition:background .12s, border-color .12s;
}
.ctask-note:hover{background:var(--sky);}
.ctask-note:focus{background:var(--paper); border-color:var(--visa); box-shadow:0 0 0 3px var(--visa-soft); outline:none; color:var(--ink);}
.ctask.is-done .ctask-note:hover{background:var(--paper);}

/* Той самий опис, поки його не правлять: текст із КЛІКАБЕЛЬНИМИ посиланнями.
   Усередину <textarea> тег <a> не поставити — там за визначенням лише текст, — тож поле
   показує звичайний блок і перетворюється на textarea від першого ж кліку (startNoteEdit).
   Метрики повторюють .ctask-note рівно для того, щоб цієї підміни не було видно: жодного
   стрибка висоти чи зсуву тексту під курсором. */
.ctask-note-view{cursor:text; min-height:calc(1.6em + 10px); overflow:visible; max-height:none;}
.ctask-note-view.is-placeholder{color:var(--ink-faint, var(--ink-soft)); opacity:.62;}
.ctask-note-view:focus{background:var(--paper); border-color:var(--visa); box-shadow:0 0 0 3px var(--visa-soft); outline:none;}
.ctask-note-view a{color:var(--visa); text-decoration:underline; text-underline-offset:2px; cursor:pointer; word-break:break-all;}
.ctask-note-view a:hover{text-decoration-thickness:2px;}

/* ── Приклади, шаблони, документи задачі ─────────────────────────────────────────────── */
/* Чипи прикладів у картці задачі — більші за загальний .link-chip: у списку вкладень 11px
   читались як сміття під описом, а це вкладення, заради яких задачу й ставили. */
.ctask-files{display:flex; flex-wrap:wrap; gap:8px;}
.ctask-files .link-chip{font-size:14px; gap:7px; padding:7px 12px; border-radius:10px; border:1px solid var(--sky-line);}
.ctask-files .link-chip svg{width:13px; height:13px;}
.ctask-files .link-chip-action svg{width:13px; height:13px;}
.ctask-docs{display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 124px)); gap:10px;}
.ctask-acts{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}

/* ── Дедлайн: одна капсула замість чотирьох сусідів ──────────────────────────────────── */
/* Годинник, поле, відлік і хрестик тепер один контрол. Пігулку відліку лишили без змін —
   власник орієнтується саме по ній, а не по даті. */
.ctask-due{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start; max-width:100%;
  flex-wrap:wrap; padding:6px 7px 6px 12px; border-radius:999px;
  border:1px solid var(--sky-line); background:var(--sky);
}
.ctask-due.is-empty{background:transparent; border-style:dashed;}
/* Слово «Дедлайн» усередині капсули, а не іконка: порожнє datetime-поле малює
   «дд.мм.гггг, --:--» — сірим і схожим на підказку, тож без підпису не зрозуміло, чи це
   вже проставлена дата, чи просто порожнє поле. */
.ctask-due-lbl{font-size:14px; font-weight:700; color:var(--slate-2); flex-shrink:0;}
/* Довжина селектора не примха: глобальне правило для полів написане через чотири :not(),
   і коротший селектор програє йому за специфічністю — поле лишалось із власною рамкою
   посеред капсули. Повторюємо ту саму форму, щоб перекрити її без !important. */
.ctask-due input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]){
  border:none; background:transparent; padding:0; margin:0; height:auto; min-height:0;
  width:auto; font-size:15px; color:var(--ink); box-shadow:none; border-radius:0;
}
.ctask-due input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus{
  outline:none; box-shadow:none; border:none; background:transparent;
}
.ctask-due .pill{flex-shrink:0;}
.ctask-due-clear{
  flex-shrink:0; width:25px; height:25px; border:none; background:none; cursor:pointer;
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  color:var(--slate-2); transition:background .12s, color .12s;
}
.ctask-due-clear:hover{background:var(--stamp-soft); color:var(--stamp);}
.ctask-due-clear svg{width:13px; height:13px;}

/* ── «Додати задачу» ─────────────────────────────────────────────────────────────────── */
/* Згорнутий рядок нічого не важить, поки не потрібен, і розгортається в те саме поле одним
   кліком. Розгорнутою форма лишається доти, доки в ній є текст (див. critComposerShown) —
   набране не може зникнути з очей через випадкове «Скасувати». */
.ctask-empty{font-size:15px; color:var(--slate-2); margin:0; padding:2px 0;}
.ctask-addrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;}
.ctask-add{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit;
  border:1px dashed var(--sky-deep); background:transparent; border-radius:11px;
  padding:10px 16px; font-size:15px; font-weight:700; color:var(--ink-soft);
  transition:border-color .12s, color .12s, background .12s;
}
.ctask-add:hover{border-color:var(--visa); color:var(--visa); background:var(--visa-soft);}
.ctask-add svg{width:14px; height:14px;}
.ctask-tpl{max-width:280px; font-size:14.5px;}

.ctask-composer{
  margin-top:12px; padding:14px 15px; display:flex; flex-direction:column; gap:12px;
  border:1px solid var(--sky-deep); border-radius:var(--radius-lg); background:var(--sky);
}
.ctask-composer textarea{
  width:100%; font-family:inherit; font-size:15px; line-height:1.55; resize:none;
  overflow:auto; max-height:320px; min-height:0; border:1px solid var(--sky-line);
  border-radius:11px; padding:11px 13px; background:var(--paper); color:var(--ink);
  field-sizing:content;
}
.ctask-composer textarea:focus{border-color:var(--visa); box-shadow:0 0 0 3px var(--visa-soft); outline:none;}
.ctask-composer .ctask-due{background:var(--paper);}
.ctask-composer-foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.ctask-composer-spacer{flex:1; min-width:0;}

/* ===== Пікер людини (компонент PersonPicker у ClientCard.js) =====
   Один список на два місця: виконавець у «Нове завдання» і «Додати в команду кейсу».
   Класи лишились із назвою assignee-*, бо саме звідти цей вигляд і прийшов; другого набору
   не заводимо — і другого такого списку теж (CLAUDE.md: без паралельних механізмів).
   Замість системного <select>, який на macOS малює ОС і в який неможливо покласти ні фото,
   ні відділ, ні пошук. Усі кольори — токенами, тож у темній темі нічого не треба дублювати.
   Розкривний список позиціонується absolute всередині .modal — тому в самої .modal має
   лишатись звичайний скрол тіла, а список має свою висоту й свій overflow. */
.assignee-picker{position:relative;}
.assignee-trigger{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer;
  background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-md);
  padding:8px 11px; min-height:46px; color:var(--ink); font-family:inherit; font-size:15px;
  transition:border-color .12s, box-shadow .12s;
}
.assignee-trigger:hover{border-color:var(--slate-2);}
.assignee-trigger.open,.assignee-trigger:focus-visible{border-color:var(--visa); box-shadow:0 0 0 3px var(--visa-soft); outline:none;}
.assignee-trigger-text{display:flex; flex-direction:column; min-width:0; flex:1; gap:1px;}
.assignee-name{font-weight:600; font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.assignee-sub{font-size:12.5px; color:var(--slate-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.assignee-placeholder{flex:1; color:var(--slate-2); font-size:15px;}
.assignee-caret{display:inline-flex; flex-shrink:0; color:var(--slate-2);}
.assignee-caret svg{width:15px; height:15px;}
.assignee-trigger.open .assignee-caret{transform:rotate(180deg);}

/* Список розкривається В ПОТОЦІ, а не absolute поверх модалки.
   Спробував був absolute — і побачив у браузері, що .drawer-body модалки має власний
   overflow-y:auto, тож він обрізав список на другому рядку: видно було два імені з сорока.
   Список у потоці не може бути обрізаний нічим — модалка просто стає вищою і скролиться
   своїм звичайним скролом, а сам список має власну висоту. */
.assignee-pop{
  margin-top:6px;
  background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-lg);
  overflow:hidden; animation:popdown .14s cubic-bezier(.16,1,.3,1); transform-origin:top center;
}
.assignee-search{padding:9px 10px; border-bottom:1px solid var(--sky-line);}
.assignee-search input{width:100%;}
/* 320px ≈ 6 рядків: список видно цілком разом із полем пошуку навіть у невисокому вікні,
   а модалка від цього не виростає за екран. */
.assignee-list{max-height:320px; overflow-y:auto; overscroll-behavior:contain;}
.assignee-group{
  padding:9px 14px 5px; font-size:12px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--slate-2); background:var(--sky); position:sticky; top:0;
}
.assignee-option{display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; border:none; background:none;}
/* Підсвітка йде через .active, а не :hover: інакше миша й стрілки сперечаються — під курсором
   світиться один рядок, а Enter обирає інший. mouseenter просто пересуває .active. */
.assignee-option.active{background:var(--visa-soft);}
.assignee-option.selected .assignee-name{color:var(--visa-ink);}
.assignee-tick{display:inline-flex; flex-shrink:0; color:var(--visa);}
.assignee-tick svg{width:15px; height:15px;}

/* Фільтр по етапу в списку клієнтів (Clients.js) — галочки замість одиночного select
   (власник, 03.09: «вибираешь ті етапи, які хочеш бачити»). absolute, а не в потоці, як
   .assignee-pop: тут це кнопка в горизонтальному toolbar-рядку, і панель у потоці
   розсунула б сусідні фільтри замість лягти поверх них. */
.stage-filter-pop{
  position:absolute; top:calc(100% + 6px); right:0; z-index:20; min-width:260px;
  max-height:340px; overflow-y:auto;
  background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-lg);
  box-shadow:0 12px 32px rgba(15,23,42,.14); padding:8px; animation:popdown .14s cubic-bezier(.16,1,.3,1);
}
.stage-filter-row{display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px; cursor:pointer; font-size:13px;}
.stage-filter-row:hover{background:var(--sky);}
.stage-filter-row input{accent-color:var(--visa);}
.stage-filter-pop-actions{border-top:1px solid var(--sky-line); margin-top:6px; padding-top:6px; display:flex; justify-content:space-between; gap:8px;}
/* Обрати всі / Прибрати всі — той самий рядок дій, але зверху списку, тож рамка й відступ
   дзеркальні (знизу, а не зверху). */
.stage-filter-pop-actions--top{border-top:none; border-bottom:1px solid var(--sky-line); margin-top:0; margin-bottom:6px; padding-top:0; padding-bottom:6px;}

/* ===== Upload zone — drag&drop + queue (js/components/UploadZone.js) ===== */
.upload-drop{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  border:1.5px dashed var(--sky-line); border-radius:12px; padding:22px 16px; text-align:center;
  color:var(--ink-soft); font-size:14.5px; cursor:pointer; background:var(--sky);
  transition:border-color .12s, background .12s;
}
.upload-drop svg{width:18px; height:18px; flex-shrink:0;}
.upload-drop:hover, .upload-drop.is-over{border-color:var(--visa); background:var(--visa-soft); color:var(--visa-ink);}
.upload-drop--compact{padding:10px 12px; font-size:13px; justify-content:flex-start;}
.upload-drop--compact svg{width:15px; height:15px;}
.upload-drop.is-disabled{opacity:.5; cursor:not-allowed; pointer-events:none;}
.upload-list{display:flex; flex-direction:column; gap:6px; margin-top:10px;}
.upload-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--sky-line); border-radius:10px; background:var(--paper);}
.upload-item > svg{width:16px; height:16px; flex-shrink:0; color:var(--ink-soft);}
.upload-item-info{flex:1; min-width:0;}
.upload-item-name{font-size:14px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.upload-item-progress{height:4px; border-radius:2px; background:var(--sky-line); margin-top:6px; overflow:hidden;}
.upload-item-progress-bar{height:100%; background:var(--visa); border-radius:2px; transition:width .2s ease;}

/* Текстовий шар над PDF-сторінкою (js/pdfjs.js) — власник, 13.09: «скопировать текст...
   напротив каждого текста внутри инвойса». Той самий підхід, що й у штатному переглядачі
   pdf.js: текст прозорий (видно лише картинку сторінки під ним), але його можна виділити
   мишею й скопіювати — реквізити/суми з рахунку підрядника не треба перепечатувати руками. */
.pdf-text-layer{color:transparent; user-select:text;}
.pdf-text-layer span{position:absolute; white-space:pre; cursor:text; transform-origin:0% 0%; color:transparent;}
.pdf-text-layer ::selection{background:rgba(37,99,235,.35);}

/* ===== File tiles — Finder-style icon view for exhibits ===== */
.file-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:12px;}
.file-tile{cursor:pointer; min-width:0;}
.file-tile-thumb{
  position:relative; aspect-ratio:3/4; border:1px solid var(--sky-line); border-radius:10px;
  background:var(--paper); overflow:hidden; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-card); transition:border-color .12s, transform .12s, box-shadow .12s;
}
.file-tile:hover .file-tile-thumb{border-color:var(--visa); transform:translateY(-1px); box-shadow:var(--shadow-pop);}
.file-tile-thumb img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
.file-tile-skel{
  width:100%; height:100%;
  background:linear-gradient(90deg, var(--sky) 25%, var(--sky-deep) 37%, var(--sky) 63%);
  background-size:400% 100%; animation:shimmer 1.3s ease infinite;
}
.file-tile-generic{display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--slate-2);}
.file-tile-generic svg{width:26px; height:26px;}
.file-tile-ext{
  font-family:var(--font-mono); font-size:11px; font-weight:500; text-transform:uppercase;
  letter-spacing:.06em; background:var(--sky); color:var(--ink-soft); padding:1px 6px; border-radius:4px;
}
/* The exhibit number is the thing people cite in the petition, so it stays readable over any
   thumbnail rather than sitting in the caption where a long file name would push it out. */
.file-tile-exhibit{
  position:absolute; left:5px; top:5px; z-index:2; min-width:18px; height:18px; padding:0 5px;
  border-radius:5px; background:rgba(11,22,38,.72); color:#fff;
  font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  display:flex; align-items:center; justify-content:center;
}
.file-tile-remove{
  position:absolute; right:4px; top:4px; z-index:2; width:20px; height:20px; border-radius:6px;
  border:none; background:rgba(11,22,38,.55); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s;
}
.file-tile-remove svg{width:11px; height:11px;}
.file-tile:hover .file-tile-remove{opacity:1;}
.file-tile-remove:hover{background:var(--stamp);}
.file-tile-name{
  margin-top:6px; font-size:12.5px; line-height:1.35; color:var(--ink-soft); text-align:center;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  word-break:break-word;
}

/* ===== Skeleton / loading ===== */
.skel{background:linear-gradient(90deg, var(--sky) 25%, var(--sky-deep) 37%, var(--sky) 63%); background-size:400% 100%; animation:shimmer 1.3s ease infinite; border-radius:8px;}
@keyframes shimmer{0%{background-position:100% 0;} 100%{background-position:0 0;}}

/* ===== Toast ===== */
.toast-wrap{position:fixed; bottom:22px; right:22px; z-index:500; display:flex; flex-direction:column; gap:8px;}
/* .toast сидить на var(--ink-invert) — фіксовано темному тлі, яке НЕ перемикається з
   темною темою (styles.css:9). У світлій темі box-shadow дає йому чіткий край на білому
   тлі, але в темній темі --paper сам темний і майже того ж відтінку — тінь на тінь не
   видно, і toast читався як нечіткий чорний прямокутник без меж ("чорне і некрасиве").
   Той самий .task-popup нижче вже має такий бордер — додаємо toast-у ту саму межу, щоб
   він завжди відділявся від підкладки, в обох темах. */
.toast{background:var(--ink-invert); color:white; padding:12px 16px; border-radius:11px; font-size:14.5px; font-weight:500; box-shadow:var(--shadow-pop); display:flex; align-items:center; gap:9px; animation:toastin .2s ease; border:1px solid rgba(255,255,255,.08);}
.toast svg{width:15px; height:15px; color:#8FE3B8; flex-shrink:0;}
@keyframes toastin{from{transform:translateY(8px); opacity:0;} to{transform:translateY(0); opacity:1;}}

/* ===== Task/reply popup ===== */
.popup-wrap{position:fixed; bottom:106px; right:22px; z-index:600; display:flex; flex-direction:column; gap:12px; max-width:360px; pointer-events:none;}
.task-popup{
  position:relative; overflow:hidden; pointer-events:auto; cursor:pointer;
  display:flex; align-items:flex-start; gap:12px;
  background:var(--ink-invert); color:white; border-radius:16px; padding:14px 16px;
  box-shadow:0 16px 40px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  animation:popupin .32s cubic-bezier(.2,.9,.3,1.3);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.task-popup:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.18); box-shadow:0 20px 48px rgba(0,0,0,.42), 0 2px 10px rgba(0,0,0,.3);}
.task-popup:hover .task-popup-glow{opacity:1;}
.task-popup-glow{
  position:absolute; inset:0; pointer-events:none; opacity:.55; transition:opacity .2s ease;
  background:radial-gradient(120px 90px at -10% -10%, rgba(85,120,240,.35), transparent 70%);
}
.task-popup--task_reply .task-popup-glow{background:radial-gradient(120px 90px at -10% -10%, rgba(66,201,140,.35), transparent 70%);}
.task-popup-ic{
  position:relative; z-index:1; flex-shrink:0; width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(85,120,240,.18); color:#8FA6FF;
}
.task-popup-ic svg{width:19px; height:19px;}
.task-popup--task_reply .task-popup-ic{background:rgba(66,201,140,.18); color:#8FE3B8;}
/* A question addressed to you blocks a colleague until you answer, so it reads as urgent and
   (see pushTaskPopup) stays on screen until dismissed instead of fading after a few seconds. */
.task-popup--task_question .task-popup-glow{background:radial-gradient(120px 90px at -10% -10%, rgba(231,76,76,.38), transparent 70%);}
.task-popup--task_question .task-popup-ic{background:rgba(231,76,76,.20); color:#FF9C9C;}
.task-popup--task_question{border-color:rgba(231,76,76,.45);}
.task-popup-body{position:relative; z-index:1; flex:1; min-width:0;}
.task-popup-title{font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:3px;}
.task-popup-text{font-size:15px; font-weight:500; line-height:1.4; color:white; word-break:break-word;}
.task-popup-x{
  position:relative; z-index:1; flex-shrink:0; width:22px; height:22px; border-radius:7px; border:none;
  display:flex; align-items:center; justify-content:center; background:transparent; color:rgba(255,255,255,.4);
  cursor:pointer; transition:background .15s ease, color .15s ease;
}
.task-popup-x:hover{background:rgba(255,255,255,.12); color:white;}
.task-popup-x svg{width:13px; height:13px;}
@keyframes popupin{from{transform:translateX(24px) scale(.96); opacity:0;} to{transform:translateX(0) scale(1); opacity:1;}}
@media (max-width:640px){.popup-wrap{right:12px; left:12px; max-width:none;}}

/* ===== misc ===== */
.divider{height:1px; background:var(--sky-line); margin:18px 0;}
.hint{font-size:12.5px; color:var(--slate-2);}
/* Картка клієнта — головний робочий екран, за яким сидять годинами. Дрібний текст тут
   коштує дорожче, ніж зайві пікселі: керівник читає критерії й підписи щодня, і 13 px
   змушували придивлятися. Підняли на крок і додали міжрядковий інтервал — тепер це можна
   читати, а не розбирати. */
.client-card-view .hint{font-size:15px; line-height:1.55; color:var(--ink);}
.client-card-view .section-title{font-size:17px; margin-bottom:14px;}
.client-card-view .row-item{font-size:15.5px; line-height:1.5;}
.client-card-view h4{font-size:16.5px;}
.client-card-view .card p{line-height:1.55;}

/* Поля дати в шапці картки.
   Раніше вони мали кегль 11,5 px і жорсткі відступи, вписані просто в розмітку. Після
   переходу на Manrope дата перестала вміщатися — браузер обрізав її, і «31.08.2026»
   виглядало як помилка. Тут задано ширину під найдовшу можливу дату разом із іконкою
   календаря, тож текст не залежить від гарнітури. */
.head-date{
  border:1px solid var(--sky-line); background:var(--paper); border-radius:7px;
  padding:5px 9px; font-size:14.5px; color:var(--ink-soft);
  min-width:158px; line-height:1.3;
}
.head-date:focus{border-color:var(--visa); outline:none;}

/* Перемикач «Дата / Не визначено» біля дедлайну подачі — з'являється лише поки клієнт на
   паузі чи зійшов з дистанції (ClientCard.deadlineUnknownAllowed). Той самий формат
   .head-date по висоті, щоб не сіпало рядок шапки, коли перемикач з'являється/зникає. */
.deadline-toggle{
  display:inline-flex; border:1px solid var(--sky-line); border-radius:9px; overflow:hidden;
  line-height:1.3; height:34px; align-items:stretch;
}
.deadline-toggle-opt{
  border:none; background:var(--paper); color:var(--ink-soft); cursor:pointer;
  padding:0 10px; font-size:12.5px; font-family:inherit;
  /* nowrap і центрування — бо «Не визначено» ламалось на два рядки просто в кнопці: колонка
     дедлайну в шапці вузька, а слово довге (власник, 17.09.2026: «там де не визначено —
     некрасиво»). flex тут заради вертикального центру: з line-height текст у кнопці
     фіксованої висоти сідав вище середини. */
  white-space:nowrap; display:inline-flex; align-items:center; justify-content:center;
}
.deadline-toggle-opt+.deadline-toggle-opt{border-left:1px solid var(--sky-line);}
.deadline-toggle-opt.active{background:var(--visa); color:#fff;}

/* Шапка картки: ім'я, тип візи, суми, відповідальні — усе це тіснилося в один сантиметр і
   виглядало шумно. Даємо блоку дихати. */
.client-card-view > .card:first-of-type{padding:26px 28px;}
.client-card-view > .card:first-of-type h2,
.client-card-view > .card:first-of-type h1{font-size:28.5px; line-height:1.2; margin-bottom:4px;}
.client-card-view > .card:first-of-type .row-line{margin-top:14px; row-gap:12px;}
.section-title{font-size:15px; font-weight:700; margin-bottom:12px; color:var(--ink);}
.flex-between{display:flex; align-items:center; justify-content:space-between;}
/* One line of text that shrinks and truncates instead of pushing its neighbours out of the card.
   Used wherever the text is user data (a folder name, a client name, a file name) and therefore
   has no length anyone controls. */
.ellipsis-row{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ellipsis-row svg{vertical-align:-2px; margin-right:6px;}
.locked-panel{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; color:var(--slate); text-align:center;}
.locked-panel svg{width:32px; height:32px; margin-bottom:10px; color:var(--slate-2);}

@media (max-width: 980px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .evidence-grid{grid-template-columns:1fr;}
}

/* Phones. This matters most for the client dashboard, which clients open on their phone from a
   link. The drawer's min-width of 480px is wider than the screen there, so the page scrolled
   sideways and the close button sat off the edge. */
@media (max-width: 640px){
  .drawer{width:100vw; min-width:0; max-width:100vw;}
  .drawer-head, .drawer-foot{padding:14px 16px;}
  .drawer-body{padding:16px;}
  .drawer-foot{flex-wrap:wrap;}
  .drawer-foot .btn{flex:1 1 auto; justify-content:center;}
  .modal{width:100%; max-width:calc(100vw - 24px);}
  .modal-preview{width:100vw; max-width:100vw; height:100vh; border-radius:0;}
  .stat-grid{grid-template-columns:1fr;}
  .share-screen{padding:20px 12px;}
  .evidence-card{padding:12px;}
  .tabbar{gap:0;}
  .tab{margin-right:10px; font-size:13px;}
}

/* ===== Login screen ===== */
.login-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--sky); padding:20px;}
.login-card{width:100%; max-width:380px; background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); padding:36px 32px; text-align:center;}
.login-title{font-family:var(--font-display); font-size:23.5px; font-weight:700; margin-bottom:4px;}
.login-sub{font-size:14px; color:var(--slate); margin-bottom:24px;}
.login-card .field{text-align:left; margin-bottom:14px;}
.login-error{color:var(--stamp); font-size:13px; font-weight:600; text-align:left; margin-top:-4px; margin-bottom:10px;}

/* ===== Client-facing share view ===== */
.share-screen{min-height:100vh; background:var(--sky); padding:40px 20px;}
.share-wrap{max-width:640px; margin:0 auto;}
.share-progress-track{height:12px; background:var(--sky-deep); border-radius:99px; overflow:hidden; margin:14px 0 6px;}
.share-progress-fill{height:100%; background:linear-gradient(90deg, var(--visa), var(--good)); border-radius:99px; transition:width .4s ease;}

/* ===== Client brief quiz (ClientView.js) — dedicated sky-blue palette, always light: this
   page is shown to anonymous clients, not staff, so it doesn't follow the app's dark toggle. ===== */
.brief-shell{min-height:100vh; background:linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%); padding-bottom:40px;}
.brief-header{background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-bottom:1px solid #e2e8f0; padding:16px 20px; position:sticky; top:0; z-index:20; box-shadow:0 2px 12px rgba(0,0,0,.06);}
.brief-header-inner{max-width:640px; margin:0 auto;}
.brief-header-top{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.brief-eyebrow{font-size:12.5px; color:#94a3b8; font-weight:700; letter-spacing:.1em; text-transform:uppercase;}
.brief-title{font-size:17px; font-weight:800; color:#1e293b;}
.brief-progress-wrap{display:flex; align-items:center; gap:12px;}
.brief-progress-track{flex:1; height:6px; background:#e2e8f0; border-radius:99px; overflow:hidden;}
.brief-progress-fill{height:100%; background:linear-gradient(90deg, #0ea5e9, #0284c7); border-radius:99px; transition:width .4s ease;}
.brief-progress-pct{font-size:13px; font-weight:700; color:#0ea5e9; min-width:36px; text-align:right;}
.brief-body{max-width:640px; margin:0 auto; padding:28px 20px 0;}
.brief-intro{font-size:14px; color:#64748b; margin-bottom:16px; text-align:center;}
.brief-card{background:#fff; border-radius:24px; padding:28px; box-shadow:0 2px 16px rgba(0,0,0,.05);}
.brief-section-title{font-size:14.5px; font-weight:800; color:#64748b; letter-spacing:.04em; text-transform:uppercase; display:flex; align-items:center; gap:10px;}
.brief-section-title::before{content:''; display:inline-block; width:4px; height:16px; border-radius:99px; background:linear-gradient(180deg, #0ea5e9, #0284c7); flex-shrink:0;}
.brief-question{font-size:18px; font-weight:700; line-height:1.45; color:#1e293b; white-space:pre-line; margin-top:18px;}
.brief-hint{font-size:14.5px; color:#64748b; line-height:1.55; white-space:pre-line; margin-top:12px; background:#f0f9ff; border:1px solid #e0f2fe; border-radius:12px; padding:12px 14px;}
.brief-textarea{width:100%; margin-top:18px; padding:14px 16px; border-radius:12px; border:1.5px solid #e2e8f0; background:#fff; color:#1e293b; font-size:15px; font-family:inherit; line-height:1.5; outline:none; resize:vertical; transition:border-color .15s, box-shadow .15s;}
.brief-textarea:focus{border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.12);}
.brief-textarea:disabled{background:#f1f5f9; color:#94a3b8; cursor:not-allowed;}
.brief-nav{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:22px;}
.brief-btn-next{padding:13px 26px; background:linear-gradient(135deg, #0ea5e9, #0284c7); color:#fff; border:none; border-radius:14px; font-size:15px; font-weight:800; cursor:pointer; box-shadow:0 8px 20px rgba(14,165,233,.35); font-family:inherit; transition:transform .15s, box-shadow .15s;}
.brief-btn-next:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(14,165,233,.4);}
.brief-btn-back{padding:13px 22px; background:#fff; color:#64748b; border:2px solid #e2e8f0; border-radius:14px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit;}
.brief-btn-back:hover{background:#f8fafc;}
.brief-btn-back:disabled{opacity:.4; cursor:not-allowed;}
/* Власник, 13.09: «в темному режимі от так» — картка мала жорстко зашитий #fff-фон, тож у
   темній темі лишалась білою плямою серед темного дашборду клієнта. var(--paper)/var(--sky-line)
   — ті самі токени, що вже підлаштовуються під [data-theme="dark"] по всьому застосунку. */
.brief-cta{background:var(--paper); border-radius:20px; padding:22px 24px; box-shadow:0 2px 16px rgba(14,165,233,.1); border:1px solid var(--sky-line);}
.brief-cta-btn{padding:11px 20px; background:linear-gradient(135deg, #0ea5e9, #0284c7); color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; white-space:nowrap; font-family:inherit; box-shadow:0 6px 16px rgba(14,165,233,.3);}
.brief-success{display:flex; align-items:center; justify-content:center; min-height:70vh; padding:20px;}
.brief-success-card{background:#fff; border-radius:28px; padding:48px 36px; max-width:420px; width:100%; text-align:center; box-shadow:0 20px 60px rgba(14,165,233,.15);}
.brief-success-icon{font-size:55px; margin-bottom:14px;}
.brief-success-card h2{font-size:21px; font-weight:800; color:#1e293b; margin-bottom:8px;}
.brief-success-card p{color:#64748b; font-size:15px; margin-bottom:0;}
.brief-na{display:flex; align-items:center; gap:9px; margin-top:16px; padding:10px 14px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; font-size:15px; color:#475569; cursor:pointer; user-select:none;}
.brief-na input{width:16px; height:16px; accent-color:#0ea5e9; flex-shrink:0; cursor:pointer;}
/* Етап 4 форм USCIS (12.09.2026): складене питання анкети — набір полів замість одного
   textarea. Ті самі кольори, що й у .brief-textarea/.brief-na поруч, щоб крок виглядав як один
   екран, а не як інший застосунок. */
.brief-fields{display:flex; flex-direction:column; gap:16px; margin-top:18px;}
.brief-field{display:flex; flex-direction:column; gap:6px;}
.brief-field-label{font-size:14.5px; font-weight:700; color:#334155; line-height:1.4;}
.brief-req{color:#dc2626;}
/* Самі input/select беруть вигляд із загального правила «input:not([type=…])…» вище (його
   специфічність вища за один клас, і це добре — поля виглядають як усюди в застосунку);
   тут лише ширини. */
.brief-select{width:100%;}
.brief-input-num{max-width:160px;}
.brief-input-date{max-width:200px;}
.brief-textarea-sub{margin-top:0;}
.brief-date-row,.brief-check-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;}
.brief-check{display:inline-flex; align-items:center; gap:6px; font-size:14px; color:#475569; cursor:pointer; user-select:none;}
.brief-check input{width:15px; height:15px; accent-color:#0ea5e9; cursor:pointer;}
.brief-radio{display:flex; flex-wrap:wrap; gap:8px;}
.brief-radio label{display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border:1.5px solid #e2e8f0; border-radius:11px; background:#fff; font-size:15px; color:#334155; cursor:pointer; user-select:none; transition:border-color .15s, background .15s;}
.brief-radio label.on{border-color:#0ea5e9; background:#f0f9ff; color:#0369a1; font-weight:700;}
.brief-radio input{accent-color:#0ea5e9; margin:0;}
.brief-field.has-error input.brief-input,.brief-field.has-error select.brief-select,.brief-field.has-error .brief-textarea-sub{border-color:#f87171 !important;}
.brief-error{font-size:13.5px; color:#dc2626;}
.brief-prefill{font-size:13.5px; color:#475569; background:#f0f9ff; border:1px solid #e0f2fe; border-radius:9px; padding:7px 10px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;}
.brief-prefill button{background:none; border:none; color:#0284c7; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit; padding:0;}
.brief-repeat-item{margin-top:16px; padding:16px; border:1.5px solid #e2e8f0; border-radius:14px; background:#f8fafc; display:flex; flex-direction:column; gap:14px;}
.brief-repeat-head{display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:800; color:#0369a1; letter-spacing:.03em; text-transform:uppercase;}
.brief-remove-btn{background:none; border:none; color:#94a3b8; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; text-transform:none; letter-spacing:0;}
.brief-remove-btn:hover{color:#dc2626;}
.brief-add-btn{margin-top:14px; width:100%; padding:12px; background:#fff; color:#0284c7; border:2px dashed #bae6fd; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit;}
.brief-add-btn:hover{background:#f0f9ff;}
.brief-jump-link{background:none; border:none; color:#0284c7; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; padding:6px 4px; white-space:nowrap;}
.brief-jump-link:hover{text-decoration:underline;}
.brief-review-item{display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-bottom:1px solid #e2e8f0;}
.brief-review-item:last-child{border-bottom:none;}
.brief-review-q{font-weight:700; font-size:15px; color:#1e293b; white-space:pre-line;}
.brief-review-a{margin-top:5px; font-size:14.5px; color:#475569; white-space:pre-line;}
.brief-review-a.empty{color:#94a3b8; font-style:italic;}
.brief-review-edit{flex-shrink:0; padding:7px 14px; background:#fff; border:1.5px solid #e2e8f0; border-radius:9px; font-size:14px; font-weight:700; color:#0284c7; cursor:pointer; font-family:inherit; white-space:nowrap;}
.brief-review-edit:hover{border-color:#0ea5e9; background:#f0f9ff;}

/* ===== Info+ partner theme (ClientView.js only) =====
   Тільки для brandKey==='infoplus' (data-brand іде від РЕАЛЬНОГО поля з get_shared_client(),
   не вигадується на фронтенді — див. partnerBrand() computed). Move Nation й дефолтний GARNE
   лишаються як були — data-brand у них або 'movenation', або відсутній, і жодне з цих правил
   на них не спрацює. Це НЕ перефарбовування CRM: усе тут лежить під атрибутним селектором
   .share-screen[data-brand="infoplus"], сама ClientView.js — єдина сторінка застосунку без
   сесії, staff цей екран ніколи не бачить.

   Токени --visa/--visa-ink/--sky/--sky-deep/--sky-line перевизначені локально (успадковуються
   тільки всередині цього DOM-піддерева) — більшість елементів сторінки (посилання, бордер
   share-doc-thumb, refresh-кнопка, прогрес-бар «Огляду») вже читає саме ці токени, тож
   перефарбовується безкоштовно, без окремого правила на кожен елемент. .brief-* (анкета) —
   старий код, писаний суцільно хардкодженими sky-blue hex, без жодної змінної, тож для нього
   нижче окремі перевизначення один-в-один на ті самі властивості.

   Контраст: #f97316/#ea580c (референс власника) самі по собі не проходять WCAG AA для білого
   тексту (2.8:1 / 3.56:1 — потрібно ≥4.5:1) — тому суцільна заливка кнопок і колір
   тексту/посилань узяті на тон темніше (#c2410c, 5.18:1; #9a3412, 7.31:1), а світліші
   #f97316/#ea580c лишились лише в декоративних місцях без тексту зверху (прогрес-бар,
   бордери, м'які тіні) — там діє інший, значно м'якший поріг WCAG (не-текстовий контраст). */
/* --sky (фон .share-screen і панелей на кшталт .prp-facts) — БІЛИЙ, не персиковий: власник,
   04.09, побачив живу сторінку — «якщо Інфо+ то білий фон», «оранжевий погано читається».
   Персиковий фон під персиковими елементами (плашки/бордери) читався одним плямом; на
   білому той самий --visa-soft/--visa-ink лишається тим самим контрастним поєднанням
   (5.18:1, WCAG AA — коментар нижче), просто вже не зливається з підкладкою навколо. */
.share-screen[data-brand="infoplus"]{
  --visa:#c2410c; --visa-ink:#9a3412; --visa-soft:#ffedd5;
  --sky:#f5f3f1; --sky-deep:#ece9e5; --sky-line:#e2ded8;
}
.share-screen[data-brand="infoplus"] .share-progress-fill{background:linear-gradient(90deg, #f97316, #c2410c);}

.share-screen[data-brand="infoplus"] .brief-shell{background:linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #fffaf5 100%);}
.share-screen[data-brand="infoplus"] .brief-header{border-bottom-color:#fed7aa;}
.share-screen[data-brand="infoplus"] .brief-progress-track{background:#ffe4cc;}
.share-screen[data-brand="infoplus"] .brief-progress-fill{background:linear-gradient(90deg, #f97316, #ea580c);}
.share-screen[data-brand="infoplus"] .brief-progress-pct{color:#c2410c;}
.share-screen[data-brand="infoplus"] .brief-section-title::before{background:linear-gradient(180deg, #f97316, #ea580c);}
.share-screen[data-brand="infoplus"] .brief-hint{background:#fff7ed; border-color:#fed7aa;}
.share-screen[data-brand="infoplus"] .brief-textarea{border-color:#fed7aa;}
.share-screen[data-brand="infoplus"] .brief-textarea:focus{border-color:#f97316; box-shadow:0 0 0 3px rgba(249,115,22,.15);}
.share-screen[data-brand="infoplus"] .brief-btn-next{background:linear-gradient(135deg, #c2410c, #9a3412); box-shadow:0 8px 20px rgba(194,65,12,.35);}
.share-screen[data-brand="infoplus"] .brief-btn-next:hover{box-shadow:0 10px 24px rgba(194,65,12,.42);}
.share-screen[data-brand="infoplus"] .brief-btn-back{border-color:#fed7aa;}
.share-screen[data-brand="infoplus"] .brief-cta{box-shadow:0 2px 16px rgba(249,115,22,.12); border-color:#fed7aa;}
.share-screen[data-brand="infoplus"] .brief-cta-btn{background:linear-gradient(135deg, #c2410c, #9a3412); box-shadow:0 6px 16px rgba(194,65,12,.3);}
.share-screen[data-brand="infoplus"] .brief-success-card{box-shadow:0 20px 60px rgba(249,115,22,.16);}
.share-screen[data-brand="infoplus"] .brief-na{border-color:#fed7aa;}
.share-screen[data-brand="infoplus"] .brief-na input{accent-color:#c2410c;}
.share-screen[data-brand="infoplus"] .brief-jump-link{color:#c2410c;}
.share-screen[data-brand="infoplus"] .brief-review-item{border-bottom-color:#fed7aa;}
.share-screen[data-brand="infoplus"] .brief-review-edit{color:#c2410c; border-color:#fed7aa;}
.share-screen[data-brand="infoplus"] .brief-review-edit:hover{border-color:#f97316; background:#fff7ed;}

/* ===== Loading — hourglass ===== */
/* Заставка на старті (повернута 11.09 за проханням власника — «логотип типа моргает
   медленно»). Білий фон і плавне зникання, коли app.js знімає її. */
#startup-splash{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;overflow:hidden;background:#fff;transition:opacity .22s ease,visibility .22s ease}
#startup-splash.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.startup-splash-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:17px;text-align:center}
/* Лого замість напису чи гіфки (31.08): «легка анімація зявляння і зникання» — тихе
   пульсування, а не спінер чи стрибки. currentColor у самому SVG (icons.garneLogo) підхоплює
   білий колір, заданий тут батьківським блоком. */
.startup-splash-logo{width:72px;height:72px;border-radius:20px;
  background:linear-gradient(135deg, var(--visa), var(--visa-ink));
  box-shadow:0 10px 26px rgba(168,95,31,.28);
  display:flex;align-items:center;justify-content:center;color:#fff;
  animation:startupSplashPulse 1.8s ease-in-out infinite;}
.startup-splash-logo svg{width:40px;height:40px;}
@keyframes startupSplashPulse{0%,100%{opacity:.5;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}
.hourglass-wrap{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;}
.hourglass-wrap .hourglass-label{font-size:26.5px; color:#000; letter-spacing:.02em;}
.loading-gif{display:block; width:18cm; max-width:90vw; height:auto; max-height:18cm; object-fit:contain; border-radius:18px;}
.hourglass-loader{font-size:42.5px; line-height:1; animation:hourglassFlip 1.8s ease-in-out infinite;}
.hourglass-loader.sm{font-size:23.5px;}
@keyframes hourglassFlip{
  0%, 100%{ transform:rotate(0deg); }
  50%{ transform:rotate(180deg); }
}
.maintenance-overlay{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(11,22,38,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); text-align:center; padding:20px;}
.maintenance-overlay .hourglass-wrap{background:var(--paper); padding:36px 40px; border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); max-width:340px;}
.maintenance-overlay .hourglass-label{font-size:28.5px; font-weight:600; color:#000; line-height:1.5;}

/* ── Тижневий пульс: гейт ─────────────────────────────────────────────────────────────────── */
/* Everything behind the gate is blurred and made inert, so the only thing that can be done is
   answer. The blur lives on the shell rather than on the overlay's backdrop-filter because the
   shell scrolls: a backdrop filter would re-sample on every frame of a scroll that cannot happen
   anyway, and inert already removes the shell from tab order and pointer events. */
.shell--gated{filter:blur(7px) saturate(.85); pointer-events:none; user-select:none;}
.gate{position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
      padding:24px; background:rgba(11,22,38,.34); animation:overlayin .2s ease; overflow-y:auto;}
.gate-card{width:560px; max-width:100%; background:var(--paper); border-radius:var(--radius-lg);
           box-shadow:var(--shadow-pop); padding:30px 32px; animation:popin .22s cubic-bezier(.16,1,.3,1);
           margin:auto;}
.gate-badge{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
            color:var(--visa); background:var(--visa-soft); border-radius:999px; padding:5px 11px; margin-bottom:14px;}
.gate-title{font-family:var(--font-display,inherit); font-size:23.5px; font-weight:700; line-height:1.25;
            color:var(--ink); margin:0 0 8px; text-wrap:balance;}
.gate-sub{font-size:14.5px; line-height:1.55; color:var(--slate); margin:0 0 22px;}
.gate-q{margin-bottom:18px;}
.gate-q-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px;}
.gate-q-head label{font-size:15px; font-weight:600; color:var(--ink); margin:0;}
.gate-score{font-family:var(--font-mono,monospace); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; flex-shrink:0;}
.gate-q input[type=range]{width:100%; accent-color:var(--visa);}
/* Until it is moved, a slider must not look like it already holds an answer. */
.gate-q input[type=range].untouched{accent-color:var(--slate-2); opacity:.7;}
.gate-scale{display:flex; justify-content:space-between; font-size:12px; color:var(--slate-2); margin-top:2px;}
.gate-idea{margin-top:22px;}
.gate-idea textarea{min-height:60px;}
.gate-foot{display:flex; align-items:center; justify-content:space-between; gap:14px;
           border-top:1px solid var(--sky-line); padding-top:16px; margin-top:6px;}
.gate-card--thanks{text-align:center; padding:48px 32px;}
.gate-thanks-ic{color:var(--good); margin-bottom:12px;}
.gate-thanks-ic svg{width:44px; height:44px;}
@media (max-width:560px){ .gate-card{padding:22px 18px;} .gate-title{font-size:20px;} }

/* ── Баги ─────────────────────────────────────────────────────────────────────────────────── */
.bug-row{display:flex; gap:16px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--sky-line);}
.bug-row:last-child{border-bottom:none;}
.bug-row-main{flex:1; min-width:0;}
.bug-row-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px;}
.bug-row-text{font-size:15px; line-height:1.5; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere;}
.bug-answer{margin-top:8px; font-size:14px; line-height:1.5; color:var(--ink-soft);
            background:var(--sky); border-radius:8px; padding:8px 10px;}
.bug-row-actions{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width:340px; flex-shrink:0;}
@media (max-width:720px){ .bug-row{flex-direction:column; gap:10px;} .bug-row-actions{max-width:none; justify-content:flex-start;} }

/* ── Ідеї команди ─────────────────────────────────────────────────────────────────────────── */
.idea-card{border:1px solid var(--sky-line); border-radius:10px; padding:12px 14px; background:var(--sky);}
.idea-card + .idea-card{margin-top:8px;}
.idea-text{font-size:15px; line-height:1.55; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere;}
.idea-meta{font-size:12.5px; color:var(--slate-2); margin-top:6px;}

/* ── Мобільна версія ──────────────────────────────────────────────────────────────────────── */
/* Deliberately minimal: the dashboard only. Everything else in this CRM is a wide table or a
   two-column drawer, and a half-working client card on a 390 px screen is worse than saying so. */
.mobile-note{display:flex; gap:12px; align-items:flex-start; background:var(--visa-soft);
             border:1px solid var(--sky-line); border-radius:12px; padding:14px 16px; margin-bottom:16px;}
.mobile-note-ic{color:var(--visa); flex-shrink:0; margin-top:1px;}
.mobile-note-ic svg{width:20px; height:20px;}
.mobile-note b{display:block; font-size:15px; color:var(--ink); margin-bottom:4px;}
.mobile-note p{font-size:14px; line-height:1.5; color:var(--slate); margin:0;}
/* The dashboard's own multi-column blocks. These used to be inline grid-template-columns, which
   no media query could override — inline styles win over any stylesheet rule. As classes they
   collapse on a narrow screen instead of squeezing four numbers into 90 px each. */
.dash-grid{display:grid; gap:16px;}
.dash-grid-2{grid-template-columns:1fr 1fr;}
.dash-grid-wide{grid-template-columns:1.3fr 1fr;}
.dash-grid-4{grid-template-columns:repeat(4,1fr); gap:14px;}

/* ===== Час у команді (дашборд) =====
   Плитка міста має за півсекунди відповісти на одне питання: «зараз туди можна?». Тому
   ієрархія жорстка — час найбільший, поруч фаза доби кольором, і лише під ними дата зі
   зсувом. Кольори тільки з токенів: у темній темі ця картка виглядає так само осмислено,
   бо нічна плитка там гасне у --sky, а не в захардкоджений сірий. */
.world-clocks-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
.world-clocks-head-text{display:flex; align-items:center; gap:13px; min-width:0;}
.world-clocks-icon{width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:var(--visa-soft); color:var(--visa); display:flex; align-items:center; justify-content:center;}
.world-clocks-icon svg{width:17px; height:17px;}

/* auto-fill, а не фіксовані 4 колонки: міста додає будь-хто, і на шостому фіксована сітка
   почала б різати плитки. 190px — ширина, на якій «Лос-Анджелес» ще не переноситься. */
.clock-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px;}
.clock-tile{
  position:relative; overflow:hidden; min-width:0;
  padding:13px 14px 12px 17px; border-radius:var(--radius-md);
  border:1px solid var(--sky-line); background:var(--paper);
  display:flex; flex-direction:column; gap:9px;
  transition:border-color .15s, background .25s, transform .15s;
}
.clock-tile:hover{border-color:var(--slate-2); transform:translateY(-1px);}
/* Смужка ліворуч — той самий сигнал, що й бейдж, але видимий периферійним зором: погляд по
   ряду плиток одразу бачить, де зараз ніч, ще не читаючи жодного слова. */
.clock-tile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--good);}
.clock-tile.is-morning::before, .clock-tile.is-evening::before{background:var(--amber);}
.clock-tile.is-night::before{background:var(--slate-2);}
.clock-tile.is-night{background:var(--sky);}

.clock-tile-head{display:flex; align-items:center; gap:7px; min-width:0;}
.clock-flag{font-size:16px; line-height:1; flex-shrink:0;}
.clock-name{
  font-size:14px; font-weight:700; color:var(--ink-soft); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Прибирання — дія рідка й незворотна для всієї команди, тож хрестик не заважає читати час,
   поки на плитку не навели. Клавіатурі він доступний завжди: :focus-visible нижче. */
.clock-remove{
  flex-shrink:0; width:20px; height:20px; padding:0; border:0; border-radius:6px; cursor:pointer;
  background:transparent; color:var(--slate-2); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .12s, background .12s, color .12s;
}
.clock-remove svg{width:12px; height:12px;}
.clock-tile:hover .clock-remove{opacity:1;}
.clock-remove:hover{background:var(--stamp-soft); color:var(--stamp);}
.clock-remove:focus-visible{opacity:1; outline:2px solid var(--visa); outline-offset:1px;}

.clock-time-row{display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap;}
.clock-time{
  font-family:var(--font-mono); font-size:27.5px; font-weight:600; line-height:1;
  color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
/* Уночі цифра гасне разом із плиткою — і навпаки, робочий час лишається найконтрастнішим
   на екрані. Це те саме повідомлення, що й бейдж, тільки без слів. */
.clock-tile.is-night .clock-time{color:var(--slate);}
.clock-time-row .pill{align-self:center;}
/* .pill-slate залито тим самим --sky, що й нічна плитка, — на ній бейдж «ніч» просто зникав,
   лишалося слово без форми. Перевертаємо: на світлій плитці бейдж темніший за тло, на нічній
   світліший. В обох темах, бо обидва кольори — токени. */
.clock-tile.is-night .pill-slate{background:var(--paper); color:var(--slate);}

.clock-meta{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; line-height:1.3;}
.clock-date{color:var(--slate-2); font-weight:600;}
/* «вчора»/«завтра» — найважливіші п'ять літер на плитці: саме через них ставлять дзвінок на
   добу мимо. Колір помилки тут навмисний, це не помилка, а попередження не помилитись. */
.clock-shift{
  color:var(--stamp); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:11.5px;
  background:var(--stamp-soft); border-radius:5px; padding:1px 5px;
}
.clock-utc{font-family:var(--font-mono); font-size:11.5px; color:var(--slate-2); margin-left:auto;}

.clock-add{margin-top:14px; padding:14px; border-radius:var(--radius-md); background:var(--sky); border:1px solid var(--sky-line);}
.clock-add-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px;}
.clock-add-grid label{display:flex; flex-direction:column; gap:4px; min-width:0;}
.clock-add-grid select, .clock-add-grid input{width:100%; min-width:0;}
.clock-add-note{margin-top:9px;}
.clock-add-actions{display:flex; align-items:center; justify-content:flex-end; gap:9px; margin-top:12px; flex-wrap:wrap;}
.clock-add-preview{margin-right:auto; font-family:var(--font-mono);}

@media (max-width:720px){
  .clock-grid{grid-template-columns:1fr 1fr;}
  .clock-time{font-size:24.5px;}
}
@media (max-width:420px){
  .clock-grid{grid-template-columns:1fr;}
}

@media (max-width:900px){
  .dash-grid-wide{grid-template-columns:1fr 1fr;}
}
@media (max-width:720px){
  /* Nothing on a phone may scroll the page sideways. A single wide element — a table, a long
     unbroken word, a grid that did not collapse — otherwise drags the whole layout with it, and
     every tap lands slightly off. Anything genuinely wide has to scroll inside its own box. */
  html, body{overflow-x:hidden; max-width:100%;}
  .shell{flex-direction:column; overflow-x:hidden; max-width:100vw;}
  .view{overflow-x:hidden;}
  .card, .stat-tile{min-width:0; max-width:100%;}
  .main{width:100%; min-width:0; max-width:100vw; overflow-x:hidden;}
  .view{padding:12px;}
  .topbar{padding:10px 12px; gap:8px;}
  .topbar-slogan{display:none;}
  .search-box{display:none;}
  /* Two columns, not one: a phone screen fits two figures side by side comfortably, and a
     single column turns eight numbers into a page of scrolling. */
  .stat-grid{grid-template-columns:repeat(2,1fr) !important;}
  .dash-grid-2, .dash-grid-wide{grid-template-columns:1fr;}
  .dash-grid-4{grid-template-columns:1fr 1fr;}
  .page-head{margin-bottom:12px;}
  .page-head h1{font-size:20px;}
  .page-head p{font-size:14px;}
  .card.pad-lg{padding:14px;}
  .card{margin-bottom:12px !important;}
  /* A stat tile is a 34 px icon square, one number and one caption, in 18 px of padding — laid
     out for a wide screen where four of them fill a row. Stacked two-up on a phone the same tile
     becomes a mostly-empty 100 px box, and five of them eat the whole screen before the first
     real card. On a phone the icon moves beside the number instead of above it. */
  .stat-grid{gap:8px; margin-bottom:14px;}
  .stat-tile{padding:11px 12px; gap:4px;}
  .stat-tile .icon{width:26px; height:26px; border-radius:8px;}
  .stat-tile .icon svg{width:14px; height:14px;}
  .stat-tile .num{font-size:22.5px;}
  .stat-tile .label{font-size:12.5px; line-height:1.25;}
  .stat-tile .trend{font-size:12px; padding:1px 5px;}
  .num{font-size:23.5px !important;}
  .section-title{font-size:14.5px;}
  /* Header rows built as flex with a control on the right wrap instead of overflowing. */
  .flex-between{flex-wrap:wrap;}
  .user-chip .name, .user-chip .role{display:none;}
  .avatar.lg{width:44px; height:44px; font-size:19px;}
}
@media (max-width:340px){
  .dash-grid-4{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr !important;}
}

/* A Word or text file shown as its own opening lines — the closest thing to a page image that
   does not require rendering the whole document. Deliberately small and tight: this is a hint at
   the content, not something to read from a 150 px tile. */
.file-tile-text{
  position:absolute; inset:0; padding:26px 9px 10px; overflow:hidden;
  background:#fff; color:#2A3446;
  font-size:7.5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere;
  font-family:var(--font-body); text-align:left;
  /* Fades out at the bottom instead of cutting a line in half. */
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
}

/* ── Зарплати ─────────────────────────────────────────────────────────────────────────────── */
.period-nav{display:flex; align-items:center; gap:4px; border:1px solid var(--sky-line);
            border-radius:10px; padding:2px 4px; background:var(--paper);}
.period-nav-label{font-size:14px; font-weight:600; color:var(--ink); min-width:118px; text-align:center;}

.dep-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px;}
.dep-tile{display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
          border:1px solid var(--sky-line); background:var(--paper); border-radius:12px;
          padding:14px 16px; cursor:pointer; transition:border-color .12s, background .12s;}
.dep-tile:hover{border-color:var(--visa); background:var(--visa-soft);}
.dep-tile-name{font-weight:600; font-size:15px; color:var(--ink);}

.payroll-grand{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
               border-top:1px solid var(--sky-line); margin-top:14px; padding-top:14px;
               font-size:15px; color:var(--slate);}
.payroll-grand b{font-family:var(--font-mono,monospace); font-size:20px; color:var(--ink);
                 font-variant-numeric:tabular-nums;}
.payroll-grand b + b{margin-left:14px;}

/* The table is the one place here that can genuinely be wider than the page — a department with
   six formula components plus name, total and status. It scrolls inside its own box so the page
   itself never scrolls sideways. */
.table-scroll{overflow-x:auto; margin:0 -4px; padding:0 4px;}
.payroll-table{width:100%; border-collapse:collapse; font-size:14.5px;}
.payroll-table th{text-align:left; font-size:12.5px; font-weight:700; letter-spacing:.04em;
                  text-transform:uppercase; color:var(--slate-2); padding:0 10px 8px;
                  border-bottom:1px solid var(--sky-line); white-space:nowrap;}
.payroll-table td{padding:10px; border-bottom:1px solid var(--sky-line); vertical-align:middle;}
.payroll-table tbody tr:hover{background:var(--sky);}
.payroll-table tfoot td{border-bottom:none; border-top:2px solid var(--sky-line); padding-top:12px;}
.payroll-table .ta-right{text-align:right;}
.payroll-table .mono{font-family:var(--font-mono,monospace); font-variant-numeric:tabular-nums;}
/* An uncalculated row is a preview, not a result — it must not read as money owed. */
.payroll-table tr.is-draft td{opacity:.62;}
.payroll-table td.is-manual{cursor:pointer; position:relative;}
.payroll-table td.is-manual:hover{background:var(--visa-soft);}
.cell-edit{opacity:0; margin-left:6px; vertical-align:middle; color:var(--visa);}
.cell-edit svg{width:13px; height:13px;}
.payroll-table td.is-manual:hover .cell-edit{opacity:1;}

.comp-row{border:1px solid var(--sky-line); border-radius:12px; padding:12px; margin-bottom:10px;
          background:var(--sky);}
.comp-row-head{display:flex; gap:8px; align-items:center; margin-bottom:10px;}
.comp-row-body{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap;}

.calc-line{display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
           padding:10px 0; border-bottom:1px solid var(--sky-line);}
.calc-total{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
            padding:16px 0 20px; font-size:15px; color:var(--slate);}
.calc-total b{font-family:var(--font-mono,monospace); font-size:29.5px; color:var(--ink);
              font-variant-numeric:tabular-nums;}
.client-chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{font-size:13px; background:var(--sky); border:1px solid var(--sky-line);
      border-radius:999px; padding:4px 10px; color:var(--ink-soft);}

/* The client name is editable, but the card is read a hundred times for every time it is
   renamed — so the affordance only appears on hover instead of sitting there permanently. */
.name-edit-ic{opacity:0; margin-left:8px; vertical-align:middle; color:var(--slate-2); transition:opacity .12s;}
.name-edit-ic svg{width:14px; height:14px;}
h1:hover .name-edit-ic{opacity:1;}

/* Уточнення від AI, коли правило описано неоднозначно. */
.ai-ask{border:1px solid var(--visa); background:var(--visa-soft); border-radius:12px;
        padding:14px 16px; margin-bottom:16px; font-size:14.5px;}
.ai-note{border:1px solid var(--sky-line); background:var(--sky); border-radius:12px;
         padding:12px 14px; margin-bottom:16px; font-size:14px; line-height:1.55; color:var(--ink-soft);}
.ai-note b{color:var(--ink);}

/* Правило нарахування словами — поруч із сумою, яку воно дає. */
.principle-box{border-top:1px solid var(--sky-line); margin-top:14px; padding-top:14px;}
.principle-head{font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
                color:var(--slate-2); margin-bottom:6px;}
.principle-text{font-size:14.5px; line-height:1.6; color:var(--ink-soft); white-space:pre-wrap;}

/* Компонент, який до цієї людини не застосовується, має читатись як «не її», а не як нуль. */
.calc-line.is-skipped{opacity:.5;}
.comp-row-who{border-top:1px dashed var(--sky-line); margin-top:10px; padding-top:10px;}

/* ── Реквізити для виплат ─────────────────────────────────────────────────────────────────── */
/* Ці рядки не читають — з них переписують номер у банківський застосунок. Тому моноширинний
   шрифт, розрядка по чотири цифри і кнопка «копіювати» просто біля числа. */
.req-row.is-archived{opacity:.55;}
.req-line{display:flex; align-items:baseline; gap:8px; margin-top:4px; font-size:14px; flex-wrap:wrap;}
.req-label{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
           color:var(--slate-2); min-width:46px;}
.req-line .mono{font-family:var(--font-mono,monospace); letter-spacing:.02em; color:var(--ink);}
.req-copy{border:none; background:none; padding:0; font-size:12.5px; color:var(--visa);
          cursor:pointer; opacity:0; transition:opacity .12s;}
.req-row:hover .req-copy{opacity:1;}
.req-copy:hover{text-decoration:underline;}

/* Причина невдалого збереження лишається на екрані. Тост зникає за секунди, і людина може
   повідомити лише «була помилка» — цього замало, щоб щось полагодити. */
.save-error{margin-top:8px; font-size:13px; line-height:1.5; color:var(--stamp);
            background:var(--stamp-soft); border-radius:8px; padding:8px 10px; max-width:520px;}

/* ── Зібрані матеріали на клієнтському дашборді ───────────────────────────────────────────── */
/* Клієнт бачить, що документи зібрані, і не може їх дістати. Це не «сховали кнопку»: сервер
   не віддає шляхів до сховища взагалі, тож відкривати просто нема що. Замок на плитці —
   чесне позначення цього, а не декорація. */
.shared-file-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:12px;}
.shared-file{cursor:default;}
.shared-file-sheet{
  position:relative; aspect-ratio:3/4; border:1px solid var(--sky-line); border-radius:10px;
  background:
    linear-gradient(var(--sky-line), var(--sky-line)) 12px 26% / calc(100% - 24px) 1px no-repeat,
    linear-gradient(var(--sky-line), var(--sky-line)) 12px 38% / calc(100% - 24px) 1px no-repeat,
    linear-gradient(var(--sky-line), var(--sky-line)) 12px 50% / calc(100% - 34px) 1px no-repeat,
    linear-gradient(var(--sky-line), var(--sky-line)) 12px 62% / calc(100% - 24px) 1px no-repeat,
    linear-gradient(var(--sky-line), var(--sky-line)) 12px 74% / calc(100% - 46px) 1px no-repeat,
    var(--paper);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-card);
}
.shared-file-ext{
  font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--visa);
  background:var(--visa-soft); border-radius:5px; padding:3px 7px;
}
.shared-file-exhibit{
  position:absolute; top:6px; left:6px; font-size:11.5px; font-weight:700; color:#fff;
  background:var(--ink-invert); border-radius:5px; padding:2px 6px; opacity:.85;
}
.shared-file-lock{position:absolute; bottom:6px; right:7px; color:var(--slate-2); opacity:.7;}
.shared-file-lock svg{width:12px; height:12px;}
.shared-file-name{
  font-size:12.5px; line-height:1.35; color:var(--ink-soft); margin-top:7px; text-align:center;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:anywhere;
}

/* Прев'ю сторінки на клієнтському дашборді. Картинка навмисно розтягується на всю плитку і
   лишається нерізкою — це не документ, а свідчення, що документ є. Перетягнути чи зберегти
   її окремо теж не вийде: draggable вимкнено, а під нею немає ні посилання, ні оригіналу. */
.shared-file-sheet.has-thumb{background:var(--paper); overflow:hidden; padding:0;}
.shared-file-sheet.has-thumb img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  /* Розмиття прибрано: воно додавалось до вже стисненої до 170 px картинки, і разом виходила
     сіра пляма, на якій клієнт не бачив навіть, що це аркуш. Сам розмір і стиснення й так
     не дають прочитати текст — а саме це й було метою, а не «щоб було нечітко». */
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}

/* Фільтр присутності на сторінці «Команда та відділи». */
.presence-filter{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.presence-tab{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 13px; border-radius:99px; font-size:14.5px; font-weight:600;
  color:var(--ink-2); background:var(--paper); border:1px solid var(--sky-line);
  transition:background .12s, color .12s, border-color .12s;
}
.presence-tab:hover{border-color:var(--ink-3);}
.presence-tab.on{background:var(--ink); color:#fff; border-color:var(--ink);}
.presence-count{
  font-size:13px; font-variant-numeric:tabular-nums; opacity:.7;
  padding:0 6px; border-radius:99px; background:rgba(11,22,38,.07);
}
.presence-tab.on .presence-count{background:rgba(255,255,255,.18); opacity:.9;}
/* .online-dot взагалі-то абсолютний — він живе на аватарі. Тут повертаємо його в потік. */
.presence-tab .online-dot{position:static; width:8px; height:8px; border-width:0; box-shadow:none;}
/* Перемикач вигляду («Думка клієнтів») стоїть у тому самому ряду, що й фільтри людей, але
   робить іншу річ: підмінює вміст сторінки цілком. Тому — роздільник ліворуч і пунктирна
   рамка: людина має бачити, що це не четвертий фільтр, ЩЕ ДО того, як натисне. */
.presence-sep{width:1px; align-self:stretch; background:var(--sky-line); margin:0 4px;}
.presence-tab--view{border-style:dashed;}
.presence-tab--view.on{border-style:solid;}

/* Пікер періоду ОКРЕМОЇ картки дашборда керівника (LeaderDashboard.js) — випадає під
   пігулку в правому верхньому куті картки, а не займає власний рядок: картка лишається
   компактною, доки пікер не відкрили. */
.dash-card-period-pop{
  position:absolute; top:44px; right:16px; z-index:20;
  background:var(--paper); border:1px solid var(--sky-line); border-radius:12px;
  box-shadow:0 8px 24px rgba(11,22,38,.12); padding:12px; min-width:260px;
}

/* Вкладки розділів «Дашборд керівника». Новий клас, не .presence-tab: у нього в шаблоні
   класи вже прив'язані до is-active, а стилю на .presence-tab.is-active в файлі немає
   (є лише .presence-tab.on) — новий клас свідомо working з is-active, щоб не тягнути
   той самий розлад сюди. */
.leader-section-tabs{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.leader-section-tab{
  display:inline-flex; align-items:center; cursor:pointer;
  padding:8px 16px; border-radius:99px; font-size:14px; font-weight:600;
  color:var(--ink-2); background:var(--paper); border:1px solid var(--sky-line);
  transition:background .12s, color .12s, border-color .12s;
}
.leader-section-tab:hover{border-color:var(--ink-3);}
.leader-section-tab.is-active{background:var(--ink); color:#fff; border-color:var(--ink);}

/* Шаблон документа в списку на клієнтському дашборді: та сама плитка, що й у CRM,
   тільки менша — вона стоїть у рядку поруч із назвою, а не в сітці. */
.dt-tile{width:56px; flex-shrink:0;}
.dt-tile .file-tile-name{display:none;}
.dt-tile .file-tile-thumb{height:72px;}

/* Реквізити в списку рахунків: зберігаємо переноси рядків, які ввела людина, і не даємо
   довгому IBAN розсунути картку. Моноширинний — щоб цифри легше звірялись. */
.ac-req{
  margin-top:4px; font-size:13px; line-height:1.55; color:var(--ink-2);
  font-family:var(--font-mono, ui-monospace, monospace);
  white-space:pre-wrap; overflow-wrap:anywhere;
}

/* Повний текст реквізитів співробітника — згорнутий, щоб список лишався списком,
   але завжди під рукою: це першоджерело, з яким звіряють витягнуті IBAN і картку. */
.req-full{margin-top:6px;}
.req-full summary{cursor:pointer; font-size:12.5px; color:var(--ink-3); user-select:none;}
.req-full summary:hover{color:var(--ink-2);}
.req-raw{
  margin-top:6px; padding:8px 10px; border-radius:8px;
  background:var(--sky); border:1px solid var(--sky-line);
  font-family:var(--font-mono, ui-monospace, monospace); font-size:12.5px; line-height:1.55;
  white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink-2);
}

/* Анкета клієнта — вільний текст на кілька речень. Розтягується вручну по вертикалі,
   бо в когось три речення, а в когось абзац. */
.questionnaire-box{
  /* Було 96 px — три рядки, у які «кілька речень про клієнта» просто не влазять, і людина
     писала в шпаринку. Тепер видно весь абзац одразу, а якщо тексту більше — поле тягнеться
     мишею вниз. */
  width:100%; resize:vertical; min-height:210px; line-height:1.7;
  font-family:var(--font-body); font-size:15px; padding:14px 16px;
}

/* Відлік до дедлайну задачі на клієнтському дашборді. Спокійний, поки часу вдосталь;
   бурштиновий за добу; червоний, коли термін минув. Колір тут — єдиний спосіб побачити
   стан, не читаючи текст. */
/* Це не сірий рядок під описом, а окремий статус — тому плашка, а не текст. Раніше відлік
   писався тим самим кеглем і тим самим кольором, що й пояснення до задачі, і на телефоні
   просто губився в абзаці. І колір брався з var(--ink-3) — токена, якого в системі ніколи
   не було: властивість була невалідна, колір мовчки успадковувався від батька, тобто
   «спокійний сірий» насправді не працював жодного дня. */
/* Відлік — головне число на екрані клієнта: саме воно каже, скільки в нього лишилось часу.
   Було 13.5px сірим — читалось як службова примітка. Збільшено вдвічі й піднято в окрему
   плашку. tabular-nums обов'язковий: без нього цифри мають різну ширину й рядок сіпається
   щосекунди, коли тікає лічильник. */
.task-deadline{
  /* Власник, 02.09: «уменьши в полтора раза ці дедлайни по розміру» — плашка займала
     непропорційно багато місця під короткою задачею. Всі виміри тут зменшено рівно на
     той самий коефіцієнт (÷1.5), а не лише шрифт, — інакше плашка лишилась би тією самою
     обгорткою навколо меншого тексту й виглядала б порожньою. */
  display:inline-flex; align-items:center; gap:7px; margin-top:10px;
  padding:9px 13px; border-radius:11px; border:1px solid var(--sky-line);
  background:linear-gradient(180deg, var(--paper), var(--sky));
  color:var(--ink); box-shadow:0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent);
  font-size:14px; font-weight:750; font-variant-numeric:tabular-nums; line-height:1.2;
  letter-spacing:-.01em;
}
.task-deadline svg{width:15px; height:15px; flex-shrink:0; opacity:.75;}
.task-deadline.is-soon{color:var(--amber); font-weight:800; background:var(--amber-soft); border-color:var(--amber); box-shadow:0 2px 10px color-mix(in srgb, var(--amber) 22%, transparent);}
.task-deadline.is-over{color:var(--stamp); font-weight:800; background:var(--stamp-soft); border-color:var(--stamp); box-shadow:0 2px 10px color-mix(in srgb, var(--stamp) 22%, transparent);}
.task-deadline.is-done{color:var(--good); background:var(--good-soft); border-color:var(--good); box-shadow:none;}

/* ── Docs ──────────────────────────────────────────────────────────────────────────
   Редактор має займати майже весь екран, а панель зверху лишатися тонкою: людина
   прийшла сюди писати, а не роздивлятися кнопки. */
.doc-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.doc-row:hover{background:var(--sky);}

.doc-top{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px; margin-bottom:12px;
  background:var(--paper); border:1px solid var(--sky-line); border-radius:12px;
}
.doc-title{
  flex:1; min-width:200px; max-width:420px;
  font-weight:600; font-size:16px; border:1px solid transparent; background:transparent;
  padding:6px 8px; border-radius:8px;
}
.doc-title:hover{border-color:var(--sky-line);}
.doc-title:focus{border-color:var(--visa); background:var(--paper);}

/* Стан збереження — єдине місце, де людина дізнається, що її текст у безпеці. Тому він
   не ховається і не мигтить: просто чесно каже, що відбувається зараз. */
.doc-save{font-size:13px; font-weight:600; white-space:nowrap;}
.doc-save.is-idle{color:var(--ink-3);}
.doc-save.is-dirty{color:var(--amber);}
.doc-save.is-saving{color:var(--ink-2);}
.doc-save.is-saved{color:var(--good);}
.doc-save.is-conflict, .doc-save.is-error{color:var(--stamp);}

.doc-note{
  margin-bottom:12px; padding:10px 14px; border-radius:10px; font-size:14px; line-height:1.55;
  background:var(--stamp-soft, #fdecec); color:var(--stamp); border:1px solid currentColor;
}
.doc-note.is-soft{background:var(--sky); color:var(--ink-2); border-color:var(--sky-line);}

/* Полотно шириною з аркуш: у Word люди звикли бачити межі сторінки, і без них
   документ читається як вебсторінка, а не як лист. Справжніх розривів сторінок тут
   немає — це чесна імітація ширини, не пагінація. */
/* Документ редагується в тому вигляді, у якому його потім віддадуть: аркуш А4 книжкової
   орієнтації з полями, на сірому тлі — як у звичайному текстовому редакторі на комп'ютері.
   Так одразу видно, скільки тексту влазить на сторінку, і при вивантаженні немає сюрпризів. */
.doc-page{
  background:var(--sky-deep); border:1px solid var(--sky-line); border-radius:12px;
  padding:0 0 28px; overflow:hidden;
  /* Альбомна орієнтація й Legal ширші за робочу область на 1280 — аркуш має ЇХАТИ вбік
     усередині свого блоку, а не обрізатись (overflow:hidden вище) і не тягнути вбік цілу
     сторінку CRM. Саме тому прокрутка тут, а не на body. */
  overflow-x:auto;
}
.doc-page .ql-toolbar{border:none; border-bottom:1px solid var(--sky-line); position:sticky; top:0; background:var(--paper); z-index:5;}
.doc-page .ql-container{border:none; font-family:var(--font-body); font-size:15px;}
.doc-page .ql-container{background:var(--sky-deep); padding:24px 0 0;}
.doc-page .ql-editor{
  width:210mm; min-height:297mm; margin:0 auto; padding:20mm;
  background:#fff; color:#111; border-radius:2px; box-shadow:0 2px 16px rgba(11,22,38,.16);
  font-family:'Times New Roman', Times, serif; font-size:15px; line-height:1.5;
}
.doc-page .ql-editor table{border-collapse:collapse; width:100%;}
.doc-page .ql-editor td, .doc-page .ql-editor th{border:1px solid var(--sky-line); padding:6px 8px;}

/* TipTap-редактор — та сама сторінка А4, той самий кегль/шрифт за замовчуванням, що й у
   Quill-версії вище: перехід на новий рушій не має бути помітним на очах, лише під капотом. */
.doc-page .tt-toolbar{border-bottom:1px solid var(--sky-line); position:sticky; top:0; background:var(--paper); z-index:5;}
/* Розмір аркуша й поля тепер задає сам документ («Параметри сторінки», js/page-setup.js) —
   через CSS-змінні на .doc-page. Запасні значення в var() — рівно те, що тут стояло раніше,
   тож редактор поза Docs (картка клієнта, дашборд клієнта) не змінює вигляду. */
.doc-page .tt-editor{
  width:var(--doc-page-w, 210mm); min-height:var(--doc-page-h, 297mm); margin:24px auto 0;
  padding:var(--doc-mt, 20mm) var(--doc-mr, 20mm) var(--doc-mb, 20mm) var(--doc-ml, 20mm);
  background:var(--doc-page-bg, #fff); color:#111; border-radius:2px; box-shadow:0 2px 16px rgba(11,22,38,.16);
  font-family:'Times New Roman', Times, serif; font-size:15px; line-height:1.5;
}

/* Межі сторінок у редакторі.
   Це накладка поверх аркуша, а не пагінація вмісту: pointer-events:none, жодного впливу на
   потік тексту й на DOM, яким володіє ProseMirror. Тому найгірше, що може статись від помилки
   у вимірюванні, — лінія не в тому місці; текст і курсор не постраждають у будь-якому разі. */
.doc-page-guides{position:absolute; inset:0; pointer-events:none; z-index:4;}
/* Розрив сторінки.
   ІСТОРІЯ Й ЧОМУ ЗАРАЗ ІНАКШЕ. Спершу тут була суцільна смуга кольору тла заввишки 1 см:
   власник просив «візуально відступ 1 см», бо самий пунктир читався як підкреслення абзацу,
   а не як край аркуша. Ідея правильна, виконання — ні. Текст у редакторі суцільний, смуга
   лежала ПОВЕРХ нього (шар guides має z-index:4) і зсунута на -.5cm, тож нижньою половиною
   накривала перший рядок наступної сторінки. Власник, 30.09.2026, відкривши імпортований
   лист: рядок під позначкою був блідий і наполовину зникав — читати й правити неможливо.
   Справжньої щілини тут зробити не можна: щоб розсунути аркуші, треба рухати сам вміст, а
   він живе в редакторі, і зсув заради вигляду розійшовся б із тим, що піде на друк.
   Тому чесний варіант: позначка НІЧОГО не ховає. Пунктир по межі, підпис збоку — видно, де
   закінчується сторінка, і видно кожен рядок. */
.doc-page-edge{position:absolute; height:0; margin-top:0;
  border-top:1px dashed var(--visa, #2f6bd8);
  display:flex; align-items:flex-start; justify-content:flex-end;
  pointer-events:none;}
.doc-page-edge-chip{transform:translateY(-50%); background:var(--paper, #fff); color:var(--ink-2, #5b6b80);
  box-shadow:0 0 0 3px var(--paper, #fff);
  font:500 10.5px/1 var(--font-body, system-ui, sans-serif); letter-spacing:.02em;
  padding:3px 7px; border-radius:999px; border:1px solid var(--sky-line, #d6dfea); margin-right:6px;}

/* Поля в «Параметрах сторінки» — двома колонками, як у діалозі Google Docs: числа читаються
   парами (верхнє/нижнє, ліве/праве), а не стовпчиком із чотирьох. */
.page-setup-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px;}
.page-setup-grid label{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--ink-2);}
.page-setup-grid input{width:100%;}

/* Текст документа, який показують клієнту. Читальна ширина і звичайна типографіка —
   це лист, а не інтерфейс. */
/* ===== Заповнення бланка клієнтом =====
   Клієнт заповнює це в найгірший момент свого життя — коли від паперів залежить переїзд.
   Тому не «форма в модалці», а аркуш: те, що людина впізнає й розуміє без пояснень.
   Ширина тексту тримається читацької міри, панель інструментів тиха й не перетягує увагу
   на себе, а стан збереження видно завжди — саме він тут найважливіший. */
.fill-overlay{position:fixed; inset:0; z-index:700;  /* вище за панель критерію (600) — інакше аркуш ховається під нею */ background:rgba(11,22,38,.52);
  backdrop-filter:blur(5px); display:flex; flex-direction:column; padding:24px 16px;}
.fill-shell{width:100%; max-width:1160px; margin:auto; display:flex; flex-direction:column;
  /* Документ має відкриватися як документ, а не як віконце з підписом. Без нижньої межі
     вікно стискалось під довжину тексту, і два рядки виглядали як помилка, а не як
     початок аркуша. Власник, 01.09: «давай більше поп ап» — попап став тісним для
     довгих документів (відповіді на брифи з десятком питань), тому ширше й вище. */
  height:min(90vh, 1040px); max-height:calc(100vh - 32px);
  background:var(--paper); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop); overflow:hidden;}
.fill-head{display:flex; align-items:flex-start; gap:16px; padding:22px 28px 16px;
  border-bottom:1px solid var(--sky-line);}
.fill-head h3{font-size:21px; line-height:1.25; margin-bottom:4px;}
.fill-head .hint{font-size:14px; line-height:1.5;}
.fill-scroll{flex:1; overflow-y:auto; background:var(--sky-deep); padding:26px 16px 32px;}
/* Аркуш. Тінь м'яка й неглибока: це папір на столі, а не спливне вікно поверх вікна. */
.fill-sheet{max-width:none; margin:0 auto; min-height:100%; background:transparent;
  border:1px solid var(--sky-line); border-radius:var(--radius-md);
  box-shadow:0 4px 14px rgba(11,22,38,.07), 0 1px 3px rgba(11,22,38,.05); overflow:hidden;}
.fill-sheet .ql-toolbar.ql-snow{border:none; border-bottom:1px solid var(--sky-line);
  background:var(--paper); position:sticky; top:0; z-index:2; padding:9px 14px;}
.fill-sheet .ql-container.ql-snow{border:none; font-family:var(--font-body);}
.fill-sheet .ql-editor{width:210mm; min-height:297mm; margin:0 auto; padding:20mm; background:#fff; color:#111; border-radius:2px; box-shadow:0 2px 16px rgba(11,22,38,.16); font-family:'Times New Roman', Times, serif; font-size:15px; line-height:1.5;
  color:var(--ink);}
.fill-sheet .ql-editor.ql-blank::before{color:var(--slate-2); font-style:normal; left:40px;}
.fill-sheet .ql-editor h1{font-size:23.5px; margin:0 0 12px;}
.fill-sheet .ql-editor h2{font-size:19px; margin:20px 0 8px;}
.fill-sheet .ql-editor h3{font-size:16.5px; margin:16px 0 6px;}
.fill-sheet .ql-editor p{margin:0 0 12px;}
.fill-sheet .tt-toolbar{border:none; border-bottom:1px solid var(--sky-line);
  background:var(--paper); position:sticky; top:0; z-index:2; padding:9px 14px;}
.fill-sheet .tt-editor{width:210mm; min-height:297mm; margin:0 auto; padding:20mm; background:#fff; color:#111; border-radius:2px; box-shadow:0 2px 16px rgba(11,22,38,.16); font-family:'Times New Roman', Times, serif; font-size:15px; line-height:1.5;}
.fill-sheet .tt-editor h1{font-size:23.5px; margin:0 0 12px;}
.fill-sheet .tt-editor h2{font-size:19px; margin:20px 0 8px;}
.fill-sheet .tt-editor h3{font-size:16.5px; margin:16px 0 6px;}
.fill-sheet .tt-editor p{margin:0 0 12px;}
/* Режим читання на тому самому аркуші, що й режим правки: перемикання не має відчуватися
   як перехід в інше вікно. Ті самі поля, той самий кегль, та сама ширина рядка. */
/* Вікно, яке відкривається ПОВЕРХ документа (вибір папки). Документ сам сидить на 700,
   тож звичайні 300 лишали б цей діалог за ним — людина тисне кнопку й нічого не бачить.
   Це вже другий раз, коли рівні накладання ламають саме те, що щойно зробили. */
.overlay.over-doc{z-index:760;}
.scroll-locked{overflow:hidden !important;}

.fill-read{min-height:52vh; padding:34px 40px 44px; font-size:16px; line-height:1.75; color:var(--ink);}
.fill-read h1{font-size:23.5px; margin:0 0 12px;}
.fill-read h2{font-size:19px; margin:20px 0 8px;}
.fill-read h3{font-size:16.5px; margin:16px 0 6px;}
.fill-read p{margin:0 0 12px;}
.fill-read ul,.fill-read ol{margin:0 0 12px; padding-left:22px;}
.fill-read table{border-collapse:collapse; width:100%; margin:12px 0;}
.fill-read td,.fill-read th{border:1px solid var(--sky-line); padding:6px 9px;}
@media (max-width:640px){ .fill-read{padding:22px 20px 30px;} }

.fill-foot{display:flex; align-items:center; gap:12px; padding:14px 28px;
  border-top:1px solid var(--sky-line); background:var(--paper);}
.fill-state{margin-right:auto; font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px;}
.fill-state.is-saved{color:var(--good);}
.fill-state.is-dirty{color:var(--slate-2);}
.fill-state.is-error{color:var(--stamp);}
@media (max-width:640px){
  .fill-overlay{padding:0;}
  .fill-shell{max-height:100vh; height:100vh; border-radius:0;}
  .fill-head{padding:16px 18px 12px;}
  .fill-scroll{padding:14px 10px 20px;}
  .fill-sheet .ql-editor{padding:22px 20px 30px;}
  .fill-foot{padding:12px 18px;}
}

.shared-doc-body{max-width:720px; margin:0 auto; line-height:1.7; font-size:15px; color:var(--ink);}
.shared-doc-body h1,.shared-doc-body h2,.shared-doc-body h3{margin:18px 0 8px; line-height:1.3;}
.shared-doc-body p{margin:0 0 10px;}
.shared-doc-body table{border-collapse:collapse; width:100%; margin:12px 0;}
.shared-doc-body td,.shared-doc-body th{border:1px solid var(--sky-line); padding:6px 9px;}

/* Бібліотека Docs плитками. Аркуш зверху показує початок самого документа зменшеним —
   так його впізнають за виглядом, а не за назвою «Лист 3». */
.doc-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px;}
.doc-card{border:1px solid var(--sky-line); border-radius:12px; overflow:hidden; background:var(--paper);
  transition:border-color .12s, transform .12s;}
.doc-card:hover{border-color:var(--ink-3); transform:translateY(-1px);}
.doc-card-sheet{position:relative; height:190px; overflow:hidden; cursor:pointer;
  background:#fff; border-bottom:1px solid var(--sky-line);}
.doc-card-preview{
  transform:scale(.52); transform-origin:top left; width:192%;
  padding:18px 22px; color:#1e2532; font-size:14.5px; line-height:1.55; pointer-events:none;
}
.doc-card-preview h1,.doc-card-preview h2,.doc-card-preview h3{margin:8px 0 5px; line-height:1.25;}
.doc-card-preview p{margin:0 0 7px;}
.doc-card-preview table{border-collapse:collapse; width:100%;}
.doc-card-preview td,.doc-card-preview th{border:1px solid #d6dbe6; padding:3px 5px;}
.doc-card-empty{color:var(--ink-3); font-style:italic;}
/* Низ аркуша розчиняємо — інакше текст обрізається посеред рядка й виглядає як помилка. */
.doc-card-fade{position:absolute; left:0; right:0; bottom:0; height:52px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);}
/* Заповнений клієнтом документ усередині критерію — виглядає як аркуш у папці, а не як
   рядок у списку. Людина впізнає його за виглядом тексту, а не за назвою «Новий документ». */
.crit-doc{cursor:pointer; min-width:0;}
.crit-doc-sheet{position:relative; height:150px; overflow:hidden; background:#fff;
  border:1px solid var(--sky-line); border-radius:10px; box-shadow:var(--shadow-card);
  transition:border-color .12s, transform .12s, box-shadow .12s;}
.crit-doc:hover .crit-doc-sheet{border-color:var(--visa); transform:translateY(-1px); box-shadow:var(--shadow-pop);}
.crit-doc-preview{transform:scale(.46); transform-origin:top left; width:217%;
  padding:14px 18px; color:#1e2532; font-size:14.5px; line-height:1.55; pointer-events:none;}
.crit-doc-preview h1,.crit-doc-preview h2,.crit-doc-preview h3{margin:7px 0 4px; line-height:1.25;}
.crit-doc-preview p{margin:0 0 6px;}
.crit-doc-name{font-size:13px; font-weight:600; margin-top:6px; line-height:1.3;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.crit-doc-tag{font-size:12px; font-weight:600; color:var(--amber);}

.doc-card-body{padding:11px 13px 13px;}
.doc-card-title{font-weight:600; font-size:14.5px; cursor:pointer; margin-bottom:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.doc-card-tags{display:flex; gap:4px; flex-wrap:wrap; margin-top:7px;}
.doc-card-actions{display:flex; gap:6px; align-items:center; margin-top:10px;}

/* Найближчий дзвінок — головне на сторінці, тож він і виглядає головним. */
/* Дзвінок у клітинці календаря. Минулі приглушені, але не приховані: питання «коли ми
   збиралися минулого тижня» виникає не рідше за «коли наступний». */
.call-ev{cursor:pointer; background:var(--visa-soft); color:var(--visa-ink);}
.call-ev b{font-family:var(--font-mono,monospace); font-weight:600;}
.call-ev.is-past{background:var(--sky); color:var(--ink-soft); opacity:.7;}

.call-next{border-left:3px solid var(--visa);}
.call-when{font-size:14px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums;}
.call-when.is-soon{color:var(--amber);}
.call-when.is-live{color:var(--good);}
.call-when.is-past{color:var(--ink-3);}
.call-title{font-size:20px; font-weight:700; margin-top:3px; line-height:1.25;}

/* Пошук клієнта замість списку на 400 рядків. */
.client-picked{display:flex; align-items:center; gap:10px; padding:8px 11px;
  background:var(--sky); border:1px solid var(--sky-line); border-radius:9px;}
.client-hits{margin-top:6px; border:1px solid var(--sky-line); border-radius:9px; overflow:hidden;}
.client-hit{display:flex; justify-content:space-between; align-items:center; gap:10px;
  width:100%; padding:9px 12px; background:var(--paper); border:none; cursor:pointer;
  font-size:14.5px; text-align:left; border-bottom:1px solid var(--sky-line);}
.client-hit:last-child{border-bottom:none;}
.client-hit:hover{background:var(--sky);}

/* Збережена анкета — це текст для читання, а не поле. Абзаци, які набрала людина,
   зберігаються; ширина обмежена, щоб рядок не тягнувся через увесь екран. */
.questionnaire-text{
  white-space:pre-wrap; line-height:1.75; font-size:15px; color:var(--ink);
  max-width:760px;
}

/* Підказка під полем суми: «2.662 — це два долари шістдесят шість центів». Жовта, не
   червона: це не помилка, це питання. Помилкою воно стає, якщо на нього не відповісти. */
.amount-hint{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 0;
  padding:7px 10px; border-radius:9px; background:var(--amber-soft);
  font-size:12.5px; line-height:1.45; color:var(--ink);
}
.amount-hint b{color:var(--stamp);}
.amount-hint__fix{
  border:1px solid var(--amber); background:var(--paper); color:var(--amber);
  border-radius:999px; padding:3px 10px; font-size:12px; font-weight:700; cursor:pointer;
  white-space:nowrap;
}
.amount-hint__fix:hover{background:var(--amber); color:#fff;}

/* Роздільник місяця в колонці дошки. «Фін ефективність», 28.09.2026: «щоб ми могли побачити,
   скільки у якому місяці завершили роботу». Тонкий і сірий: це підпис для ока, а не ще один
   елемент, який конкурує з картками. Липкий — щоб при прокрутці довгої колонки завжди було
   видно, який саме місяць зараз перед очима. */

/* Вибір «через кого їде дедлайн». Дві кнопки, а не випадний список: варіантів рівно два,
   і ховати їх під клік означає ховати саме те, що має впасти в око. Активний бік
   підсвічується своїм кольором — «через нас» червонуватим, бо це наша проблема. */
.fault-pick{display:inline-flex; gap:8px; flex-wrap:wrap;}
.fault-pick--bar{margin-right:10px;}
.fault-opt{
  padding:8px 16px; border:1px solid var(--sky-line); border-radius:999px; cursor:pointer;
  background:var(--paper); color:var(--slate); font-size:13px; font-weight:600;
  transition:background .15s, border-color .15s, color .15s;
}
.fault-opt:hover{border-color:var(--amber);}
.fault-opt.active{background:var(--amber-soft); border-color:var(--amber); color:var(--amber);}
.fault-opt--us:hover{border-color:var(--stamp);}
.fault-opt--us.active{background:var(--stamp-soft); border-color:var(--stamp); color:var(--stamp);}
.pill-sm{font-size:11px; padding:2px 8px;}

/* ── Довге полотно тексту: анкета, інформація про клієнта, транскрибація ─────────────
   Власник, 28.09.2026: «довге полотно сильно подовжує сторінку… і виглядає нечитабельно».
   Згорнутий стан обрізає висоту й РОЗЧИНЯЄ низ у колір картки: різкий обріз читається як
   «текст закінчився», і кнопку під ним ніхто не шукає. */
.longtext{position:relative;}
.longtext-body{position:relative; overflow:hidden;}
.longtext-body.is-collapsed::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:96px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--paper) 88%);
}
.longtext-more{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:7px 14px;
  border:1px solid var(--sky-line); border-radius:999px; background:var(--paper);
  color:var(--visa); font-size:13px; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.longtext-more:hover{background:var(--sky); border-color:var(--visa);}

/* Перемикач «Структуровано / Як є». Як є — не про недовіру до розбору, а про те, що анкету
   іноді треба прочитати рівно так, як її написали: цей текст іде в петицію. */
.longtext-modes{display:inline-flex; gap:2px; margin-bottom:12px; padding:2px;
  background:var(--sky); border-radius:999px;}
.longtext-mode{
  padding:5px 12px; border:none; border-radius:999px; background:transparent; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--slate); transition:background .15s, color .15s;
}
.longtext-mode.active{background:var(--paper); color:var(--ink); box-shadow:var(--shadow-sm);}

/* Блоки розібраного тексту. Акценти навмисно стримані: жирне — лише підпис графи й питання
   анкети, решта звичайна. Полотно, де виділено все, читається так само погано, як і те, де
   не виділено нічого. */
.lt-head{
  font-weight:700; font-size:14px; color:var(--ink); margin:20px 0 8px;
  padding-left:11px; border-left:3px solid var(--visa); line-height:1.4;
}
.lt-head:first-child{margin-top:0;}
.lt-pair{display:grid; grid-template-columns:minmax(150px, 230px) 1fr; gap:6px 18px;
  padding:9px 0; border-bottom:1px solid var(--sky-line); align-items:baseline;}
.lt-pair:last-child{border-bottom:none;}
/* Продовження графи: та сама сітка, але без своєї межі й без відступу зверху — воно має
   читатись як частина попереднього рядка, а не як новий. */
.lt-pair--cont{padding-top:0; border-top:none; margin-top:-4px;}
/* ── Відповіді брифу у вкладці «Інформація для форм» ─────────────────────────────────
   Власник, 02.10.2026: «виглядає як у дешевенькій адмінці, перевантажено, дуже шумно».
   Шум давали три речі разом: кожна відповідь у рамці з заливкою, підказка курсивом із
   емодзі на всю ширину, і нульові проміжки між питаннями. Тут усе троє й лікується:
   поле без рамки, доки його не чіпають; підказка тихим кольором із тонкою рискою;
   повітря між питаннями. Жодна поведінка не змінилась — лише вигляд. */
.qa-list{display:flex; flex-direction:column;}
.qa-item{padding:16px 0; border-bottom:1px solid var(--sky-line);}
.qa-item:last-child{border-bottom:none; padding-bottom:4px;}
.qa-q{font-size:13.5px; font-weight:600; line-height:1.5; color:var(--ink); white-space:pre-line;}
.qa-hint{
  margin:6px 0 0; padding-left:11px; border-left:2px solid var(--sky-line);
  font-size:12.5px; line-height:1.5; color:var(--slate-2); white-space:pre-line;
}
/* Поле відповіді показує текст, а не форму: рамка й заливка зʼявляються лише коли на
   нього наводять чи в ньому стоять. Так сторінка читається як довідка, а не як анкета,
   яку ще треба заповнювати. */
.qa-a{
  display:block; width:100%; margin-top:8px; padding:7px 10px;
  border:1px solid transparent; border-radius:9px; background:transparent;
  font-family:inherit; font-size:13px; line-height:1.55; color:var(--ink);
  resize:none; overflow:hidden; transition:background .12s, border-color .12s;
}
.qa-a:hover{background:var(--sky);}
.qa-a:focus{background:var(--sky); border-color:var(--sky-line); outline:none;}
.qa-a::placeholder{color:var(--slate-2); opacity:.7;}
/* Типова відповідь — два стовпці. Підпис графи вужчий і тихіший за значення: читають
   саме значення, підпис лише орієнтує. */
.qa-pairs{margin-top:8px; display:flex; flex-direction:column; gap:1px;}
.qa-pair{
  display:grid; grid-template-columns:minmax(120px, 290px) 1fr; gap:4px 16px;
  padding:5px 10px; border-radius:7px;
}
.qa-pair:nth-child(odd){background:var(--sky-soft, rgba(0,0,0,.015));}
.qa-pair__k{font-size:12px; line-height:1.45; color:var(--slate-2);}
.qa-pair__v{font-size:13px; line-height:1.45; color:var(--ink); white-space:pre-wrap; word-break:break-word;}
.qa-pair__v--empty{color:var(--slate-2);}
/* Блок Part 9: один список питань і одна відповідь на весь блок. */
.qa-short{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px;}
.qa-short__val{
  padding:4px 12px; border-radius:999px; font-size:13px; font-weight:600;
  background:var(--sky); color:var(--ink);
}
.qa-short__val--empty{background:transparent; color:var(--slate-2); font-weight:400; padding-left:0;}
.qa-short__edit{
  background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:12px;
  color:var(--visa); text-decoration:underline; align-self:flex-start; margin-top:6px;
}
@media (max-width:700px){
  .qa-pair{grid-template-columns:1fr; gap:2px; padding:7px 10px;}
  .qa-pair__k{font-size:11.5px;}
}
/* Коментар до оцінки дашборду — під шапкою картки, видно всій команді кейсу.
   Жовтий, а не червоний: це не поломка, а список того, що треба доробити. */
.dash-note{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:10px 0 0; padding:9px 13px; border-radius:0 8px 8px 0;
  border-left:3px solid var(--amber, #e0a020);
  background:var(--amber-soft, rgba(255,176,32,.10));
  font-size:13px; line-height:1.5;
}
.dash-note__key{flex:0 0 auto; font-weight:700; color:var(--ink);}
.dash-note__val{flex:1; min-width:160px; color:var(--ink-2, var(--ink));}
/* Позиціонування — окремий рядок над анкетою (Юля, 02.10.2026: «має бути добре видиме і
   чітко вгорі анкети, щоб усі це бачили»). Риска ліворуч і синій підпис, бо серед сірої
   таблиці анкети око має чіплятись за нього першим. Порожній стан теж видно — інакше
   незаповнене позиціонування просто ніхто не помітить. */
.positioning{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 14px; padding:11px 14px;
  border-left:3px solid var(--visa); border-radius:3px;
  background:var(--sky-soft, rgba(0,0,0,.02));
}
.positioning--empty{border-left-color:var(--sky-line); background:transparent;}
.positioning__key{
  flex:0 0 auto; font-size:12px; font-weight:600; color:var(--visa);
  text-transform:uppercase; letter-spacing:.02em;
}
.positioning--empty .positioning__key{color:var(--slate);}
.positioning__val{flex:1; min-width:140px; font-size:16px; font-weight:600; color:var(--ink); line-height:1.45;}
.positioning__val .hint{font-size:13px; font-weight:400;}
.positioning__input{flex:1; min-width:200px; min-height:40px;}
@media (max-width:700px){
  .positioning{gap:6px 10px;}
  .positioning__val, .positioning__input{flex:1 0 100%;}
}
.lt-key{font-size:12px; font-weight:600; color:var(--slate); text-transform:uppercase; letter-spacing:.02em;}
.lt-val{font-size:15px; line-height:1.65; color:var(--ink); white-space:pre-wrap;}
.lt-p{font-size:15px; line-height:1.75; color:var(--ink); margin:0 0 12px; white-space:pre-wrap; max-width:760px;}
.lt-item{
  position:relative; padding-left:26px; margin:0 0 8px; font-size:15px; line-height:1.65;
  color:var(--ink); white-space:pre-wrap; max-width:760px;
}
.lt-item::before{
  content:'✓'; position:absolute; left:4px; top:0; color:var(--good); font-weight:700; font-size:13px;
}
@media (max-width:640px){ .lt-pair{grid-template-columns:1fr; gap:2px; padding:8px 0;} }

/* Файли до анкети — окремий блок під текстом, відділений лінією, щоб не зливався з описом. */
.questionnaire-files{margin-top:16px; padding-top:14px; border-top:1px solid var(--sky-line);}

/* Документ під задачею клієнта. Бланк на заповнення виглядає інакше за готовий документ —
   це не оформлення, а різне повідомлення: «прочитайте» проти «зробіть». */
.task-doc{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px;
  padding:8px 10px; border:1px solid var(--sky-line); border-radius:9px; background:var(--paper);}
.task-doc svg{width:15px; height:15px; flex-shrink:0;}
.task-doc-name{font-size:14px; font-weight:600; min-width:0;}
.task-doc.is-template{border-color:var(--amber); background:var(--amber-soft, #fff8e8);}
.task-doc-tag{font-size:12.5px; font-weight:700; color:var(--amber); text-transform:uppercase; letter-spacing:.03em;}

/* Перегляд таблиць .xlsx у вікні попереднього перегляду.
   Таблиця може бути широкою — гортається всередині свого контейнера, а не тягне за собою
   всю сторінку. Перший рядок книги показуємо як заголовок і прилипаємо ним до верху:
   на трьохсот рядках без цього неможливо зрозуміти, у якій ти колонці. */
.xlsx-preview { width:100%; height:100%; background:var(--paper); border-radius:8px;
                overflow:auto; padding:18px; }
.xlsx-preview .xlsx-sheet + .xlsx-sheet { margin-top:26px; }
.xlsx-preview h4 { font-family:var(--font-display); font-size:15px; font-weight:700;
                   color:var(--ink); margin:0 0 10px; }
.xlsx-preview .xlsx-scroll { overflow-x:auto; border:1px solid var(--sky-line); border-radius:8px; }
.xlsx-table { border-collapse:collapse; font-size:14px; font-family:var(--font-body);
              min-width:100%; white-space:pre-wrap; }
.xlsx-table th, .xlsx-table td { border:1px solid var(--sky-line); padding:6px 10px;
              text-align:left; vertical-align:top; max-width:420px; overflow-wrap:anywhere;
              /* Без нижньої межі вузька колонка стискається до одного символа й «886»
                 переноситься як «88 / 6» — число перестає читатись. */
              min-width:72px; }
.xlsx-table th { background:var(--sky); font-weight:600; color:var(--ink);
                 position:sticky; top:0; z-index:1; }
.xlsx-table tbody tr:nth-child(even) { background:color-mix(in srgb, var(--sky) 45%, transparent); }

/* Блоки всередині аркуша. Прайс PR-пропозиції — це не одна таблиця, а кілька списків підряд
   («Публікації», «Нагороди», «Додаткові послуги»), розділені рядком із самою назвою. Без
   виділення вони зливались в суцільну стіну: керівник ПР, 17.09.2026, «все дуже змішано,
   потрібно поділити на блоки».

   Заголовок блоку тягнемо на всю ширину візуально — саме значення лишається в першій
   клітинці, тож копіювання й пошук по таблиці працюють як були. */
.xlsx-table tbody tr.xlsx-group > td { background:var(--sky); font-weight:700; color:var(--ink);
              border-top:2px solid var(--visa); font-size:14.5px; padding-top:9px; padding-bottom:9px; }
.xlsx-table tbody tr.xlsx-group > td:empty { border-left-color:transparent; }
/* Порожній рядок-роздільник, який людина лишила в Excel навмисно: показуємо його вузькою
   смугою замість повноцінного рядка з порожніми клітинками — інакше він читається як
   загублені дані. */
.xlsx-table tbody tr.xlsx-spacer > td { height:10px; padding:0;
              background:color-mix(in srgb, var(--sky) 30%, transparent);
              border-left-color:transparent; border-right-color:transparent; }
.xlsx-preview .hint { margin-top:8px; }

/* Рядок документа, у якому вже є файл.
   Синій зліва і легка заливка — щоб у списку з десяти позицій було видно з першого погляду,
   де документ є, а де його ще чекають. Раніше цю роль виконувало слово «Завантажено»: його
   треба було прочитати в кожному рядку, і однакові зелені плашки зливалися в шум. */
.doc-row.has-file {
  background: color-mix(in srgb, var(--visa) 8%, transparent);
  border-left: 3px solid var(--visa);
  padding-left: 11px;
}
.doc-row.has-file > div:first-child { color: var(--visa); }
.doc-row.has-file .btn-outline { border-color: var(--visa); color: var(--visa); }

/* Заголовки груп у випадних списках (відділи при додаванні в команду).
   На macOS Safari/Chrome малюють <optgroup label> системним сірим по сірому тлі — на світлій
   темі це майже нечитно, і людина не бачить, з якого відділу обирає людину. Задаємо колір і
   вагу самі; тло теж явно, бо системне успадковується від меню, а не від сторінки. */
select optgroup {
  color: var(--ink);
  font-weight: 700;
  font-style: normal;
  background: var(--paper);
  font-size: 12.5px;
  letter-spacing: .02em;
}
select optgroup option {
  color: var(--ink);
  font-weight: 500;
  background: var(--paper);
  padding-left: 8px;
}

/* ── Календар ─────────────────────────────────────────────────────────────────────
   Сітка навмисно велика: календар відкривають, щоб охопити місяць одним поглядом.
   Тому висота рахується від висоти вікна, а не від вмісту — інакше в порожньому місяці
   він стискався б у смужку. Бічна колонка з подробицями дня — рівно третина. */
.cal-layout { display:grid; grid-template-columns: 2fr 1fr; gap:16px; align-items:start; }
.cal-main { display:flex; flex-direction:column; min-height:0; }
.cal-side { position:sticky; top:16px; max-height:calc(100vh - 140px); overflow:auto; }

.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-head { margin-bottom:8px; }
.cal-head > div {
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); text-align:center; padding-bottom:4px;
}
.cal-body { flex:1; min-height:0; }

.cal-day {
  border:1px solid var(--sky-line); border-radius:10px; background:var(--paper);
  padding:7px 8px; min-height:104px; cursor:pointer; overflow:hidden;
  display:flex; flex-direction:column; gap:5px; transition:border-color .12s, background .12s;
}
.cal-day:hover { border-color:var(--visa); }
.cal-day.is-other { background:var(--sky); opacity:.55; }
.cal-day.is-weekend:not(.is-other) { background:color-mix(in srgb, var(--sky) 45%, transparent); }
.cal-day.is-today { border-color:var(--visa); border-width:2px; padding:6px 7px; }
.cal-day.is-selected { background:var(--visa-soft); border-color:var(--visa); }

.cal-num { font-size:14.5px; font-weight:700; color:var(--ink); font-family:var(--font-mono); }
.cal-day.is-other .cal-num { color:var(--ink-soft); }
.cal-events { display:flex; flex-direction:column; gap:3px; min-height:0; }
.cal-ev {
  font-size:12.5px; line-height:1.3; padding:2px 6px; border-radius:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cal-ev.ev-filing { background:var(--stamp-soft); color:var(--stamp); font-weight:600; }
.cal-ev.ev-task   { background:var(--visa-soft); color:var(--visa); }
.cal-more { font-size:12px; color:var(--ink-soft); padding-left:6px; }

.cal-dot { width:9px; height:9px; border-radius:3px; flex-shrink:0; margin-top:5px; }
.cal-dot.ev-filing { background:var(--stamp); }
.cal-dot.ev-task   { background:var(--visa); }
/* Перенесення дедлайну — бурштиновий, окремо від подачі (червоний) і задачі (синій): це не
   дедлайн і не робота, а те, що з дедлайном сталося. Третій колір тут потрібен, бо в одній
   клітинці дня всі три види стоять поруч. */
.cal-ev.ev-move   { background:#FEF3C7; color:#92400E; }
.cal-dot.ev-move  { background:#D97706; }
.cal-move-why{
  margin-top:4px; padding:7px 9px; border-radius:8px; font-size:12.5px; line-height:1.45;
  background:var(--sky-soft, #F1F5F9); color:var(--ink-soft); white-space:pre-wrap; overflow-wrap:anywhere;
}

/* ── Вікно перенесення дедлайну ───────────────────────────────────────────────────────
   «Було → Стає» великими датами: людина підтверджує зміну, а не згадує, що набрала. */
.deadline-move{display:flex; align-items:stretch; gap:12px;}
.deadline-move__side{
  flex:1; display:flex; flex-direction:column; gap:4px; padding:12px 14px;
  border:1px solid var(--sky-line); border-radius:12px; background:var(--paper-2, #F8FAFC);
}
.deadline-move__side--to{border-color:var(--visa); background:color-mix(in srgb, var(--visa) 7%, transparent);}
.deadline-move__label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-2); font-weight:700;}
.deadline-move__date{font-size:16px; font-weight:700; color:var(--ink);}
.deadline-move__side--to .deadline-move__date{color:var(--visa);}
.deadline-move__arrow{display:flex; align-items:center; color:var(--slate-2); flex-shrink:0;}
.deadline-move__arrow svg{width:20px; height:20px;}
.deadline-move__shift{margin:10px 0 0; font-weight:600; color:#B7791F;}
.deadline-move__past{margin-top:18px; border-top:1px solid var(--sky-line); padding-top:12px;}
.deadline-move__past-head{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-2); margin-bottom:8px;}
.deadline-move__past-row{display:flex; flex-direction:column; gap:2px; font-size:12.5px; padding:7px 0; border-bottom:1px solid var(--sky-line);}
.deadline-move__past-row:last-child{border-bottom:none;}
.deadline-move__past-why{color:var(--ink-soft);}
@media (max-width:520px){
  .deadline-move{flex-direction:column;}
  .deadline-move__arrow{transform:rotate(90deg); align-self:center;}
}

@media (max-width: 1100px) {
  .cal-layout { grid-template-columns:1fr; }
  .cal-side { position:static; max-height:none; }
  .cal-day { min-height:78px; }
}

/* ═════ Файли на публічному дашборді клієнта (js/pages/ClientView.js) ══════════════════════
   Два списки: жорсткий чек-лист «Документи для завантаження» (шість слотів, .share-doc--slot)
   і вільна тека «Матеріали клієнта» (.row-item.share-doc). Спільного в них рівно стільки,
   скільки й є насправді: мініатюра, назва, підпис під нею.

   Чому переписано (29.08): власник дивився на попередню версію й сказав те саме, що й про
   критерії — «як в админке дешевенькой». Шість однакових рядків через волосяну лінію, підказка
   тим самим 11.5px сірим, що й усе інше, дві кнопки однакової ваги незалежно від стану, а на
   390px назва документа взагалі складалась у колонку по одній літері («П а с п о р т»).

   Кольори — тільки токени (--visa/--sky/--good/--amber/--stamp/--ink/--slate): сторінка вміє
   партнерські теми (.share-screen[data-brand="infoplus"] перевизначає саме ці токени), і
   зашитий hex дав би там чужий колір. ═══════════════════════════════════════════════════ */

/* ── Спільна основа обох списків ──────────────────────────────────────────────────────── */
.share-doc{min-width:0;}
/* Раніше тут стояв інлайновий style="flex:1" прямо в розмітці, тобто flex-basis:0 — блок
   назви віддавав усю ширину кнопкам поруч і стискався до чотирьох літер. Інлайн б'є будь-який
   селектор, тож із CSS це лікувалось лише через !important. Тепер ширина керується звідси:
   basis auto означає «спершу вміст, стискатись тільки якщо інакше ніяк». */
.share-doc-body{flex:1 1 auto; min-width:0;}
.share-doc .icon-btn{flex:none;}
/* У «Матеріалах клієнта» сусіди по рядку мають фіксовану ширину (мініатюра + кошик), тож
   назві можна дати basis:0 — вона забере рівно лишок і не виштовхне кошик на власний рядок.
   Саме цього не можна робити там, де поруч стоять кнопки з nowrap-текстом: basis:0 віддає їм
   усе, і назва стискається в колонку по одній літері — рівно той баг, що був у чек-листі. */
.row-item.share-doc .share-doc-body{flex-basis:0;}
.share-doc-title{font-size:15.5px; font-weight:700; line-height:1.35; color:var(--ink); overflow-wrap:anywhere;}
.share-doc-sub{font-size:14px; color:var(--slate); margin-top:3px;}
.share-doc-thumb{
  width:46px; height:46px; border-radius:11px; flex-shrink:0; overflow:hidden;
  background:var(--sky); border:1px solid var(--sky-line);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:21px;
}
.share-doc-thumb img{width:100%; height:100%; object-fit:cover;}
.share-doc-thumb.clickable{cursor:zoom-in;}
.share-doc-thumb.clickable:hover{border-color:var(--visa);}
/* Підсвітка «файл уже є» лишається лише для «Матеріалів клієнта» (вони й далі .row-item):
   у чек-листі нижче стан показується інакше — там порожній слот теж має свій колір. */
.row-item.share-doc.has-file{
  background:color-mix(in srgb, var(--visa) 7%, transparent);
  border-left:3px solid var(--visa); padding-left:11px;
}
.row-item.share-doc.has-file .share-doc-thumb{border-color:var(--visa); color:var(--visa);}

/* ── Картка «Документи для завантаження» ──────────────────────────────────────────────── */
.share-docs-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:14px;}
.share-docs-head-main{flex:1 1 auto; min-width:0;}
.share-docs-title{
  font-family:var(--font-display); font-size:20px; font-weight:800; line-height:1.25;
  letter-spacing:-.01em; color:var(--ink); margin:0;
}
.share-docs-sub{font-size:15px; line-height:1.55; color:var(--slate); margin:6px 0 0;}
/* Головне число блоку. Пігулка 11px, яка тут стояла, губилась поруч із заголовком —
   а це рівно те, заради чого людина відкриває екран: «скільки я вже здав». */
.share-docs-count{
  flex:none; display:flex; align-items:baseline; gap:4px; padding:7px 13px;
  border-radius:14px; background:var(--sky); font-variant-numeric:tabular-nums;
}
.share-docs-count b{font-size:23.5px; font-weight:800; line-height:1; color:var(--visa);}
.share-docs-count i{font-style:normal; font-size:14px; font-weight:700; color:var(--slate);}
.share-docs-count.is-done{background:var(--good-soft);}
.share-docs-count.is-done b{color:var(--good);}
.share-docs-track{margin:0 0 8px;}
.share-docs-left{font-size:14.5px; font-weight:700; color:var(--slate); margin:0 0 16px;}
.share-docs-left.is-done{color:var(--good);}
.share-docs-error{
  display:flex; align-items:flex-start; gap:9px; margin:0 0 16px; padding:11px 13px;
  border-radius:12px; background:var(--stamp-soft); color:var(--stamp);
  font-size:14.5px; font-weight:600; line-height:1.5;
}
.share-docs-error .ic{flex:none; font-size:18px; line-height:0; padding-top:2px;}
.share-docs-list{display:flex; flex-direction:column; gap:12px;}

/* ── Один слот чек-листа ──────────────────────────────────────────────────────────────────
   Колонкою на БУДЬ-ЯКІЙ ширині, а не рядком, який на телефоні тисне назву: кожен слот — це
   картка «що це / що саме прислати / у якому воно стані / одна кнопка». Ширина колонки
   сторінки й так 640px, тож на десктопі це читається не гірше, ніж рядок, зате назва
   документа не може стиснутись у принципі — поруч із нею немає нічого. */
.share-doc--slot{
  display:flex; flex-direction:column; align-items:stretch; gap:12px;
  padding:15px 16px 15px 18px; border-radius:16px;
  background:var(--paper); border:1px solid var(--sky-line);
  box-shadow:inset 4px 0 0 var(--amber);
  transition:box-shadow .15s, border-color .15s, background .15s;
}
.share-doc--slot.has-file{
  background:color-mix(in srgb, var(--good) 4%, var(--paper));
  border-color:color-mix(in srgb, var(--good) 28%, var(--sky-line));
  box-shadow:inset 4px 0 0 var(--good);
}
.share-doc-head{display:flex; align-items:center; gap:13px; min-width:0;}
.share-doc--slot .share-doc-thumb{width:56px; height:56px; border-radius:15px; font-size:24.5px;}
/* Порожній слот: пунктир і теплий колір читаються як «сюди треба покласти», а не як
   ще одна сіра плитка в списку. */
.share-doc--slot:not(.has-file) .share-doc-thumb{
  background:var(--amber-soft); border:1.5px dashed color-mix(in srgb, var(--amber) 45%, transparent);
  color:var(--amber);
}
.share-doc--slot.has-file .share-doc-thumb{
  border-color:color-mix(in srgb, var(--good) 45%, transparent); color:var(--good);
}
.share-doc--slot .share-doc-title{font-size:17.5px; font-weight:800; line-height:1.3;}
.share-doc-state{
  display:inline-flex; align-items:center; gap:5px; margin-top:4px;
  font-size:14px; font-weight:700; letter-spacing:.01em;
}
.share-doc-state .ic{display:flex; font-size:15px; line-height:0;}
.share-doc-state.is-wait{color:var(--amber);}
.share-doc-state.is-done{color:var(--good);}
/* Ім'я файла — окремим рядком, моноширинним: у сканах воно на кшталт IMG_4821.HEIC, і
   пропорційний шрифт такі рядки склеює. */
.share-doc-file{
  display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:11px;
  background:var(--sky); color:var(--ink-soft);
  font-family:var(--font-mono); font-size:13px; line-height:1.4; overflow-wrap:anywhere;
}
.share-doc-file .ic{flex:none; display:flex; font-size:16px; line-height:0; color:var(--slate);}
/* Багатофайловий документ (паспорт зі сторінками відміток): кожен файл — свій рядок зі
   своїм «Переглянути» й своїм кошиком. Саме цього не було: одна кнопка «Замінити» на весь
   слот означала «зітри те, що вже надіслав». */
.share-doc-files{display:flex; flex-direction:column; gap:7px;}
.share-doc-file-row{gap:9px;}
.share-doc-file-name{flex:1 1 auto; min-width:0;}
.share-doc-file-row .btn{flex:none; padding:5px 11px; font-size:13px;}
/* Кошик тут стоїть у рядку файла, а не в кінці картки, тож margin-left:auto зі
   .share-doc-del довелось би на нього ще раз — його роль виконує гнучке ім'я зліва. */
.share-doc-file-row .share-doc-del{width:30px; height:30px; margin-left:0;}
.share-doc-note-many{display:block; margin-top:4px; font-weight:600; color:var(--visa);}
/* Підказка — це інструкція, як саме сфотографувати документ, а не підпис дрібним сірим.
   Тому вона оформлена як вказівка: власна плашка, свій розмір, свій підпис зверху.
   Заливка навмисно нейтральна (--sky), а не синя: шість синіх плашок поруч із шістьма синіми
   кнопками з'їдали одна одну, і «одна очевидна дія» переставала бути очевидною. Синім лишився
   тільки підпис — його вистачає, щоб плашка читалась як вказівка, а не як сірий коментар. */
.share-doc-note{
  padding:10px 12px; border-radius:11px;
  background:var(--sky); border:1px solid var(--sky-line);
  font-size:15px; line-height:1.5; color:var(--ink-soft);
}
.share-doc-note-label{
  display:block; margin-bottom:3px; font-size:12px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--visa);
}
/* Слот уже закритий — інструкція лишається (раптом поклали не ту сторінку), але вже не
   команда, а довідка. */
.share-doc-note.is-quiet{
  padding:0; background:transparent; border:0; font-size:14px; color:var(--slate);
}
.share-doc-actions{display:flex; align-items:center; flex-wrap:wrap; gap:9px;}
/* Порожній слот має рівно одну очевидну дію: суцільний колір, іконка, більший розмір.
   На заповненому обидві кнопки навмисно тихіші — там уже все зроблено. */
.share-doc-cta{flex:0 0 auto; justify-content:center; padding:12px 20px; font-size:15px; border-radius:12px;}
.share-doc--slot.has-file .share-doc-actions .btn{padding:9px 14px; font-size:14.5px;}
.share-doc-del{width:38px; height:38px; margin-left:auto; color:var(--stamp); background:var(--stamp-soft);}
.share-doc-del:hover{background:color-mix(in srgb, var(--stamp) 18%, transparent);}
/* Слот у польоті: кнопка вже disabled, але й сама картка має показувати, що зараз щось
   відбувається — інакше на повільному 4G людина тисне ще раз. */
.share-doc--slot.is-busy{border-color:color-mix(in srgb, var(--visa) 40%, transparent);}
.share-doc--slot.is-busy .share-doc-thumb{
  animation:shareDocBusy 1.1s ease-in-out infinite; border-color:var(--visa); color:var(--visa);
}
@keyframes shareDocBusy{0%,100%{opacity:1;} 50%{opacity:.45;}}
/* Файл прибрали зі списку, а зі сховища — ні. Смуга на всю ширину слота, а не ще одна
   кнопка в ряд: інакше на телефоні вона ламала рядок дій і виглядала як третя рівноправна дія. */
.share-doc-warn{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:10px 12px; border-radius:11px;
  background:var(--stamp-soft); color:var(--stamp); font-size:14px; font-weight:600; line-height:1.45;
}
.share-doc-warn > span:nth-child(2){flex:1 1 180px; min-width:0;}
.share-doc-warn .ic{flex:none; display:flex; font-size:17px; line-height:0;}
.share-doc-warn .btn{flex:none; background:var(--paper); border-color:var(--stamp); color:var(--stamp);}

/* Стрілки перенесення картки на сусідній етап.
   З'являються при наведенні на картку. Перетягування лишається — це не заміна, а другий
   спосіб для тих, кому незручно тягнути через півдошки з п'ятнадцяти колонок. */
.kanban-card { position: relative; }
.kanban-move {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 26px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--sky-line); background: var(--paper); color: var(--ink-soft);
  border-radius: 8px; cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .12s, color .12s, border-color .12s, background .12s;
  box-shadow: var(--shadow-card); z-index: 2;
}
.kanban-move--left  { left: -13px; }
.kanban-move--right { right: -13px; }
.kanban-card:hover .kanban-move { opacity: 1; pointer-events: auto; }
.kanban-move:hover { color: var(--visa); border-color: var(--visa); background: var(--visa-soft); }
.kanban-move svg { width: 15px; height: 15px; }
/* На сенсорних екранах наведення не існує — там кнопки видно завжди. */
@media (hover: none) { .kanban-move { opacity: 1; pointer-events: auto; } }

/* Спільне вікно підтвердження (askConfirm). Своє, а не системне: тримає стиль застосунку
   й дозволяє назвати кнопку дією — «Перенести», а не безлике «OK». */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(11, 22, 38, .45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: confirmFade .14s ease;
}
.confirm-box {
  background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  width: min(440px, 100%); padding: 24px 24px 18px;
  animation: confirmRise .16s cubic-bezier(.2,.8,.3,1);
}
.confirm-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }
.confirm-text { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.confirm-box.is-danger .confirm-title { color: var(--stamp); }
.btn-danger { background: var(--stamp); color: #fff; border: none; }
@keyframes confirmFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes confirmRise { from { opacity: 0; transform: translateY(8px) scale(.985) } to { opacity: 1; transform: none } }

/* Масштаб у вікні перегляду файлів.
   Живе в шапці поруч із назвою: там його шукають, і воно не перекриває сам документ. */
.zoom-bar {
  display: flex; align-items: center; gap: 2px; margin-left: auto; margin-right: 10px;
  background: var(--sky); border: 1px solid var(--sky-line); border-radius: 9px; padding: 2px;
}
.zoom-btn, .zoom-val {
  border: none; background: transparent; color: var(--ink-soft);
  font-family: var(--font-mono); cursor: pointer; border-radius: 7px;
  transition: background .12s, color .12s;
}
.zoom-btn { width: 28px; height: 26px; font-size: 16px; line-height: 1; }
.zoom-val { height: 26px; padding: 0 8px; font-size: 12px; min-width: 52px; }
.zoom-btn:hover:not(:disabled), .zoom-val:hover { background: var(--paper); color: var(--visa); }
.zoom-btn:disabled { opacity: .35; cursor: default; }


/* ── Редактор: шрифти й підписи на панелі ──────────────────────────────────────────────
   Quill підписує пункти списку через CSS, а не текстом у розмітці. Без цих правил у
   випадному списку стоять службові назви на кшталт "times-new-roman", і кожен пункт
   виглядає однаково — вибрати шрифт наосліп неможливо. */
.ql-font-arial{font-family:Arial, Helvetica, sans-serif;}
.ql-font-times-new-roman{font-family:"Times New Roman", Times, serif;}
.ql-font-georgia{font-family:Georgia, "Times New Roman", serif;}
.ql-font-calibri{font-family:Calibri, Candara, Segoe, sans-serif;}
.ql-font-roboto{font-family:Roboto, "Helvetica Neue", Arial, sans-serif;}

.ql-snow .ql-picker.ql-font{width:150px;}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Arial' !important;}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before{content:'Arial' !important; font-family:Arial, sans-serif;}
.ql-snow .ql-picker.ql-font [data-value="times-new-roman"]::before{content:'Times New Roman'; font-family:"Times New Roman", serif;}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before{content:'Georgia' !important; font-family:Georgia, serif;}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="calibri"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="calibri"]::before{content:'Calibri' !important; font-family:Calibri, sans-serif;}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="roboto"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="roboto"]::before{content:'Roboto' !important; font-family:Roboto, sans-serif;}

.ql-snow .ql-picker.ql-size{width:76px;}
.ql-snow .ql-picker.ql-size .ql-picker-label::before{content:'14' !important;}
.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'14' !important;}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before{content:'10' !important;}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before{content:'12' !important;}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before{content:'14' !important;}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before{content:'16' !important;}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before{content:'18' !important;}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before{content:'24' !important;}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before{content:'32' !important;}

/* Панель має переноситись, а не обрізатись: кнопок стало більше, а редактор відкривається
   і у вузькій шухляді картки клієнта. */
.ql-toolbar.ql-snow{flex-wrap:wrap;}
.ql-editor img{max-width:100%; height:auto;}

/* Міжрядковий інтервал — власний формат, тож і підписи в списку наші. */
.ql-snow .ql-picker.ql-lineheight{width:120px;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before{content:'Інтервал' !important; white-space:nowrap;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item::before{content:attr(data-value); white-space:nowrap;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1"]::before{content:'Одинарний' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.15"]::before{content:'1,15' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.5"]::before{content:'1,5' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2"]::before{content:'Подвійний' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-options{width:150px;}


/* Вузький екран: аркуш перестає бути аркушем і просто займає ширину — возити сторінку
   вбік пальцем гірше, ніж утратити точний формат. */
@media (max-width: 900px){
  .doc-page .ql-editor, .fill-sheet .ql-editor{width:auto; min-height:60vh; padding:18px; box-shadow:none;}
  .doc-page .ql-container{padding:0;}
  /* Той самий скид 210mm/297mm-«аркуша», що й у Quill-версії вище — TipTap-редактор мав
     точнісінько той самий А4-вигляд на широкому екрані, тож і на вузькому має так само не
     виїжджати за межі екрана вбік (fixed width:210mm інакше змушує сторінку горизонтально
     скролитись — саме та пастка, від якої .shell/.view вище захищені, а .tt-editor без
     цього правила — ні). */
  .doc-page .tt-editor, .fill-sheet .tt-editor{width:auto; min-height:60vh; padding:18px; box-shadow:none;}
  /* Панель на телефоні не влазить в один рядок — 6 груп кнопок і 4 select-и разом ширші за
     будь-який екран у портреті. flex-wrap уже стоїть у базовому .tt-toolbar; тут лише
     дозволяємо панелі горизонтально скролитись, якщо перенесення рядків усе одно не влізло
     (довгі select-и шрифтів), замість того щоб вона тиснула на сторінку вбік. */
  .tt-toolbar{overflow-x:auto; flex-wrap:wrap; gap:6px; padding:8px 10px;}
}

/* Вибір розміру таблиці наведенням. */
.tbl-pop{position:absolute; z-index:60; top:100%; left:0; margin-top:6px; display:none;
  background:var(--paper); border:1px solid var(--sky-line); border-radius:10px;
  box-shadow:var(--shadow-pop); padding:10px;}
.tbl-pop.open{display:block;}
.tbl-pop-label{font-size:13px; color:var(--ink-soft); margin-bottom:8px; font-family:var(--font-mono,monospace);}
.tbl-grid{display:grid; grid-template-columns:repeat(10, 18px); gap:3px;}
.tbl-grid i{width:18px; height:18px; border:1px solid var(--sky-line); border-radius:3px;
  background:var(--paper); cursor:pointer; display:block;}
.tbl-grid i.on{background:var(--visa-soft); border-color:var(--visa);}

/* TipTap table picker і редагування структури. Grid — справжні button-и: працює миша,
   Tab/стрілки та screen reader; на телефоні замість 100 дрібних клітинок — два number input. */
.tt-table-group{position:relative;}
.tt-table-pop{position:absolute; z-index:80; top:calc(100% + 8px); right:0; display:none; width:330px;
  padding:12px; background:var(--paper); border:1px solid var(--sky-line); border-radius:12px;
  box-shadow:var(--shadow-pop); color:var(--ink);}
.tt-table-pop.open{display:block;}
.tt-table-pop-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.tt-table-pop-head button,.tt-table-edit button,.tt-table-manual button{appearance:none; border:1px solid var(--sky-line);
  background:var(--paper); color:var(--ink-2); min-height:34px; padding:6px 9px; border-radius:7px; cursor:pointer; font:600 12px var(--font-body);}
.tt-table-pop-head button{width:34px; padding:0;}
.tt-table-size{min-height:20px; margin-bottom:7px; font:12px var(--font-mono,monospace); color:var(--ink-soft);}
.tt-table-grid{display:grid; grid-template-columns:repeat(10,22px); grid-template-rows:repeat(10,22px); gap:3px;}
.tt-table-grid button{appearance:none; width:22px; height:22px; min-height:0; padding:0; border:1px solid var(--sky-line);
  border-radius:4px; background:var(--paper); cursor:pointer;}
.tt-table-grid button.is-on,.tt-table-grid button:focus-visible{background:var(--visa-soft); border-color:var(--visa); outline:none;}
.tt-table-manual{display:none; align-items:end; gap:7px;}
.tt-table-manual label{font-size:12.5px; color:var(--ink-soft);}
.tt-table-manual input{display:block; width:74px; min-height:38px; margin-top:4px; font-size:17px;}
.tt-table-edit{display:grid; grid-template-columns:72px repeat(3,1fr); gap:6px; align-items:center;
  margin-top:12px; padding-top:10px; border-top:1px solid var(--sky-line);}
.tt-table-edit[hidden]{display:none;}
.tt-table-edit span{font-size:12.5px; font-weight:700; color:var(--ink-soft);}
.tt-table-edit button.is-danger{grid-column:1 / -1; color:var(--stamp);}

/* Пошук по тексту документа. */
.find-bar{position:absolute; z-index:70; right:16px; top:60px; display:none;
  align-items:center; gap:6px; padding:7px 9px; background:var(--paper);
  border:1px solid var(--sky-line); border-radius:10px; box-shadow:var(--shadow-pop);}
.find-bar.open{display:flex;}
.find-bar input{width:210px; font-size:15px;}
.find-count{font-family:var(--font-mono,monospace); font-size:13px; color:var(--ink-soft); min-width:52px; text-align:center;}
.find-bar button{appearance:none; border:none; background:none; cursor:pointer; font-size:16px;
  color:var(--ink-soft); padding:2px 7px; border-radius:6px;}
.find-bar button:hover{background:var(--sky);}

/* Таблиці в тексті документа мають виглядати як таблиці, а не як абзаци поруч. */
.ql-editor table{border-collapse:collapse; width:100%; margin:10px 0;}
.ql-editor table td, .ql-editor table th{border:1px solid #c8d0dc; padding:6px 9px; min-width:40px;}

/* Обтікання і розрив тексту навколо картинки — селектор по значенню style, бо formats
   пишуть саме inline-style (imagefloat/imagedisplay у js/quill.js), а не клас. */
.ql-editor img{cursor:pointer;}
.ql-editor img[style*="float: left"]{margin:4px 18px 10px 0;}
.ql-editor img[style*="float: right"]{margin:4px 0 10px 18px;}
.ql-editor img[style*="display: block"]{display:block; margin:12px auto;}

/* Панель картинки — названі режими, а не ряд іконок S/M/L без пояснення. */
.img-pop{position:absolute; z-index:60; display:none; width:min(520px,calc(100% - 20px));
  background:var(--paper); border:1px solid var(--sky-line); border-radius:14px;
  box-shadow:var(--shadow-pop); padding:14px; color:var(--ink);}
.img-pop.open{display:block;}
.img-pop-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:16px;}
.img-pop-section{padding:11px 0; border-top:1px solid var(--sky-line);}
.img-pop-label{display:block; margin-bottom:7px; color:var(--ink-soft); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.img-pop-grid{display:grid; gap:7px;}
.img-pop-grid--layout{grid-template-columns:repeat(2,minmax(0,1fr));}
.img-pop-grid--size{grid-template-columns:repeat(4,minmax(0,1fr));}
.img-pop button{appearance:none; min-height:40px; border:1px solid var(--sky-line); background:var(--paper); cursor:pointer;
  font:600 13px/1.25 var(--font-body); color:var(--ink-soft); padding:8px 10px; border-radius:9px; white-space:normal;}
.img-pop button:hover{background:var(--sky); color:var(--ink);}
.img-pop button.is-active{background:var(--visa-soft); color:var(--visa-ink); border-color:var(--visa);}
.img-pop .img-pop-close{min-width:40px; width:40px; padding:0; font-size:18px;}
.img-pop-custom-size{display:flex; align-items:center; gap:7px; margin-top:8px;}
.img-pop-custom-size input{width:110px; min-height:40px; font-size:16px;}
.img-pop-custom-size button{white-space:nowrap;}
.img-pop-actions{display:flex; justify-content:space-between; gap:8px; padding-top:11px; border-top:1px solid var(--sky-line);}
.img-pop-actions button{flex:1;}
.img-pop button.is-danger{color:var(--stamp); border-color:color-mix(in srgb,var(--stamp) 38%,var(--sky-line));}
.img-pop-layout-hint{display:block; margin-top:8px; color:var(--ink-3); font:12px/1.45 var(--font-body);}
@media(max-width:640px){
  .img-pop{padding:11px;}
  .img-pop-grid--layout{grid-template-columns:1fr;}
  .img-pop-grid--size{grid-template-columns:repeat(2,minmax(0,1fr));}
  .img-pop-actions{flex-direction:column;}
  .img-pop-custom-size input{width:min(110px,36vw);}
}

/* ── TipTap: панель форматування ─────────────────────────────────────────────────────
   Власна панель, бо TipTap, на відміну від Quill/Snow, жодної не малює сам (js/tiptap.js).
   Кнопки — той самий візуальний мову, що й решта GARNE CRM (.icon-btn/.btn-outline), а не
   лаконічний demo-вигляд бібліотеки за замовчуванням. */
.tt-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 14px;}
.tt-group{display:flex; flex:0 0 auto; align-items:center; gap:4px; padding-right:10px; border-right:1px solid var(--sky-line);}
.tt-group:last-child{border-right:none; padding-right:0;}
.tt-btn{
  appearance:none; border:1px solid transparent; background:none; cursor:pointer;
  width:34px; height:34px; border-radius:7px; font-size:16px; line-height:1;
  color:var(--ink-2); display:flex; align-items:center; justify-content:center;
}
.tt-btn:hover{background:var(--sky);}
.tt-btn.is-active{background:var(--visa-soft, var(--sky)); color:var(--visa); border-color:var(--visa);}
.tt-select{
  flex:0 0 auto; min-height:34px; font-size:15px; line-height:1.2; white-space:nowrap;
  border:1px solid var(--sky-line); border-radius:7px; background:var(--paper);
  color:var(--ink); padding:6px 8px; max-width:none;
}
.tt-select[data-cmd="fontFamily"]{width:165px;}
.tt-select[data-cmd="fontSize"]{width:92px;}
.tt-select[data-cmd="heading"]{width:150px;}
.tt-select[data-cmd="lineHeight"]{width:125px;}
.tt-btn[data-cmd="image"]{width:auto; min-width:118px; padding:0 11px; gap:7px; font-size:17px; font-weight:650;}
.tt-btn[data-cmd="image"] span{font-size:14.5px;}
.tt-color-label{
  display:flex; align-items:center; gap:3px; font-size:14.5px; color:var(--ink-2); cursor:pointer;
  width:30px; height:30px; justify-content:center; border-radius:7px;
}
.tt-color-label:hover{background:var(--sky);}
.tt-color{width:16px; height:16px; padding:0; border:none; background:none; cursor:pointer;}

/* ── TipTap: типографіка самого документа ────────────────────────────────────────────
   TipTap не тягне за собою жодного базового CSS для контенту (на відміну від ql-snow) —
   без цього блоку заголовки/списки/таблиці виглядали б однаковим суцільним абзацом. */
.tt-editor{outline:none; position:relative; isolation:isolate;}
.tt-editor p{margin:0 0 12px;}
.tt-editor h1{font-size:23.5px; margin:20px 0 12px; font-weight:700;}
.tt-editor h2{font-size:19px; margin:18px 0 8px; font-weight:700;}
.tt-editor h3{font-size:16.5px; margin:14px 0 6px; font-weight:700;}
.tt-editor ul, .tt-editor ol{margin:0 0 12px; padding-left:24px;}
.tt-editor blockquote{margin:0 0 12px; padding-left:14px; border-left:3px solid var(--sky-line); color:var(--ink-2);}
.tt-editor hr{border:none; border-top:1px solid var(--sky-line); margin:18px 0;}
.tt-editor a{color:var(--visa);}
.tt-editor .tableWrapper{overflow-x:auto; margin:10px 0;}
.tt-editor table{border-collapse:collapse; width:100%; margin:10px 0; table-layout:fixed;}
.tt-editor table td, .tt-editor table th{position:relative; border:1px solid #c8d0dc; padding:6px 9px; min-width:40px;}
.tt-editor table th{background:var(--sky); font-weight:600;}
.tt-editor .column-resize-handle{position:absolute; right:-3px; top:0; bottom:0; width:6px; z-index:4;
  background:color-mix(in srgb,var(--visa) 72%,transparent); cursor:col-resize; pointer-events:auto;}
.resize-cursor,.resize-cursor *{cursor:col-resize !important;}
.tt-editor img{cursor:pointer; max-width:100%;}
.tt-image-node{position:relative; max-width:100%; border-radius:6px; vertical-align:baseline;}
.tt-image-node.is-selected{outline:3px solid color-mix(in srgb, var(--visa) 55%, transparent); outline-offset:3px;}
.tt-image-node.is-dragging{opacity:.55;}
.tt-image-node[data-image-layout="front"],.tt-image-node[data-image-layout="behind"]{cursor:move;}
.tt-image-node[data-image-layout="front"]>img{cursor:move;}
.tt-image-node[data-image-layout="behind"]{z-index:auto; pointer-events:none;}
.tt-image-node[data-image-layout="behind"]>img{position:relative; z-index:-1; pointer-events:none;}
.tt-image-node.is-free-dragging,.tt-image-node.is-resizing{user-select:none;}
.tt-image-node.is-free-dragging{cursor:grabbing;}
.tt-image-node.is-free-dragging>img{cursor:grabbing;}
.tt-image-drag-handle{
  position:absolute; top:8px; left:8px; z-index:2; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:9px; background:rgba(11,22,38,.78); color:#fff;
  font-size:23.5px; line-height:1; cursor:grab; opacity:0; transition:opacity .12s ease;
  box-shadow:0 3px 12px rgba(11,22,38,.22); user-select:none; touch-action:none;
}
.tt-image-node:hover .tt-image-drag-handle,.tt-image-node.is-selected .tt-image-drag-handle{opacity:1;}
.tt-image-node[data-image-layout="front"] .tt-image-drag-handle,
.tt-image-node[data-image-layout="behind"] .tt-image-drag-handle{opacity:1; z-index:6; pointer-events:auto;}
.tt-image-drag-handle:active{cursor:grabbing;}
.tt-image-resize-handle{
  position:absolute; z-index:7; display:block; box-sizing:border-box; opacity:0; pointer-events:none;
  width:12px; height:12px; border:2px solid var(--paper); border-radius:3px; background:var(--visa);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--visa) 82%,#000); touch-action:none; user-select:none;
}
.tt-image-node.is-selected .tt-image-resize-handle{opacity:1; pointer-events:auto;}
.tt-image-resize-handle--nw{left:0; top:0; transform:translate(-50%,-50%); cursor:nwse-resize;}
.tt-image-resize-handle--ne{right:0; top:0; transform:translate(50%,-50%); cursor:nesw-resize;}
.tt-image-resize-handle--se{right:0; bottom:0; transform:translate(50%,50%); cursor:nwse-resize;}
.tt-image-resize-handle--sw{left:0; bottom:0; transform:translate(-50%,50%); cursor:nesw-resize;}
.tt-image-resize-handle--n,.tt-image-resize-handle--s{left:50%; width:24px; height:9px;}
.tt-image-resize-handle--n{top:0; transform:translate(-50%,-50%); cursor:ns-resize;}
.tt-image-resize-handle--s{bottom:0; transform:translate(-50%,50%); cursor:ns-resize;}
.tt-image-resize-handle--e,.tt-image-resize-handle--w{top:50%; width:9px; height:24px;}
.tt-image-resize-handle--e{right:0; transform:translate(50%,-50%); cursor:ew-resize;}
.tt-image-resize-handle--w{left:0; transform:translate(-50%,-50%); cursor:ew-resize;}
.tt-image-node.is-resizing .tt-image-resize-handle{opacity:1;}
.tt-editor[contenteditable="false"] .tt-image-drag-handle,
.tt-editor[contenteditable="false"] .tt-image-resize-handle{display:none;}
.tt-image-upload{
  display:inline-flex; align-items:center; gap:9px; max-width:min(100%,560px); margin:4px 6px;
  padding:9px 12px; border:1px solid var(--sky-line); border-radius:10px; background:var(--sky);
  color:var(--ink-2); font-size:14.5px; vertical-align:middle;
}
.tt-image-upload--error{border-color:color-mix(in srgb,var(--stamp) 45%,var(--sky-line)); background:var(--stamp-soft); color:var(--stamp);}
.tt-image-upload-spinner{width:16px; height:16px; flex:0 0 auto; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:tt-image-upload-spin .8s linear infinite;}
@keyframes tt-image-upload-spin{to{transform:rotate(360deg);}}
.tt-image-upload--error .tt-image-upload-spinner{animation:none; border:none; width:auto; height:auto;}
.tt-image-upload--error .tt-image-upload-spinner::before{content:'!'; font-weight:800;}
.tt-image-upload-label{min-width:0; overflow-wrap:anywhere;}
.tt-image-upload-dismiss{appearance:none; border:1px solid currentColor; background:transparent; color:inherit; border-radius:7px; padding:5px 9px; font:600 12px var(--font-body); cursor:pointer;}
.tt-editor img[style*="float:left"], .tt-editor img[style*="float: left"]{margin:4px 18px 10px 0;}
.tt-editor img[style*="float:right"], .tt-editor img[style*="float: right"]{margin:4px 0 10px 18px;}
.tt-editor img[style*="display:block"], .tt-editor img[style*="display: block"]{display:block; margin:12px auto;}
.tt-editor[contenteditable="false"]{cursor:default;}
.fill-read{position:relative; isolation:isolate;}

/* На вузькому або сенсорному екрані точне absolute-позиціонування пальцем ненадійне і
   конфліктує зі scroll. Збережені x/y/layer не міняємо, лише показуємо картинку блоком. */
@media(max-width:900px), (pointer:coarse){
  .tt-table-pop{position:fixed; left:12px; right:12px; top:auto; bottom:12px; width:auto; max-height:75vh; overflow:auto;}
  .tt-table-grid{display:none;}
  .tt-table-manual{display:flex; flex-wrap:wrap;}
  .tt-image-node[data-image-layout="front"],.tt-image-node[data-image-layout="behind"]{
    position:relative !important; left:auto !important; top:auto !important; z-index:auto !important;
    display:block !important; float:none !important; clear:both; margin:14px auto !important;
    cursor:pointer; pointer-events:auto;
  }
  .tt-image-node[data-image-layout="behind"]>img{z-index:auto; pointer-events:auto;}
  .tt-image-resize-handle{display:none;}
}

/* Запрошення на пульс — спокійна смуга, а не тривога: нічого не зламалось, просто прохання. */
.update-bar--calm{background:var(--visa-soft); color:var(--visa-ink); border-color:transparent;}

/* Пункт «за замовчуванням» у списках форматування. Quill дає йому порожній data-value,
   тож підписуємо окремо — інакше в списку висить безіменний рядок. */
.ql-snow .ql-picker.ql-font .ql-picker-item:not([data-value])::before{content:'Як у документі' !important; font-family:var(--font-body);}
.ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before{content:'14' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item:not([data-value])::before{content:'Як у документі' !important;}
.ql-snow .ql-picker.ql-font .ql-picker-label:not([data-value])::before{content:'Як у документі' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label:not([data-value])::before{content:'Інтервал' !important;}

/* ── Шапка картки: відповідальний, локація, годинник клієнта ─────────────────────────────
   Власник подивився на цей блок і спитав «тут не делали?» — і був правий. Решта CRM уже
   мала спільний ритм, а шапка лишалась однією суцільною плитою: підписи то збоку капітеллю,
   то з двокрапкою перед полем, то відсутні; контроли — від 22 до 34 пікселів заввишки;
   три дати кейсу розкидані між сумами й джерелом.
   Тепер шапка — це три поверхи з видимими межами:
     1) хто це       — аватар, ім'я, оцінка, тип візи, етап, статус у США, дії;
     2) як ведеться  — сітка .client-head-row: підпис зверху, контрол знизу, одна висота;
     3) коли         — смуга .chead-dates: почали → дедлайн → подано, у хронології.
   Поверхи 2 і 3 стоять на підкладці var(--sky), щоб їх було видно як окремі блоки, а не як
   продовження білого поля. Жодне поле при цьому не змінило поведінки. */
.chead-label{
  display:flex; align-items:center; gap:5px;
  font:800 9.5px/1.4 var(--font-mono,monospace); letter-spacing:.09em; text-transform:uppercase;
  color:var(--slate-2); white-space:nowrap;
}
/* Одна висота на всі контроли обох поверхів — саме її бракувало найбільше: поруч стояли
   пілюля 22px, селект 26px і поле дати 34px, і рядок від цього виглядав випадковим.
   !important тут не з ліні: базове правило для полів вище — це
   input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
   тобто чотири :not() і специфічність 0,4,1, яку один клас не перебиває. Сусідній
   .place-pick живе з тим самим замком і з тієї ж причини. Без цього поля мовчки лишались
   на var(--sky) і 13,5px, тобто трохи іншого кольору й кегля, ніж решта шапки. */
.chead-control{
  height:34px; border:1px solid var(--sky-line); border-radius:9px !important;
  background-color:var(--paper) !important; padding:0 11px !important; font-size:14.5px !important;
  color:var(--ink); width:100%; max-width:210px; line-height:1.2; min-width:0;
}
.chead-control:focus{border-color:var(--visa); outline:none;}
select.chead-control{padding-right:30px !important;}

/* Поверх 2. Flex із перенесенням, а не сітка з фіксованими колонками: комірки тут різної
   природної ширини (локація — три селекти, джерело — одна пілюля), і в рівних колонках
   половина рядка лишалась порожньою. Так вони пакуються щільно й самі переносяться на 1280. */
.client-head-row{
  display:flex; flex-wrap:wrap; gap:18px 24px; align-items:flex-start; margin-top:16px;
  background:var(--sky); border:1px solid var(--sky-line); border-radius:var(--radius-md);
  padding:16px 18px;
}
/* flex-grow, а не природна ширина. Досі комірки тулилися ліворуч і на 1440 половина панелі
   лишалась порожньою — а порожнеча в шапці читається не як повітря, а як «сторінка не
   догрузилась». Тепер вільна ширина розходиться по комірках рядка, і кожен рядок
   заповнений до краю. Щоб це не перетворилось на протилежну біду — поле дати завширшки в
   пів екрана — самі контроли мають стелю (max-width нижче), тож зайве йде у відступи між
   колонками, а не в розтягнуті поля. */
.chead-cell{display:flex; flex-direction:column; gap:7px; min-width:0; position:relative; flex:1 1 auto;}
/* Візуальний порядок ≠ порядок у розмітці: контрол каналу зобов'язаний стояти в джерелі
   перед «Відповідальним» (регресійний тест «рівно одна Telegram-кнопка»), а на екрані
   першим має бути той, з ким говорять про кейс. */
/* Основи (flex-basis) підібрані так, щоб обидва рядки трималися цілими і на 1440, і на
   1280: сума основ рядка + проміжки має влазити у вужчу з двох ширин, інакше комірка
   зривається на власний рядок і знову лишає під собою порожнечу. */
.chead-cell--resp{order:1; flex-basis:170px; max-width:280px;}
.chead-cell--chat{order:2; flex-basis:150px; max-width:230px;}
.chead-cell--place{order:3; flex:2 1 420px; min-width:0;}
.chead-break{order:4; flex:0 0 100%; height:0; margin:0;}
/* Стелі нижнього рядка навмисно високі. Вони не спрацьовують на звичайній картці — там
   поруч стоїть смуга дат і місця й так обмаль, — але коли дат у рядку немає (NIW-кейс,
   де додається ще й «Шлях закриття», і смуга з'їжджає рядком нижче) низька стеля лишала
   праворуч півтисячі порожніх пікселів. */
.chead-cell--source{order:5; flex-basis:110px; max-width:250px;}
.chead-cell--money{order:6; flex-basis:170px; max-width:320px;}
.chead-cell--niw{order:7; flex-basis:190px; max-width:330px;}
.chead-cell--niw .chead-control{max-width:290px;}
/* Смуга дат ділить нижній рядок із грошима, а не стоїть окремою плитою: разом вони
   заповнюють рядок, поодинці — кожен лишав по півкартки порожнечі. */
.chead-cell--dates{order:8; flex:3 1 520px; min-width:0;}
.chead-cell--gaps{order:9; flex-direction:row; align-items:center; gap:8px; align-self:center; flex-grow:0;}
/* Олівець «змінити канал» висить на самій кнопці (bottom/right:-6px), тож комірка не має
   розтягувати контрол на всю свою ширину — інакше олівець від'їжджає в порожнечу. */
.chead-cell--chat .client-chat-control{width:100%; max-width:100%;}
.chead-cell--chat .chat-channel-btn{width:100%; justify-content:center;}

.resp-label{font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate-2); font-weight:700;}
.resp-project{display:flex; align-items:center; gap:8px; min-height:34px; min-width:0;}
.resp-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.resp-name{font-weight:700; color:var(--ink); font-size:15px;}
.resp-role{font-size:12.5px; color:var(--slate-2); background:var(--sky); padding:1px 7px; border-radius:5px;}
.resp-missing{color:var(--stamp); font-weight:600; font-size:14.5px;}

.client-place{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:34px; width:100%; min-width:0;}
/* Селекти локації ділять ширину комірки між собою. Без цього кожен тримав власну природну
   ширину, комірка роздувалась до 750px і зривала весь рядок на перенос. */
/* Стеля вища за решту контролів (320 проти 210) саме заради порожньої картки: коли регіон
   ще не обрано, у комірці стоїть один-єдиний селект, і з вузькою стелею праворуч від нього
   лишалась діра на третину рядка. Ширший «— не вказано —» цю діру з'їдає, а на заповненій
   картці стеля не спрацьовує зовсім — там три селекти й так ділять ширину. */
.client-place .place-pick{flex:1 1 130px; min-width:0; max-width:320px;}
.place-pick{
  height:34px; font-size:14.5px !important; padding:0 30px 0 11px !important; width:auto !important;
  background-color:var(--paper) !important; border-radius:9px !important; min-width:0;
}
/* Годинник — не поле вводу, а показник, тому він і виглядає інакше: без рамки, на підкладці
   темнішій за поле. Раніше він губився серед трьох однакових селектів поруч. */
.client-clock{
  font-family:var(--font-mono,monospace); font-size:14px; font-weight:600; color:var(--ink-soft);
  background:var(--sky-deep); border-radius:8px; padding:0 10px; white-space:nowrap;
  display:inline-flex; align-items:center; height:34px;
}

/* Гроші. Сума угоди була голим input[type=number] зі стрілками — тобто виглядала як
   клітинка таблиці, а не як сума грошей. Стрілки прибрані (крутити суму договору колесом
   миші — окремий спосіб зіпсувати дані), знак валюти стоїть усередині поля, цифри
   моноширинні, щоб суми різних клієнтів вирівнювались між собою. */
.chead-money{
  display:flex; align-items:center; height:34px; width:100%; max-width:260px;
  border:1px solid var(--sky-line); background:var(--paper); border-radius:9px; padding:0 10px; gap:2px;
}
.chead-money:focus-within{border-color:var(--visa); box-shadow:0 0 0 3px var(--visa-soft);}
.chead-money__cur{font:700 13px/1 var(--font-mono,monospace); color:var(--slate-2); flex:none;}
.chead-money__input{
  border:0 !important; background:transparent !important; box-shadow:none !important;
  padding:0 !important; height:32px; font-size:15px !important; font-weight:700; color:var(--ink) !important;
  min-width:0; width:100%;
}
.chead-money__input:focus{box-shadow:none !important;}
.chead-money__input::-webkit-outer-spin-button,
.chead-money__input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.chead-money__input[type=number]{-moz-appearance:textfield;}
.chead-money__ro{font-size:15px; font-weight:700; color:var(--ink);}
.chead-money.is-empty .chead-money__input{color:var(--slate-2) !important; font-weight:600;}
.chead-money--sub{max-width:260px; height:30px;}
.chead-money--sub .chead-money__input{height:28px; font-size:14.5px !important;}
.chead-money__note{font-size:12px; color:var(--slate-2); white-space:nowrap; flex:none;}
.chead-attorney{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--ink-soft);
}
.chead-attorney input{margin:0;}

.chead-source{position:relative;}
.chead-source__pill{
  cursor:pointer; border:1px solid var(--sky-line); height:34px; padding:0 12px; font-size:13px;
  max-width:100%; overflow:hidden;
}

/* Поверх 3 — дати. Хронологія зліва направо: почали → дедлайн → подано. Дедлайн виділений,
   бо саме за ним живе відділ; риска між комірками показує, що це одна лінія, а не три
   випадкові поля. */
.chead-dates{
  display:flex; flex-direction:row; align-items:flex-start; gap:0 12px; flex-wrap:nowrap;
  border-left:1px solid var(--sky-line); padding-left:20px; min-width:0;
}
/* Три дати ділять ширину смуги порівну — так стрілки між ними стоять рівно, а не збиваються
   в купу ліворуч. Поля всередині мають ту саму стелю, що й решта контролів шапки. */
.chead-date{display:flex; flex-direction:column; gap:7px; min-width:0; flex:1 1 0;}
.chead-date__row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.chead-date .chead-control{min-width:140px;}
/* Головна дата поверху. Не інший колір поля, а акцент ліворуч: колір лишається токеном
   --visa, а поле — таким самим, як сусідні. */
.chead-date--key{
  border-left:3px solid var(--visa); padding-left:12px;
}
.chead-date--key .chead-label{color:var(--visa);}
.chead-date__warn{font-size:12.5px; font-weight:600; color:var(--stamp); max-width:260px;}
/* Пояснення різниці між «Сплачено» і списком платежів у блоці оплат кейсу.
   Не попередження й не помилка, коли гроші прийшли до CRM, — звичайний стан половини бази,
   тож спокійний сірий. А от зворотний випадок (у картці МЕНШЕ, ніж підтверджено платежами)
   справді треба перевірити, і він жовтий. */
.pay-recon{
  margin:-8px 0 18px; padding:10px 14px; border-radius:10px;
  font-size:12.5px; line-height:1.5; color:var(--ink-2, var(--ink));
  background:var(--sky-soft, rgba(0,0,0,.03)); border-left:3px solid var(--sky-line);
}
.pay-recon b{color:var(--ink); font-weight:600;}
.pay-recon--over{
  background:var(--amber-soft, rgba(255,176,32,.10)); border-left-color:var(--amber, #e0a020);
}
/* Журнал перенесень дедлайну під шапкою картки (Юля, 30.09.2026: «всі учасники команди
   мають бачити цей коментар»).
   На всю ширину, а не в колонці біля дати: у шапці колонки вузькі, і причина — найцінніше
   тут — стискалась рівно в нуль пікселів, а блок вилазив за правий край картки.
   Причина забирає всю зайву ширину, дати й ім'я тримаються своєї. */
.dl-log{
  display:flex; flex-direction:column; gap:4px;
  margin:10px 0 0; padding:8px 12px;
  border-left:3px solid var(--amber, var(--sky-line)); border-radius:0 8px 8px 0;
  background:var(--sky-soft, rgba(0,0,0,.02));
}
.dl-log__row{display:flex; align-items:baseline; gap:8px; min-width:0; font-size:12px; line-height:1.45;}
.dl-log__tag{flex:0 0 auto; font-weight:600; color:var(--slate-2); font-size:11.5px;}
.dl-log__move{flex:0 0 auto; color:var(--ink); font-size:11.5px;}
.dl-log__why{flex:1; min-width:0; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dl-log__who{flex:0 0 auto; color:var(--slate-2); font-size:11.5px;}
.dl-log__more{
  align-self:flex-start; background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:11.5px; color:var(--visa); text-decoration:underline;
}
/* На телефоні рядок не вміщає дати + ім'я + причину, і причина стискалась у двосимвольний
   недогризок із трьома крапками — тобто саме те, заради чого блок і робився, зникало перше.
   Тому тут стовпчиком: причина цілим рядком, дати й ім'я під нею. */
@media (max-width:700px){
  .dl-log__row{flex-wrap:wrap; gap:4px 8px;}
  .dl-log__why{flex:1 0 100%; white-space:normal; overflow:visible; text-overflow:clip; order:1;}
}
/* «Подано» порожнє — це нормальний стан, а не поломка: дата стає сама на етапі «Подано».
   Без цього підпису бліде «дд.мм.рррр» читалось як вимкнене чи зіпсоване поле. */
.chead-date__auto{font-size:12px; line-height:1.35; color:var(--slate-2); max-width:190px;}
.chead-dates__link{
  flex:none; align-self:center; width:20px; height:1px; background:var(--sky-line);
  margin-top:10px; position:relative;
}
.chead-dates__link::after{
  content:''; position:absolute; right:0; top:-3px; width:6px; height:6px;
  border-top:1px solid var(--sky-line); border-right:1px solid var(--sky-line); transform:rotate(45deg);
}

/* Планшет портретом (768–834 — iPad та подібні). До 850px .chead-control зі своїм
   min-width:140px не влазить у смугу втрьох по nowrap — підписи «Дедлайн подачі кейсу» й
   «Подано» починають друкуватись один на одному, а не переноситись. Нижче 720 вмикається
   окремий мобільний режим (isMobile у app.js), тож цей проміжок — саме та смуга, якої не
   було зовсім: власник, 09.09, «адаптива взагалі нема». Даємо трьом датам переноситись, а
   не стискатись — риска-розділювач ліворуч і стрілки між ними на стовпці сенсу не мають. */
@media (max-width:850px){
  .chead-dates{flex-wrap:wrap; row-gap:14px; border-left:0; padding-left:0;}
  .chead-date{flex:1 1 150px;}
  .chead-dates__link{display:none;}
}

/* Етап справи в першому поверсі. Був голим select на всю вільну ширину — тепер чип тієї
   самої висоти й форми, що й пілюля типу візи поруч. */
.head-stage-select{
  height:26px; border:1px solid var(--sky-line) !important; background-color:var(--sky) !important;
  border-radius:99px !important; padding:0 28px 0 12px !important; font-size:12.5px !important;
  font-weight:700; color:var(--ink-soft) !important; cursor:pointer; width:auto !important;
  max-width:230px; background-position:right 9px center !important;
}
.head-stage-select:focus{border-color:var(--visa) !important;}

/* Індикатор неповної картки. Маленький і помітний — не тривога на пів екрана, а крапка,
   яку видно краєм ока й можна натиснути, щоб дізнатись подробиці. */
.gap-dot{
  width:9px; height:9px; border-radius:50%; background:var(--stamp); cursor:pointer; flex-shrink:0;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--stamp) 18%, transparent);
}
.gap-text{color:var(--stamp); font-weight:600; font-size:14px; cursor:pointer;}
.gap-list{
  margin-top:8px; font-size:14px; color:var(--ink-soft);
  background:var(--stamp-soft); border-radius:8px; padding:7px 11px; display:inline-block;
}

/* Той самий кружечок у списку клієнтів — без тексту, лише позначка. */
.gap-dot-sm{
  width:8px; height:8px; border-radius:50%; background:var(--stamp); display:inline-block;
  flex-shrink:0; margin-left:6px; vertical-align:middle;
}

/* Канал зв'язку (Telegram/WhatsApp) у списку клієнтів і на картці дошки. Розмір — як у
   решти інлайнових позначок поруч (gap-dot-sm/емодзі статусу): це мітка «де з ним
   листуються», а не кнопка — клік по ній має відкривати картку, як і решта рядка. */
.chat-channel-dot{
  display:inline-flex; width:14px; height:14px; flex-shrink:0;
  margin-left:6px; vertical-align:middle;
}
.chat-channel-dot svg{ width:100%; height:100%; }

/* Блок пропусків на дашборді. Рядки клікабельні — це робочий список, а не звіт. */
.gap-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 4px; border-bottom:1px solid var(--sky-line); cursor:pointer; border-radius:6px;
}
.gap-row:last-child{border-bottom:none;}
.gap-row:hover{background:var(--sky);}
.gap-row .num{font-family:var(--font-mono,monospace); font-weight:700; color:var(--stamp); min-width:44px;}

.gap-filter-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--stamp-soft); border-radius:9px; padding:8px 12px; font-size:14.5px; color:var(--ink-soft);
}

/* ── Незаповнене обовʼязкове поле ──────────────────────────────────────────────────────
   Тонка рамка, а не заливка й не «!». Проджект відкриває картку й за секунду бачить, куди
   дивитись, але інтерфейс не кричить: незаповнене поле — це робота, яку ще належить
   зробити, а не помилка, якої припустилися. */
.needs-fill{
  border-color:var(--stamp) !important;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--stamp) 12%, transparent) !important;
}
input.needs-fill, select.needs-fill{background-color:color-mix(in srgb, var(--stamp) 4%, var(--paper)) !important;}
.needs-fill:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--stamp) 22%, transparent) !important;}

/* Крапка біля підпису поля — для тих місць, де рамку намалювати нема на чому. */
.need-dot{
  width:6px; height:6px; border-radius:50%; background:var(--stamp);
  display:inline-block; margin-left:5px; vertical-align:middle; flex-shrink:0;
}

/* ===== Постійні зідзвони ===== */
/* Рядок відповідає на чотири питання одразу: коли → що → хто → відповідальний.
   Тому три колонки: час зліва (його шукають першим), суть посередині, дії скраю. */
.tpl-row{ display:grid; grid-template-columns:130px 1fr auto; gap:16px; align-items:start; margin-bottom:10px; }
.tpl-row.is-off{ opacity:.55; }
.tpl-when{ border-right:1px solid var(--sky-line); padding-right:14px; }
.tpl-day{ font-weight:700; font-size:14.5px; color:var(--ink); }
.tpl-time{ font-size:21px; font-weight:700; color:var(--visa); font-variant-numeric:tabular-nums; line-height:1.2; }
.tpl-time-soft{ font-size:13px; color:var(--slate); line-height:1.35; margin-top:2px; }
.tpl-title{ font-weight:700; font-size:16px; margin-bottom:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tpl-actions{ display:flex; gap:4px; }
.tpl-missing{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:13px; color:var(--amber); background:var(--amber-soft);
  border-radius:var(--radius-sm); padding:6px 10px; margin-top:4px; }
.tpl-date{ padding:3px 6px; font-size:13px; border:1px solid var(--sky-line);
  border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); }
.tpl-picks{ display:flex; flex-wrap:wrap; gap:6px; }
.tpl-picks-people{ max-height:150px; overflow-y:auto; padding:2px; }
.chip-pick{ cursor:pointer; border:1px solid var(--sky-line); background:var(--paper);
  color:var(--ink-soft); font-size:13px; padding:4px 10px; border-radius:999px; }
.chip-pick:hover{ border-color:var(--visa); }
.chip-pick.is-on{ background:var(--visa-soft); border-color:var(--visa); color:var(--visa-ink); font-weight:600; }
.chip-muted{ background:var(--sky-deep); color:var(--slate); font-size:12.5px; padding:2px 8px; border-radius:999px; font-weight:600; }
@media (max-width:700px){
  .tpl-row{ grid-template-columns:1fr; }
  .tpl-when{ border-right:none; border-bottom:1px solid var(--sky-line); padding:0 0 8px; }
}

/* ── Договори: Режим перевірки ────────────────────────────────────────────────────────── */
/* 360px замість 320: у правій колонці тісниться і картка даних, і чек-лист, і панель підпису
   з випадаючими списками — на 320 вони стискались до нечитабельного. minmax(0,…) на обох
   колонках обов'язковий: без нього довгий рядок (посилання на підпис) розпирає grid-колонку
   зсередини й виштовхує панель за край екрана — цей баг уже ловили сьогодні. */
.review-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:16px; align-items:start; }
.review-side{ display:flex; flex-direction:column; gap:16px; position:sticky; top:16px; min-width:0; }
.review-side > *{ min-width:0; }
.review-doc-head{ display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
/* Без max-height: договір тягнеться донизу на всю свою довжину, а гортається сторінка цілком.
   Внутрішня прокрутка в 75vh була гіршою з двох світів — і документ обрізаний, і під ним
   лишалась порожнеча, і колесо миші всередині рамки гортало не те, що людина очікує. */
.crd-paper{ padding:24px 28px; background:var(--paper);
  border:1px solid var(--sky-line); border-radius:var(--radius-md); font-family:var(--font-body); line-height:1.55; }
.crd-title{ font-weight:700; font-size:16px; text-align:center; margin:4px 0 14px; }
.crd-heading{ font-weight:700; font-size:15px; margin:14px 0 6px; }
.crd-subheading{ font-weight:600; font-size:14px; margin:10px 0 4px; }
.crd-text{ font-size:14.5px; color:var(--ink); margin:0 0 8px; }
.crd-bullet{ font-size:14.5px; color:var(--ink); margin:0 0 4px; padding-left:4px; }
.crd-pagebreak{ border:none; border-top:1px dashed var(--sky-line); margin:18px 0; }
/* Вільне редагування тексту договору (04.09) — та сама типографіка, що й .crd-text/.crd-heading
   (клас додається поруч), просто в полі вводу: людина бачить ту саму сторінку, а не форму. */
.crd-edit-area{ display:block; width:100%; box-sizing:border-box; font-family:inherit; line-height:inherit;
  border:1px solid var(--sky-line); border-radius:6px; padding:4px 6px; margin:0 0 8px;
  resize:vertical; min-height:2.6em; background:var(--card,#fff); color:var(--ink); }
.crd-edit-area:focus{ outline:none; border-color:var(--visa); }
.crd-columns{ display:flex; gap:24px; margin:10px 0; }
.crd-col{ flex:1; min-width:0; }
/* Жирне — «це підставилось із форми, звір це» (не оздоба, а сигнал, тому й клікабельне). */
.var-hl{ font-weight:700; background:var(--amber-soft); border-radius:3px; padding:0 2px; cursor:pointer; }
.var-hl:hover{ outline:1px solid var(--amber); }
.var-hl--unresolved{ background:var(--stamp-soft); color:var(--stamp); }
.checklist{ display:flex; flex-direction:column; gap:8px; }
.checklist-item{ display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--good); }
.checklist-item svg{ width:16px; height:16px; flex:none; }
.checklist-item--warn{ color:var(--amber); }
/* Коротка «спалахнула» підказка на полі форми, куди щойно клікнули з прев'ю. */
[data-field-key].field-flash{ animation:field-flash-anim 1.5s ease-out; border-radius:var(--radius-sm); }
@keyframes field-flash-anim{ 0%{ background:var(--amber-soft); } 100%{ background:transparent; } }
@media (max-width:900px){
  .review-grid{ grid-template-columns:1fr; }
  .review-side{ position:static; }
}

/* ── Вкладка «Інформація про клієнта» у картці клієнта ──────────────────────────────────── */
/* Власник подивився на цю вкладку і сказав: «візуал не красивий, дуже коряво, як адмінка
   дешева 2008 року». Претензія по суті: усе — підписи, поля, чіпи, підказки — важило однаково,
   тому екран читався як купа елементів, що сперечаються між собою.
   Тут тільки подання. Що і куди зберігається — не змінилось (див. коментар у ClientCard.js).
   Усе під .client-info-form, щоб правки цієї вкладки не поїхали на сусідні екрани картки. */

.client-info-form .ci-head{margin-bottom:26px;}
.client-info-form .ci-head-title{font-family:var(--font-display); font-size:22.5px; font-weight:700; color:var(--ink); letter-spacing:-.02em;}
.client-info-form .ci-head-sub{margin:6px 0 0; font-size:15px; line-height:1.55; color:var(--slate); max-width:64ch;}

/* Групи розділяє лінія, а не ще одна рамка: картка вкладки вже в рамці, і коробка в коробці
   на цьому екрані виглядала важче, ніж сам зміст. */
.client-info-form .ci-group + .ci-group{margin-top:32px; padding-top:28px; border-top:1px solid var(--sky-line);}
.client-info-form .ci-group-head{display:flex; align-items:center; gap:13px; margin-bottom:20px;}
.client-info-form .ci-group-ic{width:38px; height:38px; border-radius:12px; flex:none;
  background:var(--visa-soft); color:var(--visa); display:flex; align-items:center; justify-content:center;}
.client-info-form .ci-group-ic svg{width:19px; height:19px;}
.client-info-form .ci-group-text{min-width:0;}
.client-info-form .ci-group-title{font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.3;}
.client-info-form .ci-group-sub{font-size:14px; color:var(--slate); line-height:1.45; margin-top:2px;}

/* minmax(0,1fr), а не 1fr: у цьому проєкті довгий рядок усередині колонки вже одного разу
   розпирав grid зсередини й виштовхував вміст за край екрана. */
.client-info-form .ci-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 22px;}
.client-info-form .ci-span-2{grid-column:1 / -1;}
.client-info-form .field{margin-bottom:0; min-width:0;}
/* Підпис поля — верхній регістр і розрядка: так він читається як службовий рядок над полем,
   а не як ще одне речення тим самим кеглем, що й підказки нижче. */
.client-info-form .field > label{font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--slate); margin-bottom:9px;}
/* Комфортний розмір: скрізь сьогодні була та сама скарга — «дрібне й пласке». */
.client-info-form input:not([type="checkbox"]):not([type="radio"]),
.client-info-form select,
.client-info-form textarea{min-height:48px; padding:12px 15px; font-size:15.5px; border-radius:12px;}
.client-info-form textarea{min-height:0; padding-top:13px; line-height:1.6;}
.client-info-form .ci-other-input{margin-top:10px;}

/* Підказка під полем — навмисно НЕ .hint: усередині .client-card-view .hint підвищено до 14px
   кольору --ink, і через це підказка важила стільки ж, скільки сам зміст. */
.client-info-form .ci-help{margin:9px 0 0; font-size:14px; line-height:1.5; color:var(--slate); max-width:56ch;}
.client-info-form .ci-help.is-error{color:var(--stamp); font-weight:600;}

/* Поле з одиницею виміру. Одна рамка на пару «число + одиниця», щоб не було голого числа
   без підпису — саме на цьому спіткнувся вік дитини. */
.client-info-form .ci-measure{display:inline-flex; align-items:stretch; width:100%; max-width:190px;
  border:1px solid var(--sky-line); border-radius:12px; background:var(--sky); overflow:hidden;
  transition:border-color .12s, background .12s, box-shadow .12s;}
.client-info-form .ci-measure-lg{max-width:230px;}
.client-info-form .ci-measure input{flex:1; min-width:0; border:none; background:transparent;
  border-radius:0; box-shadow:none;}
.client-info-form .ci-measure input:focus{box-shadow:none; background:transparent;}
.client-info-form .ci-measure-unit{display:flex; align-items:center; padding:0 14px; flex:none;
  border-left:1px solid var(--sky-line); background:var(--sky-deep);
  font-size:14.5px; font-weight:600; color:var(--slate);}
.client-info-form .ci-measure:focus-within{border-color:var(--visa); background:var(--paper); box-shadow:0 0 0 3px var(--visa-soft);}

/* Панель конструктора родини — єдина «коробка» на вкладці: це не поле, а маленький інструмент,
   і йому потрібна власна поверхня. */
.client-info-form .ci-family{border:1px solid var(--sky-line); border-radius:16px; padding:18px;
  background:color-mix(in srgb, var(--sky) 55%, var(--paper));}

/* Вибір «або/або». Дві однакові за розміром картки з радіо-крапкою — щоб було видно, що
   вибрати можна лише щось одне, і щоб довжина підпису не робила з двох варіантів два різні
   елементи керування (саме це й було з чіпами «Сам» / «З партнером (чоловік/дружина)»). */
.client-info-form .ci-choice{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
.client-info-form .ci-choice-opt{display:flex; align-items:center; gap:13px; text-align:left;
  padding:14px 16px; border-radius:13px; border:1.5px solid var(--sky-line); background:var(--paper);
  color:var(--ink); cursor:pointer; font-family:var(--font-body); transition:border-color .12s, background .12s;}
.client-info-form .ci-choice-opt:hover{border-color:var(--slate-2);}
.client-info-form .ci-choice-opt:focus-visible{outline:2px solid var(--visa); outline-offset:2px;}
.client-info-form .ci-choice-opt.is-on{border-color:var(--visa); background:var(--visa-soft);}
.client-info-form .ci-choice-mark{width:20px; height:20px; border-radius:50%; flex:none;
  border:2px solid var(--slate-2); display:flex; align-items:center; justify-content:center; transition:border-color .12s;}
.client-info-form .ci-choice-opt.is-on .ci-choice-mark{border-color:var(--visa);}
.client-info-form .ci-choice-opt.is-on .ci-choice-mark::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--visa);}
.client-info-form .ci-choice-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.client-info-form .ci-choice-text b{font-size:15.5px; font-weight:700;}
.client-info-form .ci-choice-text i{font-style:normal; font-size:13px; color:var(--slate); line-height:1.35;}
.client-info-form .ci-choice-opt.is-on .ci-choice-text i{color:var(--visa-ink);}

.client-info-form .ci-kids{margin-top:20px; padding-top:18px; border-top:1px dashed var(--sky-line);}
.client-info-form .ci-kids-head{display:flex; align-items:baseline; gap:10px; margin-bottom:12px;}
.client-info-form .ci-kids-title{font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--slate);}
.client-info-form .ci-kids-count{font-size:13px; color:var(--slate-2);}
/* Ширина рядка обмежена навмисно: у попередній версії кошик відлітав до правого краю картки,
   за півекрана від поля, до якого він належить. */
/* Діти йдуть у ряд, а не стовпчиком: власник просив саме так — при 3-4 дітях колонка
   з'їдала пів екрана й «Додати дитину» тікала кудись униз. auto-fill + minmax самі
   переносять картки на новий рядок, коли ширини бракує, тож на вужчому екрані це
   природно стає стовпчиком без окремої медіазапитної гілки. */
.client-info-form .ci-kids-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; max-width:100%;}
.client-info-form .ci-kid{display:flex; align-items:flex-end; gap:14px; padding:12px 14px;
  border:1px solid var(--sky-line); border-radius:14px; background:var(--paper);}
.client-info-form .ci-kid-no{width:30px; height:30px; border-radius:50%; flex:none; margin-bottom:9px;
  background:var(--visa-soft); color:var(--visa-ink); font-size:14.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center;}
.client-info-form .ci-kid-field{display:flex; flex-direction:column; gap:7px; min-width:0; flex:1;}
.client-info-form .ci-kid-label{font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--slate);}
.client-info-form .ci-kid .ci-measure{max-width:100%;}
.client-info-form .ci-kid .ci-measure input{text-align:left;}
.client-info-form .ci-kid-del{width:36px; height:36px; flex:none; color:var(--stamp); background:transparent;}
.client-info-form .ci-kid-del:hover{background:var(--stamp-soft);}
.client-info-form .ci-kid-add{margin-top:12px;}
.client-info-form .ci-empty{margin:16px 0 0; font-size:14.5px; line-height:1.5; color:var(--slate);}

/* Підсумок людською мовою замість технічного «Буде збережено: "…"». */
.client-info-form .ci-family-sum{display:flex; align-items:flex-start; gap:9px; margin:18px 0 0;
  padding-top:16px; border-top:1px solid var(--sky-line);
  font-size:14.5px; line-height:1.5; color:var(--ink-soft);}
.client-info-form .ci-family-sum-ic{color:var(--good); flex:none; display:flex; margin-top:1px;}
.client-info-form .ci-family-sum-ic svg{width:16px; height:16px;}

.client-info-form .ci-legacy{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-top:12px;
  padding:13px 15px; border-radius:13px; background:var(--amber-soft);
  border:1px solid color-mix(in srgb, var(--amber) 35%, transparent);}
.client-info-form .ci-legacy-ic{color:var(--amber); flex:none; display:flex; margin-top:1px;}
.client-info-form .ci-legacy-ic svg{width:18px; height:18px;}
.client-info-form .ci-legacy-text{flex:1; min-width:220px; font-size:14px; line-height:1.5; color:var(--ink-soft);}
.client-info-form .ci-legacy-text b{display:block; font-size:14.5px; color:var(--ink); margin-bottom:3px;}

.client-info-form .ci-actions{display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin-top:32px; padding-top:22px; border-top:1px solid var(--sky-line);}
.client-info-form .ci-actions-note{font-size:14px; color:var(--slate);}
.client-info-form .ci-save{padding:13px 24px; font-size:15px; border-radius:12px; margin-left:auto;}

/* Одна колонка раніше, ніж екран стане мобільним: у картці клієнта форма живе праворуч від
   меню, тож «вузько» їй стає задовго до 700px вікна. */
@media (max-width:1000px){
  .client-info-form .ci-grid{grid-template-columns:1fr;}
  .client-info-form .ci-choice{grid-template-columns:1fr;}
}

/* ══ Критерій на публічному дашборді клієнта (js/pages/ClientView.js) ═══════════════════════
   Це єдиний екран продукту, який відкриває не співробітник, а клієнт — здебільшого з
   телефона, здебільшого один раз, щоб зрозуміти «що від мене хочуть». Тому весь блок нижче
   писаний від телефона: базові розміри тут — мобільні, а десктоп лише додає простору.

   Власник дивився на попередню версію й сказав рівно те, що вона й показувала: «мелко».
   Причина була не в одному розмірі шрифту, а в тому, що назва задачі, пояснення до неї,
   відлік і назва файла мали приблизно однакову вагу — екран читався як роздруківка бази,
   а не як список того, що треба зробити.

   Кольори — тільки токени дизайн-системи (--visa/--sky/--stamp/--good/--amber). Жодного
   хардкоду: сторінка вміє партнерські теми (.share-screen[data-brand="infoplus"]
   перевизначає саме ці токени), і зашитий hex зробив би там чужий колір. ═════════════════ */

/* ── Плитки критеріїв + бейдж «скільки задач чекає на вас» ─────────────────────────────── */
.crit-grid-head{margin:26px 0 14px;}
.crit-grid-title{font-family:var(--font-display); font-size:21px; font-weight:800; line-height:1.25; letter-spacing:-.01em; margin:0;}
.crit-grid-sub{font-size:15px; line-height:1.55; color:var(--slate); margin:8px 0 0;}
.crit-grid-group{font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--slate-2); margin:22px 0 10px;}

/* .evidence-card спільна з внутрішньою карткою клієнта, тож усе нижче прибите до
   .share-screen — CRM співробітника не має зачепити жодне з цих правил. */
.share-screen .evidence-card{position:relative; padding:18px 20px; gap:14px; border-radius:16px; background:var(--paper);}
.share-screen .evidence-card h4{font-size:17px; line-height:1.35; margin-bottom:5px;}
.share-screen .evidence-card p{font-size:15px; font-weight:600; color:var(--slate);}
.evidence-emoji{
  width:46px; height:46px; flex-shrink:0; border-radius:13px; background:var(--sky);
  display:flex; align-items:center; justify-content:center; font-size:24.5px; line-height:1;
}
.evidence-emoji-done{display:flex; color:var(--good);}
.evidence-emoji-done svg{width:26px; height:26px;}
/* Критерій, у якому щось чекає особисто на клієнта, має відрізнятися ще до того, як людина
   прочитає цифру: смуга кольору тривоги ліворуч і тепла заливка. Повний червоний бордер тут
   пробували — на п'яти плитках із тринадцяти екран перетворювався на суцільну тривогу. */
.share-screen .evidence-card.needs-you{box-shadow:inset 4px 0 0 var(--stamp), var(--shadow-card);}
.share-screen .evidence-card.needs-you .evidence-emoji{background:var(--stamp-soft);}
.share-screen .evidence-card.needs-you p{color:var(--stamp); font-weight:700;}
.share-screen .evidence-card.filled p{color:var(--good); font-weight:700;}
.share-screen .evidence-card.filled .evidence-emoji{background:var(--paper);}

/* Бейдж — рівно те, що просив власник: «кружочок з цифрою, як уведомление на айфонах».
   Тому й поводиться як айфонний: сидить на кутику плитки, ніколи не показує нуль і зникає,
   щойно задачі закриті. min-width, а не фіксована ширина — двоцифрове число має розтягнути
   кружечок у пігулку, а не вилізти за його межі. */
.evidence-badge{
  position:absolute; top:-9px; right:-7px; z-index:1;
  min-width:28px; height:28px; padding:0 8px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--stamp); color:#fff; border:2.5px solid var(--paper);
  font-size:15px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums;
  box-shadow:0 3px 10px rgba(214,69,38,.4);
}

/* ── Шухляда критерію: шапка ───────────────────────────────────────────────────────────── */
/* Вужча за звичайну шухляду CRM (66vw). Всередині немає сітки папок, заради якої ту ширину
   й брали, — тут суцільний текст, а рядок у 900 px читати незручно. 680 px — та сама
   колонка, що й у .share-wrap на самій сторінці, тож шухляда відчувається її продовженням,
   а не окремим вікном. */
/* 100%, а не 100vw: 100vw рахує й смугу прокрутки, тож на телефоні шухляда виходила на
   десяток пікселів ширшою за екран і її лівий край опинявся за межами вікна. */
.crit-drawer{width:min(680px, 100%); min-width:0;}
.crit-head{align-items:flex-start; gap:12px; padding:20px 22px 18px;}
.crit-head-main{display:flex; align-items:flex-start; gap:14px; min-width:0; flex:1;}
.crit-head-emoji{
  width:52px; height:52px; flex-shrink:0; border-radius:15px; background:var(--sky);
  display:flex; align-items:center; justify-content:center; font-size:28.5px; line-height:1;
}
.crit-head-text{min-width:0; flex:1;}
.crit-head-eyebrow{font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--slate-2); margin-bottom:4px;}
/* Назва критерію — заголовок сторінки, а не підпис вікна: із неї людина розуміє, куди
   потрапила, і саме її вона шукатиме очима, повернувшись сюди наступного тижня. */
.crit-head-title{font-family:var(--font-display); font-size:25.5px; font-weight:800; line-height:1.22; letter-spacing:-.015em; margin:0; overflow-wrap:anywhere;}
.crit-head-meta{display:flex; flex-wrap:wrap; gap:7px; margin-top:11px;}
/* Власник попросив зменшити ці чипи («Чекає на вас», «У команди») десь у півтора раза —
   вони на дашборді клієнта виглядали крупніше за решту шапки критерію. 14px→9.5px,
   5px 11px→3px 7px — саме той коефіцієнт, border-radius лишаємо: це пігулка, її форма
   не залежить від розміру. */
.crit-chip{
  display:inline-flex; align-items:center; padding:3px 7px; border-radius:999px;
  background:var(--sky); color:var(--ink-soft); font-size:9.5px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.crit-chip-you{background:var(--stamp-soft); color:var(--stamp);}
.crit-chip-done{background:var(--good-soft); color:var(--good);}
.crit-head-close{flex-shrink:0;}
.crit-body{padding:18px 22px 40px; background:var(--sky);}
/* На весь екран (власник, 02.09: «надо что бы було на весь екран») — тло критерію тепер
   тягнеться до країв, а не лишає порожню сіру смугу праворуч. Але текст задач у 1200px
   рядок не варто розтягувати теж — тому фон повний, а самі блоки лишаються читабельною
   колонкою по центру, як стаття. */
.crit-drawer.drawer-full .crit-body > *{max-width:760px; margin-left:auto; margin-right:auto;}

/* ── Блок задач: «ваше» проти «нашого» ─────────────────────────────────────────────────── */
/* Головна правка всього екрана. Раніше обидва списки були однією стрічкою рядків, і єдиною
   різницею між «зроби це сам» і «це робимо ми» був font-weight — на телефоні цю різницю не
   видно взагалі. Тепер це два різні об'єкти: свій блок білий, з кольоровою смугою і
   картками-задачами; командний — приглушений, без смуги, без акценту. */
.crit-block{border-radius:18px; padding:18px; margin-bottom:16px; background:var(--paper); border:1px solid var(--sky-line);}
.crit-block.is-you{border-color:var(--visa); box-shadow:inset 4px 0 0 var(--visa), var(--shadow-card);}
.crit-block.is-team{background:transparent; border-style:dashed;}
.crit-block-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.crit-block-titles{min-width:0;}
.crit-block-kicker{font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--slate-2);}
.crit-block.is-you .crit-block-kicker{color:var(--visa);}
.crit-block-title{font-family:var(--font-display); font-size:19px; font-weight:800; line-height:1.3; margin:3px 0 0; overflow-wrap:anywhere;}
.crit-block.is-team .crit-block-title{font-size:17px; color:var(--ink-soft);}
.crit-block-count{
  flex-shrink:0; min-width:30px; height:30px; padding:0 9px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--sky); color:var(--slate); font-size:15px; font-weight:800;
  font-variant-numeric:tabular-nums;
}
.crit-block.is-you .crit-block-count{background:var(--visa); color:#fff;}
.crit-block-note{font-size:14.5px; line-height:1.55; color:var(--slate); margin:9px 0 0;}

/* ── План закриття критерію очима клієнта ──────────────────────────────────────────────── */
/* Не «ще одна картка задач»: тут нема ні лічильника, ні чекбоксів, від клієнта тут нічого
   не потрібно. Тому це .crit-block без смуги «is-you» і без пунктиру «is-team» — тихий
   інформаційний блок нагорі. Назви класів свої (sv-*), бо .crit-plan* у цьому ж файлі вже
   зайняте редактором того самого поля всередині CRM (ClientCard.js) — там textarea. */
.crit-block.is-plan{background:var(--sky-deep); border-color:var(--sky-line);}
.crit-block.is-plan .crit-block-title{font-size:18px;}
/* pre-wrap тримає список із датами списком. overflow-wrap:anywhere — бо в плані трапляються
   довгі посилання, а ширина шухляди на телефоні їх не пробачає. */
.sv-crit-plan{
  font-size:15.5px; line-height:1.65; color:var(--ink-soft); margin-top:10px;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.sv-crit-plan a{color:var(--visa); text-decoration:underline; text-underline-offset:2px;}
/* Проджект на дзвінку (isStaffEdit, ClientView.js) — той самий шрифт/розмір, що читач бачить
   у .sv-crit-plan, лише в рамці textarea, щоб було видно, куди можна клікнути й писати. */
.sv-crit-plan-edit{
  width:100%; font-size:15.5px; line-height:1.65; color:var(--ink); margin-top:10px;
  font-family:inherit; resize:vertical; padding:10px 12px; border-radius:10px;
  border:1px solid var(--sky-line); background:var(--paper);
}

/* ── Заголовок підкритерію всередині блоку задач ─────────────────────────────────────────
   Власник, 02.09: «якщо підкритерій нагороди і ми додаємо задачу — з'являється цей текст
   і там задача». Жирніше й крупніше за просту нотатку — це підпис групи, його мають
   помітити з першого погляду, а не читати поспіль зі звичайним текстом задачі. */
.crit-subcrit-title{font-family:var(--font-display); font-weight:800; font-size:15.5px; color:var(--ink); margin:20px 0 2px; letter-spacing:-.005em;}
.crit-block-head + .crit-subcrit-title, .crit-block-note + .crit-subcrit-title{margin-top:0;}

/* ── Одна задача ───────────────────────────────────────────────────────────────────────── */
.crit-task{display:flex; gap:13px; align-items:flex-start; padding:16px 0 0; margin-top:15px; border-top:1px solid var(--sky-line);}
/* Перша задача блоку не відкреслюється зверху — і коли над нею стоїть пояснення, і коли
   його немає (у другого та третього командного блоку його свідомо не малюємо), і коли
   над задачею щойно з'явився заголовок підкритерію (риска під заголовком зайва). */
.crit-block-note + .crit-task,
.crit-subcrit-title + .crit-task,
.crit-block-head + .crit-task{border-top:none; padding-top:0;}
/* Задача, на яку клієнту дали посилання з чату. Підсвітка тримається кілька секунд і
   гасне сама (див. openSharedTask у ClientView.js): вона потрібна рівно на те, щоб око
   знайшло потрібний рядок серед десятка інших, а не щоб позначити задачу назавжди. */
.crit-task.is-pointed{background:var(--sky); border-radius:12px; padding-left:12px; padding-right:12px;
  box-shadow:0 0 0 2px var(--visa); transition:background .4s ease, box-shadow .4s ease;}
.crit-task-mark{flex-shrink:0; width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--slate-2);}
.crit-task-mark svg{width:23px; height:23px;}
.crit-task-box{width:22px; height:22px; border-radius:7px; border:2px solid currentColor; opacity:.85;}
.crit-block.is-you .crit-task-mark{color:var(--visa);}
.crit-task.is-done .crit-task-mark{color:var(--good);}
.crit-task-main{flex:1; min-width:0; position:relative;}
/* Проджект на дзвінку (isStaffEdit, ClientView.js) — редаговані поля задачі замінюють
   plain-text вивід один в один за розміром/кольором, щоб екран не «стрибав» між режимами
   перегляду й редагування того самого критерію. */
.sv-task-edit-text{width:100%; font-size:18px; font-weight:700; border:none; border-bottom:1px dashed var(--sky-line); padding:2px 0; background:transparent; color:var(--ink);}
.crit-block.is-team .sv-task-edit-text{font-size:16px; font-weight:600;}
.sv-task-edit-note{width:100%; margin-top:8px; font-size:14.5px; border:1px solid var(--sky-line); border-radius:8px; padding:6px 8px; resize:vertical; color:var(--ink);}
/* color-scheme:light — без нього Chrome малює цифри datetime-local кольором з системної
   теми ОС (часто блідо-сірим на macOS), навіть коли color вище явно темний: власник,
   03.09, «плохо видно - сделай темно серым... можно черным даже». -webkit-text-fill-color
   поряд з color — порожнє (ще не вибране) поле дати Chrome малює внутрішнім шаром, який
   саму лише color ігнорує; той самий трюк, що й для перефарбовування автозаповнення. */
.sv-task-edit-deadline{margin-top:8px; font-size:13px; color:var(--ink); -webkit-text-fill-color:var(--ink); font-weight:600; color-scheme:light;}
/* is-unset (Vue-класс за реальним значенням поля, не за виглядом браузера): Safari без
   жодного значення сам малює в порожньому type=date/datetime-local сьогоднішню дату
   блідим кольором — і саме color/-webkit-text-fill-color вище цей блідий колір і мали
   перекрити. Наслідок — власник, 02.09, живцем зловив на реальному клієнті: «Дата в'їзду
   до США» показувала сьогодні, хоч у базі null, бо тепер той самий «блідий підказ» малювався
   так само темно, як справжнє значення. is-unset повертає приглушений колір САМЕ коли Vue-
   дані порожні — це різниця не «Chrome проти Safari», а «є значення проти немає», тож
   спрацьовує в обох браузерах однаково і не залежить від того, як конкретний браузер малює
   порожній нативний віджет. */
.sv-task-edit-deadline.is-unset{color:var(--slate-2); -webkit-text-fill-color:var(--slate-2); font-weight:400;}
/* Готово (checkmark) і Прибрати (x) — два окремих доступи в одному куті режиму редагування,
   тож рядок, а не одне абсолютне позиціювання, як було для самого лише x раніше. */
.sv-task-edit-remove, .sv-task-edit-delete{position:absolute; top:0; width:26px; height:26px; border:none; background:none; color:var(--slate-2); cursor:pointer;}
.sv-task-edit-remove{right:28px; color:var(--good);}
.sv-task-edit-delete{right:0;}
.sv-task-edit-delete:hover{color:var(--stamp);}
/* Олівець — вхід у редагування зі статичного вигляду задачі (за замовчуванням, як бачить
   клієнт): власник, 04.09. crit-task-main вже має position:relative для .sv-task-edit-remove
   вище, той самий контекст тут. */
.sv-task-edit-pencil{position:absolute; top:0; right:0; width:26px; height:26px; border:none; background:none; color:var(--slate-2); cursor:pointer;}
.sv-task-edit-pencil svg{width:16px; height:16px;}
.sv-task-edit-pencil:hover{color:var(--visa);}
.sv-task-add{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--sky-line);}
.sv-task-add input[type=text], .sv-task-add input:not([type]){flex:1; min-width:160px; color:var(--ink);}
.sv-task-add input[type="datetime-local"]{color:var(--ink); -webkit-text-fill-color:var(--ink); font-weight:600; color-scheme:light;}
.sv-task-add input[type="datetime-local"].is-unset{color:var(--slate-2); -webkit-text-fill-color:var(--slate-2); font-weight:400;}
/* Порожні поля цього блоку (ще не заповнена задача чи дедлайн) — плейсхолдер трохи темніший
   за стандартний var(--slate-2) деінде в CRM, бо це весь екран, куди клієнт дивиться разом
   із проджектом на дзвінку: «плохо видно», 03.09. */
.sv-task-add input::placeholder, .sv-task-edit-text::placeholder, .sv-task-edit-note::placeholder{color:var(--slate);}
/* «Особисті дані» на дашборді клієнта, isStaffEdit — дві колонки на широкому екрані,
   одна на телефоні (той самий брейкпоінт, що й .sv-desktop у решті сторінки).
   color-scheme:light на type=date — та сама причина, що й у .sv-task-edit-deadline вище. */
.sv-info-grid{display:grid; grid-template-columns:1fr; gap:0 16px;}
.sv-desktop .sv-info-grid{grid-template-columns:1fr 1fr;}
.sv-info-grid input[type="date"]{color:var(--ink); -webkit-text-fill-color:var(--ink); font-weight:600; color-scheme:light;}
/* is-unset: реальний доказ на живому клієнті (02.09) — Safari без значення сам малює
   сьогоднішню дату, і зробивши її темною, ми зробили порожнє поле нерозрізненним від
   справжніх даних. Той самий підхід, що й .sv-task-edit-deadline.is-unset вище. */
.sv-info-grid input[type="date"].is-unset{color:var(--slate-2); -webkit-text-fill-color:var(--slate-2); font-weight:400;}
.crit-task.is-done .criterion-task-text{color:var(--slate); text-decoration:line-through; text-decoration-color:var(--slate-2);}

/* Назва задачі — те єдине, що людина зобов'язана прочитати. 17px і 700 у своєму блоці;
   у командному свідомо тихіше, бо це довідка, а не доручення. Правило white-space/
   overflow-wrap лишається вище (окремим блоком, під регресійним тестом на переноси). */
.criterion-task-text{font-size:18px; font-weight:700; line-height:1.4; color:var(--ink);}
.crit-block.is-team .criterion-task-text{font-size:16px; font-weight:600; color:var(--ink-soft);}
/* Пояснення до задачі раніше йшло класом .hint — 11.5px кольору --slate-2. На абзаці в
   десять рядків (а вони тут саме такі) це нечитабельно. Тепер це нормальний текст, лише
   явно другорядний, і з відступом-лінійкою, щоб абзац не зливався з назвою. */
.criterion-task-note{
  font-size:15px; line-height:1.6; color:var(--ink-soft); margin-top:8px;
  padding-left:12px; border-left:2px solid var(--sky-line);
}

/* ── Прикріплені файли задачі ──────────────────────────────────────────────────────────── */
.crit-files{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.crit-file{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  padding:11px 13px; border:1px solid var(--sky-line); border-radius:13px;
  background:var(--paper); font-family:var(--font-body); color:var(--ink);
  transition:border-color .14s, box-shadow .14s;
}
.crit-file:hover{border-color:var(--visa); box-shadow:var(--shadow-card);}
/* Аркуш, а не іконка в тексті: прикріплений зразок — це файл, і виглядати він має файлом. */
.crit-file-sheet{
  flex-shrink:0; width:38px; height:46px; border-radius:7px; border:1px solid var(--sky-line);
  background:var(--sky); color:var(--visa); display:flex; align-items:center; justify-content:center;
}
.crit-file-sheet svg{width:19px; height:19px;}
.crit-file-text{min-width:0; display:flex; flex-direction:column; gap:3px;}
.crit-file-name{font-size:15.5px; font-weight:700; line-height:1.35; overflow-wrap:anywhere;}
.crit-file-sub{font-size:13px; color:var(--slate); line-height:1.35;}

/* ── Документи по критерію ─────────────────────────────────────────────────────────────── */
.crit-docrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:15px 0 0; margin-top:14px; border-top:1px solid var(--sky-line);}
.crit-docrow-text{flex:1; min-width:180px;}
.crit-docrow-name{font-size:16px; font-weight:700; line-height:1.35; display:flex; align-items:center; gap:8px; flex-wrap:wrap; overflow-wrap:anywhere;}
.crit-docrow-sub{font-size:14.5px; color:var(--slate); margin-top:4px; line-height:1.45;}
.crit-docrow-actions{display:flex; gap:8px; flex-wrap:wrap;}

/* ── Порожній критерій ─────────────────────────────────────────────────────────────────── */
/* Раніше тут був один сірий рядок 11.5px. Порожній екран — теж екран: якщо клієнт відкрив
   критерій і нічого не побачив, він має зрозуміти, що все гаразд, а не що щось зламалось. */
.crit-empty{text-align:center; padding:34px 20px; background:var(--paper); border:1px dashed var(--sky-line); border-radius:18px;}
.crit-empty-icon{color:var(--slate-2); margin-bottom:12px;}
.crit-empty-icon svg{width:34px; height:34px;}
.crit-empty-title{font-size:18px; font-weight:800; margin-bottom:7px;}
.crit-empty-text{font-size:15px; line-height:1.6; color:var(--slate); margin:0 auto; max-width:420px;}

/* ── Зібрані матеріали: більші плитки ──────────────────────────────────────────────────── */
/* 118px плитки з підписом 11.5px давали сітку, у якій назви файлів не читались. Клієнту тут
   важливо впізнати свій документ — тож плитка більша, а підпис нормального кегля. */
.crit-block .shared-file-grid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:16px; margin-top:14px;}
.crit-block .shared-file-name{font-size:14.5px; line-height:1.4; color:var(--ink); font-weight:600; margin-top:9px;}
.crit-block .shared-file-sheet{border-radius:12px;}
.crit-block .shared-file-ext{font-size:13px; padding:4px 9px;}
.crit-block .shared-file-lock svg{width:14px; height:14px;}

/* ── Телефон ───────────────────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .crit-head{padding:16px 16px 14px; gap:8px;}
  .crit-head-emoji{width:44px; height:44px; font-size:24.5px; border-radius:13px;}
  .crit-head-title{font-size:21px;}
  .crit-body{padding:14px 14px 36px;}
  .crit-block{padding:15px 14px; border-radius:16px;}
  .crit-block-title{font-size:18px;}
  .criterion-task-text{font-size:17.5px;}
  /* Дві колонки, а не три: на 390px три плитки дають 100px, у які назва файла не влазить. */
  .crit-block .shared-file-grid{grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:12px;}
  .crit-grid-title{font-size:19px;}
  .share-screen .evidence-card{padding:15px 16px;}
  /* Тека «Матеріали клієнта»: назва файла лишається рядком поруч із мініатюрою, кошик за
     потреби переїжджає на свій рядок. !important, який стояв тут раніше, більше не потрібен —
     інлайнового style="flex:1" у розмітці немає, ширину задає .share-doc-body (див. вище).
     Чек-лист документів (.share-doc--slot) верстається колонкою на будь-якій ширині, тож
     стиснути назву там нічим — окремих правил він не потребує. */
  .share-doc{flex-wrap:wrap;}
  .share-docs{padding:18px 16px;}
  .share-docs-title{font-size:19px;}
  .share-doc--slot{padding:14px 14px 14px 17px;}
  /* На телефоні дія — на всю ширину: пальцем цілитись нікуди, крім неї. «Переглянути» і
     «Замінити» ділять рядок навпіл — кнопка в 100px під палець не потрапляє. */
  .share-doc-cta{flex:1 1 auto;}
  .share-doc--slot.has-file .share-doc-actions .btn{flex:1 1 auto; justify-content:center;}
}

/* ===== Картка співробітника (js/pages/EmployeeCard.js) ===================================
   Довідник «хто це», а не адмінка: велике фото, ім'я, де людина й чим зайнята. Дві колонки
   під 1440 і 1280, одна — нижче 1080, бо «Про людину» це короткі пари ключ-значення, і
   розтягувати їх на всю ширину екрана нема сенсу.
   Усі кольори — токенами: та сама сторінка має читатись у темній темі без жодної правки. */
.emp-page{max-width:1180px;}

.emp-gone{
  display:flex; gap:12px; align-items:flex-start; margin-bottom:16px;
  border:1.5px solid var(--stamp); background:var(--stamp-soft);
}
.emp-gone-ic{display:flex; color:var(--stamp); flex-shrink:0;}
.emp-gone-ic svg{width:20px; height:20px;}
.emp-gone b{font-size:15px; color:var(--stamp);}

.emp-hero{
  display:flex; gap:20px; align-items:center; margin-bottom:16px; flex-wrap:wrap;
  /* Ледь помітний градієнт замість суцільної заливки — шапка має відрізнятись від решти
     карток, але не перетворюватись на кольорову плашку. */
  background:linear-gradient(135deg, var(--visa-soft) 0%, var(--paper) 62%);
}
.emp-hero-face{flex-shrink:0;}
.emp-hero-body{flex:1 1 260px; min-width:0;}
.emp-hero-name{font-size:23.5px; font-weight:700; line-height:1.2; margin:0; overflow-wrap:anywhere;}
.emp-hero-role{font-size:14.5px; color:var(--slate); margin-top:3px; overflow-wrap:anywhere;}
.emp-hero-pills{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px;}
.emp-hero-edit{flex-shrink:0;}
.emp-hero-edit svg{margin-right:6px; vertical-align:-2px;}

.emp-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start;}

.emp-facts{display:flex; flex-direction:column; gap:12px;}
.emp-fact{display:flex; flex-direction:column; gap:2px; min-width:0;}
.emp-fact-k{font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--slate-2);}
.emp-fact-v{font-size:15px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; overflow-wrap:anywhere;}
.emp-flag{font-size:20px; line-height:1;}
.emp-soon{font-size:12.5px; font-weight:600; color:var(--visa); background:var(--visa-soft); border-radius:99px; padding:2px 8px;}
.emp-link{color:var(--visa); text-decoration:none; display:inline-flex; align-items:center; gap:6px; font-weight:600; overflow-wrap:anywhere;}
.emp-link:hover{text-decoration:underline;}
.emp-link svg{width:13px; height:13px;}
.emp-link:focus-visible{outline:2px solid var(--visa); outline-offset:2px; border-radius:4px;}
.emp-hobbies{font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin:0; overflow-wrap:anywhere;}

/* «Доброго вечора, ми з України» — рівно один рядок і тільки для України. */
.emp-ua{
  display:flex; align-items:center; gap:10px; margin-top:14px; padding:10px 14px;
  border-radius:var(--radius-md); border:1px solid var(--sky-line); background:var(--sky);
  font-size:14.5px; font-weight:600; color:var(--ink-soft);
}
.emp-ua-flag{font-size:21px; line-height:1;}

.emp-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.emp-stats .stat-tile{padding:14px 14px; gap:6px; background:var(--sky); border-color:transparent;}
.emp-stats .num{font-size:27.5px;}
.emp-stats .label{font-size:12.5px; line-height:1.3;}

/* Клієнт у списку — справжня кнопка: сюди ходять і з клавіатури, і читалкою екрана. */
.emp-client{
  width:100%; text-align:left; background:transparent; border:none;
  border-bottom:1px solid var(--sky-line); cursor:pointer; font:inherit; color:var(--ink);
  padding:11px 6px;
}
.emp-client:last-child{border-bottom:none;}
.emp-client:hover{background:var(--sky);}
.emp-client:focus-visible{outline:2px solid var(--visa); outline-offset:-2px; border-radius:8px;}
.emp-client-name{flex:1; min-width:0; font-weight:600; font-size:14.5px; overflow-wrap:anywhere;}
.emp-client-go{display:flex; color:var(--slate-2); flex-shrink:0;}
.emp-client-go svg{width:15px; height:15px;}

@media(max-width:1080px){
  .emp-cols{grid-template-columns:minmax(0,1fr);}
}

/* ===== «Команда»: людина як клікабельна картка ==========================================
   Раніше це були <div>-и, і єдиний спосіб дізнатись про людину більше — спитати когось.
   Тепер це кнопки: клавіатура, фокус і читалка отримують їх безкоштовно, чого @click на
   голому div ніколи не давав. */
.team-person{
  width:100%; text-align:left; font:inherit; color:var(--ink); cursor:pointer;
  background:transparent; border:1px solid var(--sky-line); border-radius:12px; padding:12px;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  display:block;
}
.team-person:hover{border-color:var(--visa); box-shadow:var(--shadow-card); transform:translateY(-1px);}
.team-person:focus-visible{outline:2px solid var(--visa); outline-offset:2px;}
.team-person--compact{width:auto; padding:10px 12px;}
.team-person-head{display:flex; align-items:center; gap:14px; min-width:0;}
.team-person-head > div{min-width:0;}
.team-person-name{font-weight:600; font-size:14.5px; overflow-wrap:anywhere;}
.team-person-pills{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px;}

/* Файли одного документа в картці клієнта. Багатофайловий слот (паспорт зі сторінками
   візових відміток) показує кожен файл окремим чипом — форми мають бачити всі сторінки,
   а не лише першу. */
.doc-file-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}
/* Рядок «це поклала CRM сама». Помітний, але не тривожний: система зробила роботу, а не
   зламалась, — тому синій відтінок доказів, а не червоний. */
.doc-auto-placed{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; color:var(--visa-ink);}
.doc-auto-placed svg{width:14px; height:14px;}

/* ─── Папки клієнта в робочому місці петиції ──────────────────────────────────────────
   Панель, а не вкладка й не модалка на весь екран. Причина одна: дивитись у файли треба
   ПОКИ пишеш. Вкладка забрала б собою центр із текстом, модалка накрила б усе — а людині
   потрібно бачити абзац і документ одночасно.
   Стоїть усередині .petition-workspace-grid і накриває колонку питань, не центр: питання —
   довідка, до якої повертаються одним кліком, а текст лишається на екрані. У сітки
   overflow:hidden, тож панель не може виїхати за межі екрана на жодній ширині. */
.petition-workspace-grid{position:relative}
.pw-files-panel{
  /* z-index тут НЕМАЄ навмисно. Будь-яке значення створює контекст накладання, і тоді
     вікно перегляду файлу (.overlay, z-index:300) рахується ВСЕРЕДИНІ панелі — а сама
     панель опиняється під лівим меню (.rail, z-index:20). Виглядало це так: документ
     відкривається, але ліва чверть аркуша схована за меню. Панель і без z-index малюється
     поверх колонки питань, бо стоїть після неї в розмітці. */
  position:absolute; top:0; right:0; bottom:0;
  /* Ширина — РІВНО як у колонки питань (376/352/328 на трьох брейкпоінтах сітки). Ширша
     панель здавалась зручнішою, поки не з'ясувалось, що вона накриває правий край центру
     разом із кнопкою «Надіслати»: писати далі стає нічим, а це рівно те, заради чого панель
     і робилася. Тепер вона накриває колонку питань і жодного пікселя тексту. */
  width:376px; max-width:100%;
  display:flex; flex-direction:column;
  background:var(--paper); border-left:1px solid var(--sky-line);
  box-shadow:-22px 0 44px -30px rgba(11,22,38,.45);
}
:root[data-theme="dark"] .pw-files-panel{box-shadow:-22px 0 44px -26px rgba(0,0,0,.6)}
.pw-files-head{display:flex; align-items:center; gap:10px; padding:11px 12px 11px 14px; border-bottom:1px solid var(--sky-line)}
.pw-files-title{display:flex; align-items:center; gap:8px; flex:1; min-width:0; font-size:15px}
.pw-files-title svg{width:18px; height:18px; flex:none}
.pw-files-search{display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--sky-line)}
.pw-files-search svg{width:15px; height:15px; color:var(--slate-2); flex:none}
.pw-files-search input{flex:1; min-width:0; border:1px solid var(--sky-line); border-radius:var(--radius-sm); padding:6px 9px; font-size:14px; background:var(--paper); color:var(--ink)}
.pw-files-note{display:flex; align-items:flex-start; gap:8px; margin:10px 12px 0; padding:9px 10px; border-radius:var(--radius-sm); background:var(--amber-soft); color:var(--amber); font-size:13px; line-height:1.45}
.pw-files-note svg{width:15px; height:15px; flex:none; margin-top:1px}
.pw-files-note .icon-btn{width:22px; height:22px; flex:none; margin-left:auto}
.pw-files-scroll{flex:1; min-height:0; overflow-y:auto; padding:10px 12px 18px}

/* Зведення. «6 файлів» саме по собі не каже нічого — каже те, що критеріїв 13, файли лежать
   в одному, і частина з них насправді бланки фірми. Саме цього бракувало у відповіді AI,
   з якої й почалась задача. */
.pw-files-summary{display:flex; flex-direction:column; gap:3px; padding:9px 11px; margin-bottom:10px; border-radius:var(--radius-sm); background:var(--sky); font-size:14px}
.pw-files-summary b{font-weight:600}
.pw-files-summary small{color:var(--slate); line-height:1.45}
.pw-files-warn{display:flex; gap:9px; padding:10px 11px; margin-bottom:10px; border-radius:var(--radius-sm); background:var(--amber-soft); color:var(--amber)}
.pw-files-warn svg{width:16px; height:16px; flex:none; margin-top:1px}
.pw-files-warn b{display:block; font-size:14px; margin-bottom:2px}
.pw-files-warn p{margin:0; font-size:13px; line-height:1.45}
.pw-files-group-label{margin:12px 0 6px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-2)}
.pw-files-group-label:first-child{margin-top:0}

/* ─── Стан справи: «що реально є, чого нема» ────────────────────────────────────────────
   Власник, подивившись першу версію на живому кейсі: «и чтобы выглядело полноценно —
   заходишь и смотришь в папках что реально есть, чего нет».

   Тут НЕМАЄ жодного червоного кольору, і це не смак, а рахунок по базі: особисті документи
   завантажені в 16 справах із 469, задачі критеріїв — у 10 із 478. Червона стіна «бракує»
   була б технічно правдою майже скрізь і не значила б нічого. Тому «є» — зелена поділка,
   «нема» — тиха сіра, і все.

   Рахунок навмисно поділками, а не відсотком чи кільцем: поділок одинадцять, їх видно
   очима, і кожна — конкретний критерій із підказкою по наведенню. «73%» від одинадцяти не
   каже нічого й вимагає рахувати в голові назад. */
.pw-mat-state{padding:12px 12px 11px; margin-bottom:10px; border-radius:var(--radius-sm); background:var(--sky); border:1px solid var(--sky-line)}
.pw-mat-score{display:flex; align-items:baseline; gap:6px; line-height:1}
.pw-mat-score b{font-size:27.5px; font-weight:650; letter-spacing:-.02em; color:var(--ink)}
.pw-mat-score i{font-style:normal; font-size:14.5px; color:var(--slate)}
.pw-mat-score-label{margin-top:3px; font-size:13px; color:var(--slate); line-height:1.35}
.pw-mat-ticks{display:flex; gap:3px; margin-top:9px}
.pw-mat-ticks span{flex:1; min-width:3px; height:6px; border-radius:3px; background:var(--sky-line)}
.pw-mat-ticks span.is-has{background:var(--good)}
/* «Лише бланки фірми» — не зелена й не порожня: файли є, доказів немає. */
.pw-mat-ticks span.is-templates{background:var(--amber); opacity:.55}
.pw-mat-facts{list-style:none; margin:9px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:3px 10px}
.pw-mat-facts li{font-size:12.5px; color:var(--slate); position:relative}
.pw-mat-facts li+li::before{content:'·'; position:absolute; left:-6.5px; color:var(--slate-2)}

/* Порожня справа. Спокійна нотатка, а не порожній екран і не помилка: список критеріїв під
   нею лишається, бо саме він і є відповідь на «чого нема». */
.pw-mat-note{display:flex; gap:10px; padding:11px 12px; margin-bottom:10px; border-radius:var(--radius-sm); background:var(--paper); border:1px dashed var(--sky-line)}
.pw-mat-note svg{width:20px; height:20px; flex:none; margin-top:1px; opacity:.5}
.pw-mat-note b{display:block; font-size:14px; margin-bottom:3px}
.pw-mat-note p{margin:0; font-size:12.5px; line-height:1.5; color:var(--slate)}

/* Номер критерію замість однакової папки. Той самий римський номер, що й у лівій колонці
   робочого місця, — так рядок панелі й розділ тексту впізнаються як одне й те саме. */
.pw-mat-mark{width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--sky-line); background:var(--paper); color:var(--slate)}
.pw-mat-mark b{font-size:11px; font-weight:650; letter-spacing:.02em}
.pw-mat-mark.is-has{border-color:transparent; background:var(--good-soft); color:var(--good)}
.pw-mat-mark svg{width:15px; height:15px}

/* Мітки другого рядка. Окремими елементами з переносом, а не одним рядком: у колонці
   330 px довгий рядок обрізало трьома крапками рівно там, де починалась суть. */
.pw-files-row-tags{display:flex; flex-wrap:wrap; align-items:center; gap:2px 7px; margin-top:2px}
.pw-tag{font-style:normal; font-size:12px; line-height:1.5; color:var(--slate)}
.pw-tag.is-muted{color:var(--slate-2)}
.pw-tag.is-warn{color:var(--amber)}
.pw-tag.is-state{padding:1px 6px; border-radius:999px; background:var(--sky-line); color:var(--ink); font-size:11px; letter-spacing:.02em}

/* «Чого бракує» всередині папки: список, який команда написала руками (задачі критерію),
   і перелік ненадісланих особистих документів. Стоїть НАД файлами — з цим питанням сюди
   й заходять. */
.pw-mat-missing{padding:9px 11px; margin-bottom:9px; border-radius:var(--radius-sm); background:var(--sky); border:1px solid var(--sky-line)}
.pw-mat-missing b{display:block; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--slate-2); margin-bottom:5px}
.pw-mat-missing ul{margin:0; padding-left:15px}
.pw-mat-missing li{font-size:12.5px; line-height:1.5; color:var(--ink)}
.pw-mat-missing em{font-style:normal; color:var(--slate-2)}

.pw-files-row{display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 9px; margin-bottom:4px; border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; color:var(--ink); cursor:pointer; font:inherit}
.pw-files-row:hover:not(:disabled){background:var(--sky); border-color:var(--sky-line)}
/* Порожній критерій НЕ ховаємо: «12 критеріїв порожні» — це і є та інформація, по якій
   людина вирішує, що робити далі. Просто робимо його тихішим. */
/* Порожній критерій тихіший — але заходити в нього МОЖНА, якщо всередині є список «чого
   бракує». Тому курсор вимикає саме :disabled, а не сірість. */
.pw-files-row.is-empty{opacity:.62}
.pw-files-row:disabled{cursor:default}
.pw-files-row.is-na{opacity:.45}
.pw-files-row.is-catch-all:not(.is-empty){background:var(--amber-soft)}
.pw-files-row-ic{flex:none; display:flex}
.pw-files-row-ic svg{width:19px; height:19px}
.pw-files-row-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.pw-files-row-body b{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pw-files-row-body small{font-size:12.5px; color:var(--slate); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pw-files-row-go{flex:none; display:flex; color:var(--slate-2)}
.pw-files-row-go svg{width:15px; height:15px}
.pw-files-row .pill{flex:none}

.pw-files-crumbs{display:flex; align-items:center; flex-wrap:wrap; gap:3px; margin-bottom:8px; font-size:12.5px}
.pw-files-crumbs button{border:0; background:transparent; padding:2px 3px; color:var(--visa); cursor:pointer; font:inherit; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pw-files-crumbs button:disabled{color:var(--ink); cursor:default}
.pw-files-crumbs svg{width:12px; height:12px; color:var(--slate-2)}
.pw-files-stat{margin:0 0 8px; font-size:12.5px; color:var(--slate)}
.pw-files-hint{margin:-4px 0 8px; font-size:12.5px; color:var(--slate-2)}
.pw-files-empty{margin:8px 0; font-size:13px; color:var(--slate)}
.pw-files-empty-state{text-align:center; padding:26px 14px; color:var(--slate)}
.pw-files-empty-state svg{width:34px; height:34px; opacity:.55}
.pw-files-empty-state b{display:block; margin:8px 0 4px; font-size:14.5px; color:var(--ink)}
.pw-files-empty-state p{margin:0; font-size:13px; line-height:1.5}

.pw-files-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:10px; margin-top:8px}
.pw-files-tile{display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0}
.pw-files-tile-meta{font-size:12px; color:var(--slate-2); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}

/* Вікно перегляду. Класи ті самі, що й у картки клієнта (.overlay/.modal-preview), тож
   поведінка й розміри однакові скрізь — інше вікно для тих самих файлів збивало б з пантелику. */
.file-preview-body{display:flex; align-items:center; justify-content:center; background:var(--sky); border-radius:10px}
.file-preview-note{text-align:center; padding:40px 20px}
.file-preview-note svg{width:26px; height:26px; margin-bottom:8px; color:var(--slate-2)}
.file-preview-note .btn{margin-top:10px}
.file-preview-img{max-width:100%; max-height:100%; width:auto; height:auto; border-radius:8px; object-fit:contain}
.file-preview-pdf{width:100%; height:100%; overflow:auto; border-radius:8px}
.file-preview-media{max-width:100%; max-height:100%; border-radius:8px; background:#000}
/* АРКУШ ПАПЕРУ ТЕМНИМ ЧОРНИЛОМ — У БУДЬ-ЯКІЙ ТЕМІ.
   Христина, 29.09.2026: «завантажені автоматично файли не читабельні, видно лиш скріни,
   текст чомусь відображається сірим». До імпорту це не мало стосунку взагалі — вона просто
   працює в темній темі. Фон тут прибитий білим (це ж аркуш), а колір тексту успадковувався
   від теми: у темній він світлий. Заміряно на її файлі — текст rgb(236,241,248) на білому,
   контраст 1.06:1, тобто його фізично не видно; картинки при цьому лишаються, і виглядає
   це як «є тільки скріни». Колір тепер прибитий разом із фоном: інакше вони знову
   розійдуться при наступній зміні теми. */
.file-preview-doc{width:100%; height:100%; background:#fff; color:#0b1626; border-radius:8px; overflow:auto; padding:24px}
.file-preview-doc a{color:#A85F1F}
.file-preview-doc th, .file-preview-doc td{border-color:#d6dfea}
.file-preview-text{width:100%; height:100%; margin:0; overflow:auto; padding:18px; background:var(--paper); border-radius:8px; font:12px/1.6 var(--font-mono); white-space:pre-wrap; word-break:break-word}

/* Ті самі три брейкпоінти, що й у сітки Petition Workspace — інакше ширини розійдуться. */
@media (max-width:1440px){ .pw-files-panel{width:352px} }
@media (max-width:1300px){ .pw-files-panel{width:328px} }
/* Мобільна розкладка сітки — одна колонка на весь екран; панель поводиться так само. */
@media (max-width:1080px){ .pw-files-panel{width:100%; border-left:0} }

/* ─── Голос: командний мікрофон і диктування в поле ───────────────────────────────────
   Кольори — тільки з токенів згори файлу, тому темна тема працює без жодного окремого
   правила: --paper/--sky/--ink перевизначені там один раз на все. */

.voice-root{position:relative; display:flex;}

/* Elizabeth у шапці: обличчя + підпис, а не іконка мікрофона. Кнопка ЛИШЕ відкриває
   панель — мікрофон вмикають уже всередині (див. коментар у VoiceCommand.js). */
.voice-mic-btn{position:relative; display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1px solid transparent; border-radius:999px;
  padding:4px 12px 4px 4px; cursor:pointer; color:var(--ink);
  transition:background .15s ease, border-color .15s ease;}
.voice-mic-btn:hover{background:var(--sky); border-color:var(--sky-line);}
.voice-mic-btn.is-live{background:var(--stamp-soft); border-color:var(--stamp);}
.voice-head-ava{position:relative; flex:0 0 auto; line-height:0;}
.voice-head-face{width:34px; height:34px; border-radius:50%; object-fit:cover; display:block;}
.voice-head-ava .online-dot{left:0; bottom:0; width:10px; height:10px;}
.voice-head-text{display:flex; flex-direction:column; line-height:1.15; text-align:left;}
.voice-head-text b{font-size:14.5px; font-weight:700;}
.voice-head-text i{font-style:normal; font-size:11.5px; font-weight:600; color:var(--slate-2); letter-spacing:.2px;}
.voice-mic-btn svg{width:17px; height:17px;}
/* Пульс під кнопкою, поки йде розпізнавання. Це єдиний спосіб побачити, що мікрофон
   справді відкритий — інакше людина говорить у вимкнений мікрофон і не розуміє, чому тиша. */
.voice-mic-pulse{position:absolute; inset:-3px; border-radius:13px; border:2px solid var(--stamp);
  animation:voicepulse 1.3s ease-out infinite; pointer-events:none;}
@keyframes voicepulse{0%{transform:scale(.9); opacity:.9} 100%{transform:scale(1.25); opacity:0}}

.voice-panel{position:fixed; right:18px; top:64px; width:580px; max-width:calc(100vw - 36px);
  max-height:calc(100vh - 96px); overflow-y:auto; z-index:340;
  background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop); padding:20px 22px 22px; animation:popin .16s cubic-bezier(.16,1,.3,1);}
/* Панель піднята приблизно на 40% на прохання власника: він читає з неї на ходу, з метра
   від екрана. Росте не лише ширина — росте кожен розмір усередині, інакше ширша панель із
   тим самим 12-піксельним текстом виглядає порожнішою, а не більшою. Кнопки всередині
   масштабуються тут же: глобальні .btn/.btn-sm чіпати не можна, вони по всій CRM. */
.voice-panel .btn{font-size:14.5px; padding:8px 14px; border-radius:10px; gap:7px;}
.voice-panel .btn-sm{padding:6px 11px; font-size:13px; border-radius:8px;}
.voice-panel .btn svg{width:15px; height:15px;}
.voice-panel-head{display:flex; align-items:center; gap:11px; margin-bottom:14px;}
/* Імʼя помічниці в шапці панелі. Місце під аватар власник додасть окремо. */
.voice-brand{display:flex; align-items:center; gap:8px; color:var(--ink); flex:0 0 auto;}
.voice-brand-ava{position:relative; flex:0 0 auto; line-height:0;}
.voice-brand-face{width:60px; height:60px; border-radius:50%; object-fit:cover; object-position:50% 50%; display:block;}
/* Крапка стоїть у лівому нижньому КУТІ рамки, а рамка тут кругла — на 60px кут порожній,
   і крапка висіла б поза обличчям. Підсуваємо її всередину кола й трохи збільшуємо. */
.voice-brand-ava .online-dot{left:3px; bottom:3px; width:14px; height:14px;}
.voice-brand-name{display:flex; flex-direction:column; line-height:1.15; font-weight:700; font-size:15px; letter-spacing:.2px;}
.voice-brand-name i{font-style:normal; font-weight:600; font-size:12px; color:var(--muted); letter-spacing:.3px;}
.voice-state{font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--slate);}
/* Слухання — не помилка. Червоним лишились рівно ті стани, де щось справді пішло не так
   (is-error), і питання (is-asking), де без відповіді робота стоїть. */
.voice-state.is-listening{color:var(--visa);}
.voice-state.is-confirm{color:var(--visa);}
.voice-state.is-done{color:var(--good);}
.voice-state.is-asking{color:var(--stamp);}
/* «Не розчув» — жовтим, як питання, а не червоним, як поломка: недочути людину нормально,
   і червона ПОМИЛКА над його ж словами читалась як «CRM зламалась». */
.voice-state.is-misheard{color:var(--amber);}
.voice-state.is-error{color:var(--stamp);}
/* Мова розпізнавання. Web Speech API слухає рівно одну мову за раз і сам її не визначає,
   тому вибір — тут, поруч із мікрофоном, а не в налаштуваннях за трьома кліками. */
.voice-langs{display:flex; gap:3px; margin-left:auto; background:var(--sky); border-radius:99px; padding:3px;}
.voice-langs button{border:0; background:transparent; cursor:pointer; border-radius:99px;
  padding:3px 11px; font-size:12.5px; font-weight:800; color:var(--slate-2); font-family:inherit;}
.voice-langs button.is-on{background:var(--paper); color:var(--visa); box-shadow:var(--shadow-card);}
/* У «Металевій команді» (AITeam.js) перемикач стоїть окремим рядком над композером, а не
   в спільній шапці з іншими елементами — тут margin-left:auto нічого не притискає, і
   потрібен лише невеликий відступ, щоб не притулятись впритул до смуги запису. */
.aiteam-langs{margin:6px 14px 0; width:fit-content;}
.voice-scope{font-size:13px; color:var(--ink-soft); background:var(--visa-soft); border-radius:99px; padding:3px 11px;}
.voice-scope b{color:var(--visa-ink);}
/* Контексту немає — це теж стан, і сказаний він має бути так само виразно, як і наявний:
   мовчазний пропуск читається як «клієнт підставиться сам», а він не підставиться. */
.voice-scope-off{background:var(--sky); color:var(--slate-2);}
.voice-close{margin-left:auto; width:30px; height:30px;}
.voice-close svg{width:15px; height:15px;}

/* Живий текст його фрази — єдине, що він СПРАВДІ читає, поки говорить. Тому з тих 40%
   найбільше дісталось саме сюди: три рядки видно одразу, довша фраза прокручується
   всередині поля, а не розсуває панель за край екрана. */
.voice-heard{font-size:15px; line-height:1.55; color:var(--ink); background:var(--sky);
  border-radius:var(--radius-md); padding:12px 15px; margin-bottom:12px; min-height:92px;
  max-height:220px; overflow-y:auto;}

/* «ЙДЕ ЗАПИС». Власник: «чтобы оно слушало только тогда когда нажимаешь слушать — а то я
   сказал, читаю, проговариваю что-то, и оно дальше слушает». Пульсу під кнопкою мікрофона
   для цього виявилось мало: він дрібний і на нього не дивляться. Тому стан мікрофона тепер
   сказаний словами, у кольорі тривоги, першим рядком панелі — і рівно так само сказано
   зворотне, коли мікрофон вимкнений. */
/* Смуга «йде запис» навмисно СПОКІЙНА. Була червона рамка з червоним текстом у капсі —
   власник: «будто ошибка какая то». Червоний у CRM означає проблему (прострочено, блокер),
   і фарбувати ним нормальну роботу означає щодня лякати людину там, де все гаразд.
   Помітність лишається на пульсуючій крапці — саме вона й читається як «зараз пишу». */
.voice-recording{display:flex; align-items:center; gap:11px; font-size:15px; font-weight:600;
  color:var(--ink-soft); background:var(--sky); border:1px solid var(--sky-line);
  border-radius:var(--radius-md); padding:12px 16px; margin-bottom:14px;}
.voice-recording .btn{margin-left:auto;}
.voice-recording-dot{width:9px; height:9px; border-radius:50%; background:var(--stamp);
  animation:voicerec 1.1s ease-in-out infinite; flex-shrink:0;}
@keyframes voicerec{0%,100%{opacity:1} 50%{opacity:.25}}
/* Кнопка «Слухати» всередині панелі Elizabeth. Стоїть тут, відколи кнопка в шапці стала
   її обличчям і лише відкриває панель — вмикати мікрофон стало нічим. */
.voice-idle{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
.voice-idle .btn{display:inline-flex; align-items:center; gap:7px;}
.voice-idle .voice-idle-note{margin:0;}
.voice-greeting{display:block; margin-bottom:10px; color:var(--ink);}
.voice-idle-note{font-size:13px; color:var(--slate-2); margin-bottom:14px;}
/* Приклади команд на порожній панелі — див. коментар у VoiceCommand.js. */
.voice-examples{font-size:14px; line-height:1.65; color:var(--slate-2); background:var(--sky);
  border-radius:var(--radius-md); padding:12px 16px; margin-bottom:14px;}
.voice-examples b{display:block; color:var(--ink); margin-bottom:4px;}
.voice-examples i{font-style:normal; color:var(--ink); font-weight:600;}

/* Задача, яку побачить сам клієнт, — не той самий рядок, що задача колезі. Плутати їх
   на картці підтвердження означає підтверджувати не те. */
.voice-row-client .voice-val{color:var(--visa);}
.voice-client-warn{font-size:14px; line-height:1.55; font-weight:600; color:var(--visa);
  background:var(--sky); border-left:3px solid var(--visa); border-radius:6px;
  padding:10px 14px; margin:6px 0 8px;}

/* Схожий клієнт уже в базі — вибір робить людина, а не модель. */
.voice-dup{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0 3px;}
.voice-dup .btn{font-size:13px;}
.voice-dup em{font-style:normal; color:var(--slate-2); font-weight:500;}

/* Звіт відкоту. Половинчастий результат має бути видимим — див. undoLast(). */
.voice-undo{font-size:14px; line-height:1.6; color:var(--ink-soft); background:var(--sky);
  border-radius:var(--radius-md); padding:14px 17px; margin:11px 0;}
.voice-undo b{color:var(--ink);}
.voice-unsupported,.voice-question,.voice-notice{font-size:14px; line-height:1.55; color:var(--ink-soft);
  background:var(--amber-soft); border-radius:var(--radius-md); padding:14px 17px; margin-bottom:14px;}
.voice-error{font-size:14px; line-height:1.55; color:var(--stamp);
  background:var(--stamp-soft); border-radius:var(--radius-md); padding:14px 17px; margin-bottom:14px;}

.voice-textline{display:flex; gap:11px; margin-bottom:14px;}
.voice-textline input{flex:1; min-width:0; font-size:14.5px; padding:8px 11px;}
/* Набір руками — не обовʼязковий другий крок після диктування, а запасний вихід. Тому
   поки мікрофон працює, це один непомітний рядок, а не поле посеред картки. */
.voice-manual-toggle{border:0; background:transparent; padding:0; margin-bottom:14px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; color:var(--slate-2); text-decoration:underline dotted;}
.voice-manual-toggle:hover{color:var(--visa);}

/* Двадцять команд однією фразою — це тепер звичайний випадок, а не край.
   Власник: «допустим, я дал ему двадцать команд за одно голосовое». Список дій має
   лишатись читабельним і на двадцяти рядках, тому він прокручується ВСЕРЕДИНІ панелі, а не
   виштовхує кнопку «Підтвердити» за екран — інакше після довгого диктування підтвердити
   план буде просто нічим. */
.voice-plan{display:flex; flex-direction:column; gap:14px;}
.voice-plan-list{display:flex; flex-direction:column; gap:14px; max-height:min(52vh, 460px); overflow-y:auto;
  padding-right:4px; scrollbar-width:thin;}
.voice-tally{font-size:13px; font-weight:700; color:var(--slate-2);}
.voice-done-mark{font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--good);}
.voice-card.is-done{opacity:.62;}

/* ── Дія, яка ЗАБИРАЄ ─────────────────────────────────────────────────────────────────
   Прибрати колегу з команди кейсу — це зняти з людини доступ до справи; очистити графу —
   стерти те, що хтось туди вписав. Виглядати так само, як додавання, це не має права:
   власник дивиться на картку кілька секунд і має бачити напрям дії кольором, не вчитуючись. */
.voice-card.is-destructive{border-color:var(--stamp); background:rgba(214,69,38,.05);}
.voice-card.is-destructive.has-problem{border-color:var(--amber); background:var(--amber-soft);}
.pill.pill-danger{background:rgba(214,69,38,.12); color:var(--stamp); font-weight:800;}
.voice-row-danger .voice-val{color:var(--stamp); font-weight:800; text-decoration:line-through;}

/* Графа картки: «було → стане». Головний захист від недочутого числа. */
.voice-row-field .voice-val{color:var(--visa-ink);}
.voice-row-change .voice-val-was{color:var(--slate-2); font-weight:600;}
.voice-money-ok{margin:9px 0 3px; padding:9px 11px; border:1px solid var(--stamp); border-radius:var(--radius-sm);
  background:rgba(214,69,38,.06); font-size:14px; font-weight:700; color:var(--stamp);
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;}
.voice-card{border:1px solid var(--sky-line); border-radius:var(--radius-md); padding:14px 17px;}
.voice-card.has-problem{border-color:var(--amber); background:var(--amber-soft);}
.voice-card-head{display:flex; align-items:center; gap:11px; margin-bottom:11px;}
.voice-changed{font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--visa);}

.voice-row{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; font-size:14.5px; padding:3px 0;}
.voice-key{flex:0 0 100px; color:var(--slate-2); font-size:12.5px; font-weight:700;}
.voice-val{flex:1; min-width:0; color:var(--ink); font-weight:600; overflow-wrap:anywhere;}
.voice-val-bad{color:var(--stamp); text-decoration:underline dotted;}
.voice-ctx{color:var(--slate-2); font-weight:500;}
/* Що саме змінила голосова правка. Без цієї підсвітки після «ні, не Дарині, а Аллі»
   довелося б перечитувати всю картку в пошуках одного слова. */
.voice-row.is-changed .voice-val{background:var(--visa-soft); border-radius:6px; padding:1px 5px;}
.voice-was{flex-basis:100%; margin-left:108px; font-size:12.5px; color:var(--slate-2); text-decoration:line-through;}

.voice-choose{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0 3px;}
.voice-choose .btn{font-size:13px;}
.voice-choose em{font-style:normal; color:var(--slate-2); font-weight:500;}
.voice-problem{font-size:13px; color:var(--amber); font-weight:700; margin-top:8px;}

.voice-hint{font-size:13px; line-height:1.5; color:var(--slate-2);}
.voice-actions{display:flex; gap:11px; flex-wrap:wrap; align-items:center; margin-top:6px;}
/* «Стоп» — головна кнопка, поки він говорить: тиша більше нічого не завершує, і закінчити
   фразу можна лише нею (або тим самим мікрофоном у шапці). */
.voice-stop{margin-bottom:14px;}
.voice-actions .voice-hint{flex:1; min-width:0; margin-bottom:14px;}
.voice-open{border:0; background:transparent; padding:0 0 0 8px; cursor:pointer;
  font:inherit; color:var(--visa); text-decoration:underline; font-weight:700;}

.voice-report{font-size:14.5px; line-height:1.6; display:flex; flex-direction:column; gap:10px;}
.voice-report-ok{color:var(--good);}
.voice-report-bad{color:var(--stamp);}

/* Мікрофон диктування. Живе в document.body з position:fixed і сам стає в правий нижній
   кут поля, у якому зараз курсор. Так він не міняє ані розмітку сторінок, ані їхні стилі —
   а отже не може нічого зламати в полях, які вже працюють. */
.mic-inline-btn{position:fixed; z-index:900; display:none; width:24px; height:24px; padding:0;
  align-items:center; justify-content:center; border:1px solid var(--sky-line); border-radius:50%;
  background:var(--paper); color:var(--slate); cursor:pointer; box-shadow:var(--shadow-card);
  transition:color .15s, border-color .15s, background .15s;}
.mic-inline-btn:hover{color:var(--visa); border-color:var(--visa);}
.mic-inline-btn svg{width:12px; height:12px;}
.mic-inline-btn.is-listening{color:#fff; background:var(--stamp); border-color:var(--stamp);
  animation:voicerec 1.2s ease-in-out infinite;}
.mic-inline-btn.is-error{color:var(--stamp); border-color:var(--stamp);}
@keyframes voicerec{0%,100%{box-shadow:0 0 0 0 rgba(214,69,38,.45)} 50%{box-shadow:0 0 0 5px rgba(214,69,38,0)}}

/* ── Задача В КРИТЕРІЙ, а не окрема задача клієнта ────────────────────────────────────
   Власник просив «додати в критерій нагороди» — і отримав звичайну задачу з назвою
   «Критерій нагороди». На картці ці дві речі мусять бути помітно різними: одна лягає рядком
   у tasks, друга — пунктом усередині критерію, де клієнт збирає докази. */
.voice-card.is-crit{border-color:var(--visa); background:var(--visa-soft);}
.voice-card.is-crit.has-problem{border-color:var(--amber); background:var(--amber-soft);}
.voice-row-crit .voice-val{color:var(--visa-ink);}
.voice-choose .btn.is-suggested{border-color:var(--visa); color:var(--visa-ink);}

/* ── Вписати клієнта (чи колегу) руками ───────────────────────────────────────────────
   «и пусть можно было текстом править клиента». Поле не створює нікого: воно лише шукає в
   тому самому довіднику CRM, а значення полю дає ЛИШЕ натискання на знайдений рядок. */
.voice-pick{display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; margin:8px 0 3px;}
.voice-pick-box{position:relative; flex:1; min-width:180px;}
.voice-pick-box input{width:100%; font-size:14px; padding:7px 10px;}
.voice-pick-hits{margin-top:5px; border:1px solid var(--sky-line); border-radius:var(--radius-sm);
  background:var(--paper); overflow:hidden; max-height:190px; overflow-y:auto;}
.voice-pick-hits button{display:block; width:100%; text-align:left; border:0; background:transparent;
  padding:7px 10px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer;}
.voice-pick-hits button:hover{background:var(--sky);}
.voice-pick-hits button:focus-visible{outline:2px solid var(--visa); outline-offset:-2px;}
.voice-pick-hits em{font-style:normal; color:var(--slate-2);}
.voice-pick-empty{margin-top:5px; font-size:12.5px; color:var(--slate-2);}

/* 1280 — друга ширина, під яку тут рахують усе. Панель не має ані вилазити за екран,
   ані наїжджати на бічне меню. */
@media (max-width:1300px){ .voice-panel{width:520px;} }
/* Дуже вузьке вікно: панель уже впирається в max-width, лишається зменшити крок
   підпису, щоб рядок «Виконавець: …» не ламався на кожному слові. */
@media (max-width:900px){ .voice-panel .voice-key{flex-basis:84px;} .voice-panel .voice-was{margin-left:92px;} }

/* ─── Голос на телефоні ──────────────────────────────────────────────────────────────────

   Мобільна CRM навмисно скорочена (див. коментар у js/app.js): решта екранів — широкі
   таблиці, і половинчаста картка клієнта гірша за чесне «відкрийте з ноутбука». Голос під
   це міркування не підпадає: диктування — це мікрофон і картка підтвердження, а не
   таблиця, і в дорозі воно природніше, ніж за столом.

   Головне правило цього блоку: НІЧОГО НЕ ХОВАТИ заради місця. Людина підтверджує запис у
   справу живого клієнта; якщо вона не бачить, що саме підтверджує, краще хай не бачить
   нічого. Тому все, що на компʼютері стоїть у два стовпчики, тут стає у два РЯДКИ, а не
   зникає, і жоден блок плану не згортається. */

/* Мікрофон під великим пальцем. Верхній лишається на компʼютері; на телефоні шапка вгорі
   екрана, і однією рукою в дорозі до неї не дістати. */
.voice-fab{display:none;}
@keyframes voicesheet{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.voice-fab-pulse{position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--stamp);
  animation:voicepulse 1.3s ease-out infinite; pointer-events:none;}

@media (max-width:720px){
  .voice-mic-btn{display:none;}
  .voice-fab{
    /* 16 px від низу ставили тоді, коли низ екрана був порожній. Відколи там нижнє меню
       (56 px + безпечна зона), мікрофон сидів ПОВЕРХ «Фінансів» і затуляв п'ятий пункт. */
    position:fixed; right:14px; bottom:calc(72px + env(safe-area-inset-bottom, 0px)); z-index:330;
    display:inline-flex; align-items:center; justify-content:center;
    width:62px; height:62px; border-radius:50%; border:0; padding:0; cursor:pointer;
    background:var(--visa); color:#fff; box-shadow:0 8px 22px rgba(28,49,91,.30);
  }
  .voice-fab svg{width:27px; height:27px;}
  .voice-fab.is-live{background:var(--stamp);}

  /* Панель на весь екран. Не «вікно, яке не влізло», а окремий екран: усе інше в цю мить
     все одно не потрібне, а кожен зекономлений піксель іде на текст плану. */
  .voice-panel{
    inset:0; width:auto; max-width:none; height:100dvh; max-height:100dvh;
    border:0; border-radius:0; box-shadow:none; padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    display:block; overflow-y:auto; overscroll-behavior:contain;
    /* popin — це поява маленької картки з кута: вона зменшує й зсуває панель, а на весь
       екран це читається як «щось зіщулилось». Повноекранний аркуш просто зʼявляється. */
    animation:voicesheet .14s ease-out;
  }
  /* Шапка переноситься рядками, а не стискається до нечитабельного: імʼя, стан і рядок
     «у картці: …» однаково потрібні, і жоден із них не має права зникнути. */
  .voice-panel-head{flex-wrap:wrap; gap:8px; position:sticky; top:0; z-index:4;
    background:var(--paper); margin:-12px -14px 10px; padding:10px 14px 8px;
    border-bottom:1px solid var(--sky-line);}
  .voice-brand-face{width:40px; height:40px;}
  .voice-brand-ava .online-dot{left:1px; bottom:1px; width:11px; height:11px;}
  .voice-scope{flex-basis:100%; order:5;}
  .voice-langs{margin-left:auto;}

  /* Рядок плану: підпис ЗВЕРХУ, значення знизу. На 390 px стовпчик у 100 px забирав
     чверть ширини, і «Костянтин Санюта» ламався на три рядки по слову. */
  /* Специфічність тут не примха: вище стоїть `.voice-panel .voice-key{flex-basis:84px}`
     для вузького ВІКНА компʼютера, і в колонковому рядку ці 84px стають ВИСОТОЮ підпису —
     на екрані це чотири порожні дірки між «Клієнт» і прізвищем. Тому селектор той самий. */
  .voice-row{flex-direction:column; align-items:stretch; gap:1px; padding:5px 0;}
  .voice-panel .voice-key, .voice-chat .voice-key{flex:0 0 auto; flex-basis:auto; font-size:12.5px;}
  .voice-panel .voice-val{font-size:15.5px;}
  .voice-panel .voice-was, .voice-chat .voice-was{flex-basis:auto; margin-left:0; font-size:13px;}
  .voice-card{padding:12px 13px;}
  .voice-card-head{flex-wrap:wrap; gap:7px; margin-bottom:8px;}

  /* Вибір кандидата — повноширинна кнопка з переносом тексту: у ряд вони не вміщаються, а
     обрізане прізвище в списку однофамільців — це рівно та помилка, від якої весь цей
     список і зроблено. */
  .voice-choose, .voice-dup, .voice-pick{flex-direction:column; align-items:stretch; gap:7px;}
  .voice-choose .btn, .voice-dup .btn{width:100%; justify-content:flex-start; text-align:left;
    white-space:normal; min-height:44px; line-height:1.4; font-size:14.5px;}
  .voice-pick-box{min-width:0;}
  .voice-pick-box input{font-size:17px; padding:10px 11px;}

  /* Список дій прокручується разом зі сторінкою, а не всередині власного віконця: два
     вкладені скроли на телефоні означають, що палець гортає не те, що людина дивиться. */
  .voice-plan-list{max-height:none; overflow:visible;}

  /* Головна дія прилипає до низу. План буває на двадцять дій — «Підтвердити» не має тікати
     за межу прокрутки, але й згортати заради цього нічого не можна. */
  .voice-actions--confirm{
    position:sticky; bottom:calc(-12px - env(safe-area-inset-bottom, 0px)); z-index:3;
    margin:6px -14px calc(-12px - env(safe-area-inset-bottom, 0px));
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background:var(--paper); border-top:1px solid var(--sky-line); gap:8px;
  }
  .voice-panel .voice-actions--confirm .btn{flex:1 1 40%; min-height:46px; justify-content:center;
    font-size:15px; white-space:normal;}
  /* Гроші й на телефоні — окремий, добре видимий крок. */
  .voice-money-ok{font-size:14.5px;}
  .voice-panel .voice-money-ok .btn{width:100%; margin-top:8px; min-height:44px; justify-content:center;}
  .voice-heard{font-size:16px;}
  /* iOS масштабує сторінку, якщо в полі шрифт менший за 16px — і панель поїде вбік. */
  .voice-textline input{font-size:17px;}
}

/* ─── Розділ «Асистент»: та сама панель, показана переписко ю ──────────────────────────
   Поведінка як у месенджера, вигляд — як у GARNE: ті самі токени, ті самі рамки, жодного
   чужого зеленого. Своїх кольорів тут немає ЖОДНОГО. */
.assistant-page .voice-root{display:block;}
.voice-panel.voice-chat{
  position:static; width:auto; max-width:none; inset:auto; z-index:auto;
  height:calc(100vh - 210px); min-height:420px; max-height:none;
  display:flex; flex-direction:column; overflow:hidden; animation:none;
  padding:16px 18px;
}
.voice-chat .vchat-feed{flex:1; min-height:0; overflow-y:auto; padding:14px; background:linear-gradient(180deg,#f7f9fd 0%,#f2f6fc 100%);
  display:flex; flex-direction:column; gap:10px;}
.vchat-empty{font-size:14.5px; line-height:1.65; color:var(--slate-2); background:var(--sky);
  border-radius:var(--radius-md); padding:14px 16px;}
.vchat-empty i{font-style:normal; color:var(--ink); font-weight:600;}

.vchat-msg.is-me{margin-left:auto; flex-direction:row-reverse;}
.vchat-ava{flex:0 0 auto; line-height:0;}

/* ОДИН ДИЗАЙН НА ВСІ ПЕРЕПИСКИ. Власник побачив чат Elizabeth і чат Monica поруч і сказав:
   «ты какой-то дизайн один можешь сделать?.. как у Моники». Він має рацію: два різні
   вигляди тієї самої речі читаються як два різні застосунки, склеєні докупи. Тому нижче
   .vchat-* повторює .aiteam-* один в один — бульбашка з хвостиком, ті самі кеглі, той самий
   час у рядку. Розмітка лишилась своя (Elizabeth має картку підтвердження, якої в Monica
   немає), а вигляд один. */
.vchat-msg{display:flex; align-items:flex-end; gap:8px; max-width:100%;}
.vchat-ava img{width:32px; height:32px; border-radius:50%; object-fit:cover; display:block;}
.vchat-text{font-size:15px; line-height:1.55; white-space:pre-line; word-break:break-word;}
.vchat-time{font-size:11px; margin-top:2px; opacity:.55; text-align:right; font-variant-numeric:tabular-nums;}
.vchat-msg.is-me .vchat-time{opacity:.75;}
.vchat-bubble{position:relative; max-width:min(640px,74%); background:#fff;
  border:1px solid var(--sky-line); border-radius:16px 16px 16px 5px;
  padding:10px 14px 8px; box-shadow:0 1px 2px rgba(20,32,60,.05); min-width:0;}
.vchat-msg.is-me .vchat-bubble{background:var(--visa); border-color:transparent; color:#fff; border-radius:16px 16px 5px 16px;}



/* Живий хід (почуте, питання, план, звіт) стоїть під стрічкою й НЕ згортається в бульбашку:
   у ньому кнопки, якими людина підтверджує запис у справу. У чаті легко втратити пильність
   — саме тому картка лишається карткою, а не дрібним рядком у бульбашці. */
.voice-chat .voice-plan, .voice-chat .voice-report, .voice-chat .voice-question,
.voice-chat .voice-heard, .voice-chat .voice-recording{flex:0 0 auto;}
.voice-chat .voice-plan-list{max-height:min(38vh, 360px);}
/* Репліка з питанням. Ширша за звичайну бульбашку, бо в ній кнопки вибору — але це все ще
   бульбашка Elizabeth, а не картка: картка в цій розмові означає «зараз буде запис у справу»,
   і плутати ці два стани не можна. */
.vchat-ask{max-width:92%; flex:0 0 auto; margin-top:2px; align-items:flex-start;}
.vchat-ask .vchat-bubble{background:var(--paper); border-color:var(--visa);}
.vchat-q{font-weight:700; color:var(--ink); margin-top:3px;}
.vchat-picks{display:flex; flex-wrap:wrap; gap:7px; margin-top:9px;}
.vchat-picks .btn{font-size:14px; white-space:normal; text-align:left;}
.vchat-picks em{font-style:normal; color:var(--slate-2); font-weight:500;}
.vchat-hint{font-size:12.5px; color:var(--slate-2); margin-top:8px;}
/* Один в один із .aiteam-composer. Власник поклав два чати поруч і побачив різницю:
   у Elizabeth поле було прижате до країв (padding 12px 0 0), у Monica — з полями 12/14.
   Різниця дрібна на словах і помітна оком одразу, бо це той самий елемент у сусідніх
   вікнах. Тому тут не «схоже», а ті самі числа: 12/14, зазор 8, вирівнювання по центру. */
.vchat-composer{display:flex; align-items:center; gap:8px; margin-top:0;
  padding:12px 14px; border-top:1px solid var(--sky-line); background:var(--card,#fff);}
.vchat-mic{flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--sky-line);
  background:var(--paper); color:var(--visa); cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center;}
.vchat-mic svg{width:20px; height:20px;}
.vchat-mic.is-live{background:var(--stamp); border-color:var(--stamp); color:#fff;
  animation:voicerec 1.1s ease-in-out infinite;}
.vchat-input{flex:1; min-width:0; display:flex; gap:9px;}
.vchat-input input{flex:1; min-width:0; font-size:15px; padding:12px 16px; border-radius:22px; background:var(--sky);}
.vchat-input .btn{min-height:44px;}
/* Обіцянка про вимкнений мікрофон стоїть під рядком вводу — там, де мікрофон, а не
   посеред розмови. Тихо, але видно: це не примітка, це те, на що людина покладається. */
.vchat-promise{font-size:12.5px; color:var(--slate-2); padding:10px 2px 0;}

@media (max-width:720px){
  /* Розділ на телефоні — теж на весь екран, але всередині сторінки: шапка CRM лишається
     видною, бо саме нею він звідси й виходить. */
  /* Розділ — не плаваючий аркуш: правила вище (position:fixed, inset:0, анімація) писані
     для панелі з шапки, і на сторінці вони накрили б собою всю CRM. Скидаємо їх поіменно.

     І окремо про висоту: на компʼютері стрічка має власну прокрутку всередині рамки, а на
     телефоні — ні. Рамка фіксованої висоти з власним скролом означає, що і стрічка, і план
     підтвердження діляться сотнею пікселів, і не видно ані першого, ані другого. Тут
     гортається сама сторінка, а внизу лишається прилиплим лише рядок вводу. */
  .voice-panel.voice-chat{
    position:static; inset:auto; animation:none; display:block; overflow:visible;
    height:auto; min-height:0; max-height:none;
    padding:0; border:0; border-radius:0;
  }
  /* Шапка розділу не прилипає: сторінка гортається цілком, і напівзрізаний рядок з
     обличчям Elizabeth угорі читався як поломка. Назва розділу стоїть вище, у page-head. */
  .voice-panel.voice-chat .voice-panel-head{position:static; margin:0 0 10px; padding:0 0 8px;}
  .voice-chat .vchat-feed{flex:none; overflow:visible; max-height:none; padding:0 0 8px;}
  .voice-chat .voice-plan-list{max-height:none; overflow:visible;}
  .vchat-composer{position:sticky; bottom:0; z-index:4; background:var(--paper);
    margin:12px -12px 0; padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));}
  .voice-chat .voice-panel-head{position:static; padding:0;}
  .vchat-msg{max-width:92%;}
  .vchat-ask{max-width:100%;}
  .vchat-picks .btn{width:100%; justify-content:flex-start; min-height:44px;}
  .vchat-input input{font-size:17px;}
  /* У розділі мікрофон живе в рядку вводу — плаваюча кнопка тут була б другою такою самою. */
  .assistant-page .voice-fab{display:none;}
  /* Прилиплий рядок підтвердження всередині розділу прилипає до низу СТРІЧКИ, а не екрана. */
  .voice-chat .voice-actions--confirm{position:static; margin:6px 0 0; padding:10px 0 0;}
}






/* ── Договір як нерухомі сторінки ────────────────────────────────────────────────────────
   Геометрія самого аркуша й блоків усередині нього живе НЕ тут, а в PAGED_CSS
   (js/contracts/paged.js) — рівно тому, що ті самі правила мусить застосувати ще й Edge
   Function, збираючи підписаний файл, а до styles.css вона не дістає. Тут лише «обгортка»:
   тіні, номери сторінок, ручки рамок — усе, чого в підписаному файлі бути не повинно. */
.cpaged-scroll{background:var(--sky)}
.cpaged-slot{position:relative;margin:0 auto 22px}
.cpaged-scale{position:absolute;left:0;top:0}
.cpaged-scale .cpage{box-shadow:0 10px 30px #1c315b1f;outline:1px solid #dce5f1}
.cpaged-num{position:absolute;left:0;bottom:-17px;font:11px Manrope,Arial,sans-serif;color:#7c8aa0}
/* Рамка Наталії — суцільна, поле клієнта — пунктирне: у договорі з чотирма рамками роль
   мусить читатись із самої рамки, а не з підпису над нею. Невибрані пригашені, щоб на
   аркуші було видно, з якою саме людина зараз працює. */
.cpaged-frame{border:2px solid #2f6feb;border-radius:10px;background:#2f6feb0f;cursor:move;touch-action:none;opacity:.62;transition:opacity .12s,box-shadow .12s}
.cpaged-frame.is-active{opacity:1;border-width:3px;box-shadow:0 0 0 4px #2f6feb2e}
.cpaged-frame.is-client{border-style:dashed;background:#f5f8ff99}
.cpaged-frame-tag{position:absolute;left:0;top:-19px;font:11px/1 Manrope,Arial,sans-serif;color:#2f6feb;background:#fff;padding:2px 6px;border-radius:6px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cpaged-corner{position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;padding:0;border:2px solid #fff;border-radius:5px;background:#2f6feb;cursor:nwse-resize;touch-action:none;opacity:0}
.cpaged-frame.is-active .cpaged-corner{opacity:1}

/* ─── Вікно розстановки підписів ────────────────────────────────────────────────────────
   Власник про попередню версію: «такі маленькі букви, цифри збоку, якісь кнопочки… може,
   договір трохи менший, щоб він менше місця займав, а більше місця займали ці всі».
   Тому тут документ віддає ширину панелі (360px замість 254), керування має нормальний
   кегль і набірні поля замість повзунків, а підписних місць може бути скільки треба —
   вони живуть списком, а не двома кнопками-перемикачами. */
.cplace{width:min(1280px,100%)}
.cplace-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--sky-line);background:var(--paper)}
.cplace-head-title b{font:700 16px/1.25 var(--font-display);color:var(--ink)}
.cplace-head-title p{margin:4px 0 0;max-width:62ch}
.cplace-head-actions{display:flex;align-items:center;gap:10px}
.cplace-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:0}
.cplace-doc{display:flex;flex-direction:column;min-width:0;min-height:0}
.cplace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border-bottom:1px solid var(--sky-line);background:var(--paper)}
.cplace-toolbar-label{font:600 12.5px/1 var(--font-body);color:var(--slate)}
.cplace-zoom{display:flex;align-items:center;gap:4px}
.cplace-zoom-btn{width:28px;height:28px;padding:0;border:1px solid var(--sky-line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink-soft);font:600 15px/1 var(--font-body);cursor:pointer}
.cplace-zoom-btn:hover:not(:disabled){background:var(--sky);border-color:var(--visa)}
.cplace-zoom-btn:disabled{opacity:.4;cursor:default}
.cplace-zoom-value{min-width:44px;text-align:center;font:600 12.5px/1 var(--font-mono);color:var(--ink-soft)}
.cplace-scroll{flex:1;min-height:0;padding:20px 16px}

.cplace-side{display:flex;flex-direction:column;gap:12px;padding:14px;border-left:1px solid var(--sky-line);background:var(--sky);overflow:auto}
.cplace-block{background:var(--paper);border:1px solid var(--sky-line);border-radius:var(--radius-md);padding:12px 13px;display:flex;flex-direction:column;gap:10px}
.cplace-block-quiet{background:transparent;border-style:dashed}
.cplace-block-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cplace-block-head h4{margin:0;font:700 13.5px/1.2 var(--font-display);color:var(--ink)}
.cplace-count{font:600 11.5px/1 var(--font-mono);color:var(--slate-2)}

.cplace-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.cplace-list li{display:flex;align-items:center;gap:9px;padding:8px 9px;border:1px solid var(--sky-line);border-radius:var(--radius-sm);background:var(--paper);cursor:pointer}
.cplace-list li:hover{border-color:color-mix(in srgb,var(--visa) 40%,transparent);background:var(--sky)}
.cplace-list li.is-active{border-color:var(--visa);background:var(--visa-soft);box-shadow:inset 3px 0 0 var(--visa)}
.cplace-dot{flex:none;width:9px;height:9px;border-radius:3px;background:var(--visa)}
.cplace-list li.is-client .cplace-dot{background:transparent;border:2px dashed var(--visa)}
.cplace-list-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cplace-list-text b{font:700 12.5px/1.25 var(--font-body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cplace-list-text span{font:500 11.5px/1.2 var(--font-mono);color:var(--slate)}
.cplace-del{flex:none;width:24px;height:24px;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--slate-2);font-size:14.5px;cursor:pointer}
.cplace-del:hover{background:var(--stamp-soft);color:var(--stamp)}
.cplace-add{display:grid;grid-template-columns:1fr 1fr;gap:6px}

.cplace-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cplace-field{display:flex;flex-direction:column;gap:4px}
.cplace-field>span{font:600 11.5px/1.2 var(--font-body);color:var(--slate)}
.cplace-field input{width:100%;font-size:15px}
.cplace-field input[type=number]{font-family:var(--font-mono)}
.cplace-field-label{font:600 11.5px/1.2 var(--font-body);color:var(--slate)}
.cplace-nudge{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cplace-pad{display:grid;grid-template-areas:'. up .' 'left . right' '. down .';gap:3px}
.cplace-pad-btn{width:28px;height:28px;padding:0;border:1px solid var(--sky-line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink-soft);font:600 13px/1 var(--font-body);cursor:pointer}
.cplace-pad-btn:hover{background:var(--visa-soft);border-color:var(--visa);color:var(--visa-ink)}
.cplace-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cplace-note{margin:0;font-size:12.5px;line-height:1.45}

/* Вузький екран: панель їде під документ і стає горизонтальною смугою карток. Розстановка
   з телефона — не основний сценарій (це робота менеджера за столом), але вікно не має
   ставати непридатним, якщо його там відкрили. */
@media(max-width:960px){
  .cplace-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.1fr) minmax(0,1fr)}
  .cplace-side{border-left:0;border-top:1px solid var(--sky-line)}
  .cplace-head{padding:12px 14px}
  .cplace-head-actions{width:100%}
  .cplace-head-actions .btn{flex:1}
}

/* Сторінка підпису */
.contract-sign-pages{box-sizing:border-box;max-width:980px;margin:0 auto 18px;padding:0 8px}
.contract-sign-pages .cpage{box-shadow:0 14px 42px #1f335516;outline:1px solid #dce5f1}
.csign-manager{pointer-events:none}
.csign-client{border:3px dashed #2f6feb;border-radius:12px;background:#f5f8ff;display:flex;align-items:center;justify-content:center}
.csign-client-hint{font:12px Manrope,Arial,sans-serif;color:#4a6ea8;text-align:center;padding:0 8px}
.csign-client.is-filled{border-style:solid;background:transparent}
.contract-sign-padbar{box-sizing:border-box;max-width:980px;margin:0 auto 18px;padding:16px;background:#f5f8ff;border:3px solid #2f6feb;border-radius:15px;box-shadow:0 0 0 5px #2f6feb18}
/* Кілька підписних місць — кілька окремих полотен, одне під одним, кожне зі своїм підписом.
   Заповнене гасне до спокійного зеленого: на телефоні список довгий, і людина мусить бачити
   згори, де вона вже розписалась, не гортаючи назад. */
.contract-sign-padbar-lead{margin:0 0 12px;font:600 13.5px/1.45 Manrope,Arial,sans-serif;color:#1f3d76}
.contract-sign-pad{max-width:640px;margin:0 auto}
.contract-sign-pad+.contract-sign-pad{margin-top:16px;padding-top:16px;border-top:2px dashed #b9cdf2}
.contract-sign-pad.is-filled .contract-sign-field-head b{color:#1B8A5A}
.contract-sign-pad.is-filled .contract-sign-field-head b::after{content:' ✓'}
/* Полотно тут задає висоту пропорцією рамки, а не clamp() з --sign-h: воно живе поза
   аркушем і мусить лишатись однаково великим і на 1440, і на 390 — саме заради цього його
   й винесли з документа. */
.contract-sign-padbar-canvas{display:block;height:auto;width:auto;min-height:150px;max-height:230px;max-width:100%;margin:0 auto}
@media(max-width:700px){
  .contract-sign-pages{padding:0 8px}
  .contract-sign-padbar{margin-left:8px;margin-right:8px;padding:12px}
  .contract-sign-padbar-canvas{min-height:170px}
}

/* Бриф (окрема повноекранна анкета) НЕ входить у цю розкладку: у нього своя вузька колонка
   й липка шапка, і ширші поля робили б із нього панель, що висить посеред екрана. Повертаємо
   йому рівно ті відступи, які він має сьогодні на телефоні. */
/* ===== Сезонне оздоблення логотипа (js/season-badge.js) =====
   Кілька днів на початку кожної пори року логотип «одягається». Шар лежить поверх квадрата,
   але з pointer-events:none — логотип клікабельний, і прикраса не має перехоплювати клік.
   Блок стоїть ВИЩЕ секції компʼютерної розкладки клієнтського дашборда: тест на телефонну
   версію ріже styles.css від її початку й вимагає, щоб нижче були лише правила тієї секції. */
.rail-logo{ position:relative; overflow:visible; }
.season-layer{
  position:absolute; inset:-9px -13px -7px -11px;
  pointer-events:none; z-index:2;
}
.season-layer .season-deco{ width:100%; height:100%; display:block; overflow:visible; }
.season-deco path, .season-deco circle{ vector-effect:non-scaling-stroke; }
.s-snowcap{ fill:#fff; }
.s-flake{ fill:none; stroke:#bcd6f5; stroke-width:1.5; stroke-linecap:round; }
.s-dot{ fill:#d3e6fb; }
.s-grass{ fill:#5cae4a; }
.s-leaf{ fill:#7cc95f; }
.s-sun{ fill:#f7c948; stroke:#f7c948; stroke-width:1.6; stroke-linecap:round; }
.s-palm{ fill:#3fa66b; }
.s-shell{ fill:#f0a6a0; }
.s-sand{ stroke:#efdcc0; stroke-width:2.5; stroke-linecap:round; }
.s-maple{ fill:#e2622b; }
.s-leaf-a{ fill:#f0913a; }
.s-leaf-b{ fill:#e8b24a; }
.s-leaf-c{ fill:#d9552a; }

/* Monica на Дашборді керівника. Розміри й форма взяті з .pw-susan-head (переписка в
   петиції) навмисно: дві помічниці на двох екранах мають виглядати як дві помічниці однієї
   команди, а не як два різні віджети. Блок стоїть ТУТ, а не в кінці файла: усе, що
   дописане після наступного рядка, потрапляє в секцію .sv-desktop і ламає розкладку
   мобільної версії — на цьому вже двічі обпікались. */
/* Кнопка композера AI Team. ОДНА кругла кнопка праворуч, як у месенджері: порожнє поле —
   мікрофон, зʼявився текст — стрілка «надіслати». Клас називається .aiteam-send навмисно,
   бо кнопка одна; попередній .aiteam-mic лишився без пари після перейменування, і кнопка
   поїхала на прод голою — приплюснутий синій прямокутник із чорною іконкою. Тому тут же
   явно задані і колір іконки (currentColor від кнопки), і форма, і розмір: кнопка не має
   права залежати від того, що їй дістанеться від сусідів. */
.aiteam-send{flex:none; width:44px; height:44px; border-radius:50%; border:0; padding:0;
  background:var(--visa,#A85F1F); color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease, transform .12s ease;}
.aiteam-send svg{width:19px; height:19px; stroke:currentColor; fill:none;}
.aiteam-send:hover{background:var(--visa-deep,#1737b0);}
.aiteam-send:active{transform:scale(.94);}
.aiteam-send:disabled{opacity:.45; cursor:default;}
/* Слухає — червона й пульсує, як усюди в CRM. */
.aiteam-send.is-live{background:var(--stamp,#B7791F); animation:aiteam-mic-pulse 1.3s ease-in-out infinite;}
@keyframes aiteam-mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(183,121,31,.45);}50%{box-shadow:0 0 0 7px rgba(183,121,31,0);}}

/* Лічильник до подачі на дашборді клієнта — блоками, як на годиннику.
   Власник: «сделай у клиента счетчик красивее, как часы». Було одним рядком, у якому
   бігали секунди й тягали за собою всю решту тексту. Тут кожен блок має власну ширину
   і моноширинні цифри (tabular-nums), тож рядок стоїть нерухомо, а міняється тільки
   число. Кольори ті самі, що були в chip: синій — спокійно, помаранчевий — горить. */
.deadline-clock{display:inline-flex; align-items:center; gap:8px; padding:7px 12px;
  border-radius:999px; background:var(--visa-soft); color:var(--visa);
  font-family:var(--font-body); white-space:nowrap;}
.deadline-clock.is-urgent{background:var(--stamp-soft); color:var(--stamp);}
.deadline-clock-lead{display:inline-flex; line-height:0;}
.deadline-clock-lead svg{width:15px; height:15px;}
.deadline-clock-word{font-size:12.5px; font-weight:600; opacity:.85;}
.deadline-clock-unit{display:inline-flex; align-items:baseline; gap:2px;}
.deadline-clock-unit b{font-size:16px; font-weight:800; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;}
.deadline-clock-unit i{font-style:normal; font-size:11.5px; font-weight:600; opacity:.7;}
@media (max-width:640px){
  .deadline-clock{gap:6px; padding:6px 10px;}
  .deadline-clock-unit b{font-size:15px;}
}

/* ── Вітальний екран написання петиції ─────────────────────────────────────────────
   ДВІ ПОМИЛКИ, ВИПРАВЛЕНІ ПІСЛЯ ПЕРШОГО ПОКАЗУ:
   1. Екран був порожній знизу: коли я прибрав усе, що стояло під вітальним блоком, той
      лишився притиснутим до верху, а нижче зяяло пів-екрана нічого. У макеті блок стоїть
      посередині — тому центрування по висоті.
   2. Картка розсипалась: знімок обрізало низом, а синя кнопка правої колонки вилазила
      з-під нього. Причина — min-height картки разом з align-self:end у знімка. Тепер
      висота задана явно, знімок притиснутий абсолютно й обмежений цією висотою, а права
      колонка має власний відступ, тож перекрити її нічим. */
.pl-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,700px); gap:48px;
  align-items:center; padding:0 8px; max-width:1360px; margin:0 auto;
  min-height:calc(100vh - 190px);}
.pl-hero-text h2{font-family:var(--font-display); font-size:46px; line-height:1.12;
  letter-spacing:-.01em; margin:0 0 18px; color:var(--ink);}
.pl-hero-text p{font-size:16px; line-height:1.6; color:var(--slate); margin:0 0 28px; max-width:520px;}
.pl-hero-btn{display:inline-flex; align-items:center; gap:10px; font-size:16px;
  padding:15px 28px; border-radius:12px;}
.pl-hero-btn svg{width:18px; height:18px;}
.pl-pick{max-width:520px;}
.pl-pick input{width:100%; font-size:16px; padding:15px 18px; border-radius:12px;
  border:1px solid var(--sky-line); background:var(--paper);}
.pl-pick input:focus{outline:none; border-color:var(--visa);}
.pl-pick-list{margin-top:10px; display:flex; flex-direction:column; gap:4px;
  max-height:280px; overflow-y:auto;}
.pl-pick-list button{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  text-align:left; background:var(--paper); border:1px solid var(--sky-line); border-radius:10px;
  padding:12px 14px; cursor:pointer; font-family:var(--font-body);}
.pl-pick-list button:hover{border-color:var(--visa); background:var(--sky);}
.pl-pick-list b{font-size:15px; display:flex; align-items:center; gap:8px;}
.pl-pick-list span{font-size:12.5px; color:var(--slate);}
/* Картка. Тло — мʼякий градієнт, ПОМІТНО інший за тло сторінки: інакше картка не читається
   як картка, і портрет висить вирізаним прямокутником посеред порожнечі (саме це власник і
   побачив: «то, что она обрезана… это красиво?»).

   Шов по краю знімка ми більше не намагаємось прибрати підбором кольору — це програшна
   гра: тло фотографії однорідне лише на око, а по краях у неї свій відтінок і своє
   заокруглення. Замість цього маска: знімок РОЗЧИНЯЄТЬСЯ в картці по лівому краю й унизу.
   Тоді байдуже, який під ним колір — межі не видно взагалі. */
.pl-hero-card{position:relative; height:640px; overflow:hidden; border-radius:22px;
  background:linear-gradient(135deg,#EEF3FC 0%,#E4EBF8 100%);}
.pl-hero-face{position:absolute; left:-6px; bottom:0; height:104%; width:auto; display:block;
  /* Було дві прямі маски (зліва й знизу), зведені mask-composite:intersect — рівно в
     нижньому лівому куті, де вони обидві напівпрозорі одночасно, той перетин у Safari
     (-webkit-mask-composite:source-in — інша, не стандартна семантика) малював не плавне
     розчинення, а темний/білий клин: власник побачив це саме як «дірку». Тепер одна кругла
     маска з кутка — жодного компонування кількох масок, тож немає що перетинати криво. */
  -webkit-mask-image:radial-gradient(circle at 0% 100%, transparent 0, transparent 34px, #000 130px);
  mask-image:radial-gradient(circle at 0% 100%, transparent 0, transparent 34px, #000 130px);}
.pl-hero-side{position:relative; z-index:1; margin-left:44%; padding:44px 30px 44px 10px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.pl-hero-side>b{font-family:var(--font-display); font-size:30px; line-height:1.1; color:var(--ink);}
.pl-hero-side>i{font-style:normal; font-size:15px; font-weight:600; color:var(--visa);}
.pl-hero-online{display:inline-flex; align-items:center; gap:7px; font-size:13.5px;
  color:var(--slate); margin-bottom:12px;}
/* .online-dot по всій CRM позиціонується абсолютно — вона задумана як крапка ПОВЕРХ
   аватара. Тут вона стоїть у рядку тексту, і глобальне правило відносило її на середину
   картки: власник бачив зелену цятку, що висить сама по собі. Повертаємо в потік. */
.pl-hero-online .online-dot, .fw-hero-online .online-dot{position:static; width:8px; height:8px;
  border:0; flex:none;}
.pl-hero-bubble{background:#fff; border-radius:14px; padding:16px 18px; font-size:15px;
  line-height:1.55; color:var(--ink); box-shadow:0 2px 10px rgba(20,32,60,.07); margin-bottom:16px;}
@media (max-width:1080px){
  .pl-hero{grid-template-columns:1fr; gap:28px; padding:28px 4px; min-height:0;}
  .pl-hero-text h2{font-size:34px;}
  .pl-hero-card{height:auto;}
  .pl-hero-face{display:none;}
  .pl-hero-side{margin-left:0; padding:22px;}
}

/* Коли робоче місце згорнули, бічна панель мусить повернутись. Прапорець живе класом на
   документі, а не змінною Vue: сторінка робочого місця й каркас CRM — різні компоненти,
   і передавати між ними стан через localStorage не можна (computed від нього не
   перераховується, і кнопка «Згорнути Project» ставала кнопкою в нікуди — вийти з розділу
   було нічим). Клас же діє миттєво й однаково в обох. */
body.pw-collapsed .rail{display:flex !important;}

/* Смужка, за яку тягнуть межу переписки з Susan. Власник: «надо что бы можно было
   расширять зону переписки» — на широкому екрані 376 px під довгий текст петиції замало,
   а на вужчому та сама колонка з'їдає центр. Ширину тримає змінна --pw-susan-w на самій
   сітці: її ж читає й панель уточнень, інакше панель накривала б колонку не по межі.
   Смужка вужча за палець навмисно тонка, тож зона захоплення розширена невидимими
   полями (::before), а не самою рамкою — інакше межа малювалась би товстою лінією. */
.pw-resizer{position:absolute; left:0; top:0; bottom:0; width:5px; cursor:col-resize;
  z-index:3; background:transparent; border:0; padding:0;}
.pw-resizer::before{content:''; position:absolute; left:-3px; right:-3px; top:0; bottom:0;}
.pw-resizer::after{content:''; position:absolute; left:2px; top:0; bottom:0; width:1px;
  background:transparent; transition:background .12s;}
.pw-resizer:hover::after, .pw-resizer:focus-visible::after, .pw-resizer.is-dragging::after{background:var(--visa);}
.pw-resizer:focus-visible{outline:none;}
.petition-workspace-grid.is-resizing{user-select:none; cursor:col-resize;}
.pw-susan{position:relative;}

.voice-more{background:none; border:0; padding:2px 0; margin-top:2px; cursor:pointer;
  font:600 11px/1.4 var(--font-body); color:var(--visa); text-align:left;}
.voice-more:hover{text-decoration:underline;}

/* Уся картка Monica — кнопка. Власник: «нажимаешь на нее открывается поп ап и туда можно
   или написать или голосом», і додав: «везде по роботам давай такую логику». Тобто обличчя
   помічниці всюди означає одне й те саме — натисни, і відкриється розмова. Мікрофон при
   цьому НЕ вмикається сам: він вмикається вже всередині панелі (та сама обіцянка, що й у
   Elizabeth у шапці). */
.leader-monica{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  cursor:pointer; border:1px solid var(--sky-line); font-family:var(--font-body);}
.leader-monica:hover{border-color:var(--visa);}
.leader-monica:focus-visible{outline:2px solid var(--visa); outline-offset:2px;}
.leader-monica-ava{position:relative; width:44px; height:44px; flex:none;}
.leader-monica-ava img{width:44px; height:44px; border-radius:50%; object-fit:cover; display:block;}
.leader-monica-ava .online-dot{position:absolute; right:-2px; bottom:-2px;}
.leader-monica-text{display:flex; flex-direction:column; gap:3px; min-width:0;}
.leader-monica-text b{font-size:14.5px; line-height:1.3;}
.leader-monica-text span{font-size:12.5px; line-height:1.5; color:var(--slate);}
/* Кнопки праворуч від тексту, а не під ним: картка Monica — один рядок заввишки, і
   переносити дію на другий рядок означало б зробити її вдвічі вищою заради двох кнопок. */
.leader-monica{flex-wrap:wrap;}
.leader-monica-text{margin-right:auto;}
.leader-monica-mic{display:inline-flex; align-items:center; gap:6px;}
.leader-monica-mic svg{width:14px; height:14px;}
.leader-monica-skills{display:block; margin:-8px 0 16px 2px; background:none; border:0;
  padding:4px 0; cursor:pointer; font:600 13px/1.4 var(--font-body); color:var(--visa);}
.leader-monica-skills:hover{text-decoration:underline;}

/* ── Робоче місце петиції: три зони, матеріали клієнта, мова, джерела ──────────────────
   ВАЖЛИВО про місце: усе нижче стоїть ПЕРЕД секцією .sv-desktop навмисно. Правила, дописані
   в кінець файлу, потрапляють усередину тієї секції й ламають тест мобільної розкладки.

   ЗОНИ. Власник просив пропорції, а не пікселі: ліва 28-32%, центр 40-45%, права 28-32%.
   Але відсоток без обмежень на 1280 px дає ліву колонку в 358 px і центр, у якому юридичний
   абзац ламається на шість рядків. Тому clamp(): відсоток усередині, а по краях — розумні
   межі в px. Кожна колонка має власну прокрутку (min-height:0 + overflow-y:auto нижче) —
   без min-height:0 grid-елемент не стискається і прокручується вся сторінка одразу. */
.petition-workspace-grid{grid-template-columns:clamp(248px, 29%, 400px) minmax(0,1fr) var(--pw-susan-w, clamp(300px, 29%, 440px));}
.petition-workspace-grid.is-left-collapsed{grid-template-columns:58px minmax(0,1fr) var(--pw-susan-w, clamp(300px, 29%, 440px));}
/* «Згорнути Project» — сторінка перестає вибивати себе на всю ширину вікна й знову виглядає
   як решта екранів CRM. Це не вихід із fullscreen: це інше бажання й окрема кнопка. */
.petition-workspace-page.is-collapsed{margin:-4px 0 0; padding:0; height:auto; min-height:0;}
.petition-workspace-page.is-collapsed .petition-workspace-grid{height:70vh; min-height:520px;}
.petition-workspace-page.is-fullscreen{height:100vh;}
.pw-view-btn{white-space:nowrap;}
/* На 1280 px у верхній смузі стало на дві кнопки більше, і «Завантажити DOCX» виїжджала за
   правий край екрана. Дозволяємо смузі переносити рядок — кнопка експорту не має права
   ховатись за краєм: нею закінчують роботу. */
.petition-workspace-top{flex-wrap:wrap; row-gap:8px;}
.petition-workspace-top-actions{flex-wrap:wrap; justify-content:flex-end;}

/* ── Ліва колонка: матеріали клієнта ── */
.pw-left-ident{padding:2px 8px 10px; border-bottom:1px solid var(--sky-line); margin-bottom:8px;}
.pw-left-ident b{display:block; font-size:calc(var(--pw-fs) + 1px); line-height:1.3;}
.pw-left-ident small{display:block; margin-top:2px; font-size:calc(var(--pw-fs) - 2.5px); color:var(--slate);}
.pw-mat-tools{display:flex; flex-direction:column; gap:7px; padding:0 4px 9px;}
.pw-mat-search{display:flex; align-items:center; gap:6px; padding:0 8px; border:1px solid var(--sky-line);
  border-radius:9px; background:var(--paper);}
.pw-mat-search svg{width:14px; height:14px; color:var(--slate); flex:none;}
.pw-mat-search input{flex:1; min-width:0; border:0; background:transparent; outline:none; padding:7px 0;
  font-size:calc(var(--pw-fs) - 1.5px); font-family:var(--font-body); color:var(--ink);}
.pw-mat-filters{display:flex; flex-wrap:wrap; gap:5px;}
.pw-mat-filter{border:1px solid var(--sky-line); background:var(--paper); color:var(--slate); cursor:pointer;
  border-radius:99px; padding:3px 9px; font-size:calc(var(--pw-fs) - 3px); font-weight:700;
  font-family:var(--font-body); display:inline-flex; align-items:center; gap:4px;}
.pw-mat-filter i{font-style:normal; opacity:.65;}
.pw-mat-filter.active{background:var(--visa-soft); border-color:var(--visa); color:var(--visa-ink);}
/* Обрані файли видно ПОСТІЙНО — це пряма вимога власника, тож смуга липне до верху колонки
   і не їде разом зі списком. */
.pw-mat-selected{position:sticky; top:0; z-index:3; background:var(--visa-soft); border:1px solid var(--visa);
  border-radius:10px; padding:8px; margin:0 4px 9px;}
.pw-mat-selected-head{display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:calc(var(--pw-fs) - 2px);}
.pw-mat-selected-list{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; max-height:132px; overflow-y:auto;}
.pw-mat-selected-list .link-chip{font-size:calc(var(--pw-fs) - 3.5px); max-width:100%; overflow:hidden; text-overflow:ellipsis;}
.petition-workspace-page .pw-mat-selected-list .icon-btn{width:16px; height:16px; background:transparent;}
.petition-workspace-page .pw-mat-selected-list .icon-btn svg{width:10px; height:10px;}
.pw-mat-dup{margin:6px 0 0; font-size:calc(var(--pw-fs) - 3px); line-height:1.5; color:var(--amber);}
.pw-crit-block{margin-bottom:2px;}
.pw-crit-row{display:flex; align-items:stretch; gap:0; padding:0;}
.pw-crit-twisty{flex:none; width:22px; border:0; background:transparent; color:var(--slate); cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;}
.pw-crit-twisty svg{width:13px; height:13px;}
.pw-crit-twisty.is-empty{cursor:default;}
.pw-crit-main{flex:1; min-width:0; display:flex; align-items:center; gap:8px; border:0; background:transparent;
  cursor:pointer; padding:7px 8px 7px 0; text-align:left; font-family:var(--font-body); color:inherit;}
.pw-crit-files{display:block; margin-top:2px; font-size:calc(var(--pw-fs) - 3.5px); color:var(--slate);}
.pw-crit-open{margin:2px 0 8px 10px; padding:8px; border-left:2px solid var(--sky-line); background:color-mix(in srgb,var(--sky) 40%,var(--paper)); border-radius:0 10px 10px 0;}
.pw-crit-open-head{display:flex; align-items:center; gap:9px; margin-bottom:7px;}
.pw-crit-open-head .crit-folder{width:34px; height:29px;}
.pw-crit-open-head .crit-folder-svg svg{width:34px; height:29px;}
/* Той самий значок папки, що в .pw-crit-open-head і в картці клієнта (.crit-folder), — тут
   у розмірі рядка списку, щоб критерій зліва виглядав папкою одразу, не лише розгорнутим. */
.pw-crit-icon{width:22px; height:18px;}
.pw-crit-icon .crit-folder-svg svg{width:22px; height:18px;}
.pw-crit-open-head b{display:block; font-size:calc(var(--pw-fs) - 1.5px); line-height:1.3;}
.pw-crit-open-head small{display:block; font-size:calc(var(--pw-fs) - 3.5px); color:var(--slate);}
.pw-crit-open-head .petition-linkish{margin-left:auto; flex:none;}
.pw-mat-folder{display:flex; align-items:center; gap:7px; width:100%; border:0; background:transparent;
  cursor:pointer; padding:5px 8px; border-radius:7px; text-align:left; font-family:var(--font-body); color:inherit;}
.pw-mat-folder:hover{background:var(--paper);}
.pw-mat-folder.is-root{padding:8px; border:1px solid var(--sky-line); background:var(--paper); margin-bottom:2px;}
.pw-mat-folder-ic{flex:none; display:flex;}
.pw-mat-folder-ic svg{width:20px; height:17px; display:block;}
.pw-mat-folder b{flex:1; min-width:0; font-size:calc(var(--pw-fs) - 1.5px); font-weight:700; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.pw-mat-folder small{flex:none; font-size:calc(var(--pw-fs) - 1.5px); color:var(--slate);}
.pw-mat-file{display:flex; align-items:center; gap:7px; padding:4px 8px; border-radius:7px;}
.pw-mat-file:hover{background:var(--paper);}
.pw-mat-file input[type=checkbox]{flex:none; accent-color:var(--visa); width:14px; height:14px; cursor:pointer;}
.pw-mat-file-body{flex:1; min-width:0; border:0; background:transparent; cursor:pointer; text-align:left;
  padding:0; font-family:var(--font-body); color:inherit;}
/* Назву файлу видно у два рядки, а не «E-MRS Yo…»: у вузькій колонці обрізання одним рядком
   з'їдало саме ту частину назви, за якою файли й розрізняють («…award letter» проти
   «…jury composition»). */
.pw-mat-file-body b{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  font-size:calc(var(--pw-fs) - 2px); font-weight:600; line-height:1.35; overflow:hidden; overflow-wrap:anywhere;}
.pw-mat-file-body small{display:block; font-size:calc(var(--pw-fs) - 2px); color:var(--slate); line-height:1.4;}
.pw-mat-file .pill{flex:none; font-size:calc(var(--pw-fs) - 2.5px);}

/* ── Центр: мова, стан аналізу, джерела ── */
.pw-center-controls{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.pw-lang{display:inline-flex; border:1px solid var(--sky-line); border-radius:8px; overflow:hidden;}
.pw-lang-btn{border:0; background:var(--paper); color:var(--slate); cursor:pointer; padding:5px 10px;
  font-size:calc(var(--pw-fs) - 2.5px); font-weight:800; font-family:var(--font-body);}
.pw-lang-btn.active{background:var(--visa); color:#fff;}
.pw-center-fact{font-size:calc(var(--pw-fs) - 2.5px); color:var(--slate); white-space:nowrap;}
.pw-center-fact b{color:var(--ink);}
.pw-center-state{padding:3px 9px; border-radius:99px; background:var(--sky); color:var(--ink-soft);}
/* Вкладок стало сім, і на 1280 px останню («Фінальний документ») обрізало рівно посередині
   слова. Дозволяємо переносити рядок: сім підписів у два ряди читаються, обрізаний — ні. */
/* flex:none у базовому правилі означає «не стискатись», і сім вкладок просто вилазили за
   край шапки. Віддаємо їм цілий рядок: підпис, обрізаний посередині слова, гірший за два ряди. */
.petition-workspace-center-head .petition-workspace-tabs{flex:1 1 100%; flex-wrap:wrap; row-gap:2px; min-width:0;}
.pw-sources-toggle{display:inline-flex; align-items:center; gap:6px; font-size:calc(var(--pw-fs) - 2px);
  color:var(--slate); cursor:pointer; margin-left:auto;}
.pw-sources-toggle input{accent-color:var(--visa);}
/* Evidence audit не виконано — кнопка, а не сухий текст помилки: власник саме на цьому й
   зупинився, бо з тексту не було зрозуміло, що робити далі. */
.pw-audit-gate{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:13px 15px; margin-bottom:12px;
  border:1px solid var(--sky-line); border-radius:12px; background:var(--sky);}
.pw-audit-gate b{display:block; font-size:calc(var(--pw-fs) + 0.5px);}
.pw-audit-gate p{margin:4px 0 0; font-size:calc(var(--pw-fs) - 2px); line-height:1.6; color:var(--ink-soft); max-width:56ch;}
.pw-audit-gate .btn{flex:none; margin-left:auto;}
.pw-lang-note{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; padding:7px 11px;
  border:1px dashed var(--sky-line); border-radius:10px; font-size:calc(var(--pw-fs) - 2.5px); color:var(--slate);}
.pw-lang-note .btn{margin-left:auto;}
.pw-para-sources{display:flex; flex-wrap:wrap; gap:5px; margin:-4px 0 12px;}
.pw-para-sources .link-chip{font-size:calc(var(--pw-fs) - 4px);}
.pw-para-sources .link-chip.is-missing{opacity:.6; text-decoration:line-through;}
.pw-para-nosource{font-size:calc(var(--pw-fs) - 4px); color:var(--amber); font-weight:700;}
.pw-doc-actions{flex-wrap:wrap;}

/* ── Права колонка: Susan ── */
/* Картка помічниці — кнопка: натиснув на обличчя, відкрилась розмова. Та сама логіка, що в
   «Команді» й на дашборді керівника; аватар так само круглий. */
button.pw-susan-head{width:100%; text-align:left; border:0; border-bottom:1px solid var(--sky-line);
  background:transparent; cursor:pointer; font-family:var(--font-body); color:inherit;}
.pw-susan-ava img{border-radius:50%; object-fit:cover;}
.pw-susan-ctx{display:block; margin-top:2px; font-size:calc(var(--pw-fs) - 3.5px); color:var(--slate);
  font-style:normal; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* max-height тут БУЛО, і саме воно різало останній ряд овалів: десять команд не вміщались у
   164 px, а прокрутку всередині смуги над розмовою ніхто не шукає — власник бачив обрізаний
   ряд і вважав його поламаною версткою. Команд лишилось чотири (див. susanCommands у
   js/pages/PetitionWorkspace.js), тож обмеження висоти більше не потрібне: смуга займає рівно
   стільки, скільки їй треба, і нічого не ховає. */
.pw-susan-commands{flex:none; display:flex; flex-wrap:wrap; gap:5px; padding:9px 12px;
  border-bottom:1px solid var(--sky-line);}
.pw-susan-commands .pw-susan-chip{font-size:calc(var(--pw-fs) - 3.5px);}
.pw-susan-commands .pw-susan-chip i{font-style:normal; opacity:.7;}

/* 1280 px — робочий ноутбук більшості команди. Тут відсоток уже давав би завузький центр,
   тож нижні межі clamp беруть гору й ліва колонка перестає стискатись далі. */
@media (max-width:1400px){
  .petition-workspace-grid{grid-template-columns:clamp(232px, 27%, 320px) minmax(0,1fr) var(--pw-susan-w, clamp(292px, 27%, 360px));}
  .petition-workspace-grid.is-left-collapsed{grid-template-columns:58px minmax(0,1fr) var(--pw-susan-w, clamp(292px, 27%, 360px));}
}
@media (max-width:1080px){
  /* Колонок немає — вкладки. Ліпкі смуги всередині колонки на вкладці не потрібні. */
  .pw-mat-selected{position:static;}
  .pw-susan-commands{max-height:none;}
  /* Одна колонка на всю ширину. Правило вище — .petition-workspace-grid із clamp() — стоїть
     ПІСЛЯ вкладкової медіа-секції (рядок ~703) і мовчки перебивало її «grid-template-columns:1fr»:
     специфічність однакова, виграє те, що нижче у файлі. Наслідок було видно на планшеті:
     видима вкладка діставала центральний трек із трьох, тобто ~90 px, і попередження
     «це поле система заповнити НЕ може» друкувалось по одній літері в рядок. */
  .petition-workspace-grid,
  .petition-workspace-grid.is-left-collapsed{grid-template-columns:1fr;}
}


/* ── AI Team: месенджер із трьома помічницями ────────────────────────────────────────────
   Власник просив саме месенджер, а не адмінку: «я открываю нужной переписку». Тому дві
   панелі на широкому екрані й один екран за раз на телефоні — без жодного третього стану.
   Стилі стоять ДО секції .sv-desktop навмисно: усе, що дописане в самий кінець цього файла,
   потрапляє всередину неї і ламає тест мобільної розкладки. */
.aiteam-head{margin-bottom:14px;}
.aiteam-split{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:stretch;
  height:calc(100vh - 210px);min-height:420px;}
.aiteam-list{background:var(--card,#fff);border:1px solid var(--sky-line,#e4e9f2);border-radius:14px;
  overflow-y:auto;padding:8px;}
.aiteam-row{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;
  border:0;border-radius:10px;padding:10px;cursor:pointer;}
.aiteam-row:hover{background:var(--sky,#f2f6fc);}
.aiteam-row.is-active{background:var(--sky,#f2f6fc);box-shadow:inset 2px 0 0 var(--visa,#A85F1F);}
/* +20% на прохання власника — «увеличь их фото в интерфейсе, будет красивее» (01.09). */
.aiteam-ava{width:55px;height:55px;flex-shrink:0;position:relative;}
.aiteam-ava img{width:55px;height:55px;border-radius:50%;object-fit:cover;}
.aiteam-ava-glyph{display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:50%;background:var(--sky,#f2f6fc);color:var(--slate,#66748c);}
.aiteam-ava-glyph svg{width:24px;height:24px;}
.aiteam-row-text{min-width:0;flex:1;display:block;}
.aiteam-row-text b{display:flex;gap:6px;align-items:baseline;font-size:16px;}
.aiteam-row-text b i{font-style:normal;font-size:12.5px;color:var(--slate,#66748c);font-weight:600;}
.aiteam-row-text em{display:block;font-style:normal;font-size:14.5px;color:var(--slate,#66748c);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.aiteam-chat{display:flex;flex-direction:column;min-width:0;background:var(--card,#fff);
  border:1px solid var(--sky-line,#e4e9f2);border-radius:14px;overflow:hidden;}
.aiteam-chat-head{display:flex;gap:10px;align-items:center;padding:10px 14px;
  border-bottom:1px solid var(--sky-line,#e4e9f2);}
.aiteam-chat-name b{display:block;font-size:17px;}
.aiteam-chat-name i{font-style:normal;font-size:14px;color:var(--slate,#66748c);}
.aiteam-back{display:none;}
.aiteam-feed{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;}
.aiteam-embed{flex:1;overflow-y:auto;}
/* Усередині розділу її вже названо шапкою чату — друге імʼя й другий аватар поруч
   читаються як дві різні Elizabeth. Рядок «у картці: …» лишається: він каже, на кого
   підуть команди без названого клієнта, і сховати його означало б сховати наслідок. */
.aiteam-embed .voice-brand{display:none;}
.aiteam-embed{display:flex;flex-direction:column;}
.aiteam-embed .voice-panel{border:0;box-shadow:none;padding:0;display:flex;flex-direction:column;
  flex:1;min-height:0;max-height:none;}
/* Рядок вводу тримається низу панелі, а не їде за стрічкою: на телефоні поле, яке треба
   догортати, читається як «тут нема куди писати». */
.aiteam-embed .vchat-feed{flex:1;min-height:0;}
.aiteam-embed .voice-root{display:flex;flex-direction:column;flex:1;min-height:0;}


/* ── Переписка: розміри й вигляд ────────────────────────────────────────────────────
   Власник відкрив розділ і сказав: «мелко выглядит, увеличь… визуал как в телеграме»,
   і показав знімок свого чату. Тому:

   * кегль реплік 15px, а не 13 — це текст, який читають, а не підпис під кнопкою.
     У месенджері репліка — головний елемент екрана, і дрібний шрифт тут читається як
     службовий рядок, а не як розмова;
   * бульбашка має ХВОСТИК і несиметричні кути (з боку свого автора кут майже прямий) —
     саме за цим оком упізнається месенджер, а не за кольором;
   * час стоїть У РЯДКУ з текстом, праворуч унизу, а не окремим рядком під ним: так він
     не додає бульбашці зайвої висоти;
   * поле вводу високе (44px) і кругле — під палець на телефоні.

   Свій колір ми лишили свій, синій: копіювати зелений Telegram було б чужою шкурою на
   нашій системі, а впізнаваність дає ФОРМА, а не колір. */
.aiteam-msg{display:flex;gap:8px;align-items:flex-end;max-width:100%;}
.aiteam-msg.is-me{justify-content:flex-end;}
.aiteam-msg-ava{width:38px;height:38px;flex-shrink:0;}
.aiteam-msg-ava img{width:38px;height:38px;border-radius:50%;object-fit:cover;}
.aiteam-bubble{position:relative;max-width:min(640px,74%);background:#fff;
  border:1px solid var(--sky-line,#e4e9f2);
  border-radius:16px 16px 16px 5px; padding:10px 14px 8px;
  font-size:16px; line-height:1.55; box-shadow:0 1px 2px rgba(20,32,60,.05);}
.aiteam-msg.is-me .aiteam-bubble{background:var(--visa,#A85F1F);color:#fff;border-color:transparent;
  border-radius:16px 16px 5px 16px;}
/* Відмова по правах — спокійна репліка, а не червона помилка: власник просив саме так. */
.aiteam-bubble.is-denied{background:#fff8e6;border-color:#f0e2bd;box-shadow:inset 2px 0 0 var(--stamp,#B7791F);}
.aiteam-text{white-space:pre-wrap;word-break:break-word;}
.aiteam-time{font-size:12.5px;opacity:.55;margin-top:2px;text-align:right;
  font-variant-numeric:tabular-nums;}
.aiteam-msg.is-me .aiteam-time{opacity:.75;}
.aiteam-picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
/* ── Підпис під реплікою агента ────────────────────────────────────────────────────────
   Джерела й рівень упевненості. Власник просив обидва окремими пунктами, але просив і
   «не змушуй мене читати багато» — тому це дрібний службовий рядок під реплікою, а не
   плашка: він завжди на місці й ніколи не заважає читати саму відповідь.
   Стоїть ТУТ, а не в кінці файла: усе, дописане в кінець styles.css, потрапляє в секцію
   .sv-desktop (див. попередження вище на рядку 5426). */
.aiteam-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;
  font-size:12px;line-height:1.4;opacity:.72;}
.aiteam-src{flex:1 1 160px;min-width:0;}
.aiteam-conf{flex:none;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:600;
  border:1px solid transparent;white-space:nowrap;}
/* Три стани, три кольори — і жодних відсотків: відсоток упевненості читався б як точність
   вимірювання, якою він не є. Це наслідок того, чи відповіли інструменти. */
.aiteam-conf.is-high{background:#e8f6ed;border-color:#bfe3cd;color:#1f6b3b;}
.aiteam-conf.is-medium{background:#fdf3e2;border-color:#f0dcb4;color:#8a5b12;}
.aiteam-conf.is-low{background:#fdeceb;border-color:#f4c9c6;color:#8f2f28;}
/* Попередження про неповні дані — НАШИМИ словами. Не тривожна плашка на всю ширину:
   власник уже просив прибрати такі (див. .aiteam-note), і був правий — щоденна жовта
   смуга перестає читатись на третій день. */
.aiteam-warn{margin-top:8px;font-size:12.5px;line-height:1.45;color:#8a5b12;}
/* Підготовлена дія. Виглядає як картка підтвердження Elizabeth навмисно: це той самий
   жест і той самий сенс — CRM нічого не записала, чекає на людину. */
.aiteam-proposal{margin-top:10px;border:1px solid var(--sky-line,#e4e9f2);border-radius:12px;
  padding:10px 12px;background:#fbfcfe;}
.aiteam-proposal-head{font-weight:600;font-size:13px;margin-bottom:6px;}
.aiteam-proposal-row{display:flex;gap:8px;font-size:12.5px;line-height:1.5;}
.aiteam-proposal-row i{flex:none;opacity:.6;font-style:normal;min-width:88px;}
.aiteam-proposal-row b{font-weight:600;min-width:0;overflow-wrap:anywhere;}
/* Перелік знайдених значень бланка (propose_form_values) — назва графи жирним, значення
   поруч, джерело дрібним сірим під ним. Той самий читабельний список рядків, що й
   .fw-manual-row у FormsWorkspace, — а не сирий JSON-масив одним рядком, який власник
   побачив і назвав «по-дебільному виглядить». */
.aiteam-proposal-values{margin-top:8px;display:flex;flex-direction:column;}
.aiteam-proposal-value-row{padding:6px 0;border-top:1px solid var(--sky-line,#e4e9f2);}
.aiteam-proposal-value-row:first-child{border-top:none;}
.aiteam-proposal-value-top{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12.5px;line-height:1.5;}
.aiteam-proposal-value-top b{font-weight:600;flex:0 0 auto;min-width:0;overflow-wrap:anywhere;}
.aiteam-proposal-value-top span{flex:1 1 120px;min-width:0;overflow-wrap:anywhere;}
.aiteam-proposal-value-src{font-size:11px;opacity:.6;margin-top:2px;overflow-wrap:anywhere;}
/* «Пише…» — три крапки, що по черзі підстрибують, у бульбашці помічниці. Форма та сама,
   що й у звичайної репліки: людина бачить, що відповідь зʼявиться саме тут, а не десь
   унизу. Рух навмисно неквапливий (1.2 с на цикл): смикані крапки читаються як тривога. */
.aiteam-typing{display:inline-flex; align-items:center; gap:5px; margin-left:40px;
  background:#fff; border:1px solid var(--sky-line,#e4e9f2); border-radius:16px 16px 16px 5px;
  padding:14px 16px; box-shadow:0 1px 2px rgba(20,32,60,.05); width:fit-content;}
.aiteam-typing i{width:7px; height:7px; border-radius:50%; background:var(--slate-2,#8a97ad);
  display:inline-block; animation:aiteam-dot 1.2s ease-in-out infinite;}
.aiteam-typing i:nth-child(2){animation-delay:.18s;}
.aiteam-typing i:nth-child(3){animation-delay:.36s;}
@keyframes aiteam-dot{0%,60%,100%{transform:translateY(0); opacity:.45;}30%{transform:translateY(-5px); opacity:1;}}
.aiteam-note{font-size:12.5px;color:var(--slate-2,#8a97ad);padding:2px 4px 6px;}
/* Меню над реплікою (довге натискання / правий клік). Форма взята з месенджера навмисно:
   картка з великими рядками під палець, небезпечна дія — окремим кольором і останньою,
   щоб її не натиснули з розгону. Затемнення ловить натискання будь-де. */
.aiteam-menu-veil{position:fixed;inset:0;z-index:60;}
.aiteam-menu{position:fixed;z-index:61;min-width:180px;background:var(--card,#fff);
  border:1px solid var(--sky-line,#e4e9f2);border-radius:14px;padding:6px;
  box-shadow:0 12px 32px rgba(20,32,60,.18);display:flex;flex-direction:column;
  transform-origin:top left; animation:aiteam-menu-in .16s cubic-bezier(.2,.9,.3,1.2);}
/* Меню не просто зʼявляється, а «виростає» з-під пальця — той самий рух, що в месенджері.
   Крива з перельотом (останнє число > 1) дає ледь помітний відскок: саме він читається
   як «жваво», а не як «повільно вимальовується». */
@keyframes aiteam-menu-in{
  from{opacity:0; transform:scale(.86) translateY(-4px);}
  to{opacity:1; transform:scale(1) translateY(0);}
}
/* Репліка, яку тримають, ледь піднімається — людина бачить, ЯКУ саме вона обрала.
   Без цього на телефоні меню зʼявляється ніби саме по собі. */
.aiteam-msg.is-held .aiteam-bubble{transform:scale(1.03); transition:transform .16s ease;
  box-shadow:0 8px 20px rgba(20,32,60,.14);}
.aiteam-bubble{transition:transform .16s ease, box-shadow .16s ease;}
/* Зникнення: репліка складається й тане, а не пропадає стрибком — інакше сусідні
   підстрибують угору, і око губить місце, де воно читало. */
.aiteam-msg{transition:opacity .18s ease, transform .18s ease, max-height .22s ease, margin .22s ease;}
.aiteam-msg.is-going{opacity:0; transform:scale(.9) translateX(24px); max-height:0; margin:0; overflow:hidden;}
.aiteam-menu button{border:0;background:none;text-align:left;padding:11px 14px;
  border-radius:10px;font:600 14.5px/1.2 var(--font-body);color:var(--ink);cursor:pointer;}
.aiteam-menu button:hover{background:var(--sky,#f2f6fc);}
.aiteam-menu button.is-danger{color:var(--stamp,#B7791F);}
/* Довге натискання не має виділяти текст — інакше замість меню людина отримує синє
   виділення й системну панель «Скопіювати», як у власника на знімку. */
.aiteam-msg{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
.aiteam-composer input,.aiteam-composer{-webkit-user-select:auto;user-select:auto;}
/* Тло стрічки — ледь помітний відтінок, щоб білі бульбашки на ньому читались як картки.
   Без візерунка: візерунок Telegram — це його впізнаваність, а не наша. */
.aiteam-feed{background:linear-gradient(180deg,#f7f9fd 0%,#f2f6fc 100%);}
.aiteam-composer{display:flex;gap:8px;padding:12px 14px;align-items:center;
  border-top:1px solid var(--sky-line,#e4e9f2);background:var(--card,#fff);}
.aiteam-composer input{flex:1;min-width:0;border:1px solid var(--sky-line,#e4e9f2);
  border-radius:22px;padding:12px 16px;font-size:16px;font-family:inherit;background:var(--sky,#f7f9fd);}
.aiteam-composer input:focus{outline:none;border-color:var(--visa,#A85F1F);background:#fff;}
.aiteam-composer .btn{border-radius:22px;padding:11px 16px;}
.aiteam-composer .btn svg{width:18px;height:18px;}
.aiteam-mic{width:42px;height:42px;}
.aiteam-mic svg{width:18px;height:18px;}
/* Передача іншій помічниці в панелі Elizabeth. Не помилка й не звіт — окрема спокійна плашка. */
.voice-handoff{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--sky,#f2f6fc);
  font-size:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;}

@media (max-width:720px){
  /* Один екран за раз: список → тап → чат, назад стрілкою в шапці. Дві панелі на 390px
     перетворюються на дві нечитабельні колонки. */
  .aiteam-split{grid-template-columns:1fr;height:calc(100vh - 180px);}
  .aiteam-split .aiteam-chat{display:none;}
  .aiteam-split.is-chat .aiteam-list{display:none;}
  .aiteam-split.is-chat .aiteam-chat{display:flex;}
  .aiteam-back{display:inline-flex;}
  .aiteam-bubble{max-width:86%;}
}

/* ── «Claude» у CRM (03.09) — окремий чат, тредова бічна панель + сама розмова.
   Бульбашки й скрол переписки — ті самі .aiteam-bubble/.aiteam-feed, що й AITeam.js: одна
   мова візуалу для всіх помічників, а не другий набір стилів чату поруч. ──────────────── */
/* grid-template-rows:minmax(0,1fr) + min-height:0 на колонці розмов — та сама пастка, що й
   нижче для .claude-main: без них єдиний рядок сітки росте під довгий список розмов, і
   сторінка тягнеться вниз, а чат стає порожнім екраном (власник, 13.09: «тут отображение
   плохое если много разговоров»). Список має скролитись усередині своєї колонки. */
.claude-page{display:grid;grid-template-columns:260px 1fr;grid-template-rows:minmax(0,1fr);gap:16px;height:calc(100vh - 140px);}
.claude-empty-mark{width:56px;height:56px;margin:0 auto 14px;opacity:.4;color:var(--visa);}
.claude-empty-mark svg{width:100%;height:100%;}
.claude-sidebar{display:flex;flex-direction:column;min-width:0;min-height:0;}
.claude-thread-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.claude-thread-item{display:flex;align-items:center;gap:6px;padding:9px 10px;border-radius:9px;cursor:pointer;}
.claude-thread-item:hover{background:var(--sky);}
.claude-thread-item.active{background:var(--visa-soft);}
.claude-thread-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;}
.claude-thread-acts{display:none;gap:2px;flex-shrink:0;}
.claude-thread-item:hover .claude-thread-acts{display:flex;}
.claude-thread-rename{width:100%;border:1px solid var(--visa);border-radius:7px;padding:4px 7px;font-size:13.5px;}
/* min-height:0 на всіх трьох рівнях — без цього flex-контейнер росте під висоту вмісту
   замість того, щоб скролитись усередині, і поле вводу «тікає» вниз під довгою відповіддю
   (власник, 04.09: «оно вниз уходит»). Класична пастка flexbox: дефолтний min-height:auto
   не дає дочірньому overflow:auto спрацювати. */
.claude-main{display:flex;flex-direction:column;min-width:0;min-height:0;}
.claude-main .aiteam-chat{flex:1;min-height:0;}
.claude-main .aiteam-feed{min-height:0;}
.claude-sources{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.claude-card{margin-top:10px;padding:10px 12px;border:1.5px solid var(--sky-line);border-radius:10px;background:var(--sky);}
.claude-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
.claude-card .aiteam-picks{margin-top:8px;}
.claude-work-banner{padding:8px 14px;margin-bottom:8px;border-radius:10px;background:var(--visa-soft);color:var(--visa-ink);font-size:13px;}
.claude-msg-acts{display:flex;justify-content:flex-end;margin-top:4px;}
/* Заборона виділяти текст (.aiteam-msg вище) приїхала сюди з AITeam.js, де довге натискання
   відкриває меню репліки. У чаті з Claude такого меню немає, а текст із нього переносять у
   петиції — власник, 22.09: «что бі можно біло копировать текст». Тому тут повертаємо. */
.claude-page .aiteam-msg{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text;}
/* На синій бульбашці .icon-btn має бліде тло var(--sky) — на синьому воно читається як
   білий кружечок, а сама іконка в ньому губиться. Тут кнопка — лише біла іконка. */
.aiteam-msg.is-me .claude-msg-acts .icon-btn{color:#fff;background:transparent;}
.aiteam-msg.is-me .claude-msg-acts .icon-btn:hover{background:rgba(255,255,255,.22);}
.claude-main .aiteam-chat{position:relative;}
.cc-jump{position:absolute;right:18px;bottom:104px;z-index:4;width:36px;height:36px;
  border-radius:50%;border:1px solid var(--sky-line,#e4e9f2);background:var(--card,#fff);
  color:var(--ink-soft);font:600 17px/1 var(--font-body);cursor:pointer;
  box-shadow:0 4px 14px rgba(20,32,60,.16);}
.cc-jump:hover{background:var(--sky,#f2f6fc);}
/* Розмова, у якій Claude пише зараз, — пульсуюча крапка в списку зліва. */
.cc-run-dot{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;
  background:var(--visa,#A85F1F);vertical-align:middle;animation:cc-run-pulse 1.1s ease-in-out infinite;}
@keyframes cc-run-pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
.claude-attachment-chip{display:inline-flex;align-items:center;gap:6px;margin:0 14px 8px;padding:5px 10px;background:var(--sky);border-radius:99px;font-size:12.5px;color:var(--ink-soft);width:fit-content;}
.claude-attachment-chip svg{width:14px;height:14px;}
/* Мініатюра скріна — власник, 06.09: «визуал слабый и предосмотр тоже мелкий» (у 20px пігулці
   зображення губилось і виглядало як звичайна іконка файлу). Для картинок — окремий, помітно
   більший вигляд: квадратна мініатюра з тінню й товщою обвідкою, а не крихітна крапка в пігулці. */
.claude-attachment-chip.has-image{padding:6px 12px 6px 6px;gap:9px;border-radius:14px;border:1.5px solid color-mix(in srgb, var(--slate-2) 55%, transparent);font-size:13px;}
.claude-attachment-chip .chip-thumb{width:38px;height:38px;border-radius:9px;object-fit:cover;flex-shrink:0;box-shadow:0 1px 4px rgba(20,32,60,.22);}
.claude-composer{display:flex;gap:8px;align-items:flex-end;padding:12px 14px;border-top:1px solid var(--sky-line);}
.claude-composer textarea{flex:1;resize:none;border:1px solid var(--sky-line);border-radius:10px;padding:9px 12px;font:inherit;max-height:160px;}
.claude-composer-hint{padding:0 14px 10px;}
/* Виразніший вигляд — власник, 04.09: «дизайн более выразительый... очень бледный»,
   «боле четкие линии», «текст темнее». Контури та бульбашки в чаті самі по собі дуже світлі
   (успадковано з aiteam-*, розраховане на екран без окремого «характеру» помічника) — тут
   робимо їх темнішими й товщими САМЕ для сторінки Claude, не для AITeam.js: та сторінка й
   такий запит про неї не було. */
/* Трохи світліше за перший варіант (власник, 04.09: «чуть светлее линии пож») — той самий
   колір, просто розведений з прозорістю, а не окрема, друга темна плитка кольорів. */
.claude-page .aiteam-bubble{border-width:1.5px;border-color:color-mix(in srgb, var(--slate-2) 55%, transparent);box-shadow:0 1px 3px rgba(20,32,60,.09);}
.claude-page .aiteam-chat{border-width:1.5px;border-color:color-mix(in srgb, var(--slate-2) 55%, transparent);}
.claude-page .claude-composer textarea{border-width:1.5px;border-color:color-mix(in srgb, var(--slate-2) 55%, transparent);color:var(--ink);}
.claude-page .claude-composer textarea::placeholder{color:var(--slate);opacity:1;}
.claude-page .claude-thread-rename{border-width:1.5px;}
@media (max-width:720px){
  .claude-page{grid-template-columns:1fr;height:auto;}
  .claude-sidebar{max-height:180px;}
}

/* ── Вітальний екран розділу «Заповнення форм» ─────────────────────────────────────────
   За макетом власника, і НЕ через .pl-hero: там портрет у картці ліворуч, тут праворуч, а
   текст ліворуч від нього. Дзеркалити чужу сітку означало б, що правка того екрана мовчки
   поїде в цей.
   Три рішення повторені з .pl-hero свідомо, бо вони вже коштували однієї правки:
     * висота картки задана явно — інакше вона їде за висотою тексту;
     * портрет притиснутий абсолютно до низу й правого краю — він СТОЇТЬ у картці, а не
       висить посередині;
     * тло картки — рівно колір тла самого знімка (#F3F6FB). Варто взяти градієнт трохи
       темніший, і по краях фотографії проступає світлий прямокутник. */
.fw-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,700px); gap:48px;
  align-items:center; padding:56px 8px 40px; max-width:1360px; margin:0 auto;}
/* Заголовок на 30% більший за проханням власника: 46 → 60px. Це головна фраза
   екрана, і на широкому моніторі вона мусить читатись першою, а не нарівні з підписом. */
.fw-hero-text h2{font-family:var(--font-display); font-size:60px; line-height:1.08;
  letter-spacing:-.01em; margin:0 0 18px; color:var(--ink);}
.fw-hero-text p{font-size:16px; line-height:1.6; color:var(--slate); margin:0 0 28px; max-width:520px;}
.fw-hero-btn{display:inline-flex; align-items:center; gap:10px; font-size:16px;
  padding:15px 28px; border-radius:12px;}
.fw-hero-btn svg{width:18px; height:18px;}
/* Фотографія офісу за спиною в Mike. Знімок власник приніс сам — панорамний кабінет із
   прапорами й видом на воду. Прямо під портрет його класти не можна: кадр яскравий, і
   білий заголовок картки на ньому губиться. Тому зверху лежить біла заслінка — щільна
   ліворуч, де текст, і майже прозора праворуч, де стоїть сам Mike. Так само власник просив
   робити фон карток профілю: «с наложением белого прозрачного фона, чтобы всё читалось». */
.fw-hero-card{position:relative; height:640px; background:#F2F9FD; border-radius:22px; overflow:hidden;}
.fw-hero-card::before{
  content:''; position:absolute; inset:0; z-index:0;
  /* Кадр беремо ЛІВОЮ частиною знімка — там вікна, місто й вода. Праву брати не можна:
     у високій картці вона обрізається рівно по прапору, і той лізе просто за підпис Mike. */
  background:url('assets/forms-office.jpg') 14% center/cover no-repeat;
}
.fw-hero-card::after{
  content:''; position:absolute; inset:0; z-index:0;
  /* Вуаль лише під ТЕКСТОМ, ліворуч, і зникає до середини картки. Спершу вона йшла до
     самого правого краю й лягала поверх портрета — Mike вицвітав разом із фоном, і власник
     сказав прямо: «прозрачность ужасная, сделай обычно». Фотографія має читатись як
     фотографія; притлумлювати її треба рівно там, де на ній лежать літери. */
  background:linear-gradient(100deg,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.78) 28%,
    rgba(255,255,255,.30) 48%,
    rgba(255,255,255,0) 64%);
}
/* Праворуч, на відміну від картки Susan. */
/* Ліва межа знімка розчиняється в тлі картки. Портрет Mike — фотографія з власним
   (розмитим офісним) тлом, а не вирізана постать: тло картки збігається з ним лише в кутку,
   тож без маски по лівому краю проступає рівна вертикальна лінія й фото читається як
   наклеєне. */
/* Портрет стоїть НАД вуаллю. Без z-index він опинявся під нею (обидва — absolute у тому
   самому шарі), і біла заслінка гасила саме те, заради чого картка існує. */
.fw-hero-face{z-index:1; position:absolute; right:0; bottom:0; height:100%; width:auto; display:block;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 16%);
  mask-image:linear-gradient(to right, transparent 0, #000 16%);}
.fw-hero-side{position:relative; z-index:1; margin-right:46%; padding:34px 8px 34px 26px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.fw-hero-side>b{font-family:var(--font-display); font-size:30px; line-height:1.1; color:var(--ink);}
.fw-hero-side>i{font-style:normal; font-size:15px; font-weight:600; color:var(--visa);}
.fw-hero-online{display:inline-flex; align-items:center; gap:7px; font-size:13.5px;
  color:var(--slate); margin-bottom:12px;}
/* Крапка «онлайн» у решті CRM висить у кутку аватара, тож у .online-dot стоїть
   position:absolute. Тут аватара немає — крапка стоїть у рядку, і без цього рядка вона
   відлітала в куток картки, за кілька сотень пікселів від слова Online. */
.fw-hero-online .online-dot{position:static; width:8px; height:8px; flex:none;}
.fw-hero-bubble{background:#fff; border-radius:14px; padding:16px 18px; font-size:15px;
  line-height:1.55; color:var(--ink); box-shadow:0 2px 10px rgba(20,32,60,.07); margin-bottom:16px;}
@media (max-width:1080px){
  /* На телефоні пів-екрана обличчя витісняє сам заголовок, заради якого екран і зроблено. */
  .fw-hero{grid-template-columns:1fr; gap:28px; padding:28px 4px; min-height:0;}
  .fw-hero-text h2{font-size:38px;}
  .fw-hero-card{height:auto;}
  .fw-hero-face{display:none;}
  .fw-hero-side{margin-right:0; padding:22px;}
}

/* ── Розділ «Заповнення форм» (js/pages/FormsWorkspace.js) ─────────────────────────────
   Розкладка тут не своя: сітка, колонки, тягнута межа й вкладки для вузького екрана взяті з
   робочого місця петиції (.petition-workspace-grid, .pw-susan, .pw-resizer) — власник просив
   «так же». Нижче лише те, чого в петиції немає: список бланків, поля бланка й головне —
   попередження «це поле система заповнити не може».

   ПАСТКА: цей блок стоїть ПЕРЕД .share-screen.sv-desktop навмисно. Усе, дописане в кінець
   файлу, потрапляє в секцію .sv-desktop і ламає тест мобільної розкладки. */

/* Ліва колонка: дані клієнта, що підуть у форму. Порожнє поле мусить бути видно з іншого
   кінця кімнати — саме воно і є робота, яка лишилась. */
.fw-left-note{padding:0 8px;}
.fw-fields{display:flex; flex-direction:column; gap:2px;}
.fw-field{padding:7px 8px; border-radius:8px; border:1px solid transparent;}
.fw-field b{display:block; font-size:calc(var(--pw-fs) - 2px); line-height:1.35; color:var(--slate);
  font-weight:700;}
.fw-field span{display:block; font-size:calc(var(--pw-fs) - 0.5px); line-height:1.4; color:var(--ink);
  margin-top:2px; overflow-wrap:anywhere;}
.fw-field em{display:block; font-style:normal; font-size:calc(var(--pw-fs) - 2px); line-height:1.4;
  color:var(--slate); margin-top:2px;}
.fw-field i{display:block; font-style:normal; font-size:calc(var(--pw-fs) - 3.5px); color:var(--slate-2);
  margin-top:3px; letter-spacing:.04em;}
/* Звідки взялося значення. Не прикраса: «з анкети клієнта» і «виправлено вручну» — це
   різна міра довіри до того самого поля, і перед подачею до USCIS різницю треба бачити. */
.fw-field u{display:block; text-decoration:none; font-size:calc(var(--pw-fs) - 3.5px);
  color:var(--visa); margin-top:2px;}
.fw-field.is-empty{background:var(--sky); border-color:var(--sky-line);}

/* Центр. Прокрутка своя, як у решти колонок: три колонки гортаються незалежно. */
.fw-center-scroll{flex:1; min-height:0; overflow-y:auto; padding:16px 20px 24px;}

/* Список бланків. */
.fw-forms{display:flex; flex-direction:column; gap:10px;}
.fw-form{display:flex; align-items:flex-start; gap:11px; padding:12px 14px; background:var(--paper);
  border:1px solid var(--sky-line); border-radius:12px; flex-wrap:wrap;}
.fw-form-ic{width:20px; color:var(--visa); flex:none; padding-top:2px;}
/* flex-basis 260px, а не 0: інакше при трьох кнопках праворуч тіло рядка стискалось до
   вузької колонки, і попередження «вручну» — найважливіше в рядку — читалось у три слова
   на рядок. Не вміщається все в один рядок — кнопки переносяться, а не давлять текст. */
.fw-form-body{flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:3px;}
.fw-form-body>b{font-size:var(--pw-fs); line-height:1.35;}
.fw-form-actions{display:flex; flex-wrap:wrap; gap:6px; flex:none; align-items:flex-start; margin-left:auto;}

/* ГОЛОВНЕ НА ЕКРАНІ: що система заповнити НЕ може. Це не примітка — без цих рядків форма
   їде в USCIS із порожніми графами, і дізнаються про це через місяці листом. Тому окремий
   блок кольором тривоги, а не дрібний підпис під рядком. */
.fw-manual{margin-bottom:16px; padding:12px 14px; border-radius:12px; background:var(--sky);
  border:1px solid var(--sky-line);}
.fw-manual-head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.fw-manual-head>span{width:18px; color:var(--slate); flex:none;}
.fw-manual-head b{font-size:calc(var(--pw-fs) + 0.5px); line-height:1.3; color:var(--ink);}
.fw-manual-row{display:flex; gap:10px; padding:5px 0; border-top:1px solid var(--sky-line);
  font-size:calc(var(--pw-fs) - 1px); line-height:1.5;}
.fw-manual-row b{flex:0 0 150px; color:var(--ink);}
.fw-manual-row span{flex:1; min-width:0; color:var(--ink-soft); overflow-wrap:anywhere;}
/* Особи в справі (Етап 3 форм USCIS): той самий вигляд, що й блок «вручну», але без кольору
   тривоги — це довідка «хто є в справі», а не попередження. Кнопки внизу, як у картці бланка. */
.fw-persons{margin-bottom:16px; padding:12px 14px; border-radius:12px; background:var(--paper);
  border:1px solid var(--sky-line);}
.fw-persons .fw-form-actions{margin:10px 0 0; justify-content:flex-start;}
.fw-persons .fw-manual-row.fw-person{align-items:center;}
.fw-persons .fw-person span{flex:1;}
.fw-persons .fw-person b{flex:none; color:var(--ink);}
.fw-persons .callout{margin-top:8px;}
.fw-manual-list{margin-top:18px; max-height:340px; overflow-y:auto;}
.fw-manual-list .fw-manual-row b{flex:0 0 118px;}
/* Етап 7 (генератор чернеток): звіт §13 під повідомленням. Кроки навмисно моноширинним і
   дрібним — це технічний слід «де зупинились», а не текст для клієнта; кольори результату
   збігаються з рештою сторінки (stamp = зупинено, amber = потрібна людина). */
.fw-gen-msg{white-space:pre-line;}
.fw-gen-report{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:6px;}
.fw-gen-steps{list-style:none; margin:6px 0 0; padding:0; width:100%; font:12px ui-monospace,monospace; display:grid; gap:2px;}
.fw-gen-steps li{display:flex; gap:8px; align-items:baseline; padding:2px 6px; border-radius:5px; background:var(--paper);}
.fw-gen-steps li.is-blocked{background:var(--stamp-soft); color:var(--stamp);}
.fw-gen-steps li.is-warning{background:var(--amber-soft); color:var(--amber);}
.fw-gen-steps li.is-skipped{opacity:.55;}
.fw-gen-step-name{min-width:170px; font-weight:600;}
.fw-gen-step-res{min-width:58px;}
.fw-gen-steps .hint{font:inherit; opacity:.85; white-space:normal;}
/* Етап 8 (Issue Center, ТЗ §10): список проблем над особами. Лівий кант — важливість:
   stamp = блокує, amber = критично; закриті — приглушені, але видимі, щоб було ясно, хто і
   коли закрив. Той самий блок-стиль, що й у fw-persons, аби не виглядало чужим. */
.fw-issues{margin-bottom:14px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card);}
.fw-issues .fw-manual-head{margin:0; flex-wrap:wrap;}
/* .fw-manual-head>span стискає всі span до 18px (це під іконку) — пілюлям і підказкам
   повертаємо ширину за вмістом. */
.fw-issues .fw-manual-head>span.pill,.fw-issues .fw-manual-head>span.hint{width:auto; flex:none;}
.fw-issues .fw-manual-head>span.hint{font-size:12px; color:var(--ink-soft);}
.fw-issues-toggle{margin-left:auto;}
.fw-issues-bar{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px;}
.fw-issues-bar select{appearance:auto; -webkit-appearance:menulist; width:auto; flex:none; font-size:12px; padding:4px 6px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink);}
.fw-issues-request{width:100%; min-height:110px; margin-top:8px; padding:8px 10px; border:1px solid var(--line);
  border-radius:9px; background:var(--paper); font-family:inherit; font-size:13px; line-height:1.5; color:var(--ink); resize:vertical;}
.fw-issue{margin-top:8px; padding:8px 10px 8px 12px; border-left:3px solid var(--line); border-radius:8px; background:var(--paper);}
.fw-issue.is-blocker{border-left-color:var(--stamp); background:var(--stamp-soft);}
.fw-issue.is-critical{border-left-color:var(--amber); background:var(--amber-soft);}
.fw-issue.is-resolved{opacity:.6; border-left-color:var(--line); background:var(--paper);}
.fw-issue-head{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline;}
.fw-issue-sev{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);}
.fw-issue.is-blocker .fw-issue-sev{color:var(--stamp);}
.fw-issue.is-critical .fw-issue-sev{color:var(--amber);}
.fw-issue p{margin:3px 0 0; font-size:calc(var(--pw-fs) - 1px); line-height:1.45;}
.fw-issue-text{color:var(--ink);}
.fw-issue-actions{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:7px;}
.fw-issue-note{flex:1 1 200px; min-width:0; font-size:12px; padding:4px 8px; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--ink);}
.fw-issues-foot{margin-top:10px;}
/* Етап 9 (workflow §12): статус перевірки під звітом генерації. Кнопки переходів — у ряд,
   недоступні лишаються видимими (причина в title і рядком під ними), бо «чому не можна» тут
   важливіше за чистий вигляд. */
/* Етап 10 (ТЗ §15): чутливі ідентифікатори показуємо хвостом; повне значення — у полі
   за кнопкою. Крапки — моноширинні, щоб маска не «стрибала» відносно роздільників. */
.fw-masked{font-variant-numeric:tabular-nums; letter-spacing:.04em; color:var(--slate);}
.fw-sensitive{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.fw-sensitive input{flex:1 1 180px; min-width:0;}
.fw-sensitive .fw-masked{font-size:calc(var(--pw-fs) - 1px);}
.fw-review{width:100%; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line);}
.fw-review-head{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center;}
.fw-review-head .hint{font-size:12px;}
.fw-review-log{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:2px; font-size:12px; color:var(--ink-soft);}
.fw-review-log li{padding:2px 6px; border-radius:5px; background:var(--paper);}
.fw-review-actions{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:7px;}
.fw-review-actions .btn[disabled]{opacity:.5; cursor:not-allowed;}
.fw-review-why{margin:5px 0 0; font-size:12px;}
.fw-manual-inline{display:flex; gap:7px; align-items:flex-start; margin-top:5px; padding:6px 9px;
  border-radius:9px; background:var(--sky); font-size:calc(var(--pw-fs) - 2px); line-height:1.5;
  color:var(--ink-soft);}
.fw-manual-inline>span:first-child{width:15px; color:var(--slate); flex:none;}

/* Поля обраного бланка. */
.fw-fill{max-width:760px;}
.fw-fill .field{margin-bottom:14px;}
.fw-fill .field label{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.fw-spot{font:800 9.5px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--visa); background:var(--visa-soft); border-radius:6px; padding:2px 6px;}
.fw-asks{margin:3px 0 5px; font-size:calc(var(--pw-fs) - 2.5px); line-height:1.5;}
.fw-no-kb{margin-top:16px;}
.fw-fill-foot{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:18px;
  padding-top:14px; border-top:1px solid var(--sky-line);}
.fw-fill-foot .hint{margin:0; margin-right:auto;}

/* ── Панель повноти форми (Этап 4/13 нічної роботи над надійністю форм USCIS) ───────────
   Червоний — бракує/конфлікт/невідома графа; жовтий — на перевірку спеціаліста; зелений —
   лише для підтвердженого «не стосується». Власник просив прямо: не показувати фальшиві
   100%, поки лишається хоч один із цих пунктів — тому кольори тут не косметика, а сам сенс
   екрана. */
.fw-completeness{margin-bottom:16px; padding:12px 14px; border-radius:12px; background:var(--paper);
  border:1px solid var(--sky-line);}
.fw-completeness-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.fw-badge-green{background:var(--good-soft); color:var(--good);}
.fw-badge-amber{background:var(--amber-soft); color:var(--amber);}
.fw-badge-red{background:var(--stamp-soft); color:var(--stamp);}
.fw-completeness-grid{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.fw-cstat{font-size:calc(var(--pw-fs) - 1.5px); font-weight:600; padding:3px 9px; border-radius:8px;}
.fw-cstat-red{background:var(--stamp-soft); color:var(--stamp);}
.fw-cstat-amber{background:var(--amber-soft); color:var(--amber);}
.fw-cstat-green{background:var(--good-soft); color:var(--good);}
.fw-issue-list{margin-top:10px; display:flex; flex-direction:column; gap:6px;}
.fw-issue{display:flex; flex-direction:column; gap:2px; padding:7px 9px; border-radius:9px;
  background:var(--sky); border:1px solid var(--sky-line); font-size:calc(var(--pw-fs) - 1.5px); line-height:1.45;}
.fw-issue b{color:var(--ink);}
.fw-issue span{color:var(--ink-soft); overflow-wrap:anywhere;}
.fw-issue-conflict{border-color:color-mix(in srgb, var(--stamp) 35%, transparent); background:var(--stamp-soft);}
.fw-issue-conflict span{color:var(--ink-soft);}
.fw-issue-amber{flex-direction:row; align-items:flex-start; gap:8px;
  border-color:color-mix(in srgb, var(--amber) 35%, transparent); background:var(--amber-soft);}
.fw-issue-amber>span:first-child{width:16px; flex:none; color:var(--amber);}

/* ── Інвойс: форма зліва, сам аркуш справа (js/pages/InvoiceForm.js) ────────────────────── */
/* Своя сітка, а не .review-grid: там документ у широкій колонці, а панель — вузька збоку.
   Тут навпаки — форма компактна й фіксованої ширини, а аркуш інвойса має бути широким,
   інакше таблиця Description/Qty/Rate/Amount складається в чотири нечитабельні стовпчики.
   minmax(0,…) на обох колонках з тієї самої причини, що й у .review-grid: довгий рядок
   інакше розпирає grid-колонку зсередини. */
.inv-grid{ display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:16px; align-items:start; }
.inv-form{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.inv-form > *{ min-width:0; }
/* Аркуш липне до верху: форму гортають довго, а звіряють написане саме з ним. */
.inv-paper-col{ position:sticky; top:16px; min-width:0; }
.inv-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin:0 0 14px; }
.inv-table{ width:100%; border-collapse:collapse; margin:0 0 14px; font-size:13.5px; }
.inv-table th, .inv-table td{ border:1px solid var(--sky-line); padding:5px 7px; text-align:left; vertical-align:top; }
.inv-table th{ background:var(--sky); font-weight:600; }
.inv-num{ text-align:right; white-space:nowrap; }
.inv-totals{ width:70%; margin-left:auto; }
@media (max-width:1100px){
  .inv-grid{ grid-template-columns:1fr; }
  .inv-paper-col{ position:static; }
}

/* ── «Мій профіль» (js/pages/MyProfile.js) — референс-скрін власника, 03.09 ─────────────────
   Ліва колонка — як тебе бачать колеги (картка-перегляд, не форма). Права — форма
   редагування. Раніше обкладинка лежала блідим фоном за всією карткою «Особисті дані»
   (::before з білою плівкою) — тепер це окрема банерна смуга зверху картки-перегляду, як на
   референсі, і плівка вже не потрібна: фото не підкладається під текст, воно саме по собі. */
.profile-layout{display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start;}
@media (max-width:900px){ .profile-layout{grid-template-columns:1fr;} }
.profile-preview-card{padding:0; overflow:hidden;}
.profile-cover{
  height:130px; background:linear-gradient(135deg, var(--visa-soft), var(--sky));
  background-size:cover; background-position:center; position:relative;
  display:flex; align-items:flex-start; justify-content:flex-end; padding:12px;
}
.profile-cover-btn{background:var(--paper); box-shadow:var(--shadow-pop);}
.profile-preview-body{padding:0 20px 20px;}
/* .profile-avatar-big — клас на <UserAvatar class="..."> лягає на КОРІНЬ компонента
   (.avatar-wrap), а не на сам круг фото всередині (.avatar.lg): пряме .profile-avatar-big{}
   тому нічого не міняло — фото лишалось стандартних 64px і власного border-radius:16px
   (заокруглений квадрат, не круг). Власник, 03.09, зловив живцем: «фото профілю більше на
   30%» — 64px×1.3≈83px, і саме круглим, як на референс-скріні. Дістаємось до .avatar лише
   через нащадковий селектор. */
/* Ще раз, 03.09: «увеличь фотку раза в полтора» — 83px×1.5≈124px. */
.profile-avatar-wrap{position:relative; width:124px; margin-top:-62px; margin-bottom:10px;}
.profile-avatar-big.avatar-wrap .avatar{width:124px; height:124px; font-size:40px; border-radius:50%; border:4px solid var(--paper); box-shadow:var(--shadow-pop);}
.profile-avatar-cam{position:absolute; bottom:0; right:0; width:32px; height:32px; background:var(--paper); border:1px solid var(--sky-line); box-shadow:var(--shadow-pop);}
.profile-preview-name{font:800 18px/1.2 var(--font-display); color:var(--ink);}
.profile-info-row{display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding-top:14px; border-top:1px solid var(--sky-line);}
.profile-info-ic{flex-shrink:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--slate-2);}
.profile-info-ic svg{width:17px; height:17px;}

/* Instagram-іконка всередині поля — власник, 03.09: «лого інсти возле ссылки на інст». */
.field-with-icon{position:relative;}
.field-with-icon .field-icon{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--slate-2); pointer-events:none;}
.field-with-icon .field-icon svg{width:16px; height:16px;}

/* Теги хобі — чипи з хрестиком замість вільної textarea (референс-скрін). */
.tag-input{display:flex; flex-wrap:wrap; gap:6px; align-items:center; border:1px solid var(--sky-line); background:var(--sky); border-radius:10px; padding:7px 10px; min-height:42px;}
.tag-input:focus-within{border-color:var(--visa); background:var(--paper); box-shadow:0 0 0 3px var(--visa-soft);}
.tag-input.is-disabled{opacity:.55;}
.tag-input input{flex:1; min-width:120px; border:none; background:none; padding:3px 2px; font-size:13.5px;}
.chip-editable{display:inline-flex; align-items:center; gap:5px; background:var(--visa-soft); color:var(--visa-ink); border:none;}
.chip-editable button{appearance:none; border:none; background:none; color:inherit; opacity:.7; cursor:pointer; display:flex; padding:0;}
.chip-editable button:hover{opacity:1;}
.chip-editable button svg{width:11px; height:11px;}

/* Картки статусу доступності замість дрібних кнопок — референс-скрін. */
.work-status-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px;}
.work-status-card{
  position:relative; text-align:left; border:1.5px solid var(--sky-line); background:var(--paper);
  border-radius:12px; padding:14px; cursor:pointer; transition:border-color .12s, background .12s;
  font-family:inherit;
}
.work-status-card:hover{border-color:var(--visa);}
.work-status-card.is-selected{border-color:var(--visa); background:var(--visa-soft);}
.work-status-check{position:absolute; top:10px; right:10px; width:17px; height:17px; color:var(--visa);}
.work-status-check svg{width:17px; height:17px;}
.work-status-title{font-weight:700; font-size:13.5px; color:var(--ink); padding-right:20px;}
.work-status-hint{margin-top:4px; line-height:1.3;}

/* ── Звіт Elizabeth про зроблене ──────────────────────────────────────────────────────
   Раніше це був просто кольоровий текст посеред білого: зелений рядок «Виконано», під ним
   гола кнопка й сірий підпис. На тлі решти CRM, зібраної з карток, воно читалось як
   недороблене — власник так і сказав: «сделай юих красивый». Тепер кожен підсумок — картка
   зі своїм кольором стану: зелена «зроблено», червона «не вийшло», синя «чекає відповіді».
   Кольори беремо з тих самих змінних, що й решта системи, — жодного нового відтінку. */
.voice-report{gap:12px;}
.voice-report-ok,
.voice-report-bad,
.voice-report .voice-notice{
  border-radius:12px; padding:12px 14px 13px; border:1px solid transparent;
  font-size:14px; line-height:1.65;
}
.voice-report-ok{
  color:var(--ink); background:color-mix(in srgb, var(--good) 8%, var(--card,#fff));
  border-color:color-mix(in srgb, var(--good) 26%, transparent);
}
.voice-report-bad{
  color:var(--ink); background:color-mix(in srgb, var(--stamp) 7%, var(--card,#fff));
  border-color:color-mix(in srgb, var(--stamp) 24%, transparent);
}
.voice-report .voice-notice{
  color:var(--ink); background:var(--sky); border-color:var(--sky-line);
}
/* Заголовок картки — окремим рядком і в колір стану: він має читатись першим. */
.voice-report-ok > b{display:block; margin-bottom:6px; color:var(--good);}
.voice-report-bad > b{display:block; margin-bottom:6px; color:var(--stamp);}
.voice-report .voice-notice > b{display:block; margin-bottom:6px;}
/* Рядки переліку. Тире вже стоїть у розмітці, тож тут лише повітря між пунктами. */
.voice-report-ok > div,
.voice-report-bad > div,
.voice-report .voice-notice > div{padding:2px 0;}
/* «відкрити» — не гола сіра кнопка, а спокійне посилання, яке видно лише коли треба. */
.voice-open{
  padding:2px 8px; margin-left:6px; border-radius:7px; font-size:13px; font-weight:600;
  color:var(--brand); background:color-mix(in srgb, var(--brand) 9%, transparent);
  transition:background .15s ease;
}
.voice-open:hover{background:color-mix(in srgb, var(--brand) 17%, transparent);}
/* Рядок дій відбиваємо лінією — інакше кнопки злипаються з останнім пунктом звіту. */
.voice-report > .voice-actions{
  margin-top:2px; padding-top:12px; border-top:1px solid var(--sky-line); align-items:center;
}
.voice-report > .voice-actions .voice-hint{margin-bottom:0;}
/* Рядок запиту на дашборді керівника: набір показників збирається тут, не в іншому розділі. */
.leader-ask{display:flex; gap:8px; align-items:center; margin:10px 0 0; flex-wrap:wrap;}
.leader-ask input{
  flex:1; min-width:220px; border:1px solid var(--sky-line); background:var(--paper);
  border-radius:10px; padding:10px 13px; font-size:14px; color:var(--ink);
}
.leader-ask input:focus{outline:none; border-color:var(--brand);}
.leader-ask-note{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  margin:10px 0 0; padding:11px 13px; border-radius:11px;
  background:var(--sky); border:1px solid var(--sky-line);
  font-size:13.5px; line-height:1.55; color:var(--ink);
}
.leader-ask-acts{display:flex; gap:8px; margin-left:auto;}
/* Список людей на зідзвон: рядок на людину, як у задачах. Плитки з прізвищами тут не
   працювали — 55 співробітників без облич і без пошуку читались як суцільна стіна. */
.call-people-search{
  width:100%; border:1px solid var(--sky-line); background:var(--paper);
  border-radius:10px; padding:10px 13px; font-size:14px; color:var(--ink); margin-bottom:8px;
}
.call-people-search:focus{outline:none; border-color:var(--brand);}
.call-people{
  max-height:280px; overflow-y:auto; border:1px solid var(--sky-line);
  border-radius:12px; background:var(--card,#fff); padding:4px;
}
.call-person{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:7px 9px; border:0; background:transparent; border-radius:9px; cursor:pointer;
  transition:background .12s ease;
}
.call-person:hover{background:var(--sky);}
.call-person.is-on{background:color-mix(in srgb, var(--brand) 10%, transparent);}
.call-person-name{display:flex; flex-direction:column; min-width:0; flex:1;}
.call-person-name b{font-size:14px; font-weight:600; color:var(--ink); line-height:1.3;}
.call-person-name i{font-style:normal; font-size:12.5px; color:var(--slate-2); line-height:1.3;}
.call-person-mark{font-size:15px; font-weight:700; color:var(--brand); flex:none;}
/* Обличчя запрошених у рядку зідзвону. Перекриваються, як у месенджерах: шість аватарів
   займають менше місця, ніж два прізвища, і впізнаються швидше. */
.call-faces{display:flex; align-items:center; gap:0; margin-top:5px;}
.call-faces > *{margin-right:-7px; box-shadow:0 0 0 2px var(--card,#fff); border-radius:50%;}
.call-faces-more{
  margin-left:12px; font-size:12px; font-weight:600; color:var(--slate-2);
}
/* Поле опису в композері задачі критерію та редагована назва вже створеної задачі. */
.ctask-composer-note{
  width:100%; margin-top:6px; border:1px solid var(--sky-line); background:var(--paper);
  border-radius:9px; padding:8px 11px; font-size:13.5px; line-height:1.55; color:var(--ink);
  resize:none;
}
.ctask-composer-note:focus{outline:none; border-color:var(--brand);}
/* Назва задачі підказує, що її можна правити, — але тільки на наведення, щоб список не рябів. */
.ctask-title{border-radius:7px; padding:1px 4px; margin:-1px -4px; cursor:text;}
.ctask-title:hover{background:var(--sky);}
.ctask-title-edit{
  border:1px solid var(--brand); background:var(--card,#fff); font:inherit; width:100%;
}
.ctask-title-edit:focus{outline:none;}
.share-screen.sv-desktop:has(> .brief-shell){padding:40px 20px;}
/* ═════════════════════════════════════════════════════════════════════════════════════════
   Публічний дашборд клієнта: розкладка для КОМПʼЮТЕРА (ClientView.js, .sv-desktop)
   ═════════════════════════════════════════════════════════════════════════════════════════

   Телефонна розкладка — це все, що вище: одна колонка 640 px. Вона лишається БЕЗ ЖОДНОЇ
   зміни, і саме тому тут немає ані @media, ані правок наявних правил: усе нижче живе
   виключно під класом .sv-desktop, який ClientView.js вішає на .share-screen. Немає
   класу — немає жодного з цих правил, і сторінка малюється точно як учора.

   Чому не медіазапитом: розкладку можна ЗАФІКСУВАТИ (?view=mobile на ноутбуку, ?view=desktop
   на планшеті) і перемкнути прямо на сторінці. Медіазапит такого не вміє — він знає тільки
   ширину вікна й переважив би вибір людини.

   Що з чим стоїть поруч і чому:
   · шапка (лого, зворотний відлік, перемикач) — на всю ширину;
   · картка клієнта з прогресом і заклик заповнити бриф — поруч, половина на половину:
     перше це СТАН справи, друге — початок роботи, і на 1440 вони обидва мають бути видні
     без прокрутки;
   · «Документи для завантаження» — на всю ширину, але сам чек-лист усередині сіткою:
     шість високих карток одна під одною — це головна причина, чому на компі доводилось
     гортати екран за екраном;
   · «Ваші завдання» і «Матеріали клієнта» — поруч (обидва про те, що робить сам клієнт);
     якщо є лише один із блоків, він розтягується на всю ширину, а не лишає дірку;
   · критерії — на всю ширину, три плитки в ряд (чотири від 1600).
   ───────────────────────────────────────────────────────────────────────────────────────── */
/* ── Завантаження DOCX: кнопка без замка, правда поруч ──────────────────────────────────
   Блокування експорту непідтвердженими розділами знято рішенням власника (migration_66).
   Замість замка — рядок під кнопкою: людина бачить, що забирає чернетку, а не готовий
   документ. Рядок навмисно стоїть ПІД кнопкою, а не в тултипі: попередження, яке треба
   навести мишею, щоб прочитати, — це не попередження. */
.pw-export{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.pw-export-warning{font:600 9.5px/1.35 var(--font-mono);color:var(--amber-ink,var(--amber));text-transform:uppercase;letter-spacing:.04em;max-width:260px;text-align:right}

/* ── Рекомендаційні листи ───────────────────────────────────────────────────────────────
   Картка рекомендувача — не форма, а довідка про людину: спершу видно, ХТО він і чому його
   думка важить, і аж потім дії. Саме в такому порядку його читає менеджер, коли вирішує,
   чи варто взагалі просити в цієї людини лист. */
.petition-letters{display:flex;flex-direction:column;gap:16px}
.petition-letters-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.petition-letters-head h3{margin:0 0 4px;font-size:15px}
.petition-letters-head .hint{display:block;max-width:640px}
.petition-recommender-form{display:flex;flex-direction:column;gap:11px;padding:16px 18px;border:1px solid var(--sky-line);border-radius:10px;background:var(--paper)}
.petition-recommender-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.petition-recommender-form label{display:flex;flex-direction:column;gap:5px;font:700 9.5px/1.4 var(--font-mono);color:var(--slate-2);text-transform:uppercase;letter-spacing:.05em}
.petition-recommender-card{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border:1px solid var(--sky-line);border-radius:10px;background:var(--paper)}
.petition-recommender-card .hint{margin:0;line-height:1.55}
@media (max-width:900px){.petition-recommender-form .form-row{grid-template-columns:1fr}}

/* ─── Нерозібране → Голосові ─────────────────────────────────────────────────────────── */
/* Програвач голосового: кругла кнопка, доріжка-хвиля, синя пройдена частина й сіра решта.
   Форма впізнавана з месенджерів, палітра — своя (--visa/--sky-line): сірий телеграмівський
   плеєр посеред синьої картки CRM виглядав би вставленим з іншої програми. */
.tgv-v-card .tgv-v-sub{border-top:1px solid var(--sky-line);padding-top:14px}
.tgv-v-sub-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.tgv-v-sub-head b{font-size:15px;letter-spacing:.01em}

.tgv-v-row{border:1px solid var(--sky-line);border-radius:var(--radius-md);padding:12px 13px;margin-bottom:10px;background:var(--paper)}
.tgv-v-row-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px;font-size:13px}
.tgv-v-row-who{font-weight:700;color:var(--ink)}
.tgv-v-row-when{color:var(--slate-2)}
.tgv-v-row-dur{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--slate);font-weight:600}
.tgv-v-caption{margin:8px 0 0}
.tgv-v-path{margin-left:auto;font-size:12.5px}
/* Шлях показуємо лише коли файл ПЕРЕНЕСЛИ з рідної папки — інакше однаковий рядок стояв би
   у кожному записі й перестав би читатись саме тоді, коли справді щось означає. */
.tgv-v-where{margin:6px 0 0;font-size:12.5px;color:var(--visa-ink)}
.tgv-f-row{border:1px solid var(--sky-line);border-radius:var(--radius-md);padding:10px 12px;margin-bottom:8px;background:var(--paper)}
.tgv-f-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tgv-f-name{flex:1;font-size:14px;font-weight:600;color:var(--ink);word-break:break-word}
.tgv-f-why{margin:5px 0 0;font-size:12.5px}
.tgv-f-caption{margin:4px 0 0;font-size:13px;color:var(--ink)}
.tgv-f-links{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.tgv-f-links a{font-size:12.5px;color:var(--visa-ink);word-break:break-all}
.tgv-v-warn{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;margin-bottom:12px;
  border:1px solid var(--amber);border-radius:var(--radius-md);background:var(--amber-soft);color:var(--ink)}
.tgv-v-warn svg{width:17px;height:17px;flex:0 0 17px;color:var(--amber)}
.tgv-v-warn b{display:block;font-size:14px;margin-bottom:3px}
.tgv-v-warn p{margin:2px 0 0;font-size:12.5px;color:var(--ink-soft)}

.tgv-v-player{display:flex;align-items:center;gap:12px}
.tgv-v-play{width:40px;height:40px;flex:0 0 40px;border-radius:50%;border:none;cursor:pointer;
  background:var(--visa);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:transform .1s ease,background .12s ease}
.tgv-v-play:hover{background:var(--visa-ink)}
.tgv-v-play:active{transform:scale(.94)}
.tgv-v-play:focus-visible{outline:2px solid var(--visa);outline-offset:2px}
.tgv-v-play-ic{display:flex}
.tgv-v-play svg{width:17px;height:17px;fill:currentColor;stroke:none}
.tgv-v-body{flex:1;min-width:0}
/* Клікабельна вся доріжка, не лише стовпчики: у месенджері перемотка теж не вимагає
   влучити в конкретну рисочку. */
.tgv-v-wave{cursor:pointer;height:34px;display:block;width:100%}
.tgv-v-wave:focus-visible{outline:2px solid var(--visa);outline-offset:3px;border-radius:4px}
.tgv-v-wave canvas{display:block}
.tgv-v-meta{display:flex;align-items:center;gap:9px;margin-top:3px;font-size:12.5px;color:var(--slate-2)}
.tgv-v-time{font-variant-numeric:tabular-nums;font-weight:600;color:var(--slate)}
.tgv-v-time i{font-style:normal;font-weight:500;color:var(--slate-2)}
.tgv-v-note.is-warn{color:var(--stamp)}
.tgv-v-dl{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--slate);border:1px solid var(--sky-line);text-decoration:none}
.tgv-v-dl:hover{color:var(--visa);border-color:var(--visa)}
.tgv-v-dl svg{width:16px;height:16px}

.tgv-v-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}
.tgv-v-job-state{font-size:13px;font-weight:700;color:var(--visa)}
.tgv-v-job-fail{font-size:12.5px;color:var(--stamp)}

.tgv-v-transcript{margin-top:11px;border-top:1px dashed var(--sky-line);padding-top:11px}
.tgv-v-transcript-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.tgv-v-transcript-head b{font-size:14px}
.tgv-v-transcript-text{width:100%;font-family:var(--font-body);font-size:14.5px;line-height:1.55;
  border:1px solid var(--sky-line);border-radius:var(--radius-sm);padding:10px 11px;background:var(--sky);color:var(--ink);resize:vertical}
.tgv-v-transcript-text:focus{outline:none;border-color:var(--visa);background:var(--paper)}
.tgv-v-transcript-actions{display:flex;gap:8px;margin-top:9px}

/* ─── Групи Telegram у картці ─────────────────────────────────────────────────────────── */
.tgc-chat{border:1px solid var(--sky-line);border-radius:var(--radius-md);padding:11px 13px;margin-bottom:10px;background:var(--paper)}
.tgc-chat-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.tgc-chat-head b{font-size:14.5px}
.tgc-author{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--sky-line)}
.tgc-author:first-of-type{border-top:none}
.tgc-author-name{flex:1;font-size:14px;color:var(--ink)}
.tgc-free{border:1px solid var(--sky-line);border-radius:var(--radius-md);padding:4px 13px;margin-top:8px}
.tgc-manual{display:flex;gap:8px;margin-top:12px}
.tgc-manual input{flex:1;font-family:var(--font-body);font-size:14px;padding:7px 10px;
  border:1px solid var(--sky-line);border-radius:var(--radius-sm);background:var(--sky);color:var(--ink)}

/* Попередній перегляд тексту опитування. Саме <pre>, а не <p>: у питанні є порожні рядки,
   і людина перед розсилкою на 500 чатів має бачити рівно те, що поїде, — з переносами,
   а не злите в один абзац. */
.survey-preview{margin:8px 0 0;padding:10px 12px;white-space:pre-wrap;font-family:var(--font-body);
  font-size:14px;line-height:1.5;color:var(--ink);background:var(--sky);
  border:1px solid var(--sky-line);border-radius:var(--radius-sm)}

/* Плани по відділах (js/pages/Plans.js) — кабінет керівника, заміна Google-таблиці. Свідомо
   ПЕРЕД правилом sv-desktop для share-screen нижче: усе після нього тест «телефонна версія
   лишається такою, як була» вважає розкладкою клієнтського sv-desktop і вимагає, щоб кожне
   правило там було прив'язане до цього класу — а ці класи взагалі не про той екран. */
.plan-status-select{width:auto; font-size:12.5px; font-weight:700; padding:5px 10px; border-radius:99px; border:1px solid transparent;}
.plan-status-select.is-planned{background:var(--sky); color:var(--slate);}
.plan-status-select.is-in_progress{background:var(--visa-soft); color:var(--visa-ink);}
.plan-status-select.is-done{background:var(--good-soft); color:var(--good);}

/* Три плитки-показники й шкала прогресу зверху — референс-скрін власника, 03.09. */
.plan-stats-row{display:grid; grid-template-columns:1fr 1fr 2fr; gap:14px; margin-bottom:16px;}
@media (max-width:820px){ .plan-stats-row{grid-template-columns:1fr 1fr; } .plan-stat-card-wide{grid-column:1/-1;} }
.plan-stat-card{background:var(--paper); border:1px solid var(--sky-line); border-radius:14px; padding:16px 18px;}
.plan-stat-num{font:800 30px/1.1 var(--font-display); color:var(--ink);}
.plan-stat-num-sub{font-size:16px; font-weight:700; color:var(--slate-2); margin-left:4px;}
.plan-slider{margin-top:2px;}
.plan-slider-track{position:relative; height:6px; border-radius:99px; background:var(--sky-line);}
.plan-slider-dot{position:absolute; top:50%; width:11px; height:11px; border-radius:50%; background:var(--visa); border:2px solid var(--paper); box-shadow:0 0 0 1px var(--visa); transform:translate(-50%, -50%);}
.plan-slider-ticks{display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--slate-2);}

/* Таблиця плану замість карток із textarea — той самий референс. */
.plan-cat-card{margin-bottom:16px;}
.plan-cat-head{margin-bottom:14px; flex-wrap:wrap; gap:10px;}
.plan-cat-badge{font-size:11.5px; font-weight:700; color:var(--slate); background:var(--sky); border-radius:99px; padding:3px 9px;}
.plan-table-wrap{overflow-x:auto;}
.plan-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.plan-table th{text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--slate-2); padding:0 10px 8px; border-bottom:1px solid var(--sky-line); white-space:nowrap;}
.plan-table td{padding:12px 10px; border-bottom:1px solid var(--sky-line); vertical-align:top;}
.plan-table tr:last-child td{border-bottom:none;}
.plan-table tr.is-editing{background:var(--sky);}
.plan-col-num{width:34px; color:var(--slate-2);}
.plan-col-main{min-width:220px;}
.plan-col-result{min-width:180px; max-width:260px;}
.plan-col-status{min-width:140px;}
.plan-col-actions{width:80px; white-space:nowrap;}
.plan-task-title{font-weight:700; color:var(--ink);}
.plan-task-desc{margin-top:3px; line-height:1.4;}
.plan-edit-title{font-size:14px; font-weight:700; margin-bottom:6px; width:100%; box-sizing:border-box;}
.plan-edit-desc, .plan-edit-result{font-size:13px; line-height:1.4; resize:none; overflow:hidden; width:100%; box-sizing:border-box; display:block;}
.plan-overall-progress{margin-bottom:24px;}
.plan-overall-progress .flex-between{align-items:baseline;}
.plan-empty-row td{color:var(--slate-2); text-align:center; padding:20px 10px;}
.plan-empty-row svg{width:16px; height:16px; vertical-align:-3px; margin-right:6px;}

/* Прогрес задачі — той самий трек/крапка, що й .plan-slider нагорі сторінки, але це
   СПРАВЖНІЙ повзунок (range), а не обчислена картинка: керівник рухає його сам. */
.plan-progress-row{display:flex; align-items:center; gap:10px; margin-top:10px;}
.plan-progress-range{-webkit-appearance:none; appearance:none; flex:1; height:6px; border-radius:99px; background:var(--sky-line); outline:none; cursor:pointer;}
.plan-progress-range::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--visa); border:2px solid var(--paper); box-shadow:0 0 0 1px var(--visa); cursor:pointer;}
.plan-progress-range::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--visa); border:2px solid var(--paper); box-shadow:0 0 0 1px var(--visa); cursor:pointer; border:none;}
.plan-progress-range:disabled{opacity:.5; cursor:default;}
.plan-progress-val{font-size:12px; color:var(--slate-2); min-width:32px; text-align:right;}

/* Підзадачі під задачею плану — тиждень-спершу (вкладки), тому нижче й список одного
   тижня. Вкладки — .crit-tabs з картки клієнта, тут лише тісніші відступи/шрифт, бо
   контекст — вузька комірка таблиці, а не центр сторінки. */
.crit-tabs.plan-subtasks-weeks{margin:0 0 8px; display:flex;}
.crit-tabs.plan-subtasks-weeks button{padding:5px 10px; font-size:12.5px;}
.plan-subtask-list{display:flex; flex-direction:column; gap:2px;}
.plan-subtask{display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13.5px;}
.plan-subtask-text{flex:1; min-width:0; word-break:break-word;}
.plan-subtask.is-done .plan-subtask-text{color:var(--slate-2);}
/* Незакрита — порожнє кільце (клікабельно, але «ще нічого»); закрита — та сама
   заповнена зелена галка, що й icons.checkFilled по всьому застосунку («типа емоджі,
   світиться» — власник, 03.09), без окремого набору іконок під один чекбокс. */
.plan-subtask-check{width:20px; height:20px; flex-shrink:0; padding:0; border-radius:50%; border:2px solid var(--sky-line); background:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--good); transition:border-color .12s, transform .12s;}
.plan-subtask-check:hover:not(:disabled){border-color:var(--good);}
.plan-subtask-check:disabled{cursor:default;}
.plan-subtask-check svg{width:20px; height:20px;}
.plan-subtask.is-done .plan-subtask-check{border-color:transparent; transform:scale(1.05);}
.plan-subtask-week-pick{flex-shrink:0;}
.plan-subtask-week-tag{flex-shrink:0; color:var(--slate-2); font-size:11px;}
.plan-subtask-del{flex-shrink:0;}
.plan-subtask-empty{padding:4px 0;}
.plan-subtask-add{display:flex; gap:6px; margin-top:8px;}
.plan-subtask-input{flex:1; min-width:0; padding:6px 10px; border:1px solid var(--sky-line); border-radius:8px; font-size:13px; background:var(--paper); color:var(--ink);}

/* BoldTextField — «везде, где вписывается текст ... кнопочка жирный шрифт» (власник,
   03.09), перший прохід лише в Плани. contenteditable росте разом із вмістом сам, без
   директиви v-autogrow: висота — не rows, а звичайний блочний потік. */
.boldfield-wrap{position:relative;}
.boldfield-editable{
  width:100%; box-sizing:border-box; border:1px solid var(--sky-line); background:var(--sky);
  border-radius:10px; padding:10px 12px; font-size:13px; line-height:1.4; color:var(--ink);
  outline:none; min-height:1.4em; white-space:pre-wrap; word-break:break-word;
  transition:border-color .12s, background .12s, box-shadow .12s;
}
.boldfield-editable:focus{border-color:var(--visa); background-color:var(--paper); box-shadow:0 0 0 3px var(--visa-soft);}
.boldfield-editable:empty::before{content:attr(data-placeholder); color:var(--slate-2);}
.boldfield-toolbar{position:absolute; z-index:30;}
.boldfield-toolbar button{
  width:28px; height:28px; border-radius:8px; border:1px solid var(--sky-line); background:var(--paper);
  color:var(--ink); font-weight:800; font-size:13px; cursor:pointer; box-shadow:var(--shadow-card);
}
.boldfield-toolbar button:hover{border-color:var(--visa);}
.boldfield-toolbar button.active{background:var(--visa); color:#fff; border-color:var(--visa);}

/* PR-пропозиція — публічна сторінка (js/pages/PrProposalView.js). Той самий .share-screen/
   .share-wrap, що й у дашборда клієнта, свідомо: та сама «фірмова» тональність, не сухою
   таблицею (власник, 04.09). .prp-wrap ширший за базовий .share-wrap (720px, не 640) — тут
   картки з логотипами, вужчий контейнер їх стискав би. */
/* 1100px, не 720 — власник, 04.09: «под компы что бы было на весь экран, не только вниз по
   прямой» — на широкому екрані критерії йдуть колонками (.prp-groups), а не одним вузьким
   стовпцем. Медіа-запит нижче повертає один стовпець на вузьких екранах/мобільному. */
.prp-wrap{max-width:1100px;}
.prp-brandbar{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.prp-brand-logo{height:28px; width:auto; max-width:140px; object-fit:contain; display:block; border-radius:6px;}
.prp-brand-logo--fallback{
  height:28px; width:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:var(--visa-soft); color:var(--visa-ink); font-weight:800; font-size:14px;
}
.prp-brand-name{font-weight:700; color:var(--ink); font-size:14px;}
.prp-disclaimer{
  background:var(--sky); border:1px solid var(--sky-line); color:var(--ink-soft);
  border-radius:14px; padding:14px 18px; font-size:13.5px; line-height:1.55; margin-bottom:24px;
}
.prp-header{margin-bottom:28px;}
.prp-header-row{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;}
.prp-subtitle{font-family:var(--font-display,inherit); font-weight:700; font-size:21px; color:var(--ink); text-align:right; padding-top:6px;}
@media (max-width:640px){.prp-subtitle{text-align:left;}}
.prp-name{font-size:28px; font-weight:800; color:var(--ink); margin:0 0 10px;}
.prp-meta{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.prp-pill{background:var(--visa-soft); color:var(--visa-ink); font-weight:700; font-size:13px; padding:5px 12px; border-radius:99px;}
.prp-occupation{color:var(--slate); font-size:14.5px;}
/* Власник, 04.09, уточнив після першої спроби (та розкладала ГРУПИ по колонках): картки
   ВСЕРЕДИНІ одного критерію йдуть по два в ряд зліва направо, з переносом рядка — «перша
   зліва, друга справа, третя знову зліва нижче» — а НАСТУПНИЙ критерій починається новим
   повношириним блоком під попереднім, а не поруч. */
.prp-groups{display:flex; flex-direction:column;}
/* Лінія між критеріями (власник, 04.09: «якось все злито», «якусь лінію, щоб розмежовувати
   критерії») — рамка навколо кожного блоку критерію, а не просто відступ, щоб межа була
   видна навіть коли фон і картки близькі за тоном. */
.prp-group{border:1.5px solid rgba(0,0,0,.16); border-radius:18px; padding:20px; margin-bottom:20px;}
.prp-group:last-of-type{margin-bottom:0;}
.prp-group-title{font-size:17px; font-weight:800; color:var(--ink); margin-bottom:12px;}
.prp-group-cards{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; align-items:start;}
@media (max-width:640px){.prp-group-cards{grid-template-columns:1fr;}}
.prp-card{background:var(--paper); border-radius:16px; box-shadow:var(--shadow-card); padding:20px;}
.prp-card-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px;}
.prp-resource{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); min-width:0;}
.prp-resource-logo{width:34px; height:34px; border-radius:10px; object-fit:cover; flex:none;}
.prp-resource-logo--fallback{
  display:flex; align-items:center; justify-content:center; background:var(--visa-soft); color:var(--visa-ink);
  font-weight:800; font-size:15px; text-transform:uppercase;
}
.prp-cost{font-family:var(--font-mono, monospace); font-weight:800; font-size:18px; color:var(--good); flex:none;}
.prp-desc{color:var(--ink); font-size:14.5px; line-height:1.55; margin:0 0 14px;}
.prp-facts{display:flex; flex-direction:column; gap:8px; background:var(--sky); border-radius:12px; padding:12px 14px;}
.prp-fact{display:flex; flex-direction:column; gap:2px; font-size:13.5px;}
.prp-fact span{color:var(--slate); font-size:11.5px; text-transform:uppercase; letter-spacing:.03em;}
.prp-fact b{color:var(--ink); font-weight:600;}
.prp-link{color:var(--visa); font-weight:600; word-break:break-all;}
.prp-empty{text-align:center; padding:30px 0;}
.prp-total{
  display:flex; justify-content:space-between; align-items:center; background:var(--paper);
  border:1px solid var(--sky-line); color:var(--ink); border-radius:16px; padding:18px 22px; font-size:15px; margin-top:8px;
}
.prp-total b{font-family:var(--font-mono, monospace); font-size:22px; font-weight:800; color:var(--ink);}

/* Регламент роботи (08.09) — картка має читатись як відкрита сторінка збереженого файлу,
   а не як звичайна форма CRM: вужче за повну ширину картки, більший міжрядковий інтервал,
   без табличних елементів навколо тексту. Стоїть ДО блоку .sv-desktop нижче навмисно —
   регресійний тест вважає стрей-правилом усе не-.sv-desktop, що з'явиться після нього. */
.reg-page{ max-width:720px; margin:0 auto; }
/* PDF-регламент отримує ширшу картку: сторінка Letter/A4 природно ширша за 720px, і на
   вузькій картці навіть маленький зум (110-120%) вже впирався в межу й вимагав прокрутки
   вбік — на Mac/Safari скролбар за замовчуванням невидимий, тож це виглядало як "текст
   обрізано", а не "прокрути вбік". Ширша картка лишає запас під зум, перш ніж дійде до
   прокрутки. */
.reg-page.reg-page--pdf{ max-width:960px; }
/* Зум вище 100% робить сторінку ширшою за картку — це очікувано, прокрутка вбік має бути.
   Проблема була в тому, що на Mac смуга прокрутки за замовчуванням невидима, поки не почнеш
   скролити, тож обрізаний текст справді виглядав як брак, а не «прокрути вбік». Малюємо
   свою — тонку, але завжди видиму. */
.reg-pdf-host{ overflow-x:auto; scrollbar-width:thin; }
.reg-pdf-host::-webkit-scrollbar{ height:10px; }
.reg-pdf-host::-webkit-scrollbar-track{ background:var(--sky-tint, #f3f6fb); border-radius:6px; }
.reg-pdf-host::-webkit-scrollbar-thumb{ background:var(--sky-line); border-radius:6px; }
.reg-pdf-host::-webkit-scrollbar-thumb:hover{ background:var(--slate-2, #9aa4b2); }
/* Підсвітка пошуку — власник, 08.09: «щоб жовтим і всі місця відразу, як у Word». Один
   колір на всі збіги, яскравіший — на поточний (той, куди щойно прокрутило). */
/* Напівпрозорий фон навмисно: у PDF сам текст під підсвіткою — не HTML, а намальовані на
   канвасі пікселі (текстовий шар лише невидимо лежить зверху для виділення/пошуку). Суцільна
   заливка ховала б слово повністю; напівпрозора лишає його читабельним, як підсвітка у Word. */
mark.reg-search-hit{ background:rgba(255,224,102,.55); color:inherit; border-radius:2px; padding:0 1px; }
mark.reg-search-hit.is-current{ background:rgba(255,159,28,.65); }
.reg-title{ font-family:var(--font-display); font-size:24px; font-weight:700; margin:0 0 4px; color:var(--ink); }
.reg-text{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); }
.reg-text p{ margin:0 0 16px; white-space:pre-wrap; }
.reg-text p:last-child{ margin-bottom:0; }
.reg-editor{ width:100%; min-height:420px; font-size:15px; line-height:1.7; padding:14px 16px;
  border:1px solid var(--sky-line); border-radius:10px; resize:vertical; font-family:var(--font-body); }

/* 08.09, друга правка того самого дня: власник завантажив .docx, ми розібрали його на
   суцільний текст — і всі відступи й абзаци зі "справжнього" документа поїхали в одну
   кашу. Замість плаского тексту тепер показуємо HTML прямо з mammoth (js/docs.js
   importDocx) — той самий заголовок/абзац/список/таблиця, що були у Word. Правити
   текст усе одно можна лише простим текстовим полем (.reg-editor вище) — власник прямо
   сказав, що редактор з панеллю форматування йому не потрібен; це стосується лише
   ПОКАЗУ вже завантаженого документа.*/
.reg-html{ font-size:15.5px; line-height:1.7; color:var(--ink-soft); }
.reg-html :is(h1,h2,h3,h4,h5,h6){ font-family:var(--font-display); color:var(--ink); font-weight:700; margin:22px 0 8px; }
.reg-html :is(h1,h2,h3,h4,h5,h6):first-child{ margin-top:0; }
.reg-html p{ margin:0 0 14px; }
.reg-html ul,.reg-html ol{ margin:0 0 14px; padding-left:22px; }
.reg-html li{ margin:0 0 6px; }
.reg-html strong{ color:var(--ink); }
.reg-html table{ border-collapse:collapse; width:100%; margin:0 0 18px; }
.reg-html td,.reg-html th{ border:1px solid var(--sky-line); padding:8px 10px; vertical-align:top; }
.reg-html th{ background:var(--sky-tint, #f3f6fb); font-weight:600; }

/* ── Бонуси у відомості зарплати ────────────────────────────────────────────────────────
   Власник, 14.09.2026: «нарахувати бонус — випадний список типів, суму можна виправити;
   зробити так, щоб візуально було красиво». Чіпи в клітинці показують, ЩО саме нараховано,
   а не лише суму: «Бонус 3000» без підпису нічого не пояснює ні людині, ні бухгалтерії. */
.bonus-cell { min-width: 240px; max-width: 320px; }
/* Підсумкова сума не переноситься: «160 000 ₴» у два рядки читається як дві різні цифри
   (власник, 15.09.2026: «виглядає погано підсумкова зп»). */
.payroll-table td.ta-right, .payroll-table th.ta-right { white-space: nowrap; }
.payroll-table td .pill { white-space: nowrap; }
.bonus-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 6px; }
/* Чіп не обрізаємо: підпис бонуса — це і є пояснення, за що гроші. Власник, 15.09.2026
   побачив «Найбільше закритих критеріїв за місяць · 1 00…» — сума зникла за краєм. */
.bonus-chip {
  display: inline-flex; align-items: flex-start; gap: 6px;
  background: var(--sky-soft, #eef4fb); border: 1px solid var(--sky-line, #d7e3f0);
  border-radius: 12px; padding: 4px 9px 4px 11px; font-size: 11.5px; line-height: 1.45;
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
.bonus-chip b { font-variant-numeric: tabular-nums; }
.bonus-x {
  border: 0; background: transparent; cursor: pointer; font-size: 14px; line-height: 1;
  color: var(--ink-soft, #667); padding: 0 2px; border-radius: 4px;
}
.bonus-x:hover { color: var(--danger, #c0392b); background: rgba(192, 57, 43, .08); }
.bonus-add { white-space: nowrap; }
.bonus-count { display: inline-block; margin-left: 8px; font-size: 11.5px; color: var(--visa, #3b6ea5); text-decoration: none; }
.bonus-count:hover { text-decoration: underline; }

/* Розшифровка цифр у звіті керівника */
.detail-groups { display: flex; flex-wrap: wrap; gap: 14px; }
.detail-group {
  flex: 1 1 260px; min-width: 240px; background: var(--paper, #fff);
  border: 1px solid var(--sky-line, #d7e3f0); border-radius: 10px; padding: 10px 12px;
}
.detail-head { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft, #667); margin-bottom: 6px; }
.detail-item { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12.5px; }
.detail-item .hint { white-space: nowrap; }

.bonus-picker { display: flex; flex-direction: column; gap: 6px; }
/* label.bonus-option — саме так, із тегом: у вікні це <label> усередині .field, а глобальне
   правило «.field label { display:block }» інакше перебиває flex і підпис злипається із сумою
   («Пруф кейса1 000 ₴» на екрані власника, 15.09.2026). */
.bonus-picker label.bonus-option {
  display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0;
  border: 1px solid var(--sky-line, #d7e3f0); border-radius: 10px; padding: 11px 14px;
  font-weight: 400; transition: border-color .12s ease, background .12s ease;
}
.bonus-picker label.bonus-option input { flex: 0 0 auto; }
.bonus-option:hover { background: var(--sky-soft, #f4f8fc); }
.bonus-option.active { border-color: var(--brand, #3b6ea5); background: var(--sky-soft, #eef4fb); }
.bonus-option input { margin: 0; }
.bonus-option-label { flex: 1 1 auto; font-size: 13px; line-height: 1.35; }
.bonus-option-sum { flex: 0 0 auto; margin-left: auto; padding-left: 12px; color: var(--ink-soft, #667); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ── Топ-3 за KPI у звітах керівника (власник, 14.09.2026) ────────────────────────────── */
.kpi-top { background: linear-gradient(90deg, rgba(255, 205, 86, .10), transparent 60%); }
/* Золото, срібло, бронза замість цифр 1-2-3 (власник, 15.09.2026). */
.kpi-medal { font-size: 15px; line-height: 1; }

/* Галочка «Закрито цього місяця» на плитці критерію: помітна, але не кричить. */
.crit-month-badge {
  display: flex; align-items: center; gap: 5px; font-size: 11.5px; cursor: pointer;
  color: var(--ink-soft, #667); border: 1px dashed var(--sky-line, #d7e3f0);
  border-radius: 999px; padding: 2px 9px 2px 7px;
}
.crit-month-badge input { accent-color: var(--visa, #3b6ea5); margin: 0; }
.crit-month-badge.on {
  color: var(--visa, #3b6ea5); border-style: solid; border-color: var(--visa, #3b6ea5);
  background: rgba(59, 110, 165, .07); font-weight: 600;
}

/* ── Розкритий рядок у відомості: що людина зробила і з чого склалась сума ─────────────
   Власник, 15.09.2026: «натискаєш на менеджера — розкривається, скільки закрила критеріїв,
   скільки клієнтів подано, які оцінки… і щоб розписувало, чому вийшла така сума». */
.who-cell { cursor: pointer; user-select: none; }
.who-caret { display: inline-block; transition: transform .15s ease; color: var(--ink-soft, #667); }
.who-caret.open { transform: rotate(90deg); }
.row-open > td { background: var(--sky-soft, #f4f8fc); }
.work-row > td { background: var(--sky-soft, #f4f8fc); padding: 14px 16px 16px; }
.work-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.work-cell {
  display: flex; flex-direction: column; gap: 2px; min-width: 132px;
  background: var(--paper, #fff); border: 1px solid var(--sky-line, #d7e3f0);
  border-radius: 10px; padding: 8px 12px;
}
.work-cell b { font-size: 17px; font-variant-numeric: tabular-nums; }
.work-cell span { font-size: 11.5px; color: var(--ink-soft, #667); }
/* Плитки показників розтягуються на всю ширину — інакше праворуч лишалась порожнеча. */
.work-cell { flex: 1 1 140px; }

.pay-breakdown { margin-top: 12px; border-top: 1px solid var(--sky-line, #d7e3f0); padding-top: 10px; }
.pay-line { display: flex; gap: 12px; justify-content: space-between; padding: 4px 0; font-size: 12.5px; }
.pay-sum { min-width: 110px; text-align: right; }
.pay-why { color: var(--ink-soft, #667); }
.pay-sum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay-total { border-top: 1px dashed var(--sky-line, #d7e3f0); margin-top: 6px; padding-top: 8px; font-weight: 700; }
.pay-total .pay-why { color: inherit; }

/* ── Пропозиції CRM щодо бонусів ───────────────────────────────────────────────────────── */
.suggest-box {
  border: 1px solid var(--sky-line, #d7e3f0); border-radius: 12px; margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(59,110,165,.05), transparent 60%);
}
.suggest-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer; flex-wrap: wrap; }
.suggest-head .hint { font-size: 11.5px; }
.suggest-list { border-top: 1px solid var(--sky-line, #d7e3f0); }
.suggest-item {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--sky-line, #eef2f7); flex-wrap: wrap;
}
.suggest-item:last-child { border-bottom: 0; }
.suggest-who { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.suggest-who .hint { font-size: 11.5px; }
.suggest-actions { display: flex; gap: 6px; }

/* ── День народження в команді ──────────────────────────────────────────────────────────
   Власник, 22.09.2026: «коли у людини др — з'явиться торт у срм і типу анімація
   феєрверком». Дві різні гучності: іменинникові — вікно з феєрверком раз на день,
   решті — спокійна смужка, щоб згадали привітати й не забули за роботою. */
.bd-strip{display:flex; align-items:center; gap:10px; margin:0 0 16px; padding:12px 16px;
  border-radius:14px; background:linear-gradient(90deg, rgba(59,91,255,.10), rgba(39,194,160,.10));
  border:1px solid var(--sky-line); font-size:14px; color:var(--slate);}
.bd-strip-cake{font-size:20px; line-height:1;}

.bd-overlay{position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,.72); backdrop-filter:blur(3px);}
.bd-fireworks{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.bd-card{position:relative; text-align:center; padding:36px 40px; border-radius:22px;
  background:var(--paper); box-shadow:0 24px 80px rgba(0,0,0,.35); max-width:min(92vw, 460px);
  animation:bd-pop .45s cubic-bezier(.2,1.3,.4,1);}
.bd-cake{font-size:74px; line-height:1; animation:bd-bounce 2.2s ease-in-out infinite;}
.bd-title{margin:12px 0 6px; font-size:26px;}
.bd-sub{margin:0 0 20px; color:var(--slate-2); font-size:14px;}
@keyframes bd-pop{from{opacity:0; transform:scale(.86) translateY(12px);} to{opacity:1; transform:none;}}
@keyframes bd-bounce{0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-8px) rotate(2deg);}}
@media (prefers-reduced-motion: reduce){
  /* Анімація — приємність, а не зміст: кому вона заважає, той бачить те саме статично. */
  .bd-cake, .bd-card{animation:none;}
}
.bd-cake-img{width:150px; height:auto; display:block; margin:0 auto 4px; animation:bd-bounce 2.6s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){ .bd-cake-img{animation:none;} }
.bd-strip-x{margin-left:auto; border:0; background:transparent; cursor:pointer; font-size:20px;
  line-height:1; color:var(--slate-2); padding:2px 6px; border-radius:8px;}
.bd-strip-x:hover{background:rgba(15,23,42,.06); color:var(--slate);}

/* Вікно іменинника лишається СВІТЛИМ — власник, 22.09.2026, після першого показу: «вікно
   з тортом привітання не треба темним». Темним натомість приходить сповіщення про
   побажання (.task-popup--birthday_wish нижче): там темне тло виділяє привітання серед
   робочих карток, а тут воно перетворювало б свято на жалобу. */
.bd-wishes{border-top-color:var(--sky-line) !important;}
.bd-wishes-head{color:var(--slate-2) !important;}
.bd-wish{background:var(--sky) !important;}
.bd-wish-text{color:var(--slate) !important;}
.bd-wish-from{color:var(--slate-2) !important;}
.bd-strip-wish{margin-left:auto; flex-shrink:0;}
.bd-wishes{margin:18px 0 20px; max-height:34vh; overflow:auto; text-align:left;
  border-top:1px solid rgba(255,255,255,.12); padding-top:14px;}
.bd-wishes-head{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#8D9AC0; margin-bottom:10px;}
.bd-wish{background:rgba(255,255,255,.06); border-radius:12px; padding:10px 12px; margin-bottom:8px;}
.bd-wish-text{margin:0; font-size:14px; line-height:1.45; color:#EEF2FF; white-space:pre-line;}
.bd-wish-from{margin:6px 0 0; font-size:12px; color:#8D9AC0;}
.bd-wish-modal{max-width:520px;}
.bd-anon{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:var(--slate-2); cursor:pointer;}
.bd-sent{margin:0; font-size:15px; text-align:center; padding:18px 0;}

/* Сповіщення «вас привітали». Воно й так темне, як усі спливні картки, — але має одразу
   читатись як свято, а не як чергова задача: теплий відблиск, золота рамка й торт замість
   галочки. Власник, 22.09.2026: «його треба якось помітити, щоб було видно, що це
   привітання, а не просто якась задача». */
.task-popup--birthday_wish{
  border-color:rgba(255,209,102,.45);
  background:linear-gradient(135deg, #1B1430 0%, #241A3A 60%, #2E1F3D 100%);
}
.task-popup--birthday_wish .task-popup-glow{
  background:radial-gradient(150px 110px at -10% -10%, rgba(255,209,102,.40), transparent 70%);
  opacity:1;
}
.task-popup--birthday_wish .task-popup-ic{color:#FFD166;}
.task-popup--birthday_wish .task-popup-title{color:#FFD166;}


/* ── Перегляд форми USCIS у CRM (UscisFormView.js) ──────────────────────────────────────
   Власник, 22.09: «щоб форма відкривалась прямо в CRM, не скачувалась… і щоб можна було
   обвести місця, де немає інформації». Рамки граф кладуться поверх намальованої сторінки
   за координатами з самого PDF, тож підсвітка не «приблизно там», а рівно по межах графи. */
/* Форма зліва, чат справа — власник, 22.09: «можно чтобы форма была слева, а справа чат,
   и в чат можно писать и просить дозаполнить». Це НЕ модалка поверх усього: переглядач стає
   звичайною лівою колонкою тієї ж сітки, тож чат праворуч лишається справжнім і повністю
   робочим — з історією, вкладеннями і полем вводу.

   Дві помилки, на яких це вже зламалось (22.09, спіймано на проді):
   1) чат посували відступом — відступ ламає grid, і чат виїжджав за край;
   2) список розмов ховали через display:none — і чат, ставши першим елементом сітки,
      перестрибував у ПЕРШУ колонку, під форму, лишаючи другу порожньою. Тому колонку
      чату задаємо явно (grid-column:2), а ширину міряємо у відсотках САМОЇ сторінки,
      а не у vw: у сторінки своя ширина, менша за екран, і 62vw лишали чату 205 пікселів. */
.ufv-backdrop{position:relative; grid-column:1; grid-row:1; min-width:0; min-height:0;
  display:flex; background:none; padding:0; z-index:1;}
.ufv{background:var(--card,#fff); border-radius:14px; width:100%; height:100%;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 10px 34px rgba(12,20,36,.22); border:1px solid var(--sky-line,#e4e9f2);}
.claude-page.has-form-view{grid-template-columns:minmax(0,1.25fr) minmax(340px,1fr);}
.claude-page.has-form-view .claude-sidebar{display:none;}
.claude-page.has-form-view .claude-main{grid-column:2; grid-row:1;}
@media (max-width: 1100px){
  /* На вузькому екрані поруч вони не вміщаються — показуємо саму форму. */
  .claude-page.has-form-view{grid-template-columns:1fr;}
  .claude-page.has-form-view .claude-main{display:none;}
}
.ufv-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--sky-line,#e4e9f2);}
.ufv-tools{display:flex; gap:6px; align-items:center; flex-shrink:0;}
.ufv-chip{display:inline-block; margin-right:8px; padding:1px 8px; border-radius:99px; font-size:12px;}
.ufv-chip.is-clipped{background:#fdecea; color:#b3261e;}
.ufv-chip.is-missing{background:#fff5e0; color:#8a5a00;}
.ufv-chip.is-review{background:#eef2ff; color:#3a45a8;}
.ufv-body{flex:1; min-height:0; display:flex;}
.ufv-pages{flex:1; min-width:0; overflow:auto; padding:14px; background:var(--sky,#f2f6fc);}
/* Правий стовп переглядача прибрано 22.09 — поруч стоїть справжній чат, друга панель
   лише забирала місце у сторінок форми. Лишився тонкий рядок про обрану графу. */
.ufv-fieldbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:7px 14px; border-bottom:1px solid var(--sky-line,#e4e9f2);
  background:var(--sky,#f2f6fc); font-size:13px;}
.ufv-fieldbar b{font-weight:600; color:var(--ink);}
.ufv-side-head{font:600 14px/1.3 var(--font-body); color:var(--ink);}
.ufv-field{padding:8px 10px; border:1px solid var(--sky-line,#e4e9f2); border-radius:10px;}
.ufv-note{min-height:74px; resize:vertical; width:100%;}
.ufv-saved{padding:8px 10px; border:1px solid #cfe3cf; background:#f3faf3; border-radius:10px;}
/* Обрана графа світиться синім — власник, 22.09: «когда нажимаешь на графу и пишешь,
   пусть графа светится синим». Без цього, перевівши очі в бічну панель і назад, уже не
   знайдеш на сторінці ту саму графу. Сильніше за кольори станів, тому !important. */
.ufv-box.is-picked{border-color:var(--visa,#A85F1F) !important;
  background:rgba(168,95,31,.20) !important;
  box-shadow:0 0 0 2px rgba(168,95,31,.35);}
.ufv-tabs{display:flex; gap:6px;}
.ufv-saverow{display:flex; gap:6px; margin-top:6px;}
.ufv-saverow .btn{flex:1;}
.ufv-tabs .btn{flex:1;}
/* Вписане вручну видно одразу поверх графи, до перегенерації файла. Зелений, а не чорний —
   щоб було видно, що це ще не те, що лежить у PDF (власник, 22.09: «если вписал, пусть
   сразу появится»). */
/* Тло непрозоре: під рамкою на canvas намальоване СТАРЕ значення, і крізь напівпрозорий
   фон воно просвічувало — два тексти один поверх одного (власник, 22.09, знімок із
   «Oracle Certified Professional» поверх іншого рядка). */
/* Вписане CLAUDE — синім, щоб з першого погляду було видно, де твоя правка, а де його.
   Тло непрозоре: під рамкою на canvas лишається стара (порожня) графа. */
.ufv-box.is-fromclaude{background:#e8eefc !important; border-color:var(--visa,#A85F1F) !important;
  color:#16306e; font:600 11px/1 var(--font-mono, ui-monospace, monospace);
  display:flex; align-items:center; padding:0 3px; overflow:hidden; white-space:nowrap;}
.ufv-box.is-typed{background:#eaf7ee !important; border-color:#1b7f3b !important;
  color:#14532d; font:600 11px/1 var(--font-mono, ui-monospace, monospace);
  display:flex; align-items:center; padding:0 3px; overflow:hidden; white-space:nowrap;}
/* Рядок «що Claude робить зараз». Три крапки лишились, але тепер вони живі й поруч із
   людськими словами («записую відповіді в анкету…»), а не самі по собі: людина має бачити
   різницю між «система думає» і «система зависла» (власник, 23.09). */
.claude-working{display:flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:14px;}
.claude-working__dots{display:inline-flex; gap:4px;}
.claude-working__dots i{width:5px; height:5px; border-radius:50%; background:currentColor;
  opacity:.35; animation:claude-dot 1.1s ease-in-out infinite;}
.claude-working__dots i:nth-child(2){animation-delay:.18s;}
.claude-working__dots i:nth-child(3){animation-delay:.36s;}
@keyframes claude-dot{0%,80%,100%{opacity:.25; transform:translateY(0);} 40%{opacity:1; transform:translateY(-2px);}}
@media (prefers-reduced-motion: reduce){ .claude-working__dots i{animation:none; opacity:.6;} }

/* Вписано в графу, якої НЕМАЄ в мапі: значення піде лише у файл, який завантажиш, і зникне
   при наступній перегенерації. Інший колір — щоб цю різницю було видно очима, а не лише в
   спливаючому написі, який читають один раз (власник, 22.09, відео: вісім таких рядків
   поспіль виглядали як збережені). */
.ufv-box.is-fileonly{background:#fff7e6 !important; border-color:#b8860b !important;
  border-style:dashed !important; color:#6b4e00 !important;}
/* Знята галочка. Непрозорий білий прямокутник поверх клітинки: у самому PDF позначка ще
   намальована (файл зміниться аж при перегенерації), і без цього знята галочка й далі
   видніється — власник, 22.09: «2 галочки… и не убираются». */
.ufv-box.is-cleared{background:#fff !important; border-color:#9aa4b2 !important;
  border-style:dashed !important; color:transparent;}
/* Графа, у якій зараз друкують. Непрозоре тло — щоб старе значення з canvas під рамкою
   не просвічувало крізь те, що набирають. */
.ufv-box.is-editing{background:#fff !important; border-color:var(--visa,#A85F1F) !important;
  box-shadow:0 0 0 2px rgba(168,95,31,.35); color:#0b1626; cursor:text; outline:none;
  font:600 11px/1 var(--font-mono, ui-monospace, monospace);
  display:flex; align-items:center; padding:0 3px; overflow:hidden; white-space:nowrap;}
/* Шар рамок. pointer-events на самому шарі вимкнені, щоб не заважати виділяти текст
   сторінки; вмикаються лише на самих рамках і на час обводки. */
.ufv-layer{position:absolute; left:0; top:0; right:0; bottom:0; pointer-events:none;}
.ufv-box{position:absolute; border-radius:3px; pointer-events:auto; cursor:pointer;
  border:1.5px solid transparent; transition:background .12s, border-color .12s;}
.ufv-box:hover{border-color:var(--visa,#A85F1F); background:rgba(168,95,31,.10);}
.ufv-box.is-clipped{border-color:#b3261e; background:rgba(179,38,30,.16);}
.ufv-box.is-missing{border-color:#e0a300; background:rgba(224,163,0,.18);}
.ufv-box.is-review{border-color:#3a45a8; background:rgba(58,69,168,.12);}
.ufv-lasso{position:absolute; border:1.5px dashed var(--visa,#A85F1F);
  background:rgba(168,95,31,.08); border-radius:4px; pointer-events:none;}
@media (max-width: 900px){
  .ufv-body{flex-direction:column;}
  .ufv-side{width:auto; border-left:0; border-top:1px solid var(--sky-line,#e4e9f2);}
}

/* Підрозділ розділу критерію («I. Legal Standard», «Conclusion»). Розділ за фірмовим
   стандартом складається з таких підрозділів, і на екрані вони мусять читатися як структура,
   а не як абзац, що випадково почався з римської цифри. */
.pw-sub-heading{margin:22px 0 8px;font:700 12.5px/1.45 var(--font-body);color:var(--ink);letter-spacing:.01em}
.pw-sub-heading:first-child{margin-top:6px}
/* Запит на перенесення дедлайну ПОДАЧІ — окремий рядок у шапці картки клієнта.
   flex-basis:100% усередині .client-head-row (flex-wrap) — тобто смуга сама стає власним
   рядком під датами, не ламаючи сітку комірок і не вимагаючи окремого контейнера. */
/* max-width і min-width:0 тут — не косметика.
   Валерія, 28.09.2026: «в мене недоступна кнопка „Погодити" — вона виходить за поле
   видимості». Відтворено на 1280 px: смуга розтягувалась до 1380 px усередині контейнера
   на 896, і кнопки опинялись на x≈1515 — фізично за краєм екрана, доскролити до них
   неможливо, бо сторінка по горизонталі не гортається. Причина — flex-елемент без
   min-width:0 не стискається вужче за свій вміст, а вміст тут довгий коментар проджекта.
   Тепер смуга не ширша за контейнер, а зайве ховає три крапки в тексті. */
.deadline-request-bar{
  flex:1 1 100%; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  min-width:0; max-width:100%; box-sizing:border-box;
  border:1px solid var(--stamp-line, var(--sky-line)); border-left:3px solid var(--stamp);
  background:var(--paper, #fff); border-radius:var(--radius-sm, 10px); padding:10px 14px;
}
/* 200px, а не 320: із більшою основою текст не поступався місцем кнопкам на вузькому
   екрані, і вони переносились аж за край. */
.deadline-request-bar__text{display:flex; flex-direction:column; gap:3px; flex:1 1 200px; min-width:0;}
.deadline-request-bar__text b{font:700 12.5px/1.4 var(--font-body); color:var(--ink);}
/* Коментар проджекта буває довгим. Раніше він обрізався в один рядок трьома крапками — а
   в цьому рядку стоїть саме те, заради чого керівник і натискає «Погодити»: чому переносять
   дедлайн. Читати рішення по половині речення не можна, тому даємо три рядки, і лише далі
   обрізаємо; повний текст — у title (він тепер справді проставлений у шаблоні). */
.deadline-request-bar__why{display:flex; align-items:flex-start; gap:6px; min-width:0;}
.deadline-request-bar__why .pill{flex:0 0 auto;}
.deadline-request-bar__reason{
  font:400 11.5px/1.45 var(--font-body); color:var(--slate); min-width:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden; overflow-wrap:anywhere;
}
/* Смуга «пишу причину» лишається однорядковою — там підказка, а не текст для рішення. */
.deadline-request-bar--ask .deadline-request-bar__text span{
  font:400 11.5px/1.45 var(--font-body); color:var(--slate);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.deadline-request-bar__acts{display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap;}
/* Стан «пишу причину» — та сама смуга, лише з полем. Синя ліва межа замість помаранчевої:
   помаранчева означає «хтось чекає на рішення», а тут ще ніхто нічого не чекає. */
.deadline-request-bar--ask{border-left-color:var(--visa);}
.deadline-request-bar__input{
  flex:1 1 260px; min-width:0; height:32px; padding:0 10px;
  border:1px solid var(--sky-line); border-radius:8px; background:#fff;
  font:400 12px/1.4 var(--font-body); color:var(--ink);
}
.deadline-request-bar__input:focus{border-color:var(--visa); outline:none;}

/* Смужка у вікні причини: пояснює, що зараз буде запит, а не збереження. */
.deadline-approval-note{
  display:flex; gap:9px; align-items:flex-start; margin-top:12px; padding:9px 11px;
  background:var(--sky); border:1px solid var(--sky-line); border-radius:9px;
  font:400 11.5px/1.5 var(--font-body); color:var(--slate);
}
.deadline-approval-note svg{width:15px; height:15px; flex-shrink:0; margin-top:1px;}
/* Вихід із внутрішнього перегляду дашборда клієнта. Плаваюча, бо шапки CRM на цьому екрані
   немає навмисно (його показують клієнту на дзвінку), а вихід потрібен співробітнику. */
.dashboard-exit{
  position:fixed; top:14px; left:14px; z-index:60;
  box-shadow:0 2px 10px rgba(16,24,40,.12);
}
@media (max-width:640px){ .dashboard-exit{top:10px; left:10px; padding:6px 10px; font-size:12px;} }
/* Вичитка згенерованого документа: текст ліворуч, правки праворуч. Два стовпці, бо саме
   так людина й працює — читає й одразу каже, що не так (власник, 24.09). На вузькому екрані
   стають один під одним: документ зверху, правки знизу. */
.pdv .pdv-shell{
  background:var(--paper,#fff); border-radius:var(--radius-md,14px); width:min(1280px,96vw);
  height:min(92vh,980px); display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 18px 60px rgba(16,24,40,.22);
}
.pdv-head{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--sky-line);}
.pdv-head__title{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.pdv-head__title b{font:700 14px/1.35 var(--font-body); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pdv-status{font:600 11px/1 var(--font-body); border-radius:100px; padding:6px 10px; white-space:nowrap;}
.pdv-status.is-good{background:var(--good-soft); color:var(--good);}
.pdv-status.is-warn{background:var(--amber-soft); color:var(--amber);}
.pdv-status.is-bad{background:var(--stamp-soft); color:var(--stamp);}

.pdv-body{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 340px;}
.pdv-doc{overflow-y:auto; padding:22px 26px 30px; background:var(--sky);}
.pdv-paper{
  background:#fff; color:#151A21; max-width:74ch; margin:0 auto; padding:34px 38px;
  border:1px solid var(--sky-line); border-radius:8px; font:400 14.5px/1.65 var(--font-body);
}
.pdv-paper h1,.pdv-paper h2,.pdv-paper h3{font-weight:700; line-height:1.3; margin:20px 0 8px;}
.pdv-paper h1{font-size:19px;} .pdv-paper h2{font-size:16px;} .pdv-paper h3{font-size:14.5px;}
.pdv-paper p{margin:0 0 11px;}
.pdv-paper table{border-collapse:collapse; width:100%; margin:12px 0;}
.pdv-paper td,.pdv-paper th{border:1px solid #DDE3EA; padding:6px 8px; font-size:13px;}
.pdv-paper img{max-width:100%; height:auto;}
.pdv-more{display:block; margin:16px auto 0;}
.pdv-note{padding:40px 20px; text-align:center; color:var(--slate); font:400 13px/1.6 var(--font-body);
          display:flex; flex-direction:column; gap:12px; align-items:center;}
.pdv-note--bad{color:var(--stamp);}

.pdv-side{border-left:1px solid var(--sky-line); display:flex; flex-direction:column; min-height:0; background:var(--paper,#fff);}
.pdv-side__scroll{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:16px;}
.pdv-gaps h4,.pdv-sent h4{font:700 11px/1 var(--font-body); letter-spacing:.06em; text-transform:uppercase;
                          color:var(--amber); margin:0 0 9px;}
.pdv-sent h4{color:var(--slate);}
.pdv-gaps ul{margin:0 0 12px; padding-left:17px; display:flex; flex-direction:column; gap:6px;}
.pdv-gaps li{font:400 12.5px/1.5 var(--font-body); color:var(--slate);}
.pdv-gaps--ok{font:400 12.5px/1.5 var(--font-body); color:var(--good);}
.pdv-sent p{margin:0 0 7px; font:400 12.5px/1.5 var(--font-body); color:var(--ink-soft);
            background:var(--sky); border-radius:8px; padding:8px 10px;}

.pdv-ask{border-top:1px solid var(--sky-line); padding:12px 14px; display:flex; flex-direction:column; gap:8px;}
.pdv-ask textarea{width:100%; resize:vertical; border:1px solid var(--sky-line); border-radius:9px;
                  padding:9px 11px; font:400 13px/1.5 var(--font-body); color:var(--ink);}
.pdv-ask textarea:focus{border-color:var(--visa); outline:none;}
.pdv-ask__row{display:flex; align-items:center; justify-content:space-between; gap:10px;}

@media (max-width:900px){
  .pdv .pdv-shell{width:100vw; height:100vh; border-radius:0;}
  .pdv-body{grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto;}
  .pdv-side{border-left:none; border-top:1px solid var(--sky-line); max-height:46vh;}
  .pdv-doc{padding:14px;} .pdv-paper{padding:20px 18px;}
}
/* ===== Одна мова елементів керування ==========================================
   Власник, 28.09.2026: «як дешева адмінка на WordPress, а треба як монобанк… везде
   хорошие отступы, все оно благородно смотрится».
   Заміряно на «Клієнтах» до правки: у одному ряду фільтрів стояло шість елементів
   із висотами 32/37/38/39 px, кеглями 12.5/13/14/14.5, білим і сірим фоном упереміш
   і одним моноширинним шрифтом. Кожен окремо виглядав нормально — разом вони й
   читались як зібране з різних місць.
   Тут задано геометрію, а не поведінку: жоден компонент не переписано.
   Різниця лишилась одна й навмисна: сегментований перемикач (одне з кількох) має
   білий «піднятий» активний стан, чіп (кілька з кількох) — суцільну заливку. Це не
   різні мови, це різні слова: вибір і набір — різні дії. */
.crm-toolbar{
  --ctl-h:38px; --ctl-r:10px; --ctl-fs:13.5px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  justify-content:flex-end; width:100%; row-gap:10px;
}
.crm-toolbar select,
.crm-toolbar .csel-trigger,
.crm-toolbar .role-switch,
.crm-toolbar > .btn{
  height:var(--ctl-h); min-height:var(--ctl-h); border-radius:var(--ctl-r);
  font-size:var(--ctl-fs); font-family:var(--font-body); font-weight:600;
  padding-top:0; padding-bottom:0;
}
.crm-toolbar select,
.crm-toolbar .csel-trigger{
  background:var(--sky); border:1px solid var(--sky-line); color:var(--ink-soft);
}
/* Кнопка-вихід із фільтра («Фільтри», «Усі етапи») — той самий силует, що й у випадайок:
   у ряду вони стоять поруч і роблять одну роботу, тож і виглядати мають однаково. */
.crm-toolbar > .btn-outline{
  background:var(--sky); border:1px solid var(--sky-line); color:var(--ink-soft);
}
.crm-toolbar > .btn-outline:hover,
.crm-toolbar select:hover,
.crm-toolbar .csel-trigger:hover{border-color:var(--visa); color:var(--ink);}
.crm-toolbar .role-switch{padding:3px; gap:2px;}
.crm-toolbar .role-switch button{
  height:calc(var(--ctl-h) - 8px); padding:0 12px; font-size:var(--ctl-fs); border-radius:7px;
}
/* Моноширинний шрифт у фільтрі нічого не вирівнює — тут немає колонки цифр. */
.crm-toolbar select.mono{font-family:var(--font-body);}

/* Чіпи — та сама геометрія, що й у решти керування. Круглі «таблетки» серед прямокутних
   випадайок були другою мовою на тому самому екрані. */
.filter-chip{border-radius:10px; min-height:34px; padding:0 13px; font-size:13px; font-weight:600;}
.filter-chips{gap:8px;}

/* «Коротко» — переказ анкети. Візуально це НЕ анкета: інший фон і ліва межа кажуть, що
   текст нижче написала машина, а не клієнт. Плутати їх не можна — в петицію їдуть слова
   людини, і блок мусить сам про це нагадувати, а не покладатись на памʼять читача. */
.brief-digest{
  background:var(--sky); border:1px solid var(--sky-line); border-left:3px solid var(--visa);
  border-radius:var(--radius-md); padding:12px 14px; margin-bottom:12px;
}
.brief-digest__head{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:8px;}
.brief-digest__title{font:700 13px/1.2 var(--font-body); color:var(--ink);}
.brief-digest__mark{
  font:600 10.5px/1 var(--font-body); text-transform:uppercase; letter-spacing:.04em;
  color:var(--slate); background:var(--paper); border:1px solid var(--sky-line);
  border-radius:6px; padding:4px 7px;
}
.brief-digest__stale{
  font:600 10.5px/1 var(--font-body); color:var(--amber);
  background:var(--amber-soft, #fdf3e3); border-radius:6px; padding:4px 7px;
}
.brief-digest__body{
  font:400 13.5px/1.65 var(--font-body); color:var(--ink); white-space:pre-line;
}
.brief-digest__by{margin:8px 0 0; font-size:11px; color:var(--slate-2);}

/* «Виконано» в рядку задачі. Зелена рамка, а не суцільна заливка: у рядку вже є яскрава
   плашка статусу, і друга пляма кольору поруч змагалася б із нею за увагу. Слово тут
   важливіше за колір — саме його шукають очима. */
.btn-done{
  border:1px solid var(--good); background:var(--good-soft, #e8f6ee); color:var(--good);
  font-weight:600; white-space:nowrap; gap:6px;
}
.btn-done:hover{background:var(--good); color:#fff;}
.btn-done__ic{display:inline-flex;}
.btn-done__ic svg{width:14px; height:14px;}

/* «Внесено» під сумою угоди в списку клієнтів. Сума — темніша й важча, розбивка по
   транзакціях — світліша й в один рядок із трьома крапками: вона потрібна, щоб зрозуміти,
   ЯК склалась сума, а не щоб її читали щоразу. */
.paid-line{display:flex; align-items:baseline; gap:7px; margin-top:3px; min-width:0; font-size:11.5px;}
.paid-line__sum{color:var(--good); font-weight:700;}
.paid-line__parts{color:var(--slate-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.paid-line__none{color:var(--slate-2);}

/* Видалення в журналі змін. Не заливка на весь рядок, а червона смуга ліворуч і червоний
   підпис дії: журнал читають рядок за рядком, і суцільний червоний фон кричав би гучніше за
   сам текст. */
.audit-row--danger{box-shadow:inset 3px 0 0 var(--stamp); padding-left:10px; background:color-mix(in srgb, var(--stamp) 5%, transparent);}
.audit-row--danger b{color:var(--ink);}
.audit-row--danger > div:first-child{color:var(--stamp);}

/* Значок типу файла в пошуку по файлах клієнтів: «DOCX» у чотири літери не влазить у
   стандартний кегль аватарки й переносився в два рядки. */
.avatar.file-kind{font-size:9.5px; font-weight:800; letter-spacing:.02em; white-space:nowrap;}

/* ===== ТЕЛЕФОН: нижнє меню й безпечні зони ==============================================
   Власник, 30.09.2026: «щоб було максимально зручно з телефона… як застосунок».
   Три речі, без яких «як застосунок» не буває:
     • меню ВНИЗУ — великий палець дістає низ екрана, а не верх;
     • env(safe-area-inset-bottom) — інакше на айфоні смужка «додому» накриває нижній ряд,
       і нижні кнопки просто неможливо натиснути;
     • область натискання 44 px — менше пальцем не влучиш, це не estetика, а робота. */
.mobile-tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  display:none; align-items:stretch;
  background:var(--paper); border-top:1px solid var(--sky-line);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  box-shadow:0 -6px 24px rgba(16,32,64,.07);
}
.mobile-tab{
  flex:1 1 0; min-width:0; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:56px; padding:7px 2px 6px;
  border:0; background:none; cursor:pointer; color:var(--slate);
  font:600 10.5px/1.15 var(--font-body);
}
.mobile-tab-ic{display:flex;}
.mobile-tab-ic svg{width:21px; height:21px;}
.mobile-tab-lbl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.mobile-tab.on{color:var(--visa);}
/* Крапка «є нові задачі» — там само, де й у бічній рейці. */
.mobile-tab-dot{
  position:absolute; top:8px; left:calc(50% + 9px);
  width:7px; height:7px; border-radius:50%; background:var(--stamp);
}

@media (max-width:720px){
  .mobile-tabs{display:flex;}
  /* Місце під меню, щоб останній рядок сторінки не ховався під ним. */
  .view{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px));}
  /* Верх — під виріз екрана. */
  .topbar{padding-top:env(safe-area-inset-top, 0px);}

  /* ПАЛЬЦІ, НЕ КУРСОР. Нижче — не косметика: кнопка 28 px на телефоні промахується
     приблизно кожен третій раз, і людина тисне сусідню. */
  .btn, .icon-btn, .presence-tab, .filter-chip, .tab{min-height:44px;}
  .icon-btn{min-width:44px;}
  .btn-sm{min-height:40px;}

  /* iOS сам збільшує сторінку, якщо в полі шрифт менший за 16 px, — і людина опиняється
     в перекошеному екрані, з якого треба вибиратись двома пальцями. */
  input, select, textarea{font-size:16px;}

  /* Таблиці на вузькому екрані дають горизонтальну прокрутку — найгірше, що буває на
     телефоні. Дозволяємо самій таблиці гортатись усередині своєї рамки, а не тягнути
     всю сторінку вбік. */
  .payroll-table, table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}

  /* ШАПКА НЕ ЛІЗЕ ПІД ВИРІЗ. height:64px був жорсткий, тож padding зсередини нічого не
     давав: іконки лишались під «динамічним островом». Висота тепер росте на висоту вирізу. */
  .topbar{height:auto; min-height:calc(64px + env(safe-area-inset-top, 0px));
    padding-top:env(safe-area-inset-top, 0px);}

  /* РЯДОК ЗАДАЧІ — В СТОВПЧИК. Горизонтально він не вміщається ніколи: дата 212 px, кнопка,
     пілюля статусу. Замість того щоб чавити назву в нуль, переносимо все вниз. */
  .row-item{flex-wrap:wrap; gap:8px 10px;}
  /* Селектор по КЛАСУ, не по інлайн-стилю: браузер нормалізує style="flex:1" у
     "flex: 1" із пробілом, і [style*="flex:1"] не збігався ніколи — правило мовчки не
     працювало, а назва задачі й далі сипалась по літері в рядок. */
  .task-main{flex:1 1 100%; min-width:0;}
  .task-dl-col{width:auto; flex:1 1 auto; text-align:left;}
  .task-dl-col .mono{white-space:normal;}
  /* Статус і дії — окремим рядком під назвою, а не втиснуті збоку. */
  .row-item > .pill{order:5;}
  .row-item > .btn, .row-item > .icon-btn{order:6;}

  /* Панель фільтрів на телефоні — один рядок, що гортається вбік, а не чотири ряди, які
     зʼїдають пів екрана до першого клієнта. Той самий візерунок, що в застосунках: усе
     на місці, просто не все видно одразу. */
  .crm-toolbar{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    justify-content:flex-start; padding-bottom:4px; scrollbar-width:none;}
  .crm-toolbar::-webkit-scrollbar{display:none;}
  .crm-toolbar > *{flex:0 0 auto;}

  /* Список клієнтів картками. Ті самі дані, що в таблиці, лише вертикально: імʼя великим,
     під ним тип і етап, сума праворуч. Уся картка — одна ціль натискання. */
  .client-cards{display:flex; flex-direction:column;}
  .client-card-row{
    padding:13px 2px; border-bottom:1px solid var(--sky-line); cursor:pointer;
    display:flex; flex-direction:column; gap:5px; min-height:44px;
  }
  .client-card-row:last-child{border-bottom:none;}
  .client-card-row:active{background:var(--sky);}
  .ccr-top{display:flex; align-items:baseline; gap:10px;}
  .ccr-name{flex:1; min-width:0; font:650 15px/1.3 var(--font-body); color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ccr-sum{flex-shrink:0; font-weight:700; font-size:13.5px; color:var(--ink);}
  .ccr-line{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
    font-size:12px; line-height:1.45; color:var(--slate); min-width:0;}
  .ccr-paid{color:var(--good); font-weight:600;}
}

/* ===== ТЕЛЕФОН: примітиви розкладки =====================================================
   Власник, 30.09.2026, побачивши CRM з телефона: «виглядає як дешева адмінка зі злетілими
   стилями… якщо лишити таку систему перевірки, мені треба буде писати тобі сорок правок.
   Ти повинен, у принципі, поміняти систему побудови CRM і її перевірки — на мобільній».

   Він правий, і причина тих сорока правок ОДНА, повторена на кожному екрані: ряд керування
   написаний як <div style="display:flex; gap:10px">. На компі він поміщається, на 390 px —
   ні, і діти виїжджають за правий край. Сторінка при цьому НЕ гортається (у .main стоїть
   overflow-x:hidden), тож зайве не видно НІДЕ — ні оком, ні на знімку, ні старою перевіркою
   «чи гортається сторінка». Кнопки «Додати завдання» на телефоні просто не існувало: вона
   стояла на 984-му пікселі 390-піксельного екрана.

   Те саме з сітками: style="grid-template-columns:repeat(3,1fr)". 1fr — це minmax(auto,1fr),
   і колонка не має права стати вужчою за найдовше слово всередині. Прізвище «Клодницький»
   розпирає колонку, три колонки стають ширшими за екран, і третя людина зникає, а імена в
   перших двох ламаються посеред слова: «Владисл ав Проценк о».

   Тому нижче не сорок правок, а три примітиви. Правило просте: НОВИЙ РЯД КНОПОК — .ctl-row,
   НОВА СМУГА ВКЛАДОК — .ctl-tabs, НОВА СІТКА КАРТОК — .auto-cols. Інлайн-стилями рядів і
   сіток більше не роблять: саме вони й дали ті сорок правок.
   Перевіряє це `node agent/mobile-check.mjs` — прохід по всіх мобільних екранах телефоном.
*/

/* 1. РЯД КЕРУВАННЯ — кнопки й фільтри праворуч від заголовка сторінки.
      На телефоні переноситься, а не виїжджає: краще три ряди кнопок, ніж кнопка, якої
      немає. Саме перенесення, а не гортання: у ряді є головна дія («Додати завдання»), і
      сховати її за горизонтальний скрол — те саме, що сховати зовсім. */
.ctl-row{display:flex; align-items:center; gap:10px; min-width:0;}

/* 2. СМУГА ВКЛАДОК — однорідні перемикачі, де немає головного. Отут гортання доречне:
      візерунок знайомий із застосунків, і він не з'їдає пів екрана до першої картки. */
.ctl-tabs{display:flex; align-items:center; gap:6px; min-width:0;}

/* Верх картки клієнта: фото — імʼя, тип, етап, статус. Клас, а не інлайн-flex, бо на
   телефоні цей блок поводиться інакше: колонка праворуч від фото стає чотирирядковою, і
   при align-items:center фото з'їжджає їй на середину — виглядає так, ніби воно нізвідки.
   На телефоні фото лишається біля ІМЕНІ, вгорі. */
.client-head-id{display:flex; gap:16px; align-items:center; min-width:0;}
.client-head-info{min-width:0;}
@media (max-width:720px){
  .client-head-id{align-items:flex-start; gap:12px; width:100%;}
  .client-head-info{flex:1 1 0;}
}

/* Рядок журналу платежів. Колонки — класами, бо на телефоні вони поводяться інакше:
   на компі це таблиця з фіксованими стовпцями, на 390 px — картка в кілька рядків.
   Інлайн width:150px/170px/130px з'їдали всю ширину, а колонці з імʼям лишалось
   14 пікселів: «Victor Shmatko» ставав вертикальною стрічкою на 158 px заввишки, а тип
   візи «EB-2 NIW» — стовпчиком із літер. Власник надіслав знімок саме цього екрана. */
.fin-pay-src{width:150px; flex-shrink:0; min-width:0;}
.fin-pay-acc{width:170px; flex-shrink:0;}
.fin-pay-sum{width:130px; flex-shrink:0; text-align:right; font-weight:700;}
.fin-pay-status{width:150px; flex-shrink:0; justify-content:center;}

/* 5. ГОЛОВНА КОЛОНКА РЯДКА СПИСКУ — назва задачі, ім'я людини, заголовок платежу.
      Пишеться КЛАСОМ, а не style="flex:1". Причина не в охайності: inline flex:1 не
      ставить min-width:0, і на вузькому екрані колонка стискається до одної літери в
      рядок — «Проджект-менеджмент» стає вертикальною стрічкою на весь екран. Уже
      обпікались на цьому в задачах (.task-main) і в зарплатах. */
.row-main{flex:1; min-width:0;}

/* 4. ГРУПА, ЯКУ НЕ МОЖНА РОЗРИВАТИ — «‹ вересень 2026 ›», «з … по …», пара «так/ні».
      Окремими сусідами в ряду, що переноситься, вони розʼїжджаються по різних рядках і
      перестають читатись як один орган керування. */
.ctl-group{display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; flex-wrap:nowrap; min-width:0;}
.cal-month{min-width:170px;}

/* 3. СІТКА КАРТОК, ЯКА НЕ ВМІЄ ВИЛІЗТИ. min(100%, --col) — те, чого бракувало: колонка
      ніколи не ширша за контейнер, тож сітка згортається сама на БУДЬ-ЯКІЙ ширині, і для
      цього не потрібен жоден медіа-запит. Колонку задають через --col. */
.auto-cols{display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--col, 240px)), 1fr));}

@media (max-width:720px){
  .ctl-row{width:100%; flex:1 1 100%; flex-wrap:wrap; gap:8px;}
  /* Випадайки в ряду керування — однакової ширини, а не «кожна по своєму слову». Три
     фільтри різної довжини, поставлені поруч, читаються як недороблена форма; однакові
     половинки читаються як форма. */
  .ctl-row > select, .ctl-row > input{flex:1 1 140px; min-width:0; width:auto;}
  .row-main{flex:1 1 100%;}
  /* Головна дія — на всю ширину й останнім рядком: на телефоні її шукають унизу блоку
     керування, а не між двома фільтрами. */
  .ctl-row > .btn-primary{flex:1 1 100%; justify-content:center; order:9;}
  /* Той самий ряд у шапці сторінки, навіть коли клас іще не проставлений: .page-head
     .flex-between — це наша ж дизайн-система, і правило працює на всіх 21 сторінці, які її
     вживають, і на тих, які ще напишуть. */
  .page-head.flex-between > div{min-width:0; max-width:100%;}
  .page-head.flex-between > div + div{width:100%; flex:1 1 100%; flex-wrap:wrap; gap:8px;}

  .ctl-tabs{width:100%; flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    scrollbar-width:none; padding-bottom:2px;}
  .ctl-tabs::-webkit-scrollbar{display:none;}
  .ctl-tabs > *{flex:0 0 auto;}

  /* Перемикач «Мої / Поставлені» — той самий випадок: два підписи в один рядок не влазять,
     і кожен ламається посеред слова.
     flex:1 0 auto, а не 1 1 0 — у цьому й уся хитрість. Де перемикачів два, вони
     розтягуються на пів рядка кожен і виглядають як належить. Де їх чотири («Усі /
     Непрочитані / Особисто мені / За відділом»), вони НЕ стискаються нижче свого напису —
     смуга просто починає гортатись. Стискання давало «Особисто» / «мені» двома рядками
     різної висоти: саме те, від чого екран читається як зламаний. */
  .role-switch{width:100%; flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .role-switch::-webkit-scrollbar{display:none;}
  .role-switch button{flex:1 0 auto; min-height:40px; text-align:center; white-space:nowrap;}

  /* Дія сторінки, написана прямо в шапці кнопкою (без обгортки), — окремим рядком на всю
     ширину. Поруч із заголовком вона тулиться в 40 % ширини й ламає напис. */
  .page-head.flex-between > .btn{width:100%; justify-content:center; margin-top:4px;}

  /* Сітки, оголошені жорсткими колонками, — в одну. Перелік, а не «усі сітки підряд»:
     частина двоколонкових на телефоні зроблена НАВМИСНО (плитки показників, партнерські
     частки), і згорнути їх означало б зіпсувати те, що працює. */
  .dep-grid, .clock-grid, .clock-add-grid, .emp-cols, .cplace-grid, .cplace-add,
  .plan-stats-row, .prp-group-cards, .contract-sign-columns, .sign-place-switch,
  .fin-detail-grid, .lt-pair, .inv-head, .petition-question-actions, .field-row-2{
    grid-template-columns:1fr !important;
  }

  /* ПЛАТІЖ НА ТЕЛЕФОНІ — КАРТКА, А НЕ СТИСНУТА ТАБЛИЦЯ.
     Порядок читання той, у якому про платіж думають: хто → скільки → коли → звідки →
     на що чекає. Фіксовані ширини знімаємо всі: на 390 px вони лишають імені 14 px. */
  .fin-payment-row{flex-wrap:wrap; gap:4px 10px; align-items:baseline; padding:12px 2px;}
  .fin-pay-who{flex:1 1 auto; order:1;}
  .fin-pay-sum{width:auto; flex:0 0 auto; order:2; font-size:14.5px;}
  .fin-pay-date{flex:1 1 100%; order:3; display:flex; gap:8px; align-items:baseline;}
  .fin-pay-date .hint{margin:0;}
  .fin-pay-src{width:auto; flex:0 0 auto; order:4;}
  .fin-pay-acc{width:auto; flex:1 1 auto; order:5; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .fin-pay-status{width:auto; flex:0 0 auto; order:6;}

  /* Пігулка з довгою назвою («Листи, що виражають зацікавленість») на компі просто довга,
     а на 390 px виїжджає за край разом із хрестиком «видалити» — і видалити критерій
     стає нічим. Дозволяємо їй переноситись усередині себе. */
  .pill{max-width:100%; white-space:normal; height:auto; min-height:24px;}
  /* ВІКНО — ПОВЕРХ УСЬОГО. На компі нижнього меню немає, а мікрофон живе в шапці, тож
     шари .overlay(300)/.drawer(301) нікому не заважали. На телефоні поверх них малюються
     і нижнє меню (900), і плаваючий мікрофон (330): у формі «Додати оплату» мікрофон
     сідав рівно на кнопку «Додати оплату», а нижнє меню перекривало підвал вікна.
     Одне правило на всі вікна CRM, а не на цю одну форму. */
  .overlay{z-index:1200;}
  .drawer{z-index:1201;}
  .voice-panel{z-index:1300;}

  /* НАЛАШТУВАННЯ — ДВА КРОКИ, А НЕ ДВІ ПАНЕЛІ. На 390 px меню з тридцяти розділів
     займає весь екран: людина тисне «Користувачі» й нічого не бачить — вміст лежить під
     меню. Тому спершу список розділів, потім сам розділ із кнопкою «назад». Той самий
     візерунок, що в Налаштуваннях самого телефона. */
  .settings-layout > .card:first-child{display:block; padding:6px;}
  .settings-layout .settings-nav-item{width:100%; flex:none; padding:11px 12px;}
  .settings-layout.m-picked > .card:first-child{display:none;}
  .settings-layout:not(.m-picked) > .card:last-child{display:none;}
  .settings-back{display:flex;}

  /* ШАПКА: ДІЇ ПІД ПАЛЬЦЕМ, А НЕ ПОРОЖНІЙ БАНТ УГОРІ.
     На телефоні з шапки зникають пошук, слоган і мікрофон — усе, що займало середину. Те,
     що лишилось (оновити, дзвіночок, аватар), притискалось до ЛІВОГО краю, і дві третини
     смуги стояли порожні. Виглядало це рівно як «розробник не дивився»: біла смуга 64 px
     ні для чого. Дії їдуть праворуч — там, куди дістає великий палець правої руки, — а
     сама смуга худне: назву розділу однаково видно великим заголовком одразу під нею. */
  .topbar{justify-content:flex-end; min-height:calc(52px + env(safe-area-inset-top, 0px));
    padding-left:14px; padding-right:14px;}
  .topbar > .pop{left:auto; right:0;}

  /* КАЛЕНДАР НА ТЕЛЕФОНІ — КРАПКИ, А НЕ ОГРИЗКИ НАЗВ.
     Сім колонок на 390 px дають клітинку 47 px. Назва події в ній перетворюється на «Н…»,
     «О…», «В…» — формально з трьома крапками, отже «чесно обрізано», а по суті це не
     скорочена назва, а відсутня. Саме таких екранів власник і сказав: «виглядає як дешева
     адмінка зі злетілими стилями».
     Тому в клітинці лишається те, що на 47 px читається: число й кольорові крапки «тут
     щось є, і ось якого роду». Назви цілими — у списку дня під сіткою, який на цій
     сторінці вже є (.cal-side): натиснув день — бачиш усе без обрізання. */
  .cal-events{flex-direction:row; flex-wrap:wrap; gap:3px; align-content:flex-start; margin-top:3px;}
  .cal-ev{width:7px; height:7px; border-radius:50%; padding:0; overflow:hidden;
    font-size:0; line-height:0; color:transparent;}
  .cal-ev.ev-filing{background:var(--stamp);}
  .cal-ev.ev-task{background:var(--visa);}
  .cal-ev.ev-move{background:#D97706;}
  /* «ще 59» ламалось на «ще» / «59» і розпирало клітинку вдвічі. */
  .cal-more{font-size:10px; padding:0; line-height:9px; color:var(--slate);
    flex:1 0 100%; white-space:nowrap; margin-top:1px;}
  .cal-month{min-width:118px; font-size:13.5px;}
  .cal-day{min-height:58px; padding:5px 4px;}
  .cal-grid{gap:4px;}
  .cal-head > div{font-size:11px;}

  /* ПОЛЕ ВВОДУ — ЦІЛЬ ДЛЯ ПАЛЬЦЯ. Одне правило на всі поля CRM, а не по правилу на кожну
     випадайку: .place-pick, .chead-control, вибір етапу, оцінка — усі вони на компі
     робились заввишки 28–32 px під курсор. На телефоні в таке влучають через раз.
     40 px — та сама межа, що й для кнопок. Галочки й перемикачі виключені: у них ціль —
     підпис навколо, і роздувати сам квадратик до 40 px означало б зіпсувати вигляд. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea{min-height:40px;}
  /* Вибір файлу — рідний елемент браузера, 24 px заввишки. Саме ним Настя чіпляє
     скріншоти оплат із телефона по кілька десятків на день, тож це не дрібниця. */
  input[type=file]{padding:8px 10px; display:flex; align-items:center;}
  /* Пігулка-оцінка в шапці картки клієнта: не кнопка, а позначка, яку інколи міняють, —
     тож росте вся пігулка, а випадайка всередині займає її повну висоту. */
  .client-grade-picker{height:40px; padding:0 8px 0 12px; font-size:12.5px;}
  .client-grade-picker select{min-height:38px; height:38px;}

  /* КАРТКА КРИТЕРІЮ НА ТЕЛЕФОНІ. Тека 68×57 і відступи 16/20 писались під широку
     сторінку; на 360 px вони з'їдають третину ширини, назва критерію тулиться у вузьку
     колонку й ламається на два рядки, а картка виростає до двохсот пікселів заввишки
     заради трьох коротких рядків. На знімку це читається як порожній екран із великою
     текою — саме те «виглядає як дешева адмінка», про яке казав власник.
     Тека меншає до значка, відступи стискаються, назві лишається вся ширина. */
  .evidence-card{padding:12px 13px; gap:11px;}
  .crit-folder{width:40px; height:34px;}
  .crit-folder-svg svg{width:40px; height:34px;}
  .crit-folder-check{width:16px; height:16px;}
  .crit-folder-check svg{width:16px; height:16px;}
  .evidence-card h4{font-size:14.5px; line-height:1.25;}
  .evidence-card p{font-size:14px;}
  /* Підпис галочки на картці критерію — дрібніший на рядок, щоб «Не плануємо закривати»
     вміщалось у рядок навіть на 360 px. */
  .evidence-card label{font-size:12.5px;}
  /* А от на сторінці, яку бачить КЛІЄНТ, картка лишається як була. Це вітрина фірми, її
     вигляд затверджували окремо, і власник мене про неї не просив. Стиснення вище —
     для внутрішньої картки, де критеріїв чотирнадцять і їх гортають щодня. */
  .share-screen .evidence-card{padding:16px 20px; gap:18px;}
  .share-screen .crit-folder{width:68px; height:57px;}
  .share-screen .crit-folder-svg svg{width:68px; height:57px;}
  .share-screen .crit-folder-check{width:20px; height:20px;}
  .share-screen .crit-folder-check svg{width:20px; height:20px;}
  .share-screen .evidence-card h4{font-size:15.5px;}
  .share-screen .evidence-card p{font-size:15.5px;}
  .share-screen .evidence-card label{font-size:inherit;}

  /* Позначки «зібрано» й «написано» на картці критерію — 22 px під курсор. Ними
     відмічають роботу по кожному критерію щодня, і промах пальцем тут не косметичний:
     сусідня позначка означає інший стан справи. Кружечок лишається того самого розміру,
     росте лише площа натискання — інакше картка критерію роздулась би вдвічі. */
  .step-check{position:relative;}
  .step-check::after{content:''; position:absolute; inset:-9px; border-radius:50%;}

  /* Посилання-кнопка «що вміє Моніка» під заголовком — текстовий рядок заввишки 18 px.
     Пальцем у такий не влучиш, а виглядати кнопкою він не має: це підказка, не дія. */
  .leader-monica-skills{min-height:40px; display:flex; align-items:center;}

  /* Хрестик на спливній картці «задачу виконано». 20 px під курсор — нормально, пальцем
     у нього не влучиш, а картка сама не зникає, якщо вона «липка» (питання, запит на
     дедлайн). Тобто без цього її не закрити. */
  .task-popup-x{min-width:40px; min-height:40px;}

  /* Галочка з підписом — теж ціль для пальця, хоч і не кнопка. «Зі зміненими дедлайнами»
     і фільтри календаря мали 24 px висоти: у них влучали через раз. */
  label.pill, .ctl-row label, .page-head label, .chead-attorney,
  .evidence-card label, .card label:has(> input[type=checkbox]),
  label:has(> input[type=checkbox]), label:has(> input[type=radio]){
    min-height:40px; display:inline-flex; align-items:center;
  }
  /* :has() тут із запасом, а не замість: він є з iOS 16.4 (весна 2023), і на давнішому
     телефоні правило просто не спрацює. Тому поруч стоять і звичайні класи — вони
     тримають ті самі галочки без :has. */

  /* Таблиця зарплат ширша за телефон завжди — 8 колонок чисел не стиснути. Гортається
     всередині своєї картки; це чесно, бо цифри поруч мають лишатись поруч. */
  .card > .payroll-table{max-width:100%;}
}

/* ===== «Динаміка» дашборда керівника: стовпчики порівняння ==============================
   Власник, 01.10.2026: «всі-всі метрики маємо вміти порівнювати… і в форматі якихось
   стовпчиків теж».

   Шкала — В МЕЖАХ ОДНОГО ПОКАЗНИКА, і це головне рішення тут. Спільна шкала на весь
   екран поставила б довжину стовпчика грошей поруч із довжиною стовпчика задач, і око
   почало б їх порівнювати між собою — а це різні величини, порівнювати їх безглуздо.

   Кольорів «зелене добре / червоне погано» немає: для подач і грошей зростання добре,
   для прострочених задач і боргу — погано. Фарбувати все однаково означало б підказувати
   неправду. Стрілка показує НАПРЯМ, висновок лишається за людиною. */
.dyn-card{margin-bottom:12px;}
.dyn-delta{flex:0 0 auto; font:700 14px/1 var(--font-mono); color:var(--ink-soft); white-space:nowrap;}
.dyn-delta.is-up, .dyn-row-delta.is-up{color:var(--visa);}
.dyn-delta.is-down, .dyn-row-delta.is-down{color:var(--slate);}

.dyn-pair{margin-top:14px; display:flex; flex-direction:column; gap:8px;}
.dyn-bar-row{display:flex; align-items:center; gap:10px;}
.dyn-bar-label{flex:0 0 52px; font-size:12.5px; color:var(--slate);}
.dyn-bar{flex:1 1 auto; min-width:0; height:16px; border-radius:8px; background:var(--sky);
  position:relative; overflow:hidden; display:block;}
.dyn-bar-fill{display:block; height:100%; border-radius:8px; transition:width .25s ease;}
/* «Було» — приглушене, «стало» — акцент: око має одразу знаходити поточне число. Але
   приглушене не означає невидиме: з var(--sky-deep) смужка зливалася з доріжкою, і на
   знімку «було 17» виглядало як порожнє місце. Беремо сірий, що видно на тлі доріжки. */
.dyn-bar-fill.is-before{background:#9fb0cc;}
.dyn-bar-fill.is-now{background:var(--visa);}
.dyn-bar-num{flex:0 0 auto; min-width:86px; text-align:right; font-size:13.5px;}

/* Пара стовпчиків в одному рядку — для розподілів («по проджектах», «по партнерах»).
   Два тонкі стовпчики один над одним читаються як «було/стало» без підписів. */
.dyn-bar--pair{height:16px; display:flex; flex-direction:column; gap:2px; background:transparent; overflow:visible;}
.dyn-bar--pair .dyn-bar-fill{height:7px; border-radius:4px; background:var(--sky);}
.dyn-bar--pair .dyn-bar-fill.is-before{background:#9fb0cc;}
.dyn-bar--pair .dyn-bar-fill.is-now{background:var(--visa);}

.dyn-rows{margin-top:16px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px;}
.dyn-row{display:flex; align-items:center; gap:10px;}
.dyn-row-name{flex:0 0 150px; min-width:0; font-size:13px; color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dyn-row-nums{flex:0 0 auto; min-width:150px; text-align:right; font-size:12.5px; color:var(--slate);}
.dyn-row-delta{margin-left:8px; font-weight:700;}
.dyn-cell{min-width:120px; text-align:right;}
.dyn-cell--wide{min-width:140px;}

@media (max-width:720px){
  /* На телефоні підпис рядка не стискаємо до нитки — він іде окремим рядком над
     стовпчиками, а числа під ними. Той самий принцип, що в журналі платежів. */
  .dyn-row{flex-wrap:wrap; gap:4px 10px;}
  .dyn-row-name{flex:1 1 100%; white-space:normal;}
  .dyn-row-nums{flex:0 0 auto; min-width:0; text-align:left;}
  .dyn-bar--pair{flex:1 1 100%;}
  .dyn-bar-label{flex:0 0 44px;}
  .dyn-bar-num{min-width:0; flex:0 0 auto;}
  .dyn-cell, .dyn-cell--wide{min-width:0; text-align:left;}
}

/* Фільтри сповіщень. Кнопок стало пʼять, і дві з них — «Перенесення дедлайну» та
   «Протерміновані» — довгі: у звичайному .role-switch (flex без переносу) вони на телефоні
   виїжджають за край і стискаються в нечитабельну смужку. Тому окремий модифікатор, а не
   правка .role-switch: той самий ряд у десятку інших місць розрахований на короткі слова. */
.role-switch--wrap{flex-wrap:wrap; row-gap:4px;}
@media (max-width: 720px){
  .role-switch--wrap{width:100%;}
  .role-switch--wrap button{flex:1 1 auto; white-space:nowrap;}
}

/* Рядок «послухати сигнали» розкривається з посилання, а не лежить відкритим поруч із
   фільтрами. Власник, 02.10.2026, прийняв ці пʼять кнопок за фільтри й натискав їх, чекаючи
   на відбір сповіщень: два ряди однакових кнопок одне над одним не розрізнити. */
.snd-try{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:-6px 0 14px;}
.snd-try-link{
  border:none; background:none; padding:0; cursor:pointer; font-family:var(--font-body);
  font-size:12px; color:var(--ink-soft); text-decoration:underline dotted; text-underline-offset:3px;
}
.snd-try-link:hover{color:var(--visa);}

/* Фактичний розподіл у формі кабінету партнера. Окремою рамкою, бо просто під ним стоять
   графи «скільки Garne / скільки партнеру» — зовні такі самі два поля, а сенс інший: там
   скільки ЗАРОБЛЕНО, тут у кого гроші ЛИШИЛИСЬ. Без межі ці дві пари читаються як одна. */
.fact-switch{display:flex; gap:8px; align-items:center; margin:0 0 10px; cursor:pointer; font-size:13px;}
.fact-box{
  border:1px solid var(--amber-soft); background:var(--amber-soft);
  border-radius:12px; padding:14px 14px 4px; margin:0 0 14px;
}
.fact-box .field label{font-size:12px;}
.fact-note{margin:2px 0 10px; color:var(--amber); font-weight:600;}

/* УВАГА: нижче починається компʼютерна розкладка сторінки клієнта, і вона має
   лишатись ОСТАННЬОЮ в цьому файлі. Регресійний тест читає styles.css від
   «.share-screen.sv-desktop{» до кінця файлу й вимагає, щоб кожне правило там
   було привʼязане до .sv-desktop. Нові стилі дописуй ПЕРЕД цим рядком. */
.share-screen.sv-desktop{padding:34px 32px 60px;}



@media (max-width:900px){
  .share-screen.sv-desktop{padding:20px 12px;}
  .share-screen.sv-desktop .share-wrap{gap:16px;}
  .share-screen.sv-desktop .sv-status,
  .share-screen.sv-desktop .brief-cta,
  .share-screen.sv-desktop .sv-tasks,
  .share-screen.sv-desktop .sv-materials{grid-column:1 / -1;}
  .share-screen.sv-desktop .evidence-grid{grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr));}
}

.share-screen.sv-desktop .share-wrap{
  max-width:1320px;
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:18px 20px;
}
/* За замовчуванням КОЖНА дитина — на всю ширину й у своєму місці за порядком розмітки.
   Так новий блок, який тут колись з'явиться, поводиться передбачувано (як і в телефонній
   розкладці), а не провалюється в випадкову половину рядка.
   margin у нуль через !important свідомо: відступи в цій розмітці задані інлайновими
   style="margin-bottom:16px" просто в шаблоні, і перебити їх інакше нема чим. Відстані тут
   тримає gap сітки. */
.share-screen.sv-desktop .share-wrap > *{
  grid-column:1 / -1; order:20;
  margin-top:0 !important; margin-bottom:0 !important;
}
.share-screen.sv-desktop .share-topbar{order:1; margin-bottom:6px !important;}
.share-screen.sv-desktop .sv-status{order:2; grid-column:span 7;}
.share-screen.sv-desktop .brief-cta{order:3; grid-column:span 5;}
.share-screen.sv-desktop .share-docs{order:4;}
.share-screen.sv-desktop .sv-tasks{order:5; grid-column:span 6;}
.share-screen.sv-desktop .sv-materials{order:6; grid-column:span 6;}
/* Парний блок лишився без пари (у клієнта ще немає задач або немає критерію «Додаткові
   матеріали») — половина рядка поруч із порожнечею виглядає як недовантажена сторінка. */
.share-screen.sv-desktop .sv-alone{grid-column:1 / -1;}
/* Заголовок розділу критеріїв — єдине місце, де потрібен більший повітряний зазор: далі
   починається інша частина сторінки, і 18 px gap читаються як «ще одна картка». */
.share-screen.sv-desktop .crit-grid-head{margin-top:16px !important;}

/* Картка клієнта й заклик до брифу стоять в одному рядку — вирівнюємо їх по висоті, щоб це
   читалось як один поверх, а не як дві випадково сусідні картки. */
.share-screen.sv-desktop .sv-status,
.share-screen.sv-desktop .brief-cta{display:flex; flex-direction:column; justify-content:center;}
.share-screen.sv-desktop .brief-cta{padding:26px 28px;}
.share-screen.sv-desktop .sv-status h1{font-size:24.5px;}

/* ── Чек-лист документів сіткою ────────────────────────────────────────────────────────────
   minmax(min(100%, 320px), 1fr) — а не просто 320px: якщо розкладку компа ввімкнути
   примусово на вузькому екрані, колонка звузиться до 100 % і нічого не вилізе за край.
   Це головне правило всього файла для scrollWidth. */
.share-screen.sv-desktop .share-docs-list{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap:14px; align-items:stretch;
}
.share-screen.sv-desktop .share-doc--slot{height:100%;}
/* Кнопка «Завантажити файл» — на одній лінії в усіх картках ряду, незалежно від того, яка
   в них довга підказка. Інакше сітка з шести слотів виглядає як розсипані сходинки. */
.share-screen.sv-desktop .share-doc-actions{margin-top:auto;}

/* ── Плитки критеріїв ────────────────────────────────────────────────────────────────────
   Специфічність тут навмисно вища за @media (max-width:980px){.evidence-grid{...:1fr}}:
   примусова розкладка компа має перемагати ширину вікна, бо її обрала людина. */
.share-screen.sv-desktop .evidence-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
/* 1380 — рівно та ширина, з якої в рядок стають чотири плитки по ~310 px і найдовша назва
   критерію («Оригінальний внесок вагомого значення») ще влазить у два рядки. Нижче цієї
   межі четверта колонка починає різати назви, і три — чесніше. */
@media (min-width:1380px){
  .share-screen.sv-desktop .evidence-grid{grid-template-columns:repeat(4, minmax(0, 1fr));}
}

/* Запобіжник для ПРИМУСОВОЇ розкладки компа на вузькому екрані (?view=desktop, відкрите з
   телефона; або людина сама натиснула перемикач і залишилась). Автоматика сюди не потрапляє
   ніколи — вона нижче 1024 px віддає телефонну розкладку, — але примус має право бути
   виконаним і на 390 px, і там дві половини рядка дають картку завширшки 140 px, з якої
   кнопка «Заповнити бриф» вилазить назовні.
   Тому нижче 900 px ширші за половину блоки просто розкладаються в одну колонку: людина
   отримує найближче до того, що просила, а не поламану сторінку. Щойно екран стане ширшим
   (поворот планшета, більше вікно) — розкладка компа вмикається повністю, клас нікуди не
   дівся. */




















/* ── Шапка й перемикач розкладки ─────────────────────────────────────────────────────────
   Перемикач стоїть у шапці, поруч зі зворотним відліком, — а не в підвалі: якщо автоматика
   вгадала невдало, людина має побачити вихід одразу, а не після п'яти екранів прокрутки. */
.share-topbar-side{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.share-view-toggle{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
  border-radius:999px; border:1px solid var(--sky-line); background:var(--paper);
  color:var(--slate); font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; white-space:nowrap; transition:border-color .15s, color .15s, box-shadow .15s;
}
.share-view-toggle:hover{border-color:var(--visa); color:var(--visa); box-shadow:0 2px 10px rgba(14,165,233,.12);}
.share-view-toggle-emoji{font-size:15px; line-height:1;}

/* Кружок з кількістю задач у лівому меню. Правило .rail-item-badge стоїть у файлі РАНІШЕ
   за .badge-count, специфічність у них однакова (один клас), тож перемагало пізніше —
   і кружок лишався position:absolute з top:-4px, тобто висів над рядком «Завдання»,
   а не стояв у ньому. Тому перевизначення саме тут, у кінці файлу. */
.rail-item .rail-item-badge{
  position:static; top:auto; right:auto;
  margin-left:auto; align-self:center; flex-shrink:0;
}

/* Кнопка «Матеріали по кейсу клієнта» стоїть під іменем клієнта, а не в ряду дій праворуч.
   margin-top відриває її від підпису «EB-1A · Чекаємо на відповіді», щоб вони не читались
   одним блоком; align-self:flex-start — інакше кнопка розтягнулась би на всю колонку. */
.pw-materials-btn{ margin-top:10px; align-self:flex-start; }


/* ===== «Про проєкт» (js/pages/ProjectAbout.js) ===========================================
   Сторінку читає замовник, а не співробітник, тому вона влаштована як документ: колонки
   рівної ваги, багато повітря, жодної щільності робочого екрана. Своїх кольорів немає —
   усе через ті самі токени, тож сторінка однаково виглядає у світлій, темній і нічній. */
.pa-grid-2{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr));
  margin-bottom:16px; align-items:start;
}
.pa-list{list-style:none; margin:0; padding:0; display:grid; gap:11px;}
.pa-list li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start;
  font-size:14.5px; line-height:1.5; color:var(--ink-soft); min-width:0;
}
/* Крапка-маркер, а не bullet: їй можна задати колір за змістом рядка — зроблено, треба
   зробити, лишилось на потім — і тоді список читається без жодного підпису збоку. */
.pa-pip{width:7px; height:7px; border-radius:50%; margin-top:7px; background:var(--visa);}
.pa-pip--ok{background:var(--good);}
.pa-pip--warn{background:var(--stamp);}
.pa-pip--muted{background:var(--slate-2);}

.pa-section-head{margin:26px 0 12px; font-size:17px;}

.pa-facts{
  display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--sky-line);
}
.pa-fact{min-width:0;}
.pa-fact-num{
  font-family:var(--font-mono); font-size:25px; font-weight:600; color:var(--visa-ink);
  line-height:1.1; font-variant-numeric:tabular-nums; margin-bottom:5px;
}
.pa-fact-label{font-size:13px; line-height:1.45; color:var(--slate);}

.pa-sec-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));}
.pa-sec{min-width:0;}
.pa-sec-title{font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:4px;}
.pa-sec-text{font-size:13.5px; line-height:1.55; color:var(--slate);}

.pa-tech{margin-top:16px;}
.pa-tech p{font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0;}

@media (max-width:760px){
  .pa-grid-2{grid-template-columns:minmax(0,1fr);}
  .pa-facts{grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));}
}


/* ===== Довідник вільних зон (js/pages/FreeZones.js) ======================================
   Головне тут — таблиця пакетів, а не картки зон: клієнт приходить з умовами («дві візи,
   до двадцяти тисяч»), а не з назвою зони. Тому фільтри зверху, таблиця одразу під ними,
   а зони — довідкою внизу. */
.fz-filters{display:grid; gap:14px; margin-bottom:12px;}
.fz-filter{display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; align-items:start;}
.fz-filter-label{font-size:13px; font-weight:600; color:var(--slate); padding-top:7px;}
.fz-chips{display:flex; flex-wrap:wrap; gap:6px; min-width:0;}
.fz-chip{
  border:1px solid var(--sky-line); background:var(--paper); color:var(--ink-soft);
  border-radius:999px; padding:5px 12px; font:inherit; font-size:13px; cursor:pointer;
  white-space:nowrap; transition:background .12s, border-color .12s, color .12s;
}
.fz-chip:hover{border-color:var(--visa);}
/* Обраний фільтр заливаємо акцентом, а підпис беремо з --visa-on: акцент ProPart світлий,
   і білий текст на ньому був би нечитабельним. Той самий розрахунок, що в кнопках. */
.fz-chip.on{background:var(--visa); border-color:var(--visa); color:var(--visa-on,#fff); font-weight:600;}

.fz-summary{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 14px 2px; font-size:13.5px; color:var(--slate);
}
.fz-summary b{color:var(--ink);}
.fz-summary-cheap{color:var(--visa-ink); font-weight:600;}
.fz-reset{
  border:none; background:none; color:var(--visa-ink); font:inherit; font-size:13px;
  cursor:pointer; text-decoration:underline; padding:0;
}

/* Таблиця ширша за вузький екран — крутиться всередині своєї коробки, а не тягне сторінку. */
.fz-table-wrap{overflow-x:auto;}
.fz-table{border-collapse:collapse; width:100%; min-width:720px; font-size:13.5px;}
.fz-table th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--slate-2); padding:0 12px 9px; border-bottom:1px solid var(--sky-line); white-space:nowrap;
}
.fz-table td{padding:10px 12px; border-bottom:1px solid var(--sky-line); color:var(--ink-soft);}
.fz-table tr:last-child td{border-bottom:0;}
.fz-table th.num, .fz-table td.num{text-align:right;}
.fz-zone-cell{font-weight:700; color:var(--ink); white-space:nowrap;}
.fz-muted{color:var(--slate-2);}
/* tabular-nums — щоб колонка цін вишикувалась розрядом під розряд, а не «стрибала». */
.fz-price{font-family:var(--font-mono); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;}

.fz-zones-head{margin:26px 0 12px; font-size:17px;}
.fz-zones{display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(255px, 1fr));}
.fz-zone{cursor:pointer; transition:border-color .12s, box-shadow .12s;}
.fz-zone:hover{border-color:var(--visa);}
.fz-zone.on{border-color:var(--visa); box-shadow:0 0 0 1px var(--visa);}
.fz-zone-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.fz-zone-name{font-size:15px; font-weight:700; color:var(--ink);}
.fz-zone-emirate{font-size:11.5px; color:var(--slate-2); white-space:nowrap;}
.fz-zone-full{font-size:12px; color:var(--slate); margin:2px 0 9px; line-height:1.35;}
.fz-zone-str{list-style:none; margin:0; padding:0; display:grid; gap:4px;}
.fz-zone-str li{font-size:12.5px; color:var(--ink-soft); padding-left:11px; position:relative; line-height:1.4;}
.fz-zone-str li::before{
  content:""; position:absolute; left:0; top:7px; width:4px; height:4px;
  border-radius:50%; background:var(--visa);
}

@media (max-width:700px){
  .fz-filter{grid-template-columns:minmax(0,1fr); gap:6px;}
  .fz-filter-label{padding-top:0;}
}


/* ===== Конструктор КП (js/pages/ProposalBuilder.js) ======================================
   Дві колонки: умови ліворуч, підбір праворуч. Умови липкі — менеджер крутить їх під час
   розмови з клієнтом і не має щоразу прокручувати сторінку вгору, щоб змінити бюджет. */
.pb-layout{display:grid; grid-template-columns:minmax(300px, 380px) minmax(0,1fr); gap:16px; align-items:start;}
.pb-need{position:sticky; top:16px; display:grid; gap:16px;}
.pb-field{display:grid; gap:7px; min-width:0;}
.pb-label{font-size:12.5px; font-weight:600; color:var(--slate);}
.pb-input{
  border:1px solid var(--sky-line); border-radius:var(--radius-sm); background:var(--paper);
  color:var(--ink); font:inherit; font-size:14px; padding:9px 11px; width:100%;
}
.pb-input:focus{outline:none; border-color:var(--visa);}

.pb-result{display:grid; gap:14px; min-width:0;}
.pb-warn{
  background:var(--amber-soft); border:1px solid var(--amber); border-radius:var(--radius-md);
  padding:12px 15px; font-size:13.5px; line-height:1.5; color:var(--ink-soft);
}
.pb-summary{
  background:var(--visa-soft); border:1px solid var(--visa); border-radius:var(--radius-lg);
  padding:18px 20px; display:grid; gap:3px; justify-items:start;
}
.pb-summary-main{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;}
/* Моноширинна з tabular-nums: цифра не стрибає, коли менеджер крутить бюджет під час
   розмови — інакше вилка «смикалась» би на кожне натискання. */
.pb-summary-num{
  font-family:var(--font-mono); font-size:27px; font-weight:600; color:var(--visa-ink);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.pb-summary-dash{color:var(--visa-ink); font-size:20px;}
.pb-summary-cur{font-size:14px; font-weight:600; color:var(--visa-ink); margin-left:2px;}
.pb-summary-sub{font-size:12.5px; color:var(--slate);}

.pb-cards{display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(258px, 1fr));}
.pb-card{display:grid; gap:9px; align-content:start; min-width:0;}
.pb-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
.pb-card-zone{font-size:16px; font-weight:700; color:var(--ink); line-height:1.2;}
.pb-card-emirate{font-size:12px; color:var(--slate-2); margin-top:2px;}
.pb-drop{
  border:none; background:none; color:var(--slate-2); font-size:19px; line-height:1;
  cursor:pointer; padding:0 2px; flex:none;
}
.pb-drop:hover{color:var(--stamp);}
.pb-card-price{
  font-family:var(--font-mono); font-size:21px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.pb-card-price span{font-size:12px; color:var(--slate); font-weight:500;}
.pb-card-pack{font-size:13.5px; color:var(--ink-soft);}
.pb-card-specs{display:flex; flex-wrap:wrap; gap:5px;}
/* Плашка складу пакета: дрібний підпис зверху, значення під ним. Підпис окремим рядком,
   а не в один рядок зі значенням, бо інакше плашки стають удвічі ширшими й на вузькому
   екрані перестають вкладатись у два стовпчики. */
.pb-card-specs span{
  display:grid; gap:1px;
  font-size:12.5px; font-weight:600; color:var(--ink); background:var(--sky);
  border-radius:6px; padding:5px 9px; white-space:nowrap;
}
.pb-card-specs span i{
  font-style:normal; font-size:10px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--slate-2);
}
/* Явно повертаємо звичайний шрифт: підпис лежить усередині .pb-card-price, а той
   моноширинний з tabular-nums — і підпис успадковував розрядку, через яку «за перший рік»
   читалось як «з а   п е р ш и й». */
.pb-card-price-note{
  font-family:var(--font-body); font-variant-numeric:normal; letter-spacing:0;
  font-style:normal; font-size:11.5px; font-weight:500; color:var(--slate-2);
  display:block; margin-top:2px;
}
.pb-card-why{list-style:none; margin:0; padding:0; display:grid; gap:4px;}
.pb-card-why li{
  font-size:12.5px; color:var(--good); padding-left:14px; position:relative; line-height:1.4;
}
.pb-card-why li::before{content:"✓"; position:absolute; left:0; top:0; font-size:11px;}
.pb-card-why--none{font-size:12.5px; color:var(--slate-2); font-style:italic;}
.pb-empty{color:var(--slate); font-size:14px;}

@media (max-width:900px){
  .pb-layout{grid-template-columns:minmax(0,1fr);}
  .pb-need{position:static;}
}


/* ===== Анкета клієнта (js/pages/Questionnaire.js) ========================================
   Форма ліворуч, живий підбір праворуч і липкий. Менеджер заповнює анкету під час розмови
   з клієнтом, і результат має бути перед очима, а не десь унизу сторінки. */
.qn-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(290px, 360px); gap:16px; align-items:start;}
.qn-form{display:grid; gap:14px; min-width:0;}
.qn-section{display:grid; gap:18px;}
.qn-q{display:grid; gap:7px; min-width:0;}
.qn-q-label{font-size:14.5px; font-weight:600; color:var(--ink); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.qn-req{
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--visa-ink); background:var(--visa-soft); border-radius:4px; padding:2px 6px;
}
/* Підказка — це те, що менеджер каже клієнту вголос, тому вона під питанням, а не в
   тултипі: наводити мишу під час розмови по телефону нікому. */
.qn-hint{font-size:12.5px; color:var(--slate); line-height:1.45;}
.qn-textarea{resize:vertical; font-family:inherit; line-height:1.5;}

.qn-side{display:grid; gap:12px; position:sticky; top:16px; min-width:0;}
.qn-status{font-size:13.5px; font-weight:600; color:var(--slate); text-align:center;}
.qn-status.ready{color:var(--good); background:var(--good-soft); border-color:var(--good);}

.qn-flags{background:var(--amber-soft); border-color:var(--amber);}
.qn-flags-head{font-size:12.5px; font-weight:700; color:var(--amber); margin-bottom:7px;
  letter-spacing:.05em; text-transform:uppercase;}
.qn-flags ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.qn-flags li{font-size:12.5px; line-height:1.5; color:var(--ink-soft); padding-left:13px; position:relative;}
.qn-flags li::before{content:"!"; position:absolute; left:2px; top:0; font-weight:700; color:var(--amber);}

.qn-picks{display:grid; gap:8px;}
.qn-pick{display:grid; gap:2px;}
.qn-pick-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.qn-pick-zone{font-size:14px; font-weight:700; color:var(--ink); min-width:0;}
.qn-pick-price{
  font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--visa-ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.qn-pick-sub{font-size:12px; color:var(--slate);}
.qn-empty{font-size:13px; color:var(--slate-2); text-align:center;}

@media (max-width:980px){
  .qn-layout{grid-template-columns:minmax(0,1fr);}
  .qn-side{position:static;}
}


/* ===== Перемикач дошок і передача між ними (js/pages/Clients.js) ======================== */
.pipeline-switch{display:inline-flex; gap:4px; margin-top:10px; background:var(--sky);
  border-radius:10px; padding:3px;}
.pipeline-tab{
  border:none; background:none; font:inherit; font-size:13.5px; font-weight:600;
  color:var(--slate); padding:7px 13px; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition:background .12s, color .12s;
}
.pipeline-tab:hover{color:var(--ink);}
.pipeline-tab.on{background:var(--paper); color:var(--ink); box-shadow:var(--shadow-card);}
/* Лічильник кейсів на дошці. Показуємо навіть нуль: порожня друга дошка — теж відповідь,
   а зникле число читалось би як «ще не порахували». */
.pipeline-count{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  background:var(--sky-deep); color:var(--slate); border-radius:20px; padding:1px 7px;
  font-variant-numeric:tabular-nums;
}
.pipeline-tab.on .pipeline-count{background:var(--visa); color:var(--visa-on,#fff);}

/* Кнопка передачі стоїть на місці стрілки «праворуч», тому й геометрія та сама. */
.kanban-handoff{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:1px solid var(--good); background:var(--good-soft); color:var(--good);
  font:inherit; font-size:11px; font-weight:700; padding:4px 8px; border-radius:7px;
  cursor:pointer; opacity:0; transition:opacity .12s; white-space:nowrap; z-index:2;
}
.kanban-card:hover .kanban-handoff{opacity:1;}
.kanban-handoff:hover{background:var(--good); color:#fff;}


/* ===== Реєстрація компанії в картці клієнта (js/pages/ClientCard.js) ====================
   Головний екран кейса ProPart: відповідає на питання «де справа зараз». Тому зверху —
   поточний крок великим планом, а повний список під ним: його читають рідше. */
.reg-progress-label{font-size:13px; color:var(--slate); font-variant-numeric:tabular-nums;}
.reg-bar{height:6px; border-radius:3px; background:var(--sky-deep); overflow:hidden;}
.reg-bar-fill{height:100%; background:var(--visa); border-radius:3px; transition:width .25s;}

.reg-now{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-top:16px; padding:13px 16px; border-radius:var(--radius-md);
  background:var(--visa-soft); border:1px solid var(--visa);
}
.reg-now--done{background:var(--good-soft); border-color:var(--good);}
.reg-now-label{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--visa-ink);
}
.reg-now-name{font-size:15px; font-weight:700; color:var(--ink); margin-right:auto;}
.reg-now-days{font-size:12.5px; color:var(--slate);}

.reg-steps{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:0;}
.reg-steps li{
  display:grid; grid-template-columns:30px minmax(0,1fr); gap:13px;
  padding:13px 0; border-top:1px solid var(--sky-line); align-items:start;
}
.reg-steps li:first-child{border-top:0;}
.reg-step-mark{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700;
  background:var(--sky-deep); color:var(--slate-2); flex:none;
  font-variant-numeric:tabular-nums;
}
.reg-steps li.is-done .reg-step-mark{background:var(--good); color:#fff;}
.reg-steps li.is-progress .reg-step-mark{background:var(--visa); color:var(--visa-on,#fff);}
.reg-steps li.is-waiting .reg-step-mark{background:var(--amber); color:#fff;}
.reg-step-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.reg-step-name{font-size:14.5px; font-weight:600; color:var(--ink);}
/* Строк кожного кроку видно одразу: саме з нього складається відповідь «коли буде ліцензія»,
   і шукати його в іншому місці менеджеру ніколи — клієнт на лінії. */
.reg-step-days{font-size:12px; color:var(--slate-2); white-space:nowrap;}
.reg-step-note{font-size:12.5px; color:var(--slate); line-height:1.45; margin-top:2px;}
.reg-steps li.is-pending .reg-step-name{color:var(--slate);}

.reg-docs{list-style:none; margin:0; padding:0; display:grid; gap:11px;}
.reg-docs li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:11px; align-items:start;}
.reg-doc-mark{
  width:18px; height:18px; border-radius:5px; border:1.5px solid var(--sky-line);
  display:flex; align-items:center; justify-content:center; font-size:11px;
  color:transparent; margin-top:2px; flex:none;
}
.reg-docs li.got .reg-doc-mark{background:var(--good); border-color:var(--good); color:#fff;}
.reg-doc-name{font-size:14px; font-weight:600; color:var(--ink);}
/* «За потреби» стоїть поруч із назвою, а не в примітці: без цієї позначки менеджер вимагає
   NOC і банківську виписку в усіх підряд, а потрібні вони одиницям. */
.reg-doc-when{
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--amber); background:var(--amber-soft); border-radius:4px; padding:2px 6px;
  margin-left:6px; vertical-align:1px;
}
.reg-doc-note{font-size:12.5px; color:var(--slate); line-height:1.45; margin-top:1px;}

.reg-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(230px,1fr));}
.reg-field{display:grid; gap:5px; min-width:0;}
.reg-field-label{font-size:12px; font-weight:600; color:var(--slate);}
.reg-field-val{font-size:14px; color:var(--ink);}
.reg-names{margin:0; padding-left:18px; display:grid; gap:3px;}
.reg-names li{font-size:14px; color:var(--ink);}


/* ===== P&L на дашборді (js/pages/Dashboard.js) ==========================================
   Рядок-формула, а не чотири окремі плитки. Плитки читаються як незалежні числа, і зв'язок
   «прийшло мінус витрати дорівнює наше» доводиться добудовувати в голові — а він тут
   головний. Знаки між числами роблять цю арифметику видимою. */
.pnl{display:flex; align-items:stretch; gap:10px; flex-wrap:wrap;}
.pnl-item{
  flex:1 1 150px; min-width:0; background:var(--sky); border-radius:var(--radius-md);
  padding:14px 16px;
}
.pnl-item--result{background:var(--good-soft); border:1px solid var(--good);}
.pnl-num{
  font-family:var(--font-mono); font-size:19px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1.2; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.pnl-num--cost{color:var(--stamp);}
.pnl-num--good{color:var(--good);}
.pnl-label{font-size:12px; color:var(--slate); margin-top:3px; line-height:1.35;}
.pnl-op{
  display:flex; align-items:center; font-size:18px; font-weight:700; color:var(--slate-2);
  flex:none; padding:0 2px;
}
@media (max-width:820px){
  /* На вузькому екрані формула перестає читатись горизонтально — ховаємо знаки й даємо
     числам стати списком: так зрозуміліше, ніж обірвана арифметика в три рядки. */
  .pnl-op{display:none;}
  .pnl-item{flex:1 1 100%;}
}


/* Поле ніші в шапці картки клієнта. Виглядає як решта комірок шапки — рядок без рамки,
   який стає полем лише під курсором: шапка має читатись як зведення, а не як форма. */
.chead-input{
  border:1px solid transparent; background:transparent; color:var(--ink);
  font:inherit; font-size:14px; padding:4px 6px; margin:-4px -6px; width:100%;
  border-radius:var(--radius-sm); min-width:0;
}
.chead-input::placeholder{color:var(--slate-2);}
.chead-input:hover{border-color:var(--sky-line);}
.chead-input:focus{outline:none; border-color:var(--visa); background:var(--paper);}

/* Рядок ніш над дошкою. Натискання кладе назву ніші в той самий рядок пошуку, що й ручний
   ввід, — щоб не було двох незалежних фільтрів, які по-різному розуміють одне й те саме. */
.niche-filter{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.niche-count{
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; margin-left:6px;
  opacity:.65; font-variant-numeric:tabular-nums;
}


/* ===== Акаунти клієнтів (js/pages/ClientAccounts.js) ==================================== */
.acc-filters{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.acc-table-wrap{overflow-x:auto;}
.acc-table{border-collapse:collapse; width:100%; min-width:720px; font-size:14px;}
.acc-table th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--slate-2); padding:0 12px 10px; border-bottom:1px solid var(--sky-line); white-space:nowrap;
}
.acc-table td{padding:12px; border-bottom:1px solid var(--sky-line); vertical-align:top;}
.acc-table tr:last-child td{border-bottom:0;}
.acc-name{font-weight:700; color:var(--ink);}
.acc-niche{font-size:12px; color:var(--slate-2); margin-top:2px;}
.acc-email{font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); word-break:break-all;}
.acc-input{max-width:240px; font-size:13px; padding:7px 9px;}
/* Стан — кольоровою плашкою, а не текстом: таблицю переглядають очима згори вниз, і
   «запрошення висить» має впадати в око без читання. */
.acc-badge{
  display:inline-block; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:20px;
  white-space:nowrap;
}
.acc-badge--good{background:var(--good-soft); color:var(--good);}
.acc-badge--warn{background:var(--amber-soft); color:var(--amber);}
.acc-badge--bad{background:var(--stamp-soft); color:var(--stamp);}
.acc-badge--muted{background:var(--sky); color:var(--slate);}
.acc-sub{font-size:11.5px; color:var(--slate-2); margin-top:4px;}
.acc-last{font-size:13px; color:var(--slate); white-space:nowrap;}
.acc-actions{text-align:right; white-space:nowrap;}
.acc-how{margin-top:16px;}
.acc-steps{margin:0; padding-left:20px; display:grid; gap:7px;}
.acc-steps li{font-size:14px; line-height:1.5; color:var(--ink-soft);}


/* ===== Вхід за біометрією на екрані входу (js/pages/Login.js) =========================== */
/* Розділювач «або»: кнопка біометрії — не друга кнопка підтвердження форми, а інший шлях,
   і це має бути видно до того, як людина її натисне. */
.pk-or{display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--slate-2); font-size:12px;}
.pk-or::before, .pk-or::after{content:""; flex:1; height:1px; background:var(--sky-line);}
.pk-btn{width:100%; justify-content:center;}
.pk-hint{margin-top:10px; font-size:12.5px; line-height:1.5; text-align:center;}
.pk-ok{
  margin-top:10px; font-size:13px; font-weight:600; color:var(--good);
  background:var(--good-soft); border-radius:var(--radius-sm); padding:9px 12px; text-align:center;
}

.pk-debug{
  margin-top:14px; padding:10px 12px; background:var(--sky); border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:11px; line-height:1.6; color:var(--ink-soft);
  white-space:pre-wrap; text-align:left;
}

/* Другий крок входу — код із листа. */
.otp-box{margin-top:18px; padding:16px; background:var(--sky); border-radius:var(--radius-md); text-align:left;}
.otp-title{font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:4px;}
/* Великий моноширинний із розрядкою: шестизначний код диктують уголос і звіряють очима,
   і злиплі цифри тут читаються гірше, ніж будь-де. */
.otp-input{
  margin-top:12px; font-family:var(--font-mono); font-size:22px; font-weight:600;
  letter-spacing:.32em; text-align:center; padding:11px 12px;
}
.otp-demo{
  margin-top:12px; font-size:12px; line-height:1.5; color:var(--amber);
  background:var(--amber-soft); border-radius:var(--radius-sm); padding:9px 11px;
}


/* ===== AML / KYC (js/pages/AmlCheck.js) ================================================= */
.aml-layout{display:grid; grid-template-columns:minmax(220px,280px) minmax(0,1fr); gap:16px; align-items:start;}
.aml-list{position:sticky; top:16px; max-height:calc(100vh - 120px); overflow:auto;}
.aml-row{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:none; background:none; font:inherit; text-align:left; cursor:pointer;
  padding:8px 10px; border-radius:var(--radius-sm); color:var(--ink-soft);
}
.aml-row:hover{background:var(--sky);}
.aml-row.on{background:var(--visa-soft); color:var(--ink); font-weight:600;}
.aml-row-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px;}
/* Число перевірок, а не галочка: «перевіряли тричі» і «перевіряли раз» — різні історії. */
.aml-row-mark{
  font-family:var(--font-mono); font-size:11px; font-weight:600; padding:1px 7px;
  border-radius:20px; flex:none;
}
.aml-row-mark.is-done{background:var(--good-soft); color:var(--good);}
.aml-row-mark.is-none{background:var(--sky-deep); color:var(--slate-2);}
.aml-main{min-width:0;}
.aml-score{
  font-family:var(--font-mono); font-size:14px; font-weight:600; padding:4px 11px;
  border-radius:20px; white-space:nowrap;
}
.aml-score--good{background:var(--good-soft); color:var(--good);}
.aml-score--warn{background:var(--amber-soft); color:var(--amber);}
.aml-score--bad{background:var(--stamp-soft); color:var(--stamp);}
.aml-factors{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
.aml-factor{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start;
  padding:11px 13px; border:1px solid var(--sky-line); border-radius:var(--radius-md);
  cursor:pointer; transition:border-color .12s, background .12s;
}
.aml-factor:hover{border-color:var(--visa);}
.aml-factor.on{border-color:var(--amber); background:var(--amber-soft);}
.aml-factor input{margin-top:3px; accent-color:var(--visa);}
.aml-factor-body{display:grid; gap:2px; min-width:0;}
.aml-factor-label{font-size:13.5px; font-weight:600; color:var(--ink);}
.aml-weight{
  font-family:var(--font-mono); font-size:11px; color:var(--slate-2); margin-left:7px;
}
.aml-factor-hint{font-size:12px; color:var(--slate); line-height:1.4;}
.aml-steps{margin:0; padding-left:20px; display:grid; gap:7px;}
.aml-steps li{font-size:14px; line-height:1.5; color:var(--ink-soft);}
.aml-reasons{margin-top:16px; padding-top:14px; border-top:1px solid var(--sky-line);}
.aml-reasons-head{font-size:12px; font-weight:700; color:var(--slate); margin-bottom:8px;
  letter-spacing:.05em; text-transform:uppercase;}
.aml-reason{font-size:13.5px; color:var(--ink-soft); margin-bottom:5px;}
.aml-reason b{font-family:var(--font-mono); color:var(--amber); margin-right:7px;}
.aml-hist{padding:13px 0; border-top:1px solid var(--sky-line);}
.aml-hist:first-of-type{border-top:0;}
.aml-hist-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:5px;}
.aml-hist-score{font-family:var(--font-mono); font-size:12.5px; color:var(--slate);}
.aml-hist-date{font-size:12px; color:var(--slate-2); margin-left:auto;}
.aml-hist-reasons{font-size:12.5px; color:var(--slate); margin-bottom:3px;}
.aml-hist-note{font-size:13.5px; color:var(--ink-soft); line-height:1.5;}
@media (max-width:900px){ .aml-layout{grid-template-columns:minmax(0,1fr);} .aml-list{position:static; max-height:none;} }

/* ===== Постлицензионные услуги (js/pages/PostLicense.js) =====================================
   Разметка повторяет AML/KYC: слева список людей, справа работа по выбранному. Это сделано
   намеренно — два экрана, где «выбрал человека → работаешь с ним», не должны выглядеть
   по-разному, иначе каждый приходится осваивать заново.
   Цифры — табличными: суммы сравнивают глазами по вертикали. */
.pl-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--sky-line);border:1px solid var(--sky-line);border-radius:12px;overflow:hidden}
.pl-sum-item{background:var(--paper);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.pl-sum-num{font:700 21px/1.1 var(--font-mono),monospace;font-variant-numeric:tabular-nums;color:var(--ink)}
.pl-sum-lbl{font-size:11.5px;color:var(--ink-soft)}

.pl-layout{display:grid;grid-template-columns:260px 1fr;gap:14px;align-items:start}
.pl-layout>*{min-width:0}
@media (max-width:820px){.pl-layout{grid-template-columns:1fr}.pl-list{max-height:260px;overflow-y:auto}}

.pl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;
  background:transparent;border:0;border-radius:9px;padding:8px 10px;cursor:pointer;font:inherit;color:var(--ink)}
.pl-row:hover{background:var(--sky)}
.pl-row.on{background:var(--visa-soft);color:var(--visa)}
.pl-row-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600}
/* Галочка «лицензия получена» — именно этим клиентам и продают услуги второй воронки. */
.pl-row-lic{color:var(--good);font-weight:700;margin-left:4px}
.pl-row-count{flex:0 0 auto;font:700 11.5px var(--font-mono),monospace;min-width:22px;text-align:center;
  border-radius:99px;padding:2px 6px}
.pl-row-count.is-some{background:var(--good-soft,rgba(27,138,90,.14));color:var(--good)}
.pl-row-count.is-none{background:var(--sky);color:var(--ink-soft)}

.pl-picker{margin-top:14px;border-top:1px solid var(--sky-line);padding-top:14px}
.pl-picker-list{display:grid;gap:6px;max-height:300px;overflow-y:auto;margin-top:10px}
.pl-picker-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;
  background:transparent;border:1px solid var(--sky-line);border-radius:9px;padding:9px 11px;cursor:pointer;font:inherit;color:var(--ink)}
.pl-picker-item:hover{border-color:var(--visa);background:var(--sky)}
.pl-picker-cat{font:700 10px/1 var(--font-display);text-transform:uppercase;letter-spacing:.06em;border-radius:99px;padding:4px 7px;white-space:nowrap}
.pl-picker-name{min-width:0;font-size:13.5px;font-weight:600}
.pl-picker-price{font:600 12.5px var(--font-mono),monospace;font-variant-numeric:tabular-nums;color:var(--ink-soft);white-space:nowrap}

/* «Не заказано» подсвечено рамкой, а не залито: это работа на сегодня, а не ошибка. */
.pl-missing{border-left:3px solid var(--amber,#B7791F)}
.pl-missing-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--sky-line);flex-wrap:wrap}
.pl-missing-row:first-of-type{border-top:none}
.pl-missing-name{font-size:13.5px;font-weight:600}
.pl-missing-price{font:600 13px var(--font-mono),monospace;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto}

.pl-order{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--sky-line);flex-wrap:wrap}
.pl-order:first-of-type{border-top:none}
.pl-order-name{font-size:14px;font-weight:600}
.pl-order-price{font:700 13.5px var(--font-mono),monospace;font-variant-numeric:tabular-nums;white-space:nowrap}

.pl-demand{padding:12px 0;border-top:1px solid var(--sky-line)}
.pl-demand:first-of-type{border-top:none}
.pl-demand-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pl-demand-name{font-size:13.5px;font-weight:600}
.pl-demand-sum{font:700 13px var(--font-mono),monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-demand-track{height:6px;border-radius:99px;background:var(--sky-line);overflow:hidden;margin:7px 0 5px}
.pl-demand-fill{height:100%;background:var(--visa)}

.pl-cat-row{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--sky-line)}
.pl-cat-row:first-of-type{border-top:none}
.pl-cat-name{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pl-cat-price{font:700 13px var(--font-mono),monospace;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto}

/* Зум кореня, а не body: fixed-елементи (модалки, тости) рахують позицію від кореня, і при
   зумі на body лишались би в старому масштабі, тобто просто з'їхали б. */
html{ zoom:var(--ui-scale, 1); }

/* Висота під зумом. .shell має height:100vh, але 100vh — це висота ВІКНА, а зум стискає
   вміст: при 0.75 оболонка займала три чверті екрана, і знизу лишалась біла смуга на всю
   ширину. Ділимо на той самий масштаб — тоді після стиснення виходить рівно екран. */
.shell{ height:calc(100vh / var(--ui-scale, 1)); }