/* Switch account: the accounts signed in on this device. Same card, text and color scale as the Scent Studio. */
.account-switcher { width: min(480px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--bg-surface, var(--bg-card)); color: var(--ink); }
.account-switcher .dialog-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.account-switcher .dialog-top h2 { margin: 4px 0 0; font: 400 1.75rem/1.12 var(--studio-serif, Georgia, serif); letter-spacing: -.015em; outline: none; }
.account-switcher .eyebrow { font: 650 .6875rem/1.3 var(--font-ui, Inter, system-ui, sans-serif); letter-spacing: .14em; color: var(--accent-color, var(--muted)); }
.switcher-hint { margin: 0 0 14px; font-size: .8125rem; line-height: 1.5; color: var(--muted); min-height: 1.2em; }
.switcher-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.switcher-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); }
.switcher-row.is-current { border-color: var(--accent-color); background: var(--tint, var(--bg-card)); }
.switcher-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent-color) 30%, var(--bg-card)); font: 400 1.25rem/1 var(--studio-serif, Georgia, serif); }
.switcher-who { display: grid; gap: 2px; min-width: 0; }
.switcher-who strong { font-size: 1.0625rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher-who small { font-size: .8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher-badge { padding: 4px 10px; border-radius: 99px; font-size: .75rem; font-weight: 650; background: color-mix(in srgb, #2f8f5b 18%, transparent); color: color-mix(in srgb, #2f8f5b 82%, var(--ink)); }
.switcher-go { min-height: 40px; padding: 0 18px; border: 0; border-radius: 99px; background: var(--ink); color: var(--bg-main, Canvas); font: inherit; font-size: .875rem; font-weight: 650; cursor: pointer; }
.switcher-remove { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.switcher-remove:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.switcher-go:focus-visible, .switcher-remove:focus-visible, .switcher-actions button:focus-visible { outline: 2px solid var(--accent-color, currentColor); outline-offset: 2px; }
.switcher-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 14px; font-size: .875rem; color: var(--muted); text-align: center; }
.switcher-status { margin: 12px 0 0; min-height: 1.3em; font-size: .8125rem; color: var(--muted); }
.switcher-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.account-switcher[data-busy] .switcher-row { opacity: .7; }
@media (max-width: 420px) { .switcher-row { grid-template-columns: auto minmax(0, 1fr) auto; } .switcher-remove { grid-column: 3; grid-row: 1; } .switcher-go, .switcher-badge { grid-column: 1 / -1; justify-self: stretch; text-align: center; } }
.account-switcher .dialog-top { padding: 0; border: 0; background: none; }