/* Mosi Academy: the MosiMarket brand kit as a stylesheet.
   Colours: Zambezi #0F2A26, Green #1F5C52, Mist #E8F0EE, Mint #7FD1B9,
   Ink #0B0B0C, Paper #FAFAF8, Up #067647, Down #B42318. Geist throughout,
   Geist Mono for numbers and credential IDs. No gold, no serif. */

@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/GeistMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/GeistMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --zambezi: #0F2A26; --accent: #1F5C52; --bg: #E8F0EE; --mint: #7FD1B9;
  --ink: #0B0B0C; --paper: #FAFAF8; --up: #067647; --down: #B42318;
  --rule: #D9E4E0; --muted: #6B6B67; --faint: #8A8A86;
  --ease-out: cubic-bezier(.2,.7,.2,1); --ease-spring: cubic-bezier(.3,1.4,.5,1);
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Geist", -apple-system, system-ui, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
button { font-family: inherit; }
.num, .ac-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.ac-wrap { max-width: 720px; margin: 0 auto; padding: 0 1.1rem 5rem; }

/* App bar */
.ac-appbar { position: sticky; top: 0; z-index: 20; background: rgba(250,250,248,.92);
  backdrop-filter: saturate(150%) blur(8px); border-bottom: 1px solid var(--rule); }
.ac-appbar-in { max-width: 720px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: .6rem; padding: .6rem 1.1rem; }
.ac-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); white-space: nowrap; }
.ac-brand img { height: 18px; width: auto; display: block; }
.ac-brand span { font-size: .85rem; font-weight: 500; color: var(--accent); padding-left: .55rem; border-left: 1px solid var(--rule); }
.ac-chips { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.ac-appbar .ac-chip { display: inline-flex; align-items: center; width: auto; border: 0; cursor: default; background: var(--bg); color: var(--ink);
  border-radius: 6px; padding: .3rem .6rem; font-size: .76rem; font-weight: 600; line-height: 1.2; font-family: var(--mono); }
.ac-appbar .ac-chip--xp { color: var(--accent); }
.ac-appbar .ac-chip--streak.is-live { background: var(--accent); color: #fff; }
.ac-appbar .ac-chip--btn { cursor: pointer; font-family: inherit; }
.ac-appbar .ac-chip--btn:hover { background: var(--rule); }
.ac-langs { display: inline-flex; gap: 2px; }
.ac-appbar .ac-lang { min-height: 24px; color: var(--muted, var(--ink)); }
.ac-appbar .ac-lang.is-on { background: var(--ink); color: var(--bg); }

/* Headings */
.ac-eyebrow { font-size: .88rem; font-weight: 500; color: var(--accent); margin: 1.3rem 0 .4rem; }
.ac-h1 { font-weight: 600; letter-spacing: -.015em; font-size: clamp(1.55rem, 4.4vw, 2.2rem); line-height: 1.12; margin: 0 0 1.1rem; }
.ac-lead { font-size: 1.05rem; color: var(--muted); margin: 0 0 1.2rem; }
.ac-home-head { padding-top: .4rem; }

/* Progress */
.ac-progress { height: 6px; background: var(--rule); border-radius: 99px; overflow: hidden; }
.ac-progress > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s var(--ease-out); }
.ac-overall { margin: 0 0 1.2rem; }
.ac-overall-txt { font-size: .85rem; color: var(--faint); margin: .45rem 0 0; }

/* Cards */
.ac-card { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 1.25rem 1.2rem; margin: 0 0 1.1rem; }
.ac-card h2 { font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em; margin: 0 0 .6rem; }
.ac-card p { margin: 0 0 .8rem; line-height: 1.62; } .ac-card p:last-child { margin-bottom: 0; }
.ac-kicker { font-size: .82rem; font-weight: 500; color: var(--faint); margin: 0 0 .5rem; }

/* Units + lesson map */
.ac-unit { margin: 1.8rem 0 0; }
.ac-unit-head { display: flex; align-items: center; gap: .6rem; margin: 1.8rem 0 .25rem; border-bottom: 2px solid var(--ink); padding-bottom: .35rem; }
.ac-unit-dot { width: 10px; height: 10px; border-radius: 99px; background: var(--accent); flex: 0 0 auto; }
.ac-unit-title { font-weight: 600; font-size: 1.2rem; margin: 0; }
.ac-unit-sum { font-size: .9rem; color: var(--muted); margin: .5rem 0 1rem; }
.ac-track { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 1rem 0 .6rem; }
.ac-track::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: repeating-linear-gradient(var(--rule) 0 8px, transparent 8px 16px); transform: translateX(-50%); }
.ac-node-wrap { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; padding: .35rem 0; }
.ac-node-wrap.pos0 { transform: translateX(-58px); } .ac-node-wrap.pos1 { transform: translateX(58px); }
.ac-node-wrap.pos2 { transform: translateX(-30px); } .ac-node-wrap.pos3 { transform: translateX(30px); }
.ac-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); width: 140px; }
.ac-node-face { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 2px solid var(--rule);
  font-weight: 600; font-size: 1.05rem; font-family: var(--mono); transition: transform .12s var(--ease-out), box-shadow .2s; }
