.dsp-preview {
  --dsp-surface: var(--bg-card, #ffffff);
  --dsp-surface-subtle: var(--bg, #f8fafc);
  --dsp-text: var(--text, #0f172a);
  --dsp-muted: var(--text-secondary, #64748b);
  --dsp-border: var(--border, #dbe2ea);
  margin-top: 0.75rem;
  border: 1px solid var(--dsp-border);
  border-radius: 0.75rem;
  background: var(--dsp-surface);
  color: var(--dsp-text);
  overflow: clip;
}

.v4-document-submission-preview-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.65rem; margin-top: 0.65rem; }
.v4-document-submission-preview-trigger { font-size: 0.75rem; padding: 0.38rem 0.65rem; }
.v4-document-submission-preview-help { color: var(--text-secondary, #64748b); font-size: 0.72rem; line-height: 1.45; }
.v4-document-submission-preview-host { flex-basis: 100%; min-width: 0; }
.v4-document-submission-preview-host:empty { display: none; }

.v4-requirement-semantic-layers { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; max-width: 100%; min-width: 0; }
.v4-requirement-semantic-layer { display: inline-flex; align-items: center; gap: 0.28rem; max-width: 100%; min-width: 0; padding: 0.18rem 0.42rem; border: 1px solid var(--border, #dbe2ea); border-radius: 999px; color: var(--text-secondary, #64748b); background: var(--bg-secondary, #f8fafc); font-size: 0.65rem; line-height: 1.35; }
.v4-requirement-semantic-layer strong { color: inherit; font-size: 0.62rem; }
.v4-requirement-semantic-layer.known { color: #166534; border-color: #86efac; background: #f0fdf4; }
.v4-requirement-semantic-layer.blocked { color: #991b1b; border-color: #fecaca; background: #fef2f2; }

.dsp-preview__header,
.dsp-preview__controls,
.dsp-preview__title {
  display: flex;
  align-items: center;
}

.dsp-preview__header {
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
}

.dsp-preview__title {
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
}

.dsp-preview__title strong { font-size: 0.875rem; }

.dsp-preview__capability,
.dsp-preview__origin {
  color: var(--dsp-muted);
  font-size: 0.75rem;
}

.dsp-preview__controls { gap: 0.5rem; }

.dsp-preview__status {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.18rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.dsp-preview__status--partial { color: #1d4ed8; background: #dbeafe; border-color: #bfdbfe; }
.dsp-preview__status--review_required { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.dsp-preview__status--hold,
.dsp-preview__status--source_changed { color: #991b1b; background: #fee2e2; border-color: #fecaca; }

.dsp-preview__toggle {
  min-height: 2rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--dsp-border);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--dsp-text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.dsp-preview__toggle:hover { border-color: var(--primary, #4f46e5); color: var(--primary, #4f46e5); }
.dsp-preview__toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary, #4f46e5) 30%, transparent); outline-offset: 2px; }

.dsp-preview__body {
  padding: 0 0.875rem 0.875rem;
  border-top: 1px solid var(--dsp-border);
}

.dsp-preview__boundary {
  margin: 0.75rem 0 0.35rem;
  padding: 0.65rem 0.75rem;
  border-left: 3px solid #f59e0b;
  border-radius: 0.35rem;
  background: color-mix(in srgb, #f59e0b 10%, var(--dsp-surface));
  font-size: 0.8rem;
  line-height: 1.55;
}

.dsp-preview__origin { margin: 0.35rem 0 0.75rem; }

.dsp-preview__fields,
.dsp-preview__technical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
}

.dsp-preview__field {
  min-width: 0;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--dsp-border);
  border-radius: 0.55rem;
  background: var(--dsp-surface-subtle);
}

.dsp-preview__label {
  margin: 0 0 0.25rem;
  color: var(--dsp-muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.dsp-preview__value {
  margin: 0;
  color: var(--dsp-text);
  font-size: 0.82rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.dsp-preview__evidence,
.dsp-preview__reasons,
.dsp-preview__technical { margin-top: 0.8rem; }
.dsp-preview__evidence h4,
.dsp-preview__reasons h4 { margin: 0 0 0.5rem; font-size: 0.82rem; }

.dsp-preview__evidence-item {
  padding: 0.7rem;
  border: 1px solid var(--dsp-border);
  border-radius: 0.55rem;
  background: var(--dsp-surface-subtle);
}
.dsp-preview__evidence-item + .dsp-preview__evidence-item { margin-top: 0.5rem; }
.dsp-preview__evidence-item blockquote { margin: 0; font-size: 0.82rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.dsp-preview__evidence-location { margin: 0.45rem 0 0; color: var(--dsp-muted); font-size: 0.72rem; }

.dsp-preview__reasons {
  padding: 0.65rem 0.75rem;
  border: 1px solid #fbbf24;
  border-radius: 0.55rem;
  background: color-mix(in srgb, #f59e0b 10%, var(--dsp-surface));
}
.dsp-preview__reasons--hold,
.dsp-preview__reasons--source_changed { border-color: #fca5a5; background: color-mix(in srgb, #ef4444 9%, var(--dsp-surface)); }
.dsp-preview__reasons ul { margin: 0; padding-left: 1.2rem; font-size: 0.8rem; line-height: 1.6; }
.dsp-preview__reasons h4:not(:first-child) { margin-top: 0.7rem; }

.dsp-preview__technical > summary { color: var(--dsp-muted); font-size: 0.78rem; cursor: pointer; }
.dsp-preview__technical-grid { margin-top: 0.55rem; }
.dsp-preview__technical-grid .dsp-preview__value { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.72rem; }

.dsp-preview__message,
.dsp-preview__empty {
  margin: 0;
  padding: 0.75rem 0.875rem;
  color: var(--dsp-muted);
  font-size: 0.8rem;
}

[data-theme="dark"] .dsp-preview {
  --dsp-surface: var(--bg-card, #111827);
  --dsp-surface-subtle: var(--bg, #0f172a);
  --dsp-text: var(--text, #e5e7eb);
  --dsp-muted: var(--text-secondary, #94a3b8);
  --dsp-border: var(--border, #334155);
}
[data-theme="dark"] .dsp-preview__status--partial { color: #bfdbfe; background: #1e3a5f; border-color: #1d4ed8; }
[data-theme="dark"] .dsp-preview__status--review_required { color: #fde68a; background: #78350f; border-color: #92400e; }
[data-theme="dark"] .dsp-preview__status--hold,
[data-theme="dark"] .dsp-preview__status--source_changed { color: #fecaca; background: #7f1d1d; border-color: #991b1b; }
[data-theme="dark"] .v4-requirement-semantic-layer { color: #cbd5e1; border-color: #475569; background: #1e293b; }
[data-theme="dark"] .v4-requirement-semantic-layer.known { color: #bbf7d0; border-color: #166534; background: #052e16; }
[data-theme="dark"] .v4-requirement-semantic-layer.blocked { color: #fecaca; border-color: #991b1b; background: #450a0a; }

@media (max-width: 640px) {
  .v4-requirement-semantic-layer { border-radius: 0.55rem; white-space: normal; overflow-wrap: anywhere; }
  .dsp-preview__header { align-items: flex-start; flex-direction: column; }
  .dsp-preview__controls { width: 100%; justify-content: space-between; }
  .dsp-preview__fields,
  .dsp-preview__technical-grid { grid-template-columns: 1fr; }
  .dsp-preview__status { white-space: normal; }
  .dsp-preview__toggle { min-height: 2.75rem; }
  .dsp-preview__body { padding-inline: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dsp-preview *, .dsp-preview *::before, .dsp-preview *::after { scroll-behavior: auto !important; transition: none !important; }
}