/* BIOCHAKRA motion and impact-calculator components (v1.1). Builds on core.css tokens. */

/* ---------- Living contour field ---------- */
[data-contours]{position:relative;isolation:isolate;--contour-ink:var(--mint)}
.contour-field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 75% 85% at 62% 45%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 75% 85% at 62% 45%,#000 30%,transparent 78%)}
.has-photo .contour-field{-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 70%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 70%)}
.has-live-contours::before{display:none}

/* ---------- Reveal on scroll (position only: content is always visible) ---------- */
.reveal{transform:translateY(14px);transition:transform .7s var(--ease)}
.reveal.revealed{transform:none}

/* ---------- Calculator parts ---------- */
.tools-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tools-grid .tool-card.wide{grid-column:1/-1}
.tool-card select{width:100%}
.tool-card .field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tool-card .source{display:block;font-size:12px;color:var(--text-3);margin-top:4px;line-height:1.45}
.metric strong output,.metric strong .num{font-variant-numeric:tabular-nums}
.metric .band{display:block;font-size:12px;color:var(--text-3);margin-top:2px;font-variant-numeric:tabular-nums}
.tool-warning{margin:10px 0 0;padding:10px 12px;border-radius:var(--radius-xs);background:#fff7e6;border:1px solid #f3d9a4;color:#6b4a00;font-size:14px;line-height:1.5}
.tool-warning[hidden]{display:none}

/* Flow: carbon → persistent carbon, and gross → net CO₂e, each pair on one scale. */
.flow{display:grid;gap:9px;margin:16px 0 6px}
.flow-row{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr) 7.5em;align-items:center;gap:12px;font-size:14px}
.flow-row>span{color:var(--text-2)}
.flow-track{height:12px;border-radius:999px;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.flow-track i{display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:var(--grad);transition:width .8s var(--ease)}
.flow-row.co2 .flow-track i{background:var(--grad-vivid)}
.flow-row b{font:600 14px/1 var(--font);color:var(--text);text-align:right;font-variant-numeric:tabular-nums}

/* Charts are inline SVG; colours come from tokens via currentColor and classes. */
.chart{margin:14px 0 4px}
.chart h4{font-size:14px;margin:0 0 6px;color:var(--text-2);font-family:var(--font);font-weight:600}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .axis{stroke:var(--line-2);stroke-width:1}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .tick{fill:var(--text-3);font:11px var(--font);font-variant-numeric:tabular-nums}
.chart .bar{fill:url(#impactGrad)}
.chart .bar.muted{fill:var(--line-2)}
.chart .value{fill:var(--text);font:600 11px var(--font);font-variant-numeric:tabular-nums}

/* Readiness: score ring beside per-area bars. */
.readiness-summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;margin:8px 0 12px}
.score-ring{width:104px;height:104px}
.score-ring circle{fill:none;stroke-width:10}
.score-ring .track{stroke:var(--glass-2)}
.score-ring .fill{stroke:url(#impactGrad);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .9s var(--ease)}
.score-ring text{fill:var(--text);font:700 22px var(--font-display);text-anchor:middle;dominant-baseline:central}
.area-bars{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.area-bars li{display:grid;grid-template-columns:minmax(0,1fr) 5.5em;gap:10px;align-items:center;font-size:13.5px}
.area-bars .flow-track{grid-column:1/-1;height:8px}
.area-bars em{font-style:normal;color:var(--text-3);text-align:right;font-size:12.5px}

/* Planner result */
.planner-result{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 6px}

@media (max-width:860px){
 .tools-grid.three{grid-template-columns:minmax(0,1fr)}
 .metric-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
 .planner-result{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
 .tool-card .field-row{grid-template-columns:minmax(0,1fr)}
 .flow-row{grid-template-columns:minmax(0,1fr) 7em}.flow-track{grid-column:1/-1;order:3}
 .readiness-summary{grid-template-columns:minmax(0,1fr);justify-items:start}
}
@media (prefers-reduced-motion:reduce){
 .reveal{transform:none;transition:none}
 .flow-track i,.score-ring .fill{transition:none}
}

/* ---------- Members-only sections ---------- */
.members-gate{display:grid;gap:12px;justify-items:start;max-width:640px;padding:clamp(20px,2.6vw,30px);border-radius:var(--radius);background:var(--bg-raised);border:1px dashed var(--line-3)}
.members-gate p{margin:0}
.members-badge{font:600 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mint);display:inline-flex;align-items:center;gap:8px}
.members-badge::before{content:'';width:10px;height:12px;border:2px solid currentColor;border-radius:3px;box-shadow:inset 0 -5px 0 0 currentColor}
.members-request{display:grid;gap:12px;width:100%}
.members-request textarea{resize:vertical}
.members-gate .error{color:var(--rose)}