/* taskdesk.css — один вигляд на всі екрани Task Desk.
   Токени ті самі, що в консолі (ui/index.html): вигляд продукту один,
   а не «ще один стиль у тому самому вікні». */
/* Кольори переїхали в ui/theme.css — один словник на весь продукт.
   Тут лишається лише крок відступів: він однаковий у будь-якій темі. */
:root{
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px;
  /* ЗМІНА 263. Межа довжини рядка: наша норма 50-75 знаків (WCAG 1.4.8,
     Baymard). Без неї абзац розтягується на всі 180 знаків монітора. */
  --measure:68ch;
  /* ЗМІНА 264. Ширина колонки сторінки. Кожен екран каже своє число сам:
     дошка задач широка, екран налаштувань вузький. Але в межах ОДНОГО екрана
     число одне — інакше на сторінці зʼявляються кілька правих країв. */
  --page:1240px;
}
*{box-sizing:border-box}
/* ⭐⭐⭐ 08.08.2026, зауваження Андрія: «натиснув Список — картки не зникли».
   Корінь був НЕ в скрипті: скрипт чесно ставив hidden, але клас .td-board
   каже display:grid, а він СИЛЬНІШИЙ за типове [hidden]{display:none} браузера.
   Ховати елемент, який має свій display, без цього рядка неможливо — і так
   зламався б КОЖЕН наступний екран. Тому правило одне й на всі. */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--txt);
     font:16px/1.5 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--accent)}
/* ЗМІНА 263б. Сходинки заголовків. У h3 не було СВОГО правила, і браузер
   малював його типовим розміром — підзаголовок виходив БІЛЬШИМ за заголовок.
   Не більше двох шрифтів і чотирьох насиченостей (Material 3). */
h1{font-size:22px;font-weight:600;margin:0;line-height:1.25}
h2{font-size:18px;font-weight:600;margin:0 0 var(--s2);line-height:1.3}
h3{font-size:15px;font-weight:600;margin:var(--s4) 0 var(--s2);line-height:1.3}
/* ЗМІНА 266. Шапка тягнеться на всю ширину вікна, але її вміст стоїть на тому
   самому краї, що й вміст сторінки. Відступ рахується сам: поки вікно вужче за
   колонку — звичайні 24px, далі — рівно стільки, щоб зійтися з колонкою. */
.td-top{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
        padding:var(--s3) max(var(--s4),calc((100% - var(--page)) / 2));
        border-bottom:1px solid var(--line);background:var(--panel)}
.td-top nav{display:flex;gap:var(--s2);margin-left:auto}
.td-wrap{max-width:var(--page);margin:0 auto;padding:var(--s4) 0}
/* ЗМІНА 263. РАМКА СТОРІНКИ. Клас .td-body стояв на двох екранах, а тут його
   НЕ ІСНУВАЛО — порожнє слово. Тому текст починався впритул до лівого краю
   монітора. Тепер шапка лишається на всю ширину, а весь інший вміст сідає в
   рамку по центру. Екран уже не може випадково лишитись без рамки. */
.td-body{display:grid;
         grid-template-columns:1fr min(var(--page),calc(100% - var(--s4) * 2)) 1fr}
.td-body>*{grid-column:2}
/* Шапка тягнеться на всю ширину вікна, АЛЕ її вміст стоїть на тому самому
   лівому краї, що й вміст сторінки: два різні краї на одній сторінці — це і є
   те «неохайно», яке видно оком (зміна 263б). */
.td-body>.td-top{grid-column:1 / -1}
.td-body>:last-child{margin-bottom:var(--s5)}
/* Абзац пояснення тримає межу рядка, а не ширину монітора. */
.td-wrap>p,.td-body>p,.td-lede{max-width:var(--measure)}
/* ЗМІНА 273. 320px не вміщали пару «підпис + список», і кожна пара
   переносилась, перетворюючи бічну панель на стовп коробок. */
.td-cols{display:grid;grid-template-columns:360px 1fr;gap:var(--s4)}
@media (max-width:900px){.td-cols{grid-template-columns:1fr}}
.td-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;
         padding:var(--s3);margin-bottom:var(--s3)}
