/* ═══════════════════════════════════════════════════════════
   ЖУРНАЛ — вахтенный журнал смены
   ═══════════════════════════════════════════════════════════
   Календарь — прибор, настройки — папка с разделами, журнал — книга,
   в которой смена расписывается за сделанное. Отсюда всё остальное:

   · Поле. Через всю ленту насквозь идёт одна вертикальная линия: слева
     от неё час, род записи и подпись принявшего, справа сама запись.
     Она не двигается при прокрутке — страница проходит под ней, как под
     линейкой, — и держит три десятка записей одним листом.

   · Линовка вместо рамок. Строки разделены волосяной чертой, у строки
     нет ни фона, ни тени, ни радиуса: карточка на каждое действие
     превратила бы журнал в ленту новостей. Час сменился — черта
     темнеет: в смене «около двенадцати» ищут глазом.

   · Страница дня: шапка с числом и показателями, записи, подпись внизу.
     Крупных мест ровно два и оба служат: число дня — чем листают,
     принятые деньги — то, ради чего страницу открывают.

   · Цвета почти нет. Род операции несёт значок, а не пигмент: раскрасив
     девять родов, мы получили бы ёлку. Тоном помечены отмена и истёкшее
     удержание — это статусы (SPEC §8.3), и их в смене единицы.
   ═══════════════════════════════════════════════════════════ */

.journal{
  /* Размеры полей связаны, а не подобраны: линия поля стоит ровно между
     подписью и записью, и, сдвинув колонку, её не надо искать заново. */
  --jr-pad:22px; --jr-at:50px; --jr-ic:20px; --jr-who:24px;
  --jr-gap:10px; --jr-sum:112px;
  /* Час, род и подпись — одна группа в поле, и зазор между ними меньше,
     чем от поля до записи: иначе три мелочи стоят порознь. */
  /* Корешок ленты идёт сразу за часом и значком: время — опора
     журнала, и разрывать её именем нельзя. */
  --jr-gut:calc(var(--jr-pad) + var(--jr-at) + var(--jr-ic) + var(--jr-gap));

  display:none;flex:1;min-width:0;flex-direction:column;
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;
}
/* Место, а не вкладка: у журнала своя шапка, и приборная панель
   календаря сюда не относится — то же решение, что у настроек. */
body.on-journal .top,body.on-journal .cal{display:none}
body.on-journal .journal{display:flex}

/* Число у пункта меню считает journal.mjs. Пока не посчитано — бейджа
   нет: пустой кружок читается как ноль, а ноль это не то же самое. */
.badge-n:empty{display:none}

/* ── шапка экрана ── */
/* ── шапка вахты (SPEC §8.4) ──
   Голова журнала — один предмет, а не три полосы подряд: заголовок,
   даты и два ряда отбора стояли тремя этажами и читались панелью
   управления. Материал общий с плитой картотеки и головой дела: тот
   же лак, тот же свет, те же пигменты под ним (§8.5).

   Ярусов два: какой день и что из него. Разделяет их волосяная черта,
   а не смена поверхности, — предмет остаётся один. */
.jr-plate{
  position:relative;isolation:isolate;flex-shrink:0;
  background:var(--band);color:var(--band-ink);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .07);
  /* Свет поднимает фон под текстом; вторичный тон здесь светлее ровно
     настолько, чтобы держать порог в самой яркой точке (§8.3). */
  --band-ink-2:var(--plate-ink-2); --band-ink-3:var(--plate-ink-3);
  /* Плита широкая и низкая: пятна размечены от её середины. */
  --o1x:16%; --o1y:-170%; --o2x:70%; --o2y:-200%; --o3x:-4%; --o3y:-120%;
}
.jr-plate > :not(.plate-lite){position:relative;z-index:1}

/* Верхний ярус. Дата — предмет этого экрана: журнал ведут по сменам,
   и «7 сентября» здесь то же, что фамилия на карточке гостя. */
.jr-face{
  display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding:18px var(--jr-pad) 16px;
}
.jr-of{margin-right:auto;min-width:0}
.jr-of h2{
  font-size:28px;font-weight:600;letter-spacing:-.045em;
  line-height:1;color:var(--band-ink);
}
.jr-of span{display:block;margin-top:6px;font-size:12.5px;color:var(--band-ink-2)}

