/* ============================================================
   Acquisitions Map — product UI styles
   Built on WareSpace tokens (green/navy, Poppins/Roboto).
   ============================================================ */

:root {
  /* WareSpace brand */
  --green-120: #0B8E5F;
  --green-100: #00AA6C;
  --green-90:  #3DBE7A;
  --green-80:  #19CE8C;
  --green-60:  #C6EBD7;
  --green-40:  #E6F4EB;
  --blue-100:  #102442;
  --blue-80:   #1C274C;
  --black:     #0C1422;
  --white:     #FFFFFF;
  --gray-100:  #F8F8F9;
  --gray-120:  #F1F1F1;
  --gray-160:  #DCDCDC;
  --gray-200:  #C6C6C6;
  --gray-400:  #8A8A8A;
  --danger:    #E11717;
  --warning:   #E6A53B;

  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-card: 10px;
  --radius-inner: 6px;
  --radius-tight: 4px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16,36,66,.06), 0 1px 1px rgba(16,36,66,.04);
  --shadow-md: 0 4px 16px rgba(16,36,66,.08), 0 2px 4px rgba(16,36,66,.04);
  --shadow-lg: 0 20px 48px rgba(16,36,66,.16), 0 6px 16px rgba(16,36,66,.08);

  /* Score-tier semantic colors (from handover) */
  --tier-hot:  #E5484D;
  --tier-warm: #F5A524;
  --tier-cool: #5B7FA6;

  /* Signal colors */
  --sig-live:     var(--green-100);
  --sig-stale:    #9AA3AD;
  --sig-forsale:  var(--blue-100);
  --sig-foreclose:#E11717;
  --sig-loan:     #E6A53B;
  --sig-retail:   #D9480F;

  --accent: var(--green-100);

  /* density-driven (overridden by [data-density]) */
  --row-pad-y: 11px;
  --rail-gap: 22px;
  --cell-pad-y: 12px;
}

[data-density="compact"] {
  --row-pad-y: 7px;
  --rail-gap: 16px;
  --cell-pad-y: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--blue-100);
  background: var(--gray-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--green-60); }

/* ── App grid ───────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-rows: 60px 1fr;
  grid-template-columns: 300px 1fr;
  grid-template-areas: "topbar topbar" "rail main";
  height: 100vh;
  width: 100vw;
}
/* guide / welcome mode: hide the filter rail for a focused full-width landing */
.app.is-guide { grid-template-columns: 0 1fr; }
.app.is-guide .rail { display: none; }

/* ── Top bar ────────────────────────────────────────────── */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 22px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-160);
  z-index: 600;
}
.topbar__brand { display: flex; align-items: center; gap: 11px; }
.topbar__brand img { height: 26px; width: auto; display: block; }
.topbar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--blue-100);
  letter-spacing: -0.01em;
  line-height: 1;
}
.topbar__brand > div { flex-shrink: 0; }
.topbar__title, .topbar__sub { white-space: nowrap; }
.topbar__sub {
  font-family: var(--font-body);
  font-size: 10.5px;
  color: var(--gray-400);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 3px;
}
.topbar__div { width: 1px; height: 30px; background: var(--gray-160); }
.count-pill {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-display); font-weight: 600;
  color: var(--blue-100);
}
.count-pill b { font-size: 19px; font-variant-numeric: tabular-nums; }
.count-pill span { font-size: 12px; color: var(--gray-400); font-weight: 500; }
.count-pill em {
  font-style: normal; font-size: 11px; color: var(--green-120);
  background: var(--green-40); padding: 2px 7px; border-radius: var(--radius-pill);
  font-weight: 600; margin-left: 2px;
}
.topbar__spacer { flex: 1; }

/* Segmented Map/Table toggle */
.viewtoggle {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--gray-120); border-radius: 8px;
}
.viewtoggle button {
  appearance: none; border: 0; background: transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--gray-400);
  padding: 7px 16px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .15s, background .15s, box-shadow .15s;
}
.viewtoggle button svg { width: 15px; height: 15px; }
.viewtoggle button[aria-pressed="true"] {
  background: var(--white); color: var(--blue-100);
  box-shadow: var(--shadow-sm);
}

