/* Comment identity: GitHub sign-in row and GitHub author marks in comment lists. */
.comment-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line-strong);
}

.comment-identity[hidden] { display: none; }

.comment-identity-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .12em;
  text-decoration: none;
  clip-path: var(--notch);
  transition: color .3s, border-color .3s;
}

.comment-identity-login:is(:hover, :focus-visible) { color: var(--signal-text); border-color: var(--signal-text); }
.comment-identity-login:focus-visible { outline: 1px solid var(--signal-text); outline-offset: 3px; }

.comment-identity-hint {
  color: var(--ink-faint);
  font: 400 12px/1.6 var(--font-sans);
}

.comment-identity-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  clip-path: var(--notch);
}

.comment-identity-name {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}

.comment-identity-name strong { color: var(--ink); font: 600 14px/1.4 var(--font-sans); }

.comment-identity-name a {
  color: var(--ice);
  font: 400 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-decoration: none;
}

.comment-identity-name a:is(:hover, :focus-visible) { text-decoration: underline; }

.comment-identity-notify,
.comment-identity-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--line);
  font: 500 var(--fs-micro)/1 var(--font-mono);
  letter-spacing: .12em;
  cursor: pointer;
  transition: color .3s, border-color .3s;
}

.comment-identity-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.comment-identity-logout { border-color: transparent; }
.comment-identity-notify:is(:hover, :focus-visible),
.comment-identity-logout:is(:hover, :focus-visible) { color: var(--ink); border-color: var(--line-strong); }
.comment-identity :is(button):focus-visible { outline: 1px solid var(--signal-text); outline-offset: 2px; }
.comment-identity :is(button):disabled { opacity: .5; cursor: wait; }

/* status lamp: phosphor when notifications are armed, an empty ring when off */
.comment-identity-lamp {
  width: 7px;
  height: 7px;
  border: 1px solid var(--ink-faint);
  border-radius: 50%;
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}

.comment-identity-notify[aria-pressed="true"] { color: var(--ink); }
.comment-identity-notify[aria-pressed="true"] .comment-identity-lamp {
  background: var(--signal-text);
  border-color: var(--signal-text);
  box-shadow: 0 0 8px var(--signal-soft);
}

/* GitHub author marks inside comment lists */
.comment-github-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-github-handle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ice);
  font: 400 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: .06em;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.comment-github-handle:is(:hover, :focus-visible) { text-decoration: underline; }
.comment-github-mark { flex: none; }

@media (max-width: 560px) {
  .comment-identity-actions { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .comment-identity :is(a, button, .comment-identity-lamp) { transition: none; }
}