/* The parts of the mailing-list form that are the same whichever way it is
   dressed, and that would be a bug if a design forgot them.

   There are two candidate designs on trial — /mail and /mail2 — and each brings
   its own composition in signup-01.css or signup-04b.css. This file is what
   they are not allowed to disagree about: where the honeypot hides, what a
   reply looks like, and the fact that a control can be reached by keyboard.
   Splitting it this way means picking a winner is deleting the loser's stylesheet
   and moving two tags, rather than reconciling two copies of a form.

   Colours are written out rather than taken from custom properties: the pages
   that host this are the hand-written ones that never load app.css. */

/* Off-screen rather than display:none — a bot reading the DOM fills what it can
   see in the markup, and the ones that skip hidden fields skip the obvious
   hiding. Both the real label and the honeypot ride on this: the field's visible
   prompt is its placeholder, which is not a name anything can announce. */
.signup__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Forms do not inherit type. Saying so once here is cheaper than each design
   remembering, and the failure is loud but easy to miss on a page this quiet. */
.signup__input,
.signup__btn {
  font-family: inherit;
}

/* The reply from the server, and the one place the two designs must behave
   alike: it has to appear, it has to hold its line so the page does not jump
   under a cursor, and a refusal has to look different from a thank-you. */
.signup__status {
  min-height: 1.55em;
  margin: 6px 0 0;
}
/* Doubled up on purpose. Each design sets its own colour on .signup__status, and
   this file is loaded first, so a single class here would lose the tie on source
   order and a refusal would come out looking like a confirmation. */
.signup__status.signup__status--bad { color: #8f4437; }

.signup__btn { cursor: pointer; }
.signup__btn[disabled] { opacity: 0.55; cursor: default; }

/* Both designs draw their own focus, because both hide the browser's. These are
   the floors: a control you cannot see yourself land on is a control a keyboard
   user cannot use. */
.signup__btn:focus-visible {
  outline: 2px solid #242220;
  outline-offset: 3px;
  border-radius: 2px;
}
.signup__input:focus { outline: none; }

/* --- The mark in the corner ------------------------------------------------
   The one piece of decoration in here, and it earns the place: it began on 04B,
   it is now on both candidates, and it should be the same object on each. Two
   copies of these numbers in two stylesheets is two marks the moment anybody
   nudges one.

   It was fixed to the viewport, which is wrong in a way that only shows on a
   short window: the copy flows and the corner does not, so anything the page
   could not fit above the fold ended up underneath a solid black shape. Swept
   across 280 window sizes it collided with the copy in 82 of them — including
   the privacy line, and on the narrow ones the field and its button.

   So it is anchored to the bottom of the page rather than the bottom of the
   screen, and the page reserves --mark-visible of room for it. On a window with
   space to spare that is the same picture as before, because the page is exactly
   the height of the screen. On one without, the page grows and the mark sits
   below the copy instead of on top of it. Decoration gives way to words.

   The two custom properties are read by the pages to size that reservation, so
   the height of the mark and the room made for it cannot disagree. */
:root {
  --mark-width: min(460px, 30vw, 50vh);
  --mark-visible: min(270px, 30vh);
  --mark-bleed: -110px;
}
.mark {
  position: absolute;
  bottom: 0;
  right: var(--mark-bleed);
  width: var(--mark-width);
  /* Cropped rather than offset downwards. Pulling it past the bottom edge with a
     negative offset made its visible height a number nothing could read; giving
     it a height and cropping the rest means the room to reserve is the height. */
  height: var(--mark-visible);
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  color: #232323;
}
@media (max-width: 900px) {
  :root {
    --mark-width: min(360px, 40vw, 45vh);
    --mark-visible: min(210px, 26vh);
    --mark-bleed: -90px;
  }
}
@media (max-width: 560px) {
  :root {
    --mark-width: min(220px, 55vw, 40vh);
    --mark-visible: min(130px, 22vh);
    --mark-bleed: -55px;
  }
}