/* Dubai Market Desk – design tokens, layout and components. No inline styles anywhere (CSP style-src 'self'). */
:root{
 --font:"Inter","SF Pro Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --bg:#EDF1F4;--card:#FFFFFF;--card2:#F5F8FA;--ink:#0B1A24;--mute:#53687A;--line:#D9E2E9;
 --acc:#0B7A75;--acc-ink:#FFFFFF;--warn:#B76E00;--ok:#13803F;--bad:#BE2F25;
 --bar-a:#2CC4B5;--bar-b:#0B6E73;--bar-hl-a:#F6BE4A;--bar-hl-b:#C27806;--neg-a:#F28572;--neg-b:#B3342A;
 --shadow:0 1px 2px rgba(11,26,36,.06),0 6px 18px rgba(11,26,36,.05);
 --r:14px;--r-sm:10px;--s1:6px;--s2:10px;--s3:14px;--s4:20px;
}
:root[data-theme=dark]{
 --bg:#070F16;--card:#0E1A25;--card2:#132230;--ink:#E9F2F7;--mute:#8FA7B8;--line:#1D3040;
 --acc:#2DD4BF;--acc-ink:#04211F;--warn:#F6BE4A;--ok:#4ADE80;--bad:#FF8A80;
 --bar-a:#34E0CB;--bar-b:#0F766E;--bar-hl-a:#FCD34D;--bar-hl-b:#B45309;--neg-a:#FF9A8B;--neg-b:#BE123C;
 --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.25);
}
@media(prefers-color-scheme:dark){:root[data-theme=auto]{
 --bg:#070F16;--card:#0E1A25;--card2:#132230;--ink:#E9F2F7;--mute:#8FA7B8;--line:#1D3040;
 --acc:#2DD4BF;--acc-ink:#04211F;--warn:#F6BE4A;--ok:#4ADE80;--bad:#FF8A80;
 --bar-a:#34E0CB;--bar-b:#0F766E;--bar-hl-a:#FCD34D;--bar-hl-b:#B45309;--neg-a:#FF9A8B;--neg-b:#BE123C;
 --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.25)}}

*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--font);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
h1{font-size:1.1rem;font-weight:750;letter-spacing:-.015em;margin:0;line-height:1.2}
h2{font-size:.95rem;font-weight:650;letter-spacing:.005em;margin:0 0 var(--s2);line-height:1.3}
p{margin:.3rem 0}
.sub{color:var(--mute);font-size:.8rem;line-height:1.45;margin:.25rem 0}
a{color:var(--acc)}

/* header */
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:calc(10px + env(safe-area-inset-top)) var(--s3) 10px;background:var(--card);border-bottom:1px solid var(--line)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--bar-a),var(--bar-hl-a) 60%,transparent)}
.top h1{display:flex;align-items:center;gap:var(--s2)}
.top h1::before{content:"";width:12px;height:12px;border-radius:4px;background:linear-gradient(135deg,var(--bar-a),var(--bar-b));flex:none}
.top .sub{margin:2px 0 0 22px}
.actions{display:flex;gap:var(--s1);align-items:center}

main{max-width:1040px;margin:0 auto;padding:var(--s3)}
.tab{display:none}.tab.active{display:block}
#tab-dash.active{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.span-all{grid-column:1/-1}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s3) var(--s3);margin:0 0 var(--s3);box-shadow:var(--shadow);min-width:0}
#tab-dash .card{margin:0}
.card.note{background:linear-gradient(135deg,var(--card),var(--card2));border-left:4px solid var(--bar-hl-b)}
.card.note strong{font-size:.95rem;letter-spacing:-.005em}
#selCard h2{font-size:1rem;margin-bottom:4px}

/* controls */
.prefs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.prefs label{font-size:.75rem;font-weight:600;color:var(--mute);display:flex;flex-direction:column;gap:4px}
select,textarea{font:inherit;font-size:.9rem;font-weight:500;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;width:100%;min-height:44px}
textarea{resize:vertical;line-height:1.5}
.btn{font:inherit;font-size:.88rem;font-weight:650;min-height:44px;min-width:44px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.btn.ghost{background:transparent}
.btn.primary{background:linear-gradient(180deg,var(--bar-a),var(--bar-b));border-color:transparent;color:#041B1A}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.link{display:inline-flex;align-items:center;text-decoration:none}
.btn[aria-pressed=true]{background:linear-gradient(180deg,var(--bar-hl-a),var(--bar-hl-b));border-color:transparent;color:#1A1100}
.btn:disabled{opacity:.55;cursor:not-allowed}
:focus-visible{outline:3px solid var(--bar-hl-a);outline-offset:2px}
.row{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s2);flex-wrap:wrap}.row .sub{flex:1;min-width:120px}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.kpi{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}
.kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--bar-a),var(--bar-b))}
.kpi-l{font-size:.75rem;font-weight:600;color:var(--mute)}
.kpi b{font-size:clamp(1.3rem,5vw,1.75rem);font-weight:750;letter-spacing:-.025em;line-height:1.15}
.kpi .kpi-sub{font-size:.78rem;font-weight:600;color:var(--mute)}
.kpi-sub.up{color:var(--ok)}.kpi-sub.down{color:var(--bad)}

