/* The salary calculator on /de/brutto-netto-rechner-luxemburg and its French
   and English pages. Built on the card, tag, button and guide table styles of
   design-system.css: the controls are glass pills inside the card, the result
   stands on the card like the guide's tables, in black type with the brand
   gradient only on the bars. Linked globally like guides.css, so a page swap
   finds it already loaded. */

.salary-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.salary-calc,
.salary-compare {
    scroll-margin-top: calc(var(--header-height) + var(--spacing-md));
}

/* Both columns run to the same line: when the inputs stand taller, the
   table's rows share the extra height, so the link row ends level with the
   last input and no gap opens in the result. */
.salary-calc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: var(--spacing-xl);
}

/* Inputs */

/* Four groups with air between them: direction, amount, tax class and the
   details list. */
.salary-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    min-width: 0;
}

.salary-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.salary-field {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.salary-label {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-black);
}

/* A label with its control or link on the same line, such as the period
   beside the amount label; a narrow card puts the control under it. */
.salary-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem var(--spacing-sm);
}

.salary-head a {
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.salary-class-field .salary-head {
    margin-bottom: 0.6rem;
}

/* Visibility follows the state on the root: direction, tax class, bonus. */
.salary-calc[data-mode="gross"] [data-mode-show="net"],
.salary-calc[data-mode="net"] [data-mode-show="gross"],
.salary-calc:not([data-tax-class="1"]) [data-class-show="1"],
.salary-calc:not([data-tax-class="1a"]) [data-class-show="1a"],
.salary-calc:not([data-tax-class="2"]) [data-class-show="2"],
.salary-calc:not([data-bonus="on"]) [data-bonus-show],
.salary-calc[data-period="year"] [data-bonus-show] {
    display: none !important;
}

/* A segmented control: radio pills on a glass track. */
.salary-segment {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 4px;
    width: 100%;
    padding: 4px;
    border-radius: var(--radius-button);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 6px 1px rgba(255, 255, 255, 0.55);
}

.salary-segment-option {
    position: relative;
    display: flex;
    cursor: pointer;
}

.salary-segment-option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.salary-segment-option span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.45rem 0.75rem;
    border-radius: calc(var(--radius-button) - 4px);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    text-align: center;
    color: var(--color-text-primary);
    transition: var(--transition-fast);
}

.salary-segment-option:hover span {
    background: rgba(255, 255, 255, 0.22);
}

.salary-segment-option input:checked + span {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5));
    color: var(--color-text-black);
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 4px 12px rgba(31, 38, 135, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* The period is a small segment beside the amount label. */
.salary-periods {
    width: auto;
    padding: 3px;
}

.salary-periods .salary-segment-option span {
    min-height: 2rem;
    padding: 0.25rem 0.85rem;
    white-space: nowrap;
}

.salary-segment-option input:focus-visible + span {
    outline: 2px solid #5e04ed;
    outline-offset: 1px;
}

.salary-amount {
    position: relative;
}

.salary-amount-input,
.salary-input,
.salary-small-input input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.28);
    color: var(--color-text-black);
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    transition: var(--transition-fast);
    box-shadow: inset 0 0 6px 1px rgba(255, 255, 255, 0.45);
}

.salary-amount-input {
    padding: 0.7rem 2.75rem 0.7rem 1.1rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-guide-title);
    font-weight: var(--font-weight-normal);
    line-height: 1.2;
}

.salary-input,
.salary-small-input input {
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-guide);
}

.salary-amount-input:hover,
.salary-input:hover,
.salary-small-input input:hover {
    background: rgba(255, 255, 255, 0.36);
    border-color: rgba(255, 255, 255, 0.65);
}

.salary-amount-input:focus,
.salary-input:focus,
.salary-small-input input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.42);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 14px rgba(31, 38, 135, 0.13), inset 0 0 6px 1px rgba(255, 255, 255, 0.45);
}

.salary-amount-currency {
    position: absolute;
    top: 50%;
    right: 1.1rem;
    transform: translateY(-50%);
    font-size: var(--font-size-title);
    color: var(--color-text-primary);
    pointer-events: none;
}

.salary-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0.6rem 0 0;
    font-size: var(--font-size-small);
    color: var(--color-text-primary);
}

.salary-calc a {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-black);
    text-decoration: none;
    transition: var(--transition-fast);
}

/* An on/off choice is a switch, the Apple way: the words on the left, the
   switch on the right edge of the field, flush with the segmented control.
   Off it shows Apple's grey switch fill, on it fills with the brand violet. */
