/* The directory floats over the full map, inset from the frame. */
#pane-map .map-body { display: grid; grid-template-columns: minmax(0, 1fr); }
#pane-map .map { position: relative; inset: auto; min-width: 0; min-height: 0; }
#pane-map .directory-panel {
  --rs-control-fill: color-mix(in srgb, var(--g-elev) 33%, transparent);
  position: absolute;
  /* Clear floating header + legal line (panes are now full-bleed). */
  inset: var(--menu-clearance) var(--corner-right) var(--legal-clearance) auto;
  display: flex;
  flex-direction: column;
  z-index: 2;
  width: min(var(--read-w), 38%);
  height: auto;
  max-height: none;
  min-height: 0;
  min-width: 0;
}
#pane-map:not(.is-console) .directory-panel { display: none; }
#pane-map .list { position: relative; inset: auto; width: 100%; height: auto; flex: 1; min-height: 0; overflow: hidden; }
#pane-map.is-list .list { display: flex; flex-direction: column; }
body[data-pane="map"] #pane-map.is-list .directory-panel {
  --directory-bottom-clearance: var(--legal-clearance);
  height: calc((100% - var(--menu-clearance) - var(--directory-bottom-clearance)) * 0.8);
  top: auto;
  bottom: var(--directory-bottom-clearance);
  box-sizing: border-box;
}
.directory-intro { container-type: inline-size; flex-shrink: 0; padding: var(--space-lg) var(--rail) 0; }
.directory-panel:has(.list[data-detail="true"]) .directory-intro { display: none; }
.directory-head[hidden], .directory-results[hidden], .directory-result-status[hidden] { display: none; }
.directory-description { margin: var(--space-sm) 0 0; font-size: min(var(--t-lede), 3.1cqi); line-height: var(--lh-body); color: var(--ink-2); white-space: nowrap; }
.directory-head { flex-shrink: 0; padding: var(--space-lg) var(--rail); border-bottom: var(--border); }
.directory-title { white-space: normal; margin: 0; font-family: var(--font-mono); font-size: var(--t-head); font-weight: var(--w-medium); line-height: var(--lh-title); letter-spacing: var(--track-title); text-transform: none; }
.directory-caption { margin: 0; font-size: var(--t-small); color: var(--ink-3); line-height: var(--lh-body); }
.directory-note { margin: var(--space-md) 0 0; font-size: var(--t-small); color: var(--ink-2); }
.directory-footer { flex-shrink: 0; padding: var(--space-lg) var(--rail); border-top: var(--border); }
.directory-footer .rs-command { width: 100%; }
.directory-footer code { flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere; white-space: normal; }
.directory-search { width: 100%; margin: 0; }
.directory-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.directory-result-status:not(:empty) { padding: var(--space-md) var(--rail) 0; }
.directory-row { appearance: none; position: relative; width: 100%; display: flex; align-items: center; gap: var(--space-lg); min-height: var(--hit); padding: var(--space-lg) var(--rail); text-align: left; border: 0; background: transparent; color: var(--ink-2); }
.directory-row + .directory-row::before { content: ""; position: absolute; inset: 0 var(--rail) auto; height: 1px; background: var(--rs-panel-divider); pointer-events: none; }
.directory-row > .rs-icon { align-self: center; flex-shrink: 0; font-size: var(--t-head); }
.directory-row:hover, .directory-row[aria-pressed="true"] { color: var(--ink); background: var(--rs-control-fill); }
.directory-row:focus-visible { outline: 1px solid var(--ink); outline-offset: -1px; }
.directory-row:active { color: var(--ink-3); }
.directory-row-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 0; overflow-wrap: anywhere; }
.directory-name { line-height: var(--lh-head); font-size: var(--t-body); font-weight: var(--w-medium); color: var(--ink); }
.directory-row-copy .directory-caption { line-height: var(--lh-head); }
.directory-diamond { width: calc(var(--hit) - var(--space-xs) * 2); height: calc(var(--hit) - var(--space-xs) * 2); margin-top: 0; object-fit: contain; flex-shrink: 0; }
.directory-empty { margin: 0; padding: var(--space-xl) var(--rail); font-size: var(--t-lede); color: var(--ink-2); }
.directory-empty:has(+ .directory-empty-contact) { padding-bottom: var(--space-sm); }
.directory-empty-contact { margin: 0; padding: 0 var(--rail) var(--space-xl); font-size: var(--t-lede); color: var(--ink-2); }
.directory-empty-mail { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--ink-3); }
.directory-empty-mail:hover, .directory-empty-mail:focus-visible { text-decoration-color: var(--ink); }
.directory-status:not(:empty) { padding: var(--space-md) var(--rail); border-top: var(--border); }
.directory-results > .directory-action { margin: 0 var(--rail) var(--space-lg); }
.house-card { padding: 0 var(--rail) var(--space-2xl); }
.house-card[hidden] { display: none; }
.house-top { display: flex; margin: var(--space-md) 0 var(--space-sm); }
.house-diamond { display: block; width: var(--space-4xl); height: var(--space-4xl); margin: 0 0 var(--space-md); object-fit: contain; }
.house-title { margin: 0; font-size: var(--t-title); font-weight: var(--w-medium); letter-spacing: var(--track-tight); line-height: var(--lh-title); text-transform: none; overflow-wrap: anywhere; }
.house-title:focus { outline: none; }
.house-place { margin: var(--space-md) 0 0; color: var(--ink-2); font-size: var(--t-small); line-height: var(--lh-body); }
.house-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.house-facts { display: flex; flex-direction: column; gap: var(--space-xl); margin-top: var(--space-2xl); }
.house-fact { min-width: 0; }
.house-label { margin: 0 0 var(--space-sm); font-size: var(--t-eyebrow); font-weight: var(--w-medium); letter-spacing: var(--track-wide); line-height: var(--lh-body); text-transform: none; color: var(--ink-3); }
.house-value { margin: 0; font-size: var(--t-small); line-height: var(--lh-prose); color: var(--ink-2); overflow-wrap: anywhere; }
.house-value p { margin: 0; }
.house-week { margin: var(--space-sm) 0 var(--space-md); display: grid; gap: var(--space-md); font-size: var(--t-small); line-height: var(--lh-body); color: var(--ink-2); }
.house-week > div { display: flex; justify-content: space-between; gap: var(--space-md); }
.house-week dd { margin: 0; text-align: right; }
.house-actions { margin-top: var(--space-2xl); }
.map-status { position: absolute; top: var(--space-lg); left: var(--space-lg); max-width: calc(100% - 16rem); pointer-events: none; }
@media (max-width: 760px) {
  body[data-pane="map"] #pane-map.is-list .directory-panel { --directory-bottom-clearance: var(--map-dock-clearance); }
  #pane-map.is-console .map-body { grid-template-rows: minmax(0, 1fr); }
  #pane-map.is-console .map { grid-column: 1; grid-row: 1; }
  #pane-map .directory-panel,
  #pane-map.is-console .directory-panel {
    position: absolute;
    inset: var(--menu-clearance) var(--corner-right) var(--map-dock-clearance) var(--corner-left);
    grid-area: auto;
    width: auto;
    max-width: var(--read-w);
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0 auto;
    transform: none;
  }
  #pane-map.is-console .map-chrome { position: absolute; bottom: var(--space-md); }
  .directory-intro { padding: var(--space-lg) var(--space-lg) 0; }
  .directory-footer { padding: var(--space-md) var(--space-lg); }
  .directory-head { padding: var(--space-md) var(--space-lg); }
  .directory-row { padding: var(--space-lg); }
  .house-card { padding: 0 var(--space-lg) var(--space-lg); }
  .house-top { margin-top: var(--space-xs); }
  .house-diamond { margin-bottom: var(--space-sm); }
  .house-place { margin-top: var(--space-xs); }
  .house-tags { margin-top: var(--space-sm); }
  .house-facts { margin-top: var(--space-lg); gap: var(--space-lg); }
  .house-week { margin: 0; gap: var(--space-xs); }
  .house-actions { margin-top: var(--space-lg); }
  #pane-map.is-list .maplibregl-ctrl-bottom-left,
  #pane-map.is-list .maplibregl-ctrl-bottom-right { padding-bottom: 0; }
  .map-status { top: calc(var(--hit) + var(--space-3xl)); max-width: calc(100% - var(--space-2xl)); }
}

