/* ═══════════════════════════════════════════════════════════
   ГОСТИ — картотека и формуляр
   ═══════════════════════════════════════════════════════════
   Календарь — прибор, журнал — книга смены, гости — картотека: ящик
   карточек и формуляр того, кого вытащили. Отсюда всё остальное:

   · Два места, а не два экрана. Слева ящик на утопленной бумаге, справа
     лист формуляра. Вопрос «этот у нас был?» почти всегда продолжается
     вопросом «а когда и на сколько», и уводить ответ в отдельное окно
     значит закрыть базу ради одной строки.

   · Выбранная карточка выдвигается из ящика: она белеет до цвета листа
     и перекрывает разделительную черту — рядом с формуляром видно, чей
     он. Наведение так не работает: подсветка уходит вместе с мышью.

   · Ушко с инициалами. В картотеке карточку находят по ушку, и здесь
     оно на том же месте — слева от имени. Знак человека тот же, что в
     карточке брони и в журнале: продукт узнаёт людей одинаково.

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

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

.guests{
  --gs-pad:22px; --gs-list:352px;
  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-guests .top,body.on-guests .cal{display:none}
body.on-guests .guests{display:flex}

/* ── шапка ── */
/* Порядок наложения задан явно — по той же причине, что у шапки
   календаря (см. styles/topbar.css). */
.gs-top{
  position:relative;z-index:25;
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  padding:16px var(--gs-pad) 15px;border-bottom:1px solid var(--rule);
}
.gs-title{display:flex;align-items:baseline;gap:10px}
.gs-title h2{font-size:22px;font-weight:600;letter-spacing:-.045em;line-height:1.15}
.gs-count{font-size:13px;color:var(--ink-2);white-space:nowrap}
/* Поиск стоит сразу за заголовком и растёт вместе с окном: базу гостей
   не листают, в ней ищут, и это главный инструмент страницы. Прижатый
   к правому краю между кнопками, он читался ещё одной кнопкой — а между
   ним и заголовком оставалось полтысячи пикселей пустоты.

   Поверхность та же, что у поиска в колонке: белая карточка на бумаге
   с волосяной рамкой. Отклик на фокус — тоже общий для полей продукта
   (`.inp`, поля правки брони): рамка чернеет, вокруг ложится ореол
   толщиной в три пикселя. */
.gs-find{
  display:flex;align-items:center;gap:8px;height:32px;padding:0 11px;
  /* Не уже, чем нужно подсказке: замер — 184 px на строку плюс значок,
     зазор и поля, итого 229. Обрезанное «код брон» читается поломкой.
     Не помещается и это — строка переносится, как и раньше. */
  flex:1 1 260px;min-width:230px;max-width:min(480px,38vw);
  margin:0 auto 0 8px;
  background:var(--card);
  border:1px solid var(--rule);border-radius:var(--r-sm);color:var(--ink-3);
  transition:border-color var(--t-tap) var(--ease),
    box-shadow var(--t-tap) var(--ease), color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .gs-find:hover{border-color:var(--ink-3);color:var(--ink-2)}
}
.gs-find:focus-within{
  border-color:var(--ink);color:var(--ink-2);box-shadow:0 0 0 3px var(--sunk);
}
.gs-find svg{width:13px;height:13px;flex-shrink:0}
.gs-find input{
  flex:1;width:100%;min-width:0;border:none;outline:none;background:none;
  font-size:13px;color:var(--ink);
}
.gs-find input::placeholder{color:var(--ink-3)}
.gs-find input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.gs-add{flex-shrink:0;height:32px}

/* ── ящик и лист ── */
.gs-body{flex:1;min-height:0;display:flex}
.gs-list{
  width:var(--gs-list);flex-shrink:0;overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper);border-right:1px solid var(--rule);padding:6px 0 24px;
}
.gs-sheet{flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain}

/* ── карточка в ящике ── */
.gs-row{
  position:relative;display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  column-gap:10px;row-gap:1px;align-items:center;
  width:100%;padding:9px 14px 10px 12px;text-align:left;
  border-bottom:1px solid var(--rule-2);
  transition:background-color var(--t-tap) var(--ease);
}
.gs-row:last-child{border-bottom:none}
@media (hover:hover) and (pointer:fine){
  .gs-row:hover{background:var(--sunk)}
}
/* Отклик на нажатии, а не на отпускании. */
.gs-row:active{background:var(--rule-2)}
/* Выдвинута из ящика: белеет до цвета листа и перекрывает черту. */
.gs-row.on{
  background:var(--card);
  margin-right:-1px;border-right:1px solid var(--card);
}
@media (hover:hover) and (pointer:fine){
  .gs-row.on:hover{
    background:var(--card);
    margin-right:-1px;border-right:1px solid var(--card);
  }
}
/* ── знак человека ──
   Аватарка, а не серый кружок: цвет выведен из ключа гостя и один и тот
   же на всех экранах (SPEC §8.5). В картотеке по нему находят карточку
   быстрее, чем читают фамилию. Не круг, а скруглённый квадрат: круг
   среди прямоугольных строк читался пузырём мессенджера. */
.av1{--av:var(--av-1)} .av2{--av:var(--av-2)} .av3{--av:var(--av-3)}
.av4{--av:var(--av-4)} .av5{--av:var(--av-5)} .av6{--av:var(--av-6)}

.gs-mark{
  grid-row:1 / span 2;width:30px;height:30px;display:flex;align-items:center;
  justify-content:center;border-radius:var(--r-mark);
  font-size:10.5px;font-style:normal;font-weight:600;
  letter-spacing:.03em;color:var(--av-ink);background:var(--av,var(--stop));
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .06);
  transition:transform .16s cubic-bezier(.2,0,0,1),
    box-shadow .16s var(--ease);
}
/* Знак бывает двух родов, и размер им задают по-разному: у эмодзи это
   символ, который рисует устройство, и его меряют кеглем; у почерков —
   наш SVG, и его меряют шириной с высотой (§8.5). Обе меры стоят
   рядом на каждом размере знака, поэтому правится он в одном месте.

   Шрифт эмодзи назван прямо: без этого браузер взял бы текстовый и
   нарисовал чёрно-белое вместо цветного. */
.face-glyph{display:block}
.face-char{
  line-height:1;font-weight:400;font-style:normal;letter-spacing:0;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
    "Twemoji Mozilla",sans-serif;
}
.gs-mark .face-glyph{width:17px;height:17px;stroke-width:1.9;font-size:16px}
/* Выдвинутая карточка приподнимает знак — тот же жест, что и с бумагой:
   её вынимают из ящика, а не подсвечивают. */
.gs-row.on .gs-mark{
  transform:scale(1.06);
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .1), 0 2px 5px rgb(25 24 21 / .18);
}
/* Имя не переносится: в узком ящике оно ломалось на две строки, и ровный
   ряд карточек рассыпался. Не поместилось — обрывается многоточием. */
.gs-name{
  grid-column:2;grid-row:1;display:flex;align-items:baseline;gap:7px;
  min-width:0;font-size:13px;letter-spacing:-.02em;color:var(--ink);
}
.gs-name b{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:550;
}
.gs-tel{
  grid-column:2;grid-row:2;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11.5px;letter-spacing:0;color:var(--ink-2);
}
/* Долг назван словом: голое число в этой колонке путали с выручкой.
   Стоит он под сроком, а не при телефоне: рядом с номером ему не хватало
   ширины, и «долг 14 400 ₽» обрывался на «долг 14». */
/* Долг — наклейка в том же ряду, что и метки: цвет у него наш (§8.3,
   «срыв»), а форма общая, потому что отвечает он на тот же вопрос —
   «что про этого человека надо помнить прямо сейчас». Слово «долг»
   убрано: красная наклейка с суммой в ряду других не спутается с
   выручкой, которая живёт на плите. */
.gs-owe{
  --tag-bg:var(--late-bg);--tag-ink:var(--late);
  font-variant-numeric:tabular-nums;flex-shrink:0;
}
.gs-when{
  grid-column:3;grid-row:1;justify-self:end;white-space:nowrap;
  font-size:11px;color:var(--ink-2);
}
/* Метка в ящике — в правом углу второй строки, на месте долга: свободного
   места здесь ровно одно, и занимает его то, что важнее (SPEC §8.5).
   Длинную метку обрезаем, а не переносим: перенос ломает ряд карточек,
   и полное название есть в подсказке. */
.gs-row-tags{
  grid-column:3;grid-row:2;justify-self:end;align-self:center;
  display:flex;align-items:center;gap:4px;min-width:0;
}
/* Долг и метка делят один угол, и обоим надо оставить телефон целым:
   он ключ гостя (§8.5), и «+7 953 610…» хуже, чем метка покороче. */