.jr-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Шаг по дням — один орган: стрелка, «сегодня», стрелка. Так же
   двигают период в шахматке, и рука уже это знает. */
.jr-move{
  display:flex;align-items:center;gap:1px;padding:2px;border-radius:var(--r);
  background:rgb(237 234 227 / .08);
}
.jr-arrow{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:calc(var(--r) - 2px);color:var(--band-ink-2);
  transition:background-color var(--t-tap) var(--ease),
    color var(--t-tap) var(--ease);
}
.jr-arrow-g{width:15px;height:15px}
@media (hover:hover) and (pointer:fine){
  .jr-arrow:hover{background:rgb(237 234 227 / .12);color:var(--band-ink)}
}
.jr-arrow:active{transform:scale(.92)}
.jr-arrow[disabled]{opacity:.3;pointer-events:none}
.jr-step{
  height:28px;padding:0 12px;border-radius:calc(var(--r) - 2px);
  font-size:12px;color:var(--band-ink-2);white-space:nowrap;
  transition:background-color var(--t-tap) var(--ease),
    color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .jr-step:hover{background:rgb(237 234 227 / .12);color:var(--band-ink)}
}
.jr-step.on{background:var(--band-ink);color:var(--band)}
.jr-step[disabled]{opacity:.3;pointer-events:none}

.jr-cal{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;
  border:1px solid rgb(237 234 227 / .18);border-radius:var(--r);
  font-size:12px;color:var(--band-ink-2);white-space:nowrap;
  transition:border-color var(--t-tap) var(--ease),
    background-color var(--t-tap) var(--ease), color var(--t-tap) var(--ease);
}
.jr-cal svg{width:14px;height:14px}
@media (hover:hover) and (pointer:fine){
  .jr-cal:hover{background:rgb(237 234 227 / .1);color:var(--band-ink)}
}

.jr-find{
  display:flex;align-items:center;gap:8px;height:32px;padding:0 11px;flex-shrink:0;
  border:1px solid rgb(237 234 227 / .18);border-radius:var(--r);
  background:rgb(0 0 0 / .18);color:var(--band-ink-3);
  transition:border-color var(--t-tap) var(--ease);
}
.jr-find:focus-within{border-color:var(--band-ink-2);color:var(--band-ink-2)}
.jr-find svg{width:13px;height:13px;flex-shrink:0}
.jr-find input{
  width:172px;min-width:0;border:none;outline:none;background:none;
  font-size:12px;color:var(--band-ink);
}
.jr-find input::placeholder{color:var(--band-ink-3)}
.jr-find input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.jr-print{
  width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;border:1px solid rgb(237 234 227 / .18);border-radius:var(--r);
  color:var(--band-ink-2);transition:background-color var(--t-tap) var(--ease);
}
.jr-print svg{width:15px;height:15px}
@media (hover:hover) and (pointer:fine){
  .jr-print:hover{background:rgb(237 234 227 / .1);color:var(--band-ink)}
}
.jr-print:active{transform:scale(.95)}

/* ── нижний ярус: отбор ──
   Два вопроса, а не один список: «что случилось» и «кто это сделал».
   Значок на кнопке тот же, что в строке: отобрав «Оплаты», глаз ищет
   в ленте тот же силуэт. */