/* charts */
canvas{display:block;width:100%;touch-action:pan-y;cursor:pointer}
.card .sub{min-height:2.6em}

/* data lists */
.facts{margin:0}
.facts div{display:flex;justify-content:space-between;gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.facts div:last-child{border-bottom:0}
.facts dt{color:var(--mute);font-weight:500}
.facts dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}
.facts dd small{display:block;font-weight:400;font-size:.76rem;color:var(--mute);margin-top:1px}

/* pills, status */
.pill{font-size:.72rem;font-weight:650;padding:3px 10px;border-radius:99px;border:1px solid currentColor}
.pill.ok{color:var(--ok)}.pill.bad{color:var(--bad)}
.dot{width:10px;height:10px;border-radius:50%;margin-top:7px;flex:none;background:var(--ok)}.dot.bad{background:var(--bad)}.dot.warn{background:var(--warn)}
.checks,.audit{list-style:none;padding:0;margin:var(--s2) 0 0}
.checks li,.audit li{display:flex;gap:var(--s2);padding:10px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.checks li:last-child,.audit li:last-child{border-bottom:0}
.audit time{display:block;color:var(--mute);font-size:.75rem}
.audit code{font:500 .7rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--mute);overflow-wrap:anywhere}

/* agents and results */
.agents{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s2)}
.agents label{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:99px;padding:8px 14px;min-height:44px;font-size:.85rem;font-weight:600;background:var(--card2)}
.pipeline{padding-left:20px;margin:var(--s2) 0 0}.pipeline li{margin:var(--s2) 0}.pipeline .st{font-size:.8rem;color:var(--mute)}
.result{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--bar-hl-b);border-radius:var(--r);padding:var(--s3);margin-bottom:var(--s3);white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:var(--shadow)}
.result h3{margin:0 0 6px;font-size:.88rem;font-weight:650;color:var(--mute)}

/* bottom navigation */
.tabs{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,1fr);background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:6}
.tabs button{font:inherit;font-size:.74rem;font-weight:600;min-height:58px;border:0;background:none;color:var(--mute);cursor:pointer;border-top:3px solid transparent}
.tabs button.on{color:var(--acc);font-weight:750;border-image:linear-gradient(90deg,var(--bar-a),var(--bar-b)) 1}

/* overlays */
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,16px);background:var(--ink);color:var(--bg);font-size:.85rem;font-weight:600;padding:10px 16px;border-radius:var(--r-sm);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20;max-width:90%}
.toast.show{opacity:1;transform:translate(-50%,0)}
.consent{position:fixed;inset:0;background:rgba(3,10,15,.65);display:flex;align-items:flex-end;z-index:30}.consent[hidden]{display:none}
.sheet{background:var(--card);padding:var(--s4);border-radius:20px 20px 0 0;width:100%;max-width:560px;margin:0 auto}
.sheet h2{font-size:1.1rem}

