/* Proofestry component styles. Import after tokens/tokens.css. */
.pf-mark { color: var(--primary); flex: none; display: block; }
.pf-mark-dot { fill: var(--accent); }

.pf-logo { display: inline-flex; align-items: center; color: var(--primary); }
.pf-wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.pf-logo--sm { gap: var(--space-2); }
.pf-logo--sm .pf-wordmark { font-size: 22px; }
.pf-logo--md { gap: var(--space-3); }
.pf-logo--md .pf-wordmark { font-size: 36px; }
.pf-logo--lg { gap: var(--space-6); }
.pf-logo--lg .pf-wordmark { font-size: 64px; }

.pf-btn {
  min-height: 44px; padding: 0 var(--space-6);
  border: 1.5px solid transparent; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.2;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
}
.pf-btn--lg { min-height: 52px; padding: 0 var(--space-8); font-size: 17px; }
.pf-btn--primary { background: var(--primary); color: var(--on-primary); }
.pf-btn--primary:hover { background: var(--primary-hover); }
.pf-btn--secondary { background: transparent; color: var(--primary); border-color: var(--primary); }
.pf-btn--secondary:hover { background: var(--code-bg); }
.pf-btn--ghost { background: transparent; color: var(--accent-text); padding: 0 var(--space-3); }
.pf-btn--ghost:hover { text-decoration: underline; text-underline-offset: 3px; }
.pf-btn:focus-visible, .pf-badge:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pf-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pf-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.2;
}
.pf-badge--outline { border: 1.5px solid var(--primary); color: var(--primary); background: var(--surface); }
.pf-badge--solid { border: 1.5px solid var(--primary); background: var(--primary); color: var(--on-primary); }
.pf-badge--solid .pf-mark { color: var(--on-primary); }

.pf-vcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6);
  font-family: var(--font-sans); color: var(--text); max-width: 480px; box-sizing: border-box;
}
.pf-vcard-head { display: flex; align-items: center; gap: var(--space-3); }
.pf-vcard-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-vcard-title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--primary); }
.pf-vcard-file { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.pf-vcard-rows { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); font-size: 15px; }
.pf-vcard-row { display: flex; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.pf-vcard-row dt { color: var(--text-muted); }
.pf-vcard-row dd { margin: 0; font-weight: 500; text-align: right; }
.pf-mono { font-family: var(--font-mono); font-size: 14px; }
.pf-vcard-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }