/* CapAtlas orange: a quieter map-first shell using the existing brand mark. */
:root {
  --bg: #fafaf8;
  --paper-strong: #fff;
  --ink: #0d2b52;
  --muted: #687586;
  --line: #e2e5e7;
  --line-strong: #cbd3d9;
  --accent-soft: #fbede3;
  --accent-faint: #fcf7f2;
  --shadow: 0 8px 26px rgba(13, 43, 82, .08);
}
html, body { font-family: "Segoe UI", "Aptos", system-ui, sans-serif; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #f47a32; outline-offset: 2px; }
#topbar { background: #fff; box-shadow: none; border-bottom-color: var(--line); }
#brand { min-width: 0; }
#brand-mark, #brand-mark svg { width: 48px; height: 44px; }
#brand-mark { flex-basis: 48px; }
#brand-title { font-family: "Segoe UI", "Aptos", system-ui, sans-serif; font-size: 25px; letter-spacing: -.055em; }
.brand-cap { color: var(--accent); }
.brand-atlas { color: var(--accent-2); }
#geo-tabs, #simple-metrics, #metric-favs { display: none !important; }
#quick-metrics { display: flex; gap: 8px; min-width: 0; }
#quick-metrics button, #filter-shortcut {
  min-height: 38px; padding: 7px 13px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; color: var(--ink);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
#quick-metrics button:hover:not(:disabled), #filter-shortcut:hover { border-color: var(--accent-2); color: var(--accent); background: var(--accent-faint); }
#quick-metrics button.active { border-color: var(--accent-2); background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 -2px var(--accent-2); }
#quick-metrics button:disabled { opacity: .45; cursor: default; }
#quick-more { display: none; }
#filter-shortcut { padding-inline: 18px; }
#metric-pin { display: none; }
#metric-wrap { min-width: 140px; }
#metric-button { min-height: 38px; border-radius: 6px; font-size: 12px; font-weight: 700; }
#search-wrap::before {
  content: ""; position: absolute; z-index: 1; left: 14px; top: 50%; width: 13px; height: 13px;
  border: 2px solid #718092; border-radius: 50%; transform: translateY(-62%); pointer-events: none;
}
#search-wrap::after {
  content: ""; position: absolute; z-index: 1; left: 27px; top: calc(50% + 5px); width: 7px; height: 2px;
  background: #718092; transform: rotate(48deg); border-radius: 2px; pointer-events: none;
}
#search { height: 42px; padding-left: 40px; border-radius: 6px; border-color: var(--line-strong); background: #fafbfc; color: var(--ink); }
#search::placeholder { color: #8190a0; }
#top-tools .tool-button { border-radius: 6px; }
#mobile-nav { background: #fff; }
.mobile-nav-item { border-radius: 0; }
.mobile-nav-item.active { background: transparent; color: var(--accent); }
.mobile-nav-item:hover, .mobile-nav-item:focus-visible { background: var(--accent-faint); }
#map { background: #f0f2f1; }
#map-level-control {
  position: absolute; top: 16px; left: 16px; z-index: 1001;
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 9px 5px 12px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  box-shadow: 0 3px 12px rgba(13, 43, 82, .1); color: var(--muted);
  font-size: 11px; font-weight: 700;
}
#geo-level-select { max-width: 158px; border: 0; background: transparent; color: var(--ink); font-size: 12px; font-weight: 750; cursor: pointer; }
#legend { margin-left: 0; left: 16px; bottom: 18px; min-width: 202px; border-radius: 6px; background: #fff; box-shadow: 0 3px 14px rgba(13,43,82,.1); }
.legend-swatch { border-radius: 2px; }
#detail, #detail-empty {
  position: absolute; right: 0; top: 0; width: 390px; height: 100%; max-height: none;
  border: 0; border-left: 1px solid var(--line); border-radius: 0;
  background: #fff; box-shadow: none; z-index: 1050;
}
#detail { padding: 28px 28px 38px; overflow-y: auto; }
#detail h2 { font-size: 27px; letter-spacing: -.045em; font-weight: 800; margin: 0 50px 4px 0; }
#detail-sub { font-size: 11px; letter-spacing: .09em; color: var(--muted); margin-bottom: 24px; }
#detail-close { top: 22px; right: 24px; font-size: 20px; }
.detail-save-icon { display: none; }
#detail-badges { margin-bottom: 14px; }
#detail-selected-metric { padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; margin-bottom: 16px; }
.selected-metric-top { flex-direction: column-reverse; align-items: flex-start; gap: 7px; }
.selected-metric-label { color: var(--muted); font-size: 11px; }
.selected-metric-value { color: var(--ink); font-size: 34px; text-align: left; letter-spacing: -.05em; }
.selected-metric-note { margin-top: 8px; }
#detail-summary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
#detail-summary-actions button, #detail-empty-search {
  min-height: 42px; border: 1px solid var(--accent); border-radius: 5px;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 800;
}
#detail-summary-actions button:hover, #detail-empty-search:hover { background: var(--accent-hover); }
#detail-summary-actions #detail-compare-action { background: #fff; color: var(--accent); }
#detail-summary-actions #detail-compare-action:hover { background: var(--accent-faint); }
#detail-summary-actions #detail-expand-action { display: none; }
#detail-next-step { border-radius: 4px; background: var(--accent-faint); }
#detail-actions button, #detail-actions a { border-radius: 5px; }
#detail-empty { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 38px; }
#detail:not(.hidden) + #detail-empty { display: none; }
.detail-empty-kicker { color: var(--accent-2); font-size: 11px; font-weight: 850; letter-spacing: .12em; }
#detail-empty h2 { max-width: 290px; margin: 12px 0; font-size: 28px; line-height: 1.12; letter-spacing: -.05em; }
#detail-empty p { max-width: 295px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.detail-empty-steps { display: grid; gap: 12px; width: 100%; margin: 26px 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 650; }
.detail-empty-steps span { display: flex; gap: 15px; align-items: center; }
.detail-empty-steps strong { color: var(--accent-2); font-size: 11px; }
#detail-empty-search { padding-inline: 20px; }
body:not([data-app-view="investor"]) #quick-metrics,
body:not([data-app-view="investor"]) #filter-shortcut,
body:not([data-app-view="investor"]) #metric-wrap,
body:not([data-app-view="investor"]) #map-level-control,
body:not([data-app-view="investor"]) #detail-empty { display: none !important; }
.assistant-place-choices { display: grid; gap: 7px; margin-top: 12px; }
.assistant-place-choices button { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; color: var(--ink); text-align: left; }
.assistant-place-choices button:hover, .assistant-place-choices button:focus-visible { border-color: var(--accent-2); background: var(--accent-faint); }
.assistant-place-choices strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.assistant-place-choices span { flex: none; color: var(--muted); font-size: 11px; }
.assistant-place-choices .assistant-place-more { justify-content: center; border-style: dashed; color: var(--accent); font-weight: 800; }

