/* ═══════════ Навигация: светлая и тихая ═══════════ */
.side{
  position:relative;z-index:22;
  width:214px;flex-shrink:0;background:var(--paper);
  transition:width var(--t-move) var(--ease),var(--theme-fade);
  border-right:1px solid var(--rule);
  display:flex;flex-direction:column;padding:14px 9px 10px;
  /* На низком экране колонка прокручивается целиком: иначе смена и пользователь
     уходили под нижний край и до них было не достать. */
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
}
.side::-webkit-scrollbar{display:none}
/* Один левый край у всей колонки: у бренда, поиска и пунктов он
   различался на пару пикселей, и список читался чуть расшатанным. */
.brand{
  display:flex;align-items:flex-start;gap:8px;padding:0 8px 12px;
  margin:0 0 12px;border-bottom:1px solid var(--rule);
}
/* Сам lockup и его сетка — в styles/lockup.css: он стоит теперь в трёх
   местах, и числа у него общие. Здесь остаётся только раскладка колонки. */
.brand-lockup{
  min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:0;
  color:var(--ink);
}
/* Имя объекта — единственная строка в колонке, отвечающая «где я»;
   в мультиарендном продукте (SPEC §3.2) это рабочая информация, а не
   подпись. Прежние 9 px цветом --ink-3 давали 2.6:1 — хуже всего в
   продукте; 10.5 px цветом --ink-2 дают 6.4:1. */
/* Имя площадки начинается под wordmark, а не под дятлом: тот же отступ,
   что и у чернил слова, из той же сетки. */
.brand-venue{
  display:block;max-width:calc(100% - var(--lockup-word));
  margin:1px 0 0 var(--lockup-word);
  font-size:10.5px;line-height:1.25;letter-spacing:.01em;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.search{
  display:flex;align-items:center;gap:8px;width:100%;
  margin:0 0 14px;padding:7px 8px;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--ink-3);font-size:11.5px;transition:var(--t-tap) var(--ease);transition-property:color,border-color;
}
@media (hover:hover) and (pointer:fine){
  .search:hover{border-color:var(--ink-3);color:var(--ink-2)}
}
.search-ph{font-size:11px;letter-spacing:0}
.search .sp{margin-left:auto;display:flex;gap:2px}
.search kbd{
  font-size:10px;padding:1px 4px;border-radius:var(--r-xs);
  background:var(--sunk);color:var(--ink-3);
}

.nav-label{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:500;
  color:var(--ink-3);padding:0 8px;margin:14px 0 6px;
}
.nav-label::after{content:"";flex:1;height:1px;background:var(--rule)}
.nav{display:flex;flex-direction:column;gap:1px}
/* Настройки — одним пунктом, и подпись над ним была бы лишней строкой:
   от работы их отделяет черта. */
