.email-composer{max-width:780px;margin:2rem 0;padding:clamp(1rem,3vw,2rem);border:1px solid currentColor;border-radius:4px}
.email-composer summary{font-size:1.25rem;font-weight:700;cursor:pointer;min-height:44px;line-height:1.5}
.email-composer p{max-width:62ch;line-height:1.65}
.email-composer fieldset{border:0;padding:0;margin:1.5rem 0;min-width:0}
.email-composer legend{font-weight:700;margin-bottom:1rem}
.draft-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.draft-field{display:block;margin:0 0 1rem;font-weight:700}
.draft-field input,.draft-field select,.draft-field textarea{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:48px;margin-top:.5rem;padding:.8rem;border:1px solid currentColor;border-radius:3px;font:400 1rem/1.5 Arial,sans-serif;background:var(--draft-surface);color:var(--draft-ink)}
.draft-field textarea{resize:vertical}
.draft-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}
.draft-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.8rem 1rem;border:1px solid currentColor;border-radius:3px;background:transparent;color:inherit;font:700 1rem Arial,sans-serif;cursor:pointer}
.email-composer :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid currentColor;outline-offset:4px}
.email-composer [hidden]{display:none!important}
.email-composer .connection-button{color:var(--connection-label);text-decoration:none}
.draft-status{min-height:1.6em;font-size:.95rem;overflow-wrap:anywhere}
@media(max-width:600px){.draft-grid{grid-template-columns:1fr;gap:0}.email-composer{padding:1rem}.draft-actions>*{width:100%}}

.email-composer{--draft-surface:#101216;--draft-ink:#efefe9}