.ac-node:hover .ac-node-face { transform: translateY(-2px); }
.ac-node.is-done .ac-node-face { background: var(--accent); border-color: var(--accent); color: #fff; }
.ac-node.is-current .ac-node-face { border-color: var(--accent); color: var(--accent); animation: ac-node-pulse 1.8s ease-in-out infinite; }
@keyframes ac-node-pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(31,92,82,.35);} 50%{ box-shadow: 0 0 0 10px rgba(31,92,82,0);} }
.ac-node-label { font-size: .8rem; font-weight: 500; text-align: center; max-width: 140px; line-height: 1.25; color: #3a3a3a; }
.ac-node.is-locked { cursor: not-allowed; }
.ac-node.is-locked .ac-node-face { background: var(--bg); color: #b4b4b4; border-style: dashed; }
.ac-node.is-locked .ac-node-label { color: #b4b4b4; }
.ac-node.is-checkpoint .ac-node-face { border-color: var(--zambezi); color: var(--zambezi); }
.ac-node.is-checkpoint.is-done .ac-node-face { background: var(--zambezi); border-color: var(--zambezi); color: #fff; }
.ac-node.is-checkpoint .ac-node-label { font-weight: 600; }

/* Lesson player */
.ac-lessontop { padding: .9rem 0 .2rem; }
.ac-back { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--accent); padding: 0; }
.ac-exhost { min-height: 80px; }
.ac-hero-img { margin: 0 0 1.3rem; border-radius: 14px; overflow: hidden; }
.ac-hero-img img { display: block; width: 100%; height: clamp(150px, 32vw, 240px); object-fit: cover; }
.ac-readhint { font-size: .85rem; color: var(--faint); margin: 0 0 .7rem; font-weight: 500; }

/* Choice exercises */
.ac-q { font-weight: 600; font-size: 1.06rem; margin: 0 0 .9rem; }
.ac-sub { font-size: .9rem; color: var(--muted); margin: 0 0 .8rem; }
.ac-opts { display: grid; gap: .55rem; }
.ac-opt { display: block; width: 100%; text-align: left; cursor: pointer; border: 1.5px solid var(--rule); background: #fff; border-radius: 6px;
  padding: .8rem .9rem; font: inherit; color: var(--ink); transition: border-color .15s, background .15s; overflow-wrap: anywhere; }
.ac-opt:hover:not(:disabled) { border-color: var(--ink); }
.ac-opt:disabled { cursor: default; }
.ac-opt.is-picked { border-color: var(--ink); background: var(--bg); }
.ac-opt.is-correct { border-color: var(--up); background: #EAF6EE; }
.ac-opt.is-wrong { border-color: var(--down); background: #FBEAEA; }
.ac-explain { margin: .9rem 0 0; font-size: .94rem; color: #3a3a3a; border-left: 3px solid var(--down); padding-left: .8rem; }
.ac-explain.good { border-left-color: var(--up); }

/* Order */
.ac-order { display: grid; gap: .5rem; margin: 0 0 .3rem; }
.ac-order-row { display: flex; align-items: center; gap: .7rem; border: 1.5px solid var(--rule); background: #fff; border-radius: 6px; padding: .6rem .7rem; }
.ac-order-row.is-correct { border-color: var(--up); background: #EAF6EE; }
.ac-order-row.is-wrong { border-color: var(--down); background: #FBEAEA; }
.ac-order-ctrl { display: flex; flex-direction: column; gap: .15rem; }
.ac-arrow { width: 1.9rem; height: 1.4rem; border: 1px solid var(--rule); background: var(--bg); border-radius: 6px; cursor: pointer; font-weight: 700; line-height: 1; }
.ac-arrow:disabled { opacity: .35; cursor: default; }
.ac-order-txt { font-size: .96rem; overflow-wrap: anywhere; }

/* Match (dropdown per row) */
.ac-match2 { display: grid; gap: .7rem; margin: .6rem 0 0; }
.ac-match2-row { background: var(--bg); border: 1.5px solid var(--rule); border-radius: 12px; padding: .7rem .8rem; }
.ac-match2-term { font-weight: 600; margin: 0 0 .5rem; }
.ac-match2-select { width: 100%; font: inherit; padding: .7rem 2.2rem .7rem .8rem; border: 1.5px solid var(--rule); border-radius: 6px; background: #fff; color: var(--ink);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; }
.ac-match2-select:focus { outline: none; border-color: var(--ink); }
.ac-match2-row.is-correct { border-color: var(--up); background: #EAF6EE; }
.ac-match2-row.is-wrong { border-color: var(--down); background: #FBEAEA; }
.ac-match2-fix { margin: .5rem 0 0; font-size: .85rem; font-weight: 600; color: var(--up); }

/* Categorize */
.ac-cat { display: grid; gap: .6rem; margin: 0 0 .3rem; }
.ac-cat-row { border: 1.5px solid var(--rule); background: #fff; border-radius: 6px; padding: .75rem .85rem; }
.ac-cat-text { font-size: .96rem; margin: 0 0 .55rem; line-height: 1.4; }
.ac-cat-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.ac-cat-btn { font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; border: 1.5px solid var(--rule); background: var(--bg); color: var(--ink);
  border-radius: 6px; padding: .4rem .85rem; transition: background .12s, border-color .12s, color .12s; white-space: normal; max-width: 100%; }
.ac-cat-btn:hover:not(:disabled) { border-color: var(--ink); }
.ac-cat-btn.is-sel { background: var(--ink); color: #fff; border-color: var(--ink); }
.ac-cat-btn.is-correct { background: #EAF6EE; border-color: var(--up); color: var(--up); }
.ac-cat-btn.is-wrong { background: #FBEAEA; border-color: var(--down); color: var(--down); }

/* Fill the blank */
.ac-cloze { font-size: 1.08rem; line-height: 2.1; margin: 0 0 1rem; }
.ac-slot { display: inline-block; min-width: 84px; text-align: center; font: inherit; cursor: pointer; border: 0; border-bottom: 2px solid var(--accent);
  background: var(--bg); color: var(--ink); border-radius: 6px 6px 0 0; padding: .1rem .5rem; margin: 0 .15rem; }
.ac-slot.filled { font-weight: 600; }
.ac-slot.is-correct { border-bottom-color: var(--up); background: #EAF6EE; }
.ac-slot.is-wrong { border-bottom-color: var(--down); background: #FBEAEA; }
.ac-bank { display: flex; flex-wrap: wrap; gap: .5rem; }
.ac-bank .ac-chip, .ac-cf-chip { display: inline-block; width: auto; cursor: pointer; font: inherit; font-weight: 500; color: var(--ink); border: 1.5px solid var(--rule); background: #fff;
  border-radius: 6px; padding: .5rem .85rem; transition: border-color .15s, background .15s; }
.ac-bank .ac-chip:hover:not(:disabled), .ac-cf-chip:hover:not(:disabled) { border-color: var(--ink); }
.ac-bank .ac-chip.is-used { opacity: .3; pointer-events: none; }

/* Chart fill */
.ac-cf { margin: .3rem 0 1rem; }
.ac-cf--flow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ac-cf--pyramid, .ac-cf--stack { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.ac-cf-seg { border: 1.5px solid var(--rule); border-radius: 8px; padding: .55rem .7rem; font-weight: 500; font-size: .88rem; text-align: center; min-height: 1.2em; overflow-wrap: anywhere; background: var(--bg); }
.ac-cf--pyramid .ac-cf-seg, .ac-cf--stack .ac-cf-seg { width: 100%; background: #fff; }
.ac-cf-blank { border-style: dashed; color: #9a9a95; min-width: 5.5rem; background: transparent; }
.ac-cf-filled { border-style: solid; color: var(--ink); background: #fff; }
.ac-cf-arrow { color: var(--accent); font-weight: 700; }
.ac-cf-seg.is-correct { background: #EAF6EE; border-color: var(--up); color: var(--up); }
.ac-cf-seg.is-wrong { background: #FBEAEA; border-color: var(--down); color: var(--down); }
.ac-cf-bank { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 0; }

/* Swipe */
.ac-swipe { display: grid; place-items: center; padding: .5rem 0 1rem; min-height: 150px; }
.ac-swipe-card { display: grid; place-items: center; text-align: center; width: 100%; max-width: 460px; min-height: 130px; padding: 1.3rem 1.2rem;
  font-size: 1.1rem; font-weight: 500; line-height: 1.4; background: #fff; border: 1.5px solid var(--rule); border-radius: 16px; }
.ac-swipe-card.in { animation: ac-card-in .3s var(--ease-out); }
@keyframes ac-card-in { from{opacity:0; transform:translateY(10px) scale(.97);} to{opacity:1; transform:none;} }
.ac-swipe-card.ok { border-color: var(--up); } .ac-swipe-card.no { border-color: var(--down); }
.ac-swipe-card.fly-left { animation: ac-fly-l .26s ease forwards; } .ac-swipe-card.fly-right { animation: ac-fly-r .26s ease forwards; }
@keyframes ac-fly-l { to{opacity:0; transform:translateX(-120%) rotate(-12deg);} }
@keyframes ac-fly-r { to{opacity:0; transform:translateX(120%) rotate(12deg);} }
.ac-swipe-count { text-align: center; font-size: .8rem; color: var(--faint); margin: .2rem 0 .8rem; font-family: var(--mono); }
.ac-swipe-btns { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.ac-swipe-btns .ac-btn { flex: 1 1 42%; min-width: 0; }

/* Highlight */
.ac-tokens { font-size: 1.08rem; line-height: 2.1; margin: 0 0 1rem; }
.ac-token { font: inherit; cursor: pointer; border: 1.5px solid transparent; background: var(--bg); color: var(--ink); border-radius: 6px; padding: .1rem .4rem; transition: all .12s; }
.ac-token:hover { border-color: var(--rule); }
.ac-token.is-sel { background: #DCEFE8; border-color: var(--accent); }
.ac-token.is-correct { background: #EAF6EE; border-color: var(--up); }
.ac-token.is-wrong { background: #FBEAEA; border-color: var(--down); text-decoration: line-through; }

/* Write */
.ac-brief { background: var(--bg); border-radius: 6px; padding: .9rem 1rem; margin: 0 0 1rem; }
.ac-brief p { margin: 0 0 .6rem; } .ac-brief p:last-child { margin-bottom: 0; }
textarea.ac-input { width: 100%; min-height: 120px; resize: vertical; font: inherit; border: 1.5px solid var(--rule); border-radius: 6px; padding: .8rem .9rem; background: #fff; color: var(--ink); }
textarea.ac-input:focus { outline: none; border-color: var(--ink); }
textarea.ac-input--long { min-height: 300px; line-height: 1.55; }
.ac-count { font-size: .8rem; color: var(--faint); text-align: right; margin: .35rem 0 0; font-family: var(--mono); }
.ac-selfhead { font-size: .88rem; font-weight: 600; color: var(--ink); margin: 0 0 .6rem; }
.ac-checklist { display: grid; gap: .5rem; margin: 0 0 1rem; }
.ac-check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; font-size: .95rem; }
.ac-check input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.ac-result { margin-top: 1.1rem; border-top: 1px dashed var(--rule); padding-top: 1.1rem; }
.ac-score { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .8rem; }
.ac-score b { font-family: var(--mono); font-weight: 500; font-size: 2.4rem; line-height: 1; }
.ac-score.pass b { color: var(--up); } .ac-score.revise b { color: var(--down); }
.ac-score span { font-weight: 600; font-size: .92rem; }
.ac-fb h3 { font-size: .9rem; font-weight: 600; color: var(--ink); margin: 1rem 0 .45rem; }
.ac-fb ul { margin: 0; padding-left: 1.15rem; } .ac-fb li { margin: .3rem 0; }
.ac-model { background: var(--bg); border-radius: 6px; padding: .9rem 1rem; margin-top: 1rem; }
.ac-model summary { font-weight: 600; cursor: pointer; } .ac-model p { margin: .6rem 0 0; }

/* Buttons */
.ac-btn { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; background: var(--accent); color: #fff; font: inherit; font-weight: 600;
  padding: .8rem 1.3rem; border-radius: 6px; transition: opacity .15s, transform .1s; text-decoration: none; display: inline-block; }
.ac-btn:hover { opacity: .92; } .ac-btn:active { transform: translateY(1px); } .ac-btn:disabled { opacity: .5; cursor: default; }
.ac-btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--rule); }
.ac-btn--lg { padding: .95rem 1.6rem; font-size: 1.02rem; }
.ac-actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.ac-status { font-size: .9rem; }
.ac-spin { font-weight: 600; color: var(--faint); } .ac-err { color: var(--down); font-weight: 600; } .ac-ok { color: var(--up); font-weight: 600; }

/* Inline completion */
.ac-done-inline { text-align: center; padding: 1.4rem .5rem .4rem; }
.ac-done-inline .mark { display: block; width: 36px; height: 36px; margin: 0 auto .6rem; }
.ac-done-inline h2 { margin: 0 0 .4rem; font-weight: 600; }
.ac-done-inline .ac-actions { justify-content: center; }

/* Motion */
.ac-chip.pulse { animation: ac-chip-pulse .5s var(--ease-spring); }
@keyframes ac-chip-pulse { 0%{transform:scale(1);} 40%{transform:scale(1.25);} 100%{transform:scale(1);} }
.ac-xpfloat { position: fixed; transform: translate(-50%, 0); z-index: 60; pointer-events: none; font-weight: 600; color: var(--accent); font-size: 1.1rem; font-family: var(--mono);
  animation: ac-xpfloat 1.05s var(--ease-out) forwards; }
@keyframes ac-xpfloat { 0%{opacity:0; transform:translate(-50%,6px) scale(.8);} 25%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-38px) scale(1.1);} }
.ac-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.ac-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: ac-fall 1.6s linear forwards; }
@keyframes ac-fall { to { transform: translateY(105vh) rotate(540deg); opacity: .9; } }
.ac-anim-pop { animation: ac-pop .35s var(--ease-spring); }
@keyframes ac-pop { 0%{transform:scale(.96);} 50%{transform:scale(1.04);} 100%{transform:scale(1);} }
.ac-anim-shake { animation: ac-shake .4s ease; }
@keyframes ac-shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);} }
.ac-reveal { animation: ac-reveal .45s var(--ease-out) both; }
@keyframes ac-reveal { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.ac-slidein { animation: ac-slidein .32s var(--ease-out) both; }
@keyframes ac-slidein { from{opacity:0; transform:translateX(14px);} to{opacity:1; transform:none;} }
.ac-dots { display: flex; gap: .4rem; justify-content: center; margin: 0 0 1rem; }
.ac-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--rule); transition: all .25s; }
.ac-dot.active { background: var(--accent); transform: scale(1.35); } .ac-dot.done { background: var(--up); }

/* Reading-card diagrams */
.ac-chart { margin: 1rem 0 .3rem; }
.ac-chart-title { font-size: .82rem; font-weight: 500; color: var(--faint); margin: 0 0 .7rem; }
.ac-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.ac-flow-step { background: var(--bg); border: 1.5px solid var(--rule); border-radius: 6px; padding: .5rem .75rem; font-weight: 500; font-size: .9rem; }
.ac-flow-step:first-of-type { background: var(--accent); color: #fff; border-color: var(--accent); }
.ac-flow-arrow { color: var(--accent); font-weight: 700; }
.ac-chart--hierarchy { text-align: center; }
.ac-hier-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; }
.ac-hier-node { background: #fff; border: 1.5px solid var(--rule); border-radius: 6px; padding: .45rem .8rem; font-weight: 500; font-size: .87rem; }
.ac-hier-row:first-child .ac-hier-node { background: var(--zambezi); color: #fff; border-color: var(--zambezi); }
.ac-bar-row { display: grid; grid-template-columns: minmax(8rem, 34%) 1fr; gap: .7rem; align-items: center; margin: 0 0 .5rem; }
.ac-bar-label { font-size: .85rem; font-weight: 500; line-height: 1.3; }
.ac-bar-track { background: var(--bg); border-radius: 99px; height: 1.5rem; overflow: hidden; }
.ac-bar-fill { background: var(--accent); height: 100%; border-radius: 99px; display: flex; align-items: center; justify-content: flex-end; min-width: 3rem; }
.ac-bar-val { color: #fff; font-weight: 500; font-size: .76rem; padding: 0 .5rem; white-space: nowrap; font-family: var(--mono); }
.ac-chart--pyramid { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.ac-pyr-seg { background: #fff; border: 1.5px solid var(--rule); border-radius: 6px; padding: .5rem .6rem; text-align: center; font-size: .84rem; font-weight: 500; line-height: 1.3; }
.ac-pyr-seg:first-child { background: var(--accent); color: #fff; border-color: var(--accent); }
.ac-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.ac-pillar { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: 6px; padding: .8rem .6rem; text-align: center; }
.ac-pillar-n { display: block; font-family: var(--mono); font-size: 1.3rem; color: var(--accent); line-height: 1; }
.ac-pillar-t { display: block; font-size: .82rem; font-weight: 500; margin-top: .4rem; line-height: 1.3; }
.ac-card-link { display: inline-block; margin-top: .7rem; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 1px; }

/* Exam mode */
body.ac-exam-running .ac-appbar { top: 2.1rem; } body.ac-exam-running { padding-top: 2.1rem; }
.ac-exambar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 2.1rem; display: flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--zambezi); color: #fff; font-weight: 500; font-size: .82rem; }
.ac-exambar b { font-family: var(--mono); font-weight: 500; color: var(--mint); }
.ac-exambar b.low { color: #FF9B8F; animation: ac-expulse 1s infinite; }
.ac-exam-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); animation: ac-expulse 1.4s infinite; }
@keyframes ac-expulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.ac-exam-rules { background: #fff; border: 1.5px solid var(--rule); border-radius: 14px; padding: 1.3rem 1.4rem; margin: 0 0 1.1rem; }
.ac-exam-rules h2 { margin: 0 0 .5rem; font-size: 1.3rem; font-weight: 600; }
.ac-exam-rules p { margin: 0 0 .6rem; color: #3a3a3a; } .ac-exam-rules ul { margin: .2rem 0 0; padding-left: 1.1rem; } .ac-exam-rules li { margin: .35rem 0; }
.ac-exam-eg { background: var(--bg); border: 1px dashed var(--rule); border-radius: 12px; padding: 1.1rem 1.2rem; margin: 0 0 1.2rem; }
.ac-exam-eg .tag { font-size: .82rem; font-weight: 500; color: var(--faint); margin: 0 0 .6rem; }
.ac-exam-eg .ac-opt { cursor: default; }

/* Certificate card on the map */
.ac-certcard { border: 1.5px solid var(--rule); border-radius: 14px; padding: 1.3rem 1.2rem; margin: 0 0 1.2rem; background: #fff; text-align: center; }
.ac-certcard.pass { border-color: var(--up); background: #F3F8F4; }
.ac-certcard h2 { margin: .2rem 0 .4rem; font-size: 1.4rem; font-weight: 600; }
.ac-certcard p { margin: 0 0 .6rem; } .ac-certcard .ac-btn { margin-top: .4rem; }
.ac-cert-eyebrow { font-size: .88rem; font-weight: 500; color: var(--accent); }
.ac-cert-form { margin: 0 0 1rem; display: grid; gap: .7rem; }
.ac-cert-label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin: 0 0 .3rem; }
.ac-cert-input { width: 100%; font: inherit; border: 1.5px solid var(--rule); border-radius: 6px; padding: .7rem .85rem; background: #fff; color: var(--ink); }
.ac-cert-input:focus { outline: none; border-color: var(--ink); }

/* The certificate itself: Paper, a Zambezi frame, the mark; nothing gilded. */
.ac-cert { position: relative; background: var(--paper); border: 2px solid var(--zambezi); border-radius: 4px; padding: 2.6rem 2.2rem 1.8rem; text-align: center; overflow: hidden;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ac-cert::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--accent); pointer-events: none; z-index: 2; }
.ac-cert-bg { position: absolute; inset: 0; z-index: 0; line-height: 0; } .ac-cert-bg svg { width: 100%; height: 100%; display: block; }
.ac-cert-inner { position: relative; z-index: 1; display: flex; flex-direction: column; }
.ac-cert-crest { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: 0 0 1.6rem; }
.ac-cert-crest img { height: 34px; width: auto; }
.ac-cert-wm-sub { font-size: .9rem; color: var(--accent); font-weight: 500; }
.ac-cert-body { padding: .6rem 0; }
.ac-cert-pre { font-size: .95rem; color: var(--muted); margin: 0 0 .55rem; }
.ac-cert-name { font-weight: 600; font-size: 1.9rem; letter-spacing: -.01em; color: var(--ink); margin: 0 0 1.1rem; line-height: 1.1; }
.ac-cert-course { font-weight: 600; font-size: 1.35rem; color: var(--zambezi); margin: .3rem 0 .4rem; line-height: 1.2; }
.ac-cert-sub2 { font-size: .95rem; color: var(--muted); margin: 0 0 .5rem; max-width: 30rem; margin-left: auto; margin-right: auto; }
.ac-cert-date2 { font-family: var(--mono); font-size: .9rem; color: var(--ink); margin: .4rem 0 1.6rem; }
.ac-cert-sign { display: flex; flex-direction: column; align-items: center; margin: 1rem auto .2rem; }
.ac-cert-sig { font-family: var(--mono); font-size: 1.1rem; color: var(--ink); }
.ac-cert-sigline { display: block; width: 220px; max-width: 70%; border-bottom: 1px solid var(--ink); margin: .3rem 0 .5rem; }
.ac-cert-signame { font-weight: 600; font-size: .9rem; } .ac-cert-sigrole { font-size: .8rem; color: var(--muted); }
.ac-cert-coc { font-size: .95rem; color: var(--ink); margin: 1.4rem 0 .2rem; font-weight: 600; }
.ac-cert-place { font-size: .82rem; color: var(--faint); margin: 0; }
.ac-cert-verify { margin: .9rem 0 0; font-size: .74rem; color: var(--accent); font-family: var(--mono); }
.ac-cert-secnote { font-size: .6rem; color: var(--faint); margin: .7rem 0 0; }
.ac-cert-email { margin: 1.6rem 0 0; border-top: 1px dashed var(--rule); padding-top: 1.2rem; }

@page { size: A4 portrait; margin: 12mm; }
@media print {
  html, body { background: #fff !important; }
  .ac-appbar, .ac-lessontop, .ac-eyebrow, .ac-h1, .ac-cert-form, .ac-actions, .ac-cert-email, .ac-readhint, .ac-next { display: none !important; }
  .ac-wrap { padding: 0; max-width: none; }
  .ac-cert { width: 100% !important; min-height: 262mm; display: flex; flex-direction: column; padding: 4rem 3rem; }
  .ac-cert-inner { flex: 1 0 auto; justify-content: space-between; }
  .ac-cert, .ac-cert * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* Verify page */
.ac-verify-lead { font-size: 1rem; color: var(--muted); max-width: 38rem; margin: 0 0 1.2rem; }
.ac-verify-card { border-radius: 14px; padding: 1.6rem 1.5rem; margin: 1.4rem 0 0; border: 1.5px solid var(--rule); background: #fff; }
.ac-verify-card.ok { border-color: var(--up); } .ac-verify-card.no { border-color: var(--down); background: #FDF4F3; }
.ac-verify-badge { display: inline-block; font-size: .85rem; font-weight: 600; border-radius: 6px; padding: .35rem .8rem; margin: 0 0 .9rem; }
.ac-verify-badge.ok { background: #EAF6EE; color: var(--up); } .ac-verify-badge.no { background: #FBEAEA; color: var(--down); }
.ac-verify-name { font-size: 1.6rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.ac-verify-course { font-size: 1rem; font-weight: 600; color: #2a2a2a; margin: .3rem 0 0; }
.ac-verify-org { font-size: .9rem; color: var(--accent); font-weight: 600; margin: .1rem 0 0; }
.ac-verify-rows { margin: 1.1rem 0 0; border-top: 1px solid var(--rule); }
.ac-verify-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); font-size: .9rem; }
.ac-verify-row .k { color: var(--faint); } .ac-verify-row .v { font-weight: 600; font-family: var(--mono); }
.ac-verify-note { font-size: .82rem; color: var(--muted); margin: 1rem 0 0; line-height: 1.5; }

/* Plain prose pages (syllabus) */
.ac-prose > section { margin: 0 0 2rem; }
.ac-prose h2 { font-weight: 600; font-size: 1.35rem; line-height: 1.2; margin: 2rem 0 .6rem; letter-spacing: -.01em; }
.ac-prose h3 { font-size: 1.02rem; font-weight: 600; margin: 1.3rem 0 .4rem; }
.ac-prose p { line-height: 1.65; margin: 0 0 .9rem; color: #2a2a2a; }
.ac-prose ul { margin: 0 0 1rem; padding-left: 1.1rem; line-height: 1.6; } .ac-prose li { margin: 0 0 .4rem; }
.ac-hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2rem 0; }

@media (max-width: 560px) {
  .ac-pillars { grid-template-columns: repeat(2, 1fr); }
  .ac-bar-row { grid-template-columns: 1fr; gap: .25rem; }
  .ac-swipe-btns .ac-btn { flex: 1 1 100%; }
  .ac-cat-btn { flex: 1 1 7rem; text-align: center; padding: .6rem .7rem; }
  .ac-node-wrap.pos0 { transform: translateX(-40px); } .ac-node-wrap.pos1 { transform: translateX(40px); }
  .ac-node-wrap.pos2 { transform: translateX(-20px); } .ac-node-wrap.pos3 { transform: translateX(20px); }
  .ac-brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-reveal, .ac-slidein, .ac-swipe-card.in, .ac-anim-pop, .ac-anim-shake, .ac-node.is-current .ac-node-face, .ac-chip.pulse { animation: none !important; }
}

/* Interactive tools: simulators, the coin-flip stadium, the tape, the builder */
.ac-sim { background: var(--bg); border-radius: 12px; padding: 1rem 1rem 1.1rem; margin: 0 0 1rem; display: grid; gap: .8rem; }
.ac-sim--center { text-align: center; justify-items: center; }
.ac-slider { display: grid; gap: .3rem; }
.ac-slider-top { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.ac-slider-label { color: var(--muted); } .ac-slider-val { font-weight: 500; }
.ac-slider input[type=range] { width: 100%; accent-color: var(--accent); }
.ac-readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; }
.ac-readout-item { background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: .6rem .75rem; display: grid; gap: .15rem; }
.ac-readout-k { font-size: .76rem; color: var(--faint); } .ac-readout-v { font-size: 1.05rem; font-weight: 500; }
.ac-chartbox { background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: .6rem .6rem .4rem; }
.ac-linechart { width: 100%; height: auto; display: block; }
.ac-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .8rem; color: var(--muted); padding: .4rem .3rem 0; }
.ac-legend-item { display: inline-flex; align-items: center; gap: .4rem; } .ac-legend-item i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.ac-numrow { display: flex; align-items: center; gap: .5rem; }
.ac-numunit { color: var(--muted); font-family: var(--mono); }
input.ac-num { font: inherit; font-family: var(--mono); width: 12rem; border: 1.5px solid var(--rule); border-radius: 6px; padding: .7rem .85rem; background: #fff; color: var(--ink); }
input.ac-num:focus { outline: none; border-color: var(--ink); }
input.ac-num.is-correct { border-color: var(--up); background: #EAF6EE; } input.ac-num.is-wrong { border-color: var(--down); background: #FBEAEA; }
.ac-bignum { font-size: clamp(2.6rem, 9vw, 4rem); font-weight: 500; line-height: 1; color: var(--accent); }
.ac-flips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.ac-flipchip { font-size: .78rem; background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: .25rem .6rem; }
.ac-tape-head { display: flex; justify-content: space-between; align-items: baseline; }
.ac-tape-day { color: var(--muted); } .ac-tape-price { font-size: 1.6rem; font-weight: 500; }
.ac-tape-news { margin: 0; font-size: .98rem; line-height: 1.5; background: #fff; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: .6rem .8rem; }
.ac-builder-group { background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: .6rem .8rem; }
.ac-builder-sector { margin: 0 0 .3rem; font-size: .82rem; color: var(--accent); font-weight: 500; }
.ac-builder-row { display: grid; grid-template-columns: auto 1fr auto 4.2rem auto; align-items: center; gap: .55rem; padding: .35rem 0; border-top: 1px solid var(--rule); font-size: .92rem; cursor: pointer; }
.ac-builder-row:first-of-type { border-top: 0; }
.ac-builder-row.is-on .ac-builder-name { font-weight: 600; }
.ac-builder-row input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.ac-builder-tk { font-size: .74rem; color: var(--faint); white-space: nowrap; }
.ac-builder-w { font: inherit; font-family: var(--mono); width: 100%; border: 1.5px solid var(--rule); border-radius: 8px; padding: .35rem .5rem; text-align: right; background: #fff; }
.ac-builder-w:disabled { opacity: .4; }
.ac-builder-pct { color: var(--faint); font-size: .85rem; }
.ac-builder-warn { margin: 0; font-size: .9rem; color: var(--down); font-weight: 500; } .ac-builder-warn.is-ok { color: var(--up); }
.ac-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; }
.ac-badge { font-size: .8rem; font-weight: 500; color: var(--accent); background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: .3rem .7rem; }
@media (max-width: 560px) { .ac-builder-row { grid-template-columns: auto 1fr 3.6rem auto; } .ac-builder-tk { display: none; } }

/* Inside the MosiMarket app: the app's own header carries the brand and the
   way back, so the course's brand is plain text and the page keeps its
   chips. Nothing here links to the website or to enrolling. */
.in-app .ac-brand { pointer-events: none; }
.in-app .ac-appbar { padding-top: max(.5rem, env(safe-area-inset-top)); }
.ac-pwcard { border-color: var(--accent); background: var(--mist); }
.ac-pwcard .ac-cert-form { margin-top: .6rem; }
.ac-signlinks { margin: .9rem 0 0; display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .92rem; }
.ac-signlinks a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* Gradients (app.js grad): a seeded colour field with film grain, a soft
   dark fade so white type reads on its lighter blobs, small square corners. */
.ac-grad { position: relative; overflow: hidden; isolation: isolate; color: #fff; border-radius: 12px; border: 0; }
.ac-grad::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ac-grad::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15) 70%, rgba(0,0,0,.05)); }
.ac-grad h1, .ac-grad h2, .ac-grad p, .ac-grad .ac-lead, .ac-grad .ac-cert-eyebrow { color: #fff; }
.ac-grad .ac-lead, .ac-grad p { color: rgba(255,255,255,.86); }
.ac-grad .ac-btn { background: #fff; color: #0B0B0C; }
.ac-grad .ac-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.ac-home-head.ac-grad { padding: 4.5rem 1.3rem 1.4rem; margin: .4rem 0 1rem; }
.ac-home-head.ac-grad .ac-h1 { margin-top: 0; }
.ac-unit-head.ac-grad { margin: 2rem 0 .25rem; padding: 2.6rem 1.1rem .9rem; border-bottom: 0; }
.ac-unit-head.ac-grad .ac-unit-title { color: #fff; }
.ac-done-inline.ac-grad { padding: 2rem 1.2rem 1.4rem; margin-top: 1rem; }
.ac-certcard.ac-grad { padding: 2rem 1.2rem 1.4rem; }

.ac-verify-img { display: block; width: 100%; height: auto; margin: 1rem 0 .6rem; border-radius: 4px; box-shadow: 0 8px 28px rgba(0,0,0,.1); }
.ac-verify-link { display: inline-block; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; margin-bottom: .6rem; }

/* The issued certificate, as drawn by MosiMarket, and the share row under it. */
.ac-cert-official { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.14); margin: 0 0 1.2rem; }
.ac-share { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.2rem; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
.ac-share-title { font-weight: 600; margin: 0; width: 100%; }
.ac-share-link { font: inherit; font-weight: 600; font-size: .95rem; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.ac-share-link:hover { text-decoration-color: var(--ink); }