/* a country's own page (/countries/<cc>, inc/country.php), over site.css and pages.css */
.cph{padding-top:28px}
.crumb3{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-3);margin-bottom:26px}
.crumb3 a{color:var(--ink-2);text-decoration:none}
.crumb3 a:hover{color:var(--acc)}
.crumb3 b{font-weight:400;color:var(--ink)}
.mono{font-family:var(--f-mono);font-size:12.5px}

/* the hero's live call: the answer types itself in, then the next call */
.hj pre{margin:0;height:262px;padding:16px 18px;font:12.5px/1.6 var(--f-mono);color:var(--ink-2);white-space:pre-wrap;overflow:hidden;border-bottom:1px solid var(--line)}
.hj pre .k{color:var(--ink)}
.hj pre .n{color:var(--acc)}
.hj pre .s{color:#9FB3C8}
.hj pre .cur{display:inline-block;width:7px;height:14px;background:var(--acc);vertical-align:-2px;animation:pulse 1s infinite}
.hj .lh span:first-child{font-family:var(--f-mono);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hjf{position:relative;height:88px}
.hsp{position:absolute;inset:12px 0 26px;width:100%;height:50px}
.hsp path{fill:none;stroke:var(--acc);stroke-width:5;vector-effect:non-scaling-stroke;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;animation:cp-draw 2.4s cubic-bezier(.3,.7,.2,1) .4s forwards}
.hjf span{position:absolute;left:16px;bottom:8px;font-size:12px;color:var(--ink-3)}
@keyframes cp-draw{to{stroke-dashoffset:0}}

/* the section bar: sticks under the header, never wraps, scrolls to a section without changing the address */
.snav{position:sticky;top:66px;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.snl{display:flex;gap:4px;height:56px;align-items:center;overflow:hidden}
.snl button{height:36px;min-width:118px;padding:0 14px;border:0;border-radius:var(--r);background:transparent;color:var(--ink-2);font:14px var(--f-ui);white-space:nowrap;cursor:pointer}
.snl button:hover{background:var(--acc-soft);color:var(--ink)}
.snl button[aria-pressed="true"]{background:var(--acc-soft);color:var(--acc)}
.sec[id]{scroll-margin-top:130px}

.hd2{display:flex;align-items:flex-start;gap:24px;justify-content:space-between}
.hd2 .seg,.hd2>.btn{flex:none;margin-top:4px}
.seg button{height:32px;min-width:118px;border:0;border-radius:var(--r);background:transparent;color:var(--ink-2);font:13px var(--f-ui);white-space:nowrap;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--acc-soft);color:var(--acc)}

/* over time: the chart and its figures side by side */
.tg{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:stretch}
.chc{padding:18px 18px 8px}
.ch{width:100%;height:auto;display:block}
.ch .gr line{stroke:var(--line);stroke-width:1}
.ch text{font:11px var(--f-ui);fill:var(--ink-3)}
.ch .ya{text-anchor:end}
.ch .xa{text-anchor:middle}
.ch .ln{fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.ch .on .ln,.ch .cs.drawn .ln{animation:cp-draw 1.6s cubic-bezier(.3,.7,.2,1) forwards}
.ch .ar{fill:var(--acc);opacity:0;transition:opacity .8s ease .9s}
.ch .cs.drawn .ar{opacity:.07}
.ch .dt{fill:var(--acc);opacity:0;transition:opacity .4s ease 1.5s}
.ch .cs.drawn .dt{opacity:1}
.kv2{display:flex;flex-direction:column}
.kv2 div{flex:1;align-items:center}
.up{color:var(--acc)!important}
.dn{color:#7C8CA3!important}

/* the spread and women and men */
.tg2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.tg2 h2{font:400 26px var(--f-head);margin:0 0 8px}
.pbs,.abs,.obs{padding:10px 0}
.pb,.ob2{display:grid;grid-template-columns:150px minmax(0,1fr) 90px;gap:12px;align-items:center;height:36px;padding:0 18px;font-size:13px}
.pb span,.ob2 span{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb b,.ob2 b{font-weight:400;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.pb>div,.ob2>div{height:10px;border-radius:var(--r);background:var(--line);overflow:hidden}
.pb i,.ob2 i,.vs i,.pair i{display:block;height:100%;border-radius:var(--r);background:var(--acc);opacity:.55;width:0;transition:width 1.1s cubic-bezier(.3,.7,.2,1)}
.pb.mid i,.ob2.me i{opacity:1}
.pb.mid span,.pb.mid b,.ob2.me span,.ob2.me b{color:var(--acc)}
.ob2 .cc{margin-right:10px}
.gapc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:14px}
.gapc div{padding:16px 18px;border-right:1px solid var(--line)}
.gapc div:last-child{border-right:0}
.gapc b{display:block;font:400 24px var(--f-head);color:var(--ink);font-variant-numeric:tabular-nums}
.gapc div:first-child b{color:var(--acc)}
.gapc span{font-size:12px;color:var(--ink-3)}
.ab{display:grid;grid-template-columns:96px minmax(0,1fr) 64px;gap:12px;align-items:center;min-height:52px;padding:0 18px;font-size:13px;border-bottom:1px solid var(--line)}
.ab:last-child{border-bottom:0}
.ab>span{color:var(--ink-2);white-space:nowrap}
.ab>b{font-weight:400;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.ab.hd{min-height:38px;font-size:12px;color:var(--ink-3)}
.ab.hd>b,.ab.hd>span{color:var(--ink-3)}
.lg{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
.lg em{display:inline-block;width:10px;height:10px;border-radius:3px}
.lg em.m,.pair i.m{background:#7C8CA3}
.lg em.w{background:var(--acc)}
.pair{display:grid;gap:4px}
.pair>div{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:8px;align-items:center;height:12px}
.pair>div i{height:8px;opacity:.85}
.pair em{font-style:normal;font-size:11.5px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}

/* by occupation */
.vs{display:grid;grid-template-columns:150px 54px;gap:10px;align-items:center}
.vs i{height:8px}
.vs span{font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
.tb td.mono{color:var(--ink-3)}

/* tables and releases */
.tg3{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px}
.tg3 h2{font:400 26px var(--f-head);margin:0 0 8px}
.rlog{padding:6px 18px 12px}
.dy{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:14px 0 6px}
.rr{display:grid;grid-template-columns:76px minmax(0,1fr) 0;gap:12px;align-items:center;height:44px;border-bottom:1px solid var(--line);font-size:13.5px}
.rr .t{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr .p{font:12px var(--f-mono);color:var(--ink-2);text-align:right;white-space:nowrap}
.tag{height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r);font-size:12px;width:72px}
.tag.new{background:var(--acc-soft);color:var(--acc)}
.tag.revised{background:var(--line);color:var(--ink-2)}

/* in the API */
.calls .call{padding:20px}
.ch2{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ch2 h3{margin:0!important}
.ch2 .btn{min-width:84px;height:32px;font-size:13px}
.call code{display:block;margin:14px 0 8px;font:12.5px var(--f-mono);color:var(--acc);white-space:normal;word-break:break-all}

@media (max-width:1000px){
  .tg,.tg2,.tg3{grid-template-columns:minmax(0,1fr)}
  .kv2 div{flex:none}
  .snl{overflow-x:auto;scrollbar-width:none}
}
@media (max-width:640px){
  .hd2{flex-direction:column;gap:6px}
  .hd2 .seg{width:100%}
  .hd2 .seg button{flex:1;min-width:0}
  .snav{display:none}
  .gapc b{font-size:20px}
  .pb,.ob2{grid-template-columns:96px minmax(0,1fr) 78px;padding:0 14px}
  .ab{grid-template-columns:74px minmax(0,1fr) 52px;padding:0 14px}
  .rr{grid-template-columns:72px minmax(0,1fr)}
  .rr .p{display:none}
  .vs{grid-template-columns:90px 46px}
}
.ch .cs[hidden]{display:none}

.tg1{display:grid;grid-template-columns:minmax(0,1fr)}
.tg1 h2{font:400 26px var(--f-head);margin:0 0 8px}
.ob2 span a{color:inherit;text-decoration:none}
.ob2 span a:hover{color:var(--acc)}
.one{height:100%;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.one b{font:400 40px var(--f-head);color:var(--ink);font-variant-numeric:tabular-nums}
.one span{font-size:13px;color:var(--ink-3)}
.snav+.sec{padding-top:64px!important}