/* gm-auth — minimal styles required for correct function.
   Error toasts and busy states only; no decorative CSS. */

/* Error toast inside Breakdance forms.
   Breakdance lays out form rows as a CSS grid (12-column track), so any
   plain <div> we inject is auto-sized to one cell — that's why an error
   would otherwise render as a tall narrow column. The grid-column override
   forces a full-row span; the flex-basis covers the wizard step container
   which uses flexbox instead of grid. width:100% pins it on both. */
.gm-auth-error {
  display: none;
  width: 100%;
  flex-basis: 100%;
  grid-column: 1 / -1;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.45;
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fda29b;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 0;
}

.gm-auth-busy {
  opacity: 0.7;
  cursor: progress !important;
  pointer-events: none;
}

/* ── Sign-in popup: six-digit OTP boxes ─────────────────────────────────
   Mirrors the wizard step 2 box row visually so users see a consistent
   pattern across signup and signin. The hidden source #otp_code keeps its
   own width:100% — set via Breakdance — but display:none takes it out of
   layout, so the boxes row can sit flush in the same form cell. */
.gm-otp-boxes {
  display: flex;
  gap: 10px;
  width: 100%;
  margin: 2px 0 4px;
}

/* The Breakdance form CSS resets <input> borders globally via
   `.breakdance-form input { border: ... }`, which beats my class selector
   on specificity grounds. !important on the visibility-critical props
   keeps the boxes visible even when Breakdance updates its form bundle.
   Using two stacked class selectors (.gm-otp-boxes .gm-otp-box) also
   raises specificity, but !important is what lets us survive a future
   Breakdance update that adds even higher-weight resets. */