.gs-row-tags .gs-tag-sm{max-width:78px}
.gs-row-tags .gs-owe{max-width:none}
.gs-tag-sm{
  height:17px;padding:0 6px;max-width:96px;
  overflow:hidden;text-overflow:ellipsis;display:block;line-height:17px;
  font-size:10.5px;animation:none;
}
.gs-tag-more{
  font-style:normal;font-size:10.5px;
  font-variant-numeric:tabular-nums;color:var(--ink-2);
}

/* ── формуляр ── */
.gs-card{padding:0 0 40px}
/* ── плита карточки ──
   Карточка открывается тёмной приборной плитой: тем же приёмом, что
   корешок бланка новой брони и линейка шахматки. Она даёт формуляру верх
   и вес, а белая бумага под ней читается как сама карточка, вынутая из
   ящика. Приборная полоса остаётся приметой измерения (SPEC §8.3): здесь
   на ней стоят посчитанные числа, а не украшение. */
.gs-head{
  position:relative;isolation:isolate;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  padding:22px var(--gs-pad) 22px;background:var(--band);color:var(--band-ink);
  /* Свет по верхнему ребру: так лежит блик на любой лакированной
     поверхности, и плита перестаёт быть плоской заливкой. */
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .07);
  /* Свет поднимает фон под текстом, и общий `--band-ink-2` давал бы
     на светлом пятне 3.4:1 вместо 4.5. Здесь он светлее — ровно
     настолько, чтобы держать порог в самой яркой точке (§8.3). */
  --band-ink-2:var(--plate-ink-2);
}
/* Содержимое поверх света. Своей полосы `z-index` ему хватает: слой
   света лежит нулевым и в стопку не лезет. */
.gs-head > :not(.plate-lite){position:relative;z-index:1}

/* Тот же знак крупно. На тёмной плите он единственное цветное пятно
   слева, и по нему карточка узнаётся раньше, чем прочитана фамилия. */
.gs-tab{
  width:56px;height:56px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;gap:1px;border-radius:var(--r-mark);
  background:var(--av,var(--band-3));
  /* Тёмный тон на тёмной плите тонул. Светлый кант отделяет знак от
     фона, тень под ним кладёт его на плиту, а не в неё. */
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22),
    0 2px 8px rgb(0 0 0 / .3);
  font-size:18px;font-style:normal;
  font-weight:600;letter-spacing:.02em;color:var(--av-ink);
}
.gs-tab .face-glyph{width:30px;height:30px;stroke-width:1.75;font-size:29px}

/* Аватар — сама кнопка, а не картинка с мелкой кнопкой поверх.
   Поэтому в него можно попасть с клавиатуры и касанием. Карандаш —
   лишь тихая подсказка на том же пятне. */
.gs-face-open{
  position:relative;width:56px;height:56px;flex:0 0 56px;border-radius:var(--r-mark);
  display:block;transition:transform 140ms cubic-bezier(.2,.8,.3,1);
}
.gs-face-open:active:not(:disabled){transform:scale(.965)}
.gs-face-open:focus-visible{outline:2px solid var(--band-ink);outline-offset:4px}
.gs-face-open:disabled{cursor:default}
.gs-face-pen{
  position:absolute;right:-5px;bottom:-5px;width:22px;height:22px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);background:var(--card);
  box-shadow:0 3px 9px rgb(0 0 0 / .28),inset 0 0 0 1px rgb(25 24 21 / .1);
  opacity:0;transform:translate3d(2px,2px,0) scale(.72);
  transition:opacity 90ms linear,transform 90ms cubic-bezier(.2,.8,.3,1);
}
.gs-face-pen svg{width:11px;height:11px;stroke-width:2}
@media (hover:hover) and (pointer:fine){
  .gs-face-open:not(:disabled):hover .gs-face-pen,
  .gs-face-open:focus-visible .gs-face-pen{
    opacity:1;transform:translate3d(0,0,0) scale(1);
  }
}
@media (hover:none),(pointer:coarse){
  .gs-face-pen{opacity:.92;transform:none}
}
/* ── перекат знака ──
   Буква меняется как на табло: уходит вверх, следующая приходит снизу.
   Вторая буква трогается на 60 мс позже первой — одновременный переброс
   читается как подмена картинки, разнесённый — как механизм.
   Опускание — 260 мс: короче ленты (§8.4), потому что знак мелкий и
   путь у него в один рост буквы. */
.gs-flap{
  position:relative;display:block;width:1ch;height:1.15em;
  overflow:hidden;line-height:1.15em;
}
.gs-flap b{display:block;font-weight:500}
/* Анимация только у перекатывающегося знака: без этого буквы въезжали
   на каждой перерисовке карточки, и правка меток выглядела перезагрузкой. */
.gs-tab.roll .gs-flap .was{
  position:absolute;inset:0;animation:gsFlapOut .26s var(--ease) both;
}
.gs-tab.roll .gs-flap .now{animation:gsFlapIn .26s var(--ease) both}
.gs-tab.roll .gs-flap .was,.gs-tab.roll .gs-flap .now{
  animation-delay:calc(var(--i) * 60ms);
}
@keyframes gsFlapOut{to{transform:translateY(-105%);opacity:0}}
@keyframes gsFlapIn{from{transform:translateY(105%);opacity:0}}
.gs-who{margin-right:auto;min-width:0;flex:0 1 auto}
/* Крупное место одно: фамилия. Ступени — 38 · 18 · 15 · 13 · 11 · 9. */
.gs-who h3{
  font-size:38px;font-weight:600;letter-spacing:-.055em;line-height:1;
  color:var(--band-ink);
}
.gs-call{display:block;margin-top:6px;font-size:18px;color:var(--band-ink-2)}

/* ── метки гостя (SPEC §4.7) ──
   Язычок картотеки: цветная наклейка со словом внутри. Заливка светлая
   и на тёмной плите читается как наклейка на тёмной карточке — ровно
   то, чем метка и является. Тона идут из закрытого набора (§8.3). */
.gs-tags{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;
  gap:5px;margin-top:11px;
}
.gs-tag{
  display:inline-flex;align-items:center;height:21px;padding:0 8px;
  border-radius:var(--r-xs);white-space:nowrap;
  font-size:11.5px;font-weight:550;letter-spacing:-.01em;
  background:var(--tag-bg);color:var(--tag-ink);
  animation:gsTagIn .22s cubic-bezier(.2,0,0,1) both;
}
/* Наклейки въезжают по очереди, но вся очередь укладывается в 200 мс:
   длиннее — и карточка открывается заметно позже, чем нажали. */
.gs-tag:nth-child(2){animation-delay:40ms}
.gs-tag:nth-child(3){animation-delay:80ms}
.gs-tag:nth-child(4){animation-delay:120ms}
.gs-tag:nth-child(n+5){animation-delay:160ms}
@keyframes gsTagIn{from{opacity:0;transform:translateY(4px) scale(.96)}}

/* Ряд наклеек вне картотеки: поповер брони, карточка брони, журнал.
   Вид тот же, кегль мельче — места меньше, а знак человек уже выучил. */
.gtags{display:inline-flex;align-items:center;gap:4px;min-width:0;vertical-align:middle}
.gtags .gs-tag{
  height:18px;padding:0 7px;max-width:132px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;
  line-height:18px;font-size:11px;animation:none;
}

.t1{--tag-bg:var(--tag-1-bg);--tag-ink:var(--tag-1-ink)}
.t2{--tag-bg:var(--tag-2-bg);--tag-ink:var(--tag-2-ink)}
.t3{--tag-bg:var(--tag-3-bg);--tag-ink:var(--tag-3-ink)}
.t4{--tag-bg:var(--tag-4-bg);--tag-ink:var(--tag-4-ink)}
.t5{--tag-bg:var(--tag-5-bg);--tag-ink:var(--tag-5-ink)}
.t6{--tag-bg:var(--tag-6-bg);--tag-ink:var(--tag-6-ink)}

/* Кнопка «поставить метку» — пустой язычок: то же место, тот же рост. */
.gs-tag-add{
  display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 7px;
  border:1px dashed var(--band-3);border-radius:var(--r-xs);
  font-size:11.5px;color:var(--band-ink-2);
  transition:border-color var(--t-tap) var(--ease),
    color var(--t-tap) var(--ease);
}
.gs-tag-add svg{width:12px;height:12px}
.gs-tag-add.on{border-color:var(--band-ink-2);color:var(--band-ink)}
@media (hover:hover) and (pointer:fine){
  .gs-tag-add:hover{border-color:var(--band-ink-2);color:var(--band-ink)}
}
.gs-tag-add.on{border-style:solid}
/* Тот же плюсик на светлой поверхности — в шапке карточки брони. */
.gs-tag-add.light{border-color:var(--rule);color:var(--ink-2)}
.gs-tag-add.light.on{border-color:var(--ink-3);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .gs-tag-add.light:hover{border-color:var(--ink-3);color:var(--ink)}
}

