/* healthrisk — "Линия жизни / Lifeline". Concept: a life instrument.
   Palette derived from oxygen (blue) & blood (arterial red), not the teal health cliche. */

:root{
  --paper:#eef2f7; --surface:#ffffff; --surface-2:#f6f9fc;
  --ink:#0e1826; --ink-soft:#33465e; --muted:#5d6b7e; --faint:#8494a6;
  --line:#e0e7f0; --line-strong:#cdd8e6;
  --accent:#e8503a;      /* arterial pulse / CTA */
  --accent-ink:#c23a26;
  --oxygen:#1e6fe0;      /* oxygen / data / links */
  --oxygen-soft:#e8f1fe;
  --good:#1f9d6b; --moderate:#e0a31e; --elevated:#f07a3c; --high:#e8503a; --very-high:#b4232a;
  --radius:18px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(14,24,38,.05), 0 12px 34px -18px rgba(14,24,38,.28);
  --shadow-lift:0 2px 6px rgba(14,24,38,.08), 0 28px 60px -28px rgba(14,24,38,.36);
  --f-display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:640px;
}
:root[data-theme="dark"], .result-dark{
  --paper:#080c12; --surface:#0f1720; --surface-2:#131d28;
  --ink:#eef3f8; --ink-soft:#c4d0dd; --muted:#8fa0b2; --faint:#65788c;
  --line:#1e2a38; --line-strong:#2a3a4c;
  --accent:#ff6a52; --accent-ink:#ff8873; --oxygen:#4f9bff; --oxygen-soft:#122238;
  --good:#33c489; --moderate:#f0b840; --elevated:#ff9457; --high:#ff6a52; --very-high:#ff5064;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.7);
  --shadow-lift:0 2px 8px rgba(0,0,0,.5), 0 30px 70px -30px rgba(0,0,0,.8);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#080c12; --surface:#0f1720; --surface-2:#131d28;
    --ink:#eef3f8; --ink-soft:#c4d0dd; --muted:#8fa0b2; --faint:#65788c;
    --line:#1e2a38; --line-strong:#2a3a4c;
    --accent:#ff6a52; --accent-ink:#ff8873; --oxygen:#4f9bff; --oxygen-soft:#122238;
    --good:#33c489; --moderate:#f0b840; --elevated:#ff9457; --high:#ff6a52; --very-high:#ff5064;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.7);
    --shadow-lift:0 2px 8px rgba(0,0,0,.5), 0 30px 70px -30px rgba(0,0,0,.8);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-body); color:var(--ink); background:var(--paper);
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--f-display); font-weight:800; line-height:1.1; letter-spacing:-.02em; margin:0}
.mono{font-family:var(--f-mono); font-feature-settings:"tnum" 1}
button{font-family:inherit}
a{color:var(--oxygen)}

.app{max-width:var(--maxw); margin:0 auto; padding:0 18px; min-height:100dvh; display:flex; flex-direction:column}

/* ---------- top bar ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 2px 8px; gap:12px}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:800; letter-spacing:-.02em; font-size:16px}
.logo .beat{width:26px; height:26px; flex:0 0 auto}
.controls{display:flex; gap:6px}
.chip-btn{border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft);
  border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer}
.chip-btn[aria-pressed="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.chip-btn:focus-visible, button:focus-visible, input:focus-visible, .opt:focus-visible{outline:3px solid color-mix(in srgb, var(--oxygen) 55%, transparent); outline-offset:2px}

/* ---------- hero ---------- */
.hero{padding:22px 4px 8px; display:flex; flex-direction:column; gap:16px}
.eyebrow{font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:600}
.hero h1{font-size:clamp(30px,8.5vw,44px)}
.hero p{color:var(--muted); font-size:16px; margin:0; max-width:52ch}
.lifeline-hero{width:100%; height:120px; margin:6px 0 2px}
.cta{appearance:none; border:none; cursor:pointer; border-radius:14px; padding:16px 22px;
  font-family:var(--f-display); font-weight:800; font-size:17px; letter-spacing:-.01em;
  background:var(--accent); color:#fff; box-shadow:0 10px 26px -12px color-mix(in srgb,var(--accent) 70%, transparent);
  transition:transform .12s ease, filter .12s ease; width:100%}
