/* extra pages (rankings, compare, explorer, glossary, sources): tokens come from style.css */
.static.xpage{max-width:none}
.xpage .page-h h1{max-width:24ch}
.xhero{margin:6px 0 22px;padding:22px 24px;border:1px solid var(--line);border-left:6px solid var(--hi-edge);border-radius:var(--r-card);background:var(--bg2)}
.xbig{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:8px}
.xbig b{font-size:clamp(44px,9vw,72px);line-height:1;letter-spacing:-.03em;font-weight:700;color:var(--acc)}
.xbig span{font-size:clamp(16px,2.4vw,20px);font-weight:600;max-width:46ch;line-height:1.3}
.xhero .lead{margin:0;max-width:75ch}
.xpage .card{margin:0 0 20px}
.xpage .tw{overflow-x:auto}
.xpage .sortable th,.xpage .sortable td{white-space:nowrap}
.xpage tr.hi>*{background:var(--hi);color:var(--hi-ink)}
.xpage tr.hi a{color:var(--hi-ink)}
.xcmp td.win{background:var(--hi);color:var(--hi-ink);font-weight:700}
.xcmp th,.xcmp td{white-space:normal}
.xbars{max-width:none}
.xbars li.hi .b-n{font-weight:700}
.xbars li.hi{background:var(--hi);color:var(--hi-ink);border-radius:var(--r-bar)}
.xbars li.hi a{color:var(--hi-ink)}
.xbars li.hi .b-t i{background:var(--hi-ink)}
.xrl{margin:0}.xrl ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
.xrl li{display:grid;align-items:center;gap:4px 16px;padding:7px 4px;border-bottom:1px solid var(--line);grid-template-columns:30px minmax(110px,170px) 1fr 64px}
@media (min-width:1000px){.xrl ol{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (max-width:720px){.xrl li{grid-template-columns:26px 1fr 64px;grid-template-areas:"r n v" ". t t"}.xrl .b-r{grid-area:r}.xrl .b-n{grid-area:n}.xrl .b-v{grid-area:v}.xrl .b-t{grid-area:t}}
.ysel{margin:0 0 16px;max-width:75ch}
.ysel label{display:block;margin-bottom:6px;font-weight:600}
.ysel select,.xrow select,.xrow input,.xexp select,.xpick select{font:inherit;padding:9px 12px;border:1px solid var(--ctl);border-radius:var(--r-ctl);background:var(--bg);color:var(--ink);min-height:44px;max-width:100%}
.yout{margin:10px 0 0;font-size:18px;line-height:1.45;min-height:1.5em}
.xmap .usmap path{transition:stroke-width .1s}
.usmap path.sel{stroke:var(--ink);stroke-width:2.4}
.usmap .pa{fill:var(--s1)}.usmap .pb{fill:var(--s2)}
.xleg i.pa{background:var(--s1)}.xleg i.pb{background:var(--s2)}
.xleg{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:8px 0 0}
.xleg i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.xtiles{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;padding:0;margin:0}
.xtiles a{display:flex;flex-direction:column;gap:2px;height:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-panel);text-decoration:none;color:var(--ink);background:var(--bg)}
.xtiles a:hover,.xtiles a:focus-visible{border-color:var(--acc);background:var(--bg2)}
.xtiles b{font-size:17px}.xtiles span{font-size:14px;color:var(--ink2)}
.xlinks li{margin:4px 0}
.xdrv li{margin:2px 0}
.xrow{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:10px 0}
.xrow label{font-weight:600}
.xrow input[type=number]{width:9em}
.xrow input[type=range]{width:min(320px,100%)}
.xout{margin-top:12px}
.xout li b.xgood{color:var(--acc)}
.xstack{display:flex;height:46px;border-radius:var(--r-panel);overflow:hidden;margin:10px 0 6px;font-size:14px;font-weight:600}
.xstack i{display:flex;align-items:center;padding:0 12px;flex:0 0 var(--w);min-width:0;font-style:normal;overflow:hidden;white-space:nowrap}
.xstack .s1{background:var(--s1);color:#fff}.xstack .s2{background:var(--track);color:var(--ink)}
.xflow{list-style:none;counter-reset:xf;padding:0;margin:8px 0 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.xflow li{border:1px solid var(--line);border-radius:var(--r-panel);padding:12px 14px;background:var(--bg2)}
.xflow b{display:block;margin-bottom:4px}.xflow span{font-size:14.5px;color:var(--ink2)}
.xsrc th,.xsrc td{white-space:normal;vertical-align:top;min-width:120px}
.xplot{margin:10px 0}
.xplot svg{width:100%;height:auto;max-width:none}
.scat .trend{stroke:var(--ink2);stroke-width:1.5;stroke-dasharray:6 4;fill:none}
.scat .sc.hi{fill:var(--s2);fill-opacity:1;stroke:var(--ink);stroke-width:2}
.scat .ptl{font-size:11px;fill:var(--ink2)}
.scat .sc{cursor:pointer}
.gl{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.gl-i{border:1px solid var(--line);border-radius:var(--r-panel);padding:14px 18px;background:var(--bg)}
.gl-i h3{margin:0 0 6px;font-size:19px}
.gl-i p{margin:6px 0}
.gl-ex{background:var(--bg2);border-radius:var(--r-bar);padding:8px 10px}
.gl-nav{display:flex;flex-wrap:wrap;gap:6px}
.gl-nav a{padding:3px 10px;border:1px solid var(--line);border-radius:var(--r-pill);text-decoration:none}
#gl-q{font:inherit;padding:9px 12px;border:1px solid var(--ctl);border-radius:var(--r-ctl);background:var(--bg);color:var(--ink);width:min(420px,100%);min-height:44px}
.gl-i[hidden]{display:none}
@media (max-width:720px){
  .xhero{padding:16px}
  .gl{grid-template-columns:1fr}
  .xrow input[type=number]{width:100%}
}

.xdia .dia-r{fill:var(--s1);fill-opacity:.3;stroke:var(--s1);stroke-width:2}.xdia .dia-t{font-size:15px;font-weight:600;fill:var(--ink)}

.xcmp{min-width:560px}