/* ============================================================================
   Надстройка над дизайн-системой продакшена. Всё общее — цвета, кнопки, поля,
   таблицы, карточки, меню — приходит из `@kn-elite/ui` и `erp.css`; здесь
   только блоки, которых в работающей системе ещё нет.

   Правило отступов: расстояние между блоками задаёт сам блок, а не место
   вызова. Иначе один и тот же элемент на разных экранах стоит по-разному —
   это первое, что видит заказчик.
   ========================================================================= */

/* ---------- вход: выбор роли ---------- */
.kn-login__hero-text {
  margin: 14px 0 0;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.65;
  color: #a9a08c;
}

.kn-login__form {
  max-width: 480px;
}

/* Плашка живёт и на длинном тексте: значок не сжимается, строки идут
   абзацем, а не в одну линию */
.kn-alert {
  align-items: flex-start;
}

.kn-alert__icon {
  flex: none;
  display: inline-flex;
  margin-top: 2px;
}

.kn-alert__text {
  line-height: 1.55;
}

/* Плашка на странице отделена и снизу, а не только сверху. Иначе она
   прилипает к следующей карточке */
.kn-page > .kn-alert {
  margin-bottom: 18px;
}

.kn-roles {
  display: grid;
  gap: 12px;
}

.kn-roles--wide {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.kn-role {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  background: var(--kn-surface);
  border: 1px solid var(--kn-line-2);
  border-radius: var(--kn-r-md);
  box-shadow: var(--kn-sh-xs);
  cursor: pointer;
  transition:
    transform var(--kn-t-fast) var(--kn-ease),
    box-shadow var(--kn-t-base) var(--kn-ease),
    border-color var(--kn-t-base);
}

.kn-role:hover {
  transform: translateY(-2px);
  box-shadow: var(--kn-sh-md);
  border-color: var(--kn-gold-line);
}

.kn-role--current {
  border-color: var(--kn-gold);
  background: var(--kn-gold-pale);
}

.kn-role__top {
  display: flex;
  align-items: center;
  gap: 11px;
}

.kn-role__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kn-role__name {
  font-family: var(--kn-font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
}

.kn-role__go {
  margin-left: auto;
  display: inline-flex;
  color: var(--kn-faint);
  transition:
    transform var(--kn-t-base) var(--kn-ease),
    color var(--kn-t-base);
}

.kn-role:hover .kn-role__go {
  color: var(--kn-gold-deep);
  transform: translateX(3px);
}

.kn-role__desc {
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---------- шапка на телефоне ---------- */
.kn-topbar__role {
  margin-left: auto;
}

/* ---------- выбор месяца и года ---------- */
.kn-period {
  display: flex;
  gap: 10px;
}

.kn-period .kn-field__control {
  height: 42px;
}

.kn-period .kn-field__input {
  font-size: 14px;
}

/* ---------- сетки раздела ---------- */
.kn-fin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.kn-fin-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.kn-fin-block {
  margin-bottom: 18px;
  padding: 0;
  overflow: hidden;
}

.kn-fin-block__head {
  padding-bottom: 0;
}

.kn-fin-block__head .kn-card-head {
  margin-bottom: 0;
}

.kn-fin-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.kn-fin-bar .kn-tabs {
  margin-bottom: 0;
}

.kn-fin-bar .kn-btn {
  margin-left: auto;
}

/* Сноска под карточкой: у всех одинаковый отступ сверху и один размер —
   иначе одинаковые по смыслу подписи выглядят разными по важности */
.kn-fin-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
}

.kn-fin-sum {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kn-fin-save {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.kn-block--wide {
  grid-column: span 2;
}

/* ---------- ждёт вашего действия ---------- */
.kn-todo {
  margin-bottom: 18px;
}

.kn-todo__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kn-todo__row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: var(--kn-r-md);
  background: var(--kn-surface-2);
  border-left: 3px solid var(--kn-line-2);
}

.kn-todo__row--over {
  background: var(--kn-gold-pale);
  border-left-color: var(--kn-gold);
}

.kn-todo__row--bad {
  background: rgba(188, 94, 60, 0.08);
  border-left-color: var(--kn-red);
}

.kn-todo__text {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
}

.kn-todo__act {
  margin-left: auto;
}

/* ---------- деньги за месяц ---------- */
.kn-pay__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--kn-line);
}

.kn-pay__row:last-of-type {
  border-bottom: none;
}

.kn-pay__what {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kn-pay__sum {
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kn-pay__zero,
.kn-pay__special {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
}

.kn-pay__zero {
  color: var(--kn-red-deep);
}

.kn-pay__special {
  color: var(--kn-gold-deep);
}

/* Неоплаченное — сверху и отдельным блоком: агент должен видеть, кого
   торопить, раньше, чем свою итоговую сумму */
.kn-pay__wait {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: var(--kn-r-md);
  background: var(--kn-gold-pale);
  border: 1px solid var(--kn-gold-line);
}

.kn-pay__wait-head {
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--kn-gold-deep);
}

.kn-pay__row--wait {
  border-bottom-color: var(--kn-gold-line);
}

.kn-pay__row--wait:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.kn-pay__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: var(--kn-r-md);
  background: var(--kn-ink);
  color: #f3eddf;
  font-size: 14px;
}

.kn-pay__total b {
  font-family: var(--kn-font-serif);
  font-size: 26px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kn-fin-block .kn-pay__total {
  margin: 0 20px 20px;
}

/* Итог, стоящий на странице сам по себе, а не внутри карточки */
.kn-pay__total--stand {
  margin-top: 18px;
}

.kn-pay__wait-note {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--kn-gold-deep);
}

.kn-review__field {
  margin: 14px 0 16px;
}

.kn-pay__approve {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ---------- цели строкой ---------- */
.kn-goalrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--kn-line);
}

