/* ak-shell.css — оболочка по макету design/dashboard-mock.html:
   сайдбар 232 px на всю высоту, шапка 64 px над содержимым.
   Размеры, отступы, радиусы и кегли — из макета без округления. Цвета — токены
   (в тёмной теме токены равны значениям макета). Мобильную вёрстку (≤768 px)
   не трогаем: там по-прежнему выдвижной ящик из main.css. */

/* ── Сетка: сайдбар на две строки, шапка только над содержимым ─────────────── */
@media (min-width: 769px) {
  body {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--header-height) minmax(0, 1fr);
    grid-template-areas:
      "sidebar header"
      "sidebar main";
  }
}
/* Сайдбар 248 вместо 232 px макета: подписи разделов стали жирнее (600), и вместе с шевроном «Графики и отпуска» в 232 не умещалась.
   Откат — убрать эту строку. */
@media (min-width: 1025px) { :root { --sidebar-width: 248px; } }
#app-header  { grid-area: header; min-width: 0; }
#app-sidebar { grid-area: sidebar; overflow: hidden; }

/* ══ САЙДБАР ═══════════════════════════════════════════════════════════════ */
.ak-nav {
  width: 100%; height: 100%; box-sizing: border-box;
  padding: 24px 12px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  overflow-y: auto; overflow-x: hidden;
  font-family: var(--font-sans); color: var(--text-primary);
  /* В макете у меню и шапки строка «нормальная»; приложение задаёт body 1.6 —
     без сброса пункт выходил 40 px вместо 36. */
  line-height: normal;
}
.ak-nav a { -webkit-tap-highlight-color: transparent; }
/* Меню прокручивается, но полоса не рисуется: она отъедала 8 px ширины, и подписи
   («Техника и склад», «Графики и отпуска») уходили в многоточие. */
.ak-nav { scrollbar-width: none; }
.ak-nav::-webkit-scrollbar { display: none; }