.td-muted{color:var(--muted)}
.td-warn{color:var(--warn)}
.td-row{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
/* Підпис, який САМ є перемикачем (галочка всередині), мусить мати зону
   натискання на палець, а не заввишки в рядок тексту (WCAG 2.5.5). */
label.td-row{min-height:44px;cursor:pointer}
label{display:block;font-size:13px;color:var(--muted);margin:var(--s2) 0 var(--s1)}
/* ЗМІНА 263, 29.08.2026. КОРІНЬ «ЗДОРОВЕЗНИХ СИНІХ КВАДРАТІВ».
   Правило нижче писали для полів, куди вводять ТЕКСТ. Але для браузера галочка
   теж «input», тому вона роздувалась до 44px і ставала квадратом на пів
   клітинки. Двічі це латали на окремих екранах (.td-check, .td-multi) замість
   того, щоб полагодити ПРАВИЛО, — і на екрані прав, який латки не отримав,
   квадрати вилізли знову. Тепер правило САМЕ відрізняє поле від перемикача. */
/* ЗМІНА 268. Базове правило поля — НАЙСЛАБШЕ, яке тільки можна написати.
   Виняток (галочка) стоїть окремим правилом НИЖЧЕ і тому перемагає його, а
   правило конкретного екрана перемагає обох. Ланцюжок «окрім галочки» робив
   базове правило сильним — і екран уже не міг сказати про своє поле нічого. */
input,select{width:100%;min-height:44px;padding:0 var(--s2);color:var(--txt);
             background:var(--panel2);border:1px solid var(--line);border-radius:8px;
             font-size:15px}
/* Перемикач: позначка МАЛЕНЬКА, а зона натискання ВЕЛИКА. W3C WCAG 2.5.5
   вимагає 44x44 саме для ЗОНИ, а не для намальованого квадрата. Зону дає
   обгортка .td-tick, всередині якої сидить сама галочка. */
input[type=checkbox],input[type=radio]{
             width:18px;height:18px;min-height:0;margin:0;flex:none;
             accent-color:var(--accent);cursor:pointer}
.td-tick{display:inline-flex;align-items:center;justify-content:center;
             min-width:44px;min-height:44px;margin:0;cursor:pointer}
input:focus,select:focus,button:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
button{min-height:44px;padding:0 var(--s3);border-radius:8px;border:1px solid var(--line);
       background:var(--panel2);color:var(--txt);font-size:15px;cursor:pointer;
       transition:background .15s ease,border-color .15s ease}
button:hover{border-color:var(--accent)}
button[disabled]{opacity:.45;cursor:not-allowed}
.td-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent-ink);font-weight:600}
.td-danger{border-color:var(--err);color:var(--err)}
/* ЗМІНА 269. Цифри однакової ширини: інакше числа й дати в стовпці «пливуть»
   і колонку неможливо порівняти поглядом. */
table{width:100%;border-collapse:collapse;font-size:15px;
      font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:10px var(--s2);border-bottom:1px solid var(--line);
      vertical-align:middle}
/* Шапка таблиці — окрема смуга, а не такий самий рядок. Без неї око не бачить,
   де закінчується заголовок і починаються дані. */
th{font-size:13px;color:var(--muted);font-weight:600}
thead th{background:var(--panel2)}
tbody tr:hover{background:var(--panel2)}
.td-num{font-variant-numeric:tabular-nums}
.td-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;
          border:1px solid var(--line);color:var(--muted)}
.td-badge.ok{color:var(--ok);border-color:var(--ok)}
.td-badge.off{color:var(--warn);border-color:var(--warn)}
.td-err{color:var(--err);font-size:14px;margin-top:var(--s1);min-height:20px}
.td-ok{color:var(--ok);font-size:14px;margin-top:var(--s1);min-height:20px}
.td-tree{list-style:none;margin:0;padding:0}
.td-tree li{padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.td-tree li:last-child{border-bottom:0}
/* Назва підрозділу — це заголовок свого блоку, а не такий самий текст. */
.td-tree .lvl{display:block;font-weight:600}
/* Сталий підпис — щоб списки під різними підписами починались на одній лінії. */
.td-tree .td-row>label{min-width:74px}
/* Рідний вибір файла пише напис МОВОЮ БРАУЗЕРА: на українському екрані
   зʼявлялось «Выберите файл». Ховаємо рідний елемент і даємо свою кнопку. */
.td-filebtn{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 var(--s3);border:1px solid var(--line);
  border-radius:8px;background:var(--panel2);color:var(--txt);font-size:15px;
  cursor:pointer;margin:0}
.td-filebtn:hover{border-color:var(--accent)}
/* ЗМІНА 272. Форма — не стовп однакових широких коробок. Поля стають у дві
   колонки й тримають розумну ширину: пошта й телефон не потребують 900px. */
.td-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s2) var(--s3);max-width:640px;align-items:end}
.td-form>div{min-width:0}
.td-form label{margin:0 0 var(--s1)}
.td-form .wide{grid-column:1 / -1}
/* Дія всередині рядка таблиці — не головна дія екрана. Зона лишається на палець
   (44px), але вигляд тихий: рамка й заливка зʼявляються під курсором. Руйнівна
   дія тримає свою барву, проте не кричить із кожного рядка. */
