:root{
  --navy:#25408F; --navy-dark:#1B3070; --navy-light:#E8ECF7;
  --bg:#F2F3F7; --card:#FFFFFF; --text:#1C1C1E; --text2:#6B7280;
  --line:#E5E7EB; --green:#0E9F6E; --amber:#C27803; --red:#C81E1E;
  --amber-light:#FDF6B2; --amber-dark:#8E4B10; --amber-line:#F0C480;
  --radius:14px;

  /* ---- Institutional Intelligence design tokens ----
     Typography, spacing and roundness only. The colour ramp is deliberately NOT taken from
     that system: the portfolio palette above stays as-is, so --navy remains #25408F rather
     than the system's #4a62a4, and green/red keep their existing values. Consumed by the
     KPI popout charts today; available to any component that adopts the system later. */
  --ds-font:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ds-w-regular:400; --ds-w-medium:500; --ds-w-bold:700;
  --ds-title-sm:16px; --ds-body-md:14px; --ds-label-lg:14px; --ds-label-md:12px;
  --ds-sp-xs:4px; --ds-sp-sm:8px; --ds-sp-md:16px; --ds-sp-lg:24px; --ds-sp-xl:32px; --ds-sp-xxl:48px;
  --ds-round:4px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
/* ---------- Header (mobile: navy bar) ---------- */
header{
  background:var(--navy); color:#fff;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:10px;
}
header .logo{font-weight:700; font-size:17px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
header .spacer{flex:1}
.navlinks{display:none; gap:4px}
.navlinks button{
  background:none; border:none; font-family:inherit; font-size:14px; font-weight:600;
  color:var(--text2); padding:8px 14px; border-radius:8px; cursor:pointer;
}
.navlinks button.on{color:var(--navy); background:var(--navy-light)}
#syncStatus{font-size:12px; opacity:.85; white-space:nowrap}
#acctChip{
  width:32px;height:32px;border-radius:50%;background:#fff;color:var(--navy);
  font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;
  cursor:pointer; flex-shrink:0; border:none;
}
#btnFeedback{
  background:none; border:none; color:inherit; font-family:inherit;
  display:flex; align-items:center; gap:6px; padding:8px 10px;
  border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; flex-shrink:0;
}
#btnFeedback:hover{background:rgba(127,127,127,.15)}
.hdrlbl{display:none}
/* ---------- Views ---------- */
.view{display:none; max-width:960px; margin:0 auto; padding:16px}
.view.active{display:block}
.pagetitle{display:none; font-size:26px; font-weight:800; margin:6px 0 16px}
/* ---------- Sign-in ---------- */
#signin{max-width:420px; margin:0 auto; padding:48px 24px; text-align:center}
#signin .hero{
  background:linear-gradient(160deg,var(--navy),var(--navy-dark));
  color:#fff; border-radius:20px; padding:36px 24px; margin-bottom:24px;
}
#signin .hero h1{font-size:24px; margin-bottom:8px}
#signin .hero p{font-size:14px; opacity:.85; line-height:1.5}
.btn{
  display:inline-block; background:var(--navy); color:#fff; border:none;
  border-radius:12px; padding:13px 22px; font-size:16px; font-weight:600;
  cursor:pointer; font-family:inherit; text-decoration:none;
}
.btn:active{opacity:.8}
/* Disabled buttons previously looked IDENTICAL to enabled ones (same solid navy, full
   opacity) — a form gating Submit on required-field validation (e.g. Add Vendor Contact)
   gave zero visual signal that the button wasn't clickable, so a user with an invalid/
   missing field just saw a normal-looking "Submit" that silently did nothing on click, with
   no error anywhere. This is a blanket fix for every .btn in the app, not just one form. */
.btn:disabled, .btn[disabled]{background:var(--line); color:var(--text2); cursor:not-allowed; opacity:.7}
.btn.secondary:disabled, .btn.secondary[disabled]{background:var(--bg); color:var(--text2)}
.btn.secondary{background:var(--navy-light); color:var(--navy)}
.btn.small{padding:8px 14px; font-size:14px; border-radius:10px}
.btn.danger{background:#FDE8E8; color:var(--red)}
/* ---------- Home / list ---------- */
.stats{display:flex; gap:10px; margin-bottom:14px}
.stat{flex:1; background:var(--card); border-radius:var(--radius); padding:12px; text-align:center}
.stat b{display:block; font-size:22px; color:var(--navy)}
.stat span{font-size:12px; color:var(--text2)}
/* ---------- Overview band: portfolio stats + financial KPIs ---------- */
.overview{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; margin:0 0 14px}
.overview .stats{margin-bottom:0; flex:1 1 100%}
.kpiwrap{flex:1 1 100%; min-width:0}
.kpihead{display:flex; align-items:center; gap:8px; margin:2px 2px 8px; flex-wrap:wrap}
.kpihead h4{font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--text2); margin:0}
.samplebadge{font-size:10px; font-weight:800; letter-spacing:.5px; color:var(--navy);
  background:var(--navy-light); border:1px solid #C7D2F0; border-radius:999px; padding:2px 8px; white-space:nowrap}
.kpictx{font-size:12px; color:var(--text2); margin-left:auto}
.kpis{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px}
.kpi{background:var(--card); border-radius:var(--radius); padding:12px 14px; border:1px solid var(--line)}
.kpi .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text2)}
.kpi .val{font-size:21px; font-weight:800; color:var(--navy); margin-top:4px; line-height:1.1}
.kpi .sub{font-size:12px; color:var(--text2); margin-top:3px}
.kpi .sub.up{color:var(--green); font-weight:600}
.kpi .sub.down{color:var(--red); font-weight:600}
.kpi .val.up{color:var(--green)}
.kpi .val.down{color:var(--red)}
#acFilter{
  padding:7px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card);
  font-size:14px; font-weight:600; color:var(--text2); font-family:inherit; max-width:200px;
}
.searchbox{
  width:100%; padding:12px 14px; font-size:16px; border:1px solid var(--line);
  border-radius:12px; margin-bottom:10px; background:var(--card); font-family:inherit;
}
.searchbox:focus{outline:2px solid var(--navy); border-color:transparent}
.filterbar{display:flex; gap:8px; margin-bottom:14px; align-items:center; flex-wrap:wrap}
.chips{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.chip{
  padding:7px 14px; border-radius:999px; background:var(--card); color:var(--text2);
  font-size:14px; font-weight:600; border:1px solid var(--line); cursor:pointer;
  white-space:nowrap; font-family:inherit;
}
.chip.on{background:var(--navy); color:#fff; border-color:var(--navy)}
#nbFilter{
  padding:7px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card);
  font-size:14px; font-weight:600; color:var(--text2); font-family:inherit; max-width:200px;
}
.mapframe{
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px 14px;
  border:1px dashed var(--line);
  border-radius:14px;
  background:var(--card);
}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px}
.bcard{
  background:var(--card); border-radius:var(--radius); padding:14px; cursor:pointer;
  border:1px solid transparent; transition:border-color .12s, box-shadow .12s;
}
.bcard:hover{border-color:var(--navy); box-shadow:0 4px 14px rgba(37,64,143,.10)}
.bmedia{display:none}
.pid{
  display:inline-block; background:var(--navy-light); color:var(--navy);
  font-weight:700; font-size:12px; border-radius:6px; padding:2px 8px;
}
/* Clickable id bubble — Neighborhood page's Valuation & Acquisition table links each
   building's id straight to its own building page (see neighborhoodValuationHtml). Same
   look as the plain .pid badge; text-decoration:none keeps it from picking up the browser's
   default anchor underline, and the hover/focus state gives it a link affordance. */