body[data-pane="diamond"] .directory-intro { display: none; }
body[data-pane="diamond"] .directory-footer { display: none; }



@media (min-width: 761px) {
  /* Desktop: map full-bleed with the Diamond panel in the right column. */
  body[data-pane="diamond"] #pane-map.is-console .map-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(var(--read-w), 38%);
    grid-template-rows: minmax(0, 1fr) auto auto;
    column-gap: var(--space-md);
    padding: 0;
    box-sizing: border-box;
    align-items: end;
  }
  body[data-pane="diamond"] #pane-map.is-console .map {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    z-index: 0;
  }
  body[data-pane="diamond"] #pane-map.is-console .map-chrome {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    inset: auto;
    left: auto;
    bottom: auto;
    z-index: 4;
    justify-self: start;
    align-self: end;
    margin: 0 0 var(--legal-clearance) var(--corner-left);
  }
  body[data-pane="diamond"] #pane-map.is-console .map-wallet:not(.auction-bid) {
    display: none;
  }
  body[data-pane="diamond"] #pane-map .directory-panel,
  body[data-pane="diamond"] #pane-map.is-console .directory-panel {
    grid-column: 2;
    grid-row: 3;
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    height: auto;
    max-height: min(52vh, calc(100dvh - var(--corner-top) - var(--space-md) - 16rem));
    margin: 0 var(--corner-right) var(--legal-clearance) 0;
    z-index: 4;
    align-self: end;
  }
  body[data-pane="diamond"] #pane-diamond:not([hidden]) {
    flex: 0 1 auto;
    min-height: 0;
    height: auto;
    max-height: 100%;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  /* Keep stray overlays out of the stack column. */
  body[data-pane="diamond"] #pane-map .map-status,
  body[data-pane="diamond"] #pane-map .diamond-map-card {
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 2;
  }
}

