/* Log.gold, «Лампа»: янтарный CRT. Тема одна (DESIGN §2). */

:root{
  --bg:#120d06; --surface:#1a1309; --surface-2:#231a0c; --surface-3:#2c2110;
  --border:#3f2f15; --border-hi:#5a441d;
  --text:#ffb000; --text-dim:#bf8a38; --text-mute:#8a6526;
  --accent:#ffb000; --accent-ink:#150f04;
  --running:#7ddc4a; --review:#ff5fd0; --danger:#ff5a4a; --paused:#4fd6e0;

  --font:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono","DejaVu Sans Mono",monospace;
  --mono:var(--font);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-control:6px; --r-card:10px; --r-pill:999px;
  --w-page:1120px;
}

*{box-sizing:border-box}
/* Схема объявляется всему документу, а не только полям ввода: без неё
   браузер рисует системными светлыми всё, что рисует сам, и полосы
   прокрутки внутри диалогов выходили белыми поперёк тёмного экрана.
   Поймано на проде 21.09.2026. */
html{color-scheme:dark}
html,body{margin:0}

/* Тонкая полоса в цвете рамок, там, где содержимое не помещается.
   Правило общее: раньше оно было только у таблиц, и каждый новый
   прокручиваемый блок приходилось вспоминать отдельно. */
*{scrollbar-width:thin; scrollbar-color:var(--border-hi) transparent}
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-hi); border-radius:var(--r-pill)}
/* Атрибут hidden обязан побеждать: display:none он получает из браузерного
   стиля, а любое авторское правило с display (.block, .btn, .livepill…) его
   перебивает, и элемент, спрятанный из JS, остаётся на экране. */
[hidden]{display:none !important}
body{
  background:var(--bg); color:var(--text);
  font:400 14px/1.5 var(--font);
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent)}
:where(a,button,select,input,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
h1,h2,h3{margin:0; font-weight:600}
.h-page{font-size:20px}
.h-sect{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim)}
.note{font-size:12px; color:var(--text-dim); margin:var(--sp-2) 0 0}
.err{font-size:13px; color:var(--danger); margin:var(--sp-2) 0 0}
.num{text-align:right}
table,.counter time,time,.day-total b,td.num,th.num{font-variant-numeric:tabular-nums}