.pid-link{text-decoration:none; cursor:pointer; transition:background .12s, box-shadow .12s}
.pid-link:hover, .pid-link:focus-visible{background:var(--navy); color:#fff; box-shadow:0 0 0 2px var(--navy) inset}
.tag{display:inline-block; font-size:11px; font-weight:700; border-radius:6px; padding:2px 8px}
.tag.core{background:#DEF7EC; color:#046C4E}
.tag.va{background:#FDF6B2; color:#8E4B10}
.tag.dev{background:#FDE8E8; color:var(--red)}
/* Small neighbourhood tag on each building card (see nbTag/renderGrid) — a neutral navy tint
   rather than one of the asset-class status colours above, since a neighbourhood isn't a
   health/status signal. Sits right after the asset-class tag; margin-inline-start keeps a
   gap when both are present without adding a wrapping-unfriendly fixed gap to .tag itself. */
.tag.nb{background:var(--navy-light); color:var(--navy); margin-inline-start:4px}
.bcard h3{font-size:16px; margin:6px 0 2px}
.bcard .sub{font-size:13px; color:var(--text2)}
.bcard .meta{display:flex; gap:10px; margin-top:8px; font-size:12px; color:var(--text2); flex-wrap:wrap}

/* Clickable KPI tile cue */
.fintile-clickable{ transition:background .12s, box-shadow .12s; }
.fintile-clickable:hover{ background:var(--navy-light); box-shadow:0 0 0 2px var(--navy) inset; }
.fintile-clickable:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

/* NOI popout modal */
.noimodal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center;
  justify-content:center; background:rgba(0,0,0,.45); padding:24px; }
.noimodal[hidden]{ display:none; }
.noimodal-card{ position:relative; background:var(--card,#fff); border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.25); width:min(720px,100%); padding:20px 22px; }
.noimodal-close{ position:absolute; top:10px; right:12px; border:0; background:transparent;
  font-size:24px; line-height:1; cursor:pointer; color:var(--text2); }
.noimodal-title{ margin:0 24px 2px 0; font-family:var(--ds-font); font-weight:var(--ds-w-bold); }
.noimodal-sub{ font-family:var(--ds-font); font-size:var(--ds-label-md); color:var(--text2); margin-bottom:var(--ds-sp-md); }
/* The chart's SVG text inherits this rather than declaring a family per <text> node — one
   place to change, and the labels always match the modal's own type. */
.noimodal-chart{ font-family:var(--ds-font); }
.noimodal-chart svg{ width:100%; height:auto; font-family:var(--ds-font); }

/* ---------- Detail ---------- */
.dhero{
  background:linear-gradient(160deg,var(--navy),var(--navy-dark)); color:#fff;
  border-radius:18px; padding:22px 18px; margin-bottom:14px; position:relative;
}
.dhero .pid{background:rgba(255,255,255,.18); color:#fff}
.dhero .hero-btn{
  display:inline-block; background:rgba(255,255,255,.18); color:#fff;
  font-weight:700; font-size:12px; border-radius:6px; padding:2px 8px;
  text-decoration:none; border:none; cursor:pointer; font-family:inherit;
}
.dhero .hero-btn:hover{background:rgba(255,255,255,.28)}
/* Top row of the building header: id/asset-class/Yardi tags on the left, the bigger
   "Finance" button (see renderDetail) pushed to the right — replaces the old left nav
   drawer's Finance button. */
.dhero-toprow{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:2px}
.dhero-tags{display:flex; align-items:center; flex-wrap:wrap; gap:8px}
/* Building name row: just the h2 now — the Community Events card used to sit in this same
   flex row (see .dhero-eventscard below), but since the card is much taller than the name
   text, centering them together stretched this row to the card's height and pushed the
   name down, opening up big gaps above AND below it. Pulling the card fully out of this
   row (and out of the button row below) is what actually closes those gaps; margin
   tightening alone couldn't, because the gap was row-height, not margin. */
.dhero-namerow{display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:0}
.dhero-namerow h2{margin:0}
/* Community Events' card — pulled OUT of the name/button rows' normal flow so its own
   height never inflates the gaps around the name/address/buttons (see .dhero-namerow
   comment). Stacks normally below the buttons on mobile; absolutely pinned to the header's
   top-right corner on desktop instead (html.desktop rule further down), which is where it
   visually sat before without actually being IN that row. */
.dhero-eventscard{margin-top:14px}
.dhero-eventscard .card{width:340px; max-width:100%; margin-bottom:0; padding:14px 16px}
.dhero-eventscard .card h4{margin-bottom:8px}
.hero-btn-finance{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  background:#fff; color:var(--navy); font-weight:800; font-size:14px;
  border-radius:10px; padding:9px 24px; text-decoration:none; border:none; cursor:pointer;
  font-family:inherit; box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
.hero-btn-finance:hover{transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.26)}
.hero-btn-finance svg{flex-shrink:0}
/* Groups the Finance and Neighborhood buttons together in their own row below the address
   (see renderDetail) so they wrap and space together as one unit. Neighborhood now matches
   Finance's solid white/navy pill exactly (no separate colour override below) so the two
   read as one consistent action pair rather than a primary/secondary pairing. */
.hero-btn-group{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px}
.dhero h2{font-size:24px}
.dhero .sub{font-size:14px; opacity:.85; margin-top:1px}
.dgrid{display:block}
/* Stacking Plan + Upcoming Lease Changes -- pulled OUT of .dmain/.dside (which flow
   independently and never actually align row-to-row) into their own dedicated row, so
   Upcoming Lease Changes always sits beside the Stacking Plan regardless of how tall
   Building Information/Operators/Asset Plan/etc. are above it. Same mobile-block /
   desktop-2-col-grid pattern as .dgrid below, so it behaves identically at every
   breakpoint. */
.dstackrow{display:block; margin-top:16px}
.card{background:var(--card); border-radius:var(--radius); padding:16px; margin-bottom:12px}
.card h4{font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--text2); margin-bottom:10px}
/* Small green "NEW" tag next to a tenant's name in the merged Upcoming Leasing Activity
   card — flags an incoming committed tenant inline instead of splitting the list under a
   separate "Future Tenants" header. Uses --green (already the app's positive-status colour,
   e.g. leased/occupied states) at low-opacity fill so it reads as a badge, not a button. */
.badge-new{
  display:inline-block; vertical-align:middle; margin-left:6px; padding:1px 7px;
  font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color:var(--green); background:rgba(14,159,110,.12); border:1px solid rgba(14,159,110,.35);
  border-radius:999px;
}
.usestable{width:100%; border-collapse:collapse; font-size:13px; margin-top:4px}
.usestable th, .usestable td{border:1px solid var(--line); padding:4px 8px; text-align:left; vertical-align:top}
.usestable th{background:var(--bg); font-weight:700; color:var(--text2); font-size:11px; text-transform:uppercase; letter-spacing:.3px}

/* ---------- Asset Plan card (dside, above Building links) ---------- */
.assetplan .apyearrow{display:flex; align-items:center; gap:4px; margin-top:10px}
.assetplan .apyearstrip{display:flex; gap:6px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none}
.assetplan .apyearstrip::-webkit-scrollbar{display:none}
.assetplan .apyearchip{
  flex:0 0 auto; padding:4px 12px; border-radius:999px; background:var(--card); color:var(--text2);
  font-size:12px; font-weight:700; border:1px solid var(--line); cursor:pointer;
}
.assetplan .apyearchip:hover{border-color:var(--navy)}
.assetplan .apyearchip.on{background:var(--navy); color:#fff; border-color:var(--navy)}
.assetplan .apyearnav{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--navy); font-size:15px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.assetplan .apyearnav:hover{background:var(--navy-light)}
.assetplan .apblock{margin-top:14px}
.assetplan .apobjective{font-size:14px; line-height:1.5; color:var(--text); margin:0}
.assetplan .apstrategy{margin:0; padding-left:18px; font-size:14px; line-height:1.6; color:var(--text)}
.assetplan .apstrategy li{margin-bottom:6px}
.assetplan .apstrategy li:last-child{margin-bottom:0}

/* ---------- Building information (top card on the detail page) ---------- */
.glanceblock{padding:0 18px}
.glancehead{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.glanceaddr{flex:1 1 220px; min-width:0}
.glanceaddr b{display:block; font-size:15px; color:var(--text)}
.glanceaddr span{display:block; font-size:13px; color:var(--text2); margin-top:3px; line-height:1.4; white-space:pre-wrap}
.bldgevent{flex:0 1 380px; width:380px; max-width:100%; min-width:260px; display:block; padding:12px 16px; border-radius:12px; background:var(--bg); border:1px solid var(--line); text-decoration:none; color:inherit}
.bldgevent:hover{border-color:var(--navy)}
.bldgevent-lbl{font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--text2)}
.bldgevent-subj{font-size:14px; font-weight:700; color:var(--navy); margin-top:4px; line-height:1.3; word-break:break-word}
.bldgevent-when{font-size:12px; color:var(--text); font-weight:600; margin-top:4px}
.bldgevent-loc{font-size:12px; color:var(--text2); margin-top:2px}
.bldgevent-note{font-size:12px; color:var(--text2); font-style:italic; background:transparent; border:1px dashed var(--line)}
.statstrip2{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0 18px 16px}
.stattile2{background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; justify-content:center; min-height:64px}
.stattile2 .lbl{font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--text2)}
.stattile2 .val{font-size:16px; font-weight:700; color:var(--navy); margin-top:5px; line-height:1.3; word-break:break-word}
.czOuter{display:grid; grid-template-columns:60% 40%; border-top:1px solid var(--line)}
.czOuter.single{grid-template-columns:1fr}
.czGroupBox{padding:14px 18px}
.czGroupBoxRight{border-left:1px solid var(--line)}
.czGroupLabel{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--navy); margin-bottom:10px}
.czSubcols{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.czField{margin-bottom:12px}
.czField:last-child{margin-bottom:0}
.czField b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text2); margin-bottom:3px}
.czField span{font-size:14.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word}
.czField span a{color:var(--navy); font-weight:600; text-decoration:none}
/* ============ ZONING CARD REDESIGN ============
   Replaces the old Area Plan/Density/Outright/Conditional field list with: a header stat
   row (Area Plan + Current Uses — Density dropped entirely), then Outright Approved Uses /
   Conditional Uses as two search-and-browse columns sourced live from land_uses_zoning.xlsx
   (see zoningHeaderStatsHtml / zoningUseColumnHtml in app.js). */
.zHeaderStats{
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
@media (max-width: 640px){ .zHeaderStats{ grid-template-columns: 1fr; } }
.zStat{ background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.zStat b{
  display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; color: var(--text2); margin-bottom: 4px;
}
.zStat span{ font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.35; }
.zStat .zoneCode{
  display: inline-block; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 800;
  border-radius: 999px; padding: 2px 9px; margin-left: 6px; vertical-align: middle;
}
.zUseCols{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px){ .zUseCols{ grid-template-columns: 1fr; gap: 18px 0; } }
.zUseCol{ display: flex; flex-direction: column; min-width: 0; }
.zUseColHead{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.zUseColHead h5{ margin: 0; font-size: 12.5px; font-weight: 800; color: var(--navy); text-transform: uppercase; letter-spacing: .3px; }
.zUseCount{ font-size: 11px; color: var(--text2); font-weight: 600; white-space: nowrap; }
.zUseSearch{
  width: 100%; padding: 7px 9px; margin-bottom: 8px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--text);
  font-family: inherit;
}
.zUseSearch:focus{ outline: 2px solid var(--navy); border-color: transparent; }
.zUseList{
  display: flex; flex-direction: column; max-height: 190px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
.zUseRow{ font-size: 12.5px; padding: 6px 9px; border-top: 1px solid var(--line); }
.zUseRow:first-child{ border-top: none; }
.zUseRow mark{ background: var(--amber-light, #FDF6B2); color: inherit; border-radius: 3px; padding: 0 1px; }
.zUseEmpty{ padding: 12px 9px; font-size: 12px; color: var(--text2); text-align: center; }
/* Shown in the zoning popout instead of the Outright/Conditional Uses columns for a bare
   "CD-1" designation or one of the known site-specific CD-1 by-laws (see
   zoningNoUsesNoticeHtml in app.js) — a plain explanatory note plus a link straight to the
   applicable by-law PDF. */
.zNoUsesNotice{ background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.zNoUsesNotice p{ margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--text2); }
.zBylawLink{
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  color: var(--navy); text-decoration: underline; text-underline-offset: 2px;
}
.zBylawLink:hover{ opacity: .85; }
.zViewFull{
  margin-top: 8px; align-self: flex-start; background: none; border: none; padding: 0;
  color: var(--navy); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.zViewFull:hover, .zViewFull:focus-visible{ text-decoration: underline; outline: none; }
/* The "View full list" modal — reuses the shared .noimodal shell, narrower than the NOI
   chart modal since it's just a searchable list. */
.zusesmodal-card{ width: min(420px, 100%); }
.zusesModalSearch{ margin: 12px 0 10px; }
.zusesModalList{ max-height: 50vh; }
.czNotesRow{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.czStandaloneNotes{padding:14px 18px 0; border-top:1px solid var(--line); margin-top:4px}
.czExisting{padding:14px 18px 0; border-top:1px solid var(--line); margin-top:4px}
.czExisting > b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text2); margin-bottom:6px}
@media(max-width:640px){
  .statstrip2{grid-template-columns:repeat(2,1fr)}
  .czOuter{grid-template-columns:1fr}
  .czGroupBoxRight{border-left:none; border-top:1px solid var(--line)}
  .czSubcols{grid-template-columns:1fr}
  .loantiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Collapsible cards (Building Information, Building operators, Financial
   overview, Stacking plan, Contacts) — click the header, .cardbody hides/shows ---------- */
.cardhead{display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none}
.cardhead h4{margin:0}
.finhead, .stackhead{cursor:pointer; user-select:none}
.collapseArrow{flex-shrink:0; color:var(--text2); transition:transform .15s ease}
[data-collapsible].collapsed .collapseArrow{transform:rotate(-90deg)}
[data-collapsible].collapsed .cardbody{display:none}

.cathdr{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--navy); background:var(--navy-light); border-radius:6px;
  padding:4px 10px; margin:12px 0 4px;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
}
.cathdr:first-of-type{margin-top:0}
.cathdr .collapseArrow{width:14px; height:14px}
/* Contacts panel wraps each header in its own .catgroup (for the collapse toggle), so every
   wrapped .cathdr is technically ":first-of-type" within its own single-child parent — the
   two rules below restore the intended "only the very first group hugs the top" spacing for
   that wrapped case, without touching the Directory tab's still-flat (unwrapped) .cathdr list
   above, which keeps relying on the plain :first-of-type rule as-is. */
.catgroup:first-of-type .cathdr{margin-top:0}
.catgroup:not(:first-of-type) .cathdr{margin-top:12px}
.lenschips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.lenschips .chip{padding:5px 11px; font-size:12px}
.lensnote{font-size:12px; color:var(--text2); margin:2px 0 8px}
/* Top-level Internal/Vendor/Tenant switch — a segmented control, deliberately heavier
   (bigger, bolder, filled track) than the .lenschips filter row below it so the two
   levels of the Contacts panel read as clearly distinct, not two rows of the same chip. */
.viewtoggle{
  display:flex; gap:4px; margin-bottom:12px;
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:4px;
}
.viewtoggle .chip{
  flex:1; text-align:center; padding:8px 10px; font-size:13px; font-weight:700;
  letter-spacing:.2px; border:none; border-radius:9px; background:transparent; color:var(--text2);
}
.viewtoggle .chip.on{background:var(--navy); color:#fff; box-shadow:0 2px 6px rgba(37,64,143,.25)}
/* Home page Buildings/Neighborhoods slide toggle (see setHomeView/applyHomeView in app.js) —
   an actual sliding switch (not a two-chip segmented control like .viewtoggle above): a pill
   track holding both icon buttons, with a rounded "thumb" that slides behind whichever one
   is active. Sits inline in the homepage's .filterbar, right next to the region chips. */
.hometoggle{
  position:relative; display:inline-flex; align-items:center; flex-shrink:0;
  background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:3px;
  gap:0;
}
.hometoggle-thumb{
  position:absolute; top:3px; left:3px; width:46px; height:32px; border-radius:999px;
  background:var(--card); box-shadow:0 2px 6px rgba(37,64,143,.18);
  transition:transform .2s ease; z-index:1;
}
.hometoggle.on-neighborhoods .hometoggle-thumb{ transform:translateX(46px); }
.hometoggle-opt{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
  width:46px; height:32px; border:none; background:transparent; border-radius:999px;
  cursor:pointer; opacity:.45; transition:opacity .18s; color:var(--navy);
}
.hometoggle-opt.on{opacity:1}
.hometoggle-opt:hover{opacity:.8}
.hometoggle-opt.on:hover{opacity:1}
.hometoggle-opt:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.hometoggle-opt img{display:block; width:20px; height:20px; object-fit:contain}
/* Fallback when icons/icon-01.png isn't deployed yet — homeToggleIconFallback() swaps the
   <img> for this inline pin glyph (same icon used elsewhere for "Neighborhood" links), so
   the toggle still reads clearly as its own distinct option rather than showing a broken
   image icon. Drop a real icons/icon-01.png in later and it displays automatically instead. */
.hometoggle-fallback-icon{display:flex; align-items:center; justify-content:center}
.hometoggle-fallback-icon svg{width:18px; height:18px; display:block}
.opcard{
  display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line);
  border-radius:12px; margin-bottom:8px;
}
.avatar{
  position:relative;
  width:40px; height:40px; border-radius:50%; background:var(--navy-light); color:var(--navy);
  font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
/* Teams-style presence dot on the avatar corner */
.presence-dot{
  position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%;
  border:2px solid #fff; box-sizing:content-box; background:#8a8886;
}
.p-available{background:#92c353}
.p-away{background:#f8c000}
.p-busy, .p-dnd{background:#c4314b}
.p-oof{background:#b4009e}
.p-offline, .p-unknown{background:#8a8886}
.opcard .who{flex:1; min-width:0}
.opcard .who b{display:block; font-size:15px}
.opcard .who span{font-size:12px; color:var(--text2)}
.opcard .who a{color:var(--navy); font-size:13px; text-decoration:none; margin-right:10px; font-weight:600}
.opcard .who .ooo-msg{
  display:block; margin-top:5px; font-size:12px; font-weight:700; color:#7A0473;
  background:#F7E9FB; border:1px solid #E9B8F0; border-radius:8px; padding:4px 9px;
  width:fit-content;
}

/* ---------- After-hours on-call highlight (Building operators card switches to this
   between 4pm-7am Vancouver time — see activeOnCallDateKey() in data.js) ---------- */
.card.oncall{
  background:linear-gradient(0deg, var(--card), var(--card)) padding-box, var(--amber-light) border-box;
  border:1px solid var(--amber-line); box-shadow:0 0 0 3px rgba(194,120,3,.06);
}
.card.oncall .cardhead h4{color:var(--amber-dark)}
.oncall-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.4px; color:var(--amber-dark); background:var(--amber-light);
  border:1px solid var(--amber-line); border-radius:7px; padding:3px 10px; flex-shrink:0;
}
.oncall-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--amber); flex-shrink:0}
/* Shared on-duty cell shown on each on-call person (operator line / PM line from the
   "On-Call Numbers" sheet) — sits above their own phone/email/Teams, which stay as-is. */
.opcard .who .onduty-line{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px; width:fit-content;
  margin:4px 0 5px; padding:3px 9px; border-radius:8px;
  background:var(--amber-light); border:1px solid var(--amber-line);
}
.opcard .who .onduty-line .onduty-label{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; color:var(--amber-dark);
}
.opcard .who .onduty-line a{color:var(--amber-dark); margin-right:0; font-weight:800}
.opcard-tag{
  display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; color:var(--amber-dark); background:var(--amber-light);
  border:1px solid var(--amber-line); border-radius:5px; padding:1px 7px; margin-left:6px; vertical-align:middle;
}
.linkrow{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px;
  background:var(--navy-light); margin-bottom:8px; text-decoration:none; color:var(--navy);
  font-weight:600; font-size:14px;
}
.linkrow svg{flex-shrink:0}
.linkrow span{flex:1; word-break:break-word}
.contact{padding:9px 0; border-bottom:1px solid var(--line); font-size:15px}
.contact:last-child{border-bottom:none}
.contact b{display:block}
.contact span{font-size:13px; color:var(--text2)}
.contact a{color:var(--navy); font-size:14px; text-decoration:none; margin-right:12px; font-weight:600}
.contact.urgent{background:#FEF2F2; border:1px solid #FECACA; border-radius:10px; padding:9px 10px; margin:6px 0}
.contact.urgent b{color:var(--red)}
/* Vendor company card with 2+ contacts nested under it (vendorContactCardHtml, app.js) —
   the company name (.contact > b) stays the one heading; each contact gets its own
   sub-row below with a lighter visual weight than the top-level .contact/.contactHtml
   entries, so it reads as "part of this vendor" rather than a sibling company. */
.contact.vendorgroup b{margin-bottom:4px}
.vendorsubcontact{padding:6px 0 6px 12px; border-left:2px solid var(--line); margin:4px 0 0}
.vendorsubcontact .subname{display:block; font-size:13px; font-weight:600; color:var(--text)}
.vendorsubcontact a{color:var(--navy); font-size:13px; text-decoration:none; margin-right:12px; font-weight:600}
/* ---------- Upcoming Lease Changes (dside, beside the Stacking Plan) ---------- */
.expchange-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)}
.expchange-row:last-child{border-bottom:none}
.expchange-date{
  flex-shrink:0; min-width:78px; text-align:center; font-size:12px; font-weight:700;
  color:var(--navy); background:var(--navy-light); border-radius:8px; padding:6px 8px;
}
.expchange-who{flex:1; min-width:0}
.expchange-who b{display:block; font-size:14px; font-weight:600}
.expchange-who a{color:var(--navy); text-decoration:none}
.expchange-who a:hover{text-decoration:underline}
.expchange-who span{font-size:12px; color:var(--text2)}
.emailIcon, .teamsIcon{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin-top:4px; margin-right:2px;
  color:var(--navy); border-radius:6px;
  transition:background .15s ease, color .15s ease;
}
.emailIcon:hover, .emailIcon:focus-visible, .teamsIcon:hover, .teamsIcon:focus-visible{
  background:rgba(11,43,90,.08);
}
.emailIcon svg, .teamsIcon svg{ display:block; pointer-events:none; }
.vcatselect{
  display:block; width:100%;
  padding:6px 10px; border-radius:8px; border:1px solid var(--line); background:var(--card);
  font-size:13px; font-weight:600; color:var(--text); font-family:inherit; margin-bottom:10px;
}
.vcatselect:focus{ outline:2px solid var(--navy); border-color:transparent }
.primarytag{
  font-size:10px; font-weight:800; letter-spacing:.5px; color:var(--navy);
  background:var(--navy-light); border:1px solid #C7D2F0; border-radius:999px;
  padding:2px 8px; white-space:nowrap; margin-left:6px;
}
.empty{color:var(--text2); font-size:14px; padding:4px 0}
.toprow{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.toprow .spacer{flex:1}
.stamp{font-size:12px; color:var(--text2); text-align:center; padding:6px 0 2px}
/* ---------- Directory ---------- */
.direntry{
  display:flex; align-items:flex-start; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--line);
}
.direntry:last-child{border-bottom:none}
.direntry .who{flex:1; min-width:0}
.direntry .who b{display:block; font-size:15px}
.direntry .who .role{font-size:13px; color:var(--text2)}
.direntry .who a{color:var(--navy); font-size:14px; text-decoration:none; margin-right:12px; font-weight:600}
.direntry details{margin-top:4px}
.direntry summary{font-size:12px; color:var(--text2); cursor:pointer; font-weight:600}
.direntry .bldgs{display:flex; flex-wrap:wrap; gap:6px; padding-top:6px}
.direntry .bldgs a{
  font-size:12px; font-weight:700; color:var(--navy); background:var(--navy-light);
  border-radius:6px; padding:2px 8px; text-decoration:none;
}

/* ---------- Wiki Dictionary ---------- */
/* Uses the SAME design tokens as the rest of the app (--navy/--card/--line/--text2/etc,
   .card/.chip/.searchbox/.empty conventions) — no new colours introduced, just new
   composition, per the design brief to keep the current colour scheme as-is. */
.dictintro{margin-bottom:20px}
.dictintro p{font-size:14px; color:var(--text2)}
.dictsearchwrap{position:relative; margin-bottom:16px}
.dictsearchwrap svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text2); pointer-events:none}
.dictsearchwrap .searchbox{padding-left:42px; margin-bottom:0}
.azrow{
  display:flex; flex-wrap:wrap; gap:4px; padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.azbtn{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; border:none; background:none; color:var(--text2);
  font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
}
.azbtn:hover:not(:disabled){background:var(--navy-light); color:var(--navy)}
.azbtn.on{background:var(--navy); color:#fff}
.azbtn:disabled{opacity:.35; cursor:default}
.azellipsis{width:22px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--text2); font-size:13px}
.dictcats{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.dictcats .chip{white-space:nowrap}
.dictgrid{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:720px){ .dictgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1180px){ .dictgrid{grid-template-columns:repeat(3,1fr)} }
.dictcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; display:flex; flex-direction:column;
}
.dicttag{
  display:inline-block; width:fit-content; font-size:10px; font-weight:800;
  text-transform:uppercase; letter-spacing:.4px; border-radius:999px; padding:3px 10px;
  margin-bottom:12px;
}
.dicttag-buildings{background:var(--navy-light); color:var(--navy)}
.dicttag-financials{background:rgba(14,159,110,.12); color:var(--green)}
.dicttag-portfolio{background:var(--amber-light); color:var(--amber-dark); border:1px solid var(--amber-line)}
.dicttag-stackingplans{background:var(--bg); color:var(--text2); border:1px solid var(--line)}
.dictcard h3{font-size:17px; line-height:1.3; margin-bottom:10px; color:var(--text)}
.dictcard p{font-size:14px; line-height:1.55; color:var(--text2); margin-bottom:14px; flex:1}
.dictmeta{
  margin:0 0 14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:12px; color:var(--text2); line-height:1.5;
}
.dictmeta b{color:var(--text); font-weight:600}
.dictmore{
  color:var(--navy); font-size:13px; font-weight:700; background:none; border:none;
  cursor:pointer; display:flex; align-items:center; gap:4px; padding:0; font-family:inherit;
  margin-top:auto;
}
.dictmore:hover{text-decoration:underline}
.dictmore svg{transition:transform .15s ease}
.dictcard.expanded .dictmore svg{transform:rotate(90deg)}

/* ---------- Edit modals ---------- */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100;
  display:none; align-items:flex-end; justify-content:center;
}
.modal.open{display:flex}
.modalCard{
  background:var(--bg); width:100%; max-width:680px; max-height:88vh; overflow-y:auto;
  border-radius:18px 18px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom));
}
@media(min-width:700px){ .modal{align-items:center} .modalCard{border-radius:18px} }
.modalCard h3{margin-bottom:14px}
.field{margin-bottom:12px}
.frow{display:flex; gap:10px}
.frow .field{flex:1}
.field label{display:block; font-size:13px; font-weight:600; color:var(--text2); margin-bottom:5px}
.field input,.field textarea,.field select{
  width:100%; padding:11px 12px; font-size:16px; border:1px solid var(--line);
  border-radius:10px; background:#fff; font-family:inherit;
}
.field textarea{min-height:84px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--navy); border-color:transparent}
.subrow{display:flex; gap:6px; margin-bottom:8px; align-items:flex-start; flex-wrap:wrap}
.subrow input,.subrow select{
  flex:1; padding:9px 10px; font-size:14px; border:1px solid var(--line);
  border-radius:8px; font-family:inherit; min-width:110px; background:#fff;
}
.subrow select{flex:2 1 200px}
.subrow select.cat{flex:0 1 140px}
.subrow button{
  background:#FDE8E8; color:var(--red); border:none; border-radius:8px; width:34px; height:36px;
  font-size:17px; cursor:pointer; flex-shrink:0;
}
.rowbtns{display:flex; gap:8px; flex-wrap:wrap}
.modalBtns{display:flex; gap:10px; margin-top:16px}
.modalBtns .btn{flex:1; text-align:center}

/* ---------- Add Vendor Contact: sectioned layout ---------- */
.vcModalCard{max-width:560px}
.vcSection{border-top:1px solid var(--line); padding-top:14px; margin-top:14px}
.vcSection:first-of-type{border-top:none; padding-top:0; margin-top:2px}
.vcSectionTitle{font-size:13px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.3px; margin-bottom:8px}
.vcSectionHint{font-size:12px; color:var(--text2); margin:-4px 0 10px}
/* Explicit reason Submit is disabled — updateVendorSubmitEnabled() (app.js) fills this in
   live as the user types/picks, naming the FIRST missing/invalid requirement rather than
   just leaving a disabled button with no explanation (see the .btn:disabled fix above for
   the other half of this same problem — the button not even LOOKING disabled before now). */
/* Add Contact — Other / Vendor toggle + Other-form extras */
.addContactModeToggle{margin:2px 0 12px}
.ocNeighborhood{font-size:12.5px; color:var(--text2); margin:8px 0 0; font-weight:600}
.ocSoftHint{font-size:12.5px; color:var(--text2); margin:8px 0 0}
/* Directory — Vendor / Other switch sits just before the search box */
.dirModeToggle{display:inline-flex; margin:0; flex-shrink:0}
.vcValidationHint{font-size:12.5px; color:var(--red); margin:10px 0 0; font-weight:600}

.vcSuggest{display:flex; flex-direction:column; gap:4px; margin-bottom:6px}
.vcSuggestItem{
  text-align:left; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  background:#fff; font-family:inherit; font-size:14px; cursor:pointer;
}
.vcSuggestItem:hover{border-color:var(--navy); background:var(--navy-light)}

/* Matched vendor confirmation card — appears once a suggestion is picked, carrying the
   on-file Vendor Id + address forward for the user to sanity-check before continuing. */
.vcMatchedVendor{
  background:var(--navy-light); border:1px solid #C7D2F0; border-radius:10px;
  padding:10px 12px; margin-top:8px;
}
.vcMatchedName{font-weight:700; color:var(--navy); font-size:14px}
.vcMatchedMeta{font-size:12px; color:var(--text2); margin-top:3px; line-height:1.5}

/* Buildings picker: search + bulk-action toolbar above the tree */
.vcBuildingToolbar{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.vcBuildingSearchInput{flex:1; margin-bottom:0}
.vcBuildingToolbar .btn{white-space:nowrap}

.vcTree{
  max-height:260px; overflow-y:auto; border:1px solid var(--line); border-radius:10px;
  background:#fff; padding:4px;
}
/* Each neighborhood is a native <details> — closed by default (no "open" attribute
   rendered unless the JS state or an active search says otherwise), so expand/collapse is
   handled entirely by the browser's own disclosure widget rather than custom class-toggle
   logic. The default marker triangle is hidden and replaced with our own chevron so we can
   size/color/rotate it consistently with the rest of the app. */
.vcGroup{border-bottom:1px solid var(--line)}
.vcGroup:last-child{border-bottom:none}
.vcGroupSummary{
  display:flex; align-items:center; gap:8px; padding:9px 8px; font-weight:700; font-size:14px;
  cursor:pointer; list-style:none;
}
.vcGroupSummary::-webkit-details-marker{display:none}
.vcGroupSummary::marker{content:""}
.vcGroupChevron{
  display:flex; align-items:center; justify-content:center; color:var(--text2); flex-shrink:0;
  transition:transform .15s ease;
}
.vcGroup[open] .vcGroupChevron{transform:rotate(90deg)}
.vcGroupCheck{display:flex; align-items:center; gap:8px; flex:1; min-width:0}
.vcGroupSummary .vcCount{margin-left:auto; font-weight:400; color:var(--text2); font-size:12px; flex-shrink:0}
.vcGroupBody{display:flex; flex-direction:column; padding:2px 8px 8px 30px}
.vcBuildingRow{display:flex; align-items:center; gap:8px; padding:6px 4px; font-size:14px; cursor:pointer}
.vcBuildingRow:hover{color:var(--navy)}

/* Selected-buildings summary line + removable chips, shown below the tree so the user
   always has a flat, at-a-glance list of exactly what they've picked without needing to
   expand every neighborhood to double check. */
.vcSelectedRow{margin-top:8px}
.vcSelectedRow > span{font-size:13px; color:var(--text2)}
.vcChips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.vcChip{
  display:inline-flex; align-items:center; gap:5px; background:var(--navy-light); color:var(--navy);
  border-radius:999px; padding:4px 6px 4px 10px; font-size:12px; font-weight:600;
}
.vcChipRemove{
  display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%;
  background:rgba(37,64,143,.15); color:var(--navy); border:none; cursor:pointer; font-size:12px; line-height:1;
  padding:0;
}
.vcChipRemove:hover{background:var(--navy); color:#fff}
/* ---------- Tab bar (mobile) ---------- */
nav{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); display:flex;
  padding-bottom:env(safe-area-inset-bottom);
}
nav button{
  flex:1; background:none; border:none; padding:9px 0 7px; cursor:pointer;
  font-size:11px; font-weight:600; color:var(--text2); font-family:inherit;
}
nav button svg{display:block; margin:0 auto 3px}
nav button.on{color:var(--navy)}
/* ---------- Contacts tab: floating widget mirroring the assistant chat bubble/panel
   below, but docked upper-right and flush to the edge instead of bottom-right. Only
   shown on building detail pages — see route()/renderDetail() in app.js. ---------- */
#contactsFab{
  position:fixed; right:0; top:110px; z-index:65;
  width:40px; height:56px; border-radius:12px 0 0 12px; background:var(--navy); color:#fff; border:none;
  box-shadow:-2px 4px 14px rgba(0,0,0,.2); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
/* Once the "Contacts" label is appended (see ensureContactsFabLabel in app.js), the tab
   grows TALLER to fit icon + label stacked — its width is untouched, so it stays a slim
   edge tab rather than widening across the screen. */
/* height:auto (with a floor via min-height) rather than a fixed px value — upright,
   unrotated letters stack to a height that depends on exact font metrics, so let the tab
   size itself to whatever "CONTACTS" actually needs instead of risking clipped letters. */
#contactsFab.hasLabel{ height:auto; min-height:104px; padding:14px 0; }
#contactsFab:active{opacity:.85}
/* Small vertical "Contacts" caption below the icon — runs top-to-bottom, each letter
   stacked UPRIGHT (text-orientation:upright) rather than rotated sideways, so it reads
   like a normal word turned on its end instead of text you'd need to tilt your head to
   read — still narrow enough to need no extra tab width. */
.contactsFabLabel{
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff;
}
#contactsPanel{
  position:fixed; left:0; right:0; bottom:0; top:16%; z-index:119;
  background:var(--bg); border-radius:18px 18px 0 0; display:flex; flex-direction:column;
  box-shadow:0 -8px 30px rgba(0,0,0,.25);
}
#contactsPanelHead{
  background:var(--navy); color:#fff; padding:12px 16px; border-radius:18px 18px 0 0;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
#contactsPanelHead b{flex:1; font-size:15px}
#contactsPanelClose{background:none; border:none; color:#fff; font-size:20px; cursor:pointer; padding:2px 6px}
#contactsPanelBody{flex:1; overflow-y:auto; padding:14px}
/* ---------- Portfolio map tab: floating widget mirroring the Contacts tab's own
   fab+panel pattern (#contactsFab/#contactsPanel), but docked to the LEFT edge
   instead of the right. Only relevant on the Home tab — see route() in app.js. ---------- */
#mapFab{
  position:fixed; left:0; top:110px; z-index:65;
  width:40px; height:56px; border-radius:0 12px 12px 0; background:var(--navy); color:#fff; border:none;
  box-shadow:2px 4px 14px rgba(0,0,0,.2); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
/* Same auto-height-with-label growth trick as #contactsFab.hasLabel (see ensureMapFabLabel
   in app.js) — width stays a slim edge tab, only height grows to fit icon + label. */
#mapFab.hasLabel{ height:auto; min-height:90px; padding:14px 0; }
#mapFab:active{opacity:.85}
.mapFabLabel{
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff;
}
#mapPanel{
  position:fixed; left:0; right:0; bottom:0; top:5%; z-index:119;
  background:var(--bg); border-radius:18px 18px 0 0; display:flex; flex-direction:column;
  box-shadow:0 -8px 30px rgba(0,0,0,.25);
}
#mapPanelHead{
  background:var(--navy); color:#fff; padding:12px 16px; border-radius:18px 18px 0 0;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
#mapPanelHead b{flex:1; font-size:15px}
#mapPanelClose{background:none; border:none; color:#fff; font-size:20px; cursor:pointer; padding:2px 6px}
#mapPanelBody{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; min-height:0}
#mapPanelBody .mapframe{min-height:0; height:100%; flex:1}
#mapPanelBody .mapframe iframe{width:100%; height:100%; min-height:320px; border:0; border-radius:10px; display:block}
/* Shown if the embedded Google My Maps iframe hasn't loaded within a few seconds
   (most commonly: the map isn't shared as "Anyone with the link can view" yet — see
   loadPortfolioMap()/BUILD-CONTEXT.md). Without this, a blocked embed just leaves a
   blank/gray box with no explanation, which reads as "the map card is broken". */
.mapload-warning{
  display:flex; align-items:flex-start; gap:8px; margin-bottom:10px; padding:10px 12px;
  background:#FDF6B2; border:1px solid #F5D26A; border-radius:10px; font-size:13px;
  color:#8E4B10; line-height:1.4;
}
.mapload-warning a{color:#8E4B10; font-weight:700; text-decoration:underline}
/* Always-available escape hatch: opens the map directly on Google's own site, which
   works even when the embedded iframe is blocked or hasn't been shared yet. */
.maplink-row{flex-shrink:0; margin-top:8px; text-align:center}
.maplink-row a{font-size:13px; font-weight:600; color:var(--navy); text-decoration:none}
.maplink-row a:hover{text-decoration:underline}
/* ---------- Assistant chat ---------- */
#chatFab{
  position:fixed; right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:70;
  width:54px; height:54px; border-radius:50%; background:var(--navy); color:#fff; border:none;
  box-shadow:0 6px 18px rgba(37,64,143,.35); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
#chatFab:active{opacity:.85}
#chatPanel{
  position:fixed; left:0; right:0; bottom:0; top:16%; z-index:120;
  background:var(--bg); border-radius:18px 18px 0 0; display:flex; flex-direction:column;
  box-shadow:0 -8px 30px rgba(0,0,0,.25);
}
#chatHead{
  background:var(--navy); color:#fff; padding:12px 16px; border-radius:18px 18px 0 0;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
#chatHead b{flex:1; font-size:15px}
#chatHead span{font-size:11px; opacity:.75}
#chatClose{background:none; border:none; color:#fff; font-size:20px; cursor:pointer; padding:2px 6px}
#chatMsgs{flex:1; overflow-y:auto; padding:14px}
.cmsg{
  max-width:85%; padding:10px 13px; border-radius:14px; margin-bottom:8px;
  font-size:14px; line-height:1.45; white-space:pre-wrap; word-break:break-word;
}
.cmsg.user{background:var(--navy); color:#fff; margin-left:auto; border-bottom-right-radius:4px}
.cmsg.bot{background:var(--card); border:1px solid var(--line); border-bottom-left-radius:4px}
.cmsg.typing{color:var(--text2); font-style:italic; background:none; border:none; padding:4px 2px}
.cmsg.errmsg{background:#FEF2F2; border:1px solid #FECACA; color:var(--red)}
#chatSug{display:flex; gap:6px; flex-wrap:wrap; padding:0 14px 6px; flex-shrink:0}
#chatForm{display:flex; gap:8px; padding:10px 14px calc(12px + env(safe-area-inset-bottom)); flex-shrink:0}
#chatInput{
  flex:1; padding:11px 12px; font-size:16px; border:1px solid var(--line);
  border-radius:12px; font-family:inherit; background:#fff; min-width:0;
}
#chatInput:focus{outline:2px solid var(--navy); border-color:transparent}
#chatSend{
  background:var(--navy); color:#fff; border:none; border-radius:12px; width:46px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
#chatSend:disabled{opacity:.5}
/* ---------- Toast ---------- */
#toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(84px + env(safe-area-inset-bottom));
  background:var(--text); color:#fff; padding:10px 18px; border-radius:999px;
  font-size:14px; z-index:200; opacity:0; transition:opacity .25s; pointer-events:none;
  max-width:90vw; text-align:center;
}
#toast.show{opacity:1}

/* ============================================================
   DESKTOP VIEW — active when <html class="desktop">.
   Set at boot by USER-AGENT detection (see script), manual
   override on the About page. html.mobile = original layout.
   ============================================================ */
html.desktop body{padding-bottom:48px}
html.desktop nav{display:none}
html.desktop header{
  background:var(--card); color:var(--text);
  border-bottom:1px solid var(--line);
  padding:10px 28px;
}
html.desktop header .logo{color:var(--navy); font-size:18px}
html.desktop .navlinks{display:flex; margin-left:18px}
html.desktop #syncStatus{color:var(--text2); opacity:1}
html.desktop #acctChip{background:var(--navy); color:#fff}
html.desktop .hdrlbl{display:inline}
html.desktop .view{max-width:1760px; padding:24px 36px}
html.desktop .pagetitle{display:block}
html.desktop .overview{flex-direction:column; flex-wrap:nowrap; gap:18px; align-items:stretch}
html.desktop .kpis.portfolio3{grid-template-columns:repeat(3,1fr)}
html.desktop .kpiwrap{flex:1 1 auto}
html.desktop .kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1250px){ html.desktop .kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:820px){
  html.desktop .overview{flex-wrap:wrap}
  html.desktop .overview .stats{flex:1 1 100%; flex-direction:row}
  html.desktop .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
html.desktop .homebar{display:flex; gap:14px; align-items:center; margin-bottom:6px}
html.desktop .homebar .searchbox{flex:1; margin-bottom:0; max-width:520px}
html.desktop .homebar .filterbar{margin-left:auto}
/* Building card grid — always full width now that the map lives in its own floating
   side card (see #mapPanel) rather than a permanent rail next to .grid. */
html.desktop .homegrid{display:block}
html.desktop .grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px}
html.desktop .bcard{padding:16px}
/* building media: photo (from SharePoint) or procedural avatar tile */
html.desktop .bmedia{
  display:flex; height:120px; border-radius:10px; overflow:hidden; margin-bottom:12px;
  align-items:center; justify-content:center; position:relative; color:#fff;
}
html.desktop .bmedia img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
html.desktop .bmedia .genid{font-size:34px; font-weight:800; opacity:.35; letter-spacing:2px}
html.desktop .bmedia svg{position:absolute; right:12px; bottom:10px; opacity:.5}
html.desktop .dhero{padding:34px 28px; border-radius:20px}
html.desktop .dhero.haspic{
  background-image:linear-gradient(160deg, rgba(27,48,112,.82), rgba(27,48,112,.88)), var(--pic);
  background-size:cover; background-position:center;
}
html.desktop .dhero h2{font-size:30px}
/* Pins Community Events to the header's top-right corner on desktop, matching where the
   Finance/Neighborhood buttons used to sit — but OUT of normal flow entirely (see
   .dhero-eventscard above), so its height can no longer stretch the name/button rows below
   it. 28px/22px matches .dhero's own desktop padding so the card lines up flush with the
   tags row above and the header's right edge. */
html.desktop .dhero-eventscard{position:absolute; top:50%; transform:translateY(-50%); right:28px; margin-top:0; width:340px}   /* vertically centred in the hero */
/* The card is nearly as tall as the hero's own content, so give the header enough height that the centred card has equal breathing room above and below. */
html.desktop .dhero:has(> .dhero-eventscard){min-height:226px}
/* Reserves room on the right for the now-absolutely-positioned Community Events card (its
   own containing block, unaffected by .dhero's padding) so a long building name or the
   Finance/Neighborhood buttons never run underneath it on desktop. */
html.desktop .dhero-toprow, html.desktop .dhero-namerow, html.desktop .dhero > .sub, html.desktop .hero-btn-group{padding-right:364px}
html.desktop .dgrid{display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:16px; align-items:start}
html.desktop .dgrid .card{margin-bottom:16px}
/* Same column ratio as .dgrid above, so the two rows read as one consistent layout --
   Stacking Plan lines up under Building Information/Operators, Upcoming Lease Changes
   lines up under Asset Plan/Building Permits/etc. */
html.desktop .dstackrow{display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:16px; align-items:start; margin-top:16px}
html.desktop .dstackrow .card{margin-bottom:0}
/* Contacts tab on desktop: anchored panel docked flush to the right edge, not a sheet */
html.desktop #contactsFab{top:130px}
html.desktop #contactsPanel{
  left:auto; top:130px; bottom:auto; right:0;
  width:400px; max-height:calc(100vh - 170px);
  border-radius:18px 0 0 18px;
}
html.desktop #contactsPanelHead{border-radius:18px 0 0 0}
/* Portfolio map on desktop: anchored panel docked flush to the LEFT edge — mirror
   image of the Contacts panel above, which docks right. */
html.desktop #mapFab{top:130px}
html.desktop #mapPanel{
  left:0; top:65px; bottom:20px; right:auto;
  width:920px;
  border-radius:0 18px 18px 0;
}
html.desktop #mapPanelHead{border-radius:0 18px 0 0}
/* assistant chat on desktop: anchored panel, not a sheet */
html.desktop #chatFab{right:24px; bottom:24px}
html.desktop #chatPanel{
  left:auto; top:auto; right:24px; bottom:24px;
  width:400px; height:620px; max-height:calc(100vh - 90px);
  border-radius:18px;
}
html.desktop #chatHead{border-radius:18px 18px 0 0}
html.desktop #chatForm{padding-bottom:12px}
/* safety: desktop view in a narrow/snapped window still lays out cleanly */
@media(max-width:820px){
  html.desktop .dgrid{display:block}
  html.desktop .dstackrow{display:block}
  html.desktop .homebar{display:block}
  html.desktop .homebar .searchbox{max-width:none; margin-bottom:10px}
  html.desktop .statstrip2{grid-template-columns:repeat(2,1fr)}
  html.desktop .czOuter{grid-template-columns:1fr}
  html.desktop .czGroupBoxRight{border-left:none; border-top:1px solid var(--line)}
  html.desktop #mapPanel{width:720px}
}

