/* Body map tool, /services/applied-kinesiology/body-map/ only.
 * Hand-maintained, same as site.css. Loaded via meta.head_extra on that one page.
 * Uses site.css tokens throughout; defines no colours of its own beyond
 * derived tints of --green and --terracotta. */

.bm-section{background:var(--paper-warm)}

.bm{display:grid; gap:clamp(2rem,4vw,3.25rem); align-items:start}
@media (min-width:960px){
  .bm{grid-template-columns:minmax(300px,370px) 1fr}
  .bm-picker{position:sticky; top:104px}
}

/* ---------- picker ---------- */
.bm-views{display:inline-flex; gap:.25rem; padding:.3rem; border-radius:var(--radius-pill);
  background:var(--cream-dim); margin-bottom:var(--sp-5)}
.bm-view{font-family:var(--font-body); font-weight:600; font-size:.95rem; letter-spacing:.02em;
  padding:.6rem 1.5rem; border-radius:var(--radius-pill); border:0; cursor:pointer;
  background:transparent; color:var(--green); transition:background .2s var(--ease-out), color .2s var(--ease-out)}
.bm-view:hover{color:var(--green)}
.bm-view.is-on{background:var(--green); color:var(--cream)}

.bm-figures{position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:var(--sp-5) var(--sp-4)
  var(--sp-4); margin-top:var(--sp-5)}
.bm-figure{display:block; width:100%; max-width:270px; height:auto; margin-inline:auto}
.bm-figure[data-view="back"]{display:none}
.bm[data-view="back"] .bm-figure[data-view="front"]{display:none}
.bm[data-view="back"] .bm-figure[data-view="back"]{display:block}

/* the silhouette itself, then the hotspot bands clipped to it, then the outline */
.bm-body path{fill:#d3dfd8}
.bm-outline path{fill:none; stroke:var(--green); stroke-width:2.25; opacity:.4;
  stroke-linejoin:round; pointer-events:none}

.bm-zone{cursor:pointer}
.bm-zone>*{fill:transparent; stroke:var(--paper); stroke-width:2.5;
  transition:fill .18s var(--ease-out)}
.bm-zone:hover>*{fill:rgba(201,106,47,.82)}
.bm-zone:focus{outline:none}
.bm-zone:focus-visible>*{fill:rgba(201,106,47,.82); stroke:var(--green); stroke-width:3}
.bm-zone.is-on>*{fill:var(--green)}

.bm-caption{text-align:center; margin:var(--sp-3) 0 0; min-height:1.6em;
  font-size:var(--text-sm); font-weight:600; letter-spacing:.02em; color:var(--green)}

.bm-hint{font-size:var(--text-sm); color:var(--muted); margin:0 0 var(--sp-3)}

.bm-chips{display:flex; flex-wrap:wrap; gap:.5rem}
.bm-chip{font-family:var(--font-body); font-size:.9rem; font-weight:500; line-height:1;
  padding:.62rem 1rem; border-radius:var(--radius-pill); cursor:pointer;
  background:var(--paper); color:var(--green); border:1.5px solid var(--line);
  transition:background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out)}
.bm-chip:hover{border-color:var(--terracotta-ink); color:var(--terracotta-ink)}
.bm-chip.is-on{background:var(--green); border-color:var(--green); color:var(--cream)}

/* ---------- results ---------- */
.bm-empty{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.6rem,3.5vw,2.4rem); box-shadow:var(--shadow-soft)}
.bm-empty-eyebrow{font-size:var(--text-eyebrow); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--terracotta-ink); margin-bottom:var(--sp-3)}
.bm-empty p+p{margin-top:var(--sp-4)}
.bm-empty-note{font-size:var(--text-sm); color:var(--muted)}

.bm-region+.bm-region{margin-top:var(--sp-8)}
.bm-region-kicker{font-size:var(--text-eyebrow); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--terracotta-ink); margin-bottom:var(--sp-3)}
.bm-region>h3{font-size:var(--text-h3); color:var(--green); margin-bottom:var(--sp-3)}
.bm-region-intro{color:var(--muted); max-width:60ch; margin-bottom:var(--sp-5)}

/* JS on: one region at a time. JS off: every region stays in the page. */
.bm[data-bm-ready] .bm-region{display:none}
.bm[data-bm-ready] .bm-region.is-active{display:block}

.bm-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-card); overflow:hidden}
.bm-card+.bm-card{margin-top:var(--sp-4)}
.bm-card-head{background:var(--green); color:var(--cream);
  padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.2rem,3vw,1.75rem);
  display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); align-items:baseline;
  justify-content:space-between}
.bm-card-head h4{font-size:clamp(1.35rem,2.2vw,1.7rem); color:var(--cream)}
.bm-pairs{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5)}
.bm-pairs li{display:flex; flex-direction:column; gap:.15rem}
.bm-k{font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sand)}
.bm-v{font-family:var(--font-body); font-size:1rem; font-weight:600; color:var(--cream); line-height:1.3}

.bm-card-body{padding:clamp(1.2rem,3vw,1.75rem); display:grid; gap:var(--sp-5)}
@media (min-width:700px){
  .bm-card-body{grid-template-columns:1fr 1fr}
  .bm-check{grid-column:1 / -1}
}
.bm-block h5,.bm-emotion h5{font-family:var(--font-body); font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta-ink);
  margin:0 0 var(--sp-3)}
.bm-block ul{margin:0; padding-left:1.15rem; color:var(--ink)}
.bm-block li+li{margin-top:.4rem}
.bm-block p{color:var(--ink)}
.bm-check{border-top:1px solid var(--line); padding-top:var(--sp-5)}
.bm-check p{color:var(--muted)}

/* the emotional panel, tinted by five-element family */
.bm-emotion{border-radius:var(--radius-sm); padding:var(--sp-4) var(--sp-5);
  border-left:4px solid var(--green)}
.bm-emotion h5{color:var(--green)}
.bm-el-name{font-family:var(--font-display); font-size:1.25rem; font-weight:600;
  color:var(--green); line-height:1.2; margin-bottom:.35rem}
.bm-el-wood{background:#eef3ec; border-left-color:#4a7a4e}
.bm-el-wood h5,.bm-el-wood .bm-el-name{color:#315b36}
.bm-el-fire{background:#fbeee7; border-left-color:var(--terracotta)}
.bm-el-fire h5,.bm-el-fire .bm-el-name{color:var(--terracotta-btn)}
.bm-el-earth{background:#f8f2e4; border-left-color:#b08c3e}
.bm-el-earth h5,.bm-el-earth .bm-el-name{color:#7c6023}
.bm-el-metal{background:#eff1f2; border-left-color:#6d7c82}
.bm-el-metal h5,.bm-el-metal .bm-el-name{color:#44545a}
.bm-el-water{background:#eaf0f3; border-left-color:#3d6c86}
.bm-el-water h5,.bm-el-water .bm-el-name{color:#2b4f63}

.bm-region-cta{margin-top:var(--sp-5); display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--sp-3) var(--sp-4)}
.bm-region-cta span{font-size:var(--text-sm); color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .bm-zone>*,.bm-chip,.bm-view{transition:none}
}