.jr-sift{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
  padding:12px var(--jr-pad) 14px;
  border-top:1px solid rgb(237 234 227 / .1);flex-shrink:0;
}
.jr-set{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
/* Заголовок графы: две кнопки «Все» одна под другой без него читались
   как одно и то же условие. */
.jr-set-l{
  font-size:11px;font-style:normal;font-weight:500;
  color:var(--band-ink-3);
  margin-right:8px;
}
/* Один орган на один вопрос: сегменты сидят в общей обойме и делят
   её, а не рассыпаны отдельными кнопками. Выбранный поднят светлой
   плашкой — она и есть указатель. */
.jr-seg{
  display:inline-flex;align-items:center;gap:2px;padding:2px;
  border-radius:var(--r);background:rgb(237 234 227 / .08);
}
/* Семей шесть, а людей в смене бывает больше: на узком экране обойма не
   уходит за край, а листается вбок, как ярлыки «Учёта». */
.jr-set{max-width:100%}
.jr-seg{min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
.jr-seg::-webkit-scrollbar{display:none}
.jr-seg-b{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;
  border-radius:calc(var(--r) - 2px);font-size:11.5px;color:var(--band-ink-2);white-space:nowrap;
  transition:background-color var(--t-tap) var(--ease),
    color var(--t-tap) var(--ease), transform var(--t-tap) var(--ease);
}
/* Число на кнопке — половина сведения, а не подпись: третья ступень
   серого топила его до 4.1:1 под светлым пятном (§8.3). */
.jr-seg-b em{
  font-size:10px;font-style:normal;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--band-ink-2);
}
.jr-seg-b:active{transform:scale(.97)}
.jr-seg-b.on{background:var(--band-ink);color:var(--band)}
.jr-seg-b.on em{color:var(--band);opacity:.6}

/* Кто — теми же знаками, что и везде: цветной кружок с инициалами
   узнают быстрее, чем читают «Елена Б.» (§8.5). Люди сидят в такой же
   обойме, что и семьи: вопрос один — отвечает одна вещь. */
.jr-set-who .jr-seg{padding:2px 2px 2px 3px}
.jr-face-b{
  display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px 0 2px;
  border-radius:calc(var(--r) - 2px);font-size:11.5px;color:var(--band-ink-2);white-space:nowrap;
  transition:background-color var(--t-tap) var(--ease),
    color var(--t-tap) var(--ease), transform var(--t-tap) var(--ease);
}
.jr-av{
  width:22px;height:22px;flex-shrink:0;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--av,var(--band-3));color:var(--av-ink);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16);
  font-size:9px;font-style:normal;font-weight:600;
  letter-spacing:.02em;
}
/* Знак системы — не аватарка: плашка нейтральная, внутри шестерёнка. */
.jr-av-sys{background:rgb(237 234 227 / .12);color:var(--band-ink-2);box-shadow:none}
.jr-av-g{width:13px;height:13px;stroke-width:1.7}
.jr-face-b em{
  font-size:10px;font-style:normal;
  font-variant-numeric:tabular-nums;color:var(--band-ink-2);
}
.jr-face-b:active{transform:scale(.97)}
.jr-face-b.on{background:var(--band-ink);color:var(--band)}
.jr-face-b.on em{color:var(--band);opacity:.6}
/* Своя строка помечена кольцом: «Мои» — это не ещё один сотрудник. */
.jr-face-b.me .jr-av{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .3),
  0 0 0 2px rgb(237 234 227 / .25)}

/* Второй ярус: точные роды раскрытой семьи. Он тише обоймы — это
   уточнение уже выбранного, а не второй такой же вопрос. */
