/* =====================================================================================
   Felix Intelligence — visual system (2 Sep 2026)
   One sheet, loaded AFTER the inline styles so it wins on equal specificity.
   Rules: FELIX_DESIGN_RULES.md — no gold; rust #B0452F for true negatives only; areas in ft².
   Tokens · radius · card spec · hover/glass · chart surfaces · treemap · pills · focus.
   ===================================================================================== */

:root{
  /* palette (unchanged tokens, restated so this sheet is self-describing) */
  --bg:#F8FBF9; --ink:#0E382E; --deep:#0B2D25; --teal:#1F7A63; --cel:#8FD6BD;
  --mut:#4A685F; --caution:#4A685F; --rust:#B0452F;
  --line:#DCE7E2; --line2:#EAF1EE; --wash:#F2F8F5;
  /* sequential price classes — the platform's one price vocabulary */
  --px-value:#8FD6BD; --px-mid:#1F7A63; --px-prime:#0E382E;
  /* categorical, max five */
  --cat-1:#0E382E; --cat-2:#1F7A63; --cat-3:#8FD6BD; --cat-4:#4A685F; --cat-5:#C6D5CE;
  /* radius */
  --r-data:2px; --r-card:6px; --r-pill:99px;
  /* elevation */
  --sh-card:0 1px 2px rgba(14,56,46,.04);
  --sh-lift:0 10px 28px rgba(14,56,46,.08), 0 1px 0 rgba(255,255,255,.7) inset;
  --sh-float:0 8px 24px rgba(11,45,37,.12);
  /* type scale */
  --t-10:10px; --t-11:11px; --t-12:12.5px; --t-14:14px; --t-17:17px; --t-24:24px; --t-32:32px;
  --mono:'IBM Plex Mono',monospace;
}

/* ---------- surfaces: one card spec ---------------------------------------------- */
.card,.dv-card,.stat,.rtk,#tab-leasing .rtk,.dvm-box,#mapfilters,#bresults,#felixdrawer{
  border-radius:var(--r-card) !important;
  box-shadow:var(--sh-card);
  transition:box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.card:hover,.dv-card:hover,.stat:hover,.rtk:hover,#tab-leasing .rtk:hover,.dvm-box:hover{
  box-shadow:var(--sh-lift); border-color:#C6D5CE;
}
/* the map card is a viewport, not a tile — no lift */
#map,#map:hover{box-shadow:none}