@media (min-width: 861px) {
  #topbar { grid-template-columns: minmax(245px, 29%) minmax(280px, 1fr) 170px 90px; grid-template-rows: 54px 56px; gap: 2px 12px; padding: 6px 22px 8px; }
  #brand { grid-column: 1; grid-row: 1; }
  #top-tools { grid-column: 4; grid-row: 1; justify-self: end; }
  #methodology-open, #feedback-open { display: none; }
  #search-wrap { grid-column: 1; grid-row: 2; }
  #quick-metrics { grid-column: 2; grid-row: 2; align-self: center; }
  #metric-wrap { grid-column: 3; grid-row: 2; }
  #filter-shortcut { grid-column: 4; grid-row: 2; }
  body[data-experience="simple"] #search-wrap { grid-column: 1; grid-row: 2; }
  body[data-experience="simple"] #quick-metrics { grid-column: 2; grid-row: 2; }
  body[data-experience="simple"] #metric-wrap { display: flex; grid-column: 3; grid-row: 2; }
  body[data-experience="simple"] #filter-shortcut { grid-column: 4; grid-row: 2; }
  body[data-experience="simple"] #top-tools { grid-column: 4; grid-row: 1; }
  #mobile-nav { position: fixed; top: 11px; left: 50%; transform: translateX(-50%); z-index: 1300; display: flex; gap: 24px; min-height: 42px; height: 42px; padding: 0; border: 0; box-shadow: none; }
  .mobile-nav-item { min-height: 42px; padding: 5px 3px; border-bottom: 2px solid transparent; font-size: 13px; }
  .mobile-nav-item.active { border-bottom-color: var(--accent-2); }
  .mobile-nav-item svg { display: none; }
  body[data-app-view="investor"] #map { width: calc(100% - 390px); }
  .leaflet-top.leaflet-left { left: auto; right: 405px; top: 14px; }
  #workbench { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(360px, 90vw); max-height: none; overflow-y: auto; border-radius: 0; border-left: 1px solid var(--line); z-index: 2600; background: #fff; transform: translateX(105%); visibility: hidden; transition: transform .2s ease, visibility .2s step-end; }
  body.mobile-tools-open #workbench { transform: translateX(0); visibility: visible; transition: transform .2s ease; }
  .mobile-tools-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; margin: -14px -14px 14px; padding: 18px; background: #fff; border-bottom: 1px solid var(--line); }
  .mobile-tools-head > div { display: grid; gap: 2px; }
  .mobile-tools-head strong { font-size: 19px; }
  .mobile-tools-backdrop { position: fixed; inset: 0; z-index: 2500; display: none; border: 0; background: rgba(13,43,82,.3); }
  body.mobile-tools-open .mobile-tools-backdrop { display: block; }
  body:not([data-app-view="investor"]) #topbar { grid-template-columns: 1fr auto; grid-template-rows: 54px; padding-bottom: 6px; }
  body:not([data-app-view="investor"]) #top-tools { grid-column: 2; }
  body[data-experience="simple"]:not([data-app-view="investor"]) #top-tools { grid-column: 2; grid-row: 1; }
}

