/* Margin Drivers Academy: course chrome on top of the site's site.css + learn.css. Prefix: cm- */

/* header: Margin Drivers logo with the course name beside it */
.cm-header .header-row { min-height: 68px; }
.brand-lab small { display: block; font-size: 12px; font-weight: 700; color: var(--ink-muted); letter-spacing: 0; margin-top: 1px; }
.cm-nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.cm-nav > a:not(.btn) { text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; padding: 8px 10px; border-radius: var(--radius-sm); white-space: nowrap; }
.cm-nav > a:not(.btn):hover { background: var(--surface-mint); color: var(--brand); }
.cm-nav > a:not(.btn)[aria-current="page"] { color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); border-radius: 0; }
/* the Academy button looks exactly like the one in the main site header, on every Academy page */
.cm-nav > .btn-course, .cm-nav > .btn-course[aria-current="page"] { background: var(--course); color: var(--on-course); border-color: var(--course); box-shadow: none; white-space: nowrap; }
.cm-nav > .btn-course:hover { background: var(--course-strong); border-color: var(--course-strong); color: var(--on-course); }
@media (max-width: 640px) { .cm-nav > a:not(.btn) { display: none; } .cm-nav .btn { padding: 8px 10px; font-size: 13px; gap: 6px; } }
@media (max-width: 400px) { .brand-lab small { display: none; } }

/* lesson bar: 22 lessons + 6 quiz markers */
.lc-track.cm-track { grid-template-columns: 4fr 4fr 4fr 4fr 5fr 7fr; }
.lc-seg.cm-qseg { background: var(--surface-card); border: 1.5px solid var(--gold); flex: 0 0 12px; }
.lc-seg.cm-qseg.done { background: var(--gold); }
.lc-bar .lc-bar-count.cm-count { display: block !important; }

/* end of a lesson */
.cm-end { justify-items: stretch; }
.cm-end .cm-next { justify-self: start; }
@media (max-width: 560px) { .cm-end .cm-next { justify-self: stretch; text-align: center; } }

