/* shell.css (BUY-024).
 *
 * App shell: overlay stacking and panel geometry, split view, phone bottom navigation, filter drawer sections and footer, safe areas.
 * Use the theme variables from style.css :root for any colour that should
 * follow the theme.
 *
 * Loaded after style.css, so a rule here with the same selector refines the
 * base one. The panels' contents belong to their owners' sheets; this file
 * places the containers only.
 *
 * Stacking, bottom to top:
 *   map 1 · list 500 · header, filter drawer, locate 1000
 *   panels 1100 + 10 per stack position (js/overlays.js sets the newest on
 *   top: detail can sit above or below a sheet) · phone navigation 1190 ·
 *   toast 1200
 *
 * Two measured lengths, set on <html> by js/shell.js:
 *   --header-clearance  bottom of the floating header (and the data-age
 *                       banner and cohort chip when they show)
 *   --bottom-clearance  the phone navigation's height, 0 on a wider screen
 */

:root {
  --bottom-clearance: 0px;
}

/* ==========================================================================
   Viewport units that follow the phone's toolbars and keyboard
   ========================================================================== */

.app-header {
  top: max(12px, env(safe-area-inset-top));
}

.filter-panel {
  max-height: calc(100dvh - var(--header-clearance, 72px) - var(--bottom-clearance) - 20px);
}

/* The list goes under the floating header and stops above the navigation. */
.list-panel {
  padding-bottom: calc(24px + var(--bottom-clearance));
}

/* Locating yourself only makes sense with the map on screen. */
:root[data-view="list"] .btn-locate {
  display: none;
}

.btn-locate {
  bottom: calc(24px + var(--bottom-clearance));
}

.toast {
  bottom: calc(84px + var(--bottom-clearance));
}

/* Leaflet's zoom control, attribution and the Google mark ride above the
   phone navigation instead of under it. */
#map .leaflet-bottom {
  bottom: var(--bottom-clearance);
}

/* ==========================================================================
   Detail panel: a card below the header on a wide screen
   ========================================================================== */

.detail-panel {
  top: calc(var(--header-clearance, 68px) + 8px);
  right: 12px;
  bottom: 12px;
  width: min(440px, calc(100% - 24px));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   Sheets: Trends, What's new, Compare and Customise
   A centred card over a dimmed backdrop below the header on a wide screen;
   the section is the backdrop, so a press on it (outside the card) closes.
   ========================================================================== */

.compare-panel.sheet {
  inset: auto;
  top: var(--header-clearance, 68px);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 8px 16px 16px;
  overflow: hidden;
  background: var(--sheet-backdrop, rgba(2, 6, 23, 0.55));
}

.compare-panel.sheet[hidden] {
  display: none;
}

.sheet-card {
  position: relative;
  width: 100%;
  max-width: 980px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-primary);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px 20px 28px;
}

/* The close button stays at the card's top right while it scrolls. */
.sheet-card > .btn-detail-close {
  position: sticky;
  top: 0;
  float: right;
  margin: -4px -6px 0 12px;
}

.sheet-card > .compare-title {
  margin-right: 48px;
}

/* ==========================================================================
   Split view (1024px and wider): the map on the left, the list on the right
   ========================================================================== */

.view-btn--split {
  display: none;
}

@media (min-width: 1024px) {
  .view-btn--split {
    display: inline-block;
  }

  :root[data-view="split"] #map {
    width: 55%;
  }

  :root[data-view="split"] .list-panel {
    inset: 0 0 0 55%;
    border-left: 1px solid var(--border-color);
    padding-left: 14px;
    padding-right: 14px;
  }

  :root[data-view="split"] .list-host {
    max-width: none;
  }

  /* The map controls stay on the map's half. */
  :root[data-view="split"] .btn-locate {
    right: calc(45% + 16px);
  }

  /* The detail card takes the list's column and gives it back on close,
     scrolled where it was; the map half stays in view with the pin
     selected. Docked on the map instead, it and the filter drawer would
     cover the whole map half. */
  :root[data-view="split"] .detail-panel {
    left: calc(55% + 12px);
    right: 12px;
    width: auto;
  }
}

/* ==========================================================================
   Header and cohort chip
   ========================================================================== */

/* In the header, the drawer and the navigation, `hidden` always hides. A
   class's display had been overriding it: the filter count read "0" with no
   filter set and the search box showed its clear button while empty. */
.app-header [hidden],
.mobile-bottom-nav [hidden] {
  display: none !important;
}

.cohort-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  pointer-events: auto;
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--accent);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  padding: 3px 4px 3px 12px;
  font-size: 12px;
  font-weight: 600;
}

.cohort-chip[hidden] {
  display: none;
}

.cohort-chip-kicker {
  color: var(--text-muted);
  font-weight: 500;
  flex: none;
}

