:root {
    --dtd-tools-purple: #492f75;
    --dtd-tools-purple-dark: #2d1d49;
    --dtd-tools-gold: #efc64d;
    --dtd-tools-ink: #241c2f;
}

body.dtd-modal-open { overflow: hidden; }

.dtd-site-dialog {
    width: min(94vw, 980px);
    max-width: none;
    max-height: min(88vh, 820px);
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 22px;
    color: var(--dtd-tools-ink);
    background: #fff;
    box-shadow: 0 30px 100px rgb(18 10 31 / 48%);
    /* Native <dialog> fade/scale-in via @starting-style - works with the
       showModal() call already in site-tools.js, no JS animation needed.
       allow-discrete lets the transition apply across the display:none
       <-> block flip a <dialog> does on open/close. */
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity .22s ease, transform .22s ease, overlay .22s ease allow-discrete, display .22s ease allow-discrete;
}
.dtd-site-dialog::backdrop {
    background: rgb(20 12 34 / 72%);
    backdrop-filter: blur(6px);
    opacity: 1;
    transition: opacity .22s ease, overlay .22s ease allow-discrete, display .22s ease allow-discrete;
}
@starting-style {
    .dtd-site-dialog[open] { opacity: 0; transform: scale(.96) translateY(12px); }
    .dtd-site-dialog[open]::backdrop { opacity: 0; }
}
.dtd-site-dialog.is-dialog-fallback {
    position: fixed;
    z-index: 100002;
    inset: 50% auto auto 50%;
    display: block;
    transform: translate(-50%, -50%);
}
.dtd-site-dialog.is-dialog-fallback::after {
    content: "";
    position: fixed;
    z-index: -1;
    inset: -100vh -100vw;
    background: rgb(20 12 34 / 72%);
    backdrop-filter: blur(6px);
}
.dtd-site-dialog__close {
    position: sticky;
    z-index: 5;
    top: 16px;
    float: right;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 16px 16px -58px 0;
    padding: 0;
    border: 1px solid rgb(73 47 117 / 14%);
    border-radius: 50%;
    color: var(--dtd-tools-purple);
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 8px 20px rgb(35 24 55 / 12%);
    cursor: pointer;
}
.dtd-site-dialog__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }

.dtd-join-dialog__header {
    position: relative;
    overflow: hidden;
    padding: clamp(42px, 7vw, 76px) clamp(28px, 7vw, 76px) 42px;
    color: #fff;
    background: linear-gradient(135deg, rgb(73 47 117 / 88%), rgb(45 29 73 / 92%));
}
.dtd-join-dialog__header::before {
    /* Settable background photo (dtd_join_bg_photo option), desaturated
       so the purple gradient above reads as a proper color wash rather
       than fighting the photo's own colors. Falls back to nothing (just
       the flat gradient) when no photo is set. */
    position: absolute;
    z-index: -1;
    inset: 0;
    content: '';
    background: var(--dtd-join-bg-photo, none) center / cover;
    filter: grayscale(1);
}
.dtd-join-dialog__eyebrow,
.dtd-contact-editor__eyebrow { margin: 0 0 12px; color: var(--dtd-tools-gold); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dtd-join-dialog__header h2 { max-width: 14ch; margin: 0; color: #fff; font-size: clamp(42px, 6vw, 68px); line-height: .98; }
.dtd-join-dialog__header > p:last-child { max-width: 58ch; margin: 22px 0 0; color: rgb(255 255 255 / 78%); font-size: clamp(17px, 2vw, 20px); line-height: 1.55; }

.dtd-join-dialog__people { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 28px clamp(24px, 5vw, 52px) 18px; }
.dtd-join-person { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: start; min-width: 0; padding: 18px; border: 1px solid rgb(73 47 117 / 12%); border-radius: 16px; background: #fbfafc; }
.dtd-join-person > img,
.dtd-join-person__placeholder { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 14px; object-fit: cover; background: #eee8f5; }
.dtd-join-person__placeholder svg { width: 34px; height: 34px; fill: none; stroke: var(--dtd-tools-purple); stroke-width: 1.8; }
.dtd-join-person__role { margin: 0 0 3px; color: #745f92; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dtd-join-person h3 { margin: 0 0 9px; color: var(--dtd-tools-ink); font-size: 22px; line-height: 1.1; }
.dtd-join-person a { display: flex; gap: 8px; align-items: center; min-width: 0; margin-top: 6px; color: var(--dtd-tools-purple); font-size: 14px; }
.dtd-join-person a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtd-join-person a svg,
.dtd-join-dialog__links svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.dtd-join-person a svg .is-filled,
.dtd-join-dialog__links svg .is-filled { fill: currentColor; stroke: none; }

.dtd-join-dialog__links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 clamp(24px, 5vw, 52px) 38px; }
.dtd-join-dialog__links > a { display: flex; gap: 14px; align-items: center; padding: 17px 19px; border-radius: 14px; color: var(--dtd-tools-purple); background: #f2edf8; text-decoration: none; transition: transform .18s ease, background .18s ease; }
.dtd-join-dialog__links > a:hover { transform: translateY(-2px); background: #ebe3f5; }
.dtd-join-dialog__links svg { width: 23px; height: 23px; }
.dtd-join-dialog__links small { display: block; margin-bottom: 2px; color: #766a81; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dtd-join-dialog__links span { color: var(--dtd-tools-ink); font-weight: 700; line-height: 1.35; }

.dtd-contact-edit { cursor: pointer; }
.dtd-contact-editor form { padding: clamp(30px, 5vw, 54px); }
.dtd-contact-editor h2 { margin: 0 0 26px; color: var(--dtd-tools-ink); font-size: 38px; }
.dtd-contact-editor__image { display: flex; gap: 18px; align-items: center; margin-bottom: 24px; }
.dtd-contact-editor__image img { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; background: #f1edf4; }
.dtd-contact-editor__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dtd-contact-editor__grid label { color: #413749; font-size: 13px; font-weight: 700; }
.dtd-contact-editor__grid .is-wide { grid-column: 1 / -1; }
.dtd-contact-editor__grid input,
.dtd-contact-editor__grid textarea { box-sizing: border-box; width: 100%; margin-top: 7px; padding: 12px 13px; border: 1px solid rgb(73 47 117 / 45%); border-radius: 9px; background: #fbfafc; font: inherit; font-weight: 400; resize: vertical; }
.dtd-contact-editor__grid textarea { min-height: 2.6em; }
.dtd-contact-editor__grid input:focus,
.dtd-contact-editor__grid textarea:focus { border-color: #6d56a1; outline: 3px solid rgb(109 86 161 / 14%); }
.dtd-contact-editor__status { min-height: 1.5em; margin: 18px 0 0; color: #6a567d; }
.dtd-contact-editor__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* WordPress' generic .button styles are overridden by the public theme, so
   the editor owns a complete, high-contrast button system. */
.dtd-contact-editor__button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px !important;
    border: 2px solid var(--dtd-tools-purple) !important;
    border-radius: 10px !important;
    color: var(--dtd-tools-purple) !important;
    background: #fff !important;
    box-shadow: 0 6px 16px rgb(35 24 55 / 8%) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.dtd-contact-editor__button:hover { color: #fff !important; background: var(--dtd-tools-purple) !important; box-shadow: 0 10px 22px rgb(73 47 117 / 20%) !important; transform: translateY(-1px); }
.dtd-contact-editor__button--primary { color: #fff !important; background: var(--dtd-tools-purple) !important; }
.dtd-contact-editor__button--primary:hover { background: var(--dtd-tools-purple-dark) !important; }
.dtd-contact-editor__button:focus-visible { outline: 4px solid rgb(239 198 77 / 48%) !important; outline-offset: 3px; }
.dtd-contact-editor__button:disabled { opacity: .58; cursor: wait; transform: none; }

@media (max-width: 680px) {
    .dtd-site-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 16px; }
    .dtd-join-dialog__people,
    .dtd-join-dialog__links,
    .dtd-contact-editor__grid { grid-template-columns: 1fr; }
    .dtd-contact-editor__grid .is-wide { grid-column: auto; }
    .dtd-join-person { grid-template-columns: 68px minmax(0, 1fr); padding: 15px; }
    .dtd-join-person > img,
    .dtd-join-person__placeholder { width: 68px; height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
    .dtd-join-dialog__links > a { transition: none; }
}

/* Recruitment dialog refinement: balanced intro and consistently composed
   officer cards without clipped contact details. */
.dtd-join-dialog__header > p:last-child { text-wrap: balance; }
.dtd-join-person { grid-template-columns: 96px minmax(0, 1fr); align-items: center; min-height: 0; }
.dtd-join-person > img,
.dtd-join-person__placeholder { width: 96px; height: 96px; object-position: center 20%; }
.dtd-join-person > div { min-width: 0; }
.dtd-join-person h3 { text-wrap: balance; }
.dtd-join-person a { align-items: flex-start; line-height: 1.28; }
.dtd-join-person a span { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }

/* Contact editor: compact two-column rows, visible controls, and explicit
   loading/saving feedback. */
.dtd-contact-editor form { position: relative; }
.dtd-contact-editor__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dtd-contact-editor__grid .is-wide { grid-column: auto; }
.dtd-contact-editor__grid label { display: grid; grid-template-columns: minmax(110px, 140px) minmax(0, 1fr); gap: 18px; align-items: center; }
.dtd-contact-editor__grid input,
.dtd-contact-editor__grid textarea { min-height: 46px; margin-top: 0; border: 1.5px solid rgb(73 47 117 / 34%); background: #fff; box-shadow: inset 0 1px 2px rgb(33 23 56 / 4%); }
.dtd-contact-editor__grid input:hover,
.dtd-contact-editor__grid textarea:hover { border-color: rgb(73 47 117 / 58%); }
.dtd-contact-editor .dtd-contact-editor__grid input:not([type="checkbox"]),
.dtd-contact-editor .dtd-contact-editor__grid textarea {
    appearance: none !important;
    min-height: 48px !important;
    padding: 11px 13px !important;
    border: 2px solid #cfc5dc !important;
    border-radius: 10px !important;
    color: #241c2f !important;
    -webkit-text-fill-color: #241c2f !important;
    background: #fff !important;
    box-shadow: inset 0 1px 2px rgb(33 23 56 / 5%) !important;
}
.dtd-contact-editor .dtd-contact-editor__grid input:not([type="checkbox"]):hover,
.dtd-contact-editor .dtd-contact-editor__grid textarea:hover { border-color: #8e7aaa !important; }
.dtd-contact-editor .dtd-contact-editor__grid input:not([type="checkbox"]):focus,
.dtd-contact-editor .dtd-contact-editor__grid textarea:focus {
    border-color: var(--dtd-tools-purple) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 4px rgb(73 47 117 / 14%) !important;
}
.dtd-contact-editor button.dtd-contact-editor__button {
    appearance: none !important;
    min-width: 132px !important;
    min-height: 48px !important;
    border: 2px solid var(--dtd-tools-purple) !important;
    border-radius: 10px !important;
    color: var(--dtd-tools-purple) !important;
    -webkit-text-fill-color: var(--dtd-tools-purple) !important;
    background: #fff !important;
}
.dtd-contact-editor button.dtd-contact-editor__button--primary {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: var(--dtd-tools-purple) !important;
}
.dtd-contact-editor button.dtd-contact-editor__button:hover,
.dtd-contact-editor button.dtd-contact-editor__button--primary:hover {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: var(--dtd-tools-purple-dark) !important;
}
.dtd-contact-editor__status { display: flex; gap: 9px; align-items: center; }
.dtd-contact-editor form.is-loading .dtd-contact-editor__status::before,
.dtd-contact-editor form.is-saving .dtd-contact-editor__status::before { width: 15px; height: 15px; border: 2px solid rgb(73 47 117 / 20%); border-top-color: var(--dtd-tools-purple); border-radius: 50%; content: ''; animation: dtd-contact-spin .7s linear infinite; }
.dtd-contact-editor form[aria-busy="true"] .dtd-contact-editor__grid,
.dtd-contact-editor form[aria-busy="true"] .dtd-contact-editor__image { opacity: .58; }
@keyframes dtd-contact-spin { to { transform: rotate(360deg); } }

@media (max-width: 680px) {
    .dtd-contact-editor__grid label { grid-template-columns: 1fr; gap: 6px; }
    .dtd-join-person { grid-template-columns: 76px minmax(0, 1fr); min-height: 0; }
    .dtd-join-person > img,
    .dtd-join-person__placeholder { width: 76px; height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    .dtd-contact-editor form.is-loading .dtd-contact-editor__status::before,
    .dtd-contact-editor form.is-saving .dtd-contact-editor__status::before { animation-duration: 1.5s; }
}