.kn-goalrow:last-of-type {
  border-bottom: none;
}

.kn-goalrow__name {
  font-weight: 500;
}

.kn-goalrow__num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.kn-goalrow .kn-bar {
  grid-column: 1 / -1;
}

/* ---------- сетки таблиц ---------- */
.kn-deal__row {
  grid-template-columns: minmax(210px, 1.8fr) minmax(100px, .6fr) minmax(110px, .8fr) minmax(140px, 1fr) minmax(150px, 1fr) minmax(150px, .9fr);
}

.kn-capt__row {
  grid-template-columns: minmax(230px, 2fr) minmax(100px, .6fr) minmax(120px, .8fr) minmax(130px, .8fr) minmax(110px, .7fr) minmax(150px, .9fr);
}

.kn-obj__row {
  grid-template-columns: minmax(240px, 2fr) minmax(110px, 1fr) minmax(130px, 1fr) minmax(160px, 1fr) minmax(120px, 1fr);
}

.kn-emp__row {
  grid-template-columns: minmax(200px, 1.5fr) minmax(80px, .5fr) minmax(110px, .6fr) minmax(130px, .9fr) minmax(130px, .9fr) minmax(150px, .9fr);
}

.kn-queue__row {
  grid-template-columns: minmax(230px, 1.8fr) minmax(100px, .6fr) minmax(150px, 1fr) minmax(80px, .5fr) minmax(110px, .7fr) minmax(150px, .9fr);
}

.kn-wait__row {
  grid-template-columns: minmax(210px, 1.6fr) minmax(120px, .7fr) minmax(140px, .9fr) minmax(110px, .7fr) minmax(110px, .7fr) minmax(160px, 1fr);
}

.kn-cash__row {
  grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.6fr) minmax(100px, .6fr) minmax(110px, .7fr) minmax(160px, 1fr);
}

.kn-exp__row {
  grid-template-columns: minmax(220px, 1.8fr) minmax(150px, 1fr) minmax(100px, .6fr) minmax(110px, .7fr) minmax(150px, 1fr);
}

