/* Preserve the original CSS exactly; hidden PHP-rendered panels have no layout. */
[hidden]{display:none!important}
.scan-progress{animation-duration:7s}
.scan-notification{position:fixed;z-index:100;right:16px;bottom:calc(88px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-start;gap:14px;width:calc(100% - 32px);max-width:340px;padding:14px 12px 14px 16px;border:1px solid #d9e1e5;border-radius:12px;background:#fff;box-shadow:0 8px 28px rgba(24,48,80,.16)}
.scan-notification>div{flex:1;min-width:0}
.scan-notification-title{margin:0;color:#26343d;font-size:12px;font-weight:700}
.scan-notification-message{margin:4px 0 0;color:#64747c;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
#toast-dismiss{flex:none;width:28px;height:28px;border:0;border-radius:6px;background:#f0f4f7;color:#64747c;font-size:20px;line-height:1;cursor:pointer}
#toast-dismiss:focus-visible{outline:2px solid #0b3b95;outline-offset:2px}

/* Country flag artwork supplied by the owner. */
.flag-BW,.flag-SZ,.flag-LS,.flag-MZ{background-position:center;background-size:100% 100%;background-repeat:no-repeat;background-origin:border-box}
.flag-BW{background-image:url('./flags/botswana.svg')}
.flag-SZ{background-image:url('./flags/eswatini.svg')}
.flag-LS{background-image:url('./flags/lesotho.svg')}
.flag-MZ{background-image:url('./flags/mozambique.svg')}

/* Owner-supplied signal artwork; active bars reflect live proximity rank. */
.region-signal{flex-shrink:0}
.signal-icon{display:block;width:16px;height:16px;flex:none}
.signal-bar{fill:#dce3e7}
.region-signal[data-level=strong]{--signal-color:#159447}
.region-signal[data-level=weak]{--signal-color:#e3b622}
.region-signal[data-level=very-weak]{--signal-color:#d84b4b}
.signal-bar[data-active=true]{fill:var(--signal-color);animation:signal-wave 4s ease-in-out var(--bar-delay) infinite}
@keyframes signal-wave{0%,25%,100%{opacity:.75}10%,15%{opacity:1}}
@media(prefers-reduced-motion:reduce){.signal-bar[data-active=true]{animation:none}}

/* Dashboard map: calm colours, contained Leaflet layers and compact controls. */
.location-map{position:relative;isolation:isolate;height:340px;overflow:hidden;border:1px solid #d6e0e8;border-radius:18px;background:#e9eef2;box-shadow:0 8px 28px rgba(24,48,80,.06)}
.location-map #map{position:absolute;inset:0;z-index:0;width:100%;height:100%;background:#e9eef2;font-family:'DM Sans',Arial,sans-serif}
.location-map .leaflet-tile-pane{filter:saturate(.5) contrast(.97) brightness(1.025)}
.location-map .leaflet-tile{mix-blend-mode:normal}
.map-status{position:absolute;z-index:2;top:14px;left:14px;width:260px;max-width:calc(100% - 86px);padding:12px 14px;border:1px solid rgba(220,229,234,.9);border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 4px 16px rgba(24,48,80,.07);backdrop-filter:blur(10px);pointer-events:none}
.map-eyebrow{margin:0 0 6px;color:#78868e;font-family:'Space Mono',monospace;font-size:8px;font-weight:700;line-height:13px;letter-spacing:1.4px}
.map-status-heading{display:flex;align-items:center;gap:7px}
.map-status-heading h2{margin:0;color:#17202a;font-size:12px;font-weight:700;line-height:17px}
.map-status-dot{flex:none;width:6px;height:6px;border-radius:50%;background:#95a1ad;box-shadow:0 0 0 3px #edf1f5}
.map-status[data-state=locating] .map-status-dot{background:#0b3b95;box-shadow:0 0 0 3px #e8eef9;animation:location-breathe 1.4s ease-in-out infinite}
.map-status[data-state=ready] .map-status-dot{background:#159447;box-shadow:0 0 0 3px #e5f5ed}
.map-status[data-state=recent] .map-status-dot,.map-status[data-state=denied] .map-status-dot,.map-status[data-state=timeout] .map-status-dot,.map-status[data-state=unavailable] .map-status-dot{background:#b77b27;box-shadow:0 0 0 3px #faf2e6}
.map-status-detail{margin:6px 0 0;color:#667780;font-size:10px;line-height:16px}
.map-actions{position:absolute;left:14px;bottom:16px;z-index:2}
.map-locate-button{display:flex;min-height:42px;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:1px solid #0b3b95;border-radius:11px;background:#0b3b95;color:#fff;font-size:11px;font-weight:600;box-shadow:0 4px 14px rgba(11,59,149,.18);transition:background-color .15s,box-shadow .15s;cursor:pointer}
.map-locate-button:hover{background:#082d73;box-shadow:0 6px 18px rgba(11,59,149,.23)}
.map-locate-button:disabled{cursor:wait;background:#f8faff;color:#637ba0;border-color:#d3dfea;box-shadow:0 4px 14px rgba(24,48,80,.07)}
.map-locate-button:disabled .map-locate-icon{animation:location-turn 2s linear infinite}
.map-locate-button:focus-visible,.location-map .leaflet-control-zoom a:focus-visible,#map-retry:focus-visible{outline:3px solid #789ce0;outline-offset:3px}
.location-map .leaflet-top .leaflet-control{margin-top:14px}
.location-map .leaflet-right .leaflet-control{margin-right:14px}
.location-map .leaflet-control-zoom{overflow:hidden;border:1px solid #d6e0e8;border-radius:11px;box-shadow:0 4px 16px rgba(24,48,80,.08)}
.location-map .leaflet-control-zoom a{width:38px;height:38px;border-color:#edf1f5;background:#fff;color:#344761;font-family:'DM Sans',Arial,sans-serif;font-size:22px;font-weight:400;line-height:38px}
.location-map .leaflet-control-zoom a:hover{background:#f3f6fb;color:#0b3b95}
.location-map .leaflet-control-zoom a.leaflet-disabled{background:#f6f8fa;color:#c0c9d2}
.location-map .leaflet-control-attribution{margin:0;padding:3px 7px;background:rgba(255,255,255,.94);border-radius:5px 0 0 0;color:#52616a;font-size:10px;line-height:15px}
.location-map .leaflet-control-attribution a{color:#435b77}
.device-location-marker{border:0;background:transparent}
.device-location-core{position:relative;display:block;width:20px;height:20px;border:4px solid white;border-radius:50%;background:#0b3b95;box-shadow:0 0 0 8px rgba(11,59,149,.12),0 3px 9px rgba(11,59,149,.25)}
.device-location-core::before,.device-location-core::after{content:'';position:absolute;inset:-10px;border:2px solid rgba(11,59,149,.45);border-radius:50%;pointer-events:none;opacity:0;animation:location-pin-pulse 2.8s ease-out infinite}
.device-location-core::after{animation-delay:1.4s}
@keyframes location-pin-pulse{0%{transform:scale(.65);opacity:0}15%{opacity:.65}100%{transform:scale(1.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.device-location-core::before,.device-location-core::after{animation:none;display:none}}
.location-map .leaflet-popup-content-wrapper{border:1px solid #dce5ea;border-radius:12px;box-shadow:0 8px 28px rgba(24,48,80,.13)}
.location-map .leaflet-popup-content{margin:13px 20px;color:#52616a;font-size:11px;line-height:19px}
.location-map .leaflet-popup-content strong{color:#17202a;font-weight:600}
.map-load-error{position:absolute;z-index:3;top:50%;left:50%;width:max-content;max-width:calc(100% - 32px);transform:translate(-50%,-50%);padding:10px 14px;border:1px solid #dce5ea;border-radius:10px;background:#fff;color:#52616a;font-size:11px;box-shadow:0 4px 14px rgba(24,48,80,.08)}
#map-retry{margin-left:8px;color:#0b3b95;font-weight:600;text-decoration:underline;cursor:pointer}
@keyframes location-breathe{50%{opacity:.4}}
@keyframes location-turn{to{transform:rotate(360deg)}}
@media(min-width:768px){.location-map{height:410px}.map-status{top:18px;left:18px;padding:14px 16px}.map-status-heading h2{font-size:13px}.map-status-detail{font-size:11px;line-height:17px}.map-actions{left:18px;bottom:20px}.location-map .leaflet-top .leaflet-control{margin-top:18px}.location-map .leaflet-right .leaflet-control{margin-right:18px}}
@media(prefers-reduced-motion:reduce){.map-locate-button,.map-status-dot,.map-locate-icon{animation:none!important;transition:none!important}}

.history-delete{cursor:pointer;transition:background-color .15s}
.history-delete:hover{background:#fbdcdd}
.history-delete:focus-visible{outline:2px solid #c74444;outline-offset:3px}
.history-delete:disabled{opacity:.5;cursor:wait}

.dashboard-account{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px;color:#26343d;font-size:11px;font-weight:600}
.dashboard-account span{min-width:0;overflow-wrap:anywhere}
.dashboard-account a{flex:none;color:#0b3b95;font-size:10px}

/* Responsive corrections: allow content to shrink or wrap within its own layout. */
[data-region-row]{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:10px}
.region-city{white-space:normal;overflow-wrap:anywhere}
.region-connect{border:1px solid #d5e0e5;border-radius:999px;background:#fff;color:#0b3b95;padding:5px 10px;font:600 10px 'DM Sans',Arial,sans-serif;line-height:15px;cursor:pointer}
.region-connect:hover{background:#eaf0fa}
.region-connect:focus-visible,.connect-error-close:focus-visible{outline:2px solid #0b3b95;outline-offset:3px}
.connect-error-dialog{margin:auto;width:300px;max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:22px;border:1px solid #d9e1e5;border-radius:12px;background:#fff;color:#17202a;text-align:center}
.connect-error-dialog::backdrop{background:rgba(23,32,42,.35)}
.connect-error-dialog h2{margin:0 0 18px;font-size:16px;font-weight:700;overflow-wrap:anywhere}
.connect-error-close{border:0;border-radius:8px;background:#0b3b95;color:#fff;padding:9px 20px;font:600 11px 'DM Sans',Arial,sans-serif;cursor:pointer}
@media(max-width:399px){[data-region-row]{grid-template-columns:auto minmax(0,1fr) auto;row-gap:4px}[data-region-row] .region-signal{grid-column:2;grid-row:2}[data-region-row] .region-connect{grid-column:3;grid-row:1 / span 2}[data-region-row]>.flag{align-self:start;margin-top:3px}}
html{min-width:0}
body,#root,.app-shell,.app-shell>main{min-width:0}
:where(h1,h2,h3,p,dt,dd,a){overflow-wrap:anywhere}
:where(input:not([type=checkbox]):not([type=radio]),select,textarea){min-width:0;max-width:100%}
[data-testid=profile-page]>div:first-child>span{flex-shrink:0}
[data-testid=profile-page] button>span{min-width:0}
[data-testid=button-profile-kit-number]>span:first-child{flex-shrink:0}
[data-testid=button-profile-kit-number]>span:last-child{max-width:65%;min-width:0}
[data-testid=text-profile-kit-number]{min-width:0;overflow-wrap:anywhere;text-align:right}
[data-testid=profile-page] button svg{flex-shrink:0}
[data-testid=profile-page] dt{flex-shrink:0}
[data-testid=profile-page] dd{min-width:0;max-width:65%;overflow-wrap:anywhere}
[data-testid^=setting-]{flex-wrap:wrap;row-gap:6px}
[data-testid^=setting-]>div{min-width:0;max-width:100%}
[data-testid=mobile-navigation]{max-height:calc(100dvh - 72px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
/* A transformed fade-in ancestor must not contain the fixed full-screen dialogs. */
.fade-up:has(.legacy-dialog:not([hidden])){animation:none;transform:none}
.legacy-dialog{max-width:100%;max-height:100dvh}
.legacy-dialog>div:first-child{flex-shrink:0;gap:12px}
.legacy-dialog>div:first-child button{flex-shrink:0}
.legacy-dialog>.flex-1{min-height:0;min-width:0;overscroll-behavior:contain;padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
.map-status-heading h2{min-width:0}
.map-actions{right:14px;width:max-content;max-width:calc(100% - 28px)}
.map-locate-button{max-width:100%;white-space:normal}
.map-locate-icon{flex-shrink:0}
[data-testid=section-nearby-regions]>div:first-child{flex-wrap:wrap;gap:4px 12px}
[data-testid=admin-users-section] table{min-width:0;table-layout:fixed}
[data-testid=admin-users-section] th:nth-child(1){width:24%}
[data-testid=admin-users-section] th:nth-child(2){width:30%}
[data-testid=admin-users-section] th:nth-child(3){width:22%}
[data-testid=admin-users-section] th:nth-child(4){width:8%}
[data-testid=admin-users-section] th:nth-child(5){width:16%}
[data-testid=admin-users-section] td{overflow-wrap:anywhere;vertical-align:top}
[data-testid=admin-users-section] td .flex>span{flex-shrink:0}
[data-testid=admin-users-section] td .flex>div{min-width:0}
@media(max-width:767px){
  [data-testid=admin-users-section] table,[data-testid=admin-users-section] tbody{display:block;width:100%}
  [data-testid=admin-users-section] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  [data-testid=admin-users-section] tbody tr{display:block;padding-block:8px}
  [data-testid=admin-users-section] td{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;padding:6px 12px}
  [data-testid=admin-users-section] td>*{grid-column:2}
  [data-testid=admin-users-section] td::before{content:attr(data-label);font-size:9px;font-weight:700;color:#89969d}
}
@media(max-width:359px){
  [data-testid=bottom-navigation]{padding-inline:8px}
  [data-testid=bottom-navigation]>div>a{min-width:0;flex:1;padding-inline:4px}
  .map-status{top:10px;left:10px;max-width:calc(100% - 70px);padding:10px}
  .location-map .leaflet-top .leaflet-control{margin-top:10px}
  .location-map .leaflet-right .leaflet-control{margin-right:10px}
  .location-map .leaflet-control-zoom a{width:34px;height:34px;line-height:34px}
  [data-page=login] form>div.flex{flex-wrap:wrap;gap:8px}
}

/* Visible desktop navigation; mobile keeps the existing bottom navigation. */
.site-header{position:sticky;top:0;z-index:30;border-bottom:1px solid #e1e6e9;background:#fff}
.site-header-inner{max-width:940px;min-height:54px;margin:auto;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.site-brand{font-size:12px;font-weight:700;color:#17202a;text-decoration:none}
.site-navigation{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.site-navigation a,.site-navigation button{display:block;padding:8px 10px;border:0;border-radius:6px;background:transparent;font:600 11px 'DM Sans',Arial,sans-serif;color:#64747c;text-decoration:none;cursor:pointer}
.site-navigation a[aria-current=page]{color:#0b3b95;background:#edf2fa}
.site-navigation a:hover,.site-navigation button:hover{background:#f1f4f6}
.site-navigation a:focus-visible,.site-navigation button:focus-visible{outline:2px solid #0b3b95;outline-offset:2px}
@media(max-width:767px){.site-header-inner{padding:8px 12px;gap:4px}.site-navigation .site-desktop-link{display:none}.site-navigation a{padding:7px 6px;font-size:10px}}
.site-navigation a.site-settings-button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 14px;border:1px solid #0b3b95;border-radius:8px;background:#0b3b95;color:#fff;white-space:nowrap}
.site-navigation a.site-settings-button:hover,.site-navigation a.site-settings-button[aria-current=page]{border-color:#082d73;background:#082d73;color:#fff}
.site-navigation .site-menu-toggle{display:none}
.site-mobile-menu{display:none;width:100%;max-height:60dvh;overflow-y:auto;border-top:1px solid #e1e6e9;padding-top:6px}
.site-mobile-menu a,.site-mobile-menu button{display:block;width:100%;padding:12px;border:0;border-radius:8px;background:transparent;color:#26343d;text-align:left;text-decoration:none;font:600 12px 'DM Sans',Arial,sans-serif;cursor:pointer}
.site-mobile-menu a:hover,.site-mobile-menu a[aria-current=page]{background:#edf2fa;color:#0b3b95}
.site-mobile-menu button{color:#d72d2d}
.site-mobile-menu button:hover{background:#fff4f4}
.site-mobile-menu a:focus-visible,.site-mobile-menu button:focus-visible{outline:2px solid #0b3b95;outline-offset:-2px}
@media(max-width:767px){.site-navigation a.site-settings-button.site-desktop-link{display:none}.site-navigation .site-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;color:#26343d}.site-mobile-menu:not([hidden]){display:block}}
.verification-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:32px 16px;background:#fff}
.verification-card{width:100%;max-width:392px;padding:26px;border:1px solid #dce5ea;border-radius:16px;background:#fff}
.verification-card h1{font-size:18px;font-weight:600;color:#17202a;margin:0 0 12px}
.verification-card p{font-size:12px;line-height:1.7;color:#78868e;margin:12px 0;overflow-wrap:anywhere}
.verification-card strong{color:#4a5860;font-weight:500}
.verification-form label{display:block;font-size:11px;margin:20px 0 6px;color:#4a5860}
.verification-form input{width:100%;height:48px;border:1px solid #d5dfe4;border-radius:8px;padding:10px;font:600 22px 'Space Mono',monospace;text-align:center;letter-spacing:5px;color:#17202a}
.verification-form input:focus{outline:2px solid #0b3b95;outline-offset:2px}
.verification-primary{width:100%;min-height:44px;padding:10px;border:0;border-radius:8px;background:#0b3b95;color:#fff;font-size:13px;cursor:pointer}
.verification-primary:disabled,.resend-form button:disabled{opacity:.5;cursor:not-allowed}
.resend-form button{width:100%;border:0;background:transparent;padding:14px 0 0;font-size:12px;font-weight:600;color:#0b3b95;cursor:pointer}
.verification-card>a{font-size:11px;color:#0b3b95}.verification-note{text-align:center}
@media(max-width:359px){.verification-card{padding:20px 16px}.verification-form input{letter-spacing:3px}}
