/* Populator design system. Tokens from the brand (logo blues, DNA grey, navy), ZapfHumnst typography, logical
   properties throughout so the Arabic/RTL release (v1.1) needs no layout rework. No framework, no CDN. */
@font-face { font-family: "ZapfHumnst BT"; src: url("../fonts/ZapfHumanist601BT-Roman.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ZapfHumnst Dm BT"; src: url("../fonts/ZapfHumanist601BT-Demi.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  --navy: #0F1B2D; --ink: #1C2A3A; --blue: #2098D8; --blue-dark: #1678B0; --dna: #00A0E0; --grey: #686868;
  --mist: #9FC4DD; --light: #F3F7FA; --line: #D9E2EA; --line-2: #E8EEF3; --white: #fff;
  --good: #2E9E6B; --warn: #E3A008; --bad: #D64545;
  --good-bg: #E6F5EE; --warn-bg: #FDF4DC; --bad-bg: #FBE9E9; --info-bg: #E8F4FB;
  --text: var(--ink); --muted: #5B6B7B; --surface: var(--white); --surface-2: var(--light);
  --font-body: "ZapfHumnst BT", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-head: "ZapfHumnst Dm BT", "ZapfHumnst BT", "Segoe UI", Tahoma, system-ui, sans-serif;
  --r-s: 8px; --r: 12px; --r-l: 18px; --r-pill: 999px;
  --shadow-s: 0 1px 2px rgba(15,27,45,.06), 0 1px 3px rgba(15,27,45,.06);
  --shadow: 0 4px 14px rgba(15,27,45,.10); --shadow-l: 0 14px 40px rgba(15,27,45,.18);
  --topbar-h: 56px; --panel-w: 420px; --focus: 0 0 0 3px rgba(32,152,216,.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 15px/1.5 var(--font-body); color: var(--text); background: var(--surface-2); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 400; color: var(--navy); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 2.2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; } h4 { font-size: 1rem; }
p { margin: 0 0 1em; } a { color: var(--blue-dark); text-decoration: none; } a:hover { text-decoration: underline; }
img, svg { max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
::selection { background: rgba(32,152,216,.25); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.22em; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .tiny { font-size: .75rem; } .center { text-align: center; }
.head { font-family: var(--font-head); } .nowrap { white-space: nowrap; } .grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; align-items: center; gap: .6rem; } .row.wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; }
.stack > * + * { margin-block-start: var(--gap, .9rem); } .stack-s { --gap: .5rem; } .stack-l { --gap: 1.5rem; }
.container { width: min(1180px, 100% - 2rem); margin-inline: auto; }
.grid { display: grid; gap: 1rem; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } .g2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .g3, .g4 { grid-template-columns: 1fr; } }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; padding: .5rem 1.05rem; border: 1px solid transparent;
  border-radius: var(--r-s); background: var(--blue); color: #fff; font-family: var(--font-head); cursor: pointer; text-decoration: none !important;
  transition: background .15s, box-shadow .15s, transform .05s; white-space: nowrap; }
.btn:hover { background: var(--blue-dark); } .btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-loading { opacity: .6; cursor: not-allowed; pointer-events: none; }
.btn.secondary { background: #fff; color: var(--navy); border-color: var(--line); } .btn.secondary:hover { background: var(--light); }
.btn.ghost { background: transparent; color: var(--navy); } .btn.ghost:hover { background: rgba(15,27,45,.06); }
.btn.dark { background: var(--navy); } .btn.dark:hover { background: #1b2d47; }
.btn.danger { background: var(--bad); } .btn.sm { min-height: 32px; padding: .25rem .7rem; font-size: .85rem; } .btn.lg { min-height: 48px; padding: .7rem 1.5rem; font-size: 1.05rem; }
.btn.block { width: 100%; } .btn.icon-only { padding: 0; width: 40px; } .btn.sm.icon-only { width: 32px; }
.btn.is-loading::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- forms ---- */
.field { display: block; } .field > .label { display: block; font-size: .8rem; color: var(--muted); margin-block-end: .3rem; font-family: var(--font-head); letter-spacing: .02em; }
.input, .select, .textarea { width: 100%; min-height: 42px; padding: .55rem .8rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); transition: border-color .15s, box-shadow .15s; }
.select.invalid { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(214, 69, 69, .18); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.input::placeholder { color: #9aa8b5; } .textarea { min-height: 90px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B7B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 1.1rem; padding-inline-end: 2.2rem; }
[dir=rtl] .select { background-position: left .6rem center; }
.input.sm, .select.sm { min-height: 34px; padding: .3rem .6rem; font-size: .9rem; }
.check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; } .check input { width: 18px; height: 18px; accent-color: var(--blue); }
input[type=range] { width: 100%; accent-color: var(--blue); }
.seg { display: inline-flex; padding: 3px; background: var(--light); border: 1px solid var(--line); border-radius: var(--r-s); gap: 2px; width: 100%; }
.seg > button { flex: 1; padding: .45rem .6rem; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: var(--muted); font-family: var(--font-head); font-size: .9rem; }
.seg > button[aria-pressed=true] { background: #fff; color: var(--navy); box-shadow: var(--shadow-s); }
.field-error { color: var(--bad); font-size: .85rem; margin-block-start: .3rem; }

/* ---- surfaces ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem; box-shadow: var(--shadow-s); }
.card.flat { box-shadow: none; } .card.pad-l { padding: 1.6rem; } .card.accent { border-inline-start: 4px solid var(--blue); }
.divider { height: 1px; background: var(--line-2); border: 0; margin: 1rem 0; }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: var(--r-pill); font-size: .72rem; font-family: var(--font-head); letter-spacing: .02em; background: var(--light); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge.measured { background: var(--info-bg); color: var(--blue-dark); border-color: #cfe6f4; } .badge.derived { background: #EEF1F5; color: var(--ink); }
.badge.modelled { background: var(--warn-bg); color: #8a6200; border-color: #f3dfa6; } .badge.assumption { background: #F1EAFB; color: #6a4aa8; border-color: #ddd0f2; }
.badge.good { background: var(--good-bg); color: #1d7a50; border-color: #bfe5d1; } .badge.bad { background: var(--bad-bg); color: #a93232; border-color: #f0c4c4; }
.badge.warn { background: var(--warn-bg); color: #8a6200; border-color: #f3dfa6; }
.alert { display: flex; gap: .7rem; padding: .8rem 1rem; border-radius: var(--r-s); font-size: .92rem; border: 1px solid transparent; }
.alert.info { background: var(--info-bg); border-color: #cfe6f4; } .alert.warn { background: var(--warn-bg); border-color: #f3dfa6; }
.alert.error { background: var(--bad-bg); border-color: #f0c4c4; } .alert.success { background: var(--good-bg); border-color: #bfe5d1; }
.alert > .icon { margin-block-start: .15rem; }
.skeleton { background: linear-gradient(90deg, var(--line-2) 25%, #f4f7fa 37%, var(--line-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px; min-height: 1em; }
@keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
.spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
.bar { height: 8px; background: var(--line-2); border-radius: var(--r-pill); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--blue); border-radius: inherit; transition: width .4s; }
.bar.warn > i { background: var(--warn); } .bar.bad > i { background: var(--bad); }

/* ---- tables ---- */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; } .table th { text-align: start; font-family: var(--font-head); font-weight: 400; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; padding: .5rem .6rem; border-block-end: 1px solid var(--line); }
.table td { padding: .6rem; border-block-end: 1px solid var(--line-2); vertical-align: middle; } .table tr:last-child td { border-block-end: 0; }
.table .num { text-align: end; font-variant-numeric: tabular-nums; } .table-wrap { overflow-x: auto; }

/* ---- tabs / disclosure ---- */
.tabs { display: flex; gap: .15rem; border-block-end: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { padding: .6rem .8rem; border: 0; background: none; color: var(--muted); cursor: pointer; font-family: var(--font-head); font-size: .9rem; border-block-end: 2px solid transparent; white-space: nowrap; display: inline-flex; gap: .35rem; align-items: center; }
.tabs button[aria-selected=true] { color: var(--navy); border-block-end-color: var(--blue); } .tabs button:hover { color: var(--navy); }
details.disc > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; } details.disc > summary::-webkit-details-marker { display: none; }
details.disc[open] > summary .chev { transform: rotate(180deg); }

/* ---- overlays ---- */
.toasts { position: fixed; inset-block-end: 1rem; inset-inline-end: 1rem; z-index: 4000; display: grid; gap: .5rem; max-width: min(380px, calc(100vw - 2rem)); }
.toast { background: var(--navy); color: #fff; padding: .75rem 1rem; border-radius: var(--r-s); box-shadow: var(--shadow-l); display: flex; gap: .6rem; animation: rise .2s ease; }
.toast.error { background: #8c2a2a; } .toast.success { background: #1d6b48; } @keyframes rise { from { transform: translateY(8px); opacity: 0 } }
dialog.modal { border: 0; border-radius: var(--r-l); padding: 0; width: min(520px, calc(100vw - 2rem)); box-shadow: var(--shadow-l); color: var(--text); }
dialog.modal.wide { width: min(1180px, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); display: flex; flex-direction: column; } dialog.modal.wide .m-body { overflow: auto; }
.cmp-wrap { overflow-x: auto; } .cmp { min-width: 640px; } .cmp th[scope=row] { font-weight: 500; text-align: start; position: sticky; inset-inline-start: 0; background: var(--surface, #fff); min-width: 11rem; } .cmp td { text-align: center; } .cmp td.best { background: var(--good-bg); color: var(--good); } .cmp-group th { background: var(--light); font-family: var(--font-head); text-align: start; letter-spacing: .02em; }
dialog.modal::backdrop { background: rgba(15,27,45,.55); } dialog.modal .m-head { padding: 1.1rem 1.3rem .2rem; } dialog.modal .m-body { padding: .6rem 1.3rem 1rem; } dialog.modal .m-foot { padding: .8rem 1.3rem 1.2rem; display: flex; gap: .6rem; justify-content: flex-end; }
[data-tip] { position: relative; } [data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; z-index: 50; inset-block-end: calc(100% + 6px); inset-inline-start: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; padding: .4rem .6rem; border-radius: 6px; font-size: .78rem; width: max-content; max-width: 260px; white-space: normal; line-height: 1.35; box-shadow: var(--shadow); font-family: var(--font-body); }
.menu { position: relative; } .menu > summary { list-style: none; cursor: pointer; } .menu > summary::-webkit-details-marker { display: none; }
.menu .menu-list { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-l); padding: .35rem; z-index: 3000; }
.menu .menu-list a, .menu .menu-list button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border: 0; background: none; border-radius: 8px; color: var(--ink); text-align: start; cursor: pointer; text-decoration: none; }
.menu .menu-list a:hover, .menu .menu-list button:hover { background: var(--light); } .menu .menu-sep { height: 1px; background: var(--line-2); margin: .3rem 0; }

/* ---- app shell ---- */
.topbar { height: var(--topbar-h); background: #fff; border-block-end: 1px solid var(--line); display: flex; align-items: center; gap: 1rem; padding-inline: 1rem; position: sticky; top: 0; z-index: 1500; }
.topbar .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none !important; } .topbar .brand img { height: 26px; display: block; }
.topbar .brand small { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: .35rem; } .topbar .brand small img { height: 14px; opacity: .85; }
.topbar nav { display: flex; gap: .2rem; } .topbar nav a { padding: .4rem .7rem; border-radius: 8px; color: var(--ink); font-family: var(--font-head); font-size: .92rem; text-decoration: none; } .topbar nav a:hover, .topbar nav a[aria-current] { background: var(--light); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-size: .85rem; }
.credit-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .7rem; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: .82rem; color: var(--ink); text-decoration: none !important; background: #fff; }
.credit-chip .bar { width: 52px; height: 6px; }
.footer { padding: 2rem 0; color: var(--muted); font-size: .85rem; } .footer a { color: var(--muted); }
.page { padding-block: 1.6rem 3rem; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-block-end: 1.2rem; flex-wrap: wrap; }
.stat { padding: 1rem 1.1rem; } .stat .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-family: var(--font-head); } .stat .v { font-family: var(--font-head); font-size: 1.7rem; color: var(--navy); line-height: 1.2; margin-block-start: .2rem; } .stat .n { color: var(--muted); font-size: .82rem; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 70px; } .spark i { flex: 1; background: var(--blue); opacity: .75; border-radius: 3px 3px 0 0; min-height: 3px; }

/* ---- auth / marketing ---- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.05fr); background: #fff; }
.auth-brand { background: var(--navy); color: #fff; padding: 2.5rem 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-brand::before { content: ""; position: absolute; inset-inline-end: -90px; top: 18%; width: 340px; height: 340px; border-radius: 50%; background: var(--dna); opacity: .9; }
.auth-brand::after { content: ""; position: absolute; inset-inline-end: 120px; top: 12%; width: 130px; height: 130px; border-radius: 50%; background: var(--dna); opacity: .7; box-shadow: 160px 250px 0 -34px var(--dna), 90px 470px 0 -58px var(--dna); }
.auth-brand > * { position: relative; z-index: 1; } .auth-brand h2 { color: #fff; font-size: 2rem; max-width: 18ch; } .auth-brand p { color: var(--mist); max-width: 38ch; }
.auth-brand .by { display: flex; align-items: center; gap: .5rem; color: var(--mist); font-size: .85rem; } .auth-brand .by img { height: 22px; }
.auth-main { display: grid; place-items: center; padding: 2rem; } .auth-card { width: min(420px, 100%); }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-brand { display: none; } }
.hero { background: var(--navy); color: #fff; padding: 4.5rem 0 5rem; position: relative; overflow: hidden; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.5rem); max-width: 16ch; } .hero p.lead { color: var(--mist); font-size: 1.2rem; max-width: 52ch; }
.hero .dots { position: absolute; inset-inline-end: 4%; top: 12%; width: 360px; height: 360px; pointer-events: none; opacity: .95; } .hero .dots i { position: absolute; border-radius: 50%; background: var(--dna); }
.section { padding: 4rem 0; } .section.alt { background: #fff; } .section h2 { font-size: 2rem; } .kicker { color: var(--blue-dark); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; margin-block-end: .6rem; }
.step-n { width: 38px; height: 38px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: var(--font-head); margin-block-end: .8rem; }
.feature .icon-wrap { width: 44px; height: 44px; border-radius: 12px; background: var(--info-bg); color: var(--blue-dark); display: grid; place-items: center; margin-block-end: .8rem; } .feature .icon-wrap .icon { width: 22px; height: 22px; }
.plan { display: flex; flex-direction: column; gap: .8rem; } .plan.featured { border: 2px solid var(--blue); box-shadow: var(--shadow); } .plan .price { font-family: var(--font-head); font-size: 2rem; color: var(--navy); } .plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; } .plan li { display: flex; gap: .5rem; align-items: flex-start; } .plan li .icon { color: var(--good); margin-block-start: .15rem; }
.shot { border-radius: var(--r-l); border: 1px solid var(--line); box-shadow: var(--shadow-l); overflow: hidden; background: #fff; } .shot img { display: block; width: 100%; }
.faq details { border-block-end: 1px solid var(--line); padding: 1rem 0; } .faq summary { cursor: pointer; font-family: var(--font-head); font-size: 1.05rem; }

/* ---- city picker ---- */
.city { display: flex; flex-direction: column; gap: .5rem; text-align: start; width: 100%; cursor: pointer; transition: transform .1s, box-shadow .15s, border-color .15s; font: inherit; }
.city:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue); } .city:disabled { opacity: .55; cursor: not-allowed; }

/* ---- workspace ---- */
.ws { display: grid; grid-template-columns: var(--panel-w) 1fr; height: calc(100vh - var(--topbar-h)); position: relative; background: var(--light); }
.ws.collapsed { grid-template-columns: 0 1fr; } .ws-panel { background: #fff; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; z-index: 1100; }
.ws.collapsed .ws-panel { visibility: hidden; } .ws-map { position: relative; min-width: 0; } #map { position: absolute; inset: 0; background: #e9eef2; }
.ws-scroll { flex: 1; overflow-y: auto; padding: 1rem 1.1rem 1.4rem; scrollbar-width: thin; } .ws-head { padding: .9rem 1.1rem .5rem; border-block-end: 1px solid var(--line-2); }
.stepper { display: flex; gap: .4rem; align-items: center; margin-block-end: .2rem; } .stepper .s { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted); font-family: var(--font-head); }
.stepper .s b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--line-2); font-weight: 400; font-size: .75rem; } .stepper .s.on { color: var(--navy); } .stepper .s.on b { background: var(--blue); color: #fff; } .stepper .s.done b { background: var(--good); color: #fff; } .stepper .sep { flex: 1; height: 1px; background: var(--line); }
.tool { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .4rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; font-family: var(--font-head); font-size: .82rem; color: var(--ink); text-align: center; }
.tool:hover { border-color: var(--blue); } .tool[aria-pressed=true] { border-color: var(--blue); background: var(--info-bg); color: var(--blue-dark); } .tool .icon { width: 22px; height: 22px; }
.ws-fab { position: absolute; z-index: 1000; inset-block-start: 12px; inset-inline-start: 12px; } .map-ctl { position: absolute; z-index: 1000; display: grid; gap: 8px; }
.map-ctl.tr { inset-block-start: 12px; inset-inline-end: 12px; } .map-ctl.bl { inset-block-end: 24px; inset-inline-start: 12px; } .map-ctl.br { inset-block-end: 24px; inset-inline-end: 12px; }
.map-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: .6rem .7rem; }
.search { position: relative; } .search .input { padding-inline-start: 2.3rem; } .search > .icon { position: absolute; inset-inline-start: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.suggest { position: absolute; z-index: 1300; inset-inline: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-l); max-height: 320px; overflow: auto; }
.suggest button { display: flex; width: 100%; gap: .6rem; align-items: center; padding: .55rem .8rem; border: 0; background: none; cursor: pointer; text-align: start; } .suggest button:hover, .suggest button[aria-selected=true] { background: var(--light); } .suggest .grp { padding: .4rem .8rem 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.run-bar { position: sticky; inset-block-end: 0; background: linear-gradient(transparent, #fff 24%); padding: 1rem 0 .2rem; }

/* results */
.verdict { border-radius: var(--r); padding: 1rem 1.1rem; color: #fff; background: var(--navy); } .verdict.strong, .verdict.promising { background: #1d7a50; } .verdict.mixed { background: #9a6d00; } .verdict.weak { background: #a93232; } .verdict.insufficient_data { background: var(--grey); }
.verdict h3 { color: #fff; margin: .3rem 0 .2rem; font-size: 1.25rem; } .verdict .score { font-family: var(--font-head); font-size: 2.4rem; line-height: 1; } .verdict .score small { font-size: 1rem; opacity: .8; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; } .kpi { padding: .75rem .85rem; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; } .kpi .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-family: var(--font-head); } .kpi .v { font-family: var(--font-head); font-size: 1.35rem; color: var(--navy); } .kpi .n { font-size: .76rem; color: var(--muted); }
.mrow { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; padding: .6rem 0; border-block-end: 1px solid var(--line-2); align-items: center; } .mrow:last-child { border-block-end: 0; } .mrow .l { color: var(--ink); } .mrow .val { font-family: var(--font-head); color: var(--navy); text-align: end; font-variant-numeric: tabular-nums; } .mrow .meta { grid-column: 1 / -1; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.stm { display: flex; gap: .6rem; padding: .55rem 0; } .stm .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-block-start: .5rem; flex: none; } .stm.limitation .dot { background: var(--warn); } .stm.recommendation .dot { background: var(--good); } .stm .ev { margin-inline-start: auto; flex: none; }
.evidence { background: var(--light); border: 1px solid var(--line); border-radius: var(--r-s); padding: .5rem .7rem; font-size: .82rem; margin-block: .2rem .5rem; } .evidence div { display: flex; justify-content: space-between; gap: .6rem; padding: .15rem 0; }
.zrow { display: grid; grid-template-columns: 28px 1fr auto; gap: .7rem; align-items: center; padding: .6rem .5rem; border-radius: var(--r-s); cursor: pointer; border: 1px solid transparent; } .zrow:hover { background: var(--light); } .zrow.on { border-color: var(--blue); background: var(--info-bg); } .zrow .rk { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: .8rem; font-family: var(--font-head); }
.score-pill { font-family: var(--font-head); padding: .15rem .6rem; border-radius: var(--r-pill); background: var(--info-bg); color: var(--blue-dark); } .fitrow { display: grid; grid-template-columns: 1fr 52px; gap: .2rem .6rem; align-items: center; padding: .4rem 0; cursor: pointer; } .fitrow .stack-bar { height: 10px; border-radius: 99px; background: var(--line-2); display: flex; overflow: hidden; grid-column: 1; } .fitrow .stack-bar i:nth-child(1) { background: var(--blue); } .fitrow .stack-bar i:nth-child(2) { background: var(--navy); } .fitrow .stack-bar i:nth-child(3) { background: #7FB8DC; }
.chat { display: flex; flex-direction: column; gap: .6rem; } .bubble { padding: .6rem .8rem; border-radius: 14px; max-width: 92%; font-size: .92rem; } .bubble.me { background: var(--blue); color: #fff; align-self: flex-end; border-end-end-radius: 4px; } .bubble.ai { background: var(--light); border: 1px solid var(--line); align-self: flex-start; border-end-start-radius: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; } .chipbtn { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; cursor: pointer; font-size: .82rem; } .chipbtn:hover { border-color: var(--blue); color: var(--blue-dark); }
.legend { display: grid; gap: .3rem; font-size: .8rem; } .legend .li { display: flex; align-items: center; gap: .5rem; } .legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.pin-marker { filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); } .num-marker { background: var(--navy); color: #fff; border: 2px solid #fff; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; font: 11px var(--font-head); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.leaflet-container { font-family: var(--font-body); } .leaflet-popup-content-wrapper { border-radius: 12px; } .leaflet-popup-content { margin: .7rem .9rem; } .leaflet-tooltip { font-family: var(--font-body); border-radius: 8px; }
.leaflet-draw-toolbar a { background-color: #fff; } .leaflet-control-zoom a { color: var(--ink); }
@media (max-width: 900px) { .ws { grid-template-columns: 1fr; grid-template-rows: 1fr minmax(0, 52vh); } .ws .ws-map { order: 1; } .ws-panel { order: 2; border-inline-end: 0; border-block-start: 1px solid var(--line); } .ws.collapsed { grid-template-rows: 1fr 0; } .topbar nav, .credit-chip .t { display: none; } }

/* ---- invoices / print ---- */
@media print { body { background: #fff; } .topbar, .footer, .noprint { display: none !important; } .card { box-shadow: none; border-color: #ccc; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---- results tabs: every tab visible (2 rows of 4), icon above label ---- */
.tabs.grid-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; overflow: visible; border-block-end: 1px solid var(--line); padding-block-end: .6rem; }
.tabs.grid-tabs button { flex-direction: column; gap: .2rem; padding: .5rem .2rem; font-size: .76rem; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; color: var(--ink); }
.tabs.grid-tabs button .icon { width: 22px; height: 22px; color: var(--blue); }
.tabs.grid-tabs button:hover { border-color: var(--blue); }
.tabs.grid-tabs button[aria-selected=true] { background: var(--info-bg); border-color: var(--blue); color: var(--blue-dark); }

/* ---- progress for long-running work ---- */
.progress { height: 6px; background: var(--line-2); border-radius: var(--r-pill); overflow: hidden; position: relative; }
.progress::after { content: ""; position: absolute; inset-block: 0; width: 35%; background: var(--blue); border-radius: inherit; animation: progress-slide 1.4s ease-in-out infinite; }
@keyframes progress-slide { from { inset-inline-start: -35%; } to { inset-inline-start: 100%; } }
.progress-card { display: grid; gap: .9rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: var(--shadow); }
.progress-card h3 { margin: 0; font-size: 1.05rem; }
.pstep { display: flex; gap: .55rem; align-items: center; color: var(--muted); font-size: .92rem; }
.pstep .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
.pstep.on { color: var(--navy); font-weight: 600; } .pstep.on .dot { background: var(--blue); box-shadow: 0 0 0 4px var(--info-bg); }
.pstep.done { color: var(--good); } .pstep.done .dot { background: var(--good); }

/* ---- floating assistant over the map ---- */
.assistant-fab { position: absolute; z-index: 1000; inset-block-end: 110px; inset-inline-end: 12px; border-radius: var(--r-pill); box-shadow: var(--shadow-l); }
.assistant { position: absolute; z-index: 1200; inset-block-end: 12px; inset-inline-end: 12px; width: min(390px, calc(100% - 24px)); height: min(68vh, 560px); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-l); display: flex; flex-direction: column; overflow: hidden; }
.assistant[hidden] { display: none; }
.assistant-head { display: flex; align-items: center; justify-content: space-between; padding: .6rem .8rem; background: var(--navy); color: #fff; } .assistant-head .btn { color: #fff; }
.assistant-body { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .7rem; }

/* ---- charts: marks carry the colour, text stays in text colours; thin bars, 4px rounded data end, hairline baseline ---- */
.viz { margin: 0 0 1.4rem; padding: .9rem 1rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: #fcfcfb; }
.viz-head { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; margin-block-end: .7rem; }
.vbars, .vgroups { display: grid; gap: .45rem; }
.vbar { display: grid; grid-template-columns: minmax(5.2rem, 34%) 1fr; gap: .6rem; align-items: center; font-size: .82rem; border-radius: 6px; padding-block: 2px; outline-offset: 2px; }
.vbar:hover, .vbar:focus-visible { background: #f0efec; }
.vlabel { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtrack { display: flex; align-items: center; gap: .45rem; min-width: 0; border-inline-start: 1px solid #c3c2b7; padding-inline-start: 1px; }
.vfill { display: block; height: 14px; border-start-end-radius: 4px; border-end-end-radius: 4px; flex: none; min-width: 2px; }
.vval { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vgroup { display: grid; gap: .2rem; padding-block: .3rem; } .vgroup + .vgroup { border-block-start: 1px solid #e1e0d9; }
.vgtitle { font-family: var(--font-head); font-size: .85rem; color: var(--navy); }
.vlegend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-block-end: .6rem; } .vlegend span { display: inline-flex; align-items: center; gap: .35rem; }
.vsw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.vdonut-wrap { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.vdonut-box { position: relative; width: 150px; height: 150px; flex: none; } .vdonut { width: 100%; height: 100%; display: block; } .vdonut circle { transition: opacity .15s; cursor: default; outline: none; }
.vdonut-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; } .vdonut-mid b { font-family: var(--font-head); font-size: 1.25rem; color: var(--navy); line-height: 1.1; }
.vkey { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .84rem; flex: 1; min-width: 9rem; }
.vkey li { display: grid; grid-template-columns: 12px 1fr auto; gap: .5rem; align-items: center; padding: 2px 4px; border-radius: 6px; outline-offset: 2px; } .vkey li:hover, .vkey li:focus-visible { background: #f0efec; } .vkey b { font-variant-numeric: tabular-nums; }
.viz-table { font-size: .82rem; }
.viz-tip { position: fixed; z-index: 3000; pointer-events: none; background: var(--navy); color: #fff; border-radius: 8px; padding: .5rem .7rem; font-size: .8rem; box-shadow: var(--shadow-l); max-width: 260px; }
.viz-tip[hidden] { display: none; } .viz-tip-title { font-family: var(--font-head); margin-block-end: .2rem; } .viz-tip-row { display: flex; justify-content: space-between; gap: 1rem; } .viz-tip-row b { font-weight: 600; }
@media print { .viz-head .btn { display: none; } }

/* ---- what-if sliders ---- */
.whatif-row { display: grid; gap: .15rem; padding-block: .25rem; font-size: .88rem; }
.whatif-row input[type=range] { width: 100%; accent-color: var(--blue); }
.whatif-row b { font-variant-numeric: tabular-nums; color: var(--navy); }

/* ---- language switch ---- */
.lang-switch { font-family: var(--font-head); font-size: .85rem; color: var(--muted); padding: .25rem .6rem; border: 1px solid var(--line); border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; }
.lang-switch:hover { color: var(--navy); border-color: var(--blue); }
.auth-lang { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; z-index: 2; } .auth-main { position: relative; }

/* ---- right-to-left (Arabic) ---- */
[dir=rtl] { --font-body: "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif; --font-head: "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif; }
[dir=rtl] * { letter-spacing: normal !important; text-transform: none !important; }            /* Arabic letters join: spacing and capitals break words */
[dir=rtl] body { line-height: 1.7; }
[dir=rtl] .icon-dir { transform: scaleX(-1); }
[dir=rtl] .leaflet-container { direction: ltr; }                                                   /* map controls keep their usual places */
[dir=rtl] .leaflet-popup-content, [dir=rtl] .leaflet-tooltip { direction: rtl; text-align: start; }
[dir=rtl] .vdonut-mid, [dir=rtl] .viz-tip { direction: rtl; }
[dir=rtl] .vval, [dir=rtl] .kpi .v, [dir=rtl] .stat .v { unicode-bidi: plaintext; }                  /* a number keeps its own reading order inside right-to-left text */

/* ---- separate map legends (catchment/competition, nearby destinations) ---- */
#legends { display: grid; gap: 8px; max-width: 220px; } .legend-title { font-family: var(--font-head); font-size: .75rem; color: var(--muted); margin-block-end: .25rem; }