/* web/pages/auth/auth_extras.css · [AUTHX1]
   Styles for the two UI-only DUMMY auth screens (Forgot password / Email
   verification), both added as sibling .ag-form-col columns inside the
   existing .ag-pane of #auth-gate.

   Rules:
   - Reuse the existing classes wherever possible (.ag-field, .ag-sub,
     .ag-err, .ag-note, .ag-alt, .ag-brand, .ag-pane, .ag-form-col).
   - Only the classes below are NEW, and every value is a token already
     shipped by brandkit.css / theme_b.css. No new palette, no new font,
     no new spacing scale.
   - #ag-title and #ag-submit are id-scoped, so the new screens get a
     class mirror (.agx-title / .agx-submit) with identical declarations.
   - The cobalt wide-screen look comes from the same .ag-pane media query
     in auth.css, restated here for the new elements only.
   Loads AFTER pages/auth/auth.css (see index.html) so nothing competes. */

/* Title: byte-for-byte #ag-title, but class-scoped for the extra columns. */
.agx-title{
  margin:0 0 var(--space-2);
  padding-bottom:0;border-bottom:0;
  color:var(--text);font-size:24px;font-weight:700;line-height:1.2;
}

/* Primary button: byte-for-byte #ag-submit, but class-scoped. */
.agx-submit{
  margin-top:var(--space-1);
  height:44px;padding:0 var(--space-5);
  background:var(--primary);border:0;
  border-radius:var(--radius-btn);
  color:var(--white);font-family:inherit;font-size:15px;font-weight:600;
  line-height:1;cursor:pointer;
  transition:background-color 120ms ease-out;
  width:100%;
}
.agx-submit:hover{background:var(--primary-hover)}
.agx-submit:active{background:var(--primary-pressed)}
.agx-submit:disabled{opacity:.45;cursor:not-allowed;background:var(--primary)}

/* "Forgot password?" — sits inline with the Password label (login form).
   Reuses the link look family of .ag-alt (accent text, hover underline). */
.ag-fg-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  margin-bottom:var(--space-4);
}
.ag-fg-row label{margin:0}
.ag-fg-link{
  border:0;background:transparent;padding:0;margin:0;
  color:var(--accent-text);font-family:inherit;font-size:13px;font-weight:500;
  cursor:pointer;text-align:right;line-height:1.4;
}
.ag-fg-link:hover{color:var(--accent-hover);text-decoration:underline}

/* Success block (forgot "link sent" / verify "verified"). Reuses the
   error/note rhythm but in success colour; nothing new in the palette. */
.agx-success{
  margin:0 0 var(--space-3);padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-input);
  background:color-mix(in srgb,var(--success) 18%,transparent);
  color:var(--success-ink,var(--text));font-size:13px;line-height:1.4;
}

/* OTP: six single-digit boxes, sized/rounded/tinted like .ag-field input. */
.ag-otp{display:flex;gap:var(--space-2);margin-bottom:var(--space-4)}
.ag-otp-box{
  width:100%;height:48px;padding:0;text-align:center;
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--radius-input);
  color:var(--text);font-family:inherit;font-size:18px;font-weight:600;
  line-height:1;transition:border-color 120ms ease-out;
}
.ag-otp-box:hover{border-color:var(--border-hover)}
.ag-otp-box:focus-visible{border-color:var(--selected-border);outline:none}

/* The "we sent a code to …" address line, second style of .ag-sub. */
.agx-hint{margin:0 0 var(--space-4);color:var(--text-dim);font-size:13px}
.agx-hint strong{color:var(--text);font-weight:600}

/* Resend is a link-style button (family of .ag-alt). */
.agx-resend{
  align-self:flex-start;margin-top:0;
  padding:var(--space-1) 0;border:0;border-radius:4px;background:transparent;
  color:var(--accent-text);font-family:inherit;font-size:14px;font-weight:500;
  cursor:pointer;text-align:left;
}
.agx-resend:hover{color:var(--accent-hover);text-decoration:underline}
.agx-resend:disabled{color:var(--text-muted);cursor:not-allowed;text-decoration:none}

/* Shared spacing helper: the extra columns are flex columns like #ag-form. */
.ag-form-col form{display:flex;flex-direction:column;gap:0}

/* ---- wide-screen cobalt (mirror of auth.css @media min-width:1024px) ---- */
@media (min-width:1024px){
  .ag-pane .agx-title{color:var(--white)}
  .ag-pane .agx-hint{color:color-mix(in srgb,var(--white) 80%,transparent)}
  .ag-pane .agx-hint strong{color:var(--white)}
  .ag-pane .ag-otp-box{
    background:var(--white);
    border-color:transparent;
    color:var(--brand-ink);
  }
  .ag-pane .ag-otp-box:hover{border-color:color-mix(in srgb,var(--white) 60%,transparent)}
  .ag-pane .ag-otp-box:focus-visible{border-color:var(--white)}
  .ag-pane .agx-submit{background:var(--success);color:var(--brand-ink)}
  .ag-pane .agx-submit:hover{background:color-mix(in srgb,var(--success) 85%,var(--white))}
  .ag-pane .agx-submit:active{background:color-mix(in srgb,var(--success) 85%,var(--brand-ink))}
  .ag-pane .agx-submit:disabled{background:var(--success);opacity:.45}
  .ag-pane .ag-fg-link,
  .ag-pane .ag-fg-link:hover,
  .ag-pane .agx-resend,
  .ag-pane .agx-resend:hover{color:var(--white)}
  .ag-pane .agx-resend:disabled{color:color-mix(in srgb,var(--white) 60%,transparent)}
  .ag-pane .agx-success{
    background:color-mix(in srgb,var(--success) 25%,transparent);
    color:var(--brand-ink);
  }
}

@media (max-width:480px){
  .agx-title{font-size:21px}
}