/* ============================================================
   HEY WORKSHOP · quiz engine styles
   Self-contained: carries the site tokens so quiz pages work
   without index.html. Class names are hw- prefixed.
   ============================================================ */
:root{
  --cream:#F8F4EB;
  --cream-2:#FCF9F2;
  --ink:#16161A;
  --ink-soft:#43444C;
  --ink-faint:#6b6c75;

  --periwinkle:#6D83BD;
  --peri-deep:#46589E;
  --peri-royal:#3B4FA0;
  --lightblue:#A3C6DA;

  --hl-blue:#9CC8EC;
  --hl-peri:#A6B2E6;
  --hl-lav:#DDC7F2;
  --hl-mint:#B6ECC9;
  --hl-pink:#F7C9DE;
  --hl-lime:#CFF36B;
  --danger:#E14B3D;

  --maxw:760px;
  --gut:clamp(20px,5vw,64px);

  --sans:'Montserrat',system-ui,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --script:'Playfair Display',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --shadow:0 40px 120px -40px rgba(40,46,90,.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
:focus-visible{outline:2.5px solid var(--peri-royal);outline-offset:3px;border-radius:4px}
body.hw-quizpage{
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 80% -10%, #5b6bb0 0%, transparent 55%),
    radial-gradient(1000px 700px at 0% 30%, #7e8cc6 0%, transparent 50%),
    #2c3568;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---- floating sheet ---- */
.hw-sheet{
  position:relative;
  margin:0 auto;
  max-width:1060px;
  min-height:100svh;
  background:var(--cream);
  border-radius:34px 34px 0 0;
  box-shadow:var(--shadow);
  overflow:clip;
  display:flex;
  flex-direction:column;
}
@media (max-width:640px){ .hw-sheet{border-radius:22px 22px 0 0} }

/* ---- top bar ---- */
.hw-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut) 6px;
}
.hw-top img{height:30px;width:auto}
.hw-top .hw-toplink{
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--peri-deep);background:rgba(109,131,189,.12);
  padding:9px 15px;border-radius:30px;transition:background .25s,color .25s;
}
.hw-top .hw-toplink:hover{background:var(--peri-royal);color:#fff}

/* ---- shared type ---- */
.hw-kicker{
  font-family:var(--mono);font-weight:500;text-transform:uppercase;
  letter-spacing:.24em;font-size:.7rem;color:var(--ink-soft);
}
.hw-eyebrow{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(.9rem,1.4vw,1.05rem);letter-spacing:.02em;color:var(--peri-deep);
}
.hw-serif{
  font-family:var(--serif);font-size:clamp(1.05rem,1.45vw,1.22rem);
  line-height:1.62;color:var(--ink-soft);
}
.hw-serif p+p{margin-top:1.05em}
.hw-display{
  font-family:var(--sans);font-weight:800;line-height:1.04;letter-spacing:-.02em;
  text-wrap:balance;
}

/* marker highlight (static, pre-wiped) */
.hw-mk{
  background-image:linear-gradient(var(--mkc,var(--hl-lime)),var(--mkc,var(--hl-lime)));
  background-repeat:no-repeat;background-position:0 82%;background-size:100% 42%;
  padding:0 .06em;border-radius:2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* buttons (match index.html .btn family) */
.hw-btn{
  font-family:var(--sans);font-weight:700;font-size:1rem;cursor:pointer;border:none;
  padding:18px 30px;border-radius:40px;display:inline-flex;align-items:center;gap:10px;
  transition:transform .25s cubic-bezier(.2,1.2,.4,1),box-shadow .25s,background .25s,color .25s;
}
.hw-btn-primary{background:var(--peri-royal);color:#fff;box-shadow:0 20px 44px -20px rgba(20,20,40,.7)}
.hw-btn-primary:hover{transform:translateY(-3px) scale(1.02);background:var(--hl-lime);color:var(--ink)}
.hw-btn-ghost{background:transparent;color:var(--ink);border:1.6px solid rgba(20,20,30,.25)}
.hw-btn-ghost:hover{transform:translateY(-3px);border-color:var(--ink)}

/* ---- app column ---- */
.hw-app{
  width:100%;max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(28px,5vw,56px) var(--gut) clamp(70px,9vw,120px);
  flex:1;
}

/* screens fade/slide */
.hw-screen{animation:hwIn .5s cubic-bezier(.16,.8,.3,1) both}
@keyframes hwIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hw-screen{animation:none}
  .hw-btn,.hw-choice{transition:none}
}

/* ---- intro ---- */
.hw-intro .hw-kicker{display:block;margin-bottom:1.4rem}
.hw-intro h1{font-size:clamp(2.3rem,6.4vw,4.1rem);margin:.1em 0 .35em}
.hw-intro .hw-serif{max-width:52ch}
.hw-intro .hw-cta{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hw-meta{
  margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:8px 22px;
  font-family:var(--serif);font-style:italic;color:var(--ink-soft);font-size:.95rem;
}
.hw-meta b{color:var(--peri-deep);font-style:normal;font-family:var(--sans);font-weight:700}

/* ---- progress ---- */
.hw-progress{margin-bottom:2rem}
.hw-progress .hw-kicker{display:block;margin-bottom:10px}
.hw-bar{height:5px;border-radius:6px;background:rgba(70,88,158,.14);overflow:hidden}
.hw-bar i{display:block;height:100%;width:0;border-radius:6px;background:var(--peri-royal);transition:width .45s cubic-bezier(.16,.8,.3,1)}

/* ---- question ---- */
.hw-q{font-size:clamp(1.5rem,3.6vw,2.15rem);margin-bottom:1.6rem;outline:none}
.hw-choices{display:grid;gap:12px}
.hw-choice{
  display:flex;align-items:flex-start;gap:14px;text-align:left;width:100%;cursor:pointer;
  background:var(--cream-2);border:1.6px solid rgba(70,88,158,.18);border-radius:16px;
  padding:16px 18px;
  font-family:var(--serif);font-size:1.05rem;line-height:1.5;color:var(--ink);
  transition:transform .2s cubic-bezier(.2,1.2,.4,1),border-color .2s,background .2s,box-shadow .2s;
}
.hw-choice:hover{transform:translateY(-2px);border-color:var(--peri-royal);background:#fff;box-shadow:0 14px 34px -18px rgba(40,46,90,.35)}
.hw-choice .hw-letter{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;margin-top:1px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.72rem;font-weight:700;
  background:rgba(109,131,189,.16);color:var(--peri-deep);
  transition:background .2s,color .2s;
}
.hw-choice:hover .hw-letter{background:var(--peri-royal);color:#fff}
.hw-choice.hw-picked{border-color:var(--peri-royal);background:#fff}
.hw-choice.hw-picked .hw-letter{background:var(--hl-lime);color:var(--ink)}
.hw-backrow{margin-top:1.6rem}
.hw-back{
  background:none;border:none;cursor:pointer;
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);padding:6px 2px;
}
.hw-back:hover{color:var(--ink)}

/* ---- gate ---- */
.hw-gate h2{font-size:clamp(1.9rem,4.6vw,2.8rem);margin-bottom:.5em}
.hw-gate .hw-serif{max-width:48ch}
.hw-form{margin-top:1.9rem;display:grid;gap:12px;max-width:460px}
.hw-input{
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:#fff;border:1.6px solid rgba(70,88,158,.25);border-radius:14px;
  padding:16px 18px;width:100%;
}
.hw-input::placeholder{color:var(--ink-faint)}
.hw-input:focus{border-color:var(--peri-royal);outline:none}
.hw-input.hw-bad{border-color:var(--danger)}
.hw-err{font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--danger);display:none}
.hw-err.hw-show{display:block}
.hw-privacy{
  margin-top:1.1rem;font-family:var(--serif);font-style:italic;
  font-size:.92rem;color:var(--ink-faint);max-width:46ch;
}
/* honeypot: hidden from humans, present for bots */
.hw-field-website{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.hw-btn[disabled]{opacity:.55;cursor:wait;transform:none!important}

/* ---- result ---- */
.hw-result .hw-kicker{display:block;margin-bottom:1.2rem}
.hw-youare{
  font-family:var(--script);font-style:italic;font-weight:500;
  font-size:clamp(1.15rem,2.4vw,1.5rem);color:var(--peri-deep);display:block;margin-bottom:.15em;
}
.hw-band{font-size:clamp(2.4rem,6.8vw,4.3rem);margin-bottom:.35em}
.hw-tagline{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.12rem,2vw,1.35rem);
  line-height:1.5;color:var(--ink-soft);max-width:52ch;
}
.hw-scoreline{
  display:inline-flex;align-items:center;gap:8px;margin-top:1.2rem;
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(109,131,189,.12);color:var(--peri-deep);padding:8px 14px;border-radius:30px;
}
.hw-inboxnote{
  display:inline-flex;align-items:center;gap:8px;margin-top:1.2rem;margin-left:8px;
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(182,236,201,.5);color:#2c6b45;padding:8px 14px;border-radius:30px;
}
.hw-overridenote{
  margin-top:1.4rem;font-family:var(--serif);font-style:italic;font-size:.98rem;line-height:1.55;
  color:var(--ink-soft);border-left:3px solid var(--hl-lime);padding-left:14px;max-width:52ch;
}
.hw-rsec{margin-top:clamp(2.6rem,5vw,3.6rem)}
.hw-rsec .hw-kicker{display:block;margin-bottom:1rem;color:var(--peri-deep)}
.hw-moves{display:grid;gap:14px;counter-reset:hwmove}
.hw-move{
  background:var(--cream-2);border:1.6px solid rgba(70,88,158,.16);border-radius:18px;
  padding:20px 22px;display:flex;gap:16px;align-items:flex-start;
}
.hw-move .hw-num{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:.8rem;
  background:var(--hl-lime);color:var(--ink);margin-top:2px;
}
.hw-move h4{font-family:var(--sans);font-weight:800;font-size:1.04rem;letter-spacing:-.01em;margin-bottom:.35em}
.hw-move p{font-family:var(--serif);font-size:1.02rem;line-height:1.58;color:var(--ink-soft)}
.hw-trap{
  background:linear-gradient(180deg,#f8e2ec 0%,#f9eef3 100%);
  border-radius:18px;padding:22px 24px;
}
.hw-trap p{font-family:var(--serif);font-size:1.04rem;line-height:1.6;color:var(--ink-soft)}
.hw-trap p+p{margin-top:.9em}
.hw-tool{
  background:linear-gradient(180deg,#dff1e6 0%,#eef7f0 100%);
  border-radius:18px;padding:24px;
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
}
.hw-tool .hw-toolcopy{flex:1 1 320px}
.hw-tool h4{font-family:var(--sans);font-weight:800;font-size:1.2rem;margin-bottom:.3em}
.hw-tool p{font-family:var(--serif);font-size:1rem;line-height:1.55;color:var(--ink-soft)}
.hw-tool .hw-filemeta{
  display:block;margin-top:.7em;font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#2c6b45;
}
.hw-next p{font-family:var(--serif);font-size:1.06rem;line-height:1.6;color:var(--ink-soft);max-width:56ch}
.hw-next a{color:var(--peri-deep);font-weight:600;text-decoration:underline;text-decoration-color:var(--hl-lime);text-decoration-thickness:3px;text-underline-offset:3px}
.hw-endrow{margin-top:clamp(2.6rem,5vw,3.4rem);display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---- v2 results layer: mirror, scorecard, verdict, widgets ---- */
.hw-mirror{
  margin-top:1.1rem;font-family:var(--serif);font-style:italic;
  font-size:1.04rem;line-height:1.55;color:var(--ink-soft);
  border-left:3px solid var(--periwinkle);padding-left:14px;max-width:52ch;
}
.hw-chiprow{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.2rem}
.hw-chiprow .hw-scoreline,.hw-chiprow .hw-inboxnote{margin:0}

.hw-planks{
  margin-top:1.6rem;background:var(--cream-2);
  border:1.6px solid rgba(70,88,158,.16);border-radius:18px;
  padding:20px 22px;
}
.hw-planks > .hw-kicker{display:block;margin-bottom:14px;color:var(--peri-deep)}
.hw-plank{display:flex;align-items:center;gap:12px;padding:6px 0;flex-wrap:wrap}
.hw-plabel{
  flex:0 0 96px;font-family:var(--sans);font-weight:700;font-size:.82rem;
  letter-spacing:.01em;color:var(--ink);
}
.hw-pbar{flex:1 1 140px;height:10px;border-radius:6px;background:rgba(70,88,158,.13);overflow:hidden;min-width:110px}
.hw-pbar i{display:block;height:100%;width:0;border-radius:6px;background:var(--peri-royal);transition:width .7s cubic-bezier(.16,.8,.3,1)}
.hw-pval{flex:0 0 auto;font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--ink-faint);width:30px}
.hw-plank.hw-weak .hw-pbar i{background:var(--danger)}
.hw-weaktag{
  font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  background:var(--hl-pink);color:#8a2f52;padding:3px 9px;border-radius:20px;white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){ .hw-pbar i{transition:none} }

.hw-verdictrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:1.5rem}
.hw-vnote{font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--ink-faint);max-width:32ch}

.hw-startchip{
  display:inline-block;margin-left:10px;vertical-align:2px;
  font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--hl-lime);color:var(--ink);padding:3px 10px;border-radius:20px;white-space:nowrap;
}
.hw-move.hw-start{border-color:var(--peri-royal);box-shadow:0 14px 34px -20px rgba(40,46,90,.35)}

.hw-widget{
  background:linear-gradient(180deg,#ece4f6 0%,#f3eef9 100%);
  border-radius:18px;padding:22px 24px;
}
.hw-wlead{font-family:var(--serif);font-size:1.02rem;line-height:1.55;color:var(--ink-soft);max-width:52ch;margin-bottom:1.1rem}
.hw-wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.hw-wfield{display:block}
.hw-wlabel{
  display:block;margin-bottom:6px;
  font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--peri-deep);
}
.hw-winput{padding:12px 14px;font-size:.95rem}
.hw-wout{
  margin-top:14px;background:#fff;border:1.6px dashed rgba(70,88,158,.35);border-radius:14px;
  padding:16px 18px;font-family:var(--serif);font-size:1.05rem;line-height:1.55;color:var(--ink);
  user-select:all;-webkit-user-select:all;
}
.hw-wout p+p{margin-top:.55em}
.hw-wrow{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hw-copybtn{padding:12px 22px;font-size:.9rem}
.hw-copybtn.hw-copied{background:var(--hl-lime);border-color:var(--hl-lime);color:var(--ink)}
.hw-wfoot{font-family:var(--serif);font-style:italic;font-size:.88rem;color:var(--ink-faint)}

/* ---- mini footer ---- */
.hw-foot{
  padding:26px var(--gut) 34px;border-top:1px solid rgba(70,88,158,.14);
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-family:var(--serif);font-style:italic;font-size:.88rem;color:var(--ink-faint);
}
.hw-foot a:hover{color:var(--ink)}

@media (max-width:520px){
  .hw-btn{width:100%;justify-content:center}
  .hw-endrow .hw-btn{width:auto}
  .hw-tool{padding:20px}
}