/* M01 · Sign in and register — the screen's own scope.
 *
 * Pulled from `design/v2/staff/screens/M01-sign-in.html`, where this CSS lives
 * inside the screen rather than in the design system. That is deliberate and
 * worth knowing: **M01 is a third scope.** The `.st` system is cool and
 * print-flat and carries no gold anywhere; M01 alone sits on a warm gradient
 * with gold rules, because it is the one screen somebody sees before they are
 * inside the product.
 *
 * It is a separate file for the same reason: `staff.css` is pulled verbatim
 * from Claude Design and must not be hand-edited, and this is not part of it.
 */

/* **The ground goes on the SCROLLER, not on the card.**
   `.auth` had `min-height: 540px` — a fixed floor, not the viewport — so on
   any window taller than that the warm gradient simply stopped and the cool
   grey app canvas showed beneath it, with a hard edge across the page. A
   pre-auth screen is one surface; it has to cover whatever height the browser
   gives. */
.auth-ground {
  background: linear-gradient(200deg, #FDFAF4 0%, #F7F1E6 46%, #F1E7D3 100%);
  display: flex;
  flex-direction: column;
}

.auth {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px 20px;
  /* Fills the scroller when the content is short, scrolls when it is not.
     `min-height: 100%` needs the ancestor chain to have a height, which
     `.app__scroll` does. */
  min-height: 100%;
  background: none;
}
.auth--center { justify-content: center; }

.auth__logo { height: 38px; width: auto; align-self: flex-start; display: block; }

.auth__hello { display: flex; flex-direction: column; gap: 6px; }
.auth__hello h2 {
  margin: 0;
  font-size: 24px; line-height: 29px; font-weight: 800;
  letter-spacing: -.025em; text-wrap: pretty;
}
.auth__hello p {
  margin: 0; font-size: 14px; line-height: 20px;
  color: var(--st-muted); text-wrap: pretty;
}

.auth__alt {
  display: flex; align-items: center; gap: 6px;
  justify-content: center; font-size: 13px;
  color: var(--st-muted); flex-wrap: wrap;
}

/* The gold rule is the only gold in the staff app, and it is identity rather
 * than an interactive colour — nothing here is pressable because it is gold. */
.auth__rule {
  display: flex; align-items: center; gap: 12px;
  /* `--st-subtle` measures **3.00:1** on this warm ground — below the 4.5
     floor, and this is a word, not an icon. `--st-muted` is 5.15:1 here.
     The gold rules either side stay as they are: they are a 1px line, which
     is decoration and answers to the 3.0 non-text floor. */
  color: var(--st-muted);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}
.auth__rule::before, .auth__rule::after {
  content: ''; height: 1px; flex: 1; background: rgba(190, 150, 70, .34);
}

/* The photo mosaic above "Welcome back" — one large tile and two small,
 * explicit rows so the second row is not clipped away. A grid item defaults to
 * `min-height: auto` and refuses to shrink below its content, which is what
 * cut every tile but the first on the public page once. */
.mos {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 56px 56px;
  gap: 6px; height: 118px;
}
.mos > div {
  position: relative; overflow: hidden; min-height: 0;
  border-radius: var(--st-r-sm); background: var(--st-surface-3);
}
.mos > div:first-child { grid-row: span 2; border-radius: var(--st-r-asym); }
.mos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mos .name {
  position: absolute; left: 8px; bottom: 8px;
  padding: 5px 10px; white-space: nowrap;
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
  background: var(--st-surface); border-radius: var(--st-r-pill);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: var(--st-ink);
}

/* The six-digit code. Boxes rather than one field, because a code read off a
 * screen is read in digits and a single input gives no sense of how many are
 * left. */
.code { display: flex; gap: 8px; }
.code span {
  flex: 1; min-width: 0; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--st-line-strong);
  border-radius: var(--st-r-sm); background: var(--st-surface);
}
.code span.on { border-color: var(--st-accent); color: var(--st-accent-ink); }
.code span.cur { border-color: var(--st-accent); box-shadow: var(--st-focus); }

/* The desktop split: photography on the left, the form on the right. Below
 * 900px it collapses to the phone layout, which is the same markup.
 *
 * The hide-by-default rule sits HERE, before the media query, not after it.
 * Later declaration wins, and putting it at the end of the file silently
 * un-did the whole desktop layout -- the same trap as the alias block that
 * shipped at the top of a guest stylesheet and lost to the page's own rules. */
