/* Dandelion CRM on the phone - properties (2026-10-21 round, the owner's page-by-page review): the Listings / Projects /
   Search tabs (#page-properties, #page-search) and Developers (#page-developers). Rules only inside @media (max-width: 900px),
   scoped html.ui-2026 body:not(#dn26) (the contract of core.css); above 900px nothing here matches. The matching behaviour
   lives in assets/js/mobile/properties.js. */
@media (max-width: 900px){

  /* ==================================================================== Listings tab (#page-properties) */
  /* 19 (owner): a listing without a photo used to get a 64px strip (ui.css ≤900) under a 132px photo box - every card's
     image area is now the same box, and the empty one holds the dandelion mark (properties.js puts .dnm-nophoto in). */
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-img,
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-img.is-empty{ height: 150px !important; background: var(--dnm-soft); }
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-img.is-empty :is(.prp-noimg, .prp-seed-wm){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-img > .dnm-nophoto{ position: absolute; inset: 0; }
  /* ui.css draws content:attr(data-address) in a dark pill on every image box; without the attribute it is an empty pill */
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-img:not([data-address])::before{ display: none !important; }
  /* the status chip (Ready / Off-Plan / Available), "Shared" and the lifecycle badge sit on the photo (ui.css: position:absolute,
     z-index auto) - the photo itself stays unpositioned, as on the desktop, so they paint above it (reviewer 2026-10-21: an
     earlier img z-index rule here hid the chip on every card WITH a photo); raised explicitly so no later img rule covers them */
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-img > :is(.prp-card-stat, .prp-card-shared, .plc-badge){ z-index: 2; }
  /* 35: the "View gallery" pill on the photo goes - the photo itself opens the album (its own onclick), the card opens the record */
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-img .prp-gallery-trigger{ display: none !important; }
  /* 21 / 35: the search field and the round Filters + Sort buttons in one row (the wide "Filters" pill is hidden by the js) */
  html.ui-2026 body:not(#dn26) #page-properties .prp-mfilters{ display: flex !important; align-items: center; gap: 8px; flex-wrap: nowrap; }
  html.ui-2026 body:not(#dn26) #page-properties .prp-mfilters > .prp-search{ flex: 1 1 auto !important; width: auto !important; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-properties .prp-mfilters > .dnm-ib{ flex: 0 0 auto; }

  /* ==================================================================== Projects / Search tabs (#page-search) */
  /* 21 / 35: one head - the count line with the PDF chip at its end, then the search field with the round AI, Filters and
     Sort buttons (properties.js adds them); the wide Ask AI / Filters pair and the sort + view strip are retired: the
     sort choices open in the drawer, the list view does not exist on the phone. */
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead{
    display: grid !important; grid-template-columns: minmax(0, 1fr) var(--dnm-ctrl) var(--dnm-ctrl) var(--dnm-ctrl);
    grid-template-areas: "lbl pdf pdf pdf" "search ai filter sort"; gap: 10px 8px; align-items: center; margin: 0 0 10px;
  }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .pf-mainhead-t{ grid-area: lbl; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .pf-mainhead-t > #srch-count-lbl{ font-size: 13px; color: var(--text-muted); }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .pf-searchbox{ grid-area: search; min-width: 0; width: auto !important; margin: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .topChipBtn.pdf{ grid-area: pdf; width: auto !important; min-width: 0; justify-self: end; margin: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .dnm-srch-ai{ grid-area: ai; }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .dnm-srch-filter{ grid-area: filter; }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .dnm-srch-sort{ grid-area: sort; }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > #srch-apply{ display: none !important; }   /* the phone applies from the Filters sheet */
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .dnm-ib svg{ width: 20px; height: 20px; }
  html.ui-2026 body:not(#dn26) #page-search :is(.srch-mbar, .srch-resbar){ display: none !important; }
  /* the All / Unseen / Viewed / Saved chips: one line that scrolls with the finger */
  html.ui-2026 body:not(#dn26) #page-search .dwf-viewchips{
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 2px var(--dnm-gutter) 6px; margin-inline: calc(-1 * var(--dnm-gutter));
  }
  html.ui-2026 body:not(#dn26) #page-search .dwf-viewchips::-webkit-scrollbar{ display: none; }
  html.ui-2026 body:not(#dn26) #page-search .dwf-viewchips > .dwf-chip{ flex: 0 0 auto; white-space: nowrap; }
  /* 19: the card's image area is the 16:10 box for everyone; without a photo the dandelion mark fills it */
  html.ui-2026 body:not(#dn26) #page-search .srch-uni-media > .dnm-nophoto{ position: absolute; inset: 0; }
  /* 35: the "Open" button leaves the card - a tap on the card opens the record (properties.js wires it to the same
     handler: openPropertyModal / _srchOpenProject / the portal page); PDF, Assign to Deal and the portal link stay, round. */
  html.ui-2026 body:not(#dn26) #page-search .srch-uni-card{ cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html.ui-2026 body:not(#dn26) #page-search .srch-uni-card:active{ transform: scale(.995); }
  html.ui-2026 body:not(#dn26) #page-search .srch-uni-card .srch-act:is([onclick*="openPropertyModal"], [onclick*="_srchOpenProject"], [onclick*="window.open("]){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-search .srch-uni-card .srch-actions{ gap: 8px; }
  /* a real circle: ui.css (≤640) gives every icon-only button min-width:44px, which made these 44x40 ovals (reviewer 2026-10-21) */
  html.ui-2026 body:not(#dn26) #page-search .srch-uni-card .srch-act:not(.srch-act--deal){
    width: 40px; min-width: 40px; max-width: 40px; height: 40px; min-height: 40px; aspect-ratio: 1; padding: 0;
    border: 0; border-radius: 50%; background: var(--dnm-soft); color: var(--text);
  }
  html.ui-2026 body:not(#dn26) #page-search .srch-uni-card .srch-act--deal{ min-height: 40px; border-radius: var(--dnm-pill); }

  /* ==================================================================== the sort choices in the drawer (Listings, Projects, Search) */
  html.ui-2026 body:not(#dn26) .dnm-sort-list{ display: flex; flex-direction: column; gap: 4px; }
  html.ui-2026 body:not(#dn26) .dnm-sort-opt{
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 4px; border: 0; background: transparent;
    color: var(--text); font: inherit; font-size: 15px; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html.ui-2026 body:not(#dn26) .dnm-sort-opt::before{
    content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); box-sizing: border-box;
  }
  html.ui-2026 body:not(#dn26) .dnm-sort-opt.is-on{ font-weight: 600; }
  html.ui-2026 body:not(#dn26) .dnm-sort-opt.is-on::before{ border: 6px solid var(--text); }

  /* ==================================================================== Developers (#page-developers) */
  /* 24 (owner-approved): the first card (the picker, the ‹ › arrows, the count) leaves; the "All developers" button stays
     as the way back from an open developer; the title row is gone (header area), so no gap where it was. */
  html.ui-2026 body:not(#dn26) #page-developers .dev-topbar{ margin: 0 !important; padding: 0 !important; min-height: 0; border: 0 !important; }   /* its 1px border-bottom drew a line above the search */
  html.ui-2026 body:not(#dn26) #page-developers .dev-switch{
    position: static; padding: 0; margin: 0; border: 0; background: transparent; border-radius: 0; gap: 0; box-shadow: none;
  }
  html.ui-2026 body:not(#dn26) #page-developers .dev-switch > :is(.dev-switch-nav, .dev-combo, .dev-switch-count){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-switch > .dev-switch-all:not([hidden]){
    display: inline-flex; align-items: center; min-height: 40px; margin: 0 0 12px; padding: 0 16px; border-radius: var(--dnm-pill);
  }
  /* one full-width search on top */
  html.ui-2026 body:not(#dn26) #page-developers .dnm-dev-search{ margin: 0 0 12px; }
  html.ui-2026 body:not(#dn26) #page-developers .dnm-dev-search > .dnm-search{
    width: 100%; height: 46px; min-height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface); color: var(--text); font: inherit; font-size: 15px; -webkit-appearance: none; appearance: none;
  }
  html.ui-2026 body:not(#dn26) #page-developers .dnm-dev-search > .dnm-search::placeholder{ color: var(--text-muted); }
  /* the directory on the page, not in a second card (item 6: one gutter) */
  html.ui-2026 body:not(#dn26) #page-developers .dev-list-wrap{ padding: 0; overflow: visible; }
  /* room under the directory / the open developer for the floating "+ Add" (52px pill, 12px above the tab bar): scrolled to the
     end, the last card's score pill and the Projects section's sort select were under it (reviewer 2026-10-21); managers only -
     the pill exists for nobody else */
  html.ui-2026 body:not(#dn26) #page-developers .dev-page:has(.dev-new-btn) > .dev-list-wrap{ padding-bottom: 84px; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-panel.dev-panel-inline{
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible;
  }
  html.ui-2026 body:not(#dn26) #page-developers .dev-panel-inline > .dev-panel-hdr{ padding: 0 0 10px !important; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-panel-inline > .dev-panel-body{ padding: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-panel-inline > .dev-panel-body > .dev-dir{ padding-top: 0; gap: 14px; }
  /* one scrolling row of chips: Strongest · Our contracts · A–Z, the count small at its end */
  html.ui-2026 body:not(#dn26) #page-developers .dev-dir-bar{
    display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding: 2px var(--dnm-gutter) 6px; margin-inline: calc(-1 * var(--dnm-gutter));
  }
  html.ui-2026 body:not(#dn26) #page-developers .dev-dir-bar::-webkit-scrollbar{ display: none; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-view{ display: flex; flex: 0 0 auto; width: auto; gap: 6px; padding: 0; border: 0; background: transparent; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-view-btn{
    flex: 0 0 auto; min-height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--dnm-pill);
    background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; box-shadow: none; white-space: nowrap;
  }
  html.ui-2026 body:not(#dn26) #page-developers .dev-view-btn.is-on{ background: var(--text); color: var(--surface); border-color: var(--text); box-shadow: none; }
  /* sized so the three chips and "15 developers" fit a 390 screen in one line (a longer translation still scrolls) */
  html.ui-2026 body:not(#dn26) #page-developers .dev-dir-count{ flex: 0 0 auto; font-size: 11.5px; white-space: nowrap; color: var(--text-muted); }
  html.ui-2026 body:not(#dn26) #page-developers .dev-dir-group > h3{ font-size: 12px; letter-spacing: .4px; padding-bottom: 6px; margin-bottom: 10px; }
  /* the list as cards: the logo box the same for all (the dandelion mark where there is none), name, city, the score pill at the end */
  html.ui-2026 body:not(#dn26) #page-developers .dev-dir-grid{ grid-template-columns: 1fr; gap: 10px; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-dir-card{ gap: 12px; padding: 12px 14px; border-radius: var(--dnm-radius); min-height: 72px; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-dir-ini,
  html.ui-2026 body:not(#dn26) #page-developers .dev-dir-ini.has-img,
  html.ui-2026 body:not(#dn26) #page-developers .dev-dir-ini.has-img.is-wide{
    flex: 0 0 48px !important; width: 48px; height: 48px; padding: 0 !important; border-radius: 12px; overflow: hidden; background: var(--dnm-soft);
  }
  html.ui-2026 body:not(#dn26) #page-developers .dev-dir-ini.has-img{ background: var(--surface); padding: 3px !important; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-dir-ini > .dnm-nophoto svg{ width: 58%; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-dir-copy > strong{ font-size: 15px; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-dir-copy > small{ font-size: 13px; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-dir-score{ min-width: 36px; height: 26px; font-size: 13px; }
  /* "+ Add" floats above the tab bar (the same place as #crm-fab, which never shows on this page) */
  html.ui-2026 body:not(#dn26) #page-developers .dev-new-btn{
    position: fixed; z-index: 112; inset-inline-end: max(16px, var(--dn-safe-right, 0px));
    bottom: calc(var(--dn-tabbar-h, 64px) + 12px + var(--dn-safe-bottom, 0px));
    display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding-block: 0; padding-inline: 16px 20px; margin: 0;   /* icon side 16, word side 20 - logical, so fa/ar mirror it */
    border-radius: var(--dnm-pill); font-size: 15px; font-weight: 600; box-shadow: 0 8px 22px rgba(0,0,0,.18); transform: none !important;
  }
  html.ui-2026 body:not(#dn26) #page-developers .dev-new-btn svg{ width: 18px; height: 18px; }
  html.ui-2026.dnm-menu-open body:not(#dn26) #page-developers .dev-new-btn,
  html.ui-2026 body:not(#dn26):has(.modal-overlay:not(.hidden)) #page-developers .dev-new-btn,
  html.ui-2026 body:not(#dn26):has(.dnm-drawer.is-on) #page-developers .dev-new-btn{ display: none !important; }
}

/* Owner 2026-10-22: the property record full screen on the phone («این باید تمام صفحه باشه»), the same way as the lead record (sales.css) */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26):not(#dn27):not(#dn28) #prop-modal-overlay > #prop-detail-modal{
    width: 100vw !important; max-width: none !important;
    height: var(--app-vh, 100dvh) !important; max-height: none !important;
    margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    transform-origin: center !important; backface-visibility: visible;
    animation: dnmRecordIn .22s ease both !important;
  }
  html.ui-2026 body:not(#dn26):not(#dn27):not(#dn28) #prop-modal-overlay > #prop-detail-modal.closing{ animation: none !important; }
  html.ui-2026 body:not(#dn26) #prop-modal-overlay{
    padding: 0 !important; inset: 0 !important; perspective: none !important; animation: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: var(--surface) !important;
  }
  @media (prefers-reduced-motion: reduce){ html.ui-2026 body:not(#dn26):not(#dn27):not(#dn28) #prop-modal-overlay > #prop-detail-modal{ animation: none !important; } }
}

/* the photo viewer: sideways swipes are the page's own (properties.js), the next photo fades in */
#property-album-overlay .prp-album-stage{ touch-action: pan-y; user-select: none; -webkit-user-select: none; }
#property-album-overlay .prp-album-stage img{ -webkit-user-drag: none; animation: dnmAlbumIn .18s ease both; }
@keyframes dnmAlbumIn{ from{ opacity: .35; } to{ opacity: 1; } }

/* Owner 2026-10-22 («دکمه‌های فیلتر، X رو ببر کنارش تا کوچک‌تر بشن… بلند هم نباشن»): the applied-filter chips on Search /
   Projects are short one-line pills - the × sits right after the word (the phone's 44px button minimum had made it a block
   of its own in the chip's corner), "Reset all" the same height. */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) #page-search .afc{
    display: inline-flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important;
    height: 30px !important; min-height: 0 !important; padding: 0 6px 0 11px !important; white-space: nowrap; font-size: 12px; line-height: 1;
  }
  html.ui-2026 body:not(#dn26) #page-search .afc > button{
    width: 20px !important; height: 20px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
    flex: 0 0 20px; border-radius: 50% !important; display: inline-flex !important; align-items: center; justify-content: center; position: static !important;
  }
  html.ui-2026 body:not(#dn26) #page-search .afc.afc-reset{ padding: 0 12px !important; }
  html.ui-2026 body:not(#dn26) #page-search .afc > b{ font-weight: 700; }
}
@media (max-width: 900px){
  /* All / Unseen / Viewed / Saved: the same short pills as the applied filters */
  html.ui-2026 body:not(#dn26) .dwf-viewchips{ display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; }
  html.ui-2026 body:not(#dn26) .dwf-viewchips .dwf-chip{ height: 32px !important; min-height: 0 !important; padding: 0 12px !important; font-size: 12.5px !important; white-space: nowrap; flex: 0 0 auto; display: inline-flex; align-items: center; }
}
@media (max-width: 900px){
  /* the record's tabs: one row, compact, sideways scroll without a bar when a language needs more room */
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-record-tabs{ display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-record-tab{ flex: 0 0 auto; padding: 0 10px !important; white-space: nowrap; font-size: 14px; }
}

/* the no-photo tile (app.js _dnSeedTile, every width): the owner's dandelion icon, centred on a quiet tile, the same
   size as a photo frame (owner 2026-10-22: watermark off; where there is no photo, his icon) */
.dn-seed-tile.dn-nophoto-tile{ background: var(--surface-muted, #f1f1ef) !important; }
/* App TestFlight feedback 2026-10-23 (item 10): the icon is square and stays whole and centred in any frame - 42% x 42% of a
   wide 356 x 150 card frame plus the card photo's object-fit:cover cut its top and bottom off ("نصفه") */
.dn-seed-tile.dn-nophoto-tile{ display: flex !important; align-items: center !important; justify-content: center !important; }
.dn-seed-tile.dn-nophoto-tile img{ height: 56% !important; width: auto !important; aspect-ratio: 1 / 1; max-width: 120px; max-height: 120px;
  object-fit: contain !important; position: static !important; inset: auto !important; margin: auto !important; filter: none !important; opacity: .9; }
body.dark .dn-seed-tile.dn-nophoto-tile{ background: #232323 !important; }
/* "Similar" - the closest names after the real hits (every width) */
#page-properties .prp-similar-head{ grid-column: 1 / -1; margin: 6px 0 -2px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-img:has(> .dn-seed-tile) .dnm-nophoto{ display: none !important; }   /* app.js now draws the same icon */
}

/* Owner 2026-10-22 («اینا رو adjust کن»): the developer panel on the phone - the logo (72px, rounded) beside the details,
   "Change logo" and "Remove" as two small round icons on the logo's corners (their words stay as the name), Edit / Delete
   as round icons at the end of the stats row. */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) .dev-panel-hero{ display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; }
  html.ui-2026 body:not(#dn26) .dev-panel-hero > .dev-logo-box{ position: relative; flex: 0 0 72px; width: 72px !important; height: 72px !important; margin: 0 !important; border-radius: 16px; }
  html.ui-2026 body:not(#dn26) .dev-panel-hero > .dev-logo-box :is(.dev-panel-logo, .dev-panel-initials){ width: 72px !important; height: 72px !important; border-radius: 16px; object-fit: contain; }
  html.ui-2026 body:not(#dn26) .dev-panel-hero .dev-panel-details{ flex: 1 1 auto; min-width: 0; }
  html.ui-2026 body:not(#dn26) .dev-logo-box .dev-logo-acts{ position: static !important; margin: 0 !important; }
  html.ui-2026 body:not(#dn26) .dev-logo-box .dev-logo-btn{
    position: absolute !important; bottom: -6px; inset-inline-end: -6px; width: 28px !important; height: 28px !important; min-height: 0 !important; min-width: 0 !important;
    padding: 0 !important; margin: 0 !important; border-radius: 50% !important; font-size: 0 !important; color: var(--text);
    background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: 0 1px 4px rgba(0,0,0,.12); display: grid !important; place-items: center;
  }
  html.ui-2026 body:not(#dn26) .dev-logo-box .dev-logo-btn::before{
    content: ''; width: 14px; height: 14px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html.ui-2026 body:not(#dn26) .dev-logo-box .dev-logo-btn.is-quiet{ top: -6px; bottom: auto; color: var(--danger, #b42318); }
  html.ui-2026 body:not(#dn26) .dev-logo-box .dev-logo-btn.is-quiet::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  }
  html.ui-2026 body:not(#dn26) .dev-panel-desc{ font-size: 14px; line-height: 1.6; color: var(--text); }
  html.ui-2026 body:not(#dn26) .dev-panel-acts{ display: flex !important; justify-content: flex-end; gap: 8px; margin-top: -58px; margin-bottom: 14px; position: relative; }
  html.ui-2026 body:not(#dn26) .dev-panel-acts .dev-act-btn{ width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; font-size: 0 !important; display: inline-grid !important; place-items: center; background: var(--dnm-soft) !important; border: 0 !important; }
  html.ui-2026 body:not(#dn26) .dev-panel-acts .dev-act-btn svg{ width: 18px !important; height: 18px !important; }
  html.ui-2026 body:not(#dn26) .dev-panel-acts .dev-act-del{ color: var(--danger, #b42318) !important; }
}

/* Listing images (owner 2026-10-22, every width): the help line and "No pending changes" open from a small (?) beside the
   title; "Remove all images" is a three-bin icon (it still asks first) */
.prp-gallery-head .prp-help-btn{ display: inline-grid; place-items: center; width: 22px; height: 22px; min-height: 0; margin-inline-start: 8px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 700; line-height: 1; vertical-align: middle; cursor: pointer; }
.prp-gallery-head:not(.show-help) :is(.prp-tab-help, .prp-change-summary.is-clean){ display: none !important; }
.prp-gallery-head .prp-delete-all-ic{ display: inline-grid; place-items: center; width: 52px; height: 40px; min-height: 0; padding: 0; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--danger, #b42318); cursor: pointer; }
.prp-gallery-head .prp-delete-all-ic svg{ width: 34px; height: 18px; }

/* Owner 2026-10-22: the property record on the phone - icon tabs (equal parts, the count a small badge), an icon-only
   bottom bar, and the Listing images head on one row: title, (?), the three-bin icon at the end */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-record-tabs{ display: flex; overflow: hidden !important; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-record-tab[data-dnm-ic]{ flex: 1 1 0 !important; min-width: 0; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 46px; position: relative; color: var(--text-muted); }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-record-tab[data-dnm-ic].is-on{ color: var(--text); }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-record-tab[data-dnm-ic] svg{ width: 20px; height: 20px; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-record-tab .dnm-tab-n{ font-size: 11px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--dnm-soft); color: var(--text); line-height: 16px; text-align: center; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-mbar .lm-mbar-btn > span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-mbar .lm-mbar-btn{ min-height: 52px; justify-content: center; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-mbar .lm-mbar-btn svg{ width: 22px; height: 22px; }
  /* Listing images head: one row */
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-gallery-head{ display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-gallery-head > div:first-child{ flex: 1 1 auto; min-width: 0; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-gallery-head .lm-section-title{ display: inline; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-gallery-head .prp-help-btn{ display: inline-grid !important; width: 22px !important; height: 22px !important; min-height: 0 !important; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-gallery-head-actions{ display: flex; gap: 8px; flex: 0 0 auto; margin: 0 !important; width: auto !important; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-gallery-head .prp-delete-all-ic{ width: 52px !important; height: 40px !important; min-height: 0 !important; flex: 0 0 auto; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-gallery-head:is(.show-help) > div:first-child{ flex-basis: 100%; }
}

/* Owner 2026-10-22 («اسم property یه خط بیارش پایین، خیلی چسبیده به سقف»): the full-screen records keep their head clear
   of the status bar / notch - the safe area plus a line of air above the name (property and lead records alike) */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26):not(#dn27):not(#dn28) :is(#prop-modal-overlay > #prop-detail-modal, #lead-modal-overlay > #lead-modal) > .lm-header,
  html.ui-2026 body:not(#dn26):not(#dn27):not(#dn28) :is(#prop-modal-overlay > #prop-detail-modal, #lead-modal-overlay > #lead-modal) .lm-header:first-child{
    padding-top: calc(var(--dn-safe-top, env(safe-area-inset-top, 0px)) + 30px) !important;
  }
}

/* ======================================================================================================================
   Phone review 2026-10-22 (owner-style pass at 390px), properties area. Phone only (≤900px); the matching behaviour is
   the "review 2026-10-22" block at the end of properties.js.
   ====================================================================================================================== */
@media (max-width: 900px){
  /* ---- Listings: one magnifier (the field's own search button stays), a short placeholder (properties.js) */
  html.ui-2026 body:not(#dn26) #page-properties .prp-search.crm-sq > .prp-search-ic{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-properties .prp-search.crm-sq > input{ padding-inline-start: 2px !important; }
  /* the card: the price on one line (8 digits fit), the agent's initials inside their circle, no extra people glyph,
     agent · date · Rent/Sell on one line with the chip at the end (Persian too) */
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-cells .prp-cell > b{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(13px, 3.9vw, 16px); }
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-foot{ display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-foot > span:first-child{
    display: block !important; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 24px;
  }
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-foot > span:first-child > svg{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-foot > span:first-child > .agent-inline-avatar{
    display: inline-grid !important; vertical-align: middle; width: 24px !important; height: 24px !important; margin-inline-end: 6px; font-size: 10px !important; line-height: 1; overflow: hidden;
  }
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-foot > span:first-child > .agent-inline-avatar > span{ font-size: 10px !important; line-height: 1; }
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-foot > .prp-card-created{ flex: 0 0 auto; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-foot > .prp-card-deal{ flex: 0 0 auto; margin-inline-start: auto; white-space: nowrap; }
  /* a photo that does not load: the dandelion mark in the same box (properties.js swaps it in) */
  html.ui-2026 body:not(#dn26) #page-properties .prp-card-img.dnm-img-failed::before{ display: none !important; }
  /* the pager on one row: « ‹ 1 / 3 › » as round 44px buttons (icons, properties.js) and the rows choice; the range
     ("1–10 of 26") and the "Rows per page" words go - the count is already above the list */
  html.ui-2026 body:not(#dn26) #page-properties .prp-pager{ display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: center; gap: 6px; height: auto !important; padding: 8px 0 4px; }
  html.ui-2026 body:not(#dn26) #page-properties .prp-pager > .prp-pg-range,
  html.ui-2026 body:not(#dn26) #page-properties .prp-pager .prp-pg-per > span{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-properties .prp-pager > .prp-pg-btn{
    flex: 0 0 44px; width: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: var(--dnm-soft) !important; color: var(--text); display: inline-grid !important; place-items: center;
  }
  html.ui-2026 body:not(#dn26) #page-properties .prp-pager > .prp-pg-btn:disabled{ opacity: .35; }
  html.ui-2026 body:not(#dn26) #page-properties .prp-pager > .prp-pg-btn svg{ width: 18px; height: 18px; }
  html.ui-2026[dir="rtl"] body:not(#dn26) #page-properties .prp-pager > .prp-pg-btn svg{ transform: scaleX(-1); }
  html.ui-2026 body:not(#dn26) #page-properties .prp-pager > .prp-pg-now{ flex: 0 0 auto; min-width: 44px; text-align: center; font-weight: 600; }
  html.ui-2026 body:not(#dn26) #page-properties .prp-pager > .prp-pg-per{ flex: 0 0 auto; margin: 0 !important; margin-inline-start: 4px !important; }
  html.ui-2026 body:not(#dn26) #page-properties .prp-pager > .prp-pg-per > select{ height: 44px; min-width: 64px; padding-inline: 12px 28px !important; border-radius: var(--dnm-pill); }

  /* ---- Listings Filters: the side drawer (properties.js) - choices as chips, the agent from photos + names */
  html.ui-2026 body:not(#dn26) .dnm-prp-fset{ display: flex; flex-direction: column; gap: 10px; }
  html.ui-2026 body:not(#dn26) .dnm-prp-fset > .dnm-drawer-label{ margin: 8px 0 -2px; }
  html.ui-2026 body:not(#dn26) .dnm-prp-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
  html.ui-2026 body:not(#dn26) .dnm-prp-chip{
    flex: 0 0 auto; min-height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--dnm-pill); background: var(--surface);
    color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html.ui-2026 body:not(#dn26) .dnm-prp-chip.is-on{ background: var(--text); border-color: var(--text); color: var(--surface); }
  html.ui-2026 body:not(#dn26) .dnm-prp-agents .dc-admin-option-avatar{
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    background: var(--dnm-soft); color: var(--text); font-size: 13px; font-weight: 700;
  }
  html.ui-2026 body:not(#dn26) .dnm-prp-agents .dc-admin-option-avatar img{ width: 100%; height: 100%; object-fit: cover; }
  html.ui-2026 body:not(#dn26) .dnm-prp-agents .dc-admin-option-avatar svg{ width: 18px; height: 18px; }
  html.ui-2026 body:not(#dn26) .dnm-prp-agents .dnm-team-row > span:last-child{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the price slider: the thumbs sit on the track (the phone's 44px input minimum had made the range box taller than its track) */
  html.ui-2026 body:not(#dn26) :is(.dnm-prp-fset, #srch-filters, #fpp-host) .crm-pricebar{ padding: 4px 2px 0 !important; }
  html.ui-2026 body:not(#dn26) :is(.dnm-prp-fset, #srch-filters, #fpp-host) .crm-dual{ height: 26px !important; }
  html.ui-2026 body:not(#dn26) :is(.dnm-prp-fset, #srch-filters, #fpp-host) .crm-dual input[type=range]{
    height: 26px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; top: 0 !important;
  }

  /* ---- Projects / Search: the desktop "AI Property Assistant" block goes (the round ✦ in the head opens the same sheet) */
  html.ui-2026 body:not(#dn26) #page-search #srch-assistant{ display: none !important; }
  /* the count line is one line (properties.js keeps only the total), the PDF tray a round icon with its count */
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead{ grid-template-areas: "lbl lbl lbl pdf" "search ai filter sort" !important; }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .pf-mainhead-t > #srch-count-lbl{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .topChipBtn.pdf{
    position: relative; width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important; min-height: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 50% !important; background: var(--dnm-soft) !important; font-size: 0 !important; display: inline-grid !important; place-items: center; justify-self: center !important;
  }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .topChipBtn.pdf > svg{ width: 20px; height: 20px; }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .topChipBtn.pdf > .badge{
    position: absolute; top: -2px; inset-inline-end: -2px; min-width: 18px; height: 18px; padding: 0 5px !important; font-size: 10.5px !important; line-height: 18px; border-radius: 9px;
  }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .topChipBtn.pdf > .badge:is(:empty, [data-zero]){ display: none; }
  /* "Partial results … Load more" spans the gutter like the cards */
  html.ui-2026 body:not(#dn26) #page-search .srch-statusbar > .srch-status{ flex: 1 1 auto; width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 12px; }
  /* The toolbar's Other agencies | Mine switch (while a portal chip is in the search) and Show inactive (N) (while our own rows can be inactive)
     share their own row under the search field; sort and List / Cards are not on the phone (the Sort button opens its drawer, the phone lists
     cards only). The legend ("Other agencies") sits beside the count. The market's listings are cards in the same 1-column grid, their source
     tag highlighted by ui.css when our own rows are in the list too, and a tap on one opens the listing (properties.js) */
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead{ grid-template-areas: "lbl lbl lbl pdf" "search ai filter sort" "checks checks checks checks" !important; }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .srch-checks{ grid-area: checks; justify-self: start; flex-wrap: wrap; gap: 0 18px; }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .srch-checks > .pf-check{ min-height: 36px; padding: 0 2px; gap: 10px; font-size: 13px; }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .srch-checks > [hidden]{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .srch-checks input{ width: 20px; height: 20px; margin: 0; }
  html.ui-2026 body:not(#dn26) #page-search .pf-mainhead > .srch-tools{ display: none !important; }
  /* the Filters and Ask AI sheets: the same side drawer as Sort (full height, a round ×) */
  html.ui-2026 body:not(#dn26) #srch-sheet.srch-sheet-ov{ align-items: stretch !important; justify-content: flex-end !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html.ui-2026 body:not(#dn26) #srch-sheet > .srch-sheet{
    position: fixed !important; top: 0 !important; bottom: 0 !important; inset-inline-end: 0 !important; inset-inline-start: auto !important; left: auto; right: auto;
    width: min(86vw, 360px) !important; max-width: none !important; height: 100% !important; max-height: none !important; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: -12px 0 40px rgba(0,0,0,.18) !important;
    padding-top: var(--dn-safe-top, 0px); padding-bottom: var(--dn-safe-bottom, 0px); animation: dnmSheetSide .26s cubic-bezier(.2,.8,.2,1) both !important;
  }
  html.ui-2026[dir="rtl"] body:not(#dn26) #srch-sheet > .srch-sheet{ right: auto; box-shadow: 12px 0 40px rgba(0,0,0,.18) !important; animation-name: dnmSheetSideRtl !important; }
  html.ui-2026 body:not(#dn26) #srch-sheet .srch-sheet-head{ padding: 14px var(--dnm-gutter) 10px !important; border-bottom: 0 !important; align-items: center; }
  html.ui-2026 body:not(#dn26) #srch-sheet .srch-sheet-head > b{ flex: 1 1 auto; font-size: 17px; }
  html.ui-2026 body:not(#dn26) #srch-sheet .srch-sheet-x{
    width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: var(--dnm-soft) !important; color: var(--text); display: inline-grid !important; place-items: center; flex: 0 0 auto;
  }
  html.ui-2026 body:not(#dn26) #srch-sheet .srch-sheet-x svg{ width: 18px; height: 18px; }
  html.ui-2026 body:not(#dn26) #srch-sheet .srch-sheet-body{ flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px var(--dnm-gutter) 16px !important; }
  html.ui-2026 body:not(#dn26) #srch-sheet .srch-sheet-foot{ padding: 10px var(--dnm-gutter) 14px !important; gap: 8px; }
  html.ui-2026 body:not(#dn26) #srch-sheet .srch-sheet-foot .btn{ flex: 1 1 0; height: 44px; border-radius: var(--dnm-pill); }
  html.ui-2026 body:not(#dn26) #srch-sheet .srch-sheet-body > .dtdel-note{ display: none !important; }   /* the Ask AI explanation line */
  html.ui-2026 body:not(#dn26) #srch-sheet .srch-ai-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
  /* inside Filters: the source chips at their own width, straight row lines */
  html.ui-2026 body:not(#dn26) #srch-filters .srch-srcsel{ flex-wrap: wrap; gap: 8px; }
  html.ui-2026 body:not(#dn26) #srch-filters .srch-srcsel > .srch-src-btn{ flex: 0 0 auto !important; width: auto !important; min-height: 40px; height: 40px; }
  html.ui-2026 body:not(#dn26) #srch-filters details.filter-section{ border-radius: 0 !important; }
  html.ui-2026 body:not(#dn26) #srch-filters details.filter-section > summary{ padding-inline: 0 !important; }

  /* ---- the project record: no frame, the 16px gutter, the × a round 44px button in the top corner, PDF an icon */
  html.ui-2026 body:not(#dn26) #proj-detail-overlay > .proj-sheet{ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  html.ui-2026 body:not(#dn26) #proj-detail-overlay .proj-head{ position: sticky; padding: calc(var(--dn-safe-top, 0px) + 12px) var(--dnm-gutter) 12px !important; }
  html.ui-2026 body:not(#dn26) #proj-detail-overlay .proj-head-copy{ padding-inline-end: 56px; min-width: 0; }
  html.ui-2026 body:not(#dn26) #proj-detail-overlay .proj-body{ padding-inline: var(--dnm-gutter) !important; }
  html.ui-2026 body:not(#dn26) #proj-detail-overlay .proj-close{
    position: absolute !important; top: calc(var(--dn-safe-top, 0px) + 12px) !important; inset-inline-end: var(--dnm-gutter) !important; left: auto; right: auto;
    width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; border-radius: 50% !important; background: var(--dnm-soft) !important; color: var(--text); display: inline-grid !important; place-items: center;
  }
  html.ui-2026[dir="rtl"] body:not(#dn26) #proj-detail-overlay .proj-close{ left: var(--dnm-gutter) !important; right: auto !important; }
  html.ui-2026:not([dir="rtl"]) body:not(#dn26) #proj-detail-overlay .proj-close{ right: var(--dnm-gutter) !important; left: auto !important; }
  html.ui-2026 body:not(#dn26) #proj-detail-overlay .proj-head-act{ flex-wrap: wrap; gap: 8px; align-items: center; }
  html.ui-2026 body:not(#dn26) #proj-detail-overlay .proj-head-act > .btn:not(.btn-primary){
    width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: var(--dnm-soft) !important; font-size: 0 !important; display: inline-grid !important; place-items: center; flex: 0 0 auto;
  }
  html.ui-2026 body:not(#dn26) #proj-detail-overlay .proj-head-act > .btn:not(.btn-primary) svg{ width: 18px; height: 18px; }
  html.ui-2026 body:not(#dn26) #proj-detail-overlay .proj-head-act > .btn-primary{ min-height: 44px; border-radius: var(--dnm-pill); padding-inline: 16px; }

  /* ---- Developers: an open developer is a full-screen record with a round back button (the "All developers" button) */
  html.ui-2026 body:not(#dn26) #page-developers .dev-page:has(#dev-switch-all:not([hidden])) > #dev-list-wrap{
    position: fixed; inset: 0; z-index: 140; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: var(--surface); padding: calc(var(--dn-safe-top, 0px) + 12px) var(--dnm-gutter) calc(var(--dn-safe-bottom, 0px) + 24px) !important;
  }
  html.ui-2026 body:not(#dn26) #page-developers .dev-page:has(#dev-switch-all:not([hidden])) .dev-new-btn{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-switch > .dev-switch-all:not([hidden]){
    width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important; min-height: 0 !important; padding: 0 !important; margin: 0 0 8px !important;
    border: 0 !important; border-radius: 50% !important; background: var(--dnm-soft) !important; color: var(--text); font-size: 0 !important; display: inline-grid !important; place-items: center;
  }
  html.ui-2026 body:not(#dn26) #page-developers .dev-switch > .dev-switch-all:not([hidden])::before{
    content: ''; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html.ui-2026[dir="rtl"] body:not(#dn26) #page-developers .dev-switch > .dev-switch-all:not([hidden])::before{ transform: scaleX(-1); }
  /* the developer's Projects: one 44px search field (no box inside a box), the sort select beside it; no-photo cards get the mark */
  html.ui-2026 body:not(#dn26) #page-developers .dev-pgrid-tools{ display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-project-search-wrap{
    flex: 1 1 0 !important; width: auto !important; min-width: 0; height: 44px; padding: 0 !important; padding-inline: 4px 12px !important; border: 1px solid var(--border) !important; border-radius: 12px !important;
    display: flex; align-items: center; gap: 0; background: var(--surface);
  }
  html.ui-2026 body:not(#dn26) #page-developers .dev-project-search-wrap > .crm-sq-go{ position: static !important; flex: 0 0 36px; width: 36px !important; height: 36px !important; min-height: 0 !important; padding: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-project-search-wrap > input{ flex: 1 1 auto; min-width: 0; height: 42px !important; min-height: 0 !important; border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-pgrid-sort{ flex: 0 0 auto; width: auto !important; max-width: 44%; height: 44px; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-pcard-media > .dnm-nophoto{ position: absolute; inset: 0; }
  html.ui-2026 body:not(#dn26) #page-developers .dev-pcard-media.dnm-has-mark > .dev-pcard-media-empty{ display: none !important; }
}

/* ---- the property record (phone): it mirrors in Persian / Arabic, ONE scroller - the title row stays on top, the price /
   area / agent strip scrolls away with the content, the tabs stay under the title; ‹ › and × are the same round 44px
   buttons on the top row; the bottom bar one row of plain icons on the 16px gutter */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) #prop-detail-modal :is(.lm-header, .lm-body, .lm-col){ direction: inherit !important; }
  html.ui-2026 body:not(#dn26):not(#dn27):not(#dn28):not(#dn29) #prop-modal-overlay > #prop-detail-modal{
    overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  html.ui-2026 body:not(#dn26) #prop-modal-overlay > #prop-detail-modal > .prp-rec > *{ flex-shrink: 0 !important; }
  html.ui-2026 body:not(#dn26):not(#dn27):not(#dn28):not(#dn29) #prop-modal-overlay > #prop-detail-modal .lm-body{
    flex: 1 0 auto !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important;
  }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-body .lm-section-title{ position: static !important; }
  /* the head: ‹ › at the start of the top row (the × at its end, fixed), then the name and its chips on the full width */
  html.ui-2026 body:not(#dn26):not(#dn27):not(#dn28):not(#dn29) #prop-modal-overlay > #prop-detail-modal .lm-header{
    position: sticky; top: 0; z-index: 8; background: var(--surface);
    display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 8px 8px !important;
    padding: calc(var(--dn-safe-top, env(safe-area-inset-top, 0px)) + 10px) var(--dnm-gutter) 10px !important;
  }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-header > .lm-avatar{ display: none !important; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-header > .lm-nav{ order: -1; flex: 0 0 auto; display: flex !important; gap: 8px; margin: 0 !important; min-height: 44px; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-header > .lm-nav::after{ content: none; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-header > .lm-nav + .lm-avatar + .lm-title,
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-header > .lm-title{ order: 0; flex: 1 1 100% !important; min-width: 0; width: 100%; margin: 0 !important; padding: 0 !important; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-header > .lm-nav > .lm-iconbtn,
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-header > .lm-close{
    width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 50% !important; background: var(--dnm-soft) !important; color: var(--text) !important; box-shadow: none !important; outline-offset: 2px;
    display: inline-grid !important; place-items: center; font-size: 20px !important; line-height: 1 !important;
  }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-header > .lm-nav > .lm-iconbtn:disabled{ opacity: .35; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-header > .lm-close{
    position: fixed !important; z-index: 9; top: calc(var(--dn-safe-top, env(safe-area-inset-top, 0px)) + 10px) !important; font-size: 16px !important;
  }
  html.ui-2026:not([dir="rtl"]) body:not(#dn26) #prop-detail-modal .lm-header > .lm-close{ right: var(--dnm-gutter) !important; left: auto !important; }
  html.ui-2026[dir="rtl"] body:not(#dn26) #prop-detail-modal .lm-header > .lm-close{ left: var(--dnm-gutter) !important; right: auto !important; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-title-line{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; padding: 0 !important; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-title-line > h2{ flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-title-line > .lm-badges{ flex-wrap: wrap; gap: 6px; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-header .lm-sub{ flex-wrap: wrap; row-gap: 4px; white-space: normal; }
  /* the tabs under the title while the content scrolls (the head's height comes from properties.js); square, on the gutter */
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-tabrow{ position: sticky; top: var(--dnm-prp-head, 0px); z-index: 7; background: var(--surface); margin: 0 !important; padding: 0 8px !important; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-tabrow > .prp-record-tabs{ margin-inline: 0 !important; width: 100% !important; scrollbar-width: none; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-record-tab{ border-radius: 0 !important; }
  /* the price / area / agent strip: one grid on the gutter, no side rules; price over two columns, the agent the whole row */
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-facts{
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 12px; padding: 12px var(--dnm-gutter) 14px !important; margin: 0 !important;
  }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-facts > .prp-fact{ border: 0 !important; padding: 0 !important; margin: 0 !important; min-width: 0; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-facts > .prp-fact.is-price{ grid-column: span 2; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-facts > .prp-fact:has(.has-agent-avatar, [data-agent-id]){ grid-column: 1 / -1; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-facts > .prp-fact > :is(.k, .v){ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the Overview: the hero photo the full width; the Agent tile goes (the strip above shows the agent with the photo);
     long values end in "…" */
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-ov-pics{ grid-auto-rows: auto !important; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-ov-pic{ height: 110px; position: relative; overflow: hidden; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-ov-pic.is-hero{ grid-row: auto !important; grid-column: 1 / -1; aspect-ratio: 4 / 3; height: auto !important; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-ov-pic.is-hero > img{ width: 100%; height: 100%; object-fit: cover; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-ov-pic > .dnm-nophoto{ position: absolute; inset: 0; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-ov-summary > .prp-ov-agent{ display: none !important; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-ov-summary > * > :is(b, .k){ display: block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-ov-summary > *{ min-width: 0; }
  /* the bottom bar: the 16px gutter, every icon on one line, no grey "selected" Share */
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-mbar{ position: sticky; bottom: 0; z-index: 8; padding-inline: var(--dnm-gutter) !important; align-items: center; }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-mbar .lm-mbar-btn,
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-mbar .lm-mbar-btn:is(.wa, .plh, .more){
    background: transparent !important; box-shadow: none !important; display: flex !important; flex-direction: column; align-items: center !important; justify-content: center !important;
    padding: 0 !important; min-height: 48px !important; height: 48px; gap: 0 !important;
  }
  html.ui-2026 body:not(#dn26) #prop-detail-modal .lm-mbar .lm-mbar-btn > svg{ margin: 0 !important; position: static !important; transform: none; }
  /* DLD permit: its fields get inner padding (the help paragraph already sits behind the (?)), a neutral placeholder (properties.js) */
  html.ui-2026 body:not(#dn26) #prop-detail-modal .prp-doc-input > :is(input, select){ padding-inline: 12px !important; }
}
@keyframes dnmSheetSide{ from{ transform: translateX(100%); } to{ transform: none; } }
@keyframes dnmSheetSideRtl{ from{ transform: translateX(-100%); } to{ transform: none; } }