/* ==========================================================================
   macro.css - the two work examples on the Macroeconomic forecasting & analysis page (#green-var,
   #energy-prices), drawn by macro.js. They borrow the controls, readouts and blocks of ageing.css (wx-); names
   of their own start with gv- (Enel) or ep- (energy prices) so they cannot collide. Colours are the site tokens
   only; gold marks the result.
   ========================================================================== */

/* Opening: the title beside the figure, as in the long-term care example */
.wx--gvar .d-title,.wx--ep .d-title,.wx--rc .d-title{grid-column:1 / span 5}

/* The key to the opening figure: one swatch per layer, set like the Serie A legend */
.gv-legend{display:flex;flex-wrap:wrap;gap:4px 18px;margin:10px 0 2px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.gv-legend span{display:inline-flex;align-items:center;gap:7px}
.gv-legend i{display:inline-block;flex:none;width:12px;height:12px}
.gv-legend i.a{background:var(--rule-strong);opacity:.55}
.gv-legend i.b{background:var(--ink-2);opacity:.42}
.gv-legend i.c{background:var(--accent)}
.gv-legend i.t{height:2px;background:var(--ink)}

/* The shock, step by step: five steps like the data pipeline, the number of each in the mono */
.gv-steps .pipeline b{font:500 13.5px/1.4 var(--mono);color:var(--ink);font-weight:500}
/* The results by pass-through */
.gv-table{max-width:44rem}
.gv-table tbody tr.hi th,.gv-table tbody tr.hi td{color:var(--ink);font-weight:600}

@media (max-width:1100px){ .wx--gvar .d-title,.wx--ep .d-title,.wx--rc .d-title{grid-column:1 / -1} }
@media (max-width:860px){ .gv-table{max-width:none} }
@media (max-width:560px){ .gv-table td{white-space:normal} }

/* Figure: layers */
/* Opening figure: each column stacks what each step adds to the VaR. Every mark rests in its final state; the
   intro raises the layers in turn (0.15-1.8 s), then sets the tick and its value; still by about 2.6 s */
.gv-seg{transform-box:fill-box;transform-origin:50% 100%}
.gv-seg.a{fill:var(--rule-strong);fill-opacity:.55}
.gv-seg.b{fill:var(--ink-2);fill-opacity:.42}
.gv-seg.c{fill:var(--accent)}
.gv-tick{stroke:var(--ink);stroke-width:2}
.c-num.gv-val{fill:var(--ink)}
.gv-hit{fill:var(--ink);fill-opacity:0;pointer-events:all}
.gv-col .gv-hit{fill:var(--rule);transition:fill-opacity .2s}
.gv-col:hover .gv-hit,.gv-col:focus-visible .gv-hit{fill-opacity:.45}
.gv-col[data-read]:focus-visible{outline:none}

/* Figure: returns */
/* One year, before any shock: dots for the 19 years, the model's bell curve, the two cut-offs; gold marks the
   model's cut-off and the years that fall beyond it */
.gv-dot{fill:var(--ink-2)}
.gv-dot.hi{fill:var(--accent)}
.gv-bell{fill:none;stroke:var(--ink-3);stroke-width:1.2;stroke-linejoin:round}
.gv-wash{fill:var(--mark-soft)}
.gv-cut{stroke-width:1.4}
.gv-cut.m{stroke:var(--accent)}
.gv-cut.h{stroke:var(--ink)}
.c-label.gv-acc,.c-num.gv-acc{fill:var(--accent)}
.c-num.gv-ink{fill:var(--ink)}

/* Figure: carbon */
.gv-band{fill:var(--accent);fill-opacity:.14;transform-box:fill-box;transform-origin:0 50%}
.gv-yr{fill:var(--rule);transition:fill-opacity .2s}
.gv-yr:hover,.gv-yr:focus-visible{fill-opacity:.35}

.animate .gv.draw{animation:draw var(--t,1s) cubic-bezier(.4,.1,.2,1) var(--d,0s) both}
.animate .gv.fade{animation:hfade var(--t,.45s) ease var(--d,0s) both}
.animate .gv.rise{animation:gv-rise var(--t,.6s) cubic-bezier(.4,.1,.2,1) var(--d,0s) both}
.animate .gv.open{animation:gv-open var(--t,.8s) cubic-bezier(.4,.1,.2,1) var(--d,0s) both}
@keyframes gv-rise{from{transform:scaleY(0)}}
@keyframes gv-open{from{transform:scaleX(0);opacity:0}}

/* ================= Energy prices and industrial productivity ================= */
/* Figure: crisis - one dot per industry, the fitted slope in gold; dots beyond the scale are open rings */
.ep-dot{fill:var(--ink-2)}
.ep-dot.out{fill:none;stroke:var(--ink-2);stroke-width:1.2}
.ep-fit{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.c-num.ep-acc,.c-label.ep-acc{fill:var(--accent)}
/* Figure: expo - the top quartile in gold, the median dashed */
.ep-bar{fill:var(--ink-2);fill-opacity:.42;transform-box:fill-box;transform-origin:0 50%}
.ep-bar.hi{fill:var(--accent);fill-opacity:1}
.ep-med{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 3}
.ep-hit{fill:var(--rule);fill-opacity:0;transition:fill-opacity .2s}
.ep-row:hover .ep-hit,.ep-row:focus-visible .ep-hit{fill-opacity:.45}
.ep-row[data-read]:focus-visible{outline:none}
/* Figure: dyn - the response in ink, its 90% band soft, dots significant at 5% in gold */
.ep-band{fill:var(--mark-soft)}
.ep-line{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.ep-pt{fill:var(--ink-2)}
.ep-pt.hi{fill:var(--accent)}
.animate .ep.draw{animation:draw var(--t,1s) cubic-bezier(.4,.1,.2,1) var(--d,0s) both}
.animate .ep.fade{animation:hfade var(--t,.45s) ease var(--d,0s) both}
.animate .ep.grow{animation:gv-open var(--t,.5s) cubic-bezier(.4,.1,.2,1) var(--d,0s) both}

/* ================= The regional CGE examples (rc-) ================= */
/* Figure: regions - losses cream, gains gold, the national figure dashed */
.rc-bar{fill:var(--ink-2);fill-opacity:.42;transform-box:fill-box}
.rc-bar.hi{fill:var(--accent);fill-opacity:1}
.rc-it{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 3}
/* Figure: co2 - the baseline dashed, the gap washed */
.rc-base{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:5 4}
.rc-gap{fill:var(--mark-soft)}
/* The results explorer: the full model output, opened from the page */
.rc-explorer{grid-column:4 / span 9;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 28px;align-items:center;padding:20px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.rc-explorer p{max-width:56ch;color:var(--ink-2)}
.rc-explorer b{color:var(--ink);font-weight:600}
.rc-explorer ul{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px 18px;font:400 12.5px/1.6 var(--mono);color:var(--ink-3)}
@media (max-width:860px){ .rc-explorer{grid-column:1 / -1;grid-template-columns:1fr} }