/*!
 * Topic Engine — Public site "User Manual" popup system.
 *
 * Adds a short step-by-step guidance popup for every public nav page:
 * intro / objective / how it works / steps, with an illustrative
 * (non-screenshot) thumbnail and an English / বাংলা / हिन्दी language
 * toggle. Logic + content lives in assets/site-manual.js; this file is
 * purely presentational. --mc-accent is set inline (per page) from
 * that page's own accent colour. Uses the public site's own :root
 * tokens (see assets/site.css) so it follows light/dark mode for free.
 */
.manual-chip {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .78rem; font-weight: 600;
  padding: 5px 12px 5px 10px; border-radius: 20px; cursor: pointer; vertical-align: middle; margin-left: 12px;
  background: var(--paper-raised); border: 1px solid var(--line-soft); color: var(--ink-soft);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}
.manual-chip:hover { border-color: var(--mc-accent, var(--accent)); color: var(--mc-accent, var(--accent)); transform: translateY(-1px); }
.manual-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.manual-chip .ico { font-size: .95rem; line-height: 1; }

.manual-overlay {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15,20,30,.55);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.manual-overlay.open { opacity: 1; pointer-events: auto; }
.manual-modal {
  width: min(640px, 100%); max-height: min(88vh, 760px); overflow: hidden; display: flex; flex-direction: column;
  background: var(--paper-raised); border-radius: 14px; box-shadow: var(--shadow), 0 24px 60px -20px rgba(15,20,30,.4);
  transform: translateY(10px) scale(.98); opacity: 0; transition: transform .18s ease, opacity .18s ease;
  border-top: 4px solid var(--mc-accent, var(--accent));
}
.manual-overlay.open .manual-modal { transform: translateY(0) scale(1); opacity: 1; }
.manual-modal-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 14px; border-bottom: 1px solid var(--line-soft); }
.manual-modal-ico { font-size: 1.9rem; line-height: 1.1; flex: none; }
.manual-modal-titles { flex: 1; min-width: 0; }
.manual-modal-titles .eyebrow { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mc-accent, var(--accent)); margin-bottom: 3px; }
.manual-modal-titles h3 { margin: 0; font-size: 1.15rem; color: var(--ink); line-height: 1.35; }
.manual-close {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-soft); background: var(--paper-sunk);
  color: var(--ink-soft); font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.manual-close:hover { background: var(--crit-soft); color: var(--crit); border-color: var(--crit-line); }
.manual-lang-toggle { display: flex; gap: 4px; padding: 12px 22px 0; flex-wrap: wrap; }
.manual-lang-btn {
  font: inherit; font-size: .74rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; cursor: pointer;
  background: var(--paper-sunk); border: 1px solid var(--line-soft); color: var(--ink-soft);
}
.manual-lang-btn.active { background: var(--mc-accent, var(--accent)); border-color: var(--mc-accent, var(--accent)); color: #fff; }
.manual-body { padding: 16px 22px 22px; overflow-y: auto; }
.manual-thumb { width: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--line-soft); display: block; line-height: 0; }
.manual-thumb svg { display: block; width: 100%; height: auto; }
.manual-section { margin-bottom: 14px; }
.manual-section:last-child { margin-bottom: 0; }
.manual-section .k { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: 4px; }
.manual-section p { margin: 0; font-size: .92rem; color: var(--ink); line-height: 1.5; }
.manual-steps { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: mstep; }
.manual-steps li {
  counter-increment: mstep; position: relative; padding: 8px 0 8px 34px; font-size: .9rem; color: var(--ink); line-height: 1.45;
  border-top: 1px solid var(--line-soft);
}
.manual-steps li:first-child { border-top: none; }
.manual-steps li::before {
  content: counter(mstep); position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--mc-accent, var(--accent)); color: #fff; font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
/* on a video/image masthead (.ap-head.has-video), keep the chip legible
   against the scrim rather than transparent-blending with page paper */
.ap-head.has-video .manual-chip, .contact-band .manual-chip {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff;
  backdrop-filter: blur(2px);
}
.ap-head.has-video .manual-chip:hover, .contact-band .manual-chip:hover {
  border-color: #fff; color: #fff; background: rgba(255,255,255,.24);
}
@media (max-width: 640px) {
  .manual-modal { width: 100%; max-height: 92vh; }
  .manual-modal-head { padding: 16px 16px 12px; }
  .manual-lang-toggle, .manual-body { padding-left: 16px; padding-right: 16px; }
  .manual-chip { margin-left: 0; margin-top: 8px; }
}