/* ── Шапка ─────────────────────────────────────────────────────────── */
.appbar{
  display:flex; align-items:center; gap:var(--sp-3) var(--sp-4);
  padding:var(--sp-2) var(--sp-4); min-height:52px; flex-wrap:wrap;
  background:var(--surface-2); border-bottom:1px solid var(--border);
  /* Шапка липкая: в ней меню, идущая задача с паузой и стоп, и уезжать
     вместе с длинным списком задач ей нельзя (владелец, 27.09.2026).
     Выше выпадающих списков страницы (20), ниже всплывающих сообщений (60). */
  position:sticky; top:0; z-index:30;
}
.brand{font-weight:600; letter-spacing:.02em; text-decoration:none; color:var(--text)}
.nav{display:flex; gap:2px; flex:1 1 auto; flex-wrap:wrap; min-width:max-content}
.nav a{
  padding:6px 10px; border-radius:var(--r-control);
  color:var(--text-dim); text-decoration:none; white-space:nowrap;
}
.nav a:hover{color:var(--text)}
.nav a[aria-current]{color:var(--text); background:var(--surface); border:1px solid var(--border-hi)}
.nav .count{
  display:inline-block; margin-left:6px; padding:0 6px; border-radius:var(--r-pill);
  background:var(--review); color:#1a0d16; font-size:11px; font-weight:600; vertical-align:1px;
}
.who{display:flex; align-items:center; gap:var(--sp-2); color:var(--text-dim); font-size:12px}
.lang-switch{min-height:28px; padding:2px 6px; font-size:12px; border-radius:var(--r-control)}
.who .name{max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Индикатор идущей записи, на всех экранах (DESIGN §3) */
/* «Стоп», правый торец пилюли, а не отдельная кнопка внутри неё: своё
   скругление у кнопки спорило со скруглением поля. Кнопка тянется на всю
   высоту и обрезается формой пилюли через overflow. */
.livepill{
  display:flex; align-items:stretch; flex:none; gap:0;
  min-height:34px; padding-left:11px; overflow:hidden;
  border:1px solid var(--border-hi); border-radius:var(--r-pill); background:var(--surface);
}
.livepill .dot,.livepill .task,.livepill time{align-self:center}
.livepill .dot{margin-right:9px}
/* Название задачи может быть любой длины, а пилюля живёт в шапке рядом с
   навигацией, расти ей некуда. Поэтому обрезаем, но не жёстким числом:
   на широком экране места больше, и обрезать там нечего. Полный текст
   в подсказке при наведении (title), плюс он всегда целиком на экране
   таймера, где пилюля и не показывается. */
.livepill .task{
  color:var(--text-dim); max-width:clamp(120px, 22vw, 380px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.livepill time{font-weight:500; font-size:13px; margin:0 11px}
/* Последнему в пилюле нужен отступ, обходящий скругление: радиус здесь
   равен половине высоты, дуга подступает к тексту заметно ближе прямой
   кромки, и секунды цепляли рамку. Правило по месту, а не по тегу: в
   работающей пилюле время лежит в <time>, а в паузе, в <span>. Кнопка
   «стоп» исключена: она обязана прилегать к краю, это её форма. */
.livepill > :last-child:not(.btn){margin-right:18px}
.livepill .paused-since,.livepill #livepause-since{margin-left:11px}
.livepill .btn{min-height:0; border:0; border-radius:0; padding:0 16px}
.dot{
  width:8px; height:8px; border-radius:50%; background:var(--running); flex:none;
  box-shadow:0 0 0 3px rgba(125,220,74,.22); animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(125,220,74,.06)}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}

/* ── Страница ──────────────────────────────────────────────────────── */
.page{max-width:var(--w-page); margin:0 auto; padding:var(--sp-5) var(--sp-4) var(--sp-6);
      display:flex; flex-direction:column; gap:var(--sp-5)}
.page-center{max-width:420px; padding-top:var(--sp-6)}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--sp-5)}
.card-login{display:flex; flex-direction:column; gap:var(--sp-4)}
.card-login h1{margin-bottom:var(--sp-1)}
.card-login form{display:flex; flex-direction:column; gap:var(--sp-4)}
.card-login .btn{margin-top:var(--sp-2)}
.block{display:flex; flex-direction:column; gap:var(--sp-3)}
.sect-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3)}
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap}
.filters{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.period{display:flex; align-items:stretch; gap:4px}
.btn-nav{min-width:32px; padding:0 8px; font-size:16px; line-height:1}

/* Пауза. Голубой, единственный цвет, не занятый другим состоянием:
   зелёный это «идёт», розовый «на разборе», красный «неактивен». */
.btn-pause{background:var(--surface-2); border-color:var(--paused); color:var(--paused)}
.paused{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.paused .what{font-size:14px}
/* Распорка после текста: всё, что за ней (кнопки), уезжает вправо. Тот же
   приём, что в строке старта, где вправо кнопку выталкивает растянутое
   поле задачи. Кнопки действия в проекте стоят справа, в одном месте
   слева они читались как другая, чужая панель. */
.paused .since{color:var(--text-dim); font-size:12px; margin-right:auto}
.livepill.paused{color:var(--paused)}
.livepill.paused .dot{background:var(--paused); animation:none}
.row-end{display:flex; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-4)}

/* ── Поля и кнопки ─────────────────────────────────────────────────── */
/* Перечислять типы полей по одному, гарантированный способ забыть один
   и получить белую дырку в тёмной теме (так и вышло с input[type=number]).
   Поэтому стилизуем все поля, исключая те, у которых своя механика. */
select, textarea,
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]){
  font:400 14px var(--font); color:var(--text); background:var(--surface-2);
  border:1px solid var(--border-hi); border-radius:var(--r-control);
  padding:9px 10px; min-height:40px; max-width:100%;
}
input[type=checkbox],input[type=radio]{accent-color:var(--accent); width:15px; height:15px}
input::placeholder{color:var(--text-mute)}

/* Автозаполнение браузера. Chrome красит подставленные поля своим бледным
   фоном, и обычный `background` его не перебивает, правило браузера
   сильнее авторского. Обходится единственным способом: залить фон
   внутренней тенью (её браузер не переопределяет) и задать цвет текста
   через -webkit-text-fill-color, потому что `color` там тоже игнорируется.
   Без этого экран входа с сохранённым паролем, два белых пятна в тёмной
   теме, и глаз уходит на них, а не на кнопку.
   Задержка в transition, приём, чтобы фон браузера не успел проступить
   на кадр при подстановке. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 100px var(--surface-2) inset;
  box-shadow:0 0 0 100px var(--surface-2) inset;
  caret-color:var(--text);
  border-color:var(--border-hi);
  transition:background-color 100000s ease-in-out 0s;
}
/* Firefox, своё свойство и свой фон подстановки. */
input:autofill,select:autofill,textarea:autofill{
  background:var(--surface-2); color:var(--text);
  filter:none;   /* Firefox иначе накладывает свою подсветку поверх */
}
/* Календарь и стрелки числовых полей в тёмной теме рисуются браузером
   подсказываем ему схему, иначе иконки остаются чёрными на чёрном. */
input[type=date],input[type=datetime-local],input[type=number]{color-scheme:dark}
.field{display:flex; flex-direction:column; gap:5px}
.field .label{font-size:12px; color:var(--text-dim)}
fieldset.field{border:0; padding:0; margin:0}
.check{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim)}

