/* Retail Command — site styles (design lineage: Retail Command DIRECT / v2 mockup)
   Design-system sweep 2026-08-17 (DESIGN_REVIEW.md, Phil-ratified):
   - type: 7 sizes / 3 weights (HW Nuckle 400/500/600 — NEVER 700+, the font
     doesn't ship them and browsers synthesize a smeared fake bold)
   - overlines: one spec — var(--t-micro)/600/var(--track-micro)/uppercase
   - spacing: 4px grid (see --s-* tokens)
   - one table contract: th micro, td body, first/last cell bleeds to card
     edge, numbers right + tabular, neutral hover
   - red demoted from UI states (hovers, links-at-rest, active tabs) — red =
     stage semantics, true alerts, and the primary CTA only
   Cohesion pack 2026-08-18 (Phil-ratified off the preview board; sources:
   cursor/vercel/linear DESIGN.md):
   - elevation: cards = stacked micro-shadows + 1px inset ring (--shadow-card),
     NOT border + drop; hover lift = --shadow-card-lift
   - radius tiers: 4 badges / 6 controls / 8 cards, no exceptions
   - overlines + table headers: mono caps (--mono/500/--track-mono);
     th sits on a faint sand band; body/names/figures stay HW Nuckle
   - sidebar active row: 2px red left-edge indicator + faint sand fill */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--charcoal); /* dark shell canvas (8.14-prototype wrap, Phil-ruled 2026-08-18) */
  color: var(--text-on-light);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  min-width: 1180px; /* desktop-only, read-only explorer */
}
a { color: inherit; text-decoration: none; }
b, strong { font-weight: var(--fw-semibold); } /* ban synthesized 700 */

/* one overline to rule them all — mono caps (cohesion pack 2026-08-18) */
.ovl, .card-title, .lbl, .tile .k, .nav-sep, .page-head .count-pill, .conf-pill,
table.data th, table.tb th, .kan-head .t, .map-side .head .cnt {
  font-family: var(--font); font-size: var(--t-micro); font-weight: var(--fw-medium);
  letter-spacing: var(--track-mono); text-transform: uppercase;
}
/* card titles sit one step above column headers (Stage 2 hierarchy split) */
.card-title, .lbl { font-size: var(--t-title); }
/* neutral in-content link: rests ink, warms on hover */
.lnk { color: var(--charcoal); font-weight: 600; cursor: pointer; }
.lnk:hover { color: var(--red); text-decoration: underline; }

/* ---------- shell ----------
   Wrap-around dark shell (Phil-ruled 2026-08-18, from the 8.14 prototype):
   charcoal fills the whole window; the content area is a rounded light panel
   floating on it with a visible dark gutter top/right/bottom. The sidebar is
   nav resting directly on the dark canvas — not a panel. The shell stays
   fixed; scrolling happens INSIDE the rounded panel. */
.shell { display: flex; height: 100vh; overflow: hidden; --shell-gap: 10px; }

.sidebar {
  width: 216px; flex: none; color: var(--text-muted);
  display: flex; flex-direction: column; padding: 16px 12px;
}
.brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 20px; }
.brand img { width: 26px; height: 24px; }
.brand .t { font: 600 14px var(--font); letter-spacing: .06em; color: var(--sand); }
.brand .s { font: 500 9.5px var(--font); letter-spacing: .14em; color: var(--text-faint); }

.nav-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 6px;
  border-left: 2px solid transparent; border-radius: 0 var(--radius-ctl) var(--radius-ctl) 0;
  font: 500 var(--t-ui) var(--font); cursor: pointer; user-select: none;
  color: var(--mut);
}
.nav-item:hover { color: var(--sand); }
.nav-item.active {
  color: var(--sand); font-weight: 600;
  border-left-color: var(--red); background: rgba(251, 248, 243, .05);
}
.nav-sep { margin: 16px 8px 4px; color: var(--nav-faint); }
.sidebar .foot { margin-top: auto; padding: 8px; font: 500 10px var(--font); color: var(--nav-faint); line-height: 1.6; }
.conf-pill {
  display: inline-block; border: 1px solid var(--line-d); border-radius: 4px;
  padding: 3px 8px; color: var(--mut);
}
.nav-count { margin-left: auto; color: var(--text-faint); font: inherit; font-weight: 500; }
.nav-item.active .nav-count, .nav-item:hover .nav-count { color: inherit; }

.main {
  flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--bg-light);
  margin: var(--shell-gap) var(--shell-gap) var(--shell-gap) 0;
  border-radius: 12px;
  scrollbar-gutter: stable; /* short pages don't shift 7px vs scrolling pages */
}

/* ---------- page chrome ---------- */
/* ONE content width for every standard page (Phil-ruled 2026-08-18: the
   fluid-list/capped-detail hybrid made navigation jump widths — smoothness
   wins). Lists and details share the same 1400px centered cap; only the map
   stays full-bleed (spatial surface, not a reading surface). */
