/* Account menu. The trigger sits on the navy bar. The panel follows light and dark. */

.user-menu { position: relative; display: inline-flex; }

.um-trig {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 3px 8px 3px 3px;
  border: 0; border-radius: 999px; background: transparent; color: #fff; font: inherit; cursor: pointer;
}
.um-trig:hover, .um-trig[data-open] { background: rgba(255,255,255,.08); }
.um-trig-name { max-width: 11rem; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.um-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .28s cubic-bezier(.16,1,.3,1); }
.um-trig[data-open] .um-chev { transform: rotate(180deg); opacity: 1; }
.um-face { display: grid; width: 32px; height: 32px; flex: none; place-items: center; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.um-trig .um-face { width: 34px; height: 34px; }

.um-panel {
  --um-bg: #2a2a2a; --um-fg: #f4f4f4; --um-muted: #9a9a9a; --um-line: rgba(255,255,255,.1);
  --um-hi: rgba(255,255,255,.08); --um-seg: rgba(255,255,255,.08); --um-thumb: #3a3a3a;
  position: fixed; z-index: 80; box-sizing: border-box; width: 17.5rem; max-width: calc(100vw - 24px);
  padding: 6px; border: 1px solid var(--um-line); border-radius: 16px; background: var(--um-bg); color: var(--um-fg);
  box-shadow: 0 16px 40px rgba(0,0,0,.35); text-align: left; outline: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: 0; text-transform: none;
  transform-origin: var(--origin-x, 100%) var(--origin-y, 0);
  animation: um-in .28s cubic-bezier(.16,1,.3,1);
}
html[data-theme="light"] .um-panel {
  --um-bg: #fff; --um-fg: #161616; --um-muted: #6b6b6b; --um-line: rgba(0,0,0,.1);
  --um-hi: rgba(0,0,0,.06); --um-seg: rgba(0,0,0,.06); --um-thumb: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
.um-who { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
.um-id { display: grid; min-width: 0; gap: 2px; }
.um-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.um-name, .um-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-name { font-size: 14px; font-weight: 650; }
.um-plan { flex: none; height: 18px; padding: 0 6px; border: 1px solid var(--um-line); border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 16px; color: var(--um-muted); }
.um-email { font-size: 12px; color: var(--um-muted); }
.um-list { position: relative; }
.um-mark { position: absolute; left: 0; right: 0; top: 0; border-radius: 8px; background: var(--um-hi); pointer-events: none; }
.um-mark[data-ready] { transition: transform .26s cubic-bezier(.16,1,.3,1), height .26s cubic-bezier(.16,1,.3,1); }
.um-item, .um-row {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 0 8px;
  border: 0; border-radius: 8px; background: transparent; color: inherit; font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left; cursor: pointer;
  text-decoration: none;
}
.um-item { height: 36px; }
.um-row { height: 44px; cursor: default; }
.um-item:focus, .um-seg:focus { outline: none; }
.um-item:focus-visible, .um-seg:focus-visible { outline: 2px solid #4747fc; outline-offset: 2px; }
.um-icon { display: grid; width: 16px; height: 16px; flex: none; place-items: center; color: var(--um-muted); }
.um-icon svg, .um-seg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.um-label { flex: 1; min-width: 0; }
.um-keys { display: inline-flex; gap: 1px; margin-left: auto; color: var(--um-muted); font-size: 12px; }
.um-key { min-width: 1em; text-align: center; }
.um-rule { height: 1px; margin: 4px 0; background: var(--um-line); }
.um-segs { --seg: 28px; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: var(--seg); height: 28px; padding: 2px; border-radius: 9px; background: var(--um-seg); }
.um-thumb { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 2px; width: var(--seg); border-radius: 7px; background: var(--um-thumb); box-shadow: 0 1px 2px rgba(0,0,0,.18); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .28s cubic-bezier(.16,1,.3,1); }
.um-seg { position: relative; z-index: 1; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--um-muted); cursor: pointer; }
.um-seg[aria-checked="true"] { color: var(--um-fg); }
.um-spin { animation: um-spin .8s linear infinite; }
.um-scrim { position: fixed; inset: 0; z-index: 79; background: rgba(0,0,0,.32); }
.um-sheet { top: auto; right: 0; bottom: 0; left: 0; z-index: 80; width: auto; max-width: none; max-height: 88dvh; overflow: auto; border-radius: 18px 18px 0 0; padding: 8px 10px calc(12px + env(safe-area-inset-bottom)); animation: um-sheet .32s cubic-bezier(.16,1,.3,1); }
.um-sheet .um-item { height: 46px; font-size: 16px; }
.um-sheet .um-row { height: 52px; }
.um-sheet .um-segs { --seg: 40px; height: 36px; }
.um-sheet .um-keys { display: none; }
.um-handle { display: none !important; }
.um-sheet .um-handle { display: block !important; width: 36px; height: 5px; margin: 2px auto 10px; border-radius: 999px; background: var(--um-line); cursor: grab; touch-action: none; }
@keyframes um-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes um-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes um-spin { to { transform: rotate(360deg); } }
@media (max-width: 639px) {
  .um-trig { padding-right: 3px; }
  .um-trig-name, .um-chev { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .um-panel, .um-chev, .um-thumb, .um-mark, .um-spin { animation: none; transition: none; }
}
html[data-motion="off"] .um-panel,
html[data-motion="off"] .um-chev,
html[data-motion="off"] .um-thumb,
html[data-motion="off"] .um-mark,
html[data-motion="off"] .um-spin { animation: none; transition: none; }

.um-icon .hi-svg, .um-seg .hi-svg { width: 16px; height: 16px; overflow: visible; stroke: none; }
.um-seg .hi-svg { width: 15px; height: 15px; }
.hi-svg path, .hi-svg circle { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hi-svg .hi-fill { fill: currentColor; stroke: none; }
.um-icon, .um-seg { overflow: visible; }
.um-item:hover .um-icon,
.um-item:focus-visible .um-icon,
.um-row:hover .um-icon { color: var(--um-fg); }
.hi-bell, .hi-clapper, .hi-needle, .hi-gear, .hi-help-ring, .hi-help-mark, .hi-help-dot, .hi-door, .hi-arrow, .hi-sun-core, .hi-sun-rays, .hi-screen, .hi-star { transform-box: fill-box; transform-origin: center; }
.hi-bell { transform-origin: center top; }
.hi-star { visibility: hidden; }
.um-item:hover .hi-bell, .um-item:focus-visible .hi-bell { animation: hi-bell .9s ease-in-out; }
.um-item:hover .hi-clapper, .um-item:focus-visible .hi-clapper { animation: hi-clapper .9s ease-in-out; }
.um-item:hover .hi-needle, .um-item:focus-visible .hi-needle { animation: hi-needle 1.4s ease-in-out; }
.um-item:hover .hi-gear, .um-item:focus-visible .hi-gear { animation: hi-gear .92s cubic-bezier(.77,0,.175,1); }
.um-item:hover .hi-help-ring, .um-item:focus-visible .hi-help-ring { animation: hi-help-ring .62s cubic-bezier(.23,1,.32,1); }
.um-item:hover .hi-help-mark, .um-item:focus-visible .hi-help-mark { animation: hi-help-mark .62s cubic-bezier(.23,1,.32,1); }
.um-item:hover .hi-help-dot, .um-item:focus-visible .hi-help-dot { animation: hi-help-dot .62s cubic-bezier(.23,1,.32,1); }
.um-item:hover .hi-door, .um-item:focus-visible .hi-door { animation: hi-door .56s cubic-bezier(.23,1,.32,1); }
.um-item:hover .hi-arrow, .um-item:focus-visible .hi-arrow { animation: hi-arrow .58s cubic-bezier(.23,1,.32,1) .04s; }
.um-seg:hover .hi-sun-core, .um-seg:focus-visible .hi-sun-core,
.um-row:hover .hi-sun-core { animation: hi-sun-core 1.15s cubic-bezier(.77,0,.175,1) infinite; }
.um-seg:hover .hi-sun-rays, .um-seg:focus-visible .hi-sun-rays,
.um-row:hover .hi-sun-rays { animation: hi-sun-rays 1.15s cubic-bezier(.77,0,.175,1) infinite; }
.um-seg:hover .hi-star, .um-seg:focus-visible .hi-star { animation: hi-star 1.3s cubic-bezier(.77,0,.175,1) infinite; }
.um-seg:hover .hi-star-1, .um-seg:focus-visible .hi-star-1 { animation-delay: .24s; }
.um-seg:hover .hi-star-2, .um-seg:focus-visible .hi-star-2 { animation-delay: .48s; }
.um-seg:hover .hi-screen, .um-seg:focus-visible .hi-screen { animation: hi-screen .58s cubic-bezier(.77,0,.175,1); }
@keyframes hi-bell { 0% { transform: rotate(0); } 18% { transform: rotate(-14deg); } 38% { transform: rotate(11deg); } 56% { transform: rotate(-8deg); } 72% { transform: rotate(5deg); } 87% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
@keyframes hi-clapper { 0% { transform: translateX(0); } 24% { transform: translateX(2.2px); } 44% { transform: translateX(-1.8px); } 62% { transform: translateX(1.2px); } 78% { transform: translateX(-0.7px); } 90% { transform: translateX(0.3px); } 100% { transform: translateX(0); } }
@keyframes hi-needle { 0% { transform: rotate(0); } 30% { transform: rotate(150deg); } 62% { transform: rotate(340deg); } 82% { transform: rotate(375deg); } 100% { transform: rotate(360deg); } }
@keyframes hi-gear { 0% { transform: rotate(0); } 72% { transform: rotate(202deg); } 90% { transform: rotate(177.5deg); } 100% { transform: rotate(180deg); } }
@keyframes hi-help-ring { 0%, 100% { transform: scale(1); } 20% { transform: scale(.98); } 50% { transform: scale(1.018); } 76% { transform: scale(.996); } }
@keyframes hi-help-mark { 0%, 100% { transform: rotate(0) translateY(0); } 20% { transform: rotate(-10deg) translateY(-0.2px); } 48% { transform: rotate(7deg) translateY(0.1px); } 74% { transform: rotate(-2deg) translateY(0); } }
@keyframes hi-help-dot { 0%, 100% { transform: scale(1); } 20% { transform: scale(.88); } 48% { transform: scale(1.16); } 74% { transform: scale(.94); } }
@keyframes hi-door { 0% { transform: translateX(0) scaleX(1); } 40% { transform: translateX(-0.7px) scaleX(.96); } 70% { transform: translateX(0.2px) scaleX(1.01); } 100% { transform: translateX(0) scaleX(1); } }
@keyframes hi-arrow { 0% { transform: translateX(-1px); } 40% { transform: translateX(3.2px); } 70% { transform: translateX(-0.35px); } 100% { transform: translateX(0); } }
@keyframes hi-sun-core { 0%, 100% { transform: scale(1); } 12% { transform: scale(.9); } 32% { transform: scale(1.16); } 58% { transform: scale(1.02); } }
@keyframes hi-sun-rays { 0%, 100% { transform: rotate(0) scale(1); } 12% { transform: rotate(-7deg) scale(.82); } 34% { transform: rotate(5deg) scale(1.18); } 62% { transform: rotate(-2deg) scale(1.04); } }
@keyframes hi-star { 0%, 100% { visibility: hidden; transform: scale(.55); } 20%, 80% { visibility: visible; transform: scale(1); } 50% { visibility: visible; transform: scale(.78); } }
@keyframes hi-screen { 0%, 100% { transform: scale(1); } 18% { transform: scale(.86); } 50% { transform: scale(1.18); } 78% { transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .hi-svg, .hi-svg * { animation: none; }
}
html[data-motion="off"] .hi-svg, html[data-motion="off"] .hi-svg * { animation: none; }