/* list_map.css (BUY-024).
 *
 * List cards (fields, density, groups, watch-outs, seen, actions), the empty list, map pins (price pills, seen, selected, hover),
 * detail-panel additions, and the "Show only" counts and Compare marks (BUY-026).
 * Use the theme variables from style.css :root for any colour that should
 * follow the theme.
 *
 * Owner: agent L. The containers (#list-panel, #detail-panel: position, size,
 * safe areas) are the shell's (shell.css); this file styles what is inside.
 * The amber of watch-outs and the pin rings are literal data colours, like the
 * match and value ramps; the daylight theme gets a darker amber at the end.
 */

/* ==========================================================================
   List: group headers
   ========================================================================== */

/* The list panel scrolls under the floating header and is padded down past
   it; a sticky offset counts from that padding edge (measured in Chrome), so
   0 sticks a header just below the floating header, in list and split view
   alike. --list-sticky-top lets the shell move the line if its padding changes. */
.list-group-header {
  position: sticky;
  top: var(--list-sticky-top, 0px);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 10px -8px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-main);
}

.list-group-header:first-child {
  margin-top: 0;
}

.list-group-count {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   List: density
   ========================================================================== */

.list-host.list-host--compact { gap: 6px; }
.list-host.list-host--spacious { gap: 14px; }

.row-card.row-card--compact { padding: 8px 12px; gap: 4px; }
.row-card--compact .row-price { font-size: 16px; }
.row-card--compact .row-address { font-size: 13px; }
.row-card--compact .row-leftover { font-size: 13px; }
.row-card--compact .row-meta { font-size: 11px; gap: 2px 10px; }

.row-card.row-card--spacious { padding: 16px 18px; gap: 9px; }
.row-card--spacious .row-price { font-size: 20px; }
.row-card--spacious .row-address { font-size: 15px; }
.row-card--spacious .row-meta { font-size: 13px; }

/* ==========================================================================
   List: optional fields, watch-outs, note preview, seen
   ========================================================================== */

/* Crime: the decile's ramp colour on a dot, the words in the theme's text
   colour, so it reads on every theme (as text the ramp fell to 2:1 on Daylight). */
.row-crime {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
}

.row-crime-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 1px var(--border-color);
}

/* "≈" marks a street or room-sum estimate; italics repeat it for a glance. */
.row-field--estimate { font-style: italic; }
.row-field--unknown { color: var(--text-dim); }

.row-watchouts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.watchout-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.watchout-pts {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.row-note-preview {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  border-left: 2px solid var(--border-color);
  padding-left: 8px;
  overflow-wrap: anywhere;
}

.row-chip--seen {
  background: rgba(148, 163, 184, 0.16);
  color: var(--text-muted);
}

/* "Dim seen" on: a home already looked at steps back, until it is pointed at. */
.row-card.is-seen { opacity: 0.62; }
.row-card.is-seen:hover,
.row-card.is-seen:focus,
.row-card.is-seen:focus-within { opacity: 1; }

/* ==========================================================================
   Badges: the reason and the score on the badge itself (no hover on a phone)
   ========================================================================== */

.match-badge--excluded {
  max-width: 100%;
  flex-wrap: wrap;
}

.match-excluded-reason {
  font-weight: 500;
  min-width: 0;
}

.value-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: -2px;
}

/* ==========================================================================
   Map pins: seen, strong match, selected, highlighted
   ========================================================================== */

.pin-bubble.is-seen {
  opacity: 0.5;
  filter: saturate(0.45);
}

/* A hollow dot: this one has been looked at. */
.pin-bubble.is-seen .pin-dot {
  background: transparent;
  border: 2px solid #ffffff;
}

/* 70+ in the match colouring: the darkest step was the least visible on the
   dark chrome (Proposal 07 §4.3), so it gets a crisp double ring. */
.pin-bubble.is-strong {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px rgba(8, 47, 73, 0.9), 0 4px 10px rgba(0, 0, 0, 0.4);
}

.pin-bubble.is-strong.is-fav {
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.7), 0 0 0 4px rgba(8, 47, 73, 0.9), 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* The home whose popup or detail panel is open. */
.pin-bubble.is-selected {
  opacity: 1;
  filter: none;
  transform: rotate(-45deg) scale(1.22);
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--accent), 0 6px 14px rgba(0, 0, 0, 0.5);
}

/* The pin of the list card under the pointer (split view), or its cluster. */
.custom-pin-marker.is-highlighted .pin-bubble {
  opacity: 1;
  filter: none;
  transform: rotate(-45deg) scale(1.3);
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #fbbf24, 0 6px 14px rgba(0, 0, 0, 0.5);
}

.custom-cluster-marker.is-highlighted .cluster-bubble {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px #fbbf24, 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   Map pins: the street-level price pill (zoom 15 and in)
   ========================================================================== */

/* The icon box is the pill (24px) plus its pointer (6px); the pointer's tip
   is the anchor, so the pill stands on the home like the teardrop does. */
.custom-pin-marker--pill {
  align-items: flex-start;
}

.pin-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 8px;
  border: 2px solid #ffffff;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform-origin: 50% 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.pin-pill::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #ffffff;
}

