/* The Graphs page: the line, then three stacked-area charts that open into their parts */
.graphs{max-width:1240px;margin:0 auto;padding:calc(var(--nav-h) + 36px) clamp(16px,3vw,40px) 96px}
.g{margin:0 0 96px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.g h1,.g h2{font:400 clamp(22px,2.6vw,30px)/1.2 var(--font);margin:0 0 18px;text-wrap:balance}
.g .sub{color:var(--ink2);font-size:14px;margin:0 0 18px;max-width:75ch}
.g .note{color:var(--ink3);font-size:12px;line-height:1.5;margin:10px 0 0;max-width:110ch}
.cue{display:inline-block;margin-top:28px;color:var(--ink2);font-size:14px;text-decoration:none;border-bottom:1px solid var(--rule)}
.cue:hover{color:var(--ink)}
.chart{position:relative;width:100%}
.chart svg{display:block;overflow:visible}
.chart text{font-family:var(--font);fill:var(--ink3);font-size:11px}
.tip{position:absolute;z-index:5;pointer-events:none;background:rgba(5,8,13,.94);border:1px solid var(--rule);padding:8px 11px;font:12px/1.5 var(--font);color:var(--ink);min-width:150px;opacity:0;transition:opacity .12s;white-space:nowrap}
.tip b{display:block;font-weight:700;font-size:13px}
.tip span{color:var(--ink2)}

/* stacked charts */
.ctrl{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:0 0 14px}
.seg{display:inline-flex;border:1px solid var(--rule)}
.seg button{font:12px var(--font);letter-spacing:.04em;color:var(--ink2);background:none;border:0;padding:6px 12px;cursor:pointer}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.seg button:focus-visible,.back:focus-visible,.leg button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.body{display:flex;gap:28px;align-items:flex-start}
.plot{flex:1;min-width:0;position:relative}
.back{position:absolute;right:12px;top:0;z-index:4;font:12px var(--font);color:var(--ink);background:rgba(5,8,13,.8);border:1px solid var(--rule);padding:5px 10px;cursor:pointer}
.back:hover{border-color:var(--ink2)}
.band{transition:opacity .2s, filter .2s;cursor:default}
.band.can{cursor:pointer}
.band.hi{filter:brightness(1.35) saturate(1.1)}
.leg{flex:0 0 250px;min-width:0;font-size:12.5px}
.leg h3{font:700 13px/1.3 var(--font);margin:0 0 10px;color:var(--ink)}
.leg h3 span{display:block;font-weight:400;font-size:11px;color:var(--ink3);margin-top:2px}
.leg .list{max-height:380px;overflow:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(236,230,216,.25) transparent}
.leg button{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;font:12.5px/1.35 var(--font);color:var(--ink);background:none;border:0;padding:4px 0;cursor:pointer;transition:opacity .2s}
.leg button i{flex:0 0 12px;height:12px;margin-top:2px;border-radius:2px}
.leg button span{min-width:0}
.leg button em{display:block;font-style:normal;color:var(--ink3);font-size:11px;margin-top:2px;white-space:normal}
.leg button.dim{opacity:.35}
.leg .hint{color:var(--ink3);font-size:11px;margin:12px 0 0}
@media (max-width:820px){.leg{display:none}}   /* too narrow for the legend beside the chart: it goes, rather than dropping below; hover still names each band */