/* Research Basics (/research): a guided journey. Everything is prefixed rs- so it cannot touch other pages.
   Look: warm paper, a colour for every stop, chunky icon tiles, soft cards. Bangla is set in Kalpurush (see mcq.css for the licence). */
@font-face { font-family: 'Kalpurush'; src: url('/assets/fonts/Kalpurush.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
.rs { --rs-ink: #0b1b3f; --rs-text: #1f2c47; --rs-muted: #566480; --rs-line: #e7dfd0; --rs-paper: #fffaf1; --rs-card: #ffffff; --rs-brand: #1747ca; --rs-good: #12a77a; --rs-bad: #d6453a;
  background: radial-gradient(circle at 1px 1px, rgba(120, 90, 30, .09) 1.2px, transparent 1.4px) 0 0 / 26px 26px, var(--rs-paper); color: var(--rs-text); }
.rs-bn, .rs-bn button, .rs-bn input { font-family: 'Kalpurush', 'Noto Sans Bengali', 'Hind Siliguri', 'Nirmala UI', 'Vrinda', system-ui, sans-serif; }
.rs-bn .rs-body, .rs-bn .rs-card p, .rs-bn .rs-step p, .rs-bn .rs-opt, .rs-bn .rs-callout { -webkit-text-stroke: .25px currentColor; line-height: 1.75; }
.rs-ico { flex: none; display: inline-block; vertical-align: -0.2em; }

/* ------------------------------------------------------------------ header */
.rs-hero { padding: 34px 0 6px; }
.rs-hero-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.rs-hero-copy { max-width: 64ch; }
.rs-kicker { margin: 0 0 8px; font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #b3541e; }
.rs-bn .rs-kicker { letter-spacing: 0; text-transform: none; font-size: 1rem; }
.rs-hero h1 { margin: 0 0 10px; font-size: clamp(1.9rem, 4.4vw, 2.9rem); color: var(--rs-ink); }
.rs-lede { margin: 0; color: var(--rs-muted); font-size: 1.08rem; line-height: 1.6; }
.rs-lang { display: inline-flex; border: 1.5px solid var(--rs-line); border-radius: 999px; padding: 3px; background: #fff; }
.rs-lang button { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font: inherit; font-size: .95rem; font-weight: 700; color: var(--rs-ink); cursor: pointer; }
.rs-lang button[aria-pressed="true"] { background: var(--rs-ink); color: #fff; }
.rs-lang button:focus-visible, .rs-btn:focus-visible, .rs-opt:focus-visible, .rs-stop-btn:focus-visible { outline: 3px solid var(--rs-brand); outline-offset: 2px; }

/* the seven coloured stops: one glance shows how far along you are */
.rs-rainbow { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0; margin: 26px 0 8px; padding: 0; max-width: 640px; position: relative; }
.rs-rainbow::before { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; height: 4px; transform: translateY(-50%); background: var(--rs-line); border-radius: 4px; }
.rs-rainbow li { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3px solid var(--rs-line); color: #b9b2a3; transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; }
.rs-rainbow li.open { border-color: var(--c); color: var(--c); }
.rs-rainbow li.done { background: var(--c); border-color: var(--c); color: #fff; }
.rs-rainbow li.now { transform: scale(1.18); box-shadow: 0 0 0 6px var(--ct); }
.rs-rainbow svg { width: 17px; height: 17px; }

.rs-stage { padding: 14px 0 20px; }
.rs-foot { margin: 14px 0 0; text-align: center; color: var(--rs-muted); font-size: .88rem; }

/* ------------------------------------------------------------------ shared pieces */
.rs-screen { max-width: 820px; margin: 0 auto; animation: rs-in .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rs-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 2px solid var(--rs-line); border-radius: 14px; background: #fff; color: var(--rs-ink); font: inherit; font-weight: 750; font-size: 1rem; cursor: pointer; text-decoration: none; transition: transform .14s ease, box-shadow .2s ease, border-color .15s ease, background .15s ease; }
.rs-btn:hover:not(:disabled) { border-color: var(--rs-ink); transform: translateY(-1px); }
.rs-btn:active:not(:disabled) { transform: scale(.97); }
.rs-btn:disabled { opacity: .45; cursor: not-allowed; }
.rs-btn.primary { background: var(--c, var(--rs-ink)); border-color: var(--c, var(--rs-ink)); color: #fff; box-shadow: 0 10px 24px var(--cs, rgba(11, 27, 63, .25)); }
.rs-btn.primary:hover:not(:disabled) { border-color: var(--c, var(--rs-ink)); filter: brightness(1.06); }
.rs-btn.ghost { background: transparent; }
.rs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--ct, #f1ece0); color: var(--cd, var(--rs-ink)); font-size: .8rem; font-weight: 800; }
.rs-chip.plain { background: #f1ece0; color: var(--rs-muted); }

/* ------------------------------------------------------------------ the journey map */
.rs-resume { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; border-radius: 24px; background: #fff; border: 2px solid var(--rs-line); border-left: 8px solid var(--c); box-shadow: 0 14px 34px rgba(80, 60, 20, .09); margin-bottom: 26px; }
.rs-ring { position: relative; flex: none; width: 74px; height: 74px; }
.rs-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rs-ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.rs-ring .bg { stroke: var(--rs-line); }
.rs-ring .fg { stroke: var(--c); transition: stroke-dasharray .8s ease; }
.rs-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.15rem; color: var(--rs-ink); }
.rs-resume-body { flex: 1; min-width: 220px; }
.rs-resume-body small { display: block; color: var(--rs-muted); font-weight: 700; font-size: .82rem; margin-bottom: 2px; }
.rs-resume-body h2 { margin: 0 0 2px; font-size: 1.2rem; color: var(--rs-ink); }
.rs-resume-body p { margin: 0; color: var(--rs-muted); }

.rs-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; position: relative; }
.rs-path::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 4px; background: repeating-linear-gradient(to bottom, var(--rs-line) 0 10px, transparent 10px 18px); border-radius: 4px; }
.rs-stop { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; animation: rs-in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.rs-node { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--c); color: #fff; box-shadow: 0 10px 22px var(--cs); transition: transform .2s ease; }
.rs-node svg { width: 26px; height: 26px; }
.rs-stop.is-locked .rs-node { background: #e9e3d6; color: #a79f8c; box-shadow: none; }
.rs-stop.is-done .rs-node::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--rs-good) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 14px no-repeat; border: 2px solid var(--rs-paper); }
.rs-stop.is-current .rs-node { animation: rs-pulse 2.2s ease-in-out infinite; }
@keyframes rs-pulse { 0%, 100% { box-shadow: 0 10px 22px var(--cs), 0 0 0 0 var(--ct); } 50% { box-shadow: 0 10px 22px var(--cs), 0 0 0 10px transparent; } }
.rs-stop-card { padding: 18px 20px; border-radius: 22px; background: #fff; border: 2px solid var(--rs-line); box-shadow: 0 8px 22px rgba(80, 60, 20, .06); transition: transform .18s ease, box-shadow .2s ease, border-color .18s ease; }
.rs-stop:not(.is-locked) .rs-stop-card:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 16px 34px rgba(80, 60, 20, .12); }
.rs-stop.is-locked .rs-stop-card { background: rgba(255, 255, 255, .6); box-shadow: none; }
.rs-stop-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rs-stop h3 { margin: 0 0 4px; font-size: 1.15rem; line-height: 1.3; color: var(--rs-ink); }
.rs-stop.is-locked h3 { color: var(--rs-muted); }
.rs-stop p { margin: 0 0 12px; color: var(--rs-muted); line-height: 1.5; }
.rs-stop-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rs-stop-btn { min-height: 42px; padding: 0 18px; font-size: .95rem; }
.rs-lock-note { display: inline-flex; align-items: center; gap: 6px; color: #8b8372; font-size: .86rem; font-weight: 650; }
.rs-score { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--rs-good); font-size: .9rem; }

/* ------------------------------------------------------------------ a lesson */
.rs-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rs-back { min-height: 42px; padding: 0 16px; font-size: .93rem; }
.rs-lesson { background: #fff; border: 2px solid var(--rs-line); border-radius: 28px; overflow: hidden; box-shadow: 0 18px 44px rgba(80, 60, 20, .1); }
.rs-banner { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 24px; color: #fff; background: radial-gradient(70% 160% at 100% 0, rgba(255, 255, 255, .28), transparent 60%), linear-gradient(135deg, var(--c), var(--cd)); overflow: hidden; }
.rs-banner::after { content: ""; position: absolute; right: -30px; bottom: -46px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.rs-banner-ico { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; background: rgba(255, 255, 255, .22); }
.rs-banner-ico svg { width: 32px; height: 32px; }
.rs-banner small { display: block; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .9; font-size: .75rem; }
.rs-bn .rs-banner small { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.rs-banner h2 { margin: 2px 0 0; font-size: clamp(1.15rem, 2.8vw, 1.5rem); line-height: 1.25; color: #fff; }
.rs-segs { display: flex; gap: 6px; padding: 14px 24px 0; }
.rs-segs i { flex: 1; height: 7px; border-radius: 99px; background: var(--rs-line); overflow: hidden; position: relative; }
.rs-segs i::after { content: ""; position: absolute; inset: 0; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.rs-segs i.on::after { transform: scaleX(1); }
.rs-segs i.quiz { background: repeating-linear-gradient(45deg, var(--rs-line) 0 6px, #f3ede1 6px 12px); }
.rs-body { padding: 18px 24px 8px; }
.rs-body > h3 { margin: 6px 0 4px; font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.25; color: var(--rs-ink); }
.rs-body > .rs-lead { margin: 0 0 18px; color: var(--rs-muted); font-size: 1.04rem; line-height: 1.6; }

.rs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rs-card { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 16px; border-radius: 20px; background: var(--ct); border: 2px solid transparent; animation: rs-in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); transition: transform .18s ease, border-color .18s ease; }
.rs-card:hover { transform: translateY(-3px); border-color: var(--c); }
.rs-card-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--c); color: #fff; box-shadow: 0 8px 18px var(--cs); }
.rs-card-ico svg { width: 26px; height: 26px; }
.rs-card h4 { margin: 2px 0 4px; font-size: 1.04rem; line-height: 1.3; color: var(--rs-ink); }
.rs-card p { margin: 0; color: var(--rs-text); line-height: 1.55; font-size: .95rem; }
@media (max-width: 680px) { .rs-cards { grid-template-columns: 1fr; } .rs-body { padding: 16px 16px 6px; } .rs-banner { padding: 18px 16px; } .rs-segs { padding: 14px 16px 0; } }

.rs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.rs-step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 0 0 18px; animation: rs-in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 80ms); }
.rs-step:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 3px; background: var(--ct); border-radius: 3px; }
.rs-step-num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 850; font-size: 1.15rem; box-shadow: 0 8px 18px var(--cs); }
.rs-step-body { padding: 12px 16px; border-radius: 18px; background: var(--ct); }
.rs-step-body h4 { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; font-size: 1.05rem; color: var(--rs-ink); }
.rs-step-body h4 svg { color: var(--cd); width: 20px; height: 20px; }
.rs-step-body p { margin: 0; line-height: 1.55; font-size: .95rem; }

.rs-dd { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rs-col { padding: 16px; border-radius: 22px; display: grid; gap: 10px; align-content: start; }
.rs-col.no { background: #fdeaf0; }
.rs-col.yes { background: #e4f6ee; }
.rs-col h4 { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.rs-col.no h4 { color: #a31d4f; } .rs-col.yes h4 { color: #0a6b43; }
.rs-col li { list-style: none; display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; line-height: 1.5; font-size: .95rem; animation: rs-in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.rs-col ul { margin: 0; padding: 0; display: grid; gap: 10px; }
.rs-col.no li svg { color: var(--rs-bad); } .rs-col.yes li svg { color: var(--rs-good); }
@media (max-width: 680px) { .rs-dd { grid-template-columns: 1fr; } }

.rs-callout { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; margin: 18px 0 8px; padding: 16px 18px; border-radius: 20px; line-height: 1.6; }
.rs-callout b { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.rs-bn .rs-callout b { letter-spacing: 0; text-transform: none; font-size: .95rem; }
.rs-callout .ci { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; }
.rs-callout.tip { background: #fff3d6; color: #5e3b00; } .rs-callout.tip .ci { background: #f2a73b; color: #fff; }
.rs-callout.warn { background: #fde4ec; color: #7a1239; } .rs-callout.warn .ci { background: #e0457b; color: #fff; }
.rs-callout.quote { background: #eef1ff; color: #243073; font-style: italic; } .rs-callout.quote .ci { background: #5a6bf0; color: #fff; }
.rs-callout.key { background: linear-gradient(135deg, var(--c), var(--cd)); color: #fff; box-shadow: 0 14px 30px var(--cs); } .rs-callout.key .ci { background: rgba(255, 255, 255, .24); color: #fff; }
.rs-callout.key b { opacity: .9; }

.rs-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px 22px; }
.rs-nav .count { color: var(--rs-muted); font-weight: 700; font-size: .92rem; }
@media (max-width: 680px) { .rs-nav { padding: 14px 16px 18px; } }

/* ------------------------------------------------------------------ the quiz */
.rs-quiz { background: #fff; border: 2px solid var(--rs-line); border-radius: 28px; overflow: hidden; box-shadow: 0 18px 44px rgba(80, 60, 20, .1); }
.rs-quiz-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 24px 0; }
.rs-dots { display: flex; gap: 8px; }
.rs-dots i { width: 28px; height: 8px; border-radius: 99px; background: var(--rs-line); transition: background .25s ease; }
.rs-dots i.now { background: var(--c); opacity: .55; } .rs-dots i.ok { background: var(--rs-good); } .rs-dots i.no { background: var(--rs-bad); }
.rs-qbody { padding: 16px 24px 8px; }
.rs-qbody h3 { margin: 0 0 16px; font-size: clamp(1.15rem, 2.8vw, 1.5rem); line-height: 1.35; color: var(--rs-ink); }
.rs-opts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rs-opt { display: grid; grid-template-columns: 34px 1fr 24px; gap: 12px; align-items: center; width: 100%; padding: 13px 14px; border: 2px solid var(--rs-line); border-radius: 16px; background: #fff; font: inherit; font-size: 1.02rem; line-height: 1.45; color: var(--rs-ink); text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .14s ease; }
.rs-opt .l { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ct); color: var(--cd); font-weight: 850; font-size: .9rem; }
.rs-opt:hover:not(:disabled) { border-color: var(--c); transform: translateX(2px); }
.rs-opt:active:not(:disabled) { transform: scale(.985); }
.rs-opt:disabled { cursor: default; }
.rs-opt.right { border-color: var(--rs-good); background: #e9f9f2; animation: rs-pop .4s ease; }
.rs-opt.right .l { background: var(--rs-good); color: #fff; }
.rs-opt.wrong { border-color: var(--rs-bad); background: #fdeeed; animation: rs-shake .35s ease; }
.rs-opt.wrong .l { background: var(--rs-bad); color: #fff; }
.rs-opt .mk { display: grid; place-items: center; }
.rs-opt.right .mk { color: var(--rs-good); } .rs-opt.wrong .mk { color: var(--rs-bad); }
@keyframes rs-pop { 0% { transform: scale(.985); } 55% { transform: scale(1.015); } 100% { transform: scale(1); } }
@keyframes rs-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.rs-why { margin: 16px 0 6px; padding: 14px 16px; border-radius: 16px; line-height: 1.6; border-left: 5px solid var(--c); background: var(--ct); animation: rs-in .3s ease both; }
.rs-why.ok { border-left-color: var(--rs-good); background: #e9f9f2; } .rs-why.no { border-left-color: var(--rs-bad); background: #fdeeed; }
.rs-why strong { display: block; margin-bottom: 2px; }

.rs-result { text-align: center; padding: 28px 24px 26px; }
.rs-result-ico { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 14px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 16px 34px var(--cs); }
.rs-result-ico svg { width: 46px; height: 46px; }
.rs-result.fail .rs-result-ico { background: #e9e3d6; color: #8b8372; box-shadow: none; }
.rs-result h3 { margin: 0 0 6px; font-size: 1.7rem; color: var(--rs-ink); }
.rs-result p { margin: 0 auto 6px; max-width: 46ch; color: var(--rs-muted); line-height: 1.6; }
.rs-stars { display: flex; justify-content: center; gap: 6px; margin: 12px 0 18px; color: #f2a73b; }
.rs-stars svg { width: 30px; height: 30px; fill: currentColor; } .rs-stars .off { color: #e1d9c6; }
.rs-result-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }

/* ------------------------------------------------------------------ the finish */
.rs-finish { text-align: center; padding: 34px 24px; border-radius: 30px; color: #fff; background: radial-gradient(60% 140% at 100% 0, rgba(255, 255, 255, .26), transparent 60%), linear-gradient(135deg, #0e9fa2, #7b5cf0 55%, #e0457b); box-shadow: 0 24px 56px rgba(90, 60, 160, .3); margin-bottom: 22px; }
.rs-finish .rs-result-ico { background: rgba(255, 255, 255, .22); box-shadow: none; }
.rs-finish h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 3.6vw, 2.2rem); color: #fff; }
.rs-finish p { margin: 0 auto; max-width: 52ch; line-height: 1.65; color: #fdf5ff; }
.rs-finish .row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.rs-finish .row i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: rgba(255, 255, 255, .22); }
.rs-finish .rs-result-actions .rs-btn { border-color: transparent; }
.rs-btn.white { background: #fff; color: var(--rs-ink); border-color: #fff; }
.rs-reset { display: block; margin: 18px auto 0; border: 0; background: none; color: var(--rs-muted); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; }
.rs-confetti { position: fixed; inset: 0; z-index: 9500; width: 100%; height: 100%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .rs-screen, .rs-stop, .rs-card, .rs-step, .rs-col li, .rs-why, .rs-opt.right, .rs-opt.wrong, .rs-stop.is-current .rs-node { animation: none; } .rs-segs i::after, .rs-ring .fg, .rs-rainbow li { transition: none; } }

/* small things that must not wrap or stretch */
.rs-chip, .rs-nav .count, .rs-lock-note, .rs-score { white-space: nowrap; }
.rs-card-ico, .rs-step-num, .rs-node, .rs-callout .ci, .rs-banner-ico { align-self: start; }
/* inside a lesson or a quiz the big header shrinks, so the lesson is nearer the top of a phone screen */
.rs-compact .rs-hero { padding-top: 16px; }
.rs-compact .rs-kicker, .rs-compact .rs-lede { display: none; }
.rs-compact .rs-hero h1 { font-size: clamp(1.15rem, 3vw, 1.5rem); margin: 0; }
.rs-compact .rs-rainbow { margin-top: 14px; }
@media (max-width: 520px) { .rs-rainbow li { width: 30px; height: 30px; } .rs-lang button { padding: 7px 12px; } }

/* Kalpurush sits smaller on the line than the English font, so Bangla body text is set a little larger */
.rs-bn .rs-card p, .rs-bn .rs-step-body p, .rs-bn .rs-lead, .rs-bn .rs-opt, .rs-bn .rs-callout, .rs-bn .rs-why, .rs-bn .rs-col li, .rs-bn .rs-stop p, .rs-bn .rs-result p, .rs-bn .rs-resume-body p { font-size: 1.08em; }
.rs-bn .rs-card h4, .rs-bn .rs-step-body h4, .rs-bn .rs-stop h3, .rs-bn .rs-col h4 { font-size: 1.12em; }

/* ------------------------------------------------------------------ finish: the retake list below 80%, the certificate at 80% or more */
.rs-retake { list-style: none; margin: 20px auto 6px; padding: 0; display: grid; gap: 10px; max-width: 580px; text-align: left; }
.rs-retake li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; border-radius: 18px; color: var(--rs-text); box-shadow: 0 10px 22px rgba(11, 27, 63, .14); }
.rs-node.sm { flex: none; width: 40px; height: 40px; border-radius: 13px; box-shadow: 0 6px 14px var(--cs); }
.rs-node.sm svg { width: 19px; height: 19px; }
.rs-retake-body { flex: 1; min-width: 0; }
.rs-retake-body strong { display: block; color: var(--rs-ink); font-size: .95rem; line-height: 1.3; }
.rs-retake-body small { color: var(--rs-muted); font-weight: 700; font-size: .8rem; }
.rs-retake .rs-btn { min-height: 40px; padding: 0 14px; font-size: .86rem; border-radius: 12px; white-space: nowrap; }
.rs-retake-ok { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(18, 167, 122, .14); color: var(--rs-good); }
.rs-closer .rs-result-actions .rs-btn { border-color: transparent; }

.rs-certscreen { max-width: 940px; }
.rs-certhead { padding: 26px 22px; }
.rs-certhead .row { margin: 14px 0 0; }
.rs-acct { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding: 16px 18px; margin: 0 0 18px; border-radius: 22px; background: #fff; border: 2px solid var(--rs-line); }
.rs-acct.ok { border-color: #bfe6d6; background: #f2fbf7; }
.rs-acct.guest { border-color: #ead9ae; background: #fffaf0; }
.rs-acct.warn { border-color: #f1d4a8; background: #fff7ea; }
.rs-acct-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--rs-ink); color: #fff; }
.rs-acct.ok .rs-acct-ico { background: var(--rs-good); }
.rs-acct.warn .rs-acct-ico { background: #d98a16; }
.rs-acct-body { flex: 1; min-width: 220px; }
.rs-acct-body strong { color: var(--rs-ink); font-size: 1.05rem; }
.rs-acct-body p { margin: 4px 0 0; color: var(--rs-muted); line-height: 1.6; font-size: .95rem; }
.rs-acct-id code { font-weight: 800; letter-spacing: 1px; color: var(--rs-ink); background: #fff; border: 1px solid var(--rs-line); border-radius: 8px; padding: 2px 8px; font-size: .9rem; }
.rs-acct-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rs-acct-links .rs-btn { min-height: 42px; padding: 0 16px; font-size: .9rem; border-radius: 12px; }
.rs-acct.guest .rs-acct-links .rs-btn.primary { background: var(--rs-ink); border-color: var(--rs-ink); }
.rs-cert-card { background: #fff; border: 2px solid var(--rs-line); border-radius: 26px; padding: 18px; box-shadow: 0 14px 34px rgba(11, 27, 63, .08); margin-bottom: 18px; }
.rs-field { display: grid; gap: 6px; margin-bottom: 12px; }
.rs-field span { font-weight: 800; color: var(--rs-ink); font-size: .9rem; }
.rs-field input { min-height: 50px; padding: 0 14px; border: 2px solid var(--rs-line); border-radius: 14px; font: inherit; font-size: 1.05rem; color: var(--rs-ink); background: #fffdf8; }
.rs-field input:focus-visible { outline: 3px solid var(--rs-brand); outline-offset: 1px; }
.rs-field input:disabled { background: #f3efe4; color: #5b5340; }
.rs-field input[aria-invalid="true"] { border-color: var(--rs-bad); }
.rs-certlang { display: inline-flex; border: 1.5px solid var(--rs-line); border-radius: 999px; padding: 3px; margin-bottom: 14px; background: #fff; }
.rs-certlang button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font: inherit; font-size: .92rem; font-weight: 700; color: var(--rs-ink); cursor: pointer; }
.rs-certlang button[aria-pressed="true"] { background: var(--rs-ink); color: #fff; }
.rs-cert-view img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 16px 40px rgba(7, 25, 62, .22); background: #fff; }
.rs-cert-wait { text-align: center; color: var(--rs-muted); padding: 56px 0; margin: 0; }
.rs-cert-actions { margin-top: 16px; }
.rs-cert-share { text-align: center; margin: 4px 0 6px; }
.rs-cert-share h3 { margin: 0 0 10px; color: var(--rs-ink); font-size: 1.05rem; }
.rs-share-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rs-sbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; font: inherit; font-weight: 800; font-size: .92rem; color: #fff; background: var(--rs-ink); cursor: pointer; text-decoration: none; }
.rs-sbtn:hover { filter: brightness(1.08); }
.rs-sbtn.fb { background: #1877f2; }
.rs-sbtn.ms { background: linear-gradient(135deg, #00b2ff, #006aff 55%, #a334fa); }
.rs-sbtn.li { background: #0a66c2; }
.rs-cert-print { display: none; }
@media (max-width: 560px) { .rs-retake li { flex-wrap: wrap; } .rs-retake .rs-btn { width: 100%; } .rs-acct-links .rs-btn { flex: 1 1 140px; } }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body * { visibility: hidden !important; }
  .rs-cert-print { display: block !important; visibility: visible !important; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; object-fit: contain; background: #fff; }
}

/* The stops are drawn by the script: keep a screenful of room so the footer is not seen jumping from the top to the bottom. */
.rs-stage { min-height: 100vh; }

/* The seven circles of the progress strip are drawn by the script: their height is kept so the page below does not drop by 34 px when they appear. */
.rs-rainbow { min-height: 34px; }

/* The place the script fills keeps most of a screen of room, so the two small notes under it are not seen being pushed out of view. */
#rs-app { min-height: 85vh; }