/* gw-chart-page.css — one chart's own page (/charts/<id>.html, scripts/build-chart-pages.mjs).
 * Sits on gw-elite.css + gw-elite-research.css (<body data-ge="research" class="ge-skin">): the research light,
 * Barlow Condensed headings, Bebas numerals, Barlow body. Every rule starts at a cp- class. The chart itself is
 * the gallery's light poster (GWScatter), framed like the gallery frames it. */
.cp{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 16px calc(104px + env(safe-area-inset-bottom,0px))}
.cp *,.cp *::before,.cp *::after{box-sizing:border-box}

/* ── hero ── */
.cp-hero{padding:20px 0 2px}
.cp-hero .ge-kick a{color:inherit;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ac) 45%,transparent)}
.cp-h1{margin:10px 0 0;max-width:1000px;font:800 clamp(32px,8.2vw,60px)/.98 var(--ge-cond);letter-spacing:.003em;color:#fff;text-wrap:balance;overflow-wrap:anywhere}
.cp-h1 span{font-weight:700;font-size:.5em;letter-spacing:.02em;color:var(--ac);white-space:normal}
.cp-lede{max-width:780px;margin:12px 0 0;color:#c4cfdd;font-size:15.5px;line-height:1.5}
@media(min-width:700px){.cp-lede{font-size:16.5px;line-height:1.55;margin-top:14px}}
.cp-facts{margin-top:12px;max-width:none}
.cp-facts .ge-fact span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── the chart and its side panel ── */
.cp-main{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:22px}
@media(min-width:980px){.cp-main{grid-template-columns:minmax(0,620px) minmax(0,1fr);gap:26px;align-items:start}.cp-side{position:sticky;top:16px}}
.cp-fig{margin:0;min-width:0}
@media(max-width:979px){.cp-fig,.cp-side{max-width:680px}}
.cp-frame{border:1px solid var(--ge-line2);border-radius:16px;overflow:hidden;background:#f2f3f5;line-height:0;box-shadow:0 30px 80px -34px rgba(0,0,0,.7)}
.cp-frame.wait{aspect-ratio:1080/1350}
@media(max-width:593px){.cp-frame.wait{aspect-ratio:720/1240}}
.cp-frame noscript p{margin:0;padding:48px 22px;line-height:1.5;text-align:center;font:500 14px var(--ge-body);color:#4a5360}
.cp-note{margin:9px 2px 0;font:600 13px/1.4 var(--ge-cond);letter-spacing:.02em;color:var(--ge-faint)}
.cp-pick{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.cp-pick span{font:700 13px/1 var(--ge-cond);letter-spacing:.07em;text-transform:uppercase;color:var(--ge-dim)}
.cp-pick select{flex:1;min-width:0;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--ge-line2);background:rgba(13,21,32,.86);color:var(--ge-tx);font:600 16px var(--ge-body)}

.cp-side{min-width:0}
.cp-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cp-act{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 12px;border-radius:12px;border:1px solid var(--ge-line2);background:rgba(13,21,32,.86);
  color:var(--ge-tx);font:700 15px/1.1 var(--ge-cond);letter-spacing:.06em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer}
.cp-act:hover{border-color:color-mix(in srgb,var(--ac) 55%,transparent)}
.cp-act.main{background:var(--ac);border-color:var(--ac);color:#05080e;box-shadow:0 10px 26px -12px var(--ac)}
.cp-act.wide{grid-column:1/-1;background:transparent}
.cp-act.done{border-color:var(--ge-up);color:var(--ge-up)}
.cp-act.main.done{color:#05080e}
.cp-how{margin:12px 2px 0;color:var(--ge-dim);font-size:14px;line-height:1.5}
.cp-cap{margin-top:14px;border:1px solid var(--ge-line);border-radius:16px;background:rgba(9,16,26,.86)}
.cp-caph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px 0}
.cp-caph h2{margin:0;font:800 17px/1 var(--ge-cond);letter-spacing:.07em;text-transform:uppercase;color:var(--ge-tx)}
.cp-caph span{font:600 12.5px/1 var(--ge-cond);letter-spacing:.03em;color:var(--ge-faint);white-space:nowrap}
.cp-cap pre{margin:0;padding:10px 14px 14px;max-height:460px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:500 13.5px/1.55 var(--ge-body);color:#c4cfdd}

/* ── every point, as a table ── */
.cp-data .ge-sh p{max-width:640px}
.cp-tw.fit{max-width:940px}
.cp-tw{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ge-line);border-radius:16px;background:rgba(9,16,26,.88)}
.cp-t{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.cp-t th,.cp-t td{padding:9px 12px;border-bottom:1px solid var(--ge-line);text-align:left;white-space:nowrap}
.cp-t thead th{vertical-align:bottom;white-space:normal;min-width:62px;max-width:170px;font:700 12px/1.2 var(--ge-cond);letter-spacing:.05em;text-transform:uppercase;color:var(--ge-dim);background:rgba(13,21,32,.6)}
.cp-t tbody th{font-weight:600;color:var(--ge-tx);position:sticky;left:0;z-index:1;background:#0a121d}
.cp-t td{color:#c4cfdd}
.cp-t td.n{text-align:right}
.cp-t thead th.n{text-align:right}
.cp-t a{color:var(--ge-tx);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ac) 50%,transparent)}
.cp-t a:hover{color:var(--ac)}
.cp-t tbody tr:last-child>*{border-bottom:0}
.cp-t .cp-sub{display:block;margin-top:3px;font:500 12.5px/1.3 var(--ge-body);color:var(--ge-dim);white-space:normal}
.cp-t tbody tr.cp-g th{position:static;padding:14px 12px 7px;font:800 13px/1.2 var(--ge-cond);letter-spacing:.07em;text-transform:uppercase;color:var(--ac);background:rgba(13,21,32,.6)}
@media(max-width:599px){.cp-t{font-size:13.5px}.cp-t th,.cp-t td{padding:9px 9px}.cp-t thead th{min-width:0}}
@media(hover:hover){.cp-t tbody tr:hover>*{background-color:rgba(26,38,56,.9)}}
.cp-t.wk td{text-align:right}
.cp-team h3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:22px 0 8px;font:800 21px/1.1 var(--ge-cond);letter-spacing:.01em;color:var(--ge-tx)}
.cp-team h3 a{color:var(--ge-tx);text-decoration:none}
.cp-team h3 span{font:600 13px var(--ge-cond);letter-spacing:.05em;text-transform:uppercase;color:var(--ge-faint)}
.cp-team:first-of-type h3{margin-top:4px}

/* ── onward ── */
.cp-rel{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media(min-width:640px){.cp-rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.cp-rel{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cp-rel a{display:block;min-height:44px;padding:14px 16px;border-radius:16px;border:1px solid var(--ge-line);text-decoration:none;
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--ac) 16%,transparent),transparent 62%),linear-gradient(180deg,rgba(13,21,32,.92),rgba(9,16,26,.96));transition:border-color .15s}
.cp-rel a:hover{border-color:color-mix(in srgb,var(--ac) 50%,transparent)}
.cp-rel span{display:block;font:700 12px/1.2 var(--ge-cond);letter-spacing:.07em;text-transform:uppercase;color:var(--ac)}
.cp-rel b{display:block;margin-top:5px;font:700 19px/1.15 var(--ge-cond);color:var(--ge-tx)}
.cp-tools{display:flex;flex-wrap:wrap;gap:8px}
.cp-fine{max-width:780px;margin:30px 0 0;color:var(--ge-faint);font-size:13px;line-height:1.6}
.cp-fine a{color:var(--ge-dim)}

.cp-toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:90vw;padding:10px 14px;border-radius:10px;z-index:2147483002;
  background:rgba(8,12,18,.96);border:1px solid color-mix(in srgb,var(--ac) 55%,transparent);color:#e9f0f6;font:600 13px var(--ge-body);text-align:center;opacity:0;transition:opacity .25s;pointer-events:none}
.cp-toast.on{opacity:1}
@media(min-width:900px){.cp-toast{bottom:28px}}