/* ==========================================================================
   THE FIELD MANUAL REQUEST, IN PLACE.

   Built around the phone. Three things decide the shape of this file, and all
   three are mobile problems rather than aesthetic ones.

   1. IT IS A SHEET ON A PHONE, NOT A CENTRED PANEL. A tall panel centred in a
      viewport that shrinks when the keyboard opens puts its own top and bottom
      out of reach, and nothing inside can recover them. Anchored to the bottom
      edge, the panel keeps its action against the keyboard and grows upward
      into whatever height is left.
   2. THE HEIGHT COMES FROM THE VISUAL VIEWPORT. Safari's URL bar and the
      keyboard both change what is actually visible, and `100vh` describes none
      of it. --f21-vv is written by the controller from visualViewport, on
      resize only, never on keystroke: a panel that moves while a man is typing
      is worse than one that is slightly too tall.
   3. THE PAGE BEHIND IS VISIBLE BUT NOT LEGIBLE THROUGH THE SURFACE. The
      backdrop is semitransparent so the site is still there; the panel itself
      is near-opaque, because consent text over a moving photograph is not
      consent text anybody reads.
   ========================================================================== */

.manual {
  padding: 0;
  border: 0;
  margin: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
}

.manual::backdrop {
  /* The page stays visible. This is the site's own ink, not a grey wash. */
  background: rgba(12, 15, 15, 0.78);
}

.manual__frame {
  position: fixed;
  inset: 0;
  display: flex;
  /* Bottom anchored where height is scarce. See note 1. */
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.manual__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  /* The visible height, minus room for the sheet to read as a sheet. */
  max-height: calc(var(--f21-vv, 100dvh) - 24px);
  display: flex;
  flex-direction: column;
  background: var(--ink-raised);
  border-top: 2px solid var(--f21-red);
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.55);
}

/* Above the phone the sheet becomes a panel, centred, with its own margin. */
@media (min-width: 720px) {
  .manual__frame { align-items: center; padding: 24px; }
  .manual__panel {
    max-height: calc(var(--f21-vv, 100dvh) - 48px);
    border: 1px solid var(--ink-line);
    border-top: 2px solid var(--f21-red);
  }
}

/* The title and the close share the row rather than fighting for it. The
   title gets its own flexible column and is allowed to wrap at a break the
   copy chooses; the close is a fixed 48 square that the title can never run
   into. Before this the long single line pushed itself under the control. */
.manual__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--ink-line-soft);
  flex: 0 0 auto;
}

.manual__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.manual__title {
  margin: 0;
  text-wrap: balance;
}
.manual__title:focus-visible { outline: 2px solid var(--f21-red); outline-offset: 4px; }

/* The close control. 48 square, which clears the 44 floor with room, and it
   sits in the header so it is never the thing the keyboard covers. */
.manual__close {
  margin-left: auto;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--ink-line);
  color: var(--paper);
  cursor: pointer;
}

.manual__close:hover { border-color: var(--paper-faint); }
.manual__close:focus-visible { outline: 2px solid var(--f21-red); outline-offset: 2px; }
.manual__close { font-size: 19px; }

/* The only scrolling region. The head and the foot stay put, so the submit
   action and the close control are always reachable with the keyboard open. */
.manual__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 20px 20px;
}

.manual__foot {
  flex: 0 0 auto;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ink-line-soft);
  background: var(--ink-raised);
}

/* The whole scope of the request, immediately above the control that accepts
   it. It is in the foot rather than the scrolling body on purpose: it must be
   on screen at the moment of the affirmative action, not somewhere a reader
   has scrolled past. */
/* Sentence case, not the uppercase .micro is set in elsewhere. Six lines of
   tracked-out capitals is a paragraph nobody reads, and this is the paragraph
   that has to be read. */
.manual__scope {
  margin: 0 0 12px;
  font-family: var(--font-text);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-dim);
  line-height: 1.5;
}

.manual__foot .btn { width: 100%; }

.manual .field { margin-bottom: 18px; }

/* A full line of body copy between the sentence that ends "send it" and the
   first label. At 16px body that is 26px, inside the 24 to 32 the direction
   asks for and on the established rhythm. Name and Email keep their own
   separation; each label stays tight to the box it names, so the grouping is
   never ambiguous. */
.manual__lead { margin: 0 0 26px; }

.manual .field input {
  width: 100%;
  font-size: 16px;
  min-height: 50px;
}

/* --- consent ------------------------------------------------------------

   Separate, optional, and unchecked. The manual is a delivery a man asked
   for; these are ongoing marketing and they are a different decision. The
   markup keeps them a different decision too. */

/* Texts are the one remaining choice, so they are the one thing still
   presented as one. The manual, the 21-day series and the Dispatch arrive
   together and their scope is stated above the submit control instead. */
.manual__texts {
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ink-line);
}

.manual__opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  cursor: pointer;
}

.manual__opt input {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--f21-red);
}

.manual__opt span { font-size: 15px; line-height: 1.45; }

.manual__disclosure {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--ink-line);
  color: var(--paper-dim);
  font-size: 13px;
  line-height: 1.5;
}

.manual__phone[hidden] { display: none; }

/* --- status -------------------------------------------------------------

   One region, announced. It carries validation, refusal and outcome, and it
   never carries a success that did not happen. */

.manual__status {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--paper-faint);
  font-size: 14px;
  line-height: 1.5;
}

.manual__status[hidden] { display: none; }
.manual__status[data-tone='error'] { border-left-color: var(--f21-red); }
.manual__status[data-tone='blocked'] { border-left-color: #c98a2b; }
.manual__status[data-tone='ok'] { border-left-color: var(--paper); }

.manual .field input[aria-invalid='true'] { border-color: var(--f21-red); }

.manual__err {
  display: block;
  margin-top: 6px;
  color: var(--f21-red);
  font-size: 13px;
}

.manual__err[hidden] { display: none; }

/* The honeypot. Not a bot check, and not described as one. */
.manual__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .manual, .manual__panel { animation: none !important; transition: none !important; }
}