/*
 * Brandagy authentication screens: sign-in, sign-up, password recovery.
 *
 * A standalone surface — no site chrome — so the file carries its own reset.
 * Every horizontal offset is logical; there are no left/right values.
 */

.bgc-a {
  --a-ink: #163300;
  --a-ink-2: #4A5A3C;
  --a-line: #C6CDBF;
  --a-hairline: #E6E8E0;
  --a-green: #9FE870;
  --a-green-hover: #8FDD5C;
  --a-disabled-bg: #E7ECE1;

  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--a-ink);
  font-family: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
}

.bgc-a, .bgc-a * { box-sizing: border-box; }

/* An author `display` beats the UA's [hidden] rule, so the panels below that
   set display:flex would ignore the attribute without this. */
.bgc-a [hidden] { display: none !important; }

body.bgc-auth-page { margin: 0; background: #fff; }

.bgc-a :focus-visible {
  outline: 2px solid var(--a-ink);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------- bar */

.bgc-a-bar {
  height: 112px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  border-bottom: 1px solid #F0F1EC;
}

.bgc-a-spacer { flex: 1; }

.bgc-a-mark { display: inline-flex; line-height: 0; }
.bgc-a-mark img { height: 38px; width: auto; display: block; }

.bgc-a-close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--a-ink);
  text-decoration: none;
  transition: background .16s;
}

.bgc-a-close:hover { background: #F3F3EF; }

/* ------------------------------------------------------------------ column */

.bgc-a-main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 32px 24px 36px;
}

.bgc-a-col {
  width: 100%;
  max-width: 448px;
  padding-top: 51px;
}

.bgc-a-h1 {
  margin: 0 0 8px;
  font-size: 33px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--a-ink);
  text-align: center;
  text-wrap: balance;
}

.bgc-a-switch,
.bgc-a-lede {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 24px;
  color: var(--a-ink-2);
  text-align: center;
}

.bgc-a-lede { text-wrap: pretty; }

.bgc-a-link {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--a-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.bgc-a-link:hover { text-decoration-thickness: 2px; }

.bgc-a-link--sm { font-size: 15px; }

/* ------------------------------------------------------------------ fields */

.bgc-a-field { margin-bottom: 14px; }

.bgc-a-labelrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 7px;
}

.bgc-a-labelrow .bgc-a-label { margin-bottom: 0; }
.bgc-a-labelrow .bgc-a-link { margin-inline-start: auto; }

.bgc-a-label {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
  font-weight: 500;
  color: var(--a-ink);
}

.bgc-a-inputwrap { position: relative; }

.bgc-a-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--a-line);
  border-radius: 14px;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  color: var(--a-ink);
  transition: border-color .16s;
}

.bgc-a-input:hover { border-color: #A8B3A0; }
.bgc-a-input:focus { border-color: var(--a-ink); outline: none; }

.bgc-a-inputwrap .bgc-a-input { padding-inline-end: 56px; }

.bgc-a-reveal {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 8px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--a-ink);
  cursor: pointer;
}

/* The slash is drawn in the markup and hidden once the password is showing,
   so one glyph covers both states. */
.bgc-a-reveal[aria-pressed="true"] .bgc-a-reveal-slash { display: none; }

/* ------------------------------------------------------------------ errors */

.bgc-a-error {
  margin: 0 0 4px;
  padding-top: 4px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 20px;
  color: #A32A1F;
}

.bgc-a-sent {
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px solid #CFE3BC;
  border-radius: 14px;
  background: #F2F8EA;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #2F5417;
  text-wrap: pretty;
}

/* ------------------------------------------------------- the lock panel */

/*
 * Amber, never red. Red says "you did something wrong"; this says "wait" — a
 * different message, and it must not read as a third failure.
 */
.bgc-a-lock {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid #EADFB6;
  border-radius: 14px;
  background: #FBF7E8;
  animation: l2-rise .2s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes l2-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.bgc-a-lock-ico {
  flex: none;
  margin-top: 1px;
  stroke: #8A6A1F;
}

.bgc-a-lock-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #6E5416;
  text-wrap: pretty;
}

/* ----------------------------------------------------------------- actions */

/* 62px is fixed by the lockout spec: the primary and the reset must not shrink
   when the lock engages, so they hold their height through the compact pass. */