/* ---- building-level financial section (detail page) ---- */
.finhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.finhead h4{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--text2);margin:0}
.finbadge{font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--navy);background:var(--navy-light);border:1px solid #C7D2F0;border-radius:999px;padding:2px 8px}
/* Ownership-status badge on the Neighborhood Summary's collapsible Ownership section (see
   neighborhoodSummaryHtml) — green when every building in the set is 100% owned, amber
   when any building is held at a partial share, so the state reads at a glance even while
   the section is collapsed. */
.finbadge-good{color:#fff;background:var(--green);border-color:var(--green)}
.finbadge-warn{color:var(--amber-dark);background:var(--amber-light);border-color:var(--amber-line)}
/* Neighborhood Summary's collapsible Ownership-by-building block — same collapse/expand
   convention as the building page's [data-collapsible] cards (collapseArrow rotates,
   .cardbody hides), just nested inside a finpage-summary card rather than being its own
   top-level .card. */
.finsummary-collapsible .finhead{cursor:pointer; user-select:none}
/* Forecast Manager budgets dropdown on the Neighborhood page's combined Property Financial
   Report (see neighborhoodPropertyIncomeHtml) — same collapsible mechanics as the Ownership
   section above, its own top margin since it follows the OpEx/Base Revenue table + divider
   rather than sitting right under the card's own header. */
.nbbudget-collapsible{margin-top:4px}
.nbbudget-collapsible .finhead{margin-bottom:0}
.nbbudget-collapsible.collapsed .finhead{margin-bottom:0}
.nbbudget-collapsible:not(.collapsed) .finhead{margin-bottom:12px}
.finyr{font-size:12px;color:var(--text2);margin-left:auto}
.fintiles{display:grid;gap:10px}
.fintile{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.fintile .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text2)}
.fintile .val{font-size:21px;font-weight:800;color:var(--navy);margin-top:4px;line-height:1.1}
.fintile .sub{font-size:12px;color:var(--text2);margin-top:3px}
.fintile .sub.up{color:var(--green);font-weight:600}
.fintile .sub.down{color:var(--red);font-weight:600}
.finlevers{flex:1 1 280px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column}
.finlevers .lvhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.finlevers .lvhd b{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text2)}
.finlevers .reset{font-size:11px;color:var(--navy);cursor:pointer;font-weight:700}
.lever{margin-bottom:10px}
.lever label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--text);margin-bottom:5px}
.lever label b{color:var(--navy);font-size:13px}
.lever input[type=range]{width:100%;accent-color:var(--navy);margin:0}
.leverout{margin-top:auto;font-size:11px;color:var(--text2);border-top:1px solid var(--line);padding-top:8px;line-height:1.7}
.leverout b{color:var(--navy);font-weight:700}
.fincharts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.chartcard{border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;background:var(--card)}
.chartcard h5{font-size:12px;font-weight:700;color:var(--text);margin:0 0 2px}
.chartcard svg{display:block;width:100%;height:auto}
.leg{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--text2);margin-top:6px}
.leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}
/* ---- lease-expiry stacking plan (compact) ---- */
.card.stack{padding:14px}
.stackhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.stackhead h4{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--text2);margin:0}
/* ---- Lease Expiry / BOMA view toggle (mirrors the Asset Plan year-chip look) ---- */
.stackviewrow{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.stackviewchip{
  flex:0 0 auto;padding:4px 12px;border-radius:999px;background:var(--card);color:var(--text2);
  font-size:12px;font-weight:700;border:1px solid var(--line);cursor:pointer;
}
.stackviewchip:hover{border-color:var(--navy)}
.stackviewchip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
/* ---- By Year view (Finance page only -- lease expiries by year bar chart) ---- */
/* Horizontal bars (see yearBarChart). Rows stack downward, so the year list can grow over
   time without ever squeezing the bars thinner -- and each row's height is fixed, so the
   card grows predictably by one row per added year rather than rescaling. Flexbox rather
   than an SVG viewBox keeps the labels crisp at any container width. */
/* The CARD fills its column (see .finpage-expyears below) -- the bars fill it too, so
   there's no leftover white space beside them. */
.yearbarswrap{width:100%}
.yearbars{display:flex; flex-direction:column; gap:6px; width:100%}
.ybrow{display:flex; align-items:center; gap:12px; min-height:30px}
.yb-year{flex:0 0 46px; font-size:13px; font-weight:700; color:var(--text2); text-align:right}
/* The current year is the row people scan for first -- give it a touch more weight. */
.ybrow.now .yb-year{color:var(--navy)}
.yb-track{flex:1 1 auto; min-width:0; height:22px; background:var(--bg); border:1px solid var(--line); border-radius:6px; overflow:hidden}
.yb-bar{height:100%; background:var(--navy); border-radius:5px 0 0 5px; min-width:3px}
.ybrow.now .yb-bar{background:var(--navy-dark)}
.yb-val{flex:0 0 170px; font-size:12px; color:var(--text2); white-space:nowrap}
.yb-val b{color:var(--text); font-size:13px}
.yb-val.zero{opacity:.55}
.stackyearnote{font-size:12px;color:var(--text2);margin-top:12px}
/* Now a left-column card sitting directly under Property Summary, so it takes the FULL
   width of that column (previously a third of the page, in the full-width footer). Width is
   the column's, which is what makes it line up edge-to-edge with Property Summary above it.
   No min-width: the grid column can be narrower than the old 360px floor at tablet sizes,
   and a floor there would push the card past its track instead of shrinking with it. */
.finpage-expyears{width:100%; max-width:100%; box-sizing:border-box}
/* The SF-by-year table has one column per year, so it scrolls horizontally within its own
   box (see .stackyearlegend) rather than stretching the card. */
.finpage-expyears .stackyearlegend{max-width:100%}
@media(max-width:640px){
  .yb-val{flex:0 0 118px; font-size:11px}
  .yb-year{flex:0 0 38px; font-size:12px}
}
/* SF-vacating-by-year legend can have many year columns (11+ isn't unusual on a building
   with a wide expiry spread) -- scroll horizontally within its own box rather than
   overflowing the page, since the shared .exptable grid doesn't wrap/scroll on its own. */
.stackyearlegend{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:16px}
.stackyearlegend .expwrap{flex:1 1 100%}
/* Roomier than the compact stacking-plan summaries -- this legend is the main readout of the
   By Year view, not a footnote under a stacking grid, so its cells get more breathing room. */
.stackyearlegend .exptable{width:100%; min-width:max-content}
.stackyearlegend .exptable .ec{padding:8px 12px; font-size:12.5px}
.stackyearlegend .exptable .ec.lbl{font-size:13px}
.stackyearlegend .exptitle{font-size:12px}
.stackgrid{display:flex;flex-direction:column;gap:2px}
.floorrow{display:flex;gap:8px;min-height:60px}
.flabel{flex:0 0 60px;padding-top:3px}
.flabel b{display:block;font-size:13px;color:var(--text);line-height:1.1}
.flabel span{font-size:11px;color:var(--text2)}
.fspaces{flex:1;display:flex;flex-wrap:wrap;gap:4px;min-width:0}
/* When a floor's units overflow one row, rebalanceStackingFloors() (app.js) replaces the
   default flex-wrap layout above with a fixed column of evenly-sized .fsubrow lines instead
   of letting the browser's own greedy wrap leave a sparse last line whose few units get
   stretched (via each .space's flex-grow) to fill the whole row width and read as
   disproportionately massive. Each .fsubrow is a plain non-wrapping flex row, so its
   children's existing flex-grow (proportional to SF) still governs relative sizing WITHIN
   that now evenly-populated line. */
.fspaces.stackbalanced{flex-wrap:nowrap;flex-direction:column}
.fsubrow{display:flex;flex-wrap:nowrap;gap:4px;min-width:0}
.space{flex-basis:0;min-width:150px;border-radius:2px;padding:5px 9px;overflow:hidden}
.space b{display:block;font-size:12px;font-weight:700;line-height:1.2;white-space:normal;overflow-wrap:break-word}
.space b a.tenantlink{color:inherit;text-decoration:underline}
.space a.addinsbtn,.space button.addinsbtn{display:inline-block;margin-top:2px;padding:2px 8px;border-radius:4px;background:#0b5cad;color:#fff;font-size:11px;font-weight:600;text-decoration:none;border:1px solid #083f78;cursor:pointer}
.space a.addinsbtn:hover,.space button.addinsbtn:hover{background:#083f78}
.space .srow{display:flex;justify-content:flex-start;gap:14px;font-size:11px;line-height:1.35;white-space:nowrap}
.space .srow span:first-child{overflow:hidden;text-overflow:ellipsis}
.space .stype{display:inline-block;margin-top:1px;font-size:11px;text-decoration:underline;color:inherit}
/* "Committed Lease" stacking box (By Lease Expiry view) — same white/dashed look as a plain
   Vacant space (see .space[style] inline vacant styling), but overlaid with a diagonal
   stripe pattern so a unit with a signed-but-not-yet-started lease reads as visually distinct
   from an ordinary vacancy at a glance. background-color (not the "background" shorthand) is
   set here so the stripe background-image below isn't clobbered by a later shorthand write. */
.space.commited{
  background-color:#fff; color:#111; border:1px dashed #333;
  background-image:repeating-linear-gradient(45deg, rgba(152, 112, 255, 0.17) 0 6px, transparent 6px 14px);
}
.space.commited .committedrow{color:var(--text)}
/* Same stripe treatment on the "By lease expiry" legend swatch for the Committed Lease bucket,
   layered the same way (background-color + background-image, never the shorthand) so the
   legend chip visually matches the stacking boxes it summarizes. */
.exptable .ec.lbl.stripedchip{
  background-image:repeating-linear-gradient(45deg, rgba(152, 112, 255, 0.17) 0 6px, transparent 6px 14px);
}
/* ---- reimagined summary: two bordered exposure tables ---- */
.stacksummaries{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;align-items:flex-start}
.expwrap{flex:1 1 560px}
.expwrap.exp-type{flex:0 0 auto}
.expwrap.exp-type .exptable .ec:not(.lbl){text-align:right}
.exptitle{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin:0 0 6px}
.exptable{display:grid;border-top:1px solid var(--line);border-left:1px solid var(--line);border-radius:6px;overflow:hidden}
.exptable .ec{padding:4px 9px;text-align:center;font-size:11px;color:var(--text);border-right:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap}
.exptable .ec.gla{background:var(--bg);color:var(--text2)}
.exptable .ec.lc{text-align:left;font-weight:700;background:var(--bg);color:var(--text)}
.exptable .ec.pct{color:var(--text2)}
.exptable .ec.lbl{text-align:center;font-weight:700}
/* ---- Loans card: each loan shown as 4 independent stat cards (Lender / Interest Rate / Terms / Maturity) ---- */
.loangroup{margin-bottom:14px}
.loangroup:last-child{margin-bottom:0}
.loangrouplbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--navy);margin-bottom:8px}
.loantiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
/* ---- Building links section ---- */
.blink{display:block;text-align:center;margin-bottom:8px}
.blink:last-child{margin-bottom:0}
.blink.pending{opacity:.5;cursor:not-allowed}

/* ============================================================
   Financial overview split into two cards (Aug 2026)
   The KPI tiles and the scenario levers used to sit side-by-side
   inside .fintop; they're now in two separate .card.fin sections,
   so each block spans the full card width on its own.
   ============================================================ */

/* KPI tiles — now a standalone, full-width responsive grid.
   (Include only if your tiles stretch too wide now that they're
   no longer sharing a row with the levers.) */
.card.fin .fintiles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

/* Scenario levers — was a narrow sidebar column, now full width.
   Lay the 4 sliders out in a responsive grid; the header (.lvhd)
   and the projection readout (.leverout) span the full row. */
.card.fin .finlevers{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 20px;
  align-items: start;
}
.card.fin .finlevers .lvhd,
.card.fin .finlevers .leverout{
  grid-column: 1 / -1;
}
.card.fin .finlevers .lever input[type="range"]{
  width: 100%;
}

/* Space between the levers and the scenario charts below them */
.card.fin .fincharts{
  margin-top: 14px;
}

/* ============================================================
   Loans card — 7 tiles per loan now (added Fair Market Value,
   Debt Service Coverage, Loan to Value), up from 4. Let them
   wrap responsively instead of overflowing one row.
   ============================================================ */
.loantiles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

/* Loan-summary link in each loan group (Loans card) */
.loangroup .loanlink{
  display: inline-block;
  margin: 2px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.loangroup .loanlink:hover{
  text-decoration: underline;
}

/* Left-edge pull-tab (building pages only) */
.navdrawer-tab{
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 900; width: 34px; height: 64px;
  border: 0; border-radius: 0 10px 10px 0;
  background: var(--navy); color: #fff; cursor: pointer;
  box-shadow: 2px 0 8px rgba(0,0,0,.18); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.navdrawer-tab[hidden]{ display: none; }
.navdrawer-tab:hover{ filter: brightness(1.08); }

/* Drawer overlay + sliding panel */
.navdrawer{ position: fixed; inset: 0; z-index: 950; }
.navdrawer[hidden]{ display: none; }
.navdrawer-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.navdrawer-panel{
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 260px; max-width: 82vw; background: var(--card, #fff);
  box-shadow: 4px 0 24px rgba(0,0,0,.25);
  padding: 16px 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.navdrawer-head{ display: flex; align-items: center; justify-content: space-between; }
.navdrawer-title{ font-weight: 700; font-size: 13px; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }
.navdrawer-close{ border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text2); }

/* Section link list */
.navdrawer-links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.navdrawer-links a{
  display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--text, #1a1a1a); text-decoration: none; font-size: 14px;
}
.navdrawer-links a:hover{ background: var(--navy-light); }
.navdrawer-empty{ color: var(--text2); font-size: 13px; padding: 8px 12px; }

/* Offset so smooth-scroll targets clear any sticky header (tune the value to your header height) */
#detailBody .card, #detailBody .assetplan{ scroll-margin-top: 16px; }

/* =========================================================================
   BUILDING FINANCE PAGE (#/building/<id>/finance) — design layout, app palette
   ========================================================================= */

/* --- Page header: breadcrumb + title --- */
/* Finance page header — breadcrumb only. The back control is the header's existing
   "All Buildings" button, which the router relabels to "Back to Building" and retargets
   at this building on the finance subpage (see setBackButton in app.js), so it needs no
   styling of its own here. */
.finpage-header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}

/* FOUR direct children: hero | key metrics on row 1, then the two columns on row 2.
   Grid rows stretch to the tallest cell, so the picture and Key metrics share a height
   and Property Summary lines up with Financing. Columns keep the original 1 : 1.1 width
   relationship (the hero is the narrower of the two). */
.finpage-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:start;
  gap:16px;
}
/* Only the TOP row stretches (hero and Key metrics share a height). The two content columns
   below size to their own content instead, so the shorter column doesn't hold a stretched
   empty box open above the full-width Stacking Plan. */
.finpage-grid > .finhero-card,
.finpage-grid > .finpage-kpis{align-self:stretch}
/* Higher specificity than the later ".finpage-left, .finpage-right" rule below, so this
   wins regardless of source order — without it a long tenant name or URL can force a
   grid column wider than its track. */
.finpage-grid > .finpage-left,
.finpage-grid > .finpage-right{min-width:0}

/* Equal heights come from the grid's own stretch — deliberately NO flex/height overrides
   on the hero. Making it a flex column turned the ID / CORE / Yardi chips into stacked
   flex items; leaving it in normal block flow keeps them inline as they were. Only the
   default bottom margins are cleared so both cards end on the same line. */
.finpage-grid > .finhero-card{margin-bottom:0; box-sizing:border-box}
.finpage-grid > .finpage-kpis{margin-bottom:0; box-sizing:border-box}

/* Loan summary link(s) beside the Financing heading. Scoped to the Financing card rather
   than redefining .finhead globally — .finhead is already declared above (and shared by
   other card headers), so a second global rule would silently drop its margin-bottom. */
.finpage-financing .finhead{justify-content:space-between}
.finhead-actions{display:inline-flex;gap:8px;flex-wrap:wrap}

/* BOMA fallback marker — leasable area shown where no BOMA measurement exists */
.sfguess{opacity:.65; font-weight:600; cursor:help}

@media (max-width:900px){
  .finpage-grid{grid-template-columns:1fr}
}
.finpage-crumbs{ font-size: 13px; color: var(--text2); margin-bottom: 10px; }
.finpage-crumbs a{ color: var(--text2); text-decoration: none; }
.finpage-crumbs a:hover{ color: var(--navy); text-decoration: underline; }
.finpage-crumbs .crumb-sep{ margin: 0 8px; opacity: .6; }
.finpage-crumbs .crumb-current{ color: var(--text); font-weight: 600; }
.finpage-titlerow{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.finpage-h2{ margin: 0; font-size: 26px; font-weight: 800; color: var(--text); }
.finpage-alias{ font-weight: 400; color: var(--text2); font-size: 18px; }
.finpage-address{ margin-top: 4px; color: var(--text2); font-size: 14px; }
.finpage-titlemeta{ display: flex; align-items: center; gap: 8px; padding-top: 4px; }

/* --- Two-column grid + full-width footer --- */
.finpage{ display: flex; flex-direction: column; gap: 16px; }
.finpage-left, .finpage-right{ display: flex; flex-direction: column; gap: 16px; }
.finpage-lease{ width: 100%; }

/* Capital Profile sits in the finance page's LEFT column, below Tenant Profile, at the same width. */
.capital-profile{width:100%;min-width:0;box-sizing:border-box}
.capital-profile .finhead{cursor:default}
.capital-scroll{overflow-x:auto;max-width:100%}
.capital-scroll:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.capital-table{width:100%;min-width:420px;border-collapse:collapse;table-layout:fixed}
.capital-table th,.capital-table td{padding:10px 8px;border-bottom:1px solid var(--line);font-size:13px;text-align:left}
.capital-table thead th{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.04em}
.capital-table th:first-child{width:28%;padding-left:0}
.capital-table tr > :last-child{padding-right:0}
.capital-table th[scope="row"]{font-weight:500;color:var(--text2)}
.capital-table .capital-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.capital-table .capital-base th,.capital-table .capital-base td{font-weight:700;color:var(--text)}
.capital-table tbody tr:last-child th,.capital-table tbody tr:last-child td{border-bottom:0}
.capital-note{font-size:12px;line-height:1.6;color:var(--text2);margin:12px 0 0}
.capital-collapse{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--text2);cursor:pointer}
.capital-collapse:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* (i) footnote icon beside the Capital Profile title — shows on hover, keyboard focus or tap. */
.capital-info{position:relative;display:inline-flex;vertical-align:middle;margin-left:8px;text-transform:none;letter-spacing:normal}
.capital-info-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--text2);font:italic 700 11px/1 Georgia,serif;cursor:help}
.capital-info-btn:hover,.capital-info-btn:focus-visible{color:var(--navy);border-color:var(--navy);outline:none}
.capital-info-tip{display:none;position:absolute;z-index:30;top:calc(100% + 8px);left:-8px;width:320px;max-width:calc(100vw - 48px);padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(15,23,42,.12);font-size:12px;font-weight:400;line-height:1.55;color:var(--text2)}
.capital-info:hover .capital-info-tip,.capital-info:focus-within .capital-info-tip{display:block}
.capital-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Consistent card header inside finance cards */
.finpage .finhead h4{ margin: 0 0 12px; font-size: 15px; }