.cta:hover{filter:brightness(1.04)} .cta:active{transform:translateY(1px)}
.cta.secondary{background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); box-shadow:none}
.cta.ghost{background:transparent; color:var(--muted); box-shadow:none; font-weight:600}
.cta-row{display:flex; flex-direction:column; gap:10px}

.hero-meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.pill{font-size:12.5px; color:var(--muted); background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:6px 11px; display:inline-flex; gap:6px; align-items:center}
.pill b{color:var(--ink); font-weight:600}

/* ---------- wizard ---------- */
.stage{flex:1; display:flex; flex-direction:column; padding-bottom:24px}
.progress{position:sticky; top:0; z-index:5; background:linear-gradient(var(--paper),var(--paper) 70%,transparent);
  padding:10px 2px 8px}
.progress-strip{height:26px; width:100%}
.progress-meta{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:11.5px; color:var(--faint); margin-top:2px; letter-spacing:.04em}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px 20px; animation:rise .32s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.q-section{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--oxygen); font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:8px}
.q-section::before{content:""; width:16px; height:16px; background:currentColor; -webkit-mask:var(--sec-icon) center/contain no-repeat; mask:var(--sec-icon) center/contain no-repeat; opacity:.9}
.q-label{font-family:var(--f-display); font-weight:700; font-size:20px; letter-spacing:-.01em; margin:0 0 6px}
.q-help{color:var(--muted); font-size:14px; margin:0 0 16px}
.q-optional{font-size:12px; color:var(--faint); font-weight:600; margin-left:6px}

/* options / segmented */
.opts{display:flex; flex-direction:column; gap:9px; margin-top:4px}
.opt{display:flex; align-items:center; gap:12px; text-align:left; width:100%; cursor:pointer;
  border:1.5px solid var(--line-strong); background:var(--surface-2); color:var(--ink);
  border-radius:14px; padding:15px 16px; font-size:15.5px; font-weight:500; transition:border-color .12s, background .12s, transform .08s}
.opt:hover{border-color:var(--oxygen)}
.opt[aria-pressed="true"]{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%, var(--surface)); box-shadow:inset 0 0 0 1px var(--accent)}
.opt .dot{width:20px; height:20px; border-radius:50%; border:2px solid var(--line-strong); flex:0 0 auto; position:relative}
.opt[aria-pressed="true"] .dot{border-color:var(--accent)}
.opt[aria-pressed="true"] .dot::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent)}
.opt.multi .dot{border-radius:6px}
.opt.multi[aria-pressed="true"] .dot::after{border-radius:2px}

/* number input */
.num-wrap{display:flex; align-items:stretch; gap:0; border:1.5px solid var(--line-strong); border-radius:14px; overflow:hidden; background:var(--surface-2); max-width:280px}
.num-wrap:focus-within{border-color:var(--oxygen)}
.num-wrap input{border:none; background:transparent; padding:16px; font-size:22px; font-family:var(--f-mono); font-weight:600; color:var(--ink); width:100%; -moz-appearance:textfield}
.num-wrap input::-webkit-outer-spin-button,.num-wrap input::-webkit-inner-spin-button{-webkit-appearance:none}
.num-unit{display:flex; align-items:center; padding:0 16px; background:var(--surface); border-left:1px solid var(--line); color:var(--muted); font-size:14px; font-weight:600}
.textarea{width:100%; border:1.5px solid var(--line-strong); border-radius:14px; background:var(--surface-2); padding:14px; font-family:inherit; font-size:15px; color:var(--ink); resize:vertical; min-height:84px}
.textarea:focus{outline:none; border-color:var(--oxygen)}

/* boolean segmented */
.bool-row{display:flex; gap:10px}
.bool-row .opt{justify-content:center; font-weight:700}