/* ── окно выбора метки ──
   Раскрывается из-под кнопки, а не из центра экрана: список меток —
   продолжение той же строки, и уводить ради него фокус со всей карточки
   незачем (§8.2). Это бумага поверх плиты, поэтому светлая. */
.gs-picker{
  position:absolute;top:calc(100% + 7px);left:0;z-index:30;width:300px;
  padding:7px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--rule);box-shadow:var(--sh-modal);
  color:var(--ink);cursor:default;
  animation:gsPickIn .2s cubic-bezier(.2,0,0,1) both;
  transform-origin:top left;
}
@keyframes gsPickIn{from{opacity:0;transform:translateY(-5px) scale(.97)}}
/* Заголовок и подсказка — двумя строками, а не в одну: в 300 px они
   налезали друг на друга, и подсказка читалась обрывком заголовка. */
.gs-pick-head{padding:4px 6px 8px}
.gs-pick-head b{
  display:block;font-size:12.5px;font-weight:500;
  color:var(--ink-2);
}
.gs-pick-head span{
  display:block;margin-top:3px;font-size:11px;line-height:1.35;color:var(--ink-2);
}
.gs-pick-row{display:flex;align-items:center;gap:4px;border-radius:var(--r-sm)}
@media (hover:hover) and (pointer:fine){
  .gs-pick-row:hover{background:var(--paper)}
}
.gs-pick-take{
  flex:1;min-width:0;display:flex;align-items:center;gap:9px;
  padding:6px 4px 6px 6px;text-align:left;font-size:13px;color:var(--ink);
}
.gs-pick-take span{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gs-pick-take em{
  margin-left:auto;font-style:normal;font-size:10.5px;
  font-variant-numeric:tabular-nums;color:var(--ink-2);
}
/* Свой цвет метка держит и в списке: выбирают по цвету не меньше, чем
   по слову. Поставленная — с галкой внутри квадратика, а не рядом. */
/* Заливка тона на белой бумаге даёт 1.27:1 — как образец цвета она не
   работает. Контур чернилами того же тона поднимает квадратик до 5.6:1
   и заодно показывает обе половины пары, которой метка и является. */
.gs-swatch{
  width:19px;height:19px;flex-shrink:0;border-radius:var(--r-xs);
  display:flex;align-items:center;justify-content:center;
  background:var(--tag-bg);color:var(--tag-ink);
  border:1px solid var(--tag-ink);
}
.gs-swatch-tick{width:13px;height:13px;stroke-width:2.6;
  animation:gsTick .2s cubic-bezier(.2,0,0,1) both}
@keyframes gsTick{from{opacity:0;transform:scale(.5)}}
.gs-pick-row.on .gs-pick-take{font-weight:550}
.gs-pick-pen{
  flex-shrink:0;width:26px;height:26px;margin-right:3px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);opacity:0;
  transition:opacity var(--t-tap) var(--ease), color var(--t-tap) var(--ease);
}
.gs-pick-pen svg{width:14px;height:14px}
.gs-pick-row:hover .gs-pick-pen,.gs-pick-pen:focus-visible{opacity:1}
@media (hover:hover) and (pointer:fine){
  .gs-pick-pen:hover{color:var(--ink)}
}

.gs-pick-row.editing{
  flex-wrap:wrap;gap:7px;padding:8px 7px;margin:3px 0;
  background:var(--paper);border:1px solid var(--rule);
}
@media (hover:hover) and (pointer:fine){
  .gs-pick-row.editing:hover{background:var(--paper)}
}
.gs-pick-name{flex:1 1 100%;height:30px;padding:0 9px;font-size:13px}
.gs-tones{display:flex;gap:4px}
.gs-tone{
  width:21px;height:21px;border-radius:var(--r-xs);background:var(--tag-bg);
  border:1px solid var(--tag-ink);
  transition:transform .14s cubic-bezier(.2,0,0,1),
    box-shadow .14s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .gs-tone:hover{transform:scale(1.12)}
}
.gs-tone.on{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--ink)}
.gs-pick-drop{
  margin-left:auto;width:28px;height:28px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);
  transition:color var(--t-tap) var(--ease),
    background-color var(--t-tap) var(--ease);
}
.gs-pick-drop svg{width:15px;height:15px}
@media (hover:hover) and (pointer:fine){
  .gs-pick-drop:hover{background:var(--late-bg);color:var(--late)}
}
.gs-pick-ok{height:28px}
.gs-pick-new{
  display:flex;align-items:center;gap:7px;width:100%;padding:7px 6px;
  margin-top:3px;border-top:1px solid var(--rule-2);border-radius:0;
  font-size:12.5px;color:var(--ink-2);
  transition:color var(--t-tap) var(--ease);
}
.gs-pick-new svg{width:13px;height:13px}
@media (hover:hover) and (pointer:fine){
  .gs-pick-new:hover{color:var(--ink)}
}
.gs-pick-none{padding:6px;font-size:12px;line-height:1.45;color:var(--ink-2)}
/* Как гостя зовут между собой — под именем: в разговоре смена называет
   его так, а не по фамилии. */
.gs-alias{display:block;margin-top:5px;font-size:13px;color:var(--band-ink-2)}
/* Кнопка на плите: светлая рамка вместо белой заливки — заливка спорила
   бы с ушком, а действие здесь второстепенно. */
.gs-edit{
  flex-shrink:0;background:none;border:1px solid var(--band-3);
  color:var(--band-ink);box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  .gs-edit:hover{background:var(--band-2);border-color:var(--band-ink-3);color:var(--band-ink)}
}
.gs-edit svg{color:var(--band-ink-2)}

/* Приборная группа: число крупно, подпись тихо строчными. */
/* Показания на плите: числа крупно, подпись тихо строчными — тот же
   прибор, что линейка часов в шахматке. */
.gs-figures{
  margin-left:auto;display:flex;flex-wrap:wrap;gap:26px;
  padding-left:26px;border-left:1px solid var(--band-3);
}
.gs-metric b{
  display:block;font-size:18px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--band-ink);
}
.gs-metric span{
  display:block;margin-top:6px;font-size:11px;font-weight:500;
  color:var(--band-ink-2);white-space:nowrap;
}
/* Деньги названы тоном так же, как в журнале: пришли — зелёным, должен —
   красным. На тёмной плите берутся светлые концы тех же пар: тёмная
   зелень на угле не читается вовсе. */
/* Уровень — единственный показатель словом, а не числом: моноширинный
   набор для цифр здесь читался бы вывеской. */
.gs-rank b{font-family:inherit;font-size:17px;letter-spacing:-.03em}
/* Плита тёмная в обеих темах, поэтому и пигменты на ней постоянные:
   через --ok-line они следовали за темой и в тёмной уходили в уголь. */
.gs-head{--paid:color-mix(in srgb,var(--plate-ok) 60%,var(--plate-hi));--owed:color-mix(in srgb,var(--plate-late) 60%,var(--plate-hi))}
.gs-paid b{color:var(--paid)}
.gs-debt b{color:var(--owed)}

/* ── графы формуляра ──
   Архивная карточка: слева имя графы тихим тоном, справа значение, между
   строками волосяная черта. Прочерков нет — пустая графа не показывается
   (SPEC §4.3), а чего не хватает, сказано одной строкой под графами. */
/* Мера ограничена: линия графы длиной во весь лист выглядит недописанной,
   потому что чернил в ней на пятую часть. */
/* Формуляр дышит: между плитой и первой графой пауза, иначе бумага
   выглядит подсунутой под плиту вплотную. */
.gs-fields{padding:18px var(--gs-pad) 20px;max-width:660px}
.gs-field{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 14px;
  align-items:baseline;padding:9px 0 0;
}
.gs-field i,.gs-field span,.gs-field a{padding-bottom:9px}
.gs-field span,.gs-field a{border-bottom:1px solid var(--rule-2)}
.gs-field:last-of-type span,.gs-field:last-of-type a{border-bottom:none}
/* Комментарий стоит на своей бумаге — утопленной, а не цветной. Цвет
   в этом наборе отвечает на вопрос о деле (§8.3), а «это сказали о
   человеке словами» — не тот вопрос: янтарный читался бы как «ждёт
   оплату». Отличается комментарий материалом: лист чуть вдавлен, слева
   волосяной корешок — так в книге набирают выписку. */