/* Buttons */
.btn {
  appearance: none; border: 1.5px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  border-radius: 8px; padding: 9px 16px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s, color .15s, border-color .15s;
}
.btn svg { width: 15px; height: 15px; }
.btn--ghost { background: var(--white); color: var(--green-120); border-color: var(--green-100); }
.btn--ghost:hover { background: var(--green-40); }
.btn--solid { background: var(--green-100); color: #fff; }
.btn--solid:hover { background: var(--green-80); }

/* ── Filter rail ────────────────────────────────────────── */
.rail {
  grid-area: rail;
  background: var(--white);
  border-right: 1px solid var(--gray-160);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.rail__inner { padding: 18px 18px 8px; display: flex; flex-direction: column; gap: var(--rail-gap); }
.rail__foot {
  margin-top: auto; padding: 14px 18px;
  border-top: 1px solid var(--gray-160);
  position: sticky; bottom: 0; background: var(--white);
  display: flex; align-items: center; justify-content: space-between;
}
.reset-link {
  appearance: none; border: 0; background: none;
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  color: var(--gray-400); display: inline-flex; align-items: center; gap: 6px;
}
.reset-link:hover { color: var(--danger); }
.reset-link svg { width: 13px; height: 13px; }

.fgroup { display: flex; flex-direction: column; gap: 10px; }
.fgroup__label {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--gray-400);
  display: flex; align-items: center; justify-content: space-between;
}
.fgroup__label span.muted { font-weight: 500; color: var(--gray-200); letter-spacing: 0; text-transform: none; }

/* search input */
.search {
  display: flex; align-items: center; gap: 9px;
  background: var(--gray-100); border: 1px solid var(--gray-160);
  border-radius: 8px; padding: 0 12px; height: 40px;
  transition: border-color .15s, background .15s;
}
.search:focus-within { border-color: var(--green-100); background: var(--white); }
.search svg { width: 16px; height: 16px; color: var(--gray-400); flex-shrink: 0; }
.search input {
  border: 0; background: transparent; outline: none; flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: 14px; color: var(--blue-100);
}
.search input::placeholder { color: var(--gray-400); }
.search__clear { border: 0; background: none; color: var(--gray-400); font-size: 16px; line-height: 1; padding: 2px; display: none; }
.search__clear:hover { color: var(--blue-100); }
.search.has-value .search__clear { display: block; }

/* chip toggles */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  appearance: none; border: 1.5px solid var(--gray-160); background: var(--white);
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  color: var(--blue-100); padding: 7px 13px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 7px;
  transition: all .14s;
}
.chip:hover { border-color: var(--green-90); }
.chip[aria-pressed="true"] {
  background: var(--green-40); border-color: var(--green-100); color: var(--green-120);
}
.chip[aria-pressed="true"] .chip__check { opacity: 1; width: 13px; margin-right: -1px; }
.chip__check { opacity: 0; width: 0; height: 13px; color: var(--green-100); transition: opacity .14s, width .14s; overflow: hidden; }

