/* ── шкалы окна заселения ──
   Кеглей было четырнадцать (8.5 · 9 · 10.5 · 11 · 11.5 · 12 · 12.5 · 13 ·
   14 · 15 · 16 · 17 · 19 · 26), отступов — восемнадцать, все целые от 2
   до 13. Разницу в полпикселя защитить нельзя, а следующий правящий
   выберет пятнадцатый кегль. Поэтому шкала: семь ступеней текста с
   шагом около 1.2 и сетка отступов по 4 px.

   Трекинг привязан к кеглю, а не задан один на всё (Apple HIG,
   типографика): мелкому нужен положительный, крупному отрицательный —
   растущие буквы читаются слишком раздельно. Числа табличные, тем же
   шрифтом, что текст (§8.3). */
:root{
  --ci-cap:11px;     /* подписи разделов: строчными, тихим тоном */
  --ci-xs:10.5px;    /* мелкая справка и числа при ней */
  --ci-sm:11.5px;    /* второстепенный текст */
  --ci-md:12.5px;    /* основной текст и подписи полей */
  --ci-lg:15px;      /* заголовок окна и шага */
  --ci-xl:17px;      /* имя момента */
  --ci-clock:26px;   /* час заезда — самое крупное */

  /* Мелкий кегль идёт в ноль, крупный — в минус: растущие буквы
     читаются слишком раздельно. Цифрам Golos хватает лёгкого минуса. */
  --ci-tr-num:-.01em;    /* цифры */
  --ci-tr-text:0;        /* пропорциональный до 12.5 px */
  --ci-tr-lg:-.02em;     /* 15 px */
  --ci-tr-xl:-.03em;     /* 17 px */
  --ci-tr-clock:-.05em;  /* 26 px */
}

/* ── заселение и выселение ──
   Одно окно на два момента: и там, и там администратор сверяет, что перед
   ним, и подтверждает передачу объекта. Разное только середина.

   Устроено сверху вниз так, как идёт разговор у стойки: во сколько →
   что передаём → сколько вас → залог → что не сходится. */
.dlg-checkin{
  width:min(432px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 48px));
  display:flex;flex-direction:column;
  /* Окно растёт из нажатой кнопки, а не из середины экрана: связь между
     «нажал вот это» и «появилось вот то» должна быть видна, а не
     достраиваться в уме. Пока точка не задана — центр. */
  transform-origin:var(--ox,50%) var(--oy,50%);
}
.ci-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 16px 12px;
}
.ci-head b{display:block;font-size:var(--ci-lg);font-weight:600;letter-spacing:var(--ci-tr-lg);color:var(--ink)}
.ci-head span{display:block;margin-top:2px;font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);color:var(--ink-2)}

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

   `isolation` обязателен: пигменты идут через `screen`, и без своего
   слоя они смешивались бы со всем окном. */
.ci-plate{
  position:relative;isolation:isolate;
  background:var(--band);color:var(--band-ink);
}
.ci-plate>*:not(.plate-lite){position:relative;z-index:1}

/* Приборная лента. Тёмное в этом продукте значит «здесь мерят время», и
   здесь меряют именно его: час заезда — то, что потом и спрашивают. */
.ci-rail{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;
}
.ci-now em{
  display:block;font-size:var(--ci-cap);font-style:normal;font-weight:500;
  color:var(--band-ink-3);
}
.ci-now b{
  display:block;margin-top:4px;font-size:var(--ci-clock);font-weight:500;
  letter-spacing:var(--ci-tr-clock);line-height:1;font-variant-numeric:tabular-nums;
}
/* Плановое время рядом мелким: оно не заменяется фактическим, а остаётся
   для сравнения — иначе некому сказать, что гость опоздал (SPEC §5.7). */
.ci-now span{display:block;margin-top:4px;font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);color:var(--band-ink-2)}
.ci-shift{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;max-width:190px}
.ci-shift button{
  padding:4px 8px;border-radius:var(--r-sm);font-size:var(--ci-xs);
  letter-spacing:var(--ci-tr-num);color:var(--band-ink-2);
  background:var(--band-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:var(--t-tap) var(--ease);transition-property:color,background-color,transform;
}
@media (hover:hover) and (pointer:fine){
  .ci-shift button:hover{background:var(--band-3);color:var(--band-ink)}
}
.ci-shift button:active{transform:scale(.96)}

/* Пройденный путь — в той же тёмной ленте, что и час: она не листается
   вместе с содержанием и остаётся якорем. Названия, а не точки: «2 из 4»
   говорит про длину анкеты, «Бумаги» — про то, что сейчас делают. */
.ci-path{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:8px 16px 12px;color:var(--band-ink-3);
}
.ci-path span{
  display:flex;align-items:center;gap:4px;
  font-size:var(--ci-cap);font-weight:500;
  transition:color .2s var(--ease);
}
.ci-path span+span::before{
  content:"";width:12px;height:1px;background:currentColor;opacity:.35;margin-right:2px;
}
.ci-path .was{color:var(--band-ink-2)}
.ci-path .now{color:var(--band-ink)}
.ci-path svg{color:var(--ok)}

/* Сцена. Высота ведётся от прежней к новой, а не прыгает: короткий шаг
   в большом окне выглядит недоделанным, а скачок рвёт связь экранов.

   Но расти бесконечно она не может: на 1366×768 «Встреча» просила 575 px
   при 458 доступных, и `overflow:hidden` резал 117 — вместе со всеми
   замечаниями внизу. Прочитать их было нельзя ничем: ни колесом, ни
   полосой, ни касанием. Поэтому сцена сжимается (`flex:0 1 auto`,
   `min-height:0`) и прокручивается; растворение у нижнего края с этого
   момента говорит правду — «ниже есть ещё», а не «здесь всё кончилось». */
.ci-stage{
  flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  transition:height .3s var(--ease);
}
.ci-scene{
  padding:16px 16px 8px;
  animation:ciNext .3s var(--ease);
}
/* Экран приходит со стороны движения: вперёд — справа, назад — слева.
   Так видно не только что сменилось, но и куда идём. */
.ci-scene.back{animation-name:ciBack}
@keyframes ciNext{from{opacity:0;transform:translateX(22px)}}
@keyframes ciBack{from{opacity:0;transform:translateX(-22px)}}
/* Имя момента и его смысл — над сценой. Кромочный заголовок называл
   графу, а не то, что сейчас делают: человек за стойкой должен понимать,
   на каком он шаге, не считая точки. */
.ci-cap{margin-bottom:16px}
.ci-cap b{
  display:block;font-size:var(--ci-xl);font-weight:600;letter-spacing:var(--ci-tr-xl);color:var(--ink);
}
.ci-cap span{display:block;margin-top:2px;font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);color:var(--ink-2)}

