/* MM-TOOLSIMG-V1 bundle — lim-brand + mm-tools + lim-idx + lim-img, IN THAT ORDER.
   The order is the cascade and must not be reshuffled: lim-idx deliberately overrides
   mm-tools, and lim-img overrides lim-idx. Built by bin/build-critical-css.php from the
   LIVE bytes of the first three, so it cannot silently drift from what live serves. */
/* =================================================================================================
   LiM BRAND SYSTEM v1 (MM-VISUALSWEEP-V1, 2026-11-01)
   One stylesheet shared by the buyer tools: builder incentives, affordability, relocation timeline,
   the HOA map and its community pages.

   HOW IT APPLIES WITHOUT TOUCHING PAGE COPY
   Each tool shipped its own palette under its own token names. Rather than rewriting four
   stylesheets, this file REDEFINES those legacy token names to brand values, and is linked LAST in
   <head> so it wins the cascade. Nothing in the pages' own CSS or markup has to change, so no
   sentence on any page can be altered by a restyle. That is the point: these pages carry audited
   compliance copy.

   PALETTE — the vendor kit's, read from brand-kit.html in this repo:
     Charcoal Navy #222633   structure
     Maricopa Teal #1FA6B8   accent: FILLS AND RULES ONLY
     Action Lime   #A0D020   CTA FILL ONLY, always with charcoal text
     Soft Teal     #F5FBFC   tiles
     Body Ink      #3F4450   text

   🛑 TWO CONTRAST RULES THAT ARE NOT OPTIONAL, both measured rather than assumed:
   1. Maricopa Teal is ~3.0:1 on white and FAILS AA as text. The kit's own dark variant #17818F is
      4.59:1 on white but only 4.39:1 on the #F5FBFC tiles, and tiles are exactly where badges,
      captions and links sit. So TEXT teal is #14737F — 5.54:1 on white, 5.30:1 on tile.
      --teal is remapped to that shade because the tools use color:var(--teal) 18 times.
   2. Action Lime is a light colour. White text on it is ~1.9:1. It is a FILL with charcoal text
      (8.28:1) and never a text colour.
   ================================================================================================= */

:root{
  /* canonical brand */
  --lim-char:#222633;
  --lim-teal:#1FA6B8;        /* fills and rules only */
  --lim-teal-text:#14737F;   /* AA on white AND on the soft-teal tiles */
  --lim-lime:#A0D020;        /* CTA fill only, charcoal text */
  --lim-lime-edge:#8fbb1c;
  --lim-ink:#3F4450;
  --lim-mut:#555b69;         /* the tools' greys were 3.2-4.8:1; this is AA on white and on tiles */
  --lim-soft:#F5FBFC;
  --lim-line:#e2e4e8;

  /* ---- legacy token remap, by the names each tool already uses ---- */
  --char:var(--lim-char);  --charcoal:var(--lim-char);
  --teal:var(--lim-teal-text);          /* see contrast rule 1 */
  --ink:var(--lim-ink);
  --mut:var(--lim-mut);    --muted:var(--lim-mut);
  --line:var(--lim-line);
  --soft:var(--lim-soft);  --soft-teal:var(--lim-soft);
  --lime:var(--lim-lime);
  /* --gold is not in the brand kit. It carried accents, borders, outlines AND text on two tools,
     so it maps to the text-safe teal: correct as a rule or outline, and legal as text. */
  --gold:var(--lim-teal-text);
}

