/* ═══════════ Меню аккаунта (scripts/profile-menu.mjs, SPEC §4.1) ═══════════
   Предмет — системное меню: сплошная карточка над кнопкой, растёт из её
   угла. Всплывающее сплошное, не стекло (SPEC §8.3). Сверху вы — дверь в
   профиль; тема и звук меняются на месте; ниже действия. Подсветка пункта
   действия — заливкой акцента, как выбранный раздел меню; строки управления
   (вы, тема, звук) подсвечиваются тише — они не уводят со страницы. */

/* ── кнопка: весь блок пользователя внизу колонки ── */
.side-user{position:relative}
.side-me{
  position:absolute;inset:0;z-index:0;border-radius:var(--r-sm);
  background:none;cursor:pointer;
}
.side-me:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* Код остаётся своей кнопкой поверх: его копируют, а не открывают меню. */
.side-user .side-code{position:relative;z-index:1}
.side-user.is-open{background:var(--sunk)}
/* Знак «раскрывается»: блок не просто подпись, а переключатель человека. */
.side-updown{
  width:14px;height:14px;margin-left:auto;flex-shrink:0;
  color:var(--ink-3);pointer-events:none;
  transition:color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .side-user:hover .side-updown{color:var(--ink-2)}
}
.side-user.is-open .side-updown{color:var(--ink)}
.rail .side-updown{display:none}
/* Со знаком раскрытия места меньше: длинная роль сжимается многоточием, а код
   остаётся одной строкой — его копируют целиком. */
.side-user > div:not(.av){flex:1;min-width:0}
.side-user .side-who>span{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user .side-code{white-space:nowrap;flex-shrink:0}

/* ── карточка ── */
.acct{position:fixed;z-index:60;width:272px}
.acct-card{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  padding:5px;overflow:hidden;transform-origin:bottom left;outline:none;
}

.acct-av{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:10px;font-weight:600;letter-spacing:0;
  background:var(--av, var(--av-1));color:var(--av-ink);
}
.acct-av.me{background:var(--accent);color:var(--accent-ink)}
.acct-av.sm{width:22px;height:22px;font-size:8.5px}
.acct-av.lg{width:44px;height:44px;font-size:14px;margin-bottom:8px}
.acct .av1{--av:var(--av-1)} .acct .av2{--av:var(--av-2)} .acct .av3{--av:var(--av-3)}
.acct .av4{--av:var(--av-4)} .acct .av5{--av:var(--av-5)} .acct .av6{--av:var(--av-6)}

/* Вы — первая строка и дверь в профиль: крупнее пунктов, со стрелкой
   «дальше», как строка учётной записи в системных настройках. */
.acct-me{
  display:flex;align-items:center;gap:11px;width:100%;padding:8px 8px 8px 7px;
  border-radius:var(--r);outline:none;text-align:left;color:var(--ink);cursor:pointer;
}
.acct-me .acct-av{width:38px;height:38px;font-size:12.5px}
.acct-me-t{display:flex;flex-direction:column;min-width:0;flex:1}
.acct-me-t b{font-size:13.5px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.acct-me-t > span{font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-me .mono{font-family:var(--mono);font-size:10.5px;letter-spacing:-.01em}
.acct-me-go{display:flex;color:var(--ink-3);transition:transform 180ms cubic-bezier(.23,1,.32,1)}
.acct-me-go svg{width:15px;height:15px}
.acct-me.is-hi{background:var(--sunk)}
.acct-me.is-hi .acct-me-go{transform:translateX(2px);color:var(--ink-2)}

/* Тема — три положения одной планкой, как переключатель вида в системе:
   «как в системе» остаётся одним нажатием, двоичный рычаг его бы съел. */
.acct-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:3px 4px 3px 8px}
.acct-row-l{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.acct-row-l svg{width:15px;height:15px;margin:0 3px 0 4px;flex-shrink:0;color:var(--ink-2)}
.acct-seg{display:flex;gap:2px;padding:2px;border-radius:var(--r-pill);background:var(--sunk)}
.acct-seg-b{
  width:34px;height:28px;border-radius:var(--r-pill);outline:none;
  display:flex;align-items:center;justify-content:center;color:var(--ink-3);
  transition:background-color 140ms ease-out, color 140ms ease-out, box-shadow 140ms ease-out;
}
.acct-seg-b svg{width:15px;height:15px;margin:0}
.acct-seg-b.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(var(--ink-rgb),.12), 0 0 0 1px var(--rule-2)}
.acct-seg-b.is-hi:not(.on){color:var(--ink)}
.acct-seg-b.is-hi{box-shadow:0 0 0 2px var(--ink)}
.acct-seg-b.on.is-hi{box-shadow:0 1px 2px rgba(var(--ink-rgb),.12), 0 0 0 2px var(--ink)}

/* Звук — строка с переключателем: состояние видно без нажатия. */
.acct-item.acct-toggle.is-hi{background:var(--sunk);color:var(--ink)}
.acct-item.acct-toggle.is-hi svg{color:var(--ink-2);opacity:1}
.acct-switch{
  position:relative;flex-shrink:0;width:30px;height:18px;margin-left:auto;border-radius:var(--r-pill);
  background:var(--rule);transition:background-color 180ms ease-out;
}
.acct-switch::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:transform 220ms cubic-bezier(.23,1,.32,1);
}
.acct-toggle[aria-checked="true"] .acct-switch{background:var(--ink)}
.acct-toggle[aria-checked="true"] .acct-switch::after{transform:translateX(12px)}
.acct-toggle[aria-checked="false"] svg{opacity:.45}

.acct-sep{height:1px;margin:4px 8px;background:var(--rule-2)}
.acct-cap{margin:0;padding:6px 8px 4px;font-size:11px;font-weight:500;color:var(--ink-3)}

.acct-item{
  display:flex;align-items:center;gap:9px;width:100%;min-height:32px;
  padding:5px 8px;border-radius:var(--r-sm);outline:none;
  font-size:12.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink);text-align:left;
  cursor:pointer;
}
.acct-item>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-item em{margin-left:auto;padding-left:8px;font-style:normal;font-size:11px;font-weight:400;color:var(--ink-3);white-space:nowrap}
.acct-item svg{width:15px;height:15px;margin:0 3px 0 4px;flex-shrink:0;color:var(--ink-2)}
/* Подсветка без перехода: по меню водят десятки раз за смену, и запоздавшая
   заливка читается как задержка. Указатель и клавиатура ведут один фокус. */