/* signal rows */
.sigrow {
  display: flex; align-items: center; gap: 11px;
  padding: var(--row-pad-y) 10px; border-radius: 8px;
  cursor: pointer; transition: background .12s;
  user-select: none;
}
.sigrow:hover { background: var(--gray-100); }
.sigrow[aria-pressed="true"] { background: var(--gray-100); }
.sigrow__box {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  border: 2px solid var(--gray-200); background: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.sigrow__box svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.sigrow[aria-pressed="true"] .sigrow__box { background: var(--accent); border-color: var(--accent); }
.sigrow[aria-pressed="true"] .sigrow__box svg { opacity: 1; }
.sigrow__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sigrow__name { flex: 1; font-size: 13.5px; color: var(--blue-100); font-weight: 500; }
.sigrow__count { font-size: 12px; color: var(--gray-400); font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 600; }
.sigrow[data-zero="true"] { opacity: .42; }

/* sliders */
.slider-wrap { padding: 2px 2px 0; }
.dualslider { position: relative; height: 30px; }
.dualslider .track {
  position: absolute; top: 13px; left: 0; right: 0; height: 4px;
  background: var(--gray-160); border-radius: 999px;
}
.dualslider .fill {
  position: absolute; top: 13px; height: 4px; background: var(--green-100); border-radius: 999px;
}
.dualslider input[type=range] {
  position: absolute; top: 0; left: 0; width: 100%; height: 30px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.dualslider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: all;
  width: 17px; height: 17px; border-radius: 50%; background: var(--white);
  border: 2px solid var(--green-100); box-shadow: var(--shadow-sm); cursor: grab;
}
.dualslider input[type=range]::-moz-range-thumb {
  pointer-events: all; width: 17px; height: 17px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--green-100); box-shadow: var(--shadow-sm); cursor: grab;
}
.range-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray-400); font-variant-numeric: tabular-nums; margin-top: 2px; }
.range-labels b { color: var(--blue-100); font-family: var(--font-display); font-weight: 600; }

.singleslider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: var(--gray-160); outline: none; margin: 12px 0 6px; }
.singleslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%; background: var(--white); border: 2px solid var(--accent); box-shadow: var(--shadow-sm); cursor: grab; }
.singleslider::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; background: var(--white); border: 2px solid var(--accent); box-shadow: var(--shadow-sm); cursor: grab; }
.score-readout { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-400); }
.score-readout b { font-family: var(--font-display); font-weight: 700; color: var(--blue-100); font-size: 15px; font-variant-numeric: tabular-nums; }
.tierdot { width: 10px; height: 10px; border-radius: 50%; }

/* ── Main region ────────────────────────────────────────── */
.main { grid-area: main; position: relative; overflow: hidden; background: var(--gray-120); }
.view { position: absolute; inset: 0; }
.view[hidden] { display: none; }

/* Map */
#map { width: 100%; height: 100%;
  background-color: #EBEEF2;
  background-image:
    linear-gradient(rgba(16,36,66,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,36,66,.045) 1px, transparent 1px),
    radial-gradient(rgba(16,36,66,.07) 1.1px, transparent 1.2px);
  background-size: 64px 64px, 64px 64px, 16px 16px;
}
.leaflet-container { font-family: var(--font-body); background: transparent; }
/* faint metro context labels shown when base tiles are unavailable */
.metro-label { font-family: var(--font-display); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(16,36,66,.28); white-space: nowrap; pointer-events: none; }
.metro-label small { display: block; font-size: .68em; letter-spacing: .08em; color: rgba(16,36,66,.2); }

/* metro focus buttons */
.mapctl {
  position: absolute; top: 14px; right: 14px; z-index: 500;
  display: flex; gap: 7px;
}
.mapctl button {
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  background: var(--white); color: var(--blue-100); border: 1px solid var(--gray-160);
  border-radius: 8px; padding: 8px 13px; box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; gap: 6px;
}
.mapctl button:hover { border-color: var(--green-100); color: var(--green-120); }
.mapctl__toggle .hotdot { width: 9px; height: 9px; border-radius: 50%; background: var(--tier-hot); box-shadow: 0 0 0 2px rgba(229,72,77,.18); }
.mapctl__toggle[aria-pressed="true"] { background: var(--blue-100); color: #fff; border-color: var(--blue-100); }
.mapctl__toggle[aria-pressed="true"]:hover { color: #fff; border-color: var(--blue-100); }
.mapctl button svg { width: 13px; height: 13px; }

/* legend */
.legend {
  position: absolute; left: 14px; bottom: 22px; z-index: 500;
  background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--gray-160); border-radius: 10px;
  padding: 13px 15px; box-shadow: var(--shadow-md);
  font-size: 12px; min-width: 196px;
}
.legend__title { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 9px; }
.legend__row { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--blue-100); white-space: nowrap; }
.legend__row .tierdot { width: 12px; height: 12px; box-shadow: 0 0 0 2px rgba(255,255,255,.9); flex-shrink: 0; }
.legend__row b { font-family: var(--font-display); font-weight: 600; }
.legend__row .rng { color: var(--gray-400); font-variant-numeric: tabular-nums; }
.legend__row .cnt { color: var(--blue-100); margin-left: auto; font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 700; }
.legend__note { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--gray-160); color: var(--gray-400); display: flex; align-items: center; gap: 7px; font-size: 11px; }
.legend__sizes { display: inline-flex; align-items: flex-end; gap: 4px; }
.legend__sizes i { display: block; border-radius: 50%; background: var(--gray-200); }

