/* ---------------------------------------------------------------------------
   Sign-up. Extends styles.css rather than restating it: the palette, the type
   scale, .shell, .btn and .fineprint all come from there, so the two pages
   cannot drift into looking like different products.
   --------------------------------------------------------------------------- */

.signup {
  padding: 3rem 0 6rem;
}

.signup__shell {
  max-width: 46rem;
}

/* --- Step counter -------------------------------------------------------- */

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.steps__item {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* The inactive circles were outlined in --rule at 1.51:1, which is the weakest
   part of an indicator that is ALSO the only thing saying which step somebody is
   on. See signup.js for the other half: aria-current, so it is said as well as
   drawn. */
.steps__n {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--ink-faint);
  border-radius: 50%;
  font-size: .7rem;
}

.steps__item.is-current { color: var(--ink); }
.steps__item.is-current .steps__n {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--paper);
}
.steps__item.is-done .steps__n {
  border-color: var(--ink);
  color: var(--ink);
}

/* --- Panels -------------------------------------------------------------- */

.panel { display: none; }
.panel.is-active { display: block; }
/* [hidden] must beat .is-active, or a panel switched off still shows. */
.panel[hidden] { display: none !important; }

.panel__title {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  line-height: 1.12;
  margin: 0 0 .6rem;
}

.panel__lede {
  color: var(--ink-soft);
  max-width: 40rem;
  margin: 0 0 2rem;
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.25rem;
}

/* --- Fields -------------------------------------------------------------- */

.field {
  display: block;
  margin-bottom: 1.6rem;
  border: 0;
  padding: 0;
}

/* An author `display` beats the browser's own [hidden] rule, so without this
   a field the script has hidden stays on screen — the JS looks broken when it
   is working perfectly. Same reason .panel[hidden] is spelled out below. */
.field[hidden],
[data-when][hidden] {
  display: none !important;
}

.field--narrow input { max-width: 10rem; }

.field__label {
  display: block;
  font-weight: 600;
  margin-bottom: .45rem;
}

/* ---------------------------------------------------------------------------
   THE EDGE OF A CONTROL IS NOT DECORATION. WCAG 1.4.11 asks 3:1 of anything
   that identifies a control, and --rule measures 1.51:1 against --paper — on a
   page whose background is also --paper, with no fill difference and no shadow.
   So the only thing marking every text box on the signup form, the sign-in
   finder and the "Ask us" forms was a hairline at under half the minimum, and
   to anybody with reduced contrast sensitivity there was nothing there at all.

   --ink-faint is 5.07:1 on --paper and is already the token for quiet ink.

   The inset shading is the second signal and is doing a job rather than
   decorating: a field is a recess, and light is what says so when the border is
   the part somebody cannot see. It is the same inset on .ask and .suffixed, so
   every box on the site reads as the same kind of object.
   --------------------------------------------------------------------------- */
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--ink-faint);
  box-shadow: inset 0 1px 2px rgba(22,20,15,.07);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.field__hint {
  display: block;
  margin-top: .45rem;
  font-size: .875rem;
  color: var(--ink-faint);
}

.field__hint code {
  font-size: .95em;
  background: var(--paper-deep);
  padding: .05em .3em;
}

/* A hint that sits ABOVE its control rather than under it needs the space on
   the other side, or the text touches the box it is describing. */
p.field__hint {
  margin-bottom: .55rem;
}

.field__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .6rem;
}

.field__count {
  font-size: .875rem;
  color: var(--ink-faint);
}

/* THE FILE INPUT IS HIDDEN AND THE LABEL IS THE CONTROL. Clipped rather than
   `display: none`, because a hidden input is out of the tab order and a person
   using a keyboard would have no way to reach it at all — the label alone is
   not focusable. Clipping keeps it reachable and invisible. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A label is not a button, so it does not get the pointer or the focus ring on
   its own. The file input inside it is what takes focus, and the ring is drawn
   here so that tabbing to it looks like tabbing to a button. */
.btn--file {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.btn--file:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The addresses their colleagues will sign in with, shown before any of them
   exists. Set apart from the field above it because it is a thing to READ
   rather than another box to fill in. */
.invites {
  margin: 1.25rem 0 1.5rem;
  border: 1px solid var(--ink-faint);
  border-left: 3px solid var(--accent);
  background: var(--paper-deep);
  padding: 1rem 1.1rem;
}

.invites__title {
  margin: 0;
  font-size: 1rem;
}

.invites__note {
  margin: .35rem 0 0;
  font-size: .875rem;
  color: var(--ink-faint);
}

.invites__rows {
  margin: .8rem 0 0;
  padding: 0;
  list-style: none;
}

/* GRID RATHER THAN A FLEX ROW, so the arrows line up down the page whatever
   length the addresses are — a ragged middle column makes a list of twelve
   unreadable, which defeats the point of showing it. It collapses to one
   column on a phone, where two addresses and an arrow will not fit across. */
.invites__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: .5rem;
  padding: .3rem 0;
  font-size: .9rem;
  border-top: 1px solid var(--ink-faint);
}

.invites__row:first-child {
  border-top: 0;
}