.ci-scene>h3{
  margin-bottom:8px;font-size:var(--ci-cap);font-weight:500;
  color:var(--ink-2);
}
.ci-scene>h3.gap{margin-top:20px}

/* Касса — та же, что в окне приёма оплаты, и вставлена его же стилями.
   Здесь только рамка вокруг табло: в окне оплаты оно во всю ширину, а
   тут стоит внутри сцены. */
.ci-term{
  margin:0 -4px 12px;padding:12px;border-radius:var(--r);background:var(--accent);
}

/* Край прокрутки: там, где содержание уходит под подвал, оно тает, а не
   обрезается линейкой. Резать текст на полбуквы — значит сообщать, что
   дальше ничего нет, когда там ещё половина экрана. */
.ci-stage{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);
  scrollbar-width:none;
}
.ci-stage::-webkit-scrollbar{display:none}
.ci-body{padding:0 16px 4px;overflow-y:auto}
.ci-sec{padding-top:16px}
.ci-sec h3{
  margin-bottom:8px;font-size:var(--ci-cap);font-weight:500;
  color:var(--ink-2);
}

/* Что передаём — поимённо: гость на пороге спрашивает «а баня тоже наша?». */
.ci-places{border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden}
.ci-place{
  display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;
  padding:8px 12px;background:var(--card);
}
.ci-place+.ci-place{border-top:1px solid var(--rule-2)}
.ci-place i{display:flex;color:var(--ink-3)}
/* Трекинг зависит от кегля: крупному он нужен отрицательный, мелкому —
   нулевой или чуть положительный, иначе буквы слипаются. */
.ci-place b{font-size:var(--ci-md);letter-spacing:var(--ci-tr-text);font-weight:550;color:var(--ink)}
.ci-place span{
  font-size:var(--ci-xs);letter-spacing:var(--ci-tr-num);color:var(--ink-2);
  white-space:nowrap;
}

/* Счётчик — один прибор, а не две квадратные кнопки вокруг голой цифры.
   Минус, число и плюс сидят в общей обойме с волосяными перегородками:
   так это читается счётчиком, а не тремя предметами подряд. Число
   табличное и крупнее кнопок — на него и смотрят. */
.ci-step{display:flex;align-items:center;gap:12px}
.ci-step>span{font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);color:var(--ink-2)}
.ci-dial{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  background:var(--card);
}
.ci-dial button{
  width:36px;font-size:var(--ci-lg);letter-spacing:var(--ci-tr-lg);
  color:var(--ink-3);background:transparent;
  transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .ci-dial button:hover{background:var(--sunk);color:var(--ink)}
}
.ci-dial button:active{background:var(--rule-2)}
.ci-dial button:focus-visible{outline-offset:-2px}
.ci-dial b{
  min-width:44px;padding:8px 0;text-align:center;
  border-left:1px solid var(--rule-2);border-right:1px solid var(--rule-2);
  font-size:var(--ci-xl);font-weight:500;
  letter-spacing:var(--ci-tr-xl);color:var(--ink);font-variant-numeric:tabular-nums;
}

.ci-check{display:flex;align-items:center;gap:8px;cursor:pointer}
.ci-check input{position:absolute;opacity:0;pointer-events:none}
.ci-check i{
  display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;
  border:1.5px solid var(--rule);border-radius:var(--r-sm);background:var(--card);color:transparent;
  transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color,transform;
}
.ci-check.on i{background:var(--ok);border-color:var(--ok);color:var(--on-status);transform:scale(1.04)}
.ci-check span{font-size:var(--ci-md);letter-spacing:var(--ci-tr-text);font-weight:500;color:var(--ink)}

.ci-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ci-ways button{
  padding:8px 4px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--card);font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);color:var(--ink-2);transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color,transform;
}
@media (hover:hover) and (pointer:fine){
  .ci-ways button:hover{border-color:var(--ink-3);color:var(--ink)}
}
.ci-ways button.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.ci-ways button:active{transform:scale(.97)}
.ci-hand{
  display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 12px;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--card);
}
.ci-hand input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:var(--ci-lg);letter-spacing:var(--ci-tr-lg);color:var(--ink);
}
.ci-hand em{font-style:normal;font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);color:var(--ink-3);white-space:nowrap}
.ci-why{
  width:100%;margin-top:8px;padding:8px 12px;border:1px solid var(--rule);
  border-radius:var(--r-sm);background:var(--card);font-size:var(--ci-md);letter-spacing:var(--ci-tr-text);color:var(--ink);
}
.ci-why:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--sunk)}
.ci-split{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.ci-split div{padding:8px 12px;border-radius:var(--r-sm);background:var(--paper)}
.ci-split em{display:block;font-style:normal;font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);color:var(--ink-2)}
.ci-split b{
  display:block;margin-top:2px;font-size:var(--ci-lg);font-weight:500;
  letter-spacing:var(--ci-tr-lg);color:var(--ink);font-variant-numeric:tabular-nums;
}
/* Возврат — единственное зелёное: это деньги, уходящие гостю. */
.ci-split b.back{color:var(--ok)}

/* Уборка. Объект уходит в буфер, а не сразу в продажу: не сказав этого,
   смена будет искать свободное время и не поймёт, почему его нет. */
.ci-clean{
  display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:8px 12px;
  border-radius:var(--r);background:var(--paper);
}
.ci-clean i{display:flex;color:var(--ink-3);flex:none;margin-top:0px}
.ci-clean span{font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);line-height:1.45;color:var(--ink-2)}

/* Что не сходится. Тон несёт срочность: долг и перебор по местам громче,
   чем «приехали раньше». Но это заметки, а не запрет. */
.ci-notes{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.ci-notes p{
  padding:8px 12px;border-radius:var(--r-sm);font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);line-height:1.4;
  background:var(--sunk);color:var(--ink-2);
}
/* Тихие обстоятельства — одной строкой без плашки: они не решают, что
   делать сейчас, и три серых прямоугольника подряд превращали их в
   стену, в которой не видно важного. */
.ci-notes p.soft{
  padding:2px 2px;background:none;box-shadow:none;
  font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);line-height:1.45;color:var(--ink-3);
}
.ci-notes p.wait{background:var(--wait-bg);color:var(--wait-ink)}
.ci-notes p.late{background:var(--late-bg);color:var(--late)}
/* Не решающее, но важное — со знаком, а не с цветной кромкой у края. */
.ci-notes p:is(.wait,.late){display:flex;align-items:flex-start;gap:8px}
.ci-notes p:is(.wait,.late)::before{content:"";flex:none;width:13px;height:13px;margin-top:2px;background:currentColor;-webkit-mask:var(--glyph-alert) center/contain no-repeat;mask:var(--glyph-alert) center/contain no-repeat}

/* А это уже запрет: ход только вперёд, и обратного перехода нет. */
.ci-stop{
  margin-top:16px;padding:12px 12px;border-radius:var(--r);
  background:var(--late-bg);border:1px solid var(--late-line);
}
.ci-stop p{font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);font-weight:500;color:var(--late)}

.ci-foot{
  display:flex;gap:8px;padding:12px 16px 16px;margin-top:auto;
  border-top:1px solid var(--rule-2);
}
/* Главная кнопка тяжелее второй: из подвала выходят вперёд, а «назад» —
   запасный ход, и делить место поровну между ними неправда. */
.ci-foot .btn{flex:1}
.ci-foot .btn-primary{flex:2}
.ci-foot .btn:active:not([disabled]){transform:scale(.985)}

/* Шаги площадки. Отметка и то, что при ней вписывают, — один пункт:
   разведённые по разным строкам, они читаются как два дела. */
/* Отметка — это печать, а не галочка в анкете: отмеченный пункт меняет
   вид целиком — рамка и заливка зеленеют, и его видно, не читая. */
.ci-step-row{
  padding:12px 12px;border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--card);
  transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
.ci-step-row+.ci-step-row{margin-top:8px}
.ci-step-row.on{
  border-color:var(--ok-line);background:var(--ok-bg);
}
.ci-step-row.on .ci-check span{color:var(--ok)}
/* Отклик живёт на нажатии, а не на отпускании: ожидание `click` читается
   как «не сработало», и палец жмёт второй раз. */
.ci-check:active i{transform:scale(.92)}
.ci-step-row:has(.ci-check:active){background:var(--sunk)}
.ci-step-body{margin-top:8px;padding-left:25px}
.ci-field{
  width:100%;padding:8px 8px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--card);font-size:var(--ci-md);letter-spacing:var(--ci-tr-text);color:var(--ink);
}
.ci-field:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--sunk)}

/* Документ сверяют, а копию не хранят (§4.6, §7.4). Тип — двумя
   кнопками, а не списком: вариантов ровно два, и список из двух строк
   прячет их за лишним нажатием. */
.ci-kinds{display:flex;gap:4px;margin-top:8px}
.ci-kind{
  padding:4px 12px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--card);font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);font-weight:500;color:var(--ink-2);
  transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease),
    border-color var(--t-tap) var(--ease);
}
.ci-kind.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ci-kind:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .ci-kind:not(.on):hover{background:var(--sunk);color:var(--ink)}
}
/* Последние цифры — необязательное уточнение, и выглядеть оно должно
   уточнением: короткое поле при подписи, а не графа анкеты. */
.ci-tail{display:flex;align-items:center;gap:8px;margin-top:8px}
.ci-tail>span{font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);color:var(--ink-2)}
.ci-tail .ci-field{width:74px;margin-top:0;text-align:center;letter-spacing:.18em}
.ci-tail em{font-style:normal;font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);color:var(--ink-3)}
.ci-fine{margin-top:8px;font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);line-height:1.45;color:var(--ink-3)}
/* Отметка о сверке — след, а не заголовок: её читают потом, а не сейчас. */
.ci-stamped{
  display:flex;align-items:center;gap:4px;margin-top:8px;
  font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);color:var(--ok);
}
.ci-stamped svg{flex:none}

