/* =====================================================================
   studio.css — shared engine for the academic document studio
   Used by /tools/cover (AcademiCover) and /tools/cv (CV & Resume Builder)

   Everything here is scoped under .studio or .a4 so it can never leak into
   the rest of the site. Type scale matches app.css: nothing under 11px.
   ===================================================================== */

/* ---------- layout: editor | preview ---------------------------------- */
.studio{
  --studio-gap:22px;
  display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:var(--studio-gap); align-items:start;
}
.studio-editor{min-width:0; display:flex; flex-direction:column; gap:14px}
.studio-stage{min-width:0; display:flex; flex-direction:column; gap:12px}

/* Each panel keeps its own height and the COLUMN scrolls. Without
   flex-shrink:0 the panels (which are overflow:hidden) get squashed to
   fit the capped height and most of the form becomes unreachable. */
.studio > .studio-editor > *, .studio > .studio-stage > *{flex:0 0 auto}

/* Only the two columns that are direct children of .studio scroll on their
   own — a nested .studio-editor (the CV tool uses one as a plain flex
   column) must stay a normal block, or you get a scroller in a scroller. */
.studio > .studio-editor, .studio > .studio-stage{
  position:sticky; top:86px; align-self:start;
  max-height:calc(100vh - 86px - 24px); overflow-y:auto;
  scrollbar-width:thin; padding-right:6px;
}
@media (max-width:1080px){
  .studio{grid-template-columns:1fr}
  .studio > .studio-editor, .studio > .studio-stage{
    position:static; max-height:none; overflow-y:visible; padding-right:0;
  }
  .studio-stage{order:-1}
}

/* ---------- panels ---------------------------------------------------- */
.sp{
  border:1px solid hsl(var(--border,214 32% 91%));
  border-radius:16px; background:hsl(var(--card,0 0% 100%));
  overflow:hidden;
}
.sp>summary,.sp-head{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:13px 15px; font-size:13px; font-weight:600; list-style:none;
  background:linear-gradient(90deg,hsl(var(--primary,221 83% 53%)/.07),transparent);
}
.sp>summary::-webkit-details-marker{display:none}
.sp>summary .sp-chev{margin-left:auto; transition:transform .2s}
.sp[open]>summary .sp-chev{transform:rotate(180deg)}
.sp-body{padding:14px 15px 16px; display:flex; flex-direction:column; gap:12px}
.sp-note{font-size:11.5px; line-height:1.5; opacity:.72}

/* ---------- form bits ------------------------------------------------- */
.sfield{display:flex; flex-direction:column; gap:5px; min-width:0}
.sfield>label{font-size:11.5px; font-weight:600; letter-spacing:.02em; opacity:.75}
.sfield input[type=text],.sfield input[type=date],.sfield input[type=email],
.sfield input[type=tel],.sfield input[type=url],.sfield select,.sfield textarea{
  width:100%; padding:9px 11px; font:inherit; font-size:13px;
  border:1px solid hsl(var(--border,214 32% 91%)); border-radius:10px;
  background:hsl(var(--background,0 0% 100%)); color:inherit;
}
.sfield textarea{min-height:76px; resize:vertical; line-height:1.55}
.sfield input:focus,.sfield select:focus,.sfield textarea:focus{
  outline:2px solid hsl(var(--primary,221 83% 53%)/.45); outline-offset:1px; border-color:transparent;
}
.srow{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.srow-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
@media (max-width:420px){.srow,.srow-3{grid-template-columns:1fr}}

/* searchable select ---------------------------------------------------- */
.scombo{position:relative}
.scombo-list{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px);
  max-height:240px; overflow:auto; padding:5px;
  border:1px solid hsl(var(--border,214 32% 91%)); border-radius:12px;
  background:hsl(var(--card,0 0% 100%)); box-shadow:0 16px 40px -12px rgba(15,23,42,.28);
}
.scombo-list[hidden]{display:none}
.scombo-opt{
  display:block; width:100%; text-align:left; padding:8px 10px; border:0; border-radius:8px;
  background:none; color:inherit; font:inherit; font-size:12.5px; cursor:pointer;
}
.scombo-opt:hover,.scombo-opt[aria-selected=true]{background:hsl(var(--primary,221 83% 53%)/.12)}
.scombo-opt small{display:block; font-size:11px; opacity:.62}
.scombo-empty{padding:10px; font-size:12px; opacity:.7}

/* mode toggle ---------------------------------------------------------- */
.smode{
  display:inline-flex; padding:4px; gap:4px; border-radius:12px;
  background:hsl(var(--muted,210 40% 96%)); border:1px solid hsl(var(--border,214 32% 91%));
}
.smode button{
  display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer;
  padding:7px 13px; border-radius:9px; font:inherit; font-size:12.5px; font-weight:600;
  background:none; color:inherit; opacity:.7;
}
.smode button[aria-pressed=true]{
  background:hsl(var(--card,0 0% 100%)); opacity:1;
  box-shadow:0 2px 8px -2px rgba(15,23,42,.22);
}
.slink-manual{
  align-self:flex-start; border:0; background:none; cursor:pointer; padding:0;
  font:inherit; font-size:11.5px; font-weight:600; text-decoration:underline;
  color:hsl(var(--primary,221 83% 53%));
}

/* field toggles + reorder ---------------------------------------------- */
.stoggles{display:flex; flex-direction:column; gap:6px}
.stoggle{
  display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:10px;
  border:1px solid hsl(var(--border,214 32% 91%)); font-size:12.5px; background:hsl(var(--card,0 0% 100%));
}
.stoggle.off{opacity:.5}
.stoggle .grip{cursor:grab; opacity:.45; flex:none}
.stoggle .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.stoggle .mv{border:0; background:none; cursor:pointer; padding:2px 4px; opacity:.6; color:inherit; font-size:12px}
.stoggle .mv:hover{opacity:1}
.stoggle.drag-over{border-color:hsl(var(--primary,221 83% 53%)); background:hsl(var(--primary,221 83% 53%)/.07)}
.sw{position:relative; width:34px; height:19px; flex:none}
.sw input{position:absolute; inset:0; opacity:0; cursor:pointer; margin:0}
.sw i{
  position:absolute; inset:0; border-radius:999px; background:hsl(var(--border,214 32% 91%));
  transition:background .18s;
}
.sw i::after{
  content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:#fff; transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,.28);
}
.sw input:checked + i{background:hsl(var(--primary,221 83% 53%))}
.sw input:checked + i::after{transform:translateX(15px)}

/* template gallery ----------------------------------------------------- */
.sgal{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px}
.stpl{
  border:2px solid transparent; border-radius:11px; padding:0; cursor:pointer;
  background:none; overflow:hidden; text-align:center;
}
.stpl[aria-pressed=true]{border-color:hsl(var(--primary,221 83% 53%))}
.stpl .thumb{
  display:block; aspect-ratio:210/297; border-radius:8px; overflow:hidden;
  border:1px solid hsl(var(--border,214 32% 91%)); background:#fff;
}
.stpl .thumb svg{display:block; width:100%; height:100%}
.stpl .lbl{display:block; padding:5px 2px 3px; font-size:11px; font-weight:600; line-height:1.25}

/* swatches + fonts ----------------------------------------------------- */
.sswatches{display:flex; flex-wrap:wrap; gap:8px}
.sswatch{
  width:30px; height:30px; border-radius:9px; cursor:pointer; padding:0;
  border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(15,23,42,.12);
}
.sswatch[aria-pressed=true]{border-color:hsl(var(--foreground,222 47% 11%)); transform:scale(1.06)}
.sfonts{display:grid; grid-template-columns:1fr 1fr; gap:8px; max-height:320px; overflow:auto}
.sfont{
  border:1px solid hsl(var(--border,214 32% 91%)); border-radius:10px; padding:8px 9px;
  cursor:pointer; background:hsl(var(--card,0 0% 100%)); color:inherit; text-align:left; line-height:1.2;
}
.sfont[aria-pressed=true]{border-color:hsl(var(--primary,221 83% 53%)); background:hsl(var(--primary,221 83% 53%)/.08)}
.sfont b{display:block; font-size:14px; font-weight:700}
.sfont span{font-size:10.5px; opacity:.65}