.gm-otp-boxes .gm-otp-box {
  flex: 1 1 0 !important;
  min-width: 36px !important;
  height: 56px !important;
  text-align: center !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--bde-headings-color, #16140f) !important;
  background-color: #ffffff !important;
  /* #b8bdbc is muted enough that the empty boxes don't shout, but still
     contrast against the white card so the user reads "input slots", not
     "blank space". The earlier #9aa0a6 was correct in contrast but felt
     too dark next to the gradient panel; this softens it without losing
     legibility. */
  border: 1.5px solid #b8bdbc !important;
  border-radius: 12px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
.gm-otp-boxes .gm-otp-box::-webkit-outer-spin-button,
.gm-otp-boxes .gm-otp-box::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.gm-otp-boxes .gm-otp-box:hover {
  border-color: #8a9290 !important;
}
/* Focus glow uses the same green as the brand primary so it ties back to
   the Submit button. 4px ring + saturated green border = visible at a glance
   without darkening the text. Border width stays 1.5px so the box never
   shifts size when focus moves between cells. */
.gm-otp-boxes .gm-otp-box:focus {
  outline: none !important;
  border-color: #16a34a !important;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.22) !important;
  background-color: #fafefa !important;
}
/* When a digit has been entered, dim the border a touch so the eye knows
   "this one's done" — focused box still wins visually via the ring.
   Mid-gray (#7a8079), not black, so the row reads as state-change rather
   than alarming-emphasis. */
.gm-otp-boxes .gm-otp-box:not(:placeholder-shown),
.gm-otp-boxes .gm-otp-box[value]:not([value=""]) {
  border-color: #7a8079 !important;
}

/* ── Popup 803 "No account yet?" right panel polish ─────────────────────
   The defaults left the lightning icon faded, the badge text gray, and
   the three step cards with no clear radius. Stable Breakdance class
   names (`bde-{type}-{post_id}-{nid}`) let us target each spot without
   touching the page builder definition.

   122 = lightning icon
   123 = "NEW HERE" badge
   120 = icon + heading row
   146 / 152 / 158 = the three step cards
   138 = "See plans & buy Godmode" CTA */
/* Icon 122 was configured as Lucide's outline `icon-zap` (stroke art),
   which looked like a thin gray bolt next to the solid-black bolt used
   in the left pane (icon 140 = `icon-bolt`). We hide the source SVG and
   paint the wrapper with the SAME solid-bolt path used in 140, masked
   in black — visually identical to the Welcome-back icon, no Breakdance
   builder swap needed. */
.bde-icon-803-122 svg {
  display: none !important;
}
.bde-icon-803-122 {
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  background-color: #000 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* "No account yet?" heading — force black, the heading preset rendered
   it as a dark-grey body colour. */
.bde-heading-803-119,
.bde-heading-803-119 h1,
.bde-heading-803-119 h2,
.bde-heading-803-119 h3,
.bde-heading-803-119 h4 {
  color: #000 !important;
}

.bde-badge-803-123 {
  color: #16a34a !important;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bde-div-803-120 {
  gap: 14px !important;             /* breathing room between bolt + heading */
  align-items: center;
  margin-bottom: 4px;
}

.bde-div-803-146,
.bde-div-803-152,
.bde-div-803-158 {
  border-radius: 14px !important;
  overflow: hidden;
}

/* Step number badges (141 / 147 / 153) — Breakdance laid these out as
   small dark rectangles. Square shape with a touch of radius keeps them
   reading as "step markers" and matches the wizard's progress squares.
   flex:0 0 36px stops them stretching when the parent row grows. */
.bde-div-803-141,
.bde-div-803-147,
.bde-div-803-153 {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  flex: 0 0 36px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.bde-div-803-141 .bde-text,
.bde-div-803-147 .bde-text,
.bde-div-803-153 .bde-text,
.bde-text-803-142,
.bde-text-803-148,
.bde-text-803-154 {
  line-height: 1 !important;
}

/* Description "Godmode accounts are created together with your license…"
   was rendering as small gray body text on the green gradient — hard to
   read. Bump to 16px and switch to the headings color so it carries the
   same visual weight as the left-pane subhead. */
.bde-rich-text-803-124,
.bde-rich-text-803-124 p {
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--bde-headings-color, #16140f) !important;
}
.bde-rich-text-803-124 strong {
  color: var(--bde-headings-color, #16140f) !important;
  font-weight: 700 !important;
}

/* Right pane (106) — collapsed by default, slides out when the user
   clicks "No account yet?" below the Submit button. The body class
   `gm-popup-803-expanded` is toggled by signin.js.
   max-width:0 + overflow:hidden hides content while the popup container
   shrinks naturally (Breakdance lays the panes out as flex children, so
   collapsing one shrinks the whole popup width). The large
   max-width:1200 expanded target lets the natural pane width cap inside
   it — we transition the cap, the actual width follows. */
.bde-div-803-106 {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  transition:
    max-width 500ms cubic-bezier(.2,.7,.2,1),
    opacity 350ms ease 80ms,
    padding 500ms ease,
    margin 500ms ease !important;
}
body:not(.gm-popup-803-expanded) .bde-div-803-106 {
  max-width: 0 !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  opacity: 0 !important;
  border: 0 !important;
}
body.gm-popup-803-expanded .bde-div-803-106 {
  max-width: 1200px !important;
  opacity: 1 !important;
}
.bde-div-803-108 {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding-bottom: 28px !important;
}

/* CTA "See plans & buy Godmode" — keep it present but less shouty than
   the green plan-card buttons next to it. Padding tightens it; the
   shadow drop softens its competition with the form's submit button.
   margin-top:auto inside the flex column above pushes it (and the JS-
   injected T&C row that follows it) to the panel bottom. */
.bde-button-803-138 {
  margin-top: auto !important;
}
.bde-button-803-138 button,
.bde-button-803-138 a {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
  box-shadow: none !important;
  /* space-between pushes the lightning bolt all the way left and the
     arrow all the way right, with the label centred between them. */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Lightning bolt before the CTA text. Inline-encoded SVG using mask
   means the icon picks up `currentColor` automatically — no separate
   asset to ship and the icon always matches the button text colour.
   Same bolt geometry as the wizard topbar icon for visual consistency. */
.bde-button-803-138 button::before,
.bde-button-803-138 a::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Arrow after the CTA text. Switched from a Unicode → (browser default
   was too heavy / inconsistent) to a hand-tuned SVG line arrow at 1.6
   stroke. mask-image lets the arrow pick up currentColor, so it always
   matches the button text. */
.bde-button-803-138 button::after,
.bde-button-803-138 a::after {
  content: "" !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-5-5 5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-5-5 5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain !important;
  font-size: 0 !important;
  transform: none !important;
}

/* 2FA method picker — two small links + a status line. JS injected just
   below the OTP boxes. Default (TOTP) keeps both links neutral; switching
   to email or recovery marks the corresponding link as "active". */
.gm-method-picker {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  font-size: 13px;
}
.gm-method-picker a {
  color: #4d5551 !important;
  text-decoration: none !important;
  font-weight: 600;
  border-bottom: 1px dashed #c2c8c2;
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.gm-method-picker a:hover {
  color: #16a34a !important;
  border-color: #16a34a;
}
.gm-method-picker.gm-method-email a[data-gm-method="email"],
.gm-method-picker.gm-method-recovery a[data-gm-method="recovery"] {
  color: #16a34a !important;
  border-color: #16a34a;
  border-bottom-style: solid;
}
.gm-method-status {
  width: 100%;
  font-size: 12.5px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f0fff0;
  border: 1px solid #c7e8c7;
  color: #1b5e20;
  margin-top: 6px;
}
.gm-method-status[data-tone="warn"] {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}
.gm-method-status[data-tone="ok"] {
  background: #ecfdf5;
  border-color: #86efac;
  color: #14532d;
}

/* Recovery-code input — replaces the 6-box widget when the user picks
   "Use recovery code instead". Single full-width text field, monospace
   so the XXXX-XXXX dashes line up. */
.gm-recovery-input {
  display: block !important;
  width: 100% !important;
  margin: 4px 0 6px;
  height: 52px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 18px !important;
  letter-spacing: 0.05em;
  color: var(--bde-headings-color, #16140f) !important;
  background: #fff !important;
  border: 1.5px solid #b8bdbc !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  text-align: center;
  box-sizing: border-box !important;
}
.gm-recovery-input:focus {
  outline: none !important;
  border-color: #16a34a !important;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.22) !important;
}

/* "No account yet?" link below the Submit button. Centered, low-key,
   the green span makes the actionable bit jump out. JS-injected so the
   markup stays out of the popup tree. */
.gm-no-account {
  width: 100%;
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: #4d5551;
}
.gm-no-account a {
  color: #4d5551 !important;
  text-decoration: none !important;
  font-weight: 500;
}
.gm-no-account a span {
  color: #16a34a !important;
  font-weight: 700;
  margin-left: 6px;
}
.gm-no-account a:hover span {
  text-decoration: underline;
}

/* T&C disclaimer line — small, low-contrast, links underlined.
   `.gm-803-tos` is a class we set on the new RichText node via the
   builder so the styles attach to that one element only. */
.gm-803-tos,
.gm-803-tos p {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: #4d5551 !important;
  text-align: center !important;
  margin-top: 14px !important;
}
.gm-803-tos a {
  color: var(--bde-headings-color, #16140f) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.gm-803-tos a:hover {
  color: #16a34a !important;
}