.kn-contrib__row {
  grid-template-columns: minmax(200px, 1.4fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(180px, 1fr) minmax(150px, 1fr);
}

.kn-payroll__row {
  grid-template-columns: minmax(200px, 1.5fr) minmax(70px, .4fr) minmax(130px, .9fr) minmax(130px, .9fr) minmax(150px, .9fr) minmax(160px, .9fr);
}

.kn-goal__row {
  grid-template-columns: minmax(200px, 2fr) minmax(120px, 1fr) minmax(160px, 1fr);
}

/* В таблице подпись под значением всегда с новой строки и с одним отступом */
.kn-table-row [data-label] > .kn-muted,
.kn-table-row .kn-muted {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
}

.kn-deal__name {
  display: block;
  font-weight: 600;
}

.kn-deal__share,
.kn-emp__pay,
.kn-payroll__sum,
.kn-obj__share {
  font-weight: 600;
  color: var(--kn-gold-deep);
}

.kn-obj__fee {
  display: block;
  font-weight: 600;
}

/* ---------- фотографии объектов ---------- */
.kn-object__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kn-obj__cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.kn-obj__thumb {
  width: 64px;
  height: 48px;
  flex: none;
  border-radius: var(--kn-r-xs);
  object-fit: cover;
}

.kn-obj__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kn-obj__photo {
  display: block;
  width: calc(100% + 48px);
  margin: -22px -24px 18px;
  height: 220px;
  object-fit: cover;
  border-radius: var(--kn-r-lg) var(--kn-r-lg) 0 0;
}

.kn-contrib__result {
  font-weight: 600;
}

.kn-wait__row--late {
  background: rgba(188, 94, 60, 0.06);
}

.kn-queue__acts,
.kn-review__acts {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- цепочка расчёта ----------
   Три шага, из которых получается сумма агента. Один блок на всю систему:
   там, где сумма показана, объяснение стоит рядом с ней. */
.kn-chain {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kn-chain__step {
  position: relative;
  padding: 12px 0 12px 26px;
}

.kn-chain__step::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kn-line-2);
}

.kn-chain__step::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 27px;
  bottom: -2px;
  width: 1.5px;
  background: var(--kn-line-2);
}

.kn-chain__step--last::after {
  display: none;
}

.kn-chain__step--last::before {
  background: var(--kn-gold);
}

.kn-chain__value {
  display: block;
  margin-top: 3px;
  font-family: var(--kn-font-serif);
  font-size: 26px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.kn-chain__step--last .kn-chain__value {
  color: var(--kn-gold-deep);
}

.kn-chain__note {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
}

/* ---------- пары «название — значение» ---------- */
.kn-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 20px;
}

.kn-kv {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
}

/* ---------- разложение денег ---------- */
.kn-flow {
  display: flex;
  flex-direction: column;
}

