/* Discover page recipes (.dsc-*) for Pages/Index + _SearchPill + _FilterSheet.
   Token-consuming only: every design value resolves through a --dvc-* custom property;
   raw literals appear exclusively in the component-local token block below (this file's
   tokenization point), mirroring the shared-partials.css discipline. Values ported from
   the prototype's Discover / ProtoSearchPill / FilterSheet. Linked from the page's
   Styles section. */

:root {
  /* --- shared micro scale --- */
  --dvc-dsc-gap-2: 2px;
  --dvc-dsc-gap-5: 5px;
  --dvc-dsc-gap-6: 6px;
  --dvc-dsc-gap-8: 8px;
  --dvc-dsc-transition: 0.16s ease;
  --dvc-dsc-focus-ring: 2px;
  --dvc-dsc-focus-offset: 2px;

  /* --- hero --- */
  --dvc-dsc-hero-eyebrow-size: 12px;
  --dvc-dsc-hero-eyebrow-tracking: 0.16em;
  --dvc-dsc-hero-eyebrow-alpha: 0.92;
  --dvc-dsc-hero-title-size: clamp(2.25rem, 5vw, 3.125rem);
  --dvc-dsc-hero-sub-size: 16.5px;
  --dvc-dsc-hero-sub-alpha: 0.94;
  --dvc-dsc-hero-measure: 560px;

  /* --- sticky bar --- */
  --dvc-dsc-bar-layer: 40;
  --dvc-dsc-bar-pad-block: 14px;
  --dvc-dsc-bar-pad-inline: 26px;
  --dvc-dsc-bar-gap: 16px;

  /* --- search pill --- */
  --dvc-dsc-pill-basis: 480px;
  --dvc-dsc-pill-block-size: 54px;
  --dvc-dsc-pill-cell-pad: 16px;
  --dvc-dsc-pill-divider-block: 28px;
  --dvc-dsc-pill-submit-size: 42px;
  --dvc-dsc-pill-submit-pad: 18px;
  --dvc-dsc-pill-submit-inset: 6px;

  /* --- quick chips + view seg --- */
  --dvc-dsc-chips-gap: 8px;

  /* --- content sections --- */
  --dvc-dsc-content-pad-block-start: 24px;
  --dvc-dsc-content-pad-block-end: 40px;
  --dvc-dsc-content-pad-inline: 26px;
  --dvc-dsc-section-gap: 24px;
  --dvc-dsc-section-head-gap: 14px;
  --dvc-dsc-section-title-size: 20px;
  --dvc-dsc-link-size: 13.5px;
  --dvc-dsc-link-gap: 6px;

  /* --- mood tiles --- */
  --dvc-dsc-mood-tile-block-size: 150px;
  --dvc-dsc-mood-pad: 16px;
  --dvc-dsc-mood-name-size: 20px;
  --dvc-dsc-mood-sub-size: 12px;
  --dvc-dsc-mood-sub-alpha: 0.92;
  --dvc-dsc-mood-fg: #fff;
  --dvc-dsc-mood-layer: 3;

  /* --- listings head + sort menu --- */
  --dvc-dsc-list-head-margin-block-start: 8px;
  --dvc-dsc-list-head-margin-block-end: 16px;
  --dvc-dsc-list-head-margin-inline: 2px;
  --dvc-dsc-sort-size: 13.5px;
  --dvc-dsc-sort-indent: 24px;
  --dvc-dsc-sort-menu-min: 280px;

  /* --- map mode --- */
  --dvc-dsc-map-list-basis: 640px;
  --dvc-dsc-map-list-pad-block: 20px;
  --dvc-dsc-map-list-pad-inline: 24px;
  --dvc-dsc-map-head-margin: 14px;
  --dvc-dsc-map-count-size: 16px;
  --dvc-dsc-map-note-size: 13px;
  --dvc-dsc-map-min-block: 24rem;
  --dvc-dsc-map-search-inset: 18px;
  --dvc-dsc-map-search-pad-block: 8px;
  --dvc-dsc-map-search-pad-inline: 14px;
  --dvc-dsc-map-search-size: 13px;
  --dvc-dsc-overlay-layer: 5;
  --dvc-dsc-preview-inset: 22px;
  --dvc-dsc-preview-inline-size: 290px;
  --dvc-dsc-preview-photo-inline: 104px;
  --dvc-dsc-preview-photo-block: 108px;
  --dvc-dsc-preview-pad-block: 12px;
  --dvc-dsc-preview-pad-inline: 14px;
  --dvc-dsc-preview-name-size: 13.5px;
  --dvc-dsc-preview-meta-size: 12px;
  --dvc-dsc-preview-price-size: 17px;

  /* --- filter sheet --- */
  --dvc-dsc-sheet-layer: 300;
  --dvc-dsc-sheet-inline-size: 440px;
  --dvc-dsc-sheet-max-inline: 94vw;
  --dvc-dsc-sheet-scrim-bg: rgba(20, 16, 12, 0.42);
  --dvc-dsc-sheet-blur: 2px;
  --dvc-dsc-sheet-head-pad-block: 18px;
  --dvc-dsc-sheet-pad-inline: 22px;
  --dvc-dsc-sheet-title-size: 17px;
  --dvc-dsc-sheet-group-pad: 20px;
  --dvc-dsc-sheet-group-title-size: 14.5px;
  --dvc-dsc-sheet-group-title-gap: 13px;
  --dvc-dsc-range-gap: 8px;
  --dvc-dsc-range-hint-size: 13px;
  --dvc-dsc-chip-pad-block: 8px;
  --dvc-dsc-chip-pad-inline: 14px;
  --dvc-dsc-chip-size: 13.5px;
  --dvc-dsc-toggle-gap: 16px;
  --dvc-dsc-toggle-name-size: 14px;
  --dvc-dsc-toggle-sub-size: 12.5px;
  --dvc-dsc-sheet-foot-pad-block: 16px;
  --dvc-dsc-sheet-slide: 30px;
  --dvc-dsc-sheet-slide-alpha: 0.4;
  --dvc-dsc-sheet-anim-duration: 0.28s;
}