.bgc-a-submit {
  width: 100%;
  height: 62px;
  margin-top: 18px;
  border: 0;
  border-radius: 999px;
  background: var(--a-green);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--a-ink);
  cursor: pointer;
  transition: background .16s;
}

.bgc-a-submit:hover:not(:disabled) { background: var(--a-green-hover); }

/* Greyed, never hidden: a vanished primary action reads as a broken page. */
.bgc-a-submit:disabled {
  background: var(--a-disabled-bg);
  color: rgba(22, 51, 0, 0.45);
  cursor: default;
}

.bgc-a-reset {
  width: 100%;
  height: 62px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--a-line);
  border-radius: 999px;
  background: #fff;
  font-size: 17px;
  font-weight: 600;
  color: var(--a-ink);
  text-decoration: none;
  transition: border-color .16s;
}

/* Secondary to the (currently dead) primary: no fill change, no shadow. */
.bgc-a-reset:hover { border-color: var(--a-ink); }

/* ----------------------------------------------------------------- social */

.bgc-a-or {
  margin: 20px 0 10px;
  font-size: 15px;
  color: var(--a-ink-2);
  text-align: center;
}

.bgc-a-socials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bgc-a-social {
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--a-hairline);
  border-radius: 999px;
  background: #fff;
  color: var(--a-ink);
  text-decoration: none;
  transition: border-color .16s, background .16s;
}

.bgc-a-social:hover { background: #F7F9F3; border-color: var(--a-line); }

/* ------------------------------------------------------------------ legal */

.bgc-a-legal {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--a-ink-2);
  text-align: center;
  text-wrap: pretty;
}

.bgc-a-aside {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--a-ink-2);
  text-align: center;
}

/* ------------------------------------------------------------------- belt */

.bgc-a-belt {
  overflow: hidden;
  padding: 18px 0 20px;
  border-top-style: none;
  /* The ends fade rather than cut, so the loop has no visible edge. */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.bgc-a-belt-track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  /* The list is printed twice and the track travels exactly half its width, so
     the seam always lands on an identical tile. */
  animation: bgc-belt 48s linear infinite;
}

@keyframes bgc-belt {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.bgc-a-belt:hover .bgc-a-belt-track { animation-play-state: paused; }

.bgc-a-belt-tile {
  flex: none;
  width: 124px;
  height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border: 1px solid #F0F1EC;
  border-radius: 16px;
  background: #fff;
}

.bgc-a-belt-tile img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 600px) {
  .bgc-a-bar { padding: 9px 16px; }
  .bgc-a-main { padding: 24px 18px 28px; }
  .bgc-a-h1 { font-size: 27px; }
  .bgc-a-switch, .bgc-a-lede { margin-bottom: 18px; font-size: 15px; }
  .bgc-a-belt-tile { width: 104px; height: 76px; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bgc-a-belt-track { animation: none; }
  .bgc-a-lock { animation: none; }
}

/* --------------------------------------------------------- terms + honeypot */

.bgc-a-terms { margin-top: 4px; }

.bgc-a-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 21px;
  color: var(--a-ink-2);
  cursor: pointer;
}

.bgc-a-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--a-ink);
  cursor: pointer;
}

/*
 * The honeypot. Out of sight, out of the accessibility tree and out of the tab
 * order — `display: none` would let some bots skip it, so it is moved off-screen
 * instead while staying a real, fillable field.
 */
.bgc-a-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------ identifier, once settled */

.bgc-a-known {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 12px 16px;
  border: 1px solid var(--a-hairline);
  border-radius: 14px;
  background: #F7F9F3;
}

.bgc-a-known-value {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--a-ink);
  /* A long address wraps rather than pushing the "use another" control out. */
  overflow-wrap: anywhere;
}

.bgc-a-hint {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--a-ink-2);
  text-wrap: pretty;
}

/* A provider the admin enabled but has not finished configuring: present, as
   the design calls for, and plainly not pressable. */
.bgc-a-social.is-off {
  cursor: not-allowed;
  opacity: .45;
  filter: grayscale(1);
}

.bgc-a-social.is-off:hover {
  background: #fff;
  border-color: var(--a-hairline);
}