:root{
  color-scheme: light;
  --ground:#f7f6f3; --raised:#fffffe; --sunken:#efede8;
  --line:#e2dfd8; --line-strong:#cfcbc1;
  --ink:#17160f; --ink-2:#56534a; --ink-3:#8a8579;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#4a3aa7;
  --ghost:#cfcbc1;
  --note:#2a78d6; --note-soft:rgba(42,120,214,.09); --note-ink:#1c5cab;
  --warn:#eda100; --warn-soft:rgba(237,161,0,.12); --warn-ink:#6d4a00;
  --grid:rgba(23,22,15,.10);
  --shadow:0 1px 2px rgba(23,22,15,.05), 0 8px 24px -16px rgba(23,22,15,.22);
  --f-sans:"IBM Plex Sans","IBM Plex Sans Arabic",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --f-ar:"IBM Plex Sans Arabic","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#141412; --raised:#1d1c19; --sunken:#242320;
    --line:#333129; --line-strong:#474437;
    --ink:#f6f4ee; --ink-2:#b9b5aa; --ink-3:#88847a;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#9085e9;
    --ghost:#474437;
    --note:#3987e5; --note-soft:rgba(57,135,229,.13); --note-ink:#9cc6f5;
    --warn:#c98500; --warn-soft:rgba(201,133,0,.15); --warn-ink:#eec87a;
    --grid:rgba(246,244,238,.11);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#141412; --raised:#1d1c19; --sunken:#242320;
  --line:#333129; --line-strong:#474437;
  --ink:#f6f4ee; --ink-2:#b9b5aa; --ink-3:#88847a;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#9085e9;
  --ghost:#474437;
  --note:#3987e5; --note-soft:rgba(57,135,229,.13); --note-ink:#9cc6f5;
  --warn:#c98500; --warn-soft:rgba(201,133,0,.15); --warn-ink:#eec87a;
  --grid:rgba(246,244,238,.11);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{background:var(--ground); color:var(--ink);
  font-family:var(--f-sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1160px; margin:0 auto; padding-inline:20px; padding-block:28px 64px}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.015em}
a{color:var(--ink-2)}

.mast{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; justify-content:space-between;
  padding-bottom:18px; border-bottom:1px solid var(--line)}
.mast h1{font-size:25px; line-height:1.15}
.mast .sub{color:var(--ink-2); font-size:13.5px; margin:5px 0 0; max-width:62ch}
.stamp{font-family:var(--f-mono); font-size:11px; color:var(--ink-3); text-align:right; line-height:1.7}
.stamp b{color:var(--ink-2); font-weight:500}

.bar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:22px}
.seg{display:inline-flex; background:var(--sunken); border:1px solid var(--line);
  border-radius:9px; padding:2px; gap:2px}
.seg button{appearance:none; border:0; background:transparent; color:var(--ink-2); cursor:pointer;
  font:500 12.5px/1 var(--f-sans); padding:8px 14px; border-radius:7px; letter-spacing:.01em}
.seg button[aria-pressed="true"]{background:var(--raised); color:var(--ink); box-shadow:var(--shadow)}
.seg button:focus-visible{outline:2px solid var(--s1); outline-offset:1px}
.spacer{flex:1 1 auto}
.linkish{appearance:none; border:1px solid var(--line); background:var(--raised); color:var(--ink-2);
  cursor:pointer; font:500 12px/1 var(--f-sans); padding:8px 12px; border-radius:8px}
.linkish:focus-visible{outline:2px solid var(--s1); outline-offset:1px}

.callout{margin-top:20px; display:grid; grid-template-columns:auto 1fr; gap:13px;
  padding:14px 16px; border:1px solid var(--note); border-left-width:3px;
  border-radius:9px; background:var(--note-soft)}
.callout.warn{border-color:var(--warn); background:var(--warn-soft)}
.callout h3{font-size:12.5px; letter-spacing:.02em; text-transform:uppercase; color:var(--note-ink)}
.callout.warn h3{color:var(--warn-ink)}
.callout p{margin:5px 0 0; font-size:13px; color:var(--ink-2); max-width:84ch}
.callout .meth{margin-top:9px; font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3)}

.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:16px; margin-top:18px}
.panel{background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:18px 18px 15px}
.panel.lead{border-color:var(--line-strong); box-shadow:var(--shadow)}
.panel > header{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:2px}
.panel h2{font-size:14.5px}
.panel .unit{font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3);
  letter-spacing:.03em; text-transform:uppercase; white-space:nowrap}
