/* ============================================================
   Claim-your-subdomain widget — hero signup (desk.cloud)
   Type a subdomain (CAPS) → live availability → Continue with
   GitHub → /auth/signup. Styled to the cinematic hero language
   (cyan lines, amber accent, beveled clip-path, mono type).
   ============================================================ */
.claim {
  margin: 28px 0 4px;
  max-width: 31em;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.claim-label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--line-strong, #5ff);
}
.claim-label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, #ffd166); box-shadow: 0 0 10px var(--accent, #ffd166);
}

.claim-row {
  display: flex; align-items: stretch;
  background: var(--term-bg, #02080a);
  box-shadow: inset 0 0 0 1px var(--line, rgba(0,245,255,.3)), inset 0 0 24px var(--glow, rgba(0,245,255,.12));
  clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  transition: box-shadow .2s;
}
.claim-row:focus-within { box-shadow: inset 0 0 0 1px var(--line-strong, #4fe), inset 0 0 26px var(--glow, rgba(0,245,255,.18)); }
.claim-row[data-state="ok"]  { box-shadow: inset 0 0 0 1px var(--ok, #21f7a3), inset 0 0 24px rgba(33,247,163,.14); }
.claim-row[data-state="bad"] { box-shadow: inset 0 0 0 1px var(--error, #ff4d6d), inset 0 0 24px rgba(255,77,109,.12); }

.claim-prefix, .claim-suffix {
  display: inline-flex; align-items: center; padding: 0 12px;
  font-size: 12px; white-space: nowrap; user-select: none; color: var(--text-dim, #7aa);
}
.claim-suffix { color: var(--line-strong, #5ff); }

.claim-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--text, #cdeef0); font-family: inherit;
  font-size: clamp(15px, 2.2vw, 19px); font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; padding: 13px 2px;
}
.claim-input::placeholder { color: var(--text-dim, #7aa); opacity: .45; }

.claim-status {
  min-height: 15px; font-size: 11px; letter-spacing: .5px;
  display: flex; align-items: center; gap: 7px; color: var(--text-dim, #7aa);
}
.claim-status[data-state="ok"]  { color: var(--ok, #21f7a3); }
.claim-status[data-state="bad"] { color: var(--error, #ff4d6d); }
.claim-status .spin {
  width: 11px; height: 11px; border: 1.5px solid var(--line, rgba(0,245,255,.3));
  border-top-color: var(--accent, #ffd166); border-radius: 50%; animation: claimspin .7s linear infinite;
}
@keyframes claimspin { to { transform: rotate(360deg); } }

.claim-go { align-self: flex-start; height: 46px; padding: 0 24px; }
.claim-go svg { width: 15px; height: 15px; }
.claim-go[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; filter: grayscale(.45); }
.claim-go[disabled]:hover { background: var(--line-strong, #4fe); box-shadow: none; }
.claim-go[disabled]::after { display: none; }

.claim-hint { margin: 0; font-size: 11px; line-height: 1.6; color: var(--text-dim, #7aa); }
.claim-hint b { color: var(--accent, #ffd166); font-weight: 500; }

/* logged-in state: jump to the existing console instead of claiming a new deck */
.claim-console { display: flex; flex-direction: column; gap: 11px; }
.claim-who {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .5px; color: var(--text-dim, #7aa);
}
.claim-who b { color: var(--text, #cdeef0); font-weight: 500; }
.claim-who .tick {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok, #21f7a3); box-shadow: 0 0 10px var(--ok, #21f7a3);
}
.claim-jump { align-self: flex-start; height: 46px; padding: 0 24px; }
.claim-jump svg { width: 15px; height: 15px; }

@media (max-width: 520px){ .claim-input { font-size: 15px; } }