.page-body, .back-strip, .dp-head {
  max-width: 1400px; margin-left: auto; margin-right: auto;
}
/* sticky panel band (Phil-ratified 8/18, v4 lineage): the section title is the
   panel's own header — full panel width, hairline below, pinned while content
   scrolls under the curve. Text inside stays on the 1400px column. */
.page-head {
  position: sticky; top: 0; z-index: 500;
  background: var(--bg-light); border-bottom: 1px solid var(--line);
}
.page-head-in {
  max-width: 1400px; margin: 0 auto; padding: 0 var(--s-8);
  height: 56px; display: flex; align-items: center; gap: var(--s-3);
}
/* workspace pages (pipeline, map) are full-width — their band content is too */
.page-head-in.wide { max-width: none; margin: 0; padding: 0 var(--s-6); }
.page-head .title { font: 600 var(--t-h1) var(--font); letter-spacing: .04em; }
.page-head img.arrow { width: 26px; height: 15px; flex: none; }
.page-head .count-pill {
  color: var(--ink-3); border: 1px solid rgba(25,24,24,.22); border-radius: 4px; padding: 3px 8px;
}
.page-body { padding: var(--s-6) var(--s-8) 40px; }

/* entity identity heading (detail pages — band shows the section, this shows the entity) */
.ent-head { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-4) var(--s-8) 0;
  max-width: 1400px; margin: 0 auto; }
.ent-head h1 { font: 600 var(--t-h1) var(--font); letter-spacing: -0.01em; }
.ent-head .ent-meta { font: 400 var(--t-caption) var(--font); color: var(--ink-3); }

/* tenant key-facts as a horizontal two-column section (Phil-ratified 8/18, v4 lineage) */
.kv-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; grid-auto-flow: row; }
.dcard.kf-card { padding: 12px 20px; } /* kv rows are short — tighter vertical padding */

.card {
  background: var(--clear-white); box-shadow: var(--shadow-card);
  border-radius: var(--radius-card); padding: 20px; min-width: 0;
}
.card + .card { margin-top: var(--s-3); }
.card .card-title { color: var(--ink-3); margin-bottom: var(--s-3); }

/* Stage 3: lifted titles — label on the sand, card holds only content */
.card-group > .title-above { margin: 0 0 7px 2px !important; color: var(--ink-3); display: block; }
.card-group + .card-group, .card-group + .card, .card + .card-group,
.card-group + details.evidence, details.evidence + .card-group { margin-top: var(--s-4); }
/* horizontal card rows: the vertical stacking margin must not stagger grid columns */
.card-row > .card-group, .card-row > .card { margin-top: 0 !important; }
/* stretch each card's white box to fill its equalized grid cell, so all
   cards share top AND bottom edges regardless of differing content height */
.card-row > .card-group { display: flex; flex-direction: column; }
.card-row > .card-group > .dcard { flex: 1 1 auto; }
/* Tenancy/Financials tab sections: one uniform gap from the container, and
   the card-group stacking margin neutralized so mixed children (metric row,
   hoisted cards, sub-grids) all space equally — matching the 32px Overview
   rhythm (Phil 2026-08-19). */
.dp-sections { display: grid; gap: var(--s-8); align-content: start; }
.dp-sections > .card-group { margin-top: 0 !important; }

/* ---------- tables: ONE contract ---------- */
table.data, table.tb { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
table.data th, table.tb th {
  position: relative; text-align: left; color: var(--ink-3);
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); white-space: nowrap;
  cursor: default; user-select: none;
  background: var(--sand); /* faint header band (cohesion pack) */
}
table.data td, table.tb td {
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid rgba(25,24,24,.07);
  vertical-align: top;
}
/* .tb rows are single-line now — center cell content so text sits on the row's
   midline (not above the taller notes icon) (Phil 2026-08-19) */
table.tb td { vertical-align: middle; }
/* list tables (Properties/Tenants/Brokers): center cell content on the row
   midline so single-line columns don't sit high against a 2-line name cell
   (Phil 2026-08-19) */
table.data td { vertical-align: middle; }
/* List tables: every column centered except the first (name column).
   .data.<name> specificity beats the .num right-align. */
table.data.tenants-tb th:not(:first-child), table.data.tenants-tb td:not(:first-child),
table.data.deals-tb th:not(:first-child), table.data.deals-tb td:not(:first-child),
table.data.markets-tb th:not(:first-child), table.data.markets-tb td:not(:first-child) { text-align: center; }
/* first column carries a small left indent (Phil 2026-08-19) so a highlighted
   row has breathing room and text never sits flush against the card edge */
