/* Chrome is monochrome on purpose: the only colour in the interface is data. */
:root {
  --bg: #0a0b0d;
  --panel: rgba(10, 11, 13, .92);
  --line: #22262c;
  --ink: #e6e8ea;
  --dim: #6d747d;
  --off: #4a5057;
  --font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Risk-tier accents, shared with the marketing site's home.css - one
     "colour is data" vocabulary across both surfaces, not two palettes. */
  --orange: #f2601c;
  --amber: #d6841a;
  --teal: #3e6a5f;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; background: var(--bg); }

#map { position: absolute; inset: 0; }

#panel {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 2;
  width: 264px; padding: 14px 14px 0;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--panel); border-right: 1px solid var(--line);
  backdrop-filter: blur(6px);
  font: 400 11px/1.45 var(--font); color: var(--ink);
}

header { display: flex; align-items: center; gap: 8px; }
.brand-mark { flex: none; color: var(--ink); }
#title, header select { flex: 1; margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
header select { flex: 1; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.brand-mini { display: inline-flex; align-items: center; gap: 5px; color: var(--dim); }
.brand-mini:hover { color: var(--ink); }
#total { color: var(--dim); font-variant-numeric: tabular-nums; }

.row { display: flex; align-items: center; gap: 6px; }
.row label { width: 46px; color: var(--dim); }
.dash, .unit { color: var(--dim); }

select, input, button {
  font: inherit; color: var(--ink); background: transparent;
  border: 1px solid var(--line); border-radius: 0; padding: 3px 5px;
}
select { flex: 1; appearance: none; cursor: pointer; }
select:hover, button:hover { border-color: var(--dim); }
input[type=number] { width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; }

.seg { display: flex; }
.seg button { border-right-width: 0; padding: 3px 7px; cursor: pointer; color: var(--dim); }
.seg button:last-child { border-right-width: 1px; }
.seg button[aria-pressed=true] { color: var(--ink); border-color: var(--dim); }
.seg-btn { margin-left: auto; padding: 3px 8px; cursor: pointer; color: var(--dim); }
.seg-btn[aria-pressed=true] { color: var(--ink); border-color: var(--dim); }

#about { flex: 1; overflow: auto; min-height: 0; border-top: 1px solid var(--line); padding-top: 8px; color: var(--dim); }
#about p { margin: 0 0 7px; }
#about b, #about em { color: var(--ink); font-weight: 400; font-style: normal; }
#about a { color: var(--ink); }

/* legend */
#legend { flex: 1; overflow: auto; min-height: 0; border-top: 1px solid var(--line); padding-top: 8px; }
.legend-actions { display: flex; justify-content: flex-end; gap: 5px; padding-bottom: 5px; color: var(--dim); }
.legend-actions button { cursor: pointer; color: var(--dim); border: 0; padding: 0; background: none; font: inherit; text-decoration: underline; }
.legend-actions button:hover { color: var(--ink); }
.key {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 2px 0;
  border: 0; cursor: pointer; text-align: left; color: var(--ink);
}
.key:hover { color: var(--ink); filter: brightness(1.15); }
.key[data-off=true] { color: var(--off); }
.key i { width: 9px; height: 9px; flex: none; display: block; }
.key[data-off=true] i { opacity: .18; }
.key b { flex: 1; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key span { color: var(--dim); font-variant-numeric: tabular-nums; }

.ramp { height: 9px; margin: 4px 0 5px; }
.ticks { display: flex; justify-content: space-between; color: var(--dim); }

/* account menu - plain text, no avatar, matches the panel's other text
   buttons (about/reset/pitch) instead of Clerk's default UserButton widget */
.account-menu { display: flex; align-items: center; gap: 10px; position: relative; }
.account-name { border: 0; background: none; padding: 0; color: var(--ink); cursor: pointer; font: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--dim); }
.account-name:hover { color: var(--dim); }
.account-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 5;
  background: var(--panel); border: 1px solid var(--line); padding: 10px 12px;
  min-width: 190px; display: flex; flex-direction: column; gap: 6px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms ease;
}
.account-menu:hover .account-dropdown, .account-menu:focus-within .account-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* analysis card - replaces the old raw key-value popup, see app.js showAnalysis() */
#analysis { flex: 1; overflow: auto; min-height: 0; border-top: 1px solid var(--line); padding-top: 8px; }
.analysis-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.analysis-close { border: 0; background: none; color: var(--dim); font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.analysis-close:hover { color: var(--ink); }

/* the score, not the locality, is the thing a buyer actually acts on -
   real feedback: it was reading as secondary to the neighbourhood name */
.analysis-hero { display: flex; align-items: baseline; gap: 10px; }
.analysis-score-value { font-size: 34px; font-weight: 700; line-height: 1; color: var(--tier, var(--ink)); }
.analysis-score-unit { display: block; color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 10px; }
.analysis-tier-badge { color: var(--tier, var(--dim)); border: 1px solid var(--tier, var(--line)); padding: 2px 6px; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }

.analysis-subhead { border-top: 1px solid var(--line); padding-top: 8px; margin-bottom: 8px; }
.analysis-locality { display: block; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.analysis-typology { display: block; color: var(--dim); margin-top: 2px; }

.analysis-rows { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.analysis-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.analysis-row span { color: var(--dim); }
.analysis-row b { font-weight: 600; text-align: right; }

.analysis-note { color: var(--dim); font-size: 10px; line-height: 1.5; margin: 10px 0 0; border-top: 1px solid var(--line); padding-top: 8px; }

.analysis-more { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.analysis-more summary { cursor: pointer; color: var(--dim); }
.analysis-more summary:hover { color: var(--ink); }
.analysis-more dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; }
.analysis-more dt { color: var(--dim); overflow-wrap: break-word; min-width: 0; }
.analysis-more dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: break-word; min-width: 0; }

.analysis-export { display: block; width: 100%; margin-top: 14px; padding: 7px; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }

footer {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--line); padding: 8px 0 12px; color: var(--dim);
}
#view { flex: 1; font-variant-numeric: tabular-nums; }
footer button { cursor: pointer; color: var(--dim); }
footer button[aria-pressed=true] { color: var(--ink); border-color: var(--dim); }
#pitch-link {
  font: inherit; color: var(--dim); border: 1px solid var(--line); padding: 3px 5px;
  text-decoration: none; cursor: pointer;
}
#pitch-link:hover { color: var(--ink); border-color: var(--dim); }