/* course home: progress card, module map */
.cm-home .lc-progress-card { display: grid !important; }
.cm-home .lc-stage-mini div { grid-template-columns: 150px 1fr 44px; }
.cm-home .lc-stage-mini small { color: var(--ink-muted); font-weight: 600; }
.cm-home .lc-g-s { display: block !important; }
.cm-home .lc-g.next { border: 1.5px solid var(--brand); box-shadow: 0 0 0 3px var(--surface-mint); }
.cm-home .lc-g.done .lc-g-n { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.cm-home .lc-g.done .lc-g-s { color: var(--brand); }
.cm-home .lc-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cm-home .lc-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cm-home .lc-map { grid-template-columns: minmax(0, 1fr); } .cm-home .lc-stage-mini div { grid-template-columns: 110px 1fr 40px; } }
.cm-mod-prog { font-size: 13px; font-weight: 700; margin-top: 4px; }
.cm-qrow { border-style: dashed; border-color: var(--gold); background: var(--surface-cream); }
.cm-qrow .lc-g-n { border-color: var(--gold); color: var(--gold-text); }
.cm-home .cm-qrow.done .lc-g-n { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.cm-certband { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; padding: var(--space-6); border-radius: var(--radius-lg); border: 1.5px dashed var(--gold); background: var(--surface-cream); }
.cm-certband img { width: 130px; height: 130px; }
@media (max-width: 760px) { .cm-certband { grid-template-columns: 88px minmax(0, 1fr); } .cm-certband img { width: 88px; height: 88px; } .cm-certband .btn { grid-column: 1 / -1; } }
.cm-reset { justify-self: start; font: 600 13px var(--font-sans); color: var(--ink-muted); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* quiz pages */
.cm-qwrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-8); align-items: start; padding-block: var(--space-8) clamp(48px, 7vw, 80px); }
@media (max-width: 900px) { .cm-qwrap { grid-template-columns: minmax(0, 1fr); } }
.cm-review { position: sticky; top: 140px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--surface-card); display: grid; gap: var(--space-2); }
@media (max-width: 900px) { .cm-review { position: static; } }
.cm-review ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.cm-review a { font-weight: 600; text-decoration: none; }
.cm-quiz form { display: grid; gap: var(--space-4); }
.cm-q { margin: 0; padding: var(--space-4) var(--space-4) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); display: grid; gap: var(--space-3); min-width: 0; }
.cm-q legend { float: left; width: 100%; padding: 0; font-weight: 700; font-size: 16px; line-height: 1.45; color: var(--ink); }
.cm-q legend + * { clear: both; }
.cm-q-n { color: var(--brand); }
.cm-opts { display: grid; gap: var(--space-2); }
.cm-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; line-height: 1.45; }
.cm-opt:hover { border-color: var(--brand); }
.cm-opt:has(input:checked) { border-color: var(--brand); background: var(--surface-mint); font-weight: 600; }
.cm-opt input { accent-color: var(--brand); margin-top: 3px; flex: none; }
.cm-q.graded .cm-opt { cursor: default; }
.cm-opt.right { border-color: var(--brand); background: var(--surface-mint); }
.cm-opt.wrong { border-color: var(--alert); }
.cm-fb { font-size: 14px; line-height: 1.5; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-mint); }
.cm-fb b.r { color: var(--brand); } .cm-fb b.w { color: var(--alert); }
.cm-qact { display: grid; justify-items: start; gap: var(--space-2); }
.cm-msg { font-size: 14px; font-weight: 600; min-height: 1.4em; color: var(--ink-muted); }
.cm-msg.err { color: var(--alert); } .cm-msg.ok { color: var(--brand); }
.cm-result { margin-top: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); display: grid; gap: var(--space-3); }
.cm-result.pass { background: var(--surface-mint); border: 1.5px solid var(--brand); }
.cm-result.fail { background: var(--surface-cream); border: 1.5px dashed var(--gold); }
.cm-result h3 { margin: 0; font-size: 22px; color: var(--ink-heading); }
.cm-result.pass h3 { color: var(--brand); }
.cm-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cm-linkbtn { font: 600 14px var(--font-sans); color: var(--ink-muted); background: none; border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cm-linkbtn:hover { color: var(--brand); }

/* certificate */
.cm-cert-hero { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; }
.cm-cert-hero > div { flex: 1 1 420px; min-width: 0; display: grid; gap: var(--space-2); }
.cm-certwrap { padding-block: var(--space-8) clamp(48px, 7vw, 80px); }
.cm-cert-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .cm-cert-grid { grid-template-columns: minmax(0, 1fr); } }
.cm-cert-form { display: grid; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-mint); }
.cm-cert-form input { font: 500 16px var(--font-sans); padding: 11px 13px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--ink); width: 100%; }
.cm-cert-preview { border-radius: var(--radius-md); box-shadow: var(--shadow-panel); background: #fff; overflow: hidden; }
.cm-cert-preview img { display: block; width: 100%; height: auto; }
.cm-locked { padding: var(--space-6); border-radius: var(--radius-lg); border: 1.5px dashed var(--gold); background: var(--surface-cream); display: grid; gap: var(--space-4); }
.cm-locked h2 { margin: 0; font-size: 24px; }
.cm-locked ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.cm-locked li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.cm-locked li i { width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--border-strong); flex: none; display: grid; place-items: center; font-style: normal; font-size: 13px; }
.cm-locked li.ok i { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* footer */
.cm-footer { border-top: 3px solid var(--brand); background: var(--surface-mint); padding-block: var(--space-6); font-size: 13px; color: var(--ink-muted); margin-top: var(--space-8); }
.cm-footer-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); justify-content: space-between; }
.cm-footer a { font-weight: 700; }
@media (max-width: 760px) { .cm-header .brand-lab { display: none; } }

/* course home: shareable link for owners and managers */
.cm-share { margin-top: var(--space-4); padding: var(--space-4); background: var(--surface-card); border: 1.5px solid var(--brand); border-radius: var(--radius-lg); max-width: 860px; }
.cm-share-label { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.cm-share-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.cm-share-url { font-size: 17px; font-weight: 700; color: var(--ink-heading); padding: 8px 12px; background: var(--surface-mint); border-radius: var(--radius-sm); word-break: break-all; user-select: all; flex: 1 1 240px; }
.cm-share .btn { white-space: nowrap; }
.cm-share-status { margin: 8px 0 0; min-height: 1.2em; font-size: 14px; color: var(--ink-muted); }