/*
  Оболочка команды и лента проекта (заход B). Подключается после app.css на каждой странице:
  дополняет рейку (поиск, счётчик «Входящих», «Доска») и нижнюю панель (четыре пункта),
  рисует ленту из 30 клеток. Цвета — только токены.
*/

/* --- Рейка: поиск ---------------------------------------------------------------------- */
.rail-search {
  display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0 0 var(--space-3);
  padding: 0 12px; background: var(--color-surface);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-m);
  color: var(--color-text-muted);
}
.rail-search:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rail-search .icon { width: 18px; height: 18px; flex: none; }
/* Поле глобально оформлено цепочкой :not(...) в app.css — тут та же цепочка, чтобы перебить. */
.rail-search .rail-search__input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]) {
  flex: 1; min-width: 0; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0;
  background: none; box-shadow: none; outline: 0; color: var(--color-text); font: inherit;
  font-size: var(--text-s); appearance: none; border-radius: 0;
}
.rail-search .rail-search__input::placeholder { color: var(--color-text-muted); opacity: 1; }
.rail-search kbd {
  flex: none; font: inherit; font-size: var(--text-xs); color: var(--color-text-muted);
}

/* --- Рейка: счётчик «Входящих» ---------------------------------------------------------- */
.rail__count {
  margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: 11px; text-align: center;
  background: var(--st-revisions); color: var(--st-revisions-text);
  font-size: var(--text-xs); font-weight: 700; line-height: 22px;
}

/* --- Нижняя панель: четыре пункта ------------------------------------------------------- */
.bottom-nav__list { grid-template-columns: repeat(4, 1fr); }
.bottom-nav__dot {
  position: absolute; top: 4px; left: calc(50% + 4px); min-width: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--st-revisions); color: var(--st-revisions-text);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.bottom-nav__search { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); }
.bottom-nav__search input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]) {
  flex: 1; min-width: 0; min-height: var(--tap); margin: 0; padding: 0; border: 0; background: none;
  appearance: none; box-shadow: none;
  color: var(--color-text); font: inherit; outline: 0;
}
.bottom-nav__search:focus-within { outline: 2px solid var(--color-focus); outline-offset: -2px; border-radius: var(--radius-s); }

/* --- Лента проекта: клетка на ролик ----------------------------------------------------- */
.ribbon { min-width: 0; }
.ribbon__cells {
  display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px;
  margin: 0; padding: 0; list-style: none;
}
.ribbon__cell { height: 14px; border-radius: var(--radius-xs); background: var(--st-queue); }
.ribbon__cell--prep, .ribbon__key--prep {
  background: var(--st-prep); box-shadow: inset 0 0 0 1px var(--color-border-strong);
}
/* Ролик по плану, ещё не заведён: пустая клетка пунктиром (замечание Кирилла К7). */
.ribbon__cell--planned { background: transparent; outline: 1px dashed var(--color-border-strong); outline-offset: -1px; }
/* Светлые клетки на белом листе — с рамкой, иначе не видны (аудит F04). */
.ribbon__cell--queue, .ribbon__key--queue { background: var(--st-queue); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.ribbon__cell--editing, .ribbon__key--editing { background: var(--st-editing); }
.ribbon__cell--review, .ribbon__key--review { background: var(--st-review); }
.ribbon__cell--revisions, .ribbon__key--revisions { background: var(--st-revisions); }
.ribbon__cell--accepted, .ribbon__key--accepted { background: var(--st-accepted); }
.ribbon__cell--delivered, .ribbon__key--delivered { background: var(--st-delivered); }
.ribbon__cell--confirmed, .ribbon__key--confirmed { background: var(--st-confirmed); }
.ribbon__say { margin: 5px 0 0; color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.35; }
.ribbon__legend {
  display: flex; flex-wrap: wrap; gap: 6px 12px; margin: var(--space-3) 0 0; padding: 0; list-style: none;
  color: var(--color-text-muted); font-size: var(--text-xs);
}
.ribbon__legend li { display: inline-flex; align-items: center; gap: 5px; }
.ribbon__key { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-xs); }