.nav[data-nav-group="setup"]{margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 8px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  cursor:pointer;transition:var(--t-tap) var(--ease);transition-property:color,background-color,box-shadow,opacity;position:relative;
}
@media (hover:hover) and (pointer:fine){
  .nav-item:hover{background:var(--sunk);color:var(--ink)}
}
.nav-item.on{background:var(--accent);color:var(--accent-ink);font-weight:550}
.nav-item svg{width:15px;height:15px;flex-shrink:0;opacity:.7;stroke-width:1.8}
.nav-item.on svg{opacity:1}
.badge-n{
  margin-left:auto;font-size:10.5px;font-weight:500;
  letter-spacing:-.01em;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
@media (hover:hover) and (pointer:fine){
  .nav-item:hover .badge-n{color:var(--ink-2)}
}
.nav-item.on .badge-n{color:rgba(237,234,227,.6)}


/* очередь смены: чем занят ближайший час — стоячий контекст,
   а не второй календарь. Время табличными цифрами, как на линейке. */
.upnext{display:flex;flex-direction:column;gap:1px}
.up{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:5.5px 8px;border-radius:var(--r-sm);
  text-align:left;transition:var(--t-tap) var(--ease);transition-property:color,background-color;
}
@media (hover:hover) and (pointer:fine){
  .up:hover{background:var(--sunk)}
}
.up b{
  font-size:11.5px;font-weight:500;
  letter-spacing:-.02em;color:var(--ink);flex-shrink:0;
}
.up span{
  font-size:11px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.up i{
  width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-left:auto;
  background:var(--wait);
}
.side-foot{margin-top:auto;padding-top:14px}
.side-foot .nav-label{margin-top:0}
.side-foot .upnext{margin-bottom:12px}
/* ── смена ──
   Единственный прибор в тихой колонке. Показывать её списком фактов
   незачем: важно одно — сколько ещё стоять. Поэтому остаток набран крупно,
   а границы смены ушли в подписи под полосой. Полоса
   говорит на языке линейки календаря: пройденное залито, «сейчас» —
   тонкая красная черта.

   Плашки у блока нет. Белая карточка с рамкой и тенью была в колонке
   плоских строк единственным предметом из другого интерфейса, и держалась
   на нём вся «виджетность» блока. Держится он теперь не рамкой, а тем же,
   чем держится меню: общим левым краем, тихим заголовком с
   волосяной линией и ритмом отступов. */
.shift{padding:0 8px}

/* Заголовок — тот же приём, что у «Работы» и «Настройки»: линия тянется
   от слова до метки состояния, и раздел читается как третий в колонке. */
.shift-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.shift-top b{
  font-size:11px;font-weight:500;
  color:var(--ink-3);
}
.shift-top s{flex:1;height:1px;background:var(--rule);text-decoration:none}
.dot-live{display:flex;align-items:center;gap:4.5px;font-size:10px;color:var(--ok);font-weight:550}
.dot-live i{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2.5px var(--ok-bg)}

.shift-left{display:flex;align-items:baseline;gap:6px;margin-bottom:9px}
.shift-left span{font-size:10.5px;letter-spacing:-.01em;color:var(--ink-3)}
.shift-left b{
  font-size:17px;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
/* Единицы тише цифр: иначе «ч» и «мин» весят как число. */
.shift-left b i{
  font-family:var(--font);font-size:9.5px;font-style:normal;font-weight:500;
  letter-spacing:0;color:var(--ink-3);margin:0 5px 0 2.5px;
}
.shift-left b i:last-child{margin-right:0}

/* Без белой подложки полоса лежит прямо на бумаге, и прежнее дно на ней
   терялось: у --sunk и --paper разница в шесть единиц яркости. Дно взято
   темнее, а деления — тише дна: светлыми они рвали полосу на четыре
   таблетки, и она переставала читаться как одна шкала. */
.shift-bar{
  position:relative;height:6px;border-radius:var(--r-pill);
  background:var(--shift-track) repeating-linear-gradient(90deg,
    rgba(var(--ink-rgb),.11) 0 1px, transparent 1px 25%);
}
.shift-past{
  position:absolute;left:0;top:0;bottom:0;width:var(--past,0%);
  border-radius:var(--r-xs);background:var(--band);
}
/* «Сейчас» тем же знаком, что и в шахматке: черта, а не точка. Она
   выходит за полосу сверху и снизу — внутри полосы её съедала заливка
   пройденного, у края которой она и стоит. */
.shift-now{
  position:absolute;left:var(--past,0%);top:-3px;bottom:-3px;
  width:1.5px;margin-left:-.75px;border-radius:1px;background:var(--now);
}
.shift-ends{
  display:flex;justify-content:space-between;margin-top:7px;
  font-size:10px;font-weight:500;letter-spacing:0;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}

/* Кружки отделены воздухом, а не второй чертой: без внешней рамки две
   линии подряд дробили бы блок на части. В 22 px две буквы занимают весь
   диаметр, поэтому кружки не наезжают друг на друга — любой нахлёст
   съедал бы вторую букву. */
.stack{display:flex;gap:4px;margin-top:14px}
.stack .av{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:600;color:var(--av-ink);
}
.stack .av.more{
  background:var(--sunk);color:var(--ink-3);
  font-weight:500;letter-spacing:-.02em;
}

.side-user{
  display:flex;align-items:center;gap:9px;padding:8px;
  margin-top:11px;padding-top:12px;border-top:1px solid var(--rule);
  cursor:pointer;transition:var(--t-tap) var(--ease);transition-property:background-color;
}
@media (hover:hover) and (pointer:fine){
  .side-user:hover{background:var(--sunk)}
}
.side-user .av{
  width:27px;height:27px;border-radius:50%;flex-shrink:0;
  background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;
}
.side-user b{display:block;font-size:11.5px;font-weight:550;line-height:1.25}
.side-user span{display:block;font-size:10px;color:var(--ink-2)}
/* Свой код — рядом с ролью, одной строкой: это про то же самое, «кто я
   в этой программе». Отдельной строки он не заслуживает, но и прятать
   его нельзя — за ним идут, когда пишут в поддержку. */
.side-who{display:flex;align-items:center;gap:8px;margin-top:1px;min-width:0}
/* Роль и код разделяет воздух, а не точка: код и так отличается набором
   и рамкой при наведении. Отступ шире обычного, потому что кнопка кода
   своими полями заходит на него. */
.side-who>span{font-size:10px;color:var(--ink-2);flex-shrink:0}
.side-code{
  display:block;padding:1px 4px;margin:0 -4px;border-radius:var(--r-xs);
  border:1px solid transparent;background:none;text-align:left;
  font-family:var(--mono);font-size:9.5px;letter-spacing:-.01em;color:var(--ink-2);
  transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color;
}
@media (hover:hover) and (pointer:fine){
  .side-code:hover{border-color:var(--rule);background:var(--card);color:var(--ink)}
}
.side-code:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.side-code.done{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok)}
.rail .side-who{display:none}

/* ── Свёрнутое меню ────────────────────────────────────────
   Сворачивается не в ноль, а в полосу значков: навигация остаётся
   под рукой, а шахматке достаётся ещё полторы сотни пикселей —
   это почти целые сутки в недельном масштабе. */
.brand .side-toggle{margin-top:2.5px}
.side-toggle{
  margin-left:auto;width:26px;height:26px;flex-shrink:0;
  border-radius:var(--r-sm);color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;transition:var(--t-tap) var(--ease);transition-property:color,background-color;
}
.side-toggle svg{width:15px;height:15px}
@media (hover:hover) and (pointer:fine){
  .side-toggle:hover{background:var(--sunk);color:var(--ink)}
}

.rail .side{width:60px;padding-left:8px;padding-right:8px;overflow:hidden}
/* В полосе значков блок разворачивается в колонку, и flex-start из
   развёрнутого вида прижимал бы знак и кнопку к левому краю. */
.rail .brand{flex-direction:column;align-items:center;gap:8px;padding:2px 0 12px;margin:0 0 10px}
.rail .brand-venue,
.rail .nav-t,
.rail .nav-label,
.rail .search .search-ph,
.rail .search .sp,
.rail .shift,
.rail .side-user > div:not(.av){display:none}
/* Сжимается lockup меню, а не всякий на странице: тот же знак стоит
   теперь на экране сборки, и неприбитые селекторы забирали и его. */
.rail .brand-lockup{--lockup-w:99px;width:34px;flex:0 0 auto;overflow:visible;align-items:center}
.rail .brand-lockup .brand-logo-frame{width:34px;height:45px}
.rail .brand-lockup .brand-lockup-image{width:99px}
.rail .brand-lockup .brand-mark-image{width:34px}
.rail .brand-lockup .brand-wordmark-image{display:none!important}
.rail .brand-word-target{display:none}
.rail .search{justify-content:center;padding:6.5px 0}
.rail .nav-item{justify-content:center;padding:7px 0}
.rail .nav-item svg{margin:0}
/* счётчик в полосе значков превращается в точку: числу там нет места */
.rail .badge-n{
  position:absolute;top:4px;right:8px;min-width:0;width:6px;height:6px;
  padding:0;border-radius:50%;font-size:0;background:var(--ink-3);
}
.rail .nav-item{position:relative}
.rail .nav-item.on .badge-n{background:var(--band-ink)}
.rail .side-user{justify-content:center;padding:5px 0}
.rail .side-foot{padding-top:8px}
.rail .side-toggle{margin:0}

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

   Движение здесь служебное: строка идёт за указателем 1:1, соседи
   расступаются заранее и садятся на места затухающей кривой без
   перелёта — перелёт уместен там, где был бросок, а список не бросают. */
.side{--nav-move:220ms; --nav-ease:cubic-bezier(.2,.8,.2,1)}
/* Перенос трогает только transform, поэтому у него своя длительность:
   общая .13s для цвета годится, для переезда строки — коротка. */
.nav-item{
  touch-action:none;
  transition:background-color .13s var(--ease), color .13s var(--ease),
    box-shadow .13s var(--ease), opacity .16s var(--ease),
    transform var(--nav-move) var(--nav-ease);
}
/* Взятая строка приподнята над листом: тень и едва заметный масштаб —
   ровно столько, чтобы стало ясно, что она в руке. */
.nav-item.is-lift{
  z-index:3;transform-origin:50% 50%;box-shadow:var(--sh-2);
  background:var(--card);color:var(--ink);
  transition:box-shadow .12s var(--ease), background-color .12s var(--ease);
}
.nav-item.is-lift.on{background:var(--accent);color:var(--accent-ink)}
.side.is-dragging .nav-item{cursor:grabbing}
@media (hover:hover) and (pointer:fine){
  .side.is-dragging .nav-item:hover{background:none}
  .side.is-dragging .nav-item.is-lift:hover{background:var(--card)}
  .side.is-dragging .nav-item.is-lift.on:hover{background:var(--accent)}
}

/* Убранного в меню нет. Видно его только в режиме настройки — бледным и
   на своём месте: так понятно, что именно спрятано и куда оно вернётся. */
.nav-item.is-off{display:none}
.side.is-editing .nav-item.is-off{display:flex;opacity:.42}
@media (hover:hover) and (pointer:fine){
  .side.is-editing .nav-item.is-off:hover{opacity:.7}
}

/* В режиме настройки строки читаются подвижными плитками: волосяная
   рамка внутрь, без сдвига раскладки — сдвиг сбил бы шаг переноса. */
.side.is-editing .nav-item{box-shadow:inset 0 0 0 1px var(--rule-2);cursor:grab}
.side.is-editing .nav-item:active{cursor:grabbing}
.side.is-editing .badge-n{display:none}
.side.is-editing .nav-item:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* Знак «видно ли»: глаз у обычного пункта, точка у дома. Появляется
   только в настройке — в работе меню остаётся тихим. */
.nav-mark{display:none;margin-left:auto;align-items:center;color:var(--ink-3)}
.nav-mark svg{width:14px;height:14px;stroke-width:1.9;opacity:1}
.side.is-editing .nav-mark{display:flex}
.nav-mark .eye-off,.nav-mark .nav-pin{display:none}
.nav-item.is-off .nav-mark .eye-on{display:none}
.nav-item.is-off .nav-mark .eye-off{display:flex}
.nav-item.is-fixed .nav-mark .eye-on,.nav-item.is-fixed .nav-mark .eye-off{display:none}
.nav-item.is-fixed .nav-mark .nav-pin{
  display:block;width:5px;height:5px;margin:0 4px;border-radius:50%;
  background:currentColor;opacity:.5;
}
.nav-item.on .nav-mark{color:rgba(237,234,227,.75)}

/* Отказ: дом из меню не убирают, и на попытку он отвечает коротким
   движением — как запертая дверь, а не молчанием. */
.nav-item.is-no{animation:navNo 400ms cubic-bezier(.36,.07,.19,.97)}
@keyframes navNo{
  0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}
  45%{transform:translateX(3px)}70%{transform:translateX(-2px)}85%{transform:translateX(1px)}
}

/* Подсказка живёт только в настройке и говорит ровно два действия. */
.nav-hint{
  display:none;margin:10px 8px 0;font-size:10.5px;line-height:1.45;color:var(--ink-3);
}
.side.is-editing .nav-hint{display:block;animation:navHint 240ms var(--nav-ease) both}
@keyframes navHint{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* Кнопка настройки — тихая строка под списками, не пункт меню: у неё нет
   своего экрана, она меняет само меню. */
.nav-edit{
  display:flex;align-items:center;gap:8px;width:100%;margin-top:10px;
  padding:6px 8px;border-radius:var(--r-sm);
  color:var(--ink-3);font-size:11px;font-weight:500;text-align:left;
  transition:background-color .13s var(--ease), color .13s var(--ease);
}
.nav-edit svg{width:14px;height:14px;flex-shrink:0;opacity:.8}
@media (hover:hover) and (pointer:fine){
  .nav-edit:hover{background:var(--sunk);color:var(--ink-2)}
}
.nav-edit.on{background:var(--accent);color:var(--accent-ink)}
.nav-edit.on svg{opacity:1}
.nav-edit-n{
  margin-left:auto;font-style:normal;font-size:10px;
  padding:1px 5px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-3);
}
.nav-edit-n:empty{display:none}

/* В полосе значков настраивать нечего: подписей нет, подсказку ставить
   некуда. Порядок при этом остаётся — он тот же самый. */
.rail .nav-hint,.rail .nav-edit{display:none}
.rail .nav-mark{display:none}

@media (prefers-reduced-motion:reduce){
  .nav-item{transition:background-color .13s var(--ease), color .13s var(--ease)}
  .nav-item.is-no{animation:none}
  .side.is-editing .nav-hint{animation:none}
}

/* ── телефон: колонка становится нижней панелью ──────────
   На ширине до 720 px меню — пять пунктов в ряд у нижнего края:
   Календарь, Брони, Задачи, Гости и «Ещё». Остальное — бренд, поиск,
   настройка, смена — прячется и возвращается листом снизу по «Ещё».
   Порядок пунктов тот же, что в колонке: его переставляют там же. */
/* ── низкий экран ноутбука ──
   Плотность адаптивная (SPEC §8.3): на высоком экране колонка воздушная, на
   ноутбуке она ужимает отступы, а не прячет пункты, и влезает целиком вместе
   со сменой и пользователем. */
@media (max-height:820px) and (min-width:721px){
  .brand{padding-bottom:10px;margin-bottom:10px}
  .search{margin-bottom:10px}
  .nav-label{margin:10px 0 4px}
  .nav-item{padding:6px 8px}
  .nav[data-nav-group="setup"]{margin-top:6px;padding-top:6px}
  .nav-edit{margin-top:6px}
  .side-foot{padding-top:10px}
  .stack{margin-top:10px}
  .side-user{margin-top:8px;padding-top:9px}
}

.side-more{display:none}
@media (max-width:720px){
  .app{flex-direction:column;height:100dvh}
  .main{order:1}
  .side,.rail .side{
    order:2;width:auto;height:auto;flex-direction:row;align-items:stretch;gap:0;
    padding:4px 6px calc(4px + env(safe-area-inset-bottom));
    border-right:none;border-top:1px solid var(--rule);
    transition:none;overflow:visible;
  }
  .side .brand,.side .search,.side .nav-label,.side .nav-hint,.side .nav-edit,
  .side .side-foot,.side .nav[data-nav-group="setup"]{display:none}
  .side .nav[data-nav-group="work"]{flex:1;flex-direction:row;justify-content:space-around;gap:0}
  /* Пять мест в ряду: остальные пункты ждут в листе «Ещё». `:where` держит
     вес правила низким, чтобы лист мог их показать. */
  .side .nav[data-nav-group="work"] .nav-item:where(:not([data-nav="calendar"]):not([data-nav="bookings"]):not([data-nav="tasks"]):not([data-nav="guests"])){display:none}
  .side .nav-item,.side-more{
    position:relative;flex-direction:column;justify-content:center;gap:3px;
    min-width:56px;min-height:48px;padding:5px 4px;border-radius:var(--r);
    font-size:10px;font-weight:500;letter-spacing:0;color:var(--ink-2);
  }
  .side .nav-item svg,.side-more svg{width:20px;height:20px;stroke-width:1.7;opacity:.85}
  .side .nav-item .nav-t,.side-more .nav-t{display:block}
  .side .badge-n{position:absolute;top:3px;right:9px;margin:0;font-size:9px}
  .side .nav-item.on .badge-n{color:rgba(237,234,227,.7)}
  .side-more{display:flex;flex:0 0 auto}
  @media (hover:hover) and (pointer:fine){
    .side-more:hover{background:var(--sunk);color:var(--ink)}
  }
  body.side-open .side-more{background:var(--accent);color:var(--accent-ink)}
  /* Шапка теряет показания: приборной панели на телефоне негде стоять,
     а «Сегодня» и «Ждут оплату» есть на плите броней. */
  .top .gauges{display:none}

  /* «Ещё»: всё меню листом снизу. Пять пунктов панели остаются на своих
     местах, остальное разворачивается над ними. */
  body.side-open .side{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    max-height:min(86dvh, 640px);flex-direction:column;align-items:stretch;
    padding:12px 10px calc(8px + env(safe-area-inset-bottom));
    border-top:1px solid var(--rule);border-radius:var(--r-xl) var(--r-xl) 0 0;
    box-shadow:0 -12px 40px rgb(25 24 21 / .18);overflow-y:auto;
  }
  body.side-open::after{content:"";position:fixed;inset:0;z-index:39;background:rgb(25 24 21 / .38)}
  body.side-open .side .brand,body.side-open .side .side-foot{display:block}
  body.side-open .side .brand{display:flex}
  body.side-open .side .search,body.side-open .side .nav-label{display:flex}
  body.side-open .side .nav[data-nav-group="setup"]{display:flex}
  body.side-open .side .nav{flex-direction:column;justify-content:flex-start;gap:1px;flex:0 0 auto}
  body.side-open .side .nav .nav-item{display:flex;flex-direction:row;justify-content:flex-start;gap:10px;min-height:44px;padding:7px 8px;font-size:13px}
  body.side-open .side .nav .nav-item.is-off{display:none}
  body.side-open .side.is-editing .nav .nav-item.is-off{display:flex}
  body.side-open .side .nav-item svg{width:16px;height:16px}
  body.side-open .side .badge-n{position:static;margin-left:auto;font-size:10px}
  body.side-open .side .nav-edit,body.side-open .side .nav-hint{display:flex}
  body.side-open .side .nav-hint{display:none}
  body.side-open .side .side-toggle{display:none}
  /* В раскрытом листе «Ещё» не нужна: закрывают пунктом, нажатием мимо
     или Escape. Наверху — ручка, как у любого листа снизу. */
  body.side-open .side-more{display:none}
  body.side-open .side::before{
    content:"";display:block;flex-shrink:0;width:36px;height:4px;margin:0 auto 10px;
    border-radius:var(--r-pill);background:var(--rule);
  }
}