/* ═══════════════════════════════════════════════════════════════
   MQ ASSESSMENT — visual module
   Uses Kingdom Heritage's existing tokens (forest, gold, parch) plus
   one new accent (--mq-indigo) so the assessment reads as "connected
   to Kingdom Heritage, but its own diagnostic" rather than a forced
   skin-match. Drop this <style> block into the main app's <head>,
   or link as a separate stylesheet.
═══════════════════════════════════════════════════════════════ */

:root{
  --mq-indigo:#3B3A6B;
  --mq-indigo-l:#5B5A9B;
  --mq-indigo-pale:#EAE9F5;
}

/* ── ENTRY CARD (shown inside Kingdom Heritage, e.g. Home or Guide) ── */
.mq-entry-card{
  background:linear-gradient(135deg,var(--mq-indigo),var(--mq-indigo-l));
  border-radius:var(--r20);padding:22px 20px;margin:0 18px 16px;
  position:relative;overflow:hidden;cursor:pointer;transition:all .2s;
}
.mq-entry-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(59,58,107,0.35);}
.mq-entry-card::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;
  border-radius:50%;background:rgba(255,255,255,0.08);}
.mq-entry-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,0.7);margin-bottom:8px;position:relative;z-index:1;}
.mq-entry-title{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;color:white;
  margin-bottom:6px;position:relative;z-index:1;}
.mq-entry-desc{font-size:12px;color:rgba(255,255,255,0.7);line-height:1.5;margin-bottom:14px;position:relative;z-index:1;}
.mq-entry-btn{background:white;color:var(--mq-indigo);border:none;padding:9px 20px;
  border-radius:var(--r999);font-size:12px;font-weight:700;cursor:pointer;
  font-family:'Inter',sans-serif;position:relative;z-index:1;}

/* ── FULL-SCREEN ASSESSMENT FLOW ── */
#mqScreen{display:none;}
#mqScreen.on{display:block;}
.mq-shell{min-height:100vh;background:var(--parch);}
.mq-head{background:var(--mq-indigo);padding:20px 20px 24px;position:sticky;top:0;z-index:50;}
.mq-head-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.mq-exit{background:rgba(255,255,255,0.1);color:white;border:none;width:32px;height:32px;
  border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.mq-head-title{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:white;}
.mq-progress-track{height:6px;background:rgba(255,255,255,0.15);border-radius:999px;overflow:hidden;}
.mq-progress-fill{height:100%;background:white;border-radius:999px;transition:width .3s ease;}
.mq-progress-label{font-size:11px;color:rgba(255,255,255,0.6);margin-top:8px;text-align:center;}

.mq-question-area{padding:32px 24px;max-width:520px;margin:0 auto;min-height:50vh;
  display:flex;flex-direction:column;justify-content:center;}
.mq-q-num{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--mq-indigo);margin-bottom:14px;text-align:center;}
.mq-q-text{font-family:'Playfair Display',serif;font-size:21px;font-weight:600;color:var(--forest);
  line-height:1.4;text-align:center;margin-bottom:36px;}

.mq-likert{display:flex;flex-direction:column;gap:10px;}
.mq-likert-opt{display:flex;align-items:center;gap:14px;padding:14px 18px;background:white;
  border:1.5px solid var(--parch-d);border-radius:var(--r16);cursor:pointer;transition:all .2s;}
.mq-likert-opt:hover{border-color:var(--mq-indigo-l);}
.mq-likert-opt.sel{border-color:var(--mq-indigo);background:var(--mq-indigo-pale);}
.mq-likert-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--parch-d);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .2s;}
.mq-likert-opt.sel .mq-likert-dot{border-color:var(--mq-indigo);background:var(--mq-indigo);}
.mq-likert-opt.sel .mq-likert-dot::after{content:'';width:8px;height:8px;border-radius:50%;background:white;}
.mq-likert-text{font-size:14px;color:var(--forest);font-weight:500;}

.mq-nav-bar{display:flex;gap:10px;padding:0 24px 32px;max-width:520px;margin:0 auto;}
.mq-btn-back{flex:0 0 auto;background:var(--parch-d);color:var(--warm);border:none;
  padding:13px 22px;border-radius:var(--r999);font-size:13px;font-weight:600;cursor:pointer;
  font-family:'Inter',sans-serif;}
.mq-btn-next{flex:1;background:var(--mq-indigo);color:white;border:none;
  padding:13px 22px;border-radius:var(--r999);font-size:13px;font-weight:700;cursor:pointer;
  font-family:'Inter',sans-serif;transition:all .2s;}
.mq-btn-next:disabled{opacity:0.4;cursor:default;}
.mq-btn-next:not(:disabled):hover{background:var(--mq-indigo-l);}

/* ── RESULTS SCREEN ── */
.mq-results{padding:40px 24px;max-width:520px;margin:0 auto;text-align:center;}
.mq-results-eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--mq-indigo);margin-bottom:14px;}
.mq-score-ring{width:140px;height:140px;margin:0 auto 20px;position:relative;}
.mq-score-ring svg{width:140px;height:140px;transform:rotate(-90deg);}
.mq-score-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.mq-score-val{font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:var(--forest);}
.mq-score-lvl{font-size:11px;font-weight:700;color:var(--mq-indigo);text-transform:uppercase;letter-spacing:1px;margin-top:2px;}
.mq-profile-name{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;color:var(--forest);
  margin-bottom:6px;}
.mq-profile-cluster{font-size:13px;color:var(--muted);margin-bottom:28px;}

.mq-barriers-list{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;text-align:left;}
.mq-barrier-row{display:flex;align-items:center;gap:12px;background:white;border-radius:var(--r12);
  padding:12px 16px;border:1px solid var(--parch-d);}
.mq-barrier-icon{font-size:20px;flex-shrink:0;}
.mq-barrier-info{flex:1;}
.mq-barrier-label{font-size:13px;font-weight:600;color:var(--forest);}
.mq-barrier-bar-track{height:5px;background:var(--parch-d);border-radius:999px;margin-top:5px;overflow:hidden;}
.mq-barrier-bar-fill{height:100%;border-radius:999px;background:var(--mq-indigo);}
.mq-barrier-level{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--muted);flex-shrink:0;}

.mq-kh-link{background:var(--forest);border-radius:var(--r20);padding:22px 20px;text-align:left;margin-bottom:16px;}
.mq-kh-link-lbl{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold-l);margin-bottom:10px;}
.mq-kh-link-text{font-size:14px;color:rgba(255,255,255,0.85);line-height:1.6;}

.mq-cta-row{display:flex;flex-direction:column;gap:10px;}
.mq-btn-primary{background:var(--mq-indigo);color:white;border:none;padding:14px 22px;
  border-radius:var(--r999);font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;}
.mq-btn-secondary{background:none;color:var(--mq-indigo);border:1.5px solid var(--mq-indigo);
  padding:13px 22px;border-radius:var(--r999);font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}

.mq-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:60vh;padding:40px 24px;text-align:center;}
.mq-loading-spinner{width:40px;height:40px;border:3px solid var(--parch-d);border-top-color:var(--mq-indigo);
  border-radius:50%;animation:mqspin 0.8s linear infinite;margin-bottom:20px;}
@keyframes mqspin{to{transform:rotate(360deg);}}
.mq-loading-text{font-size:14px;color:var(--muted);}
