/* ═══════════════════════════════════════════════════════════
   Настройки — регламент заведения
   ═══════════════════════════════════════════════════════════
   Два материала, как у наряда и картотеки: тёмная лакированная плита
   с показаниями и светлая бумага регламента под ней. Плита говорит,
   что из настроек получается, — пример счёта, число броней, длина
   смены, — и стоит на месте, пока бумагу листают: тумблер внизу
   двигает стрелку наверху.

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

   Слева корешки: поиск, опись и разделы по группам. Внизу, за пунктирной
   чертой, другим тоном — «Моё рабочее место»: настройки браузера, а не
   заведения.
   ═══════════════════════════════════════════════════════════ */

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

/* ── корешки ── */
.st-side{
  width:226px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;
  background:var(--paper);border-right:1px solid var(--rule-2);
}
/* Поиск первым: сюда приходят не листать, а найти строку, которая
   мешает. */
.st-find{
  display:flex;align-items:center;gap:8px;margin:14px 12px 6px;padding:0 10px;height:32px;
  border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--rule-2);
  color:var(--ink-3);transition:box-shadow var(--t-tap) var(--ease);
}
.st-find:focus-within{box-shadow:inset 0 0 0 1px var(--ink)}
.st-find input{
  flex:1;min-width:0;border:0;background:none;font:inherit;font-size:12.5px;color:var(--ink);outline:none;
}
.st-find input::placeholder{color:var(--ink-3)}
.st-find input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.st-groups{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:4px 12px 14px}

.st-home,.st-nav-i{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:7px 10px;border-radius:var(--r-sm);
  font-size:12.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink-2);
  transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease);
  position:relative;
}
.st-home{margin-top:4px}
.st-home svg{flex-shrink:0;color:var(--ink-3)}
.st-home b{font-weight:inherit}
.st-home span{margin-left:auto;font-size:10px;letter-spacing:.04em;color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){
  .st-home:hover,.st-nav-i:hover{background:var(--sunk);color:var(--ink)}
}
/* Выбранный раздел — белый корешок, вынутый из стопки: тёмная плашка
   второго уровня спорила бы с активным пунктом главного меню, а рёбрышко
   у края было бы третьим указателем поверх плашки и жирного текста. */
.st-home.on,.st-nav-i.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.st-group{margin-top:14px;display:flex;flex-direction:column;gap:1px}
.st-group>i{
  display:flex;align-items:center;gap:8px;padding:0 10px 6px;
  font-size:11px;font-style:normal;font-weight:500;
  color:var(--ink-3);
}
.st-group>i::after{content:"";flex:1;height:1px;background:var(--rule)}
/* Рабочее место — за пунктирной чертой и прижато книзу: это не раздел
   заведения, а настройка того, кто сидит за экраном. */
.st-group.me{margin-top:auto;padding-top:14px;border-top:1px dashed var(--rule)}
.st-group.me>i::after{display:none}
.st-nav-none{padding:12px 10px;font-size:11.5px;color:var(--ink-3)}

/* ── главная колонка ── */
.st-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}

/* ── плита ── */
.st-plate{
  position:relative;isolation:isolate;flex-shrink:0;
  background:var(--band);color:var(--band-ink);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .07);
  --band-ink-2:var(--plate-ink-2); --band-ink-3:var(--plate-ink-3);
  --o1x:8%; --o1y:-70%; --o2x:74%; --o2y:-60%; --o3x:-10%; --o3y:-30%;
  --st-ok:var(--plate-ok); --st-wait:var(--plate-wait); --st-late:var(--plate-late);
}
.st-plate > :not(.plate-lite){position:relative;z-index:1}
.st-face{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;padding:18px 26px 15px}
.st-of{flex:0 1 auto;margin-right:auto;min-width:0;max-width:48ch}
.st-of h2{font-size:24px;font-weight:600;letter-spacing:-.04em;line-height:1.05;color:var(--band-ink)}
.st-of>span{display:block;margin-top:7px;font-size:12.5px;line-height:1.45;color:var(--band-ink-2)}
.st-back{
  display:inline-flex;align-items:center;gap:4px;margin-bottom:8px;
  font-size:11.5px;color:var(--band-ink-2);transition:color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .st-back:hover{color:var(--band-ink)}
}