.gs-field.note{margin-top:3px}
/* Черта сбоку, а не заливка: коробка на разлинованном листе — вторая
   форма поверх первой, и даже тихая заливка спорит с графами. Линия
   вдоль текста ничего не перекрывает и говорит то же самое. */
.gs-field.note span{
  border-bottom:none;padding-left:13px;line-height:1.55;
  box-shadow:inset 1px 0 0 var(--rule);
}
/* На правке бумага остаётся: графу узнают по ней, а не по тому, читают
   её или пишут. Поле садится на неё прозрачным. */
.gs-field.note .gs-write{padding-left:13px;box-shadow:inset 1px 0 0 var(--rule)}
.gs-field.note .gs-write:focus{box-shadow:inset 1px 0 0 var(--ink)}

/* ── правка на графах ──
   Поле садится ровно на место значения: тот же кегль, та же черта под
   ним. Оттого при переходе в правку ничего не прыгает — бумага просто
   становится писчей (SPEC §8.5). */
.gs-write{
  width:100%;min-width:0;padding:0 0 9px;margin:0;
  border:none;border-bottom:1px solid var(--rule);border-radius:0;
  background:none;font:inherit;font-size:14px;color:var(--ink);
  transition:border-color var(--t-tap) var(--ease),
    background-color var(--t-tap) var(--ease);
}
.gs-write::placeholder{color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){
  .gs-write:hover{border-bottom-color:var(--ink-3)}
}
.gs-write:focus{
  outline:none;border-bottom-color:var(--ink);
  /* Подсветка строки, а не рамка вокруг: пишут по строке, и обводить
     её коробкой значит нарисовать вторую вещь поверх первой. */
  background:linear-gradient(var(--sunk),var(--sunk));
  background-size:100% calc(100% - 1px);background-repeat:no-repeat;
}
.gs-write-area{resize:vertical;min-height:44px;line-height:1.45}
/* Телефон заперт: он ключ, по которому склеена вся история. */
/* Номер не переносится: он читается как одно число, а разорванный
   пополам перестаёт им быть. Пояснение уходит на свою строку, когда
   рядом места нет. */
.gs-locked{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;
  color:var(--ink-2);
}
.gs-locked em{
  font-style:normal;font-size:11px;color:var(--ink-2);white-space:nowrap;
}
.gs-fields.writing .gs-field:first-child .mono{white-space:nowrap}
/* На правке показаны все графы, включая пустые: новые строки приходят
   по очереди, чтобы формуляр не вырастал рывком. */
.gs-fields.writing .gs-field{animation:gsGrow .22s var(--ease) both}
.gs-fields.writing .gs-field:nth-child(n+4){animation-delay:30ms}
.gs-fields.writing .gs-field:nth-child(n+6){animation-delay:60ms}
@keyframes gsGrow{from{opacity:0;transform:translateY(-4px)}}

.gs-write-foot{
  display:flex;align-items:center;gap:8px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--rule-2);
}
.gs-write-hint{margin-left:auto;font-size:11px;color:var(--ink-2)}
.gs-fields.writing .gs-field:last-of-type span,
.gs-fields.writing .gs-field:last-of-type a{border-bottom:1px solid var(--rule)}

/* ── раздел, которого ещё нет ──
   Не серая фраза посреди пустоты, а состояние: знак, имя, одна строка
   о том, что здесь будет. Обещание, названное честно, дешевле пустой
   таблицы (§8.5). */
.gs-soon{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:44px 20px 48px;text-align:center;
}
.gs-soon-sign{width:26px;height:26px;color:var(--ink-3);stroke-width:1.4}
.gs-soon b{font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.gs-soon p{max-width:380px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}

.gs-field i{
  font-size:11px;font-style:normal;font-weight:500;
  color:var(--ink-2);
}
.gs-field span,.gs-field a{font-size:13px;line-height:1.45;color:var(--ink);text-decoration:none}
.gs-field .mono{font-family:var(--mono);font-size:13px;letter-spacing:-.02em}
@media (hover:hover) and (pointer:fine){
  .gs-field a:hover{border-bottom-color:var(--ink-2)}
}
.gs-field-note span{line-height:1.5}
/* Незаполненное зовёт дописать, а не притворяется содержимым. */
.gs-ask{
  margin-top:14px;font-size:11px;color:var(--ink-2);
  border-bottom:1px dashed var(--rule);
}
@media (hover:hover) and (pointer:fine){
  .gs-ask:hover{color:var(--ink);border-bottom-color:var(--ink-2)}
}

/* ── разделители картотеки ──
   Вкладки стоят на черте, как язычки разделителей в ящике: открытая
   соединена с листом, остальные лежат за ним. */
/* ── разделители картотеки ──
   Не строка слов, а ряд язычков: знак, имя и число. По знаку раздел
   узнают раньше, чем прочитают имя; число говорит, есть ли там что
   смотреть. Выбранный залит плитой — заливка и есть указатель, черта
   под ним была бы вторым указателем об одном и том же. */
.gs-tabs{
  position:relative;
  display:flex;gap:6px;padding:14px var(--gs-pad) 0;overflow-x:auto;
  border-bottom:1px solid var(--rule);scrollbar-width:none;
  /* Разделов больше, чем ширины, и выбранный доводится в поле зрения
     плавно: рывок ленты читался бы как перерисовка, а не как выбор. */
  scroll-behavior:smooth;
}
/* Плита не подменяется, а передаётся от язычка к язычку.
   Заливка выбранного — отдельный слой под содержимым, и растёт он не
   из середины, а с той стороны, откуда пришли: ушли вправо — плита
   уходит за правый край прежнего язычка и приходит из левого края
   нового. Так виден не только итог, но и направление (SPEC §8.5).

   Переезжает не одна плита поверх ряда, а две половины жеста на своих
   местах: одна плита проходила бы под чужими язычками, и их тёмные
   буквы на две-три десятых секунды становились бы нечитаемыми. */
.gs-sect{
  position:relative;isolation:isolate;
  flex-shrink:0;display:flex;align-items:center;gap:7px;
  height:38px;padding:0 12px;margin-bottom:-1px;
  border:1px solid var(--rule);border-bottom-color:transparent;
  border-radius:var(--r) var(--r) 0 0;background:var(--paper);
  color:var(--ink-2);white-space:nowrap;
  transition:background-color var(--t-tap) var(--ease),
    color var(--t-move) var(--ease), border-color var(--t-move) var(--ease);
}
.gs-sect::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:var(--r) var(--r) 0 0;background:var(--band);
  transform:scaleX(0);transform-origin:var(--gs-from,left) center;
  transition:transform var(--t-move) var(--ease);
}
.gs-sect.on::before{transform:scaleX(1)}
.gs-sect-sign{width:15px;height:15px;flex-shrink:0;opacity:.75;
  transition:opacity var(--t-move) var(--ease)}
.gs-sect b{font-size:12.5px;font-weight:550;letter-spacing:-.01em}
.gs-sect em{
  font-style:normal;font-size:11px;font-weight:500;
  font-variant-numeric:tabular-nums;
  padding:1px 5px;border-radius:var(--r-xs);background:var(--sunk);color:var(--ink-2);
  transition:background-color var(--t-move) var(--ease),
    color var(--t-move) var(--ease);
}
/* У раздела без содержимого вместо числа точка: «здесь пусто» надо
   сказать, но не числом — ноль читается как посчитанное. */
.gs-sect-none{
  width:4px;height:4px;border-radius:50%;background:var(--rule);flex-shrink:0;
}
@media (hover:hover) and (pointer:fine){
  .gs-sect:hover{background:var(--sunk);color:var(--ink)}
}
/* Заливку несёт слой под содержимым, самому язычку остаётся рамка:
   иначе плита появлялась бы разом, а рамка — переездом. */
.gs-sect.on{border-color:var(--band);color:var(--band-ink)}
/* Число стоит у правого края, куда плита доезжает последней. Плавный
   перецвет здесь не нужен и вреден: подложка и цифры проходят через
   середину одновременно, и на замере число проваливалось до 2.9:1.
   Оно просто переключается под уже накрывшей его плитой — переход
   не виден, а провала нет (замер: 5.8:1 до, 6.5:1 после). */
.gs-sect.on em{transition-duration:0s;transition-delay:var(--t-tap)}
.gs-sect.on .gs-sect-sign{opacity:1}
.gs-sect.on em{background:rgb(237 234 227 / .16);color:var(--band-ink)}
.gs-sect.on .gs-sect-none{background:var(--band-ink-3)}
/* Обещанный раздел тише названного: он не пуст по случайности, его
   просто ещё нет (§9). Тише — пунктиром рамки, а не бледностью букв:
   `--ink-3` давал на них 2.6:1, и раздел приходилось угадывать. */
