/*
 * The reviewer application.
 *
 * A LONG FORM THAT MUST NOT LOOK LIKE ONE. Fourteen questions is not many, and
 * it is more than any other form in this panel, so the whole job of this file
 * is to make the page read as five short conversations rather than one wall of
 * boxes. Every device below is doing that and nothing here is decoration:
 *
 *   THE PARTS ARE SEPARATED BY AIR, NOT BY CARDS. Five bordered white panels
 *   stacked down a page is the SaaS-kit answer and it makes the form look
 *   longer, because every card announces itself and the reader counts them.
 *   A rule and a generous gap between parts does the same grouping and lets the
 *   eye run past what it is not filling in yet.
 *
 *   THE PARTS ARE SECTIONS WITH HEADINGS, NOT FIELDSETS WITH LEGENDS. A
 *   fieldset groups controls answering ONE question, which the checkbox groups
 *   inside genuinely do and "About you" does not. It also fixed a bug: a UA
 *   paints a legend ON the fieldset's top border, so the divider rule between
 *   parts ran straight through the section heading. The headings are the only
 *   large type in the column, so they are what the reader navigates by when
 *   they come back to a field they skipped.
 *
 *   THE TERMS PART LOOKS DIFFERENT ON PURPOSE. It is the one part that is not
 *   asking for information: it is stating what both sides are agreeing to, and
 *   it is the part somebody will re-read. It gets the sunken ground so it reads
 *   as the document it is.
 *
 * WHAT IS NOT HERE: no card shadow, no gradient, no per-field animation, and
 * nothing that moves when a section scrolls into view. This is a form somebody
 * fills in once, carefully; motion on it is noise at the moment they are
 * concentrating hardest.
 *
 * The checkbox, checkgroup and consent components are page-scoped for now. They
 * hoist to components.css the moment a second page uses one, which is the rule
 * the marketing site's main.css states and this panel follows.
 */

/* ==========================================================================
   The column
   ========================================================================== */

/* THE COLUMN IS WIDENED BY THE GRID, NOT BY --auth-field, and finding that out
   cost a measurement. `.auth--wide` raises the field cap to 34rem and this page
   asked for 42rem, and the form still came out 521px wide: at 1440 the layout
   grid is `1fr 1fr`, so the column is 720px, the padding takes 96px off each
   side, and the cap never binds at all. Raising it further would have changed
   nothing, twice.

   So the grid gives this page's form the larger share. 1.25fr against 1fr is
   800px at 1440, which leaves 608px of content: two tracks of about 290px,
   which is a real width for a country name. The band keeps enough room for the
   character and the ledger and no more, which is all it needs. */
@media (min-width: 60em) {
  .auth--wide:has(.applyform) .auth__grid { grid-template-columns: 1.25fr 1fr; }
  .auth--wide .auth__form:has(.applyform) { --auth-field: 42rem; }
}

/* ==========================================================================
   The band, on a page whose form is three thousand pixels tall

   THE ASIDE IS STICKY HERE AND NOWHERE ELSE, and this is the single most
   important rule in the file. `.auth__aside-inner` is centred in a band that
   stretches to the height of the form. On a sign-in screen the form is 400px
   and the centre is on screen. On this one the form is 3,224px, so the centre
   was measured at 1,412px down the page: the band rendered as an empty navy
   rectangle for the whole of the first screen, and the terms it exists to state
   were invisible to anybody who did not scroll a page and a half.

   Sticky rather than top-aligned, so the commitments stay beside the form the
   whole way down. Somebody deciding whether to spend five minutes on this is
   deciding it at field four as much as at field one.
   ========================================================================== */

@media (min-width: 60em) {
  .auth--wide:has(.applyform) .auth__aside-inner,
  .auth--wide:has(.nextstep) .auth__aside-inner {
    /* `align-self` FIRST, AND WITHOUT IT THE STICKY DOES NOTHING. The band is
       a flex container with `align-items: safe center`, so the inner block's
       static position was measured at 1,334px down a 3,479px column. Sticky
       CLAMPS an element inside its containing block; it never lifts one above
       its own static position, so the rule applied cleanly and changed nothing
       at all. Moving the static position to the top is the actual fix, and the
       sticky is then what keeps it there. */
    align-self: start;
    position: sticky;
    inset-block-start: var(--mbx-space-7);
    margin-block: 0;
  }
}

