/* The sign-in popup (src/lib/auth/popup.ts), drawn like the claim popup (/claim?find=1): the rules below are
   src/components/claim/claim.css's popup rules, copied with the cp-* classes (and --cp-* properties) renamed bpa-*
   and scoped under .bp-auth. claim.css is bundled only on the claim pages, but this popup opens on every page, and
   the category pages' own unscoped .cp-bar / .cp-head / .cp-rail / .cp-steps / .cp-foot rules
   (src/components/discovery/category.css) would leak into cp-* names. Self-contained colours, so it renders the same
   on every page. Loaded by /login (head) and by public/assets/auth.js before it opens the popup anywhere else.
   Two ways it is open:
     modal  auth.js calls showModal() on the fragment from GET /api/auth/popup (top layer, ::backdrop)
     shell  /login renders it with a plain `open` attribute and an <a> backdrop (works with no script) */
html:has(dialog.bp-auth:modal), html:has(dialog.bp-auth[open][data-mode="shell"]) { overflow: hidden; }
html:has(dialog.bp-auth[open]) .support-launcher { visibility: hidden; }
dialog.bp-auth::backdrop, .bp-auth-backdrop { background: rgba(4, 14, 40, 0.6); }
.bp-auth-backdrop { position: fixed; inset: 0; z-index: 1220; display: block; cursor: default; }
dialog.bp-auth {
  --bpa-vh: 100vh;
  --bpa-nominal: 600px;
  --bpa-top: max(24px, calc((var(--bpa-vh) - var(--bpa-nominal)) / 2));
  --bpa-fs-body: 15px;
  --bpa-fs-btn: 16px;
  --bpa-ctl: 46px;
  --bpa-ctl-sm: 40px;
  --bpa-r-card: 12px;
  --bpa-r-ctl: 8px;
  --bpa-fs-title: 22px;
  --bpa-gutter: 28px;
}
@supports (height: 100dvh) { dialog.bp-auth { --bpa-vh: 100dvh; } }
dialog.bp-auth[open] {
  position: fixed; z-index: 1221; top: var(--bpa-top); right: 0; bottom: auto; left: 0;
  display: flex; width: 840px; max-width: calc(100vw - 32px); height: auto;
  max-height: calc(var(--bpa-vh) - var(--bpa-top) - 24px);
  min-height: min(500px, calc(var(--bpa-vh) - var(--bpa-top) - 24px));
  margin: 0 auto; padding: 0; border: 0; overflow: hidden;
  background: #fff; color: #101828; border-radius: 14px;
  box-shadow: 0 24px 64px rgba(4, 14, 40, 0.34), 0 2px 6px rgba(4, 14, 40, 0.1);
  font-family: 'Public Sans', system-ui, sans-serif; line-height: 1.5; text-align: left;
}
.bp-auth *, .bp-auth *::before, .bp-auth *::after { box-sizing: border-box; }
.bp-auth :where(h2, p, ul, ol, li) { margin: 0; }
.bp-auth :focus-visible { outline: 3px solid #1652d9; outline-offset: 2px; }
.bp-auth .bpa-rail :focus-visible { outline-color: #5b9cff; }
.bp-auth form { margin: 0; }
.bp-auth .bpa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The rail */
.bp-auth .bpa-rail { flex: none; width: 250px; display: flex; flex-direction: column; gap: 22px; padding: 24px 22px 22px; background: #0a2463; overflow-y: auto; }
.bp-auth .bpa-rail-head { display: flex; flex-direction: column; gap: 5px; }
.bp-auth .bpa-rail-title { font: 800 19px/1.1 'Archivo', sans-serif; letter-spacing: -0.02em; color: #fff; }
.bp-auth .bpa-rail-sub { font: 500 14px/1.4 'Public Sans', sans-serif; color: #c7d6f5; }
.bp-auth .bpa-steps { display: flex; flex-direction: column; padding: 0; list-style: none; }
.bp-auth .bpa-step { display: flex; gap: 12px; }
.bp-auth .bpa-step-col { display: flex; flex-direction: column; align-items: center; }
.bp-auth .bpa-step-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); color: #c7d6f5; font: 800 12px/1 'Archivo', sans-serif; }
.bp-auth .bpa-step.is-current .bpa-step-n { border-color: #fff; background: #fff; color: #0a2463; }
.bp-auth .bpa-step.is-done .bpa-step-n { border-color: #5b9cff; background: #5b9cff; }
.bp-auth .bpa-step-n svg { width: 12px; height: 12px; fill: none; stroke: #0a2463; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.bp-auth .bpa-step-line { flex: 1; width: 2px; min-height: 16px; background: rgba(255, 255, 255, 0.25); }
.bp-auth .bpa-step-line.is-done { background: #5b9cff; }
.bp-auth .bpa-step-txt { display: flex; flex-direction: column; gap: 3px; padding: 5px 0 18px; }
.bp-auth .bpa-step-label { font: 600 14.5px/1.1 'Public Sans', sans-serif; color: #c7d6f5; }
.bp-auth .bpa-step.is-done .bpa-step-label { color: #fff; }
.bp-auth .bpa-step.is-current .bpa-step-label { font-weight: 800; color: #fff; }
.bp-auth .bpa-step-sub { font: 400 13px/1.35 'Public Sans', sans-serif; color: #c7d6f5; }
.bp-auth .bpa-rail-foot { margin-top: auto; font: 500 13px/1.5 'Public Sans', sans-serif; color: #c7d6f5; }
.bp-auth .bpa-rail-foot a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* The pane: bar (step label on narrow screens, Close), step segments, body */
.bp-auth .bpa-pane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.bp-auth .bpa-bar { display: flex; align-items: center; gap: 8px; padding: 10px 10px 0; }
.bp-auth .bpa-icon-btn { flex: none; display: grid; place-items: center; width: var(--bpa-ctl-sm); height: var(--bpa-ctl-sm); border-radius: var(--bpa-r-ctl); color: #101828; text-decoration: none; }
.bp-auth .bpa-icon-btn:hover { background: #eaf1fe; }
.bp-auth .bpa-icon-btn:active { background: #d6e4fd; }
.bp-auth .bpa-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: #101828; stroke-width: 2.6; stroke-linecap: round; }
.bp-auth .bpa-icon-gap { flex: none; width: var(--bpa-ctl-sm); }
.bp-auth .bpa-bar-label { flex: 1; text-align: center; font: 700 12px/1 'Public Sans', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #1652d9; visibility: hidden; }
.bp-auth .bpa-segs { display: none; gap: 5px; padding: 8px var(--bpa-gutter) 0; }
.bp-auth .bpa-segs span { flex: 1; height: 4px; border-radius: 99px; background: #eef2f7; }
.bp-auth .bpa-segs span.is-on { background: #1652d9; }
.bp-auth .bpa-body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 12px var(--bpa-gutter) 26px; }

.bp-auth .bpa-head { display: flex; flex-direction: column; gap: 4px; }
.bp-auth .bpa-h2 { font: 800 var(--bpa-fs-title)/1.15 'Archivo', sans-serif; letter-spacing: -0.02em; color: #0a2463; }
.bp-auth .bpa-h2:focus, .bp-auth .bpa-h2:focus-visible { outline: none; }
.bp-auth .bpa-sub { font: 400 var(--bpa-fs-body)/1.45 'Public Sans', sans-serif; color: #4a5568; }
.bp-auth .bpa-sub b { color: #101828; font-weight: 700; overflow-wrap: anywhere; }
.bp-auth .bpa-form { display: flex; flex-direction: column; gap: 12px; }
.bp-auth .bpa-label { display: flex; flex-direction: column; gap: 5px; }
.bp-auth .bpa-label > span { font: 700 14px/1.2 'Public Sans', sans-serif; color: #101828; }
.bp-auth .bpa-input { width: 100%; height: var(--bpa-ctl); margin: 0; padding: 0 12px; border: 1.5px solid #9db0cf; border-radius: var(--bpa-r-ctl); background: #fff; font: 500 16px/1 'Public Sans', sans-serif; color: #101828; outline: 0; box-shadow: none; }
.bp-auth .bpa-input::placeholder { color: #6b7686; opacity: 1; }
.bp-auth .bpa-input:focus { border-color: #1652d9; box-shadow: 0 0 0 3px rgba(22, 82, 217, 0.18); }
.bp-auth .bpa-input[aria-invalid="true"] { border-color: #b42318; }
.bp-auth .bpa-err { margin-top: -6px; font: 700 13.5px/1.3 'Public Sans', sans-serif; color: #b42318; }

.bp-auth .bpa-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: var(--bpa-ctl); margin: 0; padding: 0 16px; border: 0; border-radius: var(--bpa-r-ctl); background: #5b9cff; color: #0a2463; font: 800 var(--bpa-fs-btn)/1 'Archivo', sans-serif; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 rgba(10, 36, 99, 0.28); }
.bp-auth .bpa-btn:hover { background: #7db1ff; color: #0a2463; text-decoration: none; }
.bp-auth .bpa-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(10, 36, 99, 0.28); }
.bp-auth .bpa-btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #0a2463; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bp-auth .bpa-btn-navy { background: #1652d9; color: #fff; box-shadow: none; }
.bp-auth .bpa-btn-navy:hover { background: #0f3fae; color: #fff; }
.bp-auth .bpa-btn-navy:active { transform: none; box-shadow: none; background: #0b318a; }
.bp-auth .bpa-link { align-self: center; display: inline-flex; align-items: center; min-height: 36px; margin: 0; padding: 0 12px; border: 0; background: transparent; font: 600 14.5px/1 'Public Sans', sans-serif; color: #1652d9; text-align: center; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bp-auth .bpa-link:hover { color: #0f3fae; }
.bp-auth .bpa-row-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 20px; }
.bp-auth .bpa-row-links form { display: flex; }
.bp-auth .bpa-resend { min-height: 36px; margin: 0; padding: 0; border: 0; background: transparent; font: 600 14.5px/1 'Public Sans', sans-serif; color: #4a5568; cursor: pointer; }
.bp-auth .bpa-resend span { color: #1652d9; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bp-auth .bpa-dev { align-self: stretch; padding: 9px 12px; border: 1px dashed #1652d9; border-radius: 6px; background: #f5f8ff; font: 600 12.5px/1.45 ui-monospace, Menlo, monospace; color: #0f3fae; text-align: center; overflow-wrap: anywhere; }
.bp-auth .bpa-small { font: 400 14px/1.5 'Public Sans', sans-serif; color: #4a5568; text-align: center; }
.bp-auth .bpa-small a { color: #1652d9; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bp-auth .bpa-small code { font-size: 12.5px; }
.bp-auth .bpa-terms { font: 400 13px/1.5 'Public Sans', sans-serif; color: #4a5568; text-align: center; }
.bp-auth .bpa-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; padding-top: 2px; color: #6b7a90; }
.bp-auth .bpa-foot svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Ticks and notes: green = good news, amber = wait a moment, red = something went wrong */
.bp-auth .bpa-perks { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; list-style: none; }
.bp-auth .bpa-perk { display: flex; align-items: center; gap: 7px; font: 600 14px/1.2 'Public Sans', sans-serif; color: #101828; }
.bp-auth .bpa-tick { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #5b9cff; }
.bp-auth .bpa-tick svg { width: 11px; height: 11px; fill: none; stroke: #0a2463; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.bp-auth .bpa-note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--bpa-r-ctl); background: #e7f5ec; font: 500 14px/1.45 'Public Sans', sans-serif; color: #101828; }
.bp-auth .bpa-note > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.bp-auth .bpa-note-ic { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #127a3e; }
.bp-auth .bpa-note-ic svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.bp-auth .bpa-note-amber { align-items: flex-start; background: #fef3c7; }
.bp-auth .bpa-note-amber .bpa-note-ic { background: #92400e; }
.bp-auth .bpa-note-amber .bpa-note-ic svg { stroke: #fef3c7; stroke-width: 2.8; stroke-linejoin: miter; }
.bp-auth .bpa-note-red { align-items: flex-start; background: #fdecea; color: #7a1a14; }
.bp-auth .bpa-note-red .bpa-note-ic { background: #b42318; }
.bp-auth .bpa-note-red .bpa-note-ic svg { stroke: #fff; stroke-width: 3; }

/* "Check your inbox" */
.bp-auth .bpa-center { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.bp-auth .bpa-center-pad { padding-top: 4px; }
.bp-auth .bpa-center .bpa-h2 { margin: 2px 0 0; }
.bp-auth .bpa-center .bpa-sub { max-width: 410px; line-height: 1.5; text-wrap: pretty; }
.bp-auth .bpa-big-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #eaf1fe; }
.bp-auth .bpa-big-ic svg { width: 28px; height: 28px; fill: none; stroke: #1652d9; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
  dialog.bp-auth[open] { animation: bp-auth-in 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
  .bp-auth .bpa-body { animation: bp-auth-step-in 0.2s ease both; }
}
@keyframes bp-auth-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes bp-auth-step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 940px) {
  dialog.bp-auth[open] { width: 520px; max-width: calc(100vw - 24px); min-height: 0; }
  .bp-auth .bpa-rail { display: none; }
  .bp-auth .bpa-bar-label { visibility: visible; }
  .bp-auth .bpa-segs { display: flex; }
}
@media (pointer: coarse), (max-width: 760px) {
  dialog.bp-auth { --bpa-ctl: 48px; --bpa-ctl-sm: 44px; }
  .bp-auth .bpa-link, .bp-auth .bpa-resend { min-height: 44px; }
}
@media (max-width: 640px) {
  dialog.bp-auth { --bpa-top: 12px; --bpa-gutter: 16px; }
  dialog.bp-auth[open] { max-height: calc(var(--bpa-vh) - 24px); border-radius: var(--bpa-r-card); }
  .bp-auth .bpa-bar { padding: 6px 6px 0; }
  .bp-auth .bpa-segs { padding-top: 6px; }
  .bp-auth .bpa-body { padding: 14px var(--bpa-gutter) calc(20px + env(safe-area-inset-bottom)); }
  .bp-auth .bpa-h2 { font-size: 21px; }
}