/* Поле с «глазиком»: кнопка лежит поверх правого края поля, поэтому полю
   нужен отступ под неё, иначе длинный пароль уезжает под кнопку. */
/* Поле времени со стрелками: кнопки справа внутри рамки, как «глазик» у
   пароля, чтобы поле не меняло ширину и не сдвигало соседей. */
.stepper{position:relative; display:block}
.stepper > input{width:100%; padding-right:64px}
.step-btn{
  position:absolute; top:0; height:100%; width:30px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-left:1px solid var(--border); padding:0;
  color:var(--text-dim); font-size:10px; cursor:pointer;
}
.step-btn:nth-of-type(1){right:30px}
.step-btn:nth-of-type(2){right:0}
.step-btn:hover{color:var(--accent)}
.peek{position:relative; display:block}
.peek > input{width:100%; padding-right:38px}
.peek-btn{
  position:absolute; top:0; right:0; height:100%; width:34px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; cursor:pointer;
  font-size:15px; line-height:1; color:var(--text-dim);
}
.peek-btn:hover{color:var(--text)}
.peek-btn[aria-pressed="true"]{color:var(--accent)}

.ver{font-size:10px; color:var(--text-mute); margin-left:6px; letter-spacing:0; vertical-align:2px}

/* Выбор нескольких значений: кнопка и список галочек под ней. Ширина
   кнопки фиксирована, иначе строка фильтров прыгает при каждом выборе, и
   соседние кнопки уезжают из-под курсора. */
.pick{position:relative}
.pick-btn{
  height:34px; min-width:150px; max-width:220px; padding:0 10px;
  font:400 13px var(--font); color:var(--text); text-align:left;
  background:var(--surface-2); border:1px solid var(--border-hi);
  border-radius:var(--r-control); cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pick-btn:hover{border-color:var(--accent)}
.pick-btn[aria-expanded="true"]{border-color:var(--accent)}
.pick-menu{
  position:absolute; z-index:20; top:calc(100% + 4px); left:0; min-width:240px;
  max-height:320px; overflow:auto;
  background:var(--surface-2); border:1px solid var(--border-hi);
  border-radius:var(--r-card); padding:var(--sp-2);
}
.pick-acts{display:flex; gap:var(--sp-3); padding:0 4px var(--sp-2)}
.pick-acts button{
  background:none; border:0; padding:0; cursor:pointer;
  font:400 12px var(--font); color:var(--text-dim); text-decoration:underline;
}
.pick-acts button:hover{color:var(--accent)}
.pick-list label{
  display:flex; align-items:center; gap:8px; padding:5px 4px;
  font-size:13px; cursor:pointer; border-radius:4px;
}
.pick-list label:hover{background:var(--surface-3)}

/* Колонка «было → стало» в журнале. Каждая правка, своей строкой: в одну
   строку они сливаются в кашу, а читают их именно построчно, выискивая, что
   же поменялось. Подпись поля приглушена, стрелка ещё сильнее, глаз должен
   цепляться за значения, а не за разметку. */
.ch{display:block}
.ch + .ch{margin-top:2px}
.ch-f{color:var(--text-dim)}
.ch-a{opacity:.5; padding:0 2px}

/* Справка о своём аккаунте: то, что показывается, но не меняется. */
.facts{
  display:grid; grid-template-columns:auto 1fr; gap:6px var(--sp-3);
  margin:var(--sp-4) 0 0; font-size:13px;
}
.facts dt{color:var(--text-dim)}
.facts dd{margin:0; color:var(--text)}

/* Список галочек: состав проекта и проекты сотрудника. Колонками, а не в
   строку, при двадцати сотрудниках строчный список превращается в кашу. */
.checklist{
  display:grid; gap:var(--sp-2);
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
.checklist label{
  display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text);
  padding:8px 10px; border:1px solid var(--border); border-radius:var(--r-control);
  cursor:pointer; min-height:44px;
}
.checklist label:hover{border-color:var(--accent)}
.checklist input{flex:none}
.checklist .sub{font-size:12px; color:var(--text-dim)}
.checklist .off{opacity:.6}
.note.warn{color:var(--review)}

/* Переключатель языка на экране входа: справа сверху, там же, где он
   стоит в шапке на всех остальных экранах. Один элемент не должен менять
   место от экрана к экрану, глаз ищет его там, где привык. */
.guest-bar{
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2);
  max-width:var(--w-page); margin:0 auto; padding:var(--sp-3) var(--sp-4) 0;
}
/* Название приглушено: на публичных экранах главное форма, а не бренд. */
.guest-left{display:inline-flex; align-items:baseline; gap:var(--sp-3)}
.guest-bar .brand{color:var(--text-dim); font-size:13px}
.guest-bar .brand:hover{color:var(--text)}
.guest-about{color:var(--text-mute); font-size:12px; text-decoration:none}
.guest-about:hover{color:var(--text-dim); text-decoration:underline}