/* map pin (divIcon) */
.pin {
  border-radius: 50%; border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(16,36,66,.35);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: #fff;
  transition: transform .12s; cursor: pointer;
}
.pin:hover { transform: scale(1.12); z-index: 1000; }
.pin.is-active { box-shadow: 0 0 0 4px rgba(0,170,108,.45), 0 2px 8px rgba(16,36,66,.45); }
.pin__pulse { animation: pinpop .3s ease; }
@keyframes pinpop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* cluster */
.cluster {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: #fff;
  border: 3px solid rgba(255,255,255,.85); box-shadow: 0 3px 10px rgba(16,36,66,.35);
}
.cluster span { line-height: 1; }

/* leaflet popup */
.leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: var(--shadow-lg); padding: 0; }
.leaflet-popup-content { margin: 0; }
.poppop { width: 232px; font-family: var(--font-body); }
.poppop__top { padding: 13px 15px 11px; }
.poppop__addr { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--blue-100); line-height: 1.25; }
.poppop__meta { font-size: 12px; color: var(--gray-400); margin-top: 3px; }
.poppop__row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.poppop__btn {
  display: block; width: 100%; text-align: center;
  background: var(--green-100); color: #fff; border: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  padding: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
}
.poppop__btn:hover { background: var(--green-80); }

/* score badge */
.scorebadge {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  font-family: var(--font-display); font-weight: 700; color: #fff;
  border-radius: 7px; min-width: 30px; height: 26px; padding: 0 7px;
  font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.scorebadge--lg { min-width: 52px; height: 52px; font-size: 24px; border-radius: 12px; flex-direction: column; }
.scorebadge--lg small { font-size: 8.5px; font-weight: 600; letter-spacing: .08em; opacity: .85; text-transform: uppercase; margin-top: 1px; }

/* signal badge */
.sigbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  padding: 4px 9px 4px 8px; border-radius: var(--radius-pill);
  white-space: nowrap; line-height: 1;
}
.sigbadge .d { width: 7px; height: 7px; border-radius: 50%; }

/* ── Table view ─────────────────────────────────────────── */
.tablewrap { position: absolute; inset: 0; overflow: auto; background: var(--white); }
table.props { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.props thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--gray-100); border-bottom: 1.5px solid var(--gray-160);
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--gray-400);
  text-align: left; padding: 12px 14px; white-space: nowrap; cursor: pointer; user-select: none;
}
.props thead th:hover { color: var(--blue-100); }
.props thead th .arr { opacity: 0; margin-left: 4px; font-size: 10px; }
.props thead th[aria-sort] .arr { opacity: 1; color: var(--green-100); }
.props thead th.num, .props td.num { text-align: right; font-variant-numeric: tabular-nums; }
.props tbody tr { border-bottom: 1px solid var(--gray-120); cursor: pointer; transition: background .1s; }
.props tbody tr:hover { background: var(--green-40); }
.props tbody tr.is-active { background: var(--green-40); box-shadow: inset 3px 0 0 var(--green-100); }
.props td { padding: var(--cell-pad-y) 14px; color: var(--blue-100); vertical-align: middle; }
.props td.addr b { font-family: var(--font-display); font-weight: 600; display: block; font-size: 13.5px; }
.props td.addr span { font-size: 12px; color: var(--gray-400); }
.props .nomap { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--gray-400); margin-left: 6px; vertical-align: middle; }
.props .nomap svg { width: 11px; height: 11px; }
.props .sigdots { display: inline-flex; gap: 4px; }
.props .sigdots i { width: 9px; height: 9px; border-radius: 50%; }
.props .avail-mini { display: inline-flex; align-items: center; gap: 6px; }
.trustdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.table-empty, .map-empty {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--gray-400); font-family: var(--font-display); text-align: center;
}
.table-empty svg, .map-empty svg { width: 40px; height: 40px; color: var(--gray-200); }
.is-empty .table-empty, .is-empty .map-empty { display: flex; }

