:root{
  --bg:#F4F2EC;      /* sand paper */
  --panel:#FBFAF6;
  --ink:#16252B;
  --muted:#5E6B6E;
  --rule:#DCD8CC;
  --accent:#0A7C7B;  /* tile turquoise */
  --warm:#C4561E;
  --ok:#2E7D32;
  --font:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0F1A1E;--panel:#152328;--ink:#E7ECE9;--muted:#9AA9AB;--rule:#2A3B40;--accent:#3FC3BF;--warm:#EE8A55;--ok:#7CCB80;color-scheme:dark}}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:grid;grid-template-columns:400px minmax(0,1fr);font:400 14px/1.6 var(--font);color:var(--ink);background:var(--bg)}
#map{height:100%;min-height:0;background:var(--bg)}
#panel{height:100%;overflow-y:auto;padding:20px 20px 28px;background:var(--panel);border-inline-end:1px solid var(--rule);display:flex;flex-direction:column;gap:14px}

.head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
h1{margin:0;font-size:1.75rem;line-height:1.15;font-weight:700;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent);font-size:.75em}
.lang{font:500 .8rem var(--font);background:transparent;color:var(--ink);border:1px solid var(--rule);border-radius:3px;padding:5px 10px;cursor:pointer;flex:none}
.intro{margin:0;color:var(--muted);font-size:.88rem}

.area{display:grid;gap:10px}
.field{display:flex;flex-direction:column;gap:6px;font-weight:500}
.field small{font-weight:400;color:var(--muted);font-size:.78rem}
.field b{font-variant-numeric:tabular-nums;font-weight:500;color:var(--accent)}
select{font:400 .95rem var(--font);color:var(--ink);background:var(--bg);border:1px solid var(--rule);border-radius:3px;padding:8px}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.num{font:400 .9rem var(--mono);color:var(--ink);background:var(--bg);border:1px solid var(--rule);border-radius:3px;padding:5px 6px;inline-size:100%;max-inline-size:90px}
.checks{display:flex;flex-direction:column;gap:6px}
.checks label{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.checks input{margin-top:5px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grid3 .field{font-size:.8rem;font-weight:500;justify-content:space-between}

/* study tabs */
.tabs{display:flex;flex-wrap:wrap;gap:6px;border-top:1.5px solid var(--ink);padding-top:12px}
.tabs button{font:500 .82rem var(--font);color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:999px;padding:5px 11px;cursor:pointer}
.tabs button:hover{border-color:var(--accent)}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--panel);border-color:var(--ink)}

.controls{display:flex;flex-direction:column;gap:12px}
.controls:empty{display:none}
.ramp{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--muted)}
.ramp i{flex:1;height:8px;border-radius:2px;background:linear-gradient(90deg,#1D5F8A,#8DB9D4,#E8E3D5,#EDB98C,#A8432C)}
[dir=rtl] .ramp i{transform:scaleX(-1)}

.status{font-size:.85rem;color:var(--warm)}
.status:empty{display:none}

.view{display:flex;flex-direction:column;gap:12px;min-width:0}
.view:empty{display:none}
.q{margin:0;font-weight:700;font-size:1.02rem;line-height:1.4}
.how{margin:0;color:var(--muted);font-size:.8rem}
.muted{color:var(--muted)}

.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule)}
.kpi{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--rule);min-width:0}
.kpi:nth-child(odd){padding-inline-end:12px}
.kpi:nth-child(even){padding-inline-start:12px;border-inline-start:1px solid var(--rule)}
.kpi .k{font-size:.76rem;color:var(--muted);line-height:1.35}
.kpi b{font:700 1.3rem/1.2 var(--font);font-variant-numeric:tabular-nums}
.kpi b small{font-size:.7rem;font-weight:500;color:var(--muted)}
.bench{align-self:flex-start;font-size:.7rem;line-height:1.3;padding:2px 7px;border-radius:2px;border:1px solid var(--rule);color:var(--muted)}
.bench.ok{border-color:var(--ok);color:var(--ok)}
.bench.bad{border-color:var(--warm);color:var(--warm)}

.tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.tbl th{text-align:start;font-weight:500;font-size:.74rem;color:var(--muted);padding:4px 0;border-bottom:1.5px solid var(--ink)}
.tbl td{padding:6px 4px 6px 0;border-bottom:1px solid var(--rule);vertical-align:middle}
.tbl td.n{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td.n.zero{color:var(--warm)}
.tbl.cov label{display:flex;align-items:center;gap:4px;cursor:pointer}
.tbl.cov small{color:var(--muted)}
.tbl.rep td:nth-child(3){text-align:end}
.rh{margin:8px 0 0;font-size:.95rem}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:7px;vertical-align:middle;flex:none}
.sw{display:inline-block;width:11px;height:11px;border-radius:2px;margin-inline:6px 5px;vertical-align:-1px}
.sw.round{border-radius:50%}
.legend{margin:0;font-size:.78rem;color:var(--muted)}
.bar{display:inline-block;inline-size:56px;height:6px;background:var(--rule);border-radius:3px;vertical-align:middle;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.stack{display:flex;height:14px;border-radius:2px;overflow:hidden;background:var(--rule)}
.stack i{display:block;height:100%}
.meta{display:flex;flex-direction:column;gap:2px;font-size:.8rem;color:var(--muted)}
.meta b{color:var(--ink);font-size:1rem}

.btns{display:flex;flex-wrap:wrap;gap:8px}
.btn{font:500 .88rem var(--font);padding:8px 14px;border:1.5px solid var(--ink);background:var(--ink);color:var(--panel);border-radius:3px;cursor:pointer}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{color:#fff}
#copy{align-self:flex-start}
.foot{margin-top:auto;font-size:.74rem;color:var(--muted);display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--rule);padding-top:12px}
.foot p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.leaflet-container,.maplibregl-map{font-family:var(--font)}
.poi-tip{font:500 12px var(--font)}
/* mute the basemap so analysis layers stand out */
.basemap{filter:grayscale(.85) contrast(.9) brightness(1.04)}
@media (prefers-color-scheme:dark){.basemap{filter:grayscale(1) invert(1) brightness(.85) contrast(.9)}}

@media (max-width:760px){
  html,body{height:auto}
  body{grid-template-columns:minmax(0,1fr)}
  #map{grid-row:1;height:55vh}
  #panel{grid-row:2;height:auto;overflow:visible;border:0;border-top:1px solid var(--rule);padding-inline:16px}
}
@media print{
  body{display:block;background:#fff;color:#000}
  #map,.tabs,.controls,#copy,.lang,.area,.intro{display:none!important}
  #panel{height:auto;overflow:visible;border:0}
}

/* export bar under each study */
.exportbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.exportbar b{flex-basis:100%;font-size:.75rem;font-weight:600;color:var(--muted)}
.btn.sm{padding:5px 10px;font-size:.78rem}
@media print{.exportbar{display:none}}