/* The sign-in page, as sheet 1n of the 7 Oct Spec draws it on both sites: the shell on the ground
   with the mark above it (the frame's), then one narrow column, centred: the title at the sign-in
   size, the quiet line, one ruled line to write the email on, the filled button. No well: "one line
   to write on". Everything on it is a component from ativv-ui, so what is left here is only what is
   this page's own: the column and its spacing, the title's size, the field drawn as a ruled line,
   the controls at a phone's height and the column's width, the `or` rule under the doors and the
   ring drawn on each, and the code's six cells on the line. */

.sign-in {
  display: grid;
  gap: var(--space-6);
  max-width: 22.5rem;
  margin: var(--space-4) auto 0;
}

/* The title block and, on the code stage, the sentence saying where the code went, as one block. */
.sign-in-intro .page-header {
  margin: 0;
}

.sign-in-intro .page-header-title {
  font-size: var(--text-display-3);
  letter-spacing: var(--tracking-section);
}

.sign-in-intro .page-header-description {
  font-size: var(--text-quiet);
}

.sign-in-sent {
  color: var(--color-muted);
  margin: var(--space-2) 0 0;
}

.sign-in-sent strong {
  color: var(--color-ink);
}

.sign-in-stage {
  display: grid;
  gap: var(--space-4);
}

.sign-in-stage > * {
  margin: 0;
}

.sign-in-form {
  display: grid;
  gap: var(--space-4);
}

/* **One ruled line to write on.** The label is a label in the language, mono capitals in the
   metadata ink; the field is no box, only an ink rule under the text, which is set in the mono face
   a little larger than running text, as the Spec writes the address. Focus thickens the rule rather
   than drawing a ring round a box that is not there. */
.sign-in-form .text-input-label {
  color: var(--color-meta);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.sign-in-form .text-input {
  gap: var(--space-1);
}

.sign-in-form .text-input-control {
  height: var(--control-height-large);
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: var(--hairline) solid var(--color-ink);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-lead);
}

.sign-in-form .text-input-control:focus {
  outline: none;
  box-shadow: 0 var(--hairline) 0 var(--color-ink);
}

.sign-in-form .text-input-invalid .text-input-control {
  border-bottom-color: var(--color-danger);
}

.sign-in-form .text-input-invalid .text-input-control:focus {
  box-shadow: 0 var(--hairline) 0 var(--color-danger);
}

.sign-in-form .button,
.sign-in-doors .button {
  width: 100%;
  height: var(--control-height-large);
  font-size: var(--text-control);
}

/* The doors: one per identity provider anybody may knock on, above the email box. Each is a link
   and not a button, because the route it goes to answers a redirect to somebody else's site;
   `Button` with an `href` is how it wears the button's face. No logo and no brand colour: a
   neutral ring, and the provider's name. */
.sign-in-doors {
  display: grid;
  gap: var(--space-2);
}

.sign-in-door {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.sign-in-door-ring {
  position: relative;
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: var(--focus-width) solid currentColor;
  border-radius: 50%;
}

.sign-in-door-ring::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--focus-width) / 2);
  right: calc(-1 * var(--focus-width));
  width: 50%;
  height: var(--focus-width);
  background: currentColor;
}

/* "or", between two hairlines. */
.sign-in-or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-meta);
}

.sign-in-or::before,
.sign-in-or::after {
  content: "";
  flex: 1;
  height: var(--hairline);
  background: var(--color-line);
}

/* How the code works, under the email box on a site whose title line says who it is for. */
.sign-in-note {
  color: var(--color-muted);
  font-size: var(--text-label);
}

/* The way out of the code stage, centred under the button. */
.sign-in-again {
  text-align: center;
}

/* The code: one field drawn as six wide monospace cells on the ruled line. The digits are spaced a
   cell apart, and six short rules in the line colour sit under the six places, so an empty cell is
   still a cell. A
   cell is one character and the spacing after it; the six rules and the five gaps between them are
   centred in the box, and the text starts where the first rule does, so each digit lands on its own
   rule however many have been typed. */
#sign-in-code {
  --code-width: calc(6ch + 5 * var(--tracking-code));
  height: calc(var(--control-height-large) + var(--space-2));
  font-family: var(--font-mono);
  font-size: var(--text-display-4);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-code);
  text-align: left;
  padding: 0 0 0 calc(50% - var(--code-width) / 2);
  background-image: repeating-linear-gradient(
    to right,
    var(--color-line) 0 1ch,
    transparent 1ch calc(1ch + var(--tracking-code))
  );
  background-size: var(--code-width) var(--focus-width);
  background-repeat: no-repeat;
  background-position: center bottom var(--space-3);
}