/* Shared look for the password pages people reach from the reset email.
   They open on a phone, out of the app, so they borrow the app's colours.
   Bundled site-wide via stylesheet_link_tag :app, so the body rule is
   scoped to pages that actually render .yp-wrap. */

body:has(.yp-wrap) {
  background: #FFFBF4;
  color: #36302A;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: block;
  margin: 0;
  padding: 0 16px;
}
.yp-wrap { max-width: 420px; margin: 48px auto; }
.yp-logo { display: block; width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 20px; }
.yp-card {
  background: #fff;
  border: 1px solid #EFEAE2;
  border-radius: 24px;
  padding: 30px 26px;
  box-shadow: 0 10px 22px rgba(160, 150, 138, .16);
}
.yp-card h1 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -0.4px; }
.yp-card p { margin: 0 0 18px; color: #8A7E6C; font-size: 15px; line-height: 1.55; }
.yp-card input[type=email], .yp-card input[type=password] {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 14px 15px;
  border: 1px solid #EFEAE2;
  border-radius: 14px;
  background: #FFFBF4;
  color: #36302A;
  font-size: 16px;
}
.yp-card input[type=submit] {
  width: 100%;
  margin: 6px 0 0;
  padding: 15px;
  border: 0;
  border-radius: 16px;
  background: #5A8753;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.yp-alert { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #FBE6E0; color: #B5513B; font-size: 14px; }
.yp-notice { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #EAF3EC; color: #3F7D61; font-size: 14px; }