/*
 * in-app-guide.css — the "open in your browser to sign in" guide (`in-app-guide.js`), on the landing
 * and invitation pages. Purple is the one primary button and nothing else.
 */
.iab {
  /* Above the cookie banner (9999): on a phone it would cover "Continue in … anyway". */
  position: fixed; inset: 0; z-index: 10000;
  display: flex;
  font-family: var(--font-sans);
}
.iab__close {
  position: absolute; top: 12px;
  width: 44px; height: 44px; padding: 10px;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit;
  cursor: pointer;
}
.iab__close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.iab__close:focus-visible, .iab__continue:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.iab__title { margin: 0; font-weight: 700; }
.iab__body { margin: 0; }

/* ── No link works (WeChat, X): the whole screen, pointing at the app's own menu ───────────── */
.iab--guide { background: rgb(10 10 10 / 0.95); color: #FFFFFF; }
.iab__guide {
  position: relative; box-sizing: border-box; width: 100%; max-width: 480px; margin: 0 auto;
  padding: 112px 28px 32px;
  display: flex; flex-direction: column; gap: 28px; overflow-y: auto;
}
.iab__guide .iab__close { left: 12px; }
.iab__arrow {
  position: absolute; top: 4px; right: 12px; width: 120px; height: 104px;
  fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.iab__arrow path:first-child { stroke-dasharray: 2 8; }
.iab__guide .iab__title { font-size: 26px; line-height: 33px; }
.iab__steps { margin: 0; padding: 0; list-style: none; counter-reset: iab-step; display: flex; flex-direction: column; gap: 18px; }
.iab__step { display: flex; align-items: center; gap: 14px; font-size: 17px; line-height: 24px; counter-increment: iab-step; }
.iab__step::before {
  content: counter(iab-step);
  flex: 0 0 32px; height: 32px; border-radius: var(--radius-pill);
  background: #FFFFFF; color: #0A0A0A; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.iab__step-text { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.iab__chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
  border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.18); font-weight: 600;
}
.iab__guide .iab__body { font-size: 15px; line-height: 22px; color: #D4D4D4; }
.iab__guide .iab__continue { margin-top: auto; align-self: center; padding: 12px; font-size: 14px; color: #D4D4D4; }

/* ── A link works (LinkedIn, Instagram, Facebook): one button in a sheet ───────────────────── */
.iab--sheet { background: rgb(10 10 10 / 0.5); align-items: flex-end; }
.iab__sheet {
  position: relative; box-sizing: border-box; width: 100%; max-width: 480px; margin: 0 auto;
  padding: 24px 20px 28px; border-radius: 16px 16px 0 0;
  background: var(--card); color: var(--foreground);
  display: flex; flex-direction: column; gap: 14px;
}
.iab__sheet .iab__close { top: 8px; right: 8px; color: var(--muted-foreground); }
.iab__sheet .iab__title { font-size: 22px; line-height: 28px; padding-right: 40px; }
.iab__sheet .iab__body { font-size: 15px; line-height: 22px; color: var(--muted-foreground); }
.iab__open { width: 100%; height: 48px; font-size: 16px; }
.iab__hint { margin: 0; font-size: 13px; line-height: 19px; color: var(--muted-foreground); }
.iab__sheet .iab__continue { align-self: center; padding: 8px; font-size: 14px; color: var(--muted-foreground); }

.iab__continue { text-decoration: underline; text-underline-offset: 3px; }