/* ATB Join Popup — single-panel form modal.
 *
 * All rules scoped under #atb-join-popup to prevent leaking into the
 * host opp landing page. The popup is hidden by default; opp.php JS
 * removes the .hidden class to reveal it.
 *
 * Previously a two-column split (narrative + form). Dropped 2026-05-17
 * — too much reading, slowed conversion. Now form-only with a punchy
 * one-line headline + 3 dense benefit bullets above the email field.
 */

#atb-join-popup{
  position:fixed;inset:0;z-index:100;
  display:none;
}
#atb-join-popup.hidden{display:none}
#atb-join-popup:not(.hidden){display:block}

/* ============== SCRIM ============== */
/* TOP-ANCHORED, NOT CENTRED (2026-09-11, Sheridan: "opp join cut off on bottom
   in frame"). Same bug the /auth/embed popup had an hour earlier, in the other
   popup -- this one is the inline opp-join modal, so the embed fix did not
   reach it.

   place-items:center assumes the viewport we can measure is the one the
   visitor can SEE. Inside a traffic exchange that is false and measurably so:
   topdogsrotator.com sizes its ad iframe to a FIXED height:1000px starting 78px
   down, in a 768px-tall window. This modal is rendered inside the LANDER
   document, so its 100vh is that same 1000px; centring parks it low and the
   submit button lands below the fold. The scrim's overflow:auto does not save
   it either -- the scrollable area is itself mostly off-screen.

   Anchoring to the top puts the modal a known small offset from the frame's top
   edge, which is the part an exchange reliably keeps on screen because it is
   what the visitor is being shown. The 720px block below has done exactly this
   since 2026-06-14, for the same reason, on the narrower axis.

   clamp() keeps it off the top edge on a real desktop window while collapsing
   on a short one, where height matters more than margin. */
#atb-join-popup .atb-jp-scrim{
  position:fixed;inset:0;
  background:rgba(6,40,24,0.42);
  -webkit-backdrop-filter:blur(6px) saturate(160%);
  backdrop-filter:blur(6px) saturate(160%);
  z-index:50;
  display:grid;place-items:start center;
  padding:clamp(14px,4vh,40px) 24px 32px;
  overflow:auto;
  animation:atb-jp-scrim-in .35s ease-out;
}
@keyframes atb-jp-scrim-in{from{opacity:0}to{opacity:1}}