.panel .note{font-size:12px; color:var(--ink-3); margin:6px 0 12px; max-width:66ch}
figure{margin:0}

.hero{display:flex; flex-wrap:wrap; gap:26px; align-items:flex-end; margin:4px 0 12px}
.hero .big{font-family:var(--f-mono); font-size:30px; font-weight:500; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1}
.hero .cap{font-size:11.5px; color:var(--ink-3); margin-top:6px;
  letter-spacing:.02em; text-transform:uppercase}
.delta{font-family:var(--f-mono); font-size:12.5px; font-variant-numeric:tabular-nums}
.up{color:var(--s3)} .down{color:var(--s2)}

.chart{width:100%; height:auto; display:block; overflow:visible}
.chart text{font-family:var(--f-mono); font-size:10px; fill:var(--ink-3)}
.chart .axis-line{stroke:var(--line-strong); stroke-width:1}
.chart .grid-line{stroke:var(--grid); stroke-width:1}
.chart .lbl-val{font-family:var(--f-mono); font-size:10.5px; fill:var(--ink-2);
  font-variant-numeric:tabular-nums}
.hit{fill:transparent; cursor:crosshair}

.legend{display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; padding-top:11px;
  border-top:1px solid var(--line)}
.legend span{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2)}
.legend i{width:12px; height:3px; border-radius:2px; display:inline-block; flex:none}
.legend i.dash{height:0; border-top:2px dashed var(--ink-3); border-radius:0}

.bars{display:flex; flex-direction:column; gap:9px; margin-top:6px}
.row{display:grid; grid-template-columns:minmax(0,1fr) 62px; gap:12px; align-items:center}
.row .names{min-width:0}
.row .ar{font-family:var(--f-ar); font-size:13px; direction:rtl; text-align:right;
  unicode-bidi:isolate; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .en{font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .track{grid-column:1 / -1; height:7px; background:var(--sunken); border-radius:4px; overflow:hidden}
.row .fill{height:100%; border-radius:4px}
.row .num{font-family:var(--f-mono); font-size:12px; font-variant-numeric:tabular-nums;
  text-align:right; color:var(--ink-2)}

.grain{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.gq{display:flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid var(--line);
  border-radius:8px; background:var(--sunken); font-family:var(--f-mono); font-size:11px; color:var(--ink-2)}
.gq .badge{font-family:var(--f-sans); font-size:10px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; padding:2px 6px; border-radius:4px}
.gq .agg{background:var(--s4); color:#17160f}
.gq .raw{background:var(--sunken); border:1px solid var(--line-strong); color:var(--ink-3)}
.gq .gap{background:var(--warn); color:#17160f}

.empty{border:1px dashed var(--line-strong); border-radius:10px; background:var(--sunken);
  padding:26px 22px; text-align:center}
.empty h3{font-size:14px; margin-bottom:7px}
.empty p{margin:0 auto; font-size:12.8px; color:var(--ink-2); max-width:56ch}
.empty .counter{font-family:var(--f-mono); font-size:11px; color:var(--ink-3); margin-top:13px;
  letter-spacing:.03em; text-transform:uppercase}
.empty code{font-family:var(--f-mono); font-size:11.5px; background:var(--raised);
  border:1px solid var(--line); border-radius:5px; padding:2px 6px; color:var(--ink-2)}

.tablewrap{overflow-x:auto; margin-top:16px; border:1px solid var(--line);
  border-radius:10px; background:var(--raised)}
table{border-collapse:collapse; width:100%; min-width:680px; font-size:12.5px}
th,td{text-align:right; padding:9px 13px; border-bottom:1px solid var(--line); white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{font-weight:600; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-3); background:var(--sunken); position:sticky; top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr.total-row{background:var(--sunken)}
td.n{font-family:var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink-2)}
td.lead-col{font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  color:var(--ink); font-weight:500}

#tip{position:fixed; z-index:50; pointer-events:none; opacity:0; transition:opacity .09s;
  background:var(--raised); border:1px solid var(--line-strong); border-radius:8px;
  box-shadow:var(--shadow); padding:9px 11px; font-size:12px; min-width:150px}
#tip .t-h{font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3);
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:5px}
#tip .t-r{display:flex; justify-content:space-between; gap:16px; line-height:1.7}
#tip .t-r b{font-family:var(--f-mono); font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink)}

footer{margin-top:34px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--ink-3); font-size:12px; display:flex; flex-direction:column; gap:10px}
.footer-row{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center}
.skel{background:var(--sunken); border-radius:7px; height:13px; width:70%}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important; transition-duration:.001ms!important}}