.salary-check {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: 0.85rem;
    font-size: var(--font-size-body);
    color: var(--color-text-black);
    cursor: pointer;
}

.salary-bonus .salary-check {
    margin-top: 0;
}

.salary-check input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 1.625rem;
    margin: 0;
    border-radius: var(--radius-full);
    background: rgba(120, 120, 128, 0.2);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.salary-check input::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.625rem - 4px);
    height: calc(1.625rem - 4px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(31, 38, 135, 0.2);
    transition: transform 0.2s ease;
}

.salary-check:hover input:not(:checked) {
    background: rgba(120, 120, 128, 0.28);
}

.salary-check input:checked {
    background: #5e04ed;
}

.salary-check input:checked::before {
    transform: translateX(1.125rem);
}

.salary-check input:focus-visible {
    outline: 2px solid #5e04ed;
    outline-offset: 2px;
}

.salary-check span {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.salary-check small,
.salary-more-field small {
    font-size: var(--font-size-small);
    color: var(--color-text-primary);
}

.salary-small-input {
    position: relative;
    width: min(100%, 12rem);
}

.salary-small-input input {
    padding-right: 2rem;
}

.salary-small-input span {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    transform: translateY(-50%);
    color: var(--color-text-primary);
    pointer-events: none;
}

/* The details list: the 13th month, then commute, hours and other
   deductions. They stay open, because the commute lowers the wage tax for
   most visitors. Each is a row like a switch: the words on the left, a short
   field on the right edge. Too narrow for that, as on a phone, the words
   stand above a full-width field. On a desktop the list sits at the bottom
   of its column, level with the result's last row. */
.salary-more {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: auto;
    container-type: inline-size;
}

.salary-more-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    font-size: var(--font-size-body);
    color: var(--color-text-black);
}

.salary-more-field span {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.salary-more-field .salary-input {
    flex: 0 0 auto;
    width: 7.5rem;
    text-align: right;
}

/* The details' fields are white pills lifted by a soft shadow, like the
   chosen segment and the share button, so they stay visible on the white
   parts of the card without a grey fill or a ring (Vincent, 8 Nov 2026). */
.salary-more-field .salary-input,
.salary-small-input input {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 10px rgba(31, 38, 135, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.salary-more-field .salary-input:hover,
.salary-small-input input:hover {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.85);
}

.salary-more-field .salary-input:focus,
.salary-small-input input:focus {
    border-color: transparent;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 38, 135, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

@container (max-width: 20rem) {
    .salary-more-field {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .salary-more-field .salary-input {
        width: 100%;
        text-align: left;
    }
}

/* Result */

.salary-result,
.salary-result-head,
.salary-result-detail {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.salary-result {
    gap: var(--spacing-md);
}

.salary-result-detail,
.salary-table {
    flex: 1 1 auto;
}

.salary-result p {
    margin: 0;
}

.salary-result-label {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-black);
}

/* The key figure reads like the guide's key figures: black, regular. */
.salary-result-value {
    width: fit-content;
    font-size: var(--font-size-guide-title);
    font-weight: var(--font-weight-normal);
    line-height: 1.05;
    color: var(--color-text-black);
    font-variant-numeric: tabular-nums;
}

.salary-result-sub {
    font-size: var(--font-size-subtitle);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.salary-bar {
    display: flex;
    height: 6px;
    margin-top: 0.35rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
}

.salary-bar-part {
    width: var(--share, 0%);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.salary-bar-net {
    background: var(--gradient-brand);
}

.salary-bar-social {
    background: rgba(149, 1, 253, 0.32);
}

.salary-bar-tax,
.salary-bar-social[data-bar="social"] {
    background: #d4d4d8;
}

.salary-kept {
    font-size: var(--font-size-small);
    color: var(--color-text-primary);
}

.salary-table {
    width: 100%;
    margin-top: 0.25rem;
    border-collapse: collapse;
    font-size: var(--font-size-body);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

/* The breakdown is a plain list: the period the visitor chose, as in the
   headline, without a head row or lines between its rows. The head row
   stays in the markup for the table's structure. */
.salary-table th,
.salary-table td {
    padding: 0.45rem 0;
}

.salary-table thead,
.salary-calc[data-period="month"] .salary-table :is(th, td):nth-child(3),
.salary-calc[data-period="year"] .salary-table :is(th, td):nth-child(2) {
    display: none;
}

.salary-table tbody th {
    font-weight: var(--font-weight-normal);
    text-align: left;
    color: var(--color-text-primary);
}

.salary-table td {
    padding-left: var(--spacing-sm);
    text-align: right;
    white-space: nowrap;
    color: var(--color-text-black);
}

.salary-row-net th,
.salary-row-net td {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-black);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.salary-row-employer th,
.salary-row-employer td {
    padding-top: 0.9rem;
    font-size: var(--font-size-small);
    color: var(--color-text-primary);
}

.salary-bonus-line,
.salary-notice {
    font-size: var(--font-size-small);
    line-height: 1.5;
}

.salary-bonus-line {
    color: var(--color-text-black);
}

.salary-notice {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-black);
}

.salary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs) var(--spacing-sm);
    margin-top: 0.25rem;
}

.salary-share {
    padding: 0.55rem 1.1rem;
}

.salary-share-done,
.salary-share[data-done="true"] .salary-share-idle {
    display: none;
}

.salary-share[data-done="true"] .salary-share-done {
    display: inline;
}

.salary-values {
    font-size: var(--font-size-small);
    color: var(--color-text-primary);
}

/* Cross-border comparison */

.salary-compare {
    gap: var(--spacing-sm);
}

.salary-compare .guide-section-title {
    margin-bottom: 0;
}

.salary-compare-intro,
.salary-compare-note {
    margin: 0;
    color: var(--color-text-primary);
}

.salary-compare-note {
    font-size: var(--font-size-small);
    color: var(--color-text-primary);
    line-height: 1.5;
}

.salary-compare-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: var(--spacing-xs) 0;
    padding: 0;
    list-style: none;
}

.salary-compare-row {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) 10.5rem;
    align-items: center;
    gap: var(--spacing-sm);
}

.salary-compare-country {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-black);
}

.salary-compare-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
}

