/* /clients/: one door. A plain HTML form posts the code to /api/clients, so it works with JavaScript off;
   a wrong code comes back as this same page with the error line shown. */

body[data-page="clients"] .door{padding-top:clamp(28px,5vw,72px);min-height:calc(100svh - 160px)}
.door__grid{display:grid;gap:clamp(28px,5vw,48px);align-items:start;max-width:1040px}
.door__head h1{margin:18px 0 0}
.door__line{max-width:34ch;margin-top:18px;font-size:clamp(1.08rem,1rem + .4vw,1.3rem);line-height:1.55;color:var(--color-body)}

/* The plate: the same instrument panel as the contact form, cut down to one field. */
.door__plate{display:grid;gap:18px;width:100%;max-width:460px;padding:clamp(22px,4vw,32px);border:1px solid var(--color-border);border-top:2px solid var(--signal-cyan);border-radius:3px;background:var(--color-surface)}
.door__to{margin:0;padding-bottom:16px;border-bottom:1px solid var(--color-border);color:var(--signal-cyan);font:600 .75rem/1 "JetBrains Mono",monospace;letter-spacing:.14em}
.door__plate .field label{font:.78rem/1.5 "JetBrains Mono",monospace}
.door__plate input{min-height:52px;border-radius:3px;font:500 1.0625rem/1 "JetBrains Mono",monospace;letter-spacing:.06em}
.door__plate .btn{width:100%;min-height:52px}
.door__plate .form__note{margin:0}
.door__error{margin:0;padding:12px 14px;border:1px solid var(--color-error);border-radius:3px;color:var(--color-error);font:500 .9375rem/1.5 var(--font-sans)}
.door__error[hidden]{display:none}
.door__plate input[aria-invalid="true"]{border-color:var(--color-error)}

.door__else{margin:0;color:var(--color-text-muted);font:500 .875rem/1.6 "JetBrains Mono",monospace}
.door__else a{color:var(--signal-cyan);text-underline-offset:3px}

@media (min-width:900px){
  .door__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(40px,7vw,96px)}
  .door__plate{justify-self:end}
  .door__else{grid-column:2;justify-self:end;width:100%;max-width:460px}
}