/* The app switcher in the brand bar (switcher.js). A copy of centralised_admin/client/switcher.css: keep every copy the same. */
.appswitch { position: relative }
.appswitch-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); color: #FFFFFF;
  border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer }
.appswitch-btn:hover, .appswitch-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .18) }
.appswitch-grid { display: grid; grid-template-columns: 5px 5px; gap: 2px }
.appswitch-grid i { width: 5px; height: 5px; border-radius: 1px; background: currentColor; display: block }
.appswitch-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; min-width: 250px; max-width: calc(100vw - 32px);
  background: var(--surface, #FFFFFF); color: var(--ink, #171B25); border: 1px solid var(--line, #DCE2EA); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 6px; display: grid; gap: 2px }
.appswitch-menu[hidden] { display: none }
.appswitch-title { margin: 4px 10px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #5A6472) }
.appswitch-menu a { display: grid; padding: 8px 10px; border-radius: 7px; color: inherit; text-decoration: none; line-height: 1.3 }
.appswitch-menu a:hover, .appswitch-menu a:focus-visible { background: var(--accent-soft, #DCEFF2) }
.appswitch-menu a b { font-weight: 600; font-size: 14px }
.appswitch-menu a small { color: var(--muted, #5A6472); font-size: 12.5px }
.appswitch-menu a[aria-current="page"] { cursor: default; background: var(--sunken, #EBEFF4) }
.appswitch-menu a[aria-current="page"] b::after { content: " · you're here"; font-weight: 400; color: var(--muted, #5A6472) }