.pin-pill:hover {
  transform: scale(1.1);
}

.pin-pill-score {
  font-weight: 600;
  opacity: 0.85;
}

.pin-pill-star {
  color: #fbbf24;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.85);
}

.pin-pill.is-fav { border-color: #fbbf24; }
.pin-pill.is-fav::after { border-top-color: #fbbf24; }

.pin-pill.is-seen {
  opacity: 0.55;
  filter: saturate(0.45);
}

.pin-pill.is-strong {
  box-shadow: 0 0 0 2px rgba(8, 47, 73, 0.9), 0 3px 8px rgba(0, 0, 0, 0.35);
}

.pin-pill.is-selected {
  opacity: 1;
  filter: none;
  transform: scale(1.1);
  box-shadow: 0 0 0 3px var(--accent), 0 4px 12px rgba(0, 0, 0, 0.45);
}

.custom-pin-marker.is-highlighted .pin-pill {
  opacity: 1;
  filter: none;
  transform: scale(1.14);
  box-shadow: 0 0 0 3px #fbbf24, 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   Detail panel: header actions and provenance
   ========================================================================== */

.detail-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.detail-header-actions .btn-show-on-map {
  margin-top: 0;
}

.btn-seen-toggle,
.detail-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn-seen-toggle { color: var(--text-muted); }

.btn-seen-toggle.is-seen {
  color: var(--text-main);
  background: var(--bg-surface-hover);
}

.btn-seen-toggle:hover,
.detail-link:hover,
.btn-seen-toggle:focus-visible,
.detail-link:focus-visible {
  border-color: var(--accent);
}

.detail-nomap {
  font-size: 12px;
  color: var(--text-dim);
}

.detail-links-prov {
  margin-top: 6px;
}

/* ==========================================================================
   BUY-026: card actions, the empty list's filter chips, "Show only" counts
   and Compare's best-in-row marks
   ========================================================================== */

/* "Map" and "Advert" sit beside the star; a long price range pushes them onto
   their own line, still on the right, rather than squeezing the price. */
.row-top {
  flex-wrap: wrap;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* The popup's star clears Leaflet's close button; a card has none. */
.row-actions .btn-fav {
  margin-right: 0;
}

.btn-card-action {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--panel-raised);
  color: var(--text-main);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn-card-action:hover,
.btn-card-action:focus-visible {
  border-color: var(--accent);
}

/* An empty list: what is filtering, each removable, and a reset. */
.list-empty-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.list-empty-hint {
  margin: 0 0 14px;
  font-size: 13px;
}

.list-empty-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto 14px;
  padding: 0 8px;
}

.empty-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(var(--info-rgb), 0.55);
  border-radius: 18px;
  background: rgba(var(--info-rgb), 0.12);
  color: var(--text-main);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.empty-chip:hover,
.empty-chip:focus-visible {
  background: rgba(var(--info-rgb), 0.24);
  border-color: var(--info);
}

.empty-chip-x {
  font-size: 11px;
  opacity: 0.75;
}

.btn-empty-reset {
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--panel-raised);
  color: var(--text-main);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-empty-reset:hover,
.btn-empty-reset:focus-visible {
  border-color: var(--accent);
}

/* A "Show only" chip that would leave no homes in this budget. */
.chip-btn--none {
  opacity: 0.55;
}

/* Compare: the best of these homes on a row, and a home outside the budget
   in view. The tick and the words carry it, not the tint alone. */
.compare-key {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.compare-table td.compare-best {
  background: var(--accent-light);
  color: var(--text-main);
  font-weight: 700;
}

.compare-best-mark {
  color: var(--positive);
}

.compare-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.compare-table td.compare-outside {
  color: var(--warning-text);
  font-weight: 600;
}

.compare-outside-note {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ==========================================================================
   Phone (Pixel 8 Pro, 412 CSS px)
   ========================================================================== */

@media (max-width: 600px) {
  /* Thumb-sized targets for the header actions. */
  .btn-seen-toggle,
  .detail-link,
  .detail-header-actions .btn-show-on-map {
    min-height: 40px;
  }

  .list-group-header {
    padding: 7px 10px;
  }

  /* Thumb-sized card actions and empty-list chips. */
  .btn-card-action {
    min-height: 40px;
    padding: 8px 12px;
  }

  .row-actions .btn-fav {
    width: 40px;
    height: 40px;
  }

  .empty-chip {
    min-height: 40px;
  }

  .btn-empty-reset {
    min-height: 44px;
  }
}

/* ==========================================================================
   Daylight theme: the amber needs to be darker to read on paper white
   ========================================================================== */

:root[data-theme="daylight"] .watchout-chip {
  color: #92400e;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(180, 83, 9, 0.35);
}