/* ============== MODAL ============== */
#atb-join-popup .atb-jp-modal{
  width:100%;max-width:480px;
  background:#fff;
  border-radius:24px;
  /* overflow-x stays hidden so the rounded corners still clip; y scrolls.
     Capped against the SHORTER of this viewport and a realistic window, so a
     tall exchange frame cannot licence a modal taller than any screen shows. */
  /* THREE BUGS LIVED IN THESE THREE LINES (2026-09-16, reported by Sheridan:
     "it's showing the scroll bar by default, it's not showing the rounded
     corners on the right hand side, the box is smaller and the part where
     users can continue without joining is cut off").

     1. SCROLLBAR. overflow-y:auto on the rounded box paints the scrollbar
        track INSIDE the border box, so it sits hard against the right edge
        and squares off both right corners. The corners were not lost — they
        were covered. The scroll now belongs to the box but the bar is hidden
        (it is a 480px modal, not a document), with a fade at the foot so the
        visitor can still see that content continues.

     2. THE BOTTOM WAS CUT. max-height was capped at a flat 600px, which is
        SHORTER than this modal's own content, so on a perfectly tall desktop
        window the skip link — "no thanks, just send me to <Opp>" — was pushed
        below the fold and looked missing. That link is the one exit a visitor
        who does not want to sign up can take, so hiding it costs the click it
        was built to capture. Sized to the content instead.

     3. SMALL SCREENS AND SURF BARS. 100vh is wrong inside a traffic-exchange
        frame and on mobile, where the browser chrome and the exchange's own
        toolbar eat the top: 100vh reports the UNSHRUNK viewport, so the modal
        is taller than what the visitor can actually see and the bottom goes
        under the fold. 100dvh tracks the real, shrunken box. The 100vh line
        stays first as the fallback for browsers that do not know dvh. The
        hard cap is kept — the reason it was added still holds, a tall frame
        must not licence a modal taller than any screen shows — but raised to
        clear the content instead of clipping it. */
  overflow-x:hidden;
  max-height:calc(100vh - 72px);
  max-height:min(calc(100dvh - 72px),760px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;        /* Firefox */
  -ms-overflow-style:none;     /* legacy Edge */
  box-shadow:0 40px 90px -20px rgba(11,36,25,.45),
             0 12px 30px -10px rgba(11,36,25,.18),
             inset 0 1px 0 rgba(255,255,255,.5);
  position:relative;
  animation:atb-jp-modal-in .45s cubic-bezier(.2,.8,.3,1.05) both;
  border:1px solid rgba(255,255,255,.7);
  font-family:'Geist','Inter',system-ui,sans-serif;
  color:var(--ink,#0b2419);
}
/* Chrome/Safari half of the hidden scrollbar. Firefox and legacy Edge are
   handled by scrollbar-width / -ms-overflow-style on the modal above.

   A fade at the foot was added here to replace the affordance the hidden bar
   took away, driven by a data-scrollable flag set in showPopup(). It was
   removed on the same day: the flag never got set on the real click path and
   the cause was not found, so rather than leave a rule keyed to an attribute
   that never appears, both halves went. If the affordance is wanted later,
   start by finding out why that JS did not run. */
#atb-join-popup .atb-jp-modal::-webkit-scrollbar{width:0;height:0}


@keyframes atb-jp-modal-in{
  from{opacity:0;transform:translateY(16px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ============== CLOSE BUTTON ============== */
#atb-join-popup .atb-jp-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:50%;
  border:none;background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--ink-mute,#5f6d62);
  cursor:pointer;
  display:grid;place-items:center;
  transition:background .15s, color .15s, transform .15s;
  z-index:5;
  padding:0;
}
#atb-join-popup .atb-jp-close:hover{
  background:#fff;color:var(--ink,#0b2419);transform:rotate(90deg);
}
#atb-join-popup .atb-jp-close svg{width:14px;height:14px}

/* ============== TWO-STEP CONTAINER ==============
 * Each step lives in its own .atb-jp-step panel. Only the panel whose
 * data-step matches data-current-step on the popup root is visible.
 * Sliding transition adds a 220ms translate+fade between steps.
 */
#atb-join-popup .atb-jp-step{
  display:none;
  opacity:0;
  transform:translateX(12px);
  transition:opacity .22s ease, transform .22s ease;
}
#atb-join-popup[data-current-step="1"] .atb-jp-step[data-step="1"],
#atb-join-popup[data-current-step="2"] .atb-jp-step[data-step="2"],
#atb-join-popup[data-current-step="3"] .atb-jp-step[data-step="3"],
#atb-join-popup[data-current-step="4"] .atb-jp-step[data-step="4"]{
  display:flex;
  flex-direction:column;
  gap:14px;
  /* Trigger the enter-animation. */
  animation:atb-jp-step-in .28s ease forwards;
}
@keyframes atb-jp-step-in{
  from{opacity:0;transform:translateX(14px)}
  to{opacity:1;transform:translateX(0)}
}

/* Inline check glyph used in the step-2 logged-out headline */
#atb-join-popup .atb-jp-check-inline{
  color:var(--teal,#2f8a52);font-weight:700;margin-right:4px;
}

/* Step 2 lede (italic-ish, smaller than the headline, comfortable
 * reading width). */
#atb-join-popup .atb-jp-step2-lede{
  font-family:'Newsreader','Geist',serif;
  font-size:14.5px;line-height:1.5;color:#3a4a40;
  margin:0;
}
#atb-join-popup .atb-jp-step2-lede b{color:#0b2419;font-weight:600}