td button{border-color:transparent;background:transparent}
td button:hover{border-color:var(--line);background:var(--panel2)}
td button.td-danger{color:var(--err);border-color:transparent;
  background:transparent}
td button.td-danger:hover{border-color:var(--err);background:var(--tint-err)}
.td-empty{color:var(--muted);padding:var(--s3);text-align:center}
.td-login{max-width:380px;margin:12vh auto;padding:var(--s4)}

/* --- ЕКРАН ЗАДАЧ (етап 2). Токени ті самі — вигляд продукту один. --- */
.td-tabs{display:flex;gap:var(--s1);flex-wrap:wrap}
.td-tabs button{border-radius:999px;min-height:38px;font-size:14px}
.td-tabs button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--on-accent-ink);font-weight:600}
/* 01.09.2026: у ряду чотири поля — що зробити · виконавець · проєкт · термін.
   Під 820px ряд і далі стає одним стовпчиком, тому на телефоні нічого не
   тісниться. */
.td-quick{display:grid;grid-template-columns:1fr 180px 180px 180px auto;gap:var(--s2);
  align-items:end}
@media (max-width:820px){.td-quick{grid-template-columns:1fr}}
.td-quick label{margin-top:0}
.td-more{border:0;background:none;color:var(--accent);padding:0;min-height:auto;
  font-size:14px;cursor:pointer;text-align:left}
.td-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);
  gap:var(--s3);overflow-x:auto;padding-bottom:var(--s2);align-items:start}
@media (max-width:820px){.td-board{grid-auto-flow:row}}
.td-col{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:var(--s2);min-height:120px}
.td-col h3{margin:0 0 var(--s2);font-size:13px;font-weight:600;color:var(--muted);
  display:flex;gap:var(--s2);align-items:center;text-transform:uppercase;
  letter-spacing:.04em}
.td-col h3 .n{margin-left:auto;font-size:12px;background:var(--panel2);
  border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--txt)}
.td-task{display:block;background:var(--panel2);border:1px solid var(--line);
  border-left:3px solid var(--line);border-radius:8px;padding:10px;
  margin-bottom:var(--s2);color:var(--txt);text-decoration:none;
  transition:border-color .15s ease,transform .1s ease}