/* repeatable rows ------------------------------------------------------ */
.slist{display:flex; flex-direction:column; gap:10px}
.sitem{
  border:1px solid hsl(var(--border,214 32% 91%)); border-radius:12px; padding:11px;
  display:flex; flex-direction:column; gap:9px; background:hsl(var(--muted,210 40% 96%)/.5);
}
.sitem-head{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; opacity:.7}
.sitem-head .sp-x{margin-left:auto}
.sp-x{border:0; background:none; cursor:pointer; color:#dc2626; padding:2px; line-height:0}
.sadd{
  border:1px dashed hsl(var(--border,214 32% 91%)); border-radius:11px; padding:9px;
  background:none; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; color:inherit;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.sadd:hover{border-color:hsl(var(--primary,221 83% 53%)); color:hsl(var(--primary,221 83% 53%))}

/* logo dropzone -------------------------------------------------------- */
.sdrop{
  border:1.5px dashed hsl(var(--border,214 32% 91%)); border-radius:13px; padding:16px;
  text-align:center; cursor:pointer; font-size:12px; line-height:1.5;
}
.sdrop.over{border-color:hsl(var(--primary,221 83% 53%)); background:hsl(var(--primary,221 83% 53%)/.07)}
.sdrop input{display:none}
.slogo-prev{display:flex; align-items:center; gap:11px}
.slogo-prev img{
  width:56px; height:56px; object-fit:contain; border-radius:10px; padding:4px;
  border:1px solid hsl(var(--border,214 32% 91%)); background:#fff;
}

/* ---------- the stage ------------------------------------------------- */
.stage-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:9px 12px; border-radius:14px;
  border:1px solid hsl(var(--border,214 32% 91%)); background:hsl(var(--card,0 0% 100%));
}
.stage-bar .grow{flex:1 1 auto; min-width:0}
.stage-zoom{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; opacity:.75}
.stage-wrap{
  display:flex; justify-content:center; padding:22px 10px;
  border-radius:18px; overflow:auto;
  background:
    radial-gradient(circle at 20% 0%,hsl(var(--primary,221 83% 53%)/.10),transparent 55%),
    hsl(var(--muted,210 40% 96%));
  border:1px solid hsl(var(--border,214 32% 91%));
}
.a4-fit{transform-origin:top center}

/* ---------- the A4 page ---------------------------------------------- */
.a4{
  --ink:#0f172a; --accent:#1d4ed8; --accent2:#0ea5e9; --soft:#f1f5f9;
  --pad:20mm; --align:center; --density:1;
  width:210mm; min-height:297mm; box-sizing:border-box;
  background:#fff; color:var(--ink);
  font-family:var(--body-font,"Inter",system-ui,sans-serif);
  font-size:11.4pt; line-height:1.55; position:relative; overflow:hidden;
  box-shadow:0 24px 60px -22px rgba(15,23,42,.45);
  padding:var(--pad);
  display:flex; flex-direction:column;
}
.a4 h1,.a4 h2,.a4 h3,.a4 .hd{font-family:var(--head-font,var(--body-font,"Inter",sans-serif)); margin:0}
.a4 *{box-sizing:border-box}
.a4 .mm{color:#64748b}

/* border styles (layout switcher) */
.a4.b-none{}
.a4.b-thin::after,.a4.b-double::after,.a4.b-accent::after{
  content:""; position:absolute; inset:8mm; pointer-events:none; border:1px solid var(--accent);
}
.a4.b-double::after{border-width:1px; box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 4px var(--accent)}
.a4.b-accent::after{border:0; box-shadow:inset 0 0 0 6mm var(--soft)}

/* ---------- cover page building blocks -------------------------------- */
.cv-block{margin-bottom:calc(7mm * var(--density))}
.cover-body{flex:1; display:flex; flex-direction:column; text-align:var(--align)}
.cover-body.al-left{--align:left; align-items:flex-start}
.cover-body.al-center{--align:center; align-items:center}
.cover-body.al-right{--align:right; align-items:flex-end}
.cover-logo{max-height:26mm; max-width:60mm; object-fit:contain; display:block}
.sgal .stpl[hidden]{display:none!important}
.cover-overflow{color:#b45309;font-weight:700}
.st-download-error{padding:14px 18px;margin:12px;border:1px solid #efad94;border-radius:9px;background:#fff1e9;color:#8b351c;font-size:12px;line-height:1.8}
.st-download-error a{text-decoration:underline;font-weight:700}
.sv-export-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:22px}
.sv-export-options b{font-size:13px}.sv-export-options p{font-size:12px;line-height:1.8;margin-top:8px}
@media(max-width:760px){.sv-export-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:440px){.sv-export-options{grid-template-columns:1fr}}
.cover-uni{font-size:20pt; font-weight:800; line-height:1.2; letter-spacing:-.01em}
.cover-dept{font-size:12.5pt; font-weight:600; color:var(--accent)}
.cover-kind{
  display:inline-block; padding:2.4mm 7mm; border-radius:999px;
  font-size:10.5pt; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.cover-title{font-size:24pt; font-weight:800; line-height:1.22; letter-spacing:-.02em}
.cover-sub{font-size:12pt; color:#475569}
.cover-rule{height:1.1mm; width:34mm; border-radius:2px; background:var(--accent)}
.cover-meta{width:100%; display:grid; grid-template-columns:1fr 1fr; gap:6mm; text-align:left}
.cover-meta.one{grid-template-columns:1fr}
.cover-card{
  border:1px solid #e2e8f0; border-radius:3mm; padding:5mm 6mm; background:#fff;
}
.cover-card h4{font-size:9.5pt; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:2.5mm}
.cover-kv{display:flex; gap:3mm; font-size:10.8pt; padding:.7mm 0}
.cover-kv b{min-width:26mm; font-weight:600; color:#64748b}
.cover-kv span{font-weight:600}
.cover-date{font-size:11pt; font-weight:600}
.cover-foot{margin-top:auto; padding-top:6mm; font-size:9.5pt; color:#64748b; text-align:var(--align)}
.cover-members{font-size:10.6pt; text-align:left; width:100%}
.cover-members li{margin:.8mm 0; list-style:none}
.cover-members li span{color:#64748b}

/* template skins */
.t-band-top{position:absolute; left:0; right:0; top:0; height:14mm; background:linear-gradient(90deg,var(--accent),var(--accent2))}
.t-band-bottom{position:absolute; left:0; right:0; bottom:0; height:6mm; background:linear-gradient(90deg,var(--accent),var(--accent2))}
.t-corner{position:absolute; width:70mm; height:70mm; opacity:.13; pointer-events:none}
.t-corner.tr{top:-22mm; right:-22mm; border-radius:50%; background:var(--accent)}
.t-corner.bl{bottom:-26mm; left:-26mm; border-radius:50%; background:var(--accent2)}
.t-side{position:absolute; left:0; top:0; bottom:0; width:9mm; background:linear-gradient(180deg,var(--accent),var(--accent2))}
.t-grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(hsl(215 28% 90%/.6) 1px,transparent 1px),linear-gradient(90deg,hsl(215 28% 90%/.6) 1px,transparent 1px);
  background-size:10mm 10mm;
}

/* ---------- CV building blocks ---------------------------------------- */
.cvdoc{font-size:10.4pt; line-height:1.5}
/* ---------- CV header alignment --------------------------------------
   Two controls, not one: the name block and the photo move independently,
   because the common layouts are "name left, photo right" and "everything
   centred", and a single switch can only produce one of them. */
.cvdoc.cvh-left   > .cv-block{ text-align:left }
.cvdoc.cvh-center > .cv-block{ text-align:center }
.cvdoc.cvh-right  > .cv-block{ text-align:right }
.cvdoc.cvh-center > .cv-block .contact{ justify-content:center }
.cvdoc.cvh-right  > .cv-block .contact{ justify-content:flex-end }
.cvdoc.cvp-left   > .cv-block .cv-photo{ float:left;  margin:0 4mm 2mm 0 }
.cvdoc.cvp-right  > .cv-block .cv-photo{ float:right; margin:0 0 2mm 4mm }
.cvdoc.cvp-center > .cv-block .cv-photo{ float:none; display:block; margin:0 auto 3mm }
.cvdoc > .cv-block::after{ content:""; display:block; clear:both }
.cvdoc .name{font-size:23pt; font-weight:800; line-height:1.1; letter-spacing:-.02em}
.cvdoc .role{font-size:12pt; font-weight:600; color:var(--accent)}
.cvdoc .contact{display:flex; flex-wrap:wrap; gap:2mm 6mm; font-size:9.8pt; color:#475569}
.cvdoc .contact span{display:inline-flex; gap:1.6mm; align-items:center}
.cvdoc h2{
  font-size:10.5pt; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin:0 0 2.4mm;
}
.cvdoc section{margin-bottom:calc(5.5mm * var(--density))}
.cvdoc .entry{margin-bottom:3.4mm}
.cvdoc .entry:last-child{margin-bottom:0}
.cvdoc .entry .top{display:flex; gap:3mm; align-items:baseline}
.cvdoc .entry .top b{font-size:11pt; font-weight:700}
.cvdoc .entry .top i{margin-left:auto; font-style:normal; font-size:9.4pt; color:#64748b; white-space:nowrap}
.cvdoc .entry .org{font-size:10pt; color:var(--accent); font-weight:600}
.cvdoc .entry p{margin:1.2mm 0 0; font-size:9.9pt; color:#334155}
.cvdoc .entry ul{margin:1.2mm 0 0; padding-left:4.5mm; font-size:9.9pt; color:#334155}
.cvdoc .entry li{margin:.6mm 0}
.cvdoc .chips{display:flex; flex-wrap:wrap; gap:1.8mm}
.cvdoc .chip{
  padding:.9mm 2.8mm; border-radius:999px; font-size:9.2pt; font-weight:600;
  background:var(--soft); color:var(--ink);
}
.cvdoc .barline{height:1.4mm; border-radius:2px; background:var(--soft); overflow:hidden; margin-top:1.2mm}
.cvdoc .barline i{display:block; height:100%; background:var(--accent)}
.cvdoc .rule{height:.5mm; background:var(--accent); opacity:.35; margin:2mm 0 4mm}
.cv-two{display:grid; grid-template-columns:62mm 1fr; gap:8mm; flex:1}
.cv-side{background:var(--soft); margin:calc(var(--pad) * -1) 0 calc(var(--pad) * -1) calc(var(--pad) * -1); padding:var(--pad) 7mm}
.cv-side.dark{background:var(--ink); color:#fff}
.cv-side.dark h2{color:#fff; opacity:.85}
.cv-side.dark .chip{background:rgba(255,255,255,.16); color:#fff}
.cv-head-band{
  margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 7mm; padding:12mm var(--pad) 8mm;
  background:linear-gradient(120deg,var(--accent),var(--accent2)); color:#fff;
}
.cv-head-band .role,.cv-head-band .contact{color:rgba(255,255,255,.92)}
.cv-photo{width:28mm; height:28mm; border-radius:50%; object-fit:cover; border:1.2mm solid #fff}

/* ---------- printing -------------------------------------------------
   exportPDF() clones the sheet into  <div id="printRoot">  as a direct
   child of <body>. Everything else is display:none — not visibility:hidden,
   which would leave empty boxes in the flow and add blank pages. ------- */
@page{size:A4; margin:0}
@media print{
  html,body{background:#fff !important; margin:0 !important; padding:0 !important}
  body > *{display:none !important}
  body > #printRoot{display:block !important; margin:0 !important; padding:0 !important}
  #printRoot .a4,#printRoot .slide{
    box-shadow:none !important; transform:none !important; margin:0 !important;
    width:210mm; border-radius:0 !important;
  }
  #printRoot .slide{width:338.7mm; height:190.5mm}
  /* fixed-size sheets (cover, CV) are pinned to exactly one A4 so a stray
     fraction of a pixel cannot spill onto a second, blank page */
  #printRoot .a4:not(.flow){height:297mm !important; min-height:0 !important; overflow:hidden !important}
  #printRoot .a4.flow{min-height:0 !important; height:auto !important}
  #printRoot .doc-guide{display:none !important}
  /* the on-screen preview is scaled to fit its stage; print must be 1:1 */
  .a4-fit{transform:none !important; height:auto !important}
}

/* =====================================================================
   v3.9.5 — paged documents (/tools/assignment, /tools/lab-report,
   /tools/thesis) and the 16:9 title slide (/tools/slide)
   ===================================================================== */

/* The paged document. `.flow` was one tall sheet with dashed lines marking
   where the printer would break it; `.docdoc` is what paginate.js produces —
   real, separate A4 sheets, each its own page. The .flow rules stay for one
   release so a cached page still renders, but nothing emits them now. */
.a4.docdoc{ display:block; }

/* ---------- alignment, per element group -----------------------------
   Four independent choices rather than one page-wide switch, because a
   report almost always wants a centred title block over a left-aligned
   body — which a single "align the page" control cannot express. */
.a4.docdoc.ah-left   .doc-head{ text-align:left }
.a4.docdoc.ah-center .doc-head{ text-align:center }
.a4.docdoc.ah-right  .doc-head{ text-align:right }
/* the key/value grid under the title reads as a list, so it stays left
   inside whatever box the title block is aligned in */
.a4.docdoc .doc-kv{ text-align:left; justify-items:start }
.a4.docdoc.ah-center .doc-kv{ justify-content:center }
.a4.docdoc.ah-right  .doc-kv{ justify-content:end }

.a4.docdoc .doc-head img{ display:block }
.a4.docdoc.al-left   .doc-head img{ margin-inline:0 auto }
.a4.docdoc.al-center .doc-head img{ margin-inline:auto }
.a4.docdoc.al-right  .doc-head img{ margin-inline:auto 0 }

.a4.docdoc.as-left   .doc-sec > h2{ text-align:left }
.a4.docdoc.as-center .doc-sec > h2{ text-align:center }
.a4.docdoc.as-right  .doc-sec > h2{ text-align:right }

/* a table narrower than the column, and its caption, move together */
.a4.docdoc.af-left   .doc-table{ margin-inline:0 auto }
.a4.docdoc.af-center .doc-table{ margin-inline:auto }
.a4.docdoc.af-right  .doc-table{ margin-inline:auto 0 }
.a4.docdoc.af-left   .doc-caption{ text-align:left }
.a4.docdoc.af-center .doc-caption{ text-align:center }
.a4.docdoc.af-right  .doc-caption{ text-align:right }
.a4.docdoc .doc-sec img{ display:block; max-width:100% }
.a4.docdoc.af-left   .doc-sec img{ margin-inline:0 auto }
.a4.docdoc.af-center .doc-sec img{ margin-inline:auto }
.a4.docdoc.af-right  .doc-sec img{ margin-inline:auto 0 }

.a4.flow{
  min-height:297mm; height:auto; display:block; overflow:visible;
  box-shadow:0 24px 60px -22px rgba(15,23,42,.45);
}
.a4.flow .doc-guide{
  position:absolute; left:0; right:0; height:0; pointer-events:none;
  border-top:1px dashed #cbd5e1;
}
.a4.flow .doc-guide span{
  position:absolute; right:2mm; top:1mm; font-size:8pt; color:#94a3b8;
  background:#fff; padding:0 1.5mm;
}

/* document blocks */
.doc-title{font-size:17pt; font-weight:800; line-height:1.25; letter-spacing:-.01em; margin-bottom:2mm}
.doc-sub{font-size:10.6pt; color:#475569}
.doc-head{
  border-bottom:.6mm solid var(--accent); padding-bottom:4mm;
  margin-bottom:calc(6mm * var(--density));
}
.doc-head.plain{border-bottom-width:.2mm; border-bottom-color:#cbd5e1}
.doc-head.band{
  border:0; background:linear-gradient(120deg,var(--accent),var(--accent2)); color:#fff;
  margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 8mm; padding:10mm var(--pad) 8mm;
}
.doc-head.band .doc-sub,.doc-head.band .doc-kv b{color:rgba(255,255,255,.86)}
.doc-kv{display:grid; grid-template-columns:repeat(2,1fr); gap:1.4mm 6mm; margin-top:3mm; font-size:10pt}
.doc-kv div{display:flex; gap:2.5mm}
.doc-kv b{min-width:26mm; font-weight:600; color:#64748b}

.doc-sec{margin-bottom:calc(6mm * var(--density)); break-inside:auto}
.doc-sec > h2{
  font-size:12.5pt; font-weight:800; margin:0 0 2.6mm; color:var(--accent);
  break-after:avoid;
}
.doc-sec.num > h2::before{content:counter(docsec) ".  "; counter-increment:docsec}
.a4.flow{counter-reset:docsec}
/* one running sequence across every sheet of the document */
.pagestack{counter-reset:docsec}
.doc-sec p{margin:0 0 2.6mm; text-align:justify; font-size:11pt; line-height:1.65}
.doc-sec ul,.doc-sec ol{margin:0 0 2.6mm; padding-left:6mm; font-size:11pt; line-height:1.65}
.doc-sec li{margin:.8mm 0}
.doc-sec .lead-in{font-weight:600}

.doc-table{width:100%; border-collapse:collapse; font-size:10pt; margin:0 0 3mm}
.doc-table th,.doc-table td{border:.25mm solid #94a3b8; padding:1.6mm 2.4mm; text-align:left}
.doc-table th{background:var(--soft); font-weight:700}
.doc-table.zebra tbody tr:nth-child(even){background:#f8fafc}
.doc-caption{font-size:9.4pt; color:#64748b; margin:-1.5mm 0 4mm}

.doc-refs{font-size:10.2pt; line-height:1.55; padding-left:0; list-style:none; margin:0}
.doc-refs li{padding-left:8mm; text-indent:-8mm; margin-bottom:2mm}
.doc-refs.numbered{counter-reset:ref}
.doc-refs.numbered li::before{content:"[" counter(ref) "]  "; counter-increment:ref; font-weight:600}

.doc-toc{font-size:10.6pt}
.doc-toc div{display:flex; align-items:baseline; gap:2mm; margin:1.4mm 0}
.doc-toc i{flex:1; border-bottom:.2mm dotted #94a3b8; font-style:normal}
.doc-toc b{font-weight:600; min-width:12mm; text-align:right; color:#64748b}

.doc-sign{margin-top:14mm; display:flex; gap:14mm; flex-wrap:wrap}
.doc-sign div{min-width:55mm}
.doc-sign .line{border-top:.3mm solid var(--ink); padding-top:1.6mm; font-size:10pt}
.doc-foot-run{
  position:fixed; left:var(--pad); right:var(--pad); bottom:8mm;
  font-size:9pt; color:#64748b; display:flex; justify-content:space-between;
  border-top:.2mm solid #e2e8f0; padding-top:1.6mm;
}
@media screen{.a4.flow .doc-foot-run{position:absolute}}
/* on a real sheet the running footer is absolute to that sheet */
.a4.docdoc .doc-foot-run{position:absolute}

/* ---------- 16:9 title slide ----------------------------------------- */
.slide{
  --ink:#0f172a; --accent:#1d4ed8; --accent2:#0ea5e9; --soft:#f1f5f9; --pad:18mm; --density:1;
  width:338.7mm; height:190.5mm; box-sizing:border-box; position:relative; overflow:hidden;
  background:#fff; color:var(--ink); padding:var(--pad);
  font-family:var(--body-font,"Inter",system-ui,sans-serif);
  display:flex; flex-direction:column; justify-content:center;
  box-shadow:0 24px 60px -22px rgba(15,23,42,.45);
}
.slide *{box-sizing:border-box}
.slide h1,.slide .hd{font-family:var(--head-font,var(--body-font)); margin:0}
.slide .s-kicker{font-size:13pt; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}
.slide .s-title{font-size:40pt; font-weight:800; line-height:1.12; letter-spacing:-.02em; margin:6mm 0 4mm}
.slide .s-sub{font-size:16pt; color:#475569}
.slide .s-meta{display:flex; flex-wrap:wrap; gap:4mm 12mm; margin-top:10mm; font-size:12.5pt}
.slide .s-meta b{display:block; font-size:9.5pt; letter-spacing:.12em; text-transform:uppercase; color:#94a3b8; margin-bottom:1mm}
.slide .s-logo{max-height:20mm; max-width:60mm; object-fit:contain; margin-bottom:6mm}
.slide.center{text-align:center; align-items:center}
.slide.center .s-meta{justify-content:center}
.slide .s-band{position:absolute; left:0; right:0; top:0; height:10mm; background:linear-gradient(90deg,var(--accent),var(--accent2))}
.slide .s-blob{position:absolute; right:-40mm; bottom:-60mm; width:150mm; height:150mm; border-radius:50%; background:var(--accent); opacity:.12}
.slide.dark{background:var(--ink); color:#fff}
.slide.dark .s-sub{color:rgba(255,255,255,.78)}
.slide.dark .s-kicker{color:var(--accent2)}
.slide.dark .s-meta b{color:rgba(255,255,255,.55)}

@page slide{size:A4 landscape; margin:0}

/* =====================================================================
   v3.10.0 — the account layer
   The studio stopped being a browser-only toy: these are the pieces that
   show whether work is saved, who is signed in, and the card that asks
   for a free account at the moment a file is about to be produced.
   Same tokens as the rest of the site; nothing here leaks outside
   .stage-bar / .st-* .
   ===================================================================== */

/* ---------- the account strip inside the stage bar -------------------- */
.st-acct{display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap}
.st-status{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.01em;
  border:1px solid hsl(var(--border,214 32% 91%));
  background:hsl(var(--muted,210 40% 96%)); color:hsl(var(--foreground,222 47% 11%)/.72);
  white-space:nowrap;
}
.st-status::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor; opacity:.55; flex:none;
}
.st-status.ok{color:#047857; border-color:#05966933; background:#10b9811a}
.st-status.dirty{color:#b45309; border-color:#d9770633; background:#f59e0b1f}
.st-status.busy{color:#1d4ed8; border-color:#1d4ed833; background:#3b82f61f}
.st-status.guest{color:hsl(var(--foreground,222 47% 11%)/.6)}
.st-status.busy::before{animation:st-pulse 1s ease-in-out infinite}
@keyframes st-pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* the stage bar earns a sticky top now that it holds Save */
.studio-stage .stage-bar{position:sticky; top:0; z-index:5; backdrop-filter:blur(10px)}
@media (max-width:1080px){.studio-stage .stage-bar{position:static}}

/* ---------- the sign-in card ------------------------------------------ */
.st-modal{
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:hsl(222 47% 8% / .55); backdrop-filter:blur(6px);
  animation:st-fade .18s ease-out;
}
@keyframes st-fade{from{opacity:0}to{opacity:1}}
.st-modal-card{
  position:relative; width:min(440px,100%);
  max-height:88vh; overflow:auto;
  padding:26px 26px 22px; border-radius:20px;
  background:hsl(var(--card,0 0% 100%)); color:hsl(var(--foreground,222 47% 11%));
  border:1px solid hsl(var(--border,214 32% 91%));
  box-shadow:0 40px 90px -30px rgb(2 6 23 / .55);
  animation:st-rise .2s cubic-bezier(.2,.8,.2,1);
}
.st-modal-card.wide{width:min(560px,100%)}
@keyframes st-rise{from{transform:translateY(14px) scale(.98); opacity:0}to{transform:none; opacity:1}}
.st-modal-x{
  position:absolute; top:12px; right:14px;
  border:0; background:none; cursor:pointer; line-height:1;
  font-size:24px; opacity:.45; color:inherit; padding:4px;
}
.st-modal-x:hover{opacity:.9}
.st-modal-badge{
  display:inline-block; margin-bottom:10px; padding:3px 10px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:#047857; background:#10b9811f; border:1px solid #05966933;
}
.st-modal-card h3{margin:0 0 8px; font-size:20px; line-height:1.25; font-weight:800}
.st-modal-card p{margin:0 0 12px; font-size:13px; line-height:1.6; opacity:.82}
.st-modal-list{margin:0 0 16px; padding-left:18px; display:grid; gap:5px}
.st-modal-list li{font-size:12.5px; line-height:1.5; opacity:.86}
.st-modal-row{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:12px}
.st-modal-fine{font-size:11px; line-height:1.55; opacity:.6; margin:0}

/* ---------- soft "save your work" nudge (not the hard sign-in gate) ---- */
.st-nudge{
  position:fixed; right:18px; bottom:18px; z-index:70; max-width:320px;
  background:hsl(var(--card,0 0% 100%)); border:1px solid hsl(var(--border,214 32% 91%));
  border-radius:14px; box-shadow:0 16px 40px -12px rgb(0 0 0 / .3);
  padding:14px 16px; display:none; opacity:0; transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease;
}
.st-nudge.on{display:block; opacity:1; transform:translateY(0)}
.st-nudge-x{
  position:absolute; top:8px; right:10px; background:none; border:0; cursor:pointer;
  font-size:14px; line-height:1; opacity:.5; padding:4px;
}
.st-nudge-x:hover{opacity:.9}
.st-nudge b{display:block; font-size:13.5px; margin-bottom:4px}
.st-nudge p{margin:0 0 10px; font-size:12px; line-height:1.55; opacity:.8}
.st-nudge-row{display:flex; gap:8px; flex-wrap:wrap}
@media (max-width:480px){.st-nudge{left:12px; right:12px; max-width:none; bottom:12px}}

/* ---------- the Open… list -------------------------------------------- */
.st-doclist{
  display:grid; gap:8px; margin-bottom:14px;
  max-height:46vh; overflow:auto; padding-right:2px;
}
.st-doc{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:10px 12px; border-radius:12px;
  border:1px solid hsl(var(--border,214 32% 91%));
  background:hsl(var(--muted,210 40% 96%)/.55); color:inherit;
  transition:border-color .15s, background .15s, transform .12s;
}
.st-doc:hover{
  border-color:hsl(var(--primary,221 83% 53%));
  background:hsl(var(--primary,221 83% 53%)/.08);
  transform:translateX(2px);
}
.st-doc b{display:block; font-size:13px; font-weight:700; line-height:1.35}
.st-doc small{display:block; font-size:11px; opacity:.62; margin-top:2px}

/* ---------- My documents --------------------------------------------- */
.doc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.doc-card{
  display:flex; flex-direction:column; gap:9px;
  padding:15px 16px 13px; border-radius:16px;
  border:1px solid hsl(var(--border,214 32% 91%));
  background:hsl(var(--card,0 0% 100%));
  transition:border-color .15s, box-shadow .2s, transform .18s;
}
.doc-card:hover{
  border-color:hsl(var(--primary,221 83% 53%)/.55);
  box-shadow:0 18px 38px -26px rgb(2 6 23 / .4);
  transform:translateY(-2px);
}
.doc-card .dk{
  display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  background:hsl(var(--primary,221 83% 53%)/.1); color:hsl(var(--primary,221 83% 53%));
}
.doc-card h3{margin:0; font-size:15px; font-weight:700; line-height:1.35; word-break:break-word}
.doc-card .dm{font-size:11.5px; opacity:.62; line-height:1.5}
.doc-card .da{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px}
.doc-empty{
  padding:40px 24px; border-radius:18px; text-align:center;
  border:1px dashed hsl(var(--border,214 32% 91%));
  background:hsl(var(--muted,210 40% 96%)/.5);
}
.doc-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.doc-kpi{
  padding:14px 16px; border-radius:16px;
  border:1px solid hsl(var(--border,214 32% 91%)); background:hsl(var(--card,0 0% 100%));
}
.doc-kpi b{display:block; font-size:26px; font-weight:800; line-height:1.1}
.doc-kpi span{font-size:11.5px; opacity:.65}

/* ---------- the "free account" note under the export row -------------- */
.st-gatenote{
  display:flex; align-items:flex-start; gap:9px;
  padding:10px 13px; border-radius:13px; font-size:12px; line-height:1.55;
  border:1px solid #05966926; background:#10b9810f; color:inherit;
}
.st-gatenote b{font-weight:700}

@media (prefers-reduced-motion:reduce){
  .st-modal,.st-modal-card,.doc-card,.st-doc{animation:none; transition:none}
}

/* =====================================================================
   v3.11.0 — the two new tools
   The marksheet and the reference list are both "a table and a list on
   A4", so they share the studio's page frame and only add what is theirs.
   ===================================================================== */

/* ---------- marksheet ------------------------------------------------- */
.cg-sums{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cg-sums > div{
  padding:11px 13px; border-radius:13px; text-align:center;
  border:1px solid hsl(var(--border,214 32% 91%)); background:hsl(var(--muted,210 40% 96%)/.6);
}
.cg-sums span{display:block; font-size:11px; opacity:.65}
.cg-sums b{display:block; font-size:24px; font-weight:800; line-height:1.2}

.cg-rowhead,.cg-row{display:grid; grid-template-columns:0.8fr 1.6fr 0.5fr 0.6fr 26px; gap:6px; align-items:center}
.cg-rowhead{padding:0 2px 4px; font-size:10.5px; font-weight:700; opacity:.6; letter-spacing:.03em}
.cg-rows{display:flex; flex-direction:column; gap:6px}
.cg-row input{
  width:100%; min-width:0; padding:7px 8px; font-size:12.5px;
  border:1px solid hsl(var(--border,214 32% 91%)); border-radius:9px;
  background:hsl(var(--background,0 0% 100%)); color:inherit; font-family:inherit;
}
.cg-row input:focus{outline:none; border-color:hsl(var(--primary,221 83% 53%)); box-shadow:0 0 0 3px hsl(var(--primary,221 83% 53%)/.14)}
.cg-scale{display:flex; flex-direction:column; gap:5px}
.cg-srow{display:grid; grid-template-columns:0.7fr 0.7fr 1.2fr; gap:6px}
.cg-srow input{
  width:100%; min-width:0; padding:6px 8px; font-size:12px;
  border:1px solid hsl(var(--border,214 32% 91%)); border-radius:8px;
  background:hsl(var(--background,0 0% 100%)); color:inherit; font-family:inherit;
}
@media (max-width:520px){
  .cg-rowhead{display:none}
  .cg-row{grid-template-columns:1fr 1fr 26px}
}

/* the A4 marksheet itself */
.a4.cgdoc{padding:18mm 16mm; color:#0f172a; font-size:11px; line-height:1.5}
.cg-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  border-bottom:2px solid; padding-bottom:9px; margin-bottom:14px}
.cg-head h1{margin:0; font-size:19px; font-weight:800; line-height:1.2}
.cg-head p{margin:3px 0 0; font-size:11px; opacity:.7}
.cg-id{text-align:right; font-size:11px}
.cg-id b{display:block; font-size:13px}
.cg-id span{display:block; opacity:.65}
.cg-term{margin-bottom:13px; break-inside:avoid}
.cg-term-h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; font-size:12px}
.cg-term-h span{font-size:10.5px; opacity:.7}
.cg-tab{width:100%; border-collapse:collapse; font-size:10.5px}
.cg-tab th,.cg-tab td{border:1px solid #cbd5e1; padding:4px 6px; text-align:left}
.cg-tab th{background:#f1f5f9; font-weight:700}
.cg-tab .n{text-align:right; width:52px; white-space:nowrap}
.cg-tab.zebra tbody tr:nth-child(even){background:#f8fafc}
.cg-foot{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px;
  padding:10px 12px; border:1px solid; border-radius:8px}
.cg-foot span{display:block; font-size:10px; opacity:.7}
.cg-foot b{display:block; font-size:15px; font-weight:800}
.cg-note{margin-top:10px; font-size:9.5px; opacity:.6; line-height:1.5}

/* ---------- reference list ------------------------------------------- */
.ct-cites{display:flex; flex-direction:column; gap:6px}
.ct-cite{display:flex; align-items:baseline; gap:9px; font-size:11.5px}
.ct-cite code{
  flex:none; padding:2px 7px; border-radius:7px; font-size:11px; font-weight:600;
  background:hsl(var(--muted,210 40% 96%)); border:1px solid hsl(var(--border,214 32% 91%));
}
.ct-cite span{opacity:.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.a4.ctdoc{padding:22mm 20mm; color:#0f172a; font-size:11.5px; line-height:1.65}
.ct-h{margin:0 0 14px; font-size:20px; font-weight:800; border-bottom:2px solid; padding-bottom:7px}
.ct-list{margin:0; padding:0; list-style:none; counter-reset:ref}
.ct-list li{margin-bottom:9px; break-inside:avoid}
.ct-list.hang li{padding-left:12mm; text-indent:-12mm}
.ct-list.num li{counter-increment:ref; padding-left:11mm; position:relative}
.ct-list.num li::before{content:"[" counter(ref) "]"; position:absolute; left:0; font-weight:600}
.ct-note{margin-top:16px; font-size:9.5px; opacity:.6; line-height:1.5}

/* =====================================================================
   v3.12.0 — the study area map
   The map is real SVG inside the A4 sheet, so everything here is layout
   and furniture: the frame, the inset box, the legend and the caption
   block. The SVG's own styling is duplicated in map.js (MAP_SVG_CSS)
   because a serialised SVG travels without the page's stylesheet.
   ===================================================================== */
.a4.mmdoc{
  padding:16mm 14mm; color:#0f172a; font-size:11px; line-height:1.5;
  display:flex; flex-direction:column;
}
.a4.mmdoc.land{width:1123px; min-height:794px}

.mm-head{margin-bottom:9px}
.mm-head h1{margin:0; font-size:17px; font-weight:800; line-height:1.25}
.mm-head p{margin:3px 0 0; font-size:11.5px; opacity:.7}

.mm-frame{
  position:relative; flex:1; min-height:0;
  border:1px solid #cbd5e1; background:#fff;
}
.mm-frame svg{display:block; width:100%; height:100%}
.mm-frame .mm-ctx path{fill:#f1f5f9; stroke:#cbd5e1; stroke-width:.5}
.mm-frame .mm-area path{stroke-width:.9}
.mm-frame .mm-grat line{stroke:#cbd5e1; stroke-width:.4; stroke-dasharray:2 3}
.mm-frame .mm-grat text{font:8px system-ui,sans-serif; fill:#64748b}
.mm-frame .mm-lab text{font:600 9px system-ui,sans-serif; fill:#0f172a; text-anchor:middle}
.mm-frame .mm-lab text.halo{fill:none; stroke:#fff; stroke-width:2.6; stroke-linejoin:round}
.mm-frame .mm-sites circle{stroke:#fff; stroke-width:1.1}
.mm-frame .mm-sites text{font:600 8px system-ui,sans-serif; fill:#0f172a}
.mm-frame .mm-sites text.halo{fill:none; stroke:#fff; stroke-width:2.4; stroke-linejoin:round}
.mm-frame .mm-scale text{font:600 8px system-ui,sans-serif; fill:#0f172a}
.mm-frame .mm-north text{font:700 10px system-ui,sans-serif; fill:#0f172a}

.mm-frame .mm-inset path{stroke-width:.35}
.mm-frame .mm-inset text{font:7px system-ui,sans-serif; fill:#64748b}

.mm-legend{display:flex; flex-wrap:wrap; align-items:center; gap:11px; margin-top:8px; font-size:9.5px}
.mm-key{display:inline-flex; align-items:center; gap:5px}
.mm-key i{width:13px; height:9px; border:1px solid; display:inline-block}
.mm-key b{width:8px; height:8px; border-radius:50%; display:inline-block; border:1px solid #fff; box-shadow:0 0 0 1px #94a3b8}
.mm-ramp{display:inline-flex; align-items:center; gap:5px}
.mm-ramp em{font-style:normal; font-weight:600}
.mm-ramp .bar{width:64px; height:8px; display:inline-block; border:1px solid #cbd5e1}
.mm-ramp small{font-size:8px; opacity:.7}

.mm-foot{margin-top:8px; border-top:1px solid #e2e8f0; padding-top:6px}
.mm-foot .cap{margin:0 0 3px; font-size:10px; line-height:1.5}
.mm-foot .meta{margin:0; font-size:8.5px; opacity:.62; line-height:1.45}

.mm-dpi{
  height:28px; padding:0 7px; font-size:11.5px; font-family:inherit; color:inherit;
  border:1px solid hsl(var(--border,214 32% 91%)); border-radius:9px;
  background:hsl(var(--background,0 0% 100%));
}

/* =====================================================================
   v3.13.0 — the language pair
   Two switches sitting together above the sheet: what the interface is
   in, and what the document is in. They are separate because a student
   may well want a Bangla interface and an English CV.
   ===================================================================== */
.st-lang{display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap}
.st-lang-grp{
  display:inline-flex; align-items:center; gap:2px; padding:2px;
  border:1px solid hsl(var(--border,214 32% 91%)); border-radius:999px;
  background:hsl(var(--muted,210 40% 96%)/.6);
}
.st-lang-grp > b{
  font-size:9.5px; font-weight:800; letter-spacing:.04em;
  padding:0 5px 0 7px; opacity:.5;
}
.st-lang-opt{
  padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600;
  color:inherit; text-decoration:none; opacity:.62; white-space:nowrap;
  transition:background .15s, opacity .15s;
}
.st-lang-opt:hover{opacity:1; background:hsl(var(--primary,221 83% 53%)/.1)}
.st-lang-opt.on{
  opacity:1; background:hsl(var(--card,0 0% 100%));
  box-shadow:0 1px 3px rgb(2 6 23 / .12);
}

/* Bangla needs a little more line height than Latin at the same size —
   the conjuncts and the matra sit outside the Latin box. */
html[lang="bn"] .a4,
.a4[lang="bn"]{line-height:1.72}
html[lang="bn"] .sfield > label,
html[lang="bn"] .sp-note{line-height:1.65}

/* =====================================================================
   v3.14.0 — the defence deck (/services/viva) and the questionnaire
   (/services/questionnaire)

   Both are list editors driving one sheet, so the list chrome (.vrow,
   .vbtn, .vlist) is shared and only the sheet differs.
   ===================================================================== */

/* ---------- the shared list editor ---------------------------------- */
.vlist{display:flex; flex-direction:column; gap:10px}
.vrow{
  border:1px solid hsl(var(--border)); border-radius:12px; padding:10px;
  background:hsl(var(--card)); display:flex; flex-direction:column; gap:8px;
}
.vrow.off{opacity:.5}
.vrow-head{display:flex; align-items:center; gap:6px}
.vrow-n{
  flex:0 0 auto; width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
  background:hsl(var(--muted)); font-size:11px; font-weight:700; color:hsl(var(--muted-foreground));
}
.vrow-h{
  flex:1 1 auto; min-width:0; font-size:13px; font-weight:600;
  padding:7px 9px; border:1px solid hsl(var(--border)); border-radius:8px;
  background:hsl(var(--background)); color:inherit;
}
.vrow-h.sub{font-weight:400; font-size:12px}
.vrow-b,.vrow-n2{
  width:100%; font-size:12.5px; line-height:1.55; padding:8px 9px; resize:vertical;
  border:1px solid hsl(var(--border)); border-radius:8px;
  background:hsl(var(--background)); color:inherit; font-family:inherit;
}
.vrow-n2{font-size:12px; background:hsl(var(--muted)/.45)}
.vrow-foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:11.5px}
.vbtn{
  flex:0 0 auto; border:1px solid hsl(var(--border)); background:hsl(var(--background));
  color:inherit; border-radius:7px; padding:4px 8px; font-size:11.5px; line-height:1.2; cursor:pointer;
}
.vbtn:hover{background:hsl(var(--muted))}
.vbtn.bad:hover{border-color:#dc2626; color:#dc2626}
.vcount{color:hsl(var(--muted-foreground))}
.vcount.over{color:#b91c1c; font-weight:700}
.vpick{
  cursor:pointer; border:1px dashed hsl(var(--border)); border-radius:7px; padding:4px 8px;
}
.vpick input{display:none}

/* ---------- the deck ------------------------------------------------- */
.vfilm{
  display:flex; gap:7px; overflow-x:auto; padding:10px 2px 4px; margin-top:8px;
  scrollbar-width:thin;
}
.vthumb{
  flex:0 0 auto; width:112px; text-align:left; cursor:pointer;
  border:1px solid hsl(var(--border)); border-radius:9px; padding:7px 8px;
  background:hsl(var(--card)); color:inherit; font-size:11px; line-height:1.3;
}
.vthumb b{display:block; font-size:10px; color:hsl(var(--muted-foreground)); margin-bottom:2px}
.vthumb span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.vthumb.on{border-color:hsl(var(--primary)); box-shadow:0 0 0 2px hsl(var(--primary)/.18)}

.slide.vslide{padding:18mm 20mm; justify-content:flex-start}
/* the title slide is the one that should breathe: it is centred on the
   sheet like the standalone title-slide tool, not pinned to the top */
.slide.vslide.title{justify-content:center}
.slide.vslide.title .v-band{height:4mm}
.slide.vslide.title .s-title{font-size:34pt; margin:5mm 0 3mm}
.vslide .v-band{position:absolute; left:0; right:0; top:0; height:4mm; background:linear-gradient(90deg,var(--accent),var(--accent2))}
.vslide.bar .v-band{height:22mm}
.vslide.bar .v-h{color:#fff; position:relative; margin:-8mm 0 8mm}
.vslide.rule .v-h{border-bottom:1.2mm solid var(--accent); padding-bottom:3mm; margin-bottom:7mm}
.vslide.side{padding-left:56mm}
.vslide.side .v-band{left:0; top:0; bottom:0; right:auto; width:44mm; height:auto;
  background:linear-gradient(160deg,var(--soft),transparent)}
.vslide.dark{background:var(--ink); color:#fff}
.vslide.dark .v-ul li{color:rgba(255,255,255,.9)}
.vslide.dark .v-foot,.vslide.dark .v-num{color:rgba(255,255,255,.55)}
.v-h{font-size:26pt; font-weight:800; letter-spacing:-.01em; line-height:1.15; margin:0 0 7mm; color:var(--accent)}
.vslide.dark .v-h{color:#fff}
.v-body{display:flex; gap:10mm; align-items:flex-start}
.v-body.split .v-col{flex:1 1 52%}
.v-col{flex:1 1 auto; min-width:0}
.v-ul{margin:0; padding:0; list-style:none}
.v-ul li{
  position:relative; padding-left:8mm; margin-bottom:5mm;
  font-size:17pt; line-height:1.38;
}
.v-ul.tight li{font-size:15pt; margin-bottom:3.5mm}
.v-ul li::before{
  content:''; position:absolute; left:0; top:2.4mm;
  width:3mm; height:3mm; border-radius:1mm; background:var(--accent);
}
.v-ul li.sub{padding-left:15mm; font-size:13.5pt; opacity:.82}
.v-ul li.sub::before{left:8mm; width:2mm; height:2mm; border-radius:50%}
.v-fig{flex:1 1 44%; display:grid; place-items:center}
.v-fig img{max-width:100%; max-height:92mm; object-fit:contain; border-radius:2mm}
.v-empty{font-size:13pt; color:#94a3b8; font-style:italic}
.v-foot{
  position:absolute; left:20mm; right:20mm; bottom:8mm;
  display:flex; justify-content:space-between; font-size:9pt; color:#94a3b8;
}
.v-num{position:absolute; right:20mm; bottom:8mm; font-size:9pt; color:#94a3b8}
.v-foot .v-fnum{flex:0 0 auto; min-width:14mm; text-align:right}
.v-foot > span:nth-child(2){flex:1 1 auto; text-align:center}

/* ---------- the questionnaire sheet ---------------------------------- */
.qsheet{padding:16mm 15mm 14mm; font-size:11pt; line-height:1.5}
.qsheet.compact{font-size:10pt; line-height:1.38}
.qhead{border-bottom:.6mm solid var(--accent); padding-bottom:4mm; margin-bottom:5mm}
.quni{font-size:9.5pt; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:700}
.qtitle{font-size:19pt; font-weight:800; line-height:1.2; margin:2mm 0 1mm}
.qstudy{font-size:10.5pt; color:#475569}
.qids{display:flex; flex-wrap:wrap; gap:2mm 7mm; margin-top:3mm; font-size:9pt; color:#64748b}
.qident{width:100%; border-collapse:collapse; margin-bottom:5mm; font-size:9.5pt}
.qident td{border:.3mm solid #94a3b8; padding:2.2mm 2mm; height:8mm}
.qident td:nth-child(odd){background:var(--soft); width:22%; font-weight:600; white-space:nowrap}
.qintro{border:.3mm solid #cbd5e1; border-left:1.2mm solid var(--accent); padding:3mm 4mm; margin-bottom:5mm; background:var(--soft)}
.qintro b{font-size:9.5pt; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.qintro p{margin:1.5mm 0 0; font-size:10pt; line-height:1.5}
.qconsent{display:flex; flex-wrap:wrap; gap:3mm 10mm; margin-top:3mm; font-size:9.5pt}
.qsec{
  font-size:12pt; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; background:var(--accent); padding:1.8mm 3mm; border-radius:1mm;
  margin:6mm 0 3mm; break-after:avoid; page-break-after:avoid;
}
.qnote{font-size:9.5pt; color:#64748b; font-style:italic; margin:0 0 3mm}
.qinstr{
  font-size:10pt; font-weight:600; color:var(--accent);
  border-left:.8mm solid var(--accent); padding-left:3mm; margin:3mm 0;
}
.qq{margin-bottom:4mm; break-inside:avoid; page-break-inside:avoid}
.qsheet.compact .qq{margin-bottom:2.6mm}
.qlab{display:flex; gap:2mm; align-items:baseline}
.qn{flex:0 0 auto; font-weight:700; min-width:7mm}
.qtext{flex:1 1 auto}
.qreq{color:#b91c1c; font-style:normal; font-weight:700; margin-left:1mm}
.qcode{
  flex:0 0 auto; width:14mm; height:6mm; border:.3mm solid #94a3b8; border-radius:.8mm;
  background:#fff; margin-left:3mm;
}
.qhint{font-size:9pt; color:#64748b; font-style:italic; margin:.6mm 0 0 9mm}
.qa{margin:1.6mm 0 0 9mm; display:flex; flex-wrap:wrap; align-items:center; gap:2mm 4mm}
.qline{display:block; width:100%; border-bottom:.25mm dotted #64748b; height:5.5mm}
.qrule{display:inline-block; min-width:38mm; border-bottom:.25mm solid #64748b; height:5mm}
.qrule.w{min-width:52mm; border:0}
.qa.boxes i{display:inline-block; width:6mm; height:6.5mm; border:.3mm solid #64748b; border-radius:.8mm}
.qunit{font-size:9pt; color:#64748b}
.qopts{margin:1.6mm 0 0 9mm; display:flex; flex-direction:column; gap:1.4mm}
.qopts.wide{flex-direction:row; flex-wrap:wrap; gap:1.4mm 7mm}
.qopt{display:flex; align-items:center; gap:1.6mm; font-size:10.5pt}
.qopt u{text-decoration:none; font-size:8.5pt; color:#94a3b8; min-width:4mm}
.qopt .ci,.qconsent .ci{display:inline-block; width:3.6mm; height:3.6mm; border:.3mm solid #334155; border-radius:50%}
.qopt .sq{display:inline-block; width:3.6mm; height:3.6mm; border:.3mm solid #334155; border-radius:.5mm}
.qfoot{
  display:flex; justify-content:space-between; border-top:.3mm solid #cbd5e1;
  margin-top:7mm; padding-top:2.5mm; font-size:8.5pt; color:#94a3b8;
}

/* a phone gets the editor and the sheet stacked, like every other tool */
@media (max-width:860px){
  .vthumb{width:96px}
  .v-body{flex-direction:column; gap:5mm}
  .v-body.split .v-col,.v-fig{flex:1 1 auto; width:100%}
}


/* =====================================================================
   CV · Resume · Bio-data Studio            v3.15.0   (appended to studio.css)
   ---------------------------------------------------------------------
   Three things live here that the older studio did not need:

     · a true 50/50 split — the editor and the sheet get exactly half
       the row each, and each scrolls on its own
     · a FLOWING sheet. A CV is not one page; it is as many as it is.
       The sheet grows, and a numbered guide is drawn at every 297 mm so
       the page break is visible before the printer finds it
     · the ten new print layouts, plus the two Bangladeshi forms
       (bio-data and marriage bio-data) which are tables, not documents
   ===================================================================== */

/* ---------- the wide page shell --------------------------------------- */
.container-wide{max-width:1680px}
.studio-page .studio-head{display:flex; gap:18px; align-items:flex-end; margin-bottom:18px}
.studio-page .studio-head .grow{flex:1 1 auto; min-width:0}

/* ---------- the type bar ---------------------------------------------- */
.typebar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:12px 14px; margin-bottom:14px;
  border:1px solid hsl(var(--border,214 32% 91%)); border-radius:14px;
  background:hsl(var(--card,0 0% 100%));
}
.typebar .grow{flex:1 1 auto; min-width:0}
.tb-now{display:flex; flex-direction:column; gap:2px; min-width:0}
.tb-lbl{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:hsl(var(--muted-foreground,215 16% 47%)); display:inline-flex; gap:6px; align-items:center}
.tb-now strong{font-size:1.02rem; line-height:1.25}
.tb-best{font-size:.8rem; color:hsl(var(--muted-foreground,215 16% 47%))}
.sm-lang button{min-width:74px}

.typebox{
  border:1px solid hsl(var(--border,214 32% 91%)); border-radius:16px;
  padding:16px; margin-bottom:16px; background:hsl(var(--muted,210 40% 96%)/.45);
}
.typebox[hidden]{display:none}
.tgroup{margin-bottom:16px}
.tgroup:last-child{margin-bottom:0}
.tgroup-h{
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:hsl(var(--primary,221 83% 53%)); margin-bottom:8px;
}
.tgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:10px}
.tcard{
  display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer;
  padding:11px 13px; border-radius:12px; background:hsl(var(--card,0 0% 100%));
  border:1px solid hsl(var(--border,214 32% 91%)); transition:.16s;
}
.tcard:hover{border-color:hsl(var(--primary,221 83% 53%)/.55); transform:translateY(-1px)}
.tcard[aria-pressed="true"]{
  border-color:hsl(var(--primary,221 83% 53%));
  box-shadow:0 0 0 2px hsl(var(--primary,221 83% 53%)/.18);
  background:hsl(var(--primary,221 83% 53%)/.05);
}
.tc-en{font-weight:700; font-size:.92rem; line-height:1.2}
.tc-bn{font-size:.84rem; color:hsl(var(--primary,221 83% 53%))}
.tc-best{font-size:.76rem; color:hsl(var(--muted-foreground,215 16% 47%)); line-height:1.35}
.tc-len{font-size:.72rem; color:hsl(var(--muted-foreground,215 16% 47%)); opacity:.8}

/* ---------- 50 / 50 --------------------------------------------------- */
.studio.split50{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1080px){ .studio.split50{grid-template-columns:1fr} }

/* the editor column scrolls on its own; so does the stage */
.studio.split50 > .studio-editor{gap:12px}
.studio.split50 > .studio-stage{max-height:calc(100vh - 86px - 24px)}

/* ---------- editor details -------------------------------------------- */
.lbl-bn{font-weight:500; opacity:.65; font-size:.92em}
.sp-tools{margin-left:auto; display:flex; gap:4px; align-items:center}
.sfield.full{grid-column:1/-1}
.sitem-head .grow{flex:1 1 auto}

.prow{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto; gap:8px; align-items:center; margin-bottom:7px}
.prow input{
  width:100%; padding:7px 10px; border-radius:9px; font:inherit; font-size:.88rem;
  border:1px solid hsl(var(--border,214 32% 91%)); background:hsl(var(--background,0 0% 100%));
  color:inherit;
}
.prow .pk{font-weight:600}
.prow input:focus{outline:2px solid hsl(var(--primary,221 83% 53%)/.4); outline-offset:1px}

/* ---------- real pages, stacked ---------------------------------------
   The preview is a stack of separate A4 sheets — page 1, page 2, page 3 —
   with a gap between them, the way a PDF reader shows a document. Each
   sheet is exactly 297 mm and clips, so nothing can quietly run past the
   bottom edge without the split being visible. paginate.js decides where
   the splits fall. */
.pagestack{display:flex; flex-direction:column; gap:30px; width:794px}
.pgwrap{position:relative; flex:0 0 auto; width:794px}
.a4.pg{
  height:297mm; min-height:297mm; overflow:hidden; position:relative;
  display:block; width:794px;
}
/* The caption lives on the WRAPPER. Put it on the sheet and its box adds
   to the sheet's scrollHeight, which is the one number the paginator
   trusts — a 20 px caption then makes every page look overfull. */
.pgwrap::after{
  content:'page ' attr(data-page) ' / ' attr(data-of);
  position:absolute; right:0; bottom:-21px;
  font:500 11px/1 ui-sans-serif,system-ui,sans-serif;
  color:hsl(var(--muted-foreground,215 16% 47%)); letter-spacing:.02em;
}
/* a continued block carries no top spacing — it is the middle of something */
.a4.pg .pg-cont{margin-top:0 !important; padding-top:0 !important}
.a4.pg .pg-cont > h2:first-child{margin-top:0}
@media print{
  .pgwrap{break-after:page; page-break-after:always; width:auto}
  .pgwrap:last-child{break-after:auto; page-break-after:auto}
  .pgwrap::after{display:none}
  .a4.pg{box-shadow:none !important; width:210mm}
  .pagestack{display:block; gap:0; width:auto}
  #printRoot .a4.pg{height:297mm !important; min-height:0 !important; overflow:hidden !important}
}

/* ---------- the flowing sheet (still used by the cover page) ---------- */
/* One scroller, not two. The STAGE COLUMN scrolls (it is the sticky
   half-width panel); .stage-wrap just grows with the sheet. A scroller
   inside a scroller is how the previous release ended up hiding half the
   form, and it is just as bad on this side. */
.stage-wrap.tall{align-items:flex-start; padding:22px 14px 40px; max-height:none; overflow:visible}
.stage-wrap.tall .a4-fit{position:relative; transform-origin:top left}

.a4.cvflow{
  height:auto; min-height:297mm; overflow:visible;
  display:block;                       /* flow, not flex — sections stack */
}
/* the page-break guides, drawn beside the sheet, not on it */
/* The guides live inside .a4-fit, so they are scaled by the same transform
   as the sheet. .a4-fit has an explicit (already-scaled) height to reserve
   layout space, so the guides are given the sheet's NATURAL box instead of
   inset:0 — otherwise the scale would be counted twice. */
.page-guides{position:absolute; left:0; top:0; width:794px; pointer-events:none}
.page-guides span{
  position:absolute; left:0; right:0; height:0;
  border-top:1px dashed rgba(220,38,38,.5);
  font-size:0;                                  /* the number sits in ::after */
}
.page-guides span::after{
  content:'page ' attr(data-n);
  position:absolute; right:2px; top:3px;
  font:600 10px/1 ui-sans-serif,system-ui,sans-serif; color:#dc2626;
}
@media print{ .page-guides{display:none} }

.stage-hint{
  display:inline-flex; gap:5px; align-items:center; font-size:.76rem;
  color:hsl(var(--muted-foreground,215 16% 47%));
}
@media (max-width:1240px){ .stage-hint{display:none} }

/* =====================================================================
   THE SHEET — shared pieces the new layouts need
   ===================================================================== */
.cvdoc .cv-main{min-width:0}
.cvdoc .entry.tight{margin-bottom:2.2mm}
.cvdoc .para{margin:0 0 1.8mm; font-size:10.2pt; color:#334155}
.cvdoc .para:last-child{margin-bottom:0}

/* label → value rows: the bio-data blocks */
.cvdoc table.pairs{width:100%; border-collapse:collapse; font-size:10pt}
.cvdoc table.pairs th{
  text-align:left; font-weight:600; color:#475569; width:46mm;
  padding:1.1mm 3mm 1.1mm 0; vertical-align:top; white-space:nowrap;
}
.cvdoc table.pairs th::after{content:':'; padding-left:2mm; color:#94a3b8}
.cvdoc table.pairs td{padding:1.1mm 0; vertical-align:top}

/* ruled tables: consultancy assignments, bio-data education */
.cvdoc table.atab{width:100%; border-collapse:collapse; font-size:9.6pt; margin-top:1mm}
.cvdoc table.atab th{
  text-align:left; font-weight:700; font-size:9pt; padding:1.6mm 2mm;
  background:var(--soft); border:.25mm solid #cbd5e1; color:var(--ink);
}
.cvdoc table.atab td{padding:1.6mm 2mm; border:.25mm solid #cbd5e1; vertical-align:top}
.cvdoc table.atab td ul{margin:1mm 0 0; padding-left:4mm}
.cvdoc table.atab td li{margin:.4mm 0}

/* grouped skills: heading on the left, the list on the right */
.cvdoc .grouped{display:flex; flex-direction:column; gap:1.4mm}
.cvdoc .grow-row{display:grid; grid-template-columns:34mm 1fr; gap:3mm; font-size:9.9pt; align-items:baseline}
.cvdoc .grow-row b{font-weight:700; color:var(--accent)}
.cvdoc .grow-row span{color:#334155}

.cvdoc .cv-photo{width:28mm; height:28mm; border-radius:50%; object-fit:cover; border:1.2mm solid #fff}
.cvdoc .cv-photo.box{border-radius:2mm; border:.3mm solid #94a3b8; width:30mm; height:38mm}

/* =====================================================================
   THE SIXTEEN LAYOUTS
   ===================================================================== */

/* --- classic / formal (already in the base sheet) --------------------- */
.cvdoc .cv-head-box{text-align:center; border:.4mm solid var(--ink); padding:6mm; margin-bottom:6mm}
.cvdoc .cv-head-academic{text-align:center}
.cvdoc .cv-head-academic .contact{justify-content:center}

/* --- ATS plain: no colour, no columns, headings a parser can find ----- */
.cvdoc.tpl-ats{font-family:var(--body-font,"Inter",sans-serif); font-size:11pt}
.cvdoc.tpl-ats h2{
  color:#000; border:0; border-bottom:1px solid #000; letter-spacing:.04em;
  text-transform:uppercase; font-size:10.5pt; padding-bottom:1mm;
}
.cvdoc.tpl-ats .name{font-size:20pt; color:#000}
.cvdoc.tpl-ats .role{color:#000; font-weight:600}
.cvdoc.tpl-ats .entry .org{color:#000}
.cvdoc.tpl-ats .chip{background:none; border:0; padding:0; color:#000}
.cvdoc.tpl-ats .chip::after{content:' · '}
.cvdoc.tpl-ats .chips{display:block}
.cvdoc.tpl-ats .rule{display:none}
.cvdoc.tpl-ats .cv-photo{display:none}

/* --- compact: one page, everything tightened ------------------------- */
.cvdoc.tpl-compact{font-size:9.6pt; line-height:1.42}
.cvdoc.tpl-compact .name{font-size:19pt}
.cvdoc.tpl-compact h2{font-size:9.6pt; margin-bottom:1.6mm}
.cvdoc.tpl-compact section{margin-bottom:calc(3.6mm * var(--density))}
.cvdoc.tpl-compact .entry{margin-bottom:2.4mm}
.cvdoc.tpl-compact .cv-head-compact{display:flex; align-items:flex-end; gap:6mm}

/* --- executive: a rule in the accent, generous type ------------------- */
.cvdoc.tpl-executive .cv-head-exec{border-bottom:.8mm solid var(--accent); padding-bottom:4mm; margin-bottom:6mm}
.cvdoc.tpl-executive .name{font-size:26pt; letter-spacing:-.025em}
.cvdoc.tpl-executive h2{
  border:0; color:var(--ink); letter-spacing:.12em; font-size:10pt;
  text-transform:uppercase; border-bottom:.25mm solid #cbd5e1; padding-bottom:1.4mm;
}
.cvdoc.tpl-executive .entry .top b{font-size:11.6pt}

/* --- timeline: a spine down the left with a node per entry ------------ */
.cvdoc.tpl-timeline .cv-timeline section{position:relative; padding-left:10mm}
.cvdoc.tpl-timeline .cv-timeline section::before{
  content:''; position:absolute; left:2.6mm; top:5mm; bottom:0;
  width:.35mm; background:var(--soft);
}
.cvdoc.tpl-timeline .cv-timeline h2{margin-left:-10mm}
.cvdoc.tpl-timeline .entry{position:relative}
.cvdoc.tpl-timeline .entry::before{
  content:''; position:absolute; left:-8.2mm; top:2mm;
  width:2.4mm; height:2.4mm; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 .8mm #fff;
}

/* --- technical: the side panel on the RIGHT -------------------------- */
.cvdoc.tpl-technical .cv-two.rev{grid-template-columns:1fr 62mm}
.cvdoc.tpl-technical .cv-two.rev .cv-side{
  margin:calc(var(--pad) * -1) calc(var(--pad) * -1) calc(var(--pad) * -1) 0;
}
.cvdoc.tpl-technical h2{letter-spacing:.06em; text-transform:uppercase; font-size:9.8pt}

/* --- portfolio: project cards ---------------------------------------- */
.cvdoc.tpl-portfolio .cv-head-portfolio{margin-bottom:5mm}
.cvdoc.tpl-portfolio section[data-k="projects"] .entry{
  background:var(--soft); border-radius:2mm; padding:3mm 3.5mm; margin-bottom:2.6mm;
}
.cvdoc.tpl-portfolio h2{color:var(--accent); border-bottom:.3mm solid var(--accent); }

/* --- creative: soft shapes behind the header ------------------------- */
.cvdoc.tpl-creative{position:relative; overflow:hidden}
.cvdoc.tpl-creative .cv-head-creative{position:relative; z-index:1; margin-bottom:6mm}
.cvdoc.tpl-creative::before{
  content:''; position:absolute; right:-18mm; top:-18mm; width:60mm; height:60mm;
  border-radius:50%; background:var(--accent2); opacity:.16;
}
.cvdoc.tpl-creative::after{
  content:''; position:absolute; left:-22mm; bottom:-22mm; width:70mm; height:70mm;
  border-radius:50%; background:var(--accent); opacity:.1;
}
.cvdoc.tpl-creative .name{font-size:28pt}
.cvdoc.tpl-creative h2{border:0; color:var(--accent); font-size:11pt}
.cvdoc.tpl-creative section{position:relative; z-index:1}

/* --- consultancy: the assignment table carries the document ---------- */
.cvdoc.tpl-consultancy{font-size:10pt}
.cvdoc.tpl-consultancy h2{
  background:var(--ink); color:#fff; padding:1.4mm 3mm; border:0;
  font-size:9.6pt; letter-spacing:.06em; text-transform:uppercase;
}
.cvdoc.tpl-consultancy .cv-photo{display:none}

/* --- Europass: a blue band and a two-column body --------------------- */
.cvdoc.tpl-europass .cv-euro-band{
  background:var(--ink); color:#fff; margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 6mm;
  padding:4mm var(--pad); font-family:var(--head-font); font-size:13pt; letter-spacing:.04em;
}
.cvdoc.tpl-europass section{display:grid; grid-template-columns:42mm 1fr; gap:5mm; align-items:start}
.cvdoc.tpl-europass h2{
  grid-column:1; border:0; color:var(--accent); font-size:9.6pt;
  text-transform:uppercase; letter-spacing:.05em; margin:0;
}
.cvdoc.tpl-europass section > *:not(h2){grid-column:2}
.cvdoc.tpl-europass section{border-top:.25mm solid #cbd5e1; padding-top:2.4mm}

/* --- the Bangladeshi bio-data ---------------------------------------- */
.cvdoc.tpl-govt{font-size:10.4pt}
.cvdoc.tpl-govt .cv-head-govt{
  position:relative; text-align:center; border-bottom:.5mm solid var(--ink);
  padding-bottom:4mm; margin-bottom:5mm; min-height:40mm;
}
.cvdoc.tpl-govt .doc-title{
  font-family:var(--head-font); font-size:15pt; font-weight:800; letter-spacing:.06em;
  text-decoration:underline; text-underline-offset:2mm; margin-bottom:4mm;
}
.cvdoc.tpl-govt .cv-head-govt .cv-photo.box{position:absolute; right:0; top:12mm}
.cvdoc.tpl-govt .cv-head-govt .contact{justify-content:center}
.cvdoc.tpl-govt h2{
  border:0; background:var(--soft); padding:1.4mm 3mm; font-size:10pt;
  color:var(--ink); font-weight:700; margin-bottom:2.4mm;
}
.cvdoc.tpl-govt section{margin-bottom:calc(4.5mm * var(--density))}
.cvdoc.tpl-govt section[data-k="declaration"] .para{margin-top:2mm}
.cvdoc.tpl-govt section[data-k="declaration"]::after{
  content:''; display:block; margin:14mm 0 0 auto; width:52mm;
  border-top:.3mm solid var(--ink);
}

/* --- the marriage bio-data ------------------------------------------- */
/* the tint follows whichever colour theme is chosen, so the amber theme
   gives the warm card people expect and the navy theme stays cool */
.cvdoc.tpl-marriage{
  background:color-mix(in srgb, var(--accent) 4%, #fff);
  font-size:10.6pt; padding:calc(var(--pad) + 4mm);
}
@supports not (background:color-mix(in srgb, red 4%, #fff)){
  .cvdoc.tpl-marriage{background:var(--soft)}
}
.cvdoc.tpl-marriage::before{
  content:''; position:absolute; inset:6mm; border:.4mm solid var(--accent);
  border-radius:2mm; pointer-events:none;
}
.cvdoc.tpl-marriage::after{
  content:''; position:absolute; inset:7.6mm; border:.15mm solid var(--accent);
  border-radius:1.4mm; opacity:.5; pointer-events:none;
}
.cvdoc.tpl-marriage .cv-head-marriage{position:relative; text-align:center; margin-bottom:6mm}
.cvdoc.tpl-marriage .doc-title{
  font-family:var(--head-font); font-size:16pt; font-weight:800; color:var(--accent);
  letter-spacing:.05em; margin-bottom:4mm;
}
.cvdoc.tpl-marriage .cv-photo.box{margin:0 auto 3mm; display:block}
.cvdoc.tpl-marriage h2{
  border:0; color:var(--accent); text-align:center; font-size:11pt;
  letter-spacing:.05em; margin-bottom:2.6mm;
}
.cvdoc.tpl-marriage h2::before,.cvdoc.tpl-marriage h2::after{
  content:'—'; opacity:.45; padding:0 2.5mm;
}
.cvdoc.tpl-marriage table.pairs th{width:42mm; color:var(--accent)}

/* ---------- Bangla sheets ---------------------------------------------
   The chosen Latin pairing stays first, so an e-mail address and a DOI
   still look the way the template intends; Bengali glyphs fall through to
   Noto Sans Bengali, which is the one free face that renders conjuncts
   correctly. cv.js fetches it the moment the sheet is switched to বাংলা. */
.cvdoc.bn{
  line-height:1.74;
  font-family:var(--body-font,"Inter"),"Noto Sans Bengali","Hind Siliguri","SolaimanLipi",system-ui,sans-serif;
}
.cvdoc.bn h1,.cvdoc.bn h2,.cvdoc.bn h3,.cvdoc.bn .hd,.cvdoc.bn .doc-title{
  font-family:var(--head-font,var(--body-font,"Inter")),"Noto Sans Bengali","Hind Siliguri","SolaimanLipi",system-ui,sans-serif;
}
.cvdoc.bn .name{letter-spacing:0}
.cvdoc.bn h2{letter-spacing:0}
.cvdoc.bn table.pairs th{white-space:normal}

/* ---------- print ----------------------------------------------------- */
@media print{
  .a4.cvflow{min-height:0; box-shadow:none}
  .cvdoc section{break-inside:avoid}
  .cvdoc .entry{break-inside:avoid}
  .cvdoc table.atab tr{break-inside:avoid}
  .cvdoc h2{break-after:avoid}
}


/* =====================================================================
   Cover Letter & Application                v3.15.0  (appended to studio.css)
   ---------------------------------------------------------------------
   A letter is mostly one column of prose, so there is far less here than
   in the CV sheet. What it does need: a first-line-of-the-page block that
   behaves the same in eight layouts, and the Bangladeshi আবেদন, whose
   spacing conventions are not the same as an English business letter —
   the বিষয় line is emphasised and indented under বরাবর, and the নিবেদক
   block sits hard right with room above it for a wet signature.
   ===================================================================== */

.typebox.open{display:block}

/* ---------- the shared pieces ----------------------------------------- */
.ltdoc{font-size:11.4pt; line-height:calc(1.62 * var(--density,1)); color:var(--ink)}
.ltdoc .lt-name{font-size:17pt; font-weight:800; line-height:1.15; letter-spacing:-.015em}
.ltdoc .lt-role{font-size:10.6pt; font-weight:600; color:var(--accent); margin-top:.6mm}
.ltdoc .lt-meta{display:flex; flex-wrap:wrap; gap:1mm 5mm; font-size:9.6pt; color:#475569; margin-top:1.6mm}
.ltdoc .lt-from{margin-bottom:7mm}
.ltdoc .lt-from.inv,.ltdoc .lt-from.inv .lt-name{color:#fff}
.ltdoc .lt-from.inv .lt-role,.ltdoc .lt-from.inv .lt-meta{color:rgba(255,255,255,.9)}

.ltdoc .lt-date{margin-bottom:6mm; font-size:10.6pt}
.ltdoc .lt-lbl{font-weight:700; margin-bottom:1.2mm}
.ltdoc .lt-to{margin-bottom:6mm; font-size:10.8pt; line-height:1.5}
.ltdoc .lt-subject{margin-bottom:3mm; font-size:11pt}
.ltdoc .lt-ref{margin-bottom:4mm; font-size:10.4pt; color:#334155}
.ltdoc .lt-sal{margin-bottom:4mm; font-size:11.2pt}

.ltdoc .lt-body p{margin:0 0 3.6mm; text-align:left}
.ltdoc .lt-body.just p{text-align:justify; text-justify:inter-word; hyphens:auto}
.ltdoc .lt-body p:last-child{margin-bottom:0}
.ltdoc .lt-empty{color:#94a3b8; font-style:italic}

.ltdoc .lt-closing{margin:5mm 0 0; font-size:11pt}
.ltdoc .lt-sign{margin-top:10mm}
.ltdoc .lt-sig{max-height:16mm; max-width:60mm; display:block; margin-bottom:1mm}
.ltdoc .lt-sigline{width:54mm; border-top:.35mm solid var(--ink); margin:12mm 0 1.4mm}
.ltdoc .lt-signname{font-size:11pt}
.ltdoc .lt-signtitle{font-size:9.8pt; color:#475569; line-height:1.45}

.ltdoc .lt-encl{margin-top:8mm; font-size:10pt}
.ltdoc .lt-encl ol{margin:1.4mm 0 0; padding-left:6mm}
.ltdoc .lt-encl li{margin:.7mm 0}
.ltdoc .lt-gap{height:8mm}
.ltdoc .lt-hr{height:.35mm; background:var(--accent); opacity:.4; margin:0 0 6mm}

/* ---------- modern: a rule that ties the header to the accent --------- */
.ltdoc.lt-modern .lt-head{margin-bottom:7mm}
.ltdoc.lt-modern .lt-headrule{height:.7mm; background:var(--accent); margin-top:3.4mm; width:100%}

/* ---------- letterhead: a coloured band across the top ---------------- */
.ltdoc.lt-letterhead{padding:0}
.ltdoc.lt-letterhead .lt-band{
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  padding:12mm var(--pad) 9mm;
}
.ltdoc.lt-letterhead .lt-band .lt-from{margin-bottom:0}
.ltdoc.lt-letterhead .lt-inner{padding:9mm var(--pad) var(--pad)}
.ltdoc.lt-letterhead.pg-cont .lt-band{display:none}

/* ---------- centred serif -------------------------------------------- */
.ltdoc.lt-serif .lt-centrehead{text-align:center; margin-bottom:4mm}
.ltdoc.lt-serif .lt-centrehead .lt-meta{justify-content:center}
.ltdoc.lt-serif .lt-hr{background:var(--ink); opacity:.6; height:.3mm; margin-bottom:8mm}

/* ---------- two columns: contact down the left ------------------------ */
.ltdoc.lt-twocol{padding:0}
.ltdoc.lt-twocol .lt-two{display:grid; grid-template-columns:56mm 1fr; min-height:297mm}
.ltdoc.lt-twocol .lt-col{background:var(--soft); padding:var(--pad) 8mm}
.ltdoc.lt-twocol .lt-main{padding:var(--pad)}
.ltdoc.lt-twocol .lt-from{margin-bottom:8mm}
.ltdoc.lt-twocol .lt-meta{flex-direction:column; gap:1.4mm}
.ltdoc.lt-twocol .lt-encl{margin-top:0}

/* ---------- academic enquiry ----------------------------------------- */
.ltdoc.lt-academic .lt-from{margin-bottom:3mm}
.ltdoc.lt-academic .lt-subject{font-weight:600}

/* =====================================================================
   সরকারি আবেদন — the Bangladeshi application
   ===================================================================== */
.ltdoc.lt-govtbn{font-size:11.6pt; line-height:calc(1.78 * var(--density,1))}
.ltdoc.lt-govtbn .lt-date{text-align:right; margin-bottom:7mm}
.ltdoc.lt-govtbn .lt-to{margin-bottom:5mm}
.ltdoc.lt-govtbn .lt-to .lt-lbl{
  font-weight:700; font-size:12pt; margin-bottom:2mm; letter-spacing:.02em;
}
.ltdoc.lt-govtbn .lt-to > div:not(.lt-lbl){padding-left:6mm}
.ltdoc.lt-govtbn .lt-subject{
  margin:0 0 3mm; padding-left:6mm; font-weight:600;
}
.ltdoc.lt-govtbn .lt-subject b{font-weight:700}
.ltdoc.lt-govtbn .lt-ref{padding-left:6mm; margin-bottom:5mm}
.ltdoc.lt-govtbn .lt-sal{margin-bottom:4mm}
.ltdoc.lt-govtbn .lt-body p{text-align:justify; text-indent:8mm}
.ltdoc.lt-govtbn .lt-body p:first-child{text-indent:0}

/* the অতএব paragraph stands on its own — it is the request, not the story */
.ltdoc.lt-govtbn .lt-prayer{
  margin:5mm 0 0; text-align:justify; text-indent:8mm; font-size:11.6pt;
}

/* নিবেদক sits right, with room above it for a signature in ink */
.ltdoc.lt-govtbn .lt-nibedok{
  margin-top:12mm; margin-left:auto; width:70mm; text-align:left;
}
.ltdoc.lt-govtbn .lt-nibedok .lt-lbl{margin-bottom:2mm; font-weight:700}
.ltdoc.lt-govtbn .lt-nibedok .lt-sigline{width:56mm; margin-top:14mm}
.ltdoc.lt-govtbn .lt-encl{margin-top:10mm}
.ltdoc.lt-govtbn .lt-encl .lt-lbl{font-weight:700}

/* ---------- Bangla letters ------------------------------------------- */
.ltdoc.bn{
  font-family:var(--body-font,"Inter"),"Noto Sans Bengali","Hind Siliguri","SolaimanLipi",system-ui,sans-serif;
}
.ltdoc.bn .lt-name,.ltdoc.bn .lt-lbl{
  font-family:var(--head-font,var(--body-font,"Inter")),"Noto Sans Bengali","Hind Siliguri","SolaimanLipi",system-ui,sans-serif;
  letter-spacing:0;
}

@media print{
  .ltdoc .lt-body p{break-inside:avoid}
  .ltdoc .lt-sign,.ltdoc .lt-nibedok,.ltdoc .lt-encl{break-inside:avoid}
}

/* 15-Sep-2026 · logo / photo size, zoom, position and alignment controls */
.imgadj{margin-top:8px;padding:10px 12px;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--muted)/.35);display:grid;gap:6px}
.imgadj[hidden]{display:none}
.imgadj-h{font-size:12px;font-weight:700;color:hsl(var(--foreground));margin-bottom:2px}
.imgadj-row{display:grid;grid-template-columns:62px 1fr 34px 22px;align-items:center;gap:8px;font-size:12px;color:hsl(var(--muted-foreground))}
.imgadj-row input[type=range]{width:100%;accent-color:hsl(var(--primary))}
.imgadj-row output{font-variant-numeric:tabular-nums;text-align:right;color:hsl(var(--foreground));font-weight:600}
.imgadj-row i{font-style:normal;font-size:11px}
.imgadj-seg{grid-column:2 / span 3;display:flex;border:1px solid hsl(var(--border));border-radius:8px;overflow:hidden}
.imgadj-seg button{flex:1;border:0;background:hsl(var(--card));padding:5px 0;font-size:11.5px;cursor:pointer;color:hsl(var(--muted-foreground))}
.imgadj-seg button+button{border-left:1px solid hsl(var(--border))}
.imgadj-seg button[aria-pressed=true]{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.imgadj-reset{justify-self:end;border:0;background:none;color:hsl(var(--primary));font-size:12px;font-weight:600;cursor:pointer;padding:2px 0}

/* =====================================================================
   15-Sep-2026 · cover page — Submitted by / Submitted to styles
   ===================================================================== */
.cover-meta.mly-stack{grid-template-columns:1fr; max-width:120mm; margin-left:auto; margin-right:auto}
.cover-body.al-left .cover-meta.mly-stack{margin-left:0}
.cover-meta .cover-card h4{margin-bottom:2.5mm}
/* boxes */
.cover-meta.mst-card .cover-card{background:var(--soft); border-color:transparent}
.cover-meta.mst-outline .cover-card{background:none; border:.4mm solid var(--accent); border-radius:1.5mm}
.cover-meta.mst-shadow .cover-card{border:0; box-shadow:0 3mm 8mm -3mm rgba(15,23,42,.28); border-radius:3mm}
.cover-meta.mst-table .cover-card{border:.3mm solid var(--ink); border-radius:0; padding:0}
.cover-meta.mst-table .cover-card h4{margin:0; padding:2mm 4mm; background:var(--soft); color:var(--ink); border-bottom:.3mm solid var(--ink)}
.cover-meta.mst-table .cover-kv{padding:1.6mm 4mm; border-bottom:.2mm solid #cbd5e1}
.cover-meta.mst-table .cover-kv:last-child{border-bottom:0}
.cover-meta.mst-band .cover-card{padding:0; overflow:hidden; border-color:#cbd5e1}
.cover-meta.mst-band .cover-card h4{margin:0 0 2mm; padding:2.2mm 5mm; background:var(--accent); color:#fff}
.cover-meta.mst-band .cover-kv{padding:.7mm 5mm}
.cover-meta.mst-band .cover-card > :last-child{margin-bottom:3mm}
.cover-meta.mst-dark .cover-card{background:linear-gradient(135deg,var(--accent),var(--accent2)); border:0; color:#fff}
.cover-meta.mst-dark .cover-card h4,.cover-meta.mst-dark .cover-kv b{color:rgba(255,255,255,.82)}
.cover-meta.mst-leftbar .cover-card{border:0; border-left:1.4mm solid var(--accent); border-radius:0; background:none; padding:1mm 0 1mm 5mm}
.cover-meta.mst-glass .cover-card{background:rgba(255,255,255,.08); border:.3mm solid rgba(255,255,255,.22); color:#fff}
.cover-meta.mst-glass .cover-card h4{color:var(--accent2)}
.cover-meta.mst-glass .cover-kv b{color:rgba(255,255,255,.7)}
/* no box */
.cover-meta.mst-plain .cover-card,.cover-meta.mst-lines .cover-card,.cover-meta.mst-underline .cover-card,
.cover-meta.mst-split .cover-card,.cover-meta.mst-center .cover-card{border:0; background:none; border-radius:0; padding:0}
.cover-meta.mst-plain .cover-card h4{color:var(--ink); letter-spacing:.06em}
.cover-meta.mst-lines .cover-card h4{font-size:11pt; letter-spacing:0; text-transform:none; color:var(--ink); font-weight:800; text-decoration:underline; text-underline-offset:1.2mm}
.cover-meta.mst-lines .cover-kv b{min-width:28mm; color:var(--ink); font-weight:600}
.cover-meta.mst-lines .cover-kv b::after{content:':'; float:right; padding-right:2mm}
.cover-meta.mst-lines .cover-kv span{font-weight:500}
.cover-meta.mst-underline .cover-card h4{color:var(--ink); padding-bottom:1.5mm; border-bottom:.5mm solid var(--accent); display:inline-block; margin-bottom:3mm}
.cover-meta.mst-split{gap:0}
.cover-meta.mst-split .cover-card{padding:0 7mm}
.cover-meta.mst-split .cover-card + .cover-card{border-left:.35mm solid #94a3b8}
.cover-meta.mst-split.mly-stack .cover-card + .cover-card{border-left:0; border-top:.35mm solid #94a3b8; padding-top:5mm; margin-top:5mm}
.cover-meta.mst-center{text-align:center; gap:7mm}
.cover-meta.mst-center .cover-kv{justify-content:center}
.cover-meta.mst-center .cover-kv b{min-width:0}
.cover-meta.mst-center .cover-kv.is-name span{font-size:12.5pt; font-weight:800}
.cover-kv b:empty{display:none}

/* the eight new templates */
.t-bdc-on{font-size:12pt; font-style:italic; color:#334155; margin:6mm 0 3mm}
.t-bdc-box{border:.6mm solid var(--ink); padding:5mm 8mm; margin-bottom:4mm; width:100%}
.t-bdc-box .cover-title{margin:0}
.t-frame2{position:absolute; inset:7mm; border:.8mm solid var(--accent); pointer-events:none}
.t-frame2::after{content:''; position:absolute; inset:2mm; border:.25mm solid var(--accent)}
.t-panel{position:absolute; left:0; right:0; top:0; height:118mm; background:linear-gradient(150deg,var(--accent),var(--accent2))}
.t-panel-in{color:#fff; width:100%; min-height:98mm; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-bottom:10mm}
.t-panel-in .cover-dept,.t-panel-in .cover-sub{color:rgba(255,255,255,.88)}
.t-panel-in .cover-kind{background:rgba(255,255,255,.18) !important; color:#fff !important}
.t-strip{margin:0 calc(var(--pad) * -1) 8mm; padding:6mm var(--pad); background:var(--ink); color:#fff; width:calc(100% + var(--pad) * 2)}
.t-cn{position:absolute; width:60mm; height:60mm; pointer-events:none}
.t-cn.tl{left:0; top:0; background:var(--accent); clip-path:polygon(0 0,100% 0,0 100%)}
.t-cn.br{right:0; bottom:0; background:var(--accent2); clip-path:polygon(100% 0,100% 100%,0 100%)}
.t-seal{width:40mm; height:40mm; border-radius:50%; border:.7mm solid var(--ink); box-shadow:inset 0 0 0 2mm #fff, inset 0 0 0 2.3mm var(--ink); display:grid; place-items:center; margin:0 auto 6mm}
.t-seal .cover-logo{max-height:26mm; max-width:26mm}
.t-seal-rule{width:60mm; height:.3mm; background:var(--ink); margin:6mm auto; position:relative}
.t-seal-rule::after{content:'◆'; position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); background:#fff; padding:0 2mm; font-size:8pt; color:var(--accent)}
.t-night{position:absolute; inset:0; background:radial-gradient(120mm 90mm at 80% 10%, color-mix(in srgb, var(--accent) 45%, transparent), transparent), var(--ink)}
.t-night ~ .cover-body,.t-night ~ .cover-body .cover-uni,.t-night ~ .cover-body .cover-title{color:#fff}
.t-night ~ .cover-body .cover-sub,.t-night ~ .cover-body .cover-date,.t-night ~ .cover-foot{color:rgba(255,255,255,.8)}
.t-night ~ .cover-body .cover-dept{color:var(--accent2)}
.t-night ~ .cover-body .cover-kind{background:rgba(255,255,255,.14) !important; color:#fff !important}
/* the gradient hero's department line sat dark on the colour */
.cover-body > .cv-block[style*="color:#fff"] .cover-dept{color:rgba(255,255,255,.88)}
.t-ul-head{width:100%; border-bottom:.5mm solid var(--ink); padding-bottom:5mm}