/*
 * Listings explorer (E1 to E3).
 * Direction from the redesign plan, section 7: calmer and denser. Page
 * Token-based surfaces and borders, shadows only on overlays,
 * 13 px tables with tabular numerals, one blue accent, meaning colours only
 * for the energy ramp, inline SVG icons. Tokens come from design-system.css.
 */

.ex {
  --ex-rail: 232px;
  --ex-drawer: 440px;
  /* Side padding of the main column; the map cancels it to run edge to edge. */
  --ex-gutter: 20px;
  display: grid;
  grid-template-columns: var(--ex-rail) minmax(0, 1fr);
  gap: 0;
  /* --ex-top is where the explorer starts (explorer.js): the header plus any banner above it. */
  min-height: calc(100vh - var(--ex-top, var(--site-header-height)));
  background: var(--ex-bg);
  color: var(--ex-text);
  font-size: 14px;
  position: relative;
}
.ex :where(h1, h2, h3, h4, h5, h6) { color: var(--ex-text); }
.ex svg { width: 16px; height: 16px; flex: none; }
.ex .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ex-sp { flex: 1; }
.ex-muted { color: var(--ex-muted); }
.ex-link { background: none; border: 0; padding: 0; color: var(--ex-accent); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.ex-link:hover { text-decoration: underline; }
.ex .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Rail ----------------------------------------------------------------- */
.ex-rail {
  background: var(--ex-surface);
  border-right: 1px solid var(--ex-border);
  padding: 14px 16px 24px;
  position: sticky;
  top: var(--site-header-height);
  align-self: start;
  max-height: calc(100vh - var(--site-header-height));
  overflow-y: auto;
}
.ex-rail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ex-rail-head h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ex-muted); flex: 1; margin: 0; }
.ex .ex-rail-close { display: none; }
.ex-group { border: 0; padding: 10px 0; margin: 0; border-top: 1px solid var(--ex-border); min-width: 0; }
.ex-group legend { font-size: 13px; font-weight: 600; color: var(--ex-text); padding: 0; margin-bottom: 6px; float: left; width: 100%; }
.ex-group legend + * { clear: both; }
.ex-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-top: 6px; }
.ex-input {
  width: 100%; min-width: 0; height: 32px; padding: 0 8px; font: inherit; font-size: 13px;
  border: 1px solid var(--ex-border-strong); border-radius: 6px; background: var(--ex-surface); color: var(--ex-text);
  font-variant-numeric: tabular-nums;
}
.ex-input:focus { outline: none; border-color: var(--ex-accent-hover); box-shadow: 0 0 0 3px var(--ex-accent-soft); }
.ex-check { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; cursor: pointer; }
.ex-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--ex-accent); }
.ex-check span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-count { color: var(--ex-muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.ex-hint { font-size: 12px; color: var(--ex-muted); margin: 6px 0 0; }
.ex-energy { display: flex; gap: 4px; flex-wrap: wrap; }
.ex-energy-opt { cursor: pointer; }
.ex-energy-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ex .ex-energy-opt input + .en { opacity: .45; }
.ex .ex-energy-opt input:checked + .en { opacity: 1; box-shadow: 0 0 0 2px var(--ex-surface), 0 0 0 4px var(--ex-accent); }
.ex .ex-energy-opt input:focus-visible + .en { outline: 2px solid var(--ex-accent); outline-offset: 2px; }
.ex-apply { width: 100%; margin-top: 12px; min-height: 36px; padding: 8px 12px; font-size: 13px; }


/* Energy ramp (Danish label colours) */
.ex .en {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 4px;
  font-size: 12px; font-weight: 700; color: var(--ex-energy-text); line-height: 1;
}
.ex .en-A { background: var(--ex-energy-a); } .ex .en-B { background: var(--ex-energy-b); color: var(--ex-energy-dark-text); } .ex .en-C { background: var(--ex-energy-c); color: var(--ex-energy-dark-text); }
.ex .en-D { background: var(--ex-energy-d); color: var(--ex-energy-d-text); } .ex .en-E { background: var(--ex-energy-e); color: var(--ex-energy-e-text); } .ex .en-F { background: var(--ex-energy-f); color: var(--ex-energy-dark-text); } .ex .en-G { background: var(--ex-energy-g); }

/* Main ----------------------------------------------------------------- */
.ex-main { min-width: 0; padding: 12px var(--ex-gutter) 40px; }
.ex-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ex .ex-filters-btn { display: none; }
.ex-search {
  flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px;
  background: var(--ex-surface); border: 1px solid var(--ex-border-strong); border-radius: 8px; color: var(--ex-muted);
}
.ex-search:focus-within { border-color: var(--ex-accent-hover); box-shadow: 0 0 0 3px var(--ex-accent-soft); }
.ex-search input { flex: 1; min-width: 0; border: 0; outline: none; background: var(--ex-transparent); font: inherit; font-size: 14px; color: var(--ex-text); }
.ex-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ex-views { display: inline-flex; border: 1px solid var(--ex-border-strong); border-radius: 8px; overflow: hidden; background: var(--ex-surface); }
.ex-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  font-size: 13px; font-weight: 500; color: var(--ex-secondary-text); text-decoration: none; background: var(--ex-surface); border: 0; cursor: pointer; font-family: inherit;
}
.ex-views .ex-tab + .ex-tab { border-left: 1px solid var(--ex-border-strong); }
.ex-tab:hover { background: var(--ex-hover); text-decoration: none; color: var(--ex-text); }
.ex-tab.on { background: var(--ex-accent-soft); color: var(--ex-accent-text); }
.ex-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ex-muted); }
.ex-sort select {
  height: 34px; padding: 0 8px; font: inherit; font-size: 13px; border: 1px solid var(--ex-border-strong); border-radius: 8px;
  background: var(--ex-surface); color: var(--ex-text);
}
.ex-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ex-accent); color: var(--ex-on-accent); font-size: 11px; font-weight: 600; }
/* "Make these stars yours": a toolbar button that opens its actions, so the prompt costs no height. */
.ex-prompt { position: relative; flex: none; }
.ex-prompt-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 12px; list-style: none;
  border: 1px solid var(--ex-accent); border-radius: 8px; background: var(--ex-accent-soft); color: var(--ex-accent-text);
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none;
}
.ex-prompt-toggle::-webkit-details-marker { display: none; }
.ex-prompt-toggle:hover { border-color: var(--ex-accent-hover); }
.ex-prompt-toggle:focus-visible { outline: 2px solid var(--ex-accent); outline-offset: 2px; }
.ex .ex-prompt-chevron { width: 14px; height: 14px; transition: transform .15s; }
.ex-prompt[open] .ex-prompt-chevron { transform: rotate(180deg); }
.ex-prompt-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: min(380px, calc(100vw - 24px));
  padding: 14px 16px; border: 1px solid var(--ex-border); border-radius: 10px; background: var(--ex-surface);
  box-shadow: 0 12px 32px var(--ex-drawer-shadow);
}
.ex-prompt-panel p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--ex-secondary-text); }
.ex-prompt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-prompt-actions form { margin: 0; }

