/* ============================================================
   parity-overrides-auth.css  (P3a — auth route group ONLY)
   Loaded only by src/app/(auth)/layout.tsx, AFTER auth-app.min.css.

   Two kinds of rules, each commented with WHY:
   1) Neutralize main-app.min.css rules that leak into the auth pages.
      The live /login + /register do NOT load the main app.min.css, but
      our root layout (not editable by P3a) links it globally; the auth
      stylesheets loaded later win every shared declaration, but rules
      the auth CSS never re-declares would leak through — reset those
      to the value the live auth page computes (Bootstrap default / none).
   2) Draw the reCAPTCHA v2 widget placeholder. The live page renders
      Google's widget via api.js; forms are inert stubs in this phase,
      so we draw a same-size stand-in to keep layout parity.
   ============================================================ */

/* (1) main app.min.css sets body{padding-top:80px} for the fixed .nav-bar.
   The live auth page has NO body padding-top (its .sign-nav is in-flow);
   auth-app.min.css never re-declares padding-top, so the 80px would leak. */
body:has(.sign) {
  padding-top: 0;
}

/* (1) main app.min.css sets .logo{display:inline-block;height:45px} (and a
   32px variant in its mobile media query). The live auth page only has
   auth-app's .logo{display:flex} + .logo img{height:40px} — kill the fixed
   heights so the flex box sizes from the 40px img exactly as live. */
.sign .logo {
  height: auto;
}

/* (1) main app.min.css sets h1..h6{line-height:1}; the live auth page keeps
   Bootstrap's heading line-height (1.2). The tighter line box shifted the
   whole card copy up ~2px vs the reference. */
.sign h1, .sign h2, .sign h3, .sign h4, .sign h5, .sign h6 {
  line-height: 1.2;
}

/* (1) main app.min.css sets .btn{font-weight:500} and .btn.btn-md{font-size:14px};
   the live auth page computes Bootstrap defaults (weight 400, font-size 1rem) —
   the 14px leak also made the submit button ~5px shorter than the reference. */
.sign .btn {
  font-weight: 400;
}
.sign .btn.btn-md {
  font-size: 1rem;
}

/* (1) main app.min.css sets .btn-theme{padding-inline:16px!important}; the live
   auth theme toggle uses auth-app's padding:8px 20px. The 16px leak narrowed
   the button and shifted the whole nav-right cluster ~8px. */
.sign .btn-theme {
  padding-inline: 20px !important;
}

/* (1) main app.min.css sets .text-muted{color:#808285!important}; the live auth
   page computes Bootstrap's own .text-muted (#6c757d). */
.sign .text-muted {
  color: #6c757d !important;
}

/* (2) reCAPTCHA v2 checkbox-widget placeholder (inert phase only).
   Standard widget frame: 304x78, #f9f9f9 bg, #d3d3d3 border, radius 3px,
   with the "I'm not a robot" checkbox + label drawn in CSS so the auth
   forms visually match the reference screenshots. When the backend phase
   loads https://www.google.com/recaptcha/api.js, Google replaces the
   contents of .g-recaptcha and these decorations no longer apply (the
   ::before/::after are removed with the class styling below). */
.g-recaptcha:empty {
  box-sizing: border-box;
  width: 304px;
  /* Google's widget occupies a 78px layout box but paints a 76px frame.
     A bottom margin would collapse through the .mb-3 wrapper's own margin,
     so the extra 2px is added as wrapper padding below instead. */
  height: 76px;
  background: #f9f9f9;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  padding-left: 12px;
}
.g-recaptcha:empty::before {
  /* the checkbox */
  content: "";
  width: 28px;
  height: 28px;
  background: #fff;
  border: 2px solid #c1c1c1;
  border-radius: 2px;
  flex: 0 0 auto;
}
/* Completes the widget's 78px layout box (see height comment above); margin
   on the child would collapse away, padding on the wrapper does not. */
.mb-3:has(> .g-recaptcha:empty) {
  padding-bottom: 2px;
}
.g-recaptcha:empty::after {
  /* the label */
  content: "I'm not a robot";
  margin-left: 12px;
  font-family: Roboto, helvetica, arial, sans-serif;
  font-size: 14px;
  color: #282727;
}