/* The staff sign-in page (auth/login.html). */
main {
  min-height: 100svh;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 1.5rem 1rem;
}
.sign-in { max-width: 25rem; }
/* The reveal is a 48px target rather than the framework's 40px, set through its tokens so it grows with the text and
   stays centered in the 3.5rem field. Typed text stops short of it. */
.sign-in .password-toggle {
  --md-comp-icon-button-container-height: 3rem;
  --md-comp-icon-button-leading-space: 12px;
  --md-comp-icon-button-trailing-space: 12px;
  top: 0.25rem;
}
.sign-in #password { padding-inline-end: calc(32px + 1.5rem); }
/* Edge adds its own reveal button, which would disagree with the toggle. */
.sign-in input::-ms-reveal { display: none; }
@media (width >= 600px) {
  main { align-items: center; padding: 1.5rem; }
  /* The text button's icon lines up with the column's edge, like the fields above it. Compact's 1rem margin is too
     narrow to hold its focus ring there. */
  .sign-in .button.text { margin-inline-start: -24px; }
}
/* From 840px the page is a card: who's asking on the left, the form on the right, as on Google's sign-in. */
@media (width >= 840px) {
  .sign-in {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; max-width: 64rem; padding: 3rem;
    border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container);
    /* Outlined field labels paint the surface role over their border, so match it to the card. */
    --md-sys-color-surface: var(--md-sys-color-surface-container);
  }
}