@font-face{font-family:NotoThai;src:url('assets/NotoSansThai.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{--header-text-scale:1;--ui-text-scale:1;--map-text-scale:1;--ink:#213e32;--muted:#7b877d;--green:#41986a;--red:#d96d66;--line:#e3e8de;--paper:#fcfcf7;--shadow:0 12px 38px #243d2c12}
*{box-sizing:border-box}body{margin:0;font-family:NotoThai,system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:calc(14px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a,input{outline-offset:4px}button{cursor:pointer}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #258c65}button{border:0;background:none}a{color:inherit;text-decoration:none}.icon{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}button .icon{pointer-events:none}[hidden]{display:none!important}
.header{position:relative;z-index:4}.nav-active{font-weight:650}.nav-active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:#376f52;border-radius:3px 3px 0 0}.view-badge i{width:6px;height:6px;background:#56856a;border-radius:50%}
.workspace{display:grid;grid-template-columns:350px minmax(0,1fr);height:calc(100dvh - 88px);min-height:580px}.sidebar{background:#fffef9;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;z-index:3}.sidebar-top{padding:30px 26px 0}.eyebrow{font-family:NotoThai,sans-serif;font-size:calc(9px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));letter-spacing:2.2px;color:#8a9486;font-weight:600}.sidebar h2{font-size:calc(32px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));line-height:1.5;letter-spacing:-.7px;font-weight:570;margin:10px 0 9px}.sidebar h2 span{color:#5f8062}.intro{font-size:calc(12px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));line-height:1.9;color:#7b857a;margin:0}.stats{display:flex;gap:34px;align-items:center;padding:20px 0 22px;margin:2px 0 17px;border-bottom:1px solid var(--line)}.stats>div{display:flex;flex-direction:column;gap:1px}.stats strong{font-size:calc(29px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));font-weight:550;line-height:1.4}.stats span{font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#7f887d}.stats .stats-icon{margin-left:auto;color:#a6b69e}.stats .stats-icon .icon{width:42px;height:42px;stroke-width:.9}.search{height:44px;border:1px solid #dfe5d9;border-radius:8px;display:flex;align-items:center;gap:9px;padding:0 12px;background:#fdfefb;color:#82917e}.search .icon{width:17px;height:17px;flex-shrink:0}.search input{padding:0;min-width:0;width:100%;border:0;outline:none;background:none;font-size:calc(11px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:var(--ink)}.search:focus-within{border-color:#7aa087;box-shadow:0 0 0 3px #2d735414}.search input::placeholder{color:#90998b}.search kbd{font-size:calc(11px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));border:1px solid #e1e6dc;border-radius:3px;padding:0 4px}.filters{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;padding:4px;background:#f0f2e9;border-radius:8px;margin:13px 0 18px}.filters button{height:31px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:calc(11px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));border-radius:5px;color:#85907e}.filters button.active{background:#fffef9;color:var(--ink);box-shadow:0 1px 5px #182c1610;font-weight:650}.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}.thai{background:var(--green)}.inter{background:var(--red)}.mixed{background:linear-gradient(115deg,var(--green),#93a175,var(--red))}.empty{background:#dde5d3}.directory{padding:0 26px 20px;overflow:auto;min-height:110px;flex:1}.list-heading{font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#89917f;display:flex;justify-content:space-between;margin:3px 0 12px}.province-row{display:flex;align-items:center;width:100%;gap:11px;padding:12px 10px;background:#eff3e9;border:1px solid #e1e7d8;border-radius:8px;text-align:left;margin-bottom:11px}.province-row:hover{background:#e6edde}.province-row .province-indicator{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:#fff}.province-row .province-indicator .icon{width:18px}.province-row b{font-size:calc(12px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));font-weight:600;display:block}.province-row small{font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#86907e;display:block;margin-top:2px}.province-row>.icon{width:15px;margin-left:auto;color:#729067}.church-row{display:flex;align-items:center;gap:12px;width:100%;padding:15px 4px;border-bottom:1px solid #edf0e6;text-align:left;border-radius:5px}.church-row:hover,.church-row.selected{background:#f0f4eb}.church-symbol{width:36px;height:39px;display:grid;place-items:center;border-radius:10px;color:#5d9172;background:#edf4eb;flex-shrink:0}.church-symbol.inter-symbol{color:#bd7770;background:#faf0e9}.church-symbol .icon{width:21px;height:21px;stroke-width:1.2}.church-row .row-content{min-width:0;flex:1}.church-row b{display:block;font-size:calc(13px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));font-weight:550}.church-row small{font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#939b8b;display:block;margin-top:4px}.type-badge{font-size:calc(9px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));display:inline-flex;align-items:center;gap:5px;white-space:nowrap;border-radius:4px;padding:3px 6px;background:#f0f5ea;color:#659376}.type-badge.inter-badge{color:#bd7871;background:#fbf0e9}.type-badge .dot{width:5px;height:5px}.empty-state{text-align:center;color:#87907f;line-height:1.9;padding:24px 5px}.empty-state .icon{width:36px;height:36px;margin:0 auto 14px;color:#9fb097}.empty-state b{display:block;font-size:calc(13px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#5d705b}.empty-state p{font-size:calc(11px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.sidebar-footer{display:flex;align-items:center;gap:10px;padding:18px 23px;background:#fafbf4;border-top:1px solid var(--line);font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#727f6b}.sidebar-footer>span>.icon{width:17px;height:17px}.sidebar-footer small{display:block;font-size:calc(9px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#9ba390;margin-top:3px}.sidebar-footer .icon-button{margin-left:auto}.icon-button{display:grid;place-items:center;width:29px;height:29px;border-radius:7px}.icon-button:hover{background:#e9eee2}.icon-button .icon{width:17px;height:17px}
.map-panel{position:relative;overflow:hidden;isolation:isolate;background-color:#eef2e8;background-image:radial-gradient(#a6b79733 .65px,transparent .65px);background-size:15px 15px;min-width:0}.map-panel:fullscreen{width:100%;height:100dvh}.map-heading{position:absolute;left:34px;top:29px;pointer-events:none;z-index:2}.map-heading .eyebrow{font-size:calc(8px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));letter-spacing:2px}.map-heading h2{font-size:calc(25px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));font-weight:550;margin:6px 0 1px;letter-spacing:-.4px}.map-heading p{font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#8b9682;margin:4px 0}.back-button{pointer-events:auto;display:flex;gap:7px;align-items:center;margin-top:15px;background:#fffdf7ee;border:1px solid #dce5d4;border-radius:6px;font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));padding:7px 10px}.back-button .icon{width:14px;height:14px}.back-button:hover{background:#fff}.view-badge{position:absolute;right:29px;top:29px;z-index:2;display:flex;align-items:center;gap:7px;border:1px solid #dce3d3;border-radius:20px;padding:7px 13px;font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#6e8166;background:#f6f8efe8}.view-badge i{width:5px;height:5px}#map{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-5px}#map:active{cursor:grabbing}.province{stroke:#fafbf5;stroke-width:1.1;vector-effect:non-scaling-stroke;cursor:pointer}.province.has-churches{stroke:#477a55;stroke-width:1.2}.province-highlight{stroke:#55774b;stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}.keyboard-navigation .province:focus-visible{stroke:#55774b;stroke-width:1.5;outline:none}.province.single{cursor:grab;stroke:#819b74;stroke-width:1.1}.province.single:focus-visible{outline:0}#map-tooltip{position:absolute;z-index:5;background:#fffef9;border:1px solid #dce4d6;border-radius:8px;box-shadow:var(--shadow);padding:11px 14px;pointer-events:none;font-size:calc(12px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));min-width:130px}#map-tooltip small{display:block;color:#8c9684;font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));margin-top:3px}.compass{position:absolute;bottom:99px;left:30px;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;color:#6b805f}.compass span{font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));font-weight:600}.compass svg{height:35px;width:26px}.zoom-controls{position:absolute;right:26px;bottom:137px;z-index:3;display:flex;flex-direction:column;background:#fffef9;box-shadow:0 4px 20px #2338200c;border:1px solid #dce4d3;border-radius:9px;padding:5px}.zoom-controls button{height:34px;width:33px;display:grid;place-items:center;border-radius:4px;color:#526d49}.zoom-controls button:hover{background:#edf2e5}.zoom-controls button:disabled{color:#c0c7b8;cursor:default}.zoom-controls .icon{width:18px;height:18px}.control-divider{height:1px;background:#e4e9dc;margin:4px}.map-bottom{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:2;text-align:center;white-space:nowrap}.map-hint{font-size:calc(9px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#8b987e;display:flex;justify-content:center;align-items:center;gap:6px;margin-bottom:13px}.map-hint .icon{width:13px;height:13px}.legend{display:flex;align-items:center;gap:21px;background:#fffef8ed;border:1px solid #dde5d3;box-shadow:0 3px 12px #1d461e06;padding:13px 21px;border-radius:8px;color:#76876a;font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.legend>span{display:flex;align-items:center;gap:7px}.swatch{width:11px;height:11px;border-radius:3px;display:inline-block}.map-credit{position:absolute;right:18px;bottom:10px;font-family:system-ui,sans-serif;color:#94a088;font-size:calc(8px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.map-credit a:hover{text-decoration:underline}.zoom-readout{position:absolute;left:29px;bottom:14px;font-size:calc(9px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#97a087}.marker{cursor:pointer;outline:none}.marker .pin-head{stroke:#fffef7;stroke-width:2;filter:drop-shadow(0 2px 3px #20482925)}.marker .pin-icon{fill:none;stroke:#fff;stroke-width:1.5;pointer-events:none;stroke-linecap:round;stroke-linejoin:round}.marker.selected .pin-head,.marker:hover .pin-head,.marker:focus-visible .pin-head{stroke:#284c38;stroke-width:2.7}.marker .pin-leader{stroke-width:1.2;stroke-dasharray:2 2;pointer-events:none}.marker .gps-point{stroke:#fff;stroke-width:1;pointer-events:none}
.detail-card{position:absolute;right:24px;top:82px;width:310px;max-height:calc(100% - 112px);overflow-y:auto;z-index:6;background:#fffef9;border:1px solid #e0e6d8;border-radius:14px;box-shadow:0 18px 65px #27402725;padding:22px;animation:reveal .2s ease}.detail-top{display:flex;align-items:center;justify-content:space-between}.detail-card h3{font-size:calc(24px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));font-weight:600;margin:16px 0 3px;line-height:1.5}.detail-location{font-size:calc(11px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));display:flex;align-items:center;gap:6px;color:#899580;margin:0 0 19px}.detail-location .icon{width:14px;height:14px}.detail-card dl{margin:0}.detail-card dt{color:#929c86;font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));margin-top:15px}.detail-card dd{font-size:calc(13px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));margin:5px 0 0;overflow-wrap:anywhere}.phone-note{font-size:calc(9px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#a48e6f;display:block;margin-top:4px}.detail-actions{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}.primary-button{display:flex;justify-content:center;align-items:center;gap:8px;background:#29553e;color:#fffdf4;padding:10px 14px;border-radius:7px;font-size:calc(11px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));flex:1}.primary-button:hover{background:#1c412e}.primary-button .icon{width:15px;height:15px}.detail-source{font-size:calc(9px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#9ba591;margin:18px 0 0;border-top:1px solid #e5eadd;padding-top:11px}dialog{border:1px solid #e1e7d9;border-radius:16px;background:#fffef9;color:var(--ink);box-shadow:0 30px 100px #16311a33;max-width:550px;width:calc(100% - 32px);padding:28px;max-height:85dvh}dialog::backdrop{background:#1b332c55;backdrop-filter:blur(4px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}dialog h2{font-size:calc(25px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));margin:15px 0}dialog h3{font-size:calc(13px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));margin:20px 0 5px}dialog p{font-size:calc(12px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#78856e;line-height:1.95}dialog .small{font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.source-links{display:flex;flex-wrap:wrap;gap:15px}.source-links a{text-decoration:underline;color:#427357}@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.sidebar-top{padding-top:42px}.sidebar h2{font-size:calc(36px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.workspace{grid-template-columns:375px minmax(0,1fr)}.directory{padding-top:5px}.stats{padding-top:26px;padding-bottom:27px}.map-heading{top:38px;left:40px}.view-badge{top:38px}}
@media(max-width:1100px){.workspace{grid-template-columns:310px minmax(0,1fr)}.sidebar-top{padding:25px 21px 0}.directory{padding-left:21px;padding-right:21px}.sidebar h2{font-size:calc(29px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.map-heading{left:24px}.view-badge{right:20px}.legend{gap:12px;padding:11px 15px}.detail-card{right:16px;top:88px;width:280px}.map-hint{font-size:calc(8px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.zoom-controls{right:18px}.sidebar-footer{padding:15px 19px}}
@media(max-width:760px){.workspace{display:flex;flex-direction:column;height:auto;min-height:0}.map-panel{order:-1;width:100%;height:calc(100dvh - 70px);min-height:510px;max-height:820px}.sidebar{border:0;border-top:1px solid var(--line);min-height:430px}.sidebar-top{padding:26px 24px 0}.sidebar h2{font-size:calc(26px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));line-height:1.5}.sidebar h2 br{display:none}.sidebar h2 span{margin-left:7px}.intro br{display:none}.stats{padding:11px 0 16px;gap:35px}.stats strong{font-size:calc(24px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.stats .stats-icon .icon{width:33px}.directory{padding:0 24px 22px;overflow:visible}.sidebar-footer{padding:18px 24px}.map-heading{top:22px;left:22px}.map-heading h2{font-size:calc(22px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.map-heading p{font-size:calc(9px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.view-badge{right:17px;top:21px;font-size:calc(8px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));padding:6px 9px}.map-heading .eyebrow{font-size:calc(7px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.map-bottom{bottom:34px;width:calc(100% - 32px)}.legend{justify-content:center;gap:13px;padding:11px 10px;font-size:calc(9px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.swatch{width:9px;height:9px}.legend>span{gap:5px}.map-hint{font-size:calc(8px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.compass{left:21px;bottom:110px}.zoom-controls{right:15px;bottom:116px}.zoom-controls button{height:32px;width:31px}.zoom-readout{left:21px}.map-credit{font-size:calc(7px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.detail-card{top:auto;bottom:18px;left:14px;right:14px;width:auto;max-height:55%;padding:18px 20px}.detail-card h3{font-size:calc(22px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));margin-top:9px}.detail-card dl{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.detail-card dt{margin-top:9px}.detail-card dd{margin-top:2px}.detail-location{margin-bottom:8px}.detail-actions{margin-top:15px}.detail-source{margin-top:10px}.map-panel:has(.detail-card:not([hidden])) .map-bottom{visibility:hidden}.map-panel:has(.detail-card:not([hidden])) .zoom-controls{top:104px;bottom:auto}.map-panel:has(.detail-card:not([hidden])) .compass{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.mobile-search{display:none}.search input{font-size:calc(12px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.intro{color:#6f7d67}.map-heading p{color:#738268}.legend{font-size:calc(11px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#627457}.map-hint{color:#75866a}.type-badge{font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.list-heading{font-size:calc(11px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.church-row small{font-size:calc(11px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#77856e}@media(max-width:760px){.mobile-search{position:absolute;right:17px;top:62px;display:flex;align-items:center;gap:5px;font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));padding:6px 9px;border:1px solid #dce3d3;background:#fffef7;border-radius:6px;z-index:3}.mobile-search .icon{width:13px;height:13px}.search input{font-size:calc(16px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}.legend{font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));gap:12px}.map-heading p{font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));max-width:220px}.map-panel:has(.detail-card:not([hidden])) .mobile-search{display:none}}
.detail-card:focus{outline:none}
.secondary-button{display:flex;align-items:center;justify-content:center;gap:8px;flex-basis:100%;border:1px solid #dce4d4;border-radius:7px;padding:9px 14px;font-size:calc(11px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#46694b;background:#f6f8ef}.secondary-button:hover{background:#edf3e6}.secondary-button .icon{width:15px;height:15px}

/* The full-height SST handle shares its surface and has a reserved map gutter. */
.workspace{--sidebar-width:350px;--sidebar-handle-width:28px;--slide-time:440ms;--slide-ease:cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;grid-template-columns:minmax(0,1fr) var(--sidebar-width);column-gap:var(--sidebar-handle-width);background:#eef2e8}
.workspace.sidebar-hidden{grid-template-columns:minmax(0,1fr) 0px}
.community-shell{--sst-background:linear-gradient(to bottom,#fffef900,#fffef9 260px);position:absolute;top:0;right:0;bottom:0;width:var(--sidebar-width);min-height:0;z-index:11;transform:translate3d(0,0,0);transition:transform var(--slide-time) var(--slide-ease);will-change:transform}
.workspace.sidebar-hidden .community-shell{transform:translate3d(100%,0,0)}
.workspace.sidebar-moving .map-panel{overflow:visible}
.workspace.sidebar-moving #map{transform-origin:0 0;will-change:transform;pointer-events:none}
.community-shell>.sidebar{width:100%;height:100%;border-right:0;border-left:1px solid var(--line);min-width:0;min-height:0}
.sidebar-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:29px;margin-top:-7px}
.map-toolbar{position:absolute;top:26px;right:26px;display:flex;align-items:center;gap:10px;z-index:4}
.map-toolbar .view-badge{position:static;margin:0}
.sidebar-handle{position:absolute;left:calc(-1 * var(--sidebar-handle-width));top:0;bottom:0;width:var(--sidebar-handle-width);height:100%;display:grid;place-items:center;padding:0;border:0;border-left:1px solid #b9c9ae55;border-radius:0;background:var(--sst-background);color:#79916d;z-index:2;transition:opacity var(--slide-time) ease,color var(--slide-time) ease}
.sidebar-chevron{display:block;width:20px;height:32px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:.62;filter:drop-shadow(0 1px 0 #ffffff70);transform:scaleX(1);transition:transform var(--slide-time) var(--slide-ease),opacity .18s ease}
.sidebar-hidden .sidebar-handle{opacity:.5}
.sidebar-hidden .sidebar-chevron{transform:scaleX(-1)}
.sidebar-handle:hover,.sidebar-handle:focus-visible{opacity:1;color:#294e36}
.sidebar-handle:hover .sidebar-chevron,.sidebar-handle:focus-visible .sidebar-chevron{opacity:.95}
.sidebar-handle:focus-visible{outline-offset:-3px}
.sidebar-backdrop{position:fixed;inset:70px 0 0;background:#203c3040;z-index:10;cursor:default}
@media(min-width:1500px){.workspace{--sidebar-width:375px}}
@media(max-width:1100px){.workspace{--sidebar-width:310px}.map-toolbar{right:20px}.map-toolbar .view-badge{display:none}}
@media(max-width:760px){
  .workspace,.workspace.sidebar-hidden{--sidebar-width:min(350px,calc(100vw - 34px));display:block;height:calc(100dvh - 70px);min-height:510px;position:relative}
  .workspace .map-panel{width:calc(100% - var(--sidebar-handle-width));height:100%;max-height:none}
  .community-shell>.sidebar{border-top:0;box-shadow:-14px 0 45px #23402b25;overflow:auto;overscroll-behavior:contain}
  .sidebar-hidden .community-shell>.sidebar{box-shadow:none}
  .workspace .sidebar-top{padding:22px 21px 0}
  .workspace .sidebar h2{font-size:calc(27px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));line-height:1.5}
  .workspace .sidebar h2 br{display:block}
  .workspace .sidebar h2 span{margin-left:0}
  .workspace .sidebar .intro br{display:block}
  .workspace .directory{padding:0 21px 20px;overflow:auto;min-height:90px;overscroll-behavior:contain}
  .workspace .sidebar-footer{padding:15px 18px}
  .map-toolbar{top:62px;right:17px}
  .map-heading p{max-width:205px}
  body.community-open{overflow:hidden}
}

/* Keep IFB's existing position and 16px gap now that the handle has its own gutter. */
.detail-card{--ifb-text-scale:1.15;right:16px;width:356px;max-width:calc(100% - 32px);font-size:calc(14px * var(--ifb-text-scale) * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));overflow-wrap:anywhere}
.detail-card h3{font-size:calc(24px * var(--ifb-text-scale) * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}
.detail-card dt,.detail-card .type-badge{font-size:calc(10px * var(--ifb-text-scale) * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}
.detail-card dd{font-size:calc(13px * var(--ifb-text-scale) * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}
.detail-card .detail-location,.detail-card .primary-button,.detail-card .secondary-button{font-size:calc(11px * var(--ifb-text-scale) * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}
.detail-card .phone-note{font-size:calc(9px * var(--ifb-text-scale) * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}
@media(max-width:1100px){.detail-card{width:322px}}
@media(max-width:760px){
  .detail-card{left:12px;right:16px;width:auto;max-width:none;max-height:60%}
  .detail-card h3{font-size:calc(22px * var(--ifb-text-scale) * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}
}

/* Fill Thailand: a compact wordmark and one changing mission headline. */
body>.header{--header-text-scale:.85;height:auto;display:block;padding:0;border:0;background:transparent;font-size:calc(14px * var(--ui-text-scale) * var(--header-text-scale))}
.header-topline{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 36px;padding:15px 0 9px;border-bottom:0}
.brand-title{margin:0;font-size:calc(26px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));line-height:1.3;letter-spacing:-1.2px;font-weight:730}
.header .brand{display:block;white-space:nowrap;color:#233e30}
.brand-space{display:inline-block;width:.2em}
.header .brand:focus-visible{outline:2px solid #258c65;outline-offset:6px;border-radius:2px}
.header .header-nav{display:flex;align-items:center;gap:7px;font-size:calc(11px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}
.header .header-nav>a,.header .header-nav>button{display:flex;align-items:center;min-height:34px;padding:7px 12px;line-height:1.6;white-space:nowrap;border-radius:5px}
.header .header-nav .nav-active{color:#294b35;background:#ffffff85;font-weight:600}
.header .header-nav .nav-active:after{display:none}
.header .header-nav .nav-about{font-size:calc(11px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));color:#546249}
.header .header-nav .nav-about:hover{background:#ffffff65;color:#294b35}
.mission-banner{padding:12px 36px 8px}
.mission-intro{display:flex;align-items:center;justify-content:space-between;gap:32px}
.mission-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .25em;min-width:0;margin:0;font-size:calc(clamp(48px,5.6vw,80px) * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));line-height:1.24;letter-spacing:-.055em;font-weight:400;white-space:nowrap}
.mission-prefix{color:#617357}
.mission-window{display:inline-grid;width:6.15em;flex-shrink:0;padding:.02em 0 .08em;overflow:clip}
.mission-word{grid-area:1/1;display:block;width:max-content;max-width:100%;color:#254f39;font-weight:600;letter-spacing:-.06em}
.mission-aside{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex-shrink:0;min-width:172px}
.header-note{margin:0;font-size:calc(13px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));line-height:1.8;color:#596b50}
.mission-playback{min-width:40px;min-height:30px;padding:5px 0;text-align:left;font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));line-height:1.6;color:#596b50;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#aab99a}
.mission-playback:hover{color:#244c35;text-decoration-color:currentColor}
.workspace,.workspace.sidebar-hidden{height:calc(100dvh - var(--header-height,235px))}
.sidebar-backdrop{position:absolute;inset:0}
@media(min-width:1500px){
  .header-topline{margin-right:40px;margin-left:40px}
  .mission-banner{padding-right:40px;padding-left:40px}
  .mission-aside{min-width:200px}
  .header-note{font-size:calc(14px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}
}
@media(min-width:761px) and (max-width:1100px){
  .header-topline{margin-right:24px;margin-left:24px}
  .mission-banner{padding-right:24px;padding-left:24px}
  .mission-intro{gap:24px}
  .mission-aside{min-width:130px}
  .header-note{font-size:calc(11px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}
}
@media(max-width:760px){
  .header-topline{gap:14px;margin:0 22px;padding:13px 0 8.5px}
  .brand-title{font-size:calc(22px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));letter-spacing:-1px}
  .header .header-nav{gap:3px;font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}
  .header .header-nav>a,.header .header-nav>button{min-height:32px;padding:7px 8px}
  .header .header-nav .nav-about{font-size:calc(10px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}
  .mission-banner{padding:11px 22px 6px}
  .mission-intro{position:relative;display:block}
  .mission-heading{display:block;font-size:calc(clamp(47px,12vw,68px) * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));line-height:1.12;letter-spacing:-.055em}
  .mission-prefix{display:block;font-size:calc(24px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));font-weight:400;letter-spacing:-.8px;line-height:1.3;margin-bottom:1px}
  .mission-window{display:grid;width:100%;padding:0 0 .08em}
  .header-note{display:none}
  .mission-aside{position:absolute;right:0;top:0;min-width:28px}
  .mission-playback{min-width:28px;font-size:calc(9px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));text-align:right}
  .workspace,.workspace.sidebar-hidden{min-height:420px}
  .workspace .map-panel{min-height:420px}
}
@media(max-width:360px){
  .header-topline{margin-right:18px;margin-left:18px;gap:9px}
  .brand-title{font-size:calc(19px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));letter-spacing:-.8px}
  .header .header-nav{font-size:calc(9px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}
  .header .header-nav>a,.header .header-nav>button{padding-right:6px;padding-left:6px}
  .header .header-nav .nav-about{font-size:calc(9px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}
  .mission-banner{padding-right:18px;padding-left:18px}
}

/* Desktop text is 25% larger; each explicit size uses this factor once. */
@media(min-width:761px){
  :root{--ui-text-scale:1.25}
  .workspace{--sidebar-width:425px}
  .community-shell>.sidebar{overflow:auto;overscroll-behavior:contain}
  .sidebar-top,.sidebar-footer{flex-shrink:0}
  .detail-card{width:420px}
  dialog{max-width:660px}
  .map-bottom{width:max-content;max-width:calc(100% - 40px)}
  .legend{flex-wrap:wrap;justify-content:center}
  .map-hint{white-space:normal}
}
@media(min-width:761px) and (max-width:1100px){
  .workspace{--sidebar-width:355px}
  .detail-card{width:365px}
}
@media(min-width:1500px){.workspace{--sidebar-width:460px}}

/* Enlarge map annotations; keep the country title, SST and IFB at their prior sizes. */
.workspace{--map-text-scale:1.25;font-size:calc(14px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale))}
#map-title.country-title{--map-text-scale:1}
.header-actions{display:flex;align-items:center;gap:18px;min-width:0}
.language-switch{display:flex;align-items:center;padding:3px;border:1px solid #b9c8ad;border-radius:7px;flex-shrink:0;font-size:calc(11px * var(--ui-text-scale) * var(--header-text-scale));line-height:1.5}
.language-switch a{display:grid;place-items:center;min-width:34px;min-height:30px;padding:4px 6px;border-radius:4px;color:#53674c}
.language-switch a[aria-current]{background:#294f38;color:#fffdf4;font-weight:650}
.language-switch a:hover:not([aria-current]){background:#ffffff80}
.province-content{flex:1;min-width:0;overflow-wrap:anywhere}
.province-indicator,.province-row>.icon{flex-shrink:0}
.list-heading{gap:12px;align-items:baseline}
.list-heading>span:last-child{flex-shrink:0}
.phone-link{display:inline-flex;align-items:center;min-height:36px;color:#295b40;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;border-radius:3px}
.phone-link:hover{color:#193b2a}
.detail-actions>a{min-width:0;overflow-wrap:anywhere}
/* Tighter spacing between the mission header and the map introduction. */
.map-heading{top:12px;max-width:calc(100% - 68px)}
@media(min-width:1500px){.map-heading{top:16px}}
@media(max-width:760px){.map-heading{top:10px}}
.map-bottom{white-space:normal}
.legend{flex-wrap:wrap;justify-content:center}
.map-hint{white-space:normal}
@media(min-width:761px){
  .detail-card{top:140px;max-height:calc(100% - 165px)}
}
@media(min-width:761px) and (max-width:1100px){
  .header-actions{gap:12px}
}
@media(max-width:760px){
  .header-topline{flex-wrap:wrap;gap:10px}
  .header-actions{width:100%;justify-content:space-between;gap:8px}
  .language-switch{font-size:calc(11px * var(--header-text-scale))}
  .language-switch a{min-width:30px;min-height:30px}
  .detail-card{max-height:75%}
  .detail-card dl{grid-template-columns:1fr}
  .phone-link{min-height:44px}
  .map-credit{max-width:calc(100% - 90px);text-align:right}
}

.community-shell,.detail-card{--map-text-scale:1}
.community-shell{font-size:calc(14px * var(--ui-text-scale))}
/* One continuous page background lets the header dissolve into the map. */
:root{--map-background:#eef2e8;--page-background:linear-gradient(to bottom,transparent 35%,var(--map-background) 100%),linear-gradient(115deg,#e0ebd2 0%,#edf0d9 58%,#e8dfca 100%)}
body{background-color:var(--map-background);background-image:var(--page-background);background-size:100% calc(var(--header-height,210px) + 260px);background-repeat:no-repeat}
.workspace{background:transparent}
.map-panel{background-color:transparent;background-image:none}
/* Fullscreen hides the page behind the map, so paint the same surface here. */
.map-panel:fullscreen{background-color:var(--map-background);background-image:var(--page-background);background-size:100% calc(var(--header-height,210px) + 260px);background-position:0 calc(-1 * var(--header-height,210px));background-repeat:no-repeat}
.map-panel::backdrop{background:var(--map-background,#eef2e8)}
.community-shell>.sidebar{border-left:0;background:var(--sst-background)}
@media(min-width:761px){
  /* Compensate for the F glyph's left bearing in the bundled font. */
  .header .brand,.mission-prefix{transform:translateX(-.097em)}
}
@media(max-width:760px){.community-shell{--sst-background:#fffef9}}

/* Full-surface dragging without pointer/touch focus rectangles. */
#map{outline:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#map *{-webkit-tap-highlight-color:transparent}
#map .province{outline:none}
.map-hit-area{pointer-events:all}
.keyboard-navigation #map:focus-visible{outline:2px solid #258c65;outline-offset:-5px}

/* Compact legend: 15% smaller text and a frame fitted to its contents. */
.map-bottom{width:calc(100% - 40px);pointer-events:none}
.legend{--map-text-scale:1.0625;width:fit-content;max-width:100%;margin-inline:auto;padding:10px 16px;gap:16px;border-radius:7px}
.legend{pointer-events:auto}
.legend>span{gap:6px;flex:none;white-space:nowrap}
.legend .swatch{width:9px;height:9px;flex-shrink:0}
/* Each bar stays interactive while fading after ten seconds of inactivity. */
.map-idle-bar{opacity:1;transition:opacity .35s ease}
.map-idle-bar.is-idle{opacity:.25}
#cbar:focus-visible{outline:2px solid #258c65;outline-offset:3px}
/* Reserve a text-only footer, including when the credit wraps on narrow maps. */
.map-panel{--legend-bottom:max(36px,calc(var(--map-credit-height,17px) + 20px));--zoom-bottom:137px}
.map-credit{right:16px;bottom:8px;max-width:calc(100% - 90px);font-size:12px;line-height:1.4;text-align:right;color:#53634c;background:none;border:0;box-shadow:none;padding:0;border-radius:0;z-index:5;opacity:.1}
.map-bottom{bottom:var(--legend-bottom)}
.zoom-controls{color:#526d49;bottom:max(var(--zoom-bottom),calc(var(--legend-bottom) + var(--color-bar-height,42px) + 12px))}
/* Keep every zbar icon in the same tone, including expand and collapse. */
.zoom-controls button,.zoom-controls button:disabled{color:inherit}
.filters{display:grid;grid-template-columns:1fr 1fr 1.65fr}
.filters button{min-width:0;padding-inline:5px}
.church-row .row-content{min-width:0}
.church-row .type-badge{flex-shrink:0}

/* SST alone is reduced by 15%; map labels and IFB keep their current sizes. */
.community-shell{--map-text-scale:.85;font-size:calc(14px * var(--ui-text-scale) * .85)}
.sidebar-top{padding:24px 21px 0}
.sidebar .stats{gap:27px;padding:16px 0 18px;margin-bottom:14px}
.sidebar .stats .stats-icon .icon{width:36px;height:36px}
.sidebar .directory{padding:0 21px 17px}
.sidebar .province-row{padding:10px 8px;margin-bottom:9px;gap:9px}
.sidebar .province-indicator{width:28px;height:28px}
.sidebar .church-row{padding:13px 4px;gap:10px}
.sidebar .church-symbol{width:31px;height:34px;border-radius:8px}
.sidebar .filters{margin:11px 0 15px}
.sidebar-footer{padding:15px 19px}
@media(min-width:761px){.workspace{--sidebar-width:362px}}
@media(min-width:761px) and (max-width:1100px){
  .workspace{--sidebar-width:302px}
  .legend{padding:9px 12px;gap:10px}
}
@media(min-width:1500px){
  .workspace{--sidebar-width:391px}
  .sidebar-top{padding-top:34px}
}
@media(max-width:760px){
  .workspace,.workspace.sidebar-hidden{--sidebar-width:min(300px,calc(100vw - 44px))}
  .map-panel{--legend-bottom:max(34px,calc(var(--map-credit-height,17px) + 20px));--zoom-bottom:116px}
  .map-bottom{width:calc(100% - 32px)}
  .workspace .sidebar-top{padding:19px 18px 0}
  .workspace .directory{padding:0 18px 17px}
  .workspace .sidebar-footer{padding:13px 15px}
  .sidebar .stats{gap:26px;padding:10px 0 14px}
  .sidebar .stats .stats-icon .icon{width:28px;height:28px}
  .legend{padding:8px 10px;gap:8px 10px}
  .legend>span{gap:4px}
  .legend .swatch{width:8px;height:8px}
}

/* Official service favicons inside IFB outbound links. */
.detail-actions .service-icon{display:block;width:22px;height:22px;flex:0 0 22px;object-fit:contain}

/* Keep the Thai country-view instruction on one line on phones. */
@media(max-width:760px){
  html[lang="th"] .map-heading:has(.country-title){max-width:calc(100% - 44px)}
  html[lang="th"] #map-title.country-title + #map-subtitle{max-width:none;white-space:nowrap}
}

/* Subtle district divisions, confined to the selected province. */
#district-boundaries{pointer-events:none}
.district-boundary{fill:none;stroke:#fafbf5;stroke-opacity:.25;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.district-boundary.empty-province{stroke:#526d49}
.district-area{fill:transparent;stroke:none;pointer-events:all;cursor:pointer;outline:none}
.keyboard-navigation .district-area:focus-visible{stroke:#fafbf5;stroke-width:1;vector-effect:non-scaling-stroke}
.district-popup{position:absolute;z-index:5;max-width:calc(100% - 24px);padding:7px 13px;border:1px solid #dce4d6;border-radius:10px;background:#fffef9;color:#294e36;box-shadow:0 4px 18px #23382018;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.map-toolbar{flex-direction:column;align-items:center;gap:2px}
.district-toggle{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 2px;color:#526d49;font-size:12px;white-space:nowrap;border-radius:8px}
.district-switch-track{display:block;position:relative;width:34px;height:20px;flex:none;border-radius:20px;background:#b9c5b4;transition:background .18s ease}
.district-switch-track>span{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fffef9;box-shadow:0 1px 3px #24392926;transition:transform .18s ease}
.district-toggle[aria-checked="true"] .district-switch-track{background:#526d49}
.district-toggle[aria-checked="true"] .district-switch-track>span{transform:translateX(14px)}
.district-toggle:hover{color:#294e36}
@media(max-width:1100px){
  .map-toolbar:has(.district-toggle:not([hidden])){left:auto;right:20px}
  .map-toolbar #view-badge{display:none}
  .map-heading:has(#back-button:not([hidden])){width:calc(100% - 44px);max-width:calc(100% - 44px)}
  .map-heading #back-button{max-width:calc(100% - var(--district-toggle-width,120px) - 10px)}
  .back-button .icon{flex-shrink:0}
}
@media(max-width:760px){
  .map-toolbar:has(.district-toggle:not([hidden])){right:17px}
  .map-heading:has(#back-button:not([hidden])){width:calc(100% - 39px);max-width:calc(100% - 39px)}
}
@media(prefers-reduced-motion:reduce){.district-switch-track,.district-switch-track>span{transition:none}}

/* Only the search field stays at the top after its natural position scrolls away. */
.community-shell>.sidebar{--sidebar-content-padding:21px;overflow-y:auto;overscroll-behavior:contain;scroll-padding-top:60px}
.sidebar-top{flex:none}
.sidebar-search{position:sticky;top:0;z-index:3;flex:none;padding:6px var(--sidebar-content-padding);background:#fffef9}
@media(min-width:761px){
  /* Paint the same page and SST surfaces at their original coordinates. */
  .sidebar-search{
    background-color:var(--map-background);
    background-image:var(--sst-background),var(--page-background);
    background-repeat:no-repeat;
    background-size:100% var(--search-panel-height,100vh),var(--search-page-width,100vw) calc(var(--header-height,210px) + 260px),var(--search-page-width,100vw) calc(var(--header-height,210px) + 260px);
    background-position:0 var(--search-panel-y,0px),var(--search-page-x,0px) var(--search-page-y,0px),var(--search-page-x,0px) var(--search-page-y,0px);
  }
}
.sidebar-filters{flex:none;padding-inline:var(--sidebar-content-padding)}
.sidebar .stats{margin-bottom:8px}
.sidebar-filters .filters{margin-top:5px}
.workspace .sidebar .directory{flex:none;overflow:visible;min-height:0}
.map-search-button,.mobile-search-close{display:none}

@media(max-width:760px){
  .header-topline{flex-wrap:nowrap;gap:8px}
  .header-actions{width:auto;justify-content:flex-end;gap:4px}
  .header .header-nav>button{padding-inline:6px}
  .header .header-nav>button,.language-switch a{min-height:36px}
  .workspace .map-panel{width:100%}
  .map-heading,.map-heading:has(#back-button:not([hidden])){width:calc(100% - 44px);max-width:calc(100% - 44px)}
  .map-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .map-search-button{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;flex:none;min-height:28px;padding:4px 8px;border:1px solid #b9c8ad;border-radius:7px;background:transparent;color:#53674c;font-size:calc(7px * var(--ui-text-scale) * var(--header-text-scale) * var(--map-text-scale));line-height:1.5;pointer-events:auto}
  .map-search-button::after{content:'';position:absolute;inset:-8px -3px}
  .map-search-button .icon{width:12px;height:12px}
  .province,.province.has-churches,.province.single{stroke-width:.65}
  .province-highlight{stroke-width:.85}
  .sidebar-handle{display:none}
  .workspace .community-shell,.workspace.sidebar-hidden .community-shell{position:fixed;inset:12px;max-width:520px;width:auto;height:auto;margin-inline:auto;transform:none;will-change:auto;z-index:20;transition:opacity .18s ease}
  .workspace .community-shell{opacity:1;visibility:visible}
  .workspace.sidebar-hidden .community-shell{opacity:0;visibility:hidden;pointer-events:none}
  .community-shell>.sidebar{--sidebar-content-padding:18px;border:1px solid #dce4d6;border-radius:16px;box-shadow:0 18px 65px #27402725;background:#fffef9}
  .mobile-search-close{display:grid;flex:none;width:44px;height:44px}
  .sidebar-backdrop{position:fixed;inset:0;z-index:19;background:#203c3055;backdrop-filter:blur(3px)}
}