/* Пакет относительно фактического времени: дом уже наш, беседка ещё нет,
   баня отошла. Заголовок группы — слово, а не цвет: цвет отдан
   состояниям дела (§8.3), и третьего набора тонов здесь не заводим. */
/* Отделения подписаны внутри самого списка: подпись — узкая полоса на
   утопленной бумаге, а не заголовок над отдельной коробкой. Три группы
   в трёх рамках превращали одну вещь — что мы передаём — в три предмета. */
.ci-lots .ci-place{grid-template-columns:22px 1fr auto auto}
.ci-lot-cap{
  padding:4px 12px;background:var(--paper);
  font-size:var(--ci-cap);font-weight:650;
  color:var(--ink-3);
}
.ci-lot-cap+.ci-place{border-top:1px solid var(--rule-2)}
.ci-place+.ci-lot-cap{border-top:1px solid var(--rule-2)}
.ci-place em{
  font-style:normal;font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);
  color:var(--ink-3);white-space:nowrap;
}
/* Отошедшее тише: оно есть в пакете, но в руки сейчас не передаётся. */
.ci-place.past{background:var(--paper)}
.ci-place.past b,.ci-place.past span{color:var(--ink-3)}
.ci-place.past i{opacity:.5}
.ci-place.later em{color:var(--wait)}

/* Готовность к приезду. Не второй список задач, а сборка того, что уже
   известно про этот визит. Не запрещает — предупреждает: гость уже на
   пороге, и права запрещать передачу у неё нет (SPEC §5.7). */
.ci-ready{margin-top:12px;padding:8px 12px;border-radius:var(--r)}
.ci-ready.ok{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok);
  font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);
}
.ci-ready.ok b{font-weight:550}
.ci-ready.wait{border:1px solid var(--wait-line);background:var(--wait-bg)}
.ci-ready.late{border:1px solid var(--late-line);background:var(--late-bg)}
.ci-ready h4{
  margin:0 0 8px;font-size:var(--ci-cap);font-weight:650;
  color:var(--ink-2);
}
.ci-ready p{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin:0;font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);line-height:1.45;
}
.ci-ready p+p{margin-top:4px}
.ci-ready p b{font-weight:550}
.ci-ready p span{font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);color:var(--ink-3)}
.ci-ready p.late b{color:var(--late)}
.ci-ready p.wait b{color:var(--wait-ink)}

/* Важное о госте: полторы строки, которые меняют встречу, а не копия
   картотеки. Метки — те же наклейки, что в картотеке (§4.7). */
.ci-who{margin-top:12px}
.ci-who h4{
  margin:0 0 8px;font-size:var(--ci-cap);font-weight:650;
  color:var(--ink-3);
}
.ci-who-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ci-tag{
  padding:2px 8px;border-radius:var(--r-sm);font-style:normal;
  font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);font-weight:500;
}
.ci-tag.t1{background:var(--tag-1-bg);color:var(--tag-1-ink)}
.ci-tag.t2{background:var(--tag-2-bg);color:var(--tag-2-ink)}
.ci-tag.t3{background:var(--tag-3-bg);color:var(--tag-3-ink)}
.ci-tag.t4{background:var(--tag-4-bg);color:var(--tag-4-ink)}
.ci-tag.t5{background:var(--tag-5-bg);color:var(--tag-5-ink)}
.ci-tag.t6{background:var(--tag-6-bg);color:var(--tag-6-ink)}
.ci-said{font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);line-height:1.45;color:var(--ink-2)}
.ci-said.comment{flex-basis:100%}
.ci-said.host,.ci-said.occasion{color:var(--ink-3)}
.ci-who-more{margin-top:4px}
.ci-who-more summary{
  font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);color:var(--ink-3);cursor:default;list-style:none;
}
.ci-who-more summary::-webkit-details-marker{display:none}
.ci-who-more[open] summary{margin-bottom:4px}

/* Бумага подписывается не тем, что её напечатали. Отметку ставит
   отдельное действие, и до печати его нет: получать нечего (§5.7). */
.ci-paper{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:8px;padding:8px 12px;
  border:1px solid var(--wait-line);border-radius:var(--r);background:var(--wait-bg);
}
.ci-paper span{font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);line-height:1.4;color:var(--wait-ink)}
.ci-paper .btn{flex:none}

/* Проверка перед последней кнопкой, а не ещё один шаг: одним взглядом
   видно, что оформлено и что нельзя забыть. */
.ci-sum{
  margin-top:16px;padding:12px 12px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);
}
.ci-sum h4{
  margin:0 0 8px;font-size:var(--ci-cap);font-weight:650;
  color:var(--ink-2);
}
.ci-sum dl{margin:0;display:flex;flex-direction:column;gap:4px}
.ci-sum dl>div{display:grid;grid-template-columns:82px minmax(0,1fr);gap:8px}
.ci-sum dt{font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);color:var(--ink-3)}
.ci-sum dd{margin:0;font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);line-height:1.4;color:var(--ink)}
.ci-sum-warn{
  margin:8px 0 0;padding-top:8px;border-top:1px solid var(--rule-2);
  font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);line-height:1.45;color:var(--late);
}
.ci-sum-warn b{font-weight:600}

/* Заголовок шага без галки: у правил отмечать нечего, их подписывают. */
.ci-step-title{display:flex;flex-direction:column;gap:2px;padding:2px 0}
.ci-step-title b{font-size:var(--ci-md);letter-spacing:var(--ci-tr-text);font-weight:550;color:var(--ink)}
.ci-step-title span{font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);color:var(--ink-3)}