/* alcohol builder */
.alc-list{display:flex; flex-direction:column; gap:12px}
.alc-row{border:1.5px solid var(--line-strong); border-radius:14px; padding:12px; background:var(--surface-2); display:grid; grid-template-columns:1fr; gap:10px}
.alc-row select,.alc-row input{border:1px solid var(--line-strong); border-radius:10px; padding:11px; font-family:inherit; font-size:15px; background:var(--surface); color:var(--ink); width:100%}
.alc-sub{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.alc-fieldlabel{font-size:12px; color:var(--muted); margin-bottom:4px; display:block}
.alc-remove{background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; font-size:13px; justify-self:end; padding:2px}
.alc-add{border:1.5px dashed var(--line-strong); background:transparent; color:var(--oxygen); border-radius:12px; padding:12px; font-weight:700; cursor:pointer; width:100%}

/* nav */
.wiz-nav{display:flex; gap:10px; margin-top:18px; align-items:center; flex-wrap:wrap}
.wiz-nav .cta{width:auto; flex:0 0 auto; min-width:130px; max-width:100%; padding:15px 20px}
.cta[disabled]{opacity:.4; cursor:not-allowed; filter:none}
.link-btn{background:none; border:none; color:var(--muted); font-weight:600; cursor:pointer; padding:12px 6px; font-size:14px}

/* interstitial */
.interstitial{text-align:center; padding:30px 10px}
.interstitial .lifeline-hero{height:96px}

/* loading */
.loading{display:flex; flex-direction:column; align-items:center; gap:18px; padding:60px 10px; text-align:center}
.loading .lifeline-hero{height:80px}
.loading p{color:var(--muted); font-size:15px; margin:0}

/* ---------- result ---------- */
.result{padding:12px 0 40px; display:flex; flex-direction:column; gap:18px}
.result .card{background:var(--surface)}
.disclaimer{border:1px solid var(--line); background:var(--surface-2); border-radius:14px; padding:14px 16px; font-size:13px; color:var(--muted)}
.disclaimer b{color:var(--ink-soft); font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:4px}
.flag{border-radius:14px; padding:14px 16px; display:flex; gap:12px; align-items:flex-start}
.flag.emergency{background:color-mix(in srgb,var(--very-high) 12%, var(--surface)); border:1px solid var(--very-high)}
.flag.urgent{background:color-mix(in srgb,var(--moderate) 14%, var(--surface)); border:1px solid var(--moderate)}
.flag .tag{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:3px 8px; border-radius:6px; color:#fff; flex:0 0 auto}
.flag.emergency .tag{background:var(--very-high)} .flag.urgent .tag{background:var(--moderate)}

.section-title{display:flex; flex-direction:column; gap:3px; margin-bottom:4px}
.section-title h2{font-size:22px}
.section-title .sub{color:var(--muted); font-size:13.5px}

/* life-expectancy panel (the instrument) */
.le-panel{color:var(--ink)}
.le-figures{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:6px 0 2px}
.le-big{font-family:var(--f-mono); font-weight:600; font-size:clamp(46px,15vw,72px); line-height:1; color:var(--accent); letter-spacing:-.03em}
.le-big .u{font-size:.3em; color:var(--muted); margin-left:6px; font-weight:500}
.le-ages{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.le-age{background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:10px 14px; flex:1; min-width:120px}
.le-age .k{font-size:11.5px; color:var(--muted); font-family:var(--f-mono); letter-spacing:.05em; text-transform:uppercase}
.le-age .v{font-family:var(--f-mono); font-weight:600; font-size:26px; color:var(--ink)}
.le-verdict{font-size:15px; color:var(--ink-soft); margin:12px 0 0; font-weight:600}
.le-compare{font-size:13.5px; color:var(--muted); margin-top:4px}
.lifeline-result{width:100%; height:120px; margin:14px 0 4px}
.le-legend{display:flex; gap:16px; font-size:12px; color:var(--muted); flex-wrap:wrap}
.le-legend span{display:inline-flex; align-items:center; gap:6px}
.le-legend i{width:22px; height:3px; border-radius:2px; display:inline-block}

.factors{display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px}
@media(min-width:560px){.factors{grid-template-columns:1fr 1fr}}
.factor-col h3{font-size:13px; font-family:var(--f-mono); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px}
.factor-col.up h3{color:var(--good)} .factor-col.down h3{color:var(--high)}
.factor{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:14px}
.factor .yv{font-family:var(--f-mono); font-weight:600; white-space:nowrap}
.factor.up .yv{color:var(--good)} .factor.down .yv{color:var(--high)}
.factor-total{margin-top:10px; padding-top:9px; border-top:2px solid var(--line); font-family:var(--f-mono); font-weight:700; font-size:14px; display:flex; justify-content:space-between; gap:8px}
.factor-total.up{color:var(--good)} .factor-total.down{color:var(--high)}
.shorten-banner{margin-top:16px; text-align:center; border:1.5px solid var(--high); background:color-mix(in srgb, var(--high) 10%, var(--surface)); border-radius:16px; padding:16px 14px}
.shorten-banner span{font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600}
.shorten-banner b{display:block; font-family:var(--f-mono); font-weight:700; color:var(--high); font-size:clamp(34px,11vw,52px); line-height:1.05; margin-top:4px; letter-spacing:-.02em}

/* conditions table */
.cond{display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line)}
.cond:first-child{border-top:none}
.cond .risk{font-family:var(--f-mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:8px; color:#fff; flex:0 0 auto; margin-top:2px; min-width:74px; text-align:center}
.risk.low{background:var(--good)} .risk.moderate{background:var(--moderate)} .risk.elevated{background:var(--elevated)} .risk.high{background:var(--high)} .risk.very_high{background:var(--very-high)}
.cond .body h4{font-size:16px; margin:0 0 3px; font-family:var(--f-display); font-weight:700}
.cond .body p{margin:0; color:var(--muted); font-size:13.5px}

/* recommendations */
.rec{border:1px solid var(--line); border-radius:16px; padding:16px; margin-top:12px; background:var(--surface-2); position:relative; overflow:hidden}
.rec::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent)}
.rec-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.rec-head h4{font-size:17px; font-family:var(--f-display); font-weight:800; margin:0}
.years-chip{font-family:var(--f-mono); font-weight:700; font-size:15px; color:#fff; background:var(--good);
  padding:6px 12px; border-radius:999px; white-space:nowrap; flex:0 0 auto; box-shadow:0 6px 16px -8px var(--good)}
.rec-action{font-size:14.5px; color:var(--ink-soft); margin:8px 0}
.rec-note{font-size:13.5px; color:var(--oxygen); background:var(--oxygen-soft); border-radius:10px; padding:9px 12px; margin:8px 0 0}
.rec-meta{display:flex; gap:14px; margin-top:10px; font-size:11.5px; color:var(--muted); font-family:var(--f-mono); flex-wrap:wrap}
.rec-meta b{color:var(--ink-soft); font-weight:600}

.hero-result{text-align:center; padding:14px 6px 4px}
.hero-result .lifeline-hero{height:88px}
.hero-result h2{font-size:clamp(22px,6vw,30px); line-height:1.15; margin:6px 0 8px; letter-spacing:-.02em}
.hero-result p{color:var(--muted); font-size:15.5px; margin:0 auto; max-width:46ch}

.rec-evidence{font-size:14px; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0 0; line-height:1.5}
.rec-evidence-tag{display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--oxygen); font-weight:600; margin-bottom:4px}

.dd{border:1px solid var(--line); border-radius:12px; margin-top:10px; overflow:hidden; background:var(--surface-2)}
.dd summary{cursor:pointer; padding:14px 16px; font-family:var(--f-display); font-weight:700; font-size:16px; list-style:none; display:flex; justify-content:space-between; align-items:center}
.dd summary::-webkit-details-marker{display:none}
.dd summary::after{content:"+"; color:var(--accent); font-size:20px; font-weight:700}
.dd[open] summary::after{content:"–"}
.dd[open] summary{border-bottom:1px solid var(--line)}
.dd .dd-assess{padding:14px 16px 0; margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.55}
.dd-block{padding:12px 16px 0}
.dd-block h5{margin:0 0 6px; font-size:12px; font-family:var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--oxygen)}
.dd-block ul{margin:0 0 4px; padding-left:18px}
.dd-block li{font-size:14px; color:var(--ink-soft); margin-bottom:5px; line-height:1.5}
.dd > *:last-child{padding-bottom:14px}

.children-msg{border:1px solid var(--oxygen); background:var(--oxygen-soft); border-radius:16px; padding:18px; font-size:15px; color:var(--ink-soft); line-height:1.55}
.children-msg::before{content:"👪"; font-size:22px; display:block; margin-bottom:6px}

.support-box{border:1px solid var(--oxygen); background:var(--oxygen-soft); border-radius:14px; padding:16px}
.support-box h4{margin:0 0 6px; font-size:16px}
.support-box p{margin:0; font-size:14px; color:var(--ink-soft)}

.result-actions{display:flex; gap:10px; margin-top:6px}
.result-actions .cta{flex:1}

.footer{text-align:center; padding:24px 0 40px; color:var(--faint); font-size:12px}
.footer .mono{font-size:11px}

/* motion off */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .lifeline-path{stroke-dashoffset:0 !important}
}
.hidden{display:none !important}