@media (max-width: 760px) {
  /* Mobile: map under floating card + info. Map tab clears overlays. */
  body[data-pane="diamond"] #pane-map.is-console .map-body {
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
  }
  body[data-pane="diamond"] #pane-map.is-console .map {
    display: block;
    grid-column: 1;
    grid-row: 1;
  }
  body[data-pane="diamond"] #pane-map .directory-panel,
  body[data-pane="diamond"] #pane-map.is-console .directory-panel {
    position: absolute;
    inset: auto auto var(--map-dock-clearance) 50%;
    grid-column: auto;
    grid-row: auto;
    width: min(var(--read-w), calc(100% - (2 * var(--corner-left))));
    max-width: var(--read-w);
    height: auto;
    max-height: calc(100% - var(--map-dock-clearance) - 11rem);
    min-height: 0;
    margin: 0;
    transform: translateX(-50%);
    overflow: hidden;
    overscroll-behavior: contain;
    box-sizing: border-box;
    z-index: 3;
  }
  body[data-pane="diamond"] #pane-map .directory-panel::after {
    display: block;
  }
  body[data-pane="diamond"] #pane-diamond:not([hidden]) {
    flex: 0 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    border: 0;
    background: var(--g);
    overflow: hidden;
    overscroll-behavior: contain;
  }
  body[data-pane="diamond"] #pane-map.is-console .map-wallet:not(.auction-bid) {
    display: none;
  }
  #mapView.map-chrome.rs-segmented,
  body[data-pane="map"] #mapView.map-chrome.rs-segmented,
  body[data-pane="diamond"] #pane-map.is-console .map-chrome.rs-segmented {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    transform: none;
    pointer-events: auto;
  }
  body[data-pane="map"] .site-rights,
  body[data-pane="diamond"] .site-rights {
    display: none;
  }
}

/* The panel contains the model and all Diamond activity. */
body[data-pane="diamond"] #pane-map.is-console .directory-panel {
  --diamond-panel-width: calc(min(var(--read-w), 38vw) - var(--corner-right));
  --diamond-panel-gap: var(--space-md);
  --diamond-panel-inset: calc(2 * var(--space-xs) + 2 * var(--space-md) + 2px);
  --diamond-panel-height: calc((var(--diamond-panel-width) - var(--diamond-panel-inset)) * 4 / 3 + var(--diamond-panel-inset) + 2 * var(--diamond-panel-gap) + 2 * var(--hit));
}

