/* ============================================================
   AI ADOPTION READINESS ASSESSMENT — PAGE STYLES
   Built on top of /assets/voe-theme.css design tokens.
   ============================================================ */

.assessment-main{padding:150px 0 100px;}
.assessment-main .wrap{max-width:860px;}

/* ---------- Attribution strip ---------- */
.attribution-strip{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-bottom:28px;
}
.attribution-pill{
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--line); border-radius:100px;
  padding:6px 14px; font-weight:600;
}

/* ---------- Intro screen ---------- */
#intro-screen h1{font-size:clamp(34px,5vw,54px); line-height:1.1; margin-bottom:18px;}
#intro-screen .sub{font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--gold-bright); margin-bottom:22px;}
#intro-screen p.desc{color:var(--grey); font-size:16.5px; line-height:1.85; max-width:680px; margin-bottom:34px;}
.ladder-preview{
  display:flex; gap:8px; margin:36px 0 40px; flex-wrap:wrap;
}
.ladder-chip{
  flex:1; min-width:110px;
  border:1px solid var(--line); border-radius:12px; padding:14px 12px;
  text-align:center; background:var(--glass);
}
.ladder-chip .num{font-family:var(--font-display); color:var(--gold); font-size:13px; display:block; margin-bottom:6px;}
.ladder-chip .name{font-size:13px; font-weight:600; color:var(--off-white);}
.context-note{
  border-left:2px solid var(--gold); padding:16px 22px; background:var(--glass);
  color:var(--grey); font-size:14.5px; line-height:1.8; margin-bottom:40px; border-radius:0 10px 10px 0;
}

/* ---------- Assessment / question screen ---------- */
#assessment-screen{display:none;}
.progress-wrap{margin-bottom:40px;}
.progress-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12.5px; color:var(--grey); margin-bottom:10px; letter-spacing:0.03em;
}
.progress-meta .cat-tag{color:var(--gold); font-weight:600; text-transform:uppercase; letter-spacing:0.08em; font-size:11px;}
.progress-track{
  height:6px; border-radius:100px; background:rgba(255,255,255,0.06); overflow:hidden;
}
.progress-fill{
  height:100%; border-radius:100px; background:linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transition:width 0.5s var(--ease); width:0%;
}
.question-card h2{font-size:clamp(24px,3.4vw,32px); line-height:1.3; margin-bottom:28px;}
.options-list{display:flex; flex-direction:column; gap:12px; margin-bottom:40px;}
.option-btn{
  display:flex; align-items:center; gap:16px;
  text-align:left; width:100%;
  border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  background:var(--glass); color:var(--off-white);
  font-size:15px; line-height:1.5;
  transition:border-color 0.25s, background 0.25s, transform 0.2s;
  cursor:pointer;
}
.option-btn:hover{border-color:var(--gold); background:rgba(201,162,75,0.06);}
.option-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.option-btn.selected{border-color:var(--gold); background:rgba(201,162,75,0.12);}
.option-radio{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.option-btn.selected .option-radio{border-color:var(--gold);}
.option-radio .dot{width:11px; height:11px; border-radius:50%; background:var(--gold); opacity:0; transition:opacity 0.2s;}
.option-btn.selected .option-radio .dot{opacity:1;}
.assess-nav{display:flex; justify-content:space-between; align-items:center; gap:16px;}
.assess-nav .btn:disabled{opacity:0.35; cursor:not-allowed; transform:none;}

/* ---------- Results screen ---------- */
#results-screen{display:none;}
.results-head{margin-bottom:44px;}
.results-head .level-name{
  font-family:var(--font-display); font-size:clamp(32px,5vw,46px); margin-top:10px;
}
.results-head p.result-desc{color:var(--grey); font-size:16px; line-height:1.8; margin-top:16px; max-width:680px;}

/* Ladder visual */
.ladder-visual{
  display:flex; gap:6px; margin:36px 0 48px; flex-wrap:wrap;
}
.ladder-step{
  flex:1; min-width:100px; text-align:center; padding:18px 10px;
  border:1px solid var(--line); border-radius:12px; background:var(--glass);
  position:relative;
}
.ladder-step .step-num{font-family:var(--font-display); font-size:12px; color:var(--grey-dim); display:block; margin-bottom:8px;}
.ladder-step .step-name{font-size:13px; font-weight:700; color:var(--grey);}
.ladder-step.active{
  border-color:var(--gold); background:linear-gradient(160deg, rgba(201,162,75,0.18), rgba(201,162,75,0.04));
  transform:translateY(-6px);
  box-shadow:0 14px 30px -14px rgba(201,162,75,0.5);
}
.ladder-step.active .step-num{color:var(--gold);}
.ladder-step.active .step-name{color:var(--off-white);}
.ladder-step.passed{border-color:rgba(201,162,75,0.4);}
.ladder-step .you-badge{
  display:none; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:var(--black); font-size:10px; font-weight:800;
  letter-spacing:0.06em; padding:3px 10px; border-radius:100px; text-transform:uppercase;
}
.ladder-step.active .you-badge{display:block;}

/* Section blocks */
.results-section{margin-bottom:52px;}
.results-section h3{font-size:22px; margin-bottom:20px;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
@media (max-width:720px){ .two-col{grid-template-columns:1fr;} }
.pill-list{list-style:none; display:flex; flex-direction:column; gap:12px;}
.pill-list li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:14.5px; line-height:1.7; color:var(--grey);
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--glass);
}
.pill-list.strengths li::before{content:'✓'; color:var(--gold); font-weight:800; flex-shrink:0;}
.pill-list.gaps li::before{content:'!'; color:var(--gold-bright); font-weight:800; flex-shrink:0;}