.invites__from {
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

.invites__arrow {
  color: var(--ink-faint);
}

/* EDITABLE, AND IT HAS TO LOOK IT. A row of plain text with one box in it
   only works if the box reads as a box, so it takes the same recess treatment
   as every other field on the site — border, inset shading, same radius. The
   domain beside it is deliberately NOT a field: it is the workspace's, and
   nobody chooses it here. */
.invites__to {
  display: flex;
  align-items: center;
  gap: .15rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.invites__login {
  flex: 1 1 6rem;
  min-width: 4rem;
  /* 44px, the same floor every control in the product has. A name box on a
     phone that a thumb cannot hit is a name nobody corrects. */
  min-height: 44px;
  padding: .4rem .55rem;
  border: 1px solid var(--ink-faint);
  box-shadow: inset 0 1px 2px rgba(22,20,15,.07);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
}

.invites__login:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* NEVER COLOUR ALONE — the line under the list names the address that is
   wrong, and Continue says so too. One man in twelve cannot separate these
   two borders, so the thickness changes as well as the hue. */
.invites__login.is-wrong {
  border-color: var(--accent-ink);
  border-width: 2px;
}

.invites__at {
  color: var(--ink-faint);
  white-space: nowrap;
}

.invites__confirm {
  margin-top: .9rem;
}

@media (max-width: 34rem) {
  .invites__row {
    grid-template-columns: 1fr;
    gap: .1rem;
  }
  /* The arrow is decoration that only reads left-to-right; stacked, the two
     lines are the relationship. It is already aria-hidden. */
  .invites__arrow {
    display: none;
  }
}

/* Empty by default, so it takes no space until there is something to say. */
.field__err {
  display: none;
  margin-top: .45rem;
  font-size: .875rem;
  color: var(--accent-ink);
  font-weight: 500;
}
.field__err.is-shown { display: block; }
.field.has-error input { border-color: var(--accent); }

/* The .meetowt.com tail sits inside the same box as the input, so it reads as
   one address rather than a field next to some text. */
.suffixed {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ink-faint);
  box-shadow: inset 0 1px 2px rgba(22,20,15,.07);
  border-radius: 2px;
  background: var(--paper);
  overflow: hidden;
}
.suffixed input {
  border: 0 !important;
  flex: 1;
  min-width: 0;
}
.suffixed input:focus-visible { outline-offset: -2px; }
.suffixed__tail {
  display: flex;
  align-items: center;
  padding: 0 .85rem;
  background: var(--paper-deep);
  border-left: 1px solid var(--ink-faint);
  color: var(--ink-soft);
  white-space: nowrap;
}
.field.has-error .suffixed { border-color: var(--accent); }

/* --- Radio choices ------------------------------------------------------- */

.choices {
  display: grid;
  gap: .6rem;
}

/* A radio card whose BORDER carries the chosen state has to meet 3:1 like any
   other control edge — see the note on .field input above. */
.choice {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  border: 1px solid var(--ink-faint);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.choice:hover { border-color: var(--ink); background: var(--paper-deep); }
.choice:has(input:checked) {
  border-color: var(--ink);
  border-width: 2px;
  padding: calc(.9rem - 1px) calc(1rem - 1px);
  background: var(--paper-deep);
  box-shadow: var(--lift-1);
}
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.choice input { margin-top: .28rem; accent-color: var(--accent); }
.choice__body { display: block; }
.choice__name { display: block; font-weight: 600; }
/* --ink-soft, because a CHECKED card's ground is --paper-deep, where
   --ink-faint falls to 4.56:1 on .875rem text. One colour for both states
   rather than a second rule that somebody has to remember exists. */
.choice__note { display: block; font-size: .875rem; color: var(--ink-soft); margin-top: .15rem; }

/* --- Paid add-on --------------------------------------------------------- */

.addon {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 2px 2px 0;
  padding: 1rem 1.15rem;
  background: var(--paper-deep);
  margin-bottom: 1.6rem;
}
.addon__row {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  cursor: pointer;
}
.addon__row input { margin-top: .28rem; accent-color: var(--accent); }
.addon__name { display: block; font-weight: 600; }
.addon__note {
  display: block;
  font-size: .9rem;
  color: var(--ink-soft);
  margin-top: .3rem;
  max-width: 42rem;
}

/* --- How it works -------------------------------------------------------- */

.how {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
}

.how__step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.how__n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .8rem;
  font-weight: 600;
}

.how__t { margin: .1rem 0 .35rem; font-size: 1.05rem; }
.how__step p { margin: 0; color: var(--ink-soft); max-width: 38rem; }
.how__aside {
  margin-top: .5rem !important;
  font-size: .9rem;
  color: var(--ink-faint) !important;
  border-left: 2px solid var(--rule);
  padding-left: .75rem;
}

/* --- Submit errors ------------------------------------------------------- */

.form-error {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--paper-deep);
  color: var(--accent-ink);
  font-weight: 500;
}

.panel--done .panel__title { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   The DNS record on the finished panel.

   ONLY REACHED BY "SET UP DNS FIRST", and it has to be readable and COPYABLE:
   somebody is going to retype these three values into a control panel at
   another company, and a transposed character means the workspace never
   builds. So the values are monospaced, allowed to break anywhere rather than
   overflow off a phone, and selectable as one unit.

   [hidden] is restated because the rule above gives .panel[hidden] a
   display:none !important, and this block is a div inside a panel rather than
   a panel — without it the attribute would be ignored the moment anything sets
   a display on it.
   --------------------------------------------------------------------------- */
#done-dns[hidden] { display: none; }

.panel__title--small {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  margin-top: 2rem;
}

.dnsrec {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .45rem 1rem;
  margin: 1rem 0 1.25rem;
  padding: 1rem;
  border: 1px solid var(--rule);
  background: var(--paper-deep, transparent);
}

.dnsrec dt {
  color: var(--ink-soft);
  font-size: .85rem;
  padding-top: .1rem;
}

.dnsrec dd {
  margin: 0;
  min-width: 0;
}

.dnsrec code {
  font-size: .9rem;
  /* A TXT value is long and has no spaces in it, so it will not wrap on its
     own and pushes the page sideways on a phone. */
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
}