/* Показания: то, что раздел производит. Число крупно, подпись мелко,
   сменившееся число приходит снизу — так видно, что стрелка сдвинулась. */
.st-reads{
  flex:1 1 320px;min-width:0;display:flex;gap:22px 26px;flex-wrap:wrap;
  align-items:flex-end;justify-content:flex-end;
}
.st-read{min-width:0}
.st-read>i{
  display:block;font-size:11px;font-style:normal;font-weight:500;
  color:var(--band-ink-3);white-space:nowrap;
}
.st-read>b{
  display:block;margin-top:5px;font-size:20px;font-weight:600;
  letter-spacing:-.02em;line-height:1;color:var(--band-ink);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.st-read.text>b{
  white-space:normal;font-family:var(--font);font-size:15px;line-height:1.15;
  letter-spacing:-.02em;font-weight:600;max-width:24ch;
}
.st-read>span{display:block;margin-top:5px;font-size:11px;color:var(--band-ink-2);white-space:nowrap}
.st-read.ok>b{color:var(--st-ok)}
.st-read.wait>b{color:var(--st-wait)}
.st-read.late>b{color:var(--st-late)}
.st-read.tick>b{animation:stTick .32s var(--ease)}
@keyframes stTick{from{opacity:0;transform:translateY(7px)}}

/* ── бумага ── */
.st-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.st-scroll:focus{outline:none}
.st-body{padding:2px 30px 52px;max-width:800px;animation:stIn .19s var(--ease)}
.st-body.home{max-width:880px}
@keyframes stIn{from{opacity:0;transform:translateY(3px)}}

/* ── статья ── */
.st-art{padding-top:26px}
.st-art h3{
  display:flex;align-items:center;gap:9px;margin-bottom:4px;
  font-size:11px;font-weight:500;
  color:var(--ink-3);
}
.st-art h3::after{content:"";flex:1;height:1px;background:var(--rule)}
/* Пояснение к статье: почему этот кусок хозяйства устроен так. */
.st-note{font-size:12px;line-height:1.55;color:var(--ink-2);max-width:60ch;margin:9px 0 2px}
.st-note b{font-weight:600;color:var(--ink)}
.st-rows{margin-top:4px}

/* ── строка ── */
.st-row{
  display:flex;align-items:flex-start;gap:24px;padding:12px 0;
  border-bottom:1px solid var(--rule-2);border-radius:var(--r-sm);
}
.st-row:last-child{border-bottom:0}
.st-row.wide{flex-direction:column;align-items:stretch;gap:9px}
.st-row.wide .st-c{justify-content:flex-start;max-width:none}
.st-row.wide .st-t>span{max-width:none}
.st-t{flex:1;min-width:0}
.st-t>b{display:block;font-size:13px;font-weight:500;color:var(--ink);line-height:1.4}
/* Последствие — половина смысла строки: что изменится в этом заведении,
   с его числами. Без него настройку меняют наугад. */
.st-t>span{display:block;font-size:11.5px;line-height:1.5;color:var(--ink-3);margin-top:2px;max-width:54ch}
.st-t>span b{font-weight:500;letter-spacing:-.01em;color:var(--ink-2)}
.st-c{
  flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;
  min-height:24px;max-width:58%;
}
/* Строка, к которой пришли из поиска: вспышка бумаги, и гаснет. */
.st-row.flash{animation:stFlash 1.4s var(--ease)}
@keyframes stFlash{0%,35%{background:var(--sunk);box-shadow:0 0 0 6px var(--sunk)}100%{background:transparent;box-shadow:none}}

/* ── значения ──
   Вписанное на линейку, а не заключённое в коробку: тот же жест, что
   в бланке брони и в карточке гостя. Нажатие превращает линейку в поле. */
.st-val{
  display:inline-flex;align-items:center;gap:6px;padding:3px 0 4px;max-width:100%;
  border-bottom:1px solid var(--rule);font-size:13px;color:var(--ink);text-align:left;
  transition:border-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease);
}
.st-val svg{color:var(--ink-3);flex-shrink:0}
@media (hover:hover) and (pointer:fine){
  .st-val:hover{border-color:var(--ink)}
}
.st-val.empty{color:var(--ink-3)}
.st-val.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:-.02em}
.st-val.quiet{font-size:11px;color:var(--ink-3);border-bottom-color:transparent;padding:1px 0}
@media (hover:hover) and (pointer:fine){
  .st-val.quiet:hover{border-bottom-color:var(--rule)}
}
.st-num{
  display:inline-flex;align-items:baseline;gap:4px;padding:3px 0 4px;
  border-bottom:1px solid var(--rule);font-size:13.5px;
  letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;
  transition:border-color var(--t-tap) var(--ease);
}
.st-num b{font-weight:500}
.st-num u,.st-writing u{text-decoration:none;font-family:var(--font);font-size:11px;letter-spacing:0;color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){
  .st-num:hover{border-color:var(--ink)}
}
.st-writing{display:inline-flex;align-items:baseline;gap:4px;max-width:100%}
.st-write{
  width:22ch;max-width:100%;min-width:0;padding:3px 0 4px;margin:0;
  border:0;border-bottom:1px solid var(--ink);border-radius:0;
  background:linear-gradient(var(--sunk),var(--sunk)) no-repeat;background-size:100% calc(100% - 1px);
  font:inherit;font-size:13px;color:var(--ink);outline:none;
}
.st-write.mono{font-family:var(--mono);font-size:13.5px;letter-spacing:-.03em;width:9ch;text-align:right}
.st-write[type="number"]{-moz-appearance:textfield;appearance:textfield}
.st-write::-webkit-inner-spin-button,.st-write::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.st-write.add{width:100%;font-size:12px;margin:6px 12px;padding:5px 0}
/* Абзац на линейках бланка: текст, который ляжет на лист, стоит строками, и
   нажатие не двигает его — поле пишет на тех же линейках, только они темнеют. */