.jr-fine{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px;
  padding:0 var(--jr-pad) 14px;margin-top:-4px;
  animation:jrFine .22s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes jrFine{from{opacity:0;transform:translateY(-4px)}}
.jr-fine-b{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;
  border-radius:var(--r-sm);font-size:11px;color:var(--band-ink-3);white-space:nowrap;
  transition:background-color var(--t-tap) var(--ease),
    color var(--t-tap) var(--ease);
}
.jr-fine-g{width:12px;height:12px;flex-shrink:0;opacity:.75}
.jr-fine-b em{
  font-size:9.5px;font-style:normal;
  font-variant-numeric:tabular-nums;color:var(--band-ink-3);opacity:.8;
}
.jr-fine-b.on{background:rgb(237 234 227 / .16);color:var(--band-ink)}
.jr-fine-b.on .jr-fine-g,.jr-fine-b.on em{opacity:1;color:var(--band-ink)}
/* Возврат к семье назван словом, а не крестиком: крестик здесь читался
   бы «убрать отбор совсем». */
.jr-fine-off{margin-left:6px;text-decoration:underline;text-underline-offset:3px}

@media (hover:hover) and (pointer:fine){
  .jr-seg-b:hover,.jr-face-b:hover{background:rgb(237 234 227 / .12);color:var(--band-ink)}
  .jr-seg-b.on:hover,.jr-face-b.on:hover{background:var(--plate-hi);color:var(--band)}
  .jr-fine-b:hover{background:rgb(237 234 227 / .1);color:var(--band-ink)}
}

/* ── лист ──
   Линия поля нарисована фоном самой прокрутки, а не элементом внутри:
   так она стоит на месте, пока страница идёт под ней. */
/* Хвост в конце ленты — не воздух: без него последняя страница не может
   встать под шапку, и прыжок к самому старому дню оставляет его посреди
   экрана, а кнопка даты при этом называет соседний. */
.jr-feed{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:38svh;
  background-image:linear-gradient(var(--rule),var(--rule));
  background-size:1px 100%;background-position:var(--jr-gut) 0;background-repeat:no-repeat;
}

/* ── шапка дня ── */
.jr-day{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:13px;
  padding:19px var(--jr-pad) 13px;background:var(--card);
  border-bottom:1px solid var(--rule);
}
/* Число дня — то, чем журнал листают: в бумажном журнале страницу ищут
   по числу, а не по заголовку. */
/* Число дня — отрывной листок календаря: тёмный квадратик того же
   материала, что и шапка вахты. Он даёт ленте опору и ритм — под
   тёмной головой белый лист без единого якоря читался черновиком, —
   но не заливает полосу целиком: страницы дня идут сплошняком, и
   тёмная полоса разрезала бы ленту на карточки (§8.4). */
.jr-num{
  flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;border-radius:var(--r-mark);
  background:var(--band);color:var(--band-ink);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .09);
  font-size:20px;font-weight:600;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.jr-name b{display:block;font-size:13px;font-weight:600;letter-spacing:-.03em}
.jr-name span{display:block;font-size:11px;color:var(--ink-2);margin-top:1px}

/* Показатели смены. Приборная группа без тёмной полосы: полоса — примета
   ленты времени и в других местах уводит экран в чёрно-белое (SPEC §8.3). */
.jr-metrics{
  margin-left:auto;display:flex;align-items:flex-end;gap:18px;text-align:right;
  padding-left:20px;border-left:1px solid var(--rule-2);
}
.jr-metric b{
  display:block;font-size:13px;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink-2);line-height:1.1;
}
.jr-metric.jr-money b{font-size:20px;color:var(--ok);line-height:1}
/* Подпись показателя набрана в 9 px, и тон у неё --ink-2: на --ink-3
   это 2,6:1 — подпись, которую нельзя прочесть, показатель не называет. */
.jr-metric span{
  display:block;font-size:11px;font-weight:500;
  color:var(--ink-2);margin-top:4px;
}

/* ── строка операции ──
   Класс `tn-row` строке нужен не для вида: по нему карточку брони
   открывает booking-sheet.mjs — тот же обработчик, что и в шахматке.
   Свойства всплывающего списка сняты здесь же, чтобы чужая раскладка
   не протекала в лист журнала. */
.jr-rows{display:flex;flex-direction:column}
/* Строка ведомости: час, знак, содержание, деньги, подпись. Колонки
   постоянны на всю ленту — по ним глаз и бежит; без них список из
   тридцати строк читается сплошным текстом (SPEC §8.4). */
.journal .jr-row{
  position:relative;display:grid;
  grid-template-columns:var(--jr-at) var(--jr-ic) minmax(0,1fr) var(--jr-sum) var(--jr-who);
  column-gap:var(--jr-gap);row-gap:3px;
  /* По центру строки, а не по базовой линии: в сетке и текст, и коробки
     постоянного размера — знак, аватарка. По базовой линии они не
     сходятся, и держать их приходилось отрицательными полями; это и
     читалось как «съехавшие значки». */
  align-items:center;
  width:100%;margin:0;padding:9px var(--jr-pad) 10px;text-align:left;
  border-radius:0;border-bottom:none;
  transition:background-color var(--t-tap) var(--ease);
}
/* Черта между строками начинается за корешком: время идёт сплошной
   вертикалью, и разрезать её поперёк значит разорвать опору. */
.journal .jr-row::after{
  content:'';position:absolute;left:var(--jr-gut);right:var(--jr-pad);bottom:0;
  height:1px;background:var(--rule-2);
}
.journal .jr-rows .jr-row:last-child::after{content:none}
.journal .jr-row::before{content:none}
.journal .jr-row+.jr-row{margin-top:0}
/* Час сменился — черта темнеет: «около двенадцати» ищут глазом. */
.journal .jr-row.turn::before{
  content:'';position:absolute;left:var(--jr-gut);right:var(--jr-pad);top:0;
  height:1px;background:var(--rule);
}
.journal .jr-row.shut{cursor:default}
@media (hover:hover) and (pointer:fine){
  .journal .jr-row:hover{background:var(--paper)}
  .journal .jr-row.shut:hover{background:none}
}
.journal .jr-row:not(.shut):active{background:var(--sunk)}

