/* Procurement Academy styles — namespaced under #academy-root so it can live
   inside the Malolo site as one tab without touching the host page's own
   tokens, typography or element-level rules. */
:root{
  --ac-bg:#f3f5f2; --ac-surface:#ffffff; --ac-surface2:#eef1ec; --ac-ink:#12161b; --ac-muted:#5b6472;
  --ac-accent:#c8781f; --ac-accent-ink:#ffffff; --ac-accent2:#1f7a6c; --ac-accent2-ink:#ffffff;
  --ac-danger:#b3261e; --ac-good:#1f7a6c; --ac-bad:#b3261e; --ac-line:#d9ddd6; --ac-line-strong:#c3c9bd;
  --ac-radius:14px; --ac-shadow:0 1px 2px rgba(20,20,10,.06), 0 8px 24px -16px rgba(20,20,10,.25);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ac-bg:#0a0f1a; --ac-surface:#121a2b; --ac-surface2:#17213a; --ac-ink:#e8edf5; --ac-muted:#93a0b4;
    --ac-accent:#e3922b; --ac-accent-ink:#1a1304; --ac-accent2:#36b7a0; --ac-accent2-ink:#06201b;
    --ac-danger:#ef5555; --ac-good:#36b7a0; --ac-bad:#ef5555; --ac-line:#223049; --ac-line-strong:#2d3c5c;
    --ac-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ac-bg:#0a0f1a; --ac-surface:#121a2b; --ac-surface2:#17213a; --ac-ink:#e8edf5; --ac-muted:#93a0b4;
  --ac-accent:#e3922b; --ac-accent-ink:#1a1304; --ac-accent2:#36b7a0; --ac-accent2-ink:#06201b;
  --ac-danger:#ef5555; --ac-good:#36b7a0; --ac-bad:#ef5555; --ac-line:#223049; --ac-line-strong:#2d3c5c;
  --ac-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.6);
}

#academy-root *{ box-sizing:border-box; }
#academy-root{ background:var(--ac-bg); color:var(--ac-ink); font-family:'IBM Plex Sans',system-ui,sans-serif; min-height:100%; display:flex; flex-direction:column; }
#academy-root h1, #academy-root h2, #academy-root h3{ font-family:'Archivo',system-ui,sans-serif; font-weight:800; letter-spacing:-.01em; text-wrap:balance; margin:0 0 .4em; color:var(--ac-ink); }
#academy-root h1{ font-size:1.6rem; } #academy-root h2{ font-size:1.3rem; } #academy-root h3{ font-size:1.08rem; }
#academy-root p{ line-height:1.55; margin:0 0 .8em; color:var(--ac-ink); }
#academy-root .muted{ color:var(--ac-muted); }
#academy-root strong{ color:var(--ac-ink); }
#academy-root .mono, #academy-root .hud-xpbar, #academy-root .timer, #academy-root .bignum, #academy-root .scoreCircle{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }

#academy-root .wrap{ max-width:880px; margin:0 auto; padding:16px 16px calc(84px + env(safe-area-inset-bottom,0px)); width:100%; flex:1; }

/* ---------- HUD ---------- */
#academy-root .hud{ position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--ac-surface); border-bottom:1px solid var(--ac-line);
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; box-shadow:var(--ac-shadow); }
#academy-root .hud-brand{ font-family:'Archivo',sans-serif; font-weight:900; font-size:1rem; cursor:pointer; white-space:nowrap; color:var(--ac-ink); }
#academy-root .hud-brand span{ display:inline; }
#academy-root .hud-stats{ display:flex; align-items:center; gap:10px; flex:1; justify-content:flex-end; min-width:0; }
#academy-root .hud-item{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
#academy-root .hud-lvl{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:.82rem; color:var(--ac-accent); }
#academy-root .hud-title{ font-size:.66rem; color:var(--ac-muted); white-space:nowrap; }
#academy-root .hud-xpbar{ width:70px; height:7px; background:var(--ac-surface2); border-radius:99px; overflow:hidden; border:1px solid var(--ac-line); flex-shrink:0; }
#academy-root .hud-xpfill{ height:100%; background:linear-gradient(90deg,var(--ac-accent2),var(--ac-accent)); }
#academy-root .hud-item.streak{ font-size:.85rem; font-weight:700; }

