:root {
  --bg: #f4f3ef;
  --card: #ffffff;
  --text: #181818;
  --muted: #66645f;
  --line: #dedbd4;
  --accent: #222;
  --soft: #efede7;
  --danger: #8d2f2f;
  --radius: 22px;
  --shadow: 0 16px 45px rgba(0,0,0,.06);
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { font: inherit; }
.app { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.shell { width:min(780px,100%); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(24px,5vw,52px); }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:12px; color:var(--muted); margin-bottom:18px; }
h1,h2 { line-height:1.08; margin:0 0 18px; font-weight:700; letter-spacing:-.035em; }
h1 { font-size:clamp(36px,8vw,68px); }
h2 { font-size:clamp(29px,5vw,44px); }
h3 { margin:28px 0 10px; }
p { font-size:18px; line-height:1.58; margin:0 0 16px; }
.small { font-size:14px; color:var(--muted); line-height:1.5; }
.muted { color:var(--muted); }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.btn { border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:999px; padding:14px 20px; cursor:pointer; }
.btn.secondary { background:#fff; color:var(--text); border-color:var(--line); }
.btn.secondary.selected { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 0 0 3px rgba(34,34,34,.10); }
.sbtn.selected::before { content:"✓"; display:inline-block; margin-right:7px; font-weight:700; }
.btn.ghost { background:transparent; color:var(--text); border-color:transparent; padding-left:0; }
.btn:disabled { opacity:.35; cursor:not-allowed; }
.choice-grid { display:grid; gap:10px; margin-top:24px; }
.choice { width:100%; text-align:left; background:#fff; color:var(--text); border:1px solid var(--line); border-radius:16px; padding:16px 18px; cursor:pointer; transition:.15s ease; }
.choice:hover { transform:translateY(-1px); border-color:#aaa69e; }
.choice.selected { border-color:#222; background:var(--soft); }
.progress-wrap { margin-bottom:28px; }
.progress-meta { display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:13px; margin-bottom:8px; }
.progress { height:7px; background:var(--soft); border-radius:999px; overflow:hidden; }
.progress > div { height:100%; background:#222; border-radius:inherit; }
.question { font-size:clamp(25px,4vw,36px); line-height:1.25; letter-spacing:-.025em; margin:8px 0 22px; }
.explain { margin-top:18px; padding:16px 18px; background:var(--soft); border-radius:16px; color:#3f3d39; line-height:1.5; }
.section-note { border-left:3px solid #222; padding-left:16px; margin:22px 0; }
.scale { margin:22px 0; }
.scale-head { display:flex; justify-content:space-between; gap:20px; align-items:baseline; }
.scale-name { font-weight:650; }
.scale-value { font-variant-numeric: tabular-nums; }
.bar { height:10px; background:var(--soft); border-radius:999px; overflow:hidden; margin-top:8px; }
.bar > div { height:100%; background:#222; }
.result-box { padding:20px; border:1px solid var(--line); border-radius:18px; margin:18px 0; }
.result-box.warn { border-color:#cda4a4; background:#fff8f8; }
.result-box.warn strong { color:var(--danger); }
.kicker { font-size:13px; color:var(--muted); margin-bottom:6px; }
.divider { height:1px; background:var(--line); margin:32px 0; }
.answers { margin-top:18px; }
.answer-row { padding:14px 0; border-bottom:1px solid var(--line); }
.answer-row:last-child { border-bottom:0; }
.answer-q { font-size:15px; line-height:1.45; }
.answer-a { font-size:14px; color:var(--muted); margin-top:5px; }
.notice { font-size:13px; line-height:1.5; color:var(--muted); margin-top:24px; }
.gender-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.gender-card { border:1px solid var(--line); border-radius:18px; padding:22px; background:#fff; cursor:pointer; text-align:center; font-size:18px; }
.gender-card:hover { border-color:#999; }
@media (max-width:600px){
  .app { padding:12px; align-items:flex-start; }
  .card { border-radius:18px; padding:24px 19px; }
  .gender-grid { grid-template-columns:1fr; }
  .choice { padding:14px 15px; }
}
@media print {
  body { background:#fff; }
  .app { display:block; padding:0; }
  .shell { width:100%; }
  .card { box-shadow:none; border:0; padding:0; }
  .no-print { display:none !important; }
}

/* v0.2.0: profile rows for factors that should not be averaged */
.profile-list { margin-top:14px; }
.profile-row { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.profile-row:last-child { border-bottom:0; }
.profile-name { font-weight:600; }
.profile-level { font-size:13px; color:var(--muted); white-space:nowrap; }
.choice.selected { background:#222; color:#fff; border-color:#222; box-shadow:0 0 0 3px rgba(34,34,34,.10); }
.choice.selected::before { content:"✓"; display:inline-block; margin-right:8px; font-weight:700; }
@media (max-width:600px){
  .profile-row { align-items:flex-start; }
}

/* v0.3.0 */
.explain summary { cursor:pointer; font-weight:600; }
.scale-value { font-size:14px; color:var(--muted); text-align:right; }
@media (max-width:600px){
  .question { font-size:25px; }
  .scale-head { align-items:flex-start; }
  .scale-value { max-width:42%; }
}