/* ==========================================================================
   A field that needs explaining takes the whole row

   THE FAULT THIS FIXES, AND THE FIX IT REPLACED. A `.field` is a label, an
   optional hint and a control, stacked. Two side by side in a grid row stretch
   to the taller of them, so a two-line hint on one pushed its own control 57px
   below its neighbour's: the name box and the email box sat at different
   heights and the row read as a rendering fault.

   The first fix was `margin-block-start: auto` on the controls, which aligned
   them beautifully and separated every short label from its own input by the
   height of the tall one's hint. Trading a misaligned control for a label
   floating 75px above the box it names is a bad trade: proximity is what tells
   somebody which label belongs to which field.

   So the cause goes instead. A field carrying help text gets the full row,
   which removes the mismatched pair entirely, and gives the explanation the
   full measure to be read at. Written with `:has()` rather than a class, so it
   holds for a hint somebody adds in a year without them having to know.
   ========================================================================== */

@media (min-width: 48em) {
  .applyform .fieldgrid > .field:has(> .hint) { grid-column: 1 / -1; }
}

/* ==========================================================================
   The parts
   ========================================================================== */

.applyform {
  display: flex;
  flex-direction: column;
  /* Matches the padding below each divider, so the rule sits centred in its
     own air rather than 64 above and 48 below. */
  gap: var(--mbx-space-7);
  margin: 0;
}

.applyform__part {
  min-inline-size: 0;   /* a fieldset's min-content floor, which otherwise
                           stops the field grid from ever shrinking */
  margin: 0;
  padding: 0;
  border: 0;
}

/* THE RULE IS ON THE PART, NOT BETWEEN PARTS, so the first one does not get a
   line above it and the terms block below can opt out of its own. */
.applyform__part + .applyform__part {
  padding-block-start: var(--mbx-space-7);
  border-block-start: 1px solid var(--mbx-border);
}

/* The one instruction on this form that changes an outcome, promoted out of a
   field hint. Full measure, body size, directly under the heading it belongs
   to, because at 14px grey beside a name box nobody was going to read it. */
.applyform__note {
  /* NO NEGATIVE MARGIN. The first attempt pulled this up by the heading's own
     bottom margin to "close the gap", and collapsed the two into each other:
     the note's first line landed on the heading's baseline. Measured, not
     looked at, which is the only way that kind of overlap gets caught. */
  margin: 0 0 var(--mbx-space-6);
  font-size: var(--pnl-text-body);
  line-height: var(--pnl-lh-body);
  color: var(--mbx-ink-muted);
  max-inline-size: var(--mbx-measure);
}

.applyform__heading {
  margin: 0 0 var(--mbx-space-5);
  padding: 0;
  font-family: var(--mbx-font-display);
  font-size: var(--pnl-text-xl);
  line-height: var(--pnl-lh-xl);
  font-weight: 600;
  letter-spacing: var(--mbx-track-heading);
  color: var(--mbx-ink);
}

/* ==========================================================================
   Checkboxes

   A REAL CHECKBOX, HIDDEN BEHIND A DRAWN ONE, never a div pretending. The
   input keeps its own focus, its own keyboard behaviour and its own place in
   the accessibility tree; the span is only paint.

   opacity:0 and not display:none, for the reason the site's toggle pattern
   gives: a control removed from the box tree is removed from the tab order and
   from the accessibility tree with it.
   ========================================================================== */

/* DISPLAY BLOCK, OVERRIDING `.field`'s FLEX COLUMN, and this is a fix rather
   than a preference. A `<legend>` is not a flex item: engines render it in the
   fieldset's border position and it takes no part in the flex layout, so the
   8px gap that separates a label from its hint everywhere else on this form
   applied to every control except these, and the group legend sat directly on
   top of its own help text. The same collision as the section note above, from
   a different cause, and found the same way: by measuring rather than looking.

   In normal flow the legend is an ordinary block and the margins below are
   honoured. */
.checkgroup {
  display: block;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.checkgroup > .label {
  display: block;
  inline-size: 100%;
  padding: 0;
  margin-block-end: var(--mbx-space-2);
}

.checkgroup__opts {
  display: grid;
  gap: var(--mbx-space-3);
  margin-block-start: var(--mbx-space-3);
}

/* Two columns for a long list of short options, one for anything else. The
   breakpoint is the same 48em the field grid uses, so a form never has one
   half of it in two columns and the other in one. */
@media (min-width: 48em) {
  .checkgroup__opts--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--mbx-space-3);
  align-items: start;
  cursor: pointer;
}

