.detail-components-section { margin-top: 20px; padding: 24px; }
.detail-components-section > h3 { margin: 0 0 16px; font-size: 1.125rem; }
.dg-components { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; min-width: 0; }
.dg-component { min-width: 0; padding-block: 12px; border-bottom: 1px solid #d5deea; overflow-wrap: anywhere; container-type: inline-size; }
.dg-component h4 { margin: 0 0 8px; font-size: 1rem; line-height: 1.5; }
.dg-component p { margin: 0 0 12px; white-space: pre-line; }
.dg-component dl { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr); gap: 8px 16px; margin: 0; font-size: 0.875rem; line-height: 1.6; font-variant-numeric: tabular-nums; }
.dg-component dt { font-weight: 600; }
.dg-component dd { margin: 0; }
@container (max-width: 300px) { .dg-component dl { grid-template-columns: minmax(0, 1fr); gap: 4px; } .dg-component dd { margin-bottom: 8px; } }