/* Printable question sheet — deliberately plain, ink-friendly. */
.bqp{max-width:820px;margin:0 auto;padding:26px 22px 60px;
  font-family:"Nirmala UI","Hind Siliguri","SolaimanLipi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#111;line-height:1.85;font-size:15.5px}
.bqp-bar{display:flex;gap:14px;align-items:center;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid #ddd}
.bqp-bar button{background:#0d9f5f;color:#fff;border:0;border-radius:8px;padding:9px 20px;
  font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}
.bqp-bar a{color:#0d9f5f;font-size:14px;text-decoration:none}
.bqp-head{text-align:center;margin-bottom:26px}
.bqp-head h1{font-size:22px;margin:0 0 4px}
.bqp-head p{margin:2px 0;font-size:14.5px;color:#444}
.bqp-meta{margin-top:14px!important;font-size:13.5px!important;color:#111!important;letter-spacing:.02em}
.bqp-list{padding-left:26px;margin:0}
.bqp-list > li{margin-bottom:16px;page-break-inside:avoid}
.bqp-q{margin:0 0 7px}
.bqp-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 20px;font-size:15px}
.bqp-stem{border-left:3px solid #999;padding:6px 0 6px 12px;margin-bottom:8px;background:#fafafa}
.bqp-sub{margin:6px 0 0}
.bqp-ans{margin:2px 0 0 18px;color:#333;font-size:14.5px;border-left:2px solid #ddd;padding-left:10px}
.bqp-key{margin-top:30px;border-top:2px solid #111;padding-top:14px;page-break-inside:avoid}
.bqp-key h2{font-size:16px;margin:0 0 10px}
.bqp-keygrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;font-size:14px}
.bqp-foot{margin-top:36px;padding-top:12px;border-top:1px solid #ddd;text-align:center;font-size:12.5px;color:#777}
@media print{
  .no-print{display:none!important}
  .bqp{padding:0;font-size:12.5pt}
  .bqp-opts{font-size:12pt}
  @page{margin:14mm}
}
@media (max-width:640px){
  .bqp-opts{grid-template-columns:1fr}
  .bqp-keygrid{grid-template-columns:repeat(4,1fr)}
}

/* the teacher's own heading, and the credit line at the foot */
.bqp-head h1{font-size:20px;margin:0 0 3px;letter-spacing:.01em}
.bqp-contact{margin:0 0 10px!important;font-size:13.5px!important;color:#333!important}
.bqp-paper{margin:0 0 4px!important;font-size:15px!important;font-weight:600;color:#111!important}
.bqp-foot{font-size:12px;letter-spacing:.03em}
@media print{
  .bqp-foot{position:fixed;bottom:0;left:0;right:0}
}

/* ==========================================================================
   Two documents in one page: only the one on screen goes to the printer
   ========================================================================== */
.bqp-bar{flex-wrap:wrap;gap:10px 18px;justify-content:space-between}
.bqp-tabs{display:inline-flex;border:1px solid #ddd;border-radius:8px;overflow:hidden}
.bqp-tabs button{background:#fff;border:0;padding:9px 20px;font-size:14.5px;cursor:pointer;
  font-family:inherit;color:#444}
.bqp-tabs button.on{background:#0d9f5f;color:#fff;font-weight:600}
.bqp-prints{display:inline-flex;gap:9px;flex-wrap:wrap}
.bqp-go{background:#0d9f5f;color:#fff;border:0;border-radius:8px;padding:9px 18px;
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.bqp-go:hover{filter:brightness(1.08)}

.bqp-doc[hidden]{display:none}
.bqp-keygrid.big{grid-template-columns:repeat(5,1fr);gap:10px;font-size:16px;margin-top:8px}
.bqp-keygrid.big b{color:#0d9f5f}
.bqp-exph{font-size:16px;margin:26px 0 10px;border-top:1px solid #ddd;padding-top:14px}
.bqp-expl li{margin-bottom:10px}

@media print{
  /* whichever document is on screen is the one that prints */
  body.view-q #bqp-a,
  body.view-a #bqp-q{display:none!important}
  .bqp-keygrid.big{grid-template-columns:repeat(6,1fr);font-size:12pt}
}
@media (max-width:640px){
  .bqp-keygrid.big{grid-template-columns:repeat(4,1fr)}
  .bqp-bar{justify-content:flex-start}
}

/* ==========================================================================
   Page economy
   --------------------------------------------------------------------------
   MCQ sets print two columns to a page, সৃজনশীল stays one — a CQ carries a
   stem and four parts, which a half-width column would break up badly. Both
   set at 11pt.
   ========================================================================== */
@media print{
  @page{margin:12mm}

  .bqp{font-size:11pt;line-height:1.55}
  .bqp-head h1{font-size:15pt}
  .bqp-contact{font-size:10pt!important}
  .bqp-paper{font-size:11.5pt!important}
  .bqp-meta{font-size:10.5pt!important;margin-top:9px!important}

  .bqp-list{margin:0}
  .bqp-list > li{break-inside:avoid;page-break-inside:avoid;margin-bottom:7px}
  .bqp-q{margin:0 0 3px}
  .bqp-opts{font-size:11pt}

  /* ---- MCQ: two columns ---- */
  body.bqp-mcq .bqp-list:not(.bqp-expl){
    column-count:2;
    column-gap:9mm;
    column-rule:1px solid #e4e4e4;
    padding-left:0;
  }
  /* the marker needs room inside a narrow column, so indent each item
     rather than the list */
  body.bqp-mcq .bqp-list:not(.bqp-expl) > li{margin-left:17px;padding-left:2px}
  /* options stack: two across a half-width column is unreadable */
  body.bqp-mcq .bqp-opts{grid-template-columns:1fr;gap:1px 0}

  /* ---- সৃজনশীল: one column ---- */
  body.bqp-cq .bqp-list{column-count:1;padding-left:24px}
  body.bqp-cq .bqp-stem{padding:4px 0 4px 10px;margin-bottom:6px}
  body.bqp-cq .bqp-sub{margin:4px 0 0}
  body.bqp-cq .bqp-ans{margin:1px 0 0 16px;font-size:10.5pt}

  /* answer sheet stays readable rather than dense */
  .bqp-expl{column-count:1}
  .bqp-expl li{margin-bottom:6px}
  .bqp-key{margin-top:18px;padding-top:10px}
}

/* the same shape on screen, so the preview matches what will come out */
@media screen and (min-width:900px){
  body.bqp-mcq .bqp-list:not(.bqp-expl){column-count:2;column-gap:34px;padding-left:0}
  body.bqp-mcq .bqp-list:not(.bqp-expl) > li{margin-left:22px}
  body.bqp-mcq .bqp-opts{grid-template-columns:1fr}
}

/* ==========================================================================
   Tighter still: 9pt, and options flowing across the line
   --------------------------------------------------------------------------
   Options are laid out as a flowing row rather than a fixed grid. Each one is
   given a quarter of the width as its minimum, so four short options sit on a
   single line and longer ones fall to a second — without ever splitting into
   the ragged three-line shape a plain wrap produces.
   ========================================================================== */
.bqp-opts{
  display:flex;
  flex-wrap:wrap;
  gap:1mm 5mm;
}
.bqp-opts > span{
  flex:0 1 auto;
  min-width:calc(25% - 4mm);
  word-break:break-word;
}

@media print{
  .bqp{font-size:9pt;line-height:1.5}
  .bqp-head h1{font-size:13pt}
  .bqp-contact{font-size:8.5pt!important}
  .bqp-paper{font-size:10pt!important}
  .bqp-meta{font-size:9pt!important;margin-top:7px!important}

  .bqp-list > li{margin-bottom:5px}
  .bqp-q{margin:0 0 2px}
  .bqp-opts{font-size:9pt;gap:0.5mm 4mm}

  /* options flow on the line here too — the stacked rule from before is off */
  body.bqp-mcq .bqp-opts{display:flex;grid-template-columns:none}
  body.bqp-mcq .bqp-list:not(.bqp-expl){column-gap:7mm}
  body.bqp-mcq .bqp-list:not(.bqp-expl) > li{margin-left:15px}

  body.bqp-cq .bqp-list{padding-left:20px}
  body.bqp-cq .bqp-ans{font-size:8.5pt}

  .bqp-keygrid.big{font-size:9.5pt}
  .bqp-expl li{margin-bottom:4px}
  .bqp-foot{font-size:8pt}
}

@media screen and (min-width:900px){
  body.bqp-mcq .bqp-opts{display:flex;grid-template-columns:none}
}

/* ==========================================================================
   Option rows — grid, not flex
   --------------------------------------------------------------------------
   Flexbox `gap` is ignored by older print renderers, which is what let long
   options print with no space between them. Grid gap has been supported far
   longer, the old `grid-gap` spelling is included for anything older still,
   and each option also carries its own right padding so the separation
   survives even if every gap declaration is dropped.

   The column count is set in PHP from the length of the options: four across
   when they are short, two across otherwise — so a question is never more
   than two rows of options.
   ========================================================================== */
.bqp-opts{
  display:grid;
  grid-gap:1mm 4mm;      /* older syntax, kept deliberately */
  gap:1mm 4mm;
  align-items:start;
}
.bqp-opts.cols4{grid-template-columns:repeat(4,1fr)}
.bqp-opts.cols2{grid-template-columns:repeat(2,1fr)}
.bqp-opts > span{
  min-width:0;           /* clears the flex-era minimum */
  padding-right:3mm;     /* separation of last resort */
  word-break:break-word;
}
.bqp-opts > span > b{margin-right:1mm}

@media print{
  .bqp-opts{grid-gap:0.8mm 3mm;gap:0.8mm 3mm}
  .bqp-opts > span{padding-right:2.5mm}
  /* the earlier flex override must not come back */
  body.bqp-mcq .bqp-opts{display:grid}
  body.bqp-mcq .bqp-opts.cols4{grid-template-columns:repeat(4,1fr)}
  body.bqp-mcq .bqp-opts.cols2{grid-template-columns:repeat(2,1fr)}
}

@media screen and (min-width:900px){
  body.bqp-mcq .bqp-opts{display:grid}
}

@media (max-width:600px){
  /* on a phone screen four across is unreadable whatever the length */
  .bqp-opts.cols4{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   Everything on the printed page scales from the body size
   --------------------------------------------------------------------------
   The body size itself is written into the document from the setting; every
   other size here is in em, so one number moves the whole paper together and
   the proportions never drift.
   ========================================================================== */
@media print{
  .bqp{font-size:8pt;line-height:1.45}        /* the setting overrides this */

  .bqp-head{margin-bottom:2.2em}
  .bqp-head h1{font-size:1.55em;margin:0 0 0.2em}
  .bqp-contact{font-size:1em!important;margin:0 0 0.7em!important}
  .bqp-paper{font-size:1.2em!important;margin:0 0 0.3em!important}
  .bqp-meta{font-size:1.05em!important;margin-top:0.9em!important}

  .bqp-list > li{margin-bottom:0.55em}
  .bqp-q{margin:0 0 0.2em}
  .bqp-opts{font-size:1em;grid-gap:0.35em 1.6em;gap:0.35em 1.6em}
  .bqp-opts > span{padding-right:1.2em}

  body.bqp-mcq .bqp-list:not(.bqp-expl){column-gap:6mm}
  body.bqp-mcq .bqp-list:not(.bqp-expl) > li{margin-left:1.7em}

  body.bqp-cq .bqp-list{padding-left:2em}
  body.bqp-cq .bqp-stem{padding:0.3em 0 0.3em 0.8em;margin-bottom:0.5em}
  body.bqp-cq .bqp-sub{margin:0.35em 0 0}
  body.bqp-cq .bqp-ans{margin:0.1em 0 0 1.4em;font-size:0.95em}

  .bqp-key{margin-top:1.6em;padding-top:0.9em}
  .bqp-keygrid.big{font-size:1.15em;grid-gap:0.5em;gap:0.5em}
  .bqp-exph{font-size:1.3em;margin:1.8em 0 0.7em;padding-top:0.9em}
  .bqp-expl li{margin-bottom:0.45em}
  .bqp-foot{font-size:0.95em}
}

/* ==========================================================================
   Three option layouts, chosen in PHP
     cols4 — four across, one line
     cols2 — two across, two lines
     cols1 — one per line, four lines (an option of more than four words)
   ========================================================================== */
.bqp-opts.cols1{grid-template-columns:1fr}

@media print{
  body.bqp-mcq .bqp-opts.cols1{grid-template-columns:1fr}
  /* a full-width option needs no trailing gap, and the rows can sit closer */
  .bqp-opts.cols1{grid-gap:0.15em 0;gap:0.15em 0}
  .bqp-opts.cols1 > span{padding-right:0}
}

@media (max-width:600px){
  .bqp-opts.cols2{grid-template-columns:1fr}
}