.fw-site .fw-option {
    align-items: center;
    gap: 12px;
    padding: 12px;
    text-align: start;
}

.fw-site .fw-option > input[type="radio"] {
    align-self: center;
    margin: 0;
}

.fw-site .fw-option > :is(span, div) {
    flex: 1;
    min-inline-size: 0;
}

.fw-site .fw-option:has(> input[type="radio"]:checked) {
    background: #fff6f5;
}

.fw-site .fw-option:has(> input[type="radio"]:focus-visible) {
    outline: 3px solid #005d7a;
    outline-offset: 2px;
}

.fw-site :is(.fw-editorial, .fw-r3-professional) > :is(.fw-editorial-figure, .fw-editorial-grid) + h3 {
    margin-block-start: clamp(26px, 3.2vw, 40px);
}

.fw-site :is(.fw-editorial, .fw-r3-professional) .fw-drawn-steps {
    padding-inline-start: 0;
    list-style: none;
}

.fw-site .fw-drawn-steps > li {
    padding: clamp(12px, 1.6vw, 19px) 0;
}

.fw-site .fw-drawn-steps :is(li, .fw-drawn-step-text) > strong:first-child {
    display: flex;
    align-items: baseline;
    gap: .46em;
    margin-block-end: .37em;
}

.fw-site .fw-step-number,
.fw-site .fw-drainage-number {
    display: inline-grid;
    flex: 0 0 auto;
    inline-size: 1.72em;
    block-size: 1.72em;
    place-items: center;
    color: #fff;
    background: #a71924;
    font-size: .88em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.fw-site .fw-schematic-caption + :is(.fw-calculation, .fw-editorial-figure) {
    margin-block-start: clamp(26px, 3.2vw, 40px);
}

.fw-site .fw-calculation {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 8px clamp(16px, 2.6vw, 28px);
    margin-block: clamp(24px, 3vw, 36px) 0;
    padding: clamp(16px, 2.6vw, 28px);
    border: 1px solid var(--fw-line);
    border-inline-start: 4px solid var(--fw-red);
    background: var(--fw-cream);
}

.fw-site .fw-calculation-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: clamp(20px, 2.2vw, 25px);
    line-height: 1.2;
}

.fw-site .fw-calculation-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    inline-size: clamp(46px, 5.5vw, 64px);
    block-size: clamp(46px, 5.5vw, 64px);
    color: var(--fw-red-dark);
}

.fw-site .fw-calculation-body {
    grid-column: 2;
    min-inline-size: 0;
}

.fw-site .fw-calculation-body > p {
    margin-block-start: 0;
}

.fw-site .fw-calculation-values {
    display: flex;
    flex-wrap: wrap;
    gap: 9px clamp(15px, 3.3vw, 32px);
    margin: 0 0 12px;
}

.fw-site .fw-calculation-values > div {
    padding-inline-start: 9px;
    border-inline-start: 1px solid #b9ab99;
}

.fw-site .fw-calculation-values dt {
    color: var(--fw-muted);
    font-size: .88em;
}

.fw-site .fw-calculation-values dd {
    margin: 0;
    color: var(--fw-ink);
    font-size: clamp(16px, 1.7vw, 21px);
    font-weight: 700;
}

.fw-site .fw-calculation-values > div:last-child dd {
    color: var(--fw-red-dark);
}

.fw-site .fw-calculation + .fw-source-block {
    margin-block-start: 12px;
}

