.community-functional-page {
    min-height: 100vh;
    color: var(--portal-color-text, #243326);
    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--portal-color-background, #f7f4ec) 94%,
                white
            ),
            var(--portal-color-background, #f7f4ec)
        );
}

.community-functional-page *,
.community-functional-page *::before,
.community-functional-page *::after {
    box-sizing: border-box;
}

.community-functional-page .experience-container {
    width: min(1480px, calc(100% - 2.5rem));
    margin-inline: auto;
}

.community-functional-page .experience-section {
    padding-block: clamp(3.7rem, 7vw, 6.5rem);
}

.community-functional-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7.5rem) 0;
    color: #fff;
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(218, 176, 108, .24),
            transparent 28%
        ),
        linear-gradient(135deg, #103822, #174f2b 58%, #27633c);
}

.community-functional-hero::after {
    content: "";
    position: absolute;
    right: -10rem;
    bottom: -13rem;
    width: 30rem;
    height: 30rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 48% 52% 64% 36% / 42% 48% 52% 58%;
    box-shadow:
        0 0 0 2rem rgba(255, 255, 255, .02),
        0 0 0 5rem rgba(255, 255, 255, .012);
    transform: rotate(18deg);
    pointer-events: none;
}

.community-functional-hero h1 {
    max-width: 16ch;
    margin: .5rem 0 1rem;
    color: #fff;
    font-size: clamp(2.8rem, 6vw, 5.8rem);
    line-height: .96;
    letter-spacing: -.055em;
}

.community-functional-hero p {
    max-width: 56rem;
    color: rgba(255, 255, 255, .78);
    font-size: 1.08rem;
    line-height: 1.75;
}

.community-functional-heading {
    margin-bottom: 1.7rem;
}