/* Текстовые страницы. Колонка уже рабочих экранов: чем длиннее строка, тем
   хуже она читается, и около 70 знаков это предел, за которым глаз теряет
   начало следующей. */
.page-text{max-width:42rem; margin:0 auto; display:flex; flex-direction:column; gap:var(--sp-4)}
.prose{display:flex; flex-direction:column; gap:var(--sp-3); line-height:1.65}
.prose h2{font-size:19px; margin:var(--sp-5) 0 0}
/* Переход по оглавлению не должен прятать заголовок под липкой шапкой. */
.prose h2,.prose h3{scroll-margin-top:80px}
.prose h3{font-size:15px; color:var(--text-dim); margin:var(--sp-4) 0 0}
.prose p,.prose ul,.prose ol{margin:0}
.prose ul,.prose ol{padding-left:1.35em; display:flex; flex-direction:column; gap:6px}
.prose strong{color:var(--text)}
.prose code{background:var(--surface-2); border-radius:4px; padding:1px 5px; font-size:13px}
.prose hr{border:0; border-top:1px solid var(--border); width:100%; margin:var(--sp-4) 0}
.prose blockquote{
  margin:0; padding-left:var(--sp-3); color:var(--text-dim);
  border-left:2px solid var(--border-hi);
}
.content-table th,.content-table td{text-align:left; vertical-align:top}

/* Оглавление: только для длинных страниц, поэтому неброское. */
.toc{border:1px solid var(--border); border-radius:var(--r-control); padding:var(--sp-3) var(--sp-4)}
.toc ul{margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:4px}
.toc a{color:var(--text-dim); text-decoration:none; font-size:13px}
.toc a:hover{color:var(--accent); text-decoration:underline}
/* Резерв для noscript: без JS выпадающий список ничего не переключит. */
.guest-lang{display:inline-flex; gap:var(--sp-3); font-size:12px}
.guest-lang a{color:var(--text-mute); text-decoration:none}
.guest-lang a:hover{color:var(--text-dim); text-decoration:underline}
.guest-lang .on{color:var(--text-dim)}
.btn{
  font:500 14px var(--font); min-height:44px; padding:0 20px;
  border:1px solid transparent; border-radius:var(--r-control);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap; text-decoration:none;
}
.btn-sm{min-height:34px; padding:0 12px; font-size:13px}
.btn-wide{width:100%}
.btn-start{background:var(--accent); color:var(--accent-ink)}
.btn-stop{background:var(--danger); color:#1a0906}
.btn-ghost{background:var(--surface-2); border-color:var(--border-hi); color:var(--text)}
.btn-wait{background:transparent; border-color:var(--review); color:var(--review)}
input[readonly]{color:var(--text-dim); cursor:default}
.btn[disabled]{cursor:default; opacity:.75}
.btn-link{background:none; border:0; color:var(--accent); cursor:pointer; font:400 13px var(--font); padding:2px 4px}

/* Сегментный переключатель: разметка была, а стилей к ней не было, кнопки
   оставались браузерными и светили белым в тёмной теме. Форма и высота, как
   у соседних полей, иначе в одной строке фильтров спорят скругления. */
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{
  font:400 13px var(--font); color:var(--text); background:var(--surface-2);
  border:1px solid var(--border-hi); border-radius:var(--r-control);
  min-height:40px; padding:0 14px; cursor:pointer; white-space:nowrap;
}
.seg button:hover{border-color:var(--accent)}
.seg button[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:500;
}
.seg button[disabled]{opacity:.5; cursor:default}

/* Ссылка выхода в шапке */
.logout{color:var(--text-dim); text-decoration:none; border-bottom:1px dotted var(--border-hi)}
.logout:hover{color:var(--danger); border-bottom-color:var(--danger)}

/* Иконку календаря браузер рисует сам: под color-scheme:dark она светлая
   и бьёт по глазам ярче текста, приглушаем. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator{opacity:.55; cursor:pointer}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=datetime-local]:hover::-webkit-calendar-picker-indicator{opacity:.9}

/* ── Таймер ────────────────────────────────────────────────────────── */
.startrow{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:flex-start}
.startrow select{min-width:200px; min-height:44px}
.startrow .btn{min-width:120px}
.ac{position:relative; flex:1; min-width:240px}
.ac input{width:100%; min-height:44px}
.ac-list{
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px);
  margin:0; padding:4px; list-style:none;
  background:var(--surface-2); border:1px solid var(--border-hi); border-radius:var(--r-control);
  box-shadow:0 8px 24px rgba(0,0,0,.5); max-height:280px; overflow-y:auto;
}
.ac-list li{padding:8px 10px; border-radius:4px; cursor:pointer}
.ac-list li[aria-selected=true]{background:var(--surface-3); color:var(--text)}
.ac-list li .hint{color:var(--text-mute); font-size:12px}
.ac-list li.hint-row{color:var(--text-dim); cursor:default}

