.contact { max-width: 48rem; margin-inline: auto; padding: clamp(1rem, 4vw, 2.5rem); }
.contact [hidden] { display: none; }
.contact-kinds { border: 0; padding: 0; margin: 0 0 1.5rem; }
.contact-kinds legend, .contact-field > label { display: block; font-weight: 650; margin-bottom: .65rem; }
.contact-choice, .contact-check { display: flex; align-items: baseline; gap: .6rem; margin-block: .6rem; }
.contact-field { margin-block: 1.5rem; }
.contact textarea, .contact input[type=email] { box-sizing: border-box; display: block; width: 100%; min-width: 0; padding: .8rem; border: 1px solid var(--pr-line); border-radius: .5rem; background: var(--pr-panel); color: inherit; font: inherit; }
.contact textarea { resize: vertical; }
.contact :focus-visible { outline: 3px solid var(--pr-accent); outline-offset: 3px; }
.contact-subtitle { font-size: 1.2rem; }
.contact-prefill { border-block: 1px solid var(--pr-line); padding-block: 1rem; margin-block: 1.5rem; }
.contact-details, .contact-id { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; max-height: 18rem; overflow: auto; }
.contact-challenge { min-height: 65px; width: 100%; margin-block: 1.5rem; }
.contact-actions { margin-top: 1.5rem; }
.contact-status { overflow-wrap: anywhere; min-height: 1.5em; }
.contact [data-tone=danger] { color: light-dark(#9c2333, #ffadb7); }
.contact [data-tone=ok] { color: light-dark(#216b40, #96d9ad); }
.contact button:disabled { opacity: .65; cursor: wait; }
@media (max-width: 420px) { .contact .btn { width: 100%; } .contact-kinds legend { max-width: 100%; } }