/* Шапка с плашкой учётной записи. Один файл на все страницы.

   Раздельные копии уже подвели: в перечне рукописей класс .bar значил и шапку,
   и полоску хода разбора, второе правило перебило первое, и шапка сжалась в
   четыре пиксела с обрезанным именем. Общий файл с собственными именами
   классов эту ошибку исключает.

   Цвета берутся из переменных страницы, но со значениями по умолчанию: файл
   должен выглядеть верно и на странице, где переменных нет. */

.topbar {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line, #e4dfd5);
  font-size: .85rem;
  color: var(--dim, #69645b);
}
.topbar .mark {
  display: flex;
  gap: .5rem;
  align-items: center;
  color: var(--ink, #1c1a17);
  text-decoration: none;
}
.topbar .mark .sign { width: 1.35rem; height: 1.35rem; display: block; }
.topbar .mark .word {
  font-family: var(--serif, Georgia, serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.005em;
}
.topbar .back {
  margin-right: auto;
  padding-left: 1rem;
  border-left: 1px solid var(--line, #e4dfd5);
  color: inherit;
  text-decoration: none;
}
.topbar .back:hover { color: var(--ink, #1c1a17); }

.account { position: relative; margin-left: auto; }

/* Обводка нужна, чтобы плашка читалась как кнопка: без неё имя со стрелкой
   выглядит подписью, и щёлкать по нему никто не пробует. */
.account .chip {
  display: flex;
  gap: .45rem;
  align-items: center;
  height: 2.1rem;
  padding: 0 .75rem;
  border: 1px solid var(--line, #e4dfd5);
  border-radius: 999px;
  background: var(--surface, #fff);
  font: inherit;
  font-size: .85rem;
  line-height: 1;
  color: var(--ink, #1c1a17);
  cursor: pointer;
}
.account .chip:hover { border-color: var(--line-strong, #cdc6b8); }
.account .chip[aria-expanded="true"] { border-color: var(--ink, #1c1a17); }
.account .chip .role { color: var(--dim, #69645b); }
.account .chip .caret { color: var(--dim, #69645b); font-size: .65rem; }

.account .menu {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  z-index: 20;
  min-width: 14rem;
  padding: .3rem;
  border: 1px solid var(--line, #e4dfd5);
  border-radius: 10px;
  background: var(--surface, #fff);
  box-shadow: 0 8px 24px var(--shadow, rgba(28, 26, 23, .12));
  text-align: left;
}
.account .menu a,
.account .menu button {
  display: block;
  width: 100%;
  padding: .45rem .6rem;
  border: 0;
  border-radius: 7px;
  background: none;
  font: inherit;
  font-size: .88rem;
  color: var(--ink, #1c1a17);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account .menu a:hover,
.account .menu button:hover { background: var(--bg, #f1eee7); }
.account .menu hr { margin: .3rem .2rem; border: 0; border-top: 1px solid var(--line, #e4dfd5); }

/* Окно смены пароля. Свои имена классов, а не общие правила для dialog:
   на странице сотрудников есть свои окна со своим оформлением, и общее
   правило перекрасило бы то из них, которое загрузится последним. */
.account-window {
  max-width: 25rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line, #e4dfd5);
  border-radius: 12px;
  color: var(--ink, #1c1a17);
}
.account-window::backdrop { background: var(--backdrop, rgba(28, 26, 23, .55)); }
.account-window h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 620; }
.account-window p { margin: 0 0 1rem; font-size: .88rem; color: var(--dim, #69645b); }
.account-window p.error { color: var(--mandatory, #b0281c); }
.account-window label {
  display: block;
  margin-bottom: .8rem;
  font-size: .82rem;
  color: var(--dim, #69645b);
}
.account-window input {
  display: block;
  width: 100%;
  height: 2.3rem;
  margin-top: .25rem;
  padding: 0 .6rem;
  border: 1px solid var(--line, #e4dfd5);
  border-radius: 8px;
  font: inherit;
  font-size: .92rem;
  color: var(--ink, #1c1a17);
}
.account-window input:focus { outline: 2px solid var(--focus-ring, #d5e3ee); border-color: var(--focus-line, #8fb1cc); }
.account-window .buttons { display: flex; gap: .5rem; justify-content: flex-end; }
.account-window .buttons button {
  height: 2.3rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 8px;
  background: var(--ink, #1c1a17);
  color: #fff;
  font: inherit;
  font-size: .92rem;
  font-weight: 520;
  cursor: pointer;
}
.account-window .buttons button.ghost {
  background: var(--surface, #fff);
  color: var(--ink, #1c1a17);
  border: 1px solid var(--line, #e4dfd5);
}