.counter{display:flex; align-items:baseline; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-4)}
.counter time{font-size:44px; line-height:1; letter-spacing:-.02em}
.glow{text-shadow:0 0 18px rgba(255,176,0,.35)}
.counter .meta{color:var(--text-dim)}
.pdot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:1px}

.chips{display:flex; flex-wrap:wrap; gap:7px}

/* Вкладки Разбора. Выбранная подчёркнута акцентом, как активный пункт меню:
   один смысл, один вид. */
.tabs{display:flex; gap:var(--sp-1); border-bottom:1px solid var(--border)}
.tab{
  background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:8px 14px; color:var(--text-dim); font:400 14px var(--font); cursor:pointer;
}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--text); border-bottom-color:var(--accent)}
.plan-diff{display:block; font-size:12px}
.task-kind{font-size:11px; color:var(--text-mute); letter-spacing:.02em}
.comment-body{white-space:pre-wrap; overflow-wrap:anywhere}
/* Лента комментариев: прокручивается сама, чтобы длинная переписка не
   выталкивала поле ввода за край окна. */
.feed{display:flex; flex-direction:column; gap:var(--sp-3); max-height:260px; overflow-y:auto}
.feed-item{border-left:2px solid var(--border-hi); padding-left:var(--sp-3)}
.feed-head{font-size:12px; margin-bottom:2px}

/* Список поставленных задач. Строка, а не фишка: у задачи есть что сказать
   кроме названия, и в фишку это не помещается. */
.tasklist{display:flex; flex-direction:column; gap:6px}
.taskrow{
  display:flex; flex-direction:column; gap:3px; width:100%; text-align:left;
  padding:10px 13px; border:1px solid var(--border); border-radius:var(--r-control);
  background:var(--surface); color:var(--text); font:400 13px var(--font); cursor:pointer;
}
.taskrow:hover{border-color:var(--accent)}
/* Идущая и стоящая на паузе строки. Зелёный и голубой те же, что у
   лампочки в шапке: смысл «идёт время» везде один. Полоса слева читается
   боковым зрением, рамка подтверждает при взгляде. */