.jr-at{
  grid-column:1;grid-row:1;justify-self:end;line-height:1;
  font-size:12px;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink-2);
}
/* Значок рода: силуэт читается раньше слова, и на тридцати строках
   подряд это и есть разница между списком и журналом. */
/* Знак рода — чернилами по строке, а не плашкой. Заливка была только у
   денег и срыва, и колонка выходила рваной: у одной записи кружок, у
   соседней ничего — это и читалось как выступающие значки. Тон несут
   сами чернила, а площадь для денег и так есть — сумма в своей колонке
   справа, зелёная и табличными цифрами (§8.3). */
.jr-glyph{
  grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;color:var(--ink-2);
}
.jr-glyph svg{width:17px;height:17px;stroke-width:1.9}
.journal .jr-row.t-cash .jr-glyph{color:var(--ok)}
.journal .jr-row.t-late .jr-glyph{color:var(--late)}
/* Подпись принявшего: инициалы кружком и имя. Кружок даёт колонке ритм —
   без него семнадцать одинаковых серых имён подряд читаются как шум. */
/* Час, род и подпись стоят одной группой слева направо, а пустое место
   остаётся у самой линии поля: дыра посреди группы читается как сбой,
   у поля — как поле. */
/* Подпись принявшего — знаком у правого края. Имя, набранное подряд
   семнадцать раз, читается шумом; цвет узнают, не читая. */
.jr-who{grid-column:5;grid-row:1;justify-self:end}
.jr-who i{
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-mark);background:var(--av,var(--stop));color:var(--av-ink);
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .07);
  font-size:8.5px;font-style:normal;font-weight:600;
  letter-spacing:.02em;
}
/* У записи без человека знак пустой и пунктирный: это отметка программы,
   а не чья-то подпись, и путать их в споре дороже всего. */
.jr-who i.none{
  background:none;color:var(--ink-2);box-shadow:none;
  border:1px dashed var(--rule);
}
.jr-who-g{width:13px;height:13px;stroke-width:1.7}
/* Имя уходит в бумагу: подшитый лист читают без наведения. */
.jr-who-n{display:none}
/* Запись: глагол несёт род словом, значок — силуэтом. */
.jr-said{
  grid-column:3;grid-row:1;font-size:13px;font-weight:550;letter-spacing:-.02em;
  color:var(--ink);min-width:0;
}
.jr-said em{font-style:normal;font-weight:400;color:var(--ink-2)}
/* Гость — продолжение фразы, а не отдельная графа: через запятую, как говорят. */
.jr-said em::before{content:", ";color:var(--ink-3)}

.jr-sum{
  grid-column:4;grid-row:1;justify-self:end;font-size:12.5px;
  font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  color:var(--ink);white-space:nowrap;
}
/* Залог набран тише выручки: он пришёл в кассу, но заведению не принадлежит. */
.jr-sum.aside{color:var(--ink-2);font-weight:400}

/* Про что запись: код визита, объект и подробность. Пустое не занимает
   места — прочерк читался бы как незаполненная графа. */
/* Вторая строка — две графы, а не цепочка через точки: слева где и что,
   справа код брони. Прижатый вправо, он выстраивается в свою вертикаль
   на всю ленту, и запись находят по коду, не читая строк. */
.jr-about{
  /* Сетка, а не поток: код брони держит правый край всегда. На потоке
     он соскакивал на свою строку, как только суть становилась длинной,
     и вертикаль кодов — то, ради чего он и стоит справа, — рассыпалась. */
  grid-column:3;font-size:11.5px;line-height:1.45;color:var(--ink-2);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;column-gap:14px;min-width:0;
}
/* Суть занимает первую графу целиком и обрывается многоточием: строка
   ведомости не растёт от длинного перечня. */
