/* Account sheet: sign-in, account details and the Telegram connection flow. */

.sheet {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--radius-card);
  background: rgb(255 255 255 / 0.78);
  color: var(--ink);
  box-shadow: var(--shadow-lift), inset 0 1px 0 var(--glass-highlight), inset 0 0 0 1px rgb(255 255 255 / 0.6);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
}

.sheet[open] {
  animation: sheet-in var(--settle) var(--ease) both;
}

.sheet::backdrop {
  background: rgb(6 38 59 / 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fade-in var(--medium) var(--ease) both;
}

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 12px 4px 24px;
}

.sheet__head h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.sheet__body {
  display: grid;
  gap: 14px;
  padding: 8px 24px 24px;
}

.sheet__body:empty {
  display: none;
}

.sheet__text {
  color: var(--ink-muted);
  line-height: 1.45;
}

.sheet__text--lead {
  color: var(--ink);
}

.sheet__actions {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.sheet__error {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--bad-tint);
  color: var(--bad-ink);
  font-size: var(--text-sm);
}

.sheet__status {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--busy-tint);
  color: var(--busy-ink);
  font-size: var(--text-sm);
}

.facts {
  display: grid;
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--glass-well);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7);
}

.facts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 8px 16px;
}

.facts > div + div {
  border-top: 1px solid var(--hairline);
}

.facts dt {
  color: var(--ink-muted);
}

.facts dd {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.link-code {
  display: block;
  padding: 18px 12px;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: center;
}

#clerk-signin:not(:empty) {
  display: grid;
  justify-items: center;
  padding: 0 12px 16px;
}

@media (max-width: 719px) {
  .sheet {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 28px 28px 0 0;
  }

  .sheet[open] {
    animation-name: sheet-up;
  }

  @keyframes sheet-up {
    from {
      transform: translateY(40px);
      opacity: 0;
    }
  }
}