/* ==========================================================================
   Titles — one title font (Hind Siliguri + Anek Bangla digits) for every heading, a light "title card" behind each
   page title, and a two-colour title (petrol + copper, the two brand colours).
   Loaded last, so it only has to say what is different.
   ========================================================================== */
:root{
  --font-title:"TD","TP","TS","Hind Siliguri","Noto Sans Bengali","Nirmala UI",system-ui,sans-serif;
  --tc-a:#1A5876;            /* petrol */
  --tc-b:#A9651F;            /* copper */
  --tc-bg:#E3EEF6;           /* petrol tint */
  --tc-ink:#1F4A66;
  --tc-ink2:#3F5C73;
  --tc-line:#B9D0E2;
}

/* every title in the platform */
h1,h2,h3,h4,h5,
.t-display,.t-h1,.t-h2,.t-h3,
.prose h3,
.welcome-title,.brief-head h2,.brief-title,.why-pledge-copy h3,.brief-purpose h3,.brief-close-line,
.listen-title,.lex-core h2,.sheet-title,.threshold-line,.nb-title,
.content-h1,.res-title,.hub-title,.hub-section h2,.char-portrait-body h4,.vid-title,
.concept-head,.term-modal-t,.ovw-subtitle,.ovw-title,.ovw-aim-t,.asg-sum-h,
.lp-title,.lp-h2,.lp-mod-t,.vp-cover-t{
  font-family:var(--font-title);
  font-weight:600;
}
.lp-title-en{font-family:var(--font-title); letter-spacing:.14em}

/* two-tone */
.tt-a{color:var(--tc-a)}
.tt-b{color:var(--tc-b)}

/* the title card — copied from the UNFPA module v1 title card:
   tinted box with a thin border / small kicker / short accent bar / title / subtitle */
.title-card{
  display:block; position:relative;
  margin:0 0 var(--s3, 16px); padding:24px 30px 26px;
  background:var(--tc-bg); border:1px solid var(--tc-line); border-radius:var(--r-surface, 12px);
}
.tc-top{display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; margin:0}
.title-card .t-label.tc-kick, .title-card > .t-label, .title-card > .content-kicker{
  margin:0; font-size:.84rem; line-height:1.6; font-weight:600; letter-spacing:0; color:var(--tc-ink)!important;
}
.tc-chips{display:inline-flex; flex-wrap:wrap; gap:0 8px; font-size:.84rem; line-height:1.6; font-weight:500; color:var(--tc-ink2)}
.tc-chip{display:inline-flex; align-items:center; padding:0; background:none; color:inherit; white-space:nowrap}
.tc-chip::before{content:"·"; margin-right:8px}
.tc-chip svg, .tc-chip i{display:none}
.title-card > h1,.title-card > h2,.title-card > h3,
.prose .title-card > h3{
  margin:0; font-size:clamp(1.25rem, .95rem + .9vw, 1.6rem); line-height:1.3; font-weight:600; letter-spacing:0;
  color:var(--tc-a); text-wrap:balance;
}
.title-card > h1::before,.title-card > h2::before,.title-card > h3::before{
  content:""; display:block; width:44px; height:4px; margin:0 0 14px; background:var(--tc-b);
}
.tc-sub{margin:8px 0 0; max-width:64ch; font-size:1rem; line-height:1.6; color:var(--tc-ink2)}
.title-card > .content-lede, .title-card > .t-cap{margin:8px 0 0}
.title-card .tt-a{color:var(--tc-a)}
.title-card .tt-b{color:var(--tc-b)}

/* sub-module overview head acts as the same title card */
.ovw-head{
  padding:24px 30px 26px; margin-bottom:6px;
  background:var(--tc-bg); border:1px solid var(--tc-line); border-radius:var(--r-surface, 12px);
}
.ovw-head .ovw-run{display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; margin:0; font-size:.84rem; line-height:1.6; font-weight:600; color:var(--tc-ink)}
.ovw-head .ovw-run::before{display:none}
.ovw-head .ovw-subtitle{
  max-width:none; margin:0; font-size:clamp(1.25rem, .95rem + .9vw, 1.6rem); line-height:1.3; font-weight:600; color:var(--tc-a);
}
.ovw-head .ovw-subtitle::before{content:""; display:block; width:44px; height:4px; margin:0 0 14px; background:var(--tc-b)}
.ovw-head .tc-sub{margin-top:8px}
.ovw-subtitle{}
.ovw-title{font-weight:500; font-size:clamp(18px, .45vw + 15px, 21px)}
.ovw-titlebar{border-top:0; padding-top:0; margin-top:26px}

/* module landing hero keeps its own gradient but uses the font */
.brief-title{font-weight:600; background:none; -webkit-background-clip:border-box; background-clip:border-box; -webkit-text-fill-color:currentColor; color:var(--tc-a)}
.brief-title .tt-a{color:var(--tc-a)}
.brief-title .tt-b{color:var(--tc-b)}

