:root{
 --bg:#f7f6f1;--panel:#fffffe;--panel2:#f1efe7;--ink:#181a17;--sub:#585c54;--muted:#8b8e84;
 --border:#e0ded4;--accent:#0f6e56;--accent-bg:#e0f1eb;--warm:#b4530f;
 --mid:#ece9df;--nodata:#e6e4da;--mesh:rgba(20,22,20,.15);--prov:rgba(20,22,20,.32);
}
@media (prefers-color-scheme:dark){:root{
 --bg:#131511;--panel:#1b1e1a;--panel2:#20241f;--ink:#eaeae2;--sub:#a6a99f;--muted:#787c72;
 --border:#2a2e28;--accent:#5dcaa5;--accent-bg:#123a30;--warm:#e08a4b;
 --mid:#33352e;--nodata:#21241e;--mesh:rgba(255,255,255,.12);--prov:rgba(255,255,255,.3);
}}
:root[data-theme="dark"]{
 --bg:#131511;--panel:#1b1e1a;--panel2:#20241f;--ink:#eaeae2;--sub:#a6a99f;--muted:#787c72;
 --border:#2a2e28;--accent:#5dcaa5;--accent-bg:#123a30;--warm:#e08a4b;
 --mid:#33352e;--nodata:#21241e;--mesh:rgba(255,255,255,.12);--prov:rgba(255,255,255,.3);}
:root[data-theme="light"]{
 --bg:#f7f6f1;--panel:#fffffe;--panel2:#f1efe7;--ink:#181a17;--sub:#585c54;--muted:#8b8e84;
 --border:#e0ded4;--accent:#0f6e56;--accent-bg:#e0f1eb;--warm:#b4530f;
 --mid:#ece9df;--nodata:#e6e4da;--mesh:rgba(20,22,20,.15);--prov:rgba(20,22,20,.32);}
*{box-sizing:border-box}
html{color-scheme:light dark}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
html,body{margin:0;background:var(--bg);color:var(--ink)}
.wrap{max-width:1000px;margin:0 auto;padding:2.2rem 1.25rem 4rem;color:var(--ink);
 font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.6}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 .5rem}
h1{font-size:34px;line-height:1.1;font-weight:600;margin:0 0 .6rem;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:21px;font-weight:600;margin:0 0 .3rem;letter-spacing:-.01em}
.lede{font-size:17px;color:var(--sub);margin:0 0 .4rem;max-width:64ch}
.lede b{color:var(--ink);font-weight:600}
section{margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--border)}
.shead{margin-bottom:1rem}
.sheadTop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.shead p{font-size:14px;color:var(--muted);margin:.25rem 0 0;max-width:66ch}
.toggleBtn{appearance:none;border:1px solid var(--border);background:var(--panel);color:var(--sub);font:inherit;font-size:12px;padding:.34rem .68rem;border-radius:999px;cursor:pointer;white-space:nowrap}
.toggleBtn:hover{background:var(--panel2);color:var(--ink)}
.toggleBtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1rem}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:.8rem}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--panel)}
.seg button{appearance:none;border:0;background:transparent;color:var(--sub);font:inherit;font-size:12.5px;padding:.42rem .72rem;cursor:pointer}
.seg button.on{background:var(--accent-bg);color:var(--accent);font-weight:600}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.legend{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--sub);flex-basis:100%;margin-top:3px}
.ramp{height:11px;width:130px;border-radius:3px}
.rampStep{display:flex;height:11px;width:130px;border-radius:3px;overflow:hidden}
.rampStep i{flex:1;display:block}
.agerange{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sub)}
.agerange select{font:inherit;font-size:13px;padding:.32rem .45rem;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--ink);cursor:pointer}
.agerange select:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.btnSpin{display:inline-block;width:11px;height:11px;margin-right:5px;vertical-align:-1px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:btnSpin .7s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}
#wFlightsToggle[disabled]{opacity:.75;cursor:progress}
.ptselMap{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--sub)}
.ptselMap select{max-width:160px}
.ageSlider{display:grid;grid-template-columns:auto minmax(210px,280px);gap:6px 10px;align-items:center;font-size:13px;color:var(--sub)}
.ageSlider b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.dualRange{display:grid;grid-template-columns:26px 1fr 32px;gap:7px;align-items:center;color:var(--muted);font-size:11.5px}
.dualTrack{position:relative;height:26px;display:flex;align-items:center}
.dualTrack:before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:4px;border-radius:4px;background:var(--panel2);border:1px solid var(--border);box-sizing:border-box}
.dualTrack input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;background:transparent;pointer-events:none;appearance:none;-webkit-appearance:none}
.dualTrack input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:15px;margin-top:0;border-radius:50%;background:var(--accent);border:2px solid var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.24);pointer-events:auto;cursor:pointer}
.dualTrack input::-moz-range-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.24);pointer-events:auto;cursor:pointer}
.dualTrack input::-webkit-slider-runnable-track{height:26px;background:transparent}
.dualTrack input::-moz-range-track{height:26px;background:transparent}
.maprow{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.maprow{grid-template-columns:1.55fr 1fr}}
/* Themed surface (not inverted) so the tooltip stays dark in dark mode / light in
   light mode instead of flipping to a white box on the dark page. The hover
   pyramid's currentColor bars track --ink, so they still contrast --panel. */
#tip,#ptip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-118%);background:var(--panel);color:var(--ink);border:1px solid var(--border);box-shadow:0 4px 14px rgba(0,0,0,.18);
 font-size:12px;padding:6px 9px;border-radius:7px;white-space:nowrap;font-variant-numeric:tabular-nums;transition:opacity .08s;z-index:5}
.detail h3{margin:0 0 .1rem;font-size:17px}
.detail .iso{color:var(--muted);font-size:12px;font-weight:400}
.drow{display:flex;justify-content:space-between;gap:10px;padding:.4rem 0;border-bottom:1px solid var(--border);font-size:13.5px}
.drow:last-child{border-bottom:0}
.drow .k{color:var(--sub)}
.drow .v{font-weight:600;font-variant-numeric:tabular-nums}
.read{font-size:13px;color:var(--sub);margin:.7rem 0 0;background:var(--panel2);border-radius:9px;padding:.6rem .7rem}
.ptsel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--sub);margin:0 0 .9rem;min-width:0}
/* min-width:0 lets the select shrink below its widest option's intrinsic
   width (199 country names) instead of forcing the row past the viewport. */
.ptsel select{font:inherit;font-size:13px;padding:.4rem .5rem;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--ink);max-width:100%;min-width:0}
.ptsel select:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.indexControls{display:flex;gap:14px 18px;align-items:center;flex-wrap:wrap;margin-bottom:.9rem}
.indexControls .ptsel{margin:0}
.visaStep{display:grid;grid-template-columns:auto 120px minmax(86px,auto);gap:8px;align-items:center;font-size:13px;color:var(--sub)}
.visaStep span{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 20px;margin-bottom:1rem}
.slab{display:flex;flex-direction:column;gap:2px}
.slab .top{display:flex;justify-content:space-between;font-size:13px}
.slab .top b{font-weight:600}.slab .top span{color:var(--accent);font-variant-numeric:tabular-nums}
.budgetRow{margin:0 0 .9rem}
.budgetSlab{border:1px solid var(--border);background:var(--panel2);border-radius:10px;padding:.55rem .75rem}
.budgetSlab .top{font-size:14px}.budgetSlab .top b{color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--accent)}
.a3Slice{display:flex;flex-direction:column;gap:3px;font-size:12.5px;min-width:150px;flex:1 1 150px;max-width:230px}
.a3Slice>span{display:flex;gap:6px;align-items:center;color:var(--sub)}
.a3Slice>span b{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:right;padding:.5rem .6rem;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
th:nth-child(2),td:nth-child(2){text-align:left}
#phlcities th:first-child,#phlcities td:first-child{text-align:left}
th{color:var(--muted);font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;cursor:default}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover,th.sortOn{color:var(--accent)}
th.sortOn:after{content:"";display:inline-block;margin-left:5px;border-left:4px solid transparent;border-right:4px solid transparent;vertical-align:middle}
th.sortOn[data-dir="asc"]:after{border-bottom:6px solid currentColor}
th.sortOn[data-dir="desc"]:after{border-top:6px solid currentColor}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--panel2)}
.idx{font-weight:600;color:var(--accent)}
.pill{display:inline-block;padding:1px 7px;border-radius:20px;font-size:11px;font-weight:600}
.note{font-size:13px;color:var(--muted);max-width:72ch;line-height:1.65}
.note b{color:var(--sub);font-weight:600}
.disc{margin-top:.6rem;font-size:12.5px;color:var(--warm)}
path{stroke-linejoin:round}
.mapbox{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:.4rem;aspect-ratio:440/600}
.maptools{position:absolute;right:.65rem;top:.65rem;display:flex;gap:4px;z-index:4}
.maptools button{appearance:none;border:1px solid var(--border);background:var(--panel);color:var(--ink);width:28px;height:28px;border-radius:7px;font:600 15px/1 ui-sans-serif,system-ui;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.08)}
.maptools button:hover{background:var(--panel2)}
.maptools button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.phgrid{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
@media(min-width:860px){.phgrid{grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr)}}
.cityDigestGrid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:1rem}
@media(min-width:980px){.cityDigestGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cityDigestCol{min-width:0}
.cityCtxLead{margin:0 0 .85rem;max-width:76ch}
.cityCtxGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.cityCtxCard{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:.8rem .9rem}
.cityCtxHead{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-size:15px}
.cityCtxWord{color:var(--sub);font-size:12.5px}
.cityCtxBig{display:block;margin-top:.45rem;font-size:26px;line-height:1.05;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.cityCtxBig small{font-size:13px;color:var(--muted);font-weight:500}
.cityCtxSub{display:block;margin-top:.12rem;font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums}
.cityCtxFine{margin:.45rem 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}
.citySignalLead{margin:0 0 .85rem;max-width:78ch}
.citySignalWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.citySignalTable{min-width:820px;border-collapse:separate;border-spacing:0;width:100%}
.citySignalTable th,.citySignalTable td{padding:.5rem .55rem;border-bottom:1px solid var(--border);vertical-align:middle;text-align:left}
.citySignalTable thead th{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500;background:var(--panel);white-space:nowrap}
.citySignalTable tbody th{width:170px;color:var(--sub);font-size:12px;font-weight:600;cursor:help}
.citySignalCell{display:block;border-radius:10px;padding:.48rem .58rem;min-height:56px}
.citySignalMini{min-height:auto;padding:.4rem .5rem}
.citySignalCell b{display:block;color:var(--ink);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25}
.citySignalCell span{display:block;margin-top:.16rem;color:var(--sub);font-size:11.5px;line-height:1.4}
.citySignalDim{color:var(--muted);font-size:11.5px}
.citySignalSources{margin:.8rem 0 0}
.countryOnlyCell{text-align:center;color:var(--muted)}
.countryRow td{background:color-mix(in srgb,var(--panel2) 72%, transparent)}
.countryRow:hover td{background:color-mix(in srgb,var(--panel2) 72%, transparent)}
#phlcities th,#phlcities td{text-align:center}
#phlcities th:first-child,#phlcities td:first-child{text-align:left}
#phlcities tbody tr{cursor:default}
#phlcities tbody tr:hover{background:transparent}
#phlcities thead th{vertical-align:bottom}
#phlcities tbody th{color:var(--muted)}
.phMatrixHead{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:120px}
.phMatrixHead b{display:block;color:var(--ink);font-size:14px;line-height:1.2}
.phMatrixHead .pill{margin-left:0}
.phMatrixCityBtn{appearance:none;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:700;padding:0;cursor:pointer;text-align:left}
.phMatrixCityBtn:hover{color:var(--accent);text-decoration:underline}
.phMatrixMetric{width:160px}
.phMatrixNa{color:var(--muted)}
.phMatrixMain{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.phsearch{display:flex;gap:6px;align-items:center;min-width:min(100%,260px)}
.phsearch input{width:100%;font:inherit;font-size:13px;padding:.42rem .55rem;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--ink)}
.phsearch input:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:.55rem auto 0;max-width:520px}
.chips button,.miniBtn{appearance:none;border:1px solid var(--border);background:var(--panel);color:var(--sub);font:inherit;font-size:12px;padding:.34rem .58rem;border-radius:8px;cursor:pointer}
.chips button:hover,.miniBtn:hover{background:var(--panel2);color:var(--ink)}
.phdetail h3{margin:0 0 .15rem;font-size:17px}
.phdetail .subline{font-size:12.5px;color:var(--muted);margin:0 0 .5rem}
.phactions{display:flex;gap:6px;flex-wrap:wrap;margin:.7rem 0 0}
.compareList{display:grid;gap:7px;margin-top:.7rem}
.compareItem{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border-top:1px solid var(--border);padding-top:7px;font-size:12.5px}
.compareItem b{font-weight:600}.compareItem span{color:var(--muted);font-variant-numeric:tabular-nums}
.cityCompareCell{text-align:center}
.tblBtn{padding:.28rem .58rem;font-size:11.5px}
.tblBtn.on{background:var(--accent-bg);color:var(--accent);border-color:transparent}
.cmpTop{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:.85rem}
.cmpTop b{color:var(--ink);font-size:14px}
.cmpTop span{font-size:12px;color:var(--muted)}
.cmpGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cmpCard{background:var(--panel2);border:1px solid var(--border);border-radius:14px;padding:.9rem}
.cmpHead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:.5rem}
.cmpHead h3{margin:0;font-size:15px;line-height:1.25}
.cmpMeta{font-size:12px;color:var(--muted);margin:.15rem 0 0}
.cmpBadge{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--panel);border:1px solid var(--border);font-size:11px;color:var(--sub);white-space:nowrap}
.cmpActions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:.65rem}
.cmpActions .note{margin:0}
.cmpEmpty{margin:0}
.miniShead{display:flex;align-items:center;gap:10px;margin:1rem 0 0}
.miniShead h3{margin:0;font-size:17px;line-height:1.2}

