/* Profiles (2026-10-14, PROFILES-PLAN.md): Who's working?, PIN dialog, avatar chooser, switch menu. */
.profile-face { display: inline-flex; flex: none; overflow: hidden; align-items: flex-end; justify-content: center; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset; }
.profile-face img { width: 100%; height: 100%; display: block; }

body.picker-screen { overflow: hidden; }
.picker { position: fixed; inset: 0; z-index: 50; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 0 24px 40px;
  font-family: "IBM Plex Sans", system-ui, sans-serif; color: #22273E; background: linear-gradient(180deg, #ECEEF8 0%, #F4F5FB 50%, #EAEDF7 100%); }
:root[data-theme="dark"] .picker { color: #F1F3FF; background: linear-gradient(180deg, #1B1F2C 0%, #191D29 50%, #1D2130 100%); }
.picker-head { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 8px; font-size: 15px; font-weight: 600; color: #555E77; }
:root[data-theme="dark"] .picker-head { color: #BDC5DC; }
.picker h1 { margin: 56px 0 0; font-size: 36px; line-height: 42px; font-weight: 600; letter-spacing: -.015em; text-align: center; }
.picker-search { margin-top: 28px; width: min(420px, 100%); }
.picker-grid { margin-top: 56px; width: 100%; max-width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 44px 40px; }
.picker-tile { width: 116px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit; border-radius: 34px; }
.picker-tile .profile-face { margin-bottom: 8px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 20px rgba(34,39,62,.06); transition: transform .15s ease, box-shadow .15s ease; }
.picker-tile:hover .profile-face, .picker-tile:focus-visible .profile-face { transform: translateY(-2px); box-shadow: 0 0 0 3px #59649D, 0 12px 24px rgba(34,39,62,.1); }
.picker-tile:focus-visible { outline: none; }
.picker-tile strong { font-size: 16px; line-height: 21px; font-weight: 600; max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-tile strong.muted, .picker-tile small { color: #5D667F; }
:root[data-theme="dark"] .picker-tile strong.muted, :root[data-theme="dark"] .picker-tile small { color: #A9B2CA; }
.picker-tile small { font-size: 13px; line-height: 17px; display: inline-flex; align-items: center; gap: 4px; }
.picker-add { width: 108px; height: 108px; margin-bottom: 8px; border-radius: 34px; border: 1.5px dashed #B9BFD6; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 300; color: #7A82A0; box-sizing: border-box; }
.picker-manage { margin-top: 64px; font-size: 14px; font-weight: 600; min-height: 44px; color: #555E77; }
:root[data-theme="dark"] .picker-manage { color: #BDC5DC; }
.picker-status { margin-top: 120px; color: #5D667F; }
.picker-gate { display: grid; gap: 4px; }
.picker-gate-row { display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 12px; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.picker-gate-row:hover { background: var(--paper-2); }
.picker-gate-row span { display: grid; } .picker-gate-row small { color: var(--ink-3); }
@media (max-width: 560px) { .picker h1 { margin-top: 32px; font-size: 28px; } .picker-grid { margin-top: 36px; gap: 28px 20px; } .picker-tile { width: 96px; } .picker-tile .profile-face { width: 88px !important; height: 88px !important; border-radius: 28px !important; } .picker-add { width: 88px; height: 88px; border-radius: 28px; } }

.pin-dialog { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pin-dialog h3 { margin: 14px 0 2px; font-size: 22px; font-weight: 600; }
.pin-prompt { margin: 0; color: var(--ink-2); font-size: 14px; }
.pin-dots { display: flex; gap: 18px; margin-top: 22px; }
.pin-dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--ink-3); box-sizing: border-box; }
.pin-dots i.on { background: var(--ink); border-color: var(--ink); }
.pin-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pin-dialog .err { min-height: 20px; margin: 12px 0 0; }
.pin-dialog .err:empty { visibility: hidden; }
.pin-pad { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 64px); gap: 12px 24px; }
.pin-key { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 22px; font-variant-numeric: tabular-nums; cursor: pointer; }
.pin-key:hover { background: var(--paper-2); }
.pin-hint { margin: 18px 0 0; max-width: 300px; font-size: 12px; color: var(--ink-3); }

.avatar-picker { display: grid; gap: 18px; justify-items: center; }
.avatar-tints { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.avatar-tint { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; }
.avatar-tint.on { border-color: #59649D; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px #59649D; }
.avatar-grid { display: grid; grid-template-columns: repeat(4, 70px); gap: 12px; }
.avatar-choice { padding: 1px; border: 2.5px solid transparent; border-radius: 22px; background: none; cursor: pointer; }
.avatar-choice.on { border-color: #59649D; }

.switch-menu { display: grid; gap: 18px; }
.switch-me { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; }
.switch-me > div { flex: 1; display: grid; } .switch-me small { color: var(--ink-3); }
.switch-label { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.switch-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.switch-other { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; }
.switch-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.profile-cell { display: flex; align-items: center; gap: 10px; }
.profile-cell > span:last-child { display: grid; } .profile-cell small { color: var(--ink-3); }
.activity-when { display: flex; align-items: center; gap: 10px; }
.activity-when > div { display: grid; }
#account-avatar .profile-face { width: 100% !important; height: 100% !important; }
.profiles-card { grid-column: 1 / -1; }