/* PostgreSQL document search page: one search bar, then a workspace card
   with category filters, the ranked list and the definition preview. Result
   rows, kind badges and the preview are shared with the site palette, so
   those rules live in pgsql.css (.ds-result, .ds-kind, .ds-preview-*,
   .ds-doc); this file only lays out the page. */

.ds-app {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto 3em;
  padding: 1.5rem 20px 0;
  color: var(--pg-ink);
}

.ds-app *,
.ds-app *::before,
.ds-app *::after {
  box-sizing: border-box;
}

.ds-title {
  margin: 0 0 0.9rem;
  color: var(--pg-heading);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---- search bar ---- */

.ds-bar {
  display: flex;
  align-items: stretch;
  min-height: 52px;
  border: 1px solid var(--pg-line-strong);
  border-radius: 12px;
  background: var(--pg-surface);
  transition: border-color var(--pg-dur) var(--pg-ease),
              box-shadow var(--pg-dur) var(--pg-ease);
}

.ds-bar:focus-within {
  border-color: var(--pg-blue);
  box-shadow: 0 0 0 3px rgba(var(--pg-blue-rgb), 0.15);
}

.ds-bar .ds-scope {
  padding: 0 4px 0 10px;
  border-right: 1px solid var(--pg-line);
}

.ds-scope-select {
  height: 34px;
  margin: 0 4px 0 -4px;
  padding: 0 26px 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f8397' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
  color: var(--pg-heading);
  font-family: var(--pg-font-mono);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ds-scope-select option {
  color: var(--pg-ink);
  background: var(--pg-surface);
  font-family: var(--pg-font);
}

.ds-live .ds-scope-select {
  display: none;
}

.ds-bar .ds-chip {
  margin-right: 6px;
}

/* No chip (the prefix is in the text): drop the empty slot and its rule. */
.ds-live .ds-bar .ds-scope:has(.ds-chip[hidden]) {
  display: none;
}

.ds-input {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 10px 0 14px;
}

.ds-input > .ds-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--pg-muted);
}

.ds-input input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--pg-ink);
  font-family: var(--pg-font-mono), var(--pg-font);
  font-size: 16px;
}

.ds-input input::placeholder {
  color: var(--pg-muted);
  font-family: var(--pg-font);
  font-size: 15px;
}

.ds-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--pg-muted);
  cursor: pointer;
}

.ds-clear .ds-icon {
  width: 15px;
  height: 15px;
}

.ds-clear:hover {
  background: var(--pg-wash);
  color: var(--pg-ink);
}

.ds-submit {
  align-self: center;
  margin: 0 8px 0 0;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--pg-primary);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.ds-live .ds-submit {
  display: none;
}

.ds-status {
  margin: 8px 0 12px 4px;
  color: var(--pg-muted);
  font-size: 12.5px;
}

/* ---- workspace ---- */

.ds-workspace {
  display: grid;
  grid-template-columns: 208px minmax(300px, 380px) minmax(0, 1fr);
  height: max(560px, calc(100vh - 230px));
  max-height: 1000px;
  border: 1px solid var(--pg-line);
  border-radius: 12px;
  background: var(--pg-surface);
  overflow: hidden;
}

.ds-facets {
  padding: 10px 8px;
  border-right: 1px solid var(--pg-line);
  overflow-y: auto;
  scrollbar-width: thin;
}

.ds-facet {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 1px 0;
  padding: 6px 8px;
  border-radius: 7px;
  color: var(--pg-ink-2);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--pg-dur) var(--pg-ease),
              color var(--pg-dur) var(--pg-ease);
}

.ds-facet:hover {
  background: var(--pg-wash);
  color: var(--pg-heading);
  text-decoration: none;
}

.ds-facet.is-active {
  background: var(--pg-wash-strong);
  color: var(--pg-heading);
  font-weight: 600;
}

.ds-facet > span:not(.ds-kind) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-facet small {
  margin-left: auto;
  color: var(--pg-muted);
  font-size: 11.5px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.ds-results-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--pg-line);
}