/* ---------- hero ---------- */

.dsc-hero-eyebrow {
  font-size: var(--dvc-dsc-hero-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--dvc-dsc-hero-eyebrow-tracking);
  text-transform: uppercase;
  opacity: var(--dvc-dsc-hero-eyebrow-alpha);
  white-space: nowrap;
}

.dsc-hero-title {
  font-size: var(--dvc-dsc-hero-title-size);
  line-height: 1.04;
}

.dsc-hero-sub {
  font-size: var(--dvc-dsc-hero-sub-size);
  opacity: var(--dvc-dsc-hero-sub-alpha);
  max-inline-size: var(--dvc-dsc-hero-measure);
}

/* ---------- sticky search / filter / view bar ---------- */

.dsc-bar {
  position: sticky;
  inset-block-start: var(--dvc-topnav-block-size);
  z-index: var(--dvc-dsc-bar-layer);
  background: var(--dvc-surface);
  border-block-end: var(--dvc-border-width-hairline) solid var(--dvc-line);
  padding-block: var(--dvc-dsc-bar-pad-block);
  padding-inline: var(--dvc-dsc-bar-pad-inline);
}

.dsc-bar-form {
  display: flex;
  align-items: center;
  gap: var(--dvc-dsc-bar-gap);
}

/* ---------- search pill (_SearchPill) ---------- */

.dsc-pill {
  display: flex;
  align-items: center;
  flex: 0 1 var(--dvc-dsc-pill-basis);
  min-inline-size: 0;
  block-size: var(--dvc-dsc-pill-block-size);
  background: var(--dvc-surface);
  border: var(--dvc-border-width-hairline) solid var(--dvc-line);
  border-radius: var(--dvc-radius-pill);
  box-shadow: var(--dvc-shadow-md);
  transition: box-shadow var(--dvc-dsc-transition);
}

.dsc-pill:hover {
  box-shadow: var(--dvc-shadow-lg);
}

