/* ===== BASE ===== */
html, body { margin:0; padding:0; height:100%; background:#0a0b10;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color:#e8eaf2; overflow:hidden;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#canvas { display:block; width:100%; height:100%; }
/* ===== TOP BAR ===== */
#topbar {
position: fixed; top: 0; left: 0; right: 0; height: 76px; z-index: 200;
background:
linear-gradient(180deg, rgba(20,22,32,0.95) 0%, rgba(10,11,18,0.95) 100%),
radial-gradient(ellipse 600px 100px at 20% 0%, rgba(91,141,239,0.08), transparent 70%);
border-bottom: 1px solid #1c1f2c;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
0 10px 30px rgba(0,0,0,0.35);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
display: flex; align-items: center; padding: 0 22px; gap: 4px;
user-select: none;
animation: tbFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tbFadeIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
/* Brand */
.tb-brand { display:flex; align-items:center; gap:12px; padding-right:8px; }
.tb-logo { display:none; } /* the old mountain icon — the wordmark stands alone now */
.tb-brand-text { display:flex; flex-direction:column; gap:0; line-height:1.1; }
.tb-brand-name { font-family:'Barlow', 'Helvetica Neue', Arial, sans-serif;
font-size:22px; font-weight:300; letter-spacing:0.2px; color:#fff; line-height:1.1; }
.tb-brand-name b { font-weight:700; }
.tb-brand-sub { font-size:10.5px; font-weight:500; color:#6c7588; letter-spacing:0.2px; margin-top:1px; }
/* Separator */
.tb-sep { width:1px; height:38px;
background: linear-gradient(180deg, transparent, #2a2e3e 30%, #2a2e3e 70%, transparent);
margin: 0 10px; flex-shrink: 0; }
.tb-flex { flex: 1; }
/* Icon-only buttons (undo/redo) */
.tb-icon-btn { display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; padding:0; margin:0;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
color: #b4bccb; border-radius: 9px; cursor: pointer;
transition: all 0.18s cubic-bezier(0.4,0,0.2,1); }
.tb-icon-btn svg { width:18px; height:18px; }
.tb-icon-btn:hover:not(:disabled) {
background: rgba(255,255,255,0.07);
color: #f4f6fc;
border-color: rgba(255,255,255,0.12);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.tb-icon-btn:active:not(:disabled) { transform: translateY(0); }
.tb-icon-btn:disabled { opacity: 0.25; cursor: not-allowed; }
/* Dropdown groups */
.tb-group { position: relative; }
.tb-trigger {
display:inline-flex; align-items:center; gap:8px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
color: #d8dde8; font-family: inherit; font-size: 13px; font-weight: 500;
padding: 9px 12px 9px 11px; border-radius: 9px;
cursor: pointer; margin: 0; white-space: nowrap; letter-spacing: -0.1px;
transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
}
.tb-trigger:hover, .tb-group.open .tb-trigger {
background: rgba(255,255,255,0.07);
border-color: rgba(255,255,255,0.12);
color: #fff;
}
/* Presentation-mode toggle when active */
.tb-trigger.tb-active {
background: rgba(91,141,239,0.18);
border-color: rgba(91,141,239,0.45);
color: #fff;
}
.tb-tico { width:16px; height:16px; flex-shrink:0; opacity:0.85; }
.tb-caret { width:12px; height:12px; opacity:0.55; margin-left:1px; transition: transform 0.2s; }
.tb-group.open .tb-caret { transform: rotate(180deg); opacity:0.9; }
/* Primary mode button — visually distinct */
.tb-trigger-primary {
background: linear-gradient(180deg, rgba(91,141,239,0.22), rgba(91,141,239,0.10));
border-color: rgba(91,141,239,0.45);
color: #e8eefe;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 2px 14px rgba(91,141,239,0.18);
font-weight: 600;
}
.tb-trigger-primary:hover, .tb-group-primary.open .tb-trigger-primary {
background: linear-gradient(180deg, rgba(91,141,239,0.30), rgba(91,141,239,0.15));
border-color: rgba(91,141,239,0.6);
color: #ffffff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
0 4px 18px rgba(91,141,239,0.30);
}
/* Dropdown menus */
.tb-menu {
display: none; position: absolute; top: calc(100% + 8px); left: 0;
min-width: 240px;
background: rgba(14, 16, 24, 0.96);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 6px;
z-index: 500;
box-shadow:
0 20px 50px rgba(0,0,0,0.55),
0 0 0 1px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(255,255,255,0.06);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
}
.tb-group.open .tb-menu {
display: block;
animation: tbMenu 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tbMenu { from { opacity:0; transform:translateY(-6px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.tb-item {
display:flex; align-items:center; gap:10px;
padding: 9px 12px; font-size: 13px; color: #c2c9d6;
cursor: pointer; border-radius: 7px;
transition: background 0.12s, color 0.12s;
font-weight: 500; letter-spacing: -0.1px;
}
.tb-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.tb-item.tb-active { color: #8ab2ff; background: rgba(91,141,239,0.10); }
.tb-item.tb-active::after {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: #5b8def; box-shadow: 0 0 10px #5b8def;
margin-left: auto; flex-shrink: 0;
}
.tb-mico { width:16px; height:16px; opacity:0.75; flex-shrink:0; }
.tb-kbd { margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:10px;
padding:2px 6px; background:rgba(255,255,255,0.06); border-radius:4px;
color:#7a8395; border:1px solid rgba(255,255,255,0.05); }
.tb-item.tb-active .tb-kbd { color: #8ab2ff; }
.tb-menu-label {
padding: 10px 12px 4px; font-size: 10px; font-weight: 700;
color: #5a6175; text-transform: uppercase; letter-spacing: 1.2px;
}
.tb-div { height:1px; background: rgba(255,255,255,0.06); margin: 6px 8px; }
/* Color swatches in Surface menu */
.tb-swatch { width:14px; height:14px; border-radius:4px; flex-shrink:0;
border: 1px solid rgba(255,255,255,0.1); }
.tb-sw-elev { background: linear-gradient(135deg, #5c4030, #b89870); }
.tb-sw-slope { background: linear-gradient(135deg, #3a3a36, #a86b3a); }
.tb-sw-sat { background: linear-gradient(135deg, #2d6a4f, #94a684, #6b7d3f); }
/* "LIVE" tag for satellite */
.tb-tag { margin-left:auto; font-family:'JetBrains Mono', monospace;
font-size: 9px; font-weight:700; padding: 2px 6px;
background: linear-gradient(180deg, #fb923c, #f59e0b);
color: #1a1208; border-radius: 4px; letter-spacing: 0.5px; }
.tb-item-feature:hover .tb-tag { box-shadow: 0 0 12px rgba(251,146,60,0.5); }
/* Check marks */
.tb-ck { display:inline-block; width:14px; color:#5b8def; font-size:11px;
font-weight:700; flex-shrink:0; text-align:center; }
.tb-item.tb-unchecked .tb-ck { color: transparent; }
/* Slider in dropdown */
.tb-slider-wrap { padding: 6px 12px 10px; display:flex; align-items:center; gap:10px; }
.tb-slider-wrap input { flex:1; margin:0; accent-color: #5b8def; height:4px; }
.tb-slider-wrap span { font-family:'JetBrains Mono', monospace;
font-size:11px; font-weight:600; color:#8ab2ff; width:38px; text-align:right; }
/* Status pill */
.tb-status-wrap { display:flex; align-items:center; gap:8px; padding-left: 8px; }
.tb-status {
display:inline-flex; align-items:center; gap:8px;
font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
color: #8ab2ff;
padding: 7px 14px;
background: rgba(91,141,239,0.10);
border: 1px solid rgba(91,141,239,0.30);
border-radius: 100px;
text-transform: uppercase;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 16px rgba(91,141,239,0.12);
}
.tb-status-dot { width:7px; height:7px; border-radius:50%; background:#5b8def;
box-shadow: 0 0 10px #5b8def;
animation: tbPulse 2s ease-in-out infinite; }
@keyframes tbPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(0.85); } }
/* ===== PANELS ===== */
.panel { position:absolute; background: rgba(12,14,22,0.85);
border:1px solid rgba(255,255,255,0.08); padding:16px;
border-radius:14px; font-size:13px; line-height:1.55; max-width:340px;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
box-shadow:
0 12px 40px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.06); }
#stats { top: 92px; right: 16px; min-width: 260px; max-height: 78vh; overflow-y: auto; }
/* Collapsible Trail Stats */
#statsHeader { display:flex; align-items:center; justify-content:space-between; }
#statsCollapseBtn { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
color: #8a92a3; font-size: 10px; padding: 3px 7px; cursor: pointer;
border-radius: 5px; line-height: 1; margin: 0; }
#statsCollapseBtn:hover { background: rgba(255,255,255,0.08); color: #c8d0dc; }
#stats.collapsed { min-width: 0; padding: 12px 14px; }
#stats.collapsed h3 { margin: 0; }
#stats.collapsed #statsBody { display:none; }
/* Settings panel (opened from the topbar) */
#settingsPanel { position:fixed; top: 84px; right: 16px; z-index: 260; width: 280px;
background: rgba(12,14,22,0.94); border:1px solid rgba(255,255,255,0.10);
border-radius: 14px; padding: 14px 16px; font-size: 13px;
backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
box-shadow: 0 16px 48px rgba(0,0,0,0.5); }
.settings-head { display:flex; align-items:center; justify-content:space-between;
font-size: 11px; font-weight: 700; color:#8ab2ff; text-transform:uppercase;
letter-spacing: 1.5px; margin-bottom: 12px; }
#settingsClose { background:none; border:none; color:#8a92a3; font-size:18px; cursor:pointer;
line-height:1; padding:0 4px; margin:0; }
#settingsClose:hover { color:#fff; }
.settings-row { display:flex; align-items:flex-start; gap:10px; cursor:pointer; padding:6px 0; }
.settings-row input[type=checkbox] { margin-top:2px; width:16px; height:16px; accent-color:#7dd3fc; cursor:pointer; }
.settings-row span { display:flex; flex-direction:column; color:#e8eaf2; }
.settings-row small { color:#8a92a3; font-size:11px; margin-top:2px; line-height:1.4; }
.settings-row-col { flex-direction:column; align-items:stretch; gap:8px; cursor:default; }
.settings-section { font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase;
letter-spacing:1.2px; margin:10px 0 2px;
border-top:1px solid rgba(255,255,255,0.08); padding-top:10px; }
.settings-section:first-of-type { border-top:none; margin-top:0; padding-top:0; }
#setNavScheme button { font-size:11px; padding:6px 4px; }
/* Plans panel (named plans per property) — same card family as Settings */
#plansPanel { position:fixed; top: 84px; right: 16px; z-index: 260; width: 300px;
background: rgba(12,14,22,0.94); border:1px solid rgba(255,255,255,0.10);
border-radius: 14px; padding: 14px 16px; font-size: 13px;
backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
box-shadow: 0 16px 48px rgba(0,0,0,0.5); }
.plan-row { display:flex; align-items:center; gap:8px; padding:7px 6px; border-radius:8px;
cursor:pointer; }
.plan-row:hover { background:rgba(255,255,255,0.06); }
.plan-row.active { background:rgba(125,211,252,0.12); }
.plan-row .pl-name { flex:1; color:#e8eaf2; font-weight:600; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; }
.plan-row.active .pl-name { color:#bae6fd; }
.plan-row .pl-meta { color:#8a92a3; font-size:10px; white-space:nowrap; }
.plan-row .pl-btns { display:flex; gap:2px; }
.plan-row .pl-btns button { background:none; border:none; color:#8a92a3; font-size:12px;
cursor:pointer; padding:2px 4px; border-radius:5px; }
.plan-row .pl-btns button:hover { background:rgba(255,255,255,0.12); color:#fff; }
.plan-row .pl-btns button.pl-del:hover { color:#f87171; }
.plan-new { width:100%; margin-top:10px; padding:8px; border-radius:8px; font-weight:600;
border:1px dashed rgba(125,211,252,0.4); background:rgba(125,211,252,0.08);
color:#7dd3fc; cursor:pointer; }
.plan-new:hover { background:rgba(125,211,252,0.16); }
.seg-btns { display:flex; gap:6px; }
.seg-btns button { flex:1; padding:6px 8px; border-radius:7px; font-size:12px; font-weight:600;
cursor:pointer; border:1px solid rgba(255,255,255,0.14);
background:rgba(255,255,255,0.05); color:#cbd5e1; }
.seg-btns button:hover { background:rgba(255,255,255,0.12); color:#fff; }
.seg-btns button.active { background:rgba(125,211,252,0.18); border-color:rgba(125,211,252,0.55);
color:#bae6fd; }
#editPanel { display:none; position:absolute; top: 92px; left: 16px;
min-width: 290px; max-width: 330px;
max-height: calc(100vh - 200px); overflow-y: auto; }
#editPanel.show { display:block; }
/* Elevation profile */
#elevProfile { position:absolute; bottom: 56px; left: 16px; width: 320px;
background: rgba(12,14,22,0.85);
border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
overflow: hidden;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
box-sizing: border-box;
box-shadow: 0 12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
transition: bottom 0.25s ease; }
#elevProfile.collapsed { bottom: 16px; }
#elevProfileHeader { display:flex; align-items:center; justify-content:space-between; padding: 9px 12px 7px; }
#elevProfileLabel { font-size: 10px; font-weight: 700; color: #8ab2ff;
text-transform: uppercase; letter-spacing: 1.4px; }
#elevCollapseBtn { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
color: #8a92a3; font-size: 10px; padding: 3px 7px; cursor: pointer;
border-radius: 5px; line-height: 1; margin: 0; }
#elevCollapseBtn:hover { background: rgba(255,255,255,0.08); color: #c8d0dc; }
#elevProfileBody { padding: 0 12px 8px; transition: max-height 0.25s ease, opacity 0.2s ease;
max-height:500px; opacity:1; overflow:hidden; }
#elevProfile.collapsed #elevProfileBody { max-height:0; opacity:0; padding:0 12px; }
#elevCanvas { display:block; width:100%; height:130px; }
#elevAxisLabels { display:flex; justify-content:space-between; font-size: 9px;
color: #5a6175; margin-top: 4px; font-family: 'JetBrains Mono', monospace;
font-weight: 500; }
#elevResizeHandle { position:absolute; bottom:0; right:0; width:18px; height:18px;
cursor:nwse-resize; opacity:0.5; }
#elevResizeHandle::after { content:''; position:absolute; bottom:4px; right:4px;
width:9px; height:9px;
border-right:2px solid #8a92a3; border-bottom:2px solid #8a92a3; }
#elevProfile.collapsed #elevResizeHandle { display:none; }
#hover { bottom:16px; left:16px; font-family:'JetBrains Mono', monospace; font-size:11.5px;
background: rgba(0,0,0,0.78); padding: 7px 12px; border-radius: 8px;
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(12px); }
/* Map overlay pill — bottom-center strength slider (js/map-drape.js) */
#mapDrapePill { position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
display:flex; align-items:center; gap:9px; padding:8px 14px;
background: rgba(12,14,22,0.85); border:1px solid rgba(255,255,255,0.08);
border-radius: 999px; backdrop-filter: blur(12px); z-index: 20;
box-shadow: 0 12px 40px rgba(0,0,0,0.45); }
#mapDrapePill svg { width:14px; height:14px; color:#7dd3fc; flex:0 0 auto; }
#mapDrapePill .mdp-label { font-size:11px; color:#94a3b8; letter-spacing:0.4px; white-space:nowrap; }
#mapDrapePill input[type=range] { width:150px; margin:0; }
#mapDrapeStatus { font-size:10.5px; color:#fb923c; white-space:nowrap; }
/* Map-picker box handles — corner/edge squares for resizing (js/map-picker.js) */
.mp-handle { background:#fff; border:2px solid #fb923c; border-radius:2px;
box-shadow:0 1px 4px rgba(0,0,0,0.5); }
.mp-handle-nw, .mp-handle-se { cursor: nwse-resize; }
.mp-handle-ne, .mp-handle-sw { cursor: nesw-resize; }
.mp-handle-n, .mp-handle-s { cursor: ns-resize; }
.mp-handle-e, .mp-handle-w { cursor: ew-resize; }
/* ===== TYPOGRAPHY & PANEL CONTENTS ===== */
h3 { margin: 0 0 10px; font-size: 11px; color: #8ab2ff; letter-spacing: 1.5px;
text-transform: uppercase; font-weight: 700; }
h4 { margin: 10px 0 5px; font-size: 12px; color: #7dd3fc; font-weight: 600; letter-spacing: 0.2px; }
button { background: rgba(255,255,255,0.05); color: #d8dde8;
border: 1px solid rgba(255,255,255,0.08);
padding: 7px 11px; border-radius: 7px; cursor: pointer; margin: 2px;
font-size: 11.5px; font-weight: 500; font-family: inherit;
transition: all 0.15s; letter-spacing: -0.1px; }
button:hover:not(:disabled) { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.15); }
button:disabled { opacity: 0.35; cursor: not-allowed; }
button.active { background: linear-gradient(180deg, #4f86f0, #3d6fda);
border-color: #5b8def; color: white;
box-shadow: 0 2px 10px rgba(91,141,239,0.4); }
button.primary { background: linear-gradient(180deg, #4f86f0, #3d6fda);
border-color: #5b8def; color: white; font-weight: 600;
box-shadow: 0 2px 10px rgba(91,141,239,0.30); }
button.primary:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(91,141,239,0.45); }
button.danger { background: linear-gradient(180deg, #ef4444, #c52e2e);
border-color: #dc2626; color: white; font-weight: 600;
box-shadow: 0 2px 10px rgba(220,38,38,0.30); }
button.danger:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(220,38,38,0.45); }
input[type=range] { width:100%; margin:5px 0; accent-color: #5b8def; }
label { font-size: 11px; color: #8a92a3; display: block; margin-top: 8px; font-weight: 500; }
.stat { display:flex; justify-content:space-between; padding:5px 0; font-size:13px;
border-bottom: 1px solid rgba(255,255,255,0.04); }
.stat:last-child { border-bottom: none; }
.stat .v { font-weight:600; color:#fcc97a; font-family:'JetBrains Mono', monospace; font-size:12px; }
.toggle-row { display:flex; gap:5px; flex-wrap:wrap; }
.hint { font-size: 11.5px; color: #8a92a3; line-height: 1.55; }
.grp { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.featrow { display:flex; align-items:center; gap:7px; padding: 6px 8px;
background: rgba(255,255,255,0.04); border-radius: 6px; margin: 3px 0;
font-size: 11.5px; border: 1px solid rgba(255,255,255,0.04); cursor:pointer; }
.featrow:hover { border-color: rgba(125,211,252,0.25); }
.featrow.editing { border-color:#7dd3fc; background: rgba(125,211,252,0.12);
box-shadow: 0 0 10px rgba(125,211,252,0.20); }
.featrow .fdesc { flex: 1; }
.featrow button { padding: 3px 7px; margin: 0; font-size: 10px; }
/* Inline editor injected right below the selected feature's row (FM2) */
.feat-editor { margin: -1px 0 6px; padding: 8px 9px 6px; border-radius: 0 0 6px 6px;
border-left: 2px solid rgba(125,211,252,0.4);
background: rgba(125,211,252,0.05); }
.fe-actions { display:flex; gap:6px; margin-top:2px; }
.fe-actions button { flex:1; padding:6px; font-size:11px; margin:0; }
.pill { display:inline-block; padding:2px 7px; border-radius:4px;
font-size:10px; font-weight:700; color:#fff; letter-spacing:0.3px; }
.pill.berm { background: linear-gradient(180deg, #f59e0b, #d97706); }
.pill.pump { background: linear-gradient(180deg, #10b981, #059669); }
/* Flyover panel */
#flyoverPanel { display:none; position:fixed; top: 92px; left:50%; transform:translateX(-50%);
background: rgba(12,14,22,0.92);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
backdrop-filter: blur(20px) saturate(140%);
padding: 14px 18px; min-width: 400px; z-index: 100;
box-shadow: 0 16px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); }
#flyoverPanel.show { display:block; animation: fpIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fpIn { from { opacity:0; transform:translate(-50%, -10px); } to { opacity:1; transform:translate(-50%, 0); } }
#flyoverHeader { display:flex; justify-content:space-between; align-items:center;
font-size:13px; color:#c8d0dc; margin-bottom:10px; font-weight: 600; }
#flyoverHeader span { letter-spacing: 0.3px; }
#flyoverStopBtn { background: linear-gradient(180deg, #ef4444, #c52e2e); border: 1px solid #dc2626;
color: white; font-size: 11px; font-weight: 600;
padding: 4px 10px; border-radius: 6px; cursor: pointer; margin: 0; }
#flyoverStopBtn:hover { box-shadow: 0 2px 10px rgba(220,38,38,0.4); }
#flyoverProgressWrap { height: 5px; background: rgba(255,255,255,0.06);
border-radius: 3px; margin-bottom: 12px; overflow: hidden; }
#flyoverProgressBar { height:100%; width:0%;
background: linear-gradient(90deg,#fb923c,#5b8def);
border-radius: 3px; transition: width 0.1s linear;
box-shadow: 0 0 12px rgba(91,141,239,0.5); }
#flyoverControls { display:flex; align-items:center; gap:14px; }
#flyoverPlayBtn { background: linear-gradient(180deg, #4f86f0, #3d6fda);
border: 1px solid #5b8def; color: white; font-size: 16px;
padding: 6px 14px; border-radius: 8px; cursor: pointer; margin: 0;
flex-shrink: 0; box-shadow: 0 2px 10px rgba(91,141,239,0.3); }
#flyoverPlayBtn:hover { box-shadow: 0 4px 14px rgba(91,141,239,0.5); }
.flyover-slider-group { flex: 1; }
.flyover-slider-group label { font-size: 10.5px; color: #8a92a3; display: flex;
justify-content: space-between; margin-bottom: 3px; font-weight: 500; }
.flyover-slider-group label span { color:#8ab2ff; font-family:'JetBrains Mono', monospace; }
.flyover-slider-group input { width: 100%; margin: 0; accent-color: #5b8def; }
.flyover-view-toggle { display:flex; gap:4px; }
.flyover-view-toggle button { flex:1; padding:5px 8px; font-size:11px; font-weight:500;
background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
color:#b4bccb; border-radius:6px; margin:0; cursor:pointer;
font-family:inherit; transition:all 0.15s; }
.flyover-view-toggle button:hover { background:rgba(255,255,255,0.10); color:#fff; }
.flyover-view-toggle button.active {
background:linear-gradient(180deg, rgba(91,141,239,0.30), rgba(91,141,239,0.15));
border-color:rgba(91,141,239,0.55); color:#fff;
box-shadow:0 0 12px rgba(91,141,239,0.25); }
/* ===== TRAIL LIST ===== */
.trail-row { display:flex; align-items:center; gap:6px; padding:4px 6px;
border-radius:6px; cursor:pointer; font-size:11px; color:#b4bccb;
border:1px solid transparent; transition:background 0.12s; }
.trail-row:hover { background:rgba(255,255,255,0.05); }
.trail-row.active { background:linear-gradient(180deg,rgba(91,141,239,0.22),rgba(91,141,239,0.10));
border-color:rgba(91,141,239,0.45); color:#fff; }
.tr-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.tr-dot.tr-designed { background:#5b8def; }
.tr-dot.tr-existing { background:#8a6a42; }
.tr-dot.tr-decommissioned { background:#4b5563; }
.tr-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
font-weight:600; min-width:0; }
.tr-meta { color:#8a92a3; font-size:10px; white-space:nowrap; flex-shrink:0; }
.trail-row.active .tr-meta { color:#aebad2; }
.tr-btns { display:none; gap:2px; flex-shrink:0; }
.trail-row:hover .tr-btns { display:flex; }
.tr-btns button { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08);
color:#b4bccb; border-radius:4px; font-size:10px; line-height:1;
padding:3px 5px; margin:0; cursor:pointer; }
.tr-btns button:hover { background:rgba(255,255,255,0.14); color:#fff; }
/* ===== TREE BRUSH PANEL ===== */
#treeBrushPanel { display:none; position:fixed; top: 92px; left:50%; transform:translateX(-50%);
background: rgba(12,14,22,0.92);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
backdrop-filter: blur(20px) saturate(140%);
padding: 14px 18px; min-width: 340px; z-index: 100;
box-shadow: 0 16px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); }
#treeBrushPanel.show { display:block; animation: fpIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
#treeBrushHeader { display:flex; justify-content:space-between; align-items:center;
font-size:13px; color:#c8d0dc; margin-bottom:10px; font-weight: 600; }
#treeBrushExitBtn { background: linear-gradient(180deg, #22a35c, #17814a); border: 1px solid #1d9552;
color: white; font-size: 11px; font-weight: 600;
padding: 4px 10px; border-radius: 6px; cursor: pointer; margin: 0; }
#treeBrushControls { display:flex; gap:14px; align-items:center; }
.tree-brush-toggle { display:flex; gap:4px; }
.tree-brush-toggle button { padding:5px 12px; font-size:11px; font-weight:500;
background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
color:#b4bccb; border-radius:6px; margin:0; cursor:pointer;
font-family:inherit; transition:all 0.15s; }
.tree-brush-toggle button:hover { background:rgba(255,255,255,0.10); color:#fff; }
.tree-brush-toggle button.active {
background:linear-gradient(180deg, rgba(91,141,239,0.30), rgba(91,141,239,0.15));
border-color:rgba(91,141,239,0.55); color:#fff;
box-shadow:0 0 12px rgba(91,141,239,0.25); }
.tree-brush-slider-group { flex:1; }
.tree-brush-slider-group label { font-size: 10.5px; color: #8a92a3; display: flex;
justify-content: space-between; margin-bottom: 3px; }
.tree-brush-slider-group label span { color:#8ab2ff; font-family:'JetBrains Mono', monospace; }
.tree-brush-slider-group input { width: 100%; margin: 0; accent-color: #5b8def; }
#treeBrushHint { font-size:10.5px; color:#8a92a3; margin-top:9px; }
/* ===== ELEVATION PROFILE HOVER TOOLTIP ===== */
#elevHoverTip { position:fixed; pointer-events:none; z-index:300;
background:rgba(15,17,25,0.97); border:1px solid rgba(125,211,252,0.30);
border-radius:6px; padding:7px 10px;
font-family:'JetBrains Mono', monospace; font-size:10.5px; color:#e2e8f0;
line-height:1.45; min-width:170px;
box-shadow:0 8px 20px rgba(0,0,0,0.5); }
#elevHoverTip .row { display:flex; justify-content:space-between; gap:14px; }
#elevHoverTip .lab { color:#7a8290; }
#elevHoverTip .v { color:#7dd3fc; font-weight:600; }
#elevHoverTip .green { color:#5fd97c; font-weight:600; }
#elevHoverTip .yellow { color:#facc15; font-weight:600; }
#elevHoverTip .red { color:#ef4444; font-weight:600; }
#elevHoverTip .sep { height:1px; background:rgba(255,255,255,0.08); margin:5px 0; }
/* ===== SCULPT MODE ===== */
.sculpt-panel-btn { display:flex; align-items:center; gap:7px; width:100%;
padding:9px 11px; background:rgba(251,146,60,0.08);
border:1px solid rgba(251,146,60,0.30); color:#fb923c;
font-family:inherit; font-size:12px; font-weight:600; border-radius:8px;
cursor:pointer; transition:all 0.15s; }
.sculpt-panel-btn:hover { background:rgba(251,146,60,0.18); border-color:rgba(251,146,60,0.55); }
.sculpt-panel-btn.sculpt-active { background:rgba(251,146,60,0.25); border-color:rgba(251,146,60,0.70);
box-shadow:0 0 12px rgba(251,146,60,0.30); color:#fff; }
.tb-sculpt-btn { display:inline-flex; align-items:center; gap:6px;
background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
color:#d8dde8; font-family:inherit; font-size:12px; font-weight:600;
padding:8px 13px; border-radius:8px; cursor:pointer; margin:0 8px 0 0;
letter-spacing:0.2px; transition:all 0.15s; }
.tb-sculpt-btn svg { width:14px; height:14px; flex-shrink:0; }
.tb-sculpt-btn:hover { background:rgba(251,146,60,0.12); border-color:rgba(251,146,60,0.4);
color:#fff; }
.tb-sculpt-btn.sculpt-active { background:linear-gradient(180deg,rgba(251,146,60,0.30),rgba(251,146,60,0.15));
border-color:rgba(251,146,60,0.60); color:#fff;
box-shadow:0 0 14px rgba(251,146,60,0.35); }
#sculptPanel { position:fixed; top:92px; left:16px; width:230px; z-index:100;
background:rgba(12,14,22,0.93); border:1px solid rgba(251,146,60,0.35);
border-radius:10px; padding:12px 14px;
backdrop-filter:blur(16px); box-shadow:0 8px 28px rgba(0,0,0,0.4); }
.sculpt-header { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
color:#fb923c; letter-spacing:0.8px; text-transform:uppercase; margin-bottom:10px; }
.sculpt-hint-text { margin-left:auto; font-size:9.5px; font-weight:400; color:#6b7280;
letter-spacing:0; text-transform:none; }
.sculpt-row { margin-bottom:8px; }
.sculpt-row label { display:flex; justify-content:space-between; font-size:11px; color:#9ca3af;
font-weight:500; margin-bottom:4px; }
.sculpt-row label span { color:#fb923c; font-family:'JetBrains Mono', monospace; font-weight:600; }
.sculpt-row input { width:100%; margin:0; accent-color:#fb923c; }
.sculpt-type-indicator { font-size:12px; font-weight:600; color:#fb923c; text-align:center;
height:18px; margin-bottom:8px; transition:opacity 0.4s; opacity:0; }
.sculpt-legend { display:flex; align-items:center; gap:5px; font-size:10px; color:#6b7280;
flex-wrap:wrap; }
.sculpt-legend-dot { display:inline-block; width:8px; height:8px; border-radius:50%;
flex-shrink:0; margin-left:4px; }
.sculpt-conflict-tip { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
background:rgba(239,68,68,0.95); color:#fff; font-size:12px; font-weight:600;
padding:10px 16px; border-radius:8px; pointer-events:none; z-index:400;
box-shadow:0 4px 16px rgba(0,0,0,0.4); text-align:center; }
/* ===== TRAIL STYLE TOGGLE ===== */
.style-toggle { display:flex; gap:0; margin-top:6px; border:1px solid rgba(255,255,255,0.10);
border-radius:8px; overflow:hidden; }
.style-btn { flex:1; padding:8px 6px; background:rgba(255,255,255,0.03); border:none;
color:#8a92a3; font-size:11.5px; font-weight:600; font-family:inherit;
cursor:pointer; transition:all 0.15s; }
.style-btn + .style-btn { border-left:1px solid rgba(255,255,255,0.10); }
.style-btn:hover { color:#d8dde8; background:rgba(125,211,252,0.08); }
.style-btn.active { background:rgba(125,211,252,0.18); color:#7dd3fc; }
#styleHint { margin-top:6px; }
/* ===== FEATURE PALETTE ===== */
.feat-icon { width:32px; height:18px; flex-shrink:0; }
#featureArmedStatus { padding:7px 10px; margin-top:8px;
background:rgba(125,211,252,0.10);
border:1px solid rgba(125,211,252,0.30); border-radius:6px;
color:#7dd3fc; font-size:11px; }
/* ===== CATEGORIZED FEATURE MENU (accordion + parameter panel) ===== */
#featCats { display:flex; flex-direction:column; gap:6px; }
.featCat { border:1px solid rgba(255,255,255,0.08); border-radius:9px; overflow:hidden;
background:rgba(255,255,255,0.015); }
.featCat-h { display:flex; align-items:center; justify-content:space-between;
padding:9px 11px; cursor:pointer; user-select:none;
font-size:12px; font-weight:600; color:#d8dde8; }
.featCat-h:hover { background:rgba(255,255,255,0.03); }
.featCat-h .fc-ic { margin-right:8px; opacity:0.9; }
.featCat-h .fc-arrow { color:#6b7280; font-size:10px; transition:transform 0.18s; }
.featCat.open .fc-arrow { transform:rotate(90deg); }
.featCat-body { display:none; padding:6px; grid-template-columns:1fr 1fr; gap:6px; }
.featCat.open .featCat-body { display:grid; }
.featCat-note { grid-column:1/-1; font-size:10px; color:#6b7280; font-style:italic;
padding:1px 4px 3px; }
.feat { display:flex; align-items:center; gap:7px; padding:8px 9px; border-radius:7px;
border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04);
color:#d8dde8; font-size:11.5px; cursor:pointer; transition:all 0.13s; }
.feat:hover { border-color:rgba(125,211,252,0.35); background:rgba(125,211,252,0.10); color:#fff; }
.feat.sel { border-color:#7dd3fc; background:rgba(125,211,252,0.20); color:#fff;
box-shadow:0 0 12px rgba(125,211,252,0.30); }
.feat .feat-icon { width:24px; height:16px; flex:none; }
.feat.planned { cursor:default; opacity:0.4; }
.feat.planned:hover { border-color:rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); color:#d8dde8; }
.feat .soon { margin-left:auto; font-size:8.5px; letter-spacing:0.05em; text-transform:uppercase;
color:#6b7280; border:1px solid rgba(255,255,255,0.12); border-radius:4px; padding:1px 4px; }
#featParams { margin-top:12px; border-top:1px solid rgba(255,255,255,0.08); padding-top:11px; }
#featParams.empty { color:#6b7280; font-size:11.5px; font-style:italic; }
/* When the panel lives inside a category grid it spans both chip columns and
reads as part of that group (accent edge instead of the top rule). */
.featCat-body #featParams { grid-column:1/-1; margin-top:2px; border-top:none;
padding:7px 8px 6px;
border-left:2px solid rgba(125,211,252,0.4);
background:rgba(125,211,252,0.05); border-radius:6px; }
#featParams h5 { margin:0 0 2px; font-size:12.5px; color:#e8eef5; }
#featParams .fp-tag { font-size:10.5px; color:#6b7280; margin:0 0 11px; }
.prow { margin-bottom:11px; }
.prow label { display:flex; justify-content:space-between; font-size:11px; margin-bottom:4px;
color:#b8c2d0; }
.prow label .v { color:#7dd3fc; font-weight:600; font-variant-numeric:tabular-nums; }
.prow input[type=range] { width:100%; accent-color:#7dd3fc; cursor:pointer; }
.fp-place { margin-top:4px; width:100%; padding:9px; border:none; border-radius:8px;
background:#2f6fd6; color:#fff; font-weight:600; font-size:12px; cursor:pointer;
font-family:inherit; }
.fp-place:hover { background:#3b7ce6; }
.fp-auto { display:flex; align-items:center; gap:7px; font-size:11px; color:#9ca3af; margin:2px 0 8px; cursor:pointer; }
.fp-auto input { accent-color:#3b82f6; margin:0; }
/* ===== CUSTOM FEATURE MODAL ===== */
.cf-modal { position:fixed; inset:0; background:rgba(0,0,0,0.6);
backdrop-filter:blur(4px); z-index:1000;
display:flex; align-items:center; justify-content:center; }
.cf-modal-inner { background:rgba(14,16,24,0.98); border:1px solid rgba(255,255,255,0.10);
border-radius:14px; padding:18px 20px; min-width:360px;
box-shadow:0 20px 60px rgba(0,0,0,0.6); }
.cf-modal-header { display:flex; justify-content:space-between; align-items:center;
font-size:14px; font-weight:600; color:#e8eaf2; margin-bottom:12px;
letter-spacing:0.2px; }
.cf-modal-close { background:none; border:none; color:#8a92a3; font-size:14px;
cursor:pointer; padding:2px 6px; margin:0; }
.cf-modal-close:hover { color:#fff; }
#cfPreviewCanvas { width:100%; height:120px; background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08); border-radius:8px;
display:block; margin-bottom:14px; }
.cf-control-row { margin-bottom:10px; }
.cf-control-row label { display:flex; justify-content:space-between; font-size:11px;
color:#9ca3af; margin-bottom:4px; font-weight:500; }
.cf-control-row label span { color:#7dd3fc; font-family:'JetBrains Mono', monospace; }
.cf-control-row input { width:100%; margin:0; accent-color:#7dd3fc; }
.cf-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
/* ===== NON-BLOCKING DIALOG (uiConfirm / uiPrompt / uiAlert) ===== */
.ui-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.6);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
z-index:1200; display:flex; align-items:center; justify-content:center; }
.ui-modal { background:rgba(14,16,24,0.98); border:1px solid rgba(255,255,255,0.10);
border-radius:14px; padding:20px 22px; min-width:320px; max-width:460px;
box-shadow:0 20px 60px rgba(0,0,0,0.6); }
.ui-modal-msg { font-size:14px; color:#e8eaf2; line-height:1.5; white-space:pre-wrap;
margin-bottom:16px; }
.ui-modal-input { width:100%; box-sizing:border-box; margin:0 0 16px; padding:8px 10px;
background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14);
border-radius:8px; color:#e8eaf2; font-size:13px; font-family:inherit; }
.ui-modal-input:focus { outline:none; border-color:#7dd3fc; }
.ui-modal-btns { display:flex; justify-content:flex-end; gap:8px; }
.ui-modal-btns button { padding:7px 16px; border-radius:8px; font-size:13px; font-weight:600;
cursor:pointer; border:1px solid rgba(255,255,255,0.14);
background:rgba(255,255,255,0.06); color:#cbd5e1; }
.ui-modal-btns button:hover { background:rgba(255,255,255,0.12); color:#fff; }
.ui-modal-ok { background:rgba(125,211,252,0.16) !important; border-color:rgba(125,211,252,0.5) !important;
color:#bae6fd !important; }
.ui-modal-ok:hover { background:rgba(125,211,252,0.28) !important; color:#fff !important; }
.ui-modal-ok.danger { background:rgba(248,113,113,0.16) !important;
border-color:rgba(248,113,113,0.5) !important; color:#fecaca !important; }
.ui-modal-ok.danger:hover { background:rgba(248,113,113,0.30) !important; color:#fff !important; }
/* Non-blocking toast (autosave restore, placement feedback) */
.ui-toast { position:fixed; left:50%; bottom:76px; transform:translateX(-50%) translateY(12px);
background:rgba(14,16,24,0.96); border:1px solid rgba(255,255,255,0.14);
color:#e8eaf2; font-size:13px; padding:9px 16px; border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.5); z-index:1300; pointer-events:none;
opacity:0; transition:opacity 0.2s ease, transform 0.2s ease; }
.ui-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
/* Wrong-GPU notice */
#gpuNotice { position:fixed; bottom:16px; left:16px; z-index:1250; max-width:420px;
background:rgba(14,16,24,0.96); border:1px solid rgba(245,158,11,0.5);
border-radius:12px; padding:14px 16px; font-size:12px; line-height:1.5;
box-shadow:0 14px 40px rgba(0,0,0,0.55); }
.gpu-notice-title { font-weight:700; color:#f59e0b; margin-bottom:6px; font-size:13px; }
.gpu-notice-body { color:#cbd5e1; }
.gpu-notice-body b { color:#e8eaf2; }
.gpu-notice-btns { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.gpu-notice-btns button { padding:5px 12px; border-radius:7px; font-size:12px; cursor:pointer;
border:1px solid rgba(255,255,255,0.14);
background:rgba(255,255,255,0.06); color:#cbd5e1; }
.gpu-notice-btns button:hover { background:rgba(255,255,255,0.12); color:#fff; }
#gpuNoticeOk { background:rgba(245,158,11,0.16) !important;
border-color:rgba(245,158,11,0.5) !important; color:#fcd34d !important; }
/* Focus-mode pill (PT6) */
#focusPanel { position:fixed; top:88px; left:50%; transform:translateX(-50%);
display:flex; align-items:center; gap:8px; z-index:260;
background:rgba(14,16,24,0.94); border:1px solid rgba(125,211,252,0.4);
border-radius:999px; padding:6px 12px;
box-shadow:0 10px 30px rgba(0,0,0,0.45); }
#focusPanel span { font-size:10px; font-weight:700; letter-spacing:2px; color:#7dd3fc; }
#focusPanel button { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
color:#cbd5e1; border-radius:999px; width:26px; height:26px;
font-size:12px; line-height:1; cursor:pointer; padding:0; margin:0; }
#focusPanel button:hover { background:rgba(255,255,255,0.14); color:#fff; }
/* ===== MASTER PLAN VIEW (Step 7) ===== */
#planOverlay { position:fixed; inset:0; z-index:1100; background:#2a2620;
display:flex; flex-direction:column; }
.plan-toolbar { display:flex; align-items:center; gap:10px; padding:8px 14px;
background:rgba(14,16,24,0.96); border-bottom:1px solid rgba(255,255,255,0.08);
flex:0 0 auto; }
.plan-title-tb { font-size:14px; font-weight:600; color:#e8eaf2; letter-spacing:0.3px;
margin-right:auto; }
.plan-toolbar button { padding:6px 14px; border-radius:8px; font-size:12px; font-weight:600;
cursor:pointer; border:1px solid rgba(255,255,255,0.16);
background:rgba(255,255,255,0.06); color:#cbd5e1; }
.plan-toolbar button:hover { background:rgba(255,255,255,0.14); color:#fff; }
#planExport { background:rgba(125,211,252,0.16) !important; border-color:rgba(125,211,252,0.5) !important;
color:#bae6fd !important; }
.plan-canvas-wrap { flex:1 1 auto; overflow:hidden; display:flex;
align-items:center; justify-content:center; padding:12px; }
#planCanvas { background:#f4ecd8; box-shadow:0 10px 40px rgba(0,0,0,0.5); border-radius:2px; }
/* ===== FRONT PAGE (the first thing a visitor sees) =====
Deliberately plain: white bar with the wordmark, one full-width picture
with the headline and a single button, then a white band of lists.
One typeface (Barlow), black/white plus one green. No gradients on
buttons, no glows, no glass. The picture is img/hero.jpg. */
#noTerrainOverlay { position:fixed; inset:0; z-index:500; background:#fff; color:#14171a;
display:flex; flex-direction:column; overflow-y:auto;
font-family:'Barlow', 'Helvetica Neue', Arial, sans-serif; }
.ntc-bar { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
height:64px; padding:0 40px; background:#fff; border-bottom:1px solid #e3e5e8; }
.ntc-wordmark { font-size:27px; font-weight:300; letter-spacing:0.2px; color:#14171a; line-height:1; }
.ntc-wordmark b { font-weight:700; }
.ntc-beta { font-size:12px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:#5b6470; }
/* Hero: headline on a dark panel at the left, the picture on the right.
The picture fades into the panel at its left edge, so the words never
sit on top of the trail. On a narrow screen the picture goes behind
the words, dimmed. */
.ntc-hero { flex:1 0 auto; min-height:460px; display:flex; align-items:center;
position:relative; overflow:hidden; background:#04070d; }
.ntc-hero::after { content:''; position:absolute; top:0; right:0; bottom:0; width:64%;
background:url('img/hero.jpg') 22% center / cover no-repeat;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18%);
mask-image:linear-gradient(90deg, transparent 0, #000 18%); }
.ntc-hero-text { position:relative; z-index:1; max-width:580px; padding:56px 40px; }
.ntc-eyebrow { margin:0 0 14px; font-size:14px; font-weight:600; letter-spacing:2.2px;
text-transform:uppercase; color:#9fd067; }
.ntc-title { margin:0; font-size:58px; font-weight:300; line-height:1.08; letter-spacing:-0.5px; color:#fff; }
.ntc-sub { margin:20px 0 30px; font-size:19px; font-weight:400; line-height:1.5; color:#e4e8e2; }
.ntc-find { display:inline-block; padding:15px 30px; border:0; border-radius:3px; cursor:pointer;
background:#fff; color:#14171a; font-family:inherit; font-size:15px; font-weight:600;
letter-spacing:1.6px; text-transform:uppercase; transition:background 0.15s; }
.ntc-find:hover { background:#9fd067; }
.ntc-lower { flex:0 0 auto; display:flex; flex-wrap:wrap; gap:36px 56px; padding:34px 40px 44px; background:#fff; }
.ntc-col { flex:1 1 320px; max-width:520px; }
.ntc-saved-note { margin:12px 0 0; font-size:14px; color:#5b6470; }
.ntc-or { margin:0 0 12px; font-size:12px; font-weight:600; letter-spacing:1.8px;
text-transform:uppercase; color:#5b6470; }
.ntc-list, #ntcPropertiesList { display:flex; flex-direction:column; gap:8px; }
.ntc-btn-secondary { display:flex; align-items:center; width:100%; cursor:pointer;
background:#fff; border:1px solid #d5d8dd; border-radius:3px; color:#14171a;
font-family:inherit; transition:border-color 0.15s, background 0.15s; }
.ntc-btn-secondary:hover { background:#f4f5f6; border-color:#14171a; }
.ntc-example { justify-content:flex-start; text-align:left; padding:11px 16px; }
.ntc-prop-text { display:flex; flex-direction:column; line-height:1.3; }
.ntc-prop-name { font-size:17px; font-weight:600; }
.ntc-prop-loc { font-size:14px; font-weight:400; color:#5b6470; }
/* Your properties: card + small remove button on one row */
.ntc-prop-row { display:flex; gap:6px; align-items:stretch; }
.ntc-prop-row .ntc-example { flex:1; min-width:0; }
.ntc-prop-del { flex:0 0 40px; background:#fff; border:1px solid #d5d8dd; color:#5b6470;
font-size:20px; line-height:1; border-radius:3px; cursor:pointer; transition:all 0.15s; }
.ntc-prop-del:hover { background:#b3261e; border-color:#b3261e; color:#fff; }
/* How it works: four numbered steps on a pale band */
.ntc-how { flex:0 0 auto; padding:52px 40px 56px; background:#f2f3f1; }
.ntc-h2 { margin:0 0 28px; font-size:34px; font-weight:300; letter-spacing:-0.2px; color:#14171a; }
.ntc-steps { list-style:none; margin:0; padding:0; display:grid; gap:32px 36px;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); max-width:1240px; }
.ntc-steps img { display:block; width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover;
border:1px solid #cfd3d0; border-radius:3px; margin-bottom:16px; background:#e3e5e2; }
.ntc-num { display:block; font-size:34px; font-weight:300; line-height:1; color:#5d8a2c; margin-bottom:6px; }
/* (#noTerrainOverlay prefix: beats the app's blue uppercase panel headings) */
#noTerrainOverlay .ntc-steps h3, #noTerrainOverlay .ntc-why-cols h3 { margin:0 0 8px; font-family:inherit;
font-size:21px; font-weight:600; letter-spacing:0; text-transform:none; color:inherit; }
.ntc-steps p { margin:0; font-size:17px; line-height:1.55; color:#3b424a; }
/* Why this exists: the story, on a dark band */
.ntc-why { flex:0 0 auto; padding:60px 40px 68px; background:#14171a; color:#fff; }
.ntc-why-title { margin:0; max-width:820px; font-size:44px; font-weight:300; line-height:1.12; letter-spacing:-0.3px; }
.ntc-why-lead { margin:20px 0 36px; max-width:760px; font-size:20px; line-height:1.55; color:#d5dad3; }
.ntc-why-cols { display:grid; gap:28px 48px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); max-width:980px; }
.ntc-why-cols div { border-top:1px solid #3a4046; padding-top:18px; }
.ntc-why-cols p { margin:0; font-size:17px; line-height:1.55; color:#c3c9c1; }
.ntc-why-close { margin:40px 0 28px; max-width:760px; font-size:22px; font-weight:400; line-height:1.45; }
@media (max-width:900px) {
.ntc-hero::after { width:100%; opacity:0.38; -webkit-mask-image:none; mask-image:none; }
}
@media (max-width:720px) {
.ntc-how, .ntc-why { padding-left:20px; padding-right:20px; }
.ntc-why-title { font-size:32px; }
.ntc-bar { padding:0 20px; }
.ntc-hero-text { padding:40px 20px; }
.ntc-title { font-size:40px; }
.ntc-lower { padding:28px 20px 36px; }
}
/* ===== MAP PICKER (the front door — js/map-picker.js) ===== */
/* Above the start splash (500) so "Find your land" visually replaces it;
below the modal (1000) so the name prompt still appears on top. */
#mapPickerOverlay { position:fixed; inset:0; z-index:600; display:flex; flex-direction:column;
background:#0b0d14; }
.mp-top { display:flex; align-items:center; gap:10px; padding:10px 14px; flex-wrap:wrap;
background:rgba(12,14,22,0.97); border-bottom:1px solid rgba(255,255,255,0.08); }
.mp-instruction { color:#e8eaf2; font-size:14px; flex:1; min-width:240px; }
.mp-instruction b { color:#fdba74; }
.mp-usonly { display:block; font-size:11px; color:#8a92a3; }
.mp-state { background:#151824; color:#e8eaf2; border:1px solid rgba(255,255,255,0.14);
border-radius:8px; padding:8px 10px; font-size:13px; font-family:inherit; }
.mp-search { display:flex; gap:6px; }
.mp-search-input { background:#151824; color:#e8eaf2; border:1px solid rgba(255,255,255,0.14);
border-radius:8px; padding:8px 10px; font-size:13px; width:230px; font-family:inherit; }
.mp-search-go, .mp-close { background:rgba(255,255,255,0.08); color:#e8eaf2; border:1px solid rgba(255,255,255,0.14);
border-radius:8px; padding:8px 12px; font-size:13px; cursor:pointer; font-family:inherit; }
.mp-search-go:hover, .mp-close:hover { background:rgba(255,255,255,0.15); }
.mp-close { font-size:18px; line-height:1; padding:6px 12px; }
.mp-map { flex:1; min-height:0; cursor:crosshair; }
.mp-bottom { display:flex; align-items:center; gap:14px; padding:10px 14px; flex-wrap:wrap;
background:rgba(12,14,22,0.97); border-top:1px solid rgba(255,255,255,0.08); }
.mp-readout { flex:1; min-width:220px; display:flex; flex-direction:column; gap:4px; }
.mp-size-label { color:#e8eaf2; font-size:13px; }
.mp-size { width:100%; accent-color:#fb923c; }
.mp-lidar { font-size:12px; max-width:320px; }
.mp-lidar-good { color:#4ade80; }
.mp-lidar-warn { color:#fbbf24; }
.mp-lidar-bad { color:#f87171; }
.mp-lidar-wait { color:#8a92a3; }
.mp-build { background:linear-gradient(180deg,rgba(251,146,60,0.5),rgba(251,146,60,0.28));
border:1px solid rgba(251,146,60,0.6); color:#fff; font-weight:700; font-size:15px;
padding:12px 22px; border-radius:10px; cursor:pointer; font-family:inherit; }
.mp-build:disabled { opacity:0.35; cursor:default; }
.mp-build:not(:disabled):hover { background:linear-gradient(180deg,rgba(251,146,60,0.65),rgba(251,146,60,0.4)); }
/* Leaflet attribution readable on dark chrome */
#mapPickerOverlay .leaflet-control-attribution { background:rgba(12,14,22,0.8); color:#8a92a3; }
#mapPickerOverlay .leaflet-control-attribution a { color:#9fb2d8; }
/* Mode banner overlay */
.mode-banner { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
pointer-events: none; font-size: 32px; color: rgba(255,255,255,0.25);
font-weight: 800; letter-spacing: 10px; text-transform: uppercase;
display: none; z-index: 150; }
.mode-banner.show { display:block; animation: fade 1.2s ease-out forwards; }
.flyover-slider-group label.flyover-auto { display:flex; justify-content:flex-start; align-items:center; gap:6px; font-size:10.5px; color:#9ca3af; margin-top:5px; cursor:pointer; text-transform:none; letter-spacing:0; }
.flyover-slider-group label.flyover-auto input { accent-color:#3b82f6; margin:0; width:auto; }
@keyframes fade { 0% {opacity:0.8} 100% {opacity:0} }
/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }