/* identity-box.css — top-left Netlify Identity box, uses design tokens */
#cp-identity-box {
  position: fixed;
  top: var(--spacing-md);
  left: var(--spacing-xxl);
  z-index: var(--z-fixed, 500);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm, 8px);
  padding: 8px 12px;
  background: var(--panel-content-bg, rgba(50,50,50,0.3));
  color: var(--panel-text-primary, #fff);
  border: 1px solid var(--panel-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--box-shadow-sm, 0 0.125rem 0.25rem rgba(0,0,0,0.1));
  cursor: pointer;
  min-height: 44px;
  font-family: var(--font-sans);
  transition: transform var(--transition-fast, 150ms) var(--easing-ease);
  user-select: none;
}

#cp-identity-box:hover { transform: translateY(-2px); box-shadow: var(--box-shadow); }

#cp-identity-box .cp-identity-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle, 50%);
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--panel-text-primary, #fff);
  font-size: 18px;
}

#cp-identity-box .cp-identity-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle, 50%);
  object-fit: cover;
  display: block;
}

#cp-identity-box .cp-identity-text {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
  min-width: 0;
}

#cp-identity-box .cp-identity-line-main {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--panel-text-primary);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cp-identity-box .cp-identity-line-sub {
  font-size: 0.75rem;
  color: var(--panel-text-secondary, #8e8e8e);
}

#cp-identity-box.cp-logged-in { padding-right: 14px; }

@media (max-width: 768px) {
  #cp-identity-box {
    top: calc(var(--spacing-sm, 8px) + 6px);
    left: calc(var(--spacing-sm, 8px) + 6px);
    padding: 6px 10px;
    min-height: 40px;
  }
  #cp-identity-box .cp-identity-line-main { max-width: 110px; }
}