.fsim {
    --fsim-bg: #f6f7f9;
    --fsim-panel: #ffffff;
    --fsim-ink: #20242c;
    --fsim-muted: #697386;
    --fsim-line: #d8dde7;
    --fsim-accent: #0f766e;
    --fsim-accent-dark: #115e59;
    --fsim-warn-bg: #fff7ed;
    --fsim-warn-ink: #9a3412;
    --fsim-ok-bg: #ecfdf5;
    --fsim-ok-ink: #047857;
    color: var(--fsim-ink);
    container-type: inline-size;
    font-family: inherit;
    margin: 2rem 0;
}

.fsim *,
.fsim *::before,
.fsim *::after {
    box-sizing: border-box;
}

.fsim__shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 1.25rem;
    align-items: start;
    background: var(--fsim-bg);
    border: 1px solid var(--fsim-line);
    border-radius: 8px;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.fsim__intro {
    grid-column: 1 / -1;
    max-width: 760px;
}

.fsim__eyebrow {
    color: var(--fsim-accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 0.35rem;
}

.fsim__title {
    color: var(--fsim-ink);
    font-size: clamp(1.45rem, 2vw, 2rem);
    line-height: 1.25;
    letter-spacing: 0;
    margin: 0;
}

.fsim__lead {
    color: var(--fsim-muted);
    font-size: 0.98rem;
    line-height: 1.7;
    margin: 0.7rem 0 0;
}

.fsim__form {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.fsim__choice {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--fsim-ink);
    cursor: pointer;
    font: inherit;
    letter-spacing: 0;
}

.fsim__quick {
    display: grid;
    gap: 1rem;
}

.fsim [hidden] {
    display: none !important;
}

.fsim__quickGroup {
    display: grid;
    gap: 0.55rem;
}

.fsim__quickHead {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
    justify-content: space-between;
}

.fsim__quickTitle {
    color: var(--fsim-ink);
    font-size: 0.92rem;
    font-weight: 800;
}

.fsim__quickTools {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    justify-content: flex-end;
}

.fsim__quickCaption,
.fsim__quickNote,
.fsim__rangeScale {
    color: var(--fsim-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.fsim__quickNote {
    margin: 0;
}

.fsim__detailToggle,
.fsim__infoToggle {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--fsim-accent-dark);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.3;
    padding: 0.05rem 0;
}

.fsim__detailToggle {
    border-bottom: 1px solid currentColor;
}

.fsim__infoToggle {
    align-items: center;
    border: 1px solid var(--fsim-accent);
    border-radius: 999px;
    display: inline-flex;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.fsim__infoToggle[aria-expanded="true"] {
    background: var(--fsim-accent);
    color: #ffffff;
}

.fsim__detailToggle:hover {
    color: var(--fsim-accent);
}

.fsim__infoPanel {
    background: #eef9f8;
    border: 1px solid rgba(15, 118, 110, 0.24);
    border-radius: 6px;
    color: var(--fsim-accent-dark);
    font-size: 0.84rem;
    line-height: 1.65;
    padding: 0.7rem 0.8rem;
}

.fsim__infoPanel p {
    margin: 0;
}

.fsim__inlineDetail {
    background: rgba(255, 255, 255, 0.72);
    border: 1px dashed var(--fsim-line);
    border-radius: 6px;
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
}

.fsim__miniGrid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fsim__salaryValue {
    color: var(--fsim-accent-dark);
    font-size: 1.1rem;
    font-weight: 900;
}

.fsim input.fsim__salaryRange {
    appearance: none;
    background: transparent;
    border: 0;
    min-height: 32px;
    padding: 0;
}

.fsim input.fsim__salaryRange:focus {
    box-shadow: none;
}

.fsim input.fsim__salaryRange:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.16);
}

.fsim input.fsim__salaryRange:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.16);
}

.fsim__salaryRange::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, var(--fsim-accent), #7dd3fc);
    border-radius: 999px;
    height: 8px;
}