/* ---------- bottom nav ---------- */
#academy-root .bottomnav{ position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--ac-surface); border-top:1px solid var(--ac-line);
  display:flex; padding-bottom:env(safe-area-inset-bottom,0px); box-shadow:0 -4px 18px -12px rgba(0,0,0,.3); }
#academy-root .navbtn{ flex:1; background:none; border:0; padding:9px 4px 7px; display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:1.1rem; color:var(--ac-muted); cursor:pointer; }
#academy-root .navbtn span{ font-size:.68rem; font-family:'IBM Plex Sans',sans-serif; font-weight:600; }
#academy-root .navbtn.active{ color:var(--ac-accent); }

/* ---------- home ---------- */
#academy-root .herobar{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin:4px 0 20px; flex-wrap:wrap; }
#academy-root .heroprog{ text-align:center; background:var(--ac-surface); border:1px solid var(--ac-line); border-radius:var(--ac-radius); padding:10px 18px; }
#academy-root .bignum{ font-size:1.6rem; font-weight:700; color:var(--ac-accent2); }
#academy-root .chaplist{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
#academy-root .card{ background:var(--ac-surface); border:1px solid var(--ac-line); border-radius:var(--ac-radius); padding:18px; box-shadow:var(--ac-shadow); margin-bottom:14px; }
#academy-root .chapcard, #academy-root .simcard{ display:flex; align-items:center; gap:14px; cursor:pointer; padding:14px 16px; }
#academy-root .chapcard:hover, #academy-root .simcard:hover{ border-color:var(--ac-accent); }
#academy-root .chapicon{ font-size:1.6rem; flex-shrink:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--ac-surface2); border-radius:12px; }
#academy-root .chapbody{ flex:1; min-width:0; }
#academy-root .chaptitle{ font-weight:700; margin-bottom:2px; }
#academy-root .chapblurb{ font-size:.85rem; color:var(--ac-muted); margin-bottom:6px; }
#academy-root .chevron{ color:var(--ac-muted); font-size:1.3rem; flex-shrink:0; }
#academy-root .tag{ display:inline-block; font-size:.68rem; font-weight:700; padding:3px 9px; border-radius:99px; letter-spacing:.02em; }
#academy-root .tag.new{ background:var(--ac-surface2); color:var(--ac-muted); }
#academy-root .tag.attempt{ background:#f2cf8a33; color:var(--ac-accent); border:1px solid var(--ac-accent); }
#academy-root .tag.pass{ background:var(--ac-accent2); color:var(--ac-accent2-ink); }

#academy-root .sectionhead{ margin:26px 0 10px; }
#academy-root .badgerow{ display:flex; flex-wrap:wrap; gap:10px; }
#academy-root .badge{ width:84px; text-align:center; opacity:.35; filter:grayscale(1); }
#academy-root .badge.earned{ opacity:1; filter:none; }
#academy-root .badgeicon{ font-size:1.6rem; background:var(--ac-surface); border:1px solid var(--ac-line); border-radius:12px; width:54px; height:54px; display:flex; align-items:center; justify-content:center; margin:0 auto 4px; }
#academy-root .badgename{ font-size:.66rem; font-weight:600; color:var(--ac-muted); }

/* ---------- chapter / lesson ---------- */
#academy-root .backlink{ background:none; border:0; color:var(--ac-accent); font-weight:600; cursor:pointer; padding:0; margin-bottom:14px; font-size:.9rem; }
#academy-root .banner{ background:var(--ac-surface2); border:1px solid var(--ac-line); border-radius:12px; padding:10px 14px; margin-bottom:16px; font-size:.88rem; }
#academy-root .banner.pass{ background:#1f7a6c1a; border-color:var(--ac-good); color:var(--ac-good); font-weight:600; }
#academy-root .lesson{ background:var(--ac-surface); border:1px solid var(--ac-line); border-radius:var(--ac-radius); padding:18px 20px; margin-bottom:14px; }
#academy-root .lesson p{ font-size:.93rem; }
#academy-root .endtestcard{ border-color:var(--ac-accent); }
#academy-root .endtestcard.timed{ border-color:var(--ac-accent2); }

/* ---------- buttons ---------- */
#academy-root .btn{ background:var(--ac-accent); color:var(--ac-accent-ink); border:0; border-radius:10px; padding:12px 20px; font-weight:700; font-size:.92rem;
  cursor:pointer; font-family:inherit; }