.fw-site .fw-screening .fw-screening-variants {
    min-inline-size: 0;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.fw-site .fw-screening .fw-screening-variants legend {
    inline-size: auto;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    color: var(--fw-ink);
    font: 700 clamp(18px, 2vw, 23px)/1.25 'Open Sans', system-ui, sans-serif;
}

.fw-site .fw-screening .fw-screening-variants .fw-option {
    display: flex;
}

.fw-site [data-fw-surface-cards][hidden],
.fw-site .fw-screening-inputs > label[hidden] {
    display: none !important;
}

.fw-site .fw-screening-result {
    margin-block-start: 20px;
    padding: clamp(15px, 2.6vw, 26px);
}

.fw-site .fw-screening-result > h3 {
    margin-block-end: clamp(15px, 2.4vw, 24px);
    font-size: clamp(22px, 2.3vw, 28px);
}

.fw-site .fw-checkpoints-section {
    margin-block-start: clamp(30px, 4.2vw, 48px);
    padding-block-start: clamp(16px, 2.3vw, 24px);
    border-block-start: 1px solid var(--fw-line);
}

.fw-site .fw-checkpoints-section > h2 {
    margin-block-end: clamp(16px, 2.4vw, 24px);
}

.fw-site .fw-checkpoints-section > .fw-checkpoints + p {
    color: var(--fw-muted);
    font-size: .9em;
}

.fw-site .fw-checkpoints-section .fw-checkpoints p {
    margin-block-start: .2em;
}

.fw-site .fw-checkpoints {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.fw-site .fw-checkpoints > li {
    display: grid;
    grid-template-columns: clamp(57px, 9vw, 108px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-block-size: 64px;
    margin: 0;
    padding: 8px 11px;
    border: 1px solid var(--fw-line);
    background: #fff;
}

.fw-site .fw-screening-result .fw-checkpoints > li + li {
    margin-block-start: 0;
}

.fw-site .fw-checkpoint-image {
    inline-size: 100%;
    block-size: auto;
}

.fw-site .fw-checkpoints > li > :is(div, span) {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.fw-site .fw-checkpoints > li strong {
    display: block;
}

.fw-site .fw-check-transfer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    text-align: start;
}

.fw-site .fw-check-transfer :is(svg, img) {
    flex: 0 0 21px;
    inline-size: 21px;
    block-size: 21px;
}

.fw-site .fw-check-transfer-status {
    margin-block-start: 8px;
    color: var(--fw-ink);
    font-weight: 700;
}

.fw-site .fw-check-transfer-status:empty {
    margin: 0;
}

.fw-site .fw-check-transfer:disabled,
.fw-site .fw-check-transfer:disabled:hover {
    border-color: #a49b8f;
    background: #ebe7df;
    color: var(--fw-muted);
    cursor: default;
}

.fw-site .fw-outdoor-variant .fw-variant-image {
    display: block;
    inline-size: 100%;
    max-inline-size: 272px;
    block-size: auto;
    margin-block: 8px 12px;
    border: 1px solid var(--fw-line);
    background: #f8f7f3;
}

.fw-site .fw-option .fw-variant-image {
    display: block;
    inline-size: min(100%, 164px);
    block-size: auto;
    margin-block: 6px 8px;
    border: 1px solid var(--fw-line);
    background: #f8f7f3;
}

.fw-site .fw-drainage-figure {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "drawing" "legend" "caption";
    align-items: start;
    gap: 12px clamp(15px, 2.5vw, 26px);
    margin-block: clamp(23px, 3vw, 38px);
    padding: clamp(12px, 2.4vw, 24px);
    border: 1px solid var(--fw-line);
}

.fw-site .fw-drainage-figure > :is(img, svg) {
    grid-area: drawing;
    inline-size: 100%;
    block-size: auto;
    margin: 0;
}

.fw-site .fw-drainage-figure > figcaption {
    grid-area: caption;
    margin: 0;
}

.fw-site .fw-drainage-figure > ol {
    display: grid;
    grid-area: legend;
    gap: 0;
    max-inline-size: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fw-site .fw-drainage-figure > ol > li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 8px 0;
    border-block-start: 1px solid var(--fw-line);
}

.fw-site .fw-drainage-figure > ol > li:first-child {
    padding-block-start: 0;
    border-block-start: 0;
}

.fw-site .fw-drainage-number {
    border-radius: 50%;
}

.fw-site [data-fw-project] {
    margin-block-start: clamp(28px, 4vw, 44px);
    padding: clamp(15px, 3vw, 28px);
    border: 1px solid var(--fw-line);
    border-block-start: 3px solid var(--fw-red);
    background: var(--fw-cream);
    overflow: visible;
}

.fw-site [data-fw-project] > :is(h2, h3) {
    margin-block-end: .4em;
}

.fw-site .fw-project-options {
    margin-block-start: 10px;
    border: 1px solid var(--fw-line);
    background: #fff;
}

.fw-site .fw-project-options:first-of-type {
    margin-block-start: 18px;
}

.fw-site .fw-project-options > summary {
    min-block-size: 44px;
    padding: 10px 13px;
    color: var(--fw-ink);
    font-weight: 700;
}

.fw-site .fw-project-options > summary::marker {
    color: var(--fw-red-dark);
}

.fw-site .fw-project-options > summary:hover {
    background: var(--fw-cream);
}

.fw-site .fw-project-options[open] > summary {
    border-block-end: 1px solid var(--fw-line);
}

.fw-site .fw-project-options > :is(p, .fw-project-fields) {
    margin-inline: 13px;
}

.fw-site .fw-project-options + [data-fw-project-groups] {
    margin-block-start: 20px;
}

.fw-site .fw-project-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    align-items: end;
    gap: 12px 16px;
    margin-block: 15px 20px;
}

.fw-site .fw-project-fields > label {
    display: grid;
    gap: 4px;
    min-inline-size: 0;
    margin: 0;
}

.fw-site .fw-project-copy-field {
    display: grid;
    gap: 6px;
    margin-block: 12px;
}

.fw-site .fw-project-copy-field > textarea {
    inline-size: 100%;
    min-block-size: 120px;
}

.fw-site .fw-project-group + .fw-project-group {
    margin-block-start: 22px;
}

.fw-site .fw-project-group > :is(h3, h4) {
    margin-block-end: 8px;
}

.fw-site .fw-project-rows {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fw-site .fw-project-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px 16px;
    min-inline-size: 0;
    padding: 10px 12px;
    border: 1px solid var(--fw-line);
    background: #fff;
}

.fw-site .fw-project-row.is-done {
    border-inline-start: 3px solid #367252;
    background: #f1f7f1;
}

.fw-site .fw-project-item {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.fw-site .fw-project-item p {
    margin-block-start: .2em;
}

.fw-site .fw-project-item small {
    color: var(--fw-muted);
    font-size: .88em;
}

.fw-site .fw-project-item .fw-project-estimate {
    font-weight: 700;
}

.fw-site .fw-project-item .fw-project-clarify {
    margin-block-start: 6px;
    padding-inline-start: 8px;
    border-inline-start: 2px solid #aa754c;
    color: var(--fw-muted);
}

.fw-site .fw-project-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    gap: 5px 12px;
}

.fw-site .fw-project-row-actions > :is(label, a, button) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 44px;
    margin: 0;
}

.fw-site .fw-project-row-actions > button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    text-align: start;
}