/* Деньги здесь же: гость стоит у стойки, и передача объекта с оплатой —
   одно движение, а не два окна. */
.ci-pay{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 12px;border-radius:var(--r);background:var(--sunk);
}
.ci-pay-sum em{
  display:block;font-size:var(--ci-cap);font-style:normal;font-weight:500;
  color:var(--ink-2);
}
.ci-pay-sum b{
  display:block;margin-top:2px;font-size:var(--ci-xl);font-weight:500;
  letter-spacing:var(--ci-tr-xl);color:var(--ink);font-variant-numeric:tabular-nums;
}
.ci-pay-sum span{display:block;margin-top:2px;font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);color:var(--ink-2)}
.ci-pay .ci-ways{grid-template-columns:repeat(3,auto)}

/* ── движение ──
   Окно приходит одним куском, а его содержание — очередью: сперва лента
   с часом, потом то, что передаём, потом остальное. Так глаз читает
   сверху вниз, а не хватается за всё сразу. 34 мс между секциями —
   вся очередь укладывается в четверть секунды и не превращается
   в представление. */
.dlg-checkin.open .ci-rail{animation:ciRail .3s var(--ease) .04s backwards}
.dlg-checkin.open .ci-path{animation:ciRail .3s var(--ease) .08s backwards}
.dlg-checkin.open .ci-sec,
.dlg-checkin.open .ci-clean,
.dlg-checkin.open .ci-notes,
.dlg-checkin.open .ci-stop{animation:ciRise .28s var(--ease) backwards}
.dlg-checkin.open .ci-body>*:nth-child(1){animation-delay:.08s}
.dlg-checkin.open .ci-body>*:nth-child(2){animation-delay:.12s}
.dlg-checkin.open .ci-body>*:nth-child(3){animation-delay:.16s}
.dlg-checkin.open .ci-body>*:nth-child(4){animation-delay:.2s}
.dlg-checkin.open .ci-body>*:nth-child(n+5){animation-delay:.24s}
@keyframes ciRail{from{opacity:0;transform:translateY(-6px)}}
@keyframes ciRise{from{opacity:0;transform:translateY(7px)}}

/* Час при сдвиге не прыгает, а перещёлкивается: цифра — прибор, и она
   должна вести себя как прибор. */
.ci-now b{animation:ciTick .22s var(--ease)}
@keyframes ciTick{from{opacity:.35;transform:translateY(-3px)}}

/* ── итог ──
   Окно не захлопывается: у передачи объекта есть момент, и он должен
   быть виден. Ключи отданы — это событие вечера, а не строка в журнале. */
.ci-done{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:40px 24px 32px;animation:ciDone .34s var(--ease);
}
.ci-done>i{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;margin-bottom:16px;
  animation:ciSeal .42s cubic-bezier(.175,.885,.32,1.275) backwards;
}
/* Заселение — спокойное зелёное: объект передан, всё идёт как надо.
   Выселение — тем же зелёным: это тоже норма, а не событие. */
.ci-done.in>i,.ci-done.out>i{background:var(--ok-bg);color:var(--ok)}
.ci-done b{font-size:var(--ci-xl);font-weight:600;letter-spacing:var(--ci-tr-xl);color:var(--ink)}
.ci-done>span{
  margin-top:4px;font-size:var(--ci-sm);letter-spacing:var(--ci-tr-num);
  color:var(--ink-2);
}
/* Объекты отмечаются по очереди, а не разом: так видно, что отмечен
   каждый, а не «что-то произошло». */
.ci-done-list{
  display:flex;flex-direction:column;gap:4px;margin-top:20px;width:100%;
}
.ci-done-row{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-radius:var(--r-sm);background:var(--paper);
  animation:ciRow .3s var(--ease) var(--d,0ms) backwards;
}
.ci-done-row em{
  display:flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:var(--ok);color:var(--on-status);flex:none;font-style:normal;
}
.ci-done-row span{font-size:var(--ci-md);letter-spacing:var(--ci-tr-text);font-weight:500;color:var(--ink)}

@keyframes ciDone{from{opacity:0}}
@keyframes ciSeal{from{opacity:0;transform:scale(.6)}}
@keyframes ciRow{from{opacity:0;transform:translateX(-8px)}}

/* Кому мешает прозрачность — сплошной фон и без размытия. Кому нужен
   контраст — определённая граница вместо мягкой тени. */
@media (prefers-reduced-transparency:reduce){
  .ci-stage{-webkit-mask-image:none;mask-image:none}
}
@media (prefers-contrast:more){
  .dlg-checkin{box-shadow:none;outline:2px solid var(--ink)}
  .ci-step-row{border-color:var(--ink-3)}
  .ci-way{border-color:var(--ink-3)}
}

@media (prefers-reduced-motion:reduce){
  .dlg-checkin.open .ci-rail,.dlg-checkin.open .ci-sec,.dlg-checkin.open .ci-clean,
  .dlg-checkin.open .ci-notes,.dlg-checkin.open .ci-stop,.ci-now b,
  .ci-done,.ci-done>i,.ci-done-row,.ci-scene{animation:none}
  .ci-check:active i,.ci-way:active,.ci-step button:active,.ci-kind:active,
  .ci-ways button:active,.ci-foot .btn:active:not([disabled]){transform:none}
}

/* ── правила проживания ──
   Подписывают, а не «принимают галочкой»: спор о том, предупреждали ли
   про тишину после одиннадцати, решается подписью, а не отметкой
   оператора (SPEC §5.7). */