.ak-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ak-top .ak-brand { flex: 1 1 auto; min-width: 0; }
.ak-nav__close { display: none; }
.ak-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 20px; text-decoration: none; color: var(--text-primary);
}
.ak-brand__mark {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--accent-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--text-inverse);
}
.ak-brand__txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.ak-brand__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.ak-brand__sub  { font-size: 11px; color: var(--text-faint, #6b7672); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ak-sec {
  font-size: 11px; color: var(--text-faint, #6b7672);
  padding: 16px 8px 4px; font-weight: 500;
}

.ak-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 6px; border-radius: 8px;
  text-decoration: none; color: var(--text-primary); font-size: 14px;
}
/* Раздел — значок, жирнее, 14 px (решение владельца 01.10.2026): так он не сливается с подразделами */
.ak-item__label { font-weight: 600; }
.ak-grp { display: flex; flex-direction: column; }
/* Шеврон раздела: повёрнут, когда раздел раскрыт */
.ak-item__chev { flex-shrink: 0; width: 12px; height: 12px; margin-left: 0; stroke: var(--text-faint, #6b7672); transition: transform .2s ease; }
.ak-grp--open > .ak-item .ak-item__chev { transform: rotate(90deg); }
.ak-item svg { flex-shrink: 0; stroke: var(--text-muted); }
.ak-item__label { flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-item__n { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.ak-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.ak-item__n + .ak-dot { margin-left: -2px; }   /* иначе «Графики и отпуска» на 1 px шире места */
/* Точка срочности — на углу значка (как в узкой рейке): при жирных подписях разделов в строке не хватало ширины
   на значок, подпись, число и шеврон. Число остаётся справа. */
.ak-item { position: relative; }
.ak-item .ak-dot { position: absolute; left: 19px; top: 8px; width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--sidebar-bg); }
.ak-item--active .ak-dot { box-shadow: 0 0 0 2px var(--tint-accent, #12211b); }
.ak-dot--red    { background: var(--status-danger); }
.ak-dot--yellow { background: var(--status-warning); }

.ak-item--active,
.ak-item--active:hover { background: var(--tint-accent, #12211b); }
.ak-item--active svg { stroke: var(--accent-primary); }

/* Подпункты — аккордеон: раскрыт один раздел, главная сворачивает всё. Без значка, 13 px, второй цвет текста, отступ
   слева 28 px (16 до линии + 1 линия + 11 внутри) и тонкая вертикальная линия по высоте группы. */
.ak-sub {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .22s ease, visibility 0s linear .22s;
}
.ak-grp--open > .ak-sub { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .22s ease, visibility 0s; }
.ak-sub__in {
  min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 6px 16px; border-left: 1px solid var(--border-default);
}
.ak-grp:not(.ak-grp--open) > .ak-sub .ak-sub__in { margin-top: 0; margin-bottom: 0; }
.ak-subitem {
  display: block; position: relative; padding: 6px 8px 6px 11px; margin-left: -1px; border-radius: 0 8px 8px 0;
  font-size: 13px; color: var(--text-secondary); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ak-subitem:hover { color: var(--text-primary); background: var(--row-hi); }
/* Текущий подраздел — отдельно от текущего раздела: акцентный текст и акцентный отрезок на линии группы */
.ak-subitem--active { color: var(--accent-hover); font-weight: 500; background: var(--row-hi); }
.ak-subitem--active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--accent-primary); }
.ak-subdiv { font-size: 11px; color: var(--text-faint, #6b7672); padding: 8px 8px 2px 11px; }
.ak-item:focus-visible, .ak-subitem:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .ak-sub, .ak-grp--open > .ak-sub, .ak-item__chev { transition: none; }
}

.ak-nav__fill { flex-grow: 1; min-height: 12px; }
.ak-status { display: flex; align-items: center; gap: 8px; padding: 8px; font-size: 12px; color: var(--text-muted); }
.ak-status__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent-primary); flex-shrink: 0; }
.ak-status--off .ak-status__dot { background: var(--status-danger); animation: none; }

/* ══ ШАПКА ═════════════════════════════════════════════════════════════════ */
.ak-header {
  height: 100%; box-sizing: border-box; padding: 0 32px;
  display: flex; align-items: center; gap: 12px;
  background: var(--header-bg); border-bottom: 1px solid var(--header-border);
  position: relative; z-index: 10; min-width: 0;
  line-height: normal;
}
.ak-hnav { display: flex; gap: 4px; flex-shrink: 0; }
.ak-ibtn {
  width: 36px; height: 36px; border-radius: 10px; padding: 0; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-primary);
}
.ak-ibtn svg { stroke: currentColor; }
.ak-ibtn:disabled { cursor: default; color: var(--text-dim, #4f5955); }
.ak-ibtn:not(:disabled):hover { background: var(--row-hi); }
.ak-ibtn:focus-visible, .ak-create:focus-visible, .ak-bell:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Мобильные элементы шапки: на десктопе скрыты */
.ak-hamb, .ak-logo-mob { display: none; }

/* Поиск (п.14) — тот же компонент, размеры макета: 560 × 40, радиус 10 */
.ak-header #app-header__search { margin-left: 12px; flex: 0 1 560px; min-width: 0; }
.ak-header .gs-wrap { max-width: 560px; width: 100%; }
.ak-header .gs-input-shell {
  height: 40px; box-sizing: border-box; padding: 0 14px; border-radius: 10px;
  background: var(--bg-secondary); border: 1px solid var(--border-default);
  font-size: 14px;
}
.ak-header .gs-input { font-size: 14px; }
.ak-header .gs-panel { min-width: 560px; }

.ak-fill { flex-grow: 1; }
.ak-greet { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; margin-right: 6px; white-space: nowrap; }
.ak-greet__hi   { font-size: 13px; font-weight: 600; }
.ak-greet__date { font-size: 11px; color: var(--text-muted); }

.ak-create {
  height: 38px; padding: 0 16px; border-radius: 10px; border: 0; flex-shrink: 0;
  background: var(--accent-primary); color: var(--text-inverse);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ak-create:hover { background: var(--accent-hover); }
.ak-bell {
  position: relative; width: 38px; height: 38px; border-radius: 10px; padding: 0; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-primary);
}
.ak-bell svg { stroke: currentColor; }
.ak-bell:hover { background: var(--row-hi); }
.ak-bell__badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: var(--accent-primary); color: var(--text-inverse);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}
.ak-bell__badge[hidden] { display: none; }

/* ── Выпадающие панели: «Создать» и колокольчик ─────────────────────────────── */
.ak-pop {
  position: fixed; z-index: 9999;
  background: var(--bg-secondary); border: 1px solid var(--border-default);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  font-size: 13px; color: var(--text-primary); overflow: hidden;
}
.ak-menu { min-width: 220px; padding: 6px; }
.ak-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 9px 10px; border-radius: 8px; border: 0; background: transparent;
  color: var(--text-primary); font-family: inherit; font-size: 14px; text-align: left;
  text-decoration: none; cursor: pointer;
}
.ak-menu__item svg { stroke: var(--text-muted); flex-shrink: 0; }
.ak-menu__item:hover { background: var(--row-hi); }

.ak-inbox { width: 380px; max-width: calc(100vw - 32px); max-height: min(72vh, 560px); display: flex; flex-direction: column; }
.ak-tabs { display: flex; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid var(--border-default); }
.ak-tab {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; margin-bottom: -1px;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.ak-tab--on { color: var(--text-primary); border-bottom-color: var(--accent-primary); }
.ak-tab__n { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.ak-inbox__list { overflow-y: auto; padding: 6px; min-height: 96px; }
.ak-inbox__row {
  display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 10px; border-radius: 8px; cursor: pointer; text-decoration: none; color: var(--text-primary);
}
/* Строка «Дел» с кнопкой «Выполнено» (шаг HR-процесса): ссылка слева, кнопка справа; на узком экране кнопка под текстом */
.ak-inbox__row--act { grid-template-columns: minmax(0, 1fr) auto; cursor: default; align-items: center; }
.ak-inbox__main { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; color: inherit; text-decoration: none; }
.ak-inbox__done { min-height: 40px; padding: 0 14px; border: 1px solid var(--accent-primary); border-radius: 10px; background: var(--accent-surface); color: var(--accent-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ak-inbox__done:disabled { opacity: .5; cursor: default; }
.ak-inbox__done:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
@media (max-width: 480px) { .ak-inbox__row--act { grid-template-columns: 1fr; } .ak-inbox__done { min-height: 44px; width: 100%; } }
.ak-inbox__dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 5px; background: transparent; }
.ak-inbox__dot--red    { background: var(--status-danger); }
.ak-inbox__dot--yellow { background: var(--status-warning); }
.ak-inbox__dot--new    { background: var(--accent-primary); }
.ak-inbox__t { font-size: 14px; font-weight: 500; line-height: 1.25; }
.ak-inbox__s { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ak-inbox__empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.ak-inbox__foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--border-default); font-size: 12px; }
.ak-inbox__foot a, .ak-inbox__foot button { color: var(--accent-primary); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: none; }

/* ══ ТЕЛЕФОН (≤768 px) ═════════════════════════════════════════════════════
   Ящик и подложку задаёт main.css. Здесь — только шапка и меню внутри ящика. */
@media (max-width: 768px) {
  .ak-nav { padding: 16px 12px; }
  /* Ящик слева во всю высоту поверх шапки; открывают бургер и свайп от левого края, закрывают ✕, нажатие вне панели
     и свайп влево (components/mobile-drawer.js). Нижняя панель (z 210) остаётся под открытым ящиком. */
  #app-sidebar {
    top: 0; width: min(86vw, 320px); z-index: 230;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.55);
    padding-top: env(safe-area-inset-top, 0px);
  }
  body.mobile-nav-open::after { top: 0; z-index: 220; }
  body.mobile-nav-open { overflow: hidden; }
  .ak-nav__close {
    display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px;
    width: 36px; height: 36px; border-radius: 10px; padding: 0; cursor: pointer;
    background: transparent; border: 1px solid var(--border-default); color: var(--text-primary);
  }
  .ak-nav__close:hover { background: var(--row-hi); }
  .ak-nav__close:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
  .ak-item { padding: 11px 8px; }                       /* палец, а не курсор */
  .ak-subitem { padding: 9px 8px 9px 11px; }
  .ak-header { padding: 0 12px; gap: 8px; }
  .ak-hamb {
    display: flex; width: 36px; height: 36px; border-radius: 10px; padding: 0; flex-shrink: 0;
    align-items: center; justify-content: center; cursor: pointer;
    background: transparent; border: 1px solid var(--border-default); color: var(--text-primary);
  }
  .ak-logo-mob { display: flex; align-items: center; text-decoration: none; }
  .ak-logo-mob .ak-brand__mark { width: 28px; height: 28px; }
  .ak-hnav, .ak-greet { display: none; }
  .ak-header #app-header__search { margin-left: 0; flex: 1 1 auto; }
  .ak-header .gs-panel { min-width: 0; }
  .ak-create { height: 36px; padding: 0 12px; }
}

/* ══ РЕЙКА (body.sidebar--collapsed) ═══════════════════════════════════════
   Включается на планшете и на странице заявок: колонка сужается до 64 px.
   Остаются значки; точка срочности переезжает на угол значка, чтобы срочное
   было видно и в узкой колонке. */
body.sidebar--collapsed:not(.sidebar-peek) .ak-nav { padding: 16px 8px; }
body.sidebar--collapsed:not(.sidebar-peek) .ak-brand,
body.sidebar--collapsed:not(.sidebar-peek) .ak-item { justify-content: center; padding-left: 0; padding-right: 0; position: relative; }
body.sidebar--collapsed:not(.sidebar-peek) .ak-brand { padding-bottom: 16px; }
body.sidebar--collapsed:not(.sidebar-peek) .ak-brand__txt,
body.sidebar--collapsed:not(.sidebar-peek) .ak-sec,
body.sidebar--collapsed:not(.sidebar-peek) .ak-item__label,
body.sidebar--collapsed:not(.sidebar-peek) .ak-item__n,
body.sidebar--collapsed:not(.sidebar-peek) .ak-sub,
body.sidebar--collapsed:not(.sidebar-peek) .ak-item__chev,
body.sidebar--collapsed:not(.sidebar-peek) .ak-status__txt { display: none; }
body.sidebar--collapsed:not(.sidebar-peek) .ak-item .ak-dot { position: absolute; top: 6px; right: 10px; width: 7px; height: 7px; }
body.sidebar--collapsed:not(.sidebar-peek) .ak-status { justify-content: center; }

/* Рейка без кнопки раскрытия (планшетная ширина 769–1024 и страница заявок) оставляла только значки без подписей: меню нельзя было
   ни прочитать, ни раскрыть — на телефоне бургер есть, а здесь его не было. Теперь в рейке в шапке стоит та же кнопка «Меню»:
   она выдвигает полную колонку поверх страницы (.sidebar-peek), закрывается нажатием вне колонки, Escape и переходом на другой адрес. */
@media (min-width: 769px) {
  .ak-hamb {
    display: flex; width: 36px; height: 36px; border-radius: 10px; padding: 0; flex-shrink: 0;
    align-items: center; justify-content: center; cursor: pointer;
    background: transparent; border: 1px solid var(--border-default); color: var(--text-primary);
  }
  .ak-hamb:hover { background: var(--row-hi); }
  .ak-hamb:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
  body.sidebar--collapsed.sidebar-peek #app-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 248px; z-index: 230; overflow-y: auto;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
  }
}

/* ══ КАБИНЕТ (/me) ═════════════════════════════════════════════════════════ */
.me { max-width: var(--page-max); box-sizing: border-box; padding: 24px 32px 48px; display: flex; flex-direction: column; gap: 20px; }
.me-head { display: flex; align-items: center; gap: 16px; }
.me-av {
  width: 64px; height: 64px; border-radius: 999px; overflow: hidden; flex-shrink: 0;
  background: var(--tint-accent-av, #1a3a2c); color: var(--accent-hover);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
}
.me-av img { width: 100%; height: 100%; object-fit: cover; }
.me-name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; }
.me-sub  { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.me-card { box-sizing: border-box; padding: 20px 24px; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--border-default); }
.me-h { margin: 0 0 12px; font-size: 15px; font-weight: 600; }

.me-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.me-link { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; margin: 0 -8px; border-radius: 8px; text-decoration: none; color: var(--text-primary); }
.me-link__t { font-size: 14px; font-weight: 500; }
.me-link__s { font-size: 12px; color: var(--text-muted); }

.me-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border-default); }
.me-row:first-of-type { border-top: 0; }
.me-label { font-size: 14px; }
.me-seg { display: flex; gap: 4px; }
.me-seg__b {
  height: 30px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary);
  font-family: inherit; font-size: 12px;
}
.me-seg__b--on { background: var(--tint-accent); border-color: var(--tint-accent-border); color: var(--accent-hover); }

.me-btn {
  height: 32px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  border: 0; background: var(--accent-primary); color: var(--text-inverse);
  font-family: inherit; font-size: 12px; font-weight: 600;
}
.me-btn:disabled { opacity: .6; cursor: default; }
.me-btn--quiet { background: transparent; border: 1px solid var(--border-strong); color: var(--text-primary); font-weight: 500; }
.me-btn--sm { height: 28px; padding: 0 12px; background: transparent; border: 1px solid var(--border-strong); color: var(--text-primary); font-weight: 500; }
.me-token { margin-top: 8px; padding: 12px; border-radius: 10px; background: var(--row-hi); font-size: 12px; }
.me-token__t { font-weight: 600; margin-bottom: 6px; }
.me-token__l { display: block; word-break: break-all; margin-bottom: 8px; color: var(--accent-primary); font-family: var(--font-mono); font-size: 11px; }
.me-token__b { display: flex; gap: 6px; flex-wrap: wrap; }
.me-token__s { margin-top: 8px; color: var(--text-muted); font-size: 11px; }
.me-err { margin-top: 8px; color: var(--status-danger); font-size: 12px; }
.me-foot { display: flex; }

.me-note { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 768px) {
  .me-card { padding: 16px; }
  .me-av { width: 56px; height: 56px; font-size: 20px; }
  .me-name { font-size: 20px; }
  .me-link { padding: 12px 8px; }                       /* палец, а не курсор */
  .me-seg__b, .me-btn { min-height: 36px; }
  .me-row { align-items: flex-start; }
  .me { padding: 16px 12px 32px; }
  .me-links { grid-template-columns: 1fr; }
  .me-row { flex-wrap: wrap; }
}

/* Баннер важных объявлений под шапкой: тихая строка — точка, заголовок, текст серым, ссылка, ✕ (Волна 6) */
.ann-bar {
  display: flex; align-items: center; gap: 12px; padding: 8px 64px; box-sizing: border-box;   /* 64 — левый край содержимого новой главной */
  background: var(--bg-secondary); border-bottom: 1px solid var(--border-default);
  color: var(--text-primary); font-size: 13px; line-height: 1.4;
}
.ann-bar__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--status-warning); flex: none; }
.ann-bar__tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-bar__tx b { font-weight: 500; }
.ann-bar__b { color: var(--text-muted); }
.ann-bar__more, .ann-bar__go { color: var(--accent-primary); text-decoration: none; white-space: nowrap; flex: none; font-size: 12px; }
.ann-bar__more { color: var(--text-muted); }
.ann-bar__go:hover, .ann-bar__more:hover { text-decoration: underline; }
.ann-bar__x {
  width: 24px; height: 24px; border-radius: 6px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: none; padding: 0;
}
.ann-bar__x:hover { background: var(--row-hi); color: var(--text-primary); }
.ann-bar a:focus-visible, .ann-bar__x:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
@media (max-width: 1100px) { .ann-bar { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 768px) { .ann-bar { padding: 8px 12px; gap: 8px; } .ann-bar__more { display: none; } }

/* Листание записей из списка: «‹ 3 из 25 › К списку» (Волна 7a). В шапке страницы — в строке, без шапки — плавающей плашкой. */
.rn { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-left: 12px; font-size: 12px; color: var(--text-muted); }
.rn__c { min-width: 54px; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rn__b {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary);
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.rn__b:hover:not(:disabled) { background: var(--row-hi); }
.rn__b:disabled { opacity: .35; cursor: default; }
.rn__l { height: 28px; padding: 0 10px; border: 0; background: transparent; color: var(--accent-primary); font: inherit; cursor: pointer; border-radius: 8px; }
.rn__l:hover { background: var(--row-hi); }
.rn__b:focus-visible, .rn__l:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.rn--float {
  position: fixed; right: 24px; bottom: 20px; z-index: 40; margin: 0; padding: 6px 8px; border-radius: 12px;
  background: var(--bg-secondary); border: 1px solid var(--border-default);
}
@media (max-width: 768px) {
  .rn { margin-left: 8px; }
  .rn__l { display: none; }
  .rn--float { right: 12px; bottom: 76px; }      /* над нижней панелью */
}

/* Меню пользователя в шапке и «Выйти» (Волна 7c) */
.ak-avbtn {
  width: 36px; height: 36px; border-radius: 999px; padding: 0; border: 1px solid var(--border-default); cursor: pointer; flex: none; overflow: hidden;
  background: var(--tint-accent-av); color: var(--accent-hover); font-family: var(--font-display); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ak-avbtn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-avbtn:hover { border-color: var(--border-strong); }
.ak-avbtn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
#app-header__user { margin-left: 8px; display: flex; align-items: center; }
.ak-menu__who { padding: 8px 10px 10px; border-bottom: 1px solid var(--border-default); margin-bottom: 6px; max-width: 260px; }
.ak-menu__name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ak-menu__sub { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; margin-top: 2px; }
.ak-menu__sep { height: 1px; background: var(--border-default); margin: 6px 0; }
button.ak-menu__item { width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ak-menu__item--out, .ak-menu__item--out svg { color: var(--status-danger); stroke: var(--status-danger); }
.me-head { flex-wrap: wrap; }
.me-head__out { margin-top: 8px; }
.ak-nav__logout { display: none; }
@media (max-width: 768px) {
  #app-header__user { margin-left: 4px; }
  .ak-nav__logout {
    display: block; margin: 8px 0 4px; height: 40px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 14px;
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-primary);
  }
}