@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=JetBrains Mono&display=swap');

.murpsy-trait-test, .murpsy-trait-test * { font-family: 'JetBrains Mono', monospace !important; box-sizing: border-box; }

.murpsy-trait-test { color:#111; background:#fff; }

.mtt-wrap { max-width: 860px; margin: 0 auto; padding: 16px; }

.mtt-panel { background:#f6f6f6; border:2px solid #000; box-shadow:4px 4px 0 #000; padding:16px; margin-bottom:22px; }

.mtt-title { font-weight:700; font-size: 24px; margin:0 0 8px; }

.mtt-subtitle { font-weight:700; font-size: 16px; margin: 0 0 12px; }

.mtt-muted { color:#666; font-size: 14px; }

.mtt-grid { display:grid; gap:12px; }

.mtt-grid-2 { grid-template-columns: 1fr 1fr; }

@media (max-width: 640px) { .mtt-grid-2 { grid-template-columns: 1fr; } }

.mtt-btn { 
  width:100%; background:#fff; border:2px solid #000; box-shadow:4px 4px 0 #000;
  padding:12px 10px; font-weight:700; cursor:pointer; user-select:none; 
  transition: transform 70ms linear, box-shadow 70ms linear;
}

.mtt-btn:active, .mtt-btn.is-pressed { transform: translate(2px,2px); box-shadow:2px 2px 0 #000; }

.mtt-btn.secondary { background:#f6f6f6; }

.mtt-btn.inline { width:auto; padding:10px 12px; }

.mtt-row { display:flex; gap:12px; flex-wrap:wrap; }

.mtt-input { width:100%; padding:10px 10px; border:2px solid #000; box-shadow:2px 2px 0 #000; background:#fff; }

.mtt-kpi { display:flex; gap:12px; align-items:center; }

.mtt-badge { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:2px solid #000; box-shadow:2px 2px 0 #000; background:#fff; }

.mtt-progress { width:100%; height:10px; background:#d5d5d5; border:2px solid #000; box-shadow:2px 2px 0 #000; overflow:hidden; }

/* Progress fill (used in test progress + scale cards).
   Robust: fill stays visible even if JS animation class fails.
*/
.mtt-progress-bar{height:100%;width:var(--w,0%);background:var(--c,#000);transition:width 900ms cubic-bezier(.2,.9,.2,1),background 180ms ease}

.mtt-card { background:#fff; border:2px solid #000; box-shadow:4px 4px 0 #000; padding:14px; margin-bottom:22px; }

.mtt-grid-2 .mtt-card, .mtt-grid-1 .mtt-card { margin-bottom:0; }

.mtt-card h3 { margin:0 0 8px; font-weight:700; font-size:16px; }

.mtt-details { margin-top:10px; }

.mtt-details summary { cursor:pointer; font-weight:700; }

.mtt-details .mtt-details-body { text-align:left; margin-top:10px; padding-top:4px; color:#111; font-size:14px; font-weight:300; line-height:1.6; }

.mtt-list { margin:8px 0 0; padding-left:0; list-style:none; }

.mtt-list li { margin: 6px 0; }

/* Unified list markers (no dots), usable outside report as well */
.mtt-ul-square,.mtt-ul-hollow,.mtt-ul-arrow,.mtt-ul-check,.mtt-ul-dash,.mtt-ol{margin:8px 0;padding-left:0;list-style:none !important}
.mtt-ul-square > li,.mtt-ul-hollow > li,.mtt-ul-arrow > li,.mtt-ul-check > li,.mtt-ul-dash > li,.mtt-ol > li{position:relative;padding-left:18px;margin:6px 0}
.mtt-ul-square > li::before{content:"■";position:absolute;left:0;top:0}
.mtt-ul-hollow > li::before{content:"□";position:absolute;left:0;top:0}
.mtt-ul-arrow > li::before{content:"▸";position:absolute;left:0;top:0}
.mtt-ul-check > li::before{content:"✓";position:absolute;left:0;top:0}
.mtt-ul-dash > li::before{content:"-";position:absolute;left:0;top:0}
.mtt-ol{counter-reset:mttol}
.mtt-ol > li::before{counter-increment:mttol;content:counter(mttol)".";position:absolute;left:0;top:0}

/* About/compare layout fixes: prevent columns from overlapping */
.mtt-compare{display:flex;gap:16px;flex-wrap:wrap;align-items:stretch;margin-top:10px}
.mtt-details .mtt-p{margin:10px 0}

/* Prevent text fragments from overlapping on the About page */
.mtt-compare-col .mtt-list{margin-top:8px}

/* Unified list markers: use only custom markers (no browser bullets) */
.mtt-card ul.mtt-ul-square,.mtt-card ul.mtt-ul-hollow,.mtt-card ul.mtt-ul-arrow,.mtt-card ul.mtt-ul-check,.mtt-card ul.mtt-ul-dash{margin:8px 0;padding-left:0;list-style:none !important}

/* Consultation CTA — same style as all other buttons */
.mtt-btn-consult{
  color:#111;
  text-decoration:none;
  border:2px solid #000;
  box-shadow:4px 4px 0 #000;
  background:#fff;
  animation:none;
}
.mtt-btn-consult:hover{ filter:none; }

.mtt-card ul.mtt-ul-square>li,.mtt-card ul.mtt-ul-hollow>li,.mtt-card ul.mtt-ul-arrow>li,.mtt-card ul.mtt-ul-check>li,.mtt-card ul.mtt-ul-dash>li{position:relative;padding-left:18px;margin:6px 0}
.mtt-card ul.mtt-ul-square>li::before{content:"■";position:absolute;left:0;top:0}
.mtt-card ul.mtt-ul-hollow>li::before{content:"□";position:absolute;left:0;top:0}
.mtt-card ul.mtt-ul-arrow>li::before{content:"▸";position:absolute;left:0;top:0}
.mtt-card ul.mtt-ul-check>li::before{content:"✓";position:absolute;left:0;top:0}
.mtt-card ul.mtt-ul-dash>li::before{content:"-";position:absolute;left:0;top:0}



.mtt-btn-rainbow{
  background:#ffd54a;
  color:#000;
  animation: mtt-payshift 2.4s linear infinite, mtt-pulse 0.9s ease-in-out infinite;
}

@keyframes mtt-payshift{
  0%{background:#ffd54a}
  20%{background:#ff6b6b}
  40%{background:#6bf178}
  60%{background:#4dabff}
  80%{background:#b388ff}
  100%{background:#ffd54a}
}

@keyframes mtt-pulse{0%,100%{opacity:1}50%{opacity:.88}}

.mtt-variant{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;text-align:left}
.mtt-variant .mtt-radio{width:18px;height:18px;border:2px solid #111;border-radius:999px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:#fff;box-shadow:2px 2px 0 #111}
.mtt-variant .mtt-radio span{width:8px;height:8px;border-radius:999px;background:#111;opacity:0;transform:scale(.6);transition:opacity .12s, transform .12s}
.mtt-variant.active .mtt-radio span{opacity:1;transform:scale(1)}
.mtt-variant .mtt-variant-body{flex:1 1 auto}
.mtt-variant:hover{transform: translate(-1px,-1px); box-shadow:4px 4px 0 #111;}
.mtt-variant.v120{background:#eaffea}
.mtt-variant.v200{background:#eaf4ff}
.mtt-variant.v300{background:#f4eaff}
.mtt-variant.active{outline:4px solid #111; box-shadow:6px 6px 0 #111; transform: translate(-1px,-1px);}
.mtt-variant.active.v120{outline-color:#1a8f2a;}
.mtt-variant.active.v200{outline-color:#1f67d2;}
.mtt-variant.active.v300{outline-color:#7a2bdc;}

.mtt-error { color:#b00020; font-weight:700; }

.mtt-screen { display:none; }

.mtt-screen.is-active { display:block; }


.mtt-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media (max-width:820px){.mtt-grid-2{grid-template-columns:1fr}}
.mtt-grid-1{display:grid;grid-template-columns:1fr;gap:16px;margin:16px 0}
.mtt-btn-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mtt-btn-row-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.mtt-btn-row{grid-template-columns:1fr}}
.mtt-btn-sm{padding:10px 12px}
.mtt-btn-title{font-weight:700}
.mtt-btn-sub{font-size:12px;opacity:.75;margin-top:4px}
.mtt-sep{height:14px}
@media (max-width:820px){.mtt-compare{grid-template-columns:1fr}}
.mtt-compare-col{flex:1 1 260px;min-width:240px;border:2px solid #111;box-shadow:4px 4px 0 #111;padding:12px}
.mtt-h3{font-weight:700;margin:10px 0 6px}
.mtt-link{color:#111;text-decoration:underline}
.mtt-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:16px;z-index:9999}
.mtt-modal{background:#fff;border:2px solid #111;box-shadow:8px 8px 0 #111;padding:16px;max-width:520px;width:100%}
.mtt-input{width:100%;padding:12px 10px;border:2px solid #111;box-shadow:4px 4px 0 #111;margin:10px 0 12px;font-size:16px}
.mtt-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#fff;border:2px solid #111;box-shadow:6px 6px 0 #111;padding:10px 12px;opacity:0;pointer-events:none;transition:opacity .15s, transform .15s;z-index:10000}
.mtt-toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.mtt-note{border-left:6px solid #111;padding-left:10px}
.mtt-report{margin-top:10px}
.mtt-report h2,.mtt-report h3{margin:6px 0 4px;font-weight:700}

/* Headings inside generated report (make smaller, esp. on results page) */
.mtt-report h2{font-size:18px}
.mtt-report h3{font-size:15px}

/* Generic heading helpers used by UI */
.mtt-h1{font-weight:700;font-size:22px;line-height:1.25}
.mtt-h2{font-weight:700;font-size:18px;line-height:1.25;margin:16px 0 8px;border-bottom:2px solid #111;padding-bottom:5px}
.mtt-h3{font-weight:700;font-size:12px;line-height:1.25;margin:12px 0 4px;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.mtt-p{margin:8px 0;line-height:1.6;font-weight:300}

/* Question styling */
.mtt-qbox{height:clamp(150px,22vh,230px);overflow:auto;padding:12px 0 8px;display:flex;align-items:flex-start}
.mtt-qbox.is-short{align-items:center}
.mtt-q{font-weight:700;font-size:18px;line-height:1.45;background:transparent;border:0;box-shadow:none;padding:0;margin:0;min-height:0;display:block}
.mtt-paren{display:inline-block;white-space:nowrap}
@media (max-width:640px){.mtt-qbox{height:clamp(170px,24vh,260px);padding:10px 0 6px}.mtt-q{font-size:17px}}
.mtt-answers{display:grid;gap:14px;margin:8px 0 34px}
.mtt-answers .mtt-btn{margin:0}

/* Results cards: brief line + qualitative label */
.mtt-qual{font-weight:700;margin:8px 0 2px}
.mtt-brief{color:#111;opacity:.85;font-size:13px;line-height:1.45;margin:0 0 8px}

/* Benefits block */
.mtt-benefits-list{margin:0;padding-left:0;list-style:none}
.mtt-benefits-list li{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid rgba(0,0,0,.1);line-height:1.5;font-size:14px}
.mtt-benefits-list li:first-child{border-top:none;padding-top:0}
.mtt-benefits-list li::before{content:"✓";font-weight:700;flex-shrink:0;line-height:1.5}
/* Donate mini-block in results */
.mtt-donate-mini{border:2px solid #111;box-shadow:4px 4px 0 #111;padding:14px;margin-bottom:22px;text-align:center}
.mtt-donate-mini .mtt-p{margin-bottom:12px}

/* Main-page disclaimer spacing */
.mtt-disclaimer{margin-top:18px}

/* Print: only selected area */
@media print{
  body{background:#fff}
  .mtt-btn,.mtt-toast,.mtt-modal-backdrop,.mtt-no-print{display:none !important}
  .mtt-wrap{max-width:100%}
  .mtt-print-area{display:block}
  .mtt-scale-card{break-inside:avoid}
}

/* Create more space between answers and navigation buttons */
.mtt-nav-gap{margin-top:12px}

/* Main menu disclaimer should look like a footnote and sit lower */
.mtt-footnote{margin-top:18px}
/* Lists: single custom marker, varied by class */
.mtt-report ul,.mtt-report ol{margin:8px 0;padding-left:0;list-style:none}
.mtt-report li{margin:3px 0;position:relative;padding-left:20px}

.mtt-report ul.mtt-ul-square > li::before{content:"■";position:absolute;left:0;top:0}
.mtt-report ul.mtt-ul-hollow > li::before{content:"□";position:absolute;left:0;top:0}
.mtt-report ul.mtt-ul-arrow  > li::before{content:"▸";position:absolute;left:0;top:0}
.mtt-report ul.mtt-ul-check  > li::before{content:"✓";position:absolute;left:0;top:0}
.mtt-report ul.mtt-ul-dash   > li::before{content:"-";position:absolute;left:0;top:0}

.mtt-report ol.mtt-ol{counter-reset:mttol}
.mtt-report ol.mtt-ol > li::before{counter-increment:mttol;content:counter(mttol)".";position:absolute;left:0;top:0}
.mtt-scale-card{border:2px solid #111;box-shadow:6px 6px 0 #111;padding:12px;background:#fff}
.mtt-scale-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mtt-badge{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:2px solid #111;box-shadow:3px 3px 0 #111}
.mtt-scale-title{font-weight:700;flex:1}
.mtt-scale-pct{font-weight:700}
.mtt-scale-card .mtt-progress{margin-top:6px}
.mtt-details{margin-top:8px}
.mtt-summary{text-align:left;cursor:pointer;font-weight:700}
.mtt-details-body{text-align:left;margin-top:8px}
/* (the main print rules are defined above) */

/* Rating badge */
.mtt-rating{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(0,0,0,.15);color:inherit;font:inherit;cursor:pointer;}
.mtt-rating.is-voted{opacity:.85;cursor:pointer;}
.mtt-rating-val{font-weight:700;}
.mtt-rating-star{opacity:.95;}
.mtt-rating-cnt{opacity:.7;font-size:12px;}

.mtt-stars{display:flex;gap:8px;justify-content:center;margin:10px 0 6px;}
.mtt-star{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:inherit;font-size:20px;cursor:pointer;}
.mtt-star.on{background:rgba(255,255,255,.18);}
.mtt-star:disabled{opacity:.5;cursor:default;}

.mtt-btn-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}


/* Home: coffee vs self-understanding box */
.mtt-cta-compare{overflow:hidden}

/* compact, symmetric compare */
.mtt-coffee2{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.mtt-coffee2-col{padding:10px 12px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:rgba(255,255,255,.65)}
.mtt-coffee2-top{display:flex;align-items:center;gap:10px}
.mtt-coffee2-ic{font-size:22px;line-height:1}
.mtt-coffee2-title{font-weight:800;font-size:14px;letter-spacing:.1px}
.mtt-coffee2-sub{margin-top:6px;font-size:12.5px;opacity:.78;line-height:1.35}
.mtt-coffee2-vs{width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.12);font-weight:800;font-size:12px;opacity:.9;background:rgba(255,255,255,.55)}

@media (max-width:560px){
  .mtt-coffee2{grid-template-columns:1fr;}
  .mtt-coffee2-vs{justify-self:center}
}

/* Results: overview chart */
.mtt-chart{display:flex;flex-direction:column;gap:10px}
.mtt-chart-row{display:grid;grid-template-columns:minmax(120px,1fr) 2.3fr 52px;gap:10px;align-items:center}
.mtt-chart-label{font-size:13px;opacity:.9}
.mtt-chart-bar{height:10px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}
.mtt-chart-fill{height:100%;border-radius:999px;background:var(--c, rgba(0,0,0,.65));width:0;transition:width 900ms cubic-bezier(.2,.9,.2,1),background 200ms ease}
.mtt-chart.is-ready .mtt-chart-fill{width:var(--w)}
.mtt-chart-val{font-variant-numeric:tabular-nums;text-align:right;font-size:13px;opacity:.85}

.mtt-subcard{margin-top:14px;padding:14px;border:1px solid rgba(0,0,0,.08);border-radius:16px;background:rgba(255,255,255,.7)}
.mtt-report{line-height:1.55}
.mtt-report h2{margin:10px 0 6px;font-size:18px}
.mtt-report h3{margin:8px 0 6px;font-size:15px}

/* Make generated report more compact (fix huge gaps between bullet blocks) */
.mtt-report ul.mtt-ul-square > li,
.mtt-report ul.mtt-ul-hollow > li,
.mtt-report ul.mtt-ul-arrow  > li,
.mtt-report ul.mtt-ul-check  > li,
.mtt-report ul.mtt-ul-dash   > li,
.mtt-report ol.mtt-ol > li{margin:4px 0}
.mtt-report .mtt-p{margin:6px 0}

/* Subtle entrance animation */
@keyframes mttFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.mtt-scale-card,.mtt-subcard{animation:mttFadeUp .35s ease both}

/* (consultation button styled as standard .mtt-btn — see above) */


.mtt-scale-card{opacity:0;transform:translateY(6px);transition:opacity 500ms ease,transform 500ms ease}
.mtt-scale-card.is-in{opacity:1;transform:translateY(0)}

/* Force readable headings/text in results report (multi-layer for theme override safety) */
.mtt-wrap .mtt-report, .mtt-wrap .mtt-report *{color:#111 !important;}
.mtt-wrap .mtt-report a{color:#0b57d0 !important;}
.mtt-wrap .mtt-report h1,.mtt-wrap .mtt-report h2,.mtt-wrap .mtt-report h3,.mtt-wrap .mtt-report h4,.mtt-wrap .mtt-report summary{color:#111 !important;background:transparent !important;}
/* Extra specificity for themes that use .entry-content h2 {color:white} */
.murpsy-trait-test .mtt-wrap .mtt-report h1,
.murpsy-trait-test .mtt-wrap .mtt-report h2,
.murpsy-trait-test .mtt-wrap .mtt-report h3,
.murpsy-trait-test .mtt-wrap .mtt-report h4{color:#111 !important;background:transparent !important;}

/* ── Coffee animation block ── */
@keyframes mttCoffeeBob{0%,100%{transform:translateY(0)}45%,55%{transform:translateY(-7px)}}
@keyframes mttBrainPulse{0%,100%{transform:scale(1)}45%,55%{transform:scale(1.14)}}
.mtt-coffee-anim{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.mtt-coffee-col{text-align:center;padding:10px 4px}
.mtt-coffee-ic{font-size:30px;line-height:1;display:inline-block;margin-bottom:6px}
.mtt-coffee-col-left .mtt-coffee-ic{animation:mttCoffeeBob 2.6s ease-in-out infinite}
.mtt-coffee-col-right .mtt-coffee-ic{animation:mttBrainPulse 2.6s ease-in-out infinite 0.5s}
.mtt-coffee-label{font-weight:700;font-size:13px}
.mtt-coffee-desc{font-size:12px;opacity:.68;margin-top:3px;line-height:1.35}
.mtt-coffee-mid{text-align:center}
.mtt-coffee-vs{width:36px;height:36px;border-radius:50%;border:2px solid #000;box-shadow:2px 2px 0 #000;font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;margin:0 auto 4px}
.mtt-coffee-tag{font-size:11px;opacity:.6;font-weight:700}
@media(max-width:520px){.mtt-coffee-anim{grid-template-columns:1fr}.mtt-coffee-mid{margin:4px 0}}

/* ── Report detail body weight ── */
.mtt-details-body .mtt-h3{font-weight:700;margin-top:14px}
.mtt-details-body .mtt-p{font-weight:300}

/* ── Muted text thin ── */
.mtt-muted{font-weight:300}
.mtt-brief{font-weight:300}