.ci-rules{margin-bottom:8px}
.ci-rules summary{
  cursor:pointer;padding:8px 8px;border-radius:var(--r-sm);background:var(--paper);
  font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);color:var(--ink-2);list-style:none;
}
.ci-rules summary::-webkit-details-marker{display:none}
.ci-rules summary::after{content:" ▾";color:var(--ink-3)}
.ci-rules[open] summary::after{content:" ▴"}
@media (hover:hover) and (pointer:fine){
  .ci-rules summary:hover{background:var(--sunk);color:var(--ink)}
}
/* Текст читает гость, а не администратор: держать шесть абзацев
   раскрытыми над всем остальным незачем. */
.ci-rules ol{margin:8px 0 0;padding:0 0 0 20px}
.ci-rules li{font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);line-height:1.5;color:var(--ink-2);margin-bottom:4px}

/* Как подписывают — решает то, что стоит на стойке. Мышью не
   расписываются: это не подпись, а закорючка, и предлагать её значит
   делать вид, что бумага не нужна, когда она нужна (SPEC §5.7). */
.ci-how{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ci-way{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:12px 12px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--card);text-align:left;transition:var(--t-tap) var(--ease);transition-property:background-color,border-color,box-shadow,transform;
}
@media (hover:hover) and (pointer:fine){
  .ci-way:hover{border-color:var(--ink-3)}
}
.ci-way:active{background:var(--sunk);transform:scale(.985)}
.ci-way i{display:flex;color:var(--ink-3);margin-bottom:4px}
.ci-way b{font-size:var(--ci-md);letter-spacing:var(--ci-tr-text);font-weight:550;color:var(--ink)}
.ci-way em{font-style:normal;font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);color:var(--ink-2)}
/* На компьютере первым идёт печать: она работает на любой стойке. */
.ci-way.on{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.ci-way.on i{color:var(--ink)}
/* Холст прячется на мыши, а не отключается: планшет могут поставить
   завтра, и объяснять, почему возможность исчезла, будет нечем. */
.ci-way.touch-only{display:none}
@media (pointer:coarse){
  .ci-way.touch-only{display:flex}
  /* На сенсорном экране порядок обратный: там расписываются пальцем,
     а печать — запасный ход. */
  .ci-how>[data-ci-print]{order:2;border-color:var(--rule);box-shadow:none}
  .ci-how>[data-ci-print] i{color:var(--ink-3)}
  .ci-way.touch-only{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
  .ci-way.touch-only i{color:var(--ink)}
}

/* Поле подписи — бумага, а не форма: линия внизу и подсказка под ней,
   как на бланке. */
.ci-sign{
  position:relative;margin-top:8px;padding:4px 4px 4px;
  border:1px dashed var(--rule);border-radius:var(--r);background:var(--card);
  animation:ciRise .24s var(--ease);
}
.ci-sign>button{
  position:absolute;top:8px;right:10px;padding:2px 8px;border-radius:var(--r-sm);
  font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);color:var(--ink-3);background:var(--paper);transition:var(--t-tap) var(--ease);transition-property:color,background-color;
}
@media (hover:hover) and (pointer:fine){
  .ci-sign>button:hover{color:var(--ink);background:var(--sunk)}
}
.ci-sign canvas{
  display:block;width:100%;height:88px;touch-action:none;cursor:crosshair;
  border-bottom:1px solid var(--rule-2);
}
.ci-sign canvas.inked{border-bottom-color:var(--ink-3)}
.ci-sign em{
  display:block;padding:4px 2px 2px;font-style:normal;font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);
  text-align:center;color:var(--ink-3);
}

/* Подписано — уже документ: подпись на месте, час рядом. */
.ci-signed{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;
  padding:8px 8px;border-radius:var(--r);background:var(--card);
  box-shadow:inset 0 0 0 1px var(--ok-line);
}
.ci-signed img{grid-column:1 / -1;width:100%;max-height:76px;object-fit:contain}
.ci-signed b{font-size:var(--ci-xs);letter-spacing:var(--ci-tr-num);font-weight:500;color:var(--ok)}
.ci-signed span{font-size:var(--ci-xs);letter-spacing:var(--ci-tr-num);color:var(--ok)}
/* Бумажный бланк подписи на экране не оставляет — только час и факт.
   Рисовать вместо снимка пустую рамку было бы враньём о том, чего нет. */
.ci-signed.paper{grid-template-columns:auto 1fr auto}
.ci-signed.paper i{display:flex;color:var(--ok)}
.ci-signed button{
  justify-self:end;font-size:var(--ci-xs);letter-spacing:var(--ci-tr-text);color:var(--ink-2);
  border-bottom:1px solid var(--rule);transition:var(--t-tap) var(--ease);transition-property:color,border-color;
}
@media (hover:hover) and (pointer:fine){
  .ci-signed button:hover{color:var(--ink);border-bottom-color:var(--ink)}
}


/* ── печатный бланк ──
   На экране его нет вовсе; на бумаге — только он. Печатать окно целиком
   значит выдать гостю снимок интерфейса вместо документа. */
