/* AI Clarity Engine page. Builds on ../role-redesign/shared.css (tokens, nav,
   buttons, footer) and ../role-redesign/tool-ui.css (.panel). */

.ce-hero{padding:64px 0 28px;text-align:center}
.ce-hero h1{font-size:clamp(32px,5.4vw,52px);font-weight:750;line-height:1.08;letter-spacing:-.01em;margin:16px auto 14px;max-width:820px}
.ce-hero h1 .grad{background:linear-gradient(110deg,var(--teal) 5%,var(--violet) 55%,var(--coral) 105%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ce-hero .lead{color:var(--text-soft);max-width:660px;margin:0 auto;font-size:clamp(17px,2vw,19px)}
.ce-facts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px 0 0;list-style:none}
.ce-facts li{font-size:13.5px;font-weight:600;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--panel-line);border-radius:999px;padding:7px 15px}

.ce-which{display:grid;grid-template-columns:1fr;gap:16px;margin:34px auto 0;max-width:860px;text-align:left}
@media (min-width:720px){.ce-which{grid-template-columns:1fr 1fr}}
.ce-which .box{border:1px solid var(--panel-line);border-radius:16px;padding:18px 20px;background:rgba(255,255,255,.03)}
.ce-which .box.here{border-color:rgba(45,212,191,.55);background:rgba(45,212,191,.07)}
.ce-which .tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:4px 11px;margin-bottom:8px}
.ce-which .here .tag{background:rgba(45,212,191,.16);color:var(--teal)}
.ce-which .other .tag{background:rgba(139,124,248,.16);color:var(--violet)}
.ce-which h2{font-size:18px;margin-bottom:4px}
.ce-which p{font-size:14.5px;color:var(--text-soft)}

.ce-main{padding-bottom:70px}
.ce-wrap{max-width:820px;margin:0 auto;padding:0 24px}
.ce-intro-list{margin:14px 0 0 20px;color:var(--text-soft);font-size:15px}
.ce-intro-list li{margin-top:6px}