.community-functional-heading h1,
.community-functional-heading h2 {
    margin: .3rem 0 .7rem;
    color: var(--portal-color-heading, #174f2b);
    font-size: clamp(2rem, 4vw, 3.8rem);
    letter-spacing: -.045em;
}

.community-functional-heading p {
    max-width: 54rem;
    color: var(--portal-color-muted, #667064);
    line-height: 1.7;
}

.community-functional-narrow {
    max-width: 980px !important;
}

.community-functional-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 2rem;
    align-items: start;
}

.community-functional-sidebar {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 5rem;
}

.community-functional-card {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--portal-color-border, #ddd6c7);
    border-radius: 1.35rem;
    background: var(--portal-color-surface, #fff);
    box-shadow: 0 .8rem 2.6rem rgba(24, 55, 32, .07);
}

.community-functional-card h1,
.community-functional-card h2,
.community-functional-card h3 {
    color: var(--portal-color-heading, #174f2b);
}

.community-functional-card > :first-child {
    margin-top: 0;
}

.community-functional-card > :last-child {
    margin-bottom: 0;
}

.community-functional-list {
    display: grid;
    gap: 1rem;
}

.community-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.community-card-grid > a {
    color: inherit;
    text-decoration: none;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.community-card-grid > a:hover {
    transform: translateY(-3px);
    border-color: color-mix(
        in srgb,
        var(--portal-color-primary, #174f2b) 30%,
        var(--portal-color-border, #ddd6c7)
    );
    box-shadow: 0 1.3rem 3rem rgba(24, 55, 32, .11);
}

.community-group-card footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--portal-color-border, #ddd6c7);
    color: var(--portal-color-muted, #667064);
    font-size: .82rem;
}

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

.community-form-field {
    display: grid;
    gap: .45rem;
    color: var(--portal-color-text, #243326);
    font-weight: 750;
}

.community-form-field--wide {
    grid-column: 1 / -1;
}

.community-form-field input,
.community-form-field textarea,
.community-form-field select {
    width: 100%;
    min-height: 3rem;
    padding: .78rem .9rem;
    border: 1px solid var(--portal-color-border, #ddd6c7);
    border-radius: .85rem;
    outline: none;
    background: #fff;
    color: inherit;
    font: inherit;
    font-weight: 450;
}

.community-form-field select[multiple] {
    min-height: 10rem;
}

.community-form-field textarea {
    resize: vertical;
}

.community-form-field input:focus,
.community-form-field textarea:focus,
.community-form-field select:focus {
    border-color: var(--portal-color-primary, #174f2b);
    box-shadow: 0 0 0 .25rem rgba(23, 79, 43, .1);
}

.community-form-field small {
    color: #a53030;
}

.community-form-field em {
    color: var(--portal-color-muted, #667064);
    font-size: .78rem;
    font-weight: 450;
}

.community-form-actions,
.community-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-top: 1.5rem;
}

.community-inline-actions form {
    margin: 0;
}

.community-inline-actions a,
.community-inline-actions button,
.community-functional-card button {
    min-height: 2.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .62rem .9rem;
    border: 1px solid var(--portal-color-border, #ddd6c7);
    border-radius: .75rem;
    background: #fff;
    color: var(--portal-color-primary, #174f2b);
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.community-checkbox {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.community-type-selector {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 1.25rem;
}

.community-type-selector a {
    padding: .55rem .8rem;
    border: 1px solid var(--portal-color-border, #ddd6c7);
    border-radius: 999px;
    background: #fff;
    color: var(--portal-color-primary, #174f2b);
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
}

.community-type-selector a.is-active {
    border-color: var(--portal-color-primary, #174f2b);
    background: var(--portal-color-primary, #174f2b);
    color: #fff;
}

.community-functional-nav {
    display: flex;
    gap: .9rem;
    margin-left: 1rem;
}

.community-functional-nav a {
    color: var(--portal-color-muted, #667064);
    font-size: .75rem;
    font-weight: 780;
    text-decoration: none;
}

.community-functional-nav a:hover {
    color: var(--portal-color-primary, #174f2b);
}

.community-simple-link {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--portal-color-border, #ddd6c7);
    color: var(--portal-color-primary, #174f2b);
    font-weight: 750;
    text-decoration: none;
}

.community-simple-link small {
    color: var(--portal-color-muted, #667064);
    font-weight: 650;
}

.community-status-badge {
    display: inline-flex;
    padding: .32rem .62rem;
    border-radius: 999px;
    background: var(--portal-color-primary-soft, #e5efe6);
    color: var(--portal-color-primary, #174f2b);
    font-size: .72rem;
    font-weight: 900;
}

.community-topic-status-line {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
    margin: 1rem 0;
}

.community-topic-body {
    margin-bottom: 1.5rem;
}

.community-detail-author {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--portal-color-border, #ddd6c7);
}

.community-detail-author span {
    color: var(--portal-color-muted, #667064);
    font-size: .82rem;
}

.community-knowledge-content {
    max-width: 74ch;
    font-size: 1.04rem;
    line-height: 1.85;
}

.community-structured-data,
.community-functional-card dl {
    display: grid;
    gap: .7rem;
    margin: 1.5rem 0 0;
}

.community-structured-data div,
.community-functional-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .7rem;
    border-top: 1px solid var(--portal-color-border, #ddd6c7);
}

.community-structured-data dt,
.community-functional-card dt {
    color: var(--portal-color-muted, #667064);
}

.community-structured-data dd,
.community-functional-card dd {
    margin: 0;
    text-align: right;
    font-weight: 750;
}

.community-attachment-list,
.community-related-places {
    display: grid;
    gap: .5rem;
    margin-top: 1.5rem;
}

.community-attachment-list a {
    color: var(--portal-color-primary, #174f2b);
    font-weight: 750;
}

.community-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.community-chip-list span {
    padding: .4rem .7rem;
    border-radius: 999px;
    background: var(--portal-color-primary-soft, #e5efe6);
    color: var(--portal-color-primary, #174f2b);
    font-size: .76rem;
    font-weight: 800;
}

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

.community-inbox-item {
    display: grid;
    gap: .25rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--portal-color-border, #ddd6c7);
}

.community-inbox-item.is-unread {
    border-left: .25rem solid var(--portal-color-primary, #174f2b);
    padding-left: .8rem;
}

.community-case-card {
    color: inherit;
    text-decoration: none;
}

.community-metric-row,
.community-audit-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--portal-color-border, #ddd6c7);
}

.community-audit-row {
    align-items: flex-start;
}

.community-audit-row div {
    display: grid;
    gap: .2rem;
}

.community-audit-row span {
    color: var(--portal-color-muted, #667064);
    font-size: .78rem;
}

.is-solution {
    box-shadow:
        inset .3rem 0 0 #2c7a3f,
        0 .8rem 2.6rem rgba(24, 55, 32, .07);
}

.community-reply-form {
    margin-top: 1.5rem;
}

@media (max-width: 1050px) {
    .community-functional-layout {
        grid-template-columns: 1fr;
    }

    .community-functional-sidebar {
        position: static;
    }

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

    .community-functional-nav {
        display: none;
    }
}

@media (max-width: 700px) {
    .community-form-grid,
    .community-card-grid,
    .community-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .community-form-field--wide {
        grid-column: auto;
    }

    .community-functional-page .experience-container {
        width: min(100% - 1.5rem, 1480px);
    }

    .community-detail-author,
    .community-structured-data div,
    .community-functional-card dl div {
        display: grid;
    }

    .community-structured-data dd,
    .community-functional-card dd {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .community-functional-page *,
    .community-functional-page *::before,
    .community-functional-page *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
    }
}