@media (max-width: 860px) {
  #topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 48px 44px 40px; gap: 5px 8px; padding: 6px 12px 8px; }
  #brand { grid-column: 1; grid-row: 1; }
  #brand-mark, #brand-mark svg { width: 42px; height: 39px; }
  #brand-mark { flex-basis: 42px; }
  #brand-title { font-size: 22px; }
  #top-tools { grid-column: 2; grid-row: 1; }
  body[data-experience="simple"] #top-tools { grid-column: 2; grid-row: 1; }
  #search-wrap, body[data-experience="simple"] #search-wrap { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  #search { height: 42px; }
  #quick-metrics { grid-column: 1 / -1; grid-row: 3; overflow-x: auto; scrollbar-width: none; }
  #quick-metrics::-webkit-scrollbar { display: none; }
  #quick-metrics button { min-height: 36px; flex: none; padding: 6px 12px; font-size: 11px; }
  #quick-more { display: block; }
  #quick-metrics [data-quick-metric="net_rent_coverage"] { display: none; }
  #metric-wrap, body[data-experience="simple"] #metric-wrap { position: absolute; display: block; left: 0; top: 0; width: 0; height: 0; min-width: 0; overflow: visible; }
  #metric-button { display: none; }
  #metric-menu { position: fixed; top: 140px; left: 10px; right: 10px; width: auto; max-width: none; max-height: calc(100dvh - 220px); z-index: 1900; }
  #filter-shortcut { display: none; }
  #map-level-control { top: 10px; left: 10px; min-height: 36px; }
  #geo-level-select { max-width: 138px; }
  .leaflet-top.leaflet-left { right: 10px; top: 58px; }
  #detail-empty { display: none; }
  #detail { position: fixed; inset: auto 0 calc(62px + env(safe-area-inset-bottom)) 0; width: auto; height: 245px; max-height: none; padding: 18px 18px 24px; border: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; box-shadow: 0 -7px 22px rgba(13,43,82,.13); z-index: 2300; }
  body.detail-expanded #detail { height: calc(100dvh - 217px - env(safe-area-inset-bottom)); }
  #detail h2 { font-size: 22px; }
  #detail-close { position: absolute; top: 14px; right: 15px; z-index: 2; width: 32px; height: 32px; border: 0; box-shadow: none; background: transparent; }
  #detail-sub { margin-bottom: 8px; }
  #detail-badges, #detail-next-step, #detail-actions, #buyer-analysis, #detail-compare, #detail-trend, #detail-metrics { display: none; }
  body.detail-expanded #detail-badges, body.detail-expanded #detail-next-step, body.detail-expanded #detail-actions, body.detail-expanded #buyer-analysis:not(.hidden), body.detail-expanded #detail-compare, body.detail-expanded #detail-trend:not(.hidden), body.detail-expanded #detail-metrics { display: revert; }
  #detail-selected-metric { margin-bottom: 10px; padding-bottom: 8px; }
  .selected-metric-top { flex-direction: row; align-items: center; justify-content: space-between; }
  .selected-metric-label { order: 1; }
  .selected-metric-value { order: 0; font-size: 28px; }
  .selected-metric-note, .selected-metric-interpretation { display: none; }
  body.detail-expanded .selected-metric-note, body.detail-expanded .selected-metric-interpretation { display: block; }
  #detail-summary-actions { grid-template-columns: 1fr 1fr; margin-bottom: 0; }
  #detail-summary-actions #detail-compare-action { display: none; }
  #detail-summary-actions #detail-expand-action { display: block; background: #fff; color: var(--accent); }
  #legend { left: 10px; bottom: 12px; max-width: 190px; max-height: 32%; }
  body.detail-open #legend { bottom: 252px; }
  body.detail-expanded #legend { display: none; }
  #mobile-nav { border-top: 1px solid var(--line); box-shadow: none; }
  .mobile-nav-item.active { color: var(--accent-2); }
  .mobile-nav-item svg.atlas-nav-mark { width: 25px; height: 23px; stroke: none; }
  body:not([data-app-view="investor"]) #topbar { grid-template-rows: 48px; }
}