/* Explore Galicia — map view. Palette inherited from site.css. */
.xp-wrap { position:relative; display:grid; grid-template-columns: 1fr 380px; height: calc(100vh - 64px); min-height:520px; }
.xp-panel { background:var(--surface); border-left:1px solid var(--line); overflow-y:auto; padding:1.1rem 1.15rem 3rem; }
.xp-map { position:relative; background:var(--ground); }
#map { position:absolute; inset:0; }

.xp-kicker { font-family:var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--granite); margin:0 0 .3rem; }
.xp-panel h1 { font-family:var(--serif); font-size:1.5rem; line-height:1.15; margin:0 0 .5rem; color:var(--ink); }
.xp-lede { font-size:.92rem; color:var(--ink-soft); margin:0 0 1rem; }

.xp-group { border-top:1px solid var(--line); padding-top:.85rem; margin-top:.85rem; }
.xp-group h2 { font-family:var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--granite); margin:0 0 .55rem; font-weight:600; }
.xp-chips { display:flex; flex-wrap:wrap; gap:.35rem; }
.xp-chip { font:inherit; font-size:.82rem; padding:.42rem .7rem; min-height:34px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--ink-soft); border-radius:100px; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; }
.xp-chip:hover { border-color:var(--euc); color:var(--ink); }
.xp-chip[aria-pressed="true"] { background:var(--pine); border-color:var(--pine); color:#fff; }
.xp-chip b { font-weight:600; opacity:.75; font-size:.74rem; }
.xp-chip[aria-pressed="true"] b { opacity:.9; }
.xp-chip[disabled] { opacity:.45; cursor:not-allowed; }

.xp-count { font-size:.85rem; color:var(--ink-soft); margin:.9rem 0 .2rem; }
.xp-count b { color:var(--ink); font-size:1.05rem; font-family:var(--serif); }

.xp-arealist { list-style:none; margin:.4rem 0 0; padding:0; }
.xp-arealist li { border-bottom:1px solid var(--line); }
.xp-arealist button { width:100%; text-align:left; background:none; border:0; font:inherit; padding:.6rem .2rem; min-height:44px;
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:.5rem; color:var(--ink); }
.xp-arealist button:hover { color:var(--pine); }
.xp-arealist .n { font-size:.78rem; color:var(--granite); font-variant-numeric:tabular-nums; }
.xp-arealist .gap { color:var(--gorse); font-size:.72rem; }

.xp-detail { position:absolute; top:0; left:0; bottom:0; width:min(420px, 92vw); background:var(--surface);
  border-right:1px solid var(--line); overflow-y:auto; padding:1.1rem 1.2rem 3rem; z-index:900;
  transform:translateX(-101%); transition:transform .25s ease; box-shadow:14px 0 40px rgba(22,39,30,.10); }
.xp-detail.open { transform:none; }
.xp-detail h2 { font-family:var(--serif); font-size:1.45rem; margin:.1rem 0 .1rem; color:var(--ink); }
.xp-detail .sub { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--granite); margin-bottom:.8rem; }
.xp-detail p { font-size:.92rem; line-height:1.62; color:var(--ink-soft); }
.xp-close { position:absolute; top:.6rem; right:.7rem; width:44px; height:44px; border:1px solid var(--line);
  background:var(--surface-2); border-radius:50%; cursor:pointer; color:var(--ink); font-size:1.2rem; line-height:1; }
