/* Оформление панели: продолжение сайта, а не второй сайт.
 *
 * Краски, шрифты и меры приезжают из /assets/app.css — здесь только то, чего
 * на сайте нет: формы, цифры и график. Правило сайта действует и тут: обвязка
 * темнее содержимого, янтарь показывает положение, ультрамарин — документ.
 *
 * Ни одного скругления и ни одной тени, кроме выноса у клавиш: панель — тот
 * же прибор, только с рычагами.
 */

.admin { padding-bottom: 0; }            /* полосы состояния здесь нет */
.admin__main { padding-bottom: var(--band); }

/* --- сообщения ---------------------------------------------------------- */

/* Сообщение о сделанном стоит над страницей и говорит одной строкой: что
 * получилось или что помешало. Цветом различаются не «хорошо» и «плохо», а
 * «сделано» и «не сделано» — поэтому удача синяя, документная, а не зелёная. */
.note {
  margin: var(--band) 0 0;
  padding: .8rem 1rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--graphite-soft);
  background: var(--panel);
  font-size: .95rem;
}
.note--ok { border-left-color: var(--ink); }
.note--bad { border-left-color: var(--amber); }

.hint { color: var(--graphite-mid); font-size: .93rem; margin: 0 0 1rem; max-width: 42rem; }
.hint:last-child { margin-bottom: 0; }

/* --- вход --------------------------------------------------------------- */

/* Страница входа — одна панель посреди пустого листа. Показывать шапку с
 * разделами до входа незачем: ни один из них ещё не открывается. */
.admin--gate { display: grid; place-items: center; min-height: 100vh; padding: var(--gutter) 0; }
.gate { width: 100%; }
.gate__panel { max-width: 26rem; margin: 0 auto; }
.gate__title { font-size: 1.6rem; margin: .35rem 0 1.4rem; }

/* --- выход -------------------------------------------------------------- */

.out { margin: 0; }
.out__btn {
  font: 500 var(--label)/1 var(--mono);
  letter-spacing: var(--step); text-transform: uppercase;
  background: none; border: 0; padding: .5rem 0; cursor: pointer;
  color: var(--graphite-soft);
  border-bottom: 1px solid transparent;
}
.out__btn:hover { color: var(--amber); border-bottom-color: currentColor; }

/* --- переключатели периода и языка -------------------------------------- */

/* Тот же ряд, что в навигации сайта: выбранное подчёркнуто янтарём, потому
 * что это положение — где читатель сейчас, — а не ссылка на документ. */
.tabs { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0 0 1.6rem; }
.tab {
  font: 500 var(--label)/1 var(--mono);
  letter-spacing: var(--step); text-transform: uppercase;
  text-decoration: none; color: var(--graphite-soft);
  padding: .45rem 0; border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--graphite); }
.tab--on { color: var(--graphite); border-bottom-color: var(--amber); }

/* --- цифры -------------------------------------------------------------- */