/* --- Property Summary --- */
.finsummary-photo{ height: 150px !important; margin-bottom: 16px !important; }
.finsummary{ display: flex; flex-direction: column; }
.finsummary-row{ display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.finsummary-row:last-child{ border-bottom: 0; }
.finsummary-lbl{ color: var(--text2); font-size: 13px; }
.finsummary-val{ font-weight: 600; font-size: 14px; text-align: right; color: var(--text); }
.finrow-sub{ color: var(--text2); font-weight: 400; font-size: 12px; }

/* --- Tenant Profile (table) --- */
.fintenant-table{ width: 100%; border-collapse: collapse; }
.fintenant-table th{ text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text2); font-weight: 700; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.fintenant-table td{ padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.fintenant-table tr:last-child td{ border-bottom: 0; }
.fintenant-table .fintenant-name{ font-weight: 600; color: var(--text); }
.fintenant-table .fintenant-num{ text-align: right; white-space: nowrap; }

/* --- Vehicle Fleet (condensed list, Operations page — see vehicleFleetHtml in app.js) ---
   Single-column row list rather than a wide table, so the card fits the HALF-width column
   the building header card occupies on the Operations page (see renderOperationsPage's
   finpage-left) instead of spanning the full page. */
.vfleet-list{ display: flex; flex-direction: column; }
/* Column header row above the list — blank over the vehicle/property column, "Last Service
   Date" right-aligned over the pill column so it reads as a real column heading. */
.vfleet-listhead{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 0 8px; border-bottom: 1px solid var(--line);
}
.vfleet-listhead span:last-child{
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  color: var(--text2);
}
.vfleet-row{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.vfleet-row:last-child{ border-bottom: 0; }
.vfleet-main{ min-width: 0; }
/* The vehicle's Make/Model IS the click-through into Yardi (Facilities Manager) — no
   separate Yardi column, unlike the Tenant Profile table this used to mirror. */
.vfleet-vehicle{
  font-size: 13px; font-weight: 700; color: var(--navy);
  text-decoration: underline; text-underline-offset: 2px;
}
span.vfleet-vehicle{ text-decoration: none; color: var(--text); }   /* no Yardi link on file — plain text, not a fake link */
.vfleet-sub{ font-size: 12px; font-weight: 400; color: var(--text2); }
.vfleet-property{ font-size: 12px; color: var(--text2); margin-top: 2px; }
/* Last Service Date pill — green within the past week, amber/orange once it's older than a
   week (see vehicleServicePillHtml in app.js). Same visual language as .freshtag-live/
   .freshtag-cached elsewhere in the app. */
.vfleet-pill{
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .2px;
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.vfleet-pill-good{ color: var(--green); background: #E3F9EF; border: 1px solid rgba(14,159,110,.35); }
.vfleet-pill-warn{ color: var(--amber-dark); background: var(--amber-light); border: 1px solid var(--amber-line); }
.vfleet-pill-none{ color: var(--text2); background: var(--bg); border: 1px solid var(--line); }

/* --- Key metrics (hero tiles) + Financing rows --- */
.finpage-kpis .fintiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 10px; }
.finpage-financing .finloangroup + .finloangroup{ margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* --- Valuation: navy feature card w/ glassmorphism sub-tiles --- */
.finval-feature{ background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff; border: 0; }
.finval-feature .finhead h4{ color: rgba(255,255,255,.85); }
.finval-hero{ margin-bottom: 16px; }
.finval-hero-lbl{ font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.7); }
.finval-hero-row{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.finval-hero-val{ font-size: 34px; font-weight: 800; line-height: 1.1; margin-top: 2px; }
/* Shared pill style for both: the ownership-share note (e.g. "90% of $105M CAD") below the
   headline value, and the "Acquired $X | Acquired Year 2011" figure sitting inline to the
   headline's right. align-items:center (not baseline) so the stacked label+year block on the
   right lines up cleanly against the single-line "Acquired $X" text on the left. */
.finval-hero-acq{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.75); background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 6px 14px; white-space: nowrap; }
/* The Acquired dollar figure itself — bumped well past the pill's own 13px caption text so it
   reads as a real headline number (smaller than the main Valuation figure, but clearly a
   number, not a footnote). */
.finval-acq-amt{ font-size: 22px; font-weight: 800; color: #fff; }
/* Vertical divider that visually separates the acquisition year from the dollar figure, so
   the two are never mistaken for one run-on number. */
.finval-acq-year-sep{ align-self: stretch; width: 1px; background: rgba(255,255,255,.25); }
/* The acquisition year gets its own small labeled block — an explicit "Acquired Year" caption
   stacked above the year — instead of a bare, easily-missed digit next to the price. */
.finval-acq-year-block{ display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.finval-acq-year-lbl{ font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: rgba(255,255,255,.6); }
.finval-acq-year{ font-size: 16px; font-weight: 800; color: #fff; }
/* auto-fit (not a fixed repeat(3,1fr)) — now holds 4 tiles (Appraisal date / Implied cap
   rate / Stabilized NOI-Cost / Avg. yearly gain-loss) and flows to 2x2 on a narrower card
   instead of forcing a lopsided 3-then-1 wrap. */
.finval-subs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.finval-sub{ background: rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 12px; }
.finval-sub-lbl{ font-size: 11px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .03em; }
.finval-sub-val{ font-size: 16px; font-weight: 700; margin-top: 4px; }
/* Avg. yearly gain/loss coloring — lighter tints than the app's standard --green/--red so
   they stay readable against the navy card background. */
.finval-sub-val.up{ color: #8FE9C6; }
.finval-sub-val.down{ color: #FFAFAF; }
/* Small dim caption inline with a sub-tile value -- e.g. Loan to Value's (Q2 26), naming
   the quarter the figure was pinned to, same dim tone as finval-sub-lbl but not uppercased. */
.finval-sub-note{ font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6); }
/* Per-entity LTV breakdown inside the Loan to Value tile, for a site held through more than
   one legal entity (see financeLTVParts). Stacked rather than inline so two or three entities
   read cleanly in a narrow glass tile, and set smaller/dimmer than the combined figure above
   so the headline stays the headline. */
.finval-sub-parts{ margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-direction: column; gap: 2px; }
.finval-part{ display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.82); }
.finval-part-id{ color: rgba(255,255,255,.6); font-weight: 500; }
.finval-feature .empty{ color: rgba(255,255,255,.75); }

/* --- Property Income (Forecast Manager budget buttons) --- */
.finpanel-note{ font-size: 12px; color: var(--text2); margin: 0 0 10px; }
.finbudget-links{ display: flex; flex-wrap: wrap; gap: 8px; }
.finbudget-link{ display: inline-flex; align-items: center; gap: 4px; }
.finbudget-code{ font-weight: 700; }
.finbudget-id{ color: var(--text2); font-weight: 400; font-size: 12px; }

/* --- Property Income: Actual-vs-Budget tables (Property Tax view: propBudgets.xlsx's
   ptaxRevActual/ptaxRevBudget/ptaxExpActual/ptaxExpBudget; Base Rent view: baseRentActual/
   baseRentBudget) ---
   ONE shared grid (.inctable) spans EVERY year block (2025, 2026, … — most recent first),
   rather than a separate grid per year — that's what makes YTD Act./YTD Bud./Var % (current
   year) line up in the exact same pixel column as Annual Act./Annual Bud./Var % (a past
   year) below it: they're literally cells of the same continuous grid, not two independently
   -sized tables that only coincidentally look alike. Each `.incRow` is display:contents (see
   below) so its `.incCell` children become direct items of that one grid; `.incYearHead`
   spans the full width (grid-column:1/-1) as a plain divider between years.
   Actual is bold black, Budget muted grey, Var % colour-coded green (favourable) / red
   (unfavourable) per incVarColor. No "Net" row: Property Tax and Base Rent line items are
   never summed to a bottom line here. */
.ptaxbudget{ margin-bottom: 14px; }
.inctable-year{ font-size: 13px; font-weight: 800; color: var(--navy); }
.inctable-thru{ font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: var(--text2); margin-left: 8px; }
/* The grid itself: every column is an flexible fr share (with a minimum floor via minmax),
   NOT a single flexible Label soaking up 100% of the leftover width against tiny fixed data
   columns — that earlier version worked for alignment but left the data columns pinned hard
   against the right edge with a huge dead gap after the label. Giving every column its own fr
   share means the extra room on a wide card gets distributed across ALL of them — Label
   shrinks back down near its content size, and Act/Bud/Var %/Extra grow noticeably wider (no
   longer cramped) and sit closer to the label instead of hugging the right edge.
   Because every row (in every year block — see the .inctable comment above) shares this ONE
   grid, alignment between a current year's YTD Act./YTD Bud. and a past year's Annual Act./
   Annual Bud. holds regardless of how these ratios are tuned. Var % keeps the largest share
   since it carries a "+$40,321 (+3.4%)" dollar+percent pair (see incVarLabel), not just a
   bare percentage. */
.inctable{
  display: grid;
  grid-template-columns: minmax(140px, 1.3fr) minmax(70px, 0.8fr) minmax(70px, 0.8fr) minmax(150px, 1.4fr) minmax(70px, 0.8fr);
  column-gap: 12px;
  align-items: center;
}
.incRow{ display: contents; }
/* .incYearHead spans every column as one divider row between year blocks — no border/margin
   above the very FIRST one (it's the first child of .inctable, so nothing to separate it
   from). */
.incYearHead{
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
.incYearHead:first-child{ padding-top: 0; margin-top: 0; border-top: none; }
/* Column-heading cells get no row-divider border (that would double up against
   .incYearHead's own border-top right above them) and less vertical padding than a data row. */
.incColHead .incCell{
  padding: 0 0 6px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text2);
  /* The fixed 60px Act/Bud/Extra columns are too narrow for "Annual Bud." on one line —
     header cells wrap onto two lines rather than ellipsis-truncating, so the column stays
     legible without needing to widen past what keeps Act/Bud/Var % aligned across years. */
  white-space: normal;
  line-height: 1.15;
}
/* Every OTHER (non-header) row's cells carry the divider border + padding a plain <tr> would
   otherwise give for free — applied per-cell rather than per-row since .incRow itself
   generates no box (display:contents). All 5 cells of a row share the same border, so
   together they still read as one continuous horizontal rule. */
.incRow:not(.incColHead) .incCell{ padding: 9px 0; border-top: 1px solid var(--line); }
.incCell{ font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.incLabel{ font-weight: 700; color: var(--navy); }
.incColHead .incLabel{ color: var(--text2); font-weight: 800; }
.incAct, .incBud, .incVarPct, .incExtra{ text-align: right; font-variant-numeric: tabular-nums; }
.incAct{ font-weight: 700; color: var(--text); }
.incBud{ color: var(--text2); }
/* Var % now carries a "+$40,321 (+3.4%)"-style dollar+percent pair (see incVarLabel), which
   runs longer than a bare percentage — allowed to wrap onto a second line rather than the
   ellipsis-truncated single line every other .incCell uses, so the dollar figure is never
   cut off. */
.incVarPct{ font-weight: 700; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.incExtra{ color: var(--text2); }
@media (max-width: 480px){
  .inctable{ grid-template-columns: minmax(90px, 1.3fr) minmax(50px, 0.8fr) minmax(50px, 0.8fr) minmax(100px, 1.4fr) minmax(50px, 0.8fr); column-gap: 6px; }
  .incCell{ font-size: 12px; }
}
.finpanel-divider{ border: none; border-top: 1px solid var(--line); margin: 14px 0; }
/* Neighborhood page's combined Property Financial Report (see neighborhoodPropertyIncomeHtml)
   — one section per building under a single shared Operating Expenses/Base Revenue toggle. */
/* Forecast Manager budget links, one row per building, under the Neighborhood page's
   combined Property Financial Report (see neighborhoodBudgetLinksHtml) — the OpEx/Base
   Revenue TABLE above this is a single neighbourhood-level row, but Forecast Manager budgets
   are still booked per-building, so those stay listed individually. */
.finpanel-bldg-budgetrow{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.finpanel-bldg-budgetrow:first-child{ margin-top: 0; }
.finpanel-bldg-name{ font-size: 13px; font-weight: 700; color: var(--text); flex-shrink: 0; }
.finpanel-bldg-name .pid{ font-weight: 400; }
/* Favicon-image button that replaced the building-id text badge to the left of the building
   name in "Forecast Manager budgets by building" — same #/building/<id> link/target as the
   badge it replaced, just styled as a small rounded icon instead of pill text. */
.bldg-icon-link{ display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-right: 2px; line-height: 0; border-radius: 4px; transition: box-shadow .12s; }
.bldg-icon-link:hover, .bldg-icon-link:focus-visible{ box-shadow: 0 0 0 2px var(--navy); }
.bldg-icon-btn{ width: 16px; height: 16px; border-radius: 3px; display: block; }

/* -- Occupancy popout -- */
/* auto-fit (not a fixed 1fr 1fr) so the Rent popout's 3rd figure (Figure B, catch-up target)
   flows in cleanly alongside In-place rent + Figure A, without needing its own layout. */
.occ-figs{display:grid;grid-template-columns:repeat(auto-fit, minmax(140px,1fr));gap:14px;margin:10px 0 16px}
.occ-fig{border:1px solid var(--line,#e3e6ea);border-radius:10px;padding:12px 14px}
.occ-fig-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
.occ-fig-value{font-size:30px;font-weight:650;line-height:1.15;margin-top:2px}
.occ-fig-note{font-size:12px;opacity:.7;margin-top:4px}
.occ-scroll{max-height:340px;overflow:auto}
.occ-table{width:100%;border-collapse:collapse;font-size:13px}
.occ-table th,.occ-table td{padding:6px 8px;border-bottom:1px solid var(--line,#eceef1);text-align:left}
.occ-table .num{text-align:right;font-variant-numeric:tabular-nums}
.occ-table thead th{position:sticky;top:0;background:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.7}
.occ-table tfoot td{font-weight:600;border-top:2px solid var(--line,#d8dce1);border-bottom:none}

/* CAM Expense breakdown — its OWN dedicated modal (#camModal), separate from the shared
   .noimodal used by the small KPI-tile popouts (NOI/Cost/Yield/Occupancy/Rent). Those stay
   capped at 720px to match the Property Income card's own proportions; this one gets real
   room for a 10-row category table plus a 12-row monthly drill-down, sized independently of
   any card on the page and centered over the whole viewport. Structurally a near-copy of
   .noimodal (same backdrop/centering/close-button mechanics) but with its own larger sizing
   knobs so growing this table never has to fight the other popups' width. */
.cammodal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center;
  justify-content:center; background:rgba(0,0,0,.45); padding:24px; }
.cammodal[hidden]{ display:none; }
.cammodal-card{ position:relative; background:var(--card,#fff); border-radius:14px;
  box-shadow:0 16px 56px rgba(0,0,0,.3); width:min(920px, 95vw); max-height:85vh;
  overflow:auto; padding:24px 26px; }
.cammodal-close{ position:absolute; top:12px; right:14px; border:0; background:transparent;
  font-size:26px; line-height:1; cursor:pointer; color:var(--text2); }
.cammodal-close:hover, .cammodal-close:focus-visible{ color:var(--navy); }
.cammodal-close:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
/* Title/sub/chart wrapper reuse the SAME look as .noimodal-title/-sub/-chart (kept as
   separate rules, not shared selectors, so this modal's sizing can evolve independently). */
.cammodal-title{ margin:0 28px 2px 0; font-family:var(--ds-font); font-weight:var(--ds-w-bold); font-size:18px; }
.cammodal-sub{ font-family:var(--ds-font); font-size:var(--ds-label-md); color:var(--text2); margin-bottom:var(--ds-sp-md); }
.cammodal-chart{ font-family:var(--ds-font); }
.cammodal-chart .occ-scroll{ max-height:56vh; }

/* Clickable label that OPENS the modal (the CAM Expense row in the Property Income card),
   the clickable category rows INSIDE it, and the "← Back" link on the monthly drill-down —
   reuses .occ-table for the actual row/column styling. */
.incLabel-clickable{ cursor:pointer; }
.incLabel-clickable:hover, .incLabel-clickable:focus-visible{ color:var(--accent,var(--navy)); text-decoration:underline; }
.incLabel-clickable:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.incDrillIcon{ font-size:10px; color:var(--text2); margin-left:2px; }
.cam-table tbody tr.cam-gl-row{ cursor:pointer; }
.cam-table tbody tr.cam-gl-row:hover, .cam-table tbody tr.cam-gl-row:focus-visible{ background:var(--bg,#f5f6f8); }
.cam-table tbody tr.cam-gl-row:focus-visible{ outline:2px solid var(--navy); outline-offset:-2px; }
.cam-back-btn{ border:0; background:transparent; color:var(--navy); font-family:var(--ds-font);
  font-size:13px; font-weight:700; cursor:pointer; padding:0 0 8px; display:inline-block; }
.cam-back-btn:hover, .cam-back-btn:focus-visible{ text-decoration:underline; }
/* "Other" category's explanatory note (see camIsOtherLabel/CAM_OTHER_COMPONENTS) — the
   underlying sub-ledger lines it rolls up, shown just under the monthly drill-down title. */
.cam-other-note{ font-family:var(--ds-font); font-size:12.5px; color:var(--text2);
  background:var(--bg,#f5f6f8); border-radius:8px; padding:8px 12px; margin:0 0 10px; }
.occ-row-rolling{background:rgba(245,166,35,.08)}
.occ-row-expired{background:rgba(214,69,65,.08)}
@media (max-width:640px){.occ-figs{grid-template-columns:1fr}}

/* -- Rent Popout -- */
.occ-fig-unit{font-size:15px;font-weight:500;opacity:.55;margin-left:2px}
.occ-fig-value.is-up{color:#2e7d5b}
.occ-fig-value.is-down{color:#c9762f}
/* Explanation box distinguishing Figure A (steady-state target) from Figure B (catch-up
   target) in the rent popout — sits above the figure cards so the two numbers below are
   never read as duplicates of the same thing. */
.rentmodal-explain{ background:var(--bg); border:1px solid var(--line,#e3e6ea); border-radius:10px;
  padding:10px 14px; margin-bottom:6px; }
.rentmodal-explain p{ font-size:12.5px; line-height:1.5; color:var(--text2); margin:0; }
.rentmodal-explain p + p{ margin-top:8px; }
.rentmodal-explain b{ color:var(--navy); }

/* =========================================================================
   EQUIPMENT MAINTENANCE — additive styling only.

   The breakdown panel needs NO new CSS at all: it's built entirely from
   your existing .czOuter / .czGroupBox / .czGroupLabel / .czSubcols / .czField
   classes, which are already styled.

   The collapsed tile reuses your existing .stattile2 / .lbl / .val classes
   for the base box + typography. The rules below are ONLY the pieces those
   classes don't already provide: clickability, the chevron, the overdue
   tint, the dual-pill layout, and the new item-list rows inside the
   breakdown (no existing equivalent for those).

   Uses your existing design tokens (--navy, --navy-light, --text2, --line,
   --bg, --red) — no new hardcoded colors introduced.
   ========================================================================= */

/* ---- Tile: clickability + overdue tint (layers on .stattile2) ---- */

.czTileClickable {
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.czTileClickable:hover,
.czTileClickable:focus-visible {
  border-color: var(--navy);
  outline: none;
}

.czTileAlert {
  background: #FDEDED;
  border-color: var(--red);
}

.czTileAlert.czTileClickable:hover {
  background: #FBDADA;
}

/* ---- Leasable area tile: a real <button>, not a <div role="button"> like every other
   .czTileClickable tile — it needs no popout/expand state of its own (just a single-action
   "jump to the stacking plan" click), so a native button is simpler than wiring up the
   keyboard handling every other clickable tile needs by hand. Resets the browser's default
   button chrome (font, alignment, full-width block) back to plain .stattile2 styling. */
.leasableareatile{
  font: inherit;
  text-align: left;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

/* ---- Tile label row: chevron alongside the existing .lbl text ---- */

.czEquipTileLbl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.czTileChevron {
  color: var(--text2);
  transition: transform .15s ease;
}

.czTileExpanded .czTileChevron {
  transform: rotate(180deg);
}

/* ---- Zoning / Leasable area tile arrow (CZ_TILE_ARROW in app.js) ----
   Same icon+size as the Building Systems tiles' arrow (COLLAPSE_CHEVRON/.collapseArrow),
   just under its own class since these two tiles toggle via a different mechanism
   (.czTileExpanded, not [data-collapsible].collapsed). Defaults to pointing RIGHT — the
   same resting look as a closed Building Systems tile — flush to the tile's right edge via
   the shared .czEquipTileLbl flex row. Zoning rotates it down when expanded (below);
   Leasable area never gains .czTileExpanded, so its arrow just stays put pointing right. */
.czTileArrow {
  color: var(--text2);
  flex-shrink: 0;
  transition: transform .15s ease;
  transform: rotate(-90deg);
}

.czTileExpanded .czTileArrow {
  transform: rotate(0deg);
}

/* ---- Tile value row: dual Scheduled | Overdue pill layout (layers on .val) ---- */

.czTileDual {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.czTileDivider {
  color: var(--line);
  font-weight: 400;
}

.czPillScheduled,
.czPillOverdue {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 700;
}

.czPillScheduled {
  background: var(--navy-light);
  color: var(--navy);
}

.czPillOverdue {
  background: #FBDADA;
  color: var(--red);
}

.czPillSmall {
  font-size: 11px;
  padding: 1px 8px;
  margin-inline-start: 6px;
}

/* ---- Breakdown item list: genuinely new, no existing equivalent ---- */

.czEquipCategoryList {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.czEquipCategory {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.czEquipCategoryHeader {
  background: var(--bg);
  padding: 8px 12px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.czEquipCategoryCounts {
  display: flex;
  gap: 6px;
}

.czEquipItems {
  padding: 4px 12px 8px;
}

.czEquipItem {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;   /* status | name | images icon | date */
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  align-items: center;
}

.czEquipItem:first-child {
  border-top: none;
}

.czEquipItemStatus {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.czEquipOverdue .czEquipItemStatus { color: var(--red); }
.czEquipScheduled .czEquipItemStatus { color: var(--navy); }

.czEquipItemName { color: var(--text); }
/* Linked name (Facilities Manager record) — same navy/underline treatment as the Vehicle
   Fleet's Facilities Manager links (.vfleet-vehicle); span stays plain text. */
a.czEquipItemName {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.czEquipItemName:hover { text-decoration-thickness: 2px; }
/* "Has Images" icon — navy when TRUE, greyed out when FALSE */
.czEquipImg { display: inline-flex; color: var(--text2); opacity: .35; }
.czEquipImg.on { color: var(--navy); opacity: 1; }
.czEquipImg svg { display: block; }

.czEquipItemDate {
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media print {
  .czTileChevron { display: none; }
}

.czEquipWrap { position: relative; }

.czEquipPopout {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: 720px;
  max-width: min(800, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
  padding: 14px 16px;
  max-height: 60vh;
  overflow-y: auto;
}

.freshtag{
  display:inline-flex; align-items:center;
  font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  border-radius:999px; padding:2px 8px; margin-left:8px; vertical-align:middle;
}
.freshtag-live{ color:var(--green); background:#E3F9EF; }
.freshtag-cached{ color:var(--amber-dark); background:var(--amber-light); border:1px solid var(--amber-line); }

/*----- Render helper for new and renewing tenant changes -----*/
.mini-section-title{
    margin:16px 0 8px;
    padding-top:12px;
    border-top:1px solid var(--line);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#6b7280;
}

/* ---------- Lease Responsibility (Building Operations page) ----------
   16 system "buckets" whose fill is a left-to-right split of the tenants' Landlord / Shared /
   Tenant / Silent mix (gradient built inline by lrSplitFill in ui.js — bucket hexes live in
   LR_FILL there) → tenant list grouped by responsibility → template popout (#leaseRespModal). */
.leaseresp, #leaseRespModal{
  --lrL-bg:#DCFCE7; --lrL-line:#86EFAC; --lrL-ink:#166534;
  --lrT-bg:#FEF9C3; --lrT-line:#FDE047; --lrT-ink:#854D0E;
  --lrS-bg:#b7d1f5; --lrS-line:#a5bbdb; --lrS-ink:#334155;
  --lrN-bg:#fac34c; --lrN-line:#cf9d31; --lrN-ink:#9e7928; }
.lr-L{ --c-bg:var(--lrL-bg); --c-line:var(--lrL-line); --c-ink:var(--lrL-ink); }
.lr-T{ --c-bg:var(--lrT-bg); --c-line:var(--lrT-line); --c-ink:var(--lrT-ink); }
.lr-S{ --c-bg:var(--lrS-bg); --c-line:var(--lrS-line); --c-ink:var(--lrS-ink); }
.lr-N{ --c-bg:var(--lrN-bg); --c-line:var(--lrN-line); --c-ink:var(--lrN-ink); }

.lr-legend{ display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:var(--text2); margin-right:4px; }
.lr-legend span{ display:inline-flex; align-items:center; gap:4px; }
.lr-legend i{ width:10px; height:10px; border-radius:3px; border:1px solid rgba(0,0,0,.12); }
html.mobile .lr-legend{ display:none; }
@media(max-width:700px){ .lr-legend{ display:none; } }
.lr-sub{ font-size:12px; color:var(--text2); margin:10px 0 14px; }
.lr-flagtxt{ color:var(--red); font-weight:600; }
.lr-hint{ font-size:12px; color:var(--text2); margin:12px 0 0; }

/* Buckets */
.lr-systems{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:14px 8px; }
.lr-sys{ display:flex; flex-direction:column; align-items:center; gap:6px; border:0; background:none; font:inherit; cursor:pointer; padding:2px; }
.lr-sys-ico{ position:relative; width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  color:#1F2937; border:1px solid rgba(0,0,0,.12); transition:transform .12s, box-shadow .12s; }
.lr-sys-ico svg{ filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)); }
.lr-sys:hover:not([disabled]) .lr-sys-ico{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.12); }
.lr-sys:focus-visible .lr-sys-ico{ outline:2px solid var(--navy); outline-offset:2px; }
.lr-sys.on .lr-sys-ico{ box-shadow:0 0 0 2px var(--navy); }
.lr-sys.flagged .lr-sys-ico{ border-color:var(--red); }
.lr-sys.lr-empty{ cursor:default; }
.lr-sys.lr-empty .lr-sys-ico{ background:#F3F4F6; color:#C4C8CF; border:1px dashed #D8DBE0; }
.lr-sys-lbl{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--text2); text-align:center; line-height:1.15; }
.lr-sys.on .lr-sys-lbl{ color:var(--navy); }
.lr-sys.lr-empty .lr-sys-lbl{ color:#B8BCC4; }
.lr-count{ position:absolute; bottom:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:var(--navy); color:#fff; font-size:10.5px; font-weight:700; line-height:18px; text-align:center; }
.lr-dot{ position:absolute; top:-4px; right:-4px; width:10px; height:10px; border-radius:50%; background:var(--red); border:2px solid var(--card); }

/* Selected bucket → tenants grouped by responsibility */
.lr-panel{ margin-top:18px; border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--bg); }
.lr-panel-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.lr-panel-head > div{ flex:1; display:flex; flex-direction:column; }
.lr-panel-head b{ font-size:15px; }
.lr-panel-head span{ font-size:12px; color:var(--text2); }
.lr-panel-ico{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#1F2937; border:1px solid rgba(0,0,0,.12); flex-shrink:0; }
.lr-panel-close{ border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:var(--text2); padding:2px 6px; }
.lr-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.lr-group{ background:var(--card); border-radius:10px; border-top:4px solid var(--c-line); padding:10px; display:flex; flex-direction:column; gap:6px; }
.lr-group-h{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--c-ink); margin-bottom:2px; }
.lr-group-h i{ width:10px; height:10px; border-radius:3px; background:var(--c-bg); border:1px solid var(--c-line); }
.lr-group-n{ margin-left:auto; background:var(--c-bg); border:1px solid var(--c-line); border-radius:999px; padding:0 8px; font-size:11px; }
.lr-trow{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:8px 10px; transition:background .12s, border-color .12s; }
.lr-trow:hover{ background:var(--navy-light); border-color:var(--navy); }
.lr-trow:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.lr-trow-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lr-trow-main b{ font-size:13.5px; }
.lr-ttype{ font-size:11.5px; color:var(--text2); }
.lr-prev{ font-size:12px; color:var(--text); opacity:.8; }
.lr-trow-tags{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.lr-chev{ font-size:20px; color:var(--text2); line-height:1; }
.lr-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:19px; padding:0 6px; border-radius:6px;
  font-size:11px; font-weight:700; background:var(--c-bg); color:var(--c-ink); border:1px solid var(--c-line); vertical-align:middle; }
.lr-flag{ display:inline-block; font-size:11px; font-weight:600; color:var(--red); background:#FDE8E8; border:1px solid #F5B5B5; border-radius:999px; padding:1px 8px; }

/* Template popout */
.lrmodal-card{ width:min(680px,100%); max-height:90vh; overflow-y:auto; }
.lr-mhead{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.lr-mico{ width:48px; height:48px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#1F2937; border:1px solid rgba(0,0,0,.12); }
.lr-mhead .noimodal-sub{ margin-bottom:0; }
.lr-tplnote{ font-size:12.5px; color:var(--amber-dark); background:var(--amber-light); border:1px solid var(--amber-line); border-radius:8px; padding:8px 10px; margin-bottom:12px; }
.lr-tpl-lbl{ display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text2); margin:0 0 5px; }
.lr-tpl-row{ display:flex; gap:8px; margin-bottom:12px; }
.lr-tpl-subject{ flex:1; min-width:0; padding:9px 11px; font:inherit; font-size:14px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.lr-tpl-body{ width:100%; padding:10px 12px; font:inherit; font-size:14px; line-height:1.5; border:1px solid var(--line); border-radius:9px; background:#fff; resize:vertical; }
.lr-tpl-subject:focus, .lr-tpl-body:focus{ outline:2px solid var(--navy); border-color:transparent; }
.lr-tpl-actions{ display:flex; justify-content:flex-end; margin-top:10px; }
/* "To" tenant-contact picker (primary contact preselected) */
.lr-tpl-select{ width:100%; padding:9px 11px; font:inherit; font-size:14px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.lr-tpl-select:focus{ outline:2px solid var(--navy); border-color:transparent; }
.lr-tpl-cmeta{ font-size:12.5px; color:var(--text2); margin-top:5px; }
.lr-tpl-cmeta a{ color:var(--navy); }
.lr-lblhint{ font-weight:500; text-transform:none; letter-spacing:0; }
/* Contact line under the "To" dropdown */
.lr-tpl-clinks{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0 14px; }
.lr-mailto{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  background:var(--navy-light); color:var(--navy); border:1px solid transparent; font-size:13px; font-weight:700; text-decoration:none; max-width:100%; }
.lr-mailto:hover{ border-color:var(--navy); }
.lr-mailto svg{ flex:0 0 auto; }
.lr-mailto-addr{ font-weight:500; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lr-tpl-phone{ font-size:12.5px; color:var(--text2); }
/* Unit chips (reuse .stackviewchip's pill look) */
.lr-unitchips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.lr-unitchip{ position:relative; display:inline-flex; align-items:center; gap:6px; }
.lr-unitchip:disabled{ opacity:.45; cursor:not-allowed; }
.lr-unitdot{ width:6px; height:6px; border-radius:50%; background:var(--amber-dark); display:inline-block; }
.lr-unitchip.on .lr-unitdot{ background:#fff; }
.lr-tpl-lblrow{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.lr-tpl-src{ font-size:11.5px; border-radius:999px; padding:2px 8px; margin-bottom:5px; background:#f1f3f6; color:var(--text2); }
.lr-src-custom{ background:var(--navy-light); color:var(--navy); font-weight:600; }
.lr-src-builtin{ background:var(--amber-light); color:var(--amber-dark); }
.lr-tpl-actions{ gap:8px; }
/* Edit-template popout — stacks above the template popout */
.lredit-modal{ z-index:1010; }
.lr-ed-src{ font-size:12.5px; color:var(--text2); margin:-4px 0 8px; }
.lr-ed-note{ font-size:12.5px; color:var(--text2); margin:8px 0 6px; }
.lr-ed-tokens{ display:flex; flex-wrap:wrap; gap:4px; }
.lr-ed-tokens code{ font-size:11.5px; background:#fff; border:1px solid var(--line); border-radius:6px; padding:1px 5px; }
.lr-ed-err{ font-size:12.5px; color:#b42318; margin-top:8px; }
.lr-tpl-nocontact{ font-size:12.5px; color:var(--text2); background:#f6f7f9; border:1px dashed var(--line); border-radius:8px; padding:8px 10px; margin-bottom:12px; }


/* ---------- Residential units popout (Building Information card) ----------
   Same .czEquipPopout shell as the Zoning tile, narrower, with a unit-type breakdown table
   (see residentialUnitsPopoutHtml in ui.js). */
.czEquipPopout.ruPopout{ width: 460px; }
.ruHeaderStats{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px){ .ruHeaderStats{ grid-template-columns: repeat(3, 1fr); } }
.ruTable{ width: 100%; border-collapse: collapse; font-size: 13px; }
.ruTable th{
  text-align: left; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; color: var(--text2); padding: 0 8px 6px; border-bottom: 1px solid var(--line);
}
.ruTable td{ padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text); }
.ruTable tr:last-child td{ border-bottom: 0; }
.ruTable .ruNum{ text-align: right; white-space: nowrap; }
.ruTable td.ruNum b{ color: var(--navy); font-size: 14px; }
.ruType{
  display: inline-block; background: var(--navy); color: #fff; font-size: 12px; font-weight: 800;
  border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.ruTypeFull{ display: block; font-size: 11px; color: var(--text2); margin-top: 3px; }
.ruBar{ height: 4px; background: var(--bg); border-radius: 999px; margin-top: 5px; overflow: hidden; min-width: 60px; }
.ruBar span{ display: block; height: 100%; background: var(--navy); border-radius: 999px; }
.ruGoto{
  margin-top: 12px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--navy);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.ruGoto:hover{ text-decoration: underline; }


/* ---------- Upcoming Leasing Activity: Rent Steps toggle ----------
   Chips reuse .stackviewchip's pill look (see renderUpcomingLeasingActivity in ui.js). */
.activityviewchip{ }
[data-activity-chips][hidden]{ display: none; }
.rentstep-rate{ display: block; margin-top: 2px; }
.expchange-who .rentstep-rate .rentstep-psf{ display: inline; font-size: 13px; font-weight: 800; color: var(--navy); }
.rentstep-prev{ font-size: 11.5px; color: var(--text2); }


/* ---------- Work Orders card + status popout (Operations page) ----------
   See renderWorkOrdersCard / workOrdersBodyHtml in ui.js. Range chips reuse .stackviewchip;
   the popout uses the same shell as .czEquipPopout (absolute, shadowed, scrolls inside) so
   opening a status never changes the card's own height. */
.wocard .cardhead{gap:10px}
.wo-asof{font-size:11px;color:var(--text2)}
.wototal{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.wototal .n{font-size:30px;font-weight:800;color:var(--navy)}
.wototal .l{font-size:13px;color:var(--text2)}
.wototal .open{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--navy);background:var(--navy-light);border-radius:999px;padding:4px 12px}
.wowrap{position:relative}
.wotiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wotile{font:inherit;text-align:left;appearance:none;-webkit-appearance:none;cursor:pointer;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:9px 12px 9px 14px;position:relative;overflow:hidden;color:inherit}
.wotile:hover{border-color:var(--navy)}
.wotile.on{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy) inset;background:var(--card)}
.wotile.zero,.wotile[disabled]{opacity:.5;cursor:default}
.wotile.zero:hover{border-color:var(--line)}
.wotile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.wotile .lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text2);display:flex;justify-content:space-between}
.wotile .val{font-size:20px;font-weight:800;color:var(--navy);margin-top:3px}
.wotile .sub{font-size:10.5px;color:var(--text2)}
.wobar{display:flex;height:7px;border-radius:999px;overflow:hidden;margin:12px 0 2px;background:var(--line)}
.wobar span{display:block;height:100%}
.wopopout{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.16);padding:14px 16px}
.wopopout::before{content:"";position:absolute;top:-7px;left:var(--arrow,40px);width:12px;height:12px;background:var(--card);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.wopophead{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.wopophead h5{font-size:14px;font-weight:800;margin:0}
.wopophead .cnt{font-size:12px;color:var(--text2)}
.woclose{margin-left:auto;font:inherit;font-size:18px;line-height:1;color:var(--text2);background:none;border:0;padding:2px 6px;border-radius:6px;cursor:pointer}
.woclose:hover{background:var(--bg);color:var(--text)}
.wopopscroll{max-height:calc(60vh - 40px);overflow-y:auto;margin:0 -6px;padding:2px 6px}
.wosearch{width:100%;padding:7px 10px;font-size:12.5px;border:1px solid var(--line);border-radius:9px;margin-bottom:10px;background:var(--card);color:var(--text)}
.wocat{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;overflow:hidden}
.wocathead{width:100%;display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;font:inherit;text-align:left;background:var(--card);border:0;color:inherit}
.wocathead:hover{background:var(--bg)}
.wocathead .chev{font-size:10px;transition:transform .15s;color:var(--text2)}
.wocat.open .chev{transform:rotate(90deg)}
.wocathead .name{font-weight:700;font-size:13.5px;flex:1}
.wocathead .pill{font-size:12px;font-weight:800;color:#fff;background:var(--navy);border-radius:999px;padding:1px 9px}
.wolist{border-top:1px solid var(--line)}
.worow{padding:9px 12px;border-bottom:1px solid var(--line)}
.worow:last-child{border-bottom:0}
.worow1{display:flex;gap:8px;align-items:baseline}
.worow1 a{color:var(--navy);font-weight:800;text-decoration:none;font-size:12.5px;white-space:nowrap}
.worow1 a:hover{text-decoration:underline}
.worow1 .desc{flex:1;font-size:13px;min-width:0;word-break:break-word}
.worow1 .unit{font-size:11px;font-weight:700;color:var(--navy);background:var(--navy-light);border-radius:999px;padding:1px 8px;white-space:nowrap}
.worow2{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px;font-size:11.5px;color:var(--text2)}
.worow2 b{font-weight:700;color:var(--text)}
.worow2 .key b{color:var(--c)}
.wopager{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-top:1px solid var(--line);background:var(--bg)}
.pgbtn{font:inherit;cursor:pointer;font-size:12px;font-weight:700;color:var(--navy);border:1px solid var(--line);background:var(--card);border-radius:999px;padding:3px 12px}
.pgbtn:hover:not([disabled]){border-color:var(--navy)}
.pgbtn[disabled]{opacity:.4;cursor:default}
.pginfo{font-size:11.5px;color:var(--text2)}
.wo-stale{font-size:11.5px;color:var(--amber-dark);margin-top:10px}
.wo-retry{font:inherit;font-size:12px;font-weight:700;color:var(--navy);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
@media print{ .wopopout{display:none} }


/* Lease Responsibility tenant rows: show the FULL obligation text (previously cut at 140
   characters in leaseRespBodyHtml) — wrap it and keep any line breaks from the sheet. */
.lr-prev{ white-space:pre-line; overflow:visible; text-overflow:clip; -webkit-line-clamp:unset; display:block; word-break:break-word; }

/* Work Orders — range chip still loading, and Problem Description text (see woDescHtml). */
.stackviewchip.woloading{opacity:.6;cursor:progress;display:inline-flex;align-items:center;gap:6px}
.wospin{width:10px;height:10px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;display:inline-block;animation:wospin .8s linear infinite}
@keyframes wospin{to{transform:rotate(360deg)}}
.worow1 .desc{white-space:pre-line}
.worow1 .wodesc-pending{color:var(--text2);font-style:italic}
.worow1 .wodesc-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.worow1 .wodesc-clamp.open{display:block;-webkit-line-clamp:unset;overflow:visible}
.worow1{align-items:flex-start}

/* Work Orders — "Residential" tag for XXXXres property codes (see woPopListHtml). */
.worow1 .wotags{display:inline-flex;gap:6px;flex-shrink:0;align-items:baseline}
.worow1 .wotag-res{font-size:11px;font-weight:700;color:#166534;background:#DCFCE7;border:1px solid #86EFAC;border-radius:999px;padding:0 8px;white-space:nowrap}

/* Work Orders — range + Commercial/Residential chip groups, caller / tenant-responsible line. */
.wochiprow{flex-wrap:wrap;justify-content:space-between;gap:8px}
.wochipgroup{display:inline-flex;gap:6px;flex-wrap:wrap}
.worow3{margin-top:2px}
.worow2 .wotr-yes{color:var(--amber-dark);background:var(--amber-light);border:1px solid var(--amber-line);border-radius:999px;padding:0 7px}

/* ---- Lease Responsibility popout: two-column layout (work orders | contacts + obligation) ---- */
.lrmodal-wide{ width:min(1500px,100%); }
/* Three columns: Work orders | Lease obligation & source | Tenant + vendor contacts.
   grid-template-areas names each column so the narrower layouts below can rearrange them
   without touching the HTML. minmax(0, Nfr) lets a column shrink below its content's width
   (long emails/clauses wrap instead of pushing the grid wider than the popout). */
.lr-mgrid{ display:grid; gap:18px; align-items:start;
  grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,5fr);
  grid-template-areas:"wo ob contacts"; }
.lr-mcol{ min-width:0; max-height:72vh; overflow-y:auto; padding-right:4px; }
.lr-mcol-wo{ grid-area:wo; background:#f8f9fb; border:1px solid var(--line); border-radius:10px; padding:4px 12px 12px; }
.lr-mcol-ob{ grid-area:ob; }
.lr-mcol-contacts{ grid-area:contacts; }
.lr-col-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text2); margin:14px 0 6px; padding-bottom:5px; border-bottom:1px solid var(--line); }
.lr-col-n{ background:var(--navy); color:#fff; border-radius:999px; padding:1px 8px; font-size:11px; letter-spacing:0; }
.lr-col-note{ font-size:12px; color:var(--text2); margin:-2px 0 8px; }
.lr-wo-list{ display:flex; flex-direction:column; gap:8px; }
.lr-wo{ background:#fff; border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:13px; }
.lr-wo-match{ border-left:3px solid var(--navy); }
.lr-wo-top{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.lr-wo-top a{ color:var(--navy); font-weight:700; text-decoration:none; }
.lr-wo-status{ font-size:11px; font-weight:700; color:var(--c); border:1px solid var(--c); border-radius:999px; padding:0 7px; }
.lr-wo-tag{ font-size:11px; border-radius:999px; padding:0 7px; }
.lr-wo-tag-sys{ background:#e8eefb; color:var(--navy); }
.lr-wo-tag-ten{ background:var(--amber-light); color:var(--amber-dark); }
.lr-wo-desc{ color:var(--text); line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.lr-wo-meta{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; font-size:12px; color:var(--text2); }
.lr-contacts .contact{ font-size:14px; }
.lr-ob{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; background:#fff; }
.lr-ob-resp{ font-weight:700; font-size:13.5px; margin-bottom:6px; }
.lr-ob-lbl{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text2); margin:8px 0 3px; }
.lr-ob-text{ font-size:14px; line-height:1.5; white-space:pre-wrap; }
.lr-ob-src{ font-size:13px; color:var(--text2); line-height:1.45; word-break:break-word; }
.lr-muted{ color:var(--text2); font-style:italic; }
/* Medium screens: work orders + obligation side by side, contacts full width underneath. */
@media (max-width: 1100px){
  .lr-mgrid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"wo ob" "contacts contacts"; }
}
/* Small screens: one column, in reading order. Columns stop scrolling on their own. */
@media (max-width: 760px){
  .lr-mgrid{ grid-template-columns:minmax(0,1fr); grid-template-areas:"wo" "ob" "contacts"; }
  .lr-mcol{ max-height:none; }
}

/* ---- Work Orders: tenant under unit, My Work Orders toggle + testing "Viewing as" ---- */
.worow1 .wotags{display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;max-width:45%}
.worow1 .wotenant{font-size:11px;color:var(--text2);text-align:right;line-height:1.3;word-break:break-word}
.worow1 .wotag-bldg{font-size:11px;font-weight:700;color:#fff;background:var(--navy);border-radius:999px;padding:1px 8px;white-space:nowrap}
.wochiprow .womineg{margin-left:auto;align-items:center}
.woviewas{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text2);background:var(--amber-light);border:1px dashed var(--amber-line);border-radius:999px;padding:2px 4px 2px 10px}
.woviewas select{font:inherit;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 8px;background:var(--card);color:var(--text);max-width:200px}
/* Responsibility dropdown — a select (not chips) so it reads as a different control from the date-range chips */
.woresp{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text2);border:1px solid var(--line);border-radius:999px;padding:2px 4px 2px 12px;background:var(--card)}
.woresp select{font:inherit;font-size:12px;font-weight:700;border:0;background:transparent;color:var(--text);padding:2px 4px;cursor:pointer}
.woresp.on{border-color:var(--navy);background:var(--navy-light)}
.woresp.on select{color:var(--navy)}
.woresp:focus-within{border-color:var(--navy)}
.womine-note{font-size:12px;color:var(--text2);margin:-4px 0 10px;line-height:1.4}
.womine-note b{color:var(--text)}
.womine-none{color:var(--amber-dark)}

/* ---- Lease Responsibility popout: tenant contact list ---- */
.lr-tcontacts{ display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
.lr-tcontact{ border:1px solid var(--line); border-radius:10px; padding:8px 12px 2px; background:#fff; }
.lr-tcontact.primary{ border-left:3px solid var(--navy); }
.lr-tc-name{ display:flex; align-items:center; gap:8px; font-size:14px; }
.lr-tc-prim{ font-size:11px; font-weight:700; color:var(--navy); background:var(--navy-light); border-radius:999px; padding:0 8px; }
.lr-tc-roles{ font-size:12.5px; color:var(--text2); margin-top:2px; }
.lr-tcontact .lr-tpl-clinks{ margin:6px 0 8px; }

/* ---- Lease Responsibility popout: collapsible sections ---- */
.lr-sec-h{ width:100%; font:inherit; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text2);
  background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:0 0 5px; cursor:pointer; text-align:left; justify-content:flex-start; }
.lr-sec-h:hover .lr-sec-t{ color:var(--navy); }
.lr-sec-h:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.lr-sec-t{ flex:1; }
.lr-sec-chev{ font-size:9px; color:var(--text2); transition:transform .15s; }
.lr-sec.open .lr-sec-chev{ transform:rotate(90deg); }
.lr-sec-body{ display:none; }
.lr-sec.open .lr-sec-body{ display:block; }

/* ---- US Residential stacking view (floor / house chips + unit grid) ---- */
.usresirow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px}
.usresichip{
  flex:0 0 auto;padding:4px 12px;border-radius:999px;background:var(--card);color:var(--text2);
  font-size:12px;font-weight:700;border:1px solid var(--line);cursor:pointer;
}
.usresichip:hover{border-color:var(--navy)}
.usresichip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.usresihead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:8px}
.usresihead b{font-size:13px}
.usresihead span{font-size:11px;color:var(--text2)}
.usresigrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;margin-bottom:12px}
.usunit{border-radius:2px;padding:5px 9px;overflow:hidden;min-height:60px}
.usunit b{display:block;font-size:12px;font-weight:700;line-height:1.2}
.usunit .usrow{font-size:11px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Building Events timeline popout ---------- */
.bldgevent-btn{cursor:pointer}
.bldgevent-btn:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.tlcard{max-width:980px; height:min(88vh,780px); display:flex; flex-direction:column; overflow:hidden}
.tlcard .tlhead,.tlcard .tlviewtoggle,.tlcard .tlchips{flex:none}
.tlcard #tlBody{flex:1; min-height:0; display:flex; flex-direction:column}
/* Constant-size popout: the content area scrolls inside it rather than the card growing/shrinking with the item count. */
.tlscroll{flex:1; min-height:0; overflow-y:auto}
.tlhead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.tlhead h3{margin:0}
.tlclose{border:none; background:transparent; font-size:26px; line-height:1; cursor:pointer; color:var(--text2)}
.tlclose:hover{color:var(--navy)}
.tlchips{margin-bottom:18px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px}
.tlchips .wochipgroup{display:inline-flex; flex-wrap:wrap; gap:10px}
.tlchips .stackviewchip{padding-left:14px; padding-right:14px}
.tltype{display:inline-flex; align-items:center; gap:6px}
.tldot{display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0}
.tldot-lg{width:11px; height:11px; margin-top:4px}
.tllist{border-left:2px solid var(--line); margin-left:5px; padding-left:14px}
.tlgroup{font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--text2); margin:14px 0 4px}
.tlgroup-od{color:#B01212}
.tlrow{display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); position:relative}
.tlrow .tldot-lg{margin-left:-21px; box-shadow:0 0 0 3px var(--bg)}
.tldate{flex:0 0 140px; font-size:12px; font-weight:600; color:var(--text)}
.tlwho{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.tlwho b{font-size:13px; color:var(--navy); word-break:break-word}
.tlwho span{font-size:12px; color:var(--text2)}
.tlwho .tltag{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px}
@media(max-width:600px){ .tlrow{flex-wrap:wrap} .tldate{flex-basis:100%} }
.tlviewtoggle{margin-bottom:16px; display:inline-flex; min-width:260px; align-self:flex-start}
.tlcalnav{display:flex; align-items:center; gap:12px; margin:4px 0 12px}
.tlcaltitle{min-width:150px; text-align:center; color:var(--navy); font-size:15px}
.tlcaltoday{margin-left:auto}
.tlcal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.tlcalhd{background:var(--bg); padding:5px 4px; font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text2); text-align:center}
.tlcalcell{background:#fff; height:clamp(54px,9vh,68px); box-sizing:border-box; padding:3px 4px; display:flex; flex-direction:column; gap:2px; overflow:hidden; cursor:pointer}
.tlcalcell:hover{background:#f4f7fc}
.tlcalblank{background:var(--bg); cursor:default}
.tlcalblank:hover{background:var(--bg)}
.tlcalnum{font-size:11px; font-weight:700; color:var(--text2)}
.tlcal-today .tlcalnum{background:var(--navy); color:#fff; border-radius:9px; padding:0 6px; align-self:flex-start}
.tlcal-sel{outline:2px solid var(--navy); outline-offset:-2px}
.tlcalev{display:block; font-size:10px; line-height:1.3; color:#fff; padding:1px 4px; border-radius:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tlcalmore{font-size:10px; font-weight:700; color:var(--navy)}
.tlcalhint{margin-top:10px}
@media(max-width:600px){ .tlcalcell{height:58px} .tlcalev{height:6px; padding:0; font-size:0} .tlcalmore{font-size:9px} }
.tlcaldetail{height:clamp(120px,20vh,170px); overflow-y:auto; margin-top:6px}
.tlcaldetail .tlgroup:first-child{margin-top:6px}
.tldd{position:relative; display:inline-block; margin:0}
.tlddbtn{display:inline-flex; align-items:center; justify-content:space-between; gap:10px; min-width:300px; padding:9px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; font:inherit; font-size:13px; color:var(--text); cursor:pointer}
.tlddbtn:hover,.tldd.open .tlddbtn{border-color:var(--navy)}
.tlddbtn b{color:var(--navy)}
.tlddpanel{position:absolute; z-index:5; top:calc(100% + 4px); left:0; min-width:100%; max-height:300px; overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:6px}
.tlddopt{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; font-size:13px; cursor:pointer; white-space:nowrap}
.tlddopt:hover{background:#f4f7fc}
.tlddopt input{margin:0; accent-color:var(--navy)}
.tlddtxt{flex:1}
.tlddn{color:var(--text2); font-size:12px}
/* Milestone view: inline type tick boxes (tlMsFilterHtml) - reuses the dropdown option look as pills */
.tlmsfilters{display:flex; flex-wrap:wrap; gap:6px}
.tlmsfilt{border:1px solid var(--line); border-radius:999px; padding:5px 12px; background:#fff}
.tlmsfilt .tlddtxt{flex:none}
.tlmsfilt.off{opacity:.55}
.tlmsfilt.off .tldot{filter:grayscale(1)}

/* ---------- Work order Tech Notes button + popout ---------- */
.wotnbtn{margin-left:auto; padding:2px 10px; border:1px solid var(--navy); border-radius:6px; background:#fff; color:var(--navy); font:inherit; font-size:11.5px; font-weight:700; cursor:pointer}
.wotnbtn:hover{background:var(--navy); color:#fff}
.tnpop{position:fixed; z-index:200; width:min(380px,calc(100vw - 16px)); max-height:min(340px,60vh); display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.tnhead{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line); font-size:13px; color:var(--navy)}
.tnclose{border:none; background:transparent; font-size:20px; line-height:1; cursor:pointer; color:var(--text2)}
.tnclose:hover{color:var(--navy)}
.tnbody{padding:10px 12px; overflow-y:auto; font-size:13px}
.tnnote{white-space:pre-wrap; word-break:break-word; line-height:1.45}

/* Building Events — Milestone view (timeline in the top half, details in the bottom half) */
.tlmstop{flex:1 1 50%; min-height:0; display:flex; flex-direction:column; justify-content:center; border-bottom:1px solid var(--line); padding:8px 0; overflow:hidden}
.tlmsscroll{flex:0 1 auto; overflow-x:auto; overflow-y:hidden; display:block}
.tlms{position:relative; display:inline-block; min-width:100%; padding:6px 16px 22px; box-sizing:border-box}
.tlmsrow{display:flex; align-items:flex-end; position:relative; z-index:1; padding-bottom:0; width:max-content; min-width:100%}
.tlmsline{position:absolute; left:16px; right:16px; bottom:20px; height:3px; background:#dcdfe3; border-radius:2px; z-index:0}
.tlmscol{flex:0 0 150px; width:150px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; padding:6px 6px 0; box-sizing:border-box}
.tlmsitem{cursor:pointer; border-radius:8px 8px 0 0}
.tlmsitem:hover{background:#f4f7fc}
.tlmson{background:#e8eefb; box-shadow:inset 0 -3px 0 var(--navy)}
.tlmscard{padding-bottom:10px}
.tlmstitle{font-size:13px; line-height:1.3; margin-bottom:6px; word-break:break-word}
.tlmsdate{font-size:11px; line-height:1.6; color:var(--text2)}
.tlmstype{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-top:2px}
.tlmsod .tlmsdate{color:#B01212; font-weight:700}
.tlmsarrow{display:block; position:relative; width:1px; height:24px; background:currentColor; margin-bottom:0}
.tlmsarrow::after{content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%); border-left:7px solid transparent; border-right:7px solid transparent; border-top:9px solid currentColor}
.tlmstoday{color:#F26522}
.tlmstoday .tlmslbl{font-size:12px; font-weight:700; padding-bottom:6px}
.tlmsempty{margin:0 0 8px}
.tlmsbottom{flex:1 1 50%; min-height:0; overflow-y:auto; padding:14px 4px 4px}
.tlmshint{margin:0}
.tlmsdet{border-left:4px solid var(--navy); padding:4px 0 4px 14px}
.tlmsdettag{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px}
.tlmsdettitle{margin:4px 0 12px; font-size:17px; color:var(--navy); word-break:break-word}
.tlmsdetgrid{display:flex; flex-wrap:wrap; gap:10px 36px; margin-bottom:12px}
.tlmsdetgrid span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text2); margin-bottom:2px}
.tlmsdetgrid b{font-size:14px; color:var(--text)}
.tlmsdetmeta{font-size:13px; color:var(--text2)}
.tlmsdetmeta a{color:var(--navy); font-weight:700}

/* Permit actions share the insurance button treatment; links retain bucket contrast. */
.space button.addinsbtn:disabled{opacity:.6;cursor:not-allowed}
.space .permitlink,.space .permitpath{color:inherit;text-decoration:underline}
.space .permitpath{background:none;border:0;padding:0;font:inherit;text-align:left;cursor:pointer}
.permit-modal-card{max-width:560px}
.permitStaleNote{font-size:12px;color:var(--text2);margin:0 0 8px}
.permitStaleNote.warn{color:#8A5A00;background:#FFF3DC;border-radius:8px;padding:8px 10px;font-weight:600}
/* Current Uses typeahead (permit popout): zoning outright/conditional uses + free-text entries. */
.permitOptional{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text2)}
.permitUseCombo{position:relative}
.permitUseCombo input{width:100%;box-sizing:border-box;margin-bottom:0}
.permitUseSuggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;max-height:240px;overflow-y:auto;
  background:var(--card,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(16,24,40,.16);padding:4px}
.permitUseSuggest[hidden]{display:none}
.permitUseOption{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:7px;
  background:none;font:inherit;font-size:13px;color:var(--text);cursor:pointer}
.permitUseOption.active,.permitUseOption:hover{background:var(--navy-light)}
.permitUseOption mark{background:none;color:var(--navy);font-weight:700}
.permitUseName{flex:1;min-width:0;overflow-wrap:anywhere}
.permitUseKind{flex:none;font-size:10px;font-weight:600;border-radius:5px;padding:2px 6px;background:var(--bg);color:var(--text2)}
.permitUseKind.outright{background:#E3F1E8;color:#24754A}
.permitUseKind.conditional{background:#FFF3DC;color:#8A5A00}
.permitUseCustom{border-top:1px solid var(--line);border-radius:0 0 7px 7px;color:var(--navy)}
#permitError{overflow-wrap:anywhere}


/* Approved permit picker: Directory checkbox-tree styling, without altering Vendor forms. */
.permitUnitPicker{position:relative;padding:0;max-height:none;overflow:hidden}
.permitUnitPicker .vcGroupSummary{padding:11px 12px;min-height:42px}
.permitGroupTitle{padding-left:24px;min-width:0;overflow-wrap:anywhere}
.permitGroupCheckbox{position:absolute;left:31px;top:14px;width:15px;height:15px;margin:0;z-index:1;accent-color:var(--navy)}
.permitGroupCheckbox:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.permitUnitPicker .vcGroupBody{max-height:300px;overflow-y:auto;padding-right:10px}
.permitUnitRow{min-height:43px;border-top:1px solid var(--line);gap:10px}
.permitUnitRow input{flex:none;width:15px;height:15px;accent-color:var(--navy)}
.permitUnitRow:has(input:checked){background:var(--navy-light)}
.permitUnitCode{font-weight:650;min-width:69px}
.permitUnitTenant{font-size:11px;color:var(--text2);flex:1;overflow-wrap:anywhere}
.permitOnFile{color:var(--text2);cursor:default}
.permitOnFileTag{font-size:10px;background:var(--bg);color:var(--text2);border-radius:5px;padding:3px 6px;white-space:nowrap}
@media(max-width:520px){.permitUnitToolbar{flex-wrap:wrap}.permitUnitToolbar input{flex-basis:100%}.permitUnitPicker .vcGroupBody{padding-left:13px}}

/* ---------- Residential Tenants view — unit popout (see resiPopShow in app.js) ----------
   Floats on <body> (position:fixed) because unit boxes clip their own overflow. */
.resispace{cursor:default}
.resispace:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.resipop{position:fixed;z-index:200;min-width:220px;max-width:280px;background:var(--card);color:var(--text);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(16,24,40,.18);padding:10px 12px;
  font-size:12px;line-height:1.4;pointer-events:none}
.resipop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--navy)}
.resipop-tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text2);
  border:1px dashed var(--text2);border-radius:4px;padding:0 5px}
.resipop-sub{color:var(--text2);margin:1px 0 6px}
.resipop-row{display:flex;justify-content:space-between;gap:16px;padding:4px 0;border-top:1px solid var(--line)}
.resipop-row span{color:var(--text2)}
.resipop-row b{font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- Stacking plan — Rentable Items view (see renderRentablePanel in ui.js) ---------- */
.rentitems{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.rentbar-head{display:flex;justify-content:space-between;font-size:13px;color:var(--text2)}
.rentbar-head b{color:var(--text)}
.rentbar{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.rentbar-fill{height:100%;background:var(--navy)}
.rentgrps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
@media (max-width:700px){.rentgrps{grid-template-columns:1fr}}
.rentgrp{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card);min-width:0}
.rentgrp-toggle{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 12px;background:none;border:0;
  border-left:4px solid var(--navy);font:inherit;color:var(--text);text-align:left;cursor:pointer}
.rentgrp-available .rentgrp-toggle{border-left:4px dashed var(--text2)}
.rentgrp-toggle:hover{background:var(--navy-light)}
.rentgrp-toggle:disabled{cursor:default;opacity:.6}
.rentgrp-toggle:disabled:hover{background:none}
.rentgrp-toggle:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.rentgrp-chev{display:inline-block;font-size:11px;color:var(--text2);transition:transform .15s}
.rentgrp.open .rentgrp-chev{transform:rotate(90deg)}
.rentgrp-name{font-weight:700;font-size:14px}
.rentgrp-count{font-size:13px;color:var(--text)}
.rentgrp-sum{font-size:13px;color:var(--text2);font-variant-numeric:tabular-nums}
.rentgrp-types{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%;padding-left:17px}
.rentgrp-type{font-size:11.5px;padding:2px 8px;border-radius:10px;background:var(--bg);color:var(--text2)}
.rentgrp-type b{color:var(--text)}
.rentgrp-list{border-top:1px solid var(--line);max-height:360px;overflow:auto}
.renttable{width:100%;border-collapse:collapse;font-size:12.5px}
.renttable th{position:sticky;top:0;background:var(--bg);text-align:left;font-weight:600;color:var(--text2);padding:7px 12px;border-bottom:1px solid var(--line)}
.renttable td{padding:6px 12px;border-bottom:1px solid var(--line)}
.renttable tr:last-child td{border-bottom:0}
.renttable .num{text-align:right;font-variant-numeric:tabular-nums}
.renttable .rentcode{color:var(--text2)}