.xp-stats { display:flex; gap:1.2rem; flex-wrap:wrap; margin:.7rem 0 1rem; padding:.7rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.xp-stats div { font-size:.78rem; color:var(--granite); }
.xp-stats b { display:block; font-family:var(--serif); font-size:1.2rem; color:var(--ink); font-weight:500; }
.xp-quote { border-left:3px solid var(--euc); padding-left:.9rem; }
.xp-src { font-size:.74rem; color:var(--granite); margin-top:.6rem; font-style:italic; }
.xp-gapnote { background:rgba(200,148,30,.10); border:1px solid rgba(200,148,30,.35); border-radius:var(--radius); padding:.75rem .85rem; font-size:.85rem; color:var(--ink-soft); }
.xp-gapnote b { color:var(--ink); }

.xp-cards { list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.7rem; }
.xp-card { display:grid; grid-template-columns:84px 1fr; gap:.7rem; border:1px solid var(--line); background:var(--surface-2);
  border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; min-height:44px; }
.xp-card:hover { border-color:var(--euc); }
.xp-card img { width:84px; height:84px; object-fit:cover; display:block; background:var(--ground); }
.xp-card .b { padding:.5rem .6rem .5rem 0; }
.xp-card .ttl { font-size:.84rem; line-height:1.3; color:var(--ink); display:block; margin-bottom:.2rem; }
.xp-card .pr { font-family:var(--serif); font-size:.95rem; color:var(--pine); }
.xp-card .sp { font-size:.74rem; color:var(--granite); display:block; margin-top:.1rem; }

.leaflet-container { font:inherit; background:var(--ground); }
.leaflet-popup-content-wrapper { border-radius:var(--radius); }
.leaflet-popup-content { margin:0; width:250px !important; }
.pop img { width:100%; height:130px; object-fit:cover; display:block; background:var(--ground); }
.pop .b { padding:.6rem .7rem .7rem; }
.pop .ttl { font-size:.86rem; line-height:1.32; color:var(--ink); display:block; margin-bottom:.25rem; }
.pop .pr { font-family:var(--serif); font-size:1.05rem; color:var(--pine); }
.pop .sp { font-size:.74rem; color:var(--granite); display:block; margin:.15rem 0 .5rem; }
.pop a.go { font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--pine); font-weight:600; text-decoration:none; }
.gg-pin { border-radius:50%; border:2px solid #fff; box-shadow:0 1px 5px rgba(22,39,30,.45); background-size:cover; background-position:center; background-color:var(--euc); }
.gg-cluster { background:var(--pine); color:#fff; border-radius:100px; border:2px solid #fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:.85rem; box-shadow:0 2px 8px rgba(22,39,30,.4); cursor:pointer; }
.gg-cluster { overflow:hidden; text-align:center; line-height:1.05; }
.gg-cluster span { padding:0 .1rem; }
.gg-cluster small { display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.04em; opacity:.85; }

.xp-hint { position:absolute; left:.7rem; bottom:1.6rem; z-index:800; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:.5rem .7rem; font-size:.76rem; color:var(--ink-soft); max-width:270px; }
.xp-findme { display:block; text-align:center; margin-top:1rem; }

@media (max-width: 900px) {
  .xp-wrap { grid-template-columns:1fr; grid-template-rows: 46vh auto; height:auto; }
  .xp-map { height:46vh; }
  .xp-panel { border-left:0; border-top:1px solid var(--line); height:auto; }
  .xp-detail { width:100%; top:auto; bottom:0; height:82vh; border-right:0; border-top:1px solid var(--line);
    transform:translateY(101%); border-radius:12px 12px 0 0; }
  .xp-detail.open { transform:none; }
}

.pr .tag, .xp-card .tag { display:inline-block; font-family:var(--sans); font-size:.62rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--granite); border:1px solid var(--line); border-radius:100px;
  padding:.1rem .42rem; margin-right:.35rem; vertical-align:.12em; background:var(--surface); }

/* Coarse pointers: every control reachable with a thumb (44px), per the mobile audit rule. */
@media (pointer: coarse) {
  .xp-chip { min-height:44px; padding:.6rem .85rem; }
  .xp-arealist button { min-height:48px; }
  .leaflet-bar a, .leaflet-control-zoom a,
  .leaflet-touch .leaflet-bar a, .leaflet-touch .leaflet-control-zoom a { width:44px; height:44px; line-height:44px; font-size:1.15rem; }
  .xp-card { min-height:64px; }
  .pop a.go { display:inline-block; padding:.55rem 0; min-height:44px; }
}

/* 16 Sept 2026: status badge on kept sold/reserved/withdrawn listings */
.xp-card{position:relative}.pop{position:relative}
.xp-badge{position:absolute;top:.5rem;left:.5rem;z-index:2;background:rgba(20,20,20,.82);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .5rem;border-radius:4px}

/* 17 Sept 2026: OpenStreetMap tiles in dark mode — a night filter on the tile pane only (markers untouched) */
.xp-night .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.88) saturate(.6); }
.xp-night .leaflet-control-attribution { background: rgba(10,16,13,.75); color: #b6c4bb; }
.xp-night .leaflet-control-attribution a { color: #cfe0d6; }

/* 17 Sept 2026: the cluster list popup (opens when homes sit on top of each other) */
.pop-list{display:flex;flex-direction:column;gap:.4rem;max-height:320px;overflow:auto;min-width:240px}
.pop-list .row{display:flex;gap:.6rem;align-items:center;text-decoration:none;color:inherit;padding:.3rem;border-radius:8px}
.pop-list .row:hover{background:rgba(127,187,159,.15)}
.pop-list .row img{width:56px;height:42px;object-fit:cover;border-radius:6px;flex:none}
.pop-list .row b{font-size:.82rem;line-height:1.2;display:block}
.pop-list .more{font-size:.8rem;opacity:.7;padding:.2rem .3rem}
.gg-cluster,.gg-pin{cursor:pointer}

/* 17 Sept 2026, 08:2x — Sophie: "i want the category youre on to light up". The selected chip was pine on the
   dark panel, which reads as the same grey-green as everything else. Selected = the site's button colour on that
   surface (pine in light, deep gold on dark), bold, with its count fully opaque and a soft halo. */
.xp-chip[aria-pressed="true"] { font-weight:600; color:#fff; background:var(--pine); border-color:var(--pine);
  box-shadow:0 0 0 3px rgba(39,74,59,.18), 0 6px 18px -8px rgba(39,74,59,.6); }
.xp-chip[aria-pressed="true"] b { opacity:1; }
[data-theme="dark"] .xp-chip[aria-pressed="true"] { background:var(--btn-dark, #C9A24A); border-color:var(--btn-dark, #C9A24A); color:var(--btn-dark-ink, #1C1403);
  box-shadow:0 0 0 3px rgba(201,162,74,.28), 0 6px 20px -8px rgba(201,162,74,.9); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .xp-chip[aria-pressed="true"] { background:var(--btn-dark, #C9A24A); border-color:var(--btn-dark, #C9A24A); color:var(--btn-dark-ink, #1C1403);
    box-shadow:0 0 0 3px rgba(201,162,74,.28), 0 6px 20px -8px rgba(201,162,74,.9); }
}
.xp-chip:hover:not([aria-pressed="true"]) { border-color:var(--btn-dark, #C9A24A); }