/* Accounts: the login screen, links between screens, form messages and the age-check window.
   Loaded after app.css; the screens reuse .panel, .fields, .field, .su-avatar and .modal from there. */

/* ---------- Links between screens ("Already a member? Log in", "Back") ---------- */
.alt-link{display:block;margin:14px auto 0;min-height:36px;padding:6px 12px;background:none;border:0;border-radius:10px;cursor:pointer;
  color:var(--pink);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(243,195,217,.5)}
.alt-link:hover{color:#fff;text-decoration-color:#fff}
.hud-login{grid-column:1/-1;justify-self:end;min-height:32px;padding:4px 10px;margin-top:-4px;background:none;border:0;border-radius:10px;cursor:pointer;
  color:var(--muted);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(205,184,214,.45)}
.hud-login:hover{color:#fff}
:is(.alt-link,.hud-login,.check a):focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:640px){
  .hud-login{justify-self:center;margin-top:0}
}

/* ---------- Form messages ---------- */
.form-err{margin-top:16px;font-size:14px;font-weight:700;line-height:1.45;color:#ffb3c2}
.form-err:empty{display:none}
.p-foot{flex-wrap:wrap}
.p-foot .form-err{flex-basis:100%;margin-top:4px;text-align:center}

/* ---------- Busy buttons ----------
   A busy button is marked aria-disabled, so it keeps the keyboard focus (in Chromium the disabled attribute drops it). */
.btn-primary[aria-disabled="true"]{opacity:.4;cursor:default;transform:none}
.btn-primary[aria-disabled="true"]::after{display:none}
.btn-ghost[aria-disabled="true"]{opacity:.5;cursor:default}
.lead.notice{color:#fbe3ee;font-weight:700}
.check a{color:#fbe3ee;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(251,227,238,.6)}
.check a:hover{color:#fff}

/* ---------- Login ---------- */
.login-screen .su-avatar{font-size:38px}
.login-screen .su-avatar .ic{vertical-align:0}

/* ---------- Age-check window (provider frame) ---------- */
/* Tall content scrolls from the top on small screens instead of being cut off. */
.modal.scroll{place-items:start center;overflow-y:auto}
.modal.scroll .modal-card{margin:auto 0}
.modal.wide .modal-card{width:min(560px,100%)}
.age-frame{display:block;width:100%;height:min(56vh,600px);min-height:380px;margin-top:16px;border:1px solid #e3d6ec;border-radius:14px;background:#f7f2fa}
.modal-status{margin-top:12px;font-size:14px;font-weight:700;line-height:1.45;color:#7a2e5a}
.modal-status:empty{display:none}
.modal-card .btn-primary:disabled{opacity:.5}
@media (min-width:641px){
  .modal.wide .modal-actions{display:grid;grid-template-columns:1fr 1fr}
  .modal.wide .modal-actions .btn-primary{grid-column:1/-1}
  .modal.wide .modal-actions .btn-ghost:last-child:nth-child(2){grid-column:1/-1}   /* only Cancel left after the window opens */
}
@media (max-width:640px){
  .modal.scroll{padding:10px}
  .modal.scroll .modal-card{padding:20px 14px}
  .age-frame{height:70vh;min-height:420px}
}

/* Age screen: the privacy reassurance under the check button */
.age-private{display:flex;align-items:flex-start;justify-content:center;gap:8px;max-width:420px;margin:14px auto 0;font-size:13.5px;line-height:1.5;color:var(--muted);text-align:left}
.age-private .ic{flex:none;margin-top:3px;color:#9ff0c4;font-size:14px}
/* Refusal screen: how to ask a person to review the decision, and the check's reference */
.age-review{max-width:440px;margin:22px auto 0;font-size:14.5px;line-height:1.55;color:var(--muted);text-align:left;overflow-wrap:anywhere}
.age-review p+p{margin-top:10px}
.age-review a{color:#fbe3ee;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.age-review a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
.age-review code{font-size:13px;color:var(--ink);background:rgba(255,255,255,.07);padding:1px 6px;border-radius:6px}
/* Age screen: the bot check (Cloudflare Turnstile) above the check button. The widget is 65 px tall,
   300 px or wider (150 x 140 px compact on narrow phones); the box keeps its place while it loads. */
.age-bot{max-width:340px;margin:22px auto 0}
.age-bot-box{display:flex;justify-content:center;min-height:65px}
.age-bot-box.compact{min-height:140px}
.age-bot-box[hidden],.age-bot [data-bot-retry][hidden]{display:none}
.age-bot-msg{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.age-bot-msg:empty{display:none}
.age-bot [data-bot-retry]{margin-top:10px}
.age-bot+.btn-primary{margin-top:18px}
/* lets Turnstile's flexible size (300 px) fit at 360 px instead of the taller compact one */
@media (max-width:374px){.age-bot{margin-left:-8px;margin-right:-8px}}

/* long sections: keep Back and Continue in reach */
.quiz-screen .quiz-nav{position:fixed;bottom:0;left:0;right:0;transform:none;margin-inline:auto;z-index:20;padding:12px 18px max(16px,env(safe-area-inset-bottom));background:#1b183c}

/* ---------- Life quiz: one card at a time ---------- */
.qprog{position:relative;width:min(320px,42vw);height:8px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;justify-self:center}
.qprog i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:linear-gradient(90deg,#f5cf8e,#f3b6cf,#c7a6f2);box-shadow:0 0 12px rgba(243,182,207,.7)}
@media (max-width:640px){.qprog{grid-area:gems;width:100%}}
.ask-card{min-height:min(440px,60vh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.ask-q{font-family:'Nunito Sans',system-ui,sans-serif;font-weight:700;font-size:clamp(22px,3vw,30px);line-height:1.3;max-width:620px}
.pts-line{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.pts-chip{font-size:12.5px;font-weight:800;color:color-mix(in srgb,var(--c) 80%,#fff);padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,transparent)}
.ans-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;width:100%;max-width:460px;margin-top:6px}
.ans-btn{flex:1;min-width:140px;min-height:56px;padding:12px 22px;border-radius:999px;font-weight:800;font-size:18px;cursor:pointer;transition:transform .12s,box-shadow .2s}
.ans-btn:hover{transform:translateY(-2px)}
.ans-btn.yes{border:0;color:#3a1d45;background:linear-gradient(135deg,#ffe3ec 0%,#f3b6cf 45%,#d59ad6 100%);box-shadow:0 10px 30px rgba(230,150,200,.35)}
.ans-btn.no{border:1.5px solid rgba(243,195,217,.45);background:rgba(255,255,255,.05);color:var(--ink)}
/* the answer given: a gold ring and a check mark; keyboard focus: a white outline further out, so both can show at once */
.ans-btn[aria-pressed="true"]{outline:none;box-shadow:0 0 0 3px #1b1c46,0 0 0 6px #f5cf8e}
.ans-btn[aria-pressed="true"]::before{content:"\2713\00a0";content:"\2713\00a0" / ""}
.ans-btn:focus-visible{outline:3px solid #fff;outline-offset:8px}
.quiz-nav [data-next][hidden]{display:none}
/* a ladder: one card per step, the dots show how far up it the card is */
.ask-steps{display:flex;gap:8px;justify-content:center}
.ask-steps i{width:26px;height:6px;border-radius:999px;background:rgba(255,255,255,.45)}
.ask-steps i.done{background:linear-gradient(90deg,#f5cf8e,#f3b6cf)}
.ask-steps i.on{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7)}
.ask-kicker{margin-bottom:-8px;font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--muted)}
/* phones: Yes and Not yet side by side; short screens drop the card's minimum height. Both keep the answers above the sticky nav */
@media (max-width:640px){.ans-row{flex-wrap:nowrap}.ans-btn{min-width:0}}
@media (max-height:700px){.ask-card{min-height:0}}
/* the nav's fade takes no taps, only its buttons do */
.quiz-screen .quiz-nav{pointer-events:none}
.quiz-screen .quiz-nav>*{pointer-events:auto}
/* "Back to the card" on the age screen is a link styled like the login link */
a.alt-link{width:max-content;max-width:100%;text-align:center}
/* "Switch my public card off" on the age screen of a member who has not passed the check here */
.age-screen [data-card-off]{margin-top:16px}
/* ... and "Privacy and data" there, with withdrawing and deleting only (privacy.js, removeOnly) */
.age-priv{margin-top:26px;text-align:left}
.age-priv .sec-title{font-size:26px}

/* ---------- Privacy and data (profile, privacy.js) ---------- */
.priv{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,3vw,28px);border-radius:28px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.priv-status{font-size:16px;line-height:1.55;color:var(--ink);outline:none}
.priv-actions,.priv-buttons{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.priv-actions .btn-primary,.priv-buttons .btn-primary{margin-top:0}
.priv-msg{font-size:14px;font-weight:700;line-height:1.5;color:#9ff0c4}
.priv-msg:empty{display:none}
/* the box that says what an action does before it runs */
.priv-box{display:grid;gap:14px;padding:16px;border-radius:20px;background:rgba(20,12,40,.45);border:1px solid rgba(255,179,194,.45);text-align:left}
.priv-box h3{font-size:18px;font-weight:800;line-height:1.35;color:#fbe3ee;outline:none}
.priv-list{display:grid;gap:8px;padding-left:20px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.priv-text{font-size:14.5px;line-height:1.55;color:var(--ink)}
.priv-box .form-err{margin-top:0}
.btn-primary.priv-danger{background:linear-gradient(135deg,#ffd6dd 0%,#ff9db0 55%,#e98aa6 100%)}

/* ---------- One-time recovery codes ---------- */
.recovery-box{display:grid;gap:16px;padding:16px;border-radius:20px;background:rgba(20,12,40,.52);border:1px solid rgba(199,166,242,.45)}
.recovery-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.recovery-list li{padding:9px 8px;border-radius:10px;background:rgba(255,255,255,.07);text-align:center}
.recovery-list code{font:700 clamp(13px,3vw,16px)/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em;color:#fff}
.recovery-screen .lead+.recovery-box{margin-top:24px}
.recovery-actions{display:flex;flex-wrap:wrap;gap:10px}
.recovery-summary{display:grid;gap:8px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.recovery-summary h3{font-size:18px;color:#fbe3ee}
.recovery-summary p{font-size:14.5px;color:var(--ink)}
.recovery-summary .btn-ghost{justify-self:start}


/* ---------- The step right after sign-up: "Make your card public?" (same form as the profile) ---------- */
.publish-screen .ps-pub{margin-top:24px;padding:0;background:none;border:0;border-radius:0;text-align:left}