/* PROPOSAL ONLY. Load LAST after pinned composition CSS.
   Website opt-in: body[data-brand-six-fit]. No colors or font family replaced.
   Website supplies --brand-six-grid-height on [data-cards], measured from
   grid top to homes-scroll bottom minus pager/safe-area reserve. No 360px floor.
   Missing measurement intentionally falls back to natural height, NOT a fit pass.
   Minimum-content rows preserve identity/credit even when six cannot fit. */
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards].cards {
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;
 grid-template-rows:repeat(2,minmax(min-content,1fr))!important;
 grid-auto-rows:min-content;gap:8px;align-items:stretch;
 height:var(--brand-six-grid-height,auto)!important;
 min-height:min-content;min-width:0;
}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card {
 height:auto!important;min-height:0!important;min-width:0;
 align-self:stretch;display:flex;flex-direction:column;overflow:visible;
}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card>.card-open {
 display:flex;flex-direction:column;flex:1 0 auto;min-height:0;min-width:0;
 overflow:visible;
}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card>.card-open>:is(img,.nophoto) {
 height:48px!important;min-height:48px!important;max-height:128px;
 flex:1 1 48px;width:100%;aspect-ratio:auto;object-fit:cover;
}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .body {
 flex:none;min-width:0;padding:4px;
}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card :is(.price,.addr,.attr,.see-more) {
 white-space:normal!important;overflow:visible!important;text-overflow:clip;
 overflow-wrap:anywhere;word-break:normal;max-height:none;-webkit-line-clamp:unset;
 font-size:1rem!important;line-height:1.3;
}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card :is(.price,.addr) {
 font-weight:800!important;
}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .see-more {
 min-height:44px;box-sizing:border-box;
}
/* Retain 3 columns on phones too. If natural text exceeds available height,
   the region scrolls; that is an explicit six-visible FAILURE, never a pass. */
@media(max-width:900px) {
 html body.page.app[data-v="search"][data-brand-six-fit] [data-cards].cards {
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(min-content,1fr))!important;
  gap:6px;
 }
}
/* Existing find.js supplies real price/address in .detail-caption.
   Keep that identity row outside the photo's scrolling/zoomed content. */
