/* Basira — UI Theme */
Ocean-navy palette with teal-cyan accents.
Clean lines, professional typography, soft rounded surfaces. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Instrument+Sans:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap');
:root {
/* Surfaces — deep ocean navy (terraink-inspired) */
--bg-0: #04080c;
--bg-1: #0a1824;
--bg-2: #0d1a27;
--bg-3: #11222f;
--bg-4: #1c3345;
--bg-glass: rgba(10,24,36,.92);
/* Text — cool blue-whites */
--t-0: #eaf5fd;
--t-1: #c2d8e7;
--t-2: #8fb0c6;
--t-3: #6a9ab8;
--t-4: #4e6c7e;
/* Borders — soft, institutional */
--bd-0: rgba(138,176,198,.06);
--bd-1: rgba(138,176,198,.12);
--bd-2: rgba(138,176,198,.20);
--bd-3: rgba(138,176,198,.32);
/* Accent — teal-cyan (terraink signature) */
--blue: #2f8eaf;
--blue-light: #4ca9cd;
--blue-bright: #5eaed4;
--blue-bg: rgba(47,142,175,.12);
--blue-bd: rgba(47,142,175,.30);
/* Status — harmonized with teal base */
--ok: #56f8b3;
--ok-bg: rgba(86,248,179,.12);
--warn: #f5c56b;
--warn-bg: rgba(245,197,107,.12);
--err: #f87171;
--err-bg: rgba(248,113,113,.12);
/* Layer colors — muted, complementary */
--ly-mobility: #f87171;
--ly-landuse: #f5c56b;
--ly-environment: #56f8b3;
--ly-services: #c8aeff;
--font: 'Instrument Sans', system-ui, -apple-system, sans-serif;
--font-display: 'Bebas Neue', 'Instrument Sans', sans-serif;
--mono: 'Spline Sans Mono', ui-monospace, monospace;
--h-header: 52px;
--w-sidebar: 380px;
--r-s: 8px;
--r-m: 12px;
--r-l: 16px;
--r-pill: 999px;
}
/* ═══════════════════════════════════════════════════════════
LIGHT THEME — opt-in via [data-theme="light"] on
Desaturated cool palette, flat surfaces, same teal accent.
═══════════════════════════════════════════════════════════ */
[data-theme="light"]{
--bg-0: #f4f7fb;
--bg-1: #ffffff;
--bg-2: #f0f4f9;
--bg-3: #e4ecf4;
--bg-4: #d6e0ea;
--bg-glass: rgba(255,255,255,.92);
--t-0: #0a1824;
--t-1: #223447;
--t-2: #4a6479;
--t-3: #6e869b;
--t-4: #94a6b7;
--bd-0: rgba(47,82,115,.08);
--bd-1: rgba(47,82,115,.14);
--bd-2: rgba(47,82,115,.22);
--bd-3: rgba(47,82,115,.34);
--blue: #1e6e95;
--blue-light: #2d8bb5;
--blue-bright: #4ca9cd;
--blue-bg: rgba(30,110,149,.10);
--blue-bd: rgba(30,110,149,.28);
--ok: #10a664;
--ok-bg: rgba(16,166,100,.12);
--warn: #c48414;
--warn-bg: rgba(196,132,20,.12);
--err: #c93434;
--err-bg: rgba(201,52,52,.10);
}
/* Light-theme Leaflet adjustments */
[data-theme="light"] .leaflet-container{background:#f4f7fb!important}
[data-theme="light"] .leaflet-control-zoom a{background:#fff!important;color:#0a1824!important}
[data-theme="light"] .leaflet-popup-content-wrapper{background:#fff!important;color:#0a1824!important;border-color:rgba(47,82,115,.22)!important}
[data-theme="light"] .leaflet-popup-tip{background:#fff!important}
[data-theme="light"] .leaflet-control-attribution{background:rgba(255,255,255,.9)!important;color:#6e869b!important}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family:var(--font);
color:var(--t-1);
background:var(--bg-0);
overflow:hidden;
font-size:14px;
letter-spacing:.005em;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd-2);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--bd-3)}
/* ═══════════════════════════════════════════════
APP SHELL — grid: [header header] / [sidebar map]
═══════════════════════════════════════════════ */
.app-shell{
display:grid;
grid-template-rows:var(--h-header) 1fr;
grid-template-columns:var(--w-sidebar) 1fr;
grid-template-areas:"header header" "sidebar map";
height:100vh;height:100dvh;
}
/* ═══════════════════════════════════════════════
HEADER
═══════════════════════════════════════════════ */
.app-header{
grid-area:header;
display:flex;align-items:center;gap:14px;
padding:0 16px;
background:var(--bg-1);
border-bottom:1px solid var(--bd-1);
z-index:100;
user-select:none;-webkit-user-select:none;
}
.app-header input,.app-header textarea{user-select:text;-webkit-user-select:text}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-logo{
width:32px;height:32px;border-radius:var(--r-m);
background:var(--blue);
display:flex;align-items:center;justify-content:center;
color:#eaf5fd;
}
.brand-logo svg{width:18px;height:18px}
.brand-name{
font-family:var(--font-display);
font-size:1.45rem;font-weight:400;
color:var(--t-0);letter-spacing:.05em;
line-height:1;
}
.brand-tag{
font-family:var(--mono);font-size:.55rem;font-weight:500;
color:var(--t-3);
padding:2px 8px;border-radius:var(--r-pill);
border:1px solid var(--bd-1);
letter-spacing:.08em;
text-transform:uppercase;
}
.header-search{flex:0 1 440px;position:relative}
.header-search input{
width:100%;height:32px;padding:0 36px 0 12px;
background:var(--bg-2);
border:1px solid var(--bd-1);
border-radius:var(--r-m);
font-size:.82rem;color:var(--t-0);
outline:none;
transition:border-color .15s;
}
.header-search input::placeholder{color:var(--t-4)}
.header-search input:focus{border-color:var(--blue-bd)}
.search-btn{
position:absolute;right:3px;top:3px;width:26px;height:26px;
border-radius:var(--r-s);
background:transparent;
display:flex;align-items:center;justify-content:center;
color:var(--t-3);
transition:color .15s,background .15s;
}
.search-btn:hover{color:var(--t-0);background:var(--bg-3)}
.search-dropdown{
position:absolute;top:calc(100% + 4px);left:0;right:0;
background:var(--bg-2);
border:1px solid var(--bd-2);
border-radius:var(--r-m);
box-shadow:0 8px 24px rgba(0,0,0,.50);
max-height:260px;overflow-y:auto;z-index:200;display:none;
}
.search-dropdown.open{display:block}
.search-item{
padding:9px 12px;font-size:.80rem;color:var(--t-1);
cursor:pointer;border-bottom:1px solid var(--bd-0);
transition:background .1s;
}
.search-item:last-child{border-bottom:none}
.search-item:hover{background:var(--bg-3);color:var(--t-0)}
.search-item .sub{display:block;font-size:.62rem;color:var(--t-3);font-family:var(--mono);margin-top:2px}
.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
.header-btn{
height:30px;padding:0 12px;
border-radius:var(--r-m);
background:var(--bg-2);
border:1px solid var(--bd-1);
font-family:var(--mono);font-size:.64rem;font-weight:500;
text-transform:uppercase;letter-spacing:.06em;
color:var(--t-2);
display:inline-flex;align-items:center;gap:6px;
transition:background .15s,color .15s,border-color .15s;
white-space:nowrap;
}
.header-btn:hover{background:var(--bg-3);color:var(--t-0);border-color:var(--bd-2)}
.header-btn.active{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-bd)}
.header-btn svg{width:13px;height:13px;flex-shrink:0}
.header-btn.icon-only{width:30px;padding:0;justify-content:center}
.mobile-menu{display:none}
/* ═══════════════════════════════════════════════
SIDEBAR
═══════════════════════════════════════════════ */
.sidebar{
grid-area:sidebar;
background:var(--bg-1);
border-right:1px solid var(--bd-1);
overflow-y:auto;
z-index:90;
scrollbar-width:thin;
}
.welcome{
padding:40px 24px;text-align:center;
}
/* Minimal empty state — replaces welcome block */
.empty-state{padding:16px 18px}
.empty-hint{
display:flex;align-items:center;gap:8px;
padding:10px 12px;margin-bottom:16px;
background:var(--bg-2);
border:1px dashed var(--bd-2);
border-radius:var(--r-m);
font-size:.78rem;color:var(--t-2);
}
.empty-hint svg{color:var(--blue);flex-shrink:0}
.empty-state .welcome-history{margin-top:0;padding-top:0;border-top:none}
.welcome-icon{
width:56px;height:56px;border-radius:var(--r-m);
background:var(--bg-2);
border:1px solid var(--bd-1);
display:flex;align-items:center;justify-content:center;
margin:0 auto 16px;
color:var(--blue);
}
.welcome h3{font-size:1rem;font-weight:600;margin-bottom:6px;color:var(--t-0)}
.welcome p{font-size:.82rem;color:var(--t-3);line-height:1.55;max-width:280px;margin:0 auto 20px}
.welcome-btn{
display:inline-flex;align-items:center;gap:8px;
padding:12px 22px;border-radius:var(--r-m);
background:var(--blue);
color:#eaf5fd;
font-family:var(--mono);font-size:.68rem;font-weight:600;
text-transform:uppercase;letter-spacing:.08em;
transition:background .15s;
}
.welcome-btn:hover{background:var(--blue-light)}
.welcome-btn svg{width:14px;height:14px}
.welcome-hints{
list-style:none;margin-top:24px;text-align:left;
font-size:.72rem;color:var(--t-3);
}
.welcome-hints li{padding:5px 0;display:flex;gap:8px}
.welcome-hints li::before{content:"·";color:var(--blue);font-weight:700}
/* Numbered steps — replaces plain hints */
.welcome-steps{
list-style:none;margin-top:24px;text-align:start;
display:flex;flex-direction:column;gap:10px;
}
.welcome-steps li{
display:flex;align-items:flex-start;gap:10px;
font-size:.78rem;color:var(--t-2);line-height:1.5;
}
.welcome-steps .step-n{
flex-shrink:0;
width:22px;height:22px;
border-radius:var(--r-pill);
background:var(--blue-bg);
border:1px solid var(--blue-bd);
color:var(--blue);
font-family:var(--mono);font-size:.68rem;font-weight:700;
display:flex;align-items:center;justify-content:center;
}
/* Panels (accordion sections) */
.panel{border-bottom:1px solid var(--bd-0)}
.panel:last-child{border-bottom:none}
.panel-header{
display:flex;align-items:center;gap:10px;
padding:12px 16px;
font-family:var(--mono);font-size:.64rem;font-weight:600;
text-transform:uppercase;letter-spacing:.10em;
color:var(--t-3);
cursor:pointer;user-select:none;-webkit-user-select:none;
transition:color .1s,background .1s;
}
.panel-header:hover{color:var(--t-1);background:var(--bg-2)}
.panel-header.open{color:var(--t-0);background:var(--bg-2)}
.panel-header svg{width:14px;height:14px;flex-shrink:0;opacity:.65}
.panel-header.open svg:first-child{opacity:1;color:var(--blue)}
.panel-header span{flex:1}
.panel-header .chev{width:12px;height:12px;opacity:.45;transition:transform .2s}
.panel-header.open .chev{transform:rotate(180deg);opacity:.8}
/* Inline help hint inside panels */
.panel-hint{
font-size:.7rem;color:var(--t-3);
margin-bottom:10px;line-height:1.5;
}
/* Info/help button */
.help-tip{
width:22px;height:22px;padding:0;
border-radius:var(--r-pill);
color:var(--t-3);
display:inline-flex;align-items:center;justify-content:center;
transition:color .12s,background .12s;
flex-shrink:0;
}
.help-tip:hover{color:var(--blue);background:var(--blue-bg)}
.help-tip svg{width:13px;height:13px}
/* Help popup */
.help-popup{
position:fixed;inset:0;z-index:9100;
display:flex;align-items:center;justify-content:center;
background:rgba(11,18,32,.72);
padding:20px;
}
.help-popup.hidden{display:none}
.help-content{
background:var(--bg-1);
border:1px solid var(--bd-2);
border-radius:var(--r-l);
box-shadow:0 16px 48px rgba(0,0,0,.55);
max-width:420px;width:100%;
padding:0;
}
.help-head{
display:flex;align-items:center;gap:10px;
padding:14px 16px;
border-bottom:1px solid var(--bd-0);
}
.help-head svg{width:16px;height:16px;color:var(--blue);flex-shrink:0}
.help-head>span{flex:1;font-weight:600;color:var(--t-0);font-size:.92rem}
.help-close{
width:26px;height:26px;border-radius:var(--r-s);
color:var(--t-3);
display:inline-flex;align-items:center;justify-content:center;
transition:color .12s,background .12s;
}
.help-close:hover{color:var(--t-0);background:var(--bg-3)}
.help-close svg{width:14px;height:14px}
#help-body,#confirm-body{
padding:14px 16px 18px;
font-size:.86rem;color:var(--t-1);line-height:1.6;
}
/* Confirm dialog action row */
.confirm-actions{
display:flex;gap:8px;justify-content:flex-end;
padding:0 16px 16px;
}
[dir="rtl"] .confirm-actions{justify-content:flex-start}
/* Recent areas (welcome + panel) */
.welcome-history{
margin-top:24px;
padding-top:16px;
border-top:1px solid var(--bd-0);
}
.welcome-history:empty{display:none}
.history-head{
font-family:var(--mono);font-size:.58rem;font-weight:600;
text-transform:uppercase;letter-spacing:.10em;
color:var(--t-3);margin-bottom:8px;text-align:start;
}
.history-item{
display:flex;align-items:center;gap:10px;
padding:8px 10px;
margin-bottom:4px;
border-radius:var(--r-m);
background:var(--bg-2);
border:1px solid var(--bd-0);
cursor:pointer;
transition:background .12s,border-color .12s;
}
.history-item:hover{background:var(--bg-3);border-color:var(--bd-1)}
.history-item .dot{
width:28px;height:28px;border-radius:var(--r-s);
background:var(--blue-bg);
border:1px solid var(--blue-bd);
display:flex;align-items:center;justify-content:center;
color:var(--blue);flex-shrink:0;
}
.history-item .dot svg{width:14px;height:14px}
.history-item .hi-text{flex:1;min-width:0;overflow:hidden}
.history-item .hi-title{
font-size:.78rem;font-weight:500;color:var(--t-0);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.history-item .hi-sub{
font-family:var(--mono);font-size:.6rem;color:var(--t-3);margin-top:2px;
}
.history-item .hi-sub .score{color:var(--t-1);font-weight:700}
.history-item .hi-remove{
width:26px;height:26px;border-radius:var(--r-s);
color:var(--t-4);
display:inline-flex;align-items:center;justify-content:center;
transition:color .12s,background .12s;
flex-shrink:0;
}
.history-item .hi-remove:hover{color:var(--err);background:var(--err-bg)}
.history-item .hi-remove svg{width:14px;height:14px}
.history-empty{
text-align:center;padding:14px;
font-size:.74rem;color:var(--t-3);
}
/* Language button — always visible */
.lang-btn{font-family:var(--font)!important;font-size:.68rem!important;letter-spacing:0!important}
/* Header menu dropdown */
.header-menu{position:relative}
.dropdown-menu{
position:absolute;top:calc(100% + 6px);right:0;
min-width:220px;
background:var(--bg-1);
border:1px solid var(--bd-2);
border-radius:var(--r-m);
box-shadow:0 8px 28px rgba(0,0,0,.55);
padding:4px;
z-index:200;
}
[dir="rtl"] .dropdown-menu{right:auto;left:0}
.dropdown-menu .menu-item{
width:100%;
display:flex;align-items:center;gap:10px;
padding:10px 12px;
border-radius:var(--r-s);
font-size:.82rem;color:var(--t-1);
text-align:start;justify-content:flex-start;
transition:background .12s,color .12s;
}
.dropdown-menu .menu-item>span{flex:1;text-align:start}
.dropdown-menu .menu-item:hover{background:var(--bg-3);color:var(--t-0)}
.dropdown-menu .menu-item svg{width:16px;height:16px;color:var(--t-3);flex-shrink:0}
.dropdown-menu .menu-item:hover svg{color:var(--blue)}
/* ═══════════════════════════════════════════════
MAP FLOATING TOOLBAR (drawing tools)
═══════════════════════════════════════════════ */
.map-toolbar{
position:fixed;
top:calc(var(--h-header) + 16px);
left:calc(var(--w-sidebar) + 12px);
z-index:460;
display:flex;flex-direction:column;gap:2px;
padding:4px;
background:var(--bg-1);
border:1px solid var(--bd-1);
border-radius:var(--r-m);
box-shadow:0 4px 16px rgba(0,0,0,.45);
user-select:none;-webkit-user-select:none;
}
.mt-btn{
position:relative;
width:36px;height:36px;padding:0;
border-radius:var(--r-s);
color:var(--t-2);
display:inline-flex;align-items:center;justify-content:center;
transition:background .12s,color .12s;
}
.mt-btn:hover:not(:disabled){background:var(--bg-3);color:var(--t-0)}
.mt-btn.active{background:var(--blue-bg);color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue-bd)}
.mt-btn:disabled{opacity:.35;cursor:default}
.mt-btn svg{width:18px;height:18px}
.mt-btn .mt-label{
position:absolute;
top:50%;transform:translateY(-50%);
left:calc(100% + 8px);
padding:4px 10px;
white-space:nowrap;
background:var(--bg-3);color:var(--t-0);
border:1px solid var(--bd-2);
border-radius:var(--r-s);
font-family:var(--mono);font-size:.62rem;font-weight:500;
text-transform:uppercase;letter-spacing:.06em;
opacity:0;pointer-events:none;
transition:opacity .12s;
z-index:5;
}
[dir="rtl"] .mt-btn .mt-label{left:auto;right:calc(100% + 8px)}
.mt-btn:hover .mt-label{opacity:1}
.mt-sep{display:block;height:1px;background:var(--bd-1);margin:4px 2px}
@media(max-width:768px){
.map-toolbar{left:12px;top:calc(var(--h-header) + 12px)}
}
[dir="rtl"] .map-toolbar{left:auto;right:calc(var(--w-sidebar) + 12px)}
@media(max-width:768px){
[dir="rtl"] .map-toolbar{right:12px;left:auto}
}
/* Edit-mode vertex handles */
.edit-handle{
border-radius:50%!important;
cursor:grab!important;
}
/* ═══════════════════════════════════════════════
MODALS (Help / About / Preferences)
═══════════════════════════════════════════════ */
.modal{
position:fixed;inset:0;z-index:9200;
display:flex;align-items:center;justify-content:center;
background:rgba(11,18,32,.72);
padding:20px;
}
.modal.hidden{display:none}
.modal-content{
background:var(--bg-1);
border:1px solid var(--bd-2);
border-radius:var(--r-l);
box-shadow:0 20px 60px rgba(0,0,0,.6);
max-width:520px;width:100%;
max-height:85vh;overflow:auto;
}
.modal-head{
position:sticky;top:0;z-index:1;
display:flex;align-items:center;gap:10px;
padding:14px 18px;
border-bottom:1px solid var(--bd-1);
background:var(--bg-1);
}
.modal-head svg{width:18px;height:18px;color:var(--blue);flex-shrink:0}
.modal-head>span{flex:1;font-weight:600;font-size:.98rem;color:var(--t-0)}
.modal-close{
width:28px;height:28px;border-radius:var(--r-s);
color:var(--t-3);
display:inline-flex;align-items:center;justify-content:center;
transition:color .12s,background .12s;
}
.modal-close:hover{color:var(--t-0);background:var(--bg-3)}
.modal-close svg{width:15px;height:15px}
.modal-body{
padding:18px;
font-size:.86rem;color:var(--t-1);line-height:1.65;
}
.modal-body p{margin-bottom:10px}
.modal-body p:last-child{margin-bottom:0}
.help-steps{
list-style:none;display:flex;flex-direction:column;gap:14px;
margin-bottom:20px;
}
.help-steps li{
display:flex;gap:12px;
}
.help-steps .hs-num{
flex-shrink:0;
width:28px;height:28px;
border-radius:var(--r-pill);
background:var(--blue-bg);
border:1px solid var(--blue-bd);
color:var(--blue);
font-family:var(--mono);font-size:.74rem;font-weight:700;
display:flex;align-items:center;justify-content:center;
}
.help-steps .hs-title{
font-weight:600;color:var(--t-0);margin-bottom:2px;
}
.help-steps .hs-body{color:var(--t-2);font-size:.8rem}
.help-sec-h{
font-family:var(--mono);font-size:.66rem;font-weight:600;
text-transform:uppercase;letter-spacing:.10em;
color:var(--t-3);
margin:12px 0 8px;
}
.kbd-table{
width:100%;border-collapse:collapse;font-size:.76rem;
}
.kbd-table td{
padding:6px 8px;
border-bottom:1px solid var(--bd-0);
}
.kbd-table td:first-child{width:30%}
.kbd-table td:last-child{color:var(--t-2)}
kbd{
display:inline-block;
padding:2px 8px;
background:var(--bg-2);
border:1px solid var(--bd-2);
border-bottom-width:2px;
border-radius:var(--r-s);
font-family:var(--mono);font-size:.72rem;
color:var(--t-0);
}
.about-meta{
display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
margin-top:14px;font-size:.82rem;
}
.about-meta dt{
font-family:var(--mono);font-size:.62rem;font-weight:600;
text-transform:uppercase;letter-spacing:.08em;
color:var(--t-3);align-self:center;
}
.about-meta dd{color:var(--t-1)}
.pref-row{
display:flex;align-items:center;justify-content:space-between;
padding:10px 0;
border-bottom:1px solid var(--bd-0);
}
.pref-row:last-child{border-bottom:none}
.pref-row label{font-size:.84rem;color:var(--t-1);flex:1}
.pref-row .select{max-width:180px}
/* ═══════════════════════════════════════════════
INSTITUTIONAL FOOTER (under status bar)
═══════════════════════════════════════════════ */
.site-footer{
position:fixed;bottom:22px;left:var(--w-sidebar);right:0;
height:0;pointer-events:none;
/* Actually: put the footer ABOVE the status bar only on desktop — or inline with it */
display:none;
}
/* Desktop: fold footer into a compact band just above the status bar */
@media(min-width:769px){
.status-bar{height:28px}
.site-footer{
display:flex;align-items:center;justify-content:space-between;
left:var(--w-sidebar);right:0;
bottom:28px;
height:22px;padding:0 14px;
background:var(--bg-1);
border-top:1px solid var(--bd-0);
font-family:var(--mono);font-size:.56rem;
color:var(--t-4);
z-index:39;pointer-events:auto;
user-select:none;-webkit-user-select:none;
}
.site-footer a{color:var(--t-3);text-decoration:none;transition:color .12s}
.site-footer a:hover{color:var(--blue)}
.sf-right{display:flex;gap:10px;align-items:center}
.sf-sep{color:var(--t-4)}
[dir="rtl"] .site-footer{left:0;right:var(--w-sidebar)}
}
@media(max-width:768px){
.site-footer{display:none}
}
/* Clean what-if number field */
.num-field{
display:flex;align-items:center;gap:8px;
padding:6px 10px;
border-radius:var(--r-m);
background:var(--bg-2);
border:1px solid var(--bd-0);
font-size:.76rem;color:var(--t-2);
}
.num-field span{flex:1}
.num-field .num-input{width:58px}
.panel-body{
display:grid;grid-template-rows:0fr;
overflow:hidden;
transition:grid-template-rows .25s ease;
}
.panel-body.open{grid-template-rows:1fr}
.panel-inner{min-height:0;overflow:hidden;padding:0 16px}
.panel-body.open .panel-inner{padding-bottom:16px}
/* ═══════════════════════════════════════════════
FORM CONTROLS
═══════════════════════════════════════════════ */
.layer-toggle{
display:flex;align-items:center;gap:10px;
padding:9px 0;cursor:pointer;user-select:none;
}
.layer-toggle+.layer-toggle{border-top:1px solid var(--bd-0)}
.layer-toggle input{display:none}
.toggle-track{
width:32px;height:18px;border-radius:var(--r-pill);
background:var(--bg-3);
border:1px solid var(--bd-1);
position:relative;flex-shrink:0;
transition:background .15s,border-color .15s;
}
.toggle-track::after{
content:'';position:absolute;top:2px;left:2px;
width:12px;height:12px;border-radius:50%;
background:var(--t-3);
transition:left .18s,background .18s;
}
.layer-toggle input:checked+.toggle-track{background:var(--blue-bg);border-color:var(--blue-bd)}
.layer-toggle input:checked+.toggle-track::after{left:17px;background:var(--blue)}
.toggle-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.toggle-name{flex:1;font-size:.80rem;font-weight:500;display:flex;align-items:center;gap:6px}
.toggle-count{font-family:var(--mono);font-size:.62rem;color:var(--t-3)}
.slider-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.slider-row:last-child{margin-bottom:0}
.slider-row>span:first-child{
width:84px;font-size:.74rem;font-weight:500;
display:flex;align-items:center;gap:6px;flex-shrink:0;
color:var(--t-2);
}
.slider{
flex:1;-webkit-appearance:none;appearance:none;
height:4px;border-radius:var(--r-pill);
background:var(--bg-3);
outline:none;cursor:pointer;
}
.slider::-webkit-slider-thumb{
-webkit-appearance:none;width:14px;height:14px;
border-radius:50%;border:2px solid var(--blue);
background:var(--bg-1);
cursor:pointer;
}
.slider::-moz-range-thumb{
width:14px;height:14px;border-radius:50%;
border:2px solid var(--blue);background:var(--bg-1);
}
.slider-val{
width:28px;text-align:right;
font-family:var(--mono);font-size:.72rem;font-weight:600;
color:var(--blue);
}
.select,.input{
width:100%;height:32px;padding:0 10px;
background:var(--bg-2);
border:1px solid var(--bd-1);
border-radius:var(--r-m);
font-size:.80rem;outline:none;color:var(--t-1);
transition:border-color .12s;
}
.select:focus,.input:focus{border-color:var(--blue-bd)}
.select option{background:var(--bg-2)}
.num-input{
width:54px;height:30px;padding:0 6px;
background:var(--bg-2);
border:1px solid var(--bd-1);
border-radius:var(--r-s);
font-family:var(--mono);font-size:.74rem;
text-align:center;outline:none;color:var(--t-0);
transition:border-color .12s;
}
.num-input:focus{border-color:var(--blue-bd)}
/* Buttons */
.btn{
height:32px;padding:0 14px;
border-radius:var(--r-m);
background:var(--bg-2);
border:1px solid var(--bd-1);
font-family:var(--mono);font-size:.64rem;font-weight:600;
text-transform:uppercase;letter-spacing:.06em;
color:var(--t-2);
display:inline-flex;align-items:center;justify-content:center;gap:6px;
transition:background .15s,color .15s,border-color .15s;
white-space:nowrap;
}
.btn:hover{background:var(--bg-3);color:var(--t-0);border-color:var(--bd-2)}
.btn:disabled{opacity:.35;cursor:default}
.btn:disabled:hover{background:var(--bg-2);color:var(--t-2);border-color:var(--bd-1)}
.btn-primary{
background:var(--blue);
border-color:var(--blue);
color:#eaf5fd;
}
.btn-primary:hover{background:var(--blue-light);border-color:var(--blue-light);color:#eaf5fd}
.btn-danger{
border-color:rgba(239,68,68,.25);color:var(--err);
}
.btn-danger:hover{background:var(--err-bg);border-color:rgba(239,68,68,.40);color:var(--err)}
.btn svg{width:12px;height:12px}
.btn-block{width:100%}
/* ═══════════════════════════════════════════════
SCORE PANEL (smart-score card)
═══════════════════════════════════════════════ */
.score-card{
display:grid;grid-template-columns:92px 1fr;gap:14px;
padding:4px 0;
}
.score-ring{
position:relative;width:92px;height:92px;
}
.score-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.score-ring .ring-bg{fill:none;stroke:var(--bg-3);stroke-width:6}
.score-ring .ring-fg{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.score-val{
position:absolute;inset:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
font-family:var(--mono);
}
.score-val .n{font-size:1.5rem;font-weight:700;line-height:1}
.score-val .l{font-size:.52rem;color:var(--t-3);letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
.score-metrics{
display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start;
}
.sm-item{
padding:6px 8px;border-radius:var(--r-m);
background:var(--bg-2);
border:1px solid var(--bd-0);
display:flex;align-items:center;gap:6px;
}
.sm-item .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sm-item .sm-meta{flex:1;min-width:0}
.sm-item .v{font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--t-0);line-height:1}
.sm-item .lbl{font-size:.55rem;color:var(--t-3);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.sm-item .sm-help{
width:18px;height:18px;padding:0;
border-radius:var(--r-pill);
color:var(--t-4);
display:inline-flex;align-items:center;justify-content:center;
transition:color .12s,background .12s;
flex-shrink:0;
}
.sm-item .sm-help:hover{color:var(--blue);background:var(--blue-bg)}
.sm-item .sm-help svg{width:11px;height:11px}
/* ═══════════════════════════════════════════════
AREA SNAPSHOT CARD
═══════════════════════════════════════════════ */
.snap-grid{
display:grid;grid-template-columns:1fr 1fr;gap:6px;
}
.snap-cell{
padding:10px;border-radius:var(--r-m);
background:var(--bg-2);border:1px solid var(--bd-0);
}
.snap-cell .lbl{
font-family:var(--mono);font-size:.55rem;font-weight:600;
text-transform:uppercase;letter-spacing:.08em;
color:var(--t-3);margin-bottom:4px;
}
.snap-cell .v{
font-family:var(--mono);font-size:.95rem;font-weight:700;
color:var(--t-0);line-height:1.1;
}
.snap-cell .sub{
font-size:.62rem;color:var(--t-3);margin-top:3px;
}
.snap-confidence{
display:inline-block;padding:1px 6px;border-radius:var(--r-pill);
font-family:var(--mono);font-size:.52rem;font-weight:600;
text-transform:uppercase;letter-spacing:.05em;
margin-inline-start:6px;
}
.snap-confidence.high{background:var(--ok-bg);color:var(--ok)}
.snap-confidence.medium{background:var(--warn-bg);color:var(--warn)}
.snap-confidence.low{background:var(--err-bg);color:var(--err)}
/* ═══════════════════════════════════════════════
COMPLIANCE CARD — international standards
═══════════════════════════════════════════════ */
.comp-summary{
display:flex;align-items:center;gap:10px;
padding:10px 12px;margin-bottom:8px;
border-radius:var(--r-m);
background:var(--bg-2);border:1px solid var(--bd-1);
}
.comp-summary .ring{
width:52px;height:52px;flex-shrink:0;
}
.comp-summary .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.comp-summary .ring circle.bg{fill:none;stroke:var(--bg-3);stroke-width:5}
.comp-summary .ring circle.fg{fill:none;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.comp-summary .txt{flex:1;min-width:0}
.comp-summary .pct{font-family:var(--mono);font-size:1.2rem;font-weight:700;color:var(--t-0);line-height:1}
.comp-summary .lbl{font-size:.68rem;color:var(--t-3);margin-top:3px}
.comp-item{
padding:10px 12px;margin-bottom:6px;
border-radius:var(--r-m);
background:var(--bg-2);
border:1px solid var(--bd-0);
display:grid;grid-template-columns:1fr auto;gap:4px 8px;
cursor:pointer;
transition:background .12s,border-color .12s;
}
.comp-item:hover{background:var(--bg-3);border-color:var(--bd-1)}
.comp-item .ttl{font-size:.78rem;font-weight:500;color:var(--t-0);line-height:1.2}
.comp-item .pct{
font-family:var(--mono);font-size:.82rem;font-weight:700;
white-space:nowrap;
}
.comp-item.meets .pct{color:var(--ok)}
.comp-item.near .pct{color:var(--warn)}
.comp-item.below .pct,
.comp-item.critical .pct{color:var(--err)}
.comp-item .detail{
grid-column:1 / -1;
font-family:var(--mono);font-size:.6rem;color:var(--t-3);
display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;
}
.comp-item .src-badge{
font-family:var(--mono);font-size:.52rem;
color:var(--blue);
padding:1px 6px;border-radius:var(--r-pill);
background:var(--blue-bg);border:1px solid var(--blue-bd);
}
/* ═══════════════════════════════════════════════
METHODOLOGY MODAL
═══════════════════════════════════════════════ */
.method-live{
padding:10px 12px;margin-bottom:14px;
border-radius:var(--r-m);
background:var(--bg-2);border:1px solid var(--bd-1);
font-family:var(--mono);font-size:.7rem;
}
.method-live .dot{
display:inline-block;width:8px;height:8px;border-radius:50%;
margin-inline-end:6px;vertical-align:middle;
}
.method-live .dot.ok{background:var(--ok)}
.method-live .dot.stale{background:var(--warn)}
.method-live .dot.none{background:var(--err)}
.method-std{
padding:12px;margin-bottom:10px;
border-radius:var(--r-m);
background:var(--bg-2);border:1px solid var(--bd-1);
}
.method-std .ttl{
font-weight:600;color:var(--t-0);margin-bottom:4px;
font-size:.88rem;
}
.method-std .meta{
font-family:var(--mono);font-size:.65rem;color:var(--t-2);
line-height:1.5;
}
.method-std .meta strong{color:var(--t-0);font-weight:600}
.method-std .cite{
font-style:italic;color:var(--t-2);margin-top:4px;font-size:.72rem;
}
.method-std .src-link{
display:inline-flex;align-items:center;gap:6px;margin-top:6px;
padding:4px 10px;border-radius:var(--r-s);
background:var(--blue-bg);color:var(--blue);
font-size:.68rem;font-weight:500;
text-decoration:none;
transition:background .12s;
}
.method-std .src-link:hover{background:var(--blue-bd)}
.method-std .src-link svg{width:11px;height:11px}
.method-std .conf{
display:inline-block;padding:1px 6px;border-radius:var(--r-pill);
font-size:.5rem;font-weight:600;text-transform:uppercase;
letter-spacing:.06em;margin-inline-start:6px;
}
.method-std .conf.high{background:var(--ok-bg);color:var(--ok)}
.method-std .conf.medium{background:var(--warn-bg);color:var(--warn)}
.method-std .conf.low{background:var(--err-bg);color:var(--err)}
.method-disclaimer{
margin-top:14px;padding:10px 12px;
border-radius:var(--r-m);
background:var(--warn-bg);
border:1px solid rgba(245,197,107,.25);
font-size:.74rem;color:var(--t-1);line-height:1.5;
}
/* Scenario delta chip */
.sc-delta{
display:inline-flex;align-items:center;gap:4px;
font-family:var(--mono);font-weight:700;
}
.sc-delta.pos{color:var(--ok)}
.sc-delta.neg{color:var(--err)}
.sc-delta.zero{color:var(--t-3)}
/* ═══════════════════════════════════════════════
TAB NAVIGATION (Analysis Tools / Data panels)
═══════════════════════════════════════════════ */
.tab-nav{
display:flex;gap:2px;
padding:3px;margin-bottom:10px;
background:var(--bg-2);
border:1px solid var(--bd-0);
border-radius:var(--r-m);
}
.tab-btn{
flex:1;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
height:30px;padding:0 10px;
border-radius:var(--r-s);
font-family:var(--mono);font-size:.62rem;font-weight:600;
text-transform:uppercase;letter-spacing:.06em;
color:var(--t-3);
transition:background .12s,color .12s;
}
.tab-btn svg{width:12px;height:12px;flex-shrink:0}
.tab-btn:hover{color:var(--t-1)}
.tab-btn.active{
background:var(--bg-3);
color:var(--t-0);
box-shadow:inset 0 0 0 1px var(--bd-1);
}
.tab-content{display:none}
.tab-content.active{display:block}
/* ═══════════════════════════════════════════════
COMPLIANCE "VIEW ALL" TOGGLE
═══════════════════════════════════════════════ */
.comp-section-title{
font-family:var(--mono);font-size:.58rem;font-weight:600;
text-transform:uppercase;letter-spacing:.10em;
color:var(--t-3);
margin:10px 0 6px;
display:flex;align-items:center;gap:6px;
}
.comp-section-title.crit{color:var(--err)}
.comp-section-title.good{color:var(--ok)}
.comp-section-title .count{
font-family:var(--mono);font-size:.6rem;
padding:1px 6px;border-radius:var(--r-pill);
background:var(--bg-2);color:var(--t-2);
}
.comp-view-all{
width:100%;margin-top:8px;
padding:8px 10px;
border-radius:var(--r-m);
background:var(--bg-2);
border:1px solid var(--bd-1);
color:var(--t-2);
font-family:var(--mono);font-size:.64rem;font-weight:600;
text-transform:uppercase;letter-spacing:.06em;
display:flex;align-items:center;justify-content:center;gap:6px;
transition:background .12s,color .12s;
}
.comp-view-all:hover{background:var(--bg-3);color:var(--t-0)}
.comp-view-all svg{width:12px;height:12px;transition:transform .2s}
.comp-view-all.open svg{transform:rotate(180deg)}
.comp-full-list{display:none;margin-top:6px}
.comp-full-list.open{display:block}
/* ═══════════════════════════════════════════════
LAYER BREAKDOWN
═══════════════════════════════════════════════ */
.breakdown-hint{
font-family:var(--mono);font-size:.64rem;color:var(--t-3);
margin-bottom:10px;
}
.layer-row{margin-bottom:12px}
.layer-row-head{
display:flex;align-items:center;gap:6px;margin-bottom:4px;
}
.layer-row-head .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.layer-row-head .name{flex:1;font-size:.74rem;font-weight:500;color:var(--t-1)}
.layer-row-head .cnt{font-family:var(--mono);font-size:.68rem;color:var(--t-2)}
.layer-row-bar{
height:3px;border-radius:var(--r-pill);
background:var(--bg-3);overflow:hidden;
}
.layer-row-bar>div{height:100%;border-radius:inherit;transition:width .5s ease}
.sub-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.sub-chip,bdi.sub-chip{
display:inline-flex;align-items:center;gap:4px;
padding:2px 7px;border-radius:var(--r-pill);
background:var(--bg-2);border:1px solid var(--bd-0);
font-size:.62rem;color:var(--t-2);
unicode-bidi:isolate;
}
.sub-chip .d{width:4px;height:4px;border-radius:50%}
.layer-meta{font-family:var(--mono);font-size:.62rem;color:var(--t-3);margin-top:3px}
/* ═══════════════════════════════════════════════
DATA TABLES (compare, gap, mcda)
═══════════════════════════════════════════════ */
.data-table{width:100%;border-collapse:collapse;font-size:.72rem;margin-top:6px}
.data-table th,.data-table td{
padding:6px 8px;
border-bottom:1px solid var(--bd-0);
text-align:left;
}
.data-table th{
font-family:var(--mono);font-size:.56rem;font-weight:600;
text-transform:uppercase;letter-spacing:.08em;
color:var(--t-3);
background:var(--bg-2);
}
.data-table td.num{font-family:var(--mono);text-align:right;color:var(--t-0)}
.data-table tbody tr:hover{background:var(--bg-2)}
.status-pill{
display:inline-block;padding:1px 7px;border-radius:var(--r-pill);
font-size:.56rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
}
.status-pill.ok{background:var(--ok-bg);color:var(--ok)}
.status-pill.warn{background:var(--warn-bg);color:var(--warn)}
.status-pill.err{background:var(--err-bg);color:var(--err)}
/* Compare area chip list */
.chip-list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.chip{
display:flex;align-items:center;gap:8px;
padding:6px 10px;border-radius:var(--r-m);
background:var(--bg-2);border:1px solid var(--bd-0);
font-size:.76rem;
}
.chip .dot{width:8px;height:8px;border-radius:50%}
.chip .lbl{flex:1;color:var(--t-1);font-weight:500}
.chip .rm{color:var(--t-4);cursor:pointer;font-size:.88rem;line-height:1}
.chip .rm:hover{color:var(--err)}
/* Site evaluation result */
.site-result{
padding:12px;border-radius:var(--r-m);
background:var(--bg-2);border:1px solid var(--bd-0);
margin-top:4px;
}
.site-score{font-family:var(--mono);font-size:1.4rem;font-weight:700}
.site-rec{font-size:.72rem;color:var(--t-3);margin:2px 0 10px}
.site-factor{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:.66rem}
.site-factor .k{width:98px;color:var(--t-3)}
.site-factor .bar{flex:1;height:3px;border-radius:var(--r-pill);background:var(--bg-3);overflow:hidden}
.site-factor .bar>div{height:100%;background:var(--blue);border-radius:inherit}
.site-factor .v{width:22px;text-align:right;font-family:var(--mono);color:var(--t-2)}
/* What-if result */
.wi-result{
display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;
margin-top:10px;
}
.wi-box{
padding:10px;border-radius:var(--r-m);
background:var(--bg-2);border:1px solid var(--bd-0);
text-align:center;
}
.wi-box .lbl{font-size:.55rem;text-transform:uppercase;letter-spacing:.10em;color:var(--t-3)}
.wi-box .v{font-family:var(--mono);font-size:1.2rem;font-weight:700;margin-top:2px}
.wi-arrow{font-family:var(--mono);font-size:.92rem;font-weight:700}
/* MCDA */
.mcda-crit{
display:grid;grid-template-columns:1fr 80px 72px;gap:6px;
padding:8px;border-radius:var(--r-m);
background:var(--bg-2);border:1px solid var(--bd-0);
margin-bottom:6px;align-items:center;
}
.mcda-crit .k{font-size:.72rem;color:var(--t-1)}
.mcda-crit .w{display:flex;align-items:center;gap:6px}
.mcda-crit .w input{width:48px}
.mcda-crit .dir{display:flex;gap:4px}
.mcda-crit .dir button{
padding:3px 6px;border:1px solid var(--bd-1);border-radius:var(--r-s);
font-family:var(--mono);font-size:.56rem;color:var(--t-3);
text-transform:uppercase;
}
.mcda-crit .dir button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.mcda-verdict{
padding:10px;border-radius:var(--r-m);
background:var(--bg-2);border:1px solid var(--bd-0);
margin-bottom:8px;text-align:center;
}
.mcda-verdict .s{font-family:var(--mono);font-size:1.5rem;font-weight:700}
/* ═══════════════════════════════════════════════
MAP
═══════════════════════════════════════════════ */
#map{
grid-area:map;width:100%;height:100%;
background:var(--bg-0);z-index:1;
}
.leaflet-container{background:var(--bg-0)!important;font-family:var(--font)!important}
.leaflet-control-zoom{
border:1px solid var(--bd-1)!important;
border-radius:var(--r-m)!important;
overflow:hidden!important;
box-shadow:0 4px 12px rgba(0,0,0,.4)!important;
}
.leaflet-control-zoom a{
background:var(--bg-1)!important;
color:var(--t-2)!important;
border-color:var(--bd-0)!important;
width:30px!important;height:30px!important;line-height:30px!important;
font-size:16px!important;transition:background .12s!important;
}
.leaflet-control-zoom a:hover{background:var(--bg-3)!important;color:var(--t-0)!important}
.leaflet-popup-content-wrapper{
background:var(--bg-1)!important;
color:var(--t-1)!important;
border:1px solid var(--bd-2)!important;
border-radius:var(--r-m)!important;
box-shadow:0 8px 24px rgba(0,0,0,.5)!important;
}
.leaflet-popup-tip{background:var(--bg-1)!important}
.leaflet-popup-content{margin:10px 14px!important;font-size:.78rem!important}
.leaflet-control-attribution{
background:rgba(11,18,32,.90)!important;
color:var(--t-4)!important;font-size:.5rem!important;
}
.leaflet-control-attribution a{color:var(--t-2)!important}
.leaflet-container.drawing{cursor:crosshair!important}
/* Map legend — anchored to bottom-left of map area (above status bar + footer) */
.map-legend{
position:fixed;
bottom:calc(22px + 22px + 12px);
left:calc(var(--w-sidebar) + 12px);
z-index:400;
padding:8px 10px;
background:var(--bg-1);
border:1px solid var(--bd-1);
border-radius:var(--r-m);
box-shadow:0 4px 12px rgba(0,0,0,.4);
font-family:var(--mono);font-size:.6rem;
max-width:200px;
display:none;
user-select:none;-webkit-user-select:none;
pointer-events:none;
}
.map-legend.visible{display:block}
.map-legend h4{font-size:.56rem;font-weight:600;color:var(--t-2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.map-legend .row{display:flex;align-items:center;gap:6px;padding:2px 0;color:var(--t-2)}
.map-legend .row .sw{width:10px;height:3px;border-radius:2px}
/* Map stats — top-right of map area (under header) */
.map-stats{
position:fixed;
top:calc(var(--h-header) + 10px);
right:10px;
z-index:400;
padding:6px 10px;
background:var(--bg-1);
border:1px solid var(--bd-1);
border-radius:var(--r-m);
font-family:var(--mono);font-size:.6rem;
color:var(--t-2);display:none;
user-select:none;-webkit-user-select:none;
pointer-events:none;
}
.map-stats.visible{display:block}
.map-stats span{color:var(--t-0);font-weight:600}
/* ═══════════════════════════════════════════════
OVERLAYS
═══════════════════════════════════════════════ */
.loading-overlay{
position:fixed;inset:0;z-index:9000;
display:flex;align-items:center;justify-content:center;
background:rgba(11,18,32,.80);
}
.loading-overlay.hidden{display:none}
.loading-content{
text-align:center;
padding:28px 40px;
border-radius:var(--r-m);
background:var(--bg-1);
border:1px solid var(--bd-1);
min-width:220px;
}
.spinner{
width:32px;height:32px;margin:0 auto 12px;
border:3px solid var(--bd-1);
border-top-color:var(--blue);
border-radius:50%;
animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{
font-family:var(--mono);font-size:.72rem;font-weight:600;
text-transform:uppercase;letter-spacing:.10em;
color:var(--t-0);
}
.loading-sub{font-size:.66rem;color:var(--t-3);margin-top:3px}
.toast{
position:fixed;bottom:24px;left:50%;
transform:translateX(-50%) translateY(8px);
padding:10px 18px;
border-radius:var(--r-m);
background:var(--bg-3);
border:1px solid var(--bd-2);
font-family:var(--mono);font-size:.72rem;font-weight:500;
color:var(--t-0);
box-shadow:0 6px 20px rgba(0,0,0,.4);
z-index:9500;opacity:0;
transition:opacity .2s,transform .2s;
pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:rgba(239,68,68,.4);color:var(--err)}
.toast.ok{border-color:rgba(16,185,129,.4);color:var(--ok)}
/* Actionable toast (with Undo button) */
.toast.actionable{
display:flex;align-items:center;gap:14px;
padding:10px 10px 10px 18px;
pointer-events:auto;
}
[dir="rtl"] .toast.actionable{padding:10px 18px 10px 10px}
.toast .toast-action{
padding:6px 14px;border-radius:var(--r-s);
background:var(--blue);color:#fff;
font-family:var(--mono);font-size:.66rem;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;
transition:background .12s;
cursor:pointer;
}
.toast .toast-action:hover{background:#2563eb}
.fab{
position:fixed;bottom:36px;right:16px;z-index:450;
width:52px;height:52px;border-radius:var(--r-l);
background:var(--blue);
display:none;align-items:center;justify-content:center;
box-shadow:0 4px 12px rgba(0,0,0,.35);
transition:background .15s;
}
.fab:hover{background:var(--blue-light)}
.fab svg{width:22px;height:22px;color:#eaf5fd}
.sidebar-backdrop{
position:fixed;inset:0;
background:rgba(0,0,0,.55);
z-index:80;display:none;
}
.sidebar-backdrop.open{display:block}
/* ═══════════════════════════════════════════════
STATUS BAR (bottom)
═══════════════════════════════════════════════ */
.status-bar{
position:fixed;bottom:0;left:var(--w-sidebar);right:0;
height:22px;
background:var(--bg-1);
border-top:1px solid var(--bd-1);
display:flex;align-items:center;gap:16px;
padding:0 14px;
font-family:var(--mono);font-size:.60rem;
color:var(--t-3);
z-index:40;
user-select:none;-webkit-user-select:none;
}
.status-bar .sep{color:var(--t-4)}
.status-bar strong{color:var(--t-1);font-weight:600}
.status-bar .online{color:var(--ok)}
/* ═══════════════════════════════════════════════
DRAW TOOLBAR (appears while drawing)
═══════════════════════════════════════════════ */
.draw-hint{
position:fixed;top:calc(var(--h-header) + 12px);left:50%;
transform:translateX(-50%);
padding:6px 8px 6px 14px;
border-radius:var(--r-m);
background:var(--bg-1);
border:1px solid var(--bd-2);
box-shadow:0 6px 24px rgba(0,0,0,.45);
display:none;align-items:center;gap:12px;
z-index:500;
user-select:none;-webkit-user-select:none;
}
.draw-hint.visible{display:flex}
.draw-status{
font-family:var(--mono);font-size:.68rem;font-weight:500;
color:var(--t-1);letter-spacing:.04em;
white-space:nowrap;
}
.draw-status span{color:var(--blue);font-weight:700}
.draw-actions{display:flex;gap:4px}
.draw-btn{
height:28px;padding:0 10px;
border-radius:var(--r-s);
background:var(--bg-2);
border:1px solid var(--bd-1);
font-family:var(--mono);font-size:.6rem;font-weight:600;
text-transform:uppercase;letter-spacing:.06em;
color:var(--t-2);
display:inline-flex;align-items:center;gap:5px;
transition:background .12s,color .12s,border-color .12s;
}
.draw-btn:hover:not(:disabled){background:var(--bg-3);color:var(--t-0);border-color:var(--bd-2)}
.draw-btn:disabled{opacity:.35;cursor:default}
.draw-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.draw-btn.primary:hover:not(:disabled){background:#2563eb;border-color:#2563eb}
.draw-btn.danger{color:var(--err);border-color:rgba(239,68,68,.25)}
.draw-btn.danger:hover:not(:disabled){background:var(--err-bg);border-color:rgba(239,68,68,.4)}
.draw-btn svg{width:11px;height:11px;flex-shrink:0}
@media(max-width:480px){
.draw-hint{left:10px;right:10px;transform:none;max-width:none;gap:6px;padding:6px}
.draw-status{font-size:.58rem;flex:0 0 auto}
.draw-btn{height:26px;padding:0 8px;font-size:.54rem;flex:1 1 0}
.draw-btn span{display:none}
.draw-btn svg{width:12px;height:12px}
}
/* ═══════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════ */
@media(max-width:1280px){
:root{--w-sidebar:340px}
}
@media(max-width:1100px){
:root{--w-sidebar:320px}
.header-search{flex:0 1 300px}
}
@media(max-width:900px){
.header-btn span{display:none}
.header-btn{padding:0 8px;width:30px;justify-content:center}
.header-search{flex:1}
}
@media(max-width:768px){
.app-shell{grid-template-columns:1fr;grid-template-areas:"header" "map"}
.sidebar{
position:fixed;top:0;left:0;bottom:0;
width:min(340px,90vw);
transform:translateX(-100%);
transition:transform .25s ease;
z-index:90;
box-shadow:4px 0 20px rgba(0,0,0,.4);
}
.sidebar.open{transform:translateX(0)}
.fab{display:flex}
.mobile-menu{display:inline-flex!important}
.status-bar{left:0}
.map-legend{left:12px;bottom:calc(22px + 12px)}
/* Hide map overlays while drawer is open — avoids overlap with sidebar */
body:has(.sidebar.open) .map-legend,
body:has(.sidebar.open) .map-stats,
body:has(.sidebar.open) .fab{display:none}
}
@media(max-width:480px){
:root{--h-header:44px}
.brand-tag{display:none}
.app-header{padding:0 8px;gap:6px}
.brand-name{font-size:.85rem}
.header-btn{font-size:.58rem}
.status-bar{font-size:.55rem;gap:8px;padding:0 8px}
.status-bar .hide-sm{display:none}
/* Keep only the essential icons in the header on tiny screens —
Locate & Refresh are still available from within the sidebar/logic. */
.header-btn.compact-hide{display:none!important}
.header-search input{padding-right:32px}
.map-stats{font-size:.55rem;padding:4px 8px;max-width:calc(100vw - 20px);right:6px}
.map-legend{max-width:calc(100vw - 24px)}
}
/* Utility */
.hidden{display:none!important}
.divider{border-top:1px solid var(--bd-1);margin:10px 0}
.label-h{font-family:var(--mono);font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.10em;color:var(--t-3);margin-bottom:6px}
.row-inline{display:flex;gap:6px;align-items:center}
.row-inline .btn{flex:0 0 auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
/* ═══════════════════════════════════════════════
RTL SUPPORT — when
═══════════════════════════════════════════════ */
[dir="rtl"]{
/* Use a more readable Arabic-friendly font fallback */
}
[dir="rtl"] body{
font-family:'Noto Sans Arabic','IBM Plex Sans Arabic','Segoe UI',system-ui,-apple-system,sans-serif;
}
[dir="rtl"] .brand-name,
[dir="rtl"] .panel-header,
[dir="rtl"] .header-btn,
[dir="rtl"] .btn,
[dir="rtl"] .draw-btn,
[dir="rtl"] .status-bar,
[dir="rtl"] .slider-val,
[dir="rtl"] .score-val .n,
[dir="rtl"] .data-table th,
[dir="rtl"] .data-table td.num{
font-family:'Noto Sans Arabic','IBM Plex Sans Arabic',system-ui,sans-serif;
/* Numbers/mono elements stay in JetBrains Mono — keep them LTR */
}
/* Keep numeric values in mono + isolated from surrounding RTL context,
but do NOT force direction:ltr on containers — that breaks Arabic labels. */
[dir="rtl"] .brand-name,
[dir="rtl"] .score-val .n,
[dir="rtl"] .sm-item .v,
[dir="rtl"] .layer-row-head .cnt,
[dir="rtl"] .slider-val,
[dir="rtl"] .data-table td.num{
font-family:var(--mono);
unicode-bidi:isolate;
}
/* "pair" = key:value chunk that must render as one atomic unit in bidi */
.stat-pair{unicode-bidi:isolate;white-space:nowrap}
.stat-pair .v{font-family:var(--mono);font-weight:600;color:var(--t-0)}
.stat-pair > bdi,.stat-pair bdi{unicode-bidi:isolate}
/* CSS Grid already places columns right-to-left when dir="rtl", so the
default grid-template-columns produces sidebar-on-the-right in RTL. */
@media(min-width:769px){
[dir="rtl"] .sidebar{border-right:none;border-left:1px solid var(--bd-1)}
[dir="rtl"] .sidebar::after{right:auto;left:0}
[dir="rtl"] .status-bar{left:0;right:var(--w-sidebar)}
}
/* Map overlays: flip sides */
[dir="rtl"] .map-legend{left:auto;right:calc(var(--w-sidebar) + 12px)}
[dir="rtl"] .map-stats{right:auto;left:10px}
/* Welcome steps flip numbering side */
[dir="rtl"] .welcome-steps{text-align:right}
/* Toggle tracks */
[dir="rtl"] .toggle-track::after{left:auto;right:2px}
[dir="rtl"] .layer-toggle input:checked+.toggle-track::after{right:17px}
/* Accordion chevron remains down-pointing */
[dir="rtl"] .panel-header.open .chev{transform:rotate(180deg)}
/* Welcome text alignment */
[dir="rtl"] .welcome p, [dir="rtl"] .welcome h3{text-align:center}
/* Drawing hint on mobile — still span full-width with proper start alignment */
[dir="rtl"] .draw-hint{direction:rtl}
/* Site factor bars/readouts: align numeric column on the left in RTL */
[dir="rtl"] .site-factor .v{text-align:left}
/* Header actions: in RTL they stay on the margin-inline-end side automatically */
[dir="rtl"] .header-actions{margin-left:0;margin-right:auto}
/* Mobile drawer: slide from the right instead of the left */
@media(max-width:768px){
[dir="rtl"] .sidebar{
left:auto;right:0;
transform:translateX(100%);
box-shadow:-4px 0 20px rgba(0,0,0,.4);
}
[dir="rtl"] .sidebar.open{transform:translateX(0)}
[dir="rtl"] .status-bar{right:0;left:0}
[dir="rtl"] .map-legend{right:12px;left:auto}
[dir="rtl"] .fab{left:16px;right:auto}
}
/* ═══════════════════════════════════════════════
TOUCH TARGETS — bigger on small screens
═══════════════════════════════════════════════ */
@media(max-width:768px){
.layer-toggle{padding:14px 0;min-height:44px}
.toggle-track{width:40px;height:22px}
.toggle-track::after{width:16px;height:16px}
.layer-toggle input:checked+.toggle-track::after{left:20px}
[dir="rtl"] .layer-toggle input:checked+.toggle-track::after{right:20px;left:auto}
.panel-header{padding:14px 16px;min-height:44px}
.btn{height:40px}
.header-btn{height:36px}
.slider{height:6px}
.slider::-webkit-slider-thumb{width:22px;height:22px}
.slider::-moz-range-thumb{width:22px;height:22px}
.num-input{height:36px;width:62px}
.select{height:40px}
}
/* ───────────────────────────────────────────────────────────
Leaflet map controls — match dark/light theme + LTR/RTL safe
─────────────────────────────────────────────────────────── */
/* Leaflet controls — direction-aware via JS, see rebuildMapControls() */
[dir="rtl"] .leaflet-control { direction: ltr; }
/* Stack zoom + layer in a tidy column with consistent gap */
.leaflet-control-zoom,
.leaflet-control-layers {
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 8px !important;
}
.leaflet-control-zoom { margin-top: 0 !important; }
/* Layer control: outer frame matches app theme */
.leaflet-control-layers {
background: var(--bg-1) !important;
color: var(--t-1) !important;
border: 1px solid var(--bd-1) !important;
border-radius: var(--r-m, 8px) !important;
box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
font-family: var(--font) !important;
font-size: .72rem !important;
overflow: hidden !important;
}
/* Collapsed: just the layer icon (matches zoom buttons in size + style) */
.leaflet-control-layers-toggle {
width: 30px !important;
height: 30px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-size: 16px 16px !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* Expanded: clean panel */
.leaflet-control-layers-expanded {
padding: 8px 12px !important;
background: var(--bg-1) !important;
color: var(--t-1) !important;
min-width: 150px !important;
text-align: left !important;
direction: ltr !important;
}
.leaflet-control-layers-list { padding-top: 0 !important; margin: 0 !important; }
.leaflet-control-layers-base label,
.leaflet-control-layers-overlays label {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin: 5px 0 !important;
padding: 0 !important;
cursor: pointer !important;
color: var(--t-1) !important;
font-weight: 500 !important;
white-space: nowrap !important;
font-family: var(--font) !important;
}
.leaflet-control-layers-base label:hover,
.leaflet-control-layers-overlays label:hover { color: var(--t-0) !important; }
.leaflet-control-layers-base label > span,
.leaflet-control-layers-overlays label > span {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
unicode-bidi: plaintext !important;
}
.leaflet-control-layers input[type="radio"],
.leaflet-control-layers input[type="checkbox"] {
accent-color: var(--blue, #4ca9cd) !important;
cursor: pointer !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
.leaflet-control-layers-separator { border-color: var(--bd-1) !important; }
/* Light theme — flip the icon color */
[data-theme="light"] .leaflet-control-layers-toggle {
background-image: url("data:image/svg+xml;utf8,") !important;
}
[data-theme="light"] .leaflet-control-layers,
[data-theme="light"] .leaflet-control-layers-expanded { background: #fff !important; color: #0a1824 !important; }
[data-theme="light"] .leaflet-control-layers-base label { color: #0a1824 !important; }
/* ───────────────────────────────────────────────────────────
About modal — institutional
─────────────────────────────────────────────────────────── */
.about-section {
margin-bottom: 18px;
}
.about-section:last-child { margin-bottom: 0; }
.about-section h3 {
font-size: .82rem;
font-weight: 700;
color: var(--t-0);
margin: 0 0 8px;
letter-spacing: .02em;
text-transform: uppercase;
border-left: 3px solid var(--blue, #4ca9cd);
padding-left: 10px;
}
[dir="rtl"] .about-section h3 {
border-left: none;
border-right: 3px solid var(--blue, #4ca9cd);
padding-left: 0;
padding-right: 10px;
}
.about-section p {
font-size: .78rem;
line-height: 1.6;
color: var(--t-1);
margin: 0 0 10px;
}
.about-list {
list-style: none;
padding: 0;
margin: 0;
}
.about-list li {
font-size: .76rem;
line-height: 1.55;
color: var(--t-1);
padding: 6px 0 6px 22px;
position: relative;
}
.about-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 6px;
color: var(--blue, #4ca9cd);
font-weight: 700;
}
[dir="rtl"] .about-list li {
padding-left: 0;
padding-right: 22px;
}
[dir="rtl"] .about-list li::before {
left: auto;
right: 0;
}
.about-publisher-card {
background: linear-gradient(135deg, rgba(76,169,205,0.08), rgba(76,169,205,0.02));
border: 1px solid var(--bd-1);
border-radius: 12px;
padding: 18px 20px;
margin: 16px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.about-publisher-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--blue, #4ca9cd), transparent);
}
.about-publisher-prefix {
font-size: .68rem;
color: var(--t-3);
text-transform: uppercase;
letter-spacing: .12em;
margin-bottom: 6px;
font-weight: 500;
}
[dir="rtl"] .about-publisher-prefix {
letter-spacing: 0;
font-weight: 400;
}
.about-publisher-name {
font-size: 1rem;
font-weight: 700;
color: var(--t-0);
line-height: 1.4;
margin-bottom: 10px;
letter-spacing: -.005em;
}
.about-publisher-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--bd-1);
font-size: .7rem;
color: var(--t-3);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .08em;
}
[dir="rtl"] .about-publisher-meta {
letter-spacing: 0;
text-transform: none;
}
.about-publisher-cr-num {
color: var(--t-0);
font-family: "Courier New", monospace;
font-size: .82rem;
font-weight: 700;
letter-spacing: .04em;
background: var(--bg-2, rgba(0,0,0,0.15));
padding: 2px 10px;
border-radius: 4px;
}
.about-meta {
display: grid;
grid-template-columns: max-content 1fr;
gap: 6px 14px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--bd-1);
font-size: .72rem;
}
.about-meta dt { color: var(--t-3); font-weight: 500; }
.about-meta dd { color: var(--t-1); margin: 0; }
.about-meta dd a { color: var(--blue, #4ca9cd); text-decoration: none; }
.about-meta dd a:hover { text-decoration: underline; }