.st-para,.st-write.para{
  --st-lines:var(--rule-2);
  display:block;width:100%;max-width:64ch;margin:0;padding:0 0 1px;border:0;border-radius:0;
  font:inherit;font-size:13px;line-height:22px;color:var(--ink);text-align:left;
  background:repeating-linear-gradient(to bottom,transparent 0 21px,var(--st-lines) 21px 22px);
}
.st-para.empty{color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){
  .st-para:hover{--st-lines:var(--rule)}
}
.st-writing.para{display:block;width:100%}
.st-write.para{
  --st-lines:var(--ink-3);
  min-height:45px;resize:none;field-sizing:content;
  background:repeating-linear-gradient(to bottom,transparent 0 21px,var(--st-lines) 21px 22px),linear-gradient(var(--sunk),var(--sunk));
}
.st-fixed{font-size:12.5px;color:var(--ink-2);text-align:right}
.st-fixed.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:-.02em;color:var(--ink)}
.st-fixed.stop{font-size:12px;letter-spacing:0;color:var(--late)}
.st-link{
  display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-2);
  border-bottom:1px dotted var(--ink-3);padding:2px 0 3px;transition:color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .st-link:hover{color:var(--ink);border-bottom-style:solid}
}
.st-link svg{color:var(--ink-3)}
a.st-link{text-decoration:none}

/* Переключатель: отклик на нажатие, кнопка уезжает пружиной. */
.st-tgl{
  width:38px;height:22px;border-radius:var(--r-pill);background:var(--sunk);
  border:1px solid var(--rule);padding:0;position:relative;flex-shrink:0;
  transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.st-tgl i{
  position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--card);box-shadow:var(--sh-1);
  transition:transform .22s var(--ease),width .12s var(--ease);
}
.st-tgl.on{background:var(--accent);border-color:var(--accent)}
.st-tgl.on i{transform:translateX(16px)}
.st-tgl:active i{width:19px}
.st-tgl.on:active i{transform:translateX(13px)}
.st-tgl:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Выбор из немногих: все варианты видны сразу, лучше выпадашки. */
.st-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.st-seg button{
  padding:5px 10px;font-size:11.5px;color:var(--ink-2);background:var(--card);white-space:nowrap;
  transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease);
}
.st-seg button+button{border-left:1px solid var(--rule)}
@media (hover:hover) and (pointer:fine){
  .st-seg button:hover{background:var(--sunk);color:var(--ink)}
}
.st-seg button.on{background:var(--accent);color:var(--accent-ink)}
.st-seg button:disabled{cursor:default}
.st-seg button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.st-seg.small button{padding:3px 8px;font-size:10.5px}