.ci-print{display:none}
@media print{
  body.printing>*{display:none!important}
  body.printing .ci-print{display:block;padding:0;color:#000;font-size:12pt}
  .ci-print-head{
    display:flex;align-items:baseline;justify-content:space-between;
    padding-bottom:10pt;border-bottom:1pt solid #000;margin-bottom:16pt;
  }
  .ci-print-head b{font-size:16pt}
  .ci-print-head span{font-size:11pt}
  .ci-print-facts{margin-bottom:16pt}
  .ci-print-facts>div{display:flex;gap:10pt;margin-bottom:4pt}
  .ci-print-facts dt{width:70pt;color:#444}
  .ci-print-rules{margin:0 0 30pt;padding-left:18pt}
  .ci-print-rules li{margin-bottom:7pt;line-height:1.45}
  /* Место для подписи ищут первым: без него бланк не документ,
     а памятка. */
  .ci-print-sign{display:flex;gap:40pt}
  .ci-print-sign>div{flex:1}
  .ci-print-sign i{display:block;height:34pt;border-bottom:1pt solid #000}
  .ci-print-sign span{display:block;margin-top:4pt;font-size:10pt;color:#444}
}

/* ── счёт при заселении (SPEC §6.1, §6.2) ──
   За что платят — строками, а не одной суммой: «остаток 8 000 ₽» без
   разбора администратор не может назвать гостю. Проживание, уже
   пробитое и докупленное сейчас идут одним списком: гостю всё равно,
   когда что попало в счёт, ему важно, за что он платит. */
.ci-bill{
  margin-bottom:12px;border:1px solid var(--rule-2);border-radius:var(--r);
  overflow:hidden;background:var(--card);
}
.ci-bill-row{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;
  padding:8px 12px;font-size:var(--ci-md);letter-spacing:var(--ci-tr-text);
}
.ci-bill-row+.ci-bill-row{border-top:1px solid var(--rule-2)}
.ci-bill-row b{
  font-size:var(--ci-xs);letter-spacing:var(--ci-tr-num);
  font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink);
}
/* Внесённое — минусом и тише: это не строка счёта, а то, что уже закрыто. */
.ci-bill-row.paid{background:var(--paper);color:var(--ink-2)}
.ci-bill-row.paid b{color:var(--ok)}
/* Докупленное обведено пунктиром: оно ещё черновик, набросок, и его можно
   убрать. Тот же знак черновика, что у совета дятла в аналитике. */
.ci-bill-row.new{outline:1px dashed var(--rule);outline-offset:-1px}
.ci-bill-row button{
  display:flex;color:var(--ink-3);border-radius:var(--r-sm);padding:2px;
  transition:color var(--t-tap) var(--ease),background-color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .ci-bill-row button:hover{color:var(--late);background:var(--late-bg)}
}

/* Докупают у стойки, а не в другом окне: гость просит веник, стоя перед
   тобой, и второе окно поверх спрятало бы то, что подтверждают. Свёрнуто:
   докупают не каждый заезд, и раскрытый прайс над кассой мешал бы. */
.ci-shop{margin-bottom:12px}
.ci-shop summary{
  padding:8px 12px;border:1px dashed var(--rule);border-radius:var(--r);
  font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);color:var(--ink-2);
  list-style:none;cursor:pointer;
  transition:border-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease);
}
.ci-shop summary::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){
  .ci-shop summary:hover{border-color:var(--ink-3);color:var(--ink)}
}
.ci-shop[open] summary{border-style:solid;border-radius:var(--r) var(--r) 0 0}
.ci-shop-in{
  padding:12px;border:1px solid var(--rule);border-top:0;
  border-radius:0 0 var(--r) var(--r);background:var(--paper);
}
/* На экране лежит только отмеченное: справочник из сорока позиций,
   выложенный плитками, — не выбор, а стена (§6.1). */
.ci-fav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ci-good{
  position:relative;display:flex;flex-direction:column;gap:2px;
  padding:8px;border:1px solid var(--rule-2);border-radius:var(--r-sm);
  background:var(--card);text-align:left;
  transition:border-color var(--t-tap) var(--ease),background-color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .ci-good:hover{border-color:var(--ink-3)}
}
.ci-good:active{transform:scale(.97)}
.ci-good>i{position:absolute;top:6px;right:6px;display:flex;color:var(--wait)}
.ci-good b{
  font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);font-weight:550;color:var(--ink);
}
.ci-good em{
  font-style:normal;font-size:var(--ci-cap);
  letter-spacing:var(--ci-tr-num);color:var(--ink-3);
}
/* Позиция своими словами: обязательных полей два — что и за сколько. */
.ci-free{display:grid;grid-template-columns:1fr 72px auto;gap:8px;margin-top:12px}
.ci-free .ci-field{margin-top:0}
.ci-free .btn{height:auto}

/* ── что рассказать ──
   Не памятка «на всякий случай», а то, что проговаривают у порога.
   Нумерованный список: по нему идут сверху вниз и вслух. */
.ci-talk-list{
  margin:0 0 12px;padding:12px 12px 12px 32px;
  border:1px solid var(--rule-2);border-radius:var(--r);background:var(--card);
}
.ci-talk-list li{
  font-size:var(--ci-md);letter-spacing:var(--ci-tr-text);line-height:1.45;color:var(--ink);
}
.ci-talk-list li+li{margin-top:8px}
.ci-talk-list li::marker{
  font-size:var(--ci-xs);color:var(--ink-3);
}

/* ── касса вызывается, а не встроена ──
   Момент денег отвечает на «за что и сколько всего»; сколько именно
   вносим и чем — отдельный разговор, и окно на него в продукте одно.
   Здесь остаётся строка итога и кнопка, которая его открывает. */
.ci-take{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:12px;padding:12px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);
}
.ci-owe{display:flex;flex-direction:column;gap:2px}
.ci-owe span{font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);color:var(--ink-2)}
.ci-owe b{
  font-size:var(--ci-xl);letter-spacing:var(--ci-tr-xl);
  font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink);
}
/* Принятое названо здесь же: деньги взяты, но в бронь ещё не записаны —
   заселение подтверждают одним нажатием в конце. */