.ce-sticky{position:sticky;top:72px;z-index:20;background:rgba(7,9,15,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--panel-line);padding:10px 0;margin:22px 0 0}
.ce-sticky-in{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--text-soft)}
.ce-progress-track{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
#ce-bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--violet));transition:width .2s}

.ce-dim{border:1px solid var(--panel-line);border-radius:20px;padding:24px 22px 8px;margin-top:20px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));min-width:0}
.ce-dim legend{font-family:'Fraunces',Georgia,serif;font-size:21px;font-weight:650;padding:0 8px;margin-left:-8px}
.ce-dim-blurb{color:var(--text-soft);font-size:14.5px;margin-top:2px}
.ce-q{margin:18px 0 22px;padding:12px 14px;border-radius:14px;border:1.5px solid transparent}
.ce-q.ce-missing,.field.ce-missing,.ce-chips.ce-missing,.ce-workrow.ce-missing,.ce-consent.ce-missing{border-color:var(--gold);background:rgba(255,194,75,.07)}
.ce-q-text{font-size:16px;margin-bottom:10px}
.ce-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
@media (max-width:560px){.ce-opts{grid-template-columns:1fr 1fr}}
.ce-opts-2{grid-template-columns:1fr 1fr}
@media (max-width:420px){.ce-opts-2{grid-template-columns:1fr}}
.ce-opt{position:relative;display:block}
.ce-opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.ce-opt label{display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:8px 10px;border:1.5px solid var(--panel-line);border-radius:12px;background:rgba(255,255,255,.03);color:var(--text-soft);font-size:14.5px;font-weight:600;transition:background .15s,border-color .15s,color .15s}
.ce-opt input:hover + label{border-color:var(--teal);color:var(--text)}
.ce-opt input:checked + label{background:linear-gradient(120deg,var(--teal-deep),var(--teal));border-color:var(--teal);color:#04211D}
.ce-opt input:focus-visible + label{outline:3px solid var(--gold);outline-offset:2px}

#ce-actions{margin-top:26px;text-align:center}
.ce-error{color:var(--gold);font-weight:600;margin-bottom:14px}

/* Results */
.ce-results{padding:30px 24px}
@media (min-width:640px){.ce-results{padding:38px 40px}}
.ce-score{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.ce-score-num{font-family:'Fraunces',Georgia,serif;line-height:1;white-space:nowrap}
.ce-score-num .n{font-size:76px;font-weight:750;background:linear-gradient(120deg,var(--teal),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.ce-score-num .of{font-size:22px;color:var(--text-soft)}
.ce-score h2{font-size:clamp(22px,3vw,28px);line-height:1.2}
.ce-score h2:focus{outline:none}
.ce-score h2:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.ce-band-text{color:var(--text-soft);margin-top:8px;max-width:520px}
.ce-cap{margin-top:18px;border:1px solid rgba(255,194,75,.4);background:rgba(255,194,75,.07);border-radius:12px;padding:12px 16px;font-size:14.5px;color:var(--text)}
.ce-block{margin-top:30px;padding:26px 0 0;border-top:1px solid var(--panel-line)}
.ce-block h3{font-size:19px;margin-bottom:14px}
.ce-block h4{font-family:'Inter',sans-serif;font-size:16px;font-weight:700;margin-bottom:6px}
.ce-bars{list-style:none}
.ce-bars li{margin-bottom:14px}
.ce-bar-top{display:flex;justify-content:space-between;gap:12px;font-size:15px;margin-bottom:6px}
.ce-bar-top .nm{font-weight:600}
.lv{font-size:12.5px;font-weight:700;border-radius:999px;padding:2px 10px;white-space:nowrap}
.lv.lv-gap{background:rgba(255,122,92,.15);color:#FF9C84}
.lv.lv-dev{background:rgba(255,194,75,.14);color:var(--gold)}
.lv.lv-strong{background:rgba(45,212,191,.14);color:var(--teal)}
.ce-track{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.ce-fill{height:100%;border-radius:999px}
.ce-fill.lv-gap{background:var(--coral)}
.ce-fill.lv-dev{background:var(--gold)}
.ce-fill.lv-strong{background:var(--teal)}
.ce-list{margin-left:20px;color:var(--text-soft);font-size:15.5px}
.ce-list li{margin-top:8px}
.ce-list a{font-weight:600}
.ce-att{margin-top:14px;border:1px solid var(--panel-line);border-radius:14px;padding:16px 18px;background:rgba(255,255,255,.02)}
.ce-road{list-style:none;counter-reset:s}
.ce-road li{counter-increment:s;position:relative;padding:0 0 18px 46px}
.ce-road li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:rgba(139,124,248,.16);color:var(--violet);font-weight:800;display:flex;align-items:center;justify-content:center}
.ce-road .when{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet)}
.ce-road .what{display:block;color:var(--text-soft);font-size:15.5px;margin-top:2px}
.ce-fine{font-size:13.5px;color:var(--text-mute);margin-top:10px}
.ce-keep-row{display:flex;flex-wrap:wrap;gap:10px}
.ce-keep-row .btn{margin:0}
.ce-again{margin-top:26px;text-align:center}

.ce-info{padding:10px 0 90px}
.ce-info details{border:1px solid var(--panel-line);border-radius:14px;margin-top:12px;background:rgba(255,255,255,.02)}
.ce-info summary{cursor:pointer;padding:15px 20px;font-weight:600;font-size:16px}
.ce-info .body{padding:0 20px 18px;color:var(--text-soft);font-size:15.5px}
.ce-info .body p{margin-top:10px}
.ce-info .body ul{margin:10px 0 0 20px}
.ce-info table{width:100%;border-collapse:collapse;margin-top:12px;font-size:14.5px}
.ce-info th,.ce-info td{text-align:left;padding:8px 10px;border-top:1px solid var(--panel-line)}
.ce-info th{color:var(--text-mute);font-size:12.5px;font-weight:600}
.ce-links{margin-top:26px;font-size:15px;color:var(--text-soft)}
.ce-links a{font-weight:600}

@media print{
  html,body{background:#fff!important;color:#111!important}
  nav,footer,.skip,.ce-hero,.ce-info,.ce-keep,.ce-again,.ce-sticky{display:none!important}
  .ce-results,.panel{background:#fff!important;border:0!important;padding:0!important}
  .ce-score-num .n{background:none!important;color:#0E9384!important;-webkit-text-fill-color:#0E9384}
  .ce-band-text,.ce-list,.ce-road .what,.ce-fine,.ce-say,.ce-cand p,.ce-att p,.ce-snap dd,.ce-prices td{color:#333!important}
  .ce-next,.ce-note,.ce-actions{display:none!important}
  .ce-disclaimer{color:#333!important;border-color:#999!important}
  .lv{border:1px solid #999;background:none!important;color:#111!important}
  .ce-track{border:1px solid #999;background:#eee!important}
  .ce-fill{background:#555!important}
  .ce-block,.ce-cand,.ce-att{break-inside:avoid}
}


/* ---- Questionnaire (nine steps) ---- */
.ce-step{margin-top:20px}
.ce-step > h2{font-size:clamp(22px,3vw,28px);line-height:1.2}
.ce-step > h2:focus{outline:none}
.ce-step > h2:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.ce-steplead{color:var(--text-soft);font-size:15.5px;margin-top:8px}
.ce-step .ce-dim{margin-top:22px}
.ce-step .field.ce-missing,.ce-chips.ce-missing{border:1.5px solid var(--gold);border-radius:14px;padding:10px 12px}
.ce-fielderr{display:block;color:var(--gold);font-size:13.5px;font-weight:600;margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ce-chips{border:0;margin-top:22px;min-width:0}
.ce-chips legend{font-size:13.5px;font-weight:600;color:var(--text-soft);padding:0;margin-bottom:6px}
.ce-hint{font-size:13.5px;color:var(--text-mute);margin-bottom:8px}
.ce-chipgrid{display:flex;flex-wrap:wrap;gap:8px}
.ce-chip{position:relative;display:inline-block}
.ce-chip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.ce-chip label{display:inline-flex;align-items:center;min-height:42px;padding:8px 14px;border:1.5px solid var(--panel-line);border-radius:999px;background:rgba(255,255,255,.03);color:var(--text-soft);font-size:14.5px;font-weight:600;transition:background .15s,border-color .15s,color .15s}
.ce-chip input:hover + label{border-color:var(--teal);color:var(--text)}
.ce-chip input:checked + label{background:linear-gradient(120deg,var(--teal-deep),var(--teal));border-color:var(--teal);color:#04211D}
.ce-chip input:focus-visible + label{outline:3px solid var(--gold);outline-offset:2px}
.ce-chip-wide label{border-radius:14px;line-height:1.4}
.ce-consent{margin-top:22px;border:1.5px solid transparent;border-radius:14px;padding:6px}

.ce-work{margin-top:18px;border:1px solid var(--panel-line);border-radius:14px;overflow:hidden}
.ce-workrow{display:grid;grid-template-columns:1fr;gap:8px;padding:12px 14px;border-bottom:1px solid var(--panel-line);align-items:center}
.ce-workrow:last-child{border-bottom:0}
@media (min-width:720px){.ce-workrow{grid-template-columns:minmax(0,1fr) 170px 120px;gap:14px}}
.ce-workname{font-size:15px;font-weight:600}
.ce-workrow select{width:100%;padding:9px 12px;border-radius:10px;border:1.5px solid var(--panel-line);background:rgba(255,255,255,.03);color:var(--text);font:inherit;font-size:14.5px}
.ce-workrow select:focus{border-color:var(--teal);outline:none}
.ce-hurt{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-soft)}
.ce-hurt input{width:17px;height:17px;accent-color:var(--coral)}
.ce-workrow .ce-fielderr{grid-column:1 / -1;margin-top:0}

.ce-navrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
#ce-nav{margin-top:26px;text-align:center}

.ce-note{border:1px solid var(--panel-line);border-radius:12px;padding:12px 16px;font-size:14.5px;color:var(--text);background:rgba(255,255,255,.03);margin-top:14px}
.ce-note.ok{border-color:rgba(45,212,191,.45);background:rgba(45,212,191,.07)}
.ce-note.warn{border-color:rgba(255,194,75,.5);background:rgba(255,194,75,.08)}
.ce-note a{font-weight:600}

/* ---- Report ---- */
.ce-forline{color:var(--text-mute);font-size:14px;margin:14px 0 18px}
.ce-snap{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:15px}
.ce-snap dt{color:var(--text-mute);font-weight:600}
.ce-snap dd{color:var(--text-soft)}
.ce-say{color:var(--text-soft);font-size:14.5px;margin-top:6px}
.ce-cands{list-style:none;margin-top:16px}
.ce-cand{border:1px solid var(--panel-line);border-radius:14px;padding:16px 18px;background:rgba(255,255,255,.02);margin-top:14px}
.ce-cand h4{font-size:16px;line-height:1.5}
.ce-cand p{color:var(--text-soft);font-size:15px;margin-top:8px}
.ce-cand p strong{color:var(--text)}
.lv.lv-ease1{background:rgba(45,212,191,.14);color:var(--teal)}
.lv.lv-ease2{background:rgba(255,194,75,.14);color:var(--gold)}
.lv.lv-ease3{background:rgba(255,122,92,.15);color:#FF9C84}
.ce-prices{width:100%;border-collapse:collapse;margin:14px 0 4px;font-size:15px}
.ce-prices td{padding:10px 8px;border-top:1px solid var(--panel-line);vertical-align:top}
.ce-prices .pr{text-align:right;white-space:nowrap;font-weight:700;color:var(--text)}
.ce-prices a{font-weight:700}
#ce-fix{margin-top:18px}
#ce-fix .btn{margin-top:18px}
.ce-disclaimer{margin-top:30px;padding-top:18px;border-top:1px solid var(--panel-line);font-size:13.5px;color:var(--text-mute)}


/* v2: substep headings inside a combined step (e.g. the technology step's
   "Systems and licences" and "Devices and security" subsections). */
.ce-substep{font-size:16px;margin-top:26px;padding-top:18px;border-top:1px dashed var(--panel-line)}
.ce-step > h2{margin-bottom:4px}
#ce-body.ce-step{margin-top:20px}


/* v2: the paywall panel that replaces the paid sections when a report is
   not yet unlocked. */
.ce-unlock{border:1.5px solid rgba(139,124,248,.4);background:linear-gradient(160deg,rgba(139,124,248,.09),rgba(255,255,255,.02));border-radius:16px;padding:24px 26px;margin-top:30px}
.ce-unlock h3{margin-top:0}
.ce-unlock .ce-list{margin-top:12px;margin-bottom:18px}
.ce-unlock #ce-unlock-go{margin-top:4px}