/* Agritech Farm sign-in, on the VisionCoders site.
   Sits on top of the existing auth-card styling; only the pieces the farm
   sign-in adds are defined here. */

.auth-msg {
  display: none; font-size: 14px; border-radius: 10px; padding: 10px 13px;
  margin-bottom: 16px; line-height: 1.5;
}
.auth-msg.show { display: block; }
.auth-msg.err { background: rgba(190, 60, 50, .22); color: #ffc0b9;
                border: 1px solid rgba(255, 140, 130, .32); }
.auth-msg.ok  { background: rgba(140, 210, 100, .2); color: #d9f9a8;
                border: 1px solid rgba(160, 225, 120, .34); }

.pick-lbl {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(242, 245, 244, .62); margin-bottom: 10px;
}

.roletiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.rolebtn {
  display: flex; align-items: flex-start; gap: 9px; text-align: left;
  font: inherit; color: #eef3ec; cursor: pointer; min-height: 66px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
  border-radius: 12px; padding: 11px 12px;
  transition: border-color .14s, background .14s;
}
.rolebtn:hover { border-color: rgba(190, 245, 115, .55); background: rgba(255, 255, 255, .09); }
.rolebtn.on {
  border-color: var(--bs-primary, #bef573);
  background: rgba(190, 245, 115, .16);
}
.rolebtn .ri { font-size: 17px; line-height: 1.25; flex: 0 0 auto; }
.rolebtn .rt { min-width: 0; }
.rolebtn b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.rolebtn .rt span {
  display: block; font-size: 10.5px; line-height: 1.4; margin-top: 3px;
  color: rgba(242, 245, 244, .68);
}
.roletiles .rolebtn:nth-child(odd):last-child { grid-column: 1 / -1; }

.rolenote {
  font-size: 12px; color: rgba(242, 245, 244, .8);
  background: rgba(255, 255, 255, .06);
  border-left: 2px solid rgba(190, 245, 115, .6);
  border-radius: 0 8px 8px 0; padding: 9px 12px; margin: -10px 0 18px; line-height: 1.55;
}

.fieldrow { margin-bottom: 4px; }
.fieldrow .lbl {
  display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(242, 245, 244, .62); margin-bottom: 2px;
}
.tworow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 575px) {
  .roletiles { grid-template-columns: 1fr; }
  .roletiles .rolebtn:nth-child(odd):last-child { grid-column: auto; }
  .tworow { grid-template-columns: 1fr; gap: 0; }
}

/* Neither an error nor a success: the address is known, so no code is
   coming, and the reader needs to know that rather than keep waiting. */
.auth-msg.warn { background: rgba(224, 168, 46, .20); color: #ffe0a3;
                 border-left: 3px solid #e0a82e; }