/* ═══════════════════════════════════════════════════════════════
   PASSKEYS — styles

   Built to sit directly under the two-factor panel and read as its
   sibling: the same state header, the same row rhythm, the same
   button weights. Two security panels on one page that look like
   they came from different products is how a reader decides one of
   them is unfinished and skips it.
   ═══════════════════════════════════════════════════════════════ */

#passkeySection .pk__state {
  display: flex;
  gap: var(--s-6);
  align-items: flex-start;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(6, 10, 16, .32);
  margin-bottom: var(--s-7);
}

.pk__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 9px;
  margin-top: var(--s-3);
  background: var(--dim);
  transition: background .2s ease, box-shadow .2s ease;
}
.pk__state[data-on="1"] .pk__dot {
  background: var(--accent2);
  box-shadow: 0 0 0 4px rgba(34, 211, 166, .14);
}

.pk__stateT { font-weight: 650; font-size: 14.5px; color: var(--ink); }
.pk__stateD {
  margin-top: 3px;
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--dim);
}

.pk__rows { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }

.pk__row {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
  padding: 11px var(--s-7);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(6, 10, 16, .22);
}

.pk__info { flex: 1 1 220px; min-width: 0; }
.pk__name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  /* A label the operator typed can be anything; it must not push the
     buttons off the card. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk__meta {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.pk__tag {
  display: inline-block;
  padding: var(--s-1) 7px;
  border-radius: 999px;
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(34, 211, 166, .12);
  color: var(--accent2);
  border: 1px solid rgba(34, 211, 166, .28);
  /* The title attribute carries the explanation, and a tag nobody can
     hover over on a phone still has to mean something on its own —
     hence words rather than icons. */
  cursor: help;
}
.pk__tag--warn {
  background: rgba(250, 204, 21, .12);
  color: #f3d071;
  border-color: rgba(250, 204, 21, .3);
}

.pk__acts { display: flex; gap: var(--s-4); flex: 0 0 auto; }

.pk__step {
  font-weight: 650;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: var(--s-2);
}

.pk__hint {
  margin-top: var(--s-5);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--dim);
  padding-left: 11px;
  border-left: 2px solid var(--border);
}

.pk__none {
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--dim);
}

/* ── The sign-in button ────────────────────────────────────────
   On the login page, above the divider. Deliberately quieter than
   the primary submit: it is the better way in, but presenting it as
   the loudest thing on a form most people meet with a password
   already typed makes the form feel like it changed under them. */

.pk-signin {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: var(--s-6) var(--s-8);
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .03);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-md);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.pk-signin:hover:not(:disabled) {
  border-color: var(--border-hi);
  background: rgba(255, 255, 255, .06);
}
.pk-signin:active:not(:disabled) { transform: translateY(1px); }
.pk-signin:disabled { opacity: .55; cursor: default; }
.pk-signin svg { flex: 0 0 auto; }

.pk-or {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  margin: var(--s-7) 0;
  color: var(--dim);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pk-or::before, .pk-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

@media (prefers-reduced-motion: reduce) {
  .pk__dot, .pk-signin { transition: none; }
  .pk-signin:active:not(:disabled) { transform: none; }
}