/* ==========================================================================
   JANET — DEAL HUNTER SURFACES
   The three flights, the three hotels, the three trips, and the running total.

   Loads after janet_premium.css and reuses its tokens rather than defining a
   second palette. Every foreground/background pair below is taken from that
   scale on purpose:

     --jp-text    on --jp-raised   17:1     headings, prices, card body
     --jp-text-2  on --jp-raised   10:1     secondary facts, breakdown labels
     --jp-text-3  on --jp-raised    5.4:1   the quietest legal minimum, used
                                            only for short muted labels

   Nothing here drops below --jp-text-3, and no surface is lighter than
   --jp-elevated, so there is no pairing on this page that can land light-on-
   light. That is the failure the previous pass shipped, and it is prevented by
   never introducing a light surface at all rather than by correcting one later.
   ========================================================================== */

/* == sections ============================================================= */

.jdh {
  margin-block: clamp(1.6rem, 3.5vw, 2.6rem);
}

.jdh__head {
  margin-block-end: clamp(.9rem, 2vw, 1.25rem);
}

.jdh__h {
  margin: 0 0 .3rem;
  font: 800 clamp(1.25rem, 3.4vw, 1.85rem)/1.15 var(--font-display, "Frank Ruhl Libre", serif);
  color: var(--jp-text, #F4F1EA);
  letter-spacing: -.01em;
}

.jdh__h::after {
  content: "";
  display: block;
  inline-size: 3rem;
  block-size: 2px;
  margin-block-start: .55rem;
  background: linear-gradient(90deg, var(--jp-gold, #E8C989), transparent);
}

.jdh__sub {
  margin: 0;
  font: 500 .875rem/1.5 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-2, #C6CCD8);
}

.jdh__grid {
  display: grid;
  gap: clamp(.75rem, 1.8vw, 1.1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  align-items: start;
}

/* The full list is denser than the three picks — it is a list, not a decision. */
.jdh__grid--all {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
}

/*
 * V2: photography leads the hotel card. On desktop widths the grid breathes
 * (larger minimum card, more gap) so the provider photo reads as the hero of
 * the card instead of a thumbnail squeezed above text. Additive layer only —
 * mobile keeps the proven compact layout untouched.
 */
@media (min-width: 1024px) {
  .jdh__grid--all { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.4rem; }
  .jdh-card--hotel .jdh-card__ph { aspect-ratio: 16 / 11; }
  .jdh-card--hotel .jdh-card__ph img { transition: transform .45s ease; }
  .jdh-card--hotel:hover .jdh-card__ph img { transform: scale(1.035); }
  @media (prefers-reduced-motion: reduce) {
    .jdh-card--hotel .jdh-card__ph img, .jdh-card--hotel:hover .jdh-card__ph img { transition: none; transform: none; }
  }
}

.jdh__more {
  margin-block-start: 1rem;
  display: flex;
  justify-content: center;
}

.jdh__toggle {
  min-block-size: 44px;
  padding-inline: 1.4rem;
  border: 1px solid var(--jp-line-strong, rgba(232,201,137,.34));
  border-radius: 999px;
  background: transparent;
  color: var(--jp-gold, #E8C989);
  font: 700 .9rem/1 var(--font, "Assistant", sans-serif);
  cursor: pointer;
  transition: background var(--jp-fast, 160ms) var(--jp-out, ease),
              border-color var(--jp-fast, 160ms) var(--jp-out, ease);
}

.jdh__toggle:hover,
.jdh__toggle:focus-visible {
  background: rgba(232, 201, 137, .1);
  border-color: var(--jp-gold, #E8C989);
}

/* == cards ================================================================ */

.jdh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: clamp(.9rem, 2vw, 1.15rem);
  border: 1px solid var(--jp-line, rgba(232,201,137,.16));
  border-radius: var(--jp-r, 18px);
  background: var(--jp-raised, #0E131D);
  box-shadow: var(--jp-e2, 0 4px 16px rgba(0,0,0,.45));
  color: var(--jp-text, #F4F1EA);
  transition: transform var(--jp-mid, 280ms) var(--jp-expo, ease),
              border-color var(--jp-mid, 280ms) var(--jp-out, ease),
              box-shadow var(--jp-mid, 280ms) var(--jp-out, ease);
}

.jdh-card:hover {
  transform: translateY(-2px);
  border-color: var(--jp-line-strong, rgba(232,201,137,.34));
  box-shadow: var(--jp-e3, 0 12px 36px rgba(0,0,0,.5));
}

/* A selected card is unmistakable without changing its size — a card that
   grows on selection reflows every card beside it. */
.jdh-card[data-jdh-on] {
  border-color: var(--jp-gold, #E8C989);
  box-shadow: var(--jp-e3, 0 12px 36px rgba(0,0,0,.5)), var(--jp-glow, 0 8px 30px rgba(232,201,137,.16));
}

.jdh-card__roles {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.jdh-role {
  display: inline-flex;
  align-items: center;
  padding: .28rem .6rem;
  border-radius: 999px;
  font: 800 .7rem/1 var(--font, "Assistant", sans-serif);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Gold fill carries dark ink — the one place on this page where the
   foreground is dark, and its background is fixed and light enough for it. */
.jdh-role--pick  { background: var(--jp-gold, #E8C989); color: #12161F; }
.jdh-role--cheap { background: rgba(232,201,137,.14); color: var(--jp-gold-pale, #F6E7C4); border: 1px solid var(--jp-line-strong, rgba(232,201,137,.34)); }
.jdh-role--value { background: rgba(140, 190, 255, .14); color: #CFE2FF; border: 1px solid rgba(140,190,255,.34); }
.jdh-role--alt   { background: rgba(244,241,234,.09); color: var(--jp-text-2, #C6CCD8); border: 1px solid var(--jp-line-soft, rgba(244,241,234,.09)); }
.jdh-role--sec   { font-weight: 700; }

.jdh-card__air {
  font: 700 1.02rem/1.25 var(--font, "Assistant", sans-serif);
  color: var(--jp-text, #F4F1EA);
}
.jdh-card__air small { color: var(--jp-text-3, #949CAB); font-weight: 600; }

.jdh-card__name {
  margin: 0;
  font: 700 1.05rem/1.3 var(--font-display, "Frank Ruhl Libre", serif);
  color: var(--jp-text, #F4F1EA);
}

/* == flight legs ========================================================== */

.jdh-legs {
  display: grid;
  gap: .45rem;
}

.jdh-leg {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: .45rem;
  padding: .5rem .6rem;
  border-radius: var(--jp-r-sm, 12px);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--jp-line-soft, rgba(244,241,234,.09));
}

.jdh-leg__tag {
  font: 800 .68rem/1 var(--font, "Assistant", sans-serif);
  color: var(--jp-gold, #E8C989);
  text-transform: none;
}

.jdh-leg__t {
  font: 800 1.05rem/1 var(--font, "Assistant", sans-serif);
  color: var(--jp-text, #F4F1EA);
  font-variant-numeric: tabular-nums;
}

.jdh-leg__d {
  font: 600 .78rem/1 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-2, #C6CCD8);
}

.jdh-leg__r {
  justify-self: start;
  font: 600 .78rem/1 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-3, #949CAB);
  letter-spacing: .03em;
}

/* == facts ================================================================ */

.jdh-facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .5rem;
}

.jdh-facts li {
  font: 600 .8rem/1.35 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-2, #C6CCD8);
  padding: .22rem .5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.jdh-unk {
  color: var(--jp-text-3, #949CAB);
  font-style: italic;
  font-weight: 600;
}

/* == price ================================================================ */

.jdh-card__price {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  padding-block-start: .55rem;
  border-block-start: 1px solid var(--jp-line-soft, rgba(244,241,234,.09));
}

.jdh-price__total {
  font: 800 clamp(1.5rem, 3.6vw, 1.9rem)/1 var(--font, "Assistant", sans-serif);
  color: var(--jp-gold-pale, #F6E7C4);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.jdh-price__note {
  font: 600 .8rem/1.35 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-2, #C6CCD8);
}

.jdh-price__tax {
  font: 600 .76rem/1.35 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-3, #949CAB);
}

.jdh-fresh {
  align-self: flex-start;
  margin-block-start: .25rem;
  padding: .22rem .55rem;
  border-radius: 999px;
  /* .75rem, not .7rem. This badge is the freshness disclosure — "מחיר שנמדד
     קודם" versus a live price — so it is the one label on the card whose
     unreadability has a cost. Measured at 375px it rendered at 11.2px; Hebrew
     has no ascenders or descenders to carry legibility that far down. The rest
     of the badge scale is left alone: it is a deliberate system, not a defect. */
  font: 700 .75rem/1 var(--font, "Assistant", sans-serif);
}

.jdh-fresh--live    { background: rgba(120, 220, 160, .15); color: #A7E9C4; border: 1px solid rgba(120,220,160,.32); }
.jdh-fresh--cached  { background: rgba(232, 201, 137, .13); color: var(--jp-gold-pale, #F6E7C4); border: 1px solid var(--jp-line-strong, rgba(232,201,137,.34)); }
.jdh-fresh--ind     { background: rgba(244, 241, 234, .08); color: var(--jp-text-2, #C6CCD8); border: 1px solid var(--jp-line-soft, rgba(244,241,234,.09)); }
.jdh-fresh--sandbox { background: rgba(255, 140, 140, .14); color: #FFC4C4; border: 1px solid rgba(255,140,140,.34); }
.jdh-fresh--off     { background: rgba(244, 241, 234, .06); color: var(--jp-text-3, #949CAB); border: 1px solid var(--jp-line-soft, rgba(244,241,234,.09)); }

/* == why ================================================================== */

.jdh-why {
  margin: 0;
  padding: .55rem .7rem;
  border-radius: var(--jp-r-sm, 12px);
  background: rgba(232, 201, 137, .07);
  border: 1px solid var(--jp-line, rgba(232,201,137,.16));
  font: 500 .84rem/1.5 var(--font, "Assistant", sans-serif);
  color: var(--jp-text, #F4F1EA);
}

.jdh-why strong { color: var(--jp-gold-pale, #F6E7C4); font-weight: 800; }

/* == hotel photo ========================================================== */

.jdh-card__ph {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--jp-r-sm, 12px);
  overflow: hidden;
  background: var(--jp-overlay, #141B28);
}

.jdh-card__ph img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--jp-slow, 460ms) var(--jp-expo, ease);
}

.jdh-card:hover .jdh-card__ph img { transform: scale(1.04); }

.jdh-card__ph--none {
  display: grid;
  place-items: center;
  block-size: 100%;
  font: 600 .8rem/1 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-3, #949CAB);
}

.jdh-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.jdh-stars { color: var(--jp-gold, #E8C989); font-size: .95rem; letter-spacing: .04em; }

.jdh-rate {
  font: 800 .88rem/1 var(--font, "Assistant", sans-serif);
  color: var(--jp-text, #F4F1EA);
}
.jdh-rate small { font-weight: 600; color: var(--jp-text-3, #949CAB); }

.jdh-city { font: 600 .8rem/1 var(--font, "Assistant", sans-serif); color: var(--jp-text-2, #C6CCD8); }

/* == package breakdown ==================================================== */

.jdh-pkg__total {
  font: 800 clamp(1.8rem, 4.6vw, 2.4rem)/1 var(--font, "Assistant", sans-serif);
  color: var(--jp-gold-pale, #F6E7C4);
  font-variant-numeric: tabular-nums;
}

.jdh-pkg__pp {
  font: 600 .85rem/1.3 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-2, #C6CCD8);
}

.jdh-break { margin: 0; display: grid; gap: .3rem; }

.jdh-break > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem;
  padding-block: .35rem;
  border-block-end: 1px solid var(--jp-line-soft, rgba(244,241,234,.09));
}

.jdh-break dt {
  font: 600 .82rem/1.35 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-2, #C6CCD8);
}

.jdh-break dd {
  margin: 0;
  font: 700 .92rem/1 var(--font, "Assistant", sans-serif);
  color: var(--jp-text, #F4F1EA);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jdh-break__sum { border-block-end: 0 !important; padding-block-start: .5rem !important; }
.jdh-break__sum dt { color: var(--jp-text, #F4F1EA); font-weight: 800; }
.jdh-break__sum dd { color: var(--jp-gold-pale, #F6E7C4); font-size: 1.1rem; font-weight: 800; }

/* == actions ============================================================== */

.jdh-card__act {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-block-start: auto;
  padding-block-start: .6rem;
}

.jdh-select {
  min-block-size: 44px;
  inline-size: 100%;
  border: 1px solid var(--jp-line-strong, rgba(232,201,137,.34));
  border-radius: var(--jp-r-sm, 12px);
  background: rgba(232, 201, 137, .1);
  color: var(--jp-gold-pale, #F6E7C4);
  font: 800 .9rem/1 var(--font, "Assistant", sans-serif);
  cursor: pointer;
  transition: background var(--jp-fast, 160ms) var(--jp-out, ease),
              color var(--jp-fast, 160ms) var(--jp-out, ease);
}

.jdh-select:hover,
.jdh-select:focus-visible { background: rgba(232, 201, 137, .2); }

.jdh-select[data-jdh-on] {
  background: var(--jp-gold, #E8C989);
  color: #12161F;
  border-color: var(--jp-gold, #E8C989);
}

.jdh-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  inline-size: 100%;
  padding-inline: 1rem;
  border-radius: var(--jp-r-sm, 12px);
  background: linear-gradient(135deg, var(--jp-gold, #E8C989), var(--jp-gold-warm, #D9B36A));
  color: #12161F;
  font: 800 .92rem/1 var(--font, "Assistant", sans-serif);
  text-decoration: none;
  box-shadow: var(--jp-e1, 0 1px 2px rgba(0,0,0,.4));
  transition: filter var(--jp-fast, 160ms) var(--jp-out, ease);
}

.jdh-cta:hover, .jdh-cta:focus-visible { filter: brightness(1.08); }

/* A CTA that cannot be followed must not look like one that can. */
.jdh-cta--off {
  background: rgba(244, 241, 234, .07);
  color: var(--jp-text-3, #949CAB);
  border: 1px dashed var(--jp-line-soft, rgba(244,241,234,.09));
  box-shadow: none;
  cursor: not-allowed;
}

.jdh-explain {
  margin: 0;
  font: 500 .74rem/1.45 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-3, #949CAB);
}

/* == empty states ========================================================= */

.jdh-none {
  padding: 1.1rem 1.2rem;
  border: 1px dashed var(--jp-line, rgba(232,201,137,.16));
  border-radius: var(--jp-r, 18px);
  background: rgba(255, 255, 255, .025);
  color: var(--jp-text-2, #C6CCD8);
  font: 500 .88rem/1.55 var(--font, "Assistant", sans-serif);
  grid-column: 1 / -1;
}

.jdh-none strong { display: block; color: var(--jp-text, #F4F1EA); font-weight: 800; margin-block-end: .2rem; }

/* The way out of an empty result: the star levels that DO have a priced hotel.
   A dead end with a door in it. */
.jdh-none__alt {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin-block-start: .7rem;
}
.jdh-none__alt > span { color: var(--jp-text-3, #96A0B0); font-size: .82rem; }
.jdh-none__lvl {
  min-height: 38px;
  padding: .35rem .8rem;
  border: 1px solid var(--jp-gold, #E8C989);
  border-radius: 999px;
  background: transparent;
  color: var(--jp-gold, #E8C989);
  font: 700 .82rem/1 var(--font, "Assistant", sans-serif);
  cursor: pointer;
}
.jdh-none__lvl:hover, .jdh-none__lvl:focus-visible {
  background: var(--jp-gold, #E8C989);
  color: var(--jp-void, #0A0E15);
}

/* == hunting stages ======================================================= */

.jdh-hunt {
  display: grid;
  gap: .5rem;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--jp-line, rgba(232,201,137,.16));
  border-radius: var(--jp-r, 18px);
  background: var(--jp-raised, #0E131D);
}

.jdh-hunt__h {
  margin: 0 0 .35rem;
  font: 800 1.05rem/1.3 var(--font-display, "Frank Ruhl Libre", serif);
  color: var(--jp-gold-pale, #F6E7C4);
}

.jdh-hunt__row {
  display: flex;
  align-items: center;
  gap: .55rem;
  font: 600 .9rem/1.4 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-3, #949CAB);
  transition: color var(--jp-mid, 280ms) var(--jp-out, ease);
}

.jdh-hunt__dot {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--jp-text-3, #949CAB);
  flex: none;
  transition: background var(--jp-mid, 280ms) var(--jp-out, ease),
              box-shadow var(--jp-mid, 280ms) var(--jp-out, ease);
}

.jdh-hunt__row[data-done] { color: var(--jp-text-2, #C6CCD8); }
.jdh-hunt__row[data-done] .jdh-hunt__dot { background: rgba(120, 220, 160, .9); }

.jdh-hunt__row[data-active] { color: var(--jp-text, #F4F1EA); }
.jdh-hunt__row[data-active] .jdh-hunt__dot {
  background: var(--jp-gold, #E8C989);
  box-shadow: 0 0 0 4px rgba(232, 201, 137, .18);
  animation: jdh-pulse 1.4s ease-in-out infinite;
}

@keyframes jdh-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(232, 201, 137, .14); }
  50%      { box-shadow: 0 0 0 7px rgba(232, 201, 137, .05); }
}

/* == YOUR TRIP bar ======================================================== */

.jdh-trip {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--jp-overlay, #141B28) 94%, transparent);
  border-block-start: 1px solid var(--jp-line-strong, rgba(232,201,137,.34));
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .55);
  padding: .7rem clamp(.75rem, 3vw, 1.5rem);
  padding-block-end: max(.7rem, env(safe-area-inset-bottom));
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .jdh-trip { background: var(--jp-overlay, #141B28); }
}

.jdh-trip[hidden] { display: none; }

.jdh-trip__in {
  max-inline-size: 72rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem clamp(.8rem, 2.5vw, 1.6rem);
}

.jdh-trip__legs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  flex: 1 1 16rem;
}

.jdh-trip__leg {
  display: grid;
  gap: .05rem;
  min-inline-size: 6rem;
}

.jdh-trip__lbl {
  font: 700 .7rem/1 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-3, #949CAB);
}

.jdh-trip__val {
  font: 800 1rem/1.15 var(--font, "Assistant", sans-serif);
  color: var(--jp-text, #F4F1EA);
  font-variant-numeric: tabular-nums;
}

.jdh-trip__leg--empty .jdh-trip__val {
  color: var(--jp-text-3, #949CAB);
  font-weight: 600;
  font-size: .85rem;
}

.jdh-trip__leg small {
  font: 500 .72rem/1.3 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-2, #C6CCD8);
  max-inline-size: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jdh-trip__sum {
  display: grid;
  gap: .1rem;
  padding-inline: clamp(.6rem, 2vw, 1.1rem);
  border-inline: 1px solid var(--jp-line-soft, rgba(244,241,234,.09));
}

.jdh-trip__total {
  display: flex;
  align-items: baseline;
  gap: .45rem;
}

.jdh-trip__tl {
  font: 700 .72rem/1 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-3, #949CAB);
}

.jdh-trip__total strong {
  font: 800 1.45rem/1 var(--font, "Assistant", sans-serif);
  color: var(--jp-gold-pale, #F6E7C4);
  font-variant-numeric: tabular-nums;
}

.jdh-trip__meta {
  font: 600 .76rem/1.3 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-2, #C6CCD8);
}

.jdh-trip__act {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1 1 12rem;
  justify-content: flex-end;
}

.jdh-trip__cmp {
  margin: 0;
  font: 700 .82rem/1.35 var(--font, "Assistant", sans-serif);
  color: var(--jp-gold, #E8C989);
  text-align: end;
}

.jdh-trip__clear {
  min-block-size: 44px;
  padding-inline: .9rem;
  border: 1px solid var(--jp-line-soft, rgba(244,241,234,.09));
  border-radius: var(--jp-r-sm, 12px);
  background: transparent;
  color: var(--jp-text-2, #C6CCD8);
  font: 700 .82rem/1 var(--font, "Assistant", sans-serif);
  cursor: pointer;
  white-space: nowrap;
}

.jdh-trip__clear:hover { color: var(--jp-text, #F4F1EA); border-color: var(--jp-line-strong, rgba(232,201,137,.34)); }

/* The bar is fixed, so the page needs room under it or the footer sits
   permanently behind it on short viewports. */
body:has(.jdh-trip:not([hidden])) { padding-block-end: 9rem; }

/* == contrast corrections =================================================
   Four pairs measured on the rendered page at 390px and 1280px, each below
   WCAG AA. They survived the premium redesign because the redesign converted
   token-driven rules, and these four are not token-driven in the way it
   assumed:

     .ls-dh          a hard-coded `linear-gradient(#fff, #FFF8F2)`
     .ls-card__cta   `color:#fff` over --jt-coral-btn, which the premium layer
                     re-points from coral to champagne — white on #E8C989 is
                     1.6:1, and white on the cream hotel variant is 1.13:1
     .ls-trust       --jt-cream-2, still a cream in the dark palette
     .ls-trust__note grey warn text on that same cream, 1.44:1

   White text became unreadable the moment its button turned gold. The fix is
   dark ink on gold — the same pairing .jdh-role--pick already uses — and the
   two cream panels join the dark surface scale. No !important is needed: this
   sheet loads last and these selectors match the originals' specificity.
   ========================================================================= */

.ls-dh {
  background: linear-gradient(135deg, var(--jp-raised, #0E131D), var(--jp-overlay, #141B28));
  border: 1px solid var(--jp-line-strong, rgba(232,201,137,.34));
  box-shadow: var(--jp-e3, 0 12px 36px rgba(0,0,0,.5));
  color: var(--jp-text, #F4F1EA);
}

.ls-dh__badge {
  background: var(--jp-gold, #E8C989);
  color: #12161F;              /* 11.6:1 on #E8C989 */
}

.ls-dh__dest { color: var(--jp-text, #F4F1EA); }
.ls-dh__dates { color: var(--jp-text-2, #C6CCD8); }
.ls-dh__line { color: var(--jp-text, #F4F1EA); }
.ls-dh__line--na { color: var(--jp-text-3, #949CAB); }

.ls-card__cta {
  background: linear-gradient(135deg, var(--jp-gold, #E8C989), var(--jp-gold-warm, #D9B36A));
  color: #12161F;
}
.ls-card__cta:hover { background: var(--jp-gold-pale, #F6E7C4); color: #12161F; }

/* The hotel variant inherited --jt-ink, which is light in the dark palette —
   white text on a near-white button. It becomes an outlined secondary. */
.ls-card__cta--hotel {
  background: transparent;
  border: 1px solid var(--jp-line-strong, rgba(232,201,137,.34));
  color: var(--jp-gold-pale, #F6E7C4);
}
.ls-card__cta--hotel:hover { background: rgba(232, 201, 137, .14); color: var(--jp-gold-pale, #F6E7C4); }

.ls-trust {
  background: var(--jp-raised, #0E131D);
  border: 1px solid var(--jp-line, rgba(232,201,137,.16));
}
.ls-trust h2, .ls-trust__v { color: var(--jp-text, #F4F1EA); }
.ls-trust p, .ls-trust li { color: var(--jp-text-2, #C6CCD8); }
.ls-trust__k { color: var(--jp-text-3, #949CAB); }

.ls-trust__note {
  background: rgba(232, 201, 137, .12);
  color: var(--jp-gold-pale, #F6E7C4);
  border: 1px solid var(--jp-line-strong, rgba(232,201,137,.34));
}

/* == search form additions ================================================ */

.ls-field--sm { min-inline-size: 4.5rem; }
.ls-field--stars { min-inline-size: 8rem; }

/* == responsive =========================================================== */

@media (max-width: 640px) {
  .jdh-trip__in { gap: .5rem .8rem; }
  .jdh-trip__sum { border-inline: 0; padding-inline: 0; }
  .jdh-trip__act { justify-content: space-between; flex-basis: 100%; }
  .jdh-trip__cmp { text-align: start; font-size: .78rem; }
  .jdh-trip__leg { min-inline-size: 4.75rem; }
  .jdh-trip__leg small { max-inline-size: 8rem; }
  body:has(.jdh-trip:not([hidden])) { padding-block-end: 12rem; }
}

@media (max-width: 380px) {
  .jdh-leg { grid-template-columns: auto 1fr; }
  .jdh-leg__r { grid-column: 1 / -1; }
}

/* == reduced motion ======================================================= */

@media (prefers-reduced-motion: reduce) {
  .jdh-card,
  .jdh-card__ph img,
  .jdh-hunt__dot,
  .jdh-hunt__row { transition: none; }
  .jdh-card:hover { transform: none; }
  .jdh-card:hover .jdh-card__ph img { transform: none; }
  .jdh-hunt__row[data-active] .jdh-hunt__dot { animation: none; }
}

/* == filters ============================================================== */

.jdh-filters { margin-block: .75rem; }

.jdh-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .6rem;
}

.jdh-chip,
.jdh-sel {
  min-block-size: 44px;
  padding-inline: .85rem;
  border: 1px solid var(--jp-line, rgba(232,201,137,.16));
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--jp-text-2, #C6CCD8);
  font: 700 .82rem/1 var(--font, "Assistant", sans-serif);
  cursor: pointer;
}

.jdh-sel { border-radius: var(--jp-r-sm, 12px); }

.jdh-chip:hover, .jdh-sel:hover { border-color: var(--jp-line-strong, rgba(232,201,137,.34)); color: var(--jp-text, #F4F1EA); }

.jdh-chip[data-active] {
  background: var(--jp-gold, #E8C989);
  border-color: var(--jp-gold, #E8C989);
  color: #12161F;
}

.jdh-range {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-block-size: 44px;
  padding-inline: .75rem;
  border: 1px solid var(--jp-line, rgba(232,201,137,.16));
  border-radius: var(--jp-r-sm, 12px);
  font: 700 .82rem/1 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-2, #C6CCD8);
}
.jdh-range output { color: var(--jp-gold-pale, #F6E7C4); font-variant-numeric: tabular-nums; }
.jdh-range input { inline-size: 8rem; accent-color: var(--jp-gold, #E8C989); }

.jdh-filters__count {
  margin-inline-start: auto;
  font: 600 .8rem/1 var(--font, "Assistant", sans-serif);
  color: var(--jp-text-3, #949CAB);
}

/* == hotel filter controls ================================================
   `.ls-chip` had a hard-coded `background:#fff`, and `.ls-sort__btn[data-active]`
   kept white text on what is now champagne. Neither appears until hotel results
   render, so a page-load sweep never saw them — the same reason their 36px tap
   target survived until a live search caught it. Measured at 1.61:1 and 1.6:1.
   ========================================================================= */

.ls-chip {
  background: rgba(255, 255, 255, .04);
  border-color: var(--jp-line, rgba(232,201,137,.16));
  color: var(--jp-text-2, #C6CCD8);
}
.ls-chip:hover { background: rgba(255, 255, 255, .08); color: var(--jp-text, #F4F1EA); }
.ls-chip[data-active] {
  background: var(--jp-gold, #E8C989);
  border-color: var(--jp-gold, #E8C989);
  color: #12161F;
}

.ls-sort__btn { color: var(--jp-text-2, #C6CCD8); }
.ls-sort__btn:hover { background: rgba(255, 255, 255, .06); color: var(--jp-text, #F4F1EA); }
.ls-sort__btn[data-active] {
  background: var(--jp-gold, #E8C989);
  border-color: var(--jp-gold, #E8C989);
  color: #12161F;
}

/* == every remaining white surface on the search page =====================
   janet_live_search.css carries 16 rules with a hard-coded `background:#fff`.
   The premium layer converted the ones that were visible when it was written;
   the rest only render for particular data — activity highlights appear for
   Athens and not Rome, flexible-date cards need alternates, package cards need
   a priced hotel — so each one surfaced as a separate "new" contrast failure
   as the audit happened to hit a destination that produced it.

   Chasing them one destination at a time is how the last three appeared. All
   sixteen are converted here in one place, listed by name so the set is
   auditable against the source, and so a seventeenth added later shows up as a
   difference rather than as a surprise in production.
   ========================================================================= */

.ls-field input, .ls-field select,
.ls-ac,
.ls-empty, .ls-error,
.ls-sum__c,
.ls-card,
.ls-flex__c,
.ls-cal,
.ls-refresh,
.ls-hotels__none,
.ls-hotel-card,
.ls-trip,
.ls-act-hl,
.ls-hskel-card,
.ls-pkg,
/* 2026-08-18 additions: saved-search threshold input + favorites rows */
.ls-save__l input,
.jfav__row {
  background: var(--jp-raised, #0E131D);
  border-color: var(--jp-line, rgba(232,201,137,.16));
  color: var(--jp-text, #F4F1EA);
}

.ls-hotels__l:hover { background: var(--jp-overlay, #141B28); }

/*
 * Attribute/state variants that RESURRECT the light theme. The block above
 * converts the bare selectors at (0,1,0), but three variants in
 * janet_live_search.css carry (0,2,0) hard-coded white gradients and win the
 * cascade — while the premium token re-point turns their text near-white.
 * Found by the 2026-08-18 night audit workflow, contrast measured 1.05-1.6:1:
 * the Janet-pick quote, the hero "cheapest" tile and the flex-dates saving
 * card were all white-on-white on the dark page. Same specificity here so the
 * dark scale wins again.
 */
.ls-janet {
  background: var(--jp-raised, #0E131D);
  border-color: var(--jp-line, rgba(232,201,137,.16));
}
.ls-sum__c[data-hero] {
  background: var(--jp-raised, #0E131D);
  border-color: rgb(232 201 137 / .35);
}
.ls-flex__c[data-save] {
  background: var(--jp-raised, #0E131D);
  border-color: rgb(120 220 160 / .35);
}
/* The seller-comparison toggle inherited gold-fill ink (#080B11) onto the
   dark card — 1.07:1, hiding the whole multi-seller comparison. Same rescue
   as .ls-back got in janet_premium.css. */
.ls-sellers__t { color: var(--jp-gold, #E8C989); }

/*
 * Remaining light-theme survivors, found by scripts/check_dark_scale.js the
 * day it was written — the same white-on-white class as the four fixed above,
 * caught BEFORE a user saw them. Each keeps its semantic tint on the dark
 * scale. If you add a light surface to janet_live_search.css, the build gate
 * fails until it is converted here at matching specificity or allowlisted.
 */
.ls-skel__c { background: var(--jp-raised, #0E131D); border-color: var(--jp-line, rgba(232,201,137,.16)); }
.ls-tag[data-t="best_value"] { background: rgb(232 201 137 / .14); color: var(--jp-gold, #E8C989); border-color: rgb(232 201 137 / .3); }
.ls-cal__day[data-b="expensive"] { background: rgb(214 106 90 / .14); color: var(--jp-text, #F4F1EA); }
.ls-cal__day[data-b="no_data"] { background: var(--jp-overlay, #141B28); color: var(--jp-text-3, #949CAB); }
.ls-refresh:hover { background: var(--jp-overlay, #141B28); }
.ls-dh__reason { background: var(--jp-overlay, #141B28); color: var(--jp-text-2, #C8CCD6); }
.ls-badge--cached { background: rgb(148 156 171 / .16); color: var(--jp-text-2, #C8CCD6); }
.ls-badge--sandbox { background: rgb(214 106 90 / .2); color: #F0B9AE; }

/* Text inside those surfaces that assumed dark ink on white. */
.ls-act-hl strong,
.ls-flex__c strong,
.ls-sum__c strong,
.ls-trip strong,
.ls-cal strong { color: var(--jp-text, #F4F1EA); }

.ls-act-hl, .ls-flex__c, .ls-sum__c { color: var(--jp-text-2, #C6CCD8); }

/* Form controls need their own foreground; a dark field with dark text is the
   same defect wearing different clothes. */
.ls-field input, .ls-field select {
  color: var(--jp-text, #F4F1EA);
}
.ls-field input::placeholder { color: var(--jp-text-3, #949CAB); }