/* Hint pill under the affiliate-ID input (shows extracted ID after paste). */
#atb-join-popup .atb-jp-step2-hint{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11.5px;color:var(--teal,#2f8a52);
  margin:4px 2px 0;letter-spacing:0.02em;font-weight:500;
}

/* "I signed up through this link" confirmation checkbox — sits under
 * the affiliate-ID input. Defaults to checked since the user reached
 * the popup by clicking a Join CTA. Unchecking flips the server-side
 * joined_via from sponsor_link to direct_paste so admin can later
 * verify alignment. */
#atb-join-popup .atb-jp-confirm{
  display:flex;align-items:flex-start;gap:8px;
  margin:6px 2px 0;
  font-family:'Geist',system-ui,sans-serif;
  font-size:12.5px;line-height:1.4;color:#3a4a40;
  cursor:pointer;
}
#atb-join-popup .atb-jp-confirm input[type="checkbox"]{
  appearance:auto;
  margin-top:2px;flex:0 0 14px;
  accent-color:var(--teal-deep,#0b3d2e);
  cursor:pointer;
}
#atb-join-popup .atb-jp-confirm-text{flex:1;user-select:none}

/* Inline form-error pill — used by both step1 and step2. */
#atb-join-popup .atb-jp-form-error{
  font-family:'Geist',system-ui,sans-serif;
  font-size:12.5px;line-height:1.4;color:#a63a3a;
  background:#fef0ed;border:1px solid rgba(166,58,58,.22);
  border-radius:10px;padding:8px 12px;margin:2px 0;
}

/* Step-3 saved-ID echo. Neutral by default because the honest claim is
   "this is what we saved", not "this is correct" — nothing on this page can
   verify that an ID belongs to the person who pasted it. Turns amber only
   when the server hands back a real warning from atb_aff_verify_and_record(). */
#atb-join-popup .atb-jp-saved-id{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:'Geist',system-ui,sans-serif;font-size:12.5px;line-height:1.5;
  color:#3d4a44;background:#f4f7f5;border:1px solid rgba(61,74,68,.14);
  border-radius:10px;padding:9px 12px;margin:0 0 16px;
}
#atb-join-popup .atb-jp-saved-id[data-warn]{
  color:#7a5312;background:#fdf6e7;border-color:rgba(122,83,18,.24);
}
#atb-join-popup .atb-jp-saved-id-label{opacity:.72}
#atb-join-popup .atb-jp-saved-id code{
  font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  background:#fff;border:1px solid rgba(61,74,68,.16);
  border-radius:6px;padding:2px 7px;
  /* A long pasted handle must not push the "change it" link off the panel. */
  max-width:100%;overflow-wrap:anywhere;
}
#atb-join-popup .atb-jp-saved-id a{color:inherit;text-decoration:underline;opacity:.8}
#atb-join-popup .atb-jp-saved-id a:hover{opacity:1}
#atb-join-popup .atb-jp-saved-id-warn{flex-basis:100%;font-weight:500}

/* ============== FORM PANEL ============== */
#atb-join-popup .atb-jp-panel-right{
  padding:32px 32px 22px;
  background:#fff;
  position:relative;
}
#atb-join-popup .atb-jp-opp-echo{
  display:inline-flex;align-items:center;gap:10px;
  align-self:flex-start;
  padding:6px 12px 6px 6px;
  background:#f5f1e6;
  border:1px solid rgba(11,36,25,0.08);
  border-radius:99px;
}
#atb-join-popup .atb-jp-opp-echo .lg{
  width:22px;height:22px;border-radius:7px;
  background:linear-gradient(135deg,var(--teal,#004b3b),var(--teal-deep,#0b3d2e));
  color:#fff;display:grid;place-items:center;
  font-family:'Newsreader',serif;font-size:13px;font-style:italic;font-weight:500;
  flex:0 0 auto;
}
#atb-join-popup .atb-jp-opp-echo .tx{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:10px;color:#5f6d62;
  letter-spacing:0.14em;text-transform:uppercase;font-weight:500;
}
#atb-join-popup .atb-jp-opp-echo .tx b{color:#0b2419;font-weight:600}

