/* وين — shared app shell. Deliberately tiny: no framework, no icon font,
   no map tiles. Data costs about a tenth of an income here. */
:root{
  --night:#0E1830;--n2:#16213D;--n3:#1E2B4D;--ln:#2A3A61;
  --am:#E8A33D;--am2:#F5C97B;--amd:#B87A1E;--sky:#4A9BE8;
  --tx:#EFE7D8;--mu:#9AA6C0;--mu2:#6E7C9C;--ok:#4FBF8B;--bad:#E86D5A;
  --fd:"Rubik",system-ui,sans-serif;--fb:"IBM Plex Sans Arabic","Rubik",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--tx);font-family:var(--fb);font-size:16px;line-height:1.7;
  overscroll-behavior-y:contain}
h1,h2,h3{font-family:var(--fd);font-weight:800;margin:0 0 .3em;line-height:1.25}
button{font-family:inherit;cursor:pointer;border:0}
:focus-visible{outline:3px solid var(--am);outline-offset:2px;border-radius:8px}

.app{max-width:520px;margin-inline:auto;min-height:100%;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--ln);
  position:sticky;top:0;background:rgba(14,24,48,.96);backdrop-filter:blur(10px);z-index:20}
.bar svg{height:30px}
.bar b{font-family:var(--fd);font-size:1.15rem}
.bar .sp{margin-inline-start:auto;font-size:.88rem;color:var(--mu)}
.bar .sp b{color:var(--am);font-size:1rem}

.main{flex:1;padding:18px;display:grid;gap:14px;align-content:start}
.view{display:none}
.view.on{display:grid;gap:14px;align-content:start;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.card{background:var(--n2);border:1px solid var(--ln);border-radius:16px;padding:18px}
.card.lit{background:linear-gradient(160deg,rgba(232,163,61,.14),var(--n2));border-color:var(--amd)}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.row+.row{margin-top:9px}
.mu{color:var(--mu);font-size:.9rem}
.big{font-family:var(--fd);font-weight:800;font-size:1.7rem;color:var(--am)}
.xl{font-size:2.3rem}

label{display:block;font-size:.86rem;color:var(--mu);margin-bottom:6px}
input,select{width:100%;padding:14px;background:var(--night);color:var(--tx);border:1px solid var(--ln);
  border-radius:12px;font-family:inherit;font-size:1rem}
input:focus,select:focus{border-color:var(--am);outline:none}
.fld{margin-bottom:12px}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;border-radius:100px;
  background:var(--am);color:#241703;font-family:var(--fd);font-weight:700;font-size:1.02rem;
  transition:filter .15s,transform .12s}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;border:1.5px solid var(--ln);color:var(--tx)}
.btn.ok{background:var(--ok);color:#062b1c}
.btn.bad{background:var(--bad);color:#fff}
.btn.big{padding:22px;font-size:1.25rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--night);border:1px solid var(--ln);
  border-radius:100px;padding:5px}
.seg button{background:none;color:var(--mu);padding:11px;border-radius:100px;font-weight:600;font-size:.94rem}
.seg button[aria-pressed="true"]{background:var(--am);color:#241703}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;padding:4px 11px;border-radius:100px;
  border:1px solid var(--ln);color:var(--mu)}
.pill.ok{border-color:rgba(79,191,139,.5);color:var(--ok);background:rgba(79,191,139,.1)}
.pill.warn{border-color:rgba(232,109,90,.5);color:var(--bad);background:rgba(232,109,90,.1)}
.pill.am{border-color:var(--amd);color:var(--am);background:rgba(232,163,61,.1)}

.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);position:relative;flex:none}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:ping 1.8s infinite}
@keyframes ping{70%,100%{transform:scale(2.6);opacity:0}}

.avatar{width:48px;height:48px;border-radius:50%;background:var(--n3);display:grid;place-items:center;
  font-family:var(--fd);font-weight:800;color:var(--am);flex:none;font-size:1.1rem}

.msg{padding:13px 16px;border-radius:12px;font-size:.9rem}
.msg.bad{background:rgba(232,109,90,.12);border:1px solid rgba(232,109,90,.45);color:var(--bad)}
.msg.ok{background:rgba(79,191,139,.12);border:1px solid rgba(79,191,139,.45);color:var(--ok)}
.msg.info{border-inline-start:3px solid var(--am);background:rgba(232,163,61,.08);color:var(--mu)}

/* landmark chooser — no map tiles, which is the point */
.places{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.places button{background:var(--night);border:1px solid var(--ln);color:var(--tx);padding:12px 8px;
  border-radius:12px;font-size:.88rem}
.places button[aria-pressed="true"]{border-color:var(--am);background:rgba(232,163,61,.12);color:var(--am)}

/* tracking view: relative positions, drawn locally, zero network cost */
.track{height:200px;border-radius:14px;border:1px solid var(--ln);overflow:hidden;position:relative;
  background:linear-gradient(var(--n2) 1px,transparent 1px) 0 0/28px 28px,
             linear-gradient(90deg,var(--n2) 1px,transparent 1px) 0 0/28px 28px,var(--night)}
.track svg{position:absolute;inset:0;width:100%;height:100%}

.timer{font-family:var(--fd);font-weight:800;font-size:1.4rem;color:var(--am)}
.bar2{height:6px;background:var(--n3);border-radius:4px;overflow:hidden}
.bar2 i{display:block;height:100%;background:var(--am);transition:width .9s linear}

.list{display:grid;gap:8px}
.item{background:var(--n2);border:1px solid var(--ln);border-radius:12px;padding:13px 15px;font-size:.9rem}
.item .row{align-items:flex-start}
.tabs{display:flex;gap:6px;padding:0 18px 12px}
.tabs button{flex:1;background:var(--n2);border:1px solid var(--ln);color:var(--mu);padding:10px;
  border-radius:100px;font-size:.9rem;font-weight:600}
.tabs button[aria-pressed="true"]{background:var(--am);color:#241703;border-color:var(--am)}
.center{text-align:center}
.spin{width:34px;height:34px;border:3px solid var(--ln);border-top-color:var(--am);border-radius:50%;
  margin:0 auto;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.off{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- map ---------- */
.mapbox{height:270px;border-radius:16px;overflow:hidden;border:1px solid var(--ln);position:relative;z-index:0}
.mapbox.tall{height:340px}
.leaflet-container{background:#0B1220;font-family:var(--fb)}
.leaflet-control-attribution{background:rgba(14,24,48,.8)!important;color:var(--mu2)!important;font-size:9px}
.leaflet-control-attribution a{color:var(--mu)!important}
.leaflet-bar a{background:var(--n2)!important;color:var(--tx)!important;border-color:var(--ln)!important}
.leaflet-bar a:hover{background:var(--n3)!important}
.wpin__b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:16px;
  box-shadow:0 3px 10px rgba(0,0,0,.6);border:2px solid #0E1830}
.maprow{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.maprow .pill{font-size:.82rem}
.picker{position:relative}
.picker .crosshair{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:500}
.picker .crosshair span{font-size:30px;transform:translateY(-14px);filter:drop-shadow(0 3px 6px rgba(0,0,0,.7))}