/* ==========================================================================
   health.css - the work example "Mortality projections by health status" (#health-mortality) on the Macroeconomic
   forecasting & analysis page, drawn by health.js. It borrows the controls, readouts and blocks of ageing.css
   (wx-); names of its own start with hm- so they cannot collide. Colours are the site tokens only: ink marks
   the healthy, gold the unhealthy, and each group's projection fan is a wash of its own colour.
   ========================================================================== */

/* Opening: the title beside the figure, as in the other work examples */
.wx--hm .d-title{grid-column:1 / span 5}
@media (max-width:1100px){ .wx--hm .d-title{grid-column:1 / -1} }

.hm-lineH{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.hm-lineU{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.hm-lineB{fill:none;stroke:var(--ink-2);stroke-width:1.3;stroke-dasharray:4 3;stroke-linecap:round}
.hm-bandH{fill:var(--band)}
.hm-bandU{fill:var(--accent)}
.hm-dotH,.hm-cellH{fill:var(--ink)}
.hm-dotU,.hm-cellU{fill:var(--accent)}
.hm-cellH,.hm-cellU{fill-opacity:.55}
.c-label.hm-acc,.c-num.hm-acc{fill:var(--accent)}

/* Hover targets: a faint column under the pointer */
.hm-hit{fill:var(--rule);fill-opacity:0;pointer-events:all;transition:fill-opacity .2s}
.hm-hit:hover,.hm-hit:focus-visible{fill-opacity:.35}

/* Scenarios: two rows of controls, then the preset's own sentence, then the figure */
.wx-body .wx-seg + .wx-seg{margin-top:2px}
.hm-scdesc{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:62ch;min-height:3.1em}
.hm-scdesc + .wx-fig{margin-top:10px}

/* The year control sits above the curves, as the segmented controls do */
.wx-body .wx-range + .wx-fig{margin-top:4px}

.animate .hm.draw{animation:draw var(--t,1s) cubic-bezier(.4,.1,.2,1) var(--d,0s) both}
.animate .hm.fade{animation:hfade var(--t,.45s) ease var(--d,0s) both}

/* The study page: one picture per country, each a large link to that country's results. The text sits on a dark
   wash at the foot of the picture, so it keeps its own light colour whatever the page's ground. */
.hm-countries{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.hm-country{position:relative;display:block;aspect-ratio:4 / 5;overflow:hidden;isolation:isolate;text-decoration:none;color:#F7F3E6;background:#2E3B19}
.hm-country img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.hm-country::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(14,19,8,.88) 0%,rgba(14,19,8,.62) 38%,rgba(14,19,8,0) 70%)}
.hm-country-text{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:7px;padding:clamp(16px,2vw,24px)}
.hm-country-name{font:500 clamp(1.5rem,2.3vw,2.05rem)/1.08 var(--serif);letter-spacing:-.012em}
.hm-country-meta{font-size:13.5px;line-height:1.45;color:rgba(247,243,230,.86)}
.hm-country-stat{font:500 13px/1.45 var(--mono);color:#F7F3E6}
.hm-country-go{margin-top:6px;font-size:14.5px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(247,243,230,.5);transition:text-decoration-color .2s}
.hm-country:hover img,.hm-country:focus-visible img{transform:scale(1.045)}
.hm-country:hover .hm-country-go,.hm-country:focus-visible .hm-country-go{text-decoration-color:#F7F3E6}
.hm-country:focus-visible{outline:2px solid var(--mark);outline-offset:3px}
@media (prefers-reduced-motion: reduce){ .hm-country img{transition:none} .hm-country:hover img{transform:none} }
@media (max-width:900px){ .hm-countries{grid-template-columns:1fr} .hm-country{aspect-ratio:5 / 4} }
@media (max-width:600px){ .hm-country-survey{display:none} }
.block--countries .block-label{grid-column:1 / -1}

/* The share of adults in good health: years without interviews */
.hm-gap{fill:var(--rule);fill-opacity:.4}