.ex-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.ex-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px 0 10px; border-radius: 13px;
  background: var(--ex-surface); border: 1px solid var(--ex-border-strong); color: var(--ex-text); font-size: 12px; text-decoration: none;
}
.ex-chip svg { width: 13px; height: 13px; color: var(--ex-muted); }
.ex-chip:hover { border-color: var(--ex-accent); text-decoration: none; }
.ex-chip-clear { margin-left: 4px; }

.ex-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin: 2px 0 8px; min-height: 22px; }
.ex-summary b { font-weight: 600; color: var(--ex-text); }
.ex-selection { color: var(--ex-text); }
.ex-selection a.dis { color: var(--ex-muted); pointer-events: none; }

.ex-notice { margin: 0 0 8px; padding: 10px 14px; background: var(--ex-surface); border: 1px solid var(--ex-border); border-left: 4px solid var(--ex-accent); border-radius: 8px; font-size: 13px; color: var(--ex-text); }
.ex-results { position: relative; }
.ex-results.is-loading { opacity: .55; transition: opacity .15s; }

/* Table ---------------------------------------------------------------- */
.ex-tablewrap { background: var(--ex-surface); border: 1px solid var(--ex-border); border-radius: 10px; overflow: auto; }
.ex-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ex-table th { position: sticky; top: 0; z-index: 1; background: var(--ex-hover); color: var(--ex-muted); font-weight: 600; font-size: 12px; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ex-border); white-space: nowrap; }
.ex-table td { padding: 6px 10px; border-bottom: 1px solid var(--ex-subtle); vertical-align: middle; }
.ex-table tbody tr:last-child td { border-bottom: 0; }
.ex-row { cursor: pointer; }
.ex-row:hover td { background: var(--ex-hover); }
.ex-row.is-open td { background: var(--ex-accent-soft); }
.ex-row.is-selected td { background: var(--ex-selected); }
.ex-row.is-hidden td { opacity: .6; }
.ex-c-star, .ex-c-sel, .ex-c-act { width: 32px; padding-left: 6px !important; padding-right: 6px !important; }
.ex-c-sel input { width: 15px; height: 15px; margin: 0; display: block; accent-color: var(--ex-accent); }
.ex-price { font-weight: 600; color: var(--ex-text); }
.ex-since { color: var(--ex-muted); }
.ex-addr { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ex-thumb { width: 44px; height: 33px; border-radius: 4px; object-fit: cover; background: var(--ex-subtle); flex: none; }
.ex-thumb-empty { background: repeating-linear-gradient(135deg, var(--ex-subtle) 0 6px, var(--ex-hover) 6px 12px); }
.ex-addr-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ex-addr-main { font-weight: 600; color: var(--ex-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.ex-addr-main:hover { color: var(--ex-accent); text-decoration: none; }
.ex-locality { font-size: 12px; color: var(--ex-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ex-star, .ex-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 6px;
  background: var(--ex-transparent); color: var(--ex-quiet); cursor: pointer; padding: 0;
}
.ex-star:hover, .ex-iconbtn:hover { background: var(--ex-subtle); color: var(--ex-secondary-text); }
.ex-star.on { color: var(--ex-star); }
.ex-star.on svg path { fill: var(--ex-icon-fill); }
.ex-star-form, .ex-hide-form { display: inline-flex; margin: 0; }
.ex-hide { opacity: 0; transition: opacity .1s; }
.ex-row:hover .ex-hide, .ex-row:focus-within .ex-hide, .ex-card:hover .ex-hide, .ex-card:focus-within .ex-hide, .ex-row.is-hidden .ex-hide, .ex-drawer .ex-hide { opacity: 1; }
@media (hover: none) { .ex-hide { opacity: 1; } }

/* Cards ---------------------------------------------------------------- */
.ex-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ex-card { background: var(--ex-surface); border: 1px solid var(--ex-border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; cursor: pointer; }
.ex-card:hover { border-color: var(--ex-border-strong); }
.ex-card.is-open, .ex-card.is-selected { border-color: var(--ex-accent); box-shadow: 0 0 0 1px var(--ex-accent); }
.ex-card.is-hidden { opacity: .6; }
.ex-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--ex-subtle); }
.ex-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ex-quiet); font-size: 12px; background: repeating-linear-gradient(135deg, var(--ex-subtle) 0 8px, var(--ex-hover) 8px 16px); }
.ex-card-star { position: absolute; top: 6px; right: 6px; }
.ex-card-star .ex-star { background: var(--ex-media-overlay); }
.ex-card-select { position: absolute; top: 8px; left: 8px; display: inline-flex; padding: 5px; background: var(--ex-media-overlay); border-radius: 6px; cursor: pointer; }
.ex-card-select input { width: 15px; height: 15px; margin: 0; display: block; accent-color: var(--ex-accent); }
.ex-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ex-card-price { font-size: 16px; font-weight: 700; color: var(--ex-text); font-variant-numeric: tabular-nums; }
.ex-card-addr { font-weight: 600; color: var(--ex-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ex-card-addr:hover { color: var(--ex-accent); text-decoration: none; }
.ex-card-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ex-secondary-text); margin-top: 4px; }
.ex-card-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; }
.ex-card-hide { margin-left: auto; }
/* Sold (sale agreed): inverted slate everywhere, so a sold home never reads as for sale. */
.ex-sold { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--ex-secondary-text); color: var(--ex-surface); font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; vertical-align: middle; }
.ex-card-body > .ex-sold { margin-bottom: 4px; }
.ex-sold-note { margin: 0 16px 12px; padding: 8px 12px; border-left: 3px solid var(--ex-secondary-text); border-radius: 6px; background: var(--ex-subtle); color: var(--ex-secondary-text); font-size: 13px; }
.ex-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--ex-subtle); color: var(--ex-secondary-text); font-size: 12px; }