.gs-sect.soon:not(.on){border-style:dashed}
.gs-sect.soon:not(.on) .gs-sect-sign{opacity:.5}
.gs-tabs::-webkit-scrollbar{display:none}
/* Тело приходит с той же стороны, что и плита: раздел был справа —
   бумага и приезжает справа. Ход короткий, 10 px, тот же, каким
   содержимое плиты выезжает из ящика: это довод на место, а не
   перелистывание. По вкладкам щёлкают подряд, и всё, что мигает на
   каждом щелчке, из подсказки превращается в помеху, — поэтому уезда
   у прежнего тела нет: приходит только новое, и приход обрывается
   следующим щелчком, а не встаёт в очередь.

   Ступени по 30 мс и не больше трёх: у разделов от одного до трёх
   верхних блоков, и очередь укладывается в 60 мс сверх прихода. */
.gs-tab-body{padding:16px var(--gs-pad) 40px}
@keyframes gsTabTurn{
  from{opacity:0;transform:translate3d(var(--gs-turn,10px),0,0)}
}
.gs-tab-body.turn > *{animation:gsTabTurn var(--t-move) var(--ease) both}
.gs-tab-body.turn > :nth-child(2){animation-delay:30ms}
.gs-tab-body.turn > :nth-child(n+3){animation-delay:60ms}

/* ── документы ──
   Три состояния и все три названы словом: скан хранится, скан стёрт по
   сроку, скан не сохраняли. Цветом такое не передать (SPEC §4.6). */
.gs-docs{display:flex;flex-direction:column;border-top:1px solid var(--rule-2)}
.gs-doc{
  display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;
  gap:2px 12px;align-items:baseline;padding:10px 0;
  border-bottom:1px solid var(--rule-2);
}
.gs-doc-kind{font-size:13px;font-weight:550;letter-spacing:-.02em}
.gs-doc-no{font-size:11.5px;color:var(--ink-2)}
.gs-doc-when{font-size:11px;color:var(--ink-2)}
.gs-doc-keep{justify-self:end;font-size:11px;color:var(--ink-2);white-space:nowrap}
.gs-doc-open{justify-self:end;grid-column:5;align-self:center}
.gs-doc-seen{justify-self:end;grid-column:5;font-size:11px;color:var(--ink-2)}
.gs-doc-why{grid-column:1 / -1;font-size:11px;color:var(--ink-2)}
.gs-doc.seen{background:var(--paper)}
.gs-warn{
  margin-top:14px;
  font-size:11px;line-height:1.5;color:var(--ink-2);max-width:520px;
}

/* ── накопительная программа ── */
.gs-eyebrow{
  display:block;margin-bottom:7px;font-size:11px;
  font-style:normal;font-weight:500;
  color:var(--ink-2);
}
/* Шапка накопления: число баллов крупно, ставка рядом словами. Раньше
   у блока не было раскладки вовсе — `b` и `span` стояли встык и читались
   как «2395 балловначисляем 8 %». Селектор `.gs-loyal` не совпадал ни с
   чем в разметке и правил пустоту. */
.gs-block-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gs-block-h b{
  font-size:17px;font-weight:600;letter-spacing:0;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.gs-points{font-size:12px;color:var(--ink-2)}
.gs-up{display:flex;align-items:center;gap:11px;font-size:11px;color:var(--ink-2)}
.gs-bar{
  width:168px;height:4px;flex-shrink:0;border-radius:var(--r-pill);background:var(--sunk);
  overflow:hidden;
}
.gs-bar i{display:block;height:100%;background:var(--accent)}
.gs-moves{margin-top:12px;border-top:1px solid var(--rule-2)}
.gs-move{
  display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:10px;
  align-items:baseline;padding:6px 0;border-bottom:1px solid var(--rule-2);
  font-size:11px;color:var(--ink-2);
}
.gs-move:last-child{border-bottom:none}
.gs-move b{
  font-size:13px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.gs-move b.out{color:var(--ink-2);font-weight:400}
.gs-move em{font-style:normal;font-size:11px;color:var(--ink-2);white-space:nowrap}

/* ── история визитов ──
   Разлинована тем же приёмом, что лента журнала: одна волосяная черта
   между строками, никаких карточек. */
.gs-visits-list{display:flex;flex-direction:column;margin:0 calc(var(--gs-pad) * -1)}
.guests .gs-visit{
  position:relative;display:grid;
  grid-template-columns:96px minmax(0,1fr) 108px;
  column-gap:14px;row-gap:2px;align-items:baseline;
  width:100%;margin:0;padding:9px var(--gs-pad) 10px;text-align:left;
  border-radius:0;border-top:1px solid var(--rule-2);
  transition:background-color var(--t-tap) var(--ease);
}
.guests .gs-visit::before{content:none}
.guests .gs-visit+.gs-visit{margin-top:0}
@media (hover:hover) and (pointer:fine){
  .guests .gs-visit:hover{background:var(--paper)}
}
.guests .gs-visit:active{background:var(--sunk)}
.gs-visit.shut{cursor:default}
@media (hover:hover) and (pointer:fine){.guests .gs-visit.shut:hover{background:none}}
.gs-date{
  grid-column:1;grid-row:1;font-size:13px;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink);
}
.gs-year{
  grid-column:1;grid-row:2;font-size:9.5px;
  letter-spacing:0;color:var(--ink-2);
}
.gs-place{
  grid-column:2;grid-row:1;font-size:13px;font-weight:550;letter-spacing:-.02em;
  color:var(--ink);
}
.gs-money{
  grid-column:3;grid-row:1;justify-self:end;font-size:13px;
  font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink);
}
.gs-about{
  grid-column:2 / -1;grid-row:2;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:0 14px;font-size:11px;color:var(--ink-2);
}
/* Сведения визита разделяет воздух, а не точки: у каждого своя форма —
   статус цветом, код моноширинным, — и третий знак между ними лишний. */
.gs-about code{font-family:var(--mono);font-size:9px;color:var(--ink-2)}
/* Статус — единственное, чему здесь отдан цвет (SPEC §8.3). */
.gs-visit.t-ok .gs-status{color:var(--ok)}
.gs-visit.t-wait .gs-status{color:var(--wait)}
.gs-visit.t-late .gs-status{color:var(--late)}
.gs-visit.t-stop .gs-status{color:var(--stop)}
.gs-none{font-size:13px;line-height:1.5;color:var(--ink-2);max-width:520px}

/* ── пусто ── */
.gs-empty{padding:56px 24px;max-width:340px}
.gs-empty b{display:block;font-size:15px;font-weight:600;letter-spacing:-.03em}
.gs-empty p{margin:6px 0 16px;font-size:13px;line-height:1.5;color:var(--ink-2)}

/* ── окно правки ──
   Своей вёрстки у него нет: это то же окно, что приём денег и отмена. */
.gs-form{width:432px;z-index:60}

/* ── перенос картотеки (SPEC §8.5) ──
   Окно шире правки: в нём таблица сверки, где рядом стоят чужой столбец
   и наша графа, — в 432px они лезли бы друг на друга. */
/* Высота ограничена, а прокручивается только тело: в сверке девять граф,
   и на экране ноутбука окно иначе уезжает за край вместе с кнопкой. */
.gs-carry{width:588px;z-index:60;max-height:calc(100dvh - 48px)}
.gs-carry .dlg-body{overflow-y:auto;overscroll-behavior:contain}
.gs-carry-b{flex-shrink:0;height:32px;gap:6px}
.gs-empty-do{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.gs-carry-b svg{width:15px;height:15px}
/* Отметка о снятой копии живёт две секунды: подтверждение, а не статус. */
.gs-carry-b.done{border-color:var(--ok-line);color:var(--ok)}
.gs-carry-b.done span::after{content:' — записано в журнал'}

/* Стол, на который кладут пачку. Пунктир — единственный в наборе, и он
   здесь по делу: так рисуют место, куда что-то кладут. */
.gs-drop{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:26px 20px;text-align:center;cursor:pointer;
  border:1px dashed var(--rule);border-radius:var(--r-sm);background:var(--paper);
  transition:border-color var(--t-tap) var(--ease),
    background-color var(--t-tap) var(--ease);
}
.gs-drop.over{border-color:var(--ink-3);background:var(--sunk)}
@media (hover:hover) and (pointer:fine){
  .gs-drop:hover{border-color:var(--ink-3);background:var(--sunk)}
}
.gs-drop input{display:none}
.gs-drop-sign{width:26px;height:26px;color:var(--ink-3)}
.gs-drop b{font-size:14px;font-weight:600}
.gs-drop span{max-width:340px;font-size:11.5px;line-height:1.45;color:var(--ink-2)}
.gs-paste-field{margin:14px 0 0}

/* ── сверка граф ──
   Слева наша графа, справа чужой столбец и его первое значение: без
   примера выбор делается вслепую — заголовки у всех разные. */
.gs-graphs{
  display:grid;gap:1px;margin-bottom:16px;
  border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--rule-2);overflow:hidden;
}
.gs-graph{
  display:grid;grid-template-columns:150px 190px minmax(0,1fr);
  gap:12px;align-items:center;padding:7px 12px;background:var(--card);
}
.gs-graph i{font-style:normal;font-size:12px;font-weight:550;color:var(--ink)}
.gs-graph select{
  height:28px;padding:0 6px;min-width:0;
  border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--card);font-size:12px;color:var(--ink);
}
.gs-graph select:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.gs-graph-eg{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11.5px;color:var(--ink-2);
}