/* ── System graph view ─────────────────────────────────── */
.sysview { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--gray-100); overflow-y: auto; }
.sysview__head { padding: 16px 28px; border-bottom: 1px solid var(--gray-160); background: var(--white); }
.sysview__title { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--blue-100); letter-spacing: -0.01em; }
.sysview__sub { font-size: 13px; color: var(--gray-400); margin-top: 4px; max-width: 720px; line-height: 1.5; }
/* welcome / landing treatment */
.sysview__head--welcome { text-align: center; padding: 30px 28px 24px; }
.sysview__logo { height: 30px; width: auto; display: block; margin: 0 auto 16px; }
.sysview__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-120); margin-bottom: 6px; }
.sysview__head--welcome .sysview__title { font-size: 15px; font-weight: 600; color: var(--gray-400); }
.sysview__headline { font-family: var(--font-display); font-weight: 700; font-size: 36px; color: var(--blue-100); letter-spacing: -0.02em; line-height: 1.1; margin: 2px 0 6px; }
.sysview__head--welcome .sysview__sub { max-width: 760px; margin: 8px auto 0; text-align: center; font-size: 13.5px; }
.sysview__cta { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.sysview__cta .btn { padding: 11px 20px; font-size: 14px; }
.graph-canvas { position: relative; flex: 1 0 auto; overflow: hidden; min-height: 600px; }
.graph-svg { position: absolute; inset: 0; }
.graph-colhead { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; fill: var(--gray-200); }
.gedge { transition: opacity .18s, stroke-width .18s; opacity: .9; }
.graph--focus .gedge { opacity: .12; }
.graph--focus .gedge.is-hi { opacity: 1; }
.graph--focus .gedge.is-dim { opacity: .07; }

.gnode {
  position: absolute; background: var(--white); border: 1px solid var(--gray-160);
  border-radius: 10px; box-shadow: var(--shadow-sm);
  padding: 9px 13px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  transition: box-shadow .16s, transform .16s, opacity .18s, border-color .16s;
  overflow: hidden;
}
.gnode.is-clickable { cursor: pointer; }
.gnode.is-clickable:hover { box-shadow: var(--shadow-md); }
.graph--focus .gnode { opacity: .34; }
.graph--focus .gnode.is-hi { opacity: 1; }
.graph--focus .gnode.is-hi { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.gnode__tag { font-family: var(--font-display); font-weight: 700; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); }
.gnode__title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--blue-100); line-height: 1.1; }
.gnode__sub { font-size: 10.5px; color: var(--gray-400); line-height: 1.2; }
.gnode__mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 10.5px; font-weight: 600; color: var(--blue-100); white-space: nowrap; }
.gnode__count { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--green-120); font-variant-numeric: tabular-nums; }
.gnode__count span { font-family: var(--font-body); font-weight: 400; font-size: 10px; color: var(--gray-400); }
.gnode__count--sig { color: var(--blue-100); }
.gnode__sigtop { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--blue-100); }
.gnode__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.gnode--source { background: var(--blue-100); border-color: var(--blue-100); }
.gnode--source .gnode__tag { color: rgba(255,255,255,.5); }
.gnode--source .gnode__title { color: #fff; }
.gnode--source .gnode__count { color: var(--green-80); }
.gnode--source .gnode__count span { color: rgba(255,255,255,.6); }
.gnode--signal { border-left: 3px solid var(--sig, var(--gray-200)); }
.gnode--score { background: var(--green-40); border-color: var(--green-60); }
.gnode--score .gnode__title { color: var(--green-120); }
.gnode--output { background: var(--white); border-color: var(--green-100); border-width: 1.5px; }

/* system-graph info panel (explains each step on hover) */
.sys-info {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: min(700px, calc(100% - 56px));
  background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--gray-160); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 14px 18px; z-index: 20;
  pointer-events: none;
}
.sys-info__hint { font-size: 13px; color: var(--gray-400); text-align: center; }
.sys-info__hint b { color: var(--blue-100); font-family: var(--font-display); font-weight: 600; }
.sys-info__tag { font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); }
.sys-info__title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--blue-100); margin-top: 2px; letter-spacing: -0.01em; }
.sys-info__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.sys-info__chip { font-family: var(--font-display); font-weight: 600; font-size: 11px; color: #fff; padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.sys-info__chip--n { background: var(--gray-120); color: var(--blue-100); }
.sys-info__desc { font-size: 13px; color: var(--blue-100); line-height: 1.55; margin-top: 9px; }

/* ── Provenance (drawer) ───────────────────────────────── */
.section--prov { background: var(--gray-100); }
.prov-svg { display: block; margin: 0 0 12px; }
.prov-empty { font-size: 12.5px; color: var(--gray-400); line-height: 1.5; }
.prov-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--gray-120); }
.prov-seg { height: 100%; }
.prov-seg--rem { background: transparent; }
.prov-barscale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--gray-400); margin-top: 5px; font-variant-numeric: tabular-nums; }
.prov-barscale span:last-child { font-family: var(--font-display); font-weight: 600; color: var(--blue-100); }
.prov-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 11px; }
.prov-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--blue-100); white-space: nowrap; }
.prov-leg__d { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

/* ── Detail drawer ──────────────────────────────────────── */
.drawer {
  position: absolute; top: 0; right: -448px; bottom: 0; width: 416px;
  background: var(--white); box-shadow: var(--shadow-lg);
  transition: right .28s cubic-bezier(.4,.0,.2,1);
  z-index: 700; display: flex; flex-direction: column;
}
.drawer.open { right: 0; }
.drawer__scroll { overflow-y: auto; flex: 1; }
.drawer__head {
  padding: 20px 22px 18px; border-bottom: 1px solid var(--gray-160);
  position: relative;
}
.drawer__close {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 30px; height: 30px; border-radius: 8px; border: 0; background: var(--gray-100);
  color: var(--gray-400); display: inline-flex; align-items: center; justify-content: center;
}
.drawer__close:hover { background: var(--gray-160); color: var(--blue-100); }
.drawer__close svg { width: 15px; height: 15px; }
.drawer__addr { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--blue-100); line-height: 1.15; padding-right: 38px; letter-spacing: -0.01em; }
.drawer__loc { font-size: 13px; color: var(--gray-400); margin-top: 6px; }
.drawer__loc b { color: var(--blue-100); font-weight: 500; }
.drawer__scoreline { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.drawer__badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }

.section { padding: 18px 22px; border-bottom: 1px solid var(--gray-120); }
.section:last-child { border-bottom: 0; }
.section__title {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gray-400);
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.section--distress .section__title { color: var(--danger); }
.section--distress { background: #FEF6F6; }
.drow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 6px 0; }
.drow__k { font-size: 13px; color: var(--gray-400); flex-shrink: 0; white-space: nowrap; }
.drow__v { font-size: 13.5px; color: var(--blue-100); font-weight: 500; text-align: right; font-family: var(--font-body); }
.drow__v.big { font-family: var(--font-display); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.drow__v .sub { display: block; font-weight: 400; font-size: 11.5px; color: var(--gray-400); margin-top: 2px; }

.trustbadge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-weight: 600; font-size: 10px;
  padding: 2px 7px; border-radius: var(--radius-pill); margin-left: 7px;
  letter-spacing: .02em; vertical-align: middle;
}
.trustbadge--live { background: var(--green-40); color: var(--green-120); }
.trustbadge--stale { background: var(--gray-120); color: var(--gray-400); }
.trustbadge svg { width: 9px; height: 9px; }

.flagchips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.flagchip {
  font-family: var(--font-body); font-weight: 500; font-size: 11px;
  padding: 3px 9px; border-radius: var(--radius-tight);
  background: rgba(225,23,23,.08); color: var(--danger); white-space: nowrap;
}
.drawer__foot { padding: 14px 22px; border-top: 1px solid var(--gray-160); display: flex; gap: 10px; }
.drawer__foot .btn { flex: 1; justify-content: center; }

