/* The same form is rendered as a page and as an XF overlay on other public routes. */
html#XF[data-app="public"] :is(.sw-contact-form, .overlay:has(.sw-contact-form)) {
    --contact-fill: var(--sw-frame-fill, #e0cda9);
    --contact-body: var(--sw-inset, #eaddc5);
    --contact-label: var(--sw-inset-alt, #e5d6ba);
    --contact-input: var(--sw-control-paper, var(--summer-panel, #f8efdf));
    --contact-edge: var(--sw-control-edge, var(--sw-frame, #b7a070));
    --contact-rule: var(--sw-inset-edge, #d1c3aa);
    --contact-ink: var(--sw-reading-ink, var(--sw-copy, #553d2c));
    --contact-meta: var(--sw-reading-meta, var(--sw-metadata, #655039));
    --contact-focus: var(--sw-control-focus, #79501d);
    --contact-font: var(--sw-forum-font, "Segoe UI", Arial, sans-serif);
}
html#XF[data-summer-theme="twilight"] :is(.sw-contact-form, .overlay:has(.sw-contact-form)) {
    --contact-input: var(--sw-control-paper, var(--summer-panel, #25353d));
    --contact-focus: var(--sw-control-focus, #b6dfdf);
}
html#XF[data-app="public"][data-template="contact_form"] .p-body .sw-contact-form {
    max-width: 68rem;
    margin-inline: auto;
}
html#XF[data-app="public"] .sw-contact-form .sw-contact-heading {
    overflow-wrap: anywhere;
    text-wrap: balance;
}
html#XF[data-summer-theme="dawn"] .sw-contact-form .sw-contact-heading {
    color: var(--sw-reading-link, #704629);
    font: 550 clamp(19px, 2vw, 29px)/1.24 var(--contact-font);
}
html#XF[data-app="public"] .sw-contact-form .sw-contact-panel > .block-body {
    margin-inline: var(--sw-inner-gutter, 14px);
    border: 1px solid var(--contact-rule);
    border-radius: 12px;
    overflow: clip;
    background: var(--contact-body);
}
html#XF[data-app="public"] .sw-contact-form .formRow {
    display: grid;
    grid-template-columns: minmax(9.9rem, 24%) minmax(0, 1fr);
    color: var(--contact-ink);
    border-color: var(--contact-rule);
    background: var(--contact-body);
}
html#XF[data-app="public"] .sw-contact-form .formRow > :is(dt, dd) {
    min-width: 0;
    width: auto;
    padding: 12px 16px;
    border-color: var(--contact-rule);
    color: var(--contact-ink);
    overflow-wrap: anywhere;
}
html#XF[data-app="public"] .sw-contact-form .formRow > dt {
    text-align: start;
    background: var(--contact-label);
    border-inline-end: 1px solid var(--contact-rule);
}
html#XF[data-app="public"] .sw-contact-form .formRow > dd { background: var(--contact-body); }
html#XF[data-app="public"] .sw-contact-form .formRow-label { color: var(--contact-ink); font-weight: 600; }
html#XF[data-app="public"] .sw-contact-form :is(.formRow-hint, .formRow-explain) { color: var(--contact-meta); }
html#XF[data-app="public"] .sw-contact-form :is(input.input, textarea.input) {
    max-width: 100%;
    min-width: 0;
    border: 1px solid var(--contact-edge);
    border-radius: 8px;
    background: var(--contact-input);
    color: var(--contact-ink);
    caret-color: var(--contact-ink);
    font-family: var(--contact-font);
    box-shadow: none;
}
html#XF[data-app="public"] .sw-contact-form input.input { min-height: 39px; }
html#XF[data-app="public"] .sw-contact-form textarea.input {
    min-height: 150px;
    resize: vertical;
    line-height: 1.5;
}
/* XF 2.3 renders a fixed 303px hCaptcha and only passes a size option for invisible mode. */
html#XF[data-app="public"] .sw-contact-form .formRow > dd:has([data-xf-init~="h-captcha"]) {
    container: contact-verification / inline-size;
}
@container contact-verification (max-width: 305px) {
    .sw-contact-form [data-xf-init~="h-captcha"] { zoom: .9; }
}
@container contact-verification (max-width: 276px) {
    .sw-contact-form [data-xf-init~="h-captcha"] { zoom: .8; }
}
@container contact-verification (max-width: 246px) {
    .sw-contact-form [data-xf-init~="h-captcha"] { zoom: .72; }
}
html#XF[data-app="public"] .sw-contact-form :is(.input, button, a):focus-visible,
html#XF[data-app="public"] .overlay:has(.sw-contact-form) .overlay-titleCloser:focus-visible {
    outline: 2px solid var(--contact-focus);
    outline-offset: 2px;
}
html#XF[data-app="public"] .sw-contact-form .sw-contact-panel > .formSubmitRow {
    display: block;
    width: auto;
    margin: 8px var(--sw-inner-gutter, 14px) 0;
    padding: 0;
    border: 1px solid var(--contact-rule);
    border-radius: 10px;
    background: var(--contact-label);
}
html#XF[data-app="public"] .sw-contact-form .sw-contact-panel > .formSubmitRow > dt { display: none; }
html#XF[data-app="public"] .sw-contact-form .sw-contact-panel > .formSubmitRow > dd {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
html#XF[data-app="public"] .sw-contact-form .formSubmitRow-bar {
    border: 0;
    border-radius: inherit;
    background: transparent;
}
html#XF[data-app="public"] .sw-contact-form .formSubmitRow-controls {
    display: flex;
    justify-content: flex-end;
    width: auto;
    margin: 0;
    padding: 8px 12px;
    background: transparent;
}
html#XF[data-app="public"] .sw-contact-form .formSubmitRow button.button {
    min-height: 40px;
    padding-inline: 1.2em;
    border: 1px solid var(--contact-edge);
    border-radius: 9px;
    background: var(--sw-submit-bg, var(--contact-label));
    color: var(--sw-submit-ink, var(--contact-ink));
    font-weight: 650;
    box-shadow: none;
    text-shadow: none;
}
html#XF[data-app="public"] .sw-contact-form .formSubmitRow button.button:is(:hover, :focus-visible) {
    background: var(--sw-submit-hover, var(--contact-input));
    color: var(--sw-submit-ink, var(--contact-ink));
    border-color: var(--contact-focus);
}
/* XF provides an accessible title and close control when the form is loaded via AJAX. */
html#XF[data-app="public"] .overlay:has(.sw-contact-form) {
    color: var(--contact-ink);
    background: var(--contact-fill);
    border: 1px solid var(--contact-edge);
    border-radius: 15px;
}
html#XF[data-app="public"] .overlay:has(.sw-contact-form) .overlay-title {
    position: relative;
    padding: 13px 48px 13px 16px;
    color: var(--sw-heading-ink);
    background-color: var(--contact-fill);
    background-image: linear-gradient(90deg, var(--contact-fill), transparent 96%), var(--sw-scenery);
    background-position: center;
    background-size: cover;
    border-color: var(--contact-rule);
    border-radius: 14px 14px 0 0;
}
html#XF[data-app="public"] .overlay:has(.sw-contact-form) .overlay-titleCloser {
    position: absolute;
    inset: 50% 8px auto auto;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    background: var(--contact-fill);
    color: var(--contact-ink);
}
html#XF[data-app="public"] .overlay .sw-contact-form { margin: 0; }
html#XF[data-app="public"] .overlay .sw-contact-form > .sw-contact-panel {
    --sw-inner-gutter: 10px;
    margin: 0;
    padding-block: 9px 10px;
    border: 0;
    border-radius: 0 0 14px 14px;
    background: var(--contact-fill);
    box-shadow: none;
}
html#XF[data-app="public"] .overlay .sw-contact-form > .sw-contact-panel::before,
html#XF[data-app="public"] .overlay .sw-contact-form > .sw-contact-panel::after,
html#XF[data-app="public"] .overlay .sw-contact-form .sw-contact-heading { display: none; }
@media (max-width: 650px) {
    html#XF[data-app="public"] .sw-contact-form .formRow { display: block; }
    html#XF[data-app="public"] .sw-contact-form .formRow > dt {
        padding: 10px 11px 3px;
        background: var(--contact-body);
        border: 0;
    }
    html#XF[data-app="public"] .sw-contact-form .formRow > dd { padding: 4px 11px 10px; }
    html#XF[data-app="public"] .sw-contact-form .formSubmitRow button.button { min-height: 44px; }
    html#XF[data-app="public"] .sw-contact-form .formSubmitRow-controls { padding: 6px 8px; }
}