.td-task:hover{border-color:var(--accent);transform:translateY(-1px)}
.td-task.late{border-left-color:var(--err)}
.td-task .no{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.td-task .ttl{display:block;margin:2px 0 8px;font-weight:600;line-height:1.35}
.td-task .meta{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;
  font-size:12px;color:var(--muted)}
.td-due{color:var(--muted)} .td-due.late{color:var(--err);font-weight:600}
.td-chip{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;
  border:1px solid var(--line);color:var(--muted)}
.td-chip.me{color:var(--accent);border-color:var(--accent)}
.td-chip.late{color:var(--err);border-color:var(--err)}
.td-chip.ok{color:var(--ok);border-color:var(--ok)}
.td-feed{list-style:none;margin:0;padding:0}
.td-feed li{padding:10px 0;border-bottom:1px solid var(--line)}
.td-feed .who{font-size:13px;color:var(--muted);display:flex;gap:var(--s2);
  align-items:center;margin-bottom:4px}
/* ЗМІНА 270. Запис журналу — абзац, а в абзаца свої типові відступи: разом із
   відступом рядка списку виходило ~36px порожнечі між двома короткими рядками.
   Прибираємо відступи абзацу і робимо журнал щільним та тихим, з маленькою
   крапкою-міткою замість лінії. Розмова людей лишається з лінією і повітрям —
   так око одразу бачить, де розмова, а де журнал. */
.td-feed .ev{color:var(--muted);font-size:13px;font-style:italic;margin:0}
.td-feed li.sys{padding:4px 0 4px var(--s3);border-bottom:0;position:relative}
.td-feed li.sys::before{content:"";position:absolute;left:5px;top:.8em;
  width:5px;height:5px;border-radius:50%;background:var(--line)}
.td-feed li.res{background:var(--tint-ok-soft);border-left:3px solid var(--ok);
  padding-left:10px;border-radius:6px}
.td-check{list-style:none;margin:0;padding:0}
/* ЗМІНА 271. Висоту рядка задає зона натискання галочки (44px), а не текст:
   інакше влучити можна було тільки точно по галочці. */
.td-check li{display:flex;gap:var(--s2);align-items:center;padding:0;
  min-height:44px;border-bottom:1px solid var(--line)}
.td-check li:last-child{border-bottom:0}
/* ── Звʼязки задачі (зміна 172) ─────────────────────────────────────────────
   Той самий ритм, що й у плану та стрічки: окремої мови для нового блоку не
   заводимо. Кнопка «Прибрати» — не менша за 44px по висоті рядка, тому лишаємо
   загальну кнопку й лише притискаємо праворуч. */
.td-links{list-style:none;margin:0;padding:0}
.td-links li{display:flex;gap:var(--s2);align-items:center;padding:8px 0;
  border-bottom:1px solid var(--line)}
.td-links li:last-child{border-bottom:none}
.td-links .rel{color:var(--muted);font-size:13px;white-space:nowrap}
.td-links .to{flex:1;min-width:0;overflow-wrap:anywhere}
.td-links a{color:var(--txt)}
.td-links button{margin-left:auto}
.td-check .done{color:var(--muted);text-decoration:line-through}
textarea{width:100%;min-height:88px;padding:var(--s2);color:var(--txt);
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  font:15px/1.5 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;resize:vertical}
.td-side{position:sticky;top:var(--s3)}


/* ── Вибір людини набором (замість списку на 100 прізвищ) ─────────────────── */
.td-pick{position:relative}
.td-pick input{width:100%}
.td-pick-in{width:100%}

/* Випадайку малюємо МИ — щоб її було видно, оформлено й перевірено чеком. */
.td-pick-drop{position:absolute;z-index:40;left:0;right:0;top:100%;margin-top:4px;
  max-height:280px;overflow:auto;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow-drop)}
.td-pick-opt{padding:8px 12px;cursor:pointer;font-size:14px;line-height:1.3}
.td-pick-opt:hover{background:var(--panel)}
.td-pick-opt[aria-selected="true"]{background:var(--panel);
  box-shadow:inset 3px 0 0 var(--accent)}
.td-pick-note{padding:7px 12px;color:var(--muted);font-size:12px;
  border-top:1px solid var(--line)}
.td-picked{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s1)}
.td-picked .p{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 10px;
  border-radius:999px;background:var(--panel2);border:1px solid var(--line);font-size:13px}
.td-picked .p button{min-height:auto;padding:0 6px;border:0;background:transparent;
  color:var(--muted);font-size:16px;line-height:1;cursor:pointer}
.td-picked .p button:hover{color:var(--err)}

/* ── Фільтр і налаштування колонок ────────────────────────────────────────── */
.td-panel{border-top:1px solid var(--line);margin-top:var(--s3);padding-top:var(--s3)}
.td-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--s2) var(--s3)}
.td-grid .f label{margin-top:0}
.td-multi{max-height:132px;overflow:auto;border:1px solid var(--line);border-radius:8px;
  background:var(--panel2);padding:var(--s2)}
.td-multi label{display:flex;gap:var(--s2);align-items:center;color:var(--txt);
  font-size:14px;margin:0;padding:3px 0;cursor:pointer;min-height:30px}
.td-dates{display:flex;gap:var(--s2)}
.td-order{display:flex;gap:var(--s2);align-items:center;padding:6px 8px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel2);margin-bottom:6px}
.td-order .h{flex:1;font-size:14px}
.td-order button{min-height:32px;padding:0 8px}
.td-views{display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center}
.td-views .v{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel2);padding:2px 4px 2px 12px}
.td-views .v[aria-pressed=true]{border-color:var(--accent);background:var(--tint-accent)}
.td-views .v .go{border:0;background:transparent;color:var(--txt);min-height:34px;
  padding:0 2px;font-size:14px;cursor:pointer}