.st-chips{display:flex;flex-wrap:wrap;gap:6px}
.st-chip{
  display:inline-flex;align-items:center;gap:2px;padding:4px 4px 4px 10px;
  border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);
  font-size:11.5px;color:var(--ink-2);white-space:nowrap;
}
.st-chips.still .st-chip{padding-right:10px}
.st-chip button{
  width:17px;height:17px;border-radius:50%;color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;transition:var(--t-tap) var(--ease);transition-property:color,background-color;
}
@media (hover:hover) and (pointer:fine){
  .st-chip button:hover{background:var(--sunk);color:var(--ink)}
}
.st-chip-add{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);
  border:1px dashed var(--rule);font-size:11.5px;color:var(--ink-2);transition:var(--t-tap) var(--ease);transition-property:color,border-color;
}
@media (hover:hover) and (pointer:fine){
  .st-chip-add:hover{border-color:var(--ink);border-style:solid;color:var(--ink)}
}
.st-chips .st-write.add{width:18ch;margin:0}

/* Пункты по одному в строке: правила, инструктаж, причины. */
.st-lines{list-style:none;margin:0;padding:0;width:100%;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.st-lines li{display:flex;align-items:center;gap:6px;padding-right:6px;border-top:1px solid var(--rule-2)}
.st-lines li:first-child{border-top:0}
.st-line{flex:1;min-width:0;text-align:left;padding:8px 12px;font-size:12.5px;line-height:1.45;color:var(--ink);transition:background-color var(--t-tap)}
@media (hover:hover) and (pointer:fine){
  .st-line:hover{background:var(--paper)}
}
.st-lines li.add{background:var(--paper);padding-right:0}
.st-lines .st-write.add{margin:0 12px;padding:8px 0;background:none;border-bottom:0}
.st-drop{
  width:22px;height:22px;flex-shrink:0;border-radius:50%;color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;transition:var(--t-tap) var(--ease);transition-property:color,background-color;
}
@media (hover:hover) and (pointer:fine){
  .st-drop:hover{background:var(--sunk);color:var(--ink)}
}

/* ── справочник ──
   Строки одной высоты и с одинаковыми колонками: читают по столбцу. */
.st-book{margin-top:8px;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--card)}
.st-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;text-align:left;
  border-top:1px solid var(--rule-2);transition:background-color var(--t-tap) var(--ease);
}
.st-item:first-child{border-top:0}
.st-item.go{cursor:pointer}
@media (hover:hover) and (pointer:fine){
  .st-item.go:hover{background:var(--paper)}
}
.st-item.off>b,.st-item.off>span,.st-item.off>u{color:var(--ink-3)}
.st-item.empty>span{color:var(--ink-3);font-size:12px}
.st-ico{width:15px;height:15px;flex-shrink:0;color:var(--ink-3);display:flex}
.st-ico.big{width:22px;height:22px;color:var(--ink);margin-right:8px}
.st-ico svg{width:100%;height:100%}
.st-item>b{font-size:12.5px;font-weight:500;color:var(--ink);flex-shrink:0;max-width:42%;display:flex;align-items:baseline}
.st-item>b .st-val{font-size:12.5px;font-weight:500}
.st-item>span{font-size:11px;color:var(--ink-3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-item>span .mono{font-family:var(--mono);letter-spacing:-.02em}
.st-item>u{
  text-decoration:none;font-size:12px;letter-spacing:-.01em;
  color:var(--ink-2);white-space:nowrap;flex-shrink:0;
}
.st-item>u .st-num{font-size:12px;padding:1px 0 2px}
.st-item>svg{color:var(--ink-3);flex-shrink:0}
@media (hover:hover) and (pointer:fine){
  .st-item.go:hover>svg{color:var(--ink)}
}
.st-add{
  display:flex;align-items:center;gap:6px;width:100%;padding:8px 12px;
  font-size:12px;color:var(--ink-2);background:var(--paper);border-top:1px solid var(--rule-2);transition:var(--t-tap) var(--ease);transition-property:color,background-color;
}
@media (hover:hover) and (pointer:fine){
  .st-add:hover{background:var(--sunk);color:var(--ink)}
}
.st-n{
  width:18px;height:18px;border-radius:50%;flex:0 0 18px;
  display:flex;align-items:center;justify-content:center;font-style:normal;
  background:var(--sunk);font-size:10px;color:var(--ink-2);
}
.st-on-now{font-style:normal;font-size:11px;color:var(--ok)}
.st-plan-h{margin:14px 0 -2px;font-size:11px;color:var(--ink-3)}
.st-plan-h:first-child{margin-top:8px}

/* Галка акции: включена или нет — это всё, что о ней решают здесь. */
.st-box{
  width:16px;height:16px;flex-shrink:0;border-radius:var(--r-xs);border:1px solid var(--rule);background:var(--card);
  display:flex;align-items:center;justify-content:center;transition:var(--t-tap) var(--ease);transition-property:background-color,border-color;color:var(--accent-ink);
}
.st-box.on{background:var(--accent);border-color:var(--accent)}

/* Маленькие переключатели в строке справочника: звезда, значок, стрелка. */
.st-fav,.st-glyph,.st-more{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:24px;height:24px;margin:-4px 0;border-radius:var(--r-sm);
  transition:color var(--t-tap) var(--ease),background-color var(--t-tap) var(--ease);
}
.st-fav{color:var(--ink-3)}
.st-fav svg path{fill:none;stroke:currentColor;stroke-width:1.6}
.st-fav.on svg path{fill:currentColor;stroke:none}
@media (hover:hover) and (pointer:fine){
  .st-fav:hover{background:var(--sunk);color:var(--ink)}
}
.st-fav.on{color:var(--ink)}
.st-glyph{color:var(--rule)}
.st-glyph.on{color:var(--ink)}
.st-more{color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){
  .st-more:hover{background:var(--sunk);color:var(--ink)}
}
.st-more svg{transition:transform var(--t-tap) var(--ease)}
.st-more.on svg{transform:rotate(90deg)}
.st-fav:focus-visible,.st-more:focus-visible,.st-box:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

/* Раскрытая строка: подробности услуги на её же бумаге, с отступом
   слева — так видно, к какой строке они относятся. */
.st-panel{padding:0 12px 6px 46px;background:var(--paper);border-top:1px solid var(--rule-2);animation:stIn .18s var(--ease)}
.st-panel .st-row{padding:9px 0;border-color:var(--rule)}
.st-glyphs{display:flex;flex-wrap:wrap;gap:3px}
.st-glyph-o{
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:var(--r-sm);color:var(--ink-3);background:var(--card);
  box-shadow:inset 0 0 0 1px var(--rule-2);transition:var(--t-tap) var(--ease);transition-property:color,background-color,box-shadow;
}
.st-glyph-o svg{width:15px;height:15px}
@media (hover:hover) and (pointer:fine){
  .st-glyph-o:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
}
.st-glyph-o.on{color:var(--accent-ink);background:var(--accent);box-shadow:none}
.st-glyph-o:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.st-ico.big+.st-glyphs{margin-top:8px;width:100%}
/* Кнопка внутри подписи: «задать», «вернуть» — слово, а не коробка. */
/* Таблица цен объекта: те же строки и столбцы, что в мастере. Своя клетка —
   число на линейке, считанная — серая, нажатие делает её своей. */
.st-tablewrap{overflow-x:auto;margin-top:6px}
.st-table{width:100%;border-collapse:collapse;font-size:12.5px}
.st-table th{padding:0 8px 6px 0;text-align:left;font-size:11px;font-weight:500;color:var(--ink-3);white-space:nowrap;vertical-align:bottom}
.st-table tbody th{padding:7px 10px 7px 0;font-size:12.5px;font-weight:550;color:var(--ink);border-top:1px solid var(--rule-2);vertical-align:middle}
.st-table tbody th small{display:block;font-size:10.5px;font-weight:400;color:var(--ink-3)}
.st-table td{padding:5px 8px 5px 0;border-top:1px solid var(--rule-2);vertical-align:middle;white-space:nowrap}
.st-table td .st-num{margin-right:6px}
.st-num.derived{border-bottom-style:dotted;color:var(--ink-3)}
.st-num.derived b{color:var(--ink-3);font-weight:500}
@media (hover:hover) and (pointer:fine){
  .st-num.derived:hover b{color:var(--ink)}
}
.st-cell-off{font-size:11px}
.st-bands{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.st-band{display:inline-flex;align-items:center;gap:8px;padding:4px 6px 4px 10px;border:1px solid var(--rule-2);border-radius:var(--r-sm);background:var(--paper);font-size:12.5px;color:var(--ink-2)}
.st-band em{font-style:normal}
.st-days{display:flex;flex-direction:column;gap:8px;width:100%}
.st-dayrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 10px;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--paper)}
.st-dayrow .st-drop{margin-left:auto}
.st-dayrow-h{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}

/* Для каких объектов: «для всех» и объекты плашками; пустой выбор — для всех. */
.st-pick{display:flex;flex-wrap:wrap;gap:4px}
.st-pick-b{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--rule-2);border-radius:var(--r-pill);
  background:var(--card);font-size:12px;color:var(--ink-2);transition:border-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease),background-color var(--t-tap) var(--ease);
}
.st-pick-b i{display:flex;color:var(--ink-3)}
.st-pick-b i svg{width:13px;height:13px}
.st-pick-b.on{border-color:var(--ink);color:var(--ink);background:var(--paper)}
.st-pick-b.on i{color:var(--ink)}
.st-pick-b:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
@media (hover:hover) and (pointer:fine){
  .st-pick-b:not(.on):hover{border-color:var(--ink-3);color:var(--ink)}
}
.st-put.st-inline{font:inherit;color:var(--ink);border-bottom:1px dotted var(--ink-3)}
@media (hover:hover) and (pointer:fine){
  .st-put.st-inline:hover{border-bottom-style:solid}
}