/* landing page */
.lp-title{font-weight:600; letter-spacing:0; font-size:clamp(34px, 2.8vw + 20px, 58px); line-height:1.3}
.lp-h2{font-weight:600; color:var(--tc-a); font-size:clamp(28px, 1.3vw + 22px, 40px); line-height:1.3}
.lp-mod-t{font-size:clamp(17px, .4vw + 15px, 20px); line-height:1.4}
.lp-hero .tt-a, .lp-cta-box .tt-a{color:#fff}
.lp-hero .tt-b, .lp-cta-box .tt-b{color:var(--s-on-dark-acc, #E4B88B)}
.lp-h2 .tt-a{color:var(--petrol-900, #002E41)}
.lp-cta-box .lp-h2, .lp-cta-box .lp-h2 .tt-a{color:#fff}
.lp-cta-box .lp-h2 .tt-b{color:var(--s-on-dark-acc, #E4B88B)}

@media (max-width:560px){
  .title-card,.ovw-head{padding:18px 18px 20px}
}

/* title cards use the same corner radius as the other cards */
.title-card, .ovw-head{ border-radius:var(--r-surface, 12px); }

/* learning objectives (শিখন উদ্দেশ্য): medium weight, brand colours (petrol text, copper numbers) */
.ovw-aim-t{font-weight:500; color:var(--tc-a)}
.ovw-aim-n{font-weight:500; color:var(--tc-b)}

/* ==========================================================================
   Key message ("মূল বার্তা") — a quiet editorial callout: pale green paper, thin tinted border,
   the label sits on the top edge like a small green tag, a faint opening quote mark in the
   corner. No side stripe, gradient, glow or shadow.
   ========================================================================== */
.prose .wrap-key, .wrap-key, .keymsg{
  position:relative; overflow:visible;
  margin-top:14px;
  padding:34px 32px 26px 32px;
  background:#EDF6F1; color:#1C4A39;
  border:1px solid #BDDBCB; border-radius:var(--r-surface, 12px);
  box-shadow:none; background-image:none;
}
.wrap-key::before, .keymsg::before{content:none}
.wrap-key::after, .keymsg::after{
  content:"\201C"; position:absolute; right:22px; top:6px; width:auto; height:auto;
  font-family:Georgia,"Times New Roman",serif; font-size:84px; line-height:1;
  color:#2E8060; opacity:.15; background:none; border-radius:0; pointer-events:none;
}
.prose .wrap-key-l, .wrap-key-l, .keymsg .kh{
  position:absolute; left:26px; top:-14px; margin:0;
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px 6px; border-radius:var(--r-sm, 6px);
  background:#2E8060; color:#fff;
  font-size:.82rem; font-weight:600; line-height:1.4; letter-spacing:.01em; max-width:none;
}
.prose .wrap-key-l{color:#fff; margin:0; line-height:1.4}
.keymsg .kh svg.lucide{width:13px; height:13px; color:#fff}
.prose .wrap-key-t, .prose .keymsg p, .prose .keymsg{
  color:#1C4A39; font-weight:500;
}
.prose .wrap-key-t{font-size:1.1rem; line-height:1.95; max-width:none}
.wrap-key-list li{border-top-color:#BDDBCB; color:#1C4A39; font-weight:500}
.wrap-key-list li::before{color:#2E8060}
.keymsg .plan-keys li, .prose .keymsg .plan-keys li{color:#1C4A39}
.keymsg .plan-keys li::marker{color:#2E8060}
@media (max-width:560px){ .prose .wrap-key, .wrap-key, .keymsg{padding:30px 18px 22px} .wrap-key::after,.keymsg::after{font-size:64px; right:14px} .wrap-key-l, .keymsg .kh{left:16px} }

/* ==========================================================================
   Information cards — one family: pale green paper, thin green border, the heading sits on the
   top edge as a small tag. Replaces the old "coloured left stripe" boxes.
   ========================================================================== */
.plan-think, .vig-ask, .val-why, .guide-note{
  position:relative; margin-top:26px;
  padding:30px 22px 18px;
  background:#EDF6F1; color:#1C4A39;
  border:1px solid #BDDBCB; border-inline-start:1px solid #BDDBCB;
  border-radius:var(--r-surface, 12px); box-shadow:none;
}
.plan-think-h, .vig-ask-h, .val-why-h, .guide-note-h{
  position:absolute; left:20px; top:-14px; margin:0;
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px 6px; border-radius:var(--r-sm, 6px);
  background:#2E8060; color:#fff;
  font-size:.82rem; font-weight:600; line-height:1.4; letter-spacing:.01em;
}
.plan-think-h svg, .vig-ask-h svg, .val-why-h svg, .guide-note-h svg.lucide{width:14px; height:14px; color:#fff}
.val-why.is-ok .val-why-h{color:#fff}
.val-why.is-miss{background:#FBEEEC; border-color:#EBC4BF; border-inline-start-color:#EBC4BF; color:#6B2A24}
.val-why.is-miss .val-why-h{background:#B5443A; color:#fff}
.plan-think li, .vig-ask p, .val-why p, .guide-note li{color:#1C4A39}
.val-why.is-miss p{color:#6B2A24}
.plan-think li::marker, .guide-note li::marker{color:#2E8060}
/* cards with no heading: same paper, same border */
.scale-after, .scene-outro, .concept-term{
  background:#EDF6F1; color:#1C4A39;
  border:1px solid #BDDBCB; border-inline-start:1px solid #BDDBCB;
  border-radius:var(--r-surface, 12px); box-shadow:none;
}
.scale-after svg, .scene-outro svg{color:#2E8060}
.scale-after p, .scene-outro{color:#1C4A39}
.check-guide{background:#EDF6F1; border:1px solid #BDDBCB; box-shadow:none; border-radius:var(--r-surface, 12px)}
.check-guide h4{color:#1C4A39}

/* "আপনি শিখলেন" ticks — green */
.wrap-bar{background:#D6EADF}
.wrap-bar span{background:#2E8060}
.wrap-count.is-all, .wrap-count{color:#2E8060}
.wrap-item:hover{border-color:#8FC4A9; background:#F4FAF7}
.wrap-item.is-on{background:#EDF6F1; border-color:#9FCDB5}
.wrap-item.is-on .wrap-box{background:#2E8060; border-color:#2E8060}
.wrap-item:focus-visible{outline-color:#2E8060}
.prose .plan-think-h, .prose .vig-ask-h, .prose .val-why-h, .prose .guide-note-h,
.plan-think-h, .vig-ask-h, .val-why-h, .guide-note-h{ line-height:1.4; max-width:none; color:#fff; font-size:.82rem; padding:5px 13px 6px }

/* ==========================================================================
   Scale page — ONLY the "এই ঘটনায় শিক্ষক কী করবেন?" lens (stepper + answer card): one colour, brand green.
   Everything else on the page keeps its original look.
   ========================================================================== */
.scale-lens, .scale-lens [data-rung]{
  --lv:#2E8060; --lv-ink:#1C4A39; --lv-on:#fff; --lv-pale:#EDF6F1; --lv-soft:#EDF6F1; --lv-line:#BDDBCB;
}
.scale-lens.is-reply{background:#F4FAF7}
.scale-lens .scale-track-line{background:#D3E8DC}
.scale-lens .scale-lens-node{background:#DCEEE4; color:#3F8F6C; border:1px solid #BDDBCB}
.scale-lens .scale-lens-chip.is-seen .scale-lens-node,
.scale-lens .scale-lens-chip.is-on .scale-lens-node{background:#2E8060; color:#fff; border-color:#2E8060}
.scale-lens .scale-lens-chip.is-on .scale-lens-node{box-shadow:0 0 0 5px rgba(46,128,96,.22); transform:scale(1.08)}
.scale-lens .scale-lens-n{background:#1C4A39; color:#fff; border-color:#F4FAF7}
.scale-lens .scale-lens-body{background:#EDF6F1; border:1px solid #BDDBCB; border-inline-start:1px solid #BDDBCB; border-radius:var(--r-surface,12px)}
.scale-lens .scale-lens-wm{display:none}
.scale-lens .scale-lens-tag-ico{background:#2E8060; color:#fff}

/* Indication / pointer cards ("এখন … করা যাক", scale-after) — secondary brand colour (copper) */
.scale-after, .scene-outro{
  background:#FBF3EA; color:#5E3A12;
  border:1px solid #EBD3B6; border-inline-start:1px solid #EBD3B6;
}
.scale-after svg, .scene-outro svg{color:#A9651F}
.scale-after p, .scene-outro{color:#5E3A12}
/* pointer cards: black text, slightly larger */
.scene-outro, .scale-after, .scale-after p{color:#2B3338; font-size:calc(var(--fs-body) + 1px); line-height:1.75}
.scene-outro svg, .scale-after svg{width:20px; height:20px; margin-top:5px}
.prose p.scene-outro, p.scene-outro, .prose .scale-after p, .scale-after p{color:#2B3338; font-size:calc(var(--fs-body) + 1px); line-height:1.75}

/* All info / pointer cards: brand petrol blue body text, one step larger */
.prose .wrap-key-t, .wrap-key-t, .prose .keymsg p, .prose .keymsg, .keymsg p,
.wrap-key-list li, .keymsg .plan-keys li, .prose .keymsg .plan-keys li,
.plan-think li, .prose .plan-think li, .vig-ask p, .prose .vig-ask p,
.val-why.is-ok p, .prose .val-why.is-ok p, .guide-note li, .prose .guide-note li,
.concept-term, .concept-term p, .prose .concept-term p, .check-guide, .check-guide p, .check-guide li, .check-guide h4,
.scale-after p, .prose .scale-after p, .scene-outro, .prose p.scene-outro,
.scale-lens-body p, .scale-lens-body .scale-def, .scale-lens .scale-def{
  color:#2B3338;
}
.plan-think li, .vig-ask p, .val-why p, .guide-note li, .concept-term, .concept-term p, .check-guide p, .check-guide li,
.wrap-key-list li, .scale-lens-body .scale-def{font-size:calc(var(--fs-body) + 1px)}
.wrap-key-list li::before{color:#2B3338}

/* quiz result — the "আপনার জেন্ডার সচেতনতার যাত্রা" card spans the full content width like the other cards */
.level-result-card{width:100%; max-width:none; padding:clamp(16px,2vw,24px)}

/* info / key-message / pointer card text: regular weight */
.prose .wrap-key-t, .wrap-key-t, .prose .keymsg p, .prose .keymsg, .keymsg p,
.wrap-key-list li, .keymsg .plan-keys li, .prose .keymsg .plan-keys li,
.plan-think li, .prose .plan-think li, .vig-ask p, .prose .vig-ask p,
.val-why p, .prose .val-why p, .guide-note li, .prose .guide-note li,
.concept-term, .concept-term p, .prose .concept-term p, .check-guide p, .check-guide li,
.scale-after p, .prose .scale-after p, .scene-outro, .prose p.scene-outro,
.scale-lens-body p, .scale-lens-body .scale-def{font-weight:400}

/* concept quiz: air between the options, the feedback, the card edge and the "next topic" button */
.concept-quiz .poll-fb{margin-top:14px}
.concept-quiz{padding:clamp(16px,2vw,22px)}
.concept-panel .cmap-next{margin-top:var(--s5, 20px); margin-bottom:var(--s3, 12px)}
.cmap{scroll-margin-top:16px}

/* card tags (the little label on the top edge) stay white — the body-text colour must not reach them */
.prose .vig-ask p.vig-ask-h, .prose .vig-ask-h, .vig-ask-h,
.prose .plan-think-h, .plan-think-h, .prose .val-why p.val-why-h, .prose .val-why-h, .val-why-h,
.prose .guide-note-h, .guide-note-h, .prose .wrap-key-l, .wrap-key-l, .prose .keymsg p.kh, .keymsg .kh,
.prose .val-why.is-ok .val-why-h, .val-why.is-ok .val-why-h, .val-why.is-miss .val-why-h{color:#fff}
.prose .vig-ask-h svg, .prose .plan-think-h svg, .prose .val-why-h svg, .prose .guide-note-h svg, .keymsg .kh svg{color:#fff}

/* ==========================================================================
   Review round (Oct 21)
   ========================================================================== */
/* glossary blobs (৪টি পরিভাষা) — Bangla term only on the blob; big screens large, laptops smaller */
.term-field .term-blob:nth-child(n) .term-blob-hit{ --blob-w:clamp(168px, 25vw, 260px); min-height:clamp(140px, 17vw, 190px); padding:24px 18px 22px }
.term-field .term-blob-hit strong{ font-size:clamp(18px, .55vw + 14px, 23px); font-weight:500; max-width:10em }
.term-field .term-blob-hit svg.lucide{ width:24px; height:24px }
.term-field{ gap:30px 18px }
.term-field .term-blob{ min-height:clamp(150px, 19vw, 205px) }
@media (max-width:1599px){
  .term-field .term-blob:nth-child(n) .term-blob-hit{ --blob-w:clamp(150px, 17vw, 205px); min-height:clamp(120px, 12vw, 150px); padding:20px 14px 18px }
  .term-field .term-blob-hit strong{ font-size:clamp(16px, .35vw + 13px, 19px) }
  .term-field .term-blob-hit svg.lucide{ width:21px; height:21px }
  .term-field{ gap:22px 14px }
  .term-field .term-blob{ min-height:clamp(125px, 13vw, 160px) }
}
@media (max-width:639px){
  .term-field .term-blob:nth-child(n) .term-blob-hit{ --blob-w:min(100%, 168px); min-height:128px }
  .term-field .term-blob-hit strong{ font-size:17px }
}

/* voice-over chip (placeholder until the recording is added) */
.voice-chip{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  padding:5px 12px 5px 9px; border-radius:var(--r-full, 999px);
  border:1px solid #BCD3E4; background:#fff; color:#1A5876;
  font:inherit; font-size:var(--fs-caption, 13px); font-weight:500; cursor:pointer;
}
.voice-chip svg.lucide{ width:15px; height:15px }
.voice-chip:hover{ background:#EEF5FA }
.voice-chip.is-playing{ background:#1A5876; color:#fff; border-color:#1A5876 }
.voice-chip.is-placeholder{ border-style:dashed; color:#4F7B96; cursor:help }

/* thought bubble hangs over the bottom edge of the scene picture (never hides the faces);
   the points appear one by one, tap the bubble to show them all */
.fthought-wrap{ position:relative; margin:0 }
.fthought-wrap .figure{ max-height:none }
.fthought{
  position:relative; z-index:2;
  width:min(92%, 40rem); margin:-64px 0 var(--s5, 20px) 5%;
  padding:14px 18px 12px; border-radius:var(--r-surface, 12px);
  background:#fff; color:#2B3338; border:1px solid #BCD3E4;
  box-shadow:0 12px 28px -16px rgba(0,40,60,.5); cursor:pointer;
}
.fthought::before{ /* tail pointing up to the speaker */
  content:""; position:absolute; left:34px; top:-9px; width:16px; height:16px;
  background:#fff; border-left:1px solid #BCD3E4; border-top:1px solid #BCD3E4;
  transform:rotate(45deg); border-radius:3px 0 0 0;
}
.fthought-who{ margin:0 0 6px; font-size:var(--fs-caption, 13px); font-weight:500; color:#1A5876 }
.fthought-list{ display:grid; gap:6px }
.fthought-item, .fthought-close{
  margin:0; font-size:var(--fs-body, 16px); line-height:1.65; font-weight:400; color:#2B3338;
  transition:opacity .45s ease, transform .45s ease, max-height .45s ease;
}
.fthought-item{ position:relative; padding-inline-start:18px; max-height:6em }
.fthought-item::before{ content:""; position:absolute; inset-inline-start:2px; top:.72em; width:7px; height:7px; border-radius:50%; background:#A9651F }
.fthought-close{ margin-top:6px; max-height:8em }
.fthought-item.is-hid, .fthought-close.is-hid{ opacity:0; transform:translateY(6px); max-height:0; overflow:hidden; margin:0 }
.fthought .voice-chip{ margin-top:10px }
@media (max-width:640px){ .fthought{ width:94%; margin:-36px 0 var(--s4, 16px) 3% } }
@media (prefers-reduced-motion:reduce){ .fthought-item, .fthought-close{ transition:none } }
.fthought-list.is-single .fthought-item{ padding-inline-start:0 }
.fthought-list.is-single .fthought-item::before{ display:none }

/* ---- voice control = same speaker + wave as the ওভারভিউ page ---------------- */
.vsound{ display:inline-flex; align-items:center; gap:8px; flex:none }
.vsound .ovw-hint{ font-size:var(--fs-caption, 13px); color:#7A4A14 }
.vsound.is-placeholder .ovw-spk{ color:#6F8FA3 }
.vsound.is-playing .ovw-eq i{ background:var(--petrol-500, #2A7194); animation:ovw-eq 1s ease-in-out infinite }
.vsound.is-playing .ovw-eq i:nth-child(2){ animation-delay:-.25s }
.vsound.is-playing .ovw-eq i:nth-child(3){ animation-delay:-.5s }
.vsound.is-playing .ovw-eq i:nth-child(4){ animation-delay:-.75s }
.vsound.is-playing .ovw-eq i:nth-child(5){ animation-delay:-.4s }
.vsound.is-paused .ovw-spk, .vsound.is-blocked .ovw-spk{ color:var(--petrol-600, #2A6A8A) }
.vsound.is-blocked .ovw-spk{ animation:ovw-ping 1.8s ease-out infinite }
.fthought .vsound, .now-cut .vsound{ margin-top:10px }
@media (prefers-reduced-motion:reduce){ .vsound.is-playing .ovw-eq i{ animation:none; height:60% } .vsound.is-blocked .ovw-spk{ animation:none } }

/* ---- Nadia's thought bubble sits BELOW the scene picture ------------------- */
.lap-below{ width:100% }
.lap-below:empty{ display:none }
.stage.is-laptop .lap-thought.is-below{
  position:relative; left:auto; top:auto; width:min(100%, 46rem); margin:14px auto 4px;
  padding:14px 18px 16px; gap:6px; pointer-events:auto; cursor:default;
  background:#FEFBF8; border:1px dashed var(--s-acc); border-radius:var(--r-lg, 14px);
}
.stage.is-laptop .lap-thought.is-below::after{
  left:auto; right:clamp(28px, 9%, 90px); top:-7px; bottom:auto;
  border:0; border-left:1px dashed var(--s-acc); border-top:1px dashed var(--s-acc);
}
.stage.is-laptop .lap-thought.is-below.is-tail-right::after{
  left:auto; right:clamp(28px, 9%, 90px); top:-7px; bottom:auto;
  border:0; border-left:1px dashed var(--s-acc); border-top:1px dashed var(--s-acc);
}
.lap-thought-head{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.lap-thought.is-below .lap-thought-who{ font-size:var(--fs-caption, 13px) }
.lap-thought.is-below .lap-nadia-text{ font-size:var(--fs-body, 16px); line-height:1.7; color:#2B3338 }
@media (max-width:639px){
  .stage.is-laptop .lap-thought.is-below{ padding:12px 14px 14px }
  .lap-thought.is-below .lap-nadia-text{ font-size:var(--fs-body, 15px) }
}

/* ---- Nadia: profile picture + comic-style speech bubble -------------------- */
.lap-thought-row{ display:flex; align-items:flex-start; gap:18px; width:min(100%, 46rem); margin:16px auto 4px }
.lap-thought-face{ flex:none; margin-top:4px; box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--s-acc, #A9651F) }
.lap-thought-face.face{ border-radius:50% }
.lap-thought-face img{ border-radius:50% }
.stage.is-laptop .lap-thought-row .lap-thought.is-below{
  flex:1; min-width:0; width:auto; margin:0;
  border-radius:26px 26px 26px 8px; border:2px solid var(--s-acc, #A9651F); border-style:solid;
  background:#fff; padding:14px 20px 16px;
  box-shadow:0 8px 20px -14px rgba(60,35,10,.45);
}
.stage.is-laptop .lap-thought-row .lap-thought.is-below::after,
.stage.is-laptop .lap-thought-row .lap-thought.is-below.is-tail-right::after{
  content:""; position:absolute; left:-11px; right:auto; top:26px; bottom:auto; width:18px; height:18px;
  background:#fff; border:0; border-left:2px solid var(--s-acc, #A9651F); border-bottom:2px solid var(--s-acc, #A9651F);
  transform:rotate(45deg); border-radius:0 0 0 5px;
}
@media (max-width:639px){
  .lap-thought-row{ gap:14px }
  .lap-thought-face{ --face:48px !important }
  .stage.is-laptop .lap-thought-row .lap-thought.is-below,
  .stage.is-laptop .lap-thought-row .lap-thought.is-below.is-tail-right{ left:auto !important; top:auto !important; width:auto !important; padding:12px 14px 14px; border-radius:20px 20px 20px 6px }
  .stage.is-laptop .lap-thought-row .lap-thought.is-below::after{ top:18px }
}

/* ---- Nadia's bubble: hand-drawn comic speech bubble (oval, bold outline, pointed tail) ---- */
.lap-thought-row{ align-items:flex-end; gap:26px; margin:20px auto 16px }
.lap-thought-face{ margin:0 0 6px }
.stage.is-laptop .lap-thought-row .lap-thought.is-below,
.stage.is-laptop .lap-thought-row .lap-thought.is-below.is-tail-right{
  position:relative; background:#fff; color:#1F2A30;
  border:1px solid #9AA3A8; border-style:solid;
  border-radius:22px;
  padding:16px 22px 18px;
  box-shadow:none; gap:8px; align-items:stretch; text-align:left;
}
.lap-thought.is-below .lap-thought-head{ justify-content:space-between; gap:14px }
.lap-thought.is-below .lap-thought-who{ color:#7A4A14 }
.lap-thought.is-below .lap-nadia-text{ text-align:left }
/* the tail: one outlined wedge on the LEFT edge, pointing at Nadia's picture */
.stage.is-laptop .lap-thought-row .lap-thought.is-below::before{ content:none; display:none }
.stage.is-laptop .lap-thought-row .lap-thought.is-below::after,
.stage.is-laptop .lap-thought-row .lap-thought.is-below.is-tail-right::after{
  content:""; position:absolute; left:-23px; right:auto; top:auto; bottom:22px; width:24px; height:28px;
  transform:none; border:0; border-radius:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M24 2 L2 22 L24 25 Z' fill='white'/><path d='M24 2 L2 22 L24 25' fill='none' stroke='%239AA3A8' stroke-width='1' stroke-linejoin='round'/></svg>") no-repeat center / 100% 100%;
}
@media (max-width:639px){
  .lap-thought-row{ gap:20px; margin-bottom:16px }
  .stage.is-laptop .lap-thought-row .lap-thought.is-below,
  .stage.is-laptop .lap-thought-row .lap-thought.is-below.is-tail-right{
    border-radius:18px; padding:14px 16px 16px; left:auto !important; top:auto !important; width:auto !important;
  }
}

/* ---- thought-over-image block: same bubble as the session intro ------------ */
.fthought-wrap .fthought-row{ margin:18px auto 20px; width:min(100%, 52rem) }
.fthought-wrap .fthought-row .fthought{
  flex:1; min-width:0; width:auto; margin:0; cursor:pointer;
  position:relative; z-index:auto; background:#fff;
  border:1px solid #9AA3A8; border-radius:22px; padding:16px 22px 18px; box-shadow:none;
}
.fthought-wrap .fthought-row .fthought::before{
  content:""; position:absolute; left:-23px; right:auto; top:auto; bottom:22px; width:24px; height:28px;
  transform:none; border:0; border-radius:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M24 2 L2 22 L24 25 Z' fill='white'/><path d='M24 2 L2 22 L24 25' fill='none' stroke='%239AA3A8' stroke-width='1' stroke-linejoin='round'/></svg>") no-repeat center / 100% 100%;
}
.fthought-row .lap-thought-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px }
.fthought-row .fthought-who{ margin:0 }
.fthought-row .fthought .vsound{ margin-top:0 }
.lap-thought-face{ --face:76px }
@media (max-width:639px){
  .fthought-wrap .fthought-row .fthought{ padding:14px 16px 16px; border-radius:18px }
  .fthought-wrap .fthought-row{ gap:20px }
  .lap-thought-face{ --face:56px !important }
}
.fthought-row .fthought-who{ font-size:var(--fs-caption, 13px); font-weight:500; line-height:1.5; color:#7A4A14 }
.fthought-row .lap-thought-head{ flex-wrap:wrap }
.fthought-row .fthought-who{ flex:1 1 14rem }
@media (max-width:639px){
  .fthought-wrap .fthought-row{ gap:16px }
  .fthought-row .fthought-who{ flex:1 1 100% }
  .fthought-row .lap-thought-head{ justify-content:flex-start }
}

/* ---- thought block = 2 columns: Nadia's picture | speech bubble (no scene banner) ---- */
.fthought-wrap .fthought-row.fthought-grid{
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 8fr); gap:32px; align-items:center;
  width:100%; margin:6px 0 20px;
}
.fthought-photo{ position:relative; aspect-ratio:1 / 1; border-radius:18px; overflow:hidden; background:#E7EEF2 }
.fthought-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block }
.fthought-photo .face{ position:absolute; inset:0; margin:auto }
.fthought-wrap .fthought-row.fthought-grid .fthought::before{ left:-23px; bottom:auto; top:36% }
@media (max-width:639px){
  .fthought-wrap .fthought-row.fthought-grid{ grid-template-columns:1fr; gap:26px }
  .fthought-photo{ aspect-ratio:16 / 10 }
  .fthought-photo img{ object-position:50% 18% }
  /* tail now points UP at the picture */
  .fthought-wrap .fthought-row.fthought-grid .fthought::before{
    left:28px; top:-23px; bottom:auto; width:28px; height:24px;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'><path d='M3 24 L14 2 L25 24 Z' fill='white'/><path d='M3 24 L14 2 L25 24' fill='none' stroke='%239AA3A8' stroke-width='1' stroke-linejoin='round'/></svg>") no-repeat center / 100% 100%;
  }
}

/* ---- inline "মনে মনে" cards (all pages): same 2-column look ---------------------- */
.thought.fthought-wrap{ display:block; margin:6px 0 }
.thought .fthought-row.fthought-grid{
  display:grid; grid-template-columns:clamp(120px, 20%, 180px) minmax(0, 1fr); gap:28px; align-items:center;
  width:100%; margin:0;
}
.thought .fthought-photo{ aspect-ratio:1 / 1 }
.thought .fthought{
  position:relative; z-index:auto; flex:1; min-width:0; width:auto; margin:0; cursor:default;
  background:#fff; border:1px solid #9AA3A8; border-radius:22px; padding:14px 20px 16px; box-shadow:none;
}
.thought .fthought::before{
  content:""; position:absolute; left:-23px; right:auto; top:36%; bottom:auto; width:24px; height:28px;
  transform:none; border:0; border-radius:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M24 2 L2 22 L24 25 Z' fill='white'/><path d='M24 2 L2 22 L24 25' fill='none' stroke='%239AA3A8' stroke-width='1' stroke-linejoin='round'/></svg>") no-repeat center / 100% 100%;
}
.thought .lap-thought-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin-bottom:6px }
.thought .fthought-who{ margin:0; flex:1 1 12rem; font-size:var(--fs-caption, 13px); font-weight:500; line-height:1.5; color:#7A4A14 }
.thought .fthought-item{ color:#2B3338 }
@media (max-width:639px){
  .thought .fthought-row.fthought-grid{ grid-template-columns:1fr; gap:22px }
  .thought .fthought-photo{ aspect-ratio:16 / 9; max-height:190px; width:100% }
  .thought .fthought-photo img{ object-position:50% 18% }
  .thought .fthought::before{
    left:28px; top:-23px; bottom:auto; width:28px; height:24px;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'><path d='M3 24 L14 2 L25 24 Z' fill='white'/><path d='M3 24 L14 2 L25 24' fill='none' stroke='%239AA3A8' stroke-width='1' stroke-linejoin='round'/></svg>") no-repeat center / 100% 100%;
  }
}

/* chat "মনে মনে" lines: same bubble, tail toward the speaker's picture */
.chat-row.is-think .chat-bubble{
  background:#fff; color:var(--s-body); border:1px solid #9AA3A8; border-radius:18px; box-shadow:none;
}
.chat-row.is-think .chat-bubble::after{
  content:""; position:absolute; right:-14px; left:auto; bottom:12px; width:16px; height:20px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M24 2 L2 22 L24 25 Z' fill='white'/><path d='M24 2 L2 22 L24 25' fill='none' stroke='%239AA3A8' stroke-width='1.4' stroke-linejoin='round'/></svg>") no-repeat center / 100% 100%;
  transform:scaleX(-1);
}

/* ---- bubbles keep a fixed (final) height; plain paragraphs instead of bullets -------- */
.lap-text-stack{ display:grid }
.lap-text-stack > *{ grid-area:1 / 1 }
.lap-text-stack .lap-ghost{ visibility:hidden; pointer-events:none }
.lap-text-stack .lap-nadia-text:not(.lap-ghost){ align-self:start }
.fthought-row .fthought-item.is-hid, .fthought-row .fthought-close.is-hid{
  max-height:none; overflow:visible; transform:none; opacity:0;
}
.fthought-row .fthought-item{ padding-inline-start:0; max-height:none }
.fthought-row .fthought-item::before{ display:none }
.fthought-row .fthought-list{ gap:10px }
.fthought-row .fthought-close{ margin-top:10px; max-height:none }

/* diary's last word: no orange container around the thought card */
.wrap-note.is-open{ background:none; border:0; padding:0; box-shadow:none }

/* scene banners (.figure) are full 16:9 like the other pages — no 280px cap */
.figure{ max-height:none }

/* text + Nadia on the left, illustration on the right */
.side-split{ display:grid; grid-template-columns:minmax(0, 1fr) 190px; gap:36px; align-items:center; margin:6px 0 }
.side-split-text .thought{ align-items:flex-start }
.side-split-text .thought-text{ font-size:var(--fs-body, 16px); line-height:1.9 }
.side-split-img{ display:flex; justify-content:center; align-items:center }
.side-split-img img{ width:100%; max-width:190px; height:auto; display:block }
@media (max-width:719px){
  .side-split{ grid-template-columns:1fr; gap:20px }
  .side-split-img{ justify-content:flex-start }
  .side-split-img img{ max-width:140px }
}
@media (max-width:719px){ .side-split .thought .fthought-photo{ max-height:150px } }

/* "একই সময়" card: no container, picture + bubble */
.now-cut.is-bubble{ background:none; border:0; box-shadow:none; padding:0; display:block; margin-top:18px }
.now-cut.is-bubble .now-cut-film{ margin:0 0 12px }
.now-cut.is-bubble .fthought-list{ display:grid; gap:10px }
.now-cut.is-bubble .now-cut-cite{ margin:0; padding:0 0 0 14px; background:none; border:0; border-inline-start:3px solid #BCD3E4 }
.now-cut.is-bubble .fthought-item{ color:#2B3338 }
.now-cut.is-bubble .fthought-item{ font-size:var(--fs-body, 16px); line-height:1.75 }

/* side-split page: Nadia as a small round profile, note icon with breathing room */
.side-split{ grid-template-columns:minmax(0, 1fr) 280px; gap:56px }
.side-split-img img{ max-width:200px }
.side-split .thought .fthought-row.fthought-grid{ grid-template-columns:72px minmax(0, 1fr); gap:22px; align-items:center }
.side-split .thought .fthought-photo{ width:72px; height:72px; aspect-ratio:1 / 1; max-height:none; border-radius:50%; align-self:center }
.side-split .thought .fthought-photo img{ object-position:50% 22% }
.side-split .thought .fthought-row.fthought-grid .fthought::before{ top:calc(50% - 14px); bottom:auto; left:-23px; width:24px; height:28px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M24 2 L2 22 L24 25 Z' fill='white'/><path d='M24 2 L2 22 L24 25' fill='none' stroke='%239AA3A8' stroke-width='1' stroke-linejoin='round'/></svg>") no-repeat center / 100% 100% }
@media (max-width:719px){
  .side-split{ grid-template-columns:1fr; gap:22px }
  .side-split-img{ justify-content:center }
  .side-split-img img{ max-width:160px }
  .side-split .thought .fthought-row.fthought-grid{ grid-template-columns:52px minmax(0, 1fr); gap:18px }
  .side-split .thought .fthought-photo{ width:52px; height:52px; max-height:none }
  .side-split .thought .fthought-row.fthought-grid .fthought::before{ top:calc(50% - 14px); left:-23px; width:24px; height:28px;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M24 2 L2 22 L24 25 Z' fill='white'/><path d='M24 2 L2 22 L24 25' fill='none' stroke='%239AA3A8' stroke-width='1' stroke-linejoin='round'/></svg>") no-repeat center / 100% 100% }
}

/* "একই সময়" bubble: wider picture column */
.now-cut.is-bubble .fthought-row.fthought-grid{ grid-template-columns:clamp(170px, 30%, 280px) minmax(0, 1fr); gap:30px }
.now-cut.is-bubble .fthought-photo{ aspect-ratio:1 / 1; border-radius:16px }
@media (max-width:639px){
  .now-cut.is-bubble .fthought-row.fthought-grid{ grid-template-columns:1fr }
  .now-cut.is-bubble .fthought-photo{ aspect-ratio:16 / 10; max-height:200px }
}

/* "একই সময়" bubble: narrower */
.now-cut.is-bubble .fthought{ max-width:30rem; justify-self:start }

/* quiz — try again after an imperfect score */
.quiz-again{display:flex; justify-content:center; margin:6px 0 22px}
.quiz-retry{display:inline-flex; align-items:center; gap:8px}
.quiz-retry svg{width:18px; height:18px}

/* whole-course retake (threshold page, once the module is finished) */
.course-again{display:flex; flex-direction:column; align-items:center; gap:12px; margin:8px 0 22px; text-align:center}
.course-again-btn{display:inline-flex; align-items:center; gap:8px}
.course-again-btn svg{width:18px; height:18px}
.course-again-sure{max-width:34rem; padding:16px 18px; background:#fff; border:1px solid var(--line,#D5DDE2); border-radius:14px}
.course-again-sure[hidden]{display:none}
.course-again-sure p{margin:0 0 12px; line-height:1.7}
.course-again-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.course-again-btn[hidden]{display:none}

/* concept popup: long examples start short, "বিস্তারিত দেখুন" opens the rest */
.term-blob-eg .term-eg-body.is-clip{display:block; -webkit-line-clamp:unset; overflow:visible}
.term-blob-eg .term-eg-body.is-clip > li{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden}
.term-eg-more{margin-top:2px; padding:4px 0}
.term-blob-eg .term-eg-body.is-clip{padding-left:0; list-style:none}

/* "একই সময়" card: bubble spans the full remaining width, more air between photo and bubble */
.now-cut.is-bubble .fthought{ max-width:none; width:100%; justify-self:stretch }
@media (min-width:640px){
  .now-cut.is-bubble .fthought-row.fthought-grid{ gap:72px }
}

/* ---- concept map: soft topic cards, border marks the active one; no red ---------- */
.cmap-a2{ --cm-ink:#6E4A0C; --cm-ico:#B7791F; --cm-act1:#B7791F; --cm-act2:#B7791F; --cm-sh:rgba(183,121,31,.30); --cm-sh-soft:rgba(183,121,31,.12);
  --cm-ball1:#FFF8E8; --cm-ball2:#F8E6BE; --cm-seen:#F1D595; --cm-ring:#DDB35C; --cm-fa:#FBF6EC; --cm-fb:#FBF6EC }
.cmap-t2{ --cm-ink:#6E4A0C; --cm-ico:#B7791F; --cm-act1:#B7791F; --cm-act2:#B7791F; --cm-sh:rgba(183,121,31,.30); --cm-sh-soft:rgba(183,121,31,.12) }
.cmap-t0{ --cm-soft:#E6F1F7 }
.cmap-t1{ --cm-soft:#EEE9F7 }
.cmap-t2{ --cm-soft:#FBF1DC }
.cmap-t3{ --cm-soft:#E3F2EB }
.cmap-t4{ --cm-soft:#F8E9F1; --cm-ink:#6B2A4B; --cm-ico:#B0407C; --cm-act1:#B0407C; --cm-act2:#B0407C }

.cmap .cmap-topic{
  background:var(--cm-soft, #EEF2F5); color:var(--cm-ink);
  box-shadow:inset 0 0 0 2px transparent;
  transition:background .2s, box-shadow .2s;
}
.cmap .cmap-topic:hover:not(.is-active):not(.is-locked){ background:var(--cm-soft); box-shadow:inset 0 0 0 2px var(--cm-sh-soft) }
.cmap .cmap-topic-t{ color:var(--cm-ink) }
.cmap .cmap-topic.is-active{
  background:#fff; color:var(--cm-ink);
  box-shadow:inset 0 0 0 2px var(--cm-ico), 0 6px 14px -10px var(--cm-sh);
}
.cmap .cmap-topic.is-active .cmap-topic-t{ color:var(--cm-ink) }
.cmap .cmap-topic.is-active .cmap-topic-ico{ color:var(--cm-ico); box-shadow:inset 0 0 0 1.5px var(--cm-soft) }
.cmap .cmap-topic.is-active .cmap-topic-flag{ background:var(--cm-soft); color:var(--cm-ico) }
.cmap .cmap-topic.is-done .cmap-topic-flag,
.cmap .cmap-topic.is-active.is-done .cmap-topic-flag{ background:#fff; color:#317E47; box-shadow:inset 0 0 0 1px #CFE6D6 }
.cmap .cmap-topic.is-locked{ background:#EEF1F4; color:#8593A0; box-shadow:none }
.cmap .cmap-topic.is-locked .cmap-topic-t{ color:#8593A0 }
.cmap .cmap-topic.is-locked .cmap-topic-ico{ color:#8593A0 }

/* ---- concept map: deep topic colours (no red), a ring marks the active card ------ */
.cmap-t0{ --cm-deep:#24698A }
.cmap-t1{ --cm-deep:#64529B }
.cmap-t2{ --cm-deep:#A8661A }
.cmap-t3{ --cm-deep:#2A7A5A }
.cmap-t4{ --cm-deep:#86396A; --cm-ico:#86396A; --cm-act1:#86396A; --cm-act2:#86396A }
.cmap-a4{ --cm-ico:#86396A; --cm-act1:#86396A; --cm-act2:#86396A }
.cmap .cmap-topic{ background:var(--cm-deep); color:#fff; box-shadow:none }
.cmap .cmap-topic:hover:not(.is-active):not(.is-locked){ background:var(--cm-deep); filter:brightness(1.08); box-shadow:none }
.cmap .cmap-topic-t, .cmap .cmap-topic.is-active .cmap-topic-t{ color:#fff }
.cmap .cmap-topic-ico, .cmap .cmap-topic.is-active .cmap-topic-ico{ background:#fff; color:var(--cm-deep); box-shadow:none }
.cmap .cmap-topic-flag{ background:rgba(255,255,255,.22); color:#fff }
.cmap .cmap-topic.is-active{
  background:var(--cm-deep); color:#fff;
  box-shadow:0 0 0 2px #fff, 0 0 0 4.5px var(--cm-deep);
}
.cmap .cmap-topic.is-active .cmap-topic-flag{ background:rgba(255,255,255,.22); color:#fff }
.cmap .cmap-topic.is-done .cmap-topic-flag,
.cmap .cmap-topic.is-active.is-done .cmap-topic-flag{ background:#fff; color:#2E7D4F; box-shadow:none }
.cmap .cmap-topic.is-locked{ background:#8593A0; color:#fff; box-shadow:none }
.cmap .cmap-topic.is-locked .cmap-topic-t{ color:#fff }
.cmap .cmap-topic.is-locked .cmap-topic-ico{ color:#8593A0 }

/* refresh() restores the scroll position itself; the browser's scroll anchoring must not move it again
   (clicking a level on the staircase used to push the page down to the case cards) */
.step, .step *{ overflow-anchor:none }

/* ---- toast: solid colour so it reads against the white page; no left accent ----- */
#toast{ background:#1A5876; color:#fff; border:0; border-radius:14px; box-shadow:0 12px 28px -10px rgba(10,40,58,.55) }
#toast .toast-ico{ background:rgba(255,255,255,.2); color:#fff }
#toast .toast-t{ color:rgba(255,255,255,.86) }
#toast .toast-d{ color:#fff }
#toast:not(:has(.toast-d)) .toast-t{ color:#fff }
#toast.is-up{ background:#2A7A5A; border:0 }
#toast.is-up .toast-ico{ background:rgba(255,255,255,.2); color:#fff }
#toast.is-up .toast-d{ color:#fff }
#toast.is-down{ background:#A8661A; border:0 }
#toast.is-down .toast-ico{ background:rgba(255,255,255,.2); color:#fff }

/* toast colours carry meaning: info = petrol, up/ok = green, down = amber, lock (blocked until a step is done) = slate */
#toast.is-ok{ background:#2A7A5A; border:0 }
#toast.is-ok .toast-ico{ background:rgba(255,255,255,.2); color:#fff }
#toast.is-lock{ background:#4F5D68; border:0 }
#toast.is-lock .toast-ico{ background:rgba(255,255,255,.2); color:#fff }

/* ---- bottom sheets (level result, feedback) span the full screen width, not just the area right of the sidebar ---- */
@media (min-width:1024px){
  .sheet{ left:0 }
  .sheet-in{ max-width:64rem }
}

/* ---- modals: tighter corner radius everywhere ---- */
.sheet{ border-radius:8px 8px 0 0 }
.poll-pop-card, .poll-pop-card.level-pop-card, .poll-pop-card.is-term, .poll-pop-card.is-stack{ border-radius:8px }
.term-blob-pop{ border-radius:8px }
#toast{ border-radius:8px }
.lock-tip{ border-radius:6px }
@media (max-width:639px){
  .sheet{ border-radius:8px 8px 0 0 }
  .poll-pop-card.level-pop-card{ border-radius:8px }
}

/* ==========================================================================
   মূল বার্তা audio — the sound control sits at the card's top-right, words light up in green
   ========================================================================== */
.wrap-key .ovw.is-key .ovw-titlebar{justify-content:flex-end; margin:-18px -14px 0 0; min-height:0; position:relative; z-index:1}
.wrap-key .ovw-spk{background:#D5EBDF; color:#2E8060}
.wrap-key .ovw-spk:hover{background:#C6E2D3; color:#1F6B4C}
.wrap-key .ovw.is-paused .ovw-spk, .wrap-key .ovw.is-blocked .ovw-spk{color:#2E8060}
.wrap-key .ovw-hint{color:#1F6B4C}
.wrap-key .ovw-eq i{background:#9CC5B0}
.wrap-key .ovw.is-playing .ovw-eq i{background:#2E8060}
.wrap-key .ovw-w.is-now{color:#1F6B4C; border-bottom-color:#2E8060}
.wrap-key .ovw.is-blocked .ovw-spk{animation:none}
.prose .wrap-key .ovw-p.wrap-key-t{font-size:1.1rem; line-height:1.95; margin:0}
.wrap-key .ovw-text{padding-inline-end:0}

/* sound on / off only (every recording outside the ওভারভিউ pages): muted = still, grey wave + crossed speaker */
.ovw.is-playing.is-muted .ovw-eq i, .vsound.is-playing.is-muted .ovw-eq i, .wrap-key .ovw.is-playing.is-muted .ovw-eq i{animation:none; height:25%; background:var(--paper-400, #A9B4BB)}
.ovw.is-muted .ovw-spk, .vsound.is-muted .ovw-spk{color:var(--paper-500, #7C8A93)}
.wrap-key .ovw.is-muted .ovw-spk{color:#6E8F7F}

/* learning objectives (শিখন উদ্দেশ্য): Kalpurush, regular weight (the face has no bold — no faux bold) */
.ovw-aims-hd h3, .ovw-aims-lead, .ovw-aim-t, .ovw-aim-n, .aim-list .aim-t, .aim-list .aim-n,
.prose .aim-list li{
  font-family:"Kalpurush", var(--font-title), var(--font);
  font-weight:400; font-synthesis:none;
}

/* overview text and objectives use the full card width (no 36em measure) */
.ovw-text, .ovw-aim-t{max-width:none}

/* ==========================================================================
   Narrated bubbles — a bubble / conversation that reads itself in the overview style.
   Text is on the page from the start (dim); words light up with the voice; one control: sound on / off.
   ========================================================================== */
.nar .ovw-w{ cursor:default }
.nar:not(.is-playing):not(.is-waiting):not(.is-done):not(.is-nofile) .ovw-w:not(.is-on){ opacity:.6 }
.nar.is-done .ovw-w, .nar.is-nofile .ovw-w{ opacity:1 }
.nar .ovw-w.is-now{ color:#d67300; border-bottom-color:#d67300 }
.nar .ovw-hint{ font-size:var(--fs-caption, 13px); color:#7A4A14; white-space:nowrap }
.nar.is-playing .vsound .ovw-eq i{ background:var(--petrol-500, #2A7194); animation:ovw-eq 1s ease-in-out infinite }
.nar.is-playing .vsound .ovw-eq i:nth-child(2){ animation-delay:-.25s }
.nar.is-playing .vsound .ovw-eq i:nth-child(3){ animation-delay:-.5s }
.nar.is-playing .vsound .ovw-eq i:nth-child(4){ animation-delay:-.75s }
.nar.is-playing .vsound .ovw-eq i:nth-child(5){ animation-delay:-.4s }
.nar.is-playing.is-muted .vsound .ovw-eq i{ animation:none; height:25%; background:var(--paper-400, #A9B4BB) }
.nar.is-muted .vsound .ovw-spk{ color:var(--paper-500, #7C8A93) }
.nar.is-blocked .vsound .ovw-spk{ animation:ovw-ping 1.8s ease-out infinite }
.nar-head{ display:flex; justify-content:flex-end; align-items:center; margin:0 0 8px }
.chatbox > .nar-head{ padding:0 2px }
.nar.chat-thread .chat-bubble .talk-words{ min-height:0 }
@media (prefers-reduced-motion:reduce){
  .nar.is-playing .vsound .ovw-eq i{ animation:none; height:60% }
  .nar.is-blocked .vsound .ovw-spk{ animation:none }
}

/* a real film inside a page (video block with a `src`) */
.vid-card.is-film{ background:var(--s-elev) }
.vid-card.is-film .vid-film{ background:#000; line-height:0 }
.vid-card.is-film .vid-mins{ color:var(--s-mute, #6B7A84); font-weight:400 }
.chatbox > .nar-head, .forum-talk > .nar-head{ position:sticky; top:6px; z-index:4; pointer-events:none }
.nar-head .vsound{ pointer-events:auto; background:var(--s-elev, #fff); border-radius:999px; padding:2px 2px 2px 10px; box-shadow:0 1px 6px rgba(2,29,42,.12) }

/* ==========================================================================
   Laptop scene — Nadia's thought is written on the screen, under the screen text
   ========================================================================== */
.lap-screen .lap-os-body{ display:flex; flex-direction:column }
.lap-os-body > .lap-copy, .lap-os-body > .lap-aims{ height:auto; flex:0 0 auto }
.lap-sthought{ margin-top:auto; padding-top:clamp(4px, .7vw, 9px); border-top:1px dashed rgba(243,215,183,.45); display:flex; flex-direction:column; gap:2px }
.lap-sthought.is-in{ animation:lap-fade .35s var(--ease) both }
.lap-sthought-head{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.lap-sthought-who{ margin:0; font-size:clamp(8px, .95vw, 11px); font-weight:500; color:#F3D7B7; text-shadow:0 1px 2px rgba(0,0,0,.7) }
.lap-os-body .lap-sthought-t{ margin:0; font-size:clamp(11px, 1.2vw, 14.5px); line-height:1.5; color:#F4FBFF; text-shadow:0 0 6px rgba(160,210,255,.22), 0 1px 2px rgba(0,0,0,.75) }
.lap-sthought .vsound{ gap:5px }
.lap-sthought .ovw-spk{ width:clamp(20px, 2.1vw, 28px); height:clamp(20px, 2.1vw, 28px); background:rgba(243,215,183,.18); color:#FFC27A }
.lap-sthought .ovw-spk svg{ width:62%; height:62% }
.lap-sthought .ovw-hint{ color:#F3D7B7; font-size:clamp(8px, .9vw, 11px) }
.lap-sthought .ovw-eq{ height:clamp(10px, 1.2vw, 14px) }
.lap-sthought.nar.is-playing .vsound .ovw-eq i{ background:#FFC27A }
.lap-sthought.nar.is-muted .vsound .ovw-spk{ color:rgba(244,251,255,.6) }
.lap-sthought.nar.is-playing.is-muted .vsound .ovw-eq i{ background:rgba(244,251,255,.45) }
.lap-sthought.nar .ovw-w.is-now{ color:#FFC27A; border-bottom-color:#FFC27A }
.lap-sthought.nar:not(.is-playing):not(.is-waiting):not(.is-done):not(.is-nofile) .ovw-w:not(.is-on){ opacity:.7 }

/* every video card: title in the brand colour */
.vid-card .vid-title{ color:var(--s-brand-h, #1A5876) }
.chatbox.vscene .vid-card{ margin:0 }

/* ==========================================================================
   Side card — one look for every single-speaker moment: a brand-themed text card on one side,
   the picture on the other. A small accent bar on the top edge (like the sidebar's active item).
   ========================================================================== */
.side-split.is-card{ grid-template-columns:minmax(0, 1fr) minmax(200px, 300px); gap:40px; align-items:center; margin:10px 0 }
.side-card{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:28px 30px 28px;
  background:var(--s-brand-pale, #ECF4F9);
  border:1px solid var(--petrol-100, #D3E5EF);
  border-radius:var(--r-lg, 12px);
}
.side-card::before{
  content:""; position:absolute; top:-1px; left:16px; width:28px; height:3px;
  border-radius:0 0 3px 3px; background:var(--s-acc, #BC7C3E);
}
.side-card-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:28px }
.side-card-who{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; min-width:0 }
.side-card-name{ font-size:var(--fs-caption, 13px); font-weight:600; letter-spacing:.02em; color:var(--s-brand-h, #1A5876) }
.side-card-dir{ font-size:var(--fs-caption, 13px); color:var(--paper-600, #5F6D75) }
.side-card-dir::before{ content:"· " }
.side-card-t{ margin:0; font-size:clamp(17px, .4vw + 15px, 19.5px); line-height:1.95; color:var(--s-brand-a, #003B53) }
.side-card-list{ margin:0; padding:0; list-style:none; display:grid; gap:8px }
.side-card-list > li{ position:relative; padding-inline-start:20px }
.side-card-list > li::before{ content:""; position:absolute; inset-inline-start:2px; top:.95em; width:7px; height:7px; border-radius:50%; background:var(--s-brand, #2F789B) }
.side-card-close{ margin:0; padding-top:14px; border-top:1px solid var(--petrol-100, #D3E5EF); font-size:clamp(17px, .4vw + 15px, 19.5px); line-height:1.95; color:var(--s-brand-a, #003B53); font-weight:600 }
.side-card .now-cut-cite{ margin:0; padding:2px 0 2px 14px; background:none; border:0; border-inline-start:3px solid var(--petrol-200, #B3D0E2) }
.side-card .now-cut-cite-t{ color:var(--s-brand-a, #003B53) }
.side-card .ovw-spk{ background:#fff; color:var(--s-brand, #2F789B) }
.side-card .ovw-spk:hover{ background:#fff; color:var(--s-brand-h, #1A5876) }
.side-card .ovw-hint{ color:var(--s-brand-h, #1A5876) }
.side-card .vsound.is-placeholder .ovw-spk{ color:var(--petrol-500, #4992B8) }
.side-card.nar .ovw-w.is-now{ color:var(--s-brand, #2F789B); border-bottom-color:var(--s-brand, #2F789B) }
.side-card.nar.is-muted .vsound .ovw-spk{ color:var(--paper-500, #7C8A93) }
.side-card .vsound .ovw-hint{ color:var(--s-brand-h, #1A5876) }
.side-split.is-card .side-split-img img{ max-width:290px; width:100% }
.side-photo{ position:relative; aspect-ratio:4 / 3; border-radius:var(--r-lg, 12px); overflow:hidden; background:var(--petrol-50, #ECF4F9) }
.side-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block }
.side-photo .face{ position:absolute; inset:0; margin:auto }
.now-cut.is-bubble .spk-card{ margin:0 }
@media (max-width:719px){
  .side-split.is-card{ grid-template-columns:1fr; gap:20px }
  .side-card{ padding:22px 20px 22px }
  .side-split.is-card .side-split-img{ justify-content:center }
  .side-split.is-card .side-split-img img{ max-width:210px }
  .side-photo{ aspect-ratio:16 / 10; max-height:220px }
}

/* text card only (the picture lives in the page banner) */
.side-split.is-card.is-bare{ grid-template-columns:minmax(0, 1fr) }

/* ---- wrap page: recording that reads the "learned" points (SM3 / SM4) ---- */
.wrap-learn.ovw.ovw-list{ animation:none; display:block }
.wrap-learn.ovw-list .wrap-learn-h .ovw-sound{ margin-left:auto }
.wrap-learn.ovw-list .ovw-spk{ background:#D5EBDF; color:#2E8060 }
.wrap-learn.ovw-list .ovw-spk:hover{ background:#C6E2D3; color:#1F6B4C }
.wrap-learn.ovw-list.is-paused .ovw-spk, .wrap-learn.ovw-list.is-blocked .ovw-spk{ color:#2E8060 }
.wrap-learn.ovw-list .ovw-hint{ color:#1F6B4C }
.wrap-learn.ovw-list .ovw-eq i{ background:#9CC5B0 }
.wrap-learn.ovw-list.is-playing .ovw-eq i{ background:#2E8060 }
.wrap-learn.ovw-list .ovw-w{ cursor:inherit }
.wrap-learn.ovw-list .ovw-w.is-now{ color:#1F6B4C; border-bottom-color:#2E8060 }

/* ---- laptop screen: Nadia's thought sits in a thought bubble (not bare text) ---- */
.lap-os-body .lap-sthought{
  position:relative; margin-top:auto; margin-right:clamp(10px, 1.6vw, 20px); margin-bottom:clamp(8px, 1.1vw, 14px);
  padding:clamp(7px, .9vw, 12px) clamp(9px, 1.2vw, 15px) clamp(8px, 1vw, 13px);
  border-top:0; gap:3px;
  background:#FFF7EC; border:1px solid #F0D2AE; border-radius:clamp(12px, 1.5vw, 18px);
}
.lap-os-body .lap-sthought::before,
.lap-os-body .lap-sthought::after{
  content:""; position:absolute; border-radius:50%; background:#FFF7EC; border:1px solid #F0D2AE;
}
.lap-os-body .lap-sthought::before{ width:clamp(7px, .9vw, 11px); height:clamp(7px, .9vw, 11px); right:clamp(12px, 2vw, 26px); bottom:calc(-1 * clamp(8px, 1vw, 12px)) }
.lap-os-body .lap-sthought::after{ width:clamp(4px, .55vw, 7px); height:clamp(4px, .55vw, 7px); right:clamp(4px, .8vw, 11px); bottom:calc(-1 * clamp(14px, 1.7vw, 20px)) }
.lap-os-body .lap-sthought-who{ color:#7A4A14; text-shadow:none }
.lap-os-body .lap-sthought-t{ color:#1F3340; text-shadow:none }
.lap-os-body .lap-sthought .ovw-spk{ background:#F6DDBE; color:#B4651A }
.lap-os-body .lap-sthought .ovw-hint{ color:#7A4A14 }
.lap-os-body .lap-sthought .ovw-eq i{ background:#E6C79D }
.lap-os-body .lap-sthought.nar.is-playing .vsound .ovw-eq i{ background:#B4651A }
.lap-os-body .lap-sthought.nar.is-muted .vsound .ovw-spk{ color:#9A7B58 }
.lap-os-body .lap-sthought.nar.is-playing.is-muted .vsound .ovw-eq i{ background:#CDB08A }
.lap-os-body .lap-sthought.nar .ovw-w.is-now{ color:#B4651A; border-bottom-color:#B4651A }
.lap-os-body .lap-sthought.nar:not(.is-playing):not(.is-waiting):not(.is-done):not(.is-nofile) .ovw-w:not(.is-on){ opacity:.5 }

/* ---- audio controls & lit words use the primary brand colour (no orange) ---- */
.ovw-spk{ background:var(--petrol-100, #DDEFFA); color:var(--s-brand, #2F789B) }
.ovw-spk:hover{ background:var(--petrol-200, #C7E3F4); color:var(--s-brand-h, #1A5876) }
.ovw.is-paused .ovw-spk, .ovw.is-blocked .ovw-spk, .ovw.is-muted .ovw-spk{ color:var(--s-brand, #2F789B) }
@keyframes ovw-ping{ 0%{ box-shadow:0 0 0 0 rgba(47,120,155,.4) } 80%,100%{ box-shadow:0 0 0 11px rgba(47,120,155,0) } }
.ovw.is-playing .ovw-eq i{ background:var(--s-brand, #2F789B) }
.ovw-w.is-now{ color:var(--s-brand, #2F789B); border-bottom-color:var(--s-brand, #2F789B) }
.nar .ovw-w.is-now{ color:var(--s-brand, #2F789B); border-bottom-color:var(--s-brand, #2F789B) }
.vsound .ovw-hint, .nar .ovw-hint, .ovw-hint{ color:var(--s-brand-h, #1A5876) }
.vsound.is-paused .ovw-spk, .vsound.is-blocked .ovw-spk{ color:var(--s-brand, #2F789B) }

/* laptop-screen thought bubble: same brand tint */
.lap-os-body .lap-sthought{ background:var(--s-brand-pale, #ECF4F9); border-color:#B9D6E8 }
.lap-os-body .lap-sthought::before, .lap-os-body .lap-sthought::after{ background:var(--s-brand-pale, #ECF4F9); border-color:#B9D6E8 }
.lap-os-body .lap-sthought-who{ color:var(--s-brand-h, #1A5876) }
.lap-os-body .lap-sthought .ovw-spk{ background:var(--petrol-100, #DDEFFA); color:var(--s-brand, #2F789B) }
.lap-os-body .lap-sthought .ovw-hint{ color:var(--s-brand-h, #1A5876) }
.lap-os-body .lap-sthought .ovw-eq i{ background:#9CC4DB }
.lap-os-body .lap-sthought.nar.is-playing .vsound .ovw-eq i{ background:var(--s-brand, #2F789B) }
.lap-os-body .lap-sthought.nar.is-muted .vsound .ovw-spk{ color:#7B9BAE }
.lap-os-body .lap-sthought.nar.is-playing.is-muted .vsound .ovw-eq i{ background:#A9C3D2 }
.lap-os-body .lap-sthought.nar .ovw-w.is-now{ color:var(--s-brand, #2F789B); border-bottom-color:var(--s-brand, #2F789B) }

/* single-speaker card: the picture is as tall as the text card (desktop / laptop) */
.side-split.is-card.spk-card:not(.is-bare){ align-items:stretch }
.spk-card .side-photo{ aspect-ratio:auto; min-height:200px }
@media (max-width:719px){
  .spk-card .side-photo{ aspect-ratio:16 / 10; min-height:0; max-height:220px }
}

/* ==========================================================================
   আলোচনা ফোরাম — real-forum layout (.fx-*)  · topic table, thread, composer
   ========================================================================== */
.notebook-view.fx{ max-width:min(1040px, 100%); gap:var(--s4); font-family:var(--bn) }
.fx-crumb{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; font-size:var(--fs-small); color:var(--s-mute) }
.fx-crumb svg{ width:14px; height:14px; flex:none }
.fx-crumb-l{ border:0; background:none; padding:0; font:inherit; color:var(--s-brand); cursor:pointer }
.fx-crumb-l:hover{ color:var(--s-brand-a); text-decoration:underline }
.fx-crumb-c{ color:var(--s-tx); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46ch }

.fx-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap }
.fx-head-t{ display:flex; flex-direction:column; gap:8px; flex:1 1 360px; min-width:0 }
.fx-new{ display:inline-flex; align-items:center; gap:8px; flex:none }
.fx-new svg{ width:16px; height:16px }

.fx-stats{ display:grid; grid-template-columns:repeat(3,1fr); background:var(--s-elev); border:1px solid var(--s-line); border-radius:var(--r-lg); overflow:hidden }
.fx-stat{ display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 8px; color:var(--s-mute); font-size:var(--fs-small) }
.fx-stat + .fx-stat{ border-inline-start:1px solid var(--s-line) }
.fx-stat svg{ width:17px; height:17px; color:var(--s-brand) }
.fx-stat strong{ color:var(--s-tx); font-size:1.15em }

.fx-bar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.fx-search{ flex:1 1 240px; display:flex; align-items:center; gap:8px; padding:0 12px; height:44px; background:var(--s-elev); border:1px solid var(--s-line-mid); border-radius:var(--r-lg); color:var(--s-mute) }
.fx-search:focus-within{ border-color:var(--s-brand); box-shadow:0 0 0 3px var(--s-brand-soft) }
.fx-search svg{ width:17px; height:17px; flex:none }
.fx-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:var(--fs-small); color:var(--s-tx) }
.fx-tabs{ display:flex; gap:4px; padding:4px; background:var(--s-sunken); border-radius:var(--r-lg) }
.fx-tab{ border:0; background:transparent; padding:8px 14px; border-radius:calc(var(--r-lg) - 4px); font:inherit; font-size:var(--fs-small); color:var(--s-mute); cursor:pointer; white-space:nowrap }
.fx-tab:hover{ color:var(--s-tx) }
.fx-tab.is-on{ background:var(--s-elev); color:var(--s-brand-a); font-weight:700; box-shadow:var(--s-sh1) }

/* topic table */
.fx-table{ background:var(--s-elev); border:1px solid var(--s-line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--s-sh1) }
.fx-th, .fx-row{ display:grid; grid-template-columns:minmax(0,1fr) 72px 72px 210px; align-items:center; gap:12px; padding:0 16px }
.fx-th{ padding-block:10px; background:var(--s-sunken); border-bottom:1px solid var(--s-line); font-size:var(--fs-caption); font-weight:700; color:var(--s-mute) }
.fx-th-n{ text-align:center }
.fx-rows{ display:flex; flex-direction:column }
.fx-row{ width:100%; padding-block:14px; border:0; border-top:1px solid var(--s-line); background:transparent; text-align:start; font-family:var(--bn); color:inherit; cursor:pointer }
.fx-rows .fx-row:first-child{ border-top:0 }
.fx-row:hover, .fx-row:focus-visible{ background:var(--s-brand-pale); outline:0 }
.fx-r-main{ display:flex; gap:12px; align-items:flex-start; min-width:0 }
.fx-r-ico{ flex:none; width:38px; height:38px; border-radius:var(--r-full); background:var(--s-brand-tint); color:var(--s-brand-a); display:grid; place-items:center }
.fx-r-ico svg{ width:18px; height:18px }
.fx-r-ico.is-pin{ background:var(--s-acc-pale); color:var(--s-acc) }
.fx-r-tx{ min-width:0; display:flex; flex-direction:column; gap:5px }
.fx-r-t{ margin:0; font-size:var(--fs-ui); font-weight:700; line-height:1.5; color:var(--s-tx) }
.fx-row:hover .fx-r-t{ color:var(--s-brand-a) }
.fx-r-meta{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:var(--fs-caption); color:var(--s-mute) }
.fx-chip{ display:inline-block; padding:2px 9px; border-radius:var(--r-full); background:var(--s-brand-tint); color:var(--s-brand-a); font-size:var(--fs-caption); font-weight:600; line-height:1.6 }
.fx-chip.is-self{ background:var(--s-acc-pale); color:var(--s-acc) }
.fx-r-n{ display:flex; flex-direction:column; align-items:center; line-height:1.3 }
.fx-r-n strong{ font-size:var(--fs-ui); color:var(--s-tx) }
.fx-r-n small{ font-size:var(--fs-caption); color:var(--s-mute) }
.fx-r-last{ display:flex; align-items:center; gap:10px; min-width:0 }
.fx-r-lt{ display:flex; flex-direction:column; min-width:0; line-height:1.4 }
.fx-r-lt strong{ font-size:var(--fs-caption); color:var(--s-tx); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fx-r-lt small{ font-size:var(--fs-caption); color:var(--s-mute) }
.fx-stack{ display:flex; flex:none }
.fx-stack .fx-av + .fx-av{ margin-inline-start:-8px }
.fx-none{ margin:0; padding:32px 16px; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--s-mute); font-size:var(--fs-small) }
.fx-none svg{ width:24px; height:24px }

/* avatars */
.fx-av{ flex:none; width:44px; height:44px; border-radius:var(--r-full); display:grid; place-items:center; font-weight:700; font-size:var(--fs-small); border:2px solid var(--s-elev); color:#fff }
.fx-av svg{ width:21px; height:21px }
.fx-av.is-xs{ width:28px; height:28px; font-size:var(--fs-caption) }
.fx-av.is-xs svg{ width:14px; height:14px }
.fx-c0{ background:#2F789B } .fx-c1{ background:#2E8060 } .fx-c2{ background:#8A5A9C }
.fx-c3{ background:#B8742A } .fx-c4{ background:#4F6BA8 } .fx-c5{ background:#B55A6A }
.fx-av.is-fac{ background:var(--s-brand-a) }
.fx-av.is-self{ background:var(--s-acc) }

/* topic header */
.fx-th1{ display:flex; flex-direction:column; align-items:flex-start; gap:10px }
.fx-title{ margin:0 }
.fx-tmeta{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:var(--fs-small); color:var(--s-mute) }
.fx-tm{ display:inline-flex; align-items:center; gap:6px }
.fx-tm svg{ width:15px; height:15px; color:var(--s-brand) }
.fx-rules{ background:var(--s-brand-pale); border:1px solid var(--s-line); border-radius:var(--r-lg); padding:10px 14px; font-size:var(--fs-small); color:var(--s-tx) }
.fx-rules summary{ display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:700; color:var(--s-brand-a); list-style:none }
.fx-rules summary::-webkit-details-marker{ display:none }
.fx-rules summary svg{ width:17px; height:17px }
.fx-rules ul{ margin:10px 0 2px; padding-inline-start:20px; display:flex; flex-direction:column; gap:4px; line-height:1.8 }

/* thread */
.fx-thread{ display:flex; flex-direction:column; gap:12px }
.fx-post{ display:grid; grid-template-columns:168px minmax(0,1fr); background:var(--s-elev); border:1px solid var(--s-line); border-radius:var(--r-lg); box-shadow:var(--s-sh1); overflow:hidden; scroll-margin-top:90px }
.fx-post.is-op{ border-color:var(--s-line-mid) }
.fx-post.is-fac{ border-color:var(--s-brand) }
.fx-post.is-fac .fx-au{ background:var(--s-brand-pale) }
.fx-post.is-self{ border-color:var(--s-acc) }
.fx-post.is-flash{ animation:fx-flash 1.6s ease-out }
@keyframes fx-flash{ 0%,40%{ box-shadow:0 0 0 3px var(--s-brand-soft) } 100%{ box-shadow:var(--s-sh1) } }
.fx-au{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:18px 12px; background:var(--s-sunken); border-inline-end:1px solid var(--s-line) }
.fx-au .fx-av{ width:56px; height:56px; font-size:var(--fs-ui) }
.fx-au .fx-av svg{ width:26px; height:26px }
.fx-who{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0 }
.fx-name{ font-size:var(--fs-small); line-height:1.4; color:var(--s-tx); overflow-wrap:anywhere }
.fx-role{ display:inline-block; padding:2px 10px; border-radius:var(--r-full); background:var(--s-line); color:var(--s-mute); font-size:var(--fs-caption); font-weight:600 }
.fx-role.is-fac{ background:var(--s-brand-a); color:#fff }
.fx-role.is-self{ background:var(--s-acc-pale); color:var(--s-acc) }
.fx-pb{ padding:14px 18px 12px; display:flex; flex-direction:column; gap:12px; min-width:0 }
.fx-ph{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px dashed var(--s-line); font-size:var(--fs-caption); color:var(--s-mute) }
.fx-when{ display:inline-flex; align-items:center; gap:6px }
.fx-when svg{ width:13px; height:13px }
.fx-no{ font-weight:700; color:var(--s-brand) }
.fx-text{ margin:0; font-size:var(--fs-body); line-height:1.95; color:var(--s-tx); white-space:pre-wrap; overflow-wrap:anywhere }
.fx-quote{ display:flex; flex-direction:column; gap:4px; width:100%; text-align:start; padding:10px 12px; background:var(--s-sunken); border:0; border-inline-start:3px solid var(--s-brand); border-radius:0 var(--r-lg) var(--r-lg) 0; font-family:var(--bn); cursor:pointer; color:var(--s-mute) }
.fx-quote:hover{ background:var(--s-brand-pale) }
.fx-quote-h{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-caption); font-weight:700; color:var(--s-brand-a) }
.fx-quote-h svg{ width:13px; height:13px }
.fx-quote-t{ font-size:var(--fs-small); line-height:1.7 }
.fx-pf{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; padding-top:10px; border-top:1px solid var(--s-line) }
.fx-act{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--s-line); border-radius:var(--r-full); background:transparent; font-family:var(--bn); font-size:var(--fs-caption); color:var(--s-mute); cursor:pointer }
.fx-act svg{ width:15px; height:15px }
.fx-act:hover{ border-color:var(--s-brand); color:var(--s-brand-a); background:var(--s-brand-pale) }
.fx-like.is-on{ background:var(--s-brand-tint); border-color:var(--s-brand); color:var(--s-brand-a); font-weight:700 }
.fx-like.is-on svg{ fill:currentColor }
.fx-del{ margin-inline-start:auto }
.fx-del:hover{ border-color:var(--s-bad); color:var(--s-bad); background:transparent }

/* composer */
.fx-compose{ display:flex; flex-direction:column; gap:12px; padding:16px 18px; background:var(--s-elev); border:1px solid var(--s-brand); border-radius:var(--r-lg); box-shadow:var(--s-sh1) }
.fx-compose-h{ display:flex; align-items:center; gap:8px; color:var(--s-brand-a) }
.fx-compose-h svg{ width:18px; height:18px }
.fx-replying{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--s-brand-pale); border-radius:var(--r-lg); font-size:var(--fs-small); color:var(--s-brand-a) }
.fx-replying svg{ width:15px; height:15px; flex:none }
.fx-replying span{ flex:1; min-width:0 }
.fx-replying-x{ border:0; background:transparent; cursor:pointer; color:var(--s-mute); padding:2px; display:grid; place-items:center }
.fx-input{ width:100%; box-sizing:border-box; padding:10px 12px; background:var(--s-elev); border:1px solid var(--s-line-mid); border-radius:var(--r-lg); font:inherit; font-size:var(--fs-body); color:var(--s-tx) }
.fx-input:focus{ outline:0; border-color:var(--s-brand); box-shadow:0 0 0 3px var(--s-brand-soft) }
.fx-ta{ resize:vertical; line-height:1.9; min-height:110px }
.fx-compose-r{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between }
.fx-name-in{ flex:1 1 200px; width:auto; max-width:320px; font-size:var(--fs-small) }
.fx-notice{ margin:0; display:flex; gap:8px; align-items:flex-start; font-size:var(--fs-caption); line-height:1.8; color:var(--s-mute) }
.fx-notice svg{ width:15px; height:15px; flex:none; margin-top:4px }

/* new topic form */
.fx-form{ display:flex; flex-direction:column; gap:16px; padding:20px; background:var(--s-elev); border:1px solid var(--s-line); border-radius:var(--r-lg); box-shadow:var(--s-sh1) }
.fx-field{ display:flex; flex-direction:column; gap:6px }
.fx-label{ font-size:var(--fs-small); font-weight:700; color:var(--s-tx) }
.fx-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap }

/* phones / tablets — table collapses into stacked cards, author column becomes a row */
@media (max-width:820px){
  .fx-th{ display:none }
  .fx-row{ grid-template-columns:1fr 1fr; grid-template-areas:"main main" "rn vn" "last last"; gap:10px 8px; padding-block:14px }
  .fx-r-main{ grid-area:main }
  .fx-r-n{ flex-direction:row; justify-content:flex-start; gap:5px; align-items:baseline }
  .fx-r-n:nth-of-type(1){ grid-area:rn }
  .fx-r-n:nth-of-type(2){ grid-area:vn }
  .fx-r-last{ grid-area:last; padding-top:10px; border-top:1px dashed var(--s-line) }
  .fx-post{ grid-template-columns:1fr }
  .fx-au{ flex-direction:row; justify-content:flex-start; text-align:start; padding:12px 14px; border-inline-end:0; border-bottom:1px solid var(--s-line) }
  .fx-au .fx-av{ width:40px; height:40px }
  .fx-who{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 10px }
  .fx-pb{ padding:12px 14px }
  .fx-tabs{ width:100% } .fx-tab{ flex:1; padding-inline:8px }
  .fx-new{ width:100%; justify-content:center }
}

/* ---- forum · profiles, members grid, best answer ---- */
.fx-name-l{ border:0; background:none; padding:0; font-family:var(--bn); font-weight:700; color:var(--s-brand-a); cursor:pointer }
.fx-name-l:hover{ text-decoration:underline }
.fx-sub{ display:flex; flex-direction:column; gap:2px; font-size:var(--fs-caption); color:var(--s-mute); line-height:1.5 }
.fx-best{ display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:var(--r-full); background:var(--s-ok); color:#fff; font-size:var(--fs-caption); font-weight:700; margin-inline-start:auto; margin-inline-end:10px }
.fx-best svg{ width:14px; height:14px }
.fx-post.is-best{ border-color:var(--s-ok) }
.fx-sec{ display:flex; flex-direction:column; gap:12px; margin-top:8px }
.fx-sec-h{ display:flex; align-items:center; gap:8px; color:var(--s-brand-a) }
.fx-sec-h svg{ width:18px; height:18px }
.fx-sec-h h2{ margin:0; font-size:var(--fs-h3); font-weight:700 }
.fx-sec-n{ margin-inline-start:auto; font-size:var(--fs-caption); color:var(--s-mute) }
.fx-members{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:10px }
.fx-mcard{ display:flex; align-items:center; gap:12px; padding:12px; text-align:start; background:var(--s-elev); border:1px solid var(--s-line); border-radius:var(--r-lg); font-family:var(--bn); cursor:pointer; color:inherit }
.fx-mcard:hover{ border-color:var(--s-brand); background:var(--s-brand-pale) }
.fx-mc-tx{ display:flex; flex-direction:column; min-width:0; line-height:1.5 }
.fx-mc-tx strong{ font-size:var(--fs-small); color:var(--s-tx) }
.fx-mc-tx small{ font-size:var(--fs-caption); color:var(--s-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fx-prof{ display:flex; gap:20px; padding:22px; background:var(--s-elev); border:1px solid var(--s-line); border-radius:var(--r-lg); box-shadow:var(--s-sh1) }
.fx-av.is-xl{ width:92px; height:92px; font-size:2rem }
.fx-av.is-xl svg{ width:42px; height:42px }
.fx-prof-i{ display:flex; flex-direction:column; gap:10px; min-width:0 }
.fx-prof-n{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px }
.fx-prof-h{ margin:0; font-size:var(--fs-h2); line-height:1.4; color:var(--s-tx) }
.fx-facts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:var(--fs-small); color:var(--s-mute) }
.fx-facts li{ display:flex; align-items:flex-start; gap:8px }
.fx-facts svg{ width:15px; height:15px; color:var(--s-brand); margin-top:5px; flex:none }
.fx-bio{ margin:0; font-size:var(--fs-body); line-height:1.9; color:var(--s-tx); padding-top:10px; border-top:1px dashed var(--s-line) }
.fx-recent{ display:flex; flex-direction:column; gap:8px }
.fx-rec{ display:flex; flex-direction:column; gap:4px; padding:12px 14px; text-align:start; background:var(--s-elev); border:1px solid var(--s-line); border-radius:var(--r-lg); font-family:var(--bn); cursor:pointer; color:inherit }
.fx-rec:hover{ border-color:var(--s-brand); background:var(--s-brand-pale) }
.fx-rec-h{ display:flex; justify-content:space-between; gap:10px }
.fx-rec-h strong{ font-size:var(--fs-small); color:var(--s-brand-a) }
.fx-rec-h small{ font-size:var(--fs-caption); color:var(--s-mute); flex:none }
.fx-rec-t{ font-size:var(--fs-small); line-height:1.8; color:var(--s-tx) }
@media (max-width:820px){
  .fx-prof{ flex-direction:column; align-items:center; text-align:center; padding:18px }
  .fx-prof-n{ justify-content:center } .fx-facts li{ text-align:start }
  .fx-sub{ flex-direction:row; flex-wrap:wrap; gap:2px 10px }
  .fx-best{ margin-inline-start:0 }
}

/* ---- forum · list as separate light cards; medium colourful titles; minimal tag ---- */
.fx-table{ background:transparent; border:0; box-shadow:none; overflow:visible; border-radius:0 }
.fx-th{ background:transparent; border-bottom:0; padding-block:0 4px }
.fx-rows{ gap:10px }
.fx-row, .fx-rows .fx-row:first-child{ border:1px solid var(--s-line); border-radius:var(--r-lg); background:var(--s-brand-pale); padding-block:14px; transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) }
.fx-row:hover, .fx-row:focus-visible{ background:var(--s-elev); border-color:var(--s-brand); box-shadow:var(--s-sh1) }
.fx-r-t{ font-weight:500; color:var(--s-brand) }
.fx-row:hover .fx-r-t{ color:var(--s-brand-a) }
.fx-chip{ background:none; padding:0; border-radius:0; color:var(--s-acc); font-weight:600 }
.fx-chip::before{ content:'#' }
.fx-chip.is-self{ background:none; color:var(--s-ok) }
.fx-chip.is-self::before{ content:'' }
.fx-title, .fx-th1 .content-h1{ font-weight:500 }
.fx-th1 .fx-chip{ font-size:var(--fs-small) }

/* ---- আরও জানতে · resource cards — same light card + medium colourful title as the forum list ---- */
.res-card{ background:var(--s-brand-pale); box-shadow:none; transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) }
.res-card:hover{ background:var(--s-elev); border-color:var(--s-brand); box-shadow:var(--s-sh1) }
.res-mark{ background:var(--s-elev) }
.res-title{ font-weight:500; color:var(--s-brand) }
.res-card:hover .res-title{ color:var(--s-brand-a) }
.res-open{ background:var(--s-elev) }