.jr-about > span:first-child{
  grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.jr-about > span+span{
  grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.jr-about code{
  grid-column:2;grid-row:1;justify-self:end;
  /* Код набран второй ступенью, а не третьей: третья даёт 3.13:1, а по
     коду ищут запись — он не подпись, а то, за чем сюда пришли. */
  font-family:var(--mono);font-size:10px;letter-spacing:.01em;color:var(--ink-2);
}
/* Место и суть — в одной графе через точку; переносить их нельзя, но и
   резать по отдельности незачем. */

.jr-about span:empty{display:none}

/* Тон отвечает на два вопроса и ни на один сверх: деньги пришли и дело
   сорвалось. Цвет никогда не один: рядом с ним стоит значок и глагол —
   смысл, переданный одним только цветом, теряется у трети читателей. */
.journal .jr-row.t-cash .jr-sum{color:var(--ok)}
.journal .jr-row.t-late .jr-said{color:var(--late)}
.journal .jr-row.t-stop .jr-glyph{color:var(--stop)}
/* Залог остаётся серым: он в кассе, но не наш (SPEC §5.7). */
.journal .jr-row .jr-sum.aside{color:var(--ink-2)}
/* Пересчёт кассы: недостача — красным, излишек — янтарным; расход и
   выемка — чернилами с минусом: это не ошибка (.scratch/accounting/cash.md). */
.jr-sum.short{color:var(--late)}
.jr-sum.over{color:var(--wait)}
/* Отменённая запись остаётся в ленте зачёркнутой суммой: её отмена —
   отдельной строкой с причиной. */
.journal .jr-row.void .jr-sum{text-decoration:line-through;color:var(--ink-3)}

/* ── было → стало ──
   Главный довод в споре с гостем (SPEC §3.8), поэтому это единственное
   место, где строка растёт. `del` и `ins` — единственные теги, которые
   ровно это и значат; полосы и подчёркивания у них сняты, разницу несут
   тон и вес. */
/* Выписка, а не коробка: тот же знак, что у комментария гостя (§8.5) —
   волосяная черта вдоль текста. Заливка здесь была третьей формой в
   строке и рвала ленту на карточки. */
.jr-diff{
  grid-column:3;justify-self:start;max-width:100%;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;
  margin-top:2px;padding:1px 0 1px 11px;
  box-shadow:inset 1px 0 0 var(--rule);
}
.jr-diff i{
  font-size:11px;font-style:normal;font-weight:500;
  color:var(--ink-2);
}
/* «Было» — половина довода в споре, и читаться она обязана наравне со
   «стало»: разницу несёт вес, а не выцветание. */
.jr-diff del{
  text-decoration:none;font-size:11.5px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.jr-diff ins{
  text-decoration:none;font-size:11.5px;font-weight:550;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.jr-diff ins::before{content:"→";margin-right:7px;font-weight:400;color:var(--ink-3)}

/* ── подпись смены ──
   Низ страницы, как в бумажном журнале: из чего сложились деньги, что
   стало с чужими и кто за день расписывался. */
.jr-foot{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;
  padding:10px var(--jr-pad) 12px calc(var(--jr-gut) + var(--jr-gap));
  background:var(--paper);border-top:1px solid var(--rule);
  font-size:11px;color:var(--ink-2);
}
.jr-foot-l{
  font-size:11px;font-weight:500;
  color:var(--ink-2);
}
.jr-foot b{
  font-weight:500;font-variant-numeric:tabular-nums;
  letter-spacing:0;color:var(--ink);
}
.jr-foot-i{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.jr-foot-i i{
  font-size:11px;font-style:normal;font-weight:500;
  color:var(--ink-2);opacity:.75;
}
.jr-crew b{font-family:var(--font);letter-spacing:0;color:var(--ink-2);font-weight:500}

/* ── календарик ──
   Тот же, что у шахматки: сетка `month-grid.mjs`, классы `.dp-*`,
   оболочка `.pop`. Своё здесь только одно — день без записей не
   нажимается: прыгать в него некуда. */
.pop-date .dp-d.none{opacity:.3}
.pop-date .dp-d[disabled]{cursor:default}
/* Хвост соседнего месяца в шахматке не нажимают — там он только показывает
   границу недели. В журнале записи бывают и в нём, и мёртвая строка с
   записями хуже, чем её отсутствие: день с записями нажимается всегда. */
.pop-date .dp-d.out:not(.none){opacity:.62;pointer-events:auto}
.pop-date .dp-d.sel b{color:var(--band-ink)}

/* ── состояния ──
   Пустая страница начинается там же, где записи: у линии поля. Лист
   размечен, просто ещё не исписан. */
.jr-empty{padding:64px var(--jr-pad) 70px var(--jr-gut);max-width:560px}
.jr-empty b{display:block;font-size:15px;font-weight:600;letter-spacing:-.03em}
.jr-empty p{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.jr-empty-do{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.jr-do{
  padding:6px 12px;font-size:12px;color:var(--accent-ink);background:var(--accent);
  border-radius:var(--r-sm);
  transition:background-color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .jr-do:hover{background:var(--accent-2)}
}
.jr-do:active{transform:scale(.97)}
.jr-do.quiet{background:none;color:var(--ink-2);border:1px solid var(--rule)}
@media (hover:hover) and (pointer:fine){
  .jr-do.quiet:hover{background:var(--sunk);color:var(--ink)}
}

/* ── движение ──
   Появляется страница целиком, а не каждая строка по очереди: журнал
   открывают десятки раз за смену, и каскад из тридцати строк на десятый
   раз мешает. Почерк общий с настройками: разгон и долгое затухание. */
@keyframes jrIn{from{opacity:0;transform:translateY(4px)}}
.jr-page,.jr-empty{animation:jrIn .19s var(--ease) both}
/* Прыжок к дате отвечает «вот эта страница» и гаснет: постоянной
   отметки выбранный день не заслуживает, он уже наверху. */
@keyframes jrHit{from{background:var(--sunk)}}
.jr-page.hit .jr-day{animation:jrHit 1.4s var(--ease)}

/* ── печать ──
   Журнал смены — единственный экран, который подшивают. На бумаге он
   документ: шапка с заведением и днём, записи и подпись смены; экранной
   оснастки — отбора, поиска, кнопок — в документе нет (SPEC §7.5). */
.jr-print-head{display:none}
@media print{
  @page{margin:14mm}
  .side,.top,.jr-plate,.jr-sift,.scrim,.sheet,.dlg,.dlg-over{display:none!important}
  /* В бумаге подпись принявшего — имя, а не цветной знак: подшитый лист
     читают без наведения, и цвет на нём не печатается. */
  .jr-who{grid-column:auto!important;margin:0!important}
  .jr-who i{display:none!important}
  .jr-who-n{display:inline!important;font-size:10px;font-weight:400;color:#000}
  html,body,.app,.main,.work{
    display:block!important;height:auto!important;overflow:visible!important;
    background:var(--card)!important;
  }
  .work{padding:0!important}
  .journal{
    display:block!important;box-shadow:none!important;border-radius:0;overflow:visible;
  }
  .jr-feed{overflow:visible!important;background-image:none}
  .jr-print-head{
    display:flex;align-items:baseline;gap:10px;padding:0 0 10px;
    border-bottom:1px solid var(--ink);margin-bottom:6px;
  }
  .jr-print-head b{font-size:14px;font-weight:600}
  .jr-print-head span{font-size:11px;color:var(--ink-2)}
  .jr-day{position:static!important;padding-left:0;padding-right:0}
  .jr-row{padding-left:0;padding-right:0;break-inside:avoid}
  .jr-foot{background:none;padding-left:0;padding-right:0}
  .jr-page{break-inside:auto}
  @media (hover:hover) and (pointer:fine){
    .jr-row:hover{background:none!important}
  }
}

@media (max-width:1240px){
  .journal{--jr-pad:16px; --jr-who:22px; --jr-sum:104px; --jr-gap:11px}
  /* Имя уходит, кружок остаётся: инициалы отличают смену не хуже, а
     ширина нужна записи. Полное имя остаётся подсказкой строки. */
  .jr-who span{display:none}
  .jr-find input{width:132px}
  .jr-head p{display:none}
  /* Узко — значит группы встают друг под друга. Черта между ними тогда
     не разделяет, а висит в начале строки: два вопроса разводит отступ. */
  .jr-sift{flex-direction:column;align-items:flex-start;gap:9px}
  .jr-set+.jr-set{padding-left:0;border-left:none}
}
@media (max-width:1010px){
  .jr-face{gap:12px}
  .jr-head{margin-right:0;width:100%}
  .jr-find{margin-left:auto}
}

@media (prefers-reduced-motion:reduce){
  .jr-page,.jr-empty,.jr-page.hit .jr-day{animation:none}
  .jr-chip:active,.jr-do:active,.jr-step:active,.jr-print:active{transform:none}
}