table.data th:first-child, table.data td:first-child,
table.tb th:first-child, table.tb td:first-child { padding-left: var(--s-2); }
table.data th:last-child, table.data td:last-child,
table.tb th:last-child, table.tb td:last-child { padding-right: 0; }

table.data th.sortable { cursor: pointer; }
/* Stage 4: sortable columns show a resting ↕ affordance; active sort is dark */
.sort-arrow { display: inline-block; width: 12px; text-align: right; color: var(--mut); }
.sort-arrow.on { color: var(--charcoal); }
th.sortable:hover .sort-arrow { color: var(--ink-2); }
table.data th.num, table.data td.num, table.tb .r { text-align: right; font-variant-numeric: tabular-nums; }
table.data th.ctr, table.data td.ctr, table.tb .c { text-align: center; }
table.data tr.click { cursor: pointer; }
table.data tr.click:hover td { background: var(--hover-row); }
table.data tr.total td, table.tb tr.grand td { font-weight: 600; border-top: 1px solid var(--charcoal); }
table.tb tr:last-child td { border-bottom: none; }
/* tables that want a closing line under the last row (Phil 2026-08-19) */
table.tb-botline tr:last-child td { border-bottom: 1px solid rgba(25,24,24,.12); }
/* Cash-flow table: one consistent sans font throughout — the year headers were
   the technical mono/uppercase overline while labels + values were sans
   (Phil 2026-08-19). Numbers keep tabular alignment via .mn. */
table.fin-table th { font-family: var(--font); font-size: inherit; font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0.02em; color: var(--ink-2); }
table.tb tr.sum td { border-top: 1px solid rgba(25,24,24,.30); }
/* Top-tenants summary rows (Additional / Vacant): a very light tint + a soft
   light-gray divider above them, so the per-tenant rows and the roll-up read
   as two distinct sections (Phil 2026-08-19). */
table.tb tr.subrows td { background: rgba(25,24,24,.022); }
table.tb tr.divrule td { border-top: 1px solid rgba(25,24,24,.15); }
table.tb tr.grand td { background: var(--sand-2); }
/* Rent-roll notes: one compact pill per row (keeps every row a single line);
   hover to peek, click to pin open via :focus-within (Phil 2026-08-19). */
.notes-pill { position: relative; display: inline-flex; cursor: pointer; outline: none; }
.np-btn { display: inline-flex; align-items: center; color: var(--ink-3); transition: color .12s, transform .12s; }
.notes-pill:hover .np-btn, .notes-pill:focus-within .np-btn { color: var(--red); transform: scale(1.08); }
.np-pop { display: none; position: absolute; top: 100%; right: 0; z-index: 60; width: 320px; max-height: 260px;
  overflow-y: auto; background: var(--clear-white); border: 1px solid rgba(25,24,24,.16); border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0,0,0,.16); padding: 8px 12px; text-align: left; white-space: normal;
  font-size: 12px; line-height: 1.5; color: #4A4843; cursor: default; }
.notes-pill:hover .np-pop, .notes-pill:focus-within .np-pop { display: block; }
.np-line { padding: 4px 0; border-bottom: 1px solid rgba(25,24,24,.06); }
.np-line:last-child { border-bottom: none; }
table.tb tr.hl-egr td { background: var(--red-tint); border-top: 1px solid var(--charcoal); font-weight: 600; }

.col-resize { position: absolute; top: 0; right: -5px; width: 10px; height: 100%; cursor: col-resize; z-index: 2; }
.col-resize::after { content: ""; position: absolute; right: 4px; top: 22%; height: 56%; width: 1px; background: transparent; }
.col-resize:hover::after { background: var(--ink-3); }

