/* Unified buttons, chips, status chips, evidence chips and keycap hints (spec §1.1). Tokens only. */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--target-min); min-width: var(--target-min); padding: 0 var(--space-4); border-radius: var(--radius-md); border: var(--border-width) solid var(--color-border-strong); background: var(--color-surface-elevated); color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.btn:hover:not(:disabled) { background: var(--color-surface-hover); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:focus-visible { outline: var(--focus-ring) solid var(--color-focus-ring); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
.btn--secondary { background: var(--color-surface-elevated); border-color: var(--color-border-strong); }
.btn--primary { background: var(--color-primary); color: var(--color-primary-text); border-color: transparent; box-shadow: inset 0 1px 0 var(--color-primary-highlight); }
.btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--color-text-secondary); }
.btn--ghost:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text); }
.btn--danger, .btn--danger-secondary { background: var(--color-surface-elevated); border-color: var(--color-danger-border); color: var(--color-danger-text); }
.btn--danger:hover:not(:disabled), .btn--danger-secondary:hover:not(:disabled) { background: var(--color-danger-bg); }
dialog .btn--danger, .btn--danger.btn--solid { background: var(--color-danger); border-color: transparent; color: var(--color-primary-text); }
dialog .btn--danger:hover:not(:disabled) { background: var(--color-danger-text); }
.btn--sm, .btn--small { min-height: var(--control-sm); min-width: var(--control-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn--sm::after, .btn--small::after { content: ''; position: absolute; inset: -6px; }
.btn--block { width: 100%; }
.btn--lg { min-height: 3rem; padding: 0 var(--space-5); font-size: var(--text-body); }
.btn__icon { width: 1rem; height: 1rem; flex: none; }
.btn[aria-busy='true']::before { content: ''; width: 0.875rem; height: 0.875rem; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin 900ms linear infinite; }

/* Neutral chip */
.chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 1.5rem; padding: 0 var(--space-2); border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-border); background: var(--color-surface-muted); color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: 600; line-height: 1.35; white-space: nowrap; max-width: 100%; }
.chip--info { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info-text); }
.chip--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.chip--danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-text); }
.chip--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-text); }
.chip--changed { background: var(--color-changed-bg); border-color: var(--color-changed-border); color: var(--color-changed-text); }
.chip--version { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.chip__icon { width: 0.875rem; height: 0.875rem; flex: none; display: inline-grid; place-items: center; font-size: 0.75rem; line-height: 1; }

/* Status chip (7 lifecycle statuses): always icon + text, colour never alone. Borderless pills (board P1/P6). */
.status, .status-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 1.5rem; padding: 0 0.625rem; border-radius: var(--radius-pill); border: 0; background: var(--color-surface-muted); color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.status--uploading, .status--processing { background: var(--color-info-bg); color: var(--color-info-text); }
.status--awaiting_approval { background: var(--color-primary-subtle); color: var(--color-primary); }
.status--awaiting_client_selection { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status--approved, .status--generating_outputs { background: var(--color-success-bg); color: var(--color-success-text); }
.status--failed { background: var(--color-danger-bg); color: var(--color-danger-text); }
.status--processing .chip__icon, .status--generating_outputs .chip__icon { animation: spin 1800ms linear infinite; }
.icon { flex: none; }

/* Evidence chip: p## buttons that jump to a page (32px visual, 44px hit area) */
.chip--evidence, .evidence-chip { position: relative; cursor: pointer; font: inherit; font-family: var(--font-mono); font-size: var(--text-mono); font-variant-numeric: tabular-nums; min-height: 1.5rem; padding: 0 var(--space-2); border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border); background: var(--color-surface-muted); color: var(--color-primary); transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.chip--evidence::after, .evidence-chip::after { content: ''; position: absolute; inset: -10px -4px; }
.chip--evidence:hover, .evidence-chip:hover { background: var(--color-primary-subtle); border-color: var(--color-primary); }
.chip--evidence:active, .evidence-chip:active { transform: scale(0.97); }
.chip--evidence:focus-visible { outline: var(--focus-ring) solid var(--color-focus-ring); outline-offset: 2px; }
.chips { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); margin-inline-start: var(--space-1); }

/* Keyboard hint keycaps: desktop only */
.kbd { display: none; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 var(--space-1); border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border); border-bottom-width: 2px; background: var(--color-surface-elevated); color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-kbd); line-height: 1; }
@media (min-width: 1024px) { .kbd { display: inline-flex; } .kbd-hint { display: inline-flex; align-items: center; gap: var(--space-1); } }
.kbd-hint { display: none; color: var(--color-text-muted); font-size: var(--text-xs); }

@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled), .chip--evidence:active { transform: none; }
  .status .chip__icon, .btn[aria-busy='true']::before { animation: none; }
}
.btn[hidden] { display: none; }