/* ---------- glass: the sticky chrome lets the page show through ------------------- */
header{
  background:rgba(255,255,255,.76) !important;
  -webkit-backdrop-filter:saturate(160%) blur(10px); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(220,231,226,.9);
}
body.fxshell>#fxside{
  background:rgba(255,255,255,.84) !important;
  -webkit-backdrop-filter:saturate(160%) blur(10px); backdrop-filter:saturate(160%) blur(10px);
}
.txcol,.dv-folio thead th{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#maplegend{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px);border-radius:var(--r-card);box-shadow:var(--sh-float)}

/* ---------- captions, kickers, notes: one mono voice ------------------------------ */
.dv-kick,.dvm-k,.k,.rtcl,.rt-k{font-family:var(--mono);font-size:var(--t-10);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:500}
.note,.dv-note,.dv-parea,.rtnote{color:var(--mut)}
.dv-note{font-size:var(--t-12);line-height:1.5}
.dv-parea,.rtnote{font-size:var(--t-11);line-height:1.45}

/* ---------- KPI tiles: the same figure everywhere --------------------------------- */
.stat,.rtk,#tab-leasing .rtk{padding:16px 18px}
.stat .v,.rtk .v,.dvm-v{font-size:var(--t-24);font-weight:600;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.dv-kpi .v{font-size:var(--t-24)}

/* ---------- pills & chips ---------------------------------------------------------- */
.dv-chip,.rtseg,.rtseg button,#tab-leasing .rtseg{border-radius:var(--r-pill) !important}
.btn,button.btn{border-radius:var(--r-card)}

/* ---------- emphasis in running text is ink, never rust --------------------------- */
.dv-note b,.note b,.rtnote b{color:var(--ink)}

/* ---------- chart surfaces --------------------------------------------------------- */
canvas{border-radius:var(--r-data)}

/* ---------- developer market map (treemap) ---------------------------------------- */
.dvm-map{background:#fff !important;border:0 !important;border-radius:var(--r-data)}
.dvm-cell{
  border:0 !important;border-radius:var(--r-data);padding:8px 9px !important;
  transition:outline-color .12s ease, box-shadow .12s ease;outline:2px solid transparent;outline-offset:-2px;
}
.dvm-cell.prime{background:var(--px-prime) !important;color:#fff}
.dvm-cell.mid{background:var(--px-mid) !important;color:#fff}
.dvm-cell.value{background:var(--px-value) !important;color:var(--ink)}
.dvm-cell.none{background:var(--wash) !important;color:var(--mut)}
.dvm-cell:hover,.dvm-cell:focus-visible{filter:none !important;outline-color:var(--ink);box-shadow:var(--sh-float)}
.dvm-cell.sel{outline-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.dvm-rk{font-family:var(--mono);font-size:var(--t-10);opacity:.7;margin-bottom:2px}
.dvm-nm{font-size:var(--t-12);font-weight:600;line-height:1.2}
.dvm-vl{font-family:inherit !important;font-size:11.5px !important;font-variant-numeric:tabular-nums;opacity:.92 !important;margin-top:2px !important;white-space:nowrap}
.dvm-cell.sm{padding:6px 7px !important}
.dvm-cell.sm .dvm-nm{font-size:var(--t-11);line-height:1.15}
.dvm-cell.sm .dvm-vl{font-size:10.5px !important}
.dvm-cell.sm .dvm-rk,.dvm-cell.xs .dvm-rk,.dvm-cell.xs .dvm-vl{display:none}
.dvm-legend{gap:16px}
.dvm-legend .sw{display:inline-flex;align-items:center;gap:6px}
.dvm-legend .sw i{width:12px;height:12px;border-radius:var(--r-data);display:inline-block}
.dvm-share{border-radius:var(--r-data)}
.dvm-share i{background:var(--ink)}

/* ---------- focus & scrollbars ---------------------------------------------------- */
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
*{scrollbar-width:thin;scrollbar-color:#C6D5CE transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:#C6D5CE;border-radius:var(--r-pill)}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- motion: respect the user ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .card,.dv-card,.stat,.rtk,.dvm-box,.dvm-cell{transition:none}
}

/* ---------- market map rail: three share cuts --------------------------------------- */
.dvm-cuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.dvm-cut .dvm-v{font-size:var(--t-24);line-height:1.1}
.dvm-cut .dvm-k{margin-top:2px}
.dvm-cut .dvm-share{margin:6px 0 4px}
.dvm-un{font-family:var(--mono);font-size:var(--t-10);letter-spacing:.02em;opacity:.85;margin-top:3px;white-space:nowrap;line-height:1.25}
.dvm-un+.dvm-un{margin-top:1px}
.dvm-cell.sm .dvm-un{font-size:9.5px}
.dvm-cell.xs .dvm-vl{font-size:10px !important}
.dvm-units{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}
.dvm-units .dvm-v{font-size:var(--t-17);line-height:1.1}

/* ---------- leasing drill: market -> community -> building (2 Sep 2026) ---------- */
.lz-crumb{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--t-11);letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin:10px 0 12px}
.lz-crumb a{color:var(--teal);text-decoration:none;border-bottom:1px solid transparent}
.lz-crumb a:hover{border-bottom-color:var(--teal)}
.lz-crumb span{color:var(--ink);font-weight:500}
.lz-crumb i{font-style:normal;color:#C6D5CE}
.lz-search{font-family:var(--mono);font-size:10.5px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px;min-width:240px;outline:none}
.lz-search:focus{border-color:var(--teal)}
.lz-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:4px 0 12px}
.lz-h b{font-size:var(--t-17);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.lz-h span{font-size:var(--t-12);color:var(--mut)}
.lz-kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-bottom:14px}
.lz-kpis .rtk.lz-k{padding:12px 14px}
.lz-kpis .rtk.lz-k .v{font-size:var(--t-17) !important;margin-top:5px}
.lz-chart{position:relative;height:300px}
.lz-scroll{max-height:560px}
#lzTable tbody tr.sel td{background:var(--wash)}
#lzTable tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--ink)}
#lzTable .rtflag{margin-left:6px}
@media(max-width:1180px){.lz-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* 2 Sep 2026 · v11 · data-feed sentinel pill + panel in the stat bar */
.statbar{position:relative}
.fp-wrap{justify-content:center}
.fp-pill{font-family:var(--mono);font-size:var(--t-10);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px 5px 9px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;line-height:1.4}
.fp-pill:hover{color:var(--ink);border-color:var(--ink)}
.fp-pill b{color:var(--ink);font-weight:600}
.fd{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none}
.fd-lagging{background:var(--mut)}
.fd-stale,.fd-anomaly{background:var(--rust)}
.fp-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:min(560px,92vw);background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-float);padding:12px 14px;text-align:left}
.fp-h{font-size:var(--t-11);color:var(--mut);line-height:1.45;padding-bottom:9px;margin-bottom:6px;border-bottom:1px solid var(--line2)}
.fp-row{display:grid;grid-template-columns:14px 1fr auto;column-gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line2);font-size:var(--t-12)}
.fp-row:last-child{border-bottom:0}
.fp-row .fd{align-self:center}
.fp-l{color:var(--ink);font-weight:500}
.fp-d{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.fp-s{grid-column:2;font-family:var(--mono);font-size:var(--t-10);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.fp-bad{grid-column:2/4;font-size:var(--t-11);color:var(--rust)}
.fp-n{grid-column:2/4;font-size:var(--t-11);color:var(--mut);line-height:1.4}