/* ---------- pills / chips / badges: TWO shapes ---------- */
/* shape 1: rect badge (semantic labels) */
.badge, .stage-pill, .floz, .note-dot {
  display: inline-block; font: 600 var(--t-micro) var(--font); letter-spacing: .05em;
  border-radius: 4px; padding: 2px 8px; white-space: nowrap; vertical-align: 1px;
}
.badge.red { color: #fff; background: var(--red); }
.badge.muted { color: var(--ink-3); border: 1px solid rgba(25,24,24,.25); }
.badge.amber { color: var(--amber-text); background: var(--amber-fill); }
.badge.green { color: #fff; background: var(--green); }
.badge.gray-fill { color: var(--ink-2); background: rgba(25,24,24,.07); }

.stage-pill { padding: 3px 10px; }
.stage-Screening { color: var(--stage-screening); border: 1.5px solid var(--stage-screening); }
.stage-Chasing   { color: #fff; background: var(--stage-chasing); }
.stage-UC        { color: var(--charcoal); background: var(--stage-uc); } /* charcoal on gold — white fails contrast */
.stage-Closed    { color: #fff; background: var(--stage-closed); }
.stage-Passed    { color: var(--ink-3); border: 1px solid rgba(25,24,24,.25); }

/* shape 2: round interactive chip (filters) */
.chip {
  padding: 4px 10px; border-radius: 999px; font: 500 var(--t-caption) var(--font); cursor: pointer;
  user-select: none; border: 1px solid rgba(25,24,24,.18); color: var(--ink-3);
  background: transparent; display: inline-block;
}
.chip.on { border-color: var(--red); color: var(--red); background: rgba(184,35,42,.06); }

.quality-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.q-anchor { background: var(--charcoal); }
.q-national { background: var(--red); }
.q-local { background: var(--light-gold); }
.q-vacant { background: transparent; border: 1px solid var(--ink-3); }

/* ---------- stat cards: ONE component ---------- */
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); margin-bottom: var(--s-3); }
.tile {
  background: var(--clear-white); box-shadow: var(--shadow-card); border-radius: var(--radius-card);
  padding: 14px 16px;
}
.tile .k { color: var(--ink-3); margin-bottom: var(--s-2); }
.tile .v { font: 600 var(--t-stat) var(--font); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.tile .v .unit { font: 500 var(--t-ui) var(--font); color: var(--ink-2); margin-left: 2px; }
.tile .sub { font: 400 var(--t-caption) var(--font); color: var(--ink-3); margin-top: 6px; line-height: 1.45; }
.tile.band-green { border-top: 3px solid var(--green); }
.tile.band-amber { border-top: 3px solid var(--amber); }
.tile.band-red { border-top: 3px solid var(--red); }

/* ---------- deal page (Cortlandt DIRECT lineage: left content + 340px right rail) ---------- */
/* one sand canvas — the white header band is gone (Phil-ruled 2026-08-18);
   header identity + stats live on a white card like every other surface */
.dp-canvas {
  max-width: 1400px; min-width: 1020px; margin: 0 auto; background: var(--bg-light);
  min-height: calc(100% - 56px); /* fill the panel below the sticky band */
}
.back-strip { padding: var(--s-3) var(--s-8) 0; }
.back-strip span { font: 600 var(--t-body) var(--font); color: var(--ink-2); cursor: pointer; }
.back-strip span:hover { color: var(--charcoal); text-decoration: underline; }

.dp-head { padding: var(--s-4) var(--s-8) 0; }
.dp-head .toprow {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--clear-white); box-shadow: var(--shadow-card);
  border-radius: var(--radius-card); padding: 20px;
}
.dp-photo, .th-logo {
  flex: none; width: 64px; height: 64px; border-radius: 6px; background: var(--charcoal);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font: 600 var(--t-stat) var(--font);
}
.dp-id { min-width: 0; margin-right: var(--s-3); }
.dp-id h1 { margin: 0; font: 600 var(--t-h1) var(--font); line-height: 1.1; }
.dp-id .l1, .dp-id .l2 { font-size: var(--t-body); color: var(--ink-2); margin-top: 4px; }
.dp-id .l2 { margin-top: 2px; }
.dp-stats { display: flex; gap: var(--s-2); margin-left: auto; }
/* header stat tiles: sand inset panes on the white header band — surface step,
   not border/shadow (white-on-white shadow is invisible; cohesion pack) */
.dp-stat {
  background: var(--sand); border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 1px rgba(25, 24, 24, .05);
  padding: 12px 14px; min-width: 94px;
}
.dp-stat .lbl { display: block; }
.dp-stat .v { font-size: 18px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dp-stat .v.red { color: var(--red); }
.dp-stat .sub { font: 400 var(--t-caption) var(--font); color: var(--ink-3); margin-top: 3px; }
.dp-tabs { display: flex; gap: var(--s-6); margin-top: var(--s-4); }
.dp-tab {
  padding: 0 2px 10px; font: 500 var(--t-ui) var(--font); cursor: pointer; user-select: none;
  border-bottom: 2px solid transparent; color: var(--ink-2);
}
.dp-tab.active { border-color: var(--charcoal); color: var(--charcoal); font-weight: 600; }
.dp-head.th-head { padding-bottom: var(--s-4); }

.dp-body { padding: var(--s-4) var(--s-8) 40px; }
.dp-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--s-6); align-items: start; }
/* sparse (screening-level) deals: narrower single-column composition —
   margin reads as intent, not absence (Stage 3) */
.dp-grid.dp-sparse { grid-template-columns: 1fr; max-width: 780px; margin: 0 auto; }
.dp-main { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.dp-rail { display: grid; gap: var(--s-3); align-content: start; }

.dcard {
  background: var(--clear-white); box-shadow: var(--shadow-card);
  border-radius: var(--radius-card); padding: 20px; min-width: 0;
}
.dp-rail .dcard { padding: 16px; font-size: var(--t-body); }

/* section headers (Executive Summary / Key Facts / …): softer sans-serif with
   airier tracking instead of the technical mono overline (Phil 2026-08-19) */
.lbl { color: var(--ink-3); font-family: var(--font); font-weight: var(--fw-medium); letter-spacing: 0.1em; }
.mn { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.est {
  display: block; padding: var(--s-3) var(--s-4); background: var(--sand-2);
  border: 1px dashed rgba(25,24,24,.22); border-radius: 6px;
  font-size: var(--t-body); line-height: 1.55; color: var(--ink-2);
}

/* demo key-value rows */
.dkv { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: 6px 0; border-bottom: 1px solid rgba(25,24,24,.08); font-size: var(--t-body); }
.dkv:last-child { border-bottom: none; }
/* label only: a bare ".dkv span" also hit editable values (span.ed), turning them gray */
.dkv > span { color: var(--ink-2); }
.dkv b { font-weight: 600; text-align: right; color: var(--charcoal); }
.addr-l2 { display: block; }

/* screening flag lozenges */
.flagrow { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid rgba(25,24,24,.08); align-items: start; font-size: var(--t-body); line-height: 1.5; }
.flagrow:first-child { padding-top: 2px; }
.flagrow:last-child { border-bottom: none; padding-bottom: 2px; }
/* WATCH / NOTE / GATE badges share one box size (full column, centered) so
   they line up regardless of label length; nudged to sit on the first text line */
.flagrow .floz { width: 100%; box-sizing: border-box; text-align: center; letter-spacing: .05em; padding: 3px 0; margin-top: 1px; }
.floz.gate { color: #fff; background: var(--red); }
.floz.watch { color: var(--red); border: 1px solid var(--red); }
.floz.note { color: var(--ink-2); border: 1px solid rgba(25,24,24,.25); }

/* dot bullets */
.dots { display: grid; gap: var(--s-3); font-size: var(--t-ui); line-height: 1.55; }
.dots > div { display: flex; gap: var(--s-3); }
.dots .d { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--charcoal); margin-top: 7px; }
.dots.red .d { background: var(--red); }

/* NOI mini bars */
.nbar-row { display: flex; gap: var(--s-2); align-items: flex-end; padding: var(--s-4) 0 2px; }
.nbar { flex: 1; text-align: center; }
.nbar .top { font: 500 10px var(--font); color: var(--ink-2); }
.nbar .bar { border-radius: 4px 4px 0 0; }
.nbar .cap { font: 500 10px var(--font); margin-top: 4px; color: var(--ink-2); }
.cagr-pill { display: flex; justify-content: space-between; margin-top: var(--s-2); background: var(--red-tint); padding: var(--s-2) var(--s-3); border-radius: 6px; font-size: var(--t-body); }

/* expiration bars */
.exp-row { display: flex; gap: var(--s-2); align-items: flex-end; padding: 6px 4px 0; }
.exp-col { flex: 1; text-align: center; cursor: pointer; }
.exp-col .top { font: 500 10px var(--font); color: var(--ink-2); }
.exp-col .stack { display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; }
.exp-col .cap { font: 500 10px var(--font); margin-top: 4px; color: var(--ink-2); }
.exp-col.sel .cap { color: var(--charcoal); font-weight: 600; }
.exp-col:hover .stack { opacity: .82; }

.sparse-note {
  font: 400 var(--t-caption) var(--font); color: var(--ink-3); font-style: italic;
  padding: var(--s-2) 0 0;
}
.dash { color: var(--ink-3); }

/* ---------- expiration chart ---------- */
.exp-chart { margin: 6px 0 4px; }
.exp-legend { display: flex; gap: var(--s-4); font: 500 var(--t-caption) var(--font); color: var(--ink-2); margin-bottom: var(--s-2); align-items: center; }
.exp-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.exp-chart svg text { font-family: var(--font); }
.exp-bar { cursor: pointer; }
.exp-bar:hover { opacity: .82; }

/* ---------- misc ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); align-items: start; }
.bullets { padding-left: 18px; font-size: var(--t-body); line-height: 1.6; }
.bullets li { margin-bottom: 6px; }
.prose { font-size: var(--t-ui); font-weight: 400; line-height: 1.65; max-width: 860px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: var(--t-body); }
.kv .k { color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.section-gap { height: var(--s-6); } /* breathing room between page sections (Phil 8/18) */

/* vault-note chip: legible label, keyboard-reachable (Stage 1; was cryptic ·i·) */
.note-dot {
  font-size: 9px; color: var(--ink-2); background: transparent;
  border: 1px solid rgba(25,24,24,.28); padding: 1px 5px; letter-spacing: .05em;
  cursor: help; text-transform: uppercase;
}
.note-dot:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

/* ---------- UX P0 pack (2026-08-17) ---------- */
/* time-awareness badges on lease dates */
.badge.t-exp { color: var(--red); border: 1px solid var(--red); padding: 1px 5px; font-size: 9px; }
.badge.t-soon { color: var(--amber-text); background: var(--amber-fill); padding: 1px 5px; font-size: 9px; }

/* real tooltip for vault-note markers (hover AND keyboard focus) */
.note-dot { position: relative; }
.note-dot:hover::after, .note-dot:focus::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: -8px; z-index: 60;
  width: 360px; white-space: normal; text-transform: none; letter-spacing: 0;
  background: var(--charcoal); color: var(--sand); font: 400 11px/1.55 var(--font);
  padding: 10px 12px; border-radius: 6px; box-shadow: var(--shadow-md);
}

/* ---------- Stage 4: visible keyboard focus everywhere ---------- */
tr.click:focus-visible, .chip:focus-visible, .dp-tab:focus-visible,
.sort-btn:focus-visible, .map-row:focus-visible, .kan-card:focus-visible,
th.sortable:focus-visible, .nav-item:focus-visible, .lnk:focus-visible,
[data-back] span:focus-visible, [data-dealtab]:focus-visible {
  outline: 2px solid var(--red); outline-offset: -1px; border-radius: 2px;
}
tr.click:focus-visible td { background: var(--hover-row); }

/* ---------- Stage 5: deal inspector (Properties register) ---------- */
tr.selected td { background: rgba(184, 35, 42, .05); }
tr.selected td:first-child { box-shadow: inset 2px 0 0 var(--red); }
.inspector {
  position: fixed; top: calc(var(--shell-gap, 10px) + 70px); bottom: calc(var(--shell-gap, 10px) + 14px);
  right: calc(var(--shell-gap, 10px) + 14px); width: 372px; z-index: 600;
  background: var(--clear-white); border-radius: 10px; padding: 20px;
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: inset 0 0 0 1px rgba(25,24,24,.08), 0 2px 4px rgba(0,0,0,.05), 0 18px 40px -12px rgba(0,0,0,.22);
}
.insp-close {
  position: absolute; top: 12px; right: 14px; cursor: pointer;
  font: 500 12px var(--mono); color: var(--ink-3); padding: 2px 6px; border-radius: 4px;
}
.insp-close:hover { color: var(--charcoal); background: var(--sand-2); }
.insp-over { display: flex; gap: 8px; align-items: center;
  font: 500 var(--t-micro) var(--font); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-3); }
.insp-name { font-size: 17px; font-weight: 600; letter-spacing: -0.005em; margin-top: 8px; }
.insp-city { font-size: var(--t-caption); color: var(--ink-3); margin-top: 2px; }
.insp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.istat { background: var(--sand); border-radius: var(--radius-ctl);
  box-shadow: inset 0 0 0 1px rgba(25,24,24,.05); padding: 9px 11px; }
.istat .k { font: 500 9px var(--font); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-3); }
.istat .v { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin-top: 3px; }
.isec { font: 500 var(--t-micro) var(--font); letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink-3); margin: 16px 0 8px; }
.iflag { display: flex; gap: 9px; font-size: var(--t-body); line-height: 1.45; padding: 5px 0;
  border-bottom: 1px solid rgba(25,24,24,.07); }
