/* Каркас «Наша Кухня»: сброс, типографика, шапка, меню строкой, подвал, нижняя навигация.
 *
 * Порядок файлов (`base.html`): tokens.css — значения; base.css — этот файл, каркас страницы;
 * components.css — старые кубики админских экранов (уходят в пакете 2); kitchen.css — кубики
 * экранов сотрудника. Анатомия — макет `docs/design/mockup/site/app.css` (`.app-head`,
 * `.s-head`, `.s-nav`, `.bnav`, `.drop`). Только токены, ни одного сырого значения цвета.
 */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-accent-hover); }

/* Видимый фокус обязателен: порталом пользуются и с клавиатуры. */
:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

::selection { background: var(--color-selection); }
img { max-width: 100%; }

/* `hidden` побеждает любой display кубика: иначе скрытый скриптом список всё равно виден. */
[hidden] { display: none !important; }

/* Цель якоря встаёт на треть окна, а не под липкую шапку. */
:target { scroll-margin-top: 33vh; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }

/* --- Приложение --- */

.nk-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-surface);
}

/* --- Шапка --- */

/* Липкая шапка: строка инструментов и меню под ней (макет `.app-head`). */
.nk-head {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--color-card-border);
  background: var(--color-surface);
}
.nk-head__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-18);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-10) var(--content-pad-x);
}

.nk-brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-ink);
  text-decoration: none;
}
.nk-brand:hover { color: var(--color-ink); }
.nk-brand__logo { display: block; width: auto; height: 1.75rem; }
.nk-brand__name { font-size: var(--text-caption); font-weight: var(--weight-semibold); }

/* «Найти или сделать»: серое поле, Ctrl K справа (макет `.s-find`). */
.nk-find {
  display: flex;
  flex: 1 1 16rem;
  align-items: center;
  gap: var(--space-10);
  min-width: 0;
  min-height: var(--tap-target);
  padding: 0 var(--space-12);
  background: var(--color-surface-alt);
  color: var(--color-ink-3);
}
.nk-find:focus-within { outline: 2px solid var(--color-action); outline-offset: 0; }
.nk-find__input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap-target);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: var(--weight-regular) var(--text-md) var(--font-sans);
  caret-color: var(--color-action);
}
.nk-find__input:focus { outline: none; }
.nk-find__input::placeholder { color: var(--color-ink-3); }
.nk-find__kbd {
  padding: 1px var(--space-6);
  border: 1px solid var(--color-input-border);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-tiny);
}

.nk-tools { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }

/* Квадрат 44 под значок или аватар; число — в правом верхнем углу (макет `.ico`). */
.nk-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tap-target);
  height: var(--tap-target);
  color: var(--color-ink);
  text-decoration: none;
}
.nk-ico:hover { background: var(--color-surface-alt); color: var(--color-ink); }
.nk-ico .nk-icon { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.nk-ico .nk-count { position: absolute; top: var(--space-4); right: 0; }
.nk-ico--wide { width: calc(var(--tap-target) + var(--space-8)); }
.nk-tools__action { margin-left: var(--space-6); }

/* --- Меню строкой --- */

/* Переносится на вторую строку, а не прокручивается (макет `.s-nav`). */
.nk-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 calc(var(--content-pad-x) - var(--space-12));
  border-top: 1px solid var(--color-card-border);
}
.nk-nav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--nav-height);
  padding: var(--space-10) var(--space-12) var(--space-8);
  border-bottom: var(--rule-width) solid transparent;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.nk-nav__item:hover { color: var(--color-action); }
.nk-nav__item.is-here { border-bottom-color: var(--color-action); }
.nk-nav__drop .nk-icon { width: var(--space-16); height: var(--space-16); }

/* --- Экран и подвал --- */

.nk-main {
  flex: 1;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
}
/* Старые экраны (админка до пакета 2) стоят с полем; новые несут его сами (`.nk-page`). */
.nk-content { padding: var(--space-34) var(--content-pad-x) var(--space-48); }
.nk-content:has(> .nk-page, > .nk-hero, > .nk-home) { padding: 0; }

.nk-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-12) var(--space-24);
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-18) var(--content-pad-x);
  border-top: 1px solid var(--color-card-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* «Нашёл ошибку»: ссылка в подвале, форма раскрывается под ней. */
.nk-bug { margin-left: auto; }
.nk-bug__summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--color-accent);
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.nk-bug__summary::-webkit-details-marker { display: none; }
.nk-bug__summary:hover { color: var(--color-accent-hover); }
.nk-bug__form { width: min(28rem, 100%); margin-top: var(--space-8); }

