body { background: var(--surface, #f8f8f7) !important; }

/* ============================================================
   /styles/tools.css
   Shared styles for ALL assessment tool pages.
   Included via $extra_head in header_public.php.
   Do NOT duplicate these styles in individual tool files.
   ============================================================ */

/* Tool-specific CSS variables (extend site variables) */
:root {
  --primary:      #2563EB;
  --primary-dark: #1A47C0;
}

/* Tool pages use surface background */
body { background: var(--surface); }

/* ── Layout ─────────────────────────────────────────────── */
main { flex: 1; }

.page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2rem);
}

.intro-wrap   { max-width: 800px; }
.results-wrap { width: 100%; }

/* ── Progress dots ──────────────────────────────────────── */
.ell-progress { display:flex; align-items:center; gap:8px; font-size:12px; color:#555; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
.ell-dots     { display:flex; gap:5px; }
.ell-dot      { width:8px; height:8px; background:#ddd; transition:background 0.2s; border-radius:50%; }
.ell-dot.done   { background:var(--primary); }
.ell-dot.active { background:var(--primary); opacity:0.5; }

/* ── Intro ──────────────────────────────────────────────── */
.intro-eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.16em; color:var(--primary); margin-bottom:12px; }
.intro-title   { font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.6rem); font-weight:400; color:var(--navy); line-height:1.15; margin-bottom:16px; }
.intro-body    { font-size:1rem; color:var(--text-secondary); line-height:1.75; margin-bottom:24px; }
.intro-meta    { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:28px; }
.intro-meta-item { font-size:12px; font-weight:600; color:#555; display:flex; align-items:center; gap:6px; }
.intro-meta-item::before { content:""; width:5px; height:5px; background:var(--primary); display:block; flex-shrink:0; }
.intro-instructions { background:var(--white); border:1px solid var(--border); border-left:3px solid var(--primary); padding:16px 20px; margin-bottom:28px; }
.intro-instructions h3 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--navy); margin-bottom:10px; }
.intro-instructions ul { list-style:none; display:flex; flex-direction:column; gap:7px; }
.intro-instructions li { font-size:13px; color:#444; padding-left:14px; position:relative; line-height:1.55; }
.intro-instructions li::before { content:""; position:absolute; left:0; top:7px; width:4px; height:4px; background:var(--primary); }

/* ── Buttons ────────────────────────────────────────────── */
.btn         { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; padding:12px 28px; transition:all 0.15s; cursor:pointer; border:none; font-family:var(--font); }
.btn-primary { background:var(--navy); color:#fff; }
.btn-primary:hover { background:#131e35; }
.btn-ghost   { background:none; color:var(--text-secondary); border:1px solid var(--border); }
.btn-ghost:hover { border-color:#999; color:var(--text); }

/* ── Prediction sliders ──────────────────────────────────── */
.predict-intro { font-size:14px; color:var(--text-secondary); line-height:1.7; margin-bottom:1.5rem; padding:14px 18px; background:var(--white); border:1px solid var(--border); border-left:3px solid var(--primary); }
.predict-block { background:var(--white); border:1px solid var(--border); padding:20px; margin-bottom:12px; }
.predict-block-title { font-size:13px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.predict-block-desc  { font-size:12px; color:#777; line-height:1.55; margin-bottom:14px; }
.slider-wrap { padding:4px 0 8px; }
.slider-wrap input[type=range] { width:100%; accent-color:var(--primary); cursor:pointer; }
.slider-labels { display:flex; justify-content:space-between; font-size:10px; color:#aaa; margin-top:3px; }
.slider-val    { display:inline-block; font-size:1.6rem; font-weight:900; color:var(--primary); min-width:48px; text-align:center; }
.predict-overall { background:var(--navy); color:#fff; border:none; padding:20px; margin-bottom:12px; }
.predict-overall .predict-block-title { color:#fff; font-size:14px; }
.predict-overall .predict-block-desc  { color:rgba(255,255,255,0.65); }
.predict-overall .slider-labels       { color:rgba(255,255,255,0.4); }
.predict-overall input[type=range]    { accent-color:#93c5fd; }
.predict-overall .slider-val          { color:#93c5fd; font-size:2rem; }

/* ── Progress bar ───────────────────────────────────────── */
.progress-bar-wrap { margin-bottom:2rem; }
.progress-labels   { display:flex; justify-content:space-between; font-size:11px; color:#aaa; margin-bottom:6px; }
.progress-track    { height:3px; background:#e5e7eb; }
.progress-fill     { height:3px; background:var(--primary); transition:width 0.3s; }

/* ── Section labels ─────────────────────────────────────── */
.section-eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:var(--primary); margin-bottom:6px; }
.section-title   { font-family:var(--font-display); font-size:clamp(1.2rem,2.5vw,1.6rem); font-weight:400; color:var(--navy); margin-bottom:20px; line-height:1.25; }

/* ── Question block ─────────────────────────────────────── */
.question-block { background:var(--white); border:1px solid var(--border); padding:clamp(1.25rem,3vw,2rem); margin-bottom:1rem; }
.question-num   { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:#aaa; margin-bottom:8px; }
.question-text  { font-size:1rem; font-weight:600; color:var(--text); line-height:1.5; margin-bottom:16px; }
.options        { display:flex; flex-direction:column; gap:8px; }
.option         { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border:1px solid var(--border); background:#fafafa; cursor:pointer; transition:all 0.15s; text-align:left; width:100%; font-family:var(--font); }
.option:hover         { border-color:var(--primary); background:rgba(37,99,235,0.03); }
.option.selected      { border-color:var(--primary); background:rgba(37,99,235,0.06); }
.option-marker        { width:20px; height:20px; border:2px solid #ddd; border-radius:50%; flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.option.selected .option-marker { border-color:var(--primary); background:var(--primary); }
.option.selected .option-marker::after { content:""; width:6px; height:6px; background:#fff; border-radius:50%; }
.option-text    { font-size:13.5px; color:#333; line-height:1.5; }
.nav-row        { display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem; gap:1rem; }

/* ── Results ────────────────────────────────────────────── */
.overall-block       { background:var(--navy); color:#fff; padding:clamp(1.5rem,4vw,2.5rem); margin-bottom:2rem; }
.overall-eyebrow     { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.16em; color:rgba(255,255,255,0.6); margin-bottom:8px; }
.overall-score-num   { font-size:clamp(3rem,8vw,5rem); font-weight:900; color:#fff; line-height:1; }
.overall-score-denom { font-size:1.5rem; color:rgba(255,255,255,0.5); font-weight:400; }
.profile-label,
.profile-badge       { display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; background:rgba(255,255,255,0.12); color:#fff; padding:5px 14px; margin-top:10px; }
.overall-summary     { font-size:13px; color:rgba(255,255,255,0.75); margin-top:10px; line-height:1.6; max-width:560px; }

.score-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:2rem; }
@media(max-width:640px){ .score-cards { grid-template-columns:1fr; } }
.score-card  { background:var(--white); border:1px solid var(--border); padding:20px; }
.sc-domain   { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--navy); margin-bottom:10px; }
.sc-bar-wrap { height:4px; background:#e5e7eb; margin-bottom:10px; }
.sc-bar      { height:4px; background:var(--primary); }
.sc-score    { font-size:1.4rem; font-weight:800; color:var(--primary); }
.sc-label    { font-size:11px; color:#888; margin-left:4px; }
.sc-profile  { font-size:12px; font-weight:600; color:var(--text-secondary); margin-top:4px; }
.sc-summary  { font-size:12px; color:var(--text-secondary); margin-top:6px; line-height:1.55; }

.gaps-section    { margin-bottom:2rem; }
.gap-card        { background:var(--white); border:1px solid var(--border); border-left:3px solid var(--primary); padding:20px; margin-bottom:1rem; }
.gap-card-domain { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--primary); margin-bottom:6px; }
.gap-card-title  { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
.gap-card-body   { font-size:13.5px; color:var(--text-secondary); line-height:1.7; }
.rec-list        { list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.rec-list li     { font-size:13px; color:#333; padding-left:16px; position:relative; line-height:1.6; }
.rec-list li::before { content:""; position:absolute; left:0; top:7px; width:5px; height:5px; background:var(--primary); }

/* ── Perception / prediction vs reality ─────────────────── */
.perception-section { background:var(--white); border:1px solid var(--border); padding:clamp(1.25rem,3vw,2rem); margin-bottom:2rem; }
.chart-wrap   { display:grid; grid-template-columns:1fr !important; gap:1.5rem 2rem; margin:1.5rem 0; }
.chart-legend { display:flex; gap:20px; margin-bottom:12px; flex-wrap:wrap; }
.legend-item  { display:flex; align-items:center; gap:6px; font-size:12px; color:#555; font-weight:600; }
.legend-dot   { width:12px; height:12px; flex-shrink:0; }
.chart-row    { margin-bottom:0; }
.chart-row-label { font-size:12px; font-weight:600; color:var(--navy); margin-bottom:5px; margin-top:18px; display:flex; justify-content:space-between; }
.chart-row-label span { font-weight:400; color:#888; font-size:11px; }
.chart-bars   { display:flex; flex-direction:column; gap:4px; }
@media(max-width:700px){ .chart-wrap { grid-template-columns:1fr; } }
.chart-bar-row   { display:flex; align-items:center; gap:8px; }
.chart-bar-label { font-size:10px; color:#888; width:60px; flex-shrink:0; text-align:right; }
.chart-bar-track { flex:1; height:18px; background:#f0f0ef; position:relative; }
.chart-bar-fill  { height:100%; transition:width 0.6s ease; display:flex; align-items:center; justify-content:flex-end; padding-right:6px; }
.chart-bar-fill span { font-size:10px; font-weight:700; color:#fff; }
/* v1 bar classes */
.chart-bar-predicted   { background:#94a3b8; }
.chart-bar-actual-good { background:#2563EB; }
.chart-bar-actual-mid  { background:#d97706; }
.chart-bar-actual-low  { background:#b42318; }
/* v2 bar classes */
.pvr-predicted { background:#94a3b8; }
.pvr-good      { background:#2563EB; }
.pvr-mid       { background:#d97706; }
.pvr-low       { background:#b42318; }

.perception-insight { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.insight-row      { padding:10px 14px; font-size:12px; line-height:1.65; border-left:3px solid #ddd; margin-bottom:6px; }
.insight-accurate { border-left-color:#166534; background:#f0fdf4; color:#166534; }
.insight-over     { border-left-color:#d97706; background:#fef3c7; color:#92400e; }
.insight-under    { border-left-color:#2563EB; background:#eff6ff; color:#1e40af; }
.insight-overall  { border-left-color:var(--navy); background:#f8f8f7; color:var(--navy); font-weight:600; }

/* ── CTA block ──────────────────────────────────────────── */
.cta-block   { background:var(--white); border:1px solid var(--border); padding:clamp(1.5rem,4vw,2.5rem); text-align:center; margin-bottom:2rem; }
.cta-title   { font-family:var(--font-display); font-size:clamp(1.2rem,2.5vw,1.6rem); color:var(--navy); margin-bottom:8px; }
.cta-body    { font-size:14px; color:var(--text-secondary); margin-bottom:20px; line-height:1.65; max-width:600px; margin-left:auto; margin-right:auto; }
.cta-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── Tool title bar ─────────────────────────────────────── */
.tool-title-bar   { background:var(--white); border-bottom:1px solid var(--border); }
.tool-title-inner { max-width:1200px; margin:0 auto; padding:1.1rem clamp(1rem,3vw,2rem); display:flex; flex-direction:column; gap:2px; }
.tool-title-eyebrow { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.18em; color:var(--primary); }
.tool-title-name    { font-family:var(--font-display); font-size:clamp(1.25rem,2.5vw,1.75rem); font-weight:400; color:var(--navy); line-height:1.2; }

/* ── Tool inline extractions (formerly inline style= attributes) ─── */
.tool-slider-row           { display:flex; align-items:center; gap:16px; }
.tool-range-primary        { flex:1; accent-color:var(--primary); cursor:pointer; }
.tool-range-overall        { flex:1; accent-color:#93c5fd; cursor:pointer; }
.tool-slider-val-overall   { color:#93c5fd; font-size:2rem; min-width:48px; text-align:center; font-weight:900; display:inline-block; }
.tool-slider-labels-overall { color:rgba(255,255,255,0.4); display:flex; justify-content:space-between; font-size:10px; margin-top:3px; }
.predict-title             { font-family:var(--font-display); font-size:clamp(1.4rem,3vw,1.9rem); font-weight:400; color:var(--navy); margin-bottom:12px; line-height:1.2; }
.predict-domains-eyebrow   { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:#888; margin:20px 0 12px; }
.question-section-header   { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.btn-disabled              { opacity:0.4; cursor:not-allowed; }
.perception-subtitle       { font-size:13px; color:#888; margin-bottom:1.5rem; }
.chart-row-label-overall   { font-size:13px; font-weight:700; color:var(--navy); }
.chart-divider             { height:1px; background:var(--border); margin:14px 0 14px 68px; }
.awareness-box             { background:var(--navy); color:#fff; padding:14px 18px; margin-bottom:12px; }
.awareness-box-eyebrow     { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:rgba(255,255,255,0.5); margin-bottom:4px; }
.awareness-box-text        { font-size:13px; line-height:1.65; }