/* MM-NAVV2-V1 — the five-slot bar and the "All buyer tools" sheet.
   Staged-only stylesheet. Loaded AFTER lim-bundle.css so it can win ties on position. */

/* ── the centre selector ──────────────────────────────────────────────────────────────────── */
/* It is a <button>, not a link: it opens a dialog, it does not navigate. /tools/ exists as a
   real page and is where the no-JS path goes, which is why the no-JS fallback below swaps
   the button out for a link rather than leaving a dead control on the page. */
/* 🛑 THE SLOT SHIPS A LINK AND A BUTTON, AND JS SWAPS THEM. You cannot detect "no JS" with JS,
   and a class set on <html> by the component would flip the slot after first paint - a visible
   swap on the element the SSR bar exists to keep stable. So the markup ships the plain
   <a href="/tools/"> visible and the <button hidden>; the component unhides the button and
   hides the link. With no JS the link simply stays, and /tools/ is a real page. The two are
   styled by the SAME rules below, so the swap cannot move anything by a pixel. */
.mmv2-toolsbtn{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
.mm-bottom .mmv2-toolsbtn,.mm-bottom .mmv2-toolslink,
.mm-nav .mmv2-toolsbtn,.mm-nav .mmv2-toolslink{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;min-height:52px;padding:6px 2px 7px;width:100%;
  text-decoration:none;
  font-size:10.5px;font-weight:500;line-height:1.15;text-align:center;color:var(--lim-mut,#555b69)}
.mm-nav .mmv2-toolsbtn,.mm-nav .mmv2-toolslink{flex-direction:row;gap:7px;min-height:48px;width:auto;
  padding:8px 10px;font-size:13px}
.mm-bottom .mmv2-toolsbtn[hidden],.mm-bottom .mmv2-toolslink[hidden],
.mm-nav .mmv2-toolsbtn[hidden],.mm-nav .mmv2-toolslink[hidden]{display:none}
/* the centre slot reads as the primary one without changing the slot geometry */
.mm-bottom .mmv2-toolsbtn .mm-ico,.mm-bottom .mmv2-toolslink .mm-ico{color:var(--idx-black,#000)}
.mm-bottom .mmv2-toolsbtn[aria-expanded="true"]{color:var(--idx-black,#000)}
.mmv2-toolsbtn:focus-visible,.mmv2-toolslink:focus-visible{outline:3px solid var(--lim-teal,#1FA6B8);
  outline-offset:2px;border-radius:6px}

/* ── R2-2 · the bar, per the audit ────────────────────────────────────────────────────────
   Active: #F7F7F7 ground, a 3px #293044 top border, weight 700. Inactive: weight 500.
   Targets at least 48x48.
   🛑 THE TOP BORDER IS DRAWN AS AN INSET BOX-SHADOW, NOT border-top. A real border would add
      3px to the slot's box and push the bar 3px taller than its inactive siblings, which both
      changes the bar's height (the map subtracts --mm-nav-bottom from 100vh) and makes the
      active slot a different size from the others. An inset shadow paints inside the existing
      box, so the geometry is identical whichever slot is current.
   ⚠️ Specificity: .mm-bottom's own rules are (0,2,0)-ish and live in lim-bundle.css, which is
      linked BEFORE this file, so these need to be at least as specific. They are (0,2,1). */
.mm-bottom a,.mm-bottom .mmv2-toolsbtn,.mm-bottom .mmv2-toolslink{font-weight:500;min-height:48px}
.mm-nav .mm-tab{font-weight:500;min-height:48px;display:inline-flex;align-items:center}
.mm-bottom a[aria-current="page"],
.mm-bottom .mmv2-toolsbtn[aria-current="page"],
.mm-bottom .mmv2-toolslink[aria-current="page"],
.mm-nav .mm-tab[aria-current="page"],
.mm-nav .mmv2-toolslink[aria-current="page"]{
  /* ⚰️ !important IS REQUIRED HERE AND IS NOT LAZINESS. The IDX layer inside
     lim-bundle.css already styles this exact selector with
     `box-shadow:inset 0 3px 0 0 var(--idx-black) !important` plus !important colour and
     background. !important beats a normal declaration whatever the specificity or the
     sheet order, so the first version of this rule - same selector, later file - lost
     silently and the active tab drew a BLACK 3px border instead of #293044. Measured,
     not assumed: the computed value read rgb(0,0,0). Only !important beats !important. */
  background:#F7F7F7 !important;font-weight:700;color:#293044 !important;
  box-shadow:inset 0 3px 0 0 #293044 !important}
/* the sheet trigger reports "open", not "current", so it gets the same treatment while open */
.mm-bottom .mmv2-toolsbtn[aria-expanded="true"]{background:#F7F7F7 !important;font-weight:700;
  color:#293044 !important;box-shadow:inset 0 3px 0 0 #293044 !important}

/* ── the sheet ────────────────────────────────────────────────────────────────────────────── */
html.mmv2-locked,html.mmv2-locked body{overflow:hidden}
#mmv2-sheet{position:fixed;inset:0;z-index:2600;background:rgba(17,19,24,.46);
  display:flex;align-items:flex-end;justify-content:center}
#mmv2-sheet[hidden]{display:none}
.mmv2-panel{background:#fff;width:100%;max-width:720px;
  /* near-full-height, per the research: tall enough that the grid is the page, short enough
     that the scrim behind it still says "this is a layer, not a navigation". */
  height:92vh;max-height:92dvh;border-radius:16px 16px 0 0;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 -8px 40px rgba(17,19,24,.28);
  animation:mmv2-up .22s ease-out}
/* 🛑 THE PANEL SLIDES BUT NEVER FADES. An opacity keyframe means that any frame in which the
   animation is paused, throttled or interrupted renders the page showing THROUGH the sheet —
   which is exactly what the first capture of this sheet looked like, because a background tab
   throttles CSS animations. Computed style said opaque white the whole time, so it was a
   rendering artifact rather than a cascade bug, but an animation whose broken state leaks the
   content behind it is the wrong animation to ship. Transform only: the panel is opaque in
   every frame, including the first one and any frame it stops on. */
@keyframes mmv2-up{from{transform:translateY(16px)}to{transform:none}}
.mmv2-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 16px 12px;border-bottom:1px solid var(--lim-line,#e2e4e8);flex:0 0 auto}
.mmv2-head h2{margin:0;font-size:17px;font-weight:700;line-height:1.3;color:#111318;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  text-transform:none;letter-spacing:-.2px}
/* R2-5: a fixed 44x44 target, not just a minimum - the audit asked for the size, and a
   min-* pair alone lets a wide glyph or a future label stretch it off-square. */
.mmv2-x{appearance:none;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;
  width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;cursor:pointer;color:#111318}
.mmv2-x:focus-visible{outline:3px solid var(--lim-teal,#1FA6B8);outline-offset:2px}
.mmv2-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 16px 18px;flex:1 1 auto}
.mmv2-body h3{margin:13px 0 7px;font-size:12px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--lim-mut,#555b69);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.mmv2-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;list-style:none}
.mmv2-tile{display:flex;flex-direction:column;gap:4px;background:#fff;
  border:1px solid #d0d5de;border-radius:12px;padding:10px 11px 11px;
  text-decoration:none;color:#111318;min-height:44px}
/* ── MM-A2NAV-V1 · full-width rows ─────────────────────────────────────────────────────────
 * A2.2: the four primary tools lead as full-width rows, and NO tile is ever left sitting alone
 * in half a row - a single-item group, or the odd one at the end of a group, spans instead.
 * 🔑 `.mmv2-wide` is the span and `.mmv2-row` is the layout, and the renderer sets them
 *    together: a tile that occupies the whole width reads better with the icon beside the text
 *    than above it, and the row costs ~20px less height, which is what buys A2.2's
 *    "about one screen". They are two classes because the grid span and the inner layout are
 *    two different jobs and a future wide tile may want the stacked form. */
.mmv2-wide{grid-column:1/-1}
/* the <li> is the grid item; the tile must fill it so two tiles sharing a row match height */
.mmv2-grid > li{display:flex;margin:0}
.mmv2-grid > li > .mmv2-tile{flex:1 1 auto}
/* the four primary tools are one per row at every width */
.mmv2-grid.mmv2-primary{grid-template-columns:1fr}
.mmv2-tile.mmv2-row{display:grid;grid-template-columns:32px 1fr;column-gap:11px;row-gap:1px;
  align-items:center;padding:10px 12px}
.mmv2-tile.mmv2-row .mmv2-chip{grid-column:1;grid-row:1/3;align-self:center}
.mmv2-tile.mmv2-row .mmv2-t,.mmv2-tile.mmv2-row .mmv2-d,.mmv2-tile.mmv2-row .mmv2-ext{grid-column:2}
/* the four primary rows sit above the first heading, so they carry the visual weight instead */
.mmv2-primary .mmv2-t{font-size:16px}
a.mmv2-tile:hover{border-color:var(--lim-teal,#1FA6B8)}
a.mmv2-tile:focus-visible{outline:3px solid var(--lim-teal,#1FA6B8);outline-offset:2px}
.mmv2-tile .mm-ico{color:var(--idx-black,#000)}
.mmv2-t{font-size:14.5px;font-weight:700;line-height:1.25;color:#111318;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.mmv2-d{font-size:12.5px;line-height:1.4;color:var(--lim-mut,#555b69);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
/* the merged HOA tile: one tile, two real destinations, no nested interactives */
.mmv2-split{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.mmv2-split a{flex:1 1 auto;text-align:center;font-size:13px;font-weight:600;text-decoration:none;
  color:#111318;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px;
  padding:10px 10px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.mmv2-split a:hover{border-color:var(--lim-teal,#1FA6B8)}
.mmv2-split a:focus-visible{outline:3px solid var(--lim-teal,#1FA6B8);outline-offset:2px}
.mmv2-ext{font-size:11px;color:var(--lim-mut,#555b69)}

@media (min-width:768px){
  #mmv2-sheet{align-items:center}
  .mmv2-panel{height:auto;max-height:85dvh;border-radius:16px}
  /* ⚰️ THE THIRD COLUMN IS GONE (A2.2). The sheet only exists below 1024px - at 1024 and up the
     desktop bar replaces it and both of its triggers are display:none - so its widest real use
     is the 768-1023 tablet row. At three columns the renderer's "odd one out spans" rule stops
     meaning anything: a two-item group leaves a visible hole, and "no single-card half rows"
     becomes untestable because half is no longer a column count. Two columns everywhere makes
     the rule, the renderer and the parity gate describe the same layout. */
}

/* 🛑 REDUCED MOTION: no slide, no fade. The sheet still appears instantly - the preference is
   about motion, not about hiding the control. */
@media (prefers-reduced-motion:reduce){
  .mmv2-panel{animation:none}
  .mmv2-toolsbtn,.mmv2-tile,.mmv2-split a{transition:none}
}

/* (the no-JS path is the link/button swap at the top of this file, not a class on <html>) */

/* ── MM-HEADLINES-V1 — the community pages' moved metadata line ───────────────────────────
   The new subline takes the .sub slot (14px, muted, 16px bottom margin on these pages), and
   the original "Master-planned community · figures as of {date}" line moves below it as small
   text. It sets its OWN top margin negative-free by taking over .sub's bottom margin: .sub
   now sits directly above it, so .sub's 16px gap would open a hole between two lines that
   belong together. */
.sub + .submeta{margin:-12px 0 16px}
.submeta{font-size:12.5px;line-height:1.5;color:var(--lim-mut,#6b7280);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.submeta time{color:inherit}

/* ── R2-4 · the community pages' map link stops being a button ────────────────────────────
   "Book a Zoom with Mike" stays the primary; four button-shaped controls in one row was the
   pile-up the audit flagged. The chrome goes, the TARGET DOES NOT: padding is kept so the hit
   area stays the size it was while the visual weight drops, which is the part that was wrong.
   (0,2,1) so it beats the page's own `.cta a` at (0,1,1) regardless of sheet order. */
.cta a.maplink{background:none;border:0;border-radius:0;color:var(--teal,#14737F);
  font-weight:500;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:44px;padding:11px 2px}
.cta a.maplink:hover{color:var(--charcoal,#222633)}
.cta a.maplink:focus-visible{outline:3px solid var(--lim-teal,#1FA6B8);outline-offset:2px}

/* ── R2-3 · the folded "How builder offers work" panel ────────────────────────────────────
   The two former summaries become bold lead-ins inside the one panel. */
.r2h{margin:14px 0 4px;font-size:14px}
.r2h:first-child{margin-top:0}

/* ── R3 · the Mike slot's avatar ──────────────────────────────────────────────────────────
   A 24px circular crop of the canonical headshot in the same box the other icons occupy, with
   a 1px light ring. The active state needs no special case: background, weight and the inset
   top border are set on the slot, not on its icon, so the avatar inherits the treatment.
   🛑 THE BOX IS RESERVED AT 24x24 WHETHER OR NOT THE IMAGE ARRIVES. Both the <img> and the
      fallback <svg> sit inside .mmv2-face, which is a fixed 24px square, so a slow, failed or
      blocked avatar cannot change the bar's height - and the map subtracts the bar's height
      from 100vh. */
/* ⚰️ 18px, NOT THE 24 IN THE BRIEF. "Same size as the other icons (~24px)" is two
   requirements and they disagree: the other slot icons render at 18x18, not 24. Built at 24
   first and measured it - the Mike slot came out 52px tall against 48 for its neighbours and
   its LABEL sat 5px lower than the rest of the row, which is visible. Matching the icons is
   the requirement that was actually about the design; the 24 was an estimate of them. Say
   the word and all five icons go to 24 together, which is the only way 24 stays aligned. */
.mmv2-face{width:18px;height:18px;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;position:relative}
.mmv2-face img{width:18px;height:18px;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 1px rgba(17,19,24,.14)}
.mmv2-face img[hidden]{display:none}
.mmv2-face svg{width:18px;height:18px}
/* the top row renders icons a touch smaller; keep the avatar in proportion there */
.mm-nav .mmv2-face,.mm-nav .mmv2-face img{width:18px;height:18px}

/* ══ MM-DESKNAV-V1 (2026-11-02) — the desktop bar ════════════════════════════════════════════
 * Mike: "The Tools button on the menu bar on PC doesn't make sense organized the same way that
 * it is on mobile." Below the breakpoint nothing here applies and the compact row is unchanged.
 * 🛑 Three states, one container: <768 the bottom bar (lim-bundle hides .mm-tabs), 768-1279 the
 *    compact 5-slot row, >=1280 this. Exactly one is ever displayed.
 *
 * ⚰️ THE BREAKPOINT WAS 1024 AND IT DID NOT FIT. Mike asked for "about >=1024px" and 1024 was
 *    taken literally; nobody measured the bar against the space it actually has. Measured on
 *    staging at 2026-11-02, with "Clear my numbers" showing (it only renders once a visitor has
 *    saved numbers, which is why none of yesterday's checks hit it):
 *      1024 — the Home search / Mike group ran 69px PAST THE RIGHT EDGE OF THE VIEWPORT;
 *             "Mike" was simply off-screen.
 *      1280 — it fit in the viewport but was drawn ON TOP of "Clear my numbers", a 174px
 *             overlap of two live controls.
 *    The content needs ~747px beside a 316px logo block and a 145px Clear button; that is
 *    ~1276px of viewport before any gutter. So the bar did not fit anywhere below ~1280, and no
 *    amount of padding trimming reaches 1024 without shrinking the labels, which are Mike's.
 *    ➡️ The breakpoint is the measurement: >=1280 gets the desktop bar, 1024-1279 keeps the
 *       compact 5-slot row - which fits, is already shipped and verified, and is the better
 *       pattern for an iPad in landscape anyway. Flagged to Dispatch, because "about 1024" was
 *       Mike's number and 1280 is not it.
 * 🛑 AND THE ROW WRAPS RATHER THAN OVERLAPS. The overlap above was two elements silently drawn
 *    over each other, which no DOM check notices. flex-wrap means a future longer label pushes
 *    Clear onto a second line - ugly, visible, and not a control hidden under another one. */
.mmv2-desk{display:none}
/* /tools/ is the only page whose bar has no <nav class="mm-nav"> to sit in, so it paints its
   own. Hidden below the desktop breakpoint, where that page's navigation is the bottom bar. */
/* ⚰️ UNUSED SINCE MM-TOOLSPAGE-V1. /tools/ was a bare bar on a white page and these
   four rules were what kept its desktop bar from being white-on-white. The page now
   has the real <nav class="mm-nav">, which paints the navy itself. Kept, correct and
   inert, for a bar-without-chrome page if one is ever wanted again. */
.mm-tabs.mmv2-solobar{display:none}
@media (min-width:1280px){
  .mm-tabs.mmv2-solobar{display:block;background:#293044;padding:8px 20px}
  /* the links line up with the page's own 1100px content column rather than the window edge */
  .mm-tabs.mmv2-solobar .mmv2-desk{max-width:1100px;margin-inline:auto}
  .mm-tabs .mmv2-compact{display:none}
  /* the nav row uses the width the viewport has, not the 1080px content measure: the bar is
     chrome, and the page body below it keeps its own max-width. `>` so the "Your numbers"
     strip's own .mm-row, which belongs to another lane, is not touched. */
  .mm-nav > .mm-row{max-width:none;padding-left:20px;padding-right:20px;flex-wrap:wrap}
  .mmv2-desk{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
  .mmv2-desk-main{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
  .mmv2-desk-main > li{margin:0}
  .mmv2-desk a,.mmv2-dd-btn{
    display:inline-flex;align-items:center;gap:6px;
    /* 44px min height keeps the pointer target honest on a touch laptop */
    min-height:44px;padding:0 10px;border-radius:8px;
    font:500 15px/1.2 inherit;color:rgba(255,255,255,.86);text-decoration:none;background:none;border:0;cursor:pointer;
    white-space:nowrap}
  .mmv2-desk a:hover,.mmv2-dd-btn:hover{background:rgba(255,255,255,.12);color:#fff}
  /* visible keyboard focus: the bar is a primary landing control */
  .mmv2-desk a:focus-visible,.mmv2-dd-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
  /* the current page, matching the mobile active tab's weight and top rule */
  .mmv2-desk a[aria-current="page"]{background:rgba(255,255,255,.14);box-shadow:inset 0 3px 0 0 #fff;color:#fff;font-weight:700}
  .mmv2-desk-right{display:flex;align-items:center;gap:6px;flex:0 0 auto}
  .mmv2-desk-search .mm-ext{font-size:.85em;opacity:.75}
  .mmv2-desk-mike img{width:24px;height:24px;border-radius:50%;object-fit:cover;
    border:1px solid rgba(255,255,255,.35);display:block}
  .mmv2-mike-fb{width:24px;height:24px;border-radius:50%;background:#D9DCE2;display:block}
  /* ── the dropdown ──────────────────────────────────────────────────────────────────────── */
  .mmv2-dd{position:relative}
  .mmv2-caret{font-size:.8em;line-height:1}
  .mmv2-dd-btn[aria-expanded="true"]{background:rgba(255,255,255,.14);color:#fff}
  .mmv2-dd-menu{
    position:absolute;top:calc(100% + 4px);left:0;z-index:60;min-width:232px;
    list-style:none;margin:0;padding:6px;border-radius:10px;background:#fff;
    border:1px solid #E3E5EA;box-shadow:0 10px 28px rgba(16,20,32,.14)}
  .mmv2-dd-menu[hidden]{display:none}
  .mmv2-dd-menu > li{margin:0}
  /* A2.1 — two lines per item: the label, then what the tool answers. The wider min-width is
     the description's; five bare names did not tell these five calculators apart. */
  .mmv2-dd-menu{min-width:306px}
  .mmv2-dd-menu a{display:block;width:100%;min-height:44px;padding:7px 10px;font-weight:500;
    color:#293044;border-radius:7px}
  .mmv2-dd-n{display:block;font-weight:600;line-height:1.25}
  .mmv2-dd-d{display:block;margin-top:1px;font-size:12px;line-height:1.35;color:#555b69}
  .mmv2-dd-menu a:hover .mmv2-dd-d{color:#3d4350}
  .mmv2-dd-menu a:hover{background:#F2F3F5;color:#111318}
  .mmv2-dd-menu a:focus-visible{outline:2px solid #293044;outline-offset:-2px}
}
@media (min-width:1280px) and (prefers-reduced-motion:no-preference){
  .mmv2-dd-menu{animation:mmv2-dd-in .12s ease-out}
  /* transform/opacity only — a throttled frame on a layout animation showed the page through
     the panel during the sheet work; same mistake is available here. */
  @keyframes mmv2-dd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

/* ══ MM-TOOLSPAGE-V1 · the icon chips ═══════════════════════════════════════════════════════
 * Mike, 2026-11-02: the tool icons are "a little tough to visually pick out". They were an
 * 18px glyph drawn as a 1.7px stroke in near-black on a white tile, repeated ten times down a
 * list - low contrast AND low differentiation at once. A filled chip fixes both: the glyph
 * now sits on a solid brand colour, and the colour itself tells the tiers apart at a glance.
 *
 * 🛑 FOUR CHIPS, ALL FROM THE KIT IN lim-bundle.css. That file names exactly three usable
 *    fills - teal #14737F (the text-safe teal; the brighter #1FA6B8 is "fills and rules only"
 *    and lands at 2.9:1 on white), charcoal #222633, and lime #A0D020 as "CTA fill only,
 *    charcoal text" - plus the soft tint #F5FBFC. Ten distinct hues would mean inventing
 *    seven colours, which is not this lane's call; it is flagged to Dispatch instead.
 * 🛑 THE CONTRAST THAT MATTERS IS GLYPH-ON-CHIP, and all four clear WCAG 1.4.11's 3:1 for a
 *    meaningful graphic: white on teal 5.5:1, white on charcoal 15.9:1, charcoal on lime
 *    8.3:1, teal on soft ~5.3:1. The lime and soft chips also carry an inset ring, because
 *    their own edge against a white tile is below 3:1 (1.8:1 and ~1.1:1) and a chip you cannot
 *    see the shape of is just a coloured smudge.
 * 🔑 The colour is per-tool DATA (nav-data.php `chip`), not a position in a list, so a chip
 *    can be re-pointed without touching this file or the renderer.
 */
/* MM-SHELL-V1 - the base every page needs, in the SHARED sheet. See bin/_shellbase.php:
   these lived only in each transformed page's inline <style>, so the generated /tools/
   page and contact.html kept the browser's 8px body margin and a 61px bottom bar. The
   bar's <a> measured 48px on both; it was the <ul>/<li> that differed. */
/* ── MM-ZOOMSTYLE-V1 · one Book-a-Zoom treatment, matched by DESTINATION ─────────────
   GPT round 3: contact lime, an HOA navy uppercase pill, Acacia black - three looks for
   one action. Keyed on the href because the three pages use three different class names;
   a class-based rule would have to find every one of them and would miss the next page.
   Lime on charcoal is the brand's CTA fill and what Contact already uses, so the page
   Mike sends people to is unchanged and the outliers come to it.
   🛑 Scoped to anchors, and it does not touch layout the page owns (width, margins). */
a[href*="scheduler.zoom.us"],
a[href^="/go/"][href*="zoom"]{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;border-radius:999px!important;
  /* 🛑 !important ON THE FOUR VISUAL PROPERTIES ONLY. Measured after the first attempt:
     the HOA map still painted WHITE on lime (about 1.9:1, unreadable) and Acacia still
     painted black, because each page has its own higher-specificity rule. Normalising one
     control across pages we do not all own is exactly the case for !important, and the
     codebase already does this for .btn-lp. Layout the page owns is left alone. */
  background:#A0D020!important;color:#222633!important;border:1px solid #8fbb1c!important;
  font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;text-transform:none;
  letter-spacing:0}
a[href*="scheduler.zoom.us"]:hover,
a[href^="/go/"][href*="zoom"]:hover{background:#8fbb1c}
a[href*="scheduler.zoom.us"]:focus-visible,
a[href^="/go/"][href*="zoom"]:focus-visible{outline:3px solid #14737F;outline-offset:2px}

/* ── MM-TAP44-V1 · 44px on the paths GPT named ───────────────────────────────────────
   Measured on live /hoa-map/: list rows 27-28px, "Details" 26px, builder jump chips 30px.
   🔑 THE WRAPPER GROWS, NOT THE GLYPH - min-height plus centring, so every label, icon
      and dot stays the size it is today. That is GPT's wording and it is the difference
      between a bigger target and a bigger-looking page.
   🛑 Scoped to the named paths. A blanket rule would also inflate legend toggles and map
      controls, changing pages Mike has already signed off on. */
/* the HOA community list - the two-tap path to dues */
.item{min-height:44px;display:flex;align-items:center}
.rowdet{min-height:44px;display:inline-flex;align-items:center}
/* the builder jump chips */
.chips .chip{min-height:44px}
/* glossary and APR definition buttons, wherever they appear */
button.dfn{min-height:44px;display:inline-flex;align-items:center;gap:6px}
/* the HOA list's own reading text, which is the main path on that page */
.item{font-size:16px}

body{margin:0}
.mm-bottom ul{display:flex;margin:0;padding:0;list-style:none}
.mm-bottom li{flex:1 1 0;min-width:0}
/* 🔑 border-box ON THE BAR ITEMS. Measured cause of the 62px bar: the shared rule sets
   min-height:48px, and /tools/ lacks the universal box-sizing reset the transformed pages
   carry inline - so 13px of padding was ADDED to the 48 instead of fitting inside it, on
   every one of the five items. 48 + 6 + 7 = 61, plus the border = the 62 GPT measured.
   🛑 SCOPED TO THE BAR, NOT A GLOBAL *{box-sizing}. A universal reset in a SHARED sheet
      would silently reflow any page that does not already declare it. */
.mm-bottom a,.mm-bottom button,.mm-bottom .mmv2-toolsbtn,.mm-bottom .mmv2-toolslink{box-sizing:border-box}

.mmv2-chip{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;flex:0 0 32px}
/* 🛑 THREE CLASSES, DELIBERATELY. `.mmv2-tile .mm-ico{color:var(--idx-black)}` above is two,
   so an equally-specific rule here would be decided by source order - the kind of coin-flip
   that has already shipped twice in this bar. */
.mmv2-tile .mmv2-chip .mm-ico{color:inherit}
.mmv2-chip-teal{background:#14737F;color:#fff}
.mmv2-chip-char{background:#222633;color:#fff}
.mmv2-chip-lime{background:#A0D020;color:#222633;box-shadow:inset 0 0 0 1px #8fbb1c}
.mmv2-chip-soft{background:#F5FBFC;color:#14737F;box-shadow:inset 0 0 0 1.5px #1FA6B8}
/* MM-CHROMEB-V1 — Mike, 2026-11-02: "it should probably just be my face". The Contact
   Mike chip holds his headshot instead of the generic person glyph. The photo fills the
   32px chip and keeps the lime ring, so the chip still reads as the one CTA colour. The
   glyph stays underneath as the onerror fallback and is sized for that case only. */
.mmv2-chip-face{overflow:hidden;padding:0}
.mmv2-chip-face img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* ══ MM-EXTNOTE-V1 · the one-time heads-up before the external home search ══════════════════
 * Mike, 2026-11-02: the first tap on Search should say where it goes. The copy and the two
 * buttons are Dispatch's spec; the behaviour is in extnote.js, including why the sentence is
 * four words shorter on a phone.
 * 🛑 The lime Continue is the kit's CTA fill with charcoal text (8.3:1), and Cancel is the
 *    same light outline the Clear button uses - so the two are visibly a pair and the
 *    destructive-looking one is not the bright one.
 */
#mmv2-extnote{position:fixed;inset:0;z-index:1000;background:rgba(17,19,24,.55);
  display:flex;align-items:center;justify-content:center;padding:18px}
#mmv2-extnote[hidden]{display:none}
.mmv2-note{background:#fff;border-radius:14px;width:100%;max-width:360px;
  padding:18px 18px 14px;box-shadow:0 18px 50px rgba(0,0,0,.3);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.mmv2-note-t{margin:0 0 15px;font-size:15px;line-height:1.45;font-weight:600;color:#111318}
.mmv2-note-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.mmv2-note-btns button{min-height:44px;padding:0 16px;border-radius:9px;font-size:14px;
  font-weight:600;cursor:pointer;font-family:inherit}
.mmv2-note-no{background:#fff;color:#293044;border:1px solid #c9ced8}
.mmv2-note-no:hover{color:#111318;border-color:var(--lim-teal,#1FA6B8)}
.mmv2-note-go{background:#A0D020;color:#222633;border:1px solid #8fbb1c}
.mmv2-note-go:hover{background:#8fbb1c}
.mmv2-note-btns button:focus-visible{outline:3px solid #14737F;outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .mmv2-note{animation:mmv2-note-in .12s ease-out}
  @keyframes mmv2-note-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* ══ MM-A1CHROME-V1 — Lane A1 chrome (2026-11-02) ════════════════════════════════════
 * A1.2 the bar names the current page on phones; A1.3 nothing hides under the fixed bar;
 * A1.7 every small control clears 44px. */
.mm-pagename{display:none}
@media (max-width:767px){
  /* the hub link keeps its accessible name; only its VISIBLE label is swapped out */
  .mm-hub > span:not(.mm-mark){position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .mm-pagename{display:inline-block;font-weight:600;color:#fff;font-size:15px;
    line-height:1.2;max-width:58vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* A1.3 — the fixed bottom bar must never sit on top of the last of the content */
  body{padding-bottom:calc(var(--mm-nav-bottom, 59px) + 24px)}
}
/* A1.7 — 44px minimum on the controls the audits measured */
.mm-priv .mm-priv-ok,.mm-priv .mm-priv-more{min-height:44px}
.leaflet-touch .leaflet-bar a,.leaflet-bar a{min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center}
.mm-eyebrow,.mm-backlink{display:inline-flex;align-items:center;min-height:44px}
footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;margin:0}
footer .lg a{min-height:44px;min-width:44px;justify-content:center;padding:0 6px;margin:0}
footer{line-height:1.55}
footer .lg{gap:14px}
@media (max-width:767px){
  footer{font-size:12px;line-height:1.5;padding-top:18px;padding-bottom:18px}
  footer .lk{width:124px;height:auto}
  footer .lg{gap:12px;margin-bottom:8px}
  footer b{display:inline-block;margin-bottom:2px}
}
.mm-backlink{color:var(--lim-teal-text,#14737F);font-weight:600;text-decoration:none}
.mm-backlink:hover{text-decoration:underline}
.mm-nav .mm-clear[hidden]{display:none !important}
.mm-nav .mm-mine .mm-clear:not([hidden]){background:#fff !important;color:#293044 !important;
  border:1px solid #c9ced8 !important;border-radius:8px !important;
  min-height:44px;padding:0 14px;display:inline-flex;align-items:center}
.mm-nav .mm-mine .mm-clear:hover{color:#111318 !important;
  border-color:var(--lim-teal,#1FA6B8) !important}
.mm-nav .mm-mine .mm-row{padding-top:4px;padding-bottom:4px}
.mm-nav .mm-mine .mm-acts{flex:0 0 auto;margin-left:auto}
@media (min-width:768px){.mm-nav .mm-mine .mm-mine-vals{flex:1 1 0;min-width:0}}

/* ══ MM-BROKERBAR-V1 — broker compliance (Beth, 2026-11-03) ══════════
 * The brokerage mark must stay on screen while scrolling, on every page, and must be at
 * least as large as the team mark. Both halves are below; the reasoning, the measurements
 * and the sticky that never worked are in bin/_brokerbar.php. */
/* 1 - the brand row leaves the flow and is pinned. .mm-nav holds its 60px as padding, so
   no page's layout moves. The sticky it used to claim never worked: #mm-tools-nav is the
   same height as .mm-nav, so there was no slack to stick within. Its z-index goes too -
   sticky + z-index made a stacking context the fixed row could not have escaped. */
/* The reserved height has to equal the ROW height at every width, or content hides under
   the fixed bar. Measured at ten widths after the marks grew: 60px below 768, then the row
   WRAPS between 768 and 1279 and runs 76.2px, then settles at 68px from 1280. Two bands
   were not enough - at 768-1279 the nav was reserving 68 against a 76.2 row and swallowing
   8.2px of every page. */
:root{--mm-bar:60px}
@media (min-width:768px){:root{--mm-bar:77px}}
@media (min-width:1280px){:root{--mm-bar:68px}}
/* box-sizing is load-bearing here. The crit block sets .mm-nav{min-height:60px}, and
   .mm-nav *{box-sizing:border-box} covers DESCENDANTS, not .mm-nav itself. On a page that
   does not border-box it elsewhere - contact.html - the 60px min-height sat on top of the
   60px padding and left 60px of dead navy under the bar. Measured: contact nav 120px where
   every build page was 60. */
.mm-nav{position:static;z-index:auto;padding-top:var(--mm-bar);box-sizing:border-box}
/* MM-MINESTRIP-V1 - Mike: "this new space-devouring notice on the top of every page is
   terrible." The saved-numbers strip comes off the top of every page. display:none rather
   than [hidden], so it takes no space even on a page whose markup still carries it. */
.mm-nav>.mm-mine{display:none}
.mm-clear-foot{background:none;border:0;padding:0 2px;min-height:44px;display:inline-flex;
  align-items:center;font:inherit;color:inherit;text-decoration:underline;
  text-underline-offset:2px;cursor:pointer}
.mm-clear-foot[hidden]{display:none}
.mm-nav>.mm-row{position:fixed;top:0;left:0;right:0;z-index:2147483620;background:#293044;
  min-height:var(--mm-bar)}
/* 2 - the brokerage mark, larger than the team mark - measured on the GLYPH, not the box.
   The official Split artwork is a LOCKUP: the W, then "& PARTNERS", then "LUXURY REAL ESTATE
   FIRM". Measured on the master, the W itself is only 53.4% of the inked height, so matching
   the two boxes would have shipped a W visibly SMALLER than the one it replaced - the
   opposite of what was asked. Sized so the W alone clears the LiM lockup:
     390   total 40px -> W 21.4px against LiM 21px
    1440   total 50px -> W 26.7px against LiM 26px
   The bar grows to 68px at >=768 to carry it; at 390 it still fits the 60px row.
   🛑 The third line does NOT resolve at this size - 2.0px at 390, 2.4px at 1440 - so it reads
      as a faint rule under the mark. That is the supplied lockup used as supplied; a
      mark-only variant from Brokermint would be the right asset for a bar this size. */
/* the footer badge row sets footer .lg img{height:28px} in the PAGE style block, which is
   later than this sheet - but an attribute selector outranks it on specificity (0,2,2 vs
   0,1,2), so the brokerage mark gets its own height without !important. 40px puts its W at
   21.4px, above the 28px compliance badges, so it reads as the brokerage rather than
   sitting level with EHO and REALTOR. */
footer .lg img[src*="wp-split-white"]{height:40px}
/* Mike, 2026-11-03: bring the team lockup up to nearly the brokerage lockup height.
   92% at both widths - inside his 90-95%% and still comfortably UNDER W&P, which is how
   Beth reads the rule. W&P stays the taller whole lockup; LiM never passes it. */
/* MM-WPSPLIT-V1 FIX - lim-bundle caps .mm-marks .lk at max-width 142px (116 under 768).
   Setting a height WITHOUT clearing that cap uses both: height 46 with width clamped to
   142 rendered 3.087 against a natural 3.855 - a lockup squashed ~25%% horizontally, which
   is what Mike saw. I had the numbers (116x37 is 3.14, not 3.855) and moved past them.
   Height drives, width follows, and object-fit is the belt to the braces so that any cap
   reintroduced later letterboxes instead of distorting. */
.mm-marks .lk,.mm-marks .wp{max-width:none;width:auto;object-fit:contain}
.mm-marks .wp{height:50px}
.mm-marks .lk{height:46px}
@media (max-width:767px){.mm-marks .wp{height:40px}.mm-marks .lk{height:37px}}
/* Mike, after the aspect fix: "things look awkwardly off-centered now... justify the tab
   title left, logos right." On the narrow bar the page name leads and the logo pair sits
   hard right; inside the pair the order is untouched, LiM then W&P. Flex order rather than
   moved markup, so the DOM order - and the reading order for a screen reader - still has
   the brand first. */
@media (max-width:767px){
  .mm-nav>.mm-row{align-items:center}
  /* Mike, second pass: "maybe the page title gets centered between the left and the logos
     instead of all the way to the left?" It takes the whole gap and centres inside it.
     min-width:0 is the load-bearing part - a flex item will not shrink below its content
     without it, so the ellipsis would never trigger and a long name would push the logos
     off the right edge instead of truncating. */
  .mm-nav>.mm-row>.mm-pagename{order:-1;flex:1 1 auto;min-width:0;text-align:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:0;margin-right:0}
  .mm-nav>.mm-row>.mm-hub{order:0}
  .mm-nav>.mm-row>.mm-marks{order:1;margin-right:0;margin-left:auto}
}
/* and the logo group is vertically centred at every width, stated rather than inherited */
.mm-nav>.mm-row{align-items:center}
.mm-marks{align-items:center}
/* 3 - the viewport-filling overlays start BELOW the bar. Dispatch: pop-ups and sheets sit
   below it, not over it. z-index alone does NOT achieve that here - measured on staging with
   a sheet open, .tpop paints and hit-tests above the row at every z from 10 to 2147483620
   while its own z is 5, so the two are not ordering the way the box model says they should.
   Offsetting the overlay is immune to whatever that is: the bar is simply not underneath it.
   All three are position:fixed;inset:0, so top:60px keeps bottom:0 and just shrinks them by
   the height of the bar. !important is not laziness here: each of these sets inset:0 in its
   own PAGE style block, which comes after this external sheet, so a plain top:60px loses on
   source order - measured that way round first, with #fsheet on the map staying at top 0 and
   covering the bar completely. Verified by a real tap on the bar with a sheet open: the tap reaches
   the bar instead of dismissing the sheet. */
/* ⚰️ This said top:60px. The bar is 60 below 768 but 77 between 768 and 1279, so through
   that whole band every sheet started 17px UNDER the bar instead of below it. The literal
   was written before --mm-bar existed and an earlier pass that was meant to swap it never
   landed; caught while adding the tour, which needs the same offset. */
.tpop,#mmv2-extnote,#fsheet,.mmtour{top:var(--mm-bar)!important}
/* MM-TOUR-V1 - the tour reuses the one bottom-sheet shape this site already has rather than inventing a
   fourth pattern, and starts below the pinned bar like the others, so the brokerage mark
   stays visible while it is open. */
/* MM-TOUR-V2 - Mike: "it covers the bottom bar so I cannot even see what it is teaching me
   about." The overlay no longer carries its own scrim and no longer bottom-anchors the
   card. The RING is the scrim - one huge spread shadow that dims everything except the
   hole it leaves - so the target is spotlit rather than covered, and the card is placed
   on whichever side has room. pointer-events:none on the layer means the spotlit control
   is still the thing under the cursor; only the card takes input. */
/* ⚰️ pointer-events:auto ON A FULL-VIEWPORT LAYER IS A SCROLL LOCK ON TOUCH, and that is
   what Mike kept hitting. It went in to stop two tours running at once; the trigger
   lockout now does that job on its own (the buttons are disabled), so the layer can stop
   swallowing the page. It passes everything through, including scroll, and a tap outside
   the card is caught by a document listener that exits the tour. Mike: "just exit the
   tutorial when someone taps outside of it." */
.mmtour{position:fixed;inset:0;z-index:2147483100;pointer-events:none}
.mmtour-open[disabled]{opacity:.55;cursor:default}
.mmtour-veil{position:fixed;inset:var(--mm-bar) 0 0 0;background:rgba(20,24,32,.45);
  pointer-events:none}
.mmtour-veil[hidden]{display:none}
.mmtour-card{position:fixed;background:#fff;width:calc(100vw - 16px);max-width:420px;
  border-radius:14px;padding:16px 16px 14px;pointer-events:auto;
  box-shadow:0 14px 44px rgba(0,0,0,.34)}
/* the arrow points back at the control; --mmtour-arrow tracks it when the card is nudged */
.mmtour-card::after{content:"";position:absolute;left:var(--mmtour-arrow,50%);margin-left:-9px;
  border:9px solid transparent;width:0;height:0}
.mmtour-up::after{bottom:100%;border-bottom-color:#fff}
.mmtour-down::after{top:100%;border-top-color:#fff}
.mmtour-copy{margin:0 0 14px;font-size:16px;line-height:1.55;color:#11181c}
.mmtour-btns{display:flex;gap:10px;justify-content:flex-end;align-items:center}
/* Back is the quiet one: it sits left of Next and never competes with it */
.mmtour-back{background:none;border:1px solid #c9ced8;color:#3F4450}
.mmtour-back:hover{border-color:#14737F;color:#14737F}
.mmtour-back[hidden]{display:none}
.mmtour-card--hero .mmtour-back{display:none}
.mmtour-btns button{min-height:44px;padding:0 18px;border-radius:10px;font:inherit;
  font-size:15px;font-weight:600;cursor:pointer}
.mmtour-skip{background:#fff;color:#293044;border:1px solid #c9ced8}
.mmtour-next{background:#293044;color:#fff;border:1px solid #293044}
.mmtour-btns button:focus-visible{outline:3px solid #14737F;outline-offset:2px}
/* MM-TOURHERO-V1 - card 1 of the welcome tour is a hero, not a coach-mark. Mike wanted
   the tools named properly and the opening card to look like a welcome: brand band, the
   lockup, a title set larger than the line under it, a primary button and a quiet Skip.
   Cards 2+ keep the compact shape, so only this one class changes anything. */
.mmtour-card--hero{max-width:368px;padding:0;overflow:hidden;border-radius:18px;
  text-align:center}
.mmtour-card--hero::after{display:none}      /* a hero points at nothing */
.mmtour-hero{display:flex;align-items:center;justify-content:center;
  background:#293044;padding:24px 20px 20px}
.mmtour-hero[hidden]{display:none}
.mmtour-heroimg{display:block;width:190px;max-width:72%;height:auto}
.mmtour-card--hero .mmtour-copy{margin:22px 22px 20px;font-size:16px;line-height:1.55;
  color:#3F4450}
.mmtour-title{display:block;margin:0 0 8px;font-size:21px;line-height:1.3;
  font-weight:700;letter-spacing:-.3px;color:#111318}
/* column-reverse puts the primary on top and Skip under it as a quiet text link */
.mmtour-card--hero .mmtour-btns{flex-direction:column-reverse;align-items:stretch;
  gap:4px;margin:0 22px 20px}
.mmtour-card--hero .mmtour-next{min-height:48px;font-size:16px;font-weight:700;
  background:#A0D020;color:#222633;border-color:#8fbb1c}
.mmtour-card--hero .mmtour-next:hover{background:#8fbb1c}
.mmtour-card--hero .mmtour-skip{min-height:44px;background:none;border:0;
  color:#555b69;font-size:14.5px;text-decoration:underline;text-underline-offset:2px}
/* MM-APPBADGE-V1 - the standing app entry point, far LEFT of the pinned bar. Measured at
   390: the bar has 149px left of the marks group and the title was using 117, so a 28px
   badge plus its gutters leaves the title 105px and the LiM + W&P pair is not touched.
   The 44px tap area is an absolutely-positioned ::before, as the ? badge does it, so the
   bar row does not grow. */
.mm-appbadge{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;width:28px;height:28px;margin:0 2px 0 0;padding:0;border:0;
  border-radius:7px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mm-appbadge[hidden]{display:none}
/* the phone bar forces .mm-pagename to order:-1, so DOM order alone put the badge BETWEEN
   the title and the marks - measured at x=99 with the marks at 149. -2 puts it first, which
   is the far-left slack and the furthest point from the compliance pair. */
.mm-nav>.mm-row>.mm-appbadge{order:-2}
.mm-appbadge img{width:28px;height:28px;display:block;border-radius:7px}
.mm-appbadge::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%)}
.mm-appbadge:focus-visible{outline:3px solid #A0D020;outline-offset:2px}
/* the one-off nudge after Maybe later - a ring, not a wobble, and off for reduced motion */
@keyframes mmAppPulse{0%{box-shadow:0 0 0 0 rgba(160,208,32,.85)}
  70%{box-shadow:0 0 0 9px rgba(160,208,32,0)}100%{box-shadow:0 0 0 0 rgba(160,208,32,0)}}
.mm-appbadge.is-pulsing{animation:mmAppPulse 1.2s ease-out 2}
.mm-appbadge-hint{position:fixed;z-index:2147483080;max-width:min(300px,calc(100vw - 16px));
  background:#293044;color:#fff;font-size:13.5px;line-height:1.4;padding:9px 12px;
  border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.3);pointer-events:none;
  opacity:0;transform:translateY(-4px);transition:opacity .18s ease-out,transform .18s ease-out}
.mm-appbadge-hint.is-in{opacity:1;transform:none}
.mm-appbadge-hint::after{content:"";position:absolute;bottom:100%;
  left:var(--mm-hint-arrow,24px);margin-left:-7px;border:7px solid transparent;
  border-bottom-color:#293044}
@media (prefers-reduced-motion:reduce){
  .mm-appbadge.is-pulsing{animation:none}
  .mm-appbadge-hint{transition:none;opacity:1;transform:none}
}
/* MM-SETTINGS-V1 - the Settings sheet. The same bottom-sheet shape as every other
   pop-up here, starting below the pinned bar so the brokerage mark stays visible.
   It is in the FOOTER, not the bar: the bar is already spending its width at 390 on
   the title and the two marks compliance requires, and a gear would come out of one
   of them. */
.mm-settings{background:none;border:0;padding:0 2px;margin:0;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;min-height:44px}
.mmset{position:fixed;inset:var(--mm-bar) 0 0 0;z-index:2147483090;
  background:rgba(20,24,32,.45);display:flex;align-items:flex-end;justify-content:center}
.mmset-card{background:#fff;width:100%;max-width:520px;border-radius:16px 16px 0 0;
  padding:6px 0 calc(8px + env(safe-area-inset-bottom));max-height:72vh;overflow:auto;
  box-shadow:0 -12px 40px rgba(0,0,0,.26)}
@media (min-width:700px){.mmset{align-items:center}.mmset-card{border-radius:16px}}
.mmset-head{display:flex;align-items:center;gap:10px;padding:10px 16px 6px}
.mmset-title{margin:0;font-size:17px;font-weight:700;color:#111318;flex:1}
.mmset-x{width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative}
.mmset-x::before,.mmset-x::after{content:"";position:absolute;left:13px;top:21px;
  width:18px;height:2px;background:#555b69}
.mmset-x::before{transform:rotate(45deg)}
.mmset-x::after{transform:rotate(-45deg)}
.mmset-row{display:block;width:100%;text-align:left;background:none;border:0;
  cursor:pointer;padding:13px 16px;min-height:52px;font:inherit;border-top:1px solid #e6e9ee}
.mmset-row:hover{background:#f4f7f9}
.mmset-row:focus-visible{outline:3px solid #14737F;outline-offset:-3px}
.mmset-lbl{display:block;font-size:16px;font-weight:650;color:#111318}
.mmset-row--danger .mmset-lbl{color:#9d2a2a}
.mmset-note{display:block;margin-top:2px;font-size:13.5px;color:#555b69;font-weight:400}
/* the ring highlights, it never takes a tap */
/* ⚰️ transition:all MEANT EVERY MOVE WAS ANIMATED. Mike: "the box is trying to chase the
   object." It was - the ring tweened to each new rect while the page was still scrolling.
   Position is instant now; only opacity animates, for the fade-in after the scroll ends.
   ⚰️ AND THE 9999px SPREAD SHADOW IS GONE. A full-viewport shadow repainted on every
   scroll frame is the "blur-jitter" Mike described on his phone. The ring carries its own
   contrast instead: a lime edge over a white halo reads on any basemap. */
.mmtour-ring{position:fixed;border:3px solid #A0D020;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.95),0 2px 10px rgba(20,24,32,.3);
  transition:opacity .16s ease-out}
/* hidden while the page is still moving, faded in once it has stopped */
.mmtour-card,.mmtour-ring{transition:opacity .16s ease-out}
.mmtour-hide{opacity:0!important}
.mmtour-ring[hidden]{display:none}
/* MM-TOURBADGE-V1 - Mike: "Something smaller like an in-line, highlighted question mark."
   The opener is a small teal circle sitting inside the <h1>, right after the last word.
   🛑 THE GLYPH IS ::after, NOT A TEXT NODE. The button lives inside the heading, so a real
      "?" in it would land in the h1 own text - in innerText, in the SEO read, and in the
      heading a screen reader announces. Drawn in CSS it is invisible to all three, and
      aria-label carries the name instead.
   🛑 THE 44px TAP AREA IS ::before, NOT PADDING. Padding would grow the heading line box
      and push the title around; an absolutely-positioned 44x44 box over the circle does
      not participate in layout at all.
   🛑 font-family:inherit, not a stack. This CSS is a single-quoted PHP string and a
      quoted font name ends it early - the parse error that caught this on the way in. */
.mmtour-open,.mmtour-badge{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex:0 0 auto;border:0;border-radius:50%;padding:0;
  background:#14737F;color:#fff;vertical-align:middle;font-family:inherit}
.mmtour-open::after,.mmtour-badge::after{content:"?";font-weight:700;font-size:15px;
  line-height:1;letter-spacing:0;text-transform:none}
.mmtour-open{position:relative;margin-left:9px;cursor:pointer}
/* the last word of the title and the badge break together, never apart */
.mmtour-tie{white-space:nowrap}
.mmtour-open::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%)}
.mmtour-open:hover{background:#0f5a63}
.mmtour-open:focus-visible{outline:3px solid #A0D020;outline-offset:2px}
/* the sample inside the welcome card: the same circle, one size down, not a control */
.mmtour-badge{width:22px;height:22px;margin:0 2px;vertical-align:-5px}
.mmtour-badge::after{font-size:14px}
/* 4 - printing wants the bar in the flow, once, not stamped on every sheet. */
@media print{.mm-nav{padding-top:0}.mm-nav>.mm-row{position:static}}