/* Pager, teaser, empty ------------------------------------------------- */
.ex-pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; }
.ex-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px; color: var(--ex-secondary-text); text-decoration: none; font-variant-numeric: tabular-nums; }
.ex-pg:hover { background: var(--ex-surface); text-decoration: none; }
.ex-pg.on { background: var(--ex-accent); color: var(--ex-on-accent); font-weight: 600; }
.ex-pg.dis { color: var(--ex-border-strong); }
.ex-pg.gap { color: var(--ex-muted); }
.ex-teaser { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding: 16px 18px; background: var(--ex-surface); border: 1px solid var(--ex-border); border-left: 4px solid var(--ex-accent); border-radius: 10px; font-size: 14px; }
.ex-teaser-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ex-teaser .btn { min-height: 38px; padding: 8px 14px; font-size: 14px; }
.ex-empty { padding: 48px 20px; text-align: center; background: var(--ex-surface); border: 1px solid var(--ex-border); border-radius: 10px; }
.ex-empty h3 { font-size: 16px; margin-bottom: 6px; }
.ex-empty p { color: var(--ex-muted); margin-bottom: 14px; }

/* Explorer buttons stay on the design system's blue even while the legacy
   app.css (green .btn) is still loaded. */
.ex .btn.btn-primary { background: var(--ex-accent); color: var(--ex-on-accent); }
.ex .btn.btn-primary:hover { background: var(--ex-accent-hover); }