/* Let XF's open drawer (500) stack against the sticky navigation (200). */
html#XF[data-app="public"] .p-body:has(#js-SideNavOcm.offCanvasMenu:is(.is-active, .is-transitioning)) {
    z-index: auto;
}

/* XF puts both uploaded pictures and generated initials in the same .avatar wrapper. */
html#XF[data-app="public"][data-summer-theme="dawn"] {
    --sw-avatar-rim: #907044;
    --sw-avatar-seat: #eaddc5;
    --sw-avatar-focus: #77551e;
}
html#XF[data-app="public"][data-summer-theme="twilight"] {
    --sw-avatar-rim: #98acba;
    --sw-avatar-seat: #2b3f4c;
    --sw-avatar-focus: #dfcd9f;
}
html#XF[data-app="public"][data-summer-theme] .avatar {
    --sw-avatar-gap: 1px;
    border-radius: 50%;
    outline: 1px solid var(--sw-avatar-rim);
    outline-offset: var(--sw-avatar-gap);
    /* Replace the differing three-pixel shadows in the post, widget and reply templates.
       This only paints outside the existing crop; box dimensions and positioning stay native. */
    box-shadow: 0 0 0 var(--sw-avatar-gap) var(--sw-avatar-seat) !important;
}
html#XF[data-app="public"][data-summer-theme] .avatar:is(.avatar--xxs, .avatar--xs) {
    --sw-avatar-gap: 0px;
    outline-offset: -1px;
}
html#XF[data-app="public"][data-summer-theme] a.avatar:focus-visible {
    outline: 2px solid var(--sw-avatar-focus);
    outline-offset: 2px;
}
@media (forced-colors: active) {
    html#XF[data-app="public"][data-summer-theme] .avatar { outline-color: CanvasText; }
    html#XF[data-app="public"][data-summer-theme] a.avatar:focus-visible { outline-color: Highlight; }
}