.fsim__salaryRange::-webkit-slider-thumb {
    appearance: none;
    background: #ffffff;
    border: 3px solid var(--fsim-accent);
    border-radius: 999px;
    cursor: pointer;
    height: 24px;
    margin-top: -8px;
    width: 24px;
}

.fsim__salaryRange::-moz-range-track {
    background: linear-gradient(90deg, var(--fsim-accent), #7dd3fc);
    border-radius: 999px;
    height: 8px;
}

.fsim__salaryRange::-moz-range-thumb {
    background: #ffffff;
    border: 3px solid var(--fsim-accent);
    border-radius: 999px;
    cursor: pointer;
    height: 20px;
    width: 20px;
}

.fsim__rangeScale {
    display: flex;
    justify-content: space-between;
}

.fsim__choiceGrid {
    display: grid;
    gap: 0.5rem;
}

.fsim__choiceGrid--family {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fsim__choiceGrid--ideco {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fsim__choiceGrid--medical,
.fsim__choiceGrid--insurance {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.fsim__choiceGrid--housing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fsim__choice {
    background: var(--fsim-panel);
    border: 1px solid var(--fsim-line);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
    min-height: 44px;
    padding: 0.58rem 0.55rem;
    text-align: center;
}

.fsim__choice:hover {
    border-color: var(--fsim-accent);
    color: var(--fsim-accent-dark);
}

.fsim__choice.is-active {
    background: var(--fsim-ok-bg);
    border-color: var(--fsim-accent);
    color: var(--fsim-accent-dark);
}

.fsim__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.fsim__field,
.fsim__fieldset {
    display: grid;
    gap: 0.45rem;
}

.fsim__field--wide {
    max-width: 520px;
}

.fsim__label,
.fsim__fieldset legend {
    color: var(--fsim-ink);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
}

.fsim__fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.fsim__dependents {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.fsim__dependents label {
    display: grid;
    gap: 0.35rem;
}

.fsim__dependents span,
.fsim__hint {
    color: var(--fsim-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.fsim input,
.fsim select {
    appearance: none;
    background: var(--fsim-panel);
    border: 1px solid var(--fsim-line);
    border-radius: 6px;
    color: var(--fsim-ink);
    font: inherit;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    width: 100%;
}

.fsim input:focus,
.fsim select:focus,
.fsim button:focus-visible {
    border-color: var(--fsim-accent);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16);
    outline: 0;
}

.fsim select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--fsim-muted) 50%),
        linear-gradient(135deg, var(--fsim-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.25rem;
}

.fsim__inputWrap {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
}

.fsim__inputWrap > span {
    color: var(--fsim-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.fsim__actions {
    display: flex;
    justify-content: flex-start;
}

.fsim__reset {
    background: var(--fsim-panel);
    border: 1px solid var(--fsim-line);
    border-radius: 6px;
    color: var(--fsim-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    min-height: 42px;
    padding: 0.55rem 0.9rem;
}

.fsim__reset:hover {
    border-color: var(--fsim-accent);
    color: var(--fsim-accent-dark);
}

.fsim__result {
    background: var(--fsim-panel);
    border: 1px solid var(--fsim-line);
    border-radius: 8px;
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 1rem);
}

.fsim__amountBlock {
    display: grid;
    gap: 0.25rem;
}

.fsim__resultLabel {
    color: var(--fsim-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.fsim__amount {
    color: var(--fsim-accent-dark);
    font-size: clamp(2rem, 5vw, 2.7rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.fsim__status {
    background: var(--fsim-ok-bg);
    border-radius: 6px;
    color: var(--fsim-ok-ink);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
    padding: 0.7rem 0.8rem;
}

.fsim__status.is-warn {
    background: var(--fsim-warn-bg);
    color: var(--fsim-warn-ink);
}

.fsim__breakdown {
    display: grid;
    gap: 0;
    margin: 0;
}

.fsim__breakdown div {
    align-items: baseline;
    border-top: 1px solid var(--fsim-line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

.fsim__breakdown div:last-child {
    padding-bottom: 0;
}

.fsim__breakdown dt {
    color: var(--fsim-muted);
    font-size: 0.86rem;
}

.fsim__breakdown dd {
    color: var(--fsim-ink);
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0;
    text-align: right;
}

.fsim__note {
    color: var(--fsim-muted);
    font-size: 0.82rem;
    line-height: 1.7;
    margin: 0.8rem 0 0;
}

@container (max-width: 940px) {
    .fsim__shell {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .fsim--hasIntro .fsim__intro {
        grid-row: 1;
        max-width: none;
    }

    .fsim__title {
        font-size: 1.45rem;
    }

    .fsim__lead {
        margin-top: 0.55rem;
    }

    .fsim__result {
        align-items: start;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
        gap: 0.5rem 1rem;
        grid-row: 1;
        grid-template-columns: minmax(190px, 0.58fr) minmax(0, 1fr);
        padding: 0.75rem 0.9rem;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 0.75rem);
        z-index: 5;
    }

    .fsim__form {
        grid-row: 2;
    }

    .fsim--hasIntro .fsim__result {
        grid-row: 2;
    }

    .fsim--hasIntro .fsim__form {
        grid-row: 3;
    }

    .fsim__amount {
        font-size: 1.95rem;
        line-height: 1;
    }

    .fsim__status {
        grid-column: 2;
        grid-row: 1;
        font-size: 0.82rem;
        padding: 0.5rem 0.65rem;
    }

    .fsim__breakdown {
        align-self: start;
        grid-column: 2;
        grid-row: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem 0.8rem;
    }

    .fsim__breakdown div {
        border-top: 0;
        gap: 0.35rem;
        grid-template-columns: 1fr;
        padding: 0;
    }

    .fsim__breakdown div:nth-child(n+3) {
        display: none;
    }

    .fsim__breakdown dt {
        font-size: 0.78rem;
    }

    .fsim__breakdown dd {
        font-size: 0.9rem;
        line-height: 1.25;
        text-align: left;
    }

    .fsim__amountBlock {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
}

@container (max-width: 700px) {
    .fsim__result {
        grid-template-columns: 1fr;
    }

    .fsim__amountBlock,
    .fsim__status,
    .fsim__breakdown {
        grid-column: auto;
        grid-row: auto;
    }

    .fsim__breakdown {
        display: none;
    }
}

@media (max-width: 860px) {
    .fsim {
        padding-bottom: 160px;
    }

    .fsim__shell {
        grid-template-columns: 1fr;
    }

    .fsim__result {
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        box-shadow: 0 16px 44px rgba(15, 23, 42, 0.18);
        gap: 0.55rem;
        left: 0.75rem;
        max-height: 44vh;
        overflow: auto;
        padding: 0.75rem;
        position: fixed;
        right: 0.75rem;
        top: auto;
        z-index: 20;
    }

    .fsim__amountBlock {
        align-items: baseline;
        display: flex;
        gap: 0.65rem;
        justify-content: space-between;
    }

    .fsim__amount {
        font-size: clamp(1.3rem, 6vw, 1.8rem);
        text-align: right;
    }

    .fsim__status {
        font-size: 0.78rem;
        padding: 0.45rem 0.55rem;
    }

    .fsim__breakdown {
        display: none;
    }
}

@media (max-width: 640px) {
    .fsim__grid,
    .fsim__dependents,
    .fsim__choiceGrid--family,
    .fsim__choiceGrid--ideco,
    .fsim__choiceGrid--medical,
    .fsim__choiceGrid--insurance,
    .fsim__choiceGrid--housing,
    .fsim__miniGrid {
        grid-template-columns: 1fr;
    }

    .fsim__shell {
        border-radius: 6px;
        padding: 1rem;
    }

    .fsim__breakdown div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .fsim__breakdown dd {
        text-align: left;
    }
}