.kn-flow__row {
  display: grid;
  grid-template-columns: minmax(130px, 1.3fr) minmax(60px, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
}

.kn-flow__label {
  font-size: 13.5px;
  color: var(--kn-ink-soft);
}

.kn-flow__bar {
  height: 9px;
  border-radius: 99px;
  background: #eae3d3;
  overflow: hidden;
}

.kn-flow__fill {
  display: block;
  height: 100%;
  border-radius: 99px;
}

.kn-flow__fill--in {
  background: linear-gradient(90deg, #5e9070, var(--kn-green));
}

.kn-flow__fill--out {
  background: linear-gradient(90deg, #ce9070, var(--kn-red));
}

.kn-flow__fill--wait {
  background: linear-gradient(90deg, #d8bc7c, var(--kn-gold));
}

.kn-flow__value {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.kn-flow__row--total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1.5px solid var(--kn-line-2);
}

.kn-flow__row--total .kn-flow__label {
  font-weight: 600;
  color: var(--kn-ink);
}

.kn-flow__row--total .kn-flow__value {
  font-size: 20px;
}

/* ---------- условия сотрудника ---------- */
.kn-terms {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.kn-terms__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kn-line);
}

.kn-terms__row:last-child {
  border-bottom: none;
}

.kn-terms__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kn-terms__edit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.kn-special {
  padding: 14px 0;
  border-bottom: 1px solid var(--kn-line);
}

.kn-special:last-of-type {
  border-bottom: none;
}

.kn-special__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.kn-special p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.kn-special__author {
  margin-top: 4px;
  font-size: 12px;
}

/* ---------- правила офиса ---------- */
.kn-rule {
  padding: 14px 0;
  border-bottom: 1px solid var(--kn-line);
}

.kn-rule:last-of-type {
  border-bottom: none;
}

.kn-rule__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kn-rule__label {
  font-weight: 500;
}

.kn-rule__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kn-rule__edit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.kn-rule p {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
}

/* Поле для числа: ширину задаёт сам элемент, иначе поле на 50 растягивается
   во всю карточку и читается как поле для текста */
.kn-rule__edit .kn-num-cell,
.kn-terms__edit .kn-num-cell,
.kn-goal__row .kn-num-cell {
  width: 92px;
  height: 38px;
  padding: 0 10px;
  border: 1.5px solid var(--kn-line-2);
  border-radius: var(--kn-r-xs);
  background: var(--kn-surface);
  font-size: 15px;
  font-weight: 600;
  transition:
    border-color var(--kn-t-base),
    box-shadow var(--kn-t-base);
}

.kn-rule__edit .kn-num-cell:focus,
.kn-terms__edit .kn-num-cell:focus,
.kn-goal__row .kn-num-cell:focus {
  outline: none;
  border-color: var(--kn-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
}

.kn-goal__row .kn-num-cell {
  margin-left: auto;
}

/* ---------- оплата по сделке ---------- */
.kn-side {
  margin-bottom: 16px;
}

.kn-side:last-of-type {
  margin-bottom: 0;
}

.kn-side__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--kn-line);
}

.kn-part {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) minmax(100px, auto) minmax(140px, auto) minmax(150px, auto);
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--kn-line);
}

.kn-part:last-child {
  border-bottom: none;
}

.kn-part__what {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kn-part__sum {
  font-weight: 600;
  text-align: right;
}

.kn-part__act {
  display: flex;
  justify-content: flex-end;
}

.kn-review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--kn-line);
}

.kn-capt-sum {
  font-family: var(--kn-font-serif);
  font-size: 40px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin-bottom: 6px;
}

.kn-capt-sum--zero {
  color: var(--kn-faint);
}

.kn-quote {
  display: block;
  margin-top: 6px;
  font-style: italic;
}

/* ---------- формы ---------- */
.kn-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kn-form-section .kn-heading {
  margin: 0 0 14px;
}

.kn-form-section > p {
  margin: -8px 0 14px;
}

.kn-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.kn-form-grid--tight {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.kn-form-grid__wide {
  grid-column: 1 / -1;
}

.kn-form__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.kn-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--kn-line-2);
  border-radius: var(--kn-r-sm);
  background: var(--kn-surface);
  font-size: 14px;
  cursor: pointer;
  transition:
    border-color var(--kn-t-base),
    background var(--kn-t-base);
}

.kn-check:hover {
  border-color: var(--kn-gold-line);
}

.kn-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--kn-gold-2);
}

.kn-drop {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  padding: 26px 20px;
  border: 1.5px dashed var(--kn-line-2);
  border-radius: var(--kn-r-md);
  background: var(--kn-surface-2);
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--kn-t-base),
    background var(--kn-t-base);
}

.kn-drop:hover {
  border-color: var(--kn-gold);
  background: var(--kn-gold-pale);
}

.kn-sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.kn-side-edit {
  padding: 14px 16px;
  border: 1.5px solid var(--kn-line-2);
  border-radius: var(--kn-r-md);
  background: var(--kn-surface-2);
  transition:
    border-color var(--kn-t-base),
    background var(--kn-t-base);
}

.kn-side-edit--on {
  border-color: var(--kn-gold);
  background: var(--kn-surface);
}

.kn-side-edit__on {
  margin-bottom: 12px;
  border: none;
  background: none;
  padding: 0;
  font-weight: 600;
}