#atb-join-popup .atb-jp-h3{
  font-family:'Newsreader',serif;
  font-weight:500;
  font-size:24px;
  letter-spacing:-0.018em;
  line-height:1.15;
  margin:0;
  color:#0b2419;
  text-wrap:balance;
}
#atb-join-popup .atb-jp-h3 em{font-style:italic;color:var(--teal-deep,#0b3d2e);font-weight:500}

/* ============== BENEFITS ============== */
#atb-join-popup .atb-jp-benefits{
  list-style:none;padding:0;
  display:flex;flex-direction:column;gap:10px;margin:2px 0 4px;
}
#atb-join-popup .atb-jp-benefits .b{
  display:flex;align-items:flex-start;gap:11px;
  font-size:13.5px;
  line-height:1.45;
  color:#3a4a40;
  letter-spacing:-0.005em;
}
#atb-join-popup .atb-jp-benefits .b .ck{
  width:18px;height:18px;border-radius:50%;
  background:#e5efe8;
  color:var(--teal-deep,#0b3d2e);
  display:grid;place-items:center;
  flex:0 0 auto;margin-top:1px;
  border:1px solid rgba(0,75,59,.18);
}
#atb-join-popup .atb-jp-benefits .b .ck svg{width:9px;height:9px}
#atb-join-popup .atb-jp-benefits .b b{color:#0b2419;font-weight:600}

/* ============== FORM ============== */
#atb-join-popup .atb-jp-form{
  display:flex;flex-direction:column;gap:10px;margin-top:4px;
}
/* tighten the sponsor-consent checkbox spacing inside the join popup only */
#atb-join-popup .atb-consent-field{
  margin:-4px 0 0!important;
}
#atb-join-popup .atb-jp-field{
  position:relative;
  display:flex;align-items:center;
  background:#fff;
  border:1.5px solid rgba(11,36,25,0.16);
  border-radius:12px;
  transition:border-color .15s, box-shadow .15s;
}
#atb-join-popup .atb-jp-field:focus-within{
  border-color:var(--teal-deep,#0b3d2e);
  box-shadow:0 0 0 3px rgba(201,169,97,.28);
}
#atb-join-popup .atb-jp-field .pre{
  padding:0 10px 0 14px;color:#5f6d62;
  display:grid;place-items:center;
}
#atb-join-popup .atb-jp-field .pre svg{width:16px;height:16px}
#atb-join-popup .atb-jp-field input{
  flex:1;min-width:0;
  border:none;outline:none;background:transparent;
  padding:14px 14px 14px 0;
  font-family:inherit;font-size:14.5px;color:#0b2419;font-weight:500;
  letter-spacing:-0.005em;
  -webkit-appearance:none;appearance:none;
  border-radius:0;
  box-shadow:none;
}
#atb-join-popup .atb-jp-field input:focus,
#atb-join-popup .atb-jp-field input:focus-visible{
  outline:none;
  box-shadow:none;
}
#atb-join-popup .atb-jp-field input::placeholder{color:#8a948a;font-weight:400}

/* Chrome autofill default is a light blue/lavender pill that clashes with
 * the editorial palette. Force the autofill background to match the
 * field's normal background (white/transparent) and keep the ink color.
 * The inset box-shadow trick is the standard way to override autofill
 * because Chrome -webkit-text-fill-color overrides .color, and the
 * autofill bg color is implemented as an inset box-shadow. */