@media(min-width:720px){
 body{font-size:15.5px}
 .prefs{grid-template-columns:repeat(3,minmax(0,1fr))}
 .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
 .consent{align-items:center}.sheet{border-radius:20px}
}
@media(min-width:960px){
 main{padding:var(--s4)}
 #tab-dash.active{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.tabs,.top .actions,.prefs,#tab-ask .card,.toast,.top::after{display:none!important}.tab{display:block!important}body{background:#fff;color:#000}.card,.kpi{box-shadow:none;break-inside:avoid}}

/* ---- Chart hover tooltips (CSS-only positioning; classes assigned in js/charts.js) ---- */
.chart{position:relative}
.tip-grid{position:absolute;display:grid;margin:0;padding:0;--pb:48px;--pt:30px}
.tip-grid.v{top:0;bottom:0;left:44px;right:10px}
.tip-grid.h{top:6px;bottom:26px;left:0;right:0;grid-auto-rows:1fr}
.tip-grid.cols-1{grid-template-columns:minmax(0,1fr)}
.tip-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tip-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tip-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tip-grid.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.tip-grid.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.tip-grid.cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.tip-grid.cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
.tip-hit{position:relative;display:block;min-width:0;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.tip-hit:focus-visible{outline:2px solid var(--bar-hl-a);outline-offset:-2px;border-radius:6px}
.tip{position:absolute;z-index:12;width:max-content;max-width:min(236px,72vw);padding:9px 11px;border-radius:9px;background:var(--ink);color:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.28);font-size:.76rem;line-height:1.4;text-align:left;pointer-events:none;opacity:0;visibility:hidden;transform:translate(var(--tx,0),5px);transition:opacity .14s,transform .14s,visibility .14s}
.tip-hit:hover .tip,.tip-hit:focus-visible .tip{opacity:1;visibility:visible;transform:translate(var(--tx,0),0)}
.tip-t{display:block;font-size:.78rem;font-weight:700}
.tip-v{display:block;margin:1px 0 3px;font-size:1rem;font-weight:750;letter-spacing:-.01em;color:var(--bar-hl-a)}
.tip-n{display:block;font-weight:400;opacity:.85}
/* vertical bars: tooltip sits above the bar top (level 0-20 = bar height in 5% steps) */
.tip-grid.v .tip{--tx:-50%;left:50%;bottom:calc(var(--pb) + (100% - var(--pb) - var(--pt)) * var(--lv,0) / 20 + 26px)}
.tip-grid.v .tip-hit.edge-l .tip{--tx:0;left:0}
.tip-grid.v .tip-hit.edge-r .tip{--tx:0;left:auto;right:0}
.tip-grid.v .tip-hit:hover{background:linear-gradient(180deg,transparent,rgba(127,127,127,.08))}
/* horizontal bars: tooltip above the hovered row, right-aligned */
.tip-grid.h .tip{right:4px;bottom:calc(100% - 2px)}
.tip-hit.lv-0{--lv:0}
.tip-hit.lv-1{--lv:1}
.tip-hit.lv-2{--lv:2}
.tip-hit.lv-3{--lv:3}
.tip-hit.lv-4{--lv:4}
.tip-hit.lv-5{--lv:5}
.tip-hit.lv-6{--lv:6}
.tip-hit.lv-7{--lv:7}
.tip-hit.lv-8{--lv:8}
.tip-hit.lv-9{--lv:9}
.tip-hit.lv-10{--lv:10}
.tip-hit.lv-11{--lv:11}
.tip-hit.lv-12{--lv:12}
.tip-hit.lv-13{--lv:13}
.tip-hit.lv-14{--lv:14}
.tip-hit.lv-15{--lv:15}
.tip-hit.lv-16{--lv:16}
.tip-hit.lv-17{--lv:17}
.tip-hit.lv-18{--lv:18}
.tip-hit.lv-19{--lv:19}
.tip-hit.lv-20{--lv:20}

/* community zero-state */
#selCard.is-empty{border-style:dashed;background:var(--card2)}
.zero{color:var(--mute);font-weight:650}
#selCard .btn{margin-top:var(--s2)}
optgroup{font-weight:700}

/* ---- Guided tour (classes assigned in js/tour.js; no inline styles) ---- */
#btnGuide{padding:0;width:44px;font-size:1rem;font-weight:800}
@media(max-width:520px){.top{flex-wrap:wrap}.top .btn{padding:0 10px}.top #btnGuide{padding:0}.actions{margin-left:auto}}
body.tour-on{overflow:hidden}
.tour-backdrop{position:fixed;inset:0;z-index:40;background:rgba(3,10,15,.68);animation:tour-fade .2s ease-out both}
/* raise the stacking container (header or bottom bar) above the backdrop, and make the lifted area inert */
.tour-lift{z-index:41!important}
.tour-lift,.tour-lift *,.tour-highlight-active,.tour-highlight-active *{pointer-events:none}
/* spotlight ring on the target */
.tour-highlight-active{position:relative;z-index:41;border-radius:12px;scroll-margin-top:96px;box-shadow:0 0 0 3px var(--bar-hl-a),0 0 0 8px rgba(246,190,74,.32);animation:tour-pulse 1.8s ease-in-out infinite}
/* directional arrow: a child of the target, anchored by CSS to the side named in its class */
.tour-arrow{position:absolute;left:50%;width:30px;height:30px;margin-left:-15px;z-index:3;color:var(--bar-hl-a);pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.tour-arrow-svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tour-arrow-up{top:calc(100% + 10px);animation:tour-bob-up .9s ease-in-out infinite}
.tour-arrow-down{bottom:calc(100% + 10px);animation:tour-bob-down .9s ease-in-out infinite}
.tour-arrow-down .tour-arrow-svg{transform:rotate(180deg)}
.tour-arrow-left{left:calc(100% + 10px);top:50%;margin:-15px 0 0;animation:tour-bob-left .9s ease-in-out infinite}
.tour-arrow-left .tour-arrow-svg{transform:rotate(-90deg)}
.tour-arrow-right{left:auto;right:calc(100% + 10px);top:50%;margin:-15px 0 0;animation:tour-bob-right .9s ease-in-out infinite}
.tour-arrow-right .tour-arrow-svg{transform:rotate(90deg)}
/* step card: bottom sheet on phones, centred panel on larger screens */
.tour-card{position:fixed;z-index:45;left:12px;right:12px;bottom:calc(106px + env(safe-area-inset-bottom));max-width:420px;max-height:calc(100vh - 150px);margin:0 auto;overflow:auto;padding:var(--s3);background:var(--card);color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--bar-hl-b);border-radius:var(--r);box-shadow:0 18px 48px rgba(0,0,0,.42);animation:tour-rise .22s ease-out both}
.tour-meta{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.tour-step{font-size:.75rem;font-weight:700;color:var(--acc)}
.tour-skip{min-width:44px;min-height:44px;padding:0 6px;border:0;background:none;color:var(--mute);font:inherit;font-size:.82rem;font-weight:650;text-decoration:underline;cursor:pointer}
.tour-title{margin:0 0 6px;font-size:1.05rem;letter-spacing:-.01em}
.tour-body{margin:0 0 var(--s2);font-size:.9rem;line-height:1.55}
.tour-dots{display:flex;gap:6px;margin:0 0 var(--s2)}
.tour-dot{width:8px;height:8px;border-radius:99px;background:var(--line);transition:width .2s,background .2s}
.tour-dot.is-done{background:var(--bar-b)}
.tour-dot.is-on{width:22px;background:linear-gradient(90deg,var(--bar-a),var(--bar-b))}
.tour-actions{display:flex;justify-content:flex-end;gap:var(--s2)}
.tour-actions .btn[hidden]{display:none}
@media(min-width:720px){.tour-card{left:calc(50% - 210px);right:auto;width:420px;margin:0}}
@keyframes tour-fade{from{opacity:0}to{opacity:1}}
@keyframes tour-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes tour-pulse{0%,100%{box-shadow:0 0 0 3px var(--bar-hl-a),0 0 0 8px rgba(246,190,74,.32)}50%{box-shadow:0 0 0 3px var(--bar-hl-a),0 0 0 13px rgba(246,190,74,.1)}}
@keyframes tour-bob-up{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes tour-bob-down{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes tour-bob-left{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}
@keyframes tour-bob-right{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@media(prefers-reduced-motion:reduce){.tour-backdrop,.tour-card,.tour-highlight-active,.tour-arrow{animation:none!important}}
@media print{.tour-backdrop,.tour-card{display:none!important}}
.tour-back,.tour-next{min-width:88px}

/* ---- Layout-shift prevention: reserve space before JavaScript fills content ---- */
html{scrollbar-gutter:stable}
/* chart heights live in CSS (js/charts.js reads clientHeight), so the canvas is the same size before and after drawing */
.ch-200{height:200px}.ch-210{height:210px}.ch-230{height:230px}.ch-304{height:304px}
#asof{display:block;min-height:1.4em}
#selCard{min-height:132px}
.kpis:empty{min-height:216px}
#fSep:empty{min-height:480px}
#fPix:empty,#fQ3:empty{min-height:340px}
#fRent:empty{min-height:260px}
#fDld:empty{min-height:320px}
/* skeleton shimmer while a placeholder is still empty */
#selCard:empty,.kpis:empty,.facts:empty{border-radius:var(--r);background:linear-gradient(100deg,var(--card2) 30%,var(--line) 50%,var(--card2) 70%) 0 0/200% 100%;animation:skeleton 1.3s linear infinite}
@keyframes skeleton{to{background-position:-200% 0}}
@media(min-width:720px){#selCard{min-height:108px}.kpis:empty{min-height:106px}}
@media(prefers-reduced-motion:reduce){#selCard:empty,.kpis:empty,.facts:empty{animation:none}}