.td-views .v .del{border:0;background:transparent;color:var(--muted);min-height:34px;
  padding:0 8px 0 2px;font-size:15px;line-height:1;cursor:pointer}
.td-views .v .del:hover{color:var(--err)}
.td-count{font-size:13px;color:var(--muted)}

/* Дві дати «від і до» мусять ділити ширину клітинки, а не вилазити на сусідню. */
.td-dates input{flex:1;min-width:0}
/* Протермінований рядок списку видно так само, як протерміновану картку. */
tbody tr.late td{background:var(--tint-err-soft)}
tbody tr.late td:first-child{box-shadow:inset 3px 0 0 var(--err)}
tbody tr.late td:first-child a{color:var(--err);font-weight:600}

/* Перетягування карток. Підсвічуються ЛИШЕ ті стадії, куди ця людина має право. */
.td-task.movable{cursor:grab}
.td-task.dragging{opacity:.45;cursor:grabbing}
.td-col.can{outline:1px dashed var(--line);outline-offset:4px;border-radius:10px}
.td-col.over{outline:2px dashed var(--accent);outline-offset:4px;background:var(--tint-accent-soft)}
.td-chip.ai{color:var(--ai-txt);border-color:var(--accent2)}
/* Пропозиція мозку на картці задачі */
.td-prop{border:1px solid var(--accent2);border-radius:10px;padding:var(--s3);
  background:var(--tint-accent2);margin-bottom:var(--s3)}
.td-prop q{display:block;color:var(--muted);font-style:italic;margin:6px 0 10px}

/* ⭐ ОДИН РЯД КЕРУВАННЯ.
   Ряд тримає ЧОТИРИ групи: «Нова задача» + пошук · набори · вигляд · «Ще».
   Разом вони ширші за екран, тож питання не «чи перенесеться», а ЩО САМЕ.
   Переносяться НАБОРИ — всередині себе, бо їх кількість росте від збережених
   вибірок людини. Керування (кнопки й пошук) лишається на місці: інакше «Ще»
   зникає з ока, а ряд знову стає двома. */
/* ЗМІНА 277. СМИСЛОВІ БЛОКИ ВЕРХНЬОЇ КАРТКИ. Три різні питання — «що
   показувати», «поставити однією фразою», «поставити розгорнуто» — розділені
   світлою лінією і мають свій тихий заголовок. Без цього вони зліплювались
   докупи. Лінія світліша за звичайну межу: вона розділяє СМИСЛ, а не рядки. */
.td-block{padding:var(--s4) 0;border-top:1px solid var(--card-line)}
.td-block:first-child{padding-top:0;border-top:0}
.td-block:last-child{padding-bottom:0}
.td-block-h{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 var(--s2);
  text-transform:uppercase;letter-spacing:.04em}
/* Заголовок блоку, який ще й відкриває його вміст. Виглядає як заголовок,
   поводиться як кнопка: зона на палець, курсор і стрілка. */
