/* Turnkey 9-dot app switcher · shared part v1 (24 Oct 2026) · owner: Chief Designer
   Needs Template 1 tokens.css. Spec: ../README.md "App switcher" + /workspace/projects/design/portal-design-spec.md S2. */
.tk-sw { position: relative; display: inline-flex; }
.tk-sw-btn { width: 36px; height: 36px; border-radius: var(--radius-control); border: 1px solid transparent; background: transparent; color: var(--c-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0;
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
.tk-sw-btn:hover, .tk-sw-btn[aria-expanded="true"] { background: var(--c-surface); border-color: var(--c-border); }
.tk-sw-btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.tk-sw-btn svg { width: 18px; height: 18px; fill: currentColor; }
.tk-sw-pop { position: absolute; right: 0; top: calc(100% + 12px); width: 320px; padding: 8px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-card); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.12); z-index: 50;
  opacity: 0; transform: translateY(-4px); visibility: hidden;
  transition: opacity var(--motion-base) var(--ease-enter), transform var(--motion-base) var(--ease-enter), visibility 0s linear var(--motion-base); }
.tk-sw-pop.open { opacity: 1; transform: none; visibility: visible; transition: opacity var(--motion-base) var(--ease-enter), transform var(--motion-base) var(--ease-enter); }
.tk-sw-head { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--c-text-muted); padding: 6px 10px 8px; }
.tk-sw-list { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
.tk-sw-item { position: relative; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 10px; border-radius: var(--radius-control); text-decoration: none; color: var(--c-text); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; transition: background var(--motion-fast) var(--ease-standard); }
.tk-sw-item:hover, .tk-sw-item:focus-visible, .tk-sw-item[aria-current="page"] { background: var(--c-surface); }
.tk-sw-item:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -2px; }
.tk-sw-item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-turnkey-red); }
.tk-sw-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-sw-current { font-size: 12px; font-weight: 600; color: var(--c-text-muted); }
.tk-sw-sep { height: 1px; background: var(--c-border); margin: 6px 4px; }
.tk-sw-icon { width: 32px; height: 32px; border-radius: var(--radius-control); background: var(--c-surface-2); color: var(--c-text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tk-sw-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-sw-icon img { width: 22px; height: 22px; }
.tk-sw-pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--radius-pill); font-size: var(--fs-pill); font-weight: 600; white-space: nowrap; }
.tk-sw-pill svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tk-sw-pill.attention { background: var(--c-warning-bg); color: var(--c-warning); }
.tk-sw-pill.action { background: var(--c-negative-bg); color: var(--c-negative); }
.tk-sw .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tk-sw .tk-dark { display: none; }
html[data-theme="dark"] .tk-sw .tk-light { display: none; }
html[data-theme="dark"] .tk-sw .tk-dark { display: inline; }
@media (max-width: 767px) {
  .tk-sw-pop { position: fixed; left: 12px; right: 12px; top: 62px; width: auto; }
  .tk-sw-item { height: 48px; }
}