/* Noise exposure guidance */

.inline-note {
    margin-block-start: var(--space-6);
        padding: var(--space-4) var(--space-6);
        border: 1px solid color-mix(in srgb, var(--color-cyan) 38%, var(--color-border));
        border-radius: var(--radius-md);
        background: color-mix(in srgb, var(--color-cyan) 7%, var(--color-surface));
        color: var(--color-text-secondary);
}

.inline-note strong {
    color: var(--color-text);
}

.inline-note--warning {
    border-color: color-mix(in srgb, var(--color-warning) 42%, var(--color-border));
        background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));
}

.standards-compare {
    display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
}

.standards-compare article {
    padding: var(--space-6);
        background: var(--color-background);
}

.standards-compare article + article {
    border-inline-start: 1px solid var(--color-border);
}

.standards-compare article > span {
    color: var(--color-text-secondary);
        font-size: var(--text-xs);
}

.standards-compare h3 {
    margin-block-start: var(--space-1);
        color: var(--color-cyan);
        font-family: var(--font-display);
        font-weight: var(--font-weight-bold);
        font-size: var(--text-base);
        letter-spacing: var(--tracking-tight);
}

.standards-compare > article > strong {
    margin-block-start: var(--space-4);
        display: block;
        font-size: var(--text-xl);
}

.standards-compare p {
    margin-block-start: var(--space-3);
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
}

.standards-compare p strong {
    color: var(--color-text);
}

.exposure-progression {
    border-block-start: 1px solid var(--color-border);
}

.exposure-row {
    padding-block: var(--space-3);
        display: grid;
        grid-template-columns: 5rem minmax(8rem, 1fr) 12rem;
        align-items: center;
        gap: var(--space-4);
        border-block-end: 1px solid var(--color-border);
}

.exposure-row__track {
    height: 0.75rem;
        overflow: hidden;
        border-radius: var(--radius-pill);
        background: var(--color-surface-elevated);
}

.exposure-row__track span {
    width: max(0.55rem, var(--exposure-width));
        height: 100%;
        display: block;
        border-radius: inherit;
        background: var(--color-warning);
}

.exposure-row--critical .exposure-row__track span {
    background: var(--color-danger);
}

.exposure-row p {
    display: grid;
}

.exposure-row p span {
    color: var(--color-text-secondary);
        font-size: var(--text-xs);
}

.exposure-caution {
    margin-block-start: var(--space-6);
        max-width: none;
        padding: var(--space-4) var(--space-6);
        border: 1px solid color-mix(in srgb, var(--color-warning) 34%, var(--color-border));
        border-radius: var(--radius-md);
        background: color-mix(in srgb, var(--color-warning) 6%, var(--color-surface));
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
}

@media (max-width: 56rem) {
    .standards-compare {
        grid-template-columns: 1fr;
    }
    
    .standards-compare article + article {
        border-inline-start: 0;
                border-block-start: 1px solid var(--color-border);
    }
}

@media (max-width: 42rem) {
    .exposure-row {
        grid-template-columns: 4.75rem 1fr;
    }
    
    .exposure-row p {
        grid-column: 2;
    }
}