/* Contact: "Let's talk". A full-screen sheet like the photo viewer, set Swiss: the form is the same
   ruled label | content list as the About section, running the full width of the page. No boxes:
   each field is a row, you write on the line beside its label, and the row's rule turns dark while
   it is in use. Whether a field is needed is written in grey where you type. */

.contact {
  position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh;
  max-width: none; max-height: none; margin: 0; border: 0; overflow: hidden;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--bg); color: var(--ink);
}
.contact[open] { display: flex; flex-direction: column; }
.contact::backdrop { background: var(--bg); }

.contact-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--gutter);
  padding: 0 var(--gutter);
}
.contact-bar > * { min-height: var(--bar); display: flex; align-items: center; }
.contact-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) var(--s-48); }

/* rows: a hairline above each, the label in the left column on wide screens and above the writing on a phone */
.contact-row {
  display: grid; gap: var(--s-8);
  padding: var(--s-16) 0; border-top: 1px solid var(--line);
  transition: border-color .15s;
}
.contact-row:last-of-type { border-bottom: 1px solid var(--line); }
@media (min-width: 768px) {
  .contact-row { grid-template-columns: var(--col-label) minmax(0, 1fr); column-gap: var(--s-16); }
}
.contact-field { display: grid; gap: var(--s-8); min-width: 0; }
/* the row in use, or one with a mistake in it */
.contact-row:focus-within { border-top-color: var(--ink); }
.contact-row:has(.contact-input[aria-invalid="true"]) { border-top-color: var(--alert); }

/* The writing sits on the row's first line, exactly like the label beside it. Its hit area reaches into
   the row's padding, so the whole height of the row can be pressed. */
.contact-input {
  display: block; width: 100%; margin: calc(var(--s-16) * -1) 0; padding: var(--s-16) 0;
  border: 0; border-radius: 0; background: transparent; color: inherit;
  font: inherit; line-height: var(--lh);
  -webkit-appearance: none; appearance: none;
}
.contact-input:focus, .contact-input:focus-visible { outline: none; box-shadow: none; }
.contact-input::placeholder { color: var(--ink-2); opacity: 1; }
textarea.contact-input {
  min-height: calc(var(--lh) * 5 + var(--s-32)); resize: none;
  field-sizing: content;                     /* it grows with the message where the browser can */
}
.contact-error { color: var(--alert); }

.contact-end { display: grid; gap: var(--s-16); }
/* the [Send] control's hit area is taller than its line: pull it back so its text sits on the row's first line */
.contact-end > .acts { margin-block: calc((var(--lh) - var(--s-48)) / 2); }
.contact-meta { display: grid; }
.contact-note:empty { display: none; }
/* links inside a sentence are underlined, as elsewhere on the page */
.contact-end p a { text-decoration: underline; }

/* the bot trap is out of sight and out of reach */
.contact-trap { position: absolute; left: -100vw; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.contact-thanks { display: grid; gap: var(--s-8); padding-top: var(--s-16); border-top: 1px solid var(--line); }
.contact-thanks-text:focus { outline: none; }

@media (forced-colors: active) {
  .contact-row:focus-within { border-top: 2px solid Highlight; }
}