#atb-join-popup .atb-jp-field input:-webkit-autofill,
#atb-join-popup .atb-jp-field input:-webkit-autofill:hover,
#atb-join-popup .atb-jp-field input:-webkit-autofill:focus,
#atb-join-popup .atb-jp-field input:-webkit-autofill:active{
  -webkit-text-fill-color: #0b2419;
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
  box-shadow: 0 0 0 30px #ffffff inset !important;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: #0b2419;
}

/* Cloudflare Turnstile container — invisible mode renders a 0-size
 * iframe and only shows a challenge in a popup if CF flags the
 * request. Clamp the container to 0 so the "Success!" badge (only
 * rendered in managed/flexible modes) can't push form layout. */
#atb-join-popup .cf-turnstile{
  height:0;
  overflow:hidden;
  margin:0;
}

/* ============== CTA ============== */
#atb-join-popup .atb-jp-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 18px;
  border-radius:12px;
  background:linear-gradient(180deg,var(--teal,#004b3b) 0%,var(--teal-deep,#0b3d2e) 100%);
  color:#fff;
  border:1px solid rgba(0,75,59,.5);
  font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:-0.005em;
  cursor:pointer;
  box-shadow:0 12px 24px -10px rgba(0,75,59,.55),
             inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s, box-shadow .2s, background .2s;
  text-align:center;
  width:100%;
}
#atb-join-popup .atb-jp-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px -12px rgba(0,75,59,.6),
             inset 0 1px 0 rgba(255,255,255,.18);
}
#atb-join-popup .atb-jp-cta .opp-name{color:#fff;font-weight:600}
#atb-join-popup .atb-jp-cta .arr{transition:transform .15s;width:14px;height:14px;flex:0 0 auto}
#atb-join-popup .atb-jp-cta:hover .arr{transform:translateX(3px)}

/* ============== TRUST + NAME LINE ============== */
#atb-join-popup .atb-jp-trust{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:10px;color:#5f6d62;
  letter-spacing:0.14em;text-transform:uppercase;font-weight:500;
  margin-top:2px;
}
#atb-join-popup .atb-jp-trust .sep{opacity:.4}
#atb-join-popup .atb-jp-trust .ck{
  color:var(--teal,#2f8a52);display:inline-flex;align-items:center;gap:5px;font-weight:500;
}
#atb-join-popup .atb-jp-trust .ck::before{
  content:"";width:5px;height:5px;border-radius:50%;background:#50c878;
}
#atb-join-popup .atb-jp-nameline{
  font-size:11.5px;color:#5f6d62;text-align:center;
  margin:0;line-height:1.5;
}

/* ============== SPONSOR ROW (step-1 attribution) ============== */
#atb-join-popup .atb-jp-sponsor-row{
  margin:0 0 8px;
  font-size:11.5px;line-height:1.45;
  color:#5f6d62;
}
#atb-join-popup .atb-jp-sponsor-display,
#atb-join-popup .atb-jp-sponsor-edit{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
}
#atb-join-popup .atb-jp-sponsor-row .hidden{display:none}
#atb-join-popup .atb-jp-sponsor-label{color:#5f6d62;font-weight:500}
#atb-join-popup .atb-jp-sponsor-name{color:var(--ink,#0b2419);font-weight:600}
#atb-join-popup .atb-jp-sponsor-linkbtn{
  display:inline-flex;width:auto;flex:0 0 auto;margin:0;
  background:transparent;border:0;padding:0;
  color:var(--teal,#2f8a52);font:inherit;font-size:11.5px;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
#atb-join-popup .atb-jp-sponsor-linkbtn:hover{color:var(--teal-deep,#1f6b3d)}
#atb-join-popup .atb-jp-sponsor-input{
  flex:1 1 90px;min-width:0;max-width:150px;height:28px;
  padding:0 8px;border:1px solid rgba(11,36,25,0.16);
  border-radius:6px;background:#fff;
  font:inherit;font-size:12px;color:var(--ink,#0b2419);
  -webkit-appearance:none;appearance:none;
  transition:border-color 160ms ease,box-shadow 160ms ease;
}
#atb-join-popup .atb-jp-sponsor-input:focus{
  outline:none;border-color:#50c878;
  box-shadow:0 0 0 2px rgba(80,200,120,0.18);
}
#atb-join-popup .atb-jp-sponsor-apply{
  display:inline-flex;width:auto;flex:0 0 auto;margin:0;
  align-items:center;justify-content:center;height:28px;box-sizing:border-box;
  background:transparent;border:1px solid rgba(11,36,25,0.12);
  color:var(--ink,#0b2419);font:inherit;font-size:11.5px;
  padding:0 9px;border-radius:6px;cursor:pointer;line-height:1;
  transition:background 160ms ease,border-color 160ms ease;
}
#atb-join-popup .atb-jp-sponsor-apply:hover{
  background:#f7f5ef;border-color:rgba(11,36,25,0.2);
}
#atb-join-popup .atb-jp-sponsor-apply:disabled{opacity:.6;cursor:default}
#atb-join-popup .atb-jp-sponsor-error{
  flex:1 1 60px;min-width:0;color:#8a2a1f;font-size:11px;margin:0;line-height:1.3;
}
#atb-join-popup .atb-jp-sponsor-row.is-busy .atb-jp-sponsor-input{opacity:.7}