/* Philippines context layers */
.religionBar{display:flex;height:18px;overflow:hidden;border-radius:7px;background:var(--mid)}
.religionBar span{min-width:3px}
.religionList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem .9rem;margin-top:.8rem}
.religionRow{display:grid;grid-template-columns:10px 1fr auto;gap:.45rem;align-items:center;font-size:13px;color:var(--sub)}
.religionRow b{color:var(--ink);font-variant-numeric:tabular-nums}
.religionDot{width:9px;height:9px;border-radius:50%}
.langEng{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:.85rem 0 0;padding-top:.75rem;border-top:1px solid var(--border);font-size:13.5px}
.langEng .k{color:var(--sub)}
.langEng .v{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.pyrModelBar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:.7rem}
.pyrModelLabel{font-size:12.5px;color:var(--muted)}
.pyrTop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:.9rem}
.pyrStat{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:.7rem .8rem}
.pyrStat b{display:block;font-size:20px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.pyrStat span{display:block;margin-top:.2rem;font-size:12px;color:var(--muted)}
.pyrAxis{display:grid;grid-template-columns:56px 1fr 54px 1fr 56px 48px;gap:8px;align-items:end;margin:0 0 .35rem;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pyrAxis span:nth-child(1){grid-column:2;text-align:left}
.pyrAxis span:nth-child(2){grid-column:4;text-align:right}
.pyrAxis span:nth-child(3){grid-column:6;text-align:right}
.pyrRows{display:grid;gap:4px}
.pyrRow{display:grid;grid-template-columns:56px 1fr 54px 1fr 56px 48px;gap:8px;align-items:center}
.pyrVal{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pyrValL{text-align:right}
.pyrValR{text-align:left}
.pyrValRatio{text-align:right;color:var(--sub)}
.pyrValRatio.pyrRatioBad{color:var(--warm);font-weight:600}
.pyrAge{text-align:center;font-size:11.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.pyrSide{height:15px;background:var(--panel2);border-radius:999px;overflow:hidden;border:1px solid var(--border);display:flex;align-items:stretch}
.pyrSideL{justify-content:flex-end}
.pyrSideR{justify-content:flex-start}
.pyrBar{display:block;height:100%}
.pyrBarL{background:#3f78c0}
.pyrBarR{background:#c0392b}
/* women's side: dark = matched to men 5 yrs older (suitor pool), pale = surplus */
.pyrPool{background:#8f1d28}
.pyrSurplus{background:#e79a93}
/* rows where the older-male cohort outnumbers the women: split into two stacked
   half-height lanes (dark = older-male count on top, light = women below) so the
   dark-red overhang is visible. Same 15px height as normal rows. */
.pyrSideR.pyrSplit{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 1fr;gap:0;align-items:stretch;justify-items:stretch}
.pyrSideR.pyrSplit .pyrLane{display:block;width:100%;min-width:0;box-sizing:border-box;overflow:hidden}
.pyrSideR.pyrSplit .pyrOlderMale{display:block;height:100%;background:#8f1d28}
.pyrSideR.pyrSplit .pyrFemaleBase{display:block;height:100%;background:#e79a93}
/* divider above the first row where the older-male cohort outnumbers the women:
   marks where the dating-pool ratio turns unfavourable */
.pyrRow.pyrBadStart{position:relative}
.pyrRow.pyrBadStart::before{content:"";position:absolute;left:0;right:0;top:-3px;border-top:1.5px dashed var(--muted);pointer-events:none}
.pyrNote{margin:.85rem 0 0}
.fkey{display:inline-flex;align-items:center;gap:5px;margin-left:10px;white-space:nowrap}
.fkey i{width:14px;height:11px;border-radius:3px;display:inline-block}
.fkey i.fhatch{background:#6b6f66;opacity:.42}
#prelview[hidden]{display:none}
.relPick{display:inline-flex;align-items:center;gap:.45rem;font-size:12.5px;color:var(--sub)}
.relPick[hidden]{display:none}
.relPick select{font:inherit;font-size:12.5px;max-width:210px;padding:.36rem .5rem;border:1px solid var(--border);
 border-radius:9px;background:var(--panel);color:var(--ink);cursor:pointer}
.relPick select:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wxCities{flex-wrap:wrap;max-width:100%}
.wxSum{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:13px;color:var(--sub);margin:.85rem 0 .7rem}
.wxSum b{color:var(--ink);font-variant-numeric:tabular-nums}
.wxLegend{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:11.5px;color:var(--muted)}
.wxLegend i{width:15px;height:11px;border-radius:3px;display:inline-block}
/* The month axis cannot shrink to 375px, so it scrolls inside this box
   instead of widening the page. Row labels stay pinned while it scrolls. */
.wxScroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wxTable{border-collapse:separate;border-spacing:3px;min-width:660px;width:100%;table-layout:fixed}
.wxTable th{font-weight:600;font-size:11.5px;color:var(--muted);padding:.2rem .3rem;text-align:center}
.wxTable thead th.wxNow{color:var(--ink)}
/* table-layout:fixed takes column widths from the FIRST row, so the label
   column must be sized on the thead cell, not on the tbody th. */
.wxTable thead th:first-child{width:94px}
.wxTable th[scope="row"]{position:sticky;left:0;z-index:1;text-align:left;color:var(--sub);
 background:var(--panel);white-space:nowrap;cursor:help;padding-right:.5rem}
.wxCell{border-radius:7px;text-align:center;padding:.4rem .2rem;line-height:1.2}
.wxCell b{display:block;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.wxCell span{display:block;font-size:10.5px;color:var(--sub)}
.wxCell.wxNow{box-shadow:inset 0 0 0 2px var(--ink)}
.wxNa{text-align:center;color:var(--muted);background:var(--nodata);border-radius:7px}
.wxSource{margin:.8rem 0 0}

/* cross-page navigation */
.backlink{color:var(--accent);text-decoration:none;font-weight:600}
.backlink:hover{text-decoration:underline}
.deepLink{display:inline-block;margin-top:.8rem;color:var(--accent);text-decoration:none;font-weight:600;font-size:13.5px}
.deepLink:hover{text-decoration:underline}
.rowLink{color:var(--ink);text-decoration:none}
.rowLink:hover{color:var(--accent);text-decoration:underline}

/* country deep-dive cards */
/* ---------- city shortlist cards (browse mode) ---------- */
.cityViewRow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:.8rem}
.cityCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px;min-height:600px}
.cityCards[hidden]{display:none}
/* city filter bar (nomad-style, honest presets) */
.cityFilterBar{margin:0 0 .9rem}
.cityAgeRow{display:flex;gap:12px 18px;align-items:center;flex-wrap:wrap;margin:0 0 .9rem}
.cityFilterMain{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.cityFilterSearch{flex:1;min-width:180px;font:inherit;font-size:14px;padding:.5rem .7rem;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink)}
.cityFilterDropWrap{position:relative}
.cityFilterBtn{appearance:none;font:inherit;font-size:13px;font-weight:600;padding:.5rem .8rem;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--ink);cursor:pointer}
.cityFilterBtn.on{border-color:var(--accent);color:var(--accent)}
.cityFilterClear{appearance:none;font:inherit;font-size:13px;padding:.5rem .7rem;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--sub);cursor:pointer}
.cityFilterPop{position:absolute;top:100%;right:0;margin-top:6px;z-index:40;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.22);padding:.7rem .8rem;display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));gap:.1rem 1.2rem;min-width:300px;max-height:60vh;overflow:auto}
.cityFilterPop[hidden]{display:none}
.cityFilterGrpH{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:.35rem 0 .2rem;font-weight:700}
.cityChip{display:block;width:100%;text-align:left;appearance:none;font:inherit;font-size:13px;padding:.32rem .55rem;margin:.12rem 0;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--ink);cursor:pointer}
.cityChip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.cityFilterActive{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.cityChipSm{width:auto;font-size:12px;padding:.25rem .5rem;margin:0}
.cityMapWrap[hidden]{display:none}
.cityMapCtl{margin:0 0 .6rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.cityMapSeg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cityMapSeg::-webkit-scrollbar{display:none}
.cityMapSeg button{flex:0 0 auto;white-space:nowrap}
.cityMapLegend{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted);margin:.5rem 0 0}
.cityArcH{font-size:9px;font-weight:600;fill:var(--accent);text-anchor:middle;paint-order:stroke;stroke:var(--panel);stroke-width:2.5px;stroke-linejoin:round}
.cityHomeLabel{font-size:10px;font-weight:700;fill:var(--accent);paint-order:stroke;stroke:var(--panel);stroke-width:3px;stroke-linejoin:round}
.cityMapBox{position:relative;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--panel)}
.cityMapTip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-125%);background:var(--panel);border:1px solid var(--border);border-radius:7px;padding:.3rem .5rem;font-size:12px;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.2);white-space:nowrap;transition:opacity .1s;z-index:2}
@media (max-width:640px){
 .cityFilterPop{position:fixed;left:0;right:0;bottom:0;top:auto;margin:0;border-radius:14px 14px 0 0;max-height:72vh;z-index:60}
 .cityFilterSearch{font-size:16px}
 /* Two cards per row on phones. minmax(0,1fr) lets columns shrink below their
    content width so the page never scrolls sideways; padding + banner bleed are
    trimmed to match the narrower card. Selectors are .cityCard-prefixed so they
    outrank the base .cc* rules that appear later in the file (equal specificity
    would otherwise lose on source order). */
 /* Widen the cards: bleed the grid out through most of the enclosing .card padding
    (negative inline margin) so two cards fill nearly the whole phone width with only
    a thin gutter, without shrinking .card padding globally (which would cramp the
    map/table/other cards). */
 .cityCards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-height:0;margin-inline:-.8rem}
 .cityCard{padding:.7rem .7rem}
 .cityCard .ccArt{width:calc(100% + 1.4rem);margin:-.7rem -.7rem .55rem;height:64px}
 .cityCard .ccHead h3{font-size:14.5px}
 .cityCard .ccHero b{font-size:25px}
 /* At ~150px a "label ⋯ value" row can't hold both a long label (Sex ratio 20–39)
    and a long value (English EF pill) side by side without one starving the other
    into a vertical char-stack. Stack them instead: label over value, both left —
    the one layout that fits every stat cleanly at this width. */
 .cityCard .ccStat{flex-direction:column;align-items:flex-start;gap:0;font-size:11.5px;line-height:1.3}
 .cityCard .ccStat .k{flex:0 0 auto}
 .cityCard .ccStat .v{text-align:left;margin-left:0;min-width:0;overflow-wrap:anywhere}
 /* Let the footer wrap so the visa pill + Compare button stack on very narrow
    phones instead of overflowing the card. */
 .cityCard .ccFoot{flex-wrap:wrap;row-gap:6px}
}
.cityCard{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:.85rem .95rem;cursor:pointer;min-width:0;overflow:hidden;transition:border-color .12s,transform .12s,box-shadow .12s}
/* full-bleed landmark banner: cancel the card padding on top + sides, keep
   the card's rounded top corners. slice-scaled so it fills the band. */
