/* =====================================================================
   OBSignIn - "Sign in with OneBloc". The one button every OneBloc system uses to hand off to
   OneBloc Connect, taken from Connect's own sign-in button so the person sees the same thing
   everywhere: white, a blue-violet-magenta gradient border, gradient icon and label, filling
   with the gradient on hover. Pure CSS - no script.

   <button type="submit" class="ob-si wide">
     <svg class="ob-si-ico" viewBox="0 0 24 24" aria-hidden="true">
       <defs><linearGradient id="obSiGrad" x1="0" y1="0" x2="1" y2="1">
         <stop offset="0" stop-color="#2B7FF0"/><stop offset=".5" stop-color="#7B5BF0"/><stop offset="1" stop-color="#D81FA9"/>
       </linearGradient></defs>
       <g><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
          <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></g>
     </svg>
     <span class="ob-si-t">Sign in with OneBloc</span>
   </button>

   The gradient is the OneBloc suite's: One-Blue #2B7FF0 -> HR violet #7B5BF0 -> AI magenta #D81FA9.
   ===================================================================== */
.ob-si {
  --ob-si-grad: linear-gradient(100deg, #2B7FF0, #7B5BF0 48%, #D81FA9);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; cursor: pointer;
  font: 700 15.5px/1 var(--ob-font, "Plus Jakarta Sans", system-ui, sans-serif);
  border: 1.6px solid transparent; border-radius: var(--ob-r-control, 11px);
  background: linear-gradient(#fff, #fff) padding-box, var(--ob-si-grad) border-box;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ob-si.wide { width: 100%; }
.ob-si-ico { width: 20px; height: 20px; flex: none; }
.ob-si-ico g { fill: none; stroke: url(#obSiGrad); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s ease; }
.ob-si-t {
  background: var(--ob-si-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; transition: color .2s ease;
}
.ob-si:hover, .ob-si:focus-visible {
  transform: translateY(-1px); box-shadow: 0 8px 22px rgba(123, 91, 240, .32);
  background: var(--ob-si-grad) padding-box, var(--ob-si-grad) border-box;
}
.ob-si:hover .ob-si-t, .ob-si:focus-visible .ob-si-t { -webkit-text-fill-color: #fff; color: #fff; }
.ob-si:hover .ob-si-ico g, .ob-si:focus-visible .ob-si-ico g { stroke: #fff; }
.ob-si:focus-visible { outline: 2px solid #7B5BF0; outline-offset: 3px; }
.ob-si:active { transform: none; box-shadow: 0 3px 10px rgba(123, 91, 240, .28); }
@media (prefers-reduced-motion: reduce) { .ob-si { transition: none; } .ob-si:hover, .ob-si:focus-visible { transform: none; } }

/* ---------------------------------------------------------------------
   "Continue as ..." - the remembered OneBloc account, shown instead of the bare button
   once someone has signed in with OneBloc on this browser. Same gradient border.
   --------------------------------------------------------------------- */
.ob-last-h { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ob-muted, #64748b); }
.ob-last {
  --ob-si-grad: linear-gradient(100deg, #2B7FF0, #7B5BF0 48%, #D81FA9);
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 80px; padding: 14px 16px;
  cursor: pointer; text-align: left; color: inherit;
  font: 500 14px/1.25 var(--ob-font, "Plus Jakarta Sans", system-ui, sans-serif);
  border: 2px solid transparent; border-radius: 14px;
  background: linear-gradient(#fff, #fff) padding-box, var(--ob-si-grad) border-box;
  box-shadow: 0 6px 18px rgba(123, 91, 240, .14);
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ob-last:hover, .ob-last:focus-visible { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(123, 91, 240, .28); }
.ob-last:focus-visible { outline: 2px solid #7B5BF0; outline-offset: 3px; }
.ob-last:active { transform: none; }
.ob-last-av {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #2B7FF0, #7B5BF0 55%, #D81FA9); color: #fff; font-weight: 800; font-size: 20px;
}
.ob-last-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ob-last-t { font-weight: 800; font-size: 16px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-last-e { font-size: 13px; color: var(--ob-muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-last-when { font-size: 11.5px; font-weight: 600; color: #7B5BF0; }
/* The action, filled: a gradient circle with a white chevron, so the card reads as THE button. */
.ob-last-go {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #2B7FF0, #7B5BF0 55%, #D81FA9); color: #fff;
  box-shadow: 0 4px 10px rgba(123, 91, 240, .35); transition: transform .2s ease;
}
.ob-last-go svg { width: 18px; height: 18px; }
.ob-last:hover .ob-last-go, .ob-last:focus-visible .ob-last-go { transform: translateX(2px); }
.ob-last-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin-top: 10px; }
.ob-last-links form { margin: 0; }
.ob-last-link {
  background: none; border: 0; padding: 8px 4px; min-height: 40px; cursor: pointer;
  font: 600 13px/1.2 var(--ob-font, "Plus Jakarta Sans", system-ui, sans-serif); color: #5b47d6;
}
.ob-last-link:hover, .ob-last-link:focus-visible { text-decoration: underline; }
/* On a phone the two links stack; a dot left dangling after the first one looks like a typo. */
@media (max-width: 480px) { .ob-last-links > span { display: none; } .ob-last-links { gap: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .ob-last, .ob-last-go { transition: none; } .ob-last:hover .ob-last-go { transform: none; } .ob-last:hover, .ob-last:focus-visible { transform: none; } }

/* ---------------------------------------------------------------------
   "Continue with Google" - sits under "Sign in with OneBloc" and goes THROUGH Connect (idp=google),
   so it is the same OneBloc account either way. Google's own button rules: white, thin grey border,
   the full-colour G, the words "Continue with Google". Same height and radius as .ob-si so the
   pair reads as one group; deliberately quieter, because OneBloc is the brand's door.
   --------------------------------------------------------------------- */
.ob-g-row { margin: 10px 0 0; }
.ob-g {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; cursor: pointer;
  font: 600 15px/1 var(--ob-font, "Plus Jakarta Sans", system-ui, sans-serif); color: #1f1f1f;
  background: #fff; border: 1px solid #c7cbd1; border-radius: var(--ob-r-control, 11px);
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ob-g.wide { width: 100%; }
.ob-g-ico { width: 18px; height: 18px; flex: none; }
.ob-g:hover, .ob-g:focus-visible { background: #f8f9fb; border-color: #9aa1ab; box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }
.ob-g:focus-visible { outline: 2px solid #4285F4; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ob-g { transition: none; } }