.iflag:last-child { border-bottom: none; }
.iflag .floz { flex: none; padding: 1px 6px; height: fit-content; margin-top: 2px; }
.ikv { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-body);
  padding: 5px 0; border-bottom: 1px solid rgba(25,24,24,.07); }
.ikv:last-child { border-bottom: none; }
.ikv span { color: var(--ink-2); }
.ikv b { font-weight: 600; text-align: right; }
.open-btn { display: block; width: 100%; text-align: center; background: var(--red); color: #fff;
  font-size: var(--t-ui); font-weight: 600; border-radius: var(--radius-ctl); padding: 10px 0; margin-top: 18px; cursor: pointer; }
.open-btn:hover { background: var(--red-deep); }
.inspector .dash { color: var(--ink-3); }

/* inspector: rollover stack */
.roll-row { display: flex; gap: 6px; align-items: flex-end; padding-top: 4px; }
.roll-col { flex: 1; text-align: center; }
.roll-v { font-size: 10px; font-weight: 600; color: var(--ink-2); margin-bottom: 3px; }
.roll-bar { border-radius: 3px 3px 0 0; }
.roll-cap { font-size: 10px; color: var(--ink-3); margin-top: 3px; border-top: 1px solid var(--line); padding-top: 3px; }
.roll-cum { display: flex; justify-content: space-between; background: var(--sand);
  border-radius: var(--radius-ctl); box-shadow: inset 0 0 0 1px rgba(25,24,24,.05);
  padding: 8px 11px; margin-top: 10px; font-size: var(--t-body); }