.maplibregl-ctrl-group { border-radius: 0; }

@media (max-width: 640px) {
  #panel { width: 100%; height: 46%; top: auto; border-right: 0; border-top: 1px solid var(--line); }
}

/* first-visit intro popup, see map-intro.ts */
#intro-overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 11, 13, .6);
  opacity: 0; transition: opacity 180ms ease;
}
#intro-overlay.in { opacity: 1; }
#intro-overlay.closing { opacity: 0; }
#intro-card {
  width: 320px; max-width: calc(100vw - 40px);
  background: var(--bg); border: 1px solid var(--line);
  padding: 20px; font: 400 12px/1.5 var(--font); color: var(--ink);
  transform: scale(.96); transition: transform 180ms ease;
}
#intro-overlay.in #intro-card { transform: scale(1); }
#intro-card h2 { font-size: 13px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
#intro-card ul { margin: 0 0 16px; padding-left: 16px; }
#intro-card li { margin-bottom: 8px; color: var(--dim); }
#intro-card li b { color: var(--ink); }
#intro-card button {
  width: 100%; font: inherit; color: var(--ink); background: transparent;
  border: 1px solid var(--line); padding: 8px; cursor: pointer;
}
#intro-card button:hover { border-color: var(--dim); }

/* "only in Istanbul, leave your email" popup, see lead-popup.ts - same
   overlay/card mechanics as the intro popup above, deliberately mirrored
   rather than shared selectors so the two stay independent and one can
   change without risking the other. */
#lead-overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 11, 13, .6);
  opacity: 0; transition: opacity 180ms ease;
}
#lead-overlay.in { opacity: 1; }
#lead-overlay.closing { opacity: 0; }
#lead-card {
  position: relative; width: 320px; max-width: calc(100vw - 40px);
  background: var(--bg); border: 1px solid var(--line);
  padding: 20px; font: 400 12px/1.5 var(--font); color: var(--ink);
  transform: scale(.96); transition: transform 180ms ease;
}
#lead-overlay.in #lead-card { transform: scale(1); }
#lead-card h2 { font-size: 13px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
#lead-copy { color: var(--dim); margin: 0 0 16px; }
#lead-close { position: absolute; top: 14px; right: 14px; border: 0; background: none; color: var(--dim); font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
#lead-close:hover { color: var(--ink); }
#lead-form { display: flex; flex-direction: column; gap: 8px; }
#lead-form[hidden] { display: none; }
#lead-email { font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--line); padding: 8px; }
#lead-submit { font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--line); padding: 8px; cursor: pointer; }
#lead-submit:hover { border-color: var(--dim); }
#lead-submit:disabled { opacity: .6; cursor: default; }
#lead-status { color: var(--dim); margin: 4px 0 0; }