.cohort-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cohort-chip-clear {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--panel-raised, #1e293b);
  color: var(--text-main);
  font-size: 12px;
  cursor: pointer;
}

/* ==========================================================================
   Filter drawer: sections and the sticky footer
   ========================================================================== */

.filter-section {
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
}

.filter-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}

.filter-section-head::-webkit-details-marker {
  display: none;
}

.filter-section-head::after {
  content: '';
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.filter-section[open] > .filter-section-head::after {
  transform: rotate(45deg);
}

.filter-section-head:focus-visible {
  outline: 2px solid var(--info, #38bdf8);
  outline-offset: 2px;
}

.filter-section-title {
  color: var(--text-main);
}

.filter-section-count {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent, #052e16);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0;
}

.filter-section-count[hidden] {
  display: none;
}

.filter-section-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 0 6px;
}

.filter-explain {
  font-size: 12px;
  color: var(--text-muted);
}

.filter-explain > summary {
  cursor: pointer;
  color: var(--info, #38bdf8);
  padding: 4px 0;
  width: max-content;
}

.filter-explain dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 10px;
  margin-top: 6px;
}

.filter-explain dt {
  font-weight: 600;
  color: var(--text-main);
}

/* The footer sticks to the bottom of the scrolling drawer; the negative
   margins take it to the drawer's edges over the padding. */
.filter-sticky-footer {
  position: sticky;
  bottom: -14px;
  z-index: 2;
  margin: 0 -16px -14px;
  padding: 10px 16px 12px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.filter-footer-note {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.filter-footer-note[hidden] {
  display: none;
}

.filter-footer-actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
}

.btn-show-homes,
.btn-apply-filters {
  min-height: 40px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 14px;
}

.btn-show-homes {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent, #052e16);
}

.btn-apply-filters {
  border: 1px solid var(--border-color);
  background: var(--panel-raised, #1e293b);
  color: var(--text-main);
}

.filter-footer-actions .btn-reset {
  flex: none;
  padding: 0 14px;
}

/* ==========================================================================
   Phone (600px and narrower)
   ========================================================================== */

.mobile-bottom-nav {
  display: none;
}

@media (max-width: 600px) {
  .app-header {
    top: max(8px, env(safe-area-inset-top));
  }

  /* The navigation at the bottom carries Map, List, Trends, What's new,
     Filters and Customise, so the header keeps the brand and the count on
     one row. The buttons stay in the page for the navigation to press. */
  .header-bar {
    flex-wrap: nowrap;
  }

  .header-actions {
    width: auto;
    margin-left: auto;
  }

  .header-actions .view-switch,
  .header-actions #btn-market,
  .header-actions #btn-whats-new,
  .header-actions #btn-customise,
  .header-actions #btn-toggle-filters {
    display: none;
  }

  .header-actions .count-badge {
    position: static;
    margin-left: 0;
  }

  .filter-panel {
    max-height: calc(100dvh - var(--header-clearance, 64px) - var(--bottom-clearance) - 16px);
    padding-bottom: 14px;
  }

  .filter-sticky-footer {
    padding-bottom: 12px;
  }

  .btn-show-homes,
  .btn-apply-filters,
  .filter-footer-actions .btn-reset {
    min-height: 44px;
  }

  .cohort-chip-clear {
    width: 36px;
    height: 36px;
  }

  .toast {
    bottom: calc(76px + var(--bottom-clearance));
  }

  /* Detail: a bottom sheet that stops above the navigation. */
  .detail-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: var(--bottom-clearance);
    width: 100%;
    max-height: calc(88dvh - var(--bottom-clearance));
    border: none;
    border-top: 1px solid var(--border-color);
    border-radius: 16px 16px 0 0;
  }

  /* Sheets: full height above the navigation, no backdrop to miss. */
  .compare-panel.sheet {
    top: 0;
    bottom: var(--bottom-clearance);
    padding: 0;
    background: var(--bg-primary);
  }

  .sheet-card {
    max-width: none;
    height: 100%;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: calc(10px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 24px max(12px, env(safe-area-inset-left));
  }

  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1190;
    padding: 4px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    background: var(--bg-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
  }

  .mobile-nav-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    min-width: 0;
    padding: 4px 0;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
  }

  .mobile-nav-btn.active {
    color: var(--accent);
    background: var(--accent-light);
  }

  .mobile-nav-btn:focus-visible {
    outline: 2px solid var(--info, #38bdf8);
    outline-offset: -2px;
  }

  .mobile-nav-icon {
    font-size: 19px;
    line-height: 1;
  }

  .mobile-nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav-badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 6px);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #0284c7;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
  }

  .mobile-nav-badge[hidden] {
    display: none;
  }

  /* With the keyboard up, the space is the field's. */
  :root.is-typing .mobile-bottom-nav {
    display: none;
  }
}