.stat {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 0 0 1.8rem;
}
.stat__cell { background: var(--panel); padding: .95rem 1rem 1.05rem; }
.stat__cell .label { margin: 0 0 .5rem; }
.stat__n {
  margin: 0;
  font: 700 1.75rem/1 var(--display);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
/* Роботы — не достижение и не беда, а вычтенный шум: цифра приглушена, чтобы
 * не соперничать с просмотрами. */
.stat__n--soft { color: var(--graphite-soft); font-weight: 400; font-family: var(--mono); font-size: 1.25rem; }

/* --- графики ------------------------------------------------------------ */

/* Динамика рисуется линиями поверх сетки: столбцы хороши для одного ряда, но
 * наложить на них прошлый период нечем — они закрывают друг друга. Линия
 * прошлого периода идёт позади, серым пунктиром: она нужна не сама по себе, а
 * чтобы сегодняшняя читалась как «выше» или «ниже».
 *
 * Ультрамарин — просмотры, янтарь — заходы. Это то же правило, что на сайте:
 * синим набран документ (сколько раз его открыли), янтарным — положение
 * (сколько при этом было людей). */

.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.chart__grid { stroke: var(--rule); stroke-width: 1; }
.chart__y, .chart__tick {
  fill: var(--graphite-soft);
  font: 500 9px/1 var(--mono); letter-spacing: .06em;
}

.chart__fill { fill: var(--ink); opacity: .1; }
.chart__now { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__guests { fill: none; stroke: var(--amber); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chart__past {
  fill: none; stroke: var(--graphite-soft); stroke-width: 1.25;
  stroke-dasharray: 4 4; opacity: .75;
}

/* Полоса-ловушка: подпись под курсором должна ловиться во всю высоту графика,
 * а не только на самой линии в два пиксела толщиной. */
.chart__catch { fill: transparent; }
.chart__catch:hover { fill: var(--ink); opacity: .07; }

.chart__hour { fill: var(--ink); opacity: .8; }
.chart__hour:hover { fill: var(--amber); opacity: 1; }

.legend { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: .9rem 0 0; }
.legend__item {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 500 var(--label)/1 var(--mono);
  letter-spacing: var(--step); text-transform: uppercase; color: var(--graphite-mid);
}
.legend__item::before { content: ""; width: 1.1rem; height: 2px; background: currentColor; }
.legend__item--now { color: var(--ink); }
.legend__item--guests { color: var(--amber); }
.legend__item--past { color: var(--graphite-soft); }

/* Линия вычерчивается на глазах. `pathLength="1"` в разметке приводит длину
 * любой кривой к единице — поэтому один и тот же пунктир в единицу длины
 * подходит и графику за неделю, и графику за три месяца, и никакие числа из
 * кода в стили передавать не нужно. */
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes show { from { opacity: 0; } }

.chart__now, .chart__guests, .chart__past, .spark__line {
  stroke-dasharray: 1; animation: draw .9s ease-out both;
}
.chart__guests { animation-delay: .12s; }
.chart__past { animation-delay: .24s; }
.chart__fill, .spark__fill { animation: show .9s ease-out both; }
.chart__hour {
  transform-box: fill-box; transform-origin: bottom;
  animation: rise .5s ease-out both;
}
/* Столбцы поднимаются волной слева направо — четырьмя группами по шесть
 * часов, а не двадцатью четырьмя правилами: разница между соседними часами
 * всё равно неразличима. */
.chart__hour:nth-child(n+7)  { animation-delay: .06s; }
.chart__hour:nth-child(n+13) { animation-delay: .12s; }
.chart__hour:nth-child(n+19) { animation-delay: .18s; }

/* Просили не двигать — не двигаем. Правило сайта, оно же и здесь. */
@media (prefers-reduced-motion: reduce) {
  .chart__now, .chart__guests, .chart__past, .spark__line,
  .chart__fill, .spark__fill, .chart__hour { animation: none; stroke-dasharray: none; }
}

/* --- след страницы ------------------------------------------------------ */

.spark { width: 5.5rem; height: 1.25rem; display: block; overflow: visible; }
.spark__line { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.spark__fill { fill: var(--ink); opacity: .12; }
.spark--flat {
  display: block; width: 5.5rem; height: 1.25rem;
  background: linear-gradient(var(--rule), var(--rule)) center/100% 1px no-repeat;
}

/* --- изменение против прошлого периода ---------------------------------- */

/* Стрелка — знак направления, а не оценки: рост не «хорошо», а «больше».
 * Поэтому обе стороны набраны одним цветом чернил, и только «нет данных»
 * приглушено — это отсутствие сравнения, а не его результат. */
.delta {
  display: block; margin: .45rem 0 0;
  font: 500 .7rem/1.3 var(--mono); letter-spacing: .04em;
  color: var(--graphite-mid);
}
.delta--up::before { content: "▲ "; color: var(--ink); }
.delta--down::before { content: "▼ "; color: var(--amber); }
.delta--flat::before { content: "— "; }
.delta--none { color: var(--graphite-soft); }
.delta__was { color: var(--graphite-soft); }

/* --- перечни в две колонки ---------------------------------------------- */

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--gap); }

.table--tight { font-size: .9rem; }
.table--tight td { padding: .45rem .6rem .45rem 0; }
.cell__name { overflow-wrap: anywhere; }
.cell__spark { width: 5.5rem; padding-right: .8rem; }
@media (max-width: 34rem) { .cell__spark { display: none; } }
.cell__n { text-align: right; width: 5.5rem; color: var(--graphite-mid); font-family: var(--mono); font-size: .85rem; }

/* --- перечень заметок --------------------------------------------------- */

/* Имя файла показано намеренно: оно же адрес заметки и её имя в git, и
 * человек, правивший файл руками, ищет строку именно по нему. */
.item__slug {
  display: block; margin-top: .5rem;
  font: 400 .75rem/1 var(--mono); color: var(--graphite-soft);
}

/* --- формы -------------------------------------------------------------- */

.form { display: grid; gap: 1.35rem; margin: 0; }
.form + .form { margin-top: var(--band); }

.field { display: grid; gap: .4rem; margin: 0; }
.field__lab {
  font: 500 var(--label)/1 var(--mono);
  letter-spacing: var(--step); text-transform: uppercase; color: var(--graphite-mid);
}
.field__in {
  font: 400 1rem/1.55 var(--body);
  color: var(--graphite);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: .65rem .8rem;
  width: 100%;
  /* Поле ввода — вдавленное место на панели: рамка темнеет при наводке и
   * становится ультрамариновой в работе. Тень внутрь, а не наружу: выносом
   * здесь обозначены клавиши, и путать одно с другим нельзя. */
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .06);
}
.field__in:hover { border-color: var(--graphite-soft); }
.field__in:focus { outline: 0; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.field__in--mono { font: 400 .9rem/1.6 var(--mono); }
/* Текст заметки — единственное поле, ради которого сюда заходят: ему и место.
 * Моноширинный намеренно: в разметке считают отступы и вертикальные черты. */
.field__in--body { font: 400 .95rem/1.7 var(--mono); min-height: 26rem; resize: vertical; }
.field__hint { font-size: .82rem; color: var(--graphite-soft); }
.field__hint code, .band__note code, .hint code {
  font: 400 .85em/1.4 var(--mono); background: var(--sunk); padding: .1em .3em;
}
.field__fixed { font: 400 .9rem/1.6 var(--mono); }

.field__pair { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 1.35rem; align-items: end; }
@media (max-width: 34rem) { .field__pair { grid-template-columns: minmax(0, 1fr); } }

.field__check { display: flex; align-items: center; gap: .6rem; padding-bottom: .7rem; }
.field__check input { width: 1.05rem; height: 1.05rem; accent-color: var(--ink); }
.field__check span { font-size: .95rem; }

.form__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: .4rem 0 0; }

/* Удаление стоит отдельной формой и ниже сохранения: соседняя кнопка «рядом с
 * той, которую жмут всегда» — это способ однажды нажать не ту. */
.form--danger {
  margin-top: var(--band);
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.btn--warn { border-color: var(--amber); color: var(--amber); box-shadow: 2px 2px 0 var(--amber); }
.btn--warn:hover { background: var(--amber); color: var(--paper); }

/* --- прочие поля заголовка ---------------------------------------------- */

.more { border: 1px dashed var(--rule); padding: .9rem 1rem; background: var(--sunk); }
.more__head {
  font: 500 var(--label)/1 var(--mono);
  letter-spacing: var(--step); text-transform: uppercase;
  color: var(--graphite-mid); cursor: pointer;
}
.more__head:hover { color: var(--ink); }
.more[open] .more__head { margin-bottom: 1rem; }

/* --- узкий экран -------------------------------------------------------- */

@media (max-width: 44rem) {
  .stat__n { font-size: 1.4rem; }
  .admin .top__inner { row-gap: .4rem; }
}

/* Адреса из заявок. Моноширинно и с переносом по любому знаку: адрес почты
 * длиннее колонки — обычное дело, а прятать его под многоточие незачем,
 * писать по ним всё равно руками. */
.demand__mail {
  font: 400 .78rem/1.5 var(--mono);
  color: var(--graphite-mid);
  overflow-wrap: anywhere;
  max-width: 26rem;
}