/* ============== SKIP LINK ============== */
#atb-join-popup .atb-jp-skip{
  text-align:center;
  padding-top:14px;
  margin-top:auto;
  border-top:1px solid rgba(11,36,25,0.08);
}
#atb-join-popup .atb-jp-skip a{
  font-family:'Newsreader',serif;
  font-style:italic;
  font-size:13.5px;
  color:#5f6d62;
  letter-spacing:-0.005em;
  border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
}
#atb-join-popup .atb-jp-skip a:hover{
  color:#0b2419;
  border-bottom-color:rgba(11,36,25,0.16);
}

/* ============== MOBILE ============== */
@media (max-width:720px){
  #atb-join-popup .atb-jp-panel-right{
    padding:24px 22px 18px;
    gap:14px;
  }
  #atb-join-popup .atb-jp-h3{font-size:20px}
  #atb-join-popup .atb-jp-scrim{
    padding:14px;
    align-items:flex-start;
    padding-top:24px;
  }
  /* Smaller close button hit area on mobile */
  #atb-join-popup .atb-jp-close{top:10px;right:10px}
}

@media (max-width:420px){
  #atb-join-popup .atb-jp-h3{font-size:18px}
  #atb-join-popup .atb-jp-panel-right{padding:20px 18px 16px}
}

/* Tighter vertical rhythm on phones so the whole popup fits on one
   screen without scrolling (per Sheridan 2026-06-14). Uses the same
   720px mobile threshold as the block above so it covers all phones. */
@media (max-width:720px){
  #atb-join-popup .atb-jp-scrim{ padding:8px; padding-top:10px; align-items:flex-start; }
  #atb-join-popup .atb-jp-panel-right{ padding:18px 18px 14px; gap:9px; }
  #atb-join-popup .atb-jp-step{ gap:9px; }
  #atb-join-popup .atb-jp-opp-echo{ margin-bottom:0; }
  #atb-join-popup .atb-jp-benefits{ gap:7px; margin:0; }
  #atb-join-popup .atb-jp-form{ gap:8px; margin-top:0; }
  #atb-join-popup .atb-jp-field input{ padding:11px 12px 11px 0; }
  #atb-join-popup .atb-jp-cta{ padding:12px 16px; }
  #atb-join-popup .atb-jp-sponsor-row{ margin:0 0 2px; }
  #atb-join-popup .atb-jp-trust{ margin-top:0; }
  #atb-join-popup .atb-jp-nameline{ line-height:1.4; }
  #atb-join-popup .atb-jp-skip{ margin-top:2px; }
}