/* ---------- the front door ----------

   login.html is the only page in this product with no topbar, no rail and no
   view router, so it is also the only page that has to centre itself. Every
   other decision here is deliberately NOT made: the ink ladder, the field, the
   button, the focus ring and the mark all come from styles.css, so the door
   cannot drift away from the room behind it. What is left is layout, the
   wordmark's purple hyphen, and the two lines the app has nowhere else. */

.login-wrap{
  /* dvh so the card stays centred when a phone's address bar slides away and
     100vh is briefly taller than the screen actually is; vh first for the
     browsers that do not know dvh yet */
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  /* generous at the sides so the form never touches a 375px edge, and a
     smaller top and bottom so a short viewport can still scroll to the button */
  padding:var(--s8) var(--s5);
}

.login{
  width:100%;
  /* a single column of form is easier to read narrow than wide, and this is
     the width at which the email field stops looking like a search bar */
  max-width:392px;
}

/* ---------- the lockup ----------

   The h1 of the page is the wordmark, because the wordmark IS what this page
   is called. Its own type comes from the spans inside it, so the heading tag
   is reset back to neutral here rather than fighting h1's clamp. */
.login .lockup{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 var(--s5);
  font-family:inherit; font-size:15px; font-weight:400; letter-spacing:normal;
}
.login .lockup .word{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:600; font-size:19px; letter-spacing:.01em; line-height:1;
  color:var(--ink);
}
/* THE HYPHEN IS STRUCTURE, NOT PUNCTUATION.
   off-beat's wordmark lights its hyphen in the signature colour, and this is
   its sibling, so off-studio does the same. It is the one colour moment in the
   lockup apart from the knob on the fader, and the two agree on the purple. */
.login .lockup .word .dash{ color:var(--brand) }
.login .lockup .ctx{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.08em; line-height:1;
  color:var(--ink-3);
  /* the mono cap height sits high, so a nudge down puts it on the wordmark's
     baseline rather than above it */
  margin-top:3px;
}

.login .lede{
  color:var(--ink-2);
  font-size:14.5px; line-height:1.55;
  margin:0 0 var(--s7);
  max-width:34ch;
}

/* ---------- the forms ---------- */

.login .login-form{ margin:0 }

/* A door has one act, so its button takes the full width of the column and
   there is nothing beside it to choose instead. */
.login .btn.block{
  width:100%;
  padding:10px 16px;
  font-size:14px;
  margin-top:var(--s2);
}

/* The error sits between the last field and the button, in the reading path,
   so a person meets it on the way to pressing the button again. */
.login .form-err{ margin:0 0 var(--s3) }

/* THE OTHER THREE DOORS (4 Sep 2026): forgetting a password, asking for a
   link, choosing a new one. They share this page because they are the same
   door with different faces, so they share its type and spacing rather than
   arriving with a look of their own. */
.login .form-ok{
  margin:0 0 var(--s3);
  color:var(--ok, var(--ink-2));
  font-size:13.5px; line-height:1.5;
}
.login .login-alt{
  margin:var(--s4) 0 0;
  text-align:center;
  font-size:13.5px;
}
/* A button, because it does something on this page rather than going
   somewhere; styled as a link, because that is what it reads as. Keyboard
   focus is the button's own, which a bare <a href="#"> would not give. */
.login .linkish{
  appearance:none; -webkit-appearance:none;
  background:none; border:0; padding:4px 6px; margin:-4px -6px;
  color:var(--ink-2); cursor:pointer;
  font:inherit; font-size:13.5px;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 40%, transparent);
}
.login .linkish:hover, .login .linkish:focus-visible{ color:var(--brand) }

/* .loading in styles.css is the app's spinner line, mono and uppercase with a
   turning ring. It is kept exactly, because this is the same wait as any other
   in the product; only its 46px of vertical padding is trimmed, since here it
   stands in a short column rather than in the middle of an empty room. */
.login .loading{
  padding:var(--s4) 0;
  margin:0;
}

/* ---------- the invitation ---------- */

.login .invite-who{
  color:var(--ink-2);
  font-size:14px; line-height:1.55;
  margin:0 0 var(--s6);
  padding:var(--s4);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-s);
}
.login .invite-who strong{ color:var(--ink); font-weight:600 }
/* the address is a fact, and facts are mono in this app; it also sits on its
   own line because it is a different sentence from who invited whom */
.login .invite-as{
  display:block;
  margin-top:var(--s2);
  color:var(--ink-3);
  font-size:12.5px;
}

/* ---------- narrow ----------

   At 375 the lockup's three parts still fit on one row; below that the mono
   context label is the part that can wrap without losing the identity, so it
   drops under the wordmark instead of squeezing it. */
@media(max-width:360px){
  .login .lockup{ flex-wrap:wrap; row-gap:2px }
  .login .lockup .ctx{ flex-basis:100%; margin-top:0; padding-left:30px }
  .login-wrap{ padding:var(--s6) var(--s4) }
}