.roll-cum span { color: var(--ink-2); }
.roll-cum b { font-weight: 600; }

/* inspector: tenant pills (round = interactive, links to tenant pages) */
.tpill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tpill { font: 500 var(--t-caption) var(--font); border: 1px solid rgba(25,24,24,.18);
  color: var(--ink-2); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
a.tpill:hover { border-color: var(--charcoal); color: var(--charcoal); }
.tpill.major { border-color: var(--red); color: var(--red); font-weight: 600; }
a.tpill.major:hover { background: rgba(184,35,42,.06); }
.tpill.dim { color: var(--mut); border-style: dashed; }

/* ---------- Stage 1: evidence disclosure (collapsed source narrative) ---------- */
details.evidence { margin-top: 14px; }
details.evidence > summary {
  cursor: pointer; user-select: none; list-style-position: inside;
  font: 500 var(--t-ui) var(--font); color: var(--ink-2);
  padding: 10px 14px; background: var(--sand-2); border-radius: var(--radius-ctl);
  display: flex; align-items: baseline; gap: 10px;
}
details.evidence > summary:hover { color: var(--charcoal); }
details.evidence > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
details.evidence[open] > summary { border-radius: var(--radius-ctl) var(--radius-ctl) 0 0; }
details.evidence .ev-hint { font: 400 var(--t-caption) var(--font); color: var(--ink-3); }

/* ---------- Phase 2 additions (new app, 2026-10-07) ---------- */
/* back link is a real link now (href="#/") */
.back-strip a { font: 600 var(--t-body) var(--font); color: var(--ink-2); }
.back-strip a:hover { color: var(--charcoal); text-decoration: underline; }
/* tabs not built yet */
.dp-tab.disabled { color: var(--mut); cursor: default; }
a.dp-tab { text-decoration: none; }
a.dp-tab:hover { color: var(--charcoal); }
/* new stage / status vocabulary (Screening → Underwriting → LOI → Under Contract → Closed;
   status On Hold / Passed), on the legacy ramp */
.stage-Underwriting  { color: #fff; background: var(--stage-chasing); }
.stage-LOI           { color: var(--amber-text); border: 1.5px solid var(--stage-uc); }
.stage-UnderContract { color: var(--charcoal); background: var(--stage-uc); }
.stage-OnHold        { color: var(--amber-text); background: var(--amber-fill); }
/* sourcing contacts: the block's top border is the only divider under the rows */
.contact-block { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(25,24,24,.08); display: grid; gap: 11px; }
.dkv:has(+ .contact-block) { border-bottom: none; }
/* source tag ("OM p.4" / "edited by Phil · Oct 9") after a value or section title */
.src-tag {
  display: inline-block; margin-left: 6px; padding: 1px 5px; vertical-align: 1px;
  font: 500 9.5px var(--font); letter-spacing: .02em; text-transform: none; white-space: nowrap;
  color: var(--ink-3); border: 1px solid rgba(25,24,24,.16); border-radius: var(--radius-badge);
}
/* deal location map: mute OpenStreetMap's colors toward the legacy light basemap */
.rc-tiles { filter: grayscale(1) brightness(1.06) contrast(.9); }
#deal-loc-map.leaflet-container { font-family: var(--font); }

/* ---------- App shell, list, editing, notes (Phase 2.1–2.3) ---------- */
.mut { color: var(--ink-3); }
.sub { font: 400 11.5px var(--font); color: var(--ink-3); margin-top: 2px; }
#who { color: var(--text-faint); }
#who a { color: var(--sand); text-decoration: underline; }
.btn-red { font: 600 12.5px var(--font); color: #fff; background: var(--red); border: 0;
  border-radius: var(--radius-ctl); padding: 7px 14px; cursor: pointer; }
.btn-red:hover { background: var(--red-deep); }

/* "New deal" on the pipeline */
.page-head .new-deal-btn { margin-left: auto; }
.new-deal { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: var(--s-4); }
.new-deal[hidden] { display: none; }
.new-deal label { display: grid; gap: 4px; font: 500 12px var(--font); color: var(--ink-2); }
.new-deal input, .new-deal select { font: 400 13px var(--font); padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.new-deal input[name=name] { width: 240px; }
.new-deal input[name=state] { width: 48px; text-transform: uppercase; }
.new-deal .nd-btns { display: flex; gap: 6px; }
.btn-plain { font: 500 12.5px var(--font); color: var(--ink-2); background: none; border: 1px solid var(--line);
  border-radius: var(--radius-ctl); padding: 6px 12px; cursor: pointer; }

/* sign-in */
.auth { max-width: 380px; display: grid; gap: 12px; }
.auth label { display: grid; gap: 4px; font: 500 12px var(--font); color: var(--ink-2); }
.auth input { font: 400 14px var(--font); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.auth-msg { font-size: 12.5px; color: var(--red); min-height: 1em; }

/* pipeline list */
.ftabs { display: flex; gap: 6px; margin-bottom: 14px; }
.ftab { font: 600 12.5px var(--font); color: var(--ink-2); padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); display: inline-flex; gap: 6px; }
.ftab .n { color: var(--ink-3); font-weight: 500; }
.ftab.active { background: var(--charcoal); color: var(--sand); border-color: var(--charcoal); }
.ftab.active .n { color: var(--mut); }
table.tb.pipe { width: 100%; background: #fff; border-radius: 10px; }
table.tb.pipe td { padding-top: 9px; padding-bottom: 9px; vertical-align: top; }
table.tb.pipe .deal-cell { min-width: 190px; }
table.tb.pipe .step-cell { max-width: 320px; }
table.tb.pipe tr.needs td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.note-peek { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.flags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.flag { font: 600 10px var(--font); letter-spacing: .02em; padding: 1px 6px; border-radius: 4px; }
.flag-overdue { color: #fff; background: var(--red); }
.flag-revisit { color: var(--amber-text); background: var(--amber-fill); }
.flag-quiet { color: var(--ink-2); background: var(--sand-2); }
.flag-nostep { color: var(--ink-3); border: 1px dashed var(--mut); }

/* inline editing: dotted underline on hover, popover editor */
.ed { cursor: pointer; border-radius: 3px; outline-offset: 2px; }
.ed:hover, .ed:focus-visible { background: var(--red-tint); box-shadow: 0 1px 0 var(--red); }
.ed-pop { position: absolute; z-index: 2000; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 28px rgba(25,24,24,.18); padding: 10px; width: 300px;
  display: grid; gap: 8px; font: 400 13px var(--font); }
.ed-pop.wide { width: min(560px, calc(100vw - 16px)); }
.ed-pop input, .ed-pop select, .ed-pop textarea { font: 400 13.5px var(--font); padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--radius-ctl); width: 100%; box-sizing: border-box; }
.ed-pop textarea { resize: vertical; line-height: 1.5; }
.ed-pop .ed-unit { margin-left: -24px; color: var(--ink-3); }
.ed-pop .ed-reason { font-size: 12px; background: var(--sand); }
.ed-pop .ed-pass { display: grid; gap: 6px; }
.ed-pop .ed-pass[hidden] { display: none; }
.ed-pop .ed-preview { font-size: 12px; color: var(--ink-2); margin-top: -2px; }
.ed-pop .ed-addr { display: grid; gap: 6px; }
.ed-pop .ed-addr label { display: grid; gap: 3px; font-size: 11.5px; color: var(--ink-2); }
.ed-pop .ed-addr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-pop .ed-pass label { display: grid; gap: 3px; font-size: 11.5px; color: var(--ink-2); }
.ed-actions { display: flex; align-items: center; gap: 6px; }
.ed-hint { font-size: 11px; color: var(--ink-3); margin-right: auto; }
.ed-actions button { font: 600 12px var(--font); border-radius: var(--radius-ctl); padding: 5px 10px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; }
.ed-actions .ed-save { background: var(--red); color: #fff; border-color: var(--red); }
.ed-err { color: var(--red); font-size: 12px; }
.ed-err:empty { display: none; }
.ed-pop.saving { opacity: .6; pointer-events: none; }
.src-tag.edited { color: var(--red); border-color: rgba(184,35,42,.35); }

/* notes */
.note-form { display: grid; gap: 6px; margin-bottom: 12px; }
.note-form textarea { font: 400 13px var(--font); padding: 7px 9px; border: 1px solid var(--line);
  border-radius: var(--radius-ctl); resize: vertical; }
.note-form .row { display: flex; gap: 8px; justify-content: flex-end; align-items: stretch; }
/* the kind picker matches the "Add note" button: same height, font, radius, centered text */
.note-form select { font: 500 12.5px var(--font); color: var(--charcoal); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 0 28px 0 12px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237A766E' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.note-form select:hover { border-color: rgba(25,24,24,.3); }
.note { padding: 9px 0; border-top: 1px solid rgba(25,24,24,.08); }
.note-meta { font-size: 11.5px; color: var(--ink-3); }
.note-body { font-size: 13px; line-height: 1.55; white-space: pre-wrap; margin-top: 2px; }

.toast { position: fixed; bottom: 18px; right: 18px; z-index: 3000; background: var(--charcoal); color: var(--sand);
  font: 500 13px var(--font); padding: 9px 14px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.toast.bad { background: var(--red); color: #fff; }
table.tb.history td { font-size: 12.5px; vertical-align: top; padding-top: 7px; padding-bottom: 7px; }
table.tb.history td:first-child { white-space: nowrap; color: var(--ink-3); }