/* The Upper Room UI, piece 6a. */
/* ---- sheet handles: a finger-sized grip that drags instead of scrolling ---- */
#panel .pdrag{position:relative;touch-action:none;cursor:grab}
#panel .pdrag::before{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-16px}
#panel[aria-label="Create account"] .pdrag,#panel[aria-label="Sign in"] .pdrag{visibility:hidden;pointer-events:none}
#panel,#sheet,.ts-sheet{overscroll-behavior:contain}
#scrim{touch-action:none}
/* ---- the account tray ---- */
.ut{position:fixed;inset:0;z-index:30;pointer-events:none}
.ut.on{pointer-events:auto}
.ut-sc{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .32s ease;touch-action:none}
.ut.on .ut-sc{opacity:1}
.ut-pn{position:absolute;top:0;bottom:0;left:0;width:min(86vw,340px);background:var(--bg,#000);color:#e7e9ea;
  border-right:.5px solid rgba(255,255,255,.08);box-shadow:0 0 44px rgba(0,0,0,.55);
  transform:translateX(-104%);transition:transform .32s cubic-bezier(.32,.72,0,1);
  overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 20px) 0 calc(env(safe-area-inset-bottom) + 20px)}
.ut.on .ut-pn{transform:none}
.ut-top{padding:0 24px 16px}
.ut-av{display:block;width:44px;height:44px;border-radius:50%;overflow:hidden;border:0;padding:0;background:none;cursor:pointer}
.ut-av img,.ut-av svg{display:block;width:100%;height:100%;object-fit:cover}
.ut-who{display:block;width:100%;text-align:left;background:none;border:0;padding:12px 0 0;color:inherit;font:inherit;cursor:pointer}
.ut-who b{display:flex;align-items:center;gap:4px;font-size:19px;font-weight:800;line-height:1.2}
.ut-who b .badge{width:18px;height:18px;flex:none}
.ut-who span{display:block;color:#71767b;font-size:15px;margin-top:2px}
.ut-st{display:flex;gap:18px;margin-top:12px;font-size:15px;color:#71767b}
.ut-st b{color:#e7e9ea;font-weight:700;margin-right:4px}
.ut-pill{margin-top:16px;border:0;border-radius:999px;padding:10px 22px;background:#e7e9ea;color:#0f1419;font:inherit;font-weight:800;font-size:15px;cursor:pointer}
.ut-list{display:flex;flex-direction:column;padding:4px 0}
.ut-row{display:flex;align-items:center;gap:22px;width:100%;padding:14px 24px;background:none;border:0;color:#e7e9ea;font:inherit;
  font-size:21px;font-weight:800;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s}
.ut-row:active{background:rgba(255,255,255,.06)}
.ut-i{width:26px;height:26px;flex:none;display:grid;place-items:center}
.ut-i svg{width:26px;height:26px}
.ut-row.sm{font-size:17px;font-weight:600;padding:12px 24px}
.ut-row.sm .ut-i svg{width:22px;height:22px}
.ut-hr{height:.5px;background:rgba(255,255,255,.1);margin:10px 24px}
.ut-ft{margin:auto 0 0;padding:18px 24px 0;color:#536471;font-size:13px}
.ut.on .ut-row{animation:utin .38s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 35ms + 70ms)}
@keyframes utin{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ut-pn,.ut-sc{transition:none}.ut.on .ut-row{animation:none}}