/* ==========================================================================
   /connect — the contact page

   Deliberately plainer than the rest of the site. Somebody arrives here
   because something is wrong, or because they want an answer, and neither
   mood is improved by a page performing at them. One column, generous type,
   nothing moving.

   .bl-input is reused as-is from components.css, with one override: the
   shared rule reserves 3rem of left padding for the little inline icon the
   homepage fields carry. These fields have labels above them instead — a
   real <label>, not a placeholder pretending to be one — so that space is
   given back.
   ========================================================================== */

/* The bottom figure is doing something the top one is not: it is keeping the
   footer off the Send button. Scrolled to the end of the form on a phone, the
   footer used to come up almost touching it, which makes the last thing you
   do on the page feel crowded against the first thing of the next one. */
.bl-connect__main {
  padding-block: var(--bl-space-7) clamp(5rem, 3rem + 10vw, 9rem);
}

.bl-connect__inner {
  max-width: 38rem;
  margin-inline: auto;
}

.bl-connect__head { margin-bottom: var(--bl-space-7); }

.bl-connect__title {
  margin: 0 0 var(--bl-space-4);
  /* balance, not pretty: a short heading wants its lines evened out, and at
     two or three words there is no orphan to solve. */
  text-wrap: balance;
}

.bl-connect__lede {
  margin: 0;
  color: var(--bl-text-muted);
  max-width: 34rem;
  /* pretty, not balance: this is running copy, and all it needs is for the
     browser to avoid leaving one word stranded on the last line. Ignored
     where unsupported, which costs nothing — the nbsp in the markup is what
     actually guarantees the dash never opens a line. */
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   The form
   -------------------------------------------------------------------------- */

.bl-connect__field { margin-bottom: var(--bl-space-5); }

.bl-connect__label {
  display: block;
  margin-bottom: var(--bl-space-2);
  font-weight: var(--bl-weight-medium);
  color: var(--bl-text);
}

/* Labels sit above, so the icon gutter the shared input reserves is dead
   space here. Everything else about .bl-input is inherited on purpose —
   including the focus ring, which is the one thing a keyboard user needs
   most and the first thing a bespoke form usually loses. */
.bl-connect__input {
  padding-left: 1.25rem;
  font-weight: var(--bl-weight-regular);
}

.bl-connect__select {
  /* A native select, on purpose. Every custom dropdown has to re-implement
     keyboard support, and most do it worse than the browser — which on iOS
     also means losing the big thumb-friendly wheel. */
  appearance: none;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' stroke='%23009cdc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.125rem center;
  background-size: 1.25rem 1.25rem;
}

.bl-connect__textarea {
  min-height: 11rem;
  padding-top: 1rem;
  line-height: 1.55;
  resize: vertical;
}

.bl-connect__submit { margin-top: var(--bl-space-3); }

.bl-connect__submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* --------------------------------------------------------------------------
   Error and thank-you
   -------------------------------------------------------------------------- */

/* The summary sits above the form rather than beside the field, because a
   message beside a field is one a screen reader walks past on the way down.
   It takes focus on load, so it is the first thing read. */
.bl-connect__error {
  margin: 0 0 var(--bl-space-5);
  padding: var(--bl-space-4) var(--bl-space-5);
  border: 1px solid var(--bl-border-strong);
  /* --bl-danger is the token that already exists for this; an invented
     orange would have been one more color nobody else uses. */
  border-left: 4px solid var(--bl-danger);
  border-radius: var(--bl-radius-md);
  background: var(--bl-surface-raised);
  color: var(--bl-text);
}

.bl-connect__error:focus-visible,
.bl-connect__done:focus-visible {
  outline: 3px solid var(--bl-blue);
  outline-offset: 4px;
}

/* Focus lands here after a successful send, and a focus ring on a region
   nobody tabbed to reads as a glitch. Removed only for the mouse path —
   :focus-visible above still draws it for the keyboard. */
.bl-connect__done:focus { outline: none; }

/* Once the message is sent the heading above is gone with the form, so this
   card can be the first thing in the column. Left alone it would sit tight
   under the menubar; this gives it back the room the heading occupied. */
.bl-connect__inner > .bl-connect__done:first-child {
  margin-top: var(--bl-space-7);
}

.bl-connect__done {
  padding: var(--bl-space-7) var(--bl-space-6);
  border: 1px solid var(--bl-border-strong);
  border-radius: var(--bl-radius-lg);
  background: var(--bl-surface-raised);
  text-align: center;
}

.bl-connect__doneemoji {
  margin: 0 0 var(--bl-space-4);
  font-size: 2.25rem;
  line-height: 1.1;
}

.bl-connect__donetitle { margin: 0 0 var(--bl-space-4); }

.bl-connect__donetext {
  margin: 0 auto;
  max-width: 28rem;
  color: var(--bl-text-muted);
}

.bl-connect__doneactions { margin: var(--bl-space-6) 0 0; }

@media (max-width: 34rem) {
  /* Narrow screens need MORE of that gap, not less: the footer is taller
     here and the Send button is full width, so the two meet sooner. */
  .bl-connect__main { padding-block: var(--bl-space-6) clamp(5.5rem, 4rem + 12vw, 8rem); }
  .bl-connect__submit { width: 100%; }
}

/* -------------------------------------------------------------------------
   The waiting state

   The endpoint opens an SMTP connection before it answers, so "sent" is a few
   seconds away, not instant. The button has to look occupied for all of it.
   ------------------------------------------------------------------------- */

.bl-connect__spinner {
  display: none;
  width: 1em;
  height: 1em;
  margin-left: 0.5rem;
  border: 2px solid currentColor;
  /* One transparent quarter is what makes the rotation readable. A full ring
     spinning looks like a ring standing still. */
  border-top-color: transparent;
  border-radius: 50%;
  animation: bl-connect-spin 0.7s linear infinite;
}

.bl-connect__submit.is-busy .bl-btn__arrow { display: none; }
.bl-connect__submit.is-busy .bl-connect__spinner { display: inline-block; }

/* A disabled button normally dims to say "not for you". This one is dimmed
   because it is BUSY, which is a different thing, and fading it out reads as
   the press having failed. Held at full strength, just not pressable. */
.bl-connect__submit.is-busy {
  opacity: 1;
  cursor: progress;
}

@keyframes bl-connect-spin {
  to { transform: rotate(360deg); }
}

/* Spinning is the one thing this must not do for somebody who asked for
   stillness. The ring stays, as a steady mark that something is in hand, and
   the label already says "Sending…". */
@media (prefers-reduced-motion: reduce) {
  .bl-connect__spinner {
    animation: none;
    border-top-color: currentColor;
    opacity: 0.45;
  }
}