/* ============================================================
   BrandWise LMS — course pages only (loaded after style.css)
   ============================================================ */
body.lms { background: var(--cloud); }
.lms header.site { background: var(--white); }
.lms .nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.lms-nav { display: flex; align-items: center; gap: 18px; font-weight: 500; font-size: 0.95rem; }
.lms-nav a { color: var(--gray); }
.lms-nav a:hover, .lms-nav a.active { color: var(--navy); }
.lms main { padding: 40px 0 72px; min-height: 70vh; }
.lms-wrap { max-width: 860px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 720px) { .lms-wrap { padding: 0 16px; } .lms main { padding-top: 24px; } .lms-nav .hide-sm { display: none; } }

.panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 20px; }
@media (max-width: 720px) { .panel { padding: 20px; } }
.panel h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.panel h2 { font-size: 1.3rem; margin-top: 0.2em; }
.muted { color: var(--gray); }
.small { font-size: 0.88rem; }

/* forms */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; color: var(--navy); }
.field input[type=text], .field input[type=email], .field input[type=password], .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--text);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--purple); outline: none; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; margin: 6px 0 18px; }
.check-row input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row-2 { grid-template-columns: 1fr; } }
.tabs { display: flex; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.tabs button { background: none; border: 0; padding: 10px 14px; font: inherit; font-weight: 600; color: var(--gray); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--purple); border-bottom-color: var(--purple); }
.alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 0.92rem; margin: 0 0 16px; }
.alert.err { background: #fdecec; color: #8a1f1f; }
.alert.ok { background: #e6f8f4; color: #0b5f52; }
.hidden { display: none !important; }

/* dashboard */
.progress-bar { height: 8px; background: var(--cloud); border-radius: 99px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; background: var(--teal); border-radius: 99px; }
.pillar-title { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1.05rem; margin: 26px 0 10px; }
.module-list { display: grid; gap: 10px; }
.module-item { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.module-item .num { font-family: var(--font-head); font-weight: 700; color: var(--purple); min-width: 34px; }
.module-item .body { flex: 1; min-width: 0; }
.module-item .body strong { display: block; color: var(--navy); }
.module-item .meta { font-size: 0.85rem; color: var(--gray); }
.module-item.soon { opacity: 0.6; }
.pill { font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; white-space: nowrap; background: var(--cloud); color: var(--gray); }
.pill.complete { background: #e6f8f4; color: #0b5f52; }
.pill.quiz, .pill.progress { background: #efedfd; color: var(--purple-dark); }
@media (max-width: 560px) { .module-item { flex-wrap: wrap; } .module-item .btn { width: 100%; } }

/* lesson */
.crumbs { font-size: 0.88rem; color: var(--gray); margin-bottom: 10px; }
.crumbs a { color: var(--purple); }
.lesson-steps { display: flex; gap: 6px; margin-bottom: 18px; }
.lesson-steps span { flex: 1; height: 5px; border-radius: 99px; background: var(--border); }
.lesson-steps span.on { background: var(--purple); }
.lesson-steps span.done { background: var(--teal); }
.hook { font-family: var(--font-head); font-size: 1.2rem; color: var(--navy); border-left: 4px solid var(--teal); padding: 4px 0 4px 16px; margin: 6px 0 22px; }
.hook p { margin: 0; }
.prose { font-size: 1.04rem; }
.prose ul, .prose ol { margin: 0 0 1em 1.3em; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 6px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 0.93rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--cloud); }
.box { border-radius: var(--radius); padding: 20px 22px; margin: 22px 0; }
.box h3 { font-size: 1.05rem; margin-bottom: 8px; }
.box.try { background: #e6f8f4; }
.box.scenario { background: #efedfd; }
.box.plan { background: var(--cloud); border: 1px solid var(--border); }
.reveal { margin-top: 10px; }

/* questions */
.q { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; background: var(--white); }
.q .stem { font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; }
.opt input { margin-top: 4px; }
.opt:hover { border-color: var(--purple); }
.opt.right { border-color: var(--teal); background: #e6f8f4; }
.opt.wrong { border-color: #d64545; background: #fdecec; }
.fb { font-size: 0.92rem; margin-top: 8px; }
.fb.right { color: #0b5f52; } .fb.wrong { color: #8a1f1f; }
.result { text-align: center; padding: 26px; }
.result .score { font-family: var(--font-head); font-size: 2.6rem; font-weight: 700; color: var(--navy); }
.actions-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* certificate: fixed 1100x850 canvas (11x8.5 in), scaled to fit screen and print */
@font-face { font-family: 'BW Lora'; src: url('../assets/fonts/Lora-Variable.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'BW Lora'; src: url('../assets/fonts/Lora-Italic-Variable.ttf') format('truetype'); font-weight: 400 700; font-style: italic; font-display: swap; }
.lms-wrap.wide { max-width: 1180px; }
.cert-fit { --s: 1; width: 100%; height: calc(850px * var(--s)); position: relative; }
.cert2 { position: absolute; left: 0; top: 0; width: 1100px; height: 850px; transform: scale(var(--s)); transform-origin: 0 0; background: #FFFDF8; color: #0D1321; box-shadow: 0 18px 60px rgba(13,19,33,.18); overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cert2 .bg { position: absolute; inset: 0; }
.cert2 .abs { position: absolute; left: 0; right: 0; text-align: center; }
.cert2 .brand { top: 92px; display: flex; justify-content: center; align-items: center; gap: 12px; font-family: Poppins, sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -.3px; }
.cert2 .brand img { height: 40px; }
.cert2 .brand span span { color: #2962FF; }
.cert2 .ttl { top: 150px; font-family: 'BW Lora', Georgia, serif; font-weight: 600; font-size: 64px; letter-spacing: .2em; padding-left: .2em; color: #0D1321; }
.cert2 .sub { top: 236px; display: flex; justify-content: center; align-items: center; gap: 18px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 17px; letter-spacing: .42em; color: #6C5CE7; text-transform: uppercase; }
.cert2 .sub::before, .cert2 .sub::after { content: ''; width: 90px; height: 1px; background: #6C5CE7; opacity: .6; }
.cert2 .lead { top: 292px; font-family: 'BW Lora', Georgia, serif; font-style: italic; font-size: 21px; color: #4B5563; }
.cert2 .name { top: 326px; font-family: 'BW Lora', Georgia, serif; font-weight: 500; font-size: 60px; line-height: 1.15; color: #0D1321; padding: 0 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cert2 .rule { top: 410px; left: 270px; right: 270px; height: 1.5px; background: linear-gradient(90deg, transparent, #B9B2F2 15%, #6C5CE7 50%, #B9B2F2 85%, transparent); }
.cert2 .lead2 { top: 432px; font-family: 'BW Lora', Georgia, serif; font-style: italic; font-size: 20px; color: #4B5563; }
.cert2 .course { top: 466px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 27px; color: #0D1321; padding: 0 120px; line-height: 1.3; }
.cert2 .edition { top: 508px; font-size: 16px; color: #4B5563; letter-spacing: .04em; }
.cert2 .sig { position: absolute; top: 596px; width: 270px; text-align: center; }
.cert2 .sig .v { font-family: 'BW Lora', Georgia, serif; font-style: italic; font-size: 28px; color: #0D1321; height: 40px; white-space: nowrap; }
.cert2 .sig .v.date { font-style: normal; font-size: 22px; padding-top: 8px; }
.cert2 .sig .ln { height: 1px; background: #0D1321; opacity: .55; margin: 6px 0 8px; }
.cert2 .sig .k { font-size: 14px; color: #4B5563; line-height: 1.4; }
.cert2 .sig .k b { color: #0D1321; font-weight: 600; }
.cert2 .seal { position: absolute; left: 470px; top: 560px; width: 160px; height: 190px; }
.cert2 .foot { position: absolute; left: 178px; top: 722px; font-size: 13px; color: #4B5563; line-height: 1.55; text-align: left; }
.cert2 .foot b { color: #0D1321; font-weight: 600; letter-spacing: .04em; }
.cert2 .qr { position: absolute; left: 92px; top: 700px; width: 72px; }
.cert2 .qr svg { width: 72px; height: 72px; display: block; }
@media print {
  @page { size: 11in 8.5in; margin: 0; }
  html, body.lms { background: #fff !important; margin: 0; padding: 0; }
  header.site, footer.site, .no-print, #loading, #msg { display: none !important; }
  .lms main, .lms-wrap, .lms-wrap.wide { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .cert-fit { position: fixed; left: 0; top: 0; width: 11in; height: 8.5in; overflow: hidden; }
  .cert2 { transform: none !important; zoom: 0.96; box-shadow: none; }
  #cert-wrap ~ *, main > :not(.lms-wrap) { display: none !important; }
}

/* lesson visuals (inline SVG) */
.visual { max-width: 560px; margin: 26px auto 8px; }
.visual svg { width: 100%; height: auto; display: block; }
/* tap-to-enlarge lesson visuals on small screens */
.visual .zoom-hint { display: none; text-align: center; font-size: 13px; color: #6b7280; margin-top: 6px; }
@media (max-width: 640px) { .visual { cursor: zoom-in; } .visual .zoom-hint { display: block; } }
.visual.zoomed { position: fixed; inset: 0; z-index: 1000; max-width: none; margin: 0; background: rgba(13,19,33,.92); overflow: auto; padding: 56px 12px 24px; cursor: zoom-out; -webkit-overflow-scrolling: touch; }
.visual.zoomed svg { width: 640px; max-width: none; margin: 0 auto; }
.visual.zoomed .zoom-hint { display: block; position: fixed; top: 16px; left: 0; right: 0; color: #fff; font-size: 15px; }
/* access code shown after checkout */
.code-box { margin: 18px auto 0; max-width: 420px; background: #EEEBFD; border: 2px dashed var(--purple); border-radius: 12px; padding: 16px; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.25rem, 6.2vw, 1.9rem); letter-spacing: .1em; white-space: nowrap; color: var(--navy); user-select: all; }