/* GovHub v20: shared by the web app (app.html), the mobile site (m/) and the Android app (which loads m/), so every surface looks the same. */

/* ---- Set up this device: the button never squeezes the text column ---- */
.dsrow{flex-wrap:wrap;row-gap:10px}
.dstx{flex:1 1 180px;min-width:0}
.dsrow [data-ds]{flex:0 0 auto;min-width:96px;justify-content:center;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.dsrow [data-ds].is-busy{opacity:1;cursor:progress}
.dsrow [data-ds] .spin{width:14px;height:14px;border-width:2px;margin:0}
.dsst{display:block;margin-top:4px;line-height:1.35}
@media (max-width:360px){.dsrow [data-ds]{flex:1 1 100%}}

/* ---- Crop your photo ---- */
.cropm{max-width:420px}
.cropz{margin-top:10px}
.cropz label{display:block;font-size:.8rem;font-weight:600;color:#475569;margin:0 0 6px}
.ghrange{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;padding:0;border:0;--p:0%}
.ghrange:focus{outline:none}
.ghrange::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#1446a0 0,#1446a0 var(--p),#dbe3f1 var(--p),#dbe3f1 100%)}
.ghrange::-moz-range-track{height:6px;border-radius:999px;background:#dbe3f1}
.ghrange::-moz-range-progress{height:6px;border-radius:999px;background:#1446a0}
.ghrange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #0b2a63;box-shadow:0 2px 6px rgba(11,42,99,.35);margin-top:-8px}
.ghrange::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #0b2a63;box-shadow:0 2px 6px rgba(11,42,99,.35)}
.ghrange:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(20,70,160,.25)}
.croprow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;padding-bottom:max(0px,env(safe-area-inset-bottom,0px))}
.croprow .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;min-height:48px;padding:0 16px;margin:0;border-radius:14px;font-size:.95rem;font-weight:700;line-height:1;width:100%;box-sizing:border-box}
.croprow .croprow__c{background:#fff;color:#0b2a63;border:1.5px solid #cfd8e8;box-shadow:none}
.croprow .croprow__c:hover{background:#f5f8fd}
.croprow .croprow__ok{background:#0b2a63;background:linear-gradient(135deg,#1446a0,#0b2a63);color:#fff;border:0;box-shadow:0 8px 20px -8px rgba(11,42,99,.55)}
.croprow .croprow__ok svg{width:18px;height:18px}
@media (max-width:420px){.croprow{grid-template-columns:1fr}.croprow .croprow__ok{order:-1}}

/* ---- Verify identity: live face check ---- */
.kslot--face{border-style:solid}
.kslot--face.has{border-color:#0f9d58;background:#f1fbf5}
.kyface{margin-top:8px;padding:12px 14px;border-radius:14px;border:1.5px dashed #b8c6e0;background:#f7f9fd;display:flex;gap:12px;align-items:center}
.kyface.ok{border-style:solid;border-color:#0f9d58;background:#f1fbf5}
.kyface.warn{border-style:solid;border-color:#d4a106;background:#fff9e6}
.kyface__ic{flex:0 0 44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#e8efff;color:#1446a0;overflow:hidden}
.kyface__ic img{width:100%;height:100%;object-fit:cover}
.kyface.ok .kyface__ic{background:#d9f3e4;color:#0f9d58}
.kyface__t{flex:1 1 auto;min-width:0}
.kyface__t b{display:block;font-size:.92rem}
.kyface__t small{display:block;font-size:.78rem;color:#5b6475;line-height:1.35}
.kyface .btn{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
@media (max-width:380px){.kyface{flex-wrap:wrap}.kyface .btn{flex:1 1 100%;justify-content:center}}
.kyreq{font-size:.78rem;color:#5b6475;margin:6px 0 0}
/* v20 admin: new-citizen notices + automatic checks */
.bellnu{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bellnu>a{flex:1 1 auto}
.bellnu .bellseen{flex:0 0 auto;margin:0 8px 6px auto;min-height:32px}
.ax .snav a[href="#users"] .cnt{background:#c0262d;color:#fff}
.nubanner{border-left:4px solid #d4a017;margin-bottom:14px}
.nubanner .nulist{margin-top:10px;display:grid;gap:4px}
.nubanner .nulist .li{text-decoration:none}
.kychk-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.kychk-tags .tag{font-size:11px}
.kycface{max-width:220px}
.kycface img{border-radius:10px}
.kyafc{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px;border:1px solid #e3b341;border-radius:10px;background:#fff8e6;font-size:14px;line-height:1.4}
.kyafc input{margin-top:3px;width:18px;height:18px;flex:0 0 auto}
/* v20: the setup "Set up" action is a real outlined button (was text-only), right-aligned under the text; Done state stays a plain green label */
.dsrow [data-ds]{margin-left:auto;height:40px;min-height:40px;padding:0 18px;border-radius:12px;border:1.5px solid #c9d5ea;background:#fff;color:#0b2a63;font-weight:700;font-size:.9rem;box-shadow:none}
.dsrow [data-ds]:hover:not(:disabled){background:#f3f7fd;border-color:#1446a0}
.dsrow [data-ds]:disabled{opacity:.55}
.dsrow--ok [data-ds]{border-color:transparent;background:transparent;color:#0f7a45}