.ds-panel-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--pg-line);
  color: var(--pg-ink-2);
  font-size: 12.5px;
  font-weight: 600;
}

.ds-panel-head small {
  color: var(--pg-muted);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.ds-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ds-results .ds-result {
  border-bottom: 1px solid var(--pg-line);
  border-radius: 0;
}

.ds-loading .ds-results {
  opacity: 0.55;
}

.ds-notice {
  padding: 10px 16px;
  border-bottom: 1px solid var(--pg-line);
  background: var(--pg-wash);
  color: var(--pg-ink-2);
  font-size: 12.5px;
  line-height: 1.6;
}

.ds-more {
  display: block;
  flex: none;
  padding: 10px;
  border-top: 1px solid var(--pg-line);
  color: var(--pg-link);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
}

.ds-more:hover {
  background: var(--pg-wash);
  text-decoration: none;
}

.ds-app [hidden] {
  display: none !important;
}

.ds-preview {
  position: relative;
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ds-preview:focus {
  outline: none;
}

/* Empty preview: one sentence and a row of examples */
.ds-intro {
  max-width: 520px;
  margin: 0 auto;
  padding: 72px 32px 40px;
  text-align: center;
}

.ds-intro__mark {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  color: var(--pg-line-strong);
}

.ds-intro p {
  margin: 0 0 18px;
  color: var(--pg-ink-2);
  font-size: 14.5px;
  line-height: 1.7;
}

.ds-examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 26px;
}

.ds-examples button {
  padding: 5px 11px;
  border: 1px solid var(--pg-line);
  border-radius: 8px;
  background: var(--pg-surface);
  color: var(--pg-heading);
  font-family: var(--pg-font-mono);
  font-size: 12.5px;
  cursor: pointer;
  transition: background-color var(--pg-dur) var(--pg-ease),
              border-color var(--pg-dur) var(--pg-ease);
}

.ds-examples button:hover {
  border-color: var(--pg-line-strong);
  background: var(--pg-wash);
}

.ds-keys {
  color: var(--pg-muted);
  font-size: 12px;
}

.ds-keys kbd {
  margin: 0 2px 0 6px;
}

.ds-keys kbd:first-child {
  margin-left: 0;
}

/* ---- responsive ---- */

@media (max-width: 1099.98px) {
  .ds-workspace {
    grid-template-columns: 180px minmax(0, 1fr);
    height: calc(100dvh - 210px);
    min-height: 480px;
  }

  .ds-preview {
    display: none;
    grid-column: 2;
    grid-row: 1;
  }

  .ds-show-preview .ds-preview {
    display: block;
  }

  .ds-show-preview .ds-results-panel {
    display: none;
  }

  .ds-results-panel {
    border-right: 0;
  }

  .ds-preview-back {
    display: inline-flex;
  }

  .ds-intro {
    padding: 48px 24px 32px;
  }
}

@media (max-width: 767.98px) {
  .ds-app {
    padding: 0.75rem 12px 0;
  }

  .ds-title {
    font-size: 1.2rem;
  }

  .ds-bar {
    min-height: 46px;
    border-radius: 10px;
  }

  .ds-scope {
    padding: 0 2px 0 4px;
  }

  .ds-scope select {
    padding-left: 8px;
    font-size: 12px;
  }

  .ds-input {
    padding: 0 8px 0 10px;
  }

  .ds-input > .ds-icon {
    display: none;
  }

  .ds-input input {
    font-size: 16px;
  }

  .ds-workspace {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 190px);
    min-height: 480px;
  }

  .ds-facets {
    display: flex;
    flex: none;
    gap: 4px;
    padding: 6px;
    border-right: 0;
    border-bottom: 1px solid var(--pg-line);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .ds-facet {
    flex: none;
    padding: 5px 8px;
    white-space: nowrap;
  }

  .ds-facet small {
    margin-left: 4px;
  }

  .ds-results-panel,
  .ds-preview {
    flex: 1 1 auto;
    min-height: 0;
  }

  .ds-show-preview .ds-facets {
    display: none;
  }
}