/* THE PLEASANT STREET PREVIEW. A phone gets the map on top and the list under it;
   a computer gets the list on the left and the map on the right. */
.psm { position: relative; z-index: 1; box-sizing: border-box; max-width: 1300px; margin: 0 auto; padding: 10px 20px 30px; }
/* Words keep the text width (820): the banner, the title and the search row; the list and map stay wide. */
.psm-banner, .psm-title, .psm-tools { box-sizing: border-box; max-width: 820px; margin-left: auto; margin-right: auto; }
.psm-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 0; margin-bottom: 16px; padding: 14px 22px;
               background: var(--white); border-radius: var(--r3); box-shadow: var(--e2); }
.psm-banner__text { flex: 1 1 260px; }
/* The second column: the counter over the button. */
.psm-banner__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.psm-banner__title { margin: 0 0 4px; font-family: var(--font-italic); font-size: 28px; line-height: 1.15; color: var(--ink); }
.psm-banner__line { margin: 0; font-size: 17px; line-height: 1.45; color: var(--green); }
.psm-banner__line b { color: var(--coral); }
.psm-banner__links { margin-top: 4px; }
.psm-banner__links a { font-weight: 700; color: var(--green); text-underline-offset: 4px; }
/* The counter: small, one number rolling slowly up to its count (map.js sets where it stops). */
.ps-count { display: grid; justify-items: center; gap: 6px; width: max-content; margin: 0; padding: 14px 18px;
            background: var(--white); border-radius: var(--r3); box-shadow: var(--e2); }
.ps-count__label { font-size: 14px; color: var(--ink-mute); }
.ps-count__row { display: flex; align-items: center; gap: 8px; }
.ps-count__digits { display: flex; }
.ps-count__d { width: .62em; height: 32px; overflow: hidden; font-size: 26px; font-weight: 700; line-height: 32px; text-align: center; color: var(--ink); }
.ps-count__d > span { display: block; transition: transform 4s cubic-bezier(.2, .7, .2, 1); }
.ps-count__d:nth-child(2) > span { transition-duration: 4.6s; }
.ps-count__d:nth-child(3) > span { transition-duration: 5.2s; }
.ps-count__of { font-size: 20px; font-weight: 700; color: var(--ink-mute); }
@media (prefers-reduced-motion: reduce) { .ps-count__d > span { transition: none; } }
.psm-title { font-family: var(--font-italic); font-weight: 400; font-size: 40px; line-height: 1.1; color: var(--ink); margin-top: 0; margin-bottom: 14px; text-align: center; }
.psm-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 0; margin-bottom: 14px; }
.psm-search { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.psm-search__label { font-size: 15px; font-weight: 700; color: var(--ink); }
.psm-search input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 16px; font: inherit; font-size: 17px; color: var(--ink);
                    background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-pill); outline: none; }
.psm-search input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--tint); }
#ps-area[hidden] { display: none; }
/* The button and the count line up with the 48px search box. */
.psm-tools > .btn { height: 48px; }
.psm-count { font-size: 15px; line-height: 48px; color: var(--ink-mute); }
.psm-split { display: flex; flex-direction: column-reverse; gap: 14px; }
/* isolation keeps Leaflet's layers (z-index 400+) inside the map, under the sticky header. */
.psm-map { isolation: isolate; height: 55svh; min-height: 320px; border-radius: var(--r2); box-shadow: var(--e1); }
.psm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
/* One home: its photo, name and place. The whole card opens the home's website. */
.ps-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--r2); box-shadow: var(--e1);
           overflow: hidden; text-decoration: none; color: var(--ink); }
.ps-card:hover { box-shadow: var(--e2); }
.ps-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }   /* the screenshots' own shape: nothing cropped */
.ps-card__name { padding: 10px 14px 0; font-size: 17px; font-weight: 700; color: var(--green); }
.ps-card__place { padding: 2px 14px 12px; font-size: 15px; color: var(--ink-mute); }
.ps-pop .ps-card { box-shadow: none; }
.ps-pop .ps-card__name, .ps-pop .ps-card__place { padding-left: 0; padding-right: 0; }
.leaflet-popup-content { margin: 10px 12px; }
.ps-none { grid-column: 1 / -1; margin: 10px 0; font-size: 17px; color: var(--ink); }
@media (min-width: 950px) {
  .psm-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
  /* The list scrolls beside the map, with a thin quiet bar instead of the grey one. */
  .psm-list { max-height: 75svh; overflow-y: auto; padding: 4px 10px 4px 4px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
              scrollbar-width: thin; scrollbar-color: var(--teal) transparent; }
  .psm-list::-webkit-scrollbar { width: 6px; }
  .psm-list::-webkit-scrollbar-track { background: transparent; }
  .psm-list::-webkit-scrollbar-thumb { background: var(--teal); border-radius: var(--r-pill); }
  .psm-map { position: sticky; top: 70px; height: 75svh; }
}
@media (max-width: 700px) { .psm-title { font-size: 32px; } .psm-banner { justify-content: center; text-align: center; } .psm-banner__side { width: 100%; } .psm-banner .btn { width: 100%; height: auto; min-height: 48px; padding: 10px 14px; white-space: normal; line-height: 1.3; } }