/* ── три стопки ──
   Числа названы до кнопки: разбор пачки — это её деление на стопки,
   и каждая подписана тем, что с ней будет. */
.gs-piles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gs-pile{
  padding:11px 13px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--paper);
}
.gs-pile b{
  display:block;font-size:23px;font-weight:600;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1;
  color:var(--ink);
}
.gs-pile i{display:block;margin-top:2px;font-style:normal;font-size:12px;
  font-weight:550;color:var(--ink)}
.gs-pile span{display:block;margin-top:3px;font-size:11px;line-height:1.35;
  color:var(--ink-2)}
/* Число стопки — тёмным зелёным, а не линейным: на бумаге `--ok-line`
   давал 1.3:1, и главное число окна приходилось угадывать. Светлый
   вариант работает только на тёмной плите формуляра. */
.gs-pile.ok b{color:var(--ok)}
.gs-pile.off b{color:var(--ink-2)}

.gs-why{margin-top:12px;font-size:12px}
.gs-why summary{cursor:pointer;color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){
  .gs-why summary:hover{color:var(--ink)}
}
.gs-why ul{margin:8px 0 0;padding:0;list-style:none}
.gs-why li{
  display:flex;align-items:baseline;gap:8px;padding:5px 0;
  border-bottom:1px solid var(--rule-2);font-size:11.5px;color:var(--ink-2);
}
.gs-why li b{font-weight:500;color:var(--ink-2)}
.gs-why li i{margin-left:auto;font-style:normal;color:var(--late)}
.gs-why-more{justify-content:center;color:var(--ink-2)}

/* Предупреждение стоит последним и до кнопки: у переноса нет отмены. */
.gs-warn{
  margin-top:14px;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--wait-bg);border:1px solid var(--wait-line);
  font-size:11.5px;line-height:1.45;color:var(--wait);
}

/* Имя и отчество произносят вместе — и в форме они стоят на одной строке.
   Отчество уже: «Сергеевич» короче любого имени с запасом. */
.gs-fio{display:grid;grid-template-columns:1fr .82fr;gap:0 14px}

/* Подзаголовок окна — не декорация: он объясняет, почему телефон не меняют.
   Общий `.dlg-head p` даёт 3.13:1 при 12.5px — ниже 4.5:1, и строку
   приходится угадывать. Тот же дефект остался в карточке ресурса
   (resource-info.mjs) — он в чужом файле и вынесен в отчёт. */
.dlg-head .gs-sub{color:var(--ink-2)}
.gs-scrim{z-index:59}
.gs-area{resize:vertical;min-height:64px;font-family:var(--font);line-height:1.45}
.gs-hint{display:block;margin-top:5px;font-size:11px;color:var(--ink-2)}
.gs-error{
  margin-top:2px;padding:8px 11px;border-radius:var(--r-sm);
  background:var(--late-bg);border:1px solid var(--late-line);
  font-size:13px;color:var(--late);
}

/* ── редактор знака ──
   Окно — наборная касса: слева готовый оттиск, справа лоток с ячейками.
   У правой половины один вертикальный шов: подписи цвета и почерка и
   подписи разделов стоят в общем левом отступе, и весь выбор читается
   сверху вниз одной колонкой.

   У эмодзи разделов шестнадцать, и лоток прокручивается — но листают
   его по подписям, а не строкой поиска: раздел назван поводом, по
   которому гостя запоминают (SPEC §8.5). */
.face-editor{
  --face-gut:66px;
  z-index:70;width:940px;height:min(784px,calc(100dvh - 28px));
  max-width:calc(100vw - 40px);max-height:calc(100dvh - 28px);
  /* Окно вырастает из того знака, который правят: карандаш стоит на
     аватарке, и она же остаётся точкой опоры. Координаты ставит
     guests.mjs — до открытия неизвестно, где именно карточка. */
  transform-origin:var(--from-x,22%) var(--from-y,46%);
  transform:translate(-50%,-50%);
  transition:transform .18s var(--ease),opacity .18s linear;
  box-shadow:0 32px 90px rgb(24 22 18 / .28),0 8px 24px rgb(24 22 18 / .14);
}
/* Приход — движением, а не переходом: окно приходит в разметке уже
   открытым, и переходить ему не от чего. */
.face-editor.open{animation:faceIn .28s var(--ease) both}
@keyframes faceIn{
  from{opacity:0;transform:translate(-50%,calc(-50% + 10px)) scale(.972)}
}
/* Уходит тем же путём, каким пришла: обратная дорога — та же дорога. */
.face-editor.closing{
  animation:none;
  transform:translate(-50%,calc(-50% + 8px)) scale(.976);opacity:0;
}
.gs-scrim{transition:opacity .18s linear}
.gs-scrim.closing{opacity:0;pointer-events:none}
.face-editor-head{
  min-height:82px;padding:17px 20px 16px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;border-bottom:1px solid var(--rule);
  background:var(--card);flex-shrink:0;
}
.face-title{min-width:0}
.face-kicker{
  display:block;margin-bottom:3px;font-size:11px;
  font-weight:500;color:var(--ink-3);
}
.face-editor-head h2{font-size:21px;font-weight:620;letter-spacing:-.045em}
.face-title p{margin-top:4px;font-size:11.5px;line-height:1.35;color:var(--ink-2)}
.face-close{
  width:34px;height:34px;border-radius:var(--r-lg);display:flex;align-items:center;
  justify-content:center;color:var(--ink-2);
  transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease),
    transform var(--t-tap) var(--ease);
}
.face-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.face-close:active{transform:scale(.94)}
.face-close:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .face-close:hover{background:var(--sunk);color:var(--ink)}
}
.face-editor-body{
  display:grid;grid-template-columns:268px minmax(0,1fr);flex:1;min-height:0;
}

/* ── левая половина: оттиск ── */
.face-preview{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  align-items:center;padding:32px 22px 22px;overflow:hidden;
  color:var(--band-ink);background:var(--band);
  box-shadow:inset -1px 0 rgb(255 255 255 / .06),inset 0 1px rgb(255 255 255 / .05);
}
/* Тихий свет повторяет плиту карточки, но не копирует её движущиеся
   пигменты: редактор должен быть спокойнее самой карточки. Дальнее
   пятно берёт выбранный тон — смена цвета переливает и подложку. */
.face-preview::before{
  content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 48% 24%,rgb(255 255 255 / .11),transparent 34%),
    radial-gradient(circle at 92% 84%,var(--av,rgb(255 255 255 / .08)),transparent 38%),
    radial-gradient(circle at -10% 112%,rgb(255 255 255 / .045),transparent 34%);
  opacity:.78;
}
.face-preview-label{
  align-self:flex-start;margin-bottom:auto;padding-bottom:24px;font-size:11px;
  font-weight:500;color:var(--band-ink-2);
}
.face-preview-stage{
  position:relative;width:146px;height:146px;display:flex;align-items:center;
  justify-content:center;margin-bottom:20px;
}
.face-preview-stage::before{
  content:"";position:absolute;inset:2px;border:1px solid rgb(255 255 255 / .08);
  border-radius:var(--r-mark);transform:rotate(8deg);pointer-events:none;
}
.face-preview-avatar{
  width:118px;height:118px;border-radius:var(--r-mark);display:flex;align-items:center;
  justify-content:center;background:var(--av);color:var(--av-ink);
  font-size:34px;font-style:normal;font-weight:600;
  letter-spacing:.02em;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .26),
    0 22px 42px rgb(0 0 0 / .34),0 4px 11px rgb(0 0 0 / .22);
  transition:background-color var(--t-move) var(--ease);
  animation:facePreviewSettle .16s var(--ease) both;
}
.face-preview-avatar .face-glyph{width:61px;height:61px;font-size:62px}
@keyframes facePreviewSettle{
  from{opacity:.55;transform:scale(.93)}
}
.face-preview-person{max-width:100%;text-align:center}
.face-preview-person strong{
  display:block;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:19px;font-weight:620;letter-spacing:-.04em;
}
.face-preview-person span{
  display:block;
  max-width:100%;margin-top:5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:11px;color:var(--band-ink-2);
}