.nk-impersonation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12) var(--space-16);
  padding: var(--space-10) var(--content-pad-x);
  background: var(--color-warn-bg);
  color: var(--color-warn-ink-strong);
  font-weight: var(--weight-semibold);
}

/* Строка выпадашки с вложенной формой («Аа»). */
.nk-drop__row { padding: var(--space-10) 0; border-bottom: 1px solid var(--color-card-border); }
.nk-drop__row .nk-seg { display: flex; }
.nk-drop__row .nk-seg button { flex: 1; }
/* Тумблер-картинка в кнопке выпадашки: состояние ставит сервер. */
.nk-switch i.is-on { border-color: var(--color-action); background: var(--color-action); }
.nk-switch i.is-on::after { left: calc(100% - var(--switch-knob) - 2px); background: var(--color-on-action); }

/* --- Шапка старых экранов: заголовок слева, главное действие справа --- */

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-24);
  margin-bottom: var(--space-26);
}
.page-header__text { flex: 1; min-width: 0; }
.page-header__actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: var(--space-12);
  justify-content: flex-end;
}
.page-title {
  color: var(--color-ink-strong);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.page-subtitle { margin-top: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-base); }

/* Ритм старых экранов: отбивка блоков и ряда кнопок. */
.form-actions { margin-top: var(--space-16); }
.section { margin-top: var(--space-26); }

/* --- Вход и первый вход (макет `.login`) --- */

/* Красная панель слева, форма справа; ≤ 860 — одна колонка, панель сверху не ниже 300. */
.nk-login {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  min-height: 100vh;
}
.nk-login__panel { min-height: 100%; }
.nk-login__panel-text { max-width: 44ch; font-size: var(--text-read); line-height: var(--leading-normal); }
.nk-login__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-22);
  width: 100%;
  max-width: var(--login-form-width);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 4.5rem);
}
.nk-login__form .nk-brand__logo { height: 2.125rem; }
.nk-login__title {
  margin: 0;
  font-size: var(--text-page);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: 1;
}
.nk-login__lead { margin: 0; color: var(--color-text-lead); }
/* Кто вошёл: в компании одну бумажку легко перепутать с другой. */
.nk-login__whoami { display: flex; align-items: center; gap: var(--space-12); }
.nk-login__whoami b,
.nk-login__whoami .nk-mono { display: block; }
.nk-login__whoami .nk-mono { color: var(--color-text-muted); text-transform: none; }
@media (max-width: 53.75rem) {
  .nk-login { grid-template-columns: minmax(0, 1fr); }
  .nk-login__panel { min-height: 18.75rem; }
  .nk-login .nk-neon { width: min(70%, 20rem); }
}

/* --- Мелочи --- */

.stack > * + * { margin-top: var(--space-16); }
.muted { color: var(--color-text-muted); }
.mono { font-family: var(--font-mono); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Нижняя навигация телефона --- */

.nk-bnav { display: none; }

/* Поиск — второй строкой шапки на всю ширину (макет ≤ 760). */
@media (max-width: 47.5rem) {
  .nk-find { flex-basis: 100%; order: 4; }
}

@media (max-width: 40rem) {
  .nk-nav,
  .nk-brand__name,
  .nk-find__kbd,
  .nk-tools__action { display: none; }
  .nk-content { padding: var(--space-20) var(--space-16) var(--space-32); }

  /* Под нижнюю навигацию оставлено место: она не закрывает кнопки форм внизу экрана. */
  .nk-app { padding-bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px)); }

  /* Четыре колонки, число над подписью (макет `.bnav`). */
  .nk-bnav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--color-card-border);
    background: var(--color-surface);
  }
  .nk-bnav__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--bottomnav-height);
    margin-top: -1px;
    padding: var(--space-4) 2px;
    border: 0;
    border-top: var(--rule-width) solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    font: var(--weight-medium) var(--text-xs) / var(--leading-tight) var(--font-sans);
    list-style: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  .nk-bnav__item::-webkit-details-marker { display: none; }
  .nk-bnav__item .nk-icon { width: var(--icon-size); height: var(--icon-size); }
  .nk-bnav__item.is-here,
  .nk-drop[open] > .nk-bnav__item { border-top-color: var(--color-action); color: var(--color-ink); }
  .nk-bnav__item .nk-count { position: absolute; top: var(--space-4); left: calc(50% + var(--space-6)); }

  /* Шторка «ещё»: панель над нижней навигацией на всю ширину. */
  .nk-drop--sheet > .nk-drop__panel {
    position: fixed;
    top: auto;
    right: 0;
    bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px));
    left: 0;
    width: auto;
    max-height: 75vh;
    overflow-y: auto;
    padding: var(--space-6) var(--space-16) var(--space-16);
    box-shadow: var(--shadow-card);
  }
}