/* --- Source note --------------------------------------------------------- */
.source-banner{display:flex; align-items:center; gap:8px; margin-top:14px;
  font-size:12.5px; color:var(--ink-2); line-height:1.5; padding:8px 12px;
  background:var(--sunken); border:1px solid var(--line); border-radius:8px}
.source-banner b{color:var(--ink); font-weight:600}
.source-banner .src-tag{font-family:var(--f-mono); font-size:10px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); padding:2px 6px;
  border-radius:4px; background:var(--raised); border:1px solid var(--line); flex:none}

/* --- Pie / Donut chart --------------------------------------------------- */
.pie-panel{display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:44px; max-width:680px; margin:16px auto 10px; padding:6px 12px}
.pie-donut-wrap{width:220px; height:220px; flex:none; display:flex; justify-content:center; align-items:center; margin:0}
.pie-svg{width:100%; height:100%; display:block; overflow:visible}
.pie-slice{transition:transform .15s ease, opacity .12s ease; cursor:pointer}
.pie-slice:hover{opacity:0.92}

.pie-c-val{font-family:var(--f-mono); font-size:15px; font-weight:600; fill:var(--ink);
  font-variant-numeric:tabular-nums}
.pie-c-lbl{font-family:var(--f-sans); font-size:10px; fill:var(--ink-3);
  letter-spacing:.04em; text-transform:uppercase}

.pie-legend{flex:1 1 320px; max-width:400px; display:flex; flex-direction:column; gap:5px}
.pie-leg-item{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:5px 8px; border-radius:6px; cursor:pointer; transition:background .12s ease}
.pie-leg-item:hover, .pie-leg-item.hovered{background:var(--sunken)}
.pie-leg-left{display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto}
.pie-leg-dot{width:9px; height:9px; border-radius:50%; flex:none}
.pie-leg-label{font-size:12.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pie-leg-right{display:flex; align-items:center; gap:12px; flex:none}
.pie-leg-cnt{font-family:var(--f-mono); font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.pie-leg-pct{font-family:var(--f-mono); font-size:12px; color:var(--ink); font-weight:500;
  font-variant-numeric:tabular-nums; min-width:40px; text-align:right}

@media (max-width:720px){
  .pie-panel{flex-direction:column; align-items:center; justify-content:center; gap:20px; max-width:100%; margin:12px auto}
  .pie-donut-wrap{width:200px; height:200px; margin:0 auto}
  .pie-legend{width:100%; max-width:340px; margin:0 auto}
}

/* --- Occupation toggle --------------------------------------------------- */
.occ-toggle{display:inline-flex; background:var(--sunken); border:1px solid var(--line);
  border-radius:7px; padding:2px; gap:2px}
.occ-tab{appearance:none; border:0; background:transparent; color:var(--ink-3);
  cursor:pointer; font:500 11.5px/1 var(--f-sans); padding:6px 11px; border-radius:5px;
  letter-spacing:.01em; white-space:nowrap}
.occ-tab.active{background:var(--raised); color:var(--ink); box-shadow:var(--shadow)}
.occ-tab:focus-visible{outline:2px solid var(--s1); outline-offset:1px}
.occ-label{font-size:12.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Occupation rows use a simpler 2-col grid (no Arabic) */
#occBars .row{grid-template-columns:minmax(0,1fr) 70px}

/* --- narrow-width fixes -------------------------------------------------
   Flex items default to min-width:auto, so a long line of text keeps its own
   min-content width and pushes the page wider than the screen. These let the
   text columns actually shrink, and stop the page scrolling sideways. */
.mast > div{min-width:0}
.mast .sub{max-width:62ch}
.panel > header{flex-wrap:wrap}
.panel > header h2{min-width:0}
.panel .unit{white-space:normal}
.callout > div{min-width:0}
.callout .meth{overflow-wrap:anywhere}
.hero > div{min-width:0}

@media (max-width:640px){
  .chart text{font-size:13px}
  .chart .lbl-val{font-size:13px}
  .chart .axis-line{stroke-width:1.2}
  .chart .grid-line{stroke-width:1}
}

@media (max-width:560px){
  .wrap{padding-block:20px 48px}
  .mast{align-items:flex-start}
  .mast h1{font-size:21px}
  .stamp{text-align:left}
  .seg{width:100%}
  .seg button{flex:1 1 auto; padding:8px 10px}
  .bar .linkish{width:100%}
  .hero{gap:18px}
  .hero .big{font-size:26px}
}