/* Body Score tool (templates/en/page-body-score.html). Uses the Warm Editorial tokens in brk.css. */
/* `hidden` must win over the display rules below (one step at a time). */
.bs-card [hidden],.bs-result [hidden],.bs-result[hidden],.bs-card[hidden],.jr-form-wrap [hidden]{display:none!important}
.bs-intro{padding-bottom:0}
.bs-intro h1{font:400 var(--h2)/1.05 var(--serif);margin:var(--s3) 0 var(--s4)}
.bs-intro h1 em{color:var(--accent)}
.bs-tool{padding-top:var(--s7)}
.bs-card,.bs-result{max-width:640px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(20px,4vw,40px)}
.bs-progress{font:600 var(--label)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--s4)}
.bs-step{border:0;margin:0;padding:0;display:grid;gap:var(--s4)}
.bs-step legend{font:400 var(--h3)/1.15 var(--serif);color:var(--ink);padding:0;margin-bottom:var(--s4)}
.bs-choice{display:flex;flex-wrap:wrap;gap:var(--s3)}
.bs-choice label{display:flex;align-items:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border:1px solid var(--line);border-radius:var(--r-pill);font:500 var(--small)/1 var(--sans);cursor:pointer}
.bs-choice label:has(input:checked){border-color:var(--accent);background:var(--mist);color:var(--ink)}
.bs-choice input{accent-color:var(--accent);width:18px;height:18px}
.bs-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.bs-row[hidden]{display:none}
.bs-field{display:grid;gap:var(--s2);font:600 var(--small)/1.3 var(--sans);color:var(--ink)}
.bs-field input{min-height:52px;padding:0 var(--s4);border:1px solid var(--line);border-radius:var(--r-sm);font:400 var(--body)/1 var(--sans);color:var(--ink);background:var(--paper)}
.bs-field input:focus{outline:2px solid var(--accent);outline-offset:1px}
.bs-field input[aria-invalid=true],.bs-check input[aria-invalid=true]{outline:2px solid var(--danger)}
.bs-help{margin:0;color:var(--ink-soft);font-size:var(--small);line-height:1.55}
.bs-error{min-height:1.4em;margin:var(--s4) 0 0;color:var(--danger);font-weight:600}
.bs-error:empty{min-height:0;margin:0}
.bs-actions{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:flex-end;margin-top:var(--s5)}
.bs-result:focus{outline:none}
.bs-result h2{font:400 var(--h3)/1.15 var(--serif);margin:var(--s3) 0 var(--s5)}
.bs-measures{list-style:none;margin:0 0 var(--s6);padding:0;display:grid;gap:var(--s3)}
.bs-measure{display:grid;grid-template-columns:1fr auto;gap:2px var(--s4);padding:var(--s4);border-radius:var(--r-sm);background:var(--paper);border-left:4px solid var(--line)}
.bs-measure span{font:600 var(--small)/1.3 var(--sans)}
.bs-measure strong{grid-row:span 2;align-self:center;font:500 32px/1 var(--serif);color:var(--ink)}
.bs-measure em{font-style:normal;color:var(--ink-soft);font-size:15px}
/* Each result row: green = healthy, amber = keep an eye on it (raised, or below healthy), red = high risk.
   Colour is never alone: the row also says it in words and carries ✓ / ! / !! in a badge. */
.bs-measure{border-left-width:5px;border-left-style:solid}
.bs-measure em{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.bs-measure em:before{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;font:700 12px/1 var(--sans);color:#fff}
.bs-measure[data-band=healthy]{border-left-color:var(--good);background:var(--good-bg)}
.bs-measure[data-band=healthy] em{color:var(--good)}
.bs-measure[data-band=healthy] em:before{content:"✓";background:var(--good)}
.bs-measure[data-band=raised],.bs-measure[data-band=low]{border-left-color:var(--warn);background:var(--warn-bg)}
.bs-measure[data-band=raised] em,.bs-measure[data-band=low] em{color:#8a5a12}
.bs-measure[data-band=raised] em:before,.bs-measure[data-band=low] em:before{content:"!";background:var(--warn)}
.bs-measure[data-band=high]{border-left-color:var(--danger);background:var(--danger-bg)}
.bs-measure[data-band=high] em{color:var(--danger)}
.bs-measure[data-band=high] em:before{content:"!!";background:var(--danger);font-size:11px}
.bs-alert{margin:0 0 var(--s6);padding:var(--s5);border-radius:var(--r-sm);background:#fdf1e3;border-left:4px solid var(--sun)}
.bs-alert strong{display:block;font:400 22px/1.25 var(--serif);color:var(--ink);margin-bottom:var(--s2)}
.bs-alert p{margin:0;line-height:1.6;color:var(--ink)}
.bs-gate,.bs-report{border-top:1px solid var(--line);padding-top:var(--s5);margin-bottom:var(--s5)}
.bs-gate h3,.bs-report h3{font:400 var(--h3)/1.15 var(--serif);margin:0 0 var(--s3)}
.bs-gate-form{display:grid;gap:var(--s4);margin-top:var(--s4)}
.bs-check{display:flex;gap:var(--s3);align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.bs-check input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--accent)}
.bs-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.bs-report p{line-height:1.6;margin:0 0 var(--s4)}
.btn-link{background:none;border:0;padding:var(--s3) 0;color:var(--accent);font:600 var(--small)/1 var(--sans);text-decoration:underline;cursor:pointer}
@media print{.site-header,.site-footer,.wa-float,.bs-intro,.bs-actions,.btn-link,.bs-gate{display:none!important}.bs-result{border:0;max-width:none;padding:0}}
.bs-intro-grid{display:grid;gap:var(--s6);align-items:center}
@media(min-width:960px){.bs-intro-grid{grid-template-columns:1.1fr .9fr;gap:var(--s8)}}
.bs-intro-photo{margin:0}
.bs-intro-photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:24px;box-shadow:0 24px 48px -32px #1d334773}
.bs-progress{display:flex;align-items:center;gap:var(--s4)}
.bs-dots{display:inline-flex;align-items:center;gap:0}
.bs-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);background:var(--white)}
.bs-dots i+i{margin-left:28px;position:relative}
.bs-dots i+i:before{content:"";position:absolute;right:14px;top:4px;width:28px;height:2px;background:var(--line)}
.bs-dots i.done{background:var(--accent);border-color:var(--accent)}
.bs-dots i.done+i:before,.bs-dots i.done+i.now:before{background:var(--accent)}
.bs-dots i.now{border-color:var(--accent);box-shadow:0 0 0 4px #2f6b3f22}