/* max-width:none overrides the global img,svg{max-width:100%}, which would
   otherwise clamp the banner back to content width and kill the full bleed. */
.ccArt{display:block;width:calc(100% + 1.9rem);max-width:none;height:72px;margin:-.85rem -.95rem .7rem;border-radius:11px 11px 0 0}
.ccPhoto{object-fit:cover;background:var(--panel2)}
.photoCredits{margin-top:.7rem;font-size:12px;color:var(--muted)}
.photoCredits summary{cursor:pointer;color:var(--sub)}
.photoCredits ul{margin:.5rem 0 0;padding-left:1.1rem;display:grid;gap:.25rem}
.photoCredits a{color:var(--accent);text-decoration:none}
.photoCredits a:hover{text-decoration:underline}
.cityCard:hover,.cityCard:focus-visible{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08);outline:none}
.cityCard.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.ccHead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ccHead h3{margin:0;font-size:16px;letter-spacing:-.01em}
.ccRank{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ccCountry{margin:.05rem 0 .45rem;color:var(--muted);font-size:12px}
.ccHero{display:flex;align-items:baseline;gap:7px;margin-bottom:.55rem}
.ccHero b{font-size:30px;font-weight:600;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.ccHero span{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
/* minmax(0,1fr) caps the column to the card width; without it the grid column
   grows to the widest row (a long language value), pushing every row's value
   past the card edge where overflow:hidden clips the level pills. */
.ccStats{display:grid;grid-template-columns:minmax(0,1fr);gap:.28rem;margin-bottom:.6rem}
.ccStat{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;cursor:help;min-width:0}
.ccStat .k{color:var(--sub);flex:0 0 auto}
/* value may wrap (e.g. "Tagalog / Filipino" + its level pill) instead of overflowing */
.ccStat .v{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;min-width:0;overflow-wrap:anywhere}
/* time-zone gap, color-coded by how hard it is to overlap: easy (0-3h) reads as
   the accent green, mid (4-7h) muted, hard (8h+) the warm/red tone. */
.tzDiff-easy{color:var(--accent)}
.tzDiff-mid{color:var(--sub)}
.tzDiff-hard{color:var(--warm)}
.ccFoot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--border);padding-top:.55rem}
.ccFootBtns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ccGo{color:var(--accent);text-decoration:none;font-weight:600;font-size:12.5px;white-space:nowrap}
.ccGo:hover{text-decoration:underline}
.ccCmpBtn{appearance:none;border:1px solid var(--border);background:var(--panel2);color:var(--sub);font:inherit;font-size:12px;font-weight:600;padding:.34rem .62rem;border-radius:8px;cursor:pointer;white-space:nowrap}
.ccCmpBtn:hover{background:var(--mid);color:var(--ink)}
.ccCmpBtn.on{background:var(--accent-bg);border-color:transparent;color:var(--accent)}
.pill.visa-3{background:var(--accent-bg);color:var(--accent)}
.pill.visa-2{background:var(--mid);color:var(--sub)}
.pill.visa-1{background:var(--mid);color:var(--warm)}
.cityCompareBox{margin-top:1rem}
.cityCmpTop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:.8rem}
.cityCmpTop b{color:var(--ink);font-size:14px}
.cityCmpTop span{font-size:12px;color:var(--muted)}
.cityCmpColPop{width:280px}
.cityCmpColSel{margin-bottom:0}
.cityCmpColItem{display:flex;align-items:center;gap:.45rem;padding:.25rem .2rem;border-radius:8px}
.cityCmpColItem.is-drop{background:var(--panel2)}
.cityCmpColItem.is-dragging{opacity:.5}
.cityCmpColLabel{display:flex;align-items:center;gap:.45rem;flex:1;min-width:0;cursor:pointer}
.cityCmpColLabel span{font-size:12.5px;color:var(--ink);line-height:1.35}
.cityCmpGrip{color:var(--muted);font-size:12px;cursor:grab;user-select:none}
.cityCmpTable{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.cityCmpTable th,.cityCmpTable td{padding:.55rem .65rem;border-bottom:1px solid var(--border);vertical-align:top}
.cityCmpTable thead th{position:sticky;top:0;background:var(--panel);z-index:1}
.cityCmpTable th:first-child,.cityCmpTable td:first-child{text-align:left}
.cityCmpTable td{text-align:left}
.cityCmpMetric{width:170px;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.cityCmpMetric[title]{cursor:help}
.cityCmpCityCol{cursor:grab}
.cityCmpCityCol.is-drop{background:var(--panel2)}
.cityCmpCityCol.is-dragging{opacity:.55}
.cityCmpHead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.cityCmpHead b{display:block;color:var(--ink);font-size:14px;line-height:1.2}
.cityCmpHead span{display:block;margin-top:.15rem;color:var(--muted);font-size:11.5px;font-weight:500}
.cityCmpRemove{appearance:none;border:1px solid var(--border);background:var(--panel2);color:var(--sub);font:inherit;font-size:11.5px;padding:.25rem .52rem;border-radius:7px;cursor:pointer}
.cityCmpRemove:hover{background:var(--mid);color:var(--ink)}
.cityCmpWrap{display:block;border-radius:10px;padding:.45rem .55rem;margin:-.15rem 0}
.cityCmpWrap[title]{cursor:help}
.cityCmpMain{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.cityCmpSub{display:block;margin-top:.18rem;color:var(--muted);font-size:11.5px;line-height:1.45}
.cityCmpTable td.dim{color:var(--muted)}

.countryGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.countryCard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1.1rem;text-decoration:none;color:var(--ink);transition:border-color .12s,transform .12s,box-shadow .12s}
a.countryCard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.countryCard .cc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.countryCard .cc-flag{font-size:26px;line-height:1}
.cc-badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--accent-bg);padding:2px 9px;border-radius:20px}
.cc-badge-soon{color:var(--muted);background:var(--panel2)}
.countryCard h3{margin:0 0 .3rem;font-size:18px}
.countryCard p{margin:0 0 .9rem;font-size:13px;color:var(--sub);line-height:1.55;flex:1}
.countryCard .cc-go{font-size:13px;font-weight:600;color:var(--accent)}
.countryCard.cc-soon{opacity:.72;cursor:default}
.countryCard.cc-soon .cc-go{color:var(--muted)}

