/* =========================================================
   WISHORA — SHARED WISH-PAGE BASE (Phase 3)
   css/wish-base.css — structure only. Each experience supplies its own
   look through custom properties and its own stylesheet:
     --bg --ink --soft --accent --accent-ink --card --card-ink --line --focus
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--ink);font-family:'Noto Sans Bengali','Inter',system-ui,sans-serif;line-height:1.7;overflow-x:hidden}
body[data-lang="en"]{font-family:'Inter','Noto Sans Bengali',system-ui,sans-serif}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}
h1,h2,h3,p{margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
.scene:focus,.scene h1:focus,.scene h2:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;background:#111;color:#fff;padding:12px 20px;z-index:1000;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
.noscript-note{margin:0;padding:12px 16px;background:#fff;color:#111;text-align:center}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;position:relative;z-index:5}
.topbar-back{text-decoration:none;font-weight:600;padding:10px 4px;min-height:44px;display:inline-flex;align-items:center}
.lang-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--card-ink);font-weight:600}
.lang-toggle [data-lang]{opacity:.55}
body[data-lang="bn"] .lang-toggle [data-lang="bn"],body[data-lang="en"] .lang-toggle [data-lang="en"]{opacity:1;text-decoration:underline;text-underline-offset:4px}

.progress{display:flex;justify-content:center;gap:8px;padding:0 16px 4px}
.progress i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.progress i.is-done{background:var(--accent)}
.progress i.is-current{background:var(--accent);box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}

main{position:relative}
.scene{display:none;min-height:calc(100svh - 120px);padding:20px 18px 40px;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;max-width:640px;margin:0 auto;position:relative;z-index:2}
.scene.is-active{display:flex;animation:sceneIn .7s ease both}
@keyframes sceneIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.eyebrow{font-size:.95rem;font-weight:600;color:var(--soft);letter-spacing:.02em}
.scene h1,.scene h2{font-size:clamp(1.65rem,6.5vw,2.4rem);line-height:1.3;overflow-wrap:anywhere}
.lead{color:var(--soft);max-width:34ch}
.bound{overflow-wrap:anywhere;word-break:break-word}
.user-text{white-space:pre-line;overflow-wrap:anywhere}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 26px;border-radius:999px;border:2px solid transparent;font-weight:700;text-decoration:none;max-width:100%;text-align:center}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.wish-links{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;font-size:.95rem}
.wish-links a{min-height:44px;display:inline-flex;align-items:center}

.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);background:#111;color:#fff;padding:12px 20px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:50;max-width:90vw;text-align:center}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* Preview inside the Creator: the real page, without site navigation. */
.is-embedded .topbar-back,.is-embedded .wish-links{display:none!important}
.is-embedded .scene{min-height:calc(100svh - 80px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}