.td-block-toggle{display:inline-flex;align-items:center;gap:6px;border:0;
  background:none;padding:0;min-height:44px;color:var(--accent);font-size:13px;
  font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.td-block-toggle:hover{border-color:transparent;text-decoration:underline}
.td-bar{align-items:center;flex-wrap:nowrap}
.td-bar #chips{flex:1 1 0;min-width:0}
/* Пошук живе у ШАПЦІ, поруч із назвою екрана, і має власну кнопку. */
.td-find{display:flex;align-items:center;gap:var(--s2);flex:1 1 240px;
  max-width:460px;min-width:180px}
.td-find input{width:100%;margin:0}
.td-find button{white-space:nowrap}
/* ЗМІНА 281. Умови пошуку стоять біля пошуку: вони кажуть, ДЕ шукати. Тихі —
   бо це не головна дія екрана, а уточнення до неї. */
.td-where{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  color:var(--muted);font-size:13px}
.td-where label.td-row{margin:0;gap:6px;white-space:nowrap}
/* ⭐ ОДИН РЯДОК ПОСТАНОВКИ (зміна 223). Поле й кнопка не нижчі за 44px —
   це найменша ціль, у яку впевнено влучає палець. */
/* ЗМІНА 267. Верхня картка екрана задач тримає ТРИ різні речі: керування
   списком, швидку постановку і підсумок. Без межі вони зливались в один сірий
   блок. Тонка лінія коштує нічого, а показує, де закінчується одна думка. */
/* Розділювач тепер несе блок, а не сам рядок постановки. */
.td-quickline{margin:0}
/* width:auto — щоб поле СТИСКАЛОСЬ поруч із кнопкою, а не вимагало всю ширину
   ряду й не виштовхувало кнопку на власний поверх. */
.td-quickline input{flex:1 1 auto;width:auto;min-width:0;margin:0;min-height:44px}
.td-quickline p{max-width:var(--measure)}
/* Підсумок «видно задач…» — це не абзац тексту, а рядок стану. Він відділений
   лінією і навмисно тихіший за все, що над ним. */
.td-sum{margin:var(--s3) 0 0;font-size:13px;color:var(--muted);
  display:flex;gap:var(--s2);flex-wrap:wrap;align-items:baseline}
.td-quickline button{min-height:44px;white-space:nowrap}
/* На вузькому екрані тиснути нема куди — тоді набори займають свій рядок. */
@media (max-width:1100px){
  .td-bar{flex-wrap:wrap}
  .td-bar #chips{flex:1 1 100%}
}
/* Підпис для екранного читача: око його не бачить, голос — читає. */
.td-off{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Заголовок списку — кнопка порядку. Виглядає як заголовок, поводиться як кнопка:
   курсор, фокус і стрілка кажуть, що на нього можна натиснути. */
.td-sort{border:0;background:none;color:inherit;font:inherit;font-weight:600;
  padding:0;min-height:auto;cursor:pointer;text-align:left}
.td-sort:hover{color:var(--accent);border-color:transparent}
th[aria-sort="ascending"] .td-sort,th[aria-sort="descending"] .td-sort{color:var(--accent)}

/* ⭐ ЗВІРКА РЕЗУЛЬТАТУ (зміна 236). Три речі поруч: що просили · що здали ·
   чого не видно. Це ПОРІВНЯННЯ, а не вирок: жодного зеленого/червоного
   присуду, лише спокійна різниця. Колір тут судив би за людину. */
.td-match{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px var(--s3)}
.td-match dt{color:var(--muted);font-size:13px;white-space:nowrap}
.td-match dd{margin:0}
.td-gap{list-style:none;margin:6px 0 0;padding:0}
.td-gap li{padding:5px 0 5px 18px;position:relative;border-bottom:1px solid var(--line)}
.td-gap li:last-child{border-bottom:0}
.td-gap li::before{content:"·";position:absolute;left:6px;color:var(--muted)}


/* ГОРИЗОНТИ (зміна 303). Вісім рядків одної форми: номер, зразок кольору,
   поле кольору. Колір тут приходить з ДАНИХ - це єдине місце, де барва не з
   палітри, бо її обирає людина. */
/* Вісім рядків стоять у два стовпці, коли сторінка широка, і в один — коли
   вузька. Кожен рядок при цьому лишається РЯДКОМ. */
.td-hcard{margin-top:var(--s4)}
.td-hcard #horizons{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:0 var(--s5)}
/* Підказка під полем або дією. Живе ТУТ, бо її називають три різні екрани;
   у приватному стилі одного з них вона була б мертвим класом для двох інших. */
.td-hint{font-size:13px;color:var(--muted);margin:10px 0 0}
.td-hcard #horizons .td-hint{grid-column:1 / -1}
.td-hrow{display:grid;grid-template-columns:7.5em 5em 1fr;gap:var(--s2) var(--s3);
  align-items:center;padding:4px 0;border-bottom:1px solid var(--line)}
.td-hnum{color:var(--muted);font-size:13px;margin:0}
.td-hstate{color:var(--muted);font-size:13px}
/* Керування переноситься на новий рядок, коли колонка вузька: обрізана кнопка
   гірша за перенесену. */
.td-hctl{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;min-width:0}
.td-hswatch{width:1.4em;height:1.4em;border-radius:4px;border:1px solid var(--line);
  flex:none}


/* СХЕМА СТРУКТУРИ (зміни 287, 313). Спільна для екрана структури й для
   будь-кого, хто її показуватиме далі. */
/* СХЕМА СТРУКТУРИ (зміна 287). Картинка не є текстовою колонкою: вона живе
   у своїй рамці зі своєю прокруткою і не тягне за собою правий край
   сторінки (закон: одна колонка - один правий край). */
.td-chart{margin-top:var(--s5)}
.td-chart-box{overflow-x:auto;border:1px solid var(--line);border-radius:8px;
  background:var(--panel2);padding:var(--s3)}
.td-chart-svg{display:block}
/* Смуга горизонту лежить ПОЗАДУ людей і не сперечається з ними за увагу. */
.td-band{opacity:.30;transition:opacity .12s}
/* На темному полотні пастельна смуга під 30% стає сірою — і горизонт
   перестає читатись кольором. Темній темі потрібно більше смуги. */
html[data-theme="dark"] .td-band{opacity:.42}
html[data-theme="dark"] .td-band.on{opacity:.72}
.td-band.on{opacity:.62}
.td-band.blank{fill:var(--line)}
.td-link{fill:none;stroke:var(--line);stroke-width:2}
.td-node rect{fill:var(--panel);stroke:var(--line);stroke-width:1}
.td-node:hover rect,.td-node:focus rect{stroke:var(--accent);stroke-width:2}
/* Людина з неповними даними обведена пунктиром: схема каже правду, а не
   ховає діру. Барви для цього не заводимо - вистачає форми лінії. */
.td-node rect.broken{stroke-dasharray:5 4}
.td-node-in{display:flex;flex-direction:column;justify-content:center;
  height:100%;overflow:hidden}
.td-node-in .nm{font-size:13px;font-weight:600;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Посада під іменем — приглушена. Без цього рядка вона успадковує колір
   посилання (коробка є посиланням на картку) і кричить синім. */
.td-node-in .ps{font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Номер горизонту стоїть біля лівого краю смуги: горизонт не має назви, і
   номер - єдине, чим людина може його назвати вголос. */
.td-bandnum{fill:var(--txt);font-size:13px;font-weight:600;opacity:.75}
/* ЗНАК ЗГОРТАННЯ ГІЛКИ. Зона під палець - 88x44 і невидима; сам знак малий,
   бо кнопка на пів-коробки під кожною людиною перетворює схему на частокіл. */
.td-fold{cursor:pointer}
.td-fold-hit{fill:transparent}
.td-fold-pill{fill:var(--panel);stroke:var(--line);stroke-width:1}
.td-fold:hover .td-fold-pill,.td-fold:focus .td-fold-pill{stroke:var(--accent);
  stroke-width:2}
.td-fold-num{fill:var(--txt);font-size:12px;font-weight:600;text-anchor:middle;
  dominant-baseline:central;pointer-events:none}
/* Легенда під заголовком: номер і колір, більше в горизонта нічого немає. */
.td-legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  margin:var(--s3) 0}
.td-legend-item{display:inline-flex;align-items:center;gap:var(--s2);
  font-size:13px;color:var(--txt-soft)}


/* Дія, що виглядає як посилання: кнопка серед тексту не мусить бути коробкою.
   Клас називався на трьох екранах задачі, а в стилях його не було зовсім. */
.td-linkish{background:none;border:0;padding:8px 0;min-height:44px;
  color:var(--accent);font:inherit;cursor:pointer;text-align:left;
  text-decoration:none}
.td-linkish:hover{text-decoration:underline}


/* ── ІСТОРІЯ ЗМІН КОМПАНІЇ (зміна 366) ──────────────────────────────────────
   Три стовпці: КОЛИ (числа рівним стовпчиком) · ЩО (у межах норми рядка) ·
   ХТО. На вузькому вікні стовпці стають рядками — норма вимагає одну колонку
   при зумі 400%, і те саме правило рятує телефон. */
.td-filter{display:grid;grid-template-columns:1fr 180px 180px auto auto;
  gap:var(--s2);align-items:end}
.td-filter label{margin-top:0}
@media (max-width:900px){.td-filter{grid-template-columns:1fr}}
.td-histbox{overflow-x:auto}
.td-hist{list-style:none;margin:0;padding:0;min-width:0}
.td-hist li{display:grid;grid-template-columns:160px minmax(0,1fr) 240px;
  gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line);
  align-items:baseline}
.td-hist li:last-child{border-bottom:0}
.td-hist .when{color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap;font-size:14px}
.td-hist .what{max-width:var(--measure);line-height:1.45}
.td-hist .about{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.td-hist .who{color:var(--txt-soft);font-size:14px}
/* Автора цього запису платформа не знає. Кажемо це словами і НЕ лише кольором:
   колір сам по собі змісту не несе (WCAG 1.4.1). */
.td-hist .who.unknown{color:var(--muted);font-style:italic}
@media (max-width:900px){
  .td-hist li{grid-template-columns:1fr;gap:2px}
  .td-hist .who::before{content:"хто: "}
}
/* Абзац усередині картки під правило сторінки не підпадає — межу довжини
   рядка йому треба поставити своїм класом, інакше він тягнеться на весь монітор. */
.td-hist-note{max-width:var(--measure);margin:var(--s3) 0 0}
.td-pager{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;
  margin-top:var(--s3)}
.td-pager .pos{color:var(--muted);font-variant-numeric:tabular-nums}

/* ── ДЗЕРКАЛО КЕРІВНИКА (зміна 391, 30.08.2026) ─────────────────────────────
   Токени ті самі, що й на решті екранів: жодного власного кольору тут немає,
   тому обидві теми працюють даром. */
.td-period{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.td-period > div{display:flex;gap:var(--s2);flex-wrap:wrap}
/* Обраний період позначений і рамкою, і словом у aria-pressed: сам колір
   змісту не несе (WCAG 1.4.1). */
.td-day[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);
  font-weight:600}
/* Плитки: скільки влізе, але не вужчі за 200px — інакше число й підпис
   злипаються в кашу на вузькому вікні. */
.td-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--s3);margin:var(--s4) 0}
.td-tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:var(--s3);display:flex;flex-direction:column;gap:2px}
.td-tile .n{font-size:26px;font-weight:600;line-height:1.15;
  font-variant-numeric:tabular-nums}