.taskrow.is-running{border-color:var(--running); box-shadow:inset 3px 0 0 var(--running); cursor:default}
.taskrow.is-running:hover{border-color:var(--running)}
.taskrow.is-paused{border-color:var(--paused); box-shadow:inset 3px 0 0 var(--paused)}
.tr-clock{color:var(--running); font-variant-numeric:tabular-nums; font-size:12px}
.tr-act.tr-stop{color:var(--danger)}
.chip.is-running{border-color:var(--running); color:var(--text)}
.chip.is-paused{border-color:var(--paused); color:var(--text)}
.tr-main{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.tr-title{color:var(--text)}
.tr-meta,.tr-desc{color:var(--text-dim); font-size:12px}
.tr-desc{
  /* Описание может быть длинным, а список должен оставаться списком. */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
/* Действие в строке задачи: справа, как все действия в проекте. Строка
   кликабельна целиком (это старт), поэтому действие отделено и подписано
   словом, иначе человек не поймёт, что нажмёт. */
/* Действия в обычном потоке, справа последней строкой: их два, и
   прибитые к краю поверх текста они на узком экране наезжали бы на
   название задачи. */
.tr-acts{display:flex; justify-content:flex-end; gap:var(--sp-4); margin-top:2px}
.tr-act{font-size:12px; color:var(--accent); cursor:pointer}
.tr-act:hover{text-decoration:underline}
.tr-act.sub{color:var(--text-mute); cursor:default}
.tr-act.sub:hover{text-decoration:none}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
  border:1px solid var(--border); border-radius:var(--r-pill);
  background:var(--surface); color:var(--text-dim); font:400 13px var(--font); cursor:pointer;
}
.chip:hover{border-color:var(--accent); color:var(--text)}
.chip .sep{color:var(--text-mute)}

/* ── Таблицы ───────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-control)}
.nav{scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
/*
 * Ширины колонок заданы явно, а раскладка, fixed.
 *
 * При раскладке auto браузер считает ширину по содержимому ВСЕХ строк. Это
 * значит, что одна и та же страница выглядит по-разному в зависимости от
 * данных: включил «показать удалённые», строк стало больше, среди них
 * длинное название задачи, и вся сетка поехала. Человек при этом ничего не
 * менял в настройках экрана, а экран стал другим.
 *
 * Ширины берутся из заголовка (при fixed первая строка задаёт сетку), в
 * пикселях и по русским подписям: они длиннее английских, «некорректно»
 * против «flag». Размер по длинному языку подходит обоим; по короткому
 * подошёл бы только ему.
 *
 * Гибкой оставлена ровно одна колонка в каждой таблице, та, где живёт
 * произвольный текст. Она и забирает остаток.
 */
table{width:100%; border-collapse:collapse; table-layout:fixed}
/* Текст переносится: раньше nowrap стоял на всех ячейках, и таблица не могла
   сжаться, отсюда обрезанные колонки и полоса прокрутки на ровном месте.
   nowrap остаётся только там, где перенос ломает смысл: цифры, время, бейджи. */
th,td{padding:6px 10px; text-align:left; border-bottom:1px solid var(--border);
      white-space:normal; overflow-wrap:break-word}
/* Подстраховка от наложения. Ячейки с nowrap (время, числа) при нехватке
   места выползают поверх соседней колонки, и строка читается как каша из
   двух чисел, так и вышло в разборе, где интервал идёт с датой и на треть
   длиннее, чем в истории. Обрезка вместо наложения: она заметна и
   локальна, а наложение выглядит поломкой отрисовки. Правильный размер
   колонки это не отменяет, только страхует следующий промах. */
td{overflow:hidden}
/* Заголовки, имена, цифры и время не рвём: перенос посреди слова читается
   хуже, чем чуть более широкая колонка. */
thead th{white-space:nowrap}
td.t,th.t,td.num,th.num,.nowrap{white-space:nowrap; overflow-wrap:normal}
td.acts{white-space:normal; text-align:right}
td.acts .btn-link{padding:2px 3px}

/*
 * Нижняя граница ширины таблицы.
 *
 * Обязательна, и вот почему: при table-layout:fixed колонки с заданной
 * шириной своё получают всегда, а гибкой достаётся остаток. Если окно уже
 * суммы фиксированных, остаток равен нулю, колонка схлопывается, и текст в
 * ней переносится по одной букве. На проде это выглядело как строки высотой
 * в 1357 пикселей.
 *
 * Значение = сумма фиксированных колонок плюс разумный минимум гибкой.
 * Уже этого, таблица прокручивается внутри своей рамки, а не давит
 * содержимое. Страницу вбок это не тянет: `.tablewrap` прокручивается сам.
 */
#entries{min-width:1060px}
#audit{min-width:1072px}
#users{min-width:1048px}
#review{min-width:1020px}
#review-tasks{min-width:900px}
#projects{min-width:820px}
#today{min-width:600px}
#tasks{min-width:540px}
#companies{min-width:1040px}
#maillog{min-width:820px}
#changelog{min-width:900px}
#board{min-width:1020px}
#platformlog{min-width:900px}
#report,#pivot{min-width:480px}

/* Ширины колонок. Подписи короткие и одинаковые на всех экранах: колонка
   «когда» это «когда» везде, и заводить на каждый экран свой набор
   размеров значило бы получить пять по-разному ведущих себя таблиц. */
/*
 * Числа, из замера самого длинного содержимого на настоящем шрифте плюс
 * отступы ячейки. Не «на глаз» и не с запасом: запас здесь отбирается у
 * колонки с текстом, а сумма всех колонок обязана поместиться в ширину
 * страницы (1120 минус отступы = 1088). Иначе таблица прокручивается вбок
 * даже на большом мониторе, так и вышло с «Людьми» и «Журналом».
 *
 * Имена классов, по смыслу колонки, а не по размеру: «когда» это «когда»
 * на всех экранах. Поэтому меток времени две: в журнале нужны секунды
 * (19 знаков), в «Людях» хватает минут (16).
 */
.w-date{width:104px}
.w-name{width:152px}
.w-actor{width:120px}
.w-project{width:184px}
.w-action{width:140px}
.w-time{width:148px}
/* Интервал с датой, «2026-09-16 11:49, 14:00», на треть длиннее
   чистого «11:49, 14:00» из истории. */
.w-span{width:224px}
.w-num{width:62px}
/* Вид письма и его итог: в 62 пикселя не влезает ни «changed», ни
   «throttled», и слово рвалось посреди, «chang/ed». Перенос внутри слова
   читается хуже, чем колонка на треть шире. */
.w-kind{width:96px}

/* Журналы свёрнуты: развёрнутыми они делают страницу бесконечной, а
   настройки почты уезжают за три экрана. */
.logs{border:1px solid var(--border); border-radius:var(--r-card); padding:var(--sp-3) var(--sp-4)}
.logs > summary{cursor:pointer; color:var(--text-dim); font-size:13px; letter-spacing:.04em; text-transform:uppercase}
.logs > summary:hover{color:var(--text)}
.logs[open] > summary{margin-bottom:var(--sp-4)}
.w-count{width:80px}
.w-when{width:176px}
.w-login{width:154px}
.w-email{width:176px}
.w-role{width:160px}
.w-tz{width:127px}
.w-badge{width:110px}

/* Действия, в два этажа, а не в четыре и не в один.
   Замеры на реальном шрифте: одной строкой по-русски они занимают 291px, и
   тогда колонке задачи остаётся 148, перенос почти в каждой строке. В два
   этажа действиям хватает 190, задаче достаётся 246 (сегодня 267 при
   четырёх этажах). То есть высота строки падает вдвое, а место под текст
   почти не меняется.
   По-английски подписи вдвое короче и встают в одну строку сами. */
.w-acts{width:190px}
.w-act-one{width:130px}

/* Там, где действие называется длинно («обрезать до 18:42»), перенос
   оставлен: строк на этих экранах мало, а обрезать подпись значило бы
   спрятать время, ради которого кнопку и читают. */
.w-acts-wide{width:201px}
thead th{
  position:sticky; top:0; z-index:1;
  background:var(--surface-3); font-size:12px; font-weight:600; color:var(--text-dim);
  border-bottom:1px solid var(--border-hi);
}
tbody tr:nth-child(even) td{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
tr.group td{font-weight:600; background:var(--surface-3) !important; color:var(--text)}
tr.sub td{font-weight:500; background:var(--surface-2) !important}
tr.total td{font-weight:600; border-top:1px solid var(--border-hi); background:var(--surface-3) !important}
td.ind{padding-left:26px; color:var(--text-dim)}
th .wd{font-weight:400; font-size:10px; color:var(--text-mute); text-transform:none; letter-spacing:0}
.day-total{display:flex; gap:var(--sp-2); align-items:baseline; color:var(--text-dim); font-size:12px}
.day-total b{font-size:17px; color:var(--text)}

/* ── Бейджи и состояния ────────────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px;
  border-radius:var(--r-pill); font-size:12px; font-weight:500; white-space:nowrap;
}
.b-review{background:var(--review); color:#1a0d16}
.b-flag{border:1px solid var(--review); color:var(--review)}
.b-mid{border:1px solid var(--border-hi); color:var(--text-dim)}
/* «идёт», тем же зелёным, что лампочка идущей записи: один смысл, один
   цвет. Серым он читался как «архив», то есть ровно наоборот. */
.b-run{border:1px solid var(--running); color:var(--running)}
.b-pause{border:1px solid var(--paused); color:var(--paused)}
.b-inactive{border:1px solid var(--danger); color:var(--danger)}
/* «Завершена»: приглушённо, без зелёного. Закрытая задача это не успех и
   не тревога, а просто то, чего больше нет в работе. */
.b-done{border:1px solid var(--border); color:var(--text-mute)}
/* «Ушло», спокойное состояние, и цвет у него спокойный: тот же
   зелёный, что у идущей записи, без заливки. */
.b-ok{border:1px solid var(--running); color:var(--running)}
/* Удалённая запись: текст приглушён, красная линия, причина видна сразу */
.strike{
  color:var(--text-mute); text-decoration:line-through;
  text-decoration-color:var(--danger); text-decoration-thickness:2px;
}
.muted{color:var(--text-dim)}

.swatches{display:flex; gap:6px; flex-wrap:wrap}
.swatch{width:28px; height:28px; border-radius:var(--r-control); border:2px solid var(--border); cursor:pointer}
.swatch[aria-pressed=true]{border-color:var(--text)}

dialog{
  color:var(--text); background:var(--surface);
  border:1px solid var(--border-hi); border-radius:var(--r-card);
  padding:var(--sp-5); max-width:min(460px,92vw);
}
dialog::backdrop{background:rgba(8,5,2,.72)}
dialog form{display:flex; flex-direction:column; gap:var(--sp-3)}

/* ── Тосты ─────────────────────────────────────────────────────────── */
.toasts{position:fixed; right:var(--sp-4); bottom:var(--sp-4); display:flex; flex-direction:column;
        gap:var(--sp-2); z-index:60; max-width:min(380px,90vw)}
.toast{
  background:var(--surface-2); border:1px solid var(--border-hi); border-radius:var(--r-control);
  padding:10px 12px; font-size:13px;
}
.toast.warn{border-color:var(--review); color:var(--review)}
.toast.bad{border-color:var(--danger); color:var(--danger)}

/* ── Мобильный (DESIGN §7): таймер полностью рабочий с телефона ────── */
@media (max-width:560px){
  .appbar{padding:var(--sp-2) var(--sp-3); gap:var(--sp-2)}
  /* min-width:max-content на .nav не даёт пунктам переноситься: шапка
     растягивается по содержимому и тянет за собой всю страницу, на 375px
     документ становился шире экрана (630px), и страница ездила вбок.
     На узком экране перенос важнее одной строки меню. */
  .nav{order:3; width:100%; min-width:0}
  /* Шапка липкая, поэтому на узком экране меню одной строкой с прокруткой
     вбок, а не стопкой: перенесённое в три строки, оно заняло бы треть
     экрана поверх работы. */
  .nav{flex-wrap:nowrap; overflow-x:auto}
  .nav a{flex:none}
  .who{order:2; margin-left:auto}
  .livepill{order:4; width:100%}
  .livepill .task{max-width:none; flex:1}
  .startrow{flex-direction:column}
  .startrow select,.startrow .btn,.ac{width:100%}
  .counter time{font-size:36px}
}

/* Подвал: мелко и приглушённо, он нужен редко, но должен быть на месте. */
.footer{
  max-width:var(--w-page); margin:var(--sp-6) auto 0; padding:var(--sp-4);
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4);
  font-size:12px; color:var(--text-mute); border-top:1px solid var(--border);
}
.footer a{color:var(--text-dim)}
.footer a:hover{color:var(--accent)}

/* ── Печать (DESIGN §9): янтарь на чёрном принтер зальёт тонером ────── */
@media print{
  :root{
    --bg:#fff; --surface:#fff; --surface-2:#f2f2f2; --surface-3:#e8e8e8;
    --border:#999; --border-hi:#555;
    --text:#000; --text-dim:#444; --text-mute:#777;
    --accent:#000; --accent-ink:#fff;
    --running:#000; --review:#000; --danger:#000;
  }
  .appbar,.filters,.toasts,.btn,.chips,dialog{display:none !important}
  .page{max-width:none; padding:0}
  .glow{text-shadow:none}
  .tablewrap{overflow:visible; border:0}
  thead th{position:static}
  .badge{border:1px solid #000 !important; background:none !important; color:#000 !important}
}

/* ── Платформа ─────────────────────────────────────────────────────────
   Карточки сводки: крупное число и подпись под ним. Числа выровнены по
   базовой линии и моноширинные (см. общее правило tabular-nums), чтобы
   колонка цифр читалась столбиком, а не прыгала при обновлении. */
.cards{
  display:grid; gap:var(--sp-3); margin:var(--sp-4) 0;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.card{
  padding:var(--sp-3); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r-control);
}
/* Только плитки сводки. Раньше правило было на любой .card, а карточка это
   и блок таймера, и все диалоги: каждый span в них становился блоком
   мелкого шрифта. На паузе цветная точка проекта вставала отдельной
   строкой над названием, а текст уменьшался. Поймано владельцем 24.09.2026. */
.cards .card b{display:block; font-size:22px; font-variant-numeric:tabular-nums; line-height:1.2}
.cards .card span{display:block; margin-top:4px; font-size:12px; color:var(--text-dim)}
.cards .card em{display:block; margin-top:2px; font-size:12px; color:var(--text-mute); font-style:normal}

/* Настройки установки: восемнадцать полей столбиком это свиток. В две-три
   колонки они читаются как таблица, а на телефоне сами схлопываются в одну. */
#pf-fields{
  display:grid; gap:var(--sp-2) var(--sp-4);
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}
#pf-fields .muted{font-size:12px}

/* Полоса-напоминание: не ошибка и не тревога, поэтому янтарная рамка, а не
   красная заливка. Красный здесь означал бы «что-то сломалось», хотя всё
   работает, просто не до конца. */
.warnbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  flex-wrap:wrap; margin:0 auto; max-width:var(--w-page);
  padding:var(--sp-2) var(--sp-4); font-size:13px;
  color:var(--accent); background:var(--surface-2);
  border-bottom:1px solid var(--border-hi);
}

