/* Vuli web UI - styles of the accounts screens (user menu, show-once secret, sign-in notes) and
   of the two switchers (DECISIONS #186 / #190).
   What: the user menu in the top bar (a disclosure button and its panel), the code box that
   shows a one-time secret, the small note above the sign-in form, the top-bar PROJECT pill and
   its menu (the owner's mockup), and the sidebar ORGANIZATION switcher. Uses the tokens of
   style.css only; no inline styles anywhere (the CSP forbids them). */

.user-menu{position:relative}
button.who{font:inherit;cursor:pointer;color:var(--text)}
button.who:hover{background:var(--ctl-hover)}
button.who:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.um-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:240px;max-width:min(320px,90vw);background:var(--menu-bg);border:1px solid var(--border-hi);border-radius:12px;box-shadow:0 12px 30px rgba(16,32,72,.16);padding:12px;display:flex;flex-direction:column;gap:6px}
.um-panel[hidden]{display:none}
.um-name{margin:0;font-weight:750;overflow-wrap:anywhere}
.um-kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0 0 6px;font-size:13px}
.um-kv dt{color:var(--muted)}
.um-kv dd{margin:0;overflow-wrap:anywhere}
.um-item{all:unset;box-sizing:border-box;cursor:pointer;padding:8px 10px;border-radius:8px;font-weight:650;color:var(--accent);display:block}
.um-item:hover{background:var(--ctl-hover)}
.um-item:focus-visible{outline:3px solid var(--focus);outline-offset:0}
.secret{display:block;font-family:var(--mono);font-size:15px;padding:12px 14px;margin:6px 0 12px;border:1px solid var(--border-hi);border-radius:10px;background:var(--inset-bg);overflow-wrap:anywhere;user-select:all}
.secret:focus-visible{outline:3px solid var(--focus)}
.signin .note:empty{display:none}

/* The PROJECT pill (DECISIONS #186; since #190 it selects a project INSIDE the current
   organization): the pill and menu of the owner's mockup
   docs/mockups/ui-mockup-central-real-data.html (.proj-btn / .menu, its lines 220-240 and
   705-709, 787-790), with this UI's tokens. The dot is neutral (the mockup colours it by the
   project's scan state, which this API does not give per project). On a phone the pill sits in
   the navigation row (app.js placeProject), the label is hidden. */
/* The top bar holds Back, the breadcrumb, the pill and the user button; at ~1024 px with a long
   breadcrumb they do not fit on one line, so the right group shrinks (the names get an
   ellipsis) and, when that is not enough, wraps to its own line, still on the right. */
.topbar{flex-wrap:wrap}
.tb-right{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto;margin-left:auto}
.tb-right .user-menu,.tb-right .proj-slot{min-width:0}
.proj-slot:empty{display:none}
.proj-wrap{position:relative;flex:0 1 auto;min-width:0}
.proj-btn{font:inherit;font-weight:700;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px;border:1px solid var(--border-hi);background:var(--ctl-bg);color:var(--text);cursor:pointer;box-shadow:var(--glow);max-width:240px;min-width:0}
.proj-btn:hover{border-color:var(--accent)}
.proj-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.proj-btn .pl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.proj-btn .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-btn svg{width:14px;height:14px;flex:none}
.proj-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.proj-wrap .dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;background:var(--pending)}
.proj-wrap .menu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;width:300px;max-width:calc(100vw - 24px);background:var(--menu-bg);border:1px solid var(--border-hi);border-radius:12px;box-shadow:0 12px 30px rgba(16,32,72,.16);padding:6px}
.proj-wrap .menu[hidden]{display:none}
.menu-h{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--faint);padding:6px 10px}
.menu [role="menuitemradio"]{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:14px 1fr auto;column-gap:10px;align-items:center;padding:9px 10px;border-radius:8px;color:var(--text)}
.menu [role="menuitemradio"]:hover,.menu [role="menuitemradio"]:focus-visible{background:var(--ctl-hover)}
.menu [role="menuitemradio"]:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.menu [aria-checked="true"]{background:var(--accent-soft)}
.menu .pm-name{font-weight:650;font-family:var(--mono);overflow-wrap:anywhere}
.menu .sub{grid-column:2;font-size:12px;color:var(--muted)}
.menu .tick{grid-row:1/3;grid-column:3;color:var(--accent)}
.menu .tick svg{width:16px;height:16px}
.menu .pm-label{font-weight:650;overflow-wrap:anywhere}  /* a project name: words, not an id */
/* The ORGANIZATION switcher (DECISIONS #190, owner brief 2026-11-02): in the sidebar under the
   logo, where the New application button used to be. The same tokens, border and menu as the
   pill; one organization = the name alone (.org-one, nothing to press). The menu opens below
   it, left-aligned with the sidebar. On a phone it sits in the navigation row after the logo,
   label hidden like the pill's. */
.org-wrap{position:relative;min-width:0}
.org-one,.org-btn{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;min-width:0;padding:7px 11px;border-radius:10px;border:1px solid var(--border-hi);background:var(--ctl-bg);color:var(--text)}
.org-btn{font:inherit;cursor:pointer;text-align:left;box-shadow:var(--glow)}
.org-btn:hover{border-color:var(--accent)}
.org-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.org-one{flex-direction:column;align-items:flex-start;gap:0}
.org-btn .ob-text{display:flex;flex-direction:column;min-width:0;flex:1}
.org-wrap .pl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.org-wrap .pn{font-family:var(--mono);font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.org-btn svg{width:14px;height:14px;flex:none}
.org-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.org-wrap .dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;background:var(--pending)}
.org-wrap .menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:280px;max-width:calc(100vw - 24px);background:var(--menu-bg);border:1px solid var(--border-hi);border-radius:12px;box-shadow:0 12px 30px rgba(16,32,72,.16);padding:6px}
.org-wrap .menu[hidden]{display:none}
.scope-note{margin:4px 0 0}
/* Settings > Projects (view-projects.js): text lines inside a flush card line up with its heading */
.pj-pad{padding:0 12px}
@media (max-width:760px){
  .side .brand{order:1}
  .side .btn-new{order:2}
  .side .org-wrap{order:2;flex:0 1 auto;max-width:150px}
  /* the word "Organization" stays for screen readers (the single name has no aria-label) */
  .org-wrap .pl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .org-one,.org-btn{padding:6px 10px}
  .side .proj-slot{order:3;margin-left:auto;min-width:0}
  .side .nav{order:4}
  .side .proj-slot .menu{right:0}
  .proj-btn{padding:6px 10px;max-width:220px}
  .proj-btn .pl{display:none}
  .tb-right{margin-left:auto}
}
.kv ul.plain{list-style:none;margin:0;padding:0}