/* ========================================================================== Profile side tray — slides in from the right, holds account details + wallet link + logout. Hidden by default; toggled via [aria-hidden] on #profile-tray and the .tray-open class on . ========================================================================== */ #profile-tray { position: fixed; inset: 0; z-index: 2200; pointer-events: none; visibility: hidden; } #profile-tray[aria-hidden="false"] { pointer-events: auto; visibility: visible; } .profile-tray-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); opacity: 0; transition: opacity 220ms ease; } #profile-tray[aria-hidden="false"] .profile-tray-backdrop { opacity: 1; } .profile-tray-panel { position: absolute; top: 0; right: 0; height: 100vh; width: min(380px, 92vw); background: linear-gradient(180deg, var(--iron-2) 0%, var(--iron-1) 100%); border-left: 1px solid var(--iron-edge); box-shadow: -24px 0 48px rgba(0, 0, 0, 0.5), -1px 0 0 rgba(212, 175, 55, 0.08) inset; transform: translateX(100%); transition: transform 280ms var(--ease-overshoot, cubic-bezier(.22, 1.55, .36, 1)); display: flex; flex-direction: column; color: var(--text-primary); font-family: 'Inter', -apple-system, system-ui, sans-serif; } #profile-tray[aria-hidden="false"] .profile-tray-panel { transform: translateX(0); } .profile-tray-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 18px; border-bottom: 1px solid rgba(74, 74, 82, 0.5); } .profile-tray-header h2 { font-family: 'Big Shoulders Display', 'Inter', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; color: var(--gold-2); } .profile-tray-close { width: 32px; height: 32px; border-radius: 4px; background: transparent; border: 1px solid var(--iron-edge); color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer; transition: all 120ms ease; } .profile-tray-close:hover { color: var(--gold-2); border-color: var(--gold-3); } .profile-tray-body { flex: 1; overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 20px; } .profile-section { display: flex; flex-direction: column; gap: 8px; } .profile-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a7f5c; font-weight: 600; } .profile-value { font-size: 14px; color: var(--text-primary); word-break: break-all; background: var(--iron-3); border: 1px solid var(--iron-edge); border-radius: 4px; padding: 10px 12px; } .profile-value.mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: 12px; } .profile-value.empty { color: #6e6745; font-style: italic; } .profile-action-btn { width: 100%; padding: 10px 14px; border-radius: 4px; border: 1px solid var(--iron-edge); background: transparent; color: var(--text-dim); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: all 140ms ease; } .profile-action-btn:hover { color: var(--gold-2); border-color: var(--gold-3); } .profile-action-btn.is-primary { background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-3) 100%); border-color: var(--gold-2); color: var(--iron-1); box-shadow: 0 0 0 1px rgba(245, 230, 168, 0.3) inset; } .profile-action-btn.is-primary:hover { background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold-1) 100%); } .profile-action-btn[disabled] { cursor: not-allowed; opacity: 0.5; } /* Device pairing block — QR + 6-char code + TTL + cancel */ .device-qr { display: block; width: 100%; max-width: 240px; aspect-ratio: 1; margin: 6px auto 10px; border-radius: 4px; background: #fff; padding: 10px; border: 1px solid var(--gold-3); box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.2) inset, 0 6px 18px rgba(0, 0, 0, 0.5); } .device-pair-code { text-align: center; font-size: 22px; letter-spacing: 0.18em; font-weight: 800; color: var(--gold-2); } .device-pair-hint { font-size: 11px; color: #8a7f5c; line-height: 1.5; margin: 8px 0 12px; } .device-pair-hint strong { color: var(--text-primary); } .profile-error { font-size: 12px; color: #d96a6a; background: rgba(217, 106, 106, 0.08); border: 1px solid rgba(217, 106, 106, 0.3); border-radius: 4px; padding: 8px 10px; } .profile-tray-footer { padding: 18px 24px 24px; border-top: 1px solid rgba(74, 74, 82, 0.5); } .profile-logout-btn { width: 100%; padding: 12px 16px; border-radius: 4px; border: 1px solid rgba(217, 106, 106, 0.4); background: rgba(217, 106, 106, 0.08); color: #e0a4a4; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: all 140ms ease; } .profile-logout-btn:hover { background: rgba(217, 106, 106, 0.18); color: #f5b8b8; border-color: rgba(217, 106, 106, 0.7); } /* Top-nav button avatar state when authenticated. Lock both buttons to an EXACT height (not min-height) so the avatar variant can't push the box taller than the "Get the App" pill next to it on any viewport. Padding is unset — line-height + flex centering handles vertical alignment. */ .top-nav-pill, .top-nav-login { box-sizing: border-box; height: 40px; line-height: 1; } .top-nav-login[data-state="authed"] { padding-left: 8px; } .top-nav-login .nav-avatar { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-1), var(--gold-3)); color: var(--iron-1); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; line-height: 1; flex-shrink: 0; } .top-nav-login[data-state="authed"] svg { display: none; } .top-nav-login[data-state="authed"] > span:not(.nav-avatar) { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 768px) { .top-nav-pill, .top-nav-login { height: 32px; } .top-nav-login .nav-avatar { width: 16px; height: 16px; font-size: 9px; } .top-nav-login[data-state="authed"] > span:not(.nav-avatar) { max-width: 10ch; } .profile-tray-panel { width: 100vw; } }