/* Тона меток: шесть, и выбранный обведён, а не увеличен. */
.st-tones{display:flex;gap:5px;flex-shrink:0}
.st-tone{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .08);transition:transform var(--t-tap) var(--ease)}
.st-tone.t1{background:var(--tag-1-bg)} .st-tone.t2{background:var(--tag-2-bg)} .st-tone.t3{background:var(--tag-3-bg)}
.st-tone.t4{background:var(--tag-4-bg)} .st-tone.t5{background:var(--tag-5-bg)} .st-tone.t6{background:var(--tag-6-bg)}
@media (hover:hover) and (pointer:fine){
  .st-tone:hover{transform:scale(1.12)}
}
.st-tone.on{outline:2px solid var(--ink);outline-offset:1px}
.st-tag{
  display:inline-block;flex-shrink:0;padding:2px 8px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;max-width:14ch;
  overflow:hidden;text-overflow:ellipsis;
}
.st-tag.t1{background:var(--tag-1-bg);color:var(--tag-1-ink)} .st-tag.t2{background:var(--tag-2-bg);color:var(--tag-2-ink)}
.st-tag.t3{background:var(--tag-3-bg);color:var(--tag-3-ink)} .st-tag.t4{background:var(--tag-4-bg);color:var(--tag-4-ink)}
.st-tag.t5{background:var(--tag-5-bg);color:var(--tag-5-ink)} .st-tag.t6{background:var(--tag-6-bg);color:var(--tag-6-ink)}
.st-av{
  width:22px;height:22px;flex-shrink:0;border-radius:var(--r-sm);background:var(--av-1);color:var(--av-ink);
  display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:500;font-style:normal;
}
.st-me{font-style:normal;font-size:10px;color:var(--ink-3);margin-left:6px}
/* Код входа в профиль (SPEC §4.1): клетки те же, что в окне профилей
   (profile-menu.css), только в шкале строки настроек; пароль — полем. */