.dsc-pill > .sp-picker {
  align-self: stretch;
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

.dsc-pill > .sp-picker > summary {
  block-size: 100%;
  min-inline-size: 0;
  padding-inline: var(--dvc-dsc-pill-cell-pad);
  border-radius: var(--dvc-radius-pill);
  transition: background-color var(--dvc-dsc-transition);
}

.dsc-pill > .sp-picker > summary:hover {
  background: var(--dvc-sand);
}

.dsc-pill > .sp-picker[data-picker="resort"] {
  flex: 1 1 0;
}

.dsc-pill [data-picker="resort"] > summary {
  inline-size: 100%;
}

.dsc-pill [data-picker="resort"] .sp-picker-trigger-copy {
  min-inline-size: 0;
}

.dsc-pill [data-picker="resort"] .sp-picker-trigger-value {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dsc-pill-divider {
  flex: none;
  inline-size: var(--dvc-border-width-hairline);
  block-size: var(--dvc-dsc-pill-divider-block);
  background: var(--dvc-line);
}

.dsc-pill-submit {
  flex: none;
  margin: var(--dvc-dsc-pill-submit-inset);
  block-size: var(--dvc-dsc-pill-submit-size);
  padding-inline: var(--dvc-dsc-pill-submit-pad);
}

/* ---------- quick-filter chips ---------- */

.dsc-bar-chips {
  display: flex;
  gap: var(--dvc-dsc-chips-gap);
  overflow: hidden;
  flex: 1;
  min-inline-size: 0;
}

.dsc-chip-link {
  flex: none;
  text-decoration: none;
  border-radius: var(--dvc-radius-pill);
}

.dsc-chip-link .dvc-chip {
  white-space: nowrap;
  cursor: pointer;
}

.dsc-chip-link[aria-current="true"] .dvc-chip {
  background: var(--dvc-ink);
  color: var(--dvc-surface);
  border-color: var(--dvc-ink);
}

/* ---------- List / Map segmented (GET links inside the dvc-segmented pill) ---------- */

.dsc-view-seg {
  flex: none;
}

.dsc-seg-link {
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-dsc-gap-5);
  padding: var(--dvc-seg-btn-pad-block) var(--dvc-seg-btn-pad-inline);
  font-size: var(--dvc-seg-btn-font-size);
  font-weight: 600;
  color: var(--dvc-muted);
  border-radius: var(--dvc-radius-pill);
  text-decoration: none;
  transition: background-color var(--dvc-dsc-transition), color var(--dvc-dsc-transition), box-shadow var(--dvc-dsc-transition);
}

.dsc-seg-link[data-active="true"] {
  background: var(--dvc-surface);
  color: var(--dvc-ink);
  box-shadow: var(--dvc-shadow-sm);
}

.dsc-bar-filters {
  flex: none;
}

/* ---------- content sections ---------- */

.dsc-content {
  padding-block: var(--dvc-dsc-content-pad-block-start) var(--dvc-dsc-content-pad-block-end);
  padding-inline: var(--dvc-dsc-content-pad-inline);
}

.dsc-mood {
  margin-block-end: var(--dvc-dsc-section-gap);
}

.dsc-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-block-end: var(--dvc-dsc-section-head-gap);
}

.dsc-section-title {
  margin-block: 0;
  font-size: var(--dvc-dsc-section-title-size);
  font-weight: 800;
  letter-spacing: var(--dvc-display-spacing);
}

.dsc-collections-link {
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-dsc-link-gap);
  font-size: var(--dvc-dsc-link-size);
  font-weight: 600;
  color: var(--dvc-color-action-ink);
  text-decoration: none;
}

/* ---------- mood tiles ---------- */

.dsc-mood-tile {
  position: relative;
  display: block;
  block-size: var(--dvc-dsc-mood-tile-block-size);
  border-radius: var(--dvc-radius-lg);
  overflow: hidden;
  color: var(--dvc-dsc-mood-fg);
  text-decoration: none;
}

.dsc-mood-tile .dvc-photo {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.dsc-mood-copy {
  position: absolute;
  inset: 0;
  z-index: var(--dvc-dsc-mood-layer);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--dvc-dsc-mood-pad);
}

.dsc-mood-name {
  font-family: var(--dvc-font-display);
  font-size: var(--dvc-dsc-mood-name-size);
  font-weight: 500;
}

.dsc-mood-sub {
  font-size: var(--dvc-dsc-mood-sub-size);
  font-weight: 600;
  opacity: var(--dvc-dsc-mood-sub-alpha);
  margin-block-start: var(--dvc-dsc-gap-2);
}

/* ---------- listings head + sort menu ---------- */

.dsc-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-block: var(--dvc-dsc-list-head-margin-block-start) var(--dvc-dsc-list-head-margin-block-end);
  margin-inline: var(--dvc-dsc-list-head-margin-inline);
}