.td-tile .t{font-size:14px}
.td-tile .td-muted{font-size:13px}
/* Широка таблиця їде вбік У СВОЇЙ коробці, а не тягне за собою всю сторінку. */
.td-tablebox{overflow-x:auto}
.td-tablebox table{min-width:880px}
/* Імʼя і позначка біля нього не ламаються на склади: стовпець краще поїде
   вбік у своїй коробці, ніж перетвориться на вузьку колонку з літер. */
.td-tablebox th[scope="row"]{white-space:nowrap}
.td-tablebox .td-chip{white-space:nowrap}
.td-queue{list-style:none;margin:0;padding:0}
.td-queue li{display:flex;align-items:center;gap:var(--s2);
  min-height:44px;border-bottom:1px solid var(--line)}
.td-queue li:last-child{border-bottom:0}
.td-queue .s{flex:1 1 auto}
.td-queue .td-num{font-weight:600;font-variant-numeric:tabular-nums}
.td-refusals{list-style:none;margin:0;padding:0}
.td-refusals li{display:grid;grid-template-columns:110px 1fr 110px;gap:var(--s2);
  padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.td-refusals li:last-child{border-bottom:0}
.td-refusals .when{color:var(--muted);font-variant-numeric:tabular-nums}
.td-refusals .why{max-width:var(--measure)}
@media (max-width:900px){
  .td-refusals li{grid-template-columns:1fr;gap:2px}
  .td-refusals .when::before{content:"коли: "}
}
/* Підказка про гортання потрібна лише там, де таблиця справді не влазить. */
.td-scrollhint{display:none;font-size:13px;margin:var(--s2) 0 0}
@media (max-width:900px){.td-scrollhint{display:block}}
.td-limits{margin:0;padding-left:var(--s4);max-width:var(--measure)}
.td-limits li{margin-bottom:var(--s1)}

/* ⭐ 666–667: двофакторний вхід — QR, ключ для ручного введення, резервні коди.
   Один вигляд на екрані входу і на картці людини. */
.td-qr svg{width:220px;height:220px;display:block;margin:8px auto}  /* білий фон і тиха зона — у самому SVG */
.td-key{font-size:15px;letter-spacing:1px;word-break:break-all;user-select:all}
.td-codes{columns:2;font-family:ui-monospace,Consolas,monospace;font-size:16px;line-height:1.9}
.td-fieldset{border:0;padding:0;margin:12px 0 0}
.td-fieldset legend{font-weight:600;margin-bottom:4px}