.st-pin{display:flex;align-items:center;gap:14px}
.st-pin .pin-cells{gap:6px}
.st-pin .pin-cell{width:32px;height:36px;border-radius:var(--r-sm)}
.st-pin .pin-cell::after{width:7px;height:7px}
.st-pin .pin-cells.is-six .pin-cell:nth-child(4){margin-left:8px}
.st-pass{
  width:190px;height:32px;padding:0 10px;border-radius:var(--r-sm);
  border:1px solid var(--rule);background:var(--card);color:var(--ink);
  font:inherit;font-size:13px;letter-spacing:.03em;
}
.st-pass::placeholder{color:var(--ink-3);letter-spacing:0}
.st-pass:focus{outline:none;border-color:var(--ink-2)}
/* Юрлицо в справочнике «Документов»: чего не хватает и что всё проверено. */
.st-need{font-style:normal;color:var(--wait)}
.st-ready{font-style:normal;color:var(--ok)}
/* Серия нумерации: префикс и следующий номер на одной линейке. */
.st-series{display:inline-flex;align-items:baseline;gap:12px}
.st-logo{display:inline-flex;align-items:center;gap:8px;color:var(--ink-3)}
.st-logo img{width:28px;height:28px;border-radius:var(--r-sm);background:var(--paper)}
.st-logo em{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.st-yes{color:var(--ok);display:flex}
.st-no{color:var(--ink-3);display:flex}

/* ── предпросмотр цены ──
   Набран как расчёт в бланке — теми же колонками. */
.st-prev{margin-top:8px;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);padding:12px 14px 11px}
.st-prev-h{display:flex;align-items:baseline;gap:9px;margin-bottom:8px}
.st-prev-h b{font-size:13px;font-weight:600;letter-spacing:-.02em}
.st-prev-h span{font-size:11px;color:var(--ink-3)}
.st-prev-l{display:flex;align-items:baseline;gap:10px;padding:4px 0;font-size:12px;color:var(--ink-2)}
.st-prev-l em{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.st-prev-l b{margin-left:auto;font-size:12.5px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.st-prev-l.sum{margin-top:5px;padding-top:8px;border-top:1px solid var(--rule);color:var(--ink)}
.st-prev-l.sum span{font-weight:600;font-size:12.5px}
.st-prev-l.sum b{font-size:15px}
.st-prev-l.pre span{color:var(--ink-2)}

/* Противоречие в настройках: тон предупреждения, а не ошибки. */
.st-warn{margin-top:8px;display:flex;flex-direction:column;gap:7px}
.st-warn p{
  display:flex;gap:8px;align-items:flex-start;padding:9px 11px;border-radius:var(--r);
  background:var(--wait-bg);border:1px solid var(--wait-line);font-size:11.5px;line-height:1.5;color:var(--wait-ink);
}
.st-warn svg{flex-shrink:0;color:var(--wait);margin-top:1px}

/* Загрузка нарисована честно: обещание, которого не выполнят, дороже
   отсутствующей возможности. */
.st-drop-zone{
  display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;
  padding:16px 12px;text-align:center;border:1.5px dashed var(--rule);border-radius:var(--r);background:var(--paper);
}
.st-drop-zone i{display:flex;color:var(--ink-3)}
.st-drop-zone b{font-size:12px;font-weight:500;color:var(--ink-2)}
.st-drop-zone em{font-style:normal;font-size:10.5px;color:var(--ink-3)}
.st-code{
  display:block;width:100%;padding:9px 12px;border-radius:var(--r);background:var(--paper);border:1px solid var(--rule-2);
  font-family:var(--mono);font-size:11px;letter-spacing:-.02em;color:var(--ink-2);white-space:pre-wrap;word-break:break-all;
}

/* Помощник: ключ вводят целиком, в поле, а не на линейке. */
.st-ai{display:flex;flex-direction:column;gap:8px;width:100%}
.st-ai label{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink-3)}
.st-ai label span{width:56px;flex-shrink:0}
.st-inp{
  flex:1;min-width:0;height:30px;padding:0 10px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--card);font:inherit;font-size:12.5px;color:var(--ink);
}
.st-inp.mono{font-family:var(--mono);letter-spacing:-.02em}
.st-inp:focus{outline:none;border-color:var(--ink)}
.st-ai-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.st-ai-state{font-style:normal;font-size:11px;color:var(--ink-3)}
.st-ai-state.on{color:var(--ok)}