/* Ловушка для ботов: человек этого поля не видит. Уводим за экран, а не
   прячем display:none, часть ботов пропускает именно скрытые поля. */
.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Две колонки в узкой карточке, пояс и язык стоят рядом: вместе они
   читаются как одна настройка «где и на каком языке». */
.two{display:grid; gap:var(--sp-2) var(--sp-3); grid-template-columns:repeat(auto-fit, minmax(160px, 1fr))}

/* Код приглашения: его читают вслух по телефону, поэтому крупно, с
   разрядкой и моноширинным шрифтом, чтобы «3» и «B» нельзя было спутать
   даже на плохом экране. */
.code-big{
  margin:var(--sp-3) 0; padding:var(--sp-3);
  font:600 24px/1.3 var(--font); letter-spacing:.14em; text-align:center;
  color:var(--accent); background:var(--surface-2);
  border:1px solid var(--border-hi); border-radius:var(--r-control);
  user-select:all;   /* выделяется одним кликом, его часто копируют */
}

/* Заголовок-кнопка сортировки. Выглядит как заголовок, ведёт себя как
   кнопка: иначе по нему не попасть с клавиатуры. */
.th-sort{
  all:unset; cursor:pointer; color:inherit; font:inherit;
}
.th-sort:hover,.th-sort:focus-visible{color:var(--accent); text-decoration:underline}
.th-sort[aria-sort]{color:var(--accent)}

/* Компания, которая не работала месяц: приглушена, но читаема. Красным не
   красим это не ошибка, а факт. */
tr.idle td{color:var(--text-dim)}