.check__in {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 20px box on a 24px line, so the mark sits on the first line of a label that
   wraps rather than drifting to its middle. */
.check__face {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.125rem;
  background: var(--mbx-bg-raised);
  border: 1px solid var(--mbx-border-control);
  border-radius: var(--mbx-radius-sm);
  transition: background-color var(--mbx-dur-fast) var(--mbx-ease),
              border-color var(--mbx-dur-fast) var(--mbx-ease);
}

/* The tick is a background image for the same reason the select's arrow is:
   no extra element, nothing to hide from the pointer. White on the accent, so
   it is defined here rather than as a token. */
.check__in:checked + .check__face {
  background-color: var(--mbx-accent);
  border-color: var(--mbx-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.5' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.check:hover .check__face { border-color: var(--mbx-c-line-strong); }

/* THE RING GOES ON THE DRAWN BOX, because the real input is a 1px square
   somewhere behind it and a focus ring there is invisible. :focus-visible on
   the input, ring on its sibling: keyboard users see it, mouse users do not. */
.check__in:focus-visible + .check__face {
  outline: var(--mbx-focus-width) solid var(--mbx-focus);
  outline-offset: var(--mbx-focus-offset);
}

.check__label {
  font-size: var(--pnl-text-body);
  line-height: var(--pnl-lh-body);
  color: var(--mbx-ink);
}

/* ==========================================================================
   The terms
   ========================================================================== */

.applyform__part--terms {
  padding: var(--mbx-space-6);
  background: var(--mbx-bg-sunken);
  border: 1px solid var(--mbx-border-warm);
  border-radius: var(--mbx-radius-md);
}

/* It draws its own ground, so it does not also want the divider rule that
   separates the parts above it. Two separations in one place read as a
   mistake. */
.applyform__part + .applyform__part--terms {
  padding-block-start: var(--mbx-space-6);
  border-block-start: 1px solid var(--mbx-border-warm);
}

.applyform__terms-lead {
  margin: 0 0 var(--mbx-space-5);
  font-size: var(--pnl-text-body);
  line-height: var(--pnl-lh-body);
  color: var(--mbx-ink-muted);
  max-inline-size: var(--mbx-measure);
}

.consent + .consent { margin-block-start: var(--mbx-space-4); }

/* A consent label is a sentence rather than a chip, so it takes the reading
   measure and the muted ink the rest of the running text takes. */
.check--consent .check__label {
  font-size: var(--pnl-text-sm);
  line-height: var(--pnl-lh-sm);
  color: var(--mbx-ink-muted);
  max-inline-size: var(--mbx-measure);
}

.check--consent .check__label a { color: var(--mbx-accent-ink); }

.consent--invalid .check__face { border-color: var(--mbx-danger-ink); }

.applyform__privacy {
  margin: var(--mbx-space-6) 0 0;
  padding-block-start: var(--mbx-space-5);
  border-block-start: 1px solid var(--mbx-border-warm);
  font-size: var(--pnl-text-sm);
  line-height: var(--pnl-lh-sm);
  color: var(--mbx-ink-soft);
  max-inline-size: var(--mbx-measure);
}

/* ==========================================================================
   Submit
   ========================================================================== */

.applyform__submit { display: flex; }

/* FULL WIDTH ON A PHONE, its own width above it. A block button on a desktop
   form is a 700px target for one action, which reads as a banner rather than a
   button. */
.applyform__submit .btn { inline-size: 100%; }

@media (min-width: 40em) {
  .applyform__submit .btn { inline-size: auto; min-inline-size: 14rem; }
}

/* ==========================================================================
   The success screen

   THE NUDGE IS A PANEL AND THE CONFIRMATION IS A CALLOUT, which is the right
   way round. The callout says what happened; this says what to do next, and it
   is the more useful of the two: an approval attaches to the email address, so
   somebody who signs up now has Pro running the moment they are approved, and
   somebody who waits spends their first evening on the free allowance.
   ========================================================================== */

.nextstep {
  margin-block-start: var(--mbx-space-6);
  padding: var(--mbx-space-6);
  background: var(--mbx-accent-soft);
  border: 1px solid var(--mbx-accent-soft-border);
  border-radius: var(--mbx-radius-md);
}

.nextstep__title {
  margin: 0 0 var(--mbx-space-3);
  font-family: var(--mbx-font-display);
  font-size: var(--pnl-text-lg);
  line-height: var(--pnl-lh-lg);
  font-weight: 600;
  color: var(--mbx-ink);
}

.nextstep p {
  margin: 0;
  font-size: var(--pnl-text-body);
  line-height: var(--pnl-lh-body);
  color: var(--mbx-ink-muted);
  max-inline-size: var(--mbx-measure);
}

.nextstep__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mbx-space-3);
  margin-block-start: var(--mbx-space-5);
}