/* «Первые шаги» — панель над содержимым.

   Только токены из style.css: тема переключается там (body.dark), и свой цвет
   здесь означал бы светлую плашку поверх тёмного календаря.

   Панель нарочно не выглядит как предупреждение. Это не «у вас что-то не
   настроено» — это список того, что человек и так собирался сделать в первый
   день, поэтому мягкая рамка и обычный текст, а не жёлтый фон с восклицательным
   знаком. */

/* Где панель стоит.

   Её узел лежит первым в `.content-area`, а `.content-area` — flex-строка: в ней
   рядом стоят календарь (`.views-wrapper`) и выезжающая справа боковая панель.
   Первым узлом такой строки «Первые шаги» встали бы не над содержимым, а слева
   от него — третьей узкой колонкой, отжавшей календарь. Поэтому пока панель
   показана, строка становится сеткой в две полосы: верхнюю занимает панель
   целиком, нижнюю календарь и боковая панель делят ровно так же, как делили
   строку (`auto` по второй колонке — это её `width: 0`, которая едет до
   `min(1080px, 78vw)` на открытии, и переход по width при этом остаётся).

   Класс на body ставит сам Onboarding, и только когда рисует. У всех, кто прожил
   первую неделю, раскладка приложения не меняется ничем — а это, в отличие от
   первой недели, состояние на годы вперёд. */
body.onb-on .content-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'onb onb' 'views side';
}
body.onb-on #onboarding-slot { grid-area: onb; min-width: 0; }
body.onb-on .views-wrapper { grid-area: views; }
body.onb-on .side-panel { grid-area: side; }

/* Пустой узел не занимает ничего: панели нет — нет и полосы под неё. */
#onboarding-slot:empty { display: none; }

.onb {
  margin: 8px var(--pad-x, 32px) 4px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius, 6px);
  background: var(--surface);
}

.onb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.onb-title { font-family: var(--serif); font-size: var(--t-display-sm, 22px); line-height: 1.1; color: var(--ink); }
.onb-sub { margin-top: 3px; font-size: var(--t-micro, 11px); color: var(--muted); }

.onb-hide {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: none;
  font-family: inherit;
  font-size: var(--t-micro, 11px);
  color: var(--muted);
  cursor: pointer;
}
.onb-hide:hover { border-color: var(--rule-strong); color: var(--ink-soft); }

.onb-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }

.onb-step {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}
.onb-step-main { flex: 1 1 260px; min-width: 0; }
.onb-step-title { font-size: var(--t-body, 14px); font-weight: 600; color: var(--ink); }
.onb-step-hint { margin-top: 2px; font-size: var(--t-small, 12px); color: var(--ink-soft); line-height: 1.45; }

.onb-acts { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; }
.onb-act {
  padding: 6px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
  font-family: inherit;
  font-size: var(--t-small, 12px);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.onb-act:hover { background: var(--hover); }
.onb-act.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.onb-act.primary:hover { opacity: .88; }

/* На узком экране действия уходят под текст шага — кнопка «Импорт из файла»,
   вытолкнутая за край, это шаг, которого нет. */
@media (max-width: 720px) {
  .onb { margin-left: 12px; margin-right: 12px; }
  .onb-acts { width: 100%; }
}