.salary-compare-bar {
    display: block;
    width: var(--share, 0%);
    height: 100%;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.14);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.salary-compare-row.is-home .salary-compare-bar {
    background: var(--gradient-brand);
}

.salary-compare-figures {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-variant-numeric: tabular-nums;
}

.salary-compare-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-black);
}

.salary-compare-diff {
    font-size: var(--font-size-small);
    color: var(--color-text-primary);
}

/* A tool page keeps its contents list in a card under the tool. */
.guide-toc-card .guide-toc {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

@media (max-width: 1000px) {
    .salary-calc,
    .salary-compare {
        scroll-margin-top: calc(var(--header-height-mobile) + var(--spacing-md));
    }

    /* One column, with the result right under the amount: form and result
       open up, so their parts take turns in the grid. */
    .salary-calc-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-md);
    }

    .salary-form,
    .salary-result {
        display: contents;
    }

    .salary-modes { order: 1; }
    .salary-amount-field { order: 2; }
    .salary-result-head { order: 3; }
    .salary-class-field { order: 4; }
    .salary-more { order: 5; margin-top: 0; }
    .salary-result-detail { order: 6; }

    /* Hairlines part the result from the inputs around it. */
    .salary-result-head {
        padding: var(--spacing-sm) 0;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .salary-result-detail {
        padding-top: var(--spacing-sm);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
}

@media (max-width: 640px) {
    .salary-table td {
        padding-left: 0.6rem;
    }

    .salary-compare-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0.4rem;
    }

    .salary-compare-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .salary-compare-figures {
        flex-direction: row;
        align-items: baseline;
        gap: 0.5rem;
    }
}

/* On the narrowest phones a row wraps its figure under a long label, so
   words such as Krankenversicherung stay whole. */
@media (max-width: 400px) {
    .salary-table,
    .salary-table tbody {
        display: block;
    }

    .salary-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.15rem var(--spacing-sm);
        padding: 0.45rem 0;
    }

    .salary-table .salary-row-employer {
        padding-top: 0.9rem;
    }

    .salary-table .salary-row-net {
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .salary-table th,
    .salary-table td,
    .salary-row-net th,
    .salary-row-net td,
    .salary-row-employer th,
    .salary-row-employer td {
        padding-top: 0;
        padding-bottom: 0;
        border: 0;
    }

    /* A label wraps between its words first: it starts at its longest word
       and grows, so only a single long word sends the figure down. */
    .salary-table tbody th {
        flex: 1 1 0;
        min-width: min-content;
    }

    .salary-table td {
        flex: 0 0 auto;
        margin-left: auto;
        padding-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .salary-check input,
    .salary-check input::before,
    .salary-bar-part,
    .salary-compare-bar {
        transition: none;
    }
}