/* ---- type: Montserrat for body and labels, everywhere ---- */
body, button, input, select, textarea{
  font-family:'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- the tool nav is NOT here ----------------------------------------------------------------
   A sticky nav lived here and was pulled before promotion (Dispatch, 2026-11-01). Navigation
   is owned by MM-TOOLS-V1 (assets/mm-tools.js + .css, per the Buyer Tools hub plan): a
   RENDERED component with a top strip on desktop and a FIXED BOTTOM TAB BAR on phones,
   driven by the URL. What shipped here was static markup injected per page — the
   hand-pasted-links shape that plan exists to replace — so leaving it would have meant two
   visible navigation changes for one piece of work.
   🛑 Do not add one back here. Tabs: Builder offers / Payments / Timeline / HOA map
      (Around town later) — Mike's wording, ruled 2026-11-01. */

/* ---- primary CTA -----------------------------------------------------------------------------
   The affordability and timeline tools paint their primary button with the old gold token and
   white text. Action Lime is light, so the brand pairing is lime + charcoal; this sets BOTH, which
   a token remap alone could not do safely. */
.cta .p, .lim-cta{background:var(--lim-lime) !important;color:var(--lim-char) !important;
  border:1px solid var(--lim-lime-edge) !important;font-weight:700;border-radius:999px;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.cta .p:hover, .lim-cta:hover{background:#b2e02f !important}
.lim-cta.sec{background:#fff !important;color:var(--lim-teal-text) !important;
  border:1px solid var(--lim-teal) !important}

/* ---- visible keyboard focus, everywhere ---- */
:focus-visible{outline:2px solid var(--lim-teal-text);outline-offset:2px;border-radius:4px}

/* ---- readable attribution footer (HOA map index + community pages) ---------------------------
   Real text, not an image, so it is selectable, searchable and read by a screen reader.
   Naming the brokerage obliges naming the team in the same breath (Mike, 2026-10-22:
   "Whenever we sign off something with W and Partners, it must ALWAYS mention the Living in
   Maricopa Team"), and the line does — Living in Maricopa leads, W and Partners follows. */
.lim-footer{background:var(--lim-char);color:#dfe7ea;font-size:.76rem;line-height:1.7;
  text-align:center;padding:16px 18px;margin:0}
.lim-footer a{color:#cfeef3}
@media (max-width:560px){.lim-footer{font-size:.74rem;padding:14px 14px}}

/* ---- HOA map: sideways scroll between the phone breakpoint and full desktop ------------------
   MEASURED at 1009px: header.topbar fits (1009), but .brand is squeezed to 193px while the lockup
   inside it renders 193px wide starting after the 42px mug — so the artwork ends at x=1045, 36px
   past the viewport, and the whole page scrolls sideways. Confirmed pre-existing: live, with
   neither this stylesheet nor the footer, overflows by exactly the same 36px at the same width.
   The page already handles <=767px (stacks) and <=800px (30px lockup); the gap is ~768-1100px.

   Two independent fixes, because one of them alone is a guess about how much room is needed:
   1. let the bar WRAP in that band, so the actions drop to a second line instead of crushing the
      brand. This is what keeps the logo at full size in the normal case.
   2. let the image SHRINK as a last resort. A flex item defaults to min-width:auto, which is
      precisely why it overflowed instead of fitting; min-width:0 lets it give way.
   🛑 NEITHER DISTORTS THE ARTWORK, which this file calls a logo-rules violation, not a cosmetic
      bug: aspect-ratio:560/113 and object-fit:contain are left untouched, so a clamped lockup
      letterboxes smaller inside its box rather than stretching. No height override here — setting
      height:auto alongside the existing width:auto would drop the image to its intrinsic 560px.
   🛑 flex:0 0 auto IS AT EVERY WIDTH, not only in the band. Scoping it to 768-1100px looked right
      and measured wrong: at 1366 .brand was still being squeezed to 193px, so max-width:100%
      clamped the lockup and it rendered 193px instead of 208 — letterboxed by object-fit:contain
      rather than stretched, so not distortion, but a 7% smaller logo at full desktop width is
      still a regression the band-scoped version would have shipped. The brand simply never shrinks
      below its content; the wrap handles the case where that leaves no room for the actions. */
header.topbar .brand{flex:0 0 auto}
@media (min-width:768px) and (max-width:1100px){
  header.topbar{flex-wrap:wrap}
}
header.topbar .brand img.lockup{min-width:0;max-width:100%}

/* ---- HOA map: two pre-existing colours that miss AA -------------------------------------------
   Neither is a brand token; both predate the sweep and were found by measuring the rendered page,
   not by reading the palette. Hues are kept so the semantics survive — only the value drops.
     .nb      amber "needs verification" mark, 13px/800 on a soft-teal tile: #b4690e = 4.04:1
     .lbl-ctx tribal-community map labels, 11px/700 over imagery:            #8a6a3a = 3.68:1
   Bold does not make either "large text" — that needs 18.66px — so both owe the full 4.5:1.
   The .lbl white text-shadow helps legibility but counts for nothing under WCAG. */
.nb{color:#9c5a0c}                 /* 5.18:1 on #F5FBFC */
.lbl-ctx{color:#5f4a28}            /* 6.13:1 on the measured backdrop, 8.41:1 on white */

/* ---- §11 P2 polish ---------------------------------------------------------------------------
   P2a — HOA page header, standardised with the tool pages. Type scale, spacing and the phone/CTA
   treatment are brought into line so the three read as one system.
   🛑 NOT flipped to the charcoal band the tool pages use. That band carries WHITE brand marks
      (lockup.svg + wp-mark-white.png); the HOA header carries the dark lim-wp-lockup-560.webp,
      which would vanish on charcoal. Swapping a brand mark is a brand-kit decision and the marks
      are crops, not recolours — so the structure is standardised and the artwork is left alone.
      Flagged for Dispatch rather than decided here. */
header.topbar h1{font-size:1.6rem;line-height:1.2;letter-spacing:-.4px;margin:2px 0 2px}
header.topbar .sub{color:var(--lim-mut);font-size:.95rem;line-height:1.5}
header.topbar .tel{font-weight:700;color:var(--lim-teal-text);white-space:nowrap}
header.topbar .actions button{border-radius:999px;padding:9px 15px;min-height:40px;font-weight:700}
/* 🛑 !important is required and is not laziness: the page itself carries
   .btn-lp.dark{color:#fff !important}, which beat this higher-specificity rule. The lime
   background applied while the text stayed white — 1.82:1, a contrast failure this change
   introduced. Caught by the audit, not by eye. Lime is a FILL with charcoal text (8.28:1). */
header.topbar .btn-lp.dark{background:var(--lim-lime) !important;color:var(--lim-char) !important;border:1px solid var(--lim-lime-edge);
  border-radius:999px;padding:9px 16px;min-height:40px;font-weight:700;text-decoration:none}
header.topbar .btn-lp.dark:hover{background:#b2e02f;color:var(--lim-char)}

/* §12 P2 — HOA header. Stays on the light band with the dark lockup (Dispatch ruled the flip
   out). Three fixes: the phone and email sit together as one contact pair, the Zoom CTA never
   breaks across lines, and at intermediate widths the header goes to two rows instead of
   squeezing — the same band where the lockup used to overflow. */
header.topbar .hdr-cta{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
header.topbar .hdr-cta .btn-lp.dark{white-space:nowrap;flex:0 0 auto}
header.topbar .hdr-cta .tel{white-space:nowrap}
/* the contact pair: phone and email read as one group, not two stray links */
header.topbar .hdr-cta .tel + .tel{padding-left:14px;border-left:1px solid var(--lim-line);margin-left:-4px}
@media (min-width:768px) and (max-width:1100px){
  header.topbar{flex-wrap:wrap;row-gap:8px}
  header.topbar .hdr-cta{order:3;flex-basis:100%;justify-content:flex-start}
}
@media (max-width:420px){
  header.topbar .hdr-cta{gap:6px 10px}
  header.topbar .hdr-cta .tel + .tel{padding-left:10px}
}

/* P2b — compact desktop intro on affordability and the timeline. The intro block was tuned for a
   phone and ran tall on a wide screen, pushing the first control below the fold. Phones keep the
   roomier spacing; only >=900px tightens. */
@media (min-width:900px){
  .wrap{padding-top:14px}
  .wrap > h1{font-size:1.5rem;margin:2px 0 6px}
  .wrap > .sub{font-size:.92rem;line-height:1.5;margin:0 0 12px}
  .wrap > .brk{margin:0 0 6px}
  .wrap > .back{margin-bottom:4px;display:inline-block}
}

/* ---- stacked cards on phones -----------------------------------------------------------------
   Applied only to containers measured as multi-column at 390 on these tools; a blanket
   grid-template override would flatten layouts that were already fine. */
@media (max-width:560px){
  .lim-stack{display:block !important}
  .lim-stack > *{width:auto !important;margin-left:0 !important;margin-right:0 !important}
}

/* =================================================================================================
   MM-TOOLS-V1 — the Buyer Tools shell: one navigation component for every buyer tool.
   Pairs with assets/mm-tools.js, which renders the markup these rules style.

   WHY THIS EXISTS AS ONE COMPONENT
   The visual sweep briefly staged a provisional sticky nav as per-page static markup, and Dispatch
   pulled it before promotion rather than ship navigation twice: it was a top bar at every width,
   had no hub link, and hand-pasted markup is the exact shape a shared component replaces.
   (PLAN — Buyer Tools hub, 2026-11-01: "MM-TOOLS-V1 OWNS THE NAVIGATION, AND IT IS THE ONLY NAV.")

   SHAPE
     >=768px  one sticky top strip: hub link, four tabs, Clear my numbers, Message Mike.
     <768px   a slim top row (hub + Clear) plus a FIXED BOTTOM TAB BAR, per Mike's "phones get a
              bottom tab bar". The bottom bar is what a phone user's thumb reaches.

   🛑 COLOURS COME FROM assets/lim-brand.css AND ARE NOT RE-PICKED HERE. Every value below is a
      var() onto that file's canonical tokens, so the two cannot drift. The contrast rules that
      file documents are load-bearing: Maricopa Teal is a FILL (3.0:1 on white, fails AA as text),
      text teal is --lim-teal-text, and Action Lime is a fill carrying CHARCOAL text, never white.
      Fallbacks are supplied on every var() so this file degrades sanely if it ever loads alone.

   🔑 THE TWO HEIGHT VARIABLES ARE A CONTRACT, NOT DECORATION. mm-tools.js measures the rendered
      strips and publishes --mm-nav-top / --mm-nav-bottom on :root. Pages that size themselves to
      the viewport (the HOA map is grid + height:100vh) subtract them. Hard-coding a height here
      would silently clip that map the first time the strip wrapped to two rows.
   ================================================================================================= */

:root{
  --mm-nav-top:0px;
  --mm-nav-bottom:0px;
}

/* ---- the mount point ------------------------------------------------------------------------- */
/* Reserve nothing before JS runs: an empty strip that later fills would shift the page. The mount
   is display:contents until the component marks itself ready. */
#mm-tools-nav:not(.mm-ready){display:none}

.mm-nav{
  font-family:'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:#fff;
  border-bottom:1px solid var(--lim-line, #e2e4e8);
  position:sticky; top:0; z-index:1400;      /* above the HOA map's docked card (1200) */
}
.mm-nav *{box-sizing:border-box}
.mm-nav .mm-row{
  display:flex; align-items:center; gap:4px;
  max-width:1180px; margin:0 auto; padding:6px 16px;
}

/* ---- hub link ------------------------------------------------------------------------------- */
.mm-hub{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  font-size:14px; font-weight:700; letter-spacing:.2px; text-decoration:none;
  color:var(--lim-char, #222633); padding:6px 10px 6px 2px; border-radius:6px;
}
.mm-hub:hover{color:var(--lim-teal-text, #14737F)}
.mm-hub .mm-mark{
  width:22px; height:22px; flex:0 0 auto; border-radius:5px;
  background:var(--lim-teal, #1FA6B8); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:800; letter-spacing:0;
}
.mm-hub-sep{flex:0 0 auto; width:1px; align-self:stretch; margin:4px 8px 4px 2px;
  background:var(--lim-line, #e2e4e8)}

/* ---- tabs ----------------------------------------------------------------------------------- */
.mm-tabs{display:flex; align-items:stretch; gap:2px; flex:1 1 auto; min-width:0; overflow:visible}
.mm-tab{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:13.5px; font-weight:600; text-decoration:none;
  color:var(--lim-ink, #3F4450);
  padding:9px 12px; border-radius:7px 7px 0 0;
  border-bottom:3px solid transparent;
}
.mm-tab:hover{background:var(--lim-soft, #F5FBFC); color:var(--lim-teal-text, #14737F)}
/* Active: a teal underline plus charcoal weight. 🛑 Not colour alone — a 3px rule and a weight
   change both carry the state, so it survives a monochrome display and WCAG 1.4.1. */
.mm-tab[aria-current="page"]{
  color:var(--lim-char, #222633); font-weight:700;
  border-bottom-color:var(--lim-teal, #1FA6B8);
  background:var(--lim-soft, #F5FBFC);
}
.mm-tab .mm-ico{font-size:14px; line-height:1}

/* ---- right-hand actions --------------------------------------------------------------------- */
.mm-acts{display:flex; align-items:center; gap:6px; flex:0 0 auto; margin-left:auto}
.mm-clear{
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  background:none; border:1px solid var(--lim-line, #e2e4e8); border-radius:6px;
  color:var(--lim-mut, #555b69); padding:7px 10px;
}
.mm-clear:hover{border-color:var(--lim-teal, #1FA6B8); color:var(--lim-teal-text, #14737F)}
.mm-clear[hidden]{display:none}
/* Action Lime is a FILL with CHARCOAL text (8.28:1). White on lime is ~1.9:1 and is never used. */
.mm-msg{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; white-space:nowrap;
  font-size:13px; font-weight:700;
  background:var(--lim-lime, #A0D020); color:var(--lim-char, #222633);
  border:1px solid var(--lim-lime-edge, #8fbb1c); border-radius:7px; padding:8px 12px;
}
.mm-msg:hover{filter:brightness(1.04)}

/* ---- "your numbers" strip ------------------------------------------------------------------- */
/* Shown only when the shared store actually holds something, so an empty state never advertises
   storage that is not happening. */
.mm-mine{
  background:var(--lim-soft, #F5FBFC); border-bottom:1px solid var(--lim-line, #e2e4e8);
  font-size:12.5px; color:var(--lim-ink, #3F4450);
}
.mm-mine .mm-row{padding:7px 16px; gap:10px; flex-wrap:wrap}
.mm-mine b{color:var(--lim-char, #222633); font-weight:700}
.mm-mine .mm-mine-lbl{color:var(--lim-mut, #555b69); font-weight:600}
.mm-mine[hidden]{display:none}

/* ---- the shared-store privacy line ----------------------------------------------------------
   🛑 THIS IS STATIC MARKUP IN EVERY PAGE, NOT RENDERED BY mm-tools.js, AND IT MUST STAY THAT WAY.
      A privacy disclosure that only appears once JavaScript runs is not a disclosure. The band is
      placed immediately after <body>, which is also where the component inserts itself, so it
      reads as part of the tools shell on every page and sits in the same place on all of them.
      Dispatch, 2026-11-01: the sentence goes on all four tools plus the hub, in Mike's own voice. */
.mm-priv{
  margin:0; background:var(--lim-soft, #F5FBFC);
  border-bottom:1px solid var(--lim-line, #e2e4e8);
  color:var(--lim-mut, #555b69);
  font-family:'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:12px; line-height:1.5;
}
.mm-priv span{display:block; max-width:1180px; margin:0 auto; padding:7px 16px}
@media (max-width:767px){ .mm-priv span{padding:7px 12px} }
@media print{ .mm-priv{background:none} }

/* ---- P1-3: the carried-values note, beside the populated inputs -----------------------------
   Amber rather than teal, deliberately: this is a "check this before you rely on it" note, not a
   brand accent, and it has to read as different from the page's own helper text. The colour is
   the one lim-brand.css already uses for its caution text (.nb → #9c5a0c), so nothing new is
   introduced into the palette. Measured 5.74:1 on #fdf6ec. */
.mm-carried{
  margin:10px 0; padding:11px 13px;
  background:#fdf6ec; border:1px solid #e8d3ae; border-left:3px solid #c98a1b; border-radius:8px;
  font-family:'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:12.5px; line-height:1.55; color:#6b4a12;
}
.mm-carried .mm-carried-lead{margin:0; font-weight:600; color:#5c3f0f}
.mm-carried ul{margin:7px 0 0; padding:0 0 0 2px; list-style:none}
.mm-carried li{margin:3px 0; color:#6b4a12}
.mm-carried li b{color:#4a3309; font-weight:700}

/* ---- focus: visible on every surface, never removed ----------------------------------------- */
.mm-nav a:focus-visible, .mm-nav button:focus-visible,
.mm-bottom a:focus-visible, .mm-bottom button:focus-visible{
  outline:3px solid var(--lim-teal, #1FA6B8); outline-offset:2px; border-radius:6px;
}

/* ---- phones: slim top row + fixed bottom tab bar -------------------------------------------- */
.mm-bottom{display:none}

@media (max-width:767px){
  /* the top strip keeps the hub link and Clear only; the tabs move to the bottom bar */
  .mm-nav .mm-tabs{display:none}
  .mm-nav .mm-row{padding:5px 12px}
  .mm-nav .mm-msg{display:none}            /* it is a bottom-bar item on phones */
  .mm-hub-sep{display:none}

  .mm-bottom{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:1500;
    background:#fff; border-top:1px solid var(--lim-line, #e2e4e8);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    box-shadow:0 -2px 10px rgba(34,38,51,.07);
  }
  .mm-bottom ul{display:flex; margin:0; padding:0; list-style:none}
  .mm-bottom li{flex:1 1 0; min-width:0}
  .mm-bottom a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    text-decoration:none; color:var(--lim-mut, #555b69);
    /* 44px minimum target: WCAG 2.5.5 / Apple HIG, and it is a thumb target on a phone */
    min-height:52px; padding:6px 2px 7px;
    font-size:10.5px; font-weight:600; line-height:1.15; text-align:center;
  }
  .mm-bottom a .mm-ico{font-size:17px; line-height:1}
  .mm-bottom a[aria-current="page"]{
    color:var(--lim-char, #222633); font-weight:700;
    box-shadow:inset 0 3px 0 0 var(--lim-teal, #1FA6B8);
    background:var(--lim-soft, #F5FBFC);
  }
  .mm-bottom a.mm-b-msg{color:var(--lim-char, #222633)}
  .mm-bottom a.mm-b-msg .mm-ico{
    background:var(--lim-lime, #A0D020); color:var(--lim-char, #222633);
    width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:14px;
  }
  /* The bar floats over the page, so every page gets room beneath its own content. */
  body.mm-tools-on{padding-bottom:var(--mm-nav-bottom, 0px)}
}

/* ---- pages that size themselves to the viewport ---------------------------------------------
   🛑 THE HOA MAP IS A GRID PINNED TO height:100vh. Without this it keeps its full 100vh and the
      strip pushes the map's bottom edge off screen, which reads as "the footer is gone".
      Specificity beats the page's own `#app{height:100vh}` (class + class + id > id), and these
      rules apply only when the component is actually mounted. */
body.mm-tools-on #app{height:calc(100vh - var(--mm-nav-top, 0px) - var(--mm-nav-bottom, 0px))}
@media (min-width:801px){
  body.mm-tools-on #app{min-height:calc(100vh - var(--mm-nav-top, 0px))}
}
/* 🛑 HOTFIX 2026-11-01, A LIVE BUG MIKE FOUND ON ANDROID. A HARD height ON A PHONE WAS WRONG.
   The rule above pins #app to the viewport at EVERY width, and the escape hatch under it applied
   only from 801px up. On a phone the map sidebar is taller than the box it is given, #app has
   overflow:visible, so the sidebar SPILLED OUT and drew straight over the page beneath it.
   Measured at 412x823: "Map labels & layers" (1042-1078) landed inside the SEO intro paragraph
   (1032-1156), and the A-Z rows (Acacia Crossings, 1304-1321) inside the footer (1277-1365).
   Nothing was absolutely positioned or fixed; it was overflow out of a fixed height, which is
   exactly why it looked like stacked layers.
   ⚠️ AND MY OWN CHANGE THIS MORNING MADE IT WORSE. Counting .lim-brokerline in chromeTop() was a
      real fix for the clipped desktop map, but it also took another 94px off #app on mobile,
      621px down to 528, so the same latent overflow spilled further. The pinning was always
      wrong on a phone; my fix is what made it visible.
   min-height rather than height below 801px: the map still fills the screen when its content is
   short, and grows instead of overflowing when it is not. */
@media (max-width:800px){
  body.mm-tools-on #app{
    height:auto;
    min-height:calc(100vh - var(--mm-nav-top, 0px) - var(--mm-nav-bottom, 0px));
  }
}
/* The map's docked info card is position:fixed to the bottom; lift it above the tab bar. */
body.mm-tools-on #info.open{bottom:calc(var(--mm-nav-bottom, 0px) + 0px)}

/* ---- reduced motion / print ------------------------------------------------------------------ */
@media print{ .mm-nav, .mm-bottom, .mm-mine{display:none !important} }

/* ---- the external-link marker on the Home search tab ----------------------------------------
   Mike's home search is Luxury Presence's site, not ours, so the tab says so before it is clicked.
   aria-hidden because the <a>'s aria-label already names the destination for assistive tech —
   announcing "↗" as well would just be noise. */
.mm-ext{font-size:.82em; line-height:1; opacity:.65; margin-left:1px}
.mm-tab .mm-ext{margin-left:3px}
@media (max-width:767px){ .mm-bottom .mm-ext{display:none} }  /* the bottom bar is too tight for it */

/* =================================================================================================
   MM-IDXCONSIST-V1 (2026-11-01) — make the buyer tools read as one product with LP's IDX page.

   Mike, 2026-11-01: "we work from that [IDX] page to make sure that we are visually consistent...
   packaged together as one unit. Too much variation in visual style will be very disjointed."
   The IDX page is Luxury Presence's and cannot be restyled, so the tools move to it, not the
   reverse. Measured reference: _mission-control/reference/IDX visual reference — LP home search
   (2026-11-01).md — Inter 14px, #293044 navy chrome at 72px, #F7F7F7 bars, black primary buttons,
   white 8px-radius pills, monochrome, no teal or lime anywhere.

   🛑 THIS IS A SEPARATE LAYER AND NOT AN EDIT TO lim-brand.css, DELIBERATELY.
      lim-brand.css is LIVE and linked by every live tool page. Editing it would restyle production
      the moment it uploaded, and this change needs Mike's eyes first because it changes the brand
      look. So this file is linked ONLY by the staged pages, loads LAST, and the whole pass reverts
      by deleting one <link>. lim-brand.css is not touched.

   🛑 WHY THIS IS NOT JUST A TOKEN REMAP, AND THE TRAP IT AVOIDS
      lim-brand.css pairs Action Lime with CHARCOAL text on purpose, and says so: "Action Lime is a
      light colour. White text on it is ~1.9:1. It is a FILL with charcoal text (8.28:1)." Remapping
      --lime to black while leaving the text token alone would put charcoal on black — about 1.3:1,
      unreadable. The same file records that this exact class of mistake already shipped once:
      "the lime background applied while the text stayed white — 1.82:1, a contrast failure this
      change introduced. Caught by the audit, not by eye."
      ➡️ So every inverted fill below sets BOTH the background and the colour, in one rule, and
         !important where lim-brand.css used it (it has to beat the pages' own !important).

   WHAT IS DELIBERATELY LEFT ALONE
   • Every compliance string. This file contains no content, only colour, type and radius.
   • Mike's logo lockup and the team-first brokerage line. The lockup becomes MORE prominent: the
     navy bar now carries the white lockup, which is what LP's own nav does.
   • The HOA map's DATA colours. Its polygons and legend are coloured from JS constants
     (#E4572E, #6d5a7c, #a7854f, …), never from --teal, so nothing here can change what a colour
     on that map MEANS. Verified by grep before writing this.
   • The amber carried-values note (.mm-carried). Amber is a caution signal, not brand paint, and
     it is neither teal nor lime. Flagged in the packet rather than silently monochromed.
   ================================================================================================= */

:root{
  --idx-navy:#293044;         /* measured LP nav bar */
  --idx-bar:#F7F7F7;          /* measured LP filter bar */
  --idx-black:#000;           /* measured LP primary button */
  --idx-line:rgba(0,0,0,.08); /* measured LP pill border, 0.8px */
  --idx-ink:#111318;          /* body text; LP uses pure black, this is a hair softer for long copy */

  /* ---- the legacy tokens, re-pointed a SECOND time ----------------------------------------
     lim-brand.css already remapped these from each tool's original palette to the brand one.
     This re-points the same names at LP's palette, so again no page markup or copy changes. */
  --char:var(--idx-navy);  --charcoal:var(--idx-navy);
  /* --teal carried TEXT in ~27 places. Navy is 13.1:1 on white — measured, and far clearer than
     the teal it replaces (the text teal was 5.54:1). */
  --teal:var(--idx-navy);
  --gold:var(--idx-navy);
  --ink:var(--idx-ink);
  --soft:var(--idx-bar);   --soft-teal:var(--idx-bar);
  /* 🛑 --lime becomes black ONLY because every rule that fills with it also sets white text below.
        Do not rely on this token alone for a new button. */
  --lime:var(--idx-black);

  /* ---- the tracker's OWN accent names ------------------------------------------------
     v7 was built with the brand palette baked into its own :root under different names, so
     re-pointing --teal/--lime alone left it untouched. --ac is its accent text colour and was
     responsible for 451 of the teal pixels on that page. */
  --ac:var(--idx-navy);        /* was #14737F / #1f6f7c */
  --acs:var(--idx-bar);        /* was #F5FBFC / #e9f3f5 soft-teal tile */
  --lime-d:var(--idx-black);   /* was #5E7A0E */
  --brand:var(--idx-navy);     /* was #222633 / #2b2f3a */
  --faint:#5f6572;
  --line:var(--idx-line);

  /* ---- and the canonical lim-* names, for anything reading those directly ---- */
  --lim-char:var(--idx-navy);
  --lim-teal:var(--idx-navy);  --lim-teal-text:var(--idx-navy);
  --lim-lime:var(--idx-black); --lim-lime-edge:var(--idx-black);
  --lim-soft:var(--idx-bar);
  --lim-ink:var(--idx-ink);
}

/* ---- type: Inter for body and UI ------------------------------------------------------------
   The reference also records an "ABC" display family on LP's headings. That is LP's licensed
   font and we do not have it, so headings take Inter too rather than guessing a substitute.
   Caveat display titles are retired on tool pages — a script face next to LP's page is the single
   most "different product" signal of the lot. */
body, button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6, .mm-nav, .mm-priv, .mm-carried, .brk, footer{
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
body{color:var(--idx-ink)}
/* LP's h1 is 20px/700 and h2 16px/600. Ours run larger because these are content pages rather than
   a results grid, so this tightens the scale toward LP without collapsing the hierarchy. */
h1{letter-spacing:-.4px}
h2,h3{letter-spacing:-.2px}

/* ---- the top chrome becomes LP's nav bar --------------------------------------------------- */
/* This is the single most important rule in the file: it is the thing a visitor sees in both
   products, so if it matches, the jump stops feeling like a different site. */
.mm-nav{background:var(--idx-navy) !important; border-bottom:0 !important}
.mm-nav .mm-row{min-height:60px}
.mm-hub{color:#fff !important}
.mm-hub:hover{color:#fff !important; opacity:.85}
/* The text chip is replaced by Mike's white lockup, which is what LP's nav carries. */
.mm-hub .mm-mark{
  background:transparent !important; color:#fff !important;
  width:auto !important; height:26px; border-radius:0 !important;
  font-size:0 !important;                       /* hide the "LiM" letters, keep the element */
}
.mm-hub .mm-mark::after{
  content:''; display:block; width:124px; height:26px;
  background:url('/assets/lockup.svg') left center / contain no-repeat;
}
.mm-hub-sep{background:rgba(255,255,255,.22) !important}

.mm-tab{color:rgba(255,255,255,.86) !important; border-radius:8px 8px 0 0}
.mm-tab:hover{background:rgba(255,255,255,.10) !important; color:#fff !important}
/* Active state still carries TWO signals, not colour alone (WCAG 1.4.1): a white rule and weight. */
.mm-tab[aria-current="page"]{
  color:#fff !important; font-weight:700;
  background:rgba(255,255,255,.12) !important;
  border-bottom-color:#fff !important;
}
.mm-tab .mm-ico{opacity:.92}

.mm-clear{
  background:transparent !important; color:rgba(255,255,255,.84) !important;
  border:1px solid rgba(255,255,255,.30) !important; border-radius:8px !important;
}
.mm-clear:hover{color:#fff !important; border-color:rgba(255,255,255,.65) !important}

/* ---- the two light bars take LP's #F7F7F7 --------------------------------------------------- */
.mm-priv{background:var(--idx-bar) !important; border-bottom:1px solid var(--idx-line) !important;
  color:#4a4f5a !important}
.mm-mine{background:var(--idx-bar) !important; border-bottom:1px solid var(--idx-line) !important}
.mm-mine b{color:var(--idx-ink) !important}

/* ---- primary buttons: black, white text, 8px --------------------------------------------------
   🛑 EVERY ONE OF THESE SETS BACKGROUND **AND** COLOUR. See the header note: that is the whole
      reason this file is not a token remap. */
.cta .p, .lim-cta, header.topbar .btn-lp.dark, .mm-msg, .mikerow .prim, .tool .go, .lpbar .btn-lp{
  background:var(--idx-black) !important; color:#fff !important;
  border:1px solid var(--idx-black) !important; border-radius:8px !important;
  font-weight:500 !important; letter-spacing:-.175px;
}
.cta .p:hover, .lim-cta:hover, header.topbar .btn-lp.dark:hover,
.mm-msg:hover, .mikerow .prim:hover, .tool:hover .go{
  background:#1a1a1a !important; color:#fff !important; filter:none !important;
}
/* secondary = LP's pill: white, black text, 8px, hairline border */
.lim-cta.sec, .mikerow .sec, .mm-carried + * .sec{
  background:#fff !important; color:var(--idx-black) !important;
  border:1px solid var(--idx-line) !important; border-radius:8px !important; font-weight:400 !important;
}
.lim-cta.sec:hover, .mikerow .sec:hover{border-color:rgba(0,0,0,.28) !important}

/* ---- the tracker's OWN button classes ------------------------------------------------------
   🛑 MEASURED 1.6:1 BEFORE THIS RULE EXISTED. The tracker paints its primary CTA with
      `.cta.pri{background:var(--lime);color:var(--char)}` — so re-pointing --lime at black while
      --char went navy produced NAVY TEXT ON BLACK. This is the third time on this project that a
      fill token moved without its text token; the file header warns about it and I still missed
      this selector, because I enumerated .cta .p and .lim-cta and the tracker uses neither.
   ➡️ The guard that actually caught it is the computed-style contrast sweep, not the enumeration.
      Any future palette move should run that sweep before being believed.
   (The HOA map's `.pp a.idx-btn` and `.btn-lp` already pair lime with #fff, so a black fill only
   improves them — 21:1 — and they need nothing here.) */
.cta.pri, a.cta.pri, button.cta.pri{
  background:var(--idx-black) !important; color:#fff !important;
  border:1px solid var(--idx-black) !important; border-radius:8px !important; font-weight:500 !important;
}
.cta.pri:hover{background:#1a1a1a !important; color:#fff !important}
.cta.sec, a.cta.sec, button.cta.sec{
  background:#fff !important; color:var(--idx-black) !important;
  border:1px solid var(--idx-line) !important; border-radius:8px !important; font-weight:400 !important;
}
.cta.sec:hover{border-color:rgba(0,0,0,.28) !important}
/* the tracker's jump chips and badges: pills, per LP */
.qbtn, .chip, .vc-badge{border-radius:8px !important}
.qbtn{color:var(--idx-navy) !important}

/* ---- the mobile tab bar stays ours, but monochrome ----------------------------------------- */
@media (max-width:767px){
  .mm-bottom{border-top:1px solid var(--idx-line) !important; box-shadow:none !important}
  .mm-bottom a{color:#5a5f6a !important}
  .mm-bottom a[aria-current="page"]{
    color:var(--idx-black) !important; background:var(--idx-bar) !important;
    box-shadow:inset 0 3px 0 0 var(--idx-black) !important;
  }
  .mm-bottom a.mm-b-msg{color:var(--idx-black) !important}
  .mm-bottom a.mm-b-msg .mm-ico{background:var(--idx-black) !important; color:#fff !important}
}

/* ---- cards, pills and tiles ----------------------------------------------------------------- */
/* LP's listing cards have SQUARE photo corners and no shadow. Ours are content cards, so they keep
   a radius, but it drops to 8px and the shadows go — LP is flat except for its map controls. */
.tool, .mine, ul.xlink li a, .card, .fld input, .fld select, input, select, textarea{
  border-radius:8px !important;
}
.tool:hover{border-color:rgba(0,0,0,.22) !important; box-shadow:none !important}
.mine{background:var(--idx-bar) !important; border-color:var(--idx-line) !important}
ul.xlink li a{color:var(--idx-ink) !important; border-color:var(--idx-line) !important}
ul.xlink li a:hover{background:var(--idx-bar) !important; border-color:rgba(0,0,0,.28) !important}

/* 🛑 A LITERAL, NOT A TOKEN. The generator writes `border-left:3px solid #1FA6B8` into both page
      templates as a hard-coded hex, so no amount of token re-pointing reaches it. */
tr.key-row th, tr.key-row td{
  background:var(--idx-bar) !important; border-left:3px solid var(--idx-navy) !important;
}

/* ---- focus: high contrast on BOTH surface families ----------------------------------------- */
/* Navy chrome needs a white ring; white content needs a navy one. One colour cannot do both. */
/* ⚰️ ~~a navy ring on light surfaces and a white ring on navy~~ SUPERSEDED by the §14 single
   ring below. Removed rather than left in place: these were MORE SPECIFIC than the :where()
   rule that replaced them, so leaving them meant the new ring silently never applied on the
   one surface the audit explicitly asked to check. */

/* ---- the brand bar on the content pages ----------------------------------------------------- */
/* .lpbar was already var(--char), so it is navy now by inheritance. Match LP's 72px and keep the
   lockup pairing untouched — the team-first brokerage line is content and is not styled here. */
.lpbar{min-height:72px; background:var(--idx-navy) !important}
.lpbar .ph{color:#fff !important}

/* ---- print ---------------------------------------------------------------------------------- */
@media print{ .mm-nav, .mm-bottom, .mm-priv, .mm-mine{display:none !important} }

/* =================================================================================================
   ONE NAVY BAR (2026-11-01, Dispatch) — the hub and tools were stacking two.
   mm-tools.js moves the page's own marks and phone into this bar and removes .lpbar; these are the
   styles for the merged result. LP's nav is the target: marks left, links, actions right.
   ================================================================================================= */
/* the CSS lockup chip is redundant once the page's real marks are in the bar */
/* 🛑 .mm-marks-in, NOT .mm-merged. The chip is only redundant once the page's REAL marks have
      been moved in, which happens only on pages that have a .lpbar. Hiding it on every layered
      page left the tracker and the HOA map with a bar carrying no logo at all. */
.mm-marks-in .mm-hub .mm-mark{display:none !important}
.mm-marks-in .mm-hub{padding-left:2px}
.mm-marks{display:flex; align-items:center; gap:11px; flex:0 0 auto; margin-right:14px}
.mm-marks img{height:26px; width:auto; display:block}
/* the phone, as LP places "Login": right-hand side, before the primary action */
.mm-phone{
  color:#fff !important; font-weight:600; font-size:13.5px; text-decoration:none;
  white-space:nowrap; padding:8px 10px; border-radius:8px;
}
.mm-phone:hover{background:rgba(255,255,255,.10)}

/* 🔑 THE TRACKER'S SECOND STRIP STAYS, AS A LIGHT LINE — Dispatch: "the separate 'Mike Millet,
      REALTOR® · Living in Maricopa Team · Brokered by W and Partners, LLC.' strip can stay as the
      light line under the bar." It carries the ADRE disclosure, so it is de-emphasised, never
      removed. Measured 13.1:1 on #F7F7F7. */
.top{background:var(--idx-bar) !important; color:var(--idx-ink) !important;
  border-bottom:1px solid var(--idx-line) !important; padding:8px 16px !important}
.top .brk, .top p{color:var(--idx-ink) !important; margin:0 !important}
.top .brk .tm{color:var(--idx-ink) !important}
.top a{color:var(--idx-navy) !important}

@media (max-width:767px){
  /* on a phone the bar keeps the marks and the phone; the tabs are already in the bottom bar */
  .mm-marks img{height:22px}
  .mm-marks{gap:8px; margin-right:8px}
  .mm-phone{font-size:12.5px; padding:7px 6px}
}

/* =================================================================================================
   §14 — IDX consistency audit, CONDITIONAL GO. P1 and P2, applied verbatim.
   ================================================================================================= */

/* ---- P1 FOCUS: one visible ring, legible on white, on navy AND on black ---------------------
   GPT's value, 3px solid #6478c7 at 3px offset. The offset is what makes one colour work on all
   three surfaces: the ring sits in a 3px gap rather than against the control's own fill, so the
   relevant contrast is ring-vs-surface, not ring-vs-button.
     #6478c7 on white   #fff    4.07:1   (>=3:1, UI component contrast, WCAG 1.4.11)
     #6478c7 on navy    #293044 3.10:1
     #6478c7 on black   #000    4.72:1
   🔑 Replaces the earlier two-colour scheme (navy ring on light, white ring on navy). One ring is
      easier to keep correct, and these are measured, not assumed. */
/* 🛑 NOT :where(). :where() scores ZERO specificity, which is exactly why the first version of
   this rule lost to the older .mm-nav rules it was meant to replace. These selectors are
   explicit so the ring is genuinely the same everywhere — which is the whole point of it. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.mm-nav a:focus-visible, .mm-nav button:focus-visible, .mm-bottom a:focus-visible,
.mm-tab:focus-visible, .mm-hub:focus-visible, .mm-phone:focus-visible, .mm-msg:focus-visible,
.mm-clear:focus-visible, .lpbar a:focus-visible, ul.xlink li a:focus-visible{
  outline:3px solid #6478c7 !important;
  outline-offset:3px !important;
  border-radius:8px;
}
/* the bottom bar is fixed; without this the ring is clipped by the bar's own edge */
.mm-bottom a:focus-visible{outline-offset:-3px !important}

/* ---- P1: the external marker, higher contrast ----------------------------------------------
   Was opacity .65 on the navy bar, which is a ~6:1 glyph where the surrounding label is 10:1.
   Full-strength, slightly larger, and it carries a title tooltip naming the destination. */
.mm-ext{opacity:1 !important; font-size:.9em !important; font-weight:700}
.mm-tab .mm-ext, .mm-nav .mm-ext{color:#fff !important}

/* ---- P1: the readable brokerage line under the nav (HOA pages) ------------------------------
   🛑 ADRE R4-28-502(E) WANTS READABLE TEXT, NOT A LOGO. This supersedes the 2026-08-31 "branch ①"
      reasoning still commented in hoa-map/index.html, which argued that because the locked lockup
      renders the words "BROKERED BY" as artwork, a text line would be redundant. The logo band is
      removed by this pass, so there is nothing left to be redundant with — and an <img> is not
      readable text: a screen reader gets only its alt, and nobody can select or search it. The
      same argument is already written into the generator's .lim-footer. */
.lim-brokerline{
  margin:0; background:#fff; border-bottom:1px solid var(--idx-line);
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:13px; line-height:1.5; color:var(--idx-ink);
}
/* 🛑 `> span`, NOT `span`. Unscoped, this also turned the INNER team span into a block, so on
   a phone the line broke into three awkwardly-indented rows - Mike saw it on the live map:
   "Mike Millet, REALTOR(R) ." / "Living in Maricopa Team" / ". Brokered by W and Partners".
   The team name is part of a sentence and has to stay inline. Measured at 412: the band goes
   from 94px to 58px, which also hands 36px back to every page that carries it. */
.lim-brokerline > span{display:block; max-width:1100px; margin:0 auto; padding:9px 16px}
.lim-brokerline b{font-weight:700}
.lim-brokerline .tm{font-size:.92em; font-weight:600}   /* team smaller than the brokerage: ADRE SPS 2025.03 */

/* 🛑 the map index's photo-and-logos band goes with it (P1). The topbar keeps its heading,
      subtitle, print button and CTAs — only the redundant brand block is removed. */
header.topbar .brand{display:none !important}

/* ---- P1: tighten the tracker's stacked chrome, WITHOUT reducing visibility ------------------
   §14: "tighten ... without reducing visibility." So padding and line-height come down; the font
   size, the colours and every word stay exactly as they are. */
.top{padding:6px 16px !important}
.top .brk{font-size:12.5px !important; line-height:1.45 !important}
.mm-priv span{padding:6px 16px !important}
.mm-priv{line-height:1.45 !important}

/* ---- P2: the hub, 1000–1100px -------------------------------------------------------------- */
body[data-page="/buyer-tools/"] .wrap{max-width:1080px !important}
.mm-nav .mm-row, .mm-priv span, .mm-mine .mm-row{max-width:1080px}

/* ---- P2: 14px Inter controls, one component system ------------------------------------------
   LP's controls are Inter 14px with an 8px radius and a hairline border. One rule for all of them
   beats four pages each deciding separately, which is how the variation Mike objected to started. */
input, select, textarea, button, .mm-clear, .mm-tab, .cta, .lim-cta, .tool .go, .mikerow a, ul.xlink li a{
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size:14px !important;
}
input, select, textarea{
  border:1px solid var(--idx-line) !important; border-radius:8px !important;
  padding:9px 11px !important; min-height:39px;      /* LP's measured pill height */
  background:#fff !important; color:var(--idx-ink) !important;
}
label, .fld label, th{font-size:14px !important; font-weight:600}
/* restrained hierarchy: LP runs h1 20px/700, h2 16px/600. Ours are content pages, so one step up. */
h1{font-size:1.5rem !important}
h2{font-size:1.1rem !important}
h3{font-size:1rem !important}
.mm-tab{font-size:13.5px !important}                  /* the bar stays its own scale */
.mm-bottom a{font-size:10.5px !important}

/* ---- P2: a lighter HOA dues row -------------------------------------------------------------
   The figure stays prominent; the separators get out of its way. Was a 3px navy rule on a filled
   #F7F7F7 cell — two emphases competing. Now the figure is bold and the rule is a hairline. */
tr.key-row th, tr.key-row td{
  background:#fff !important; border-left:0 !important;
  border-bottom:1px solid var(--idx-line) !important;
}
tr.key-row td{font-weight:700; color:var(--idx-ink) !important}
table.facts td, table.facts th{border-bottom:1px solid #f0f0f1}

/* =================================================================================================
   ONE "Message Mike", TWO ENTRY POINTS (2026-11-01, Dispatch)
   The builder page showed the nav's black Message Mike AND the floating launcher at the same time.

   🔑 THEY ALREADY OPEN THE SAME THING — verified, not assumed. mm-chat.js:165 publishes
      `W.mmChatOpen`, and mm-tools.js checks for exactly that function at CLICK time, falling back
      to the sms: href only where no chat is loaded. So nothing needed re-pointing; what was wrong
      was showing two controls for one action, and where the second one sat on a phone.
   ================================================================================================= */

/* ---- desktop: the nav button is the one you see ---------------------------------------------
   Hidden only while the panel is CLOSED. Once it is open the launcher comes back, so there is
   always a collapse control outside the iframe. (The chat can also be closed from inside the
   frame — mm-chat.js:139 handles a postMessage 'close' — and with Escape at line 164. Checked
   both before hiding anything; hiding the only way out would have been a bad trade for tidiness.)
   The nudge goes too: it is a speech bubble pointing at a launcher that is not on screen. */
@media (min-width:768px){
  .mmc:not(.open) .mmc-l{display:none !important}
  .mmc-n{display:none !important}
}

/* ---- phones: keep the launcher, lift it off the tab bar -------------------------------------
   🛑 MEASURED COLLISION at 390: the launcher sat at top 776 / bottom 832 while the tab bar starts
      at 785 — a 47px x 56px overlap, right over "Home search" and "Mike". The bar's z-index is
      1500 and the launcher's is auto, so the BAR painted over the launcher and ate part of its
      tap target.
   🔑 Fixed through the chat's OWN variables rather than by overriding its positioning. mm-chat.js
      declares `bottom:var(--mmc-b,18px)` on .mmc and `bottom:var(--mmc-nb,0px)` on the nudge —
      those hooks exist to be set from outside, and using them means a future chat release can
      move its own furniture without fighting this file. --mm-nav-bottom is the measured tab-bar
      height, so the two stay in step even when the bar's height changes. */
@media (max-width:767px){
  :root{
    --mmc-b:calc(var(--mm-nav-bottom, 59px) + 12px);
    --mmc-nb:calc(var(--mm-nav-bottom, 59px) + 8px);
  }
}

/* MM-TOOLSIMG-V1 (2026-11-01) — logos + restrained imagery for the buyer tools.
 * Mike: "balancing imagery and logos... some pages (builder promos) may not fit as much with their
 * format, but we should still look unified as much as possible."
 *
 * 🛑 A SEPARATE FILE, LINKED AFTER lim-idx.css, FOR THE SAME REASON lim-idx.css IS SEPARATE FROM
 *    lim-brand.css: lim-idx.css is LIVE on every tool page as of this morning's promotion. Editing
 *    it to stage a look would change live the moment it uploaded. Two looks, two filenames — the
 *    rule this project learned when the five-tab component went over the live mm-tools.js.
 * 🔑 "Last in head" means LAST, not merely after the brand sheet. Pages here declare their own
 *    <style> with a :root AFTER the stylesheet links, and only the last word actually wins.
 */

/* ── 1. the lockup: identical on every page ──────────────────────────────────────────────────
 * LP's bar is white LiM wordmark + divider + white W&P mark, left of the navy bar. Three pages
 * had real marks (their own .lpbar, merged in); the tracker, the HOA map and the 34 community
 * pages had only a teal "LiM" TEXT chip the component draws in CSS. The component now builds the
 * real marks when a page has no .lpbar, so .mm-marks is the single lockup everywhere and these
 * rules size it once. */
.mm-marks{gap:0}                                  /* the divider owns the spacing now */
.mm-marks img{height:26px; width:auto; display:block}
.mm-marks .mm-div{
  flex:0 0 auto; width:1px; height:22px; margin:0 13px;
  background:rgba(255,255,255,.34);               /* decorative only - never the sole carrier of meaning */
}
/* 🛑 The W&P mark is wider than it is tall; capping only the height lets it crowd the wordmark at
 *    narrow widths. Both marks get a max-width so the pair can never push the tabs off the bar. */
.mm-marks .lk{max-width:142px}
.mm-marks .wp{max-width:104px; opacity:.97}
@media (max-width:767px){
  .mm-marks img{height:21px}
  .mm-marks .mm-div{height:17px; margin:0 9px}
  .mm-marks .lk{max-width:116px}
  .mm-marks .wp{max-width:84px}
}

/* ── 2. the bands ────────────────────────────────────────────────────────────────────────────
 * 🔑 THE PHOTO SITS ABOVE THE HEADING, NEVER UNDER IT. The LP log records two re-cuts caused by
 *    centre-cropping a frame with a person in it under a centred headline - "the headline ran
 *    straight through Mike's face". Text over photo is the failure mode, so there is no overlaid
 *    text here at all: the band is a band, the h1 keeps its own white background underneath, and
 *    the contrast question never arises.
 * aspect-ratio holds the box before the bytes land, so nothing below it shifts (CLS stays 0). */
/* 🛑 A FLAT COLOUR, NOT A BACKGROUND-IMAGE. The first build put a base64 LQIP here as an
   inline background-image. A CSS background-image is itself an LCP candidate, and the band
   must be a plain <img> so preload, srcset and fetchpriority all apply to the one element
   that decides LCP. The colour still stops the band flashing white before the photo lands. */
.mm-hero, .mm-band{
  display:block; width:100%; margin:0; overflow:hidden;
  background:var(--lim-char,#222633);
}
.mm-hero img, .mm-band img{
  display:block; width:100%; height:100%; object-fit:cover;
  /* the image is decoration ON TOP of the LQIP, so it fades in over colour, not over white */
}
/* 🔑 object-position, not a re-crop. The source band is top-anchored so it clears the people
   at the ramada, which leaves a lot of open sky; at a 300px display height the box is WIDER than
   the image aspect, so cover trims top and bottom and a centred trim keeps the empty half.
   Biasing the window down lands it on the lake, the ramada and the mountain line. */
.mm-hero{aspect-ratio:1920/620; max-height:300px}
.mm-hero img{object-position:50% 78%}
.mm-band{aspect-ratio:1600/200;  max-height:132px}
/* 🔑 SHORTER ON A PHONE, which is a performance change as much as a visual one: a smaller
   painted area is a smaller LCP candidate, it paints sooner, and it may stop being the LCP
   element at all - handing the title text back the role it had before the hero existed. */
@media (max-width:767px){
  .mm-hero{aspect-ratio:390/140; max-height:140px}
  .mm-band{aspect-ratio:390/84; max-height:84px}
}
/* Paired with MOBILE_BAND=0 in bin/img-stage-build.php: the <picture> ships a 43-byte
   transparent GIF as its <img>, so a phone downloads no photo at all. This hides the empty
   box. Harmless while the flag is on, because nothing carries .mm-band-desktop then. */
@media (max-width:767px){ .mm-band-desktop{display:none} }

/* the HOA map is a viewport-height grid; a band would come straight out of the map */
.mm-band.mm-band-map{display:none}

/* ── 3. the community thumbnail, built but NOT populated — see the packet ─────────────────── */
.mm-thumb{
  display:block; width:100%; aspect-ratio:3/2; overflow:hidden; border-radius:10px;
  background:var(--lim-char,#222633); margin:0 0 14px;
}
.mm-thumb img{display:block; width:100%; height:100%; object-fit:cover}

/* ── 4. the bar survives a tab switch ────────────────────────────────────────────────────────
 * Mike: "as I switch between tabs, it reloads the header so there is a distracting popping out
 * and in." Server-rendering the bar removed the rebuild, but a cross-document navigation still
 * tears the old page down and paints a new one, so the bar blinks even when it is identical.
 * A same-origin view transition morphs the named elements instead of cross-fading the document,
 * so the bar and the bottom tab bar stay put while the content between them changes.
 * 🔑 Progressive enhancement: browsers without cross-document view transitions simply navigate
 *    as they do today. Nothing depends on it.
 * 🛑 The names must be UNIQUE per document, and they must match on BOTH pages or the morph
 *    degrades to a cross-fade - which is why they live in the shared layer, not per page. */
@view-transition { navigation: auto; }
.mm-nav{view-transition-name:mm-bar}
.mm-bottom{view-transition-name:mm-bottombar}
/* the bar is identical across pages, so there is nothing to animate - holding it perfectly
   still is the entire point, and an animation here would reintroduce the flicker */
::view-transition-group(mm-bar),
::view-transition-group(mm-bottombar){animation-duration:0s}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}

/* ── 5. the "Book a Zoom with Mike" button: INVESTIGATED, DELIBERATELY NOT CHANGED ──────────
 * It looks on a phone as though the label is bursting out of its black box. It is not:
 * measured at 412, the box is 154px and the text 152px, so it FITS with 2px to spare. What it
 * actually has is no horizontal padding below 800px, set by the HOA map page own stylesheet.
 * 🛑 I TRIED TO OVERRIDE IT AND STOPPED. Rules at (0,3,0) and (0,4,1) specificity, injected
 *    last, both left the computed padding at 0px - so the page is pinning it harder than
 *    specificity alone, and the only way through is !important against !important.
 *    That is not a tidy, it is reversing a deliberate decision someone made to fit the CTA,
 *    the phone number and Email into one header row on a phone, and it would be done blind to
 *    why they made it. A blanket `.btn-lp{padding:0 14px}` was briefly added here and has been
 *    taken out: it changed every other .btn-lp on the site and still did not fix this one.
 * ➡️ The real fix is content, not CSS: "Book a Zoom" instead of "Book a Zoom with Mike" buys
 *    about 40px and lets the padding come back. That is Mike word to say, not mine. */

/* ── 6. one brokerage line, one measure, one position ───────────────────────────────────────
 * Dispatch's desktop pass at 1536 found the same sentence rendering three different ways:
 *   community pages  .lim-brokerline  full width (0 → 1518), ABOVE the privacy strip, 3 lines
 *   builder offers   .brk             flush left at x=16, 1486 wide
 *   hub / tools      .brk             centred in the content column, 688–1048 wide, one line
 * The band is moved below the privacy strip in the build; this gives both forms the same
 * measure, so switching tabs does not move the line. 1100px is what lim-idx already uses for
 * .lim-brokerline, so this aligns .brk TO the existing value rather than inventing a third. */
/* p.brk, not .brk: the page sets `.brk{margin:0 0 8px}` at equal specificity and later in the
   cascade, so a bare .brk rule computed margin-left:0 and the tracker line stayed flush left
   at x=16 while every other page centred. The element-qualified selector wins by one. */
/* 🛑 !important HERE, AND THE REASON MATTERS. lim-idx.css carries a blanket
   `.top .brk, .top p{margin:0 !important}` - a paragraph reset, not a decision about this
   line - and it pinned the tracker brokerline flush left at x=16 while every other page
   centred at x=209. That is MY OWN layer overriding MY OWN blanket rule, which is not the
   same thing as the "Book a Zoom" button, where an !important belonged to the PAGE and
   expressed a deliberate choice I had no business reversing. Correcting your own blunt rule
   is fine; overruling someone else is not.
   ➡️ At promotion the tidier fix is to narrow that reset in lim-idx.css so it never catches
      .brk, and drop this override. Logged rather than done, because lim-idx.css is live and
      this pass is not promoting it. */
p.brk, .top p.brk{max-width:1100px; margin-left:auto !important; margin-right:auto !important}
.lim-brokerline{margin:0}

/* ── 7. one band height ─────────────────────────────────────────────────────────────────────
 * The hub hero was 300px against 132px on the tools, so moving between tabs jumped ~170px.
 * One height for the tool bands, and the hub at 1.5× — Dispatch allowed up to that, and the hub
 * is the page the band is actually doing work on: it is the only one where the photograph is
 * the point rather than a header. Phones keep the same 1.5 ratio at smaller numbers. */
.mm-hero{aspect-ratio:1920/620; max-height:240px}
.mm-band{aspect-ratio:1600/200;  max-height:160px}
@media (max-width:767px){
  .mm-hero{aspect-ratio:390/144; max-height:144px}
  .mm-band{aspect-ratio:390/96;  max-height:96px}
}

/* ── 8. the tab strip must not spill out of its own container ───────────────────────────────
 * Dispatch saw the phone number printing on top of the "Home search" tab at 1536. The phone was
 * one half of it and is gone (see the note in bin/img-stage-build.php). THIS is the other half,
 * and it was there before the phone made it visible: .mm-tabs is flex:1 1 auto with
 * overflow:VISIBLE, so when five tabs need more room than the strip is given, the last one does
 * not shrink, wrap or clip - it simply draws outside its box, over whatever is to its right.
 * Measured on the hub, after removing the phone: 11px of spill at 1536 and 1280, 85px at 1024,
 * 209px at 900. It is a layout bug at every width; the phone only made it legible.
 *
 * 🛑 overflow-x:auto DOES NOT FIX IT - tried and measured, no change at any width, because the
 *    flex item is sized to its content rather than constrained. The fix has to reduce what the
 *    tabs need, not change how the overflow paints.
 * Two measures, each verified:
 *   12px -> 9px of tab padding recovers the 11px at 1536 / 1280 / 1200 (overlap and spill to 0).
 *   below 1150 there is not enough room for five labels at any padding, so the labels go and the
 *   icons stay - 81px and 84px of overlap both drop to 0.
 * 🔑 The labels are CLIPPED, NOT display:none, so they stay in the accessibility tree: a tab
 *    reading as an unnamed icon to a screen reader would be a worse bug than the one being
 *    fixed. The bar keeps its 60px height at every width, which is what the view transition
 *    needs. */
.mm-nav .mm-tab{padding-left:9px; padding-right:9px}
@media (min-width:768px) and (max-width:1150px){
  .mm-nav .mm-tab > span:not(.mm-ext){
    position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
}

/* ═══ §15 AUDIT RULINGS ═════════════════════════════════════════════════════════════════════
 * GPT audit, CONDITIONAL GO, no P0s. Applied verbatim except where measurement said otherwise,
 * which is noted at each point.
 */

/* §15.1 — ONE global brokerage strip, directly under the privacy strip.
 * 🛑 TWO WORDINGS EXISTED AND I DID NOT INVENT A THIRD. The 36 HOA pages carry
 *    "...Brokered by W and Partners, LLC." in .lim-brokerline; the four tool pages carried
 *    "...W and Partners, LLC" in an in-content .brk. "Wording unchanged" cannot mean both, so
 *    the strip that is already global keeps its words and the in-content duplicate goes. That
 *    is the majority form (36 pages against 4) and the one §14 introduced for ADRE
 *    R4-28-502(E), which wants the brokerage READABLE - "Brokered by" states the relationship.
 *    Flagged to Dispatch rather than silently rewriting Mike's line either way. */
.lim-brokerline{
  background:#F7F7F7; border-bottom:1px solid var(--idx-line, rgba(0,0,0,.08)); margin:0;
}
.lim-brokerline > span{
  display:block; max-width:1100px; margin-inline:auto; padding:8px 16px;
}
.brk{display:none}          /* the in-content duplicate, now that the strip is global */

/* §15.2 — band heights, and one crop rule for all of them */
.mm-hero{aspect-ratio:1920/420; max-height:200px}
.mm-band{aspect-ratio:1600/200;  max-height:160px}
@media (max-width:767px){
  .mm-hero{aspect-ratio:390/140; max-height:140px}
  .mm-band{aspect-ratio:390/84;  max-height:84px}
}
/* replaces the hero-only 50%/78% nudge: one rule, every band, as ruled */
.mm-hero img, .mm-band img{object-fit:cover; object-position:center 40%}

/* §15.4 — outer containers share the brokerline measure, so headings line up with it.
 * Inner content may be narrower; this only stops a full-bleed wrapper starting at x16 while
 * the strip above it starts at x210. */
.wrap, .top{max-width:1100px; margin-inline:auto; padding-inline:16px}

/* §15.6 — the HOA Zoom CTA: black, white text, 8px. The LABEL is untouched - it is Mike's.
 * lim-brand paints this lime with a 999px radius and !important, so this needs the same force
 * to land; it is the IDX black-button rule being applied where the brand sheet predates it. */
header.topbar .btn-lp.dark, .hdr-cta .btn-lp.dark{
  background:#000 !important; color:#fff !important;
  border:1px solid #000 !important; border-radius:8px !important;
}

/* §15.5 — builder sidebar explanatory copy: at least 13px, line-height 1.5.
 * Measured before: .hl 12.48/1.40, .note 11.52/1.45, .pb 12.48/1.50. These are the sentences
 * that explain what a number means, which is exactly the copy the ruling is about.
 * 🔑 The DATA cells are left alone on purpose. "Down payment (3.5%) $14,000" at 12.8/19.84 is a
 *    figure in a table, not explanatory prose, and inflating a dense numeric table is how you
 *    turn a scannable comparison into a scrolling one. The ruling says explanatory copy.
 * ➡️ The other half of §15.5 needs no change: there are NO nested scrollers on the page -
 *    measured, zero elements with overflow-y auto/scroll whose content exceeds their box - so
 *    the page already scrolls as one. */
.layout .hl, .layout .note, .layout .pb,
aside .hl, aside .note, aside .pb{font-size:13px; line-height:1.5}

/* §15.6 — and the community pages use a different element for the same button.
 * Measured: the HOA map uses .btn-lp.dark (now black), the 35 community pages use a.primary
 * inside .cta and were still navy with a 6px radius. Same label, same ruling, so same treatment
 * - found by querying for the label rather than assuming one selector covered both. */
.cta a.primary, a.primary.cta{
  background:#000 !important; color:#fff !important;
  border:1px solid #000 !important; border-radius:8px !important;
}

/* ── 9. the nav variables need a TRUE default, not a zero ───────────────────────────────────
 * Idle-loading the component moved measure() after load, and CLS went 0 -> 0.084. The culprit,
 * measured: DIV.mmc - the chat launcher - jumping dy=-59px. It is positioned with
 * calc(var(--mm-nav-bottom, 59px) + 12px), and mm-tools.css declares :root{--mm-nav-bottom:0px}
 * - so the variable EXISTS as 0 and that sensible-looking 59px fallback never applies. The
 * launcher paints 59px too low, then snaps up when measure() publishes the real value.
 * 🔑 A FALLBACK IN var() ONLY FIRES WHEN THE VARIABLE IS UNDEFINED, NOT WHEN IT IS WRONG. The
 *    author of that 59px clearly expected it to cover this case; a declared 0px silently beat it.
 * The bottom tab bar is a fixed 59px at phone widths and absent above 768, so those are the
 * honest defaults. measure() then confirms the same number instead of correcting it, and
 * nothing moves. Desktop stays 0, which is already right.
 */
@media (max-width:767px){ :root{ --mm-nav-bottom:59px } }

/* ═══ HOTFIX 2026-11-01 — the map header's "Book a Zoom with Mike", reported from Mike's
 * phone at ~412px: label pinned to the top edge, in a display face, button far too tall,
 * text against the left edge.
 *
 * 🛑 IT IS NOT THE IDX BLACK-BUTTON RULE. That one (§15.6 above) is the part behaving:
 *    the button is correctly #000 at 8px. The cause is a PRE-EXISTING rule in each map
 *    page's own inline CSS:
 *        @media(max-width:800px){ .hdr-cta .btn-lp.dark{ padding:0 !important } }
 *    With .btn-lp's line-height:1 and lim-brand's min-height:40px, that leaves a 40px box
 *    holding a 13px line at the TOP, with no side padding. The "display font" is .btn-lp's
 *    own font-family:var(--font-head) — Montserrat — which these two pages still load.
 *
 * 📐 Values are COPIED FROM THE COMMUNITY-PAGE PRIMARY, measured on acacia-crossings
 *    (a.primary: Inter 600, 14px/22.4, padding 11px 16px, radius 8px, 46px tall), not
 *    invented to fit the description.
 *
 * Specificity (0,4,2) and (0,3,2) are what beat the page's (0,3,0) !important. Applied at
 * every width, because desktop had the same Montserrat 10.5px uppercase mismatch — it just
 * was not broken enough to notice.
 *
 * Scope: only the two MAP pages have header.topbar .btn-lp.dark. Community pages use
 * a.primary and are already correct, so this rule is inert for them. */
header.topbar .hdr-cta a.btn-lp.dark,
header.topbar a.btn-lp.dark{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important;
  font-size:14px !important; font-weight:600 !important; line-height:1.6 !important;
  text-transform:none !important; letter-spacing:0 !important; text-decoration:none !important;
  padding:11px 16px !important; min-height:44px !important; height:auto !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  text-align:center !important; border-radius:8px !important;
}