.acct-item.is-hi{background:var(--accent);color:var(--accent-ink)}
.acct-item.is-hi em,.acct-item.is-hi svg{color:var(--accent-ink);opacity:.72}
.acct-item[aria-disabled="true"]{color:var(--ink-3);cursor:default}
.acct-item[aria-disabled="true"] .acct-av{opacity:.5}
.acct-item:active:not([aria-disabled="true"]){background:var(--accent);color:var(--accent-ink)}

@media (max-width:720px){
  .acct{width:auto}
  .acct-item{min-height:44px;font-size:13px}
}

/* Клетки ПИН-кода — общие для окна профилей и «Люди и доступ» (pin-cells.mjs).
   Поле — четыре клетки, а под ними настоящий ввод во всю их ширину:
   нажать можно куда угодно, вставка и цифровая клавиатура работают. */
.pin-field{position:relative;width:max-content;margin:0 auto}
.pin-input{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  opacity:0;border:0;padding:0;font-size:16px;caret-color:transparent;cursor:text;
}
.pin-input:disabled{cursor:not-allowed}
.pin-cells{display:flex;gap:8px}
.pin-cell{
  width:42px;height:48px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule);
  transition:box-shadow var(--t-tap) var(--ease),background-color var(--t-tap) var(--ease);
}
/* Заполненная клетка — точкой: цифры за спиной не подсмотреть. Точка
   садится из малого, а не возникает из ничего. */
.pin-cell::after{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--ink);
  opacity:0;transform:scale(.4);
  transition:opacity 120ms ease-out,transform 180ms cubic-bezier(.23,1,.32,1);
}
.pin-cell.on::after{opacity:1;transform:none}
.pin-field:focus-within .pin-cell.now{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.pin-field.is-wrong .pin-cell{box-shadow:inset 0 0 0 1px var(--late-line)}
.pin-field.is-wrong .pin-cell::after{background:var(--late)}
.pin-field.is-ok .pin-cell{background:var(--ok-bg);box-shadow:inset 0 0 0 1px var(--ok-line)}
.pin-field.is-ok .pin-cell::after{background:var(--ok)}
.pin-field.is-locked .pin-cells{opacity:.45}

@media (prefers-reduced-motion:reduce){
  .acct-me-go,.acct-seg-b,.acct-switch,.acct-switch::after{transition:none}
  .pin-cell,.pin-cell::after,.side-updown{transition:none}
  .pin-cell::after{transform:none}
}