.kn-side-edit__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0.45;
  pointer-events: none;
}

.kn-side-edit--on .kn-side-edit__body {
  opacity: 1;
  pointer-events: auto;
}

.kn-parts-edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kn-part-edit {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  padding: 12px;
  border-radius: var(--kn-r-sm);
  background: var(--kn-surface-2);
  border: 1px solid var(--kn-line);
}

.kn-side-edit--on .kn-part-edit {
  background: var(--kn-surface-2);
}

.kn-part-edit__del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--kn-muted);
  background: transparent;
  border: none;
  cursor: pointer;
}

.kn-part-edit__del:hover {
  color: var(--kn-red);
  background: var(--kn-surface);
}

.kn-form-section--calc {
  background: var(--kn-surface-3);
  border-color: var(--kn-gold-line);
}

.kn-reason {
  margin-top: 14px;
}

.kn-search {
  min-width: 260px;
}

.kn-file {
  font-size: 12.5px;
  color: var(--kn-ink-soft);
  word-break: break-all;
}

/* ---------- метки, которых нет в продакшене ---------- */
.kn-chip--good {
  background: var(--kn-green-pale);
  border-color: #bccfc0;
  color: var(--kn-green-deep);
}

.kn-chip--bad {
  background: rgba(188, 94, 60, 0.1);
  border-color: #ebc9bf;
  color: var(--kn-red-deep);
}

.kn-chip--wait {
  background: var(--kn-surface-2);
  border-color: var(--kn-line-2);
  color: var(--kn-ink-soft);
}

/* ---------- статус записи ----------
   Одна ширина у всех статусов. Колонка со статусами читается сверху вниз,
   и разная ширина плашек превращает её в рваный край */
.kn-status {
  min-width: 148px;
  height: 26px;
}

/* ---------- ссылки внутри карточек ---------- */
.kn-file-link,
.kn-obj-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--kn-gold-deep);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--kn-gold-line);
  cursor: pointer;
}

.kn-file-link:hover,
.kn-obj-link:hover {
  text-decoration-color: var(--kn-gold);
}

/* ---------- доли по сделке ---------- */
.kn-shares {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--kn-line);
}

.kn-shares__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
}

.kn-shares__what {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kn-shares__sum {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kn-shares__note {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- анкета каптасиона целиком ---------- */
.kn-capt-full {
  display: flex;
  flex-direction: column;
}

.kn-capt-group + .kn-capt-group {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--kn-line);
}

.kn-capt-group .kn-subheading {
  margin: 0 0 12px;
}

.kn-capt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kn-capt-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--kn-line);
}

.kn-capt-note p {
  margin: 5px 0 0;
  line-height: 1.55;
}

/* ---------- годовой бонус в карточке сотрудника ---------- */
.kn-bonus {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--kn-line);
}

.kn-bonus__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.kn-bonus__prize {
  font-family: var(--kn-font-serif);
  font-size: 24px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.kn-bonus__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 12.5px;
}

/* ---------- уведомление ---------- */
#toast-layer {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.kn-toast {
  padding: 13px 18px;
  border-radius: var(--kn-r-md);
  background: var(--kn-ink);
  color: #f3eddf;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--kn-sh-lg);
  animation: kn-toast-in 0.35s var(--kn-ease);
}

.kn-toast--out {
  opacity: 0;
  transition: opacity 0.3s var(--kn-ease);
}

@keyframes kn-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ---------- узкие экраны ---------- */
@media (max-width: 900px) {
  .kn-block--wide {
    grid-column: span 1;
  }

  .kn-part {
    grid-template-columns: 1fr auto;
  }

  .kn-part__act {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .kn-fin-bar .kn-btn {
    margin-left: 0;
  }

  .kn-todo__act {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .kn-pay__total b {
    font-size: 22px;
  }

  .kn-chain__value {
    font-size: 22px;
  }

  .kn-capt-sum {
    font-size: 32px;
  }

  .kn-period {
    width: 100%;
  }

  .kn-period .kn-field {
    flex: 1;
  }
}