@media (min-width: 761px) {
  body[data-pane="diamond"] #pane-map.is-console .directory-panel { width: var(--diamond-panel-width); max-width: calc(100% - var(--corner-right)); min-width: 0; box-sizing: border-box; }
  body[data-pane="diamond"] #pane-map.is-console .directory-panel { height: var(--diamond-panel-height); aspect-ratio: auto; max-height: calc(100dvh - var(--menu-clearance) - var(--legal-clearance)); }
  body[data-pane="diamond"][data-diamond-step="place"] #pane-map.is-console .directory-panel { height: auto; }
}
@media (max-width: 760px) {
  body[data-pane="diamond"] #pane-map.is-console .map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
  body[data-pane="diamond"] #pane-map.is-console .directory-panel {
    --diamond-panel-width: min(var(--read-w), calc(100vw - 2 * var(--corner-left)));
    --diamond-panel-gap: var(--space-sm);
    width: var(--diamond-panel-width);
    /* Seated just above the view bar, so the spare height above the card is a
       window onto the map where the Diamond shows. */
    top: auto;
    bottom: calc(var(--map-control-height) + var(--space-lg) + env(safe-area-inset-bottom, 0px));
    height: var(--diamond-panel-height); aspect-ratio: auto;
    max-height: calc(100dvh - var(--menu-clearance) - var(--map-control-height) - var(--space-lg) - var(--space-sm) - env(safe-area-inset-bottom, 0px));
  }
  body[data-pane="diamond"].diamond-keyboard .frame { height: var(--diamond-visible-height, 100dvh); }
  body[data-pane="diamond"].diamond-keyboard #pane-map.is-console .directory-panel { top: calc(var(--menu-clearance) + var(--space-sm)); bottom: var(--space-xs); height: auto; aspect-ratio: auto; }
  body[data-pane="diamond"].diamond-keyboard #mapView { display: none; }
  /* Leave a reachable map area above the form while choosing a position. */
  /* Place is a sheet at the foot of the screen, over the map. */
  body[data-pane="diamond"][data-diamond-step="place"]:not(.diamond-keyboard) #pane-map.is-console .directory-panel { top: auto; height: auto; margin-block: 0; }
  body[data-pane="diamond"][data-diamond-step="place"]:not(.diamond-keyboard) #pane-map.is-console .directory-panel {
    max-height: calc(100dvh - var(--menu-clearance) - var(--map-control-height) - var(--space-lg) - 2 * var(--hit) - env(safe-area-inset-bottom, 0px));
  }
}

/* All three tabs share the same frame; their content scrolls inside it. */
body[data-pane="diamond"] #pane-diamond:not([hidden]),
body[data-pane="diamond"] .diamond-shell,
body[data-pane="diamond"] .diamond-auction,
body[data-pane="diamond"] .auction-panels { flex: 1 1 0; min-height: 0; }

/* One vertical fabric surface for the shared Directory / Diamond panel. */
.map-panel-texture {
  position: absolute;
  inset: var(--rs-panel-inset, var(--space-xs));
  z-index: 0;
  container-type: size;
  overflow: hidden;
  border-radius: calc(var(--rs-panel-radius, var(--r-panel)) - var(--rs-panel-inset, var(--space-xs)));
  background: var(--vanta);
  pointer-events: none;
}
.map-panel-texture::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100cqh;
  height: 100cqw;
  background: url("/assets/diamond-panel-texture.png") center / cover no-repeat;
  opacity: 0.45;
  transform: translate(-50%, -50%) rotate(90deg);
}
#pane-map .directory-panel > :not(.map-panel-texture) { position: relative; z-index: 1; }
#pane-map .directory-panel > :is(#pane-diamond, .list) { background: transparent; }

/* Section rules fade into the fabric at either end. */
.directory-panel :is(.directory-head, .directory-footer, .directory-status, .auction-facts__cell, .prov-event, .prov-holder, #diamondRoyalties, .diamond-coordinates),
.directory-panel .diamond-steal-price::before {
  border-image-source: var(--rs-panel-divider);
  border-image-slice: 1;
}

/* The house card unfolds downward from the panel head. */
.house-card { --tray-origin: top center; --tray-scale: 1; }