/* ── соседи по ящику ──
   Знак проверяется не крупным планом: важно, отличим ли он в строке
   рядом с чужими. Строки набраны как в списке слева — тот же размер
   знака, тот же кегль имени, — иначе проверка ничего не доказывает. */
.face-drawer{
  width:100%;margin-top:auto;padding-top:24px;
  display:flex;flex-direction:column;gap:8px;
}
.face-drawer-cap{
  font-size:11px;font-weight:500;
  color:var(--band-ink-3);
}
.face-drawer-rows{
  border-radius:var(--r);overflow:hidden;background:rgb(255 255 255 / .04);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .06);
}
.face-drawer-row{
  height:38px;padding:0 10px;display:flex;align-items:center;gap:9px;
  color:var(--band-ink-3);
}
.face-drawer-row+.face-drawer-row{box-shadow:inset 0 1px rgb(255 255 255 / .06)}
.face-drawer-row b{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11.5px;font-weight:500;
}
/* Строка правимого гостя — вынутая карточка: светлее соседних. */
.face-drawer-row.now{
  background:rgb(255 255 255 / .07);color:var(--band-ink);
  box-shadow:inset 0 1px rgb(255 255 255 / .06);
}
.face-drawer-row.now b{font-weight:620}
.face-drawer-mark{
  flex:none;width:26px;height:26px;border-radius:var(--r-mark);display:flex;
  align-items:center;justify-content:center;background:var(--av);
  color:var(--av-ink);font-size:9.5px;font-style:normal;
  font-weight:600;letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .14);
  transition:background-color var(--t-move) var(--ease);
}
.face-drawer-mark .face-glyph{width:15px;height:15px;stroke-width:1.9;font-size:14px}
.face-drawer-row:not(.now) .face-drawer-mark{opacity:.62}

/* ── правая половина: лоток ──
   Шов проходит по всей высоте: он держит подписи рычагов и подписи
   разделов в одной колонке и превращает восемь разных строк в один
   предмет. Рисуется на самой половине, а не на каждой строке, —
   иначе он рвался бы на просветах между рядами. */
.face-pick{
  position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;
  background:var(--card);
}
.face-pick::before{
  content:"";position:absolute;top:14px;bottom:20px;
  left:calc(22px + var(--face-gut) - 7px);width:1px;
  background:rgb(25 24 21 / .09);pointer-events:none;
}
.face-line,.face-group{
  display:grid;grid-template-columns:var(--face-gut) minmax(0,1fr);
  align-items:center;gap:0 12px;
}
/* Ряд выбора и подпись выбранного: шесть кнопок и одно слово о том, что
   выбрано. Одна подпись, а не шесть в ряд, — шесть не помещались и
   обрезались многоточием, а обрезанное слово не выбирают. */
.face-row{display:flex;align-items:center;gap:0 16px;min-width:0}
/* Многоточие ставится на самой длинной части, а не на обёртке: на
   flex-контейнере оно не срабатывает, и описание обрезалось по живому.
   Название набора не жмётся — оно и есть ответ, описание при нём. */
.face-now{min-width:0;display:flex;align-items:baseline;gap:6px}
.face-now b{
  flex:none;font-size:12px;font-weight:620;letter-spacing:-.015em;color:var(--ink);
}
.face-now small{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:10.5px;color:var(--ink-3);
}
.face-cap,.face-group h3{
  margin:0;font-size:11px;font-weight:650;
  line-height:1.45;color:var(--ink-3);
}
.face-deck{
  padding:13px 22px 14px;border-bottom:1px solid var(--rule-2);flex-shrink:0;
  display:flex;flex-direction:column;gap:11px;background:var(--card);
}

/* цвет */
.face-tones{display:flex;gap:8px}
.face-tone{
  position:relative;width:34px;height:34px;border-radius:var(--r-mark);background:var(--av);
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .1);
  transition:transform var(--t-tap) var(--ease),box-shadow var(--t-move) var(--ease);
}
.face-tone.on{box-shadow:inset 0 0 0 1px rgb(0 0 0 / .1),
  0 0 0 2px var(--card),0 0 0 3px var(--ink)}
.face-tone:active{transform:scale(.9)}
.face-tone:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.face-tone .face-choice-tick{
  position:absolute;left:9px;top:9px;right:auto;bottom:auto;
  width:16px;height:16px;padding:0;border-radius:0;background:none;box-shadow:none;
  color:var(--av-ink);stroke-width:2.4;
}
@media (hover:hover) and (pointer:fine){
  .face-tone:not(.on):hover{box-shadow:inset 0 0 0 1px rgb(0 0 0 / .1),
    0 0 0 2px var(--card),0 0 0 3px var(--rule)}
}

/* почерк: семь наборов, и все показывают один сюжет */
.face-sets{display:flex;gap:8px}
.face-set{
  position:relative;width:38px;height:38px;border-radius:var(--r-mark);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);background:color-mix(in srgb,var(--card) 90%,var(--paper));
  box-shadow:inset 0 0 0 1px var(--rule-2);
  transition:background-color var(--t-move) var(--ease),color var(--t-move) var(--ease),
    box-shadow var(--t-move) var(--ease),transform var(--t-tap) var(--ease);
}
.face-set-swatch{display:flex;align-items:center;justify-content:center}
.face-set-swatch .face-glyph{width:21px;height:21px;font-size:20px}
.face-set.on{
  color:var(--accent-ink);background:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink),0 3px 8px rgb(25 24 21 / .16);
}
/* Эмодзи цветные сами по себе: на чернильной плашке они темнеют, и
   выбранному набору тут нужен светлый ободок, а не заливка. */
.face-set.on .face-char{filter:none}
.face-set:active{transform:scale(.93)}
.face-set:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .face-set:not(.on):hover{color:var(--ink);background:var(--paper);
    box-shadow:inset 0 0 0 1px var(--rule)}
}

/* ── ячейки ── */
.face-library{
  flex:1;min-height:0;padding:14px 22px 20px;overflow-y:auto;
  overscroll-behavior:contain;display:flex;flex-direction:column;gap:11px;
  scrollbar-gutter:stable;
  /* Край прокрутки, а не черта: содержимое растворяется у деки и у
     подвала, и видно, что там есть ещё, — вместо линии, которая
     только делит (Apple HIG). */
  mask-image:linear-gradient(180deg,transparent 0,#000 14px,
    #000 calc(100% - 18px),transparent 100%);
}
/* Раздел — две строки по восемь: шестнадцать сюжетов на повод. Подпись
   стоит в отступе по центру обеих строк, поэтому раздел читается одним
   куском, а не заголовком и сеткой порознь. */
.face-group{flex:none}
.face-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}
.face-group:not(.face-group-first) .face-grid{grid-auto-rows:56px}
.face-choice{
  position:relative;border-radius:var(--r-lg);display:flex;align-items:center;
  justify-content:center;color:var(--ink-2);
  background:color-mix(in srgb,var(--card) 90%,var(--paper));
  transition:transform var(--t-tap) var(--ease),background-color var(--t-move) var(--ease),
    color var(--t-move) var(--ease),box-shadow var(--t-move) var(--ease);
}
.face-choice > .face-glyph{width:28px;height:28px;font-size:28px}
/* Выбранный знак берёт тон гостя: ячейка становится тем самым оттиском,
   который стоит слева, и второй рычаг виден из первого. */
.face-choice.on{
  color:var(--av-ink);background:var(--av);
  box-shadow:0 3px 9px rgb(25 24 21 / .18),inset 0 0 0 1px rgb(255 255 255 / .16);
}
.face-choice:active{transform:scale(.93)}
.face-choice:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .face-choice:not(.on):hover{
    color:var(--ink);background:var(--paper);
    transform:translate3d(0,-1px,0);box-shadow:0 3px 7px rgb(25 24 21 / .1);
  }
}
.face-choice-tick{
  position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;padding:3px;
  border-radius:var(--r-pill);color:var(--accent-ink);background:var(--accent);
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;
  box-shadow:0 0 0 2px var(--card);
}
.face-initials{
  grid-column:span 2;min-height:44px;padding:0 13px;gap:10px;
  justify-content:flex-start;
}
.face-initials b{
  font-size:13px;font-weight:600;letter-spacing:.04em;
}
.face-initials span{font-size:11.5px;font-weight:550}
/* Правило продукта сказано там, где оно и живёт: у самих букв (§8.5). */
.face-note{
  grid-column:3 / -1;align-self:center;margin:0 0 0 4px;
  font-size:10.5px;line-height:1.35;color:var(--ink-3);
}
.face-credit{
  margin:0;padding-top:13px;
  font-size:9.5px;line-height:1.4;color:var(--ink-3);
}
.face-credit b{font-weight:600;color:var(--ink-2)}

