/* Shared states (spec §1.2): alerts, skeleton shimmer, empty and error states, progress bars. Tokens only. */

/* Alerts: icon + text, a 4px left accent, never colour alone. */
.alert { position: relative; display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 1.75rem); border-radius: var(--radius-md); border: var(--border-width) solid var(--color-border); border-left-width: 4px; background: var(--color-surface); color: var(--color-text); min-width: 0; }
.alert::before { content: 'i'; position: absolute; left: var(--space-3); top: calc(var(--space-3) + 1px); display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; font-family: var(--font-sans); background: var(--color-surface-muted); color: var(--color-text-secondary); }
.alert p { margin: 0; }
.alert h2 { font-size: var(--text-base); }
.alert .row { margin-top: var(--space-1); }
.alert--info { background: var(--color-info-bg); border-color: var(--color-info-border); }
.alert--info::before { background: var(--color-info-border); color: var(--color-primary-text); }
.alert--success { background: var(--color-success-bg); border-color: var(--color-success-border); }
.alert--success::before { content: '✓'; background: var(--color-success-border); color: var(--color-primary-text); animation: pop-in var(--duration-base) var(--ease-out) both; }
.alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.alert--warning::before { content: '!'; background: var(--color-warning-border); color: var(--color-text); }
.alert--error { background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.alert--error::before { content: '✕'; background: var(--color-danger-border); color: var(--color-primary-text); }
.alert--info, .alert--success, .alert--warning, .alert--error { color: var(--color-text); }
/* A card that is also an alert keeps card padding and only takes the accent. */
.card.alert--success { padding: var(--space-4); background: var(--color-surface); border-color: var(--color-border); border-left: 4px solid var(--color-success-border); }
.card.alert--success::before { display: none; }

/* Skeleton shimmer: transform-only sweep (motion 14). */
.skeleton, .skeleton-row, .quality-skeleton, .chat-skeleton { position: relative; overflow: hidden; display: block; height: 0.875rem; border-radius: var(--radius-sm); background: var(--color-skeleton-base); }
.skeleton::after, .skeleton-row::after, .quality-skeleton::after, .chat-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--color-skeleton-sheen), transparent); animation: shimmer var(--duration-shimmer) linear infinite; }
.skeleton--title { width: 40%; height: 1.25rem; }
.skeleton--band { height: 9rem; border-radius: var(--radius-lg); }
.skeleton-row { height: 3rem; border-radius: var(--radius-md); }
.quality-skeleton { height: 3.5rem; border-radius: var(--radius-md); }
.chat-skeleton { height: 3rem; border-radius: var(--radius-md); list-style: none; }
.skeleton-stack { display: grid; gap: var(--space-2); }

/* Empty and error states: centred panel with motif, heading, explanation and one recovery action. */
.empty-state, .error-state { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); border: var(--border-width) dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
.error-state { border-style: solid; border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.empty-state__motif { width: 7.5rem; height: auto; color: var(--color-text-muted); }
.empty-state h2, .error-state h2 { font-size: var(--text-md); }
.empty-state p, .error-state p { color: var(--color-text-secondary); max-width: 44ch; }
.request-id { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-muted); font-family: var(--font-mono); font-size: var(--text-mono); color: var(--color-text-secondary); }

/* Progress bars: one look for upload, processing and output generation. */
progress { -webkit-appearance: none; appearance: none; width: 100%; height: var(--progress-height); border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface-muted); color: var(--color-primary); accent-color: var(--color-primary); }
progress::-webkit-progress-bar { background: var(--color-surface-muted); border-radius: var(--radius-pill); }
progress::-webkit-progress-value { background: var(--color-primary); border-radius: var(--radius-pill); transition: width var(--duration-base) var(--ease-standard); }
progress::-moz-progress-bar { background: var(--color-primary); border-radius: var(--radius-pill); }
progress:not([value])::-webkit-progress-bar { background: linear-gradient(90deg, var(--color-surface-muted) 0 30%, var(--color-primary) 30% 55%, var(--color-surface-muted) 55%); background-size: 200% 100%; animation: indeterminate 1200ms linear infinite; }
progress:not([value])::-moz-progress-bar { background: var(--color-primary); }
.progress-readout { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xl); font-weight: 700; letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--color-text); }

@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes indeterminate { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after, .skeleton-row::after, .quality-skeleton::after, .chat-skeleton::after { display: none; }
  progress:not([value])::-webkit-progress-bar { animation: none; }
  .alert--success::before { animation: none; }
}

/* P11 open router: calm centred transition card. */
.open-card { width: 100%; max-width: 30rem; margin: var(--space-6) auto 0; display: grid; gap: var(--space-3); }
.open-card .card { text-align: center; justify-items: center; }
.open-card__loading { justify-items: stretch; }