/* Charts and Facts (/charts/, /facts/, each chart and fact page and their embeds), generated by
   ops/build_charts.py. The library hero carries the search, topic chips and tag chips; the grid holds
   link cards with a live thumb chart or a fact card. A chart or fact page puts the figure and its
   share row beside an aside (In context, About the data) from 1024px. Embeds: a framed card for
   iframes, a flat frame for chart.png (?shot=chart) and the 1200x630 social card (?shot=card).
   Layout only; tokens from ka.css. Usage: site/DESIGN.md "Charts and Facts pages". */

/* ---------- library: search, topic chips, tag chips, count (buttons, so they show only with JS) ---------- */
.lib-tools{display:none}
html.js .lib-tools{display:block}
.lib-search{position:relative;max-width:560px;margin-bottom:16px}
.lib-search input{display:block;width:100%;height:52px;margin:0;padding:0 50px 0 46px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);box-shadow:var(--sh);color:var(--ink);font:500 16px/1.2 var(--sans);-webkit-appearance:none;appearance:none;transition:border-color var(--dur-hover) var(--ease-ui)}
.lib-search input::placeholder{color:var(--mut);opacity:1}
.lib-search input:hover{border-color:var(--blue2)}
.lib-search input:focus{border-color:var(--blue2)}
.lib-search input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.lib-search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.lib-ico{position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;fill:none;stroke:var(--mut);stroke-width:2;stroke-linecap:round;pointer-events:none}
.lib-clear{position:absolute;right:6px;top:50%;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:10px;background:none;color:var(--mut);cursor:pointer;transition:background-color var(--dur-hover) var(--ease-ui),color var(--dur-hover) var(--ease-ui)}
.lib-clear::before,.lib-clear::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.8px;margin:-.9px 0 0 -7px;border-radius:1px;background:currentColor;rotate:45deg}
.lib-clear::after{rotate:-45deg}
.lib-clear:hover{background:var(--tint);color:var(--ink)}
.lib-clear:focus-visible{outline-offset:-2px}
.lib-chips{display:flex;flex-wrap:wrap;gap:8px}
.lib-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--body);font:600 var(--fs-sm)/1 var(--sans);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color var(--dur-hover) var(--ease-ui),background-color var(--dur-hover) var(--ease-ui),border-color var(--dur-hover) var(--ease-ui),scale var(--dur-press) var(--ease-ui)}
.lib-chip-n{color:var(--mut);font-weight:600;font-variant-numeric:tabular-nums;transition:color var(--dur-hover) var(--ease-ui)}
.lib-chip:hover{border-color:var(--blue2);color:var(--ink)}
.lib-chip:active{scale:.97}
.lib-chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.lib-chip[aria-pressed=true] .lib-chip-n{color:var(--band-mut)}
.lib-chip:disabled{opacity:.45;cursor:default;border-color:var(--line)}
.lib-chip:disabled:hover{color:var(--body)}
.lib-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.lib-tag{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--tint-line);border-radius:999px;background:var(--tint);color:var(--blue);font:600 13px/1 var(--sans);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color var(--dur-hover) var(--ease-ui),background-color var(--dur-hover) var(--ease-ui),border-color var(--dur-hover) var(--ease-ui)}
.lib-tag::before{content:"#";margin-right:2px;color:var(--mut);font-weight:500}
.lib-tag:hover{background:var(--tint-2);border-color:var(--blue2)}
.lib-tag[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:var(--surface)}
.lib-tag[aria-pressed=true]::before{color:inherit}
.lib-count{margin-top:14px;font-size:var(--fs-sm);line-height:1.5;color:var(--mut)}
.lib-about{margin-top:4px;max-width:62ch;font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
.lib-dl{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin:-10px 0 22px;font-size:var(--fs-sm);color:var(--body)}
.lib-dl .datafig-dl{min-height:40px}
@media (max-width:760px){
  /* one row of chips that scrolls sideways, edge to edge; the page itself stays 390 wide */
  .lib-chips,.lib-tags{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
  .lib-chips::-webkit-scrollbar,.lib-tags::-webkit-scrollbar{display:none}
  .lib-chip{flex:none;min-height:44px}
  .lib-tag{flex:none;min-height:44px}
}

/* ---------- the grid: link cards (a live thumb chart, or a fact card) ---------- */
.lib-sec{padding-bottom:clamp(56px,7vw,96px)}
.lib-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start}
@media (min-width:640px){.lib-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1000px){.lib-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.lib-item{display:flex;min-width:0}
a.lib-card,a.lib-fact{display:flex;flex-direction:column;width:100%;min-width:0}
.lib-card{padding:14px 14px 20px}
.lib-thumb{position:relative;margin-bottom:16px;padding:14px 16px 12px;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
/* the chart draws at 0.56 of its width; hold that space until it does */
html.js .lib-thumb:not(.kc-drawn):not(.lib-pic)::before{content:"";display:block;aspect-ratio:25/14;min-height:90px}
.lib-thumb noscript img,.lib-thumb>img{display:block;width:100%;height:auto;border-radius:8px}
/* .lib-pic: a card that shows the chart's thumb.webp as its picture (build_charts.chart_card static=True, the
   homepage), with no ka-charts.js on the page; the picture wipes in left to right (data-build="wipe") */
.lib-body{display:flex;flex:1;flex-direction:column;padding:0 6px}
.lib-kind{margin-bottom:8px;font:700 var(--fs-xs)/1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.lib-title{margin:0;font:600 var(--fs-lg)/1.35 var(--disp);letter-spacing:-.01em;color:var(--ink);transition:color var(--dur-hover) var(--ease-ui)}
.lib-src{margin-top:auto;padding-top:12px;font-size:13px;line-height:1.45;color:var(--mut)}
@media (hover:hover) and (pointer:fine){.lib-card:hover .lib-title{color:var(--blue)}}
.lib-fact{padding:clamp(20px,2.4vw,26px)}
/* a phone: each chart is a row, its thumb beside its title, so several titles fit on one screen (as the
   hub's list); fact cards set the number smaller and close up */
@media (max-width:639px){
  .lib-grid{gap:12px}
  a.lib-card{flex-direction:row;align-items:center;gap:14px;padding:10px 14px 10px 10px}
  .lib-card .lib-thumb{flex:0 0 42%;margin:0;padding:8px 10px}
  .lib-card .lib-body{padding:0}
  .lib-card .lib-kind{margin-bottom:4px}
  .lib-card .lib-title{font-size:var(--fs-ui);line-height:1.4}
  .lib-card .lib-src{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-top:6px;font-size:12.5px}
  .lib-fact{padding:18px 18px 16px}
  .lib-fact .kf-num{font-size:38px}
  .lib-fact .kf-ring{width:48px}
  .lib-fact .kf-rule{margin:10px 0 10px}
}
/* the grid shows the number, its unit and the statement; the watermark row is for shared copies */
.lib-fact .kc-brand{display:none}
.lib-fact .kf-stmt{font-size:var(--fs-ui)}
.lib-fact .kf-src{margin-top:auto;padding-top:12px}
.lib-fact .kf{flex:1}
.lib-fact>div{display:flex;flex:1;flex-direction:column}
.lib-empty{margin-top:8px;padding:clamp(32px,5vw,56px) 24px;border:1px dashed var(--line-2);border-radius:var(--r);text-align:center;color:var(--body)}
.lib-empty p{margin-inline:auto}
.lib-empty-h{margin-bottom:6px;font:600 var(--fs-xl)/1.3 var(--disp);color:var(--ink)}
.lib-note{margin-top:clamp(28px,4vw,40px);font-size:var(--fs-sm);line-height:1.6;color:var(--mut)}

/* ---------- a chart or fact page ---------- */
.ch-hero h1{font-size:var(--fs-3xl);max-width:26ch;letter-spacing:-.03em;line-height:1.15}
.ch-hero .sub{max-width:64ch;margin-bottom:0}
.ch-hero.hero.page{padding-bottom:clamp(28px,4vw,44px)}
.ch-sec{padding-bottom:clamp(48px,6vw,80px)}
.ch-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,40px);align-items:start}
@media (min-width:1024px){.ch-grid{grid-template-columns:minmax(0,1fr) 320px}}
.ch-main{display:grid;gap:16px;min-width:0}
.ch-fig .datafig-body{margin-top:0}
.ch-fig .datafig-table{margin-top:18px}
.ch-fig .datafig-body noscript img{display:block;width:100%;height:auto}
.ch-side{display:grid;gap:clamp(24px,3vw,32px);min-width:0}
.ch-side>.side-block,.ch-about>.side-block{padding:0}
/* a chart page: the share row (Embed, Cite, Share, Download PNG) and In context sit beside the figure
   from 1024px, sticky, so that column never stands empty beside a tall chart; About the data runs under
   the figure. Below 1024px: the figure, the share row, In context, About the data. */
@media (min-width:1024px){
  .ch-chart{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"main side" "about side"}
  .ch-chart>.ch-main{grid-area:main}
  .ch-chart>.ch-side{grid-area:side;position:sticky;top:calc(var(--hdr-h) + 24px)}
  .ch-chart>.ch-about{grid-area:about}
}
/* a chart's share row is two lines while it is under 520px wide (ka.css "Share"): in the 320px aside
   and on a phone. Hold that height until ka-share.js fills it, so In context never moves down. */
@media (max-width:567px){html.js .ch-chart .ka-share:empty{min-height:96px}}
@media (min-width:1024px){html.js .ch-chart .ka-share:empty{min-height:88px}}
.side-h{margin:0 0 12px;font:700 var(--fs-xs)/1.25 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
a.ctx-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 20px}
.ctx-kind{font:600 var(--fs-xs)/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.ctx-t{font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
.ctx-t b{display:block;margin-top:4px;font:600 var(--fs-lg)/1.35 var(--disp);letter-spacing:-.01em;color:var(--ink);transition:color var(--dur-hover) var(--ease-ui)}
.ctx-go{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:600 var(--fs-sm)/1.3 var(--sans);color:var(--blue)}
.ctx-go .arr{transition:translate var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ctx-card:hover .ctx-t b{color:var(--blue)}.ctx-card:hover .ctx-go .arr{translate:3px 0}}
.about-box{padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.about-dl{display:grid;gap:14px;margin:0}
.about-dl dt{margin-bottom:3px;font:600 var(--fs-sm)/1.35 var(--sans);color:var(--ink)}
.about-dl dd{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--body)}
.src-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.src-list a{overflow-wrap:anywhere}
.src-loc{display:block;margin-top:2px;font-size:13px;line-height:1.5;color:var(--mut)}
.about-box .datafig-dl{margin-top:10px}
.lic{margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--mut)}
/* related facts and charts, the related service */
.rel-sec{padding-bottom:clamp(56px,7vw,96px)}
.rel-block+.rel-block{margin-top:clamp(40px,5vw,64px)}
.rel-h{margin-bottom:18px;font-size:var(--fs-2xl)}
.rel-grid .lib-title{font-size:var(--fs-ui)}
/* related charts come in fours (two across, four from 1000px), so the grid fills; a list of three fact
   cards lets its last card take the full row while the grid is two across */
@media (min-width:1000px){.rel-c{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
@media (min-width:640px) and (max-width:999px){.rel-grid:not(.rel-c)>li:last-child:nth-child(odd){grid-column:1/-1}}
/* a short list fills its row (build_charts.py adds rel-n<count>). One item takes the whole row, laid out
   sideways: a chart's thumb beside its title, as on a phone; a fact's number, rule and bars in the left
   column and its statement and source in the right (two columns with a forced break, so each stacks at
   its own height). Two items take half the row each from 1000px, two charts sideways as well, so their
   thumbs stay the height of the four-across grid's; three charts take thirds. */
@media (min-width:640px){
  .lib-grid.rel-n1{grid-template-columns:minmax(0,1fr)}
  .rel-n1 a.lib-card{flex-direction:row;align-items:center;gap:clamp(20px,3vw,40px);padding:14px clamp(20px,3vw,40px) 14px 14px}
  .rel-n1 .lib-card .lib-thumb{flex:0 0 min(40%,400px);margin:0}
  .rel-n1 .lib-card .lib-body{padding:0}
  .rel-n1 .lib-card .lib-title{font-size:var(--fs-xl);line-height:1.3}
  .rel-n1 .lib-card .lib-src{margin-top:0}
  .rel-n1 .lib-fact{padding:clamp(24px,3vw,36px)}
  .rel-n1 .lib-fact .kf{display:block;columns:2;column-gap:clamp(32px,5vw,72px);column-rule:1px solid var(--line)}
  .rel-n1 .lib-fact .kf-top,.rel-n1 .lib-fact .kf-bars{break-inside:avoid}
  .rel-n1 .lib-fact .kf-stmt{break-before:column;font-size:var(--fs-lg)}
}
@media (min-width:1000px){
  .lib-grid.rel-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel-n2 a.lib-card{flex-direction:row;align-items:center;gap:20px;padding:14px 20px 14px 14px}
  .rel-n2 .lib-card .lib-thumb{flex:0 0 46%;margin:0}
  .rel-n2 .lib-card .lib-body{padding:0}
  .lib-grid.rel-c.rel-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.rel-svc .fee-list{margin:0;padding:6px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
/* the fact page: the statement is the title, so the card leads with the number */
.fx-hero .fx-h1{max-width:30ch;margin-bottom:clamp(24px,3vw,36px);font-size:var(--fs-3xl);letter-spacing:-.025em;line-height:1.2}
.fx-card{padding:clamp(22px,3.6vw,40px)}
.fx-card .kf-stmt{display:none}
.fx-card .kf-ctx{margin-top:0}

/* ---------- embeds (no chrome): a framed card in an iframe ---------- */
.emb-html,.emb-html body{background:transparent;min-height:0}
.emb-body{margin:0}
.emb{display:block;margin:0;padding:clamp(16px,4vw,26px);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.emb-brand,.emb-meta{display:none}
.emb-t{max-width:40ch;margin:0 0 6px;font-size:clamp(18px,2.6vw,23px);line-height:1.25;letter-spacing:-.015em}
.emb-t a{color:inherit;text-decoration:none}
.emb-t a:hover{color:var(--blue)}
.emb-s{max-width:72ch;margin-bottom:18px;font-size:var(--fs-sm);line-height:1.55;color:var(--body)}
.emb-chart noscript img{display:block;width:100%;height:auto}
.emb-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 16px;margin-top:10px}
.emb-view{display:inline-flex;align-items:center;gap:6px;min-height:36px;font:600 13px/1.3 var(--sans);color:var(--blue);text-decoration:none}
.emb-view::after{content:"";width:.6em;height:.6em;background:currentColor;-webkit-mask:var(--ext) center/contain no-repeat;mask:var(--ext) center/contain no-repeat;transition:translate var(--dur-ui) var(--ease-out)}
.emb-view:hover{text-decoration:underline}
@media (hover:hover) and (pointer:fine){.emb-view:hover::after{translate:.12em -.12em}}
.emb-lic{max-width:none;font-size:12px;line-height:1.45;color:var(--mut)}
.emb-fx .kf-num{font-size:clamp(48px,11vw,80px)}
.emb-k-fact .emb{padding:clamp(22px,5vw,32px)}
.emb>:last-child{margin-bottom:0}
/* a frame shorter than the embed (html.emb-tight, set by the embed's script, since most hosts ignore
   its height message): the card takes the frame's height and the chart scales into the room left, so
   the brand row, the source and the link back stay in view */
.emb-tight,.emb-tight body{height:100%;overflow:hidden}
.emb-tight .emb{display:flex;flex-direction:column;height:100vh}
.emb-tight .emb>*{flex:none}
.emb-tight .emb-fit{flex:1 1 0;min-height:0;overflow:hidden}
.emb-tight .emb-chart{transform-origin:50% 0}
.emb-brand .kc-k{display:block;flex:none;background:var(--grad)}
.emb-brand .kc-k svg{display:block;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.emb-word b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* chart.png (?shot=chart, html.emb-png): the same frame, flat, 800 CSS px wide at 2x */
.emb-png .emb{padding:30px 34px 22px;border:0;border-radius:0}
.emb-png .emb-t{max-width:52ch}
.emb-shot .emb-view{display:none}
.emb-shot .ext::after,.emb-shot .ext .ext-nw::after{content:none}  /* a picture links nowhere: no arrow */
.emb-shot .emb-foot{margin-top:12px}

/* the social card (?shot=card, html.emb-card): laid out at 960x504 and shot at 2.5x, then scaled to
   1200x630, so the chart's 13px labels read at about 16px in a feed. Title and source on the left,
   the chart on the right; a fact is the number, the statement and the brand row. */
.emb-card,.emb-card body{width:960px;height:504px;overflow:hidden;background:var(--surface)}
.emb-card .emb{position:relative;width:960px;height:504px;padding:48px 46px 38px;border:0;border-radius:0;background:var(--surface)}
.emb-card .emb::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--grad)}
.emb-card .emb-foot,.emb-card .kc-brand{display:none}
.emb-card.emb-k-chart .emb{display:grid;grid-template-columns:316px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:40px}
.emb-card .emb-brand{grid-column:1;display:flex;align-items:center;gap:8px;font:700 18px/1 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.emb-card .emb-brand .kc-k{width:24px;height:24px;border-radius:6px}
.emb-card .emb-t{grid-column:1;max-width:none;margin:26px 0 0;font-size:28px;line-height:1.17;letter-spacing:-.025em}
.emb-card .emb-s{grid-column:1;margin:12px 0 0;font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* the card image shows only the whole sentences that fit (build_charts.card_sub); the page shows the full text */
.emb-s-card{display:none}
.emb-card .emb-s-all{display:none}
.emb-card .emb-s-card{display:inline}
.emb-card .emb-s{-webkit-line-clamp:7}
.emb-card .emb-s.emb-s-long{font-size:13px;line-height:1.45}
/* and the source line names each publisher once (build_charts.card_src) */
.emb-src-card{display:none}
.emb-card .emb-src-all{display:none}
.emb-card .emb-src-card{display:inline}
.emb-card .emb-meta{grid-column:1;grid-row:4;align-self:end;display:flex;flex-direction:column;gap:4px;max-width:none;margin:0;font-size:12.5px;line-height:1.45;color:var(--mut)}
.emb-card .emb-url{font-weight:600;color:var(--blue)}
.emb-card.emb-k-chart .emb-fit{grid-column:2;grid-row:1/5;display:flex;align-items:center;min-height:0;overflow:hidden;padding:20px 22px;border-radius:var(--r);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.emb-card .emb-chart{flex:1;min-width:0;transform-origin:50% 50%}
.emb-card.emb-k-fact .emb{display:flex;flex-direction:column;padding:54px 60px 40px}
.emb-card.emb-k-fact .emb-fit{flex:1;display:flex;align-items:center;min-height:0;overflow:hidden}
.emb-card .emb-fx{flex:1;min-width:0;transform-origin:0 50%}
.emb-card .emb-fx .kf-num{font-size:92px}
.emb-card .emb-fx .kf-unit{margin-top:10px;font-size:19px}
.emb-card .emb-fx .kf-ring{width:124px}
.emb-card .emb-fx .kf-rule{width:240px;height:3px;margin:22px 0 20px}
.emb-card .emb-fx .kf-bars{max-width:520px;gap:12px}
.emb-card .emb-fx .kf-row{font-size:14px}
.emb-card .emb-fx .kf-stmt{max-width:42ch;font-size:22px;line-height:1.36}
.emb-card .emb-fx .kf-ctx{display:none}
.emb-card .emb-fx .kf-src{max-width:none;margin-top:14px;font-size:13px}
.emb-card.emb-k-fact .kc-brand{display:flex;margin-top:18px;padding-top:12px;font-size:13px}
.emb-card.emb-k-fact .kc-by{font-size:16px}
.emb-card.emb-k-fact .kc-k{width:22px;height:22px;border-radius:5px}
.emb-card.emb-k-fact .kc-url{font-weight:600;color:var(--blue)}