/* ── опись ──
   Оглавление регламента: раздел, отточие, что в нём стоит. */
.st-toc{padding-top:26px}
.st-toc h3{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.st-toc h3 span{font-size:11.5px;font-weight:400;color:var(--ink-3)}
.st-toc-i{
  display:flex;align-items:baseline;gap:10px;width:calc(100% + 16px);margin:0 -8px;padding:9px 8px;
  border-radius:var(--r-sm);text-align:left;transition:background-color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .st-toc-i:hover{background:var(--paper)}
}
.st-toc-i b{font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}
.st-toc-i i{flex:1;min-width:24px;border-bottom:1px dotted var(--rule);transform:translateY(-4px)}
.st-toc-i span{
  font-size:11.5px;color:var(--ink-2);text-align:right;max-width:60%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.st-toc-i svg{color:var(--ink-3);flex-shrink:0;align-self:center}
@media (hover:hover) and (pointer:fine){
  .st-toc-i:hover svg{color:var(--ink)}
}
.st-toc.me{margin-top:8px;padding-top:22px;border-top:1px dashed var(--rule)}

/* ── поиск ── */
.st-found-g{padding-top:22px}
.st-found-g h3{display:flex;align-items:baseline;gap:8px;margin-bottom:2px;font-size:12px;font-weight:600;color:var(--ink)}
.st-found-g h3 span{font-weight:400;font-size:11px;color:var(--ink-3)}
.st-hit{
  display:flex;align-items:center;gap:10px;width:calc(100% + 16px);margin:0 -8px;padding:8px;
  border-radius:var(--r-sm);text-align:left;transition:background-color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .st-hit:hover{background:var(--paper)}
}
.st-hit b{font-size:12.5px;font-weight:500;color:var(--ink);flex-shrink:0;max-width:50%}
.st-hit span{flex:1;min-width:0;font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-hit svg{color:var(--ink-3);flex-shrink:0}
.st-hit.whole b{font-weight:600}

/* ── узкий экран ──
   Корешки становятся полосой над страницей: порядок «сначала выбрал
   раздел, потом читаешь» не меняется. */
@media (max-width:900px){
  .st{flex-direction:column}
  .st-side{width:auto;border-right:0;border-bottom:1px solid var(--rule)}
  .st-groups{flex-direction:row;align-items:center;gap:8px;overflow-x:auto;padding:0 12px 10px}
  .st-home{margin:0;white-space:nowrap}
  .st-home span{display:none}
  .st-group{flex-direction:row;gap:2px;margin:0;flex-shrink:0}
  .st-group>i{display:none}
  .st-group.me{margin:0;padding:0 0 0 8px;border-top:0;border-left:1px dashed var(--rule)}
  .st-nav-i{white-space:nowrap;padding:6px 9px}
  .st-face{padding:14px 16px 12px;gap:18px}
  .st-of h2{font-size:20px}
  .st-body{padding:0 16px 40px}
  .st-row{flex-direction:column;gap:8px;align-items:stretch}
  .st-c{justify-content:flex-start;max-width:none}
  .st-t>span{max-width:none}
  .st-toc-i{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:center}
  .st-toc-i i{display:none}
  .st-toc-i span{grid-column:1 / -1;max-width:none;text-align:left;white-space:normal}
  .st-panel{padding-left:12px}
}
@media (prefers-reduced-motion:reduce){
  .st-body,.st-panel,.st-read.tick>b{animation:none}
  .st-row.flash{animation:stFlashStill 1.4s}
  .st-tgl,.st-tgl i,.st-tone{transition:none}
}
@keyframes stFlashStill{0%,60%{background:var(--sunk)}100%{background:transparent}}