/* ============================================================================
   kit-components.css — общие компоненты кита для всех этапов редизайна v2 (этап 2, после него — только чтение;
   нужна правка — свой страничный CSS с большей специфичностью или пункт в followups).
   Здесь то, чего нет в helmet.html как готовых классов, но что нужно нескольким экранам:
     1. каркас страниц (фон ЛК и служебных), меню аккаунта, окно-диалог;
     2. заголовок секции .sec-title (.ksec) и геосетка .xg (.kxg) — десктоп и мобильный вариант в одной разметке;
     3. единая карточка вакансии (.kvc, partial _KitVacancyCard);
     4. каркас ЛК: сетка 280 + 1fr и левое меню (partial _KitLkNav);
     5. уведомления .notice, чипы/вкладки, шаги, таблицы, пустые состояния, кнопки (disabled/loading/pressed);
     6. страницы ошибок 404/403/500 и служебный вход /staff.
   Значения — из макетов docs/redesign-canvas/*.dc.html и DESIGN-SYSTEM-ADDENDUM.md. Перелом мобильной
   раскладки — 768px (макеты 412), шапки переключаются раньше (см. kit-responsive.css).
   ============================================================================ */

/* ---------- 1. каркас ---------- */
body.kit-body.page-staff { background: #f4f4f4; font-size: 14px; }
body.kit-body.kit-bg-gray .kit-main { background: #f4f4f4; }
.kit-main [hidden], .kit-dialog [hidden], .kit-menu[hidden] { display: none !important; }

/* меню аккаунта (AdminDashboard.dc.html: .card 240px, padding 8, .side-nav без отступов; на 8px ниже кнопки) */
.kit-menu[hidden] { display: none; }
.kit-menu { position: absolute; top: 48px; right: 0; z-index: 60; width: 240px; padding: 8px; }
.kit-menu.kit-menu-staff { top: 52px; }
.kit-menu .side-nav { padding: 0; }
.kit-menu form, .side-nav form { margin: 0; }
.kit-menu-out, .kit-lk-out {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px; border-radius: 12px;
  font-size: 13.5px; color: #121212; text-align: left; cursor: pointer; transition: background-color .3s, color .3s;
}
.kit-menu-out svg.ic, .kit-lk-out svg.ic { width: 18px; height: 18px; color: #646464; }
.kit-lk-out:hover { background: #f4f4f4; color: #121212; }
/* меню аккаунта в шапке: при наведении — линия под подписью (.ul-label, kit.css «hover underline»), без заливки строки */
.kit-menu .side-nav a:hover, .kit-menu-out:hover { background: transparent; color: #121212; }
/* подпись не растягивается на всю строку (kit-lk.css: .side-nav a > span { flex: 1 } — для счётчиков левого меню ЛК) */
.kit-menu .ul-label, .kit-m-nav .ul-label { flex: 0 1 auto; }
.kit-lk-out { color: #646464; }
.kit-menu-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid #e9e9e9; line-height: 1.2; }

/* кнопка аккаунта сотрудника (kit/header-staff.html: рамка #e9e9e9, радиус 12, аватар 32, ФИО 13.5/600, роль 11.5);
   высота 40, как у остальных кнопок шапки (язык, колокольчик, аккаунт кандидата) — как на alliance-altyn.kg (40×40) */
.kit-acct-staff {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 4px; border: 1px solid #e9e9e9;
  border-radius: 12px; background: #ffffff; color: #121212; cursor: pointer; flex: none; text-align: left;
}
.kit-acct-staff:hover { border-color: #cbcbcb; }
.kit-acct-staff .ava { width: 32px; height: 32px; font-size: 12px; }
.kit-acct-staff-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.kit-acct-staff-name { font-size: 13.5px; font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #121212; }
.kit-acct-staff-role { font-size: 11.5px; color: #646464; white-space: nowrap; }
[data-kit-menu-btn][aria-expanded="true"] .kit-chev,
.acct[aria-expanded="true"] > svg.ic { transform: rotate(180deg); }
.kit-chev, .acct > svg.ic { transition: transform .2s; }

/* окно-диалог на <dialog> в стиле .modal кита (радиус 24, padding 32, тень); класс .modal не используется —
   на старых страницах он занят Bootstrap */
dialog.kit-dialog {
  width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); margin: auto; border: 0; padding: 32px;
  border-radius: 24px; background: #ffffff; color: #121212; box-shadow: 0 24px 64px rgba(18,18,18,.16); overflow: auto;
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.5;
}
dialog.kit-dialog::backdrop { background: rgba(18,18,18,.48); }
.kit-dialog-x-form { position: absolute; top: 24px; right: 20px; margin: 0; }
.kit-dialog-x { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: #646464; }
.kit-dialog-x:hover { background: #f4f4f4; color: #121212; }
.kit-dialog-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.kit-dialog-who { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.kit-dialog-who h2 { font-size: 18px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.kit-dialog-rows { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; font-size: 13px; color: #646464; }
.kit-dialog-row { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.kit-pass-form { display: flex; flex-direction: column; gap: 14px; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid #e9e9e9; }
.kit-pass-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.kit-pass-title svg.ic { color: #646464; }
.kit-pass-ok { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #00a53d; }
.kit-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; }

/* поле .input кита с настоящим <input> внутри (размер кита 44/14; у анкет — .kf-input 48/15) */
.kit-input input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 14px; color: #121212;
}
.kit-input input::placeholder { color: #646464; opacity: 1; }
.kit-input:focus-within { border-color: #262626; box-shadow: 0 0 0 3px rgba(38,38,38,.08); }
.kit-input.is-err:focus-within { border-color: #e82d37; box-shadow: 0 0 0 3px rgba(232,45,55,.08); }
.kit-body .kit-input input:focus-visible { outline: none; }

/* типографика страниц (ADDENDUM §9, §14): h1 страницы 28 (публичные и ЛК) / 24 (служебные), пояснение под ним */
.kit-h1 { font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: #121212; }
.page-staff .kit-h1 { font-size: 24px; line-height: 1.25; letter-spacing: 0; }
.kit-h2 { font-size: 20px; font-weight: 600; line-height: 1.25; color: #121212; }
.kit-h3 { font-size: 15px; font-weight: 600; line-height: 1.4; color: #121212; }
.kit-lead { font-size: 14px; line-height: 1.55; color: #646464; }
.kit-page-head { display: flex; flex-direction: column; gap: 8px; }

/* ---------- 2. заголовок секции и геосетка ---------- */
.sec-title.ksec > h1, .sec-title.ksec > h3 { font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: #121212; white-space: nowrap; }
.sec-title.ksec.sm > h1, .sec-title.ksec.sm > h3 { font-size: 20px; letter-spacing: 0; }
.sec-title.ksec .ksec-m { display: none; }
.xg.kxg { grid-template-columns: repeat(var(--xg-cols, 4), minmax(0, 1fr)); }
.xg.kxg .xgm { display: none; }

/* ---------- 3. карточка вакансии ---------- */
.kvc { position: relative; color: #121212; }
.kvc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kvc-title { font-size: 18px; font-weight: 600; line-height: 1.3; color: #121212; }
.kvc-link { color: #121212; }
.kvc-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.kvc:hover .kvc-link { color: #121212; }
.kvc-link:focus-visible { outline: none; }
.kvc:focus-within { border-color: #262626; }
.kvc-arrow { color: #9a9a9a; margin-top: 2px; }
.kvc .meta-row > span { min-width: 0; overflow-wrap: anywhere; }
.kvc-action { position: relative; z-index: 2; }
/* «Похожие вакансии» (VacancyDetails: padding 20, gap 10, заголовок 16) */
.kvc-similar { padding: 20px; gap: 10px; }
.kvc-similar .kvc-title { font-size: 16px; }
/* архив (VacanciesArchive: фон #fafafa, заголовок #646464, «В архиве», «Приём заявок закрыт») */
.kvc-archive { background: #fafafa; }
.kvc-archive .kvc-title, .kvc-archive .kvc-link { color: #646464; }
.kvc-pill { margin-top: 2px; }
.kvc-closed { display: inline-flex; align-items: center; gap: 6px; }
.kvc-archive-dates { font-size: 12.5px; line-height: 1.4; margin-top: -4px; }

/* ---------- 4. каркас ЛК (LkDashboard / LkProfile: 280 + 1fr, gap 24, padding 32 0 56) ---------- */
.kit-lk-grid { padding: 32px 0 56px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.kit-lk-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.kit-lk-mini { padding: 18px; display: flex; align-items: center; gap: 12px; }
.kit-lk-mini .kit-lk-ava { width: 48px; height: 48px; font-size: 16px; }
.kit-lk-mini-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kit-lk-mini-name { font-size: 15px; font-weight: 600; line-height: 1.3; color: #121212; overflow-wrap: anywhere; }
.kit-lk-mini-phone { font-size: 13px; line-height: 1.4; color: #646464; }
.kit-lk-nav a > span:first-of-type { flex: 1; }
.kit-lk-nav a > .count, .kit-lk-nav a > .kit-badge { flex: none; }
.kit-lk-nav a.on .count { background: #ffffff; }
.kit-lk-out > span { flex: 1; }
.kit-lk-sep { display: block; height: 1px; background: #e9e9e9; margin: 6px 4px; }
.kit-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 100px; background: #ff760d; color: #ffffff; font-size: 11.5px; font-weight: 600; line-height: 1;
}

/* ---------- 5. уведомления, чипы, вкладки, шаги, таблицы, пустые состояния, кнопки ---------- */
.notice.line { background: #ffffff; border: 1px solid #e9e9e9; }
.notice.line > svg.ic { color: #ff760d; }
.notice.info { background: #dbedf8; }
.notice.info > svg.ic { color: #0073ff; }
.notice > p, .notice > span, .notice > div { min-width: 0; }
.notice b { font-weight: 600; }

/* выбранный фильтр с «×» (Vacancies: чипы .chip.on над результатами) */
.chip .x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: -4px; color: inherit; opacity: .8; }
.chip .x svg.ic { width: 12px; height: 12px; }
.chip .x:hover { opacity: 1; }
button.chip { cursor: pointer; font-family: inherit; }
.tabs { flex-wrap: wrap; }

/* шаги: компактный вариант (RegistrationMobile: кружок 24, 12.5px, gap 8) */
.steps.sm { gap: 8px; }
.steps.sm .step { gap: 8px; font-size: 12.5px; }
.steps.sm .step i { width: 24px; height: 24px; font-size: 12px; }
.steps.sm .step-sep { min-width: 12px; }
.steps { margin: 0; padding: 0; list-style: none; }

/* таблицы: обёртка с прокруткой внутри блока (страница не прокручивается по горизонтали) */
.tbl-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl tbody tr:hover td { background: #fff7e6; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* пустое состояние блока (в макетах не нарисовано; по киту: серый круг с иконкой, заголовок 16/600, текст 14) */
.kit-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 24px; }
.kit-empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #f4f4f4; color: #646464; }
.kit-empty-ic svg.ic { width: 24px; height: 24px; }
.kit-empty h3, .kit-empty .kit-empty-title { font-size: 16px; font-weight: 600; line-height: 1.3; color: #121212; }
.kit-empty p { font-size: 14px; line-height: 1.5; color: #646464; max-width: 420px; }
.kit-empty .btn { margin-top: 6px; }

/* кнопки: нажатие (ADDENDUM §5.1 active #f08811), недоступна (#d3d3d3), загрузка, во всю ширину */
.btn-yellow:active { background: #f08811; }
.btn-dark:active { background: #262626; }
.btn:disabled, .btn.is-disabled { background: #d3d3d3; border-color: #d3d3d3; color: #ffffff; cursor: default; pointer-events: none; }
.btn-block { width: 100%; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading svg.ic { opacity: 0; }
.btn.is-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid currentColor; border-color: #121212 transparent #121212 transparent; border-radius: 50%; animation: kit-spin .8s linear infinite;
}
.btn-dark.is-loading::after, .btn-orange.is-loading::after, .btn-green.is-loading::after { border-color: #ffffff transparent #ffffff transparent; }
@keyframes kit-spin { to { transform: rotate(360deg); } }
a.btn-link, button.btn-link { cursor: pointer; }

/* ---------- 6a. служебный вход /staff (StaffLogin.dc.html) ---------- */
.kit-focus-divider { flex: none; }
.stf-page { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 48px 0; background: #ffffff; }
.stf-col { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.stf-card { width: min(440px, calc(100% - 32px)); padding: 36px; display: flex; flex-direction: column; gap: 24px; }
.stf-head { display: flex; flex-direction: column; gap: 12px; }
.stf-pill-row { display: flex; }
.stf-title { font-size: 26px; font-weight: 600; line-height: 1.25; color: #121212; }
.stf-lead { font-size: 14px; line-height: 1.55; }
.stf-fields { display: flex; flex-direction: column; gap: 16px; }
.stf-pass { padding-right: 1px; }
.stf-pass input::placeholder { letter-spacing: .12em; }
.stf-eye {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 7px;
  color: #646464; flex: none; cursor: pointer;
}
.stf-eye:hover { background: #f4f4f4; color: #121212; }
.stf-eye .stf-eye-off { display: none; }
.stf-eye[aria-pressed="true"] .stf-eye-on { display: none; }
.stf-eye[aria-pressed="true"] .stf-eye-off { display: inline-flex; }
.stf-actions { display: flex; flex-direction: column; gap: 12px; }
.stf-submit { width: 100%; height: 48px; font-size: 15px; }
.stf-hint { font-size: 13px; line-height: 1.5; text-align: center; }
.stf-captcha { display: flex; justify-content: center; }

/* ---------- 6b. страницы ошибок 404 / 403 / 500 (макета нет: одиночный блок геосетки «cross-banner», ADDENDUM §2.3) ---------- */
.kerr-page { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 72px 0 96px; background: #ffffff; }
.page-staff .kerr-page { background: #f4f4f4; }
.kerr-cell { position: relative; width: min(720px, calc(100% - 80px)); padding: 48px 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.kerr-cell .xl { position: absolute; background: #e9e9e9; display: block; }
.kerr-cell .xl.t { left: 0; right: 0; top: -20px; height: 1px; }
.kerr-cell .xl.b { left: 0; right: 0; bottom: -20px; height: 1px; }
.kerr-cell .xl.l { top: 0; bottom: 0; left: -20px; width: 1px; }
.kerr-cell .xl.r { top: 0; bottom: 0; right: -20px; width: 1px; }
.kerr-cell > .plus { position: absolute; z-index: 2; }
.page-staff .kerr-cell > .plus { background: #f4f4f4; }
.kerr-cell > .plus.tl { top: -40px; left: -40px; }
.kerr-cell > .plus.tr { top: -40px; right: -40px; }
.kerr-cell > .plus.bl { bottom: -40px; left: -40px; }
.kerr-cell > .plus.br { bottom: -40px; right: -40px; }
.kerr-code { font-size: 96px; font-weight: 400; line-height: .92; letter-spacing: -.02em; color: #121212; font-variant-numeric: tabular-nums; }
.kerr-code span { color: #ff760d; }
.kerr-title { font-size: 30px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: #121212; }
.kerr-text { font-size: 16px; line-height: 1.55; color: #646464; max-width: 560px; }
.kerr-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.kerr-help { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #646464; }
.kerr-help a, .kerr-help .nw { color: #121212; font-weight: 600; white-space: nowrap; }
.kerr-help .nw { color: inherit; font-weight: 400; }
.kerr-id { font-size: 12px; color: #9a9a9a; }

/* каркас ЛК на планшете (мобильного макета ЛК нет): одна колонка, мини-профиль и меню рядом над содержимым */
@media (max-width: 960px) {
  .kit-lk-grid { grid-template-columns: minmax(0, 1fr); padding: 24px 0 40px; gap: 16px; }
  .kit-lk-side { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
}
@media (max-width: 640px) {
  .kit-lk-side { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   Мобильная раскладка (макеты 412: поля 16px, зоны нажатия ≥44px)
   ============================================================================ */
@media (max-width: 768px) {
  /* заголовок секции → .sec-title.m (26px, gap 16, декор 20px, один крест 20×20 справа) */
  .sec-title.ksec { gap: 16px; }
  .sec-title.ksec > h1, .sec-title.ksec > h2, .sec-title.ksec > h3 { font-size: 26px; white-space: normal; }
  .sec-title.ksec.sm > h1, .sec-title.ksec.sm > h2, .sec-title.ksec.sm > h3 { font-size: 20px; }
  .sec-title.ksec .sec-decor { height: 20px; min-width: 40px; }
  .sec-title.ksec .sec-decor::before { left: -16px; }
  .sec-title.ksec .sec-decor .plus.p1, .sec-title.ksec .sec-decor .plus.p2, .sec-title.ksec .sec-decor .plus.p3 { display: none; }
  .sec-title.ksec .ksec-m { display: inline-block; right: 0; left: auto; }

  /* геосетка → .xg.m (2 колонки, желоб 20/40, линии −10/−20, кресты 20×20 10×1) */
  .xg.kxg { grid-template-columns: repeat(var(--xg-mcols, 2), minmax(0, 1fr)); column-gap: 20px; row-gap: 40px; padding: 20px 0; }
  .xg.kxg .xgd { display: none; }
  .xg.kxg .xgm { display: block; }
  .xg.kxg .xl.t { top: -20px; }
  .xg.kxg .xl.b { bottom: -20px; }
  .xg.kxg .xl.l { left: -10px; }
  .xg.kxg .xl.r { right: -10px; }
  .xg.kxg > .xg-item > .plus { width: 20px; height: 20px; }
  .xg.kxg > .xg-item > .plus::before { width: 10px; height: 1px; }
  .xg.kxg > .xg-item > .plus::after { width: 1px; height: 10px; }
  .xg.kxg > .xg-item > .plus.tr { top: -30px; right: -20px; }
  .xg.kxg > .xg-item > .plus.br { bottom: -30px; right: -20px; }

  /* карточка вакансии (MainMobile: 18/12, h3 17; VacanciesMobile: 16px 18px, h3 17; VacancyDetailsMobile: белая 14/16, h3 16) */
  .kvc-main { padding: 18px; gap: 12px; }
  .kvc-main .kvc-title, .kvc-list .kvc-title, .kvc-archive .kvc-title { font-size: 17px; }
  .kvc-list, .kvc-archive { padding: 16px 18px; }
  .kvc-list .kvc-arrow { display: none; }
  .kvc-similar { padding: 14px 16px; gap: 10px; background: #ffffff; border-color: #e9e9e9; }
  .kvc-similar .vc-foot { border-top-color: #e9e9e9; }
  .kvc-archive .vc-foot { flex-wrap: wrap; }
  .kvc-archive .kvc-action .btn { height: 44px; }

  /* каркас ЛК: телефон — поля 16px, зоны нажатия 44px */
  .kit-lk-grid { padding: 16px 0 28px; }
  .kit-lk-nav a, .kit-lk-out { height: 44px; }

  /* чипы и кнопки — зоны нажатия 44px */
  .tabs .chip { height: 44px; }
  .chip .x { width: 28px; height: 28px; margin-right: -10px; }
  .tbl { font-size: 13px; }
  .kit-empty { padding: 32px 16px; }

  .kit-h1 { font-size: 24px; }

  /* служебный вход */
  .stf-page { padding: 24px 0 32px; place-items: start center; }
  .stf-card { padding: 24px 20px; border-radius: 20px; }
  .stf-title { font-size: 24px; }
  .stf-eye { width: 44px; height: 44px; }

  /* страницы ошибок: геосетка как у .xg.m (линии −10px, кресты 20×20) */
  .kerr-page { padding: 40px 0 56px; }
  .kerr-cell { width: calc(100% - 40px); padding: 28px 16px; gap: 16px; }
  .kerr-cell .xl.l { left: -10px; }
  .kerr-cell .xl.r { right: -10px; }
  .kerr-cell > .plus { width: 20px; height: 20px; }
  .kerr-cell > .plus::before { width: 10px; height: 1px; }
  .kerr-cell > .plus::after { width: 1px; height: 10px; }
  .kerr-cell > .plus.tl { top: -30px; left: -20px; }
  .kerr-cell > .plus.tr { top: -30px; right: -20px; }
  .kerr-cell > .plus.bl { bottom: -30px; left: -20px; }
  .kerr-cell > .plus.br { bottom: -30px; right: -20px; }
  .kerr-code { font-size: 64px; }
  .kerr-title { font-size: 24px; }
  .kerr-text { font-size: 15px; }
  .kerr-actions { flex-direction: column; align-self: stretch; }
  .kerr-actions .btn { width: 100%; }
  .kerr-help { align-items: flex-start; }
}