/* ---------- dating market (country level) + data-level tags ---------- */
/* Level tags exist so a figure can never silently change granularity: every
   ratio shows the level it was MEASURED at, not the level of its row. */
.pill.lvl-country{background:var(--mid);color:var(--muted)}
.pill.lvl-city{background:var(--accent-bg);color:var(--accent)}
.pill.lvl-regional{background:var(--accent-bg);color:var(--accent)}
.pill.lvl-metro{background:var(--mid);color:var(--sub)}
.pill.src,.pill.ok{background:var(--accent-bg);color:var(--accent)}
.pill.warn{background:var(--mid);color:var(--warm)}
.pill.air-international{background:var(--accent-bg);color:var(--accent)}
.pill.air-domestic{background:var(--mid);color:var(--muted)}
h2 .pill,h3 .pill{vertical-align:middle;margin-left:.45rem;text-transform:none;letter-spacing:0}
td .pill{margin-left:.35rem;cursor:help}
td.dim{color:var(--muted)}

.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.6rem}
.dh{font-size:14px;font-weight:600;margin:0 0 .6rem;color:var(--ink)}
.dapps{display:flex;flex-wrap:wrap;gap:.4rem}
.dapp{display:inline-flex;align-items:center;gap:.3rem;background:var(--panel2);
 border:1px solid var(--border);border-radius:9px;padding:.3rem .5rem;font-size:13px}
.dbig{font-size:26px;font-weight:600;margin:.1rem 0 .4rem;font-variant-numeric:tabular-nums;
 letter-spacing:-.02em;color:var(--accent)}