.dsc-sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-dsc-link-gap);
  font-family: inherit;
  font-size: var(--dvc-dsc-sort-size);
  color: var(--dvc-muted);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.dsc-sort-menu {
  min-inline-size: var(--dvc-dsc-sort-menu-min);
}

.dsc-sort-pad {
  margin-inline-start: var(--dvc-dsc-sort-indent);
}

/* ---------- map mode ---------- */

.dsc-map-screen {
  display: flex;
  flex-direction: column;
  block-size: calc(100dvh - var(--dvc-topnav-block-size));
  min-block-size: 0;
}

.dsc-map-split {
  display: flex;
  flex: 1;
  min-block-size: 0;
}

.dsc-map-list {
  flex: 0 0 var(--dvc-dsc-map-list-basis);
  inline-size: var(--dvc-dsc-map-list-basis);
  overflow-y: auto;
  padding-block: var(--dvc-dsc-map-list-pad-block);
  padding-inline: var(--dvc-dsc-map-list-pad-inline);
  border-inline-end: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

.dsc-map-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-block-end: var(--dvc-dsc-map-head-margin);
}

.dsc-map-count {
  font-size: var(--dvc-dsc-map-count-size);
}

.dsc-map-note {
  font-size: var(--dvc-dsc-map-note-size);
  color: var(--dvc-muted);
}

.dsc-map-canvas {
  flex: 1;
  min-inline-size: 0;
}

.dsc-pin-link {
  color: inherit;
  text-decoration: none;
}

.dsc-map-search {
  position: absolute;
  inset-block-start: var(--dvc-dsc-map-search-inset);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: var(--dvc-dsc-overlay-layer);
  text-decoration: none;
}

.dsc-map-search .dvc-badge {
  background: var(--dvc-surface);
  color: var(--dvc-ink);
  box-shadow: var(--dvc-shadow-md);
  padding: var(--dvc-dsc-map-search-pad-block) var(--dvc-dsc-map-search-pad-inline);
  font-size: var(--dvc-dsc-map-search-size);
  cursor: pointer;
}

.dsc-map-preview {
  position: absolute;
  inset-block-end: var(--dvc-dsc-preview-inset);
  inset-inline-start: var(--dvc-dsc-preview-inset);
  inline-size: var(--dvc-dsc-preview-inline-size);
  z-index: var(--dvc-dsc-overlay-layer);
  overflow: hidden;
  box-shadow: var(--dvc-shadow-lg);
}

.dsc-map-preview-link {
  display: flex;
  color: inherit;
  text-decoration: none;
}

.dsc-map-preview .dvc-photo {
  flex: 0 0 var(--dvc-dsc-preview-photo-inline);
  inline-size: var(--dvc-dsc-preview-photo-inline);
  block-size: var(--dvc-dsc-preview-photo-block);
  border-radius: 0;
}

.dsc-map-preview .dvc-stars {
  --dvc-stars-glyph-size: 12px;
}

.dsc-map-preview-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-inline-size: 0;
  padding-block: var(--dvc-dsc-preview-pad-block);
  padding-inline: var(--dvc-dsc-preview-pad-inline);
}

.dsc-map-preview-head {
  display: flex;
  justify-content: space-between;
  gap: var(--dvc-dsc-gap-6);
}

.dsc-map-preview-name {
  font-size: var(--dvc-dsc-preview-name-size);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dsc-map-preview-room {
  font-size: var(--dvc-dsc-preview-meta-size);
  color: var(--dvc-muted);
  margin-block-start: var(--dvc-dsc-gap-2);
}

.dsc-map-preview-price {
  margin-block-start: var(--dvc-dsc-gap-8);
}

.dsc-price {
  font-size: var(--dvc-dsc-preview-price-size);
  font-weight: 800;
}

.dsc-map-preview-nights {
  font-size: var(--dvc-dsc-preview-meta-size);
  font-weight: 600;
  color: var(--dvc-muted);
}

/* ---------- filter sheet (_FilterSheet) ---------- */

.dsc-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--dvc-dsc-sheet-layer);
  display: flex;
  justify-content: flex-end;
}

.dsc-sheet-scrim {
  position: absolute;
  inset: 0;
  background: var(--dvc-dsc-sheet-scrim-bg);
  backdrop-filter: blur(var(--dvc-dsc-sheet-blur));
}

.dsc-sheet-scrim .dvc-scrim {
  position: absolute;
  inset: 0;
}

