/* CondomFit — consolidated v0.7 */
:root{
  --bg:#0b0b0f; --card:#121218; --muted:#9aa0a6; --text:#e6e9ef;
  --accent:#6ee7b7; --accent-2:#8ab4f8; --border:#23232b;
  --danger:#ff6b6b; --shadow:0 10px 30px rgba(0,0,0,.35); --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:linear-gradient(#0b0b0f,#0b0b0f); color:var(--text);
  font:16px/1.5 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell;
}
a{color:var(--text); text-decoration:none}
a.muted{color:var(--muted)} a[aria-disabled="true"]{pointer-events:none; opacity:.5}
.wrap{max-width:920px; margin:0 auto; padding:20px;}
.header{display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; backdrop-filter:saturate(150%) blur(8px);
  background:linear-gradient(180deg, rgba(11,11,15,.9), rgba(11,11,15,.6) 70%, transparent);}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px;}
.hero{padding:36px 0 8px} h1{font-size:clamp(28px,6vw,48px); line-height:1.1; margin:0 0 6px}
.lede{color:var(--muted); margin:0}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 120%),var(--card);
  border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin:18px 0 10px; box-shadow:var(--shadow);}
.card-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px}
.badge{font-size:12px; background:#1f2937; color:var(--accent); padding:4px 8px; border-radius:999px; border:1px solid #2b3442}
.grid-two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:720px){ .grid-two{grid-template-columns:1fr} }
.field label{display:block; font-weight:600; margin:4px 0 6px}
.input-row{display:flex; gap:8px} .input-row input,.input-row select{flex:1}
input,select,button{background:#0f0f15; color:var(--text); border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-size:16px; outline:none}
input:focus,select:focus{border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(138,180,248,.15)}
.hint{color:var(--muted); margin:6px 2px 0}
.actions{display:flex; gap:10px; margin-top:10px}
.btn{cursor:pointer; background:linear-gradient(180deg,#1f2937,#151a22); border:1px solid #2b3442; border-radius:12px; padding:12px 16px; font-weight:700}
.btn:hover{border-color:#3a475a} .btn.ghost{background:transparent}
.result-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.result-cell{background:#0f0f15; border:1px solid var(--border); border-radius:12px; padding:14px}
.value{font-size:20px; font-weight:800} .label{color:var(--muted); font-size:12px}
.small{font-size:13px} .muted{color:var(--muted)}
.footer{display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); border-top:1px solid var(--border); margin-top:20px; padding-top:16px}

/* Wizard UI */
.progress{position:relative; height:6px; background:#10121a; border:1px solid var(--border); border-radius:999px; margin:6px 0 18px}
.progress-bar{height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); border-radius:999px; transition:width .25s ease}
.progress-steps{display:flex; justify-content:space-between; margin-top:8px; color:var(--muted); font-size:12px}
.pstep{width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid #2b3442; background:#0f0f15}
.pstep.active{border-color:var(--accent-2); color:var(--text)}
.wizard-step h3{margin:0 0 8px}
.choice{display:block; text-align:left; width:100%; background:#0f0f15; border:1px solid var(--border); border-radius:12px; padding:12px; cursor:pointer}
.choice:hover{border-color:#3a475a} .choice.selected{outline:1px solid var(--accent-2)}
.fit-help{display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-top:4px}
.link{background:none; border:none; padding:0; color:var(--accent-2); cursor:pointer; font-weight:600}
.form-msg{margin-top:10px; padding:10px 12px; background:#0f0f15; border:1px solid var(--border); border-radius:12px; font-weight:600}
.form-msg.error{color:#ff6b6b} .form-msg.ok{color:var(--accent)}
input[type=number]{appearance:textfield} input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.input-error{ border-color:#ff6b6b !important; box-shadow:0 0 0 3px rgba(255,107,107,.1) !important }


/* v0.8: choice interactivity + accessibility */
.choice{position:relative}
.choice:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.choice.selected{box-shadow:0 0 0 2px rgba(138,180,248,.35); border-color:var(--accent-2)}
.choice .check{
  position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:50%;
  border:2px solid #2b3442; background:#0f0f15; display:flex; align-items:center; justify-content:center; font-size:12px;
}
.choice.selected .check{border-color:var(--accent-2)}
.choice .check::after{content:'✓'; opacity:0}
.choice.selected .check::after{opacity:1}


/* v0.9: clearer diagrams + inline help */
.minihelp{background:#0f0f15;border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin:8px 0}
.minihelp > summary{cursor:pointer;font-weight:700}
.minihelp[open]{outline:1px solid #2b3442}
.mini-steps{margin:8px 0 0 18px}
.mini-steps li{margin:6px 0}


/* v1.0: segmented Fit preference */
.seg{display:flex; gap:8px; margin:6px 0 4px; flex-wrap:wrap}
.seg-btn{cursor:pointer; background:#0f0f15; border:1px solid var(--border); border-radius:999px; padding:8px 12px; font-weight:700}
.seg-btn:hover{border-color:#3a475a}
.seg-btn.active{border-color:var(--accent-2); box-shadow:0 0 0 2px rgba(138,180,248,.25) inset}
.seg-sub{font-weight:600; color:var(--muted); margin-left:6px; font-size:12px}

.row{display:flex; align-items:center; gap:10px; margin-top:6px}


/* v1.0.1: enforce hidden state */
[hidden]{ display:none !important; }


/* v1.1: Step 3 polish */
.result-head{margin:0 0 10px; font-size:20px; color:var(--muted)}
.rec-list{list-style:none; padding:0; margin:8px 0 0; display:grid; gap:10px}
.rec-item{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--border); border-radius:12px; background:#0f0f15}
.rec-meta{flex:1; min-width:0}
.rec-name{font-weight:800}
.rec-sub{color:var(--muted); font-size:13px; margin-top:2px}
.badges{display:flex; gap:6px; margin-top:6px; flex-wrap:wrap}
.tag{font-size:12px; border:1px solid var(--border); padding:2px 6px; border-radius:999px; color:var(--muted)}

@media print{
  body{background:#fff; color:#000}
  .header,.footer,.nav,.progress,.progress-steps,.actions,.recs,.share,.hero{display:none !important}
  .card{box-shadow:none; border:none; padding:0}
  #result-card{page-break-inside:avoid}
}


/* v1.3.1: text-only recs */
.rec-item{justify-content:flex-start}
.rec-meta{padding-right:0}


/* v1.4: rec list polish & article links */
.rec-list .rec-item{padding:14px}
.rec-list .rec-meta .rec-sub{margin-top:4px}
a.linklike, .article a{color:var(--accent-2); text-decoration:none; border-bottom:1px dashed rgba(138,180,248,.35)}
.article a:hover{border-bottom-color:transparent}


/* v1.5: ensure hidden works everywhere */
[hidden]{display:none !important;}


/* v1.5.1: choice cards interactivity */
.choice{position:relative; cursor:pointer;}
.choice:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.choice.selected{border-color:var(--accent-2); box-shadow:0 0 0 2px rgba(138,180,248,.25) inset}
.choice .check{position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:50%; border:2px solid #2b3442; background:#0f0f15; display:flex; align-items:center; justify-content:center; font-size:12px;}
.choice.selected .check{border-color:var(--accent-2)}
.choice .check::after{content:'✓'; opacity:0}
.choice.selected .check::after{opacity:1}


/* fix: ensure hidden truly hides */
[hidden]{display:none !important;}


/* v0.8.1 minor layout fix: prevent choice text overlap/wrapping issues */
.choice{display:block; text-align:left; line-height:1.25;}
.choice .choice-title{font-weight:800; display:block; margin-bottom:4px; white-space:normal; word-break:break-word}
.choice .choice-sub{color:var(--muted); display:block; white-space:normal; word-break:break-word}
.grid-two{align-items:stretch}