/* contact mini */
.contact { display: flex; align-items: center; gap: 10px; }
.contact__av { width: 34px; height: 34px; border-radius: 50%; background: var(--green-40); color: var(--green-120); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; flex-shrink: 0; }

/* ── Tweaks panel ───────────────────────────────────────── */
.twk { position: fixed; right: 16px; bottom: 16px; z-index: 2147483646; width: 264px;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: .5px solid rgba(255,255,255,.7); border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 44px rgba(16,36,66,.22);
  font-family: var(--font-body); color: var(--blue-100); display: none; flex-direction: column; overflow: hidden; }
.twk.open { display: flex; }
.twk__hd { display: flex; align-items: center; justify-content: space-between; padding: 11px 10px 11px 15px; cursor: move; user-select: none; border-bottom: .5px solid rgba(16,36,66,.08); }
.twk__hd b { font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.twk__x { border: 0; background: transparent; color: var(--gray-400); width: 24px; height: 24px; border-radius: 7px; font-size: 15px; line-height: 1; }
.twk__x:hover { background: rgba(16,36,66,.07); color: var(--blue-100); }
.twk__body { padding: 6px 15px 15px; display: flex; flex-direction: column; gap: 13px; max-height: 70vh; overflow-y: auto; }
.twk__sect { font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-400); padding-top: 8px; }
.twk__sect:first-child { padding-top: 2px; }
.twk__row { display: flex; flex-direction: column; gap: 6px; }
.twk__lbl { font-size: 12px; font-weight: 500; color: var(--blue-100); display: flex; justify-content: space-between; }
.twk__lbl span { color: var(--gray-400); font-variant-numeric: tabular-nums; }
.twk__seg { display: flex; padding: 2px; gap: 2px; background: rgba(16,36,66,.07); border-radius: 8px; }
.twk__seg button { flex: 1; border: 0; background: transparent; font-family: var(--font-body); font-weight: 500; font-size: 11.5px; color: var(--gray-400); padding: 6px 4px; border-radius: 6px; transition: all .14s; }
.twk__seg button[aria-pressed="true"] { background: #fff; color: var(--blue-100); box-shadow: var(--shadow-sm); font-weight: 600; }
.twk__swatches { display: flex; gap: 8px; }
.twk__swatch { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; box-shadow: var(--shadow-sm); }
.twk__swatch[aria-pressed="true"] { border-color: var(--blue-100); }
.twk__toggle { display: flex; align-items: center; justify-content: space-between; }
.twk__switch { width: 38px; height: 22px; border-radius: 999px; background: var(--gray-200); border: 0; position: relative; transition: background .15s; flex-shrink: 0; }
.twk__switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left .15s; }
.twk__switch[aria-pressed="true"] { background: var(--accent); }
.twk__switch[aria-pressed="true"]::after { left: 18px; }

/* scrollbars */
.rail::-webkit-scrollbar, .drawer__scroll::-webkit-scrollbar, .tablewrap::-webkit-scrollbar, .twk__body::-webkit-scrollbar { width: 9px; height: 9px; }
.rail::-webkit-scrollbar-thumb, .drawer__scroll::-webkit-scrollbar-thumb, .tablewrap::-webkit-scrollbar-thumb, .twk__body::-webkit-scrollbar-thumb { background: var(--gray-160); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
.rail::-webkit-scrollbar-thumb:hover, .tablewrap::-webkit-scrollbar-thumb:hover { background: var(--gray-200); background-clip: content-box; }