/* Opportunity area grid */
.opportunity-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:820px){ .opportunity-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .opportunity-grid{grid-template-columns:1fr;} }
.opp-card{border:1px solid var(--line); border-radius:14px; padding:18px; background:var(--glass);}
.opp-card .opp-name{font-size:14px; font-weight:700; margin-bottom:10px; color:var(--off-white);}
.opp-bar-track{height:6px; border-radius:100px; background:rgba(255,255,255,0.06); overflow:hidden; margin-bottom:8px;}
.opp-bar-fill{height:100%; border-radius:100px; background:linear-gradient(90deg, var(--gold-deep), var(--gold-bright));}
.opp-card .opp-level{font-size:12px; color:var(--grey);}

/* Next steps */
.steps-list{display:flex; flex-direction:column; gap:14px;}
.steps-list li{
  display:flex; gap:16px; align-items:flex-start;
  border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:var(--glass);
  font-size:14.5px; line-height:1.7; color:var(--grey);
}
.steps-list .step-index{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--gold);
  color:var(--black); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center;
}

/* Roadmap */
.roadmap-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:900px){ .roadmap-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .roadmap-grid{grid-template-columns:1fr;} }
.roadmap-card{border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--glass);}
.roadmap-card .rm-days{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:6px;}
.roadmap-card h4{font-family:var(--font-display); font-size:17px; margin-bottom:10px; color:var(--off-white);}
.roadmap-card p{font-size:13.5px; color:var(--grey); line-height:1.7;}

/* Responsible AI */
.responsible-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media (max-width:640px){ .responsible-grid{grid-template-columns:1fr;} }
.responsible-item{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--glass);
  font-size:13.5px; line-height:1.65; color:var(--grey);
}
.responsible-item svg{flex-shrink:0; width:18px; height:18px; color:var(--gold); margin-top:2px;}

/* Result actions */
.result-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:20px;}

/* Print styles for "Download Results" */
@media print{
  header, footer, .assess-nav, .result-actions, .wa-float, #loader{display:none !important;}
  body{background:#fff !important; color:#111 !important;}
  .assessment-main{padding:20px 0 !important;}
  .ladder-step, .pill-list li, .opp-card, .steps-list li, .roadmap-card, .responsible-item, .context-note{
    background:#fff !important; border-color:#ccc !important; color:#222 !important;
  }
  h1,h2,h3,h4,.level-name,.step-name{color:#111 !important;}
}

/* Accessibility: focus states */
a:focus-visible, button:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}