.drank{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
/* Ranked-column view of the Android usage rank. Per-cell alignment overrides
   the global right-aligned th,td. */
.appRank{width:100%;border-collapse:collapse;font-size:13px}
.appRank th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:500;color:var(--muted);padding:.3rem .45rem;border-bottom:1px solid var(--border)}
.appRank td{padding:.42rem .45rem;border-bottom:1px solid var(--border)}
.appRank tr:last-child td{border-bottom:0}
.appRank .arRank{width:32px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.appRank .arName{text-align:left;font-weight:600;color:var(--ink)}
.appRank .arType{text-align:right;white-space:nowrap}

/* intent-mix colours double as the app-class key, so a chip and its bar segment
   always agree */
.cls-casual,.pill.cls-casual{background:#c0392b26;color:#b0392b}
.cls-relationship,.pill.cls-relationship{background:#0f6e5626;color:var(--accent)}
.cls-international,.pill.cls-international{background:#b4530f26;color:var(--warm)}
.cls-intl_local{background:#8a5cd626;color:#7a4fc4}
.cls-lgbtq,.pill.cls-lgbtq{background:#2b6cb026;color:#2b6cb0}
.cls-local{background:var(--mid);color:var(--sub)}
@media (prefers-color-scheme:dark){
 .cls-casual,.pill.cls-casual{color:#e2705f}
 .cls-lgbtq,.pill.cls-lgbtq{color:#6ba8e0}
 .cls-intl_local{color:#a98ae4}
}
@media (max-width:760px){.dgrid{grid-template-columns:1fr;gap:1.5rem}}

/* ---------- visa & length of stay ---------- */
.visaHead{margin:0 0 .8rem;padding:.55rem .8rem;border-left:3px solid var(--accent);background:var(--accent-bg);border-radius:0 7px 7px 0;font-size:14px;color:var(--ink)}
.visaTiers{margin-bottom:.4rem}
.visaPassSel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--sub);margin:.2rem 0 0;min-width:0}
.visaPassSel select{font:inherit;font-size:13px;padding:.4rem .5rem;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--ink);max-width:100%;min-width:0}
.visaPassSel select:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.visaUsd{color:var(--muted);font-weight:400}
.visaStats{display:flex;flex-wrap:wrap;gap:.6rem;margin:.2rem 0 1rem}
.visaStat{flex:1 1 150px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:.7rem .8rem}
.visaStatNum{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.1}
.visaStatLab{display:block;font-size:11.5px;color:var(--muted);margin-top:.25rem}
.visaStatGood{background:var(--accent-bg);border-color:transparent}
.visaStatGood .visaStatNum{color:var(--accent)}
.visaLadder{border-collapse:collapse;width:100%;min-width:520px;font-size:13px}
.visaLadder th{text-align:left;padding:.4rem .6rem;border-bottom:1px solid var(--border)}
.visaLadder td{padding:.55rem .6rem;border-bottom:1px solid var(--border);vertical-align:top;text-align:left}
.visaLadder .visaNum{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--sub)}
.visaNote{display:block;font-size:11.5px;color:var(--muted);margin-top:.15rem;max-width:44ch;white-space:normal}
.visaSkip{opacity:.45}.visaSkip b{text-decoration:line-through}
.visaBlock{padding:.8rem .9rem;border-radius:9px;background:var(--panel2);border:1px solid var(--border);font-size:13.5px;line-height:1.5}
.visaBlockWarn{border-left:3px solid var(--warm)}
.visaExtras{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:.9rem 0 0}
.visaExtras>div{background:var(--panel2);border-radius:8px;padding:.55rem .7rem;font-size:12.5px;color:var(--sub);line-height:1.45}
.visaSteps{margin:.8rem 0 0}
.visaSteps summary{cursor:pointer;color:var(--accent);font-size:13px;font-weight:600}
.visaSteps ol{margin:.5rem 0 0;padding-left:1.2rem;color:var(--sub);font-size:13px;line-height:1.6}
.visaSrc a{color:var(--accent)}

/* ---------- can you live here ---------- */
.liveNet{border:1px solid var(--border);border-radius:11px;padding:.8rem .9rem;margin:0 0 1rem}
.liveNetHead{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:15px}
.liveWord{color:var(--sub);font-size:12.5px}
.liveNetNums{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:.5rem;font-size:15px;font-variant-numeric:tabular-nums}
.liveNetNums i{color:var(--muted);font-size:11.5px;font-style:normal;font-variant-numeric:normal}
.liveTable{border-collapse:collapse;width:100%;font-size:13.5px}
.liveTable th,.liveTable td{text-align:center;padding:.5rem .5rem;border-bottom:1px solid var(--border);vertical-align:middle}
.liveTable thead th{color:var(--muted);font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.liveTable th[scope="row"]{text-align:left;font-weight:600;color:var(--ink);font-size:13.5px;text-transform:none;letter-spacing:0}
.liveScale{display:block;font-size:10px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400;margin-top:1px}
.liveTable td b{display:block;font-size:16px;font-variant-numeric:tabular-nums;color:var(--ink)}
.liveTable td span{display:block;font-size:11px;color:var(--sub);margin-top:1px}
.liveNa{color:var(--muted)}
.livePm{margin:.8rem 0 0;background:var(--panel2);border-radius:9px;padding:.6rem .7rem}
.liveExtras{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:.9rem 0 0}
.liveExtras>div{background:var(--panel2);border-radius:8px;padding:.55rem .7rem;font-size:12.5px;color:var(--sub);line-height:1.45}

/* ---------- settle / long-stay visas ---------- */
.settleWrap{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--border)}
.settleH{font-size:16px;font-weight:600;margin:0 0 .1rem}
.settleSummary{cursor:pointer;color:var(--ink)}
.settleBody{margin-top:.6rem}
.settleCard{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:.7rem .8rem;margin-bottom:.6rem}
.settleTop{display:flex;align-items:center;gap:.5rem;font-size:14.5px}
.settleTag{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em}
.settleTag-settle{background:var(--accent-bg);color:var(--accent)}
.settleTag-new{background:var(--mid);color:var(--warm)}
.settleGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.55rem 0 .1rem;font-size:13px}
.settleGrid>div{color:var(--ink)}
.settleGrid span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:1px}
.settleCatch{margin:.5rem 0 0}

/* ---------- openness to foreigners ---------- */
.dopen{background:var(--panel2);border:1px solid var(--border);border-radius:11px;padding:.75rem .85rem;margin-bottom:1rem}
.dopenHead{display:flex;align-items:center;gap:.5rem;font-size:15px}
.dopenTag{font-size:11px;font-weight:600;padding:1px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em}
.dopenTag-high{background:var(--accent-bg);color:var(--accent)}
.dopenTag-moderate{background:var(--mid);color:var(--warm)}
.dopenTag-low,.dopenTag-verylow{background:var(--mid);color:var(--muted)}
.dopenBar{display:flex;height:14px;margin-top:.55rem;border-radius:7px;overflow:hidden;background:var(--mid)}
.dopenSeg{min-width:2px}
.dopenLoc{background:#8a5cd6}
.dopenIntl{background:var(--warm)}
.dopenRest{background:var(--mid)}

/* ---------- full ADM3 ratio table ---------- */
.a3Table{border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:720px}
.a3pop{color:var(--sub);font-weight:600}
.a3Table th,.a3Table td{border-bottom:1px solid var(--border);padding:.4rem .5rem;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.a3Table thead th{color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;background:var(--panel);user-select:none}
.a3Table thead th:hover,.a3Table thead th.sortOn{color:var(--accent)}
.a3Table thead th.sortOn:after{content:"";display:inline-block;margin-left:4px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;vertical-align:middle}
.a3Table thead th.sortOn[data-dir="asc"]:after{border-bottom:5px solid currentColor}
.a3Table thead th.sortOn[data-dir="desc"]:after{border-top:5px solid currentColor}
.a3name{position:sticky;left:0;z-index:1;background:var(--panel);text-align:left!important;min-width:180px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.a3Table thead th.a3name{z-index:2}
.a3Table tbody th.a3name{font-weight:500;color:var(--ink);font-size:12.5px}
.a3na{color:var(--muted)}
.a3thin{opacity:.4}

/* ---------- disaster / singlehood / gender-norms blocks ---------- */
.riskHead{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.statBig{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.statBig small{font-size:14px;color:var(--muted);font-weight:500}
.riskWord{font-size:13px;color:var(--sub)}
.hazList{display:flex;flex-direction:column;gap:.5rem;margin:.7rem 0 0}
.hazRow{display:grid;grid-template-columns:118px 1fr 34px;gap:10px;align-items:center;font-size:13px}
.hazLbl{color:var(--ink)}
.hazTrack{height:9px;border-radius:6px;background:var(--mid);overflow:hidden}
.hazFill{display:block;height:100%;border-radius:6px}
.hazNum{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.gnBar{display:flex;height:14px;margin:.2rem 0 .4rem;border-radius:7px;overflow:hidden;background:var(--mid)}
.gnSeg{min-width:2px}
.gnAgree{background:var(--warm)}
.gnMid{background:var(--muted)}
.gnDis{background:var(--accent)}
.gnKey{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:12px;color:var(--sub)}
.gnKey i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.gnKey i.gnAgree{background:var(--warm)}.gnKey i.gnMid{background:var(--muted)}.gnKey i.gnDis{background:var(--accent)}

/* ---------- section tabs (desktop) / accordion (mobile) ---------- */
/* One active section at a time. Desktop = a tab bar above a single panel;
   mobile = a stacked accordion (same single-open state). Default: City shortlist. */
.secTabsWrap{margin:1.5rem 0 0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--border);scrollbar-width:none}
.secTabsWrap::-webkit-scrollbar{display:none}
.secTabs{display:flex;gap:2px;min-width:max-content}
.secTab{appearance:none;border:0;background:transparent;color:var(--sub);font:inherit;font-size:14px;font-weight:600;padding:.62rem .9rem;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.secTab:hover{color:var(--ink)}
.secTab.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.secTab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.secAccHead{display:none}
.secChev{color:var(--muted);font-size:12px;transition:transform .15s}
.secPanel{margin-top:0;padding-top:1.7rem;border-top:0;display:none}
.secPanel.is-active{display:block}
.secPanelBody{display:block}

/* ---------- common scams ---------- */
.scamLead{margin:0 0 .8rem}
.scamCard{background:var(--panel2);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:10px;padding:.7rem .85rem;margin-bottom:.7rem}
.scamCard.scamSev-high{border-left-color:var(--warm)}
.scamCard.scamSev-medium{border-left-color:var(--mid)}
.scamTop{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;font-size:15px}
.scamSev{font-size:10.5px;font-weight:600;padding:1px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;margin-left:auto}
.scamSevTag-high{background:var(--accent-bg);color:var(--warm)}
.scamSevTag-medium{background:var(--mid);color:var(--sub)}
.scamSevTag-low{background:var(--mid);color:var(--muted)}
.scamWho{margin:.4rem 0 .1rem;font-size:12.5px;color:var(--sub)}
.scamGrid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.55rem 0 .1rem;font-size:13px;line-height:1.5}
.scamGrid>div{color:var(--ink)}
.scamGrid span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:2px}
.scamSrc{margin:.55rem 0 0}

/* ---------- mobile / touch ---------- */
img,svg{max-width:100%}
@media (max-width:640px){
 .dapp{font-size:12.5px}
 .dbig{font-size:22px}
 h2 .pill,h3 .pill{display:inline-block;margin:.2rem 0 0 .4rem}
 .sheadTop{align-items:flex-start}
 /* tabs collapse to a stacked accordion: hide the tab bar, show a header per
    section, and reveal only the open section's body. Open state is acc-open
    (can be none — tap the open header again to collapse), separate from the
    desktop is-active tab so the desktop single-panel view never goes blank. */
 .secTabsWrap{display:none}
 .secPanel{display:block;margin-top:0;padding-top:0;border-top:1px solid var(--border)}
 .secPanel:first-of-type{border-top:0}
 .secAccHead{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;appearance:none;border:0;background:transparent;color:var(--ink);font:inherit;font-size:17px;font-weight:600;letter-spacing:-.01em;padding:1rem .1rem;cursor:pointer;text-align:left}
 .secAccHead .secChev{font-size:14px}
 .secAccHead[aria-expanded="true"] .secChev{transform:rotate(90deg)}
 .secAccHead:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
 .secPanelBody{display:none;padding-bottom:.7rem}
 .secPanel.acc-open .secPanelBody{display:block}
 .wrap{padding:1.6rem .55rem 3rem}
 h1{font-size:27px}
 .lede{font-size:15.5px}
 .shead p{font-size:13.5px}
 section{margin-top:2rem;padding-top:1.5rem}
 /* 16px inputs stop iOS from zooming the page on focus */
 .agerange select,.phsearch input,.ptsel select{font-size:16px;padding:.5rem .6rem}
 /* stack the passport/floor/focus controls so each gets a full, non-overflowing row */
 .indexControls{flex-direction:column;align-items:stretch}
 .indexControls .ptsel,.indexControls .visaStep{width:100%}
 .indexControls .ptsel select{flex:1}
 .agerange{flex-wrap:wrap}
 /* finger-friendly tap targets */
 .seg button{padding:.55rem .8rem;font-size:13px;white-space:nowrap}
 .chips button,.miniBtn{padding:.5rem .8rem;font-size:12.5px}
 .maptools button{width:36px;height:36px}
 /* wide segmented controls swipe horizontally instead of wrapping/squishing */
 .seg{min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .seg::-webkit-scrollbar{display:none}
 .seg button{flex:0 0 auto}
 /* age dual-slider: stack label over a full-width track */
 .ageSlider{grid-template-columns:1fr;gap:6px}
 .legend{margin-left:0;width:100%;justify-content:space-between}
 .legend .ramp,.legend .rampStep{flex:1}
 /* denser ranking table + smooth momentum scroll on the overflow wrapper */
 table{font-size:12.5px}
 th,td{padding:.45rem .5rem}
 [style*="overflow-x:auto"]{-webkit-overflow-scrolling:touch}
 /* keep hover tooltips inside the screen */
 #tip,#ptip{max-width:78vw;white-space:normal}
 .religionList,.pyrTop,.visaExtras,.liveExtras{grid-template-columns:1fr}
 .visaStat{flex:1 1 100%}
 .settleGrid{grid-template-columns:1fr}
 .scamGrid{grid-template-columns:1fr}
 .cmpGrid{grid-template-columns:1fr}
 .pyrAxis,.pyrRow{grid-template-columns:40px 1fr 40px 1fr 40px 34px;gap:5px}
 .pyrVal,.pyrAge{font-size:10.5px}
 .pyrSide{height:13px}
 .wxLegend{margin-left:0}
 .wxTable thead th:first-child{width:76px}
 .wxTable th[scope="row"]{font-size:11px}
 /* 16px or iOS zooms the whole page when the select takes focus */
 .relPick select{font-size:16px;max-width:none;flex:1}
 .relPick{width:100%}
 .visaPassSel select{font-size:16px;flex:1}
}

/* metric-label emoji: slightly smaller, a hair of space, non-selectable */
.mIcon{margin-right:.35em;font-size:.95em;line-height:1}

/* ---------- site header ---------- */
.siteHeader{position:sticky;top:0;z-index:50;background:var(--panel);border-bottom:1px solid var(--border)}
.siteHeaderInner{max-width:1000px;margin:0 auto;padding:.55rem 1.25rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.brand{font-weight:700;font-size:18px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.brand span{color:var(--accent)}
.siteNav{display:flex;gap:.25rem;margin-left:.5rem}
.siteNav a{color:var(--sub);text-decoration:none;font-size:14px;padding:.35rem .6rem;border-radius:8px;white-space:nowrap}
.siteNav a:hover{background:var(--panel2);color:var(--ink)}
.authArea{margin-left:auto;display:flex;align-items:center;gap:.5rem;font-size:13px}
.authEmail{color:var(--sub);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.authBtn{appearance:none;border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-size:13px;padding:.34rem .7rem;border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap;min-height:34px;display:inline-flex;align-items:center}
.authBtn:hover{filter:brightness(1.06)}
.authBtn.ghost{background:transparent;color:var(--sub);border-color:var(--border)}
.authBtn.ghost:hover{background:var(--panel2);color:var(--ink)}
.proBadge{background:var(--warm);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;padding:.22rem .45rem;border-radius:6px}

/* ---------- auth / pro page ---------- */
.authPage .lede{margin-bottom:.4rem}
.authGrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6rem}
.authCard{padding:1.4rem}
.authH{margin:0 0 1.1rem;font-size:16px}
.googleBtn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;box-sizing:border-box;background:#fff;color:#3c4043;border:1px solid #dadce0;border-radius:10px;padding:.6rem 1rem;font:inherit;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;min-height:44px;transition:box-shadow .15s,background .15s}
.googleBtn:hover{box-shadow:0 1px 3px rgba(60,64,67,.3);background:#f8f9fa}
.gIcon{flex:0 0 auto}
.authDivider{display:flex;align-items:center;gap:.75rem;color:var(--muted);font-size:12px;margin:1.1rem 0}
.authDivider::before,.authDivider::after{content:"";flex:1;height:1px;background:var(--border)}
.authRow{display:flex;gap:.5rem}
.authRow input{flex:1;min-width:0;font-size:16px;padding:.55rem .7rem;border-radius:9px;border:1px solid var(--border);background:var(--bg);color:var(--ink)}
.authRow input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.btnPrimary{appearance:none;border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-size:14px;font-weight:600;padding:.55rem 1rem;border-radius:9px;cursor:pointer;white-space:nowrap;min-height:44px}
.btnPrimary:hover{filter:brightness(1.06)}
.btnGhost{appearance:none;border:1px solid var(--border);background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;padding:.55rem 1rem;border-radius:9px;cursor:pointer;min-height:44px}
.btnGhost:hover{background:var(--panel2)}
.btnUnlock{border-color:var(--warm);background:var(--warm)}
.authActions{display:flex;gap:.6rem;flex-wrap:wrap}
.authStatus{font-size:14px;color:var(--ink);margin:0 0 1rem}
.authMsg{margin:.85rem 0 0}
.authMsg a{color:var(--accent);font-weight:600}
.proData{white-space:pre-wrap;overflow-x:auto;font-size:12.5px;background:var(--panel2);border:1px solid var(--border);border-radius:9px;padding:.7rem;margin:1rem 0 0}
.proData:empty{display:none}
@media (max-width:640px){.authGrid{grid-template-columns:1fr}}
/* ---- Redesigned /pro pricing page ---- */
.proPage .lede{margin-bottom:.4rem}
.proLayout{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;margin-top:1.6rem;align-items:start}
.proLayout>*{min-width:0}
.proCard{padding:1.6rem}
.proStatus{font-size:13.5px;color:var(--sub);margin:0 0 1.1rem}
.proBadge{display:inline-block;background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px}
.proPriceRow{display:flex;align-items:baseline;gap:.6rem;margin:.9rem 0 .2rem;flex-wrap:wrap}
.proWas{font-size:20px;color:var(--muted);text-decoration:line-through}
.proNow{font-size:44px;font-weight:800;line-height:1;color:var(--ink)}
.proOnce{font-size:11.5px;color:var(--muted);line-height:1.25}
.proFeatures{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.55rem}
.proFeatures li{position:relative;padding-left:1.5rem;font-size:14px;color:var(--ink)}
.proFeatures li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--accent);font-weight:800}
.proActions{display:flex;flex-direction:column;gap:.6rem;margin-top:1.4rem}
.btnBig{width:100%;box-sizing:border-box;font-size:15px;min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.proFinePrint{font-size:11.5px;color:var(--muted);margin:.8rem 0 0;text-align:center}
.proWhySignin{margin:1rem 0 0}
.proUnlocked{text-align:center;padding:.6rem 0}
.proCheck{width:56px;height:56px;margin:0 auto .8rem;border-radius:999px;background:var(--panel2);border:2px solid var(--accent);color:var(--accent);font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center}
.proUnlockedH{margin:0 0 .3rem;font-size:22px}
.proUnlockedSub{margin:0 auto 1.2rem;max-width:34ch;font-size:14px;color:var(--sub)}
.proUnlocked .proData{text-align:left}
@media (max-width:760px){.proLayout{grid-template-columns:1fr}}
@media (max-width:640px){
 .siteHeaderInner{padding:.5rem .9rem;gap:.45rem}
 .brand{font-size:16px}
 .siteNav{margin-left:.25rem;gap:0}
 .siteNav a{padding:.3rem .45rem;font-size:13px}
 .authEmail{display:none}
}

/* ---------- fit quiz (homepage) ---------- */
.quizRow{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:.9rem 0 0}
.quizCta{appearance:none;border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-size:14.5px;font-weight:600;padding:.6rem 1.1rem;border-radius:999px;cursor:pointer;min-height:40px}
.quizCta:hover{filter:brightness(1.06)}
.quizChipOn{font-size:12.5px;color:var(--accent);font-weight:600}
.paidOk{color:var(--accent);font-weight:700}
/* Pro upgrade CTA banner (homepage + country pages) → hosted Stripe on /pro */
.proBanner{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:.2rem 0 1.4rem;padding:.75rem 1rem;border:1px solid var(--border);border-radius:12px;background:var(--panel)}
.proBanner p{margin:0;font-size:13.5px;color:var(--sub);flex:1 1 260px}
.proBanner b{color:var(--ink)}
.proCtaBtn{appearance:none;border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-size:14px;font-weight:600;padding:.5rem .95rem;border-radius:999px;text-decoration:none;white-space:nowrap;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.proCtaBtn:hover{filter:brightness(1.06)}
@media (max-width:640px){.proCtaBtn{width:100%}}
.qChipLink{appearance:none;border:none;background:none;color:var(--muted);font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer;padding:.3rem;min-height:36px}
/* modal lives outside .wrap, so it re-declares the font stack */
.quizOverlay{position:fixed;inset:0;z-index:90;background:rgba(10,12,10,.55);display:flex;align-items:center;justify-content:center;padding:1rem;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.55}
.quizOverlay[hidden]{display:none}
/* flex column + stable min-height so the body scrolls internally and the Back/
   Next row stays anchored at the same spot on every step — same-place clicking */
.quizModal{background:var(--panel);color:var(--ink);border:1px solid var(--border);border-radius:14px;width:100%;max-width:480px;max-height:92vh;min-height:min(540px,82vh);display:flex;flex-direction:column;padding:1rem 1.2rem 1.2rem}
.quizBody{flex:1 1 auto;overflow-y:auto;min-height:0}
.quizTop{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12.5px}
.quizX{appearance:none;border:none;background:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;padding:.2rem .5rem;min-width:36px;min-height:36px}
.quizX:hover{color:var(--ink)}
.qTitle{margin:.2rem 0 .8rem;font-size:17px}
.quizModal .note{font-size:12.5px;color:var(--sub)}
.qSelect{width:100%;font-size:16px;padding:.55rem .7rem;border-radius:9px;border:1px solid var(--border);background:var(--bg);color:var(--ink)}
.qChips{display:flex;flex-direction:column;gap:.5rem}
.qChip{appearance:none;border:1px solid var(--border);background:var(--panel2);color:var(--ink);font:inherit;font-size:14px;padding:.55rem .9rem;border-radius:10px;cursor:pointer;text-align:left;min-height:40px}
.qChip:hover{border-color:var(--accent)}
.qChip.on{border-color:var(--accent);background:var(--accent-bg);font-weight:600}
.qChip.sm{font-size:12.5px;padding:.4rem .6rem;min-height:36px;text-align:center}
.qPrioRow{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.4rem 0;border-bottom:1px dashed var(--border)}
.qPrioRow:last-of-type{border-bottom:none}
.qPrioLabel{font-size:14px;font-weight:600}
.qPrioChips{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.qBudget{display:flex;align-items:center;gap:.8rem}
.qBudget input{flex:1;min-width:0}
.qBudget output{font-weight:700;min-width:88px;text-align:right}
.quizNav{flex:0 0 auto;display:flex;justify-content:space-between;gap:.6rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--border)}
/* class display:flex would otherwise beat the [hidden] attribute — keep the
   result screen simple: no Back / "See my results" nav, just the map CTA */
.quizNav[hidden]{display:none}
.quizBtn{appearance:none;border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-size:14px;font-weight:600;padding:.55rem 1rem;border-radius:9px;cursor:pointer;min-height:40px}
.quizBtn:hover{filter:brightness(1.06)}
.quizBtn.ghost{background:transparent;color:var(--ink);border-color:var(--border)}
.quizBtn.ghost:hover{background:var(--panel2)}
.quizBtn:disabled{opacity:.4;cursor:default}
.qResGrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.4rem 0}
.qResGrid h4{margin:.2rem 0 .4rem;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.qResList{margin:0;padding-left:1.2rem;font-size:14px}
.qResList li{margin:.25rem 0}
.qDim{color:var(--muted);font-size:12px}
.qScore{float:right;font-weight:700;color:var(--accent)}
.qActions{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:.8rem}
.qActions .quizBtn{font-size:15px;padding:.6rem 1.2rem}
.qLink{appearance:none;border:none;background:none;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;padding:.4rem .2rem;min-height:36px}
.qLink:hover{color:var(--ink)}
/* ---------- single-city metrics popup ---------- */
.cityOverlay{position:fixed;inset:0;z-index:95;background:rgba(10,12,10,.55);display:flex;align-items:center;justify-content:center;padding:1rem;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5}
.cityOverlay[hidden]{display:none}
.cityModal{position:relative;background:var(--panel);color:var(--ink);border:1px solid var(--border);border-radius:14px;width:100%;max-width:460px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.cityModalX{position:absolute;top:.5rem;right:.5rem;z-index:2;appearance:none;border:none;background:rgba(0,0,0,.35);color:#fff;font-size:20px;line-height:1;cursor:pointer;width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.cityModalX:hover{background:rgba(0,0,0,.55)}
.cityModalHead{position:relative;flex:0 0 auto}
.cityModalHead .ccArt{width:100%;height:96px;object-fit:cover;display:block}
.cmHeadText{position:absolute;left:.9rem;bottom:.5rem;right:.9rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cmHeadText h3{margin:0;font-size:19px}
.cmHeadText p{margin:.1rem 0 0;font-size:12.5px;opacity:.95;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.cmHero{position:absolute;top:.5rem;left:.9rem;background:rgba(0,0,0,.4);color:#fff;border-radius:10px;padding:.3rem .55rem;text-align:center;line-height:1.1}
.cmHero b{font-size:20px;display:block}
.cmHero span{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;opacity:.9}
.cityModalBody{flex:1 1 auto;overflow-y:auto;min-height:0;padding:.4rem .9rem}
.cdGroup{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:.7rem 0 .1rem;padding-top:.5rem;border-top:1px solid var(--border)}
.cdGroup:first-child{border-top:none;padding-top:.1rem;margin-top:.2rem}
.cdRow{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding:.42rem 0;border-bottom:1px solid var(--border);font-size:13.5px}
.cdRow:last-child{border-bottom:none}
.cdK{color:var(--sub);flex:0 0 auto}
.cdV{font-weight:600;text-align:right;border-radius:6px;padding:0 .3rem}
.cdV.dim{color:var(--muted);font-weight:400}
.cdV a{color:var(--warm);text-decoration:none}
.cdSub{display:block;font-size:10.5px;font-weight:400;color:var(--muted);margin-top:1px}
.cityModalFoot{flex:0 0 auto;display:flex;flex-direction:column;gap:.5rem;padding:.8rem .9rem;border-top:1px solid var(--border);background:var(--panel2)}
.cdDeep{display:block;text-align:center;background:var(--accent);color:#fff;font-size:14.5px;font-weight:600;padding:.6rem 1rem;border-radius:10px;text-decoration:none}
.cdDeep:hover{filter:brightness(1.06)}
.cdDeepPro{background:var(--warm)}
.cdCompare{appearance:none;border:1px solid var(--border);background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:600;padding:.45rem 1rem;border-radius:9px;cursor:pointer;min-height:36px}
.cdCompare:hover{background:var(--panel)}
.cdCompare.on{border-color:var(--warm);color:var(--warm)}

/* mobile quiz overrides live HERE, after the base quiz rules — putting them in
   the main 640px block up top would lose the cascade to these later base rules */
@media (max-width:640px){
 .quizOverlay{padding:0;align-items:flex-end} /* bottom sheet */
 .quizModal{max-width:none;border-radius:14px 14px 0 0;max-height:94vh}
 .qResGrid{grid-template-columns:1fr}
 .qPrioRow{flex-direction:column;align-items:flex-start}
 .qPrioChips{justify-content:flex-start}
 .cityOverlay{padding:0;align-items:flex-end}
 .cityModal{max-width:none;border-radius:14px 14px 0 0;max-height:94vh}
}

/* ================= Research desk (dashboard) ================= */
.rsApp{max-width:1440px;margin:0 auto;padding:1.2rem 1.1rem 3rem;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink)}
.rsIntro h1{margin:.2rem 0 .3rem;font-size:24px}
.rsIntro .note{max-width:80ch;font-size:13px}
.rsTopbar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end;justify-content:space-between;margin:1rem 0 .8rem;padding:.7rem .8rem;background:var(--panel);border:1px solid var(--border);border-radius:12px}
.rsLens{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:flex-end}
.rsLensLabel{display:flex;flex-direction:column;justify-content:center;min-height:38px;padding-right:.2rem}
.rsLensLabel b{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink)}
.rsLensLabel span{font-size:11px;color:var(--muted);white-space:nowrap}
.rsLctl{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--sub);position:relative}
.rsLctl select{font-size:14px;padding:.35rem .5rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--ink)}
.rsLctl b{color:var(--ink)}
.rsBud input{width:130px}
.rsAges{flex-direction:row;align-items:center;gap:.5rem;flex-wrap:wrap}
.rsAges .rsAgeTrack{width:150px;flex:0 0 150px}
.rsPrioPop{position:absolute;top:100%;left:0;margin-top:6px;z-index:20;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);padding:.6rem .7rem;min-width:230px}
.rsPrioRow{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.28rem 0;font-size:13px}
.rsPrioChips{display:flex;gap:.25rem}
.rsPrioChip{appearance:none;border:1px solid var(--border);background:var(--panel2);color:var(--ink);font:inherit;font-size:11px;padding:.25rem .5rem;border-radius:7px;cursor:pointer}
.rsPrioChip.on{border-color:var(--accent);background:var(--accent-bg);color:var(--accent);font-weight:600}
.rsBarRight{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
#rsSearch{font-size:15px;padding:.45rem .7rem;border-radius:9px;border:1px solid var(--border);background:var(--bg);color:var(--ink);min-width:200px}
.rsViews{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.rsViews button{appearance:none;border:0;background:transparent;color:var(--sub);font:inherit;font-size:13px;padding:.45rem .8rem;cursor:pointer}
.rsViews button.on{background:var(--accent-bg);color:var(--accent);font-weight:600}
.rsMapCtl{display:inline-flex;align-items:center;gap:.4rem;font-size:12px;color:var(--sub)}
.rsMapCtl select{font:inherit;font-size:13px;padding:.35rem .55rem;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--ink)}
.rsMapBox{position:relative;border:1px solid var(--border);border-radius:12px;background:var(--bg);overflow:hidden}
#rsMap{min-height:360px}
#rsMap svg{background:linear-gradient(180deg,rgba(15,110,86,.06),transparent 55%)}
#rsMap path{cursor:pointer}
.rsMapTip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-118%);background:var(--panel);color:var(--ink);border:1px solid var(--border);box-shadow:0 8px 22px rgba(0,0,0,.22);font-size:12px;line-height:1.45;padding:7px 9px;border-radius:8px;white-space:nowrap;transition:opacity .08s;z-index:4}
.rsMapTip span{color:var(--muted)}
.rsMapLegend{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin:.65rem 0 0;font-size:12px;color:var(--muted)}
.rsMapLegend span{display:inline-flex;align-items:center;gap:.35rem}
.rsMapSwatch,.rsMapDotDemo{display:inline-block;width:10px;height:10px;border-radius:999px}
.rsMapGood{background:var(--accent)}
.rsMapMid{background:#b4530f}
.rsMapBad{background:#b23a2b}
.rsMapDotDemo{background:#8a93a6;opacity:.35;border:1px solid var(--border)}
.rsMapArcDemo{display:inline-block;width:16px;height:0;border-top:2px solid var(--accent);opacity:.7}
.rsMapRamp{display:inline-block;width:84px;height:10px;border-radius:999px;background:linear-gradient(90deg,#1d9e75,var(--mid,#c9a24a),#c0392b)}
.rsLegRamp{display:inline-block;width:80px;height:9px;border-radius:999px}
.rsLegEnd{color:var(--sub)}
.rsLegLine{display:inline-block;width:16px;height:0;border-top:2px solid;vertical-align:middle}
.rsLegDash{border-top-style:dashed}
/* map + shortlist side-by-side (the two-way link) */
.rsMapLayout{display:grid;grid-template-columns:1fr 220px;gap:.8rem;align-items:start}
.rsMapSide{max-height:430px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;background:var(--bg);padding:.3rem}
.rsMapSideHead{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:.4rem .45rem;position:sticky;top:0;background:var(--bg);z-index:1}
.rsMapSideItem{display:flex;justify-content:space-between;gap:.5rem;width:100%;appearance:none;border:1px solid transparent;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:12.5px;text-align:left;cursor:pointer;padding:.35rem .45rem}
.rsMapSideItem:hover{background:rgba(127,127,127,.1)}
.rsMapSideItem.isFocus{background:var(--accent-bg);border-color:var(--accent)}
.rsMapSideName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsMapSideV{flex:0 0 auto;color:var(--sub);font-variant-numeric:tabular-nums}
/* focus ring shared by grid rows, map dots and pinboard cards */
.rsTable tbody tr.isFocus>td{background:var(--accent-bg)}
.rsScatterBox{position:relative;border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:.3rem}
.rsWhy{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:.6rem .7rem;margin:0 0 .8rem}
.rsWhy h4{margin:0 0 .2rem;font-size:13px}
.rsWhyRow{display:flex;align-items:center;gap:.5rem;font-size:12px;margin:.22rem 0}
.rsWhyK{flex:0 0 44%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsWhyBar{flex:1;height:8px;background:var(--panel2);border-radius:5px;overflow:hidden}
.rsWhyBar i{display:block;height:100%;border-radius:5px}
.rsWhyV{flex:0 0 26px;text-align:right;font-weight:600;color:var(--ink)}
.rsDot{transition:stroke-width .08s}
.rsArcH{font-size:9px;font-weight:600;fill:var(--accent);text-anchor:middle;paint-order:stroke;stroke:var(--panel);stroke-width:2.5px;stroke-linejoin:round}
.rsHomeLabel{font-size:10px;font-weight:700;fill:var(--accent);paint-order:stroke;stroke:var(--panel);stroke-width:3px;stroke-linejoin:round}
.rsDot.isFocus{stroke:var(--ink);stroke-width:2.6px}
.rsCard.isFocus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
@media (max-width:760px){.rsMapLayout{grid-template-columns:1fr}.rsMapSide{max-height:220px}}
.rsShell{display:grid;grid-template-columns:250px 1fr;gap:1rem;align-items:start}
.rsRail{position:sticky;top:.7rem;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:.7rem .8rem;display:flex;flex-direction:column;gap:1rem}
.rsRailSec h4{margin:0 0 .5rem;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rsRailHint{margin:-.25rem 0 .55rem;font-size:11.5px;line-height:1.35;color:var(--muted)}
.rsCount{font-size:11px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.rsPinList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem;font-size:13px}
.rsPinList li{display:flex;align-items:center;gap:.4rem}
.rsPinDot{width:7px;height:7px;border-radius:999px;background:var(--accent);flex:0 0 auto}
.rsPinDot.country{background:var(--warm)}
.rsRailName{flex:1;appearance:none;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer;padding:.15rem 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsRailName:hover{color:var(--accent)}
.rsRailX{appearance:none;border:0;background:none;color:var(--muted);font-size:15px;cursor:pointer;line-height:1;padding:0 .2rem}
.rsRailX:hover{color:var(--warm)}
.rsF{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--sub);margin-bottom:.6rem}
.rsF select{font-size:14px;padding:.35rem .5rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--ink)}
.rsChk{display:flex;align-items:center;gap:.4rem;font-size:13px;color:var(--ink);cursor:pointer}
.rsMain{min-width:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:.9rem 1rem;min-height:60vh}
.rsMainHead{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.rsMainHead h2{margin:0;font-size:17px}
.rsHeadBtns{display:flex;gap:.5rem}
.rsEmpty{color:var(--muted);font-size:14px;padding:2rem 0;text-align:center}
/* overflow-x:auto alone would make this box the sticky-positioning root on BOTH
   axes (a CSS quirk: a non-visible value on one overflow axis forces the other
   to auto too), which stranded the sticky thead off-screen once the page
   scrolled. Giving it real vertical scroll + a bounded height fixes that: the
   header now sticks to the top of this panel as you scroll through rows,
   independent of the page's own scroll position. */
.rsTableWrap{overflow:auto;max-height:70vh}
.rsTable{width:100%;border-collapse:collapse;font-size:13px}
.rsTable th,.rsTable td{padding:.5rem .55rem;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.rsTable thead th{color:var(--sub);font-weight:600;font-size:12px;position:sticky;top:0;background:var(--panel);cursor:pointer;user-select:none;z-index:2}
.rsTable thead th.sortOn{color:var(--accent)}
.rsTable thead th.sortOn[data-dir="asc"]::after{content:" \25B2";font-size:9px}
.rsTable thead th.sortOn[data-dir="desc"]::after{content:" \25BC";font-size:9px}
.rsTable tbody tr{cursor:pointer}
.rsTable tbody tr:hover{background:var(--panel2)}
.rsTable .idx{font-weight:700}
.rsName{font-weight:600}
.rsDim{color:var(--muted)}
.rsPin{appearance:none;border:0;background:none;color:var(--muted);font-size:15px;cursor:pointer;line-height:1;padding:0}
.rsPin.on{color:var(--warm)}
.rsSub{font-size:10.5px;color:var(--muted);font-weight:400}
.rsCmp th[scope="row"],.rsCmpMetric{color:var(--sub);font-weight:600;position:sticky;left:0;background:var(--panel);text-align:left}
.rsGroupRow th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--panel2);padding-top:.5rem}
.rsCmpHead{display:flex;flex-direction:column;gap:2px;position:relative;padding-right:22px}
.rsCmpHead b{font-size:13px}
.rsCmpX{position:absolute;top:-3px;right:-4px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;appearance:none;border:1px solid var(--border);background:var(--panel);color:var(--muted);font:inherit;font-size:14px;line-height:1;padding:0;border-radius:999px;cursor:pointer;transition:color .12s,border-color .12s,background .12s}
.rsCmpX:hover{border-color:var(--warm);color:var(--warm);background:var(--panel2)}
.rsCmpX:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rsCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem}
.rsCard{border:1px solid var(--border);border-radius:11px;padding:.7rem .8rem;background:var(--bg);display:flex;flex-direction:column;gap:.5rem}
.rsCardTop{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.rsCardTop h3{margin:0;font-size:15px}
.rsCardTop p{margin:.1rem 0 0}
.rsCardScore{text-align:center;line-height:1.1}
.rsCardScore b{font-size:20px;color:var(--accent);display:block}
.rsCardScore span{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rsChips{display:flex;flex-wrap:wrap;gap:.3rem}
.rsChip{font-size:10.5px;background:var(--panel2);border-radius:6px;padding:.15rem .4rem;color:var(--sub)}
.rsChip b{color:var(--ink)}
.rsNote{width:100%;box-sizing:border-box;font:inherit;font-size:12.5px;min-height:44px;resize:vertical;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--ink);padding:.4rem .5rem}
.rsCardFoot{display:flex;gap:.4rem;align-items:center}
.rsStageMove{display:flex;gap:.2rem;margin-right:auto}
.rsStageMove .rsMini{padding:.3rem .45rem;min-height:28px}
/* decision board */
.rsBoard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;align-items:start}
.rsColZone{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:.5rem .5rem .7rem;min-height:120px}
.rsColHd{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:.2rem .3rem .5rem}
.rsColBody{display:flex;flex-direction:column;gap:.6rem;min-height:60px}
.rsColEmpty{text-align:center;font-size:12px;padding:1.2rem .4rem;border:1px dashed var(--border);border-radius:9px}
.rsColZone.rsDragOver{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.rsCard.rsDragging{opacity:.45}
.rsBoard .rsCard{background:var(--panel);cursor:grab}
.rsCardTitle{display:flex;align-items:center;gap:.4rem}
.rsRank{font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-bg);border-radius:6px;padding:.05rem .35rem}
.rsChip.up{background:var(--accent-bg);color:var(--accent)}
.rsChip.down{background:rgba(178,58,43,.14);color:var(--warm)}
.rsFacts{display:flex;flex-wrap:wrap;gap:.3rem}
.rsFact{font-size:10.5px;background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:.12rem .4rem;color:var(--sub)}
.rsBoard .rsFact{background:var(--bg)}
.rsFact.good{color:var(--accent);border-color:var(--accent)}
.rsFact.bad{color:var(--warm);border-color:var(--warm)}
.rsWhy{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:.55rem .8rem;margin:0 0 .9rem}
.rsWhy h3{margin:0 0 .25rem;font-size:13px}
.rsWhy h3 .rsDim{font-weight:500}
.rsWhy p{margin:0;font-size:13px;line-height:1.45}
@media (max-width:900px){.rsBoard{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.rsBoard{grid-template-columns:1fr}}
.rsMini{appearance:none;border:1px solid var(--border);background:var(--panel);color:var(--ink);font:inherit;font-size:12px;font-weight:600;padding:.35rem .7rem;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.rsMini:hover{border-color:var(--accent)}
.rsMini.ghost{color:var(--sub)}
.rsMini.on{background:var(--accent-bg);color:var(--accent);border-color:transparent}
.rsOverlay{position:fixed;inset:0;z-index:90;background:rgba(10,12,10,.55);display:flex;align-items:center;justify-content:center;padding:1rem}
.rsOverlay[hidden]{display:none}
.rsModal{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.28);overflow:hidden}
.rsModalTop{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:1rem 1rem .65rem;border-bottom:1px solid var(--border)}
.rsModalTop h3{margin:0;font-size:18px}
.rsModalX{appearance:none;border:0;background:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:.1rem .25rem}
.rsModalBody{padding:.9rem 1rem}
.rsModalField{display:flex;flex-direction:column;gap:.35rem;font-size:12px;font-weight:600;color:var(--sub);margin-top:.75rem}
.rsModalInput{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:.65rem .75rem;border-radius:9px;border:1px solid var(--border);background:var(--bg);color:var(--ink)}
.rsModalInput:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.rsModalFoot{display:flex;justify-content:flex-end;gap:.55rem;padding:.85rem 1rem 1rem;border-top:1px solid var(--border);background:var(--panel2)}
.rsDrawer{position:fixed;top:0;right:0;height:100vh;width:min(380px,92vw);z-index:80;background:var(--panel);border-left:1px solid var(--border);box-shadow:-8px 0 30px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden}
.rsDrawer[hidden]{display:none}
.rsDrTop{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;padding:.9rem 1rem;border-bottom:1px solid var(--border)}
.rsDrTop h3{margin:0;font-size:18px}
.rsDrTop p{margin:.1rem 0 0}
.rsDrX{appearance:none;border:0;background:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;padding:.2rem .4rem}
.rsDrBody{flex:1;overflow-y:auto;padding:.4rem 1rem}
.rsDrGroup{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:.6rem 0 .1rem;padding-top:.4rem;border-top:1px solid var(--border)}
.rsDrGroup:first-child{border-top:none;padding-top:.1rem}
.rsDrRow{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding:.4rem 0;border-bottom:1px solid var(--border);font-size:13.5px}
.rsDrK{color:var(--sub)}
.rsDrV{font-weight:600;text-align:right;border-radius:6px;padding:0 .3rem}
.rsDrFoot{display:flex;gap:.5rem;padding:.8rem 1rem;border-top:1px solid var(--border);background:var(--panel2)}
@media (max-width:820px){
 .rsApp{overflow-x:hidden}
 .rsShell{grid-template-columns:1fr}
 .rsRail{position:static}
 .rsTopbar{flex-direction:column;align-items:stretch}
 .rsLens{width:100%}
 .rsLctl{min-width:0}
 .rsLctl select,.rsF select{max-width:100%;width:100%}
 .rsBud input{width:100%}
 .rsAges{width:100%}
 .rsAges .rsAgeTrack{flex:1;width:auto}
 .rsBarRight{width:100%;min-width:0;justify-content:space-between}
 #rsSearch{flex:1;min-width:0}
 .rsLens select,#rsSearch,.rsF select{font-size:16px}
 .rsOverlay{align-items:flex-end;padding:0}
 .rsModal{max-width:none;border-radius:14px 14px 0 0}
}

/* research desk — column picker + dynamic slicers + saved views */
.rsHeadBtns{align-items:center}
.rsColWrap{position:relative}
.rsColPop{position:absolute;top:100%;right:0;margin-top:6px;z-index:30;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.25);padding:.6rem .7rem;width:250px;max-height:60vh;overflow-y:auto}
.rsColHead{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin:.4rem 0 .3rem}
.rsColHead:first-child{margin-top:0}
.rsColSel{list-style:none;margin:0 0 .4rem;padding:0;display:flex;flex-direction:column;gap:.15rem}
.rsColSel li{display:flex;align-items:center;gap:.4rem;font-size:12.5px}
.rsColSel li span{flex:1}
.rsColMv,.rsColRm{appearance:none;border:1px solid var(--border);background:var(--panel2);color:var(--sub);font:inherit;font-size:11px;line-height:1;width:20px;height:20px;border-radius:5px;cursor:pointer;flex:none}
.rsColMv:disabled{opacity:.3;cursor:default}
.rsColName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsColDrag,.rsSlDrag{cursor:grab;color:var(--muted);font-size:13px;line-height:1;flex:none;user-select:none;touch-action:none}
.rsColHint{font-weight:400;text-transform:none;letter-spacing:0}
.rsColSel li[draggable="true"]{cursor:grab}
.rsColSel li.rsDragOver,.rsSlicer.rsDragOver{box-shadow:inset 0 0 0 2px var(--accent)}
.rsColSel li.rsDragging,.rsSlicer.rsDragging{opacity:.4}
.rsSlName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsSlMove{display:flex;gap:.15rem;flex:none}
.rsSlMv{appearance:none;border:1px solid var(--border);background:var(--panel2);color:var(--sub);font:inherit;font-size:11px;line-height:1;width:19px;height:19px;border-radius:5px;cursor:pointer}
.rsSlMv:disabled{opacity:.3;cursor:default}
.rsColRm:hover{border-color:var(--warm);color:var(--warm)}
.rsColGrp{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:.4rem 0 .15rem}
.rsColOpt{display:flex;align-items:center;gap:.4rem;font-size:12.5px;padding:.15rem 0;cursor:pointer}
.rsSlicer{border:1px solid var(--border);border-radius:9px;padding:.4rem .55rem;margin-bottom:.5rem;background:var(--bg)}
.rsSlHead{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:600;margin-bottom:.3rem}
.rsSlX{appearance:none;border:0;background:none;color:var(--muted);font-size:14px;line-height:1;cursor:pointer;padding:0 .2rem}
.rsSlX:hover{color:var(--warm)}
.rsSlNum{display:flex;align-items:center;gap:.35rem}
.rsSlIn{width:100%;min-width:0;font-size:13px;padding:.3rem .4rem;border-radius:6px;border:1px solid var(--border);background:var(--panel);color:var(--ink)}
.rsSlHint{font-size:10px;color:var(--muted);margin-top:.2rem}
.rsSlCat{display:flex;flex-direction:column;gap:.15rem;max-height:150px;overflow-y:auto}
.rsSlOpt{display:flex;align-items:center;gap:.4rem;font-size:12.5px;cursor:pointer}
.rsSlEmpty{font-size:12px;margin:.2rem 0 .5rem}
.rsAddSl{width:100%;font-size:13px;padding:.35rem .5rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--ink)}
@media (max-width:820px){
 /* Popovers become bottom sheets pinned to the viewport — position:absolute/fixed
    with top:auto used to drop them off-screen far below the fold. */
 .rsColPop,.rsPrioPop{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;margin:0;max-height:78vh;border-radius:14px 14px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.35);z-index:60}
 .rsAddSl{font-size:16px}
 .rsSlIn{font-size:16px}
}

/* research desk — slider readout + categorical dropdown slicers */
.rsSlReadout{font-size:12.5px;text-align:center;margin:.1rem 0 .15rem;color:var(--ink)}
.rsSlTrack{margin:.1rem 0 .1rem}
.rsSlDrop{font-size:12.5px}
.rsSlDrop>summary{cursor:pointer;padding:.35rem .5rem;border:1px solid var(--border);border-radius:7px;background:var(--panel);list-style:none;user-select:none}
.rsSlDrop>summary::-webkit-details-marker{display:none}
.rsSlDrop>summary::after{content:"\25BE";float:right;color:var(--muted)}
.rsSlDrop[open]>summary::after{content:"\25B4"}
.rsSlDropBody{max-height:160px;overflow-y:auto;padding:.35rem .2rem 0}