.split { display: flex; flex-direction: column; }
.split__art { display: none; }
@media (min-width: 900px) {
  .split {
    flex-direction: row; min-height: 600px;
    border: 1px solid var(--st-line); border-radius: var(--st-r-asym);
    overflow: hidden; background: var(--st-surface);
    max-width: 1080px; margin: 24px auto;
  }
  .split__art {
    flex: 1 1 46%; min-width: 280px; position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 24px; gap: 14px;
    background: linear-gradient(200deg, #FDFAF4 0%, #F6F0E4 52%, #EFE4CE 100%);
  }
  .split__art img.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .split__art .wash {
    position: absolute; inset: 0;
    background: linear-gradient(200deg, rgba(255,255,255,.34) 0%,
      rgba(255,255,255,0) 48%, rgba(190,150,70,.18) 100%);
  }
  .split__art > * { position: relative; }
  .split__card {
    align-self: stretch; border: 1px solid rgba(190, 150, 70, .28);
    display: flex; flex-direction: column; gap: 10px; padding: 22px;
    background: var(--st-surface); border-radius: var(--st-r-asym);
    box-shadow: 0 8px 28px rgba(21, 24, 29, .18);
  }
  .split__card h2 {
    margin: 0; font-size: 23px; line-height: 28px; font-weight: 800;
    letter-spacing: -.025em; max-width: 24ch; text-wrap: pretty;
  }
  .split__card p {
    margin: 0; color: var(--st-muted); font-size: 13px; line-height: 19px;
    max-width: 40ch; text-wrap: pretty;
  }
  .split__form {
    flex: 1 1 54%; min-width: 320px; padding: 40px 36px;
    display: flex; flex-direction: column; gap: 22px; justify-content: center;
  }
  /* Inside the split the ART carries the gradient, so the form sits on
   * white. On a phone there is no art and the .auth keeps its own. */
  .split__form .auth { background: none; min-height: 0; padding: 0; }
}

/* ---- Vertical centring, LAST ---------------------------------------------
   `.split` sets `margin: 24px 180px` further down this file, and an earlier
   rule at the same specificity loses to it — later declaration wins. This is
   the same trap the guest page's alias block hit, and the fix is the same:
   sit at the end.

   `margin-block` touches top and bottom only, so the split keeps its 180px
   gutters. `auto` centres it when there is room to spare and does nothing when
   there is not, which `justify-content: center` cannot promise — that pushes
   content off the top of a short screen. On a phone the form already fills the
   scroller, so this is a no-op there. */
.auth-ground > .split { margin-block: auto; }

/* ---- Vertical rhythm, LAST -----------------------------------------------
   `.auth` used a single `gap: 20px`, so the logo, the greeting, the three
   doors, the way out, the rule and the closing note all sat exactly 20px
   apart. Even spacing between things with uneven relationships reads as six
   unrelated blocks: nothing looks like it belongs to anything, and the eye has
   no order to follow. Reported, twice, as "the spacing is not right".

   The rhythm below says what belongs to what. It is expressed as margins on
   named parts rather than nth-child, because `.auth` carries six different
   states and a positional rule would mean something different in each. */
.auth { gap: 0; }
.auth > * + * { margin-top: 20px; }

/* The greeting belongs under the mark. */
.auth__hello { margin-top: 24px; }

/* The choices are what the greeting introduces, so they get room above and
   are a tight group within themselves. */
.auth__doors { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }

/* The way out is not a fourth door, and must not look like one.
   `Create an account` is the third door and renders as the quiet variant —
   plain text. Putting recovery 12px under it in the same treatment produced
   two plain-text items of apparently equal kind, and the three-tier hierarchy
   of the doors above (filled, outlined, plain) collapsed into four things.

   So it separates from the group and reads as a LINK: smaller, muted, and
   underlined, which is a different category of thing rather than a quieter
   member of the same one. */
.auth__wayout { display: flex; justify-content: center; margin-top: 22px; }
.auth__wayout .st-btn {
  font-size: var(--st-fs-2);
  font-weight: 600;
  color: var(--st-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--st-line-strong);
  min-height: 32px;
  padding: 0 6px;
}
.auth__wayout .st-btn:hover {
  color: var(--st-ink);
  text-decoration-color: currentColor;
  background: none;
}

/* A rule opens a section... */
.auth__rule { margin-top: 34px; }
/* ...and is the heading for whatever follows it, so that sits close. */
.auth__rule + * { margin-top: 10px; }
/* The closing note carried an inline `margin: 0`, which beats every rule in
   this file — the rhythm could not reach it and it sat flush against the rule
   above. Inline styles are why a stylesheet stops being the answer to "why
   does this look wrong". */
.auth__note { margin: 0; text-wrap: pretty; }
.auth__rule + .auth__note { margin-top: 10px; }

/* On the form states: the fields are the point of the screen, the commit sits
   under them, and the alternatives are a footer. */
.auth .fields { margin-top: 26px; }
.auth .fields + * { margin-top: 22px; }
.auth__alt { margin-top: 26px; }