@import url("./vendor/leaflet/leaflet.css");

.housing-explorer [hidden] { display: none !important; }
.housing-map-card { min-width: 0; border-radius: 14px; position: relative; }
.housing-card-map-link { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; margin: 0; border: 0; background: transparent; color: var(--acc-ink); padding: 6px 14px 10px; cursor: pointer; font: inherit; font-size: 12px; }
.housing-card-map-link:hover { text-decoration: underline; }
.housing-map-unmapped { margin: 7px 0; }
.housing-map-panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; min-width: 0; align-self: start; overflow: hidden; }
.housing-map-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 60px; padding: 8px 12px 8px 16px; font-size: 14px; border-bottom: 1px solid var(--line); }
.housing-map-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.housing-map-title span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.housing-map-stage { position: relative; isolation: isolate; }
.housing-map-canvas { height: clamp(280px, calc(100dvh - 180px), 520px); background: var(--tile); z-index: 0; font-family: var(--font); }
.housing-map-canvas:focus-visible { outline: 3px solid var(--acc); outline-offset: -3px; }
.housing-map-actions { display: flex; align-items: center; flex-shrink: 0; gap: 6px; }
.housing-map-actions .button { font-size: 12px; min-height: 40px; padding: 8px 11px; border-radius: 8px; background: #fff; color: var(--ink); border: 1px solid #deded5; white-space: nowrap; }
.housing-map-actions [data-map-action="search"] { background: var(--green, #215b4e); color: white; border-color: transparent; }
.housing-map-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.housing-map-notice p { flex: 1 1 180px; font-size: 12px; color: var(--muted); margin: 0; }
.housing-map-footer { padding: 10px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 11px; color: var(--muted); position: relative; }
.housing-map-about { text-align: right; }
.housing-map-about summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: var(--acc-ink); }
.housing-map-about[open] { max-width: 290px; }
.housing-map-about p { text-align: left; margin: 8px 0 0; line-height: 1.5; }
.housing-pin { background: transparent; border: 0; }
.housing-pin .housing-pin-label { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 999px; border: 2px solid #fff; background: #215b4e; color: white; font-size: 13px; line-height: 1; font-weight: 750; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 6px #18312850; }
.housing-pin.map-selected .housing-pin-label, .housing-pin:focus-visible .housing-pin-label { background: #17352d; box-shadow: 0 0 0 3px #ffffff, 0 2px 10px #18312860; }
.housing-pin:focus-visible { outline: none; }
.housing-map-canvas .leaflet-control-attribution { color: #333; background: #fffe; font-size: 10px; white-space: nowrap; }
.housing-map-canvas .leaflet-control-attribution a { color: #145942; }
.housing-map-canvas .leaflet-control-zoom { border: 1px solid #d2d5cd; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px #18312820; }
.housing-map-canvas .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; color: #223b33; background: white; }
/* A sized HTML card above the map, not shrink-to-fit text in Leaflet's zero-width panes. */
.housing-preview { position: absolute; z-index: 3; width: 284px; max-width: calc(100% - 24px); max-height: calc(100% - 72px); overflow: auto; overscroll-behavior: contain; border-radius: 12px; background: #fff; box-shadow: 0 6px 22px #142d3533, 0 0 0 1px #18312815; color: var(--ink); }
.housing-preview-link { display: grid; grid-template-columns: 88px minmax(0, 1fr); min-height: 96px; color: inherit; text-decoration: none; }
.housing-preview-link:focus-visible { outline: 3px solid var(--acc); outline-offset: -3px; border-radius: 14px; }
.housing-preview-link:hover h3 { text-decoration: underline; }
.housing-preview-media { height: 100%; min-height: 96px; position: relative; background: #eeeee5; overflow: hidden; display: grid; place-items: center; }
.housing-preview-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.housing-preview-media .placeholder { font-size: 10px; padding: 8px; }
.housing-preview-media .band { position: absolute; bottom: 8px; left: 10px; top: auto; width: auto; padding: 4px 8px; border-radius: 5px; background: white; color: #17352d; font-size: 11px; }
.housing-preview-body { padding: 10px 32px 10px 12px; align-self: center; min-width: 0; }
.housing-preview-body strong { display: block; font-size: 19px; line-height: 1.2; font-weight: 750; }
.housing-preview-body h3 { font-size: 13px; line-height: 1.4; margin: 4px 0; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.housing-preview-body p { font-size: 11px; line-height: 1.4; margin: 0; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.housing-preview-close { position: absolute; top: 2px; right: 2px; z-index: 1; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; padding: 0; background: transparent; color: #183b31; font: inherit; font-size: 22px; cursor: pointer; }
.housing-preview-pager { display: flex; align-items: center; justify-content: space-between; padding: 5px 9px; border-top: 1px solid var(--line); font-size: 12px; }
.housing-preview-pager button { width: 40px; height: 36px; border-radius: 8px; border: 0; background: #f2f4ef; color: var(--ink); font: inherit; font-size: 18px; cursor: pointer; }
.housing-preview button:focus-visible, .housing-card-map-link:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.housing-explorer.map-open .housing-map-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.housing-explorer.map-open .housing-map-panel { position: sticky; top: 20px; }
.housing-explorer.map-open .rooms-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
/* Scope compact cards to the split view, preserving the shared browse design. */
.housing-explorer.map-open .housing-map-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; transition: border-color 120ms ease, box-shadow 120ms ease; }
.housing-explorer.map-open .housing-map-card.map-selected { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.housing-explorer.map-open .lcard { height: auto; }
.housing-explorer.map-open .lcard .photo { aspect-ratio: 1.5; border-radius: 0; }
.housing-explorer.map-open .lcard .photo img { aspect-ratio: auto; height: 100%; }
.housing-explorer.map-open .lcard-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 0; }
.housing-explorer.map-open .lcard-body h2 { font-size: 14px; margin: 0 0 3px; line-height: 1.35; }
.housing-explorer.map-open .lcard-price, .housing-explorer.map-open .lcard-rent { order: -1; font-size: 21px; line-height: 1.2; margin: 0 0 3px; }
.housing-explorer.map-open .lcard-price.unknown { font-size: 14px; }
.housing-explorer.map-open .lcard-place, .housing-explorer.map-open .lcard-meta { margin: 0; font-size: 12px; line-height: 1.5; }
.housing-explorer.map-open .housing-map-unmapped { margin: 8px 14px 12px; font-size: 11px; }
@media (max-width: 1000px) and (min-width: 801px) {
  .housing-explorer.map-open .housing-map-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .housing-explorer.map-open .rooms-list { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .housing-explorer.map-open .housing-map-layout { display: flex; flex-direction: column; gap: 24px; }
  .housing-explorer.map-open .housing-map-panel { width: 100%; position: static; }
  .housing-map-list { width: 100%; }
  .housing-map-canvas { height: 360px; }
  .housing-map-heading { padding: 8px 10px; font-size: 13px; }
  .housing-map-title { gap: 4px; }
  .housing-map-title span { font-size: 11px; }
  .housing-map-actions .button { min-height: 44px; padding-inline: 8px; font-size: 11px; }
  .housing-map-footer { padding: 10px 12px; }
  .housing-preview { width: calc(100% - 72px); max-width: 340px; max-height: calc(100% - 40px); }
  .housing-preview-link { grid-template-columns: 76px minmax(0, 1fr); min-height: 92px; }
  .housing-preview-media { min-height: 92px; }
  .housing-preview-body { padding: 10px 32px 10px 10px; }
  .housing-preview-body strong { font-size: 18px; }
  .housing-preview-body h3 { font-size: 12px; }
  .housing-preview-media .placeholder { padding: 8px; font-size: 10px; }
  .housing-preview-close { top: 2px; right: 2px; background: transparent; box-shadow: none; }
  .housing-explorer.map-open .rooms-list { gap: 12px; }
  .housing-explorer.map-open .lcard-body { padding: 10px 10px 0; }
  .housing-explorer.map-open .lcard-body h2 { font-size: 13px; }
  .housing-explorer.map-open .lcard-price, .housing-explorer.map-open .lcard-rent { font-size: 18px; }
  .housing-explorer.map-open .lcard-place, .housing-explorer.map-open .lcard-meta { font-size: 11px; }
  .housing-card-map-link { font-size: 11px; padding: 6px 10px 10px; min-height: 44px; }
  .housing-preview-close { width: 40px; height: 40px; }
  .housing-preview-pager button { width: 44px; height: 40px; }
}
/* Phones: the list comes first and the map waits behind the Map button in the browse bar.
   Wider screens open the map by themselves and show the button only while it is closed
   (a phone turned sideways after loading upright). */
.browse-bar > .map-toggle { margin-left: auto; gap: 6px; }
.browse-bar > .map-toggle[hidden] { display: none; }
@media (min-width: 801px) {
  .browse-bar > .map-toggle[aria-expanded="true"] { display: none; }
}
@media (max-width: 800px) {
  .housing-map-none { display: none; }
  .housing-explorer.map-open .housing-map-layout { gap: 16px; }
}
/* Beside the list, pointing at a card already marks its pin, so "View on map" stays out of
   sight for a mouse; a keyboard reaches it with Tab, and it shows while focused. Touch
   screens and the phone layout, where the map is above the list, always show it. */
@media (min-width: 801px) and (hover: hover) and (pointer: fine) {
  .housing-card-map-link:not(:focus-visible) { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}