.face-editor-foot{
  min-height:62px;padding:13px 19px;display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:8px;border-top:1px solid var(--rule);background:var(--paper);
  flex-shrink:0;
}
.face-editor-foot .btn{height:34px}
.face-reset{color:var(--ink-2)}
.face-reset:disabled{opacity:.42}

/* Смена почерка: те же сюжеты, но другой рукой. Ячейки проявляются
   волной слева направо — видно, что лоток перерисован, а не заменён
   другим. Отскока нет, только проявление (tokens.css). */
@keyframes faceHand{from{opacity:0;transform:translate3d(0,3px,0)}}
.face-library.hand .face-choice{
  animation:faceHand .18s var(--ease) both;
  animation-delay:calc(var(--at,0) * 14ms);
}

/* Тише — не значит без обратной связи: движение снимается, состояния
   остаются (Apple HIG). */
@media (prefers-reduced-motion:reduce){
  .face-editor.open,.face-preview-avatar,.face-library.hand .face-choice{animation:none}
  .face-editor.closing{transform:translate(-50%,-50%)}
}

@media (max-width:980px){
  .face-editor{--face-gut:0px;width:calc(100vw - 24px);height:calc(100dvh - 24px)}
  .face-editor-head{min-height:76px;padding:14px 16px 13px 18px}
  .face-title p{display:none}
  .face-editor-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .face-pick::before{display:none}
  .face-preview{
    display:grid;grid-template-columns:90px minmax(0,1fr);
    column-gap:16px;align-content:center;align-items:center;padding:16px 20px;
    text-align:left;
  }
  .face-preview-label,.face-drawer{display:none}
  .face-preview-stage{width:86px;height:86px;margin:0}
  .face-preview-stage::before{display:none}
  .face-preview-avatar{width:78px;height:78px;border-radius:var(--r-mark);font-size:24px}
  .face-preview-avatar .face-glyph{width:42px;height:42px;font-size:42px}
  .face-preview-person{text-align:left}
  /* Подписи встают над рядами: в узком окне отступ слева съел бы
     колонку знаков, а их и так восемь. */
  .face-line,.face-group{grid-template-columns:minmax(0,1fr);gap:6px}
  .face-group:not(.face-group-first) .face-grid{grid-auto-rows:52px}
  .face-library{gap:14px}
  .face-deck{padding-inline:16px}
  .face-library{padding-inline:16px}
}
@media (max-width:640px){
  .face-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .face-initials{grid-column:span 3}
  .face-note{grid-column:4 / -1}
}

@media (prefers-contrast:more){
  .face-choice,.face-set{box-shadow:inset 0 0 0 1px var(--rule)}
  .face-choice.on,.face-set.on{outline:2px solid currentColor;outline-offset:-3px}
}
@media (prefers-reduced-transparency:reduce){
  .gs-scrim{background:rgb(25 24 21 / .66)}
  .face-preview::before{display:none}
}

/* ── движение ──
   Формуляр меняется в том же гнезде, поэтому он проявляется на месте, а
   не въезжает сбоку: карточку в картотеке не двигают, её заменяют. */
/* ── выдвижение карточки ──
   Карточку вынули из ящика, который слева, — и содержимое приходит
   оттуда же (Apple HIG: вещь появляется там, откуда её взяли). Сдвиг
   маленький, 10 px: это не въезд панели, а довод предмета на место.

   Ступени по 45 мс: знак, имя, обращение, метки, показатели. Вся
   очередь укладывается в 380 мс — щёлкать по списку это не мешает,
   а прочитывается как один жест, а не пять отдельных. */
.gs-head.fresh .gs-tab,
.gs-head.fresh .gs-who > *,
.gs-head.fresh .gs-metric,
.gs-head.fresh .gs-edit{animation:gsRise .34s cubic-bezier(.2,.7,.2,1) both}
.gs-head.fresh .gs-who h3{animation-delay:45ms}
.gs-head.fresh .gs-call{animation-delay:80ms}
.gs-head.fresh .gs-alias{animation-delay:105ms}
.gs-head.fresh .gs-tags{animation-delay:130ms}
.gs-head.fresh .gs-metric:nth-of-type(1){animation-delay:120ms}
.gs-head.fresh .gs-metric:nth-of-type(2){animation-delay:150ms}
.gs-head.fresh .gs-metric:nth-of-type(3){animation-delay:180ms}
.gs-head.fresh .gs-metric:nth-of-type(n+4){animation-delay:205ms}
.gs-head.fresh .gs-edit{animation-delay:230ms}
@keyframes gsRise{from{opacity:0;transform:translate3d(-10px,0,0)}}

/* Бумага под плитой приходит следом и без сдвига: она не выезжает,
   а проявляется на месте — карточку в картотеке не двигают, её
   заменяют. */
.gs-card.fresh .gs-fields,
.gs-card.fresh .gs-tabs,
.gs-card.fresh .gs-tab-body{animation:gsSurface .3s var(--ease) both}
.gs-card.fresh .gs-tabs{animation-delay:60ms}
.gs-card.fresh .gs-tab-body{animation-delay:90ms}
@keyframes gsSurface{from{opacity:0}}

@keyframes gsIn{from{opacity:0;transform:translateY(3px)}}
/* Карточка не гаснет при смене гостя: что она сменилась, говорит
   перекат знака — этого достаточно, а погасшая и зажёгшаяся карточка
   при быстром переборе списка читается как мигание. Пустое состояние
   въезжает: его видят один раз. */
.gs-empty{animation:gsIn .16s var(--ease) both}

@media (max-width:1240px){
  /* 268px не хватало: телефон в карточке ящика обрывался на «447-63…»,
     а по нему гость и опознаётся (SPEC §8.5). Ширина отсчитана от самой
     длинной строки — «приедет 9 сентября» рядом с полным номером. */
  .guests{--gs-pad:16px; --gs-list:320px}
  /* Перенос: черта перед показателями висела бы в начале строки, а не
     разделяла, и «Правка» занимала бы отдельный ряд ради одной кнопки. */
  .gs-head{gap:14px}
  .gs-who{flex:1 1 auto}
  .gs-figures{
    margin-left:0;padding-left:0;border-left:none;
    flex:1 1 100%;gap:20px;
  }
  .gs-edit{margin-left:auto}
  .gs-find input{width:150px}
  .gs-figures{gap:18px}
  .gs-line i{width:96px}
  .guests .gs-visit{grid-template-columns:84px minmax(0,1fr) 92px;column-gap:11px}
}
@media (max-width:1010px){
  .gs-top{flex-wrap:wrap}
  .gs-title{width:100%;margin-right:0}
  .gs-find{margin-left:auto}
  .gs-bar{width:120px}
}

/* Кому движение мешает — тому его нет. Перекат знака, въезд наклеек и
   раскрытие окна меток заменяются мгновенной сменой: смысл они несут
   один и тот же, а вестибулярную нагрузку — разную. Переезд черты под
   вкладками тоже: она просто оказывается на месте. */
@media (prefers-reduced-motion:reduce){
  /* Пигменты замирают: дрейф и отклик на указатель — это движение,
     а плита без них остаётся цветной, но неподвижной. */
  .plate-lite .orb{animation:none;translate:none}
  .gs-card,.gs-empty,.gs-tag,.gs-picker,.gs-swatch-tick,
  .gs-tab.roll .gs-flap .was,.gs-tab.roll .gs-flap .now,
  .gs-head.fresh .gs-tab,.gs-head.fresh .gs-who > *,
  .gs-head.fresh .gs-metric,.gs-head.fresh .gs-edit,
  .gs-head.fresh .sheen,
  .gs-card.fresh .gs-fields,.gs-card.fresh .gs-tabs,
  .gs-card.fresh .gs-tab-body{animation:none}
  /* Тише — не значит без указателя: плита встаёт сразу, раздел просто
     не едет. Что выбрано, видно по заливке, а не по движению. */
  .gs-tab-body.turn > *{animation:none}
  .gs-tabs{scroll-behavior:auto}
  /* Свет остаётся: он не движение, а поверхность. Ходить за
     указателем он при этом перестаёт — это уже движение. */
  .plate-lite b{transition:none}
  .gs-flap .was{display:none}
  .gs-tab-ink{transition:opacity .12s var(--ease)}
  @media (hover:hover) and (pointer:fine){
    .gs-tone:hover{transform:none}
  }
  .gs-row:active,.guests .gs-visit:active{transform:none}
}