.ci-took{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 8px}
.ci-took i{grid-row:1 / span 2;display:flex;color:var(--ok)}
.ci-took b{font-size:var(--ci-md);letter-spacing:var(--ci-tr-text);color:var(--ok)}
.ci-took span{font-size:var(--ci-sm);letter-spacing:var(--ci-tr-text);color:var(--ink-2)}
.ci-took button{
  grid-column:2;justify-self:start;font-size:var(--ci-sm);color:var(--ink-3);
  border-bottom:1px solid var(--rule);
}
@media (hover:hover) and (pointer:fine){
  .ci-took button:hover{color:var(--ink);border-bottom-color:var(--ink)}
}

/* ── что предложить гостю (SPEC §6.2) ──
   Заметность — не новый тон: цвет отдан статусам, и третьего нет
   (§8.3). Отличают три вещи, ни одна из которых не красит:

   поверхность — блок утоплен, а не лежит белым на белом, как счёт и
   касса вокруг; вес — цена набрана крупно и табличными, потому что она
   и есть повод; обращение — «Предложите гостю» просьба к тому, кто за
   стойкой, а «Предложить гостю» читается подписью графы и листается.

   Строки приходят чуть позже остального — один раз, ступенями по 40 мс:
   глаз ловит то, что появилось после, и это дешевле любого цвета. */
.ci-offer{
  margin-bottom:12px;padding:12px;border:1px solid var(--rule);
  border-radius:var(--r);background:var(--sunk);
}
.ci-offer-cap{margin-bottom:8px}
.ci-offer-cap b{
  display:block;font-size:var(--ci-md);letter-spacing:var(--ci-tr-text);
  font-weight:600;color:var(--ink);
}
.ci-offer-cap span{
  display:block;margin-top:2px;font-size:var(--ci-sm);
  letter-spacing:var(--ci-tr-text);color:var(--ink-2);
}
.ci-pitch{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;
  width:100%;padding:10px 12px;border:1px solid var(--rule-2);border-radius:var(--r-sm);
  background:var(--card);text-align:left;
  transition:border-color var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease);
  animation:ciPitch .28s var(--ease) both;
  animation-delay:calc(120ms + var(--at,0) * 40ms);
}
@keyframes ciPitch{from{opacity:0;transform:translate3d(0,6px,0)}}
.ci-pitch+.ci-pitch{margin-top:6px}
@media (hover:hover) and (pointer:fine){
  .ci-pitch:hover{border-color:var(--ink);box-shadow:0 2px 6px rgb(25 24 21 / .1)}
}
.ci-pitch:active{transform:scale(.99)}
.ci-pitch b{
  font-size:var(--ci-md);letter-spacing:var(--ci-tr-text);font-weight:550;color:var(--ink);
}
/* Цена — повод, и набрана она как повод: крупно, табличными, единица под ней. */
.ci-pitch em{font-style:normal;display:flex;flex-direction:column;align-items:flex-end}
.ci-pitch em>i{
  font-style:normal;font-size:var(--ci-cap);
  letter-spacing:var(--ci-tr-num);color:var(--ink-3);
}
/* Цена сама по себе — табличными цифрами и крупнее имени: на неё и смотрят. */
.ci-offer .ci-pitch em{
  font-size:var(--ci-lg);letter-spacing:var(--ci-tr-num);
  font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink);
}
.ci-pitch u{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;text-decoration:none;
  color:var(--accent-ink);background:var(--accent);
}
@media (prefers-reduced-motion:reduce){ .ci-pitch{animation:none} }

/* ── долг подтверждают, а не проходят молча (SPEC §5.7) ──
   Заселять и выселять с долгом можно — но решением. Раньше решение было
   названо только на последней кнопке, и через момент денег проходили молча.

   Тон янтарный, а не красный: это не запрет, а обстоятельство, о котором
   договорились и которое осталось в счёте. Красный читался бы запретом,
   которого здесь нет (§8.3). */
.ci-owe-ack{
  display:grid;grid-template-columns:auto 1fr;align-items:start;gap:10px;
  margin-bottom:12px;padding:12px;
  border:1px solid var(--wait-line);border-radius:var(--r);background:var(--wait-bg);
  cursor:pointer;
  transition:border-color var(--t-tap) var(--ease),background-color var(--t-tap) var(--ease);
}
.ci-owe-ack input{position:absolute;opacity:0;pointer-events:none}
.ci-owe-ack i{
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:var(--r-sm);
  border:1px solid var(--wait);background:var(--card);color:transparent;
  transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease),
    transform var(--t-tap) var(--ease);
}
.ci-owe-ack b{
  display:block;font-size:var(--ci-md);letter-spacing:var(--ci-tr-text);
  font-weight:600;color:var(--wait-ink);
}
.ci-owe-ack em{
  display:block;margin-top:2px;font-style:normal;font-size:var(--ci-sm);
  letter-spacing:var(--ci-tr-text);color:var(--ink-2);
}
/* Решение принято — плашка гаснет до спокойной: вопрос закрыт, и держать
   его янтарным значит звать к тому, что уже сделано. */
.ci-owe-ack.on{border-color:var(--rule);background:var(--paper)}
.ci-owe-ack.on i{border-color:var(--ok);background:var(--ok);color:var(--on-status)}
.ci-owe-ack.on b{color:var(--ink)}
.ci-owe-ack:active i{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){ .ci-owe-ack:active i{transform:none} }