#academy-root .btn:disabled{ opacity:.4; cursor:not-allowed; }
#academy-root .btn.alt{ background:var(--ac-accent2); color:var(--ac-accent2-ink); }
#academy-root .btn.small{ padding:8px 14px; font-size:.8rem; border-radius:8px; background:var(--ac-surface2); color:var(--ac-ink); border:1px solid var(--ac-line); font-weight:600; }

/* ---------- quiz ---------- */
#academy-root .quizwrap{ display:flex; flex-direction:column; gap:14px; }
#academy-root .quizhead{ position:sticky; top:calc(54px + env(safe-area-inset-top,0px)); background:var(--ac-bg); padding-top:4px; z-index:5; }
#academy-root .quizprog{ height:6px; background:var(--ac-surface2); border-radius:99px; overflow:hidden; margin-bottom:8px; }
#academy-root .quizprogfill{ height:100%; background:var(--ac-accent); }
#academy-root .quizmeta{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--ac-muted); font-weight:600; }
#academy-root .timer{ font-weight:700; color:var(--ac-bad); }
#academy-root .qcard{ background:var(--ac-surface); border:1px solid var(--ac-line); border-radius:var(--ac-radius); padding:20px; box-shadow:var(--ac-shadow); }
#academy-root .qprompt{ font-size:1.02rem; font-weight:600; margin-bottom:16px; line-height:1.5; }
#academy-root .options{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
#academy-root .opt{ text-align:left; background:var(--ac-surface2); border:1.5px solid var(--ac-line); border-radius:10px; padding:12px 14px; font-size:.92rem;
  cursor:pointer; color:var(--ac-ink); font-family:inherit; }
#academy-root .opt:hover{ border-color:var(--ac-accent); }
#academy-root .opt.selected{ border-color:var(--ac-accent); background:#c8781f1a; }
#academy-root .opt.correct{ border-color:var(--ac-good); background:#1f7a6c22; font-weight:700; }
#academy-root .opt.wrong{ border-color:var(--ac-bad); background:#b3261e22; }
#academy-root .tfrow{ flex-direction:row; }
#academy-root .tfrow .opt{ flex:1; text-align:center; font-weight:700; }
#academy-root .numwrap input{ width:100%; padding:12px 14px; font-size:1rem; border-radius:10px; border:1.5px solid var(--ac-line); background:var(--ac-surface2); color:var(--ac-ink); font-family:'IBM Plex Mono',monospace; }
#academy-root .correctline{ margin-top:8px; font-weight:700; color:var(--ac-good); }
#academy-root .orderlist{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
#academy-root .orderitem{ display:flex; align-items:center; gap:10px; background:var(--ac-surface2); border:1.5px solid var(--ac-line); border-radius:10px; padding:9px 12px; }
#academy-root .orderitem.correct{ border-color:var(--ac-good); } #academy-root .orderitem.wrong{ border-color:var(--ac-bad); }
#academy-root .ordernum{ font-family:'IBM Plex Mono',monospace; font-weight:700; color:var(--ac-muted); width:18px; }
#academy-root .ordertext{ flex:1; font-size:.88rem; }
#academy-root .orderbtns button{ background:var(--ac-surface); border:1px solid var(--ac-line); border-radius:6px; width:26px; height:26px; cursor:pointer; margin-left:4px; }
#academy-root .feedback{ border-radius:10px; padding:12px 14px; margin-bottom:14px; font-size:.9rem; line-height:1.5; }
#academy-root .feedback.good{ background:#1f7a6c1a; border:1px solid var(--ac-good); }
#academy-root .feedback.bad{ background:#b3261e1a; border:1px solid var(--ac-bad); }
#academy-root .src{ margin-top:6px; font-size:.74rem; color:var(--ac-muted); font-style:italic; }
#academy-root .palette{ display:flex; flex-wrap:wrap; gap:6px; }
#academy-root .pbtn{ width:32px; height:32px; border-radius:8px; border:1.5px solid var(--ac-line); background:var(--ac-surface2); color:var(--ac-muted); font-size:.75rem; cursor:pointer; font-weight:700; }
#academy-root .pbtn.answered{ background:var(--ac-accent2); color:var(--ac-accent2-ink); border-color:var(--ac-accent2); }
#academy-root .pbtn.flagged{ background:var(--ac-bad); color:#fff; border-color:var(--ac-bad); }
#academy-root .pbtn.current{ outline:2px solid var(--ac-accent); outline-offset:1px; }
#academy-root .examnav{ display:flex; flex-wrap:wrap; gap:8px; }
#academy-root .examnav .btn.alt{ margin-left:auto; }

