/* JTP shared semantic tokens. Theme classes provide concrete values. */
:root {
    --jtp-content-spacing: 1rem;
    --jtp-brand-light: #3a7ca5;
    --jtp-brand-dark: #2b6777;
    --jtp-danger: #b42318;
    --jtp-bg: #ffffff;
    --jtp-bg-light: #f0f4f7;
    --jtp-text: #333333;
    --jtp-text-muted: #5f6e77;
    --jtp-primary: #2b6777;
    --jtp-primary-light: #d7e7ee;
    --jtp-primary-dark: #205461;
    --jtp-secondary: #3a7ca5;
    --jtp-secondary-light: #6d9fbe;
    --jtp-border: #d5e1e7;
}

body {
    background-color: var(--jtp-bg-light);
    color: var(--jtp-text);
    font-family: "Fira Sans", "Segoe UI", Arial, sans-serif;
}

a {
    color: var(--jtp-primary);
    text-decoration: none;
}

a:hover {
    color: var(--jtp-primary-dark);
}

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    align-items: start;
    gap: var(--jtp-content-spacing);
}

.calculator-column { min-width: 0; }

.calculator-privacy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--jtp-content-spacing);
}

.calculator-privacy-grid > * { min-width: 0; }

@media (max-width: 767.98px) {
    .calculator-privacy-grid { grid-template-columns: minmax(0, 1fr); }
}

.calculator-form-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: var(--jtp-content-spacing);
    position: relative;
}

.calculator-help-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--jtp-primary);
    cursor: help;
}

.calculator-help-button:focus-visible { outline: 2px solid currentColor; }

.calculator-legend {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    width: min(36rem, 100%);
    padding: var(--jtp-content-spacing);
    border: 1px solid var(--jtp-border);
    border-radius: .5rem;
    background: var(--jtp-bg);
    color: var(--jtp-text);
    box-shadow: 0 .25rem 1rem #0003;
}

.calculator-help:hover .calculator-legend,
.calculator-help:focus-within .calculator-legend { display: block; }