.dsc-sheet-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: var(--dvc-dsc-sheet-inline-size);
  max-inline-size: var(--dvc-dsc-sheet-max-inline);
  block-size: 100%;
  background: var(--dvc-surface);
  box-shadow: var(--dvc-shadow-lg);
  animation: dsc-sheet-in var(--dvc-dsc-sheet-anim-duration) var(--dvc-ease-out) both;
}

.dsc-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--dvc-dsc-sheet-head-pad-block);
  padding-inline: var(--dvc-dsc-sheet-pad-inline);
  border-block-end: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

.dsc-sheet-title {
  font-size: var(--dvc-dsc-sheet-title-size);
}

.dsc-sheet-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-block-size: 0;
}

.dsc-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding-inline: var(--dvc-dsc-sheet-pad-inline);
}

.dsc-sheet-group {
  margin: 0;
  padding-block: var(--dvc-dsc-sheet-group-pad);
  padding-inline: 0;
  border: 0;
  border-block-end: var(--dvc-border-width-hairline) solid var(--dvc-line);
  min-inline-size: 0;
}

.dsc-sheet-group-title {
  padding: 0;
  margin-block-end: var(--dvc-dsc-sheet-group-title-gap);
  font-size: var(--dvc-dsc-sheet-group-title-size);
  font-weight: 800;
}

.dsc-range-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--dvc-dsc-range-gap);
}

.dsc-range-hint {
  font-size: var(--dvc-dsc-range-hint-size);
  color: var(--dvc-muted);
}

.dsc-tnum {
  font-variant-numeric: tabular-nums;
}

.dsc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dvc-dsc-chips-gap);
}

.dsc-chip-choice {
  position: relative;
  cursor: pointer;
}

.dsc-chip-choice > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dsc-chip-face {
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-dsc-gap-6);
  padding: var(--dvc-dsc-chip-pad-block) var(--dvc-dsc-chip-pad-inline);
  font-size: var(--dvc-dsc-chip-size);
  font-weight: 600;
  border-radius: var(--dvc-radius-pill);
  background: var(--dvc-sand);
  color: var(--dvc-ink-2);
  border: var(--dvc-border-width-hairline) solid var(--dvc-line);
  transition: background-color var(--dvc-dsc-transition), color var(--dvc-dsc-transition);
}

.dsc-chip-choice:has(input:checked) .dsc-chip-face {
  background: var(--dvc-ink);
  color: var(--dvc-surface);
  border-color: var(--dvc-ink);
}

.dsc-chip-choice:has(input:focus-visible) .dsc-chip-face {
  outline: var(--dvc-dsc-focus-ring) solid var(--dvc-color-action);
  outline-offset: var(--dvc-dsc-focus-offset);
}

.dsc-toggle-list {
  display: flex;
  flex-direction: column;
  gap: var(--dvc-dsc-toggle-gap);
}

.dsc-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: var(--dvc-dsc-gap-2);
}

.dsc-toggle-name {
  font-size: var(--dvc-dsc-toggle-name-size);
  font-weight: 600;
}

.dsc-toggle-sub {
  font-size: var(--dvc-dsc-toggle-sub-size);
  font-weight: 400;
  color: var(--dvc-muted);
}

.dsc-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--dvc-dsc-sheet-foot-pad-block);
  padding-inline: var(--dvc-dsc-sheet-pad-inline);
  border-block-start: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

@keyframes dsc-sheet-in {
  from {
    transform: translateX(var(--dvc-dsc-sheet-slide));
    opacity: var(--dvc-dsc-sheet-slide-alpha);
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ---------- responsive (1024 / 900 px in em; grids collapse via app-grid-*) ---------- */

@media (max-width: 64em) {
  .dsc-bar-form {
    flex-wrap: wrap;
  }

  .dsc-pill {
    flex: 1 1 100%;
  }
}

@media (max-width: 56.25em) {
  .dsc-map-screen {
    block-size: auto;
  }

  .dsc-map-split {
    flex-direction: column;
  }

  .dsc-map-list {
    flex: 1 1 auto;
    inline-size: auto;
    border-inline-end: 0;
    border-block-end: var(--dvc-border-width-hairline) solid var(--dvc-line);
  }

  .dsc-map-canvas {
    min-block-size: var(--dvc-dsc-map-min-block);
  }
}