/* Drawer --------------------------------------------------------------- */
.ex-drawer {
  position: fixed; top: var(--site-header-height); right: 0; bottom: 0; width: var(--ex-drawer); max-width: 100vw; z-index: 45;
  background: var(--ex-surface); border-left: 1px solid var(--ex-border); box-shadow: -12px 0 32px var(--ex-drawer-shadow);
  overflow-y: auto; outline: none;
}
.ex-drawer-body { padding: 14px 20px 28px; font-size: 14px; }
.ex-drawer-nav { display: flex; align-items: center; gap: 2px; margin: 0 -6px 6px; }
.ex-drawer-title { font-size: 19px; font-weight: 600; margin: 0 0 2px; line-height: 1.25; }
.ex-drawer-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin: 12px 0; background: var(--ex-subtle); }
.ex-drawer-price { display: flex; align-items: baseline; gap: 10px; margin: 12px 0; font-size: 22px; font-variant-numeric: tabular-nums; }
.ex-drawer-price .ex-muted { font-size: 14px; }
.ex-portal-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; }
.ex-portal-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ex-border, #d8dee9); text-decoration: none; color: inherit; background: var(--ex-surface-2, rgba(0,0,0,.03)); }
.ex-portal-chip:hover { border-color: var(--ex-accent, #2563eb); }
.ex-portal-prices { margin: 0 0 12px; color: var(--ex-muted, #64748b); }
.ex-drawer-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ex-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--ex-border-strong); border-radius: 8px; background: var(--ex-surface); color: var(--ex-secondary-text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.ex-btn:hover { background: var(--ex-hover); }
.ex-btn.ex-star { width: auto; color: var(--ex-secondary-text); }
.ex-btn.ex-star.on { color: var(--ex-star-text); border-color: var(--ex-star-border); background: var(--ex-star-soft); }
.ex-drawer-select input { width: 14px; height: 14px; margin: 0; accent-color: var(--ex-accent); }
.ex-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; padding: 14px 0; border-top: 1px solid var(--ex-border); border-bottom: 1px solid var(--ex-border); }
.ex-facts dt { font-size: 12px; color: var(--ex-muted); margin-bottom: 1px; }
.ex-facts dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.ex-drawer-h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ex-muted); margin: 14px 0 6px; }
.ex-docs { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.ex-docs li { padding: 4px 0; }
.ex-drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.ex-drawer-foot .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.ex-drawer-loading { color: var(--ex-muted); padding: 24px 0; }
.ex-ico { width: 14px; height: 14px; }
.ex-backdrop { position: fixed; inset: 0; background: var(--ex-backdrop); z-index: 44; }
.ex.drawer-open .ex-main { padding-right: calc(var(--ex-drawer) + 20px); }

/* Responsive ----------------------------------------------------------- */
@media (max-width: 999px) {
  .ex.drawer-open .ex-main { padding-right: 20px; }
  .ex { grid-template-columns: minmax(0, 1fr); --ex-gutter: 12px; }
  .ex-main { padding: 10px var(--ex-gutter) 32px; }
  .ex-drawer { width: 100vw; top: 0; }
}
@media (max-width: 767px) {
  .ex-toolbar { gap: 8px; }
  .ex-search { flex-basis: 100%; order: -1; }
  /* Below the search, Filters and views: a full-width row whose actions open in place. */
  .ex-prompt { flex-basis: 100%; order: 1; }
  .ex-prompt-toggle { width: 100%; }
  .ex-prompt-toggle span { flex: 1; }
  .ex-prompt-panel { position: static; width: auto; margin-top: 8px; box-shadow: none; }
  .ex-sort span { display: none; }
  .ex-card-media { aspect-ratio: 16 / 10; }
  .ex-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ex-teaser .btn { flex: 1; }
}

.ex a[aria-disabled="true"] { color: var(--ex-muted); background: var(--ex-surface); opacity: .5; cursor: default; }

.ex { color-scheme: light; }
.ex .btn.btn-secondary { background: var(--ex-surface); color: var(--ex-text); border-color: var(--ex-border-strong); }
@media (prefers-color-scheme: dark) { .ex { color-scheme: dark; } }

/* The Filters control opens the same panel at every viewport width. */
.ex-js .ex { grid-template-columns: minmax(0, 1fr); }
.ex-js .ex .ex-filters-btn { display: inline-flex; border: 1px solid var(--ex-border-strong); border-radius: 8px; }
.ex-js .ex-rail {
  position: fixed; inset: 0 auto 0 0; width: min(360px, 90vw); height: 100dvh;
  max-height: 100dvh; z-index: 60; visibility: hidden;
  transform: translateX(-100%); transition: transform .2s ease, visibility .2s;
  overscroll-behavior: contain;
}
.ex-js .ex.rail-open .ex-rail { visibility: visible; transform: none; box-shadow: 12px 0 32px var(--ex-rail-shadow); }
.ex-js .ex .ex-rail-close { display: inline-flex; }
.ex.rail-open .ex-backdrop { z-index: 59; }
.ex [hidden] { display: none !important; }
.ex-table { min-width: 1240px; }
.ex-tablewrap { max-width: 100%; overscroll-behavior-x: contain; }
.ex-table-hint { color: var(--ex-muted); font-size: 12px; margin: 0 0 8px; }
.ex-table th a { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; color: inherit; text-decoration: none; }
.ex-table th a:hover, .ex-table th[aria-sort="ascending"] a, .ex-table th[aria-sort="descending"] a { color: var(--ex-accent-text); }
.ex-table th a:focus-visible, .ex-tablewrap:focus-visible { outline: 2px solid var(--ex-accent); outline-offset: -2px; }
.ex-table th.num { text-align: right; }
.ex-table .ex-c-addr { max-width: 300px; }

/* Map ------------------------------------------------------------------ */
/* The map is the Map view: it runs edge to edge from below the explorer controls to the bottom of the
   first screen. explorer.js records where it starts (--ex-map-top); until then the fallback assumes the
   header and one row of controls. Phones keep a strip below it for scrolling the page with one finger. */
.ex-map-panel { margin: 0 calc(-1 * var(--ex-gutter)); border-top: 1px solid var(--ex-border); border-bottom: 1px solid var(--ex-border); background: var(--ex-surface); }
.ex-map-frame { position: relative; --ex-map-strip: 0px; --ex-map-min: 360px; }
.ex-map {
  --ex-map-fit: calc(100vh - var(--ex-map-top, calc(var(--site-header-height) + 58px)) - var(--ex-map-strip));
  height: max(var(--ex-map-min), var(--ex-map-fit));
  width: 100%; z-index: 0; background: var(--ex-subtle); font: inherit;
}
@supports (height: 100svh) {
  /* The small viewport height: the map fits even while a phone shows its browser toolbars. */
  .ex-map { --ex-map-fit: calc(100svh - var(--ex-map-top, calc(var(--site-header-height) + 58px)) - var(--ex-map-strip)); }
}
/* Without JavaScript the map stays empty; the panel only says so and links to the Table view. */
html:not(.ex-js) .ex-map-frame { display: none; }
.ex-map-panel noscript .ex-map-status { padding: 12px var(--ex-gutter); }
/* Loading progress, the result summary and failures float on the map's top edge, beside the zoom
   control and clear of the list link opposite. */
.ex-map-state {
  position: absolute; top: 10px; left: 56px; z-index: 1;
  max-width: calc(100% - 66px - 320px);
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 38px; padding: 6px 14px;
  border: 1px solid var(--ex-border); border-radius: 19px; background: var(--ex-surface); color: var(--ex-text);
  box-shadow: 0 2px 8px var(--ex-drawer-shadow); font-size: 13px; line-height: 1.4;
}
.ex-map-status { margin: 0; }
.ex-map-state .ex-btn { height: 28px; }
/* Lists the listings in the visible area. It sits in the map's top corner, opposite the zoom control,
   so it is on screen whenever the top of the map is, whatever banners push the map down. */
.ex-map-list {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 66px); min-height: 38px; padding: 0 16px;
  border: 2px solid var(--ex-surface); border-radius: 20px; background: var(--ex-accent); color: var(--ex-on-accent);
  font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; box-shadow: 0 2px 8px var(--ex-drawer-shadow);
}
.ex-map-list span { overflow: hidden; text-overflow: ellipsis; }
.ex-map-list:hover { background: var(--ex-accent-hover); color: var(--ex-on-accent); text-decoration: none; }
.ex-map-list:focus-visible { outline: 2px solid var(--ex-accent); outline-offset: 2px; }
/* What describes the map without being needed on it: the count, missing positions and the stars used. */
.ex-map-meta { display: grid; gap: 4px; padding-top: 10px; font-size: 13px; }
.ex-map-meta .ex-summary { margin: 0; }
.ex-map-meta .ex-rating-context { margin: 0; }
.ex-map-missing { margin: 0; color: var(--ex-muted); }
/* The expand control lets the map fill the window; explorer-map.js makes the rest of the page inert meanwhile. */
.ex-map .ex-map-expand {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 2px; background: var(--ex-surface); color: var(--ex-text); cursor: pointer;
}
.ex-map .ex-map-expand:hover { background: var(--ex-hover); }
.ex-map .ex-map-expand:focus-visible { outline: 2px solid var(--ex-accent); outline-offset: 2px; }
.ex-map .ex-map-expand svg { width: 18px; height: 18px; }
html.ex-map-expanded, html.ex-map-expanded body { overflow: hidden; }
.ex .ex-map-frame.is-expanded { position: fixed; inset: 0; z-index: 70; background: var(--ex-subtle); }
.ex .ex-map-frame.is-expanded .ex-map { height: 100%; }
/* Sorting orders the Table and Cards lists; the map shows every match at once. */
.ex[data-active-view="map"] .ex-sort { display: none; }
.ex-map .leaflet-popup-content-wrapper, .ex-map .leaflet-popup-tip,
.ex-map .leaflet-bar a, .ex-map .leaflet-control-attribution { background: var(--ex-surface); color: var(--ex-text); }
.ex-map .leaflet-bar a { border-color: var(--ex-border); }
.ex-map .leaflet-control-attribution a, .ex-map-popup a { color: var(--ex-accent-text); }
.ex-map .leaflet-popup-close-button { color: var(--ex-muted); }
.ex-map-popup { min-width: 190px; line-height: 1.5; }
.ex-map-popup strong { display: block; font-size: 14px; }
.ex-map-popup p { margin: 6px 0; }
.ex-map-popup a, .ex-map-popup button { display: inline-block; margin-top: 6px; }
.ex-map .ex-map-price { width: max-content !important; min-width: 72px; padding: 4px 8px; height: auto !important; border: 2px solid var(--ex-surface); border-radius: 16px; background: var(--ex-accent); color: var(--ex-on-accent); font-weight: 600; font-size: 12px; white-space: nowrap; box-shadow: 0 2px 6px var(--ex-drawer-shadow); }
.ex-map .ex-map-price.is-sold { background: var(--ex-secondary-text); color: var(--ex-surface); }
.ex-map .ex-map-cluster { box-sizing: border-box; white-space: nowrap; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid var(--ex-accent); background: var(--ex-surface); color: var(--ex-accent-text); font-weight: 700; box-shadow: 0 2px 6px var(--ex-drawer-shadow); }
/* Shown over the map when a plain wheel turn scrolls the page instead of zooming. */
.ex-map .ex-map-hint { position: absolute; top: 50%; left: 50%; z-index: 1000; transform: translate(-50%, -50%); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 20px; background: var(--ex-text); color: var(--ex-surface); font-size: 14px; font-weight: 600; text-align: center; box-shadow: 0 2px 8px var(--ex-drawer-shadow); pointer-events: none; opacity: 0; transition: opacity .2s; }
.ex-map .ex-map-hint.is-visible { opacity: 1; }
/* Fractional zoom scales whole tiles; the transparent outline hides the hairline seams between them. */
.ex-map .leaflet-tile { outline: 1px solid var(--ex-transparent); }
@media (prefers-color-scheme: dark) {
  .ex-map .leaflet-tile-pane { filter: brightness(.75) saturate(.65); }
}
@media (max-width: 767px) {
  .ex-map-frame { --ex-map-strip: 64px; --ex-map-min: 300px; }
  /* A phone's map is too narrow for an overlay beside the list link: the status takes the strip below it. */
  .ex-map-state { position: static; max-width: none; min-height: 0; padding: 8px var(--ex-gutter); border: 0; border-radius: 0; box-shadow: none; }
  .ex .ex-map-frame.is-expanded .ex-map-state { position: absolute; top: auto; left: 10px; right: 10px; bottom: 30px; padding: 8px 12px; border: 1px solid var(--ex-border); border-radius: 12px; box-shadow: 0 2px 8px var(--ex-drawer-shadow); }
  .ex-sort { max-width: 100%; }
  .ex-sort select { max-width: 100%; }
  .ex-tab { padding: 0 10px; }
  .ex-rail { position: static; max-height: none; }
}
/* Getting-started launcher/panel sit bottom-right on desktop in getting-started.css. */