/* Memoria de calculo recolhivel. So atua em blocos que aderem explicitamente. */
.calculation-details__item {
    display: grid;
    min-width: 0;
    gap: 0;
}

.calculation-details__item--highlight {
    margin-bottom: 18px;
}

.calculation-details__item--highlight > .price-highlight {
    margin-bottom: 0;
}

.calculation-details__item--metric {
    align-self: start;
}

.calculation-details__toggle {
    width: 100%;
    cursor: pointer;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast), filter var(--motion-fast);
}

button.calculation-details__toggle {
    color: inherit;
    font: inherit;
    text-align: left;
}

.calculation-details__toggle:hover {
    filter: brightness(0.98);
    border-color: var(--row-accent, var(--ink));
}

.calculation-details__toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--row-accent, var(--ink)) 42%, transparent);
    outline-offset: 2px;
}

.calculation-details__toggle[aria-expanded="true"] {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--row-accent, var(--line)) 22%, transparent);
}

.calculation-details__detail {
    margin: 0;
    padding: 10px var(--space-3) var(--space-3);
    border: var(--border-width) solid var(--line);
    border-top: 0;
    border-left: 4px solid var(--row-accent, var(--line));
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--surface-muted);
    color: var(--muted);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.calculation-details__detail[hidden] {
    display: none;
}

.calculation-details__detail.is-danger { --row-accent: var(--danger); }
.calculation-details__detail.is-success { --row-accent: var(--success); }
.calculation-details__detail.is-benefit { --row-accent: var(--benefit); }
.calculation-details__detail.is-contribution { --row-accent: var(--contribution); }
.calculation-details__detail.is-outlined { --row-accent: var(--ink); }
.calculation-details__detail.is-total { --row-accent: var(--conclusion-bg); }

/* As formulas da folha precisam de largura para permanecerem legiveis. */
.salary-summary {
    grid-template-columns: minmax(0, 1fr) !important;
}

@media (prefers-reduced-motion: reduce) {
    .calculation-details__toggle {
        transition: none;
    }
}