/* Sign in with Apple on /sign-in and /sign-up (shared/_apple_button).

   The row: the form's own button first, then Apple's, one width each. Side by
   side where two of them fit at their full words (the card on a tablet or a
   computer); where they do not (every phone), the row wraps and each takes the
   whole width, the form's button on top. Never a word broken inside a button:
   .btn is nowrap.

   Apple's button follows the Human Interface Guidelines' web button: logo and
   title in the system font, white on black on a light page and black on white
   on a dark one, the same height as the button beside it. It stands on the
   same pressed-key edge as the pink button so the two read as one height, as
   the app's Sign In and Sign in with Apple do (AccountView.swift).

   Light or dark is the PAGE's, not the system's: light-dark() follows the
   color-scheme the page itself declares, and the marketing pages (these two
   among them) declare light on white paper even when the system is dark, so
   the button stays black there. Each color is declared twice, plain black
   first, so a browser older than light-dark() drops the second line and keeps
   the first (a custom property would take the function unparsed and leave
   such a browser with no background at all). */

/* Stacked, the upper button's pressed-key edge needs the extra row gap.

   Both buttons start from one basis and grow by the same share, so side by
   side they are always one width; when two bases and the gap do not fit the
   row, the second wraps, and each button alone on its line grows to the whole
   width. The basis is the widest title's button, "Sign up with Apple" at .75rem
   sides (190.5px, measured in Chromium 2026-10-16), with a few pixels spare:
   12.25rem. Two need a 400px row, which the 30rem card (application.css,
   .auth-wrap) gives on a tablet or a computer and no phone does. The buttons
   used to grow from their own widths, so the pair shared a line on a 375px
   phone at 93 and 195px. */
.auth-actions { display: flex; flex-wrap: wrap; gap: .85rem .5rem; margin-top: .3rem; }
.auth-actions > .btn { flex: 1 1 12.25rem; margin: 0; }
.auth-actions > .btn-lg { padding: 0 .75rem; }
.auth-actions > .btn-apple { font-size: 1rem; }

.btn-apple,
.mk-body .btn-apple {
  background: #000; background: light-dark(#000, #fff);
  border-color: #000; border-color: light-dark(#000, #fff);
  color: #fff; color: light-dark(#fff, #000);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600; letter-spacing: -.01em; gap: .4rem;
  box-shadow: 0 6px 0 -2px #4d4d4d; box-shadow: 0 6px 0 -2px light-dark(#4d4d4d, #9e9e9e);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
/* The logo centered on the title's capitals (within a pixel, measured). */
.btn-apple .apple-logo { width: 1.1em; height: 1.1em; flex: none; margin-top: -.08em; }
@media (hover: hover) and (pointer: fine) {
  .btn-apple:hover, .mk-body .btn-apple:hover {
    color: #fff; color: light-dark(#fff, #000);
    border-color: #000; border-color: light-dark(#000, #fff);
    text-decoration: none; transform: translateY(-1px);
    box-shadow: 0 8px 0 -2px #4d4d4d; box-shadow: 0 8px 0 -2px light-dark(#4d4d4d, #9e9e9e);
  }
}
.btn-apple:active, .mk-body .btn-apple:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 -1px #4d4d4d; box-shadow: 0 2px 0 -1px light-dark(#4d4d4d, #9e9e9e);
}

/* The line a Home Screen web app on an Apple device shows under the pair
   (shared/_apple_standalone_note): clear of the buttons' pressed-key edge. */
.auth-apple-standalone { margin-top: .8rem; }