/* Decorative dot fabric and a static colour wash behind the geography. */
.world{isolation:isolate;overflow:clip}
.world:before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 25% 36%,#c5dcee88,transparent 55%),radial-gradient(ellipse at 73% 64%,#cce4d966,transparent 50%)}
.world:after{content:none}
#dot-fabric{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.world-actions{display:flex;align-items:center;gap:10px}.ambient-toggle{width:34px;min-height:34px;height:34px;color:#73849c;border:1px solid #dfe6ef;background:#ffffffa8;border-radius:11px}.ambient-toggle .ui-icon{width:15px;height:15px}.ambient-toggle[aria-pressed=true]{background:#edf2fb;color:#526b96}
.intro{top:52px}.intro p{margin-top:8px}#globe-stage{inset:104px 0 36px}
@media(min-width:1600px){.intro{top:52px}#globe-stage{inset:112px 0 36px}}
@media(min-width:761px) and (max-height:760px){.intro{top:52px}.intro p{margin-top:7px}#globe-stage{inset:100px 0 38px}}
@media(max-width:760px){.intro{top:83px}.intro p{margin-top:9px}.world-actions{gap:6px}.ambient-toggle{width:30px;min-height:30px;height:30px}#globe-stage{inset:140px 0 212px}}
@media(max-width:760px) and (max-height:700px){.intro{top:76px}#globe-stage{inset:110px 0 158px}}

.country-marker.marker-flipped{flex-direction:row-reverse;transform:translate(calc(-100% + 8px),-50%)}

/* Keep the comparison action beside, rather than on top of, long country names. */
.country-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:end}
.country-head .eyebrow{grid-column:1/-1;margin-bottom:0}
.country-head h2{min-width:0;overflow-wrap:anywhere;padding-right:0}
.country-head>button{position:static;align-self:end;margin-bottom:3px}
.dialog-header{position:sticky;top:0;z-index:3;background:#ffffffed;backdrop-filter:blur(12px);padding-block:8px;margin-top:-8px}
@media(max-width:760px){.country-head h2{padding-right:0}.dialog-header{gap:12px}.chapter-list button{flex-wrap:wrap;column-gap:8px}.chapter-list button small{white-space:nowrap}}
dialog{scroll-padding-top:82px;scroll-padding-bottom:16px}
@media(max-width:760px){dialog{scroll-padding-top:112px}}

/* Real inset spacing: the row surface extends beyond both labels and values. */
.bars{--bar-label:90px;--bar-value:38px;--bar-gap:10px;gap:6px}
.bar-row{grid-template-columns:var(--bar-label) minmax(0,1fr) var(--bar-value);gap:var(--bar-gap);padding:6px 10px;min-height:32px;border-radius:9px}
.bar-row:is(:hover,:focus),.bar-row.selected:is(:hover,:focus),button.bar-row:active{box-shadow:inset 0 0 0 1px #dce6f6}
.bar-axis{margin-left:110px;margin-right:58px}
.compare-bars .bars{--bar-label:120px;--bar-value:44px;--bar-gap:10px;gap:8px}
.compare-bars .bar-row{grid-template-columns:var(--bar-label) minmax(0,1fr) var(--bar-value);min-height:38px;margin-bottom:0}
.compare-bars .bar-axis{margin-left:140px;margin-right:64px}
th,td{padding:13px 12px;line-height:1.55}th:first-child,td:first-child{padding-left:16px}th:last-child,td:last-child{padding-right:16px}
@media(min-width:1600px){.bars{--bar-label:100px;--bar-value:40px}.bar-axis{margin-left:120px;margin-right:60px}.compare-bars .bar-axis{margin-left:140px;margin-right:64px}}
@media(max-width:760px){
 .header .search-launch{display:grid;place-items:center;padding:0;gap:0;width:37px;height:37px;min-height:37px}
 .header .search-launch>span:first-child{display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0}
 .header .search-launch>span:not(:first-child),.header .search-launch>kbd{display:none}
 .bars{--bar-label:84px;--bar-value:36px;--bar-gap:8px}
 .bar-row{min-height:40px;padding:8px 10px}.bar-axis{margin-left:102px;margin-right:54px}
 .compare-bars .bars{--bar-label:84px;--bar-value:40px;--bar-gap:7px}.compare-bars .bar-axis{margin-left:101px;margin-right:57px}
 th,td{padding-block:14px}
}
/* Avoid the inline SVG baseline offset in the desktop search field too. */
.search-launch>span:first-child{display:flex;align-items:center;justify-content:center;flex:none}
@media(max-width:400px){
 /* Full country names stay readable above the comparison bar on narrow phones. */
 .compare-bars .bar-row{grid-template-columns:minmax(0,1fr) 40px;row-gap:6px;padding:10px;min-height:60px}
 .compare-bars .bar-row>span:first-child{grid-column:1/-1;white-space:normal;overflow-wrap:anywhere}
 .compare-bars .bar-row>.bar-track{grid-column:1;grid-row:2}
 .compare-bars .bar-row>span:last-child{grid-column:2;grid-row:2}
 .compare-bars .bar-axis{margin-left:10px;margin-right:57px}
}

/* Region flags add context without stealing width from the country heading. */
.country-head{container-type:inline-size;align-items:start}
.country-head .eyebrow{display:flex;align-items:center;gap:8px;min-height:22px}
.country-flag{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:20px;line-height:1;letter-spacing:0}
.country-flag:empty{display:none}
.country-head h2{font-size:clamp(22px,8.7cqi,30px);line-height:1.16;letter-spacing:-.5px;overflow-wrap:normal;word-break:normal}
.country-head>button{align-self:start;margin-top:1px;margin-bottom:0;white-space:nowrap}