/* ---------- results / certificate ---------- */
#academy-root .resultcard{ text-align:center; }
#academy-root .scoreCircle{ width:120px; height:120px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.7rem; font-weight:800;
  margin:10px auto 18px; border:5px solid var(--ac-line); }
#academy-root .scoreCircle.pass{ border-color:var(--ac-good); color:var(--ac-good); }
#academy-root .scoreCircle.fail{ border-color:var(--ac-bad); color:var(--ac-bad); }
#academy-root .resultbtns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
#academy-root .certificate{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:20px 0; }
#academy-root .certinner{ background:var(--ac-surface); border:3px double var(--ac-accent); border-radius:18px; padding:36px 28px; text-align:center; max-width:520px; }
#academy-root .certseal{ font-size:2.2rem; }
#academy-root .certsub{ color:var(--ac-accent); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; }
#academy-root .certbody{ font-size:.95rem; margin:14px 0; }
#academy-root .certdate{ font-weight:700; }
#academy-root .certfoot{ font-size:.72rem; margin-top:10px; }

/* ---------- simulators ---------- */
#academy-root .briefcard{ background:var(--ac-surface2); border:1px solid var(--ac-line); border-radius:var(--ac-radius); padding:16px 18px; margin-bottom:16px; }
#academy-root .briefgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:8px; }
#academy-root .briefgrid label{ display:block; font-size:.68rem; color:var(--ac-muted); text-transform:uppercase; letter-spacing:.04em; }
#academy-root .briefgrid > div > div{ font-weight:700; font-family:'IBM Plex Mono',monospace; }
#academy-root .simtable{ width:100%; border-collapse:collapse; margin:12px 0; font-size:.85rem; display:block; overflow-x:auto; white-space:nowrap; }
#academy-root .simtable th, #academy-root .simtable td{ border-bottom:1px solid var(--ac-line); padding:8px 10px; text-align:left; }
#academy-root .simtable th{ color:var(--ac-muted); font-size:.72rem; text-transform:uppercase; }
#academy-root .miniopt{ background:var(--ac-surface2); border:1.5px solid var(--ac-line); border-radius:7px; padding:5px 10px; font-size:.78rem; cursor:pointer; margin-right:5px; font-family:inherit; }
#academy-root .miniopt.sel{ background:var(--ac-accent); color:var(--ac-accent-ink); border-color:var(--ac-accent); }
#academy-root .violist{ display:flex; flex-direction:column; gap:8px; margin:14px 0; }
#academy-root .viocheck{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; background:var(--ac-surface2); border:1px solid var(--ac-line); border-radius:10px; padding:10px 12px; cursor:pointer; }
#academy-root .viocheck input{ margin-top:3px; }
#academy-root .vioitem{ border-radius:10px; padding:10px 12px; font-size:.86rem; border:1px solid var(--ac-line); }
#academy-root .vioitem.real{ background:#b3261e14; border-color:var(--ac-bad); }
#academy-root .vioitem.decoy{ background:#1f7a6c14; border-color:var(--ac-good); }
#academy-root .examparts{ padding-left:20px; font-size:.9rem; line-height:1.8; }

/* ---------- toast ---------- */
#academy-root .toast{ position:fixed; left:50%; bottom:90px; transform:translate(-50%,16px); background:var(--ac-ink); color:var(--ac-bg); padding:11px 18px;
  border-radius:99px; font-size:.85rem; font-weight:600; opacity:0; transition:opacity .35s, transform .35s; z-index:60; box-shadow:var(--ac-shadow); white-space:nowrap; }
#academy-root .toast.show{ opacity:1; transform:translate(-50%,0); }

@media (max-width:620px){
  #academy-root .hud-title{ display:none; }
  #academy-root .briefgrid{ grid-template-columns:repeat(2,1fr); }
  #academy-root h1{ font-size:1.32rem; } #academy-root h2{ font-size:1.14rem; }
  #academy-root .hud-brand span{ display:none; }
}