/* Cooperative Digital Maturity Assessment — page-scoped styles.
   Kept separate from styles.css so the interactive quiz stays self-contained.
   Reuses the site design tokens (var(--green) etc.) defined in styles.css. */

.assess-wrap{max-width:760px;margin:0 auto;padding:3rem 1.25rem 5rem}

.assess-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:2.5rem;margin-bottom:1.5rem}
@media (max-width:640px){.assess-card{padding:1.5rem}.assess-wrap{padding:2rem 1rem 3.5rem}}

.assess-h1{font-size:clamp(1.6rem,3.5vw,2.3rem);line-height:1.15;letter-spacing:-0.02em;margin-bottom:1rem;color:var(--text)}
.assess-lead{color:var(--muted);font-size:1.02rem;line-height:1.7;margin-bottom:1.5rem}
.assess-points{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:0.75rem}
.assess-points li{position:relative;padding-left:1.6rem;font-size:0.92rem;color:var(--text);line-height:1.55}
.assess-points li::before{content:'';position:absolute;left:0;top:0.45rem;width:0.7rem;height:0.7rem;border-radius:50%;background:var(--green-light);border:2px solid var(--green)}
.assess-points strong{font-weight:600}

/* Progress */
.assess-progress{display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem}
.assess-progress-bar{flex:1;height:8px;background:var(--bg);border:1px solid var(--border);border-radius:100px;overflow:hidden}
.assess-progress-bar span{display:block;height:100%;width:0;background:var(--green);border-radius:100px;transition:width .3s ease}
.assess-progress-text{font-size:0.8rem;font-weight:600;color:var(--muted);white-space:nowrap}

.assess-dimension{font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--green);margin-bottom:0.6rem}
.assess-question{font-family:'Fraunces',serif;font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.3;color:var(--text);margin-bottom:1.5rem}

/* Options */
.assess-options{display:grid;gap:0.75rem;margin-bottom:1.75rem}
.assess-option{display:flex;align-items:flex-start;gap:0.85rem;width:100%;text-align:left;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--rs);padding:1rem 1.1rem;font-family:'DM Sans',sans-serif;font-size:0.95rem;color:var(--text);cursor:pointer;transition:border-color .15s,background .15s,transform .1s;line-height:1.4}
.assess-option:hover{border-color:#86EFAC;background:var(--surface)}
.assess-option:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.assess-option.selected{border-color:var(--green);background:var(--green-light)}
.assess-option .dot{flex:none;width:1.15rem;height:1.15rem;margin-top:0.1rem;border:2px solid var(--border);border-radius:50%;transition:border-color .15s,background .15s}
.assess-option.selected .dot{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 3px var(--surface)}

.assess-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.assess-hint{font-size:0.8rem;color:var(--muted)}

/* Result — score */
.assess-score-row{display:flex;align-items:center;gap:1.75rem;margin-bottom:2rem;flex-wrap:wrap}
.assess-score-ring{position:relative;flex:none;width:128px;height:128px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) calc(var(--pct,0)*1%),var(--border) 0);transition:background .6s ease}
.assess-score-ring::before{content:'';position:absolute;width:96px;height:96px;border-radius:50%;background:var(--surface)}
.assess-score-num{position:relative;font-family:'Fraunces',serif;font-size:2.1rem;font-weight:500;color:var(--text);line-height:1}
.assess-score-num small{font-size:0.85rem;color:var(--muted);font-family:'DM Sans',sans-serif}
.assess-score-copy{flex:1;min-width:220px}
.assess-band{font-size:1.5rem;margin-bottom:0.4rem;color:var(--text)}
.assess-band-desc{color:var(--muted);font-size:0.95rem;line-height:1.6}

.assess-subhead{font-family:'DM Sans',sans-serif;font-size:0.8rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin:2rem 0 1rem}

/* Breakdown bars */
.assess-breakdown{display:grid;gap:1rem}
.assess-bar-row{display:grid;gap:0.4rem}
.assess-bar-head{display:flex;justify-content:space-between;align-items:baseline;font-size:0.9rem}
.assess-bar-head .name{font-weight:600;color:var(--text)}
.assess-bar-head .val{font-weight:600;color:var(--muted);font-size:0.85rem}
.assess-bar-track{height:10px;background:var(--bg);border:1px solid var(--border);border-radius:100px;overflow:hidden}
.assess-bar-fill{height:100%;border-radius:100px;background:var(--green);transition:width .6s ease}
.assess-bar-fill.low{background:#DC2626}
.assess-bar-fill.mid{background:#D97706}
.assess-bar-fill.high{background:var(--green)}

/* Recommendations */
.assess-recs{display:grid;gap:0.9rem;margin-bottom:0.5rem}
.assess-rec{border:1px solid var(--border);border-left:3px solid var(--green);border-radius:var(--rs);padding:1rem 1.15rem;background:var(--bg)}
.assess-rec.low{border-left-color:#DC2626}
.assess-rec.mid{border-left-color:#D97706}
.assess-rec h4{font-family:'DM Sans',sans-serif;font-size:0.95rem;font-weight:600;margin-bottom:0.3rem;color:var(--text)}
.assess-rec p{font-size:0.88rem;color:var(--muted);line-height:1.6}

.assess-capture{margin-top:2rem}
.assess-capture-sub{font-size:0.9rem;color:var(--muted);line-height:1.6;margin-bottom:1.25rem;margin-top:-0.5rem}
.assess-result-actions{margin-top:1.75rem;justify-content:center}

/* Print: show only the result content, hide chrome + the capture form. */
@media print{
  nav,footer,.consent-banner,.skip-link,.breadcrumb,.assess-capture,.assess-result-actions,#assess-intro,#assess-quiz{display:none !important}
  .assess-card{border:none;padding:0;margin:0}
  body{background:#fff}
  .assess-score-ring{background:none !important}
  .assess-score-ring::before{display:none}
}