/* Shared calculator tokens and intrinsic sizing. Component files own their layouts. */
:root {
    --calc-text: #253247;
    --calc-muted: #58677c;
    --calc-placeholder: #758196;
    --calc-border: #dce2eb;
    --calc-divider: #edf0f5;
    --calc-surface-soft: #f7f9fc;
    --calc-shadow: 0 4px 20px rgba(28, 42, 64, .04);
    --calc-card-padding: clamp(16px, 2.2vw, 28px);
    --calc-card-radius: 16px;
    --calc-control-height: 48px;
}

.calculator-area__tool {
    font-size: 16px;
    line-height: 1.5;
    color: var(--calc-text);
    font-variant-numeric: tabular-nums;
}

.calculator-area__tool :where(div, form, fieldset, label) {
    min-width: 0;
}

.calculator-area__tool :where(p, strong, output, [aria-live]) {
    overflow-wrap: anywhere;
}

.calculator-area__tool :where(input, select, textarea, button) {
    max-width: 100%;
    font-family: inherit;
}

.calculator-area__tool :where(input, textarea)::placeholder {
    font-weight: 400;
    opacity: 1;
}

.calculator-area__tool :where(button) {
    touch-action: manipulation;
}

.calculator-area__tool :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--color-accent, #ff485b);
}

.calculator-area__tool :where(input, select, textarea, button, a):focus-visible {
    outline: 2px solid #a62342;
    outline-offset: 3px;
}

.calculator-area__tool :where(input, select, textarea):disabled {
    background-color: var(--calc-surface-soft);
    color: var(--calc-muted);
    cursor: not-allowed;
}

.calculator-area__tool .calc-button-secondary {
    border-color: var(--calc-border);
    background-color: var(--calc-surface-soft);
    color: var(--calc-muted);
}

.calculator-area__tool .calc-button-secondary:hover {
    border-color: #bac5d5;
    background-color: #edf1f7;
    color: var(--calc-text);
}

/* Overrides the article heading rhythm only inside interactive tools. */
.calculator-area__tool :is(h3, h4, h5) {
    margin: 0 0 18px;
    color: var(--calc-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
}

@media (prefers-reduced-motion: reduce) {
    .calculator-area__tool *,
    .calculator-area__tool *::before,
    .calculator-area__tool *::after {
        animation-duration: .01ms;
        transition-duration: .01ms;
        scroll-behavior: auto;
    }
}