.fw-site .fw-project-row-actions input[type="number"] {
    inline-size: 66px;
}

.fw-site .fw-project-row-actions input[type="checkbox"] {
    margin: 0;
}

.fw-site [data-fw-project] .fw-actions > [data-fw-project-status] {
    flex: 0 0 100%;
    order: 1;
    margin: 0;
}

.fw-site [data-fw-project] .fw-actions > [data-fw-project-status]:empty {
    flex-basis: 0;
}

@media (min-width: 992px) {
    .fw-site .fw-drainage-figure {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: "drawing legend" "caption legend";
    }

    .fw-site [data-fw-surface-cards] .fw-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fw-site [data-fw-surface-cards] .fw-option:last-child {
        grid-column: 1 / -1;
        min-block-size: 54px;
    }

    .fw-site [data-fw-surface-cards]:not([hidden]) + .fw-screening-inputs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .fw-site .fw-project-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .fw-site .fw-project-row-actions {
        justify-content: start;
    }
}

@media (max-width: 620px) {
    .fw-site .fw-calculation {
        grid-template-rows: auto auto;
        gap: 10px;
    }

    .fw-site .fw-calculation-icon {
        grid-row: 1;
        inline-size: 30px;
        block-size: 30px;
    }

    .fw-site .fw-calculation-title {
        align-self: center;
    }

    .fw-site .fw-calculation-body {
        grid-column: 1 / -1;
    }
}

@media (forced-colors: active) {
    .fw-site .fw-option:has(> input[type="radio"]:checked) {
        border-color: Highlight;
    }

    .fw-site :is(.fw-step-number, .fw-drainage-number) {
        border: 1px solid ButtonText;
    }
}
