/*
 * account.css: the chrome of the application around the views: the button "PRO version" (disabled, blurred, with the word "soon") and the account menu in the top bar, the link "Application status" and the version under the menu of the side column, and the bar and the hidden parts of the demo variant. It reads only the tokens of tokens.css and is linked after knock.css.
 * @comments-complete 2026-11-08
 */

/* The demo variant (html[data-demo]): the bar on top (the colours of the stale-data warning) and what a visitor without a login must not use: the entries of the application, the site switcher, Settings and the head of the account menu, and the button of the Access check. The server refuses these operations anyway. */
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 8px 16px; background: var(--st-older-bg); color: var(--st-older); font-weight: var(--fw-medium); font-size: var(--fs-s); }
.demo-bar[hidden] { display: none; }
.demo-login { color: inherit; font-weight: var(--fw-semibold); text-decoration: underline; }
html[data-demo="1"] .side-app,
html[data-demo="1"] .site-switch,
html[data-demo="1"] #acct-menu .acct-head,
html[data-demo="1"] #acct-menu a[href="?step=server"],
html[data-demo="1"] .ac-run,
html[data-demo="1"] .ac-why { display: none !important; }

/* The link to the state page under the four views, split from them by a thin line. */
.side-app { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.side-app .nav-item { min-height: 40px; font-size: 14px; }

/* A tablet or a phone: the link to the state page becomes a small row under the four views. */
@media (max-width: 959px) {
  .side-app { margin: 0 -16px; padding: 2px 8px 4px; }
  .side-app .nav-list { justify-content: flex-end; gap: 2px; }
  .side-app .nav-list li { flex: none; }
  .side-app .nav-item { flex-direction: row; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: var(--r-s); font-size: 12.5px; }
  .side-app .nav-ic svg { width: 16px; height: 16px; }
}

/* The button "PRO version" of the top bar: disabled and blurred for now, with the crisp word "soon"; its tooltip says what PRO will bring. */
.pro-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px 0 14px; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; cursor: not-allowed; white-space: nowrap; }
.pro-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pro-name { filter: blur(1.2px); opacity: 0.8; background: var(--grad-strong); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 0.9rem; font-weight: var(--fw-bold); }
.pro-soon { color: var(--text-3); font-size: 11px; font-weight: var(--fw-medium); }

/* The account menu: a button with the first letter on the brand gradient and the login, the menu under it at the right edge. */
.acct { position: relative; }
.acct-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 2px 10px 2px 3px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: 0.9rem; font-weight: 600; }
.acct-btn:hover, .acct-btn[aria-expanded="true"] { background: var(--surface-2); }
.acct-av { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad-strong); color: var(--on-grad); font-size: 13px; font-weight: var(--fw-bold); }
.acct-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-chev { flex: none; width: 7px; height: 7px; margin: -3px 2px 0 0; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); }
.acct-btn[aria-expanded="true"] .acct-chev { margin-top: 3px; transform: rotate(-135deg); }
.acct-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; display: flex; flex-direction: column; min-width: 250px; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-pop); }
.acct-head { display: flex; flex-direction: column; gap: 2px; margin: 0 0 6px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); }
.acct-l { color: var(--text-3); font-size: var(--fs-xs); }
.acct-login { font-size: var(--fs-m); }
.acct-menu form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 10px; }
.acct-gl { color: var(--text-2); font-size: var(--fs-m); }
.acct-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border-radius: var(--r-s); color: var(--text); font-size: var(--fs-m); text-align: left; text-decoration: none; }
.acct-item:hover, .acct-item:focus-visible { background: var(--surface-2); }
.acct-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.acct-item svg { flex: none; color: var(--text-2); }

/* The version under the menu: a small muted link to the Updates view. */
.side-ver { display: inline-block; margin: 8px 0 0 24px; color: var(--text-3); font-size: var(--fs-xs); text-decoration: none; }
.side-ver:hover { color: var(--accent-text); text-decoration: underline; }
.side-ver:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 959px) {
  .side-ver-li { order: -1; align-self: center; margin-right: auto; }
  .side-ver { margin: 0 0 0 8px; }
}
/* A phone: the version line gives way (the row under the menu has no room for it). */
@media (max-width: 599px) {
  .side-ver-li { display: none; }
  .acct-name { display: none; }
  .acct-btn { padding-right: 8px; }
}