/* Glue for the sign-in widget.
 *
 * Apple's identityWidget / home / app-sk7 stylesheets own every visual decision; this file
 * only covers the things Apple's own bundle would otherwise do from JavaScript, or that its
 * own stylesheets leave broken: hiding the step container we are not on, keeping Chrome's
 * autofill highlight from painting over Apple's translucent field background (Apple ships a
 * translucent background and no autofill rule, so the browser default reads as a bug), and
 * restoring the one scale two of Apple's stylesheets disagree about, below.
 */

#content-auth[hidden],
#content-verify[hidden] {
  display: none !important;
}

/* Apple's nib artwork is sized by a scale, not by a width: home-0aa20955…css paints those bars
 * at transform:scale(.075) to make a 16px spinner (.15 for .spinner-large, 32px). app-sk7.css
 * is loaded after it and resets exactly that (`.signin .spinner-container{transform:none}`),
 * which paints the same spinner 212px wide — on a 320px phone that is the whole card covered in
 * black bars, hanging off the right edge.
 *
 * The markup nests two .spinner-container elements, Apple's own: the outer one only positions
 * (that is the one app-sk7.css means to leave alone), the inner one holds the nibs and is the
 * one that carries the scale. Scaling both, which is what a rule on the class alone does, gives
 * .075 * .075 = a 1px spinner. Each one is stated explicitly instead. */
.si-container .signin .spinner-container.auth {
  -webkit-transform: none;
  transform: none;
}

.si-container .signin .spinner > .spinner-container {
  -webkit-transform: scale(0.075);
  transform: scale(0.075);
}

.si-container .signin .spinner.spinner-large .spinner-container {
  -webkit-transform: scale(0.15);
  transform: scale(0.15);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.8) inset;
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.8) inset;
  -webkit-text-fill-color: rgb(73, 73, 73);
  transition: background-color 9999s ease-in-out 0s;
}

/* The pending state of the Continue / Sign In button: Apple keeps the button's own box where it is
 * and paints its 32px spinner inside it, over the fill at .47 alpha. Measured off a capture of the
 * real button while a sign-in request was in flight: the ink there is a ring of radial dashes in
 * twelve lobes with a ramp in brightness — Apple's nib artwork, .spinner-large — centred in the
 * button, no label, on rgb(136,189,239), which is exactly #0071e3 (the fill this page paints) at
 * .47 over the card's white. The label is hidden with the class Apple ships for it
 * (.…__button__text--hidden), so the button never changes size while it spins.
 *
 * The fill needs !important because Apple's own bundle paints it on a more specific selector, and
 * this file is loaded last on purpose. The button is the spinner's offset parent so the artwork can
 * be centred in it rather than in whatever happens to be positioned nearby. */
.signin-v2__buttons-wrapper__button-wrapper__button {
  position: relative;
}

.signin-v2__buttons-wrapper__button-wrapper__button.button-loading {
  background-color: rgba(0, 113, 227, 0.47) !important;
  background-image: none !important;
  cursor: default;
}

/* Apple's spinner is drawn around its own origin, and the vendored cascade disagrees with itself
 * about where that origin is: app-sk7.css leaves .spinner-container position:relative with
 * percentage offsets, the module bundle inside the code step's button bar puts it position:absolute
 * at a fixed left:16px top:16px, and both outrank anything spelled with two class names because
 * they are hung off ids. Measured: a 32px wrapper centred on a button painted its ring 16px left of
 * the button's centre, and the same wrapper inside the button bar painted 21px right and 18px below
 * the bar's centre.
 *
 * So the wrapper is given no size and its container is pinned to that point, and !important is what
 * makes it stick — this file is loaded last precisely so these declarations are the last word, the
 * same reason the button's fill above needs it. A zero-size wrapper anchored at the middle of the
 * thing the spinner belongs in leaves exactly one place the artwork can be, under any cascade. */
.spinner.btn-spinner,
.spinner.spinner-centre {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  /* a transform is ignored on a non-replaced inline box, and this transform is the difference
   * between Apple's 32px spinner and the raw 212px artwork */
  display: block;
  pointer-events: none;
}

.spinner.btn-spinner > .spinner-container,
.spinner.spinner-centre > .spinner-container {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  display: block;
}

/* The code step's pending state hangs the artwork in the middle of the button bar, so the bar has
 * to be what the absolutely positioned wrapper is positioned against. Apple leaves it static. */
.verify-code__button-container .button-bar {
  position: relative;
}

/* The code step's error row. .is-error turns .form-message-wrapper into a flex row and the
 * warning icon lives in its :before — two separate items. Apple's own
 * [dir] .error-message { margin: 0 auto } then claims every spare pixel and centers the text,
 * which is what tears the row apart: icon pinned to the left edge, the message floating alone
 * in the middle of the card. The step's own CSS (.verify-code__security-code-wrapper
 * .is-error .form-message-wrapper) says what Apple means — justify-content:center — and with
 * the auto margin gone the icon and its sentence travel together as one centered row, in both
 * directions (flex-start flips in rtl, so does text-align:start). */
.verify-code__security-code-wrapper .form-security-code .error-message {
  margin: 0;
  text-align: start;
  padding: 0 2px;
}

.verify-code__security-code-wrapper .is-error .form-message-wrapper {
  align-items: center;
}

/* The popover never opens any more (see widget.js openPopup) — and stays hidden even
   if an old path reaches for it, so its stacked radios and logo glyph can never show. */
.verify-code__popup { display: none !important; }

.verify-actions { text-align: center; padding: 2px 0 6px; }
.verify-actions__row { display: block; width: 100%; border: 0; background: none;
  cursor: pointer; font-family: inherit; padding: 9px 0 0; margin: 0; }
.verify-actions__primary { color: #0071e3; font-size: 15px; line-height: 20px; font-weight: 400; }
.verify-actions__secondary { color: #6e6e73; font-size: 13px; line-height: 18px; font-weight: 400; }
.verify-actions__row:hover { text-decoration: underline; }
.verify-actions--locked { opacity: 0.55; pointer-events: none; }