/*
 * The three-column application shell: criteria rail, listing list, and a right
 * column split between the map and the selected property's photos.
 *
 * The middle column has a fixed width on purpose. Left flexible it absorbs
 * every spare pixel, which stretches a listing card until its price drifts far
 * from the details it belongs to. Fixed here, the space freed by collapsing the
 * rail goes to the map and the photos, where a larger surface actually helps.
 */

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--surface-raised);
}

.app-shell__chrome {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.app-shell__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.app-shell__body {
  /* The criteria panel is absolutely positioned against this box, so it spans
     the columns exactly and leaves the application header alone. */
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--rail-width) var(--list-width) minmax(0, 1fr);
}

/* No control reaches this any more. Hiding the searches column was asked for
 * early on and its button was lost somewhere in the rebuilds; the rule is kept
 * rather than deleted so putting the control back is a one-line change. */
.app-shell__body--rail-hidden {
  grid-template-columns: var(--list-width) minmax(0, 1fr);
}

.app-shell__column {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The panel is a ground for cards now, not a surface in its own right. Left as
 * `--surface` the cards sat on a colour a shade away from their own and read as
 * one continuous column of switches. */
.app-shell__column--rail {
  background: var(--ground);
  /* The separator is a shadow, not a border, because a border is subtracted
     from the column's own width: it left the search cards one pixel narrower
     than the listing cards, which are supposed to be the same size. */
  box-shadow: 1px 0 0 var(--line);
}

.app-shell__column--side {
  background: var(--surface);
  border-left: 1px solid var(--line);
}

.app-shell__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  /* The room for a scrollbar is reserved whether or not one is showing. The
     two card columns are meant to be identical, and measuring them found the
     listings ten pixels narrower for the only reason that they had scrolled
     and the searches had not — a difference that appeared and vanished with
     the content. */
  scrollbar-gutter: stable;
}

@media (max-width: 74rem) {
  .app-shell__body,
  /* No control reaches this any more. Hiding the searches column was asked for
 * early on and its button was lost somewhere in the rebuilds; the rule is kept
 * rather than deleted so putting the control back is a one-line change. */
.app-shell__body--rail-hidden {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
  }

  .app-shell {
    height: auto;
    min-height: 100dvh;
  }
}

.app-shell__scope {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}