html body.page.app[data-brand-six-fit] .detail>.detail-bar {
 position:sticky;top:0;z-index:35;display:grid;
 grid-template-columns:auto minmax(0,1fr) auto;align-items:start;
 gap:8px;flex:none;
}
html body.page.app[data-brand-six-fit] .detail .detail-caption {
 display:grid;gap:2px;min-width:0;
}
html body.page.app[data-brand-six-fit] .detail :is(.detail-price,.detail-address) {
 font-size:1rem;font-weight:800;line-height:1.3;white-space:normal;
 overflow-wrap:anywhere;overflow:visible;max-height:none;
}
@media(max-width:900px) {
 html body.page.app[data-brand-six-fit] .detail.detail-action-layout .fullgallery>.photo-stage {
  /* Existing ResizeObserver supplies header/actions pixel heights. */
  height:max(0px,calc(100dvh - var(--detail-header-height,96px) - var(--detail-actions-height,180px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px));
  max-height:max(0px,calc(100dvh - var(--detail-header-height,96px) - var(--detail-actions-height,180px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px));
  min-height:0;
 }
 html body.page.app[data-brand-six-fit] .detail .detail-bar>:is(button,a) {
  min-height:44px;min-width:44px;
 }
}

/* Phone text remains fully wrapped; reserve the touch target independently. */
@media(max-width:900px){
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .price{font-size:16px!important;line-height:1.2}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .addr{font-size:14px!important;line-height:1.2}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .attr{font-size:12px!important;line-height:1.2}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .see-more{font-size:14px!important;line-height:1.2;display:flex;align-items:center}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .card-credit{font-size:12px;line-height:1.2}
}

/* Reserve complete desktop paging controls in the six-card region. */
html body.page.app[data-v="search"] [data-pager] button{min-height:44px;min-width:44px;box-sizing:border-box}

/* Dave first review edit, 2026-10-30: more photo area, compact text/actions.
   Preserve full price/address/credit, original font and six-card arrangement. */
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card>.card-open>:is(img,.nophoto){max-height:none;flex-grow:1}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .body{padding:3px 4px}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card :is(.price,.addr,.attr,.see-more){line-height:1.1;letter-spacing:-.015em;margin-top:2px;margin-bottom:2px}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .price{font-size:16px!important}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .addr{font-size:14px!important}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card :is(.attr,.card-credit){font-size:12px!important;line-height:1.1}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .see-more{font-size:12px!important;min-height:24px;min-width:0;width:fit-content;padding:2px 6px;display:flex;align-items:center;box-sizing:border-box}

/* Owner direct2051: retain edited six-card layout; more image, compact words. */
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .body{padding:2px 4px}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .addr{font-size:13px!important;line-height:1.05;margin:1px 0}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .price{line-height:1.05;margin:1px 0}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .see-more{line-height:1.05;margin:1px 0;padding:1px 4px;min-height:22px}
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .card-credit{font-size:12px!important;line-height:1.05;padding:2px 4px}

/* Exact owner corrections: purple search surround; neighborhood index is separate from Area. */
html body.page.app[data-v="search"] .listsearch{background:#512888;padding:8px;border:3px solid #512888;box-sizing:border-box}
html body.page.app[data-v="search"]:is([data-solo="neighborhood"],[data-solo="neighborhood-homes"]) .mapctl{display:none!important}
html body.page.app[data-v="search"] [data-cards][data-neighborhood-index]{display:flex!important;flex-direction:column;gap:8px;height:auto!important}
html body.page.app[data-v="search"] [data-cards][data-neighborhood-index] .hoodrow{width:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:3px solid #512888;background:#fff;color:#512888;padding:10px;text-align:left;font:inherit}
html body.page.app[data-v="search"] [data-neighborhood-index-back]{min-height:44px;border:3px solid #512888;color:#512888;background:#fff;font:inherit;font-weight:700}

html body.page.app[data-solo="area"] .recovery-geography label:has([data-neighborhood-select]),html body.page.app[data-solo="area"] [data-neighborhood-clear],html body.page.app[data-solo="area"] [data-neighborhood-status]{display:none!important}

/* Owner exact 2026-10-31: Area uses map/list index then matching listings. */
html body.page.app[data-solo="area-index"] .mapctl,html body.page.app[data-solo="area-homes"] .mapctl{display:none!important}

/* 2026-10-31 Dave: one thick border all the way around each picture card. The inner link already draws 3px #512888; drop the outer 1px light border so no thin line shows. */
html body.page.app [data-cards]>li.card{border:0!important;box-shadow:none;background:transparent}
html body.page.app [data-cards]>li.card.hl{box-shadow:0 0 0 3px #512888}
/* v18 Dave 10-31 22:0xZ: By Neighborhood + By Area buttons about HALF the size, PURPLE with WHITE letters (both views share .hoodrow) */
html body.page.app[data-v="search"] [data-cards][data-neighborhood-index] .hoodrow,html body.page.app .hoodrow{min-height:40px!important;height:auto!important;padding:4px 12px!important;background:#512888!important;color:#fff!important;border:3px solid #512888!important;border-radius:10px;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:10px}
html body.page.app .hoodrow b{color:#fff!important;font-size:15px;line-height:1.2}
html body.page.app .hoodrow span{color:#fff!important;font-size:13px;opacity:.92;white-space:nowrap}
html body.page.app .hoodrow:hover{background:#3d1d68!important;border-color:#3d1d68!important}
html body.page.app .hoodrow:focus-visible{outline:3px solid #f2b705;outline-offset:2px}
html body.page.app[data-v="search"] [data-cards].cards:has(> .hoodli),html body.page.app[data-v="search"] [data-cards]:has(> .hoodli){display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;grid-auto-rows:auto!important;height:auto!important;gap:8px!important;align-content:start!important;align-items:start!important}
html body.page.app[data-v="search"] [data-cards]:has(> .hoodli) .hoodli{height:auto!important;min-height:0!important}
@media(min-width:700px){html body.page.app[data-v="search"] [data-cards].cards:has(> .hoodli),html body.page.app[data-v="search"] [data-cards]:has(> .hoodli){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* v18 Dave 10-31: second address line on cards (city, state ZIP), same size as the street line */
html body.page.app [data-cards]>.card .addr2{font-size:1rem!important;line-height:1.15;margin:0 0 2px;overflow-wrap:anywhere;color:#1d2a24;font-weight:600}
/* v18: street + city lines the same size on cards */
html body.page.app[data-v="search"] [data-cards]>.card :is(.addr,.addr2),html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card :is(.addr,.addr2){font-size:15px!important;line-height:1.15!important;font-weight:700}
/* v20 Dave 11-01 08:04Z: the homes feed scrolls. 24 homes per page, every row the same height the six-card fit gave (2 rows fill the box), more rows below */
html body.page.app[data-v="search"][data-brand-six-fit] [data-cards].cards:not(:has(> .hoodli)){grid-template-rows:none!important;grid-auto-rows:calc((var(--brand-six-grid-height,560px) - 8px) / 2);height:auto!important}
/* v20 Dave 11-01 08:2xZ: "the purple line has to go" on every layout: no purple band around the search box (it covered the count line in Safari); the box keeps a purple outline so it is easy to see */
html body.page.app .listsearch,html body.page.app[data-v="search"] .listsearch{background:transparent!important;border:0!important;padding:4px 0 6px!important;box-shadow:none!important}
html body.page.app .listsearch .search{border:2px solid #512888!important}
.ph-measure{position:absolute;left:-9999px;top:0;visibility:hidden;white-space:pre;pointer-events:none}
/* v20 Dave 11-01 08:2xZ: "our boxes are thick purple lines ... curved, round, not square ... personality" (replaces the 10-29 black picture-box outline on cards) */
html body.page.app [data-cards]>li.card{border:3px solid #512888!important;border-radius:14px!important;overflow:hidden!important;background:#fff!important;box-sizing:border-box}
html body.page.app [data-cards]>li.card :is(.card-open,img,.nophoto){outline:0!important;box-shadow:none!important}
html body.page.app [data-cards]>li.card .see-more{border-radius:999px!important}
html body.page .search,html body.page.app .listsearch .search{border:3px solid #512888!important;border-radius:14px!important;overflow:hidden}
html body.page .search input{border:0!important;border-radius:0!important}
html body.page :is(input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input:not([type]),select,textarea):not(.search input){border:3px solid #512888!important;border-radius:12px!important}
html body.page .panel,html body.page .hoodrow,html body.page .jl-search{border-radius:16px!important}
html body.page.app [data-cards]>li.card>button.card-open.card-open:not(.leaflet-marker-icon):not(.home-dot):not(.neighborhood-dot):not(.x-none){box-shadow:none!important;outline:0!important;border:0!important}
/* v20 Dave 11-01 08:27Z (photo of the search box): every picture box, card, panel and form looks like the search box:
   thick purple rounded border + an inner purple rounded line (the corner accents). Inner line is an overlay so it shows over photos. */
html body.page :is([data-cards]>li.card,.jtiles a,.tile,.ccard,.panel,.hoodrow,.fullgallery .photo-stage){border:3px solid #512888!important;border-radius:16px!important;position:relative;overflow:hidden}
html body.page :is([data-cards]>li.card,.jtiles a,.tile,.ccard,.panel,.hoodrow,.fullgallery .photo-stage)::after{content:"";position:absolute;inset:0;border:3px solid #512888;border-radius:12px;pointer-events:none;z-index:4}
html body.page :is(input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input:not([type]),select,textarea):not(.search input){border:3px solid #512888!important;border-radius:12px!important;outline:3px solid #512888;outline-offset:0}
html body.page :is(input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input:not([type]),select,textarea):not(.search input):focus-visible{outline:3px solid #1d2a24;outline-offset:2px}
/* v20: text inside framed cards clears the inner purple line; the home page credit lines sit above the pinned IDX disclosures link */
html body.page.app[data-v="search"] [data-cards]>li.card .body,html body.page.app[data-v="search"][data-brand-six-fit] [data-cards]>.card .body{padding:5px 10px 8px!important}
html body.page.app [data-cards]>li.card :is(.card-open>img,.card-open>.nophoto){border-radius:12px 12px 0 0}
html body.page .detail .detail-credit{padding-bottom:40px!important}
