/* ==========================================================================
   BOOKALLO — standalone hotel product (/hotels) page shell.

   The CARD, the facet sidebar and the details drawer are NOT here: they are
   what the shared renderer emits, so they live in janet_hotel_card.css and are
   loaded by every page that renders a hotel card. This file is the page around
   them — bands, hero, search bar, results header, landing, states.

   The page used to be one flat cream sheet with a 1100px column, which read as
   a small amount of content adrift in a large empty canvas. It is now a set of
   BANDS with their own backgrounds, a wider working column, and a marketplace
   two-column results layout. Mobile-first, RTL, 44px tap targets,
   reduced-motion aware.
   ========================================================================== */

:root {
  --jh-cream: #FBF5EC;
  --jh-sand: #F4EADC;
  --jh-sand-2: #EFE3D2;
  --jh-peach: #FDF1E8;
  --jh-ink: #241C16;
  --jh-ink-2: #4A3B31;
  --jh-mute: #7A6757;
  --jh-coral: #E8613C;
  --jh-coral-ink: #B8401F;
  /* The label that sits ON --jh-coral. Published as a token for the same
     reason the system publishes --on-sky: the accent is re-pointed by the
     theme and a literal here cannot follow it. #21120A is near-black, which
     is right on the original coral and 2.25:1 on the deep teal the theme
     re-points to — measured on /hotels by the release gate. */
  --jh-on-coral: #21120A;
  --jh-navy: #1B3A4B;
  --jh-teal: #12655F;
  --jh-line: rgba(36, 28, 22, .13);
  --jh-line-2: rgba(36, 28, 22, .07);
  --jh-card: #fff;
  --jh-radius: 16px;
  --jh-shadow: 0 1px 2px rgba(36,28,22,.05), 0 10px 24px -12px rgba(36,28,22,.2);
  --jh-max: 1360px;
}

.jh {
  margin: 0;
  background: var(--jh-cream);
  color: var(--jh-ink);
  font-family: "Assistant", system-ui, sans-serif;
}

/* ---------- top bar ---------- */
.jh-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 2.2rem);
  border-block-end: 1px solid var(--jh-line);
  /* Derived from --jh-cream so the bar follows the theme; a literal here
     left a cream bar welded to the top of a dark page. */
  background: var(--jh-cream);
  background: color-mix(in srgb, var(--jh-cream) 90%, transparent);
  position: sticky; inset-block-start: 0; z-index: 30;
  backdrop-filter: saturate(1.2) blur(8px);
}
.jh-bar__home {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  color: var(--jh-ink); font-weight: 800;
  font-family: "Frank Ruhl Libre", serif; font-size: 1.15rem; min-block-size: 44px;
}
/*
 * WHITE TEXT NEEDS THE INK CORAL, NOT THE ACCENT CORAL.
 *
 * `--jh-coral` (#E8613C) is documented in janet_hero_v4.css as "accent on cream
 * — 6.9:1 on #FDF8F1, headline use": it is a TEXT colour, and it was being used
 * here as a BACKGROUND under white. At 15.2px/900 that is normal-size text, so
 * WCAG AA wants 4.5:1 and this pairing gives 3.38:1 — the gate failed
 * `span.jh-bar__logo` on all ten hotel pages at once, which is what a shared
 * top bar does.
 *
 * `--jh-coral-ink` (#B8401F) is the same hue at 5.54:1 under white, and the
 * design system already reserves it for exactly this. The mark stays a white
 * glyph on coral; the coral is simply the one meant to carry it.
 *
 * The two larger coral marks (.jhc__media-fb, .jhd__nofoto-m) are 24-25.6px at
 * 800, which is WCAG "large text" at 3:1, and they are left alone: they pass,
 * and repainting a passing element is churn, not a fix.
 */
.jh-bar__logo {
  display: grid; place-items: center; inline-size: 30px; block-size: 30px;
  border-radius: 50%; background: var(--jh-coral-ink); color: var(--on-sky, #fff); font-weight: 900; font-size: .95rem;
}
.jh-bar__nav { display: flex; gap: .3rem; }
.jh-bar__nav a {
  text-decoration: none; color: var(--jh-mute); font-weight: 600;
  padding: .55rem .75rem; border-radius: 10px;
  min-block-size: 44px; display: inline-flex; align-items: center;
}
.jh-bar__nav a:hover { background: rgba(36, 28, 22, .06); color: var(--jh-ink); }
.jh-bar__nav a[aria-current="page"] { color: var(--jh-coral-ink); background: rgba(14, 90, 82, .13); }

/* ---------- bands: the page is no longer one flat sheet ---------- */
.jh-band { padding-block: clamp(1.4rem, 4vw, 2.6rem); }
.jh-band__in { max-inline-size: var(--jh-max); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.2rem); }
.jh-band--hero {
  padding-block-start: clamp(1.6rem, 5vw, 3.2rem);
  /* Was two radial pools stacked over a vertical fade. Three gradients behind a
     search panel is decoration the page never asked for, and it is exactly the
     "gradient blob" look this redesign removes. The band is now a flat surface
     and the photograph beside it carries the colour. */
  background: var(--jh-cream);
  border-block-end: 1px solid var(--jh-line-2);
}
.jh-band--soft { background: linear-gradient(180deg, var(--jh-sand) 0%, var(--jh-cream) 100%); }
.jh-band--sand { background: var(--jh-sand); border-block: 1px solid var(--jh-line-2); }
.jh-band--results { padding-block-start: 1.2rem; }
/* The hero band with nothing in it: a rule, not a void. */
.jh-band--hero[data-compact] { padding-block: 0; border-block-end: 1px solid var(--jh-line); background: var(--jh-peach); }
.jh-band--hero[data-compact] .jh-result-meta { min-block-size: 0; }

.jh-main { display: block; padding: 0 0 3rem; }

/* ---------- hero ---------- */
.jh-hero { display: grid; gap: 1.4rem; align-items: center; }
.jh-hero__copy { display: grid; gap: 1rem; justify-items: start; }
/*
 * The hero image is BRAND decoration, and the choice of subject is a truth
 * decision: a balcony and a sea, belonging to no named property. A photograph
 * of a recognisable hotel or city beside a search box reads as inventory, and
 * this page has none of its own to show until the supplier answers.
 */
.jh-hero__art { display: none; }
@media (min-width: 1100px) {
  /* Two children, two columns. The prose is wrapped in .jh-hero__copy rather
     than left as three loose children: as loose children the grid gave each its
     own row, and the rows were then stretched to the picture's height, which
     pushed the eyebrow half a screen above the headline. */
  .jh-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 2.6rem; }
  .jh-hero__art {
    align-self: center;
    display: block; margin: 0; border-radius: 20px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(36,28,22,.08), 0 34px 60px -28px rgba(36,28,22,.5);
    aspect-ratio: 16 / 11;
  }
  .jh-hero__art img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
}
.jh-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .4rem; justify-self: start;
  padding: .34rem .7rem; border-radius: 999px;
  background: rgba(18, 101, 95, .1); color: var(--jh-teal);
  font: 700 .78rem/1 "Assistant", sans-serif;
}
.jh-hero__h {
  font-family: "Frank Ruhl Libre", serif; font-weight: 800;
  font-size: clamp(1.75rem, 4.6vw, 3rem); margin: 0; line-height: 1.08;
  max-inline-size: 20ch;
}
.jh-hero__h em { font-style: normal; color: var(--jh-coral-ink); }
.jh-hero__p {
  color: var(--jh-ink-2); max-inline-size: 66ch; margin: 0;
  line-height: 1.6; font-size: 1.02rem;
}
.jh-hero__p strong { color: var(--jh-ink); }

/* ---------- the search bar ---------- */
.jh-form {
  margin-block-start: clamp(1.2rem, 3vw, 2rem);
  display: grid; gap: .7rem; grid-template-columns: 1fr;
  background: var(--jh-card); border: 1px solid var(--jh-line);
  border-radius: var(--jh-radius); padding: 1rem;
  box-shadow: var(--jh-shadow);
}
.jh-field { display: flex; flex-direction: column; gap: .3rem; min-inline-size: 0; }
.jh-field > label { font-weight: 700; font-size: .8rem; color: var(--jh-mute); }
.jh-field input, .jh-field select {
  font: inherit; padding: .62rem .7rem; border: 1px solid var(--jh-line);
  border-radius: 10px; background: var(--jh-card); color: var(--jh-ink);
  min-block-size: 46px; box-sizing: border-box; inline-size: 100%;
}
.jh-field input:focus, .jh-field select:focus {
  outline: 2px solid var(--jh-coral); outline-offset: 1px; border-color: var(--jh-coral);
}
.jh-field__err { color: var(--jh-coral-ink); font-size: .8rem; font-weight: 600; margin: 0; }
.jh-go {
  grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 50px; border: 0; border-radius: 12px;
  background: var(--jh-coral); color: var(--jh-on-coral);
  font: 700 1rem "Assistant", sans-serif; cursor: pointer;
  transition: background .18s ease;
}
/*
 * NEVER A LITERAL LIGHT ON A RE-POINTED ACCENT.
 *
 * These three rules painted #FFF6EA / #fff on --jh-coral-ink and --jh-navy.
 * Both tokens are re-pointed by janet_premium.css from a DARK value to a LIGHT
 * one (--jh-coral-ink -> --jp-gold champagne, --jh-navy -> --jp-text-2 #B4B8BF),
 * so a literal that is correct in the cream theme measures under 2:1 in the
 * dark one. No single literal can be right for both, which is exactly why the
 * system publishes --jh-on-coral: it INVERTS with the accent. Measured on the
 * live page 2026-09-02 — the active sort pill was #fff on #B4B8BF.
 */
.jh-go:hover { background: var(--jh-coral-ink); color: var(--jh-on-coral); }
.jh-go:focus-visible { outline: 2px solid var(--jh-ink); outline-offset: 2px; }

@media (min-width: 760px) {
  .jh-form { grid-template-columns: 2fr 1fr 1fr repeat(3, .72fr) 1.1fr; align-items: end; }
  .jh-go { grid-column: auto; }
}

/* ---------- states ---------- */
.jh-state { display: none; }
.jh-state[data-on] { display: block; }
.jh-result-meta { color: var(--jh-mute); font-weight: 600; min-block-size: 1.2em; }

/* ---------- landing: destinations + trust ---------- */
.jh-picks__h {
  font: 700 1.25rem/1.25 "Frank Ruhl Libre", serif; color: var(--jh-ink);
  margin: 0 0 .3rem;
}
.jh-picks__p { margin: 0 0 1rem; color: var(--jh-mute); font-size: .92rem; }
.jh-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.jh-chip {
  border: 1px solid var(--jh-line); background: var(--jh-card); color: var(--jh-ink);
  border-radius: 999px; padding: .5rem 1rem; min-block-size: 46px;
  font: 600 .94rem "Assistant", sans-serif; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.jh-chip:hover {
  border-color: var(--jh-coral); color: var(--jh-coral-ink);
  transform: translateY(-1px); box-shadow: var(--jh-shadow);
}
.jh-chip:focus-visible { outline: 2px solid var(--jh-coral); outline-offset: 2px; }

.jh-dests {
  display: grid; gap: .8rem; margin-block-start: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}
/*
 * Destination cards carry NO photograph, and that is a truth decision rather
 * than an art one. The only images this repository holds are generic travel
 * scenes (a rooftop, an alley, a balcony); putting one behind the word "רומא"
 * would assert to a reader that they are looking at Rome, which nothing in the
 * asset verifies. A duotone plate and the city name assert only what is true.
 */
.jh-dest {
  position: relative; display: block; min-block-size: 128px; padding: 0;
  border: 0; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: linear-gradient(145deg, var(--d1, #E9CDA9) 0%, var(--d2, #7A5233) 100%);
  text-align: start;
  box-shadow: var(--jh-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.jh-dest:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(36,28,22,.08), 0 22px 40px -18px rgba(36,28,22,.4); }
.jh-dest:focus-visible { outline: 2px solid var(--jh-coral); outline-offset: 3px; }
.jh-dest__v {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 15% 12%, rgba(255,255,255,.28) 0%, transparent 55%),
    /* .66 -> .80 at the foot, and the mid stop lifted, because the LABEL sits
       here. Measured from the painted pixels 2026-09-02: the Rome plate read
       2.57:1 under the old scrim at 1024px, where the chip is short enough
       that the label rides up into the pale half of the 145deg gradient. The
       top stop is untouched, so each city keeps its own colour identity. */
    /* PIXELS, not percentages, for the band the LABEL sits in.
       The label is a ~20px line pinned .6rem from the foot — a fixed box. A
       percentage stop is measured against the CHIP, which changes height with
       the column count, so the label rides into a different part of the ramp
       at every breakpoint. Measured on production 2026-09-03: after the ramp
       was strengthened from .66 to .80 the Rome plate read 2.57:1 -> 3.6:1 at
       1024px and still failed, while every other width passed. A px-anchored
       band covers the label's own box at any chip height. */
    linear-gradient(0deg, rgba(20,14,10,.86) 0px, rgba(20,14,10,.86) 46px, rgba(20,14,10,.28) 62%, rgba(20,14,10,0) 100%);
  transition: opacity .25s ease;
}
.jh-dest:hover .jh-dest__v { opacity: .82; }
.jh-dest__n {
  position: absolute; inset-block-end: .6rem; inset-inline-start: .75rem; inset-inline-end: .75rem;
  color: #fff; font: 700 1.02rem/1.25 "Frank Ruhl Libre", serif;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

.jh-promise {
  display: grid; gap: .9rem; grid-template-columns: 1fr;
  background: var(--jh-card); border: 1px solid var(--jh-line);
  border-radius: var(--jh-radius); padding: 1.2rem 1.3rem;
  box-shadow: var(--jh-shadow);
}
.jh-promise h2 { font: 700 1.25rem/1.25 "Frank Ruhl Libre", serif; margin: 0; }
.jh-promise ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.jh-promise li {
  color: var(--jh-ink-2); line-height: 1.6; font-size: .93rem;
  padding-inline-start: 1.6rem; position: relative;
}
.jh-promise li::before {
  content: "✓"; position: absolute; inset-inline-start: 0; inset-block-start: .05rem;
  inline-size: 1.1rem; block-size: 1.1rem; border-radius: 50%;
  background: rgba(18,101,95,.12); color: var(--jh-teal);
  display: grid; place-items: center; font-size: .7rem; font-weight: 800;
}
.jh-promise strong { color: var(--jh-ink); }
@media (min-width: 860px) {
  .jh-promise { grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 1.4rem; }
}

.jh-saved { margin-block-start: 1.4rem; }
.jh-chip--saved { text-decoration: none; }

/* ---------- results head ---------- */
.jh-rhead {
  display: grid; gap: .55rem; margin-block-end: 1rem;
}
.jh-rhead__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.jh-rhead__h {
  margin: 0; font: 800 clamp(1.3rem, 3vw, 1.75rem)/1.2 "Frank Ruhl Libre", serif; color: var(--jh-ink);
}
.jh-rhead__h b { color: var(--jh-coral-ink); }
.jh-rhead__stay {
  margin: 0; color: var(--jh-ink-2); font: 600 .9rem/1.5 "Assistant", sans-serif;
  font-variant-numeric: tabular-nums;
}
.jh-rhead__acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.jh-edit, .jh-save {
  border: 1px solid var(--jh-line); background: var(--jh-card); color: var(--jh-ink);
  border-radius: 999px; padding: .5rem 1rem; min-block-size: 44px;
  font: 600 .9rem "Assistant", sans-serif; cursor: pointer; white-space: nowrap;
}
.jh-edit { color: var(--jh-coral-ink); border-color: rgba(14, 90, 82, .45); }
.jh-edit:hover, .jh-save:hover { border-color: var(--jh-coral); background: rgba(14, 90, 82, .07); }
.jh-edit:focus-visible, .jh-save:focus-visible { outline: 2px solid var(--jh-coral); outline-offset: 2px; }

.jh-banner { border-radius: 10px; padding: .7rem .9rem; margin-block-end: .9rem; font-weight: 600; }
.jh-banner--warn { background: #FFF4E5; color: #8A5A00; border: 1px solid #F0C980; }

/* the search form re-shown inside results, collapsed by default */
.jh-editbox { margin-block-end: 1rem; }
.jh-editbox[hidden] { display: none; }

/* ---------- the marketplace layout ---------- */
.jh-layout { display: grid; grid-template-columns: 1fr; gap: 1.1rem; align-items: start; }
@media (min-width: 1020px) {
  .jh-layout { grid-template-columns: 286px minmax(0, 1fr); gap: 1.5rem; }
  .jh-aside { position: sticky; inset-block-start: 74px; max-block-size: calc(100vh - 92px); overflow: auto; padding-inline-end: .3rem; }
}
.jh-aside[hidden] { display: none; }

/* on small screens the facets collapse behind one button */
.jh-facets-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  min-block-size: 46px; padding: .5rem 1rem; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--jh-line); background: var(--jh-card); color: var(--jh-ink);
  font: 700 .92rem "Assistant", sans-serif; margin-block-end: .8rem;
}
.jh-facets-toggle:focus-visible { outline: 2px solid var(--jh-coral); outline-offset: 2px; }
@media (min-width: 1020px) { .jh-facets-toggle { display: none; } }

.jh-sortbar {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-block-end: .9rem; padding-block-end: .8rem;
  border-block-end: 1px solid var(--jh-line-2);
}
.jh-sortbar__l { font: 700 .84rem "Assistant", sans-serif; color: var(--jh-mute); margin-inline-end: .2rem; }
.jh-sort {
  border: 1px solid var(--jh-line); background: var(--jh-card); color: var(--jh-ink-2);
  /* 44px, not 40. Measured at 390px: five sort pills at 40px high, every one
     of them under the touch-target floor on the control the results page is
     driven from. */
  border-radius: 999px; padding: .55rem .85rem; min-block-size: 44px;
  font: 600 .86rem "Assistant", sans-serif; cursor: pointer;
}
.jh-sort:hover { border-color: var(--jh-coral); color: var(--jh-coral-ink); }
.jh-sort[data-active] { background: var(--jh-coral); border-color: var(--jh-coral); color: var(--jh-on-coral); }
.jh-sort:focus-visible { outline: 2px solid var(--jh-coral); outline-offset: 2px; }
.jh-count {
  margin-inline-start: auto; font: 600 .84rem "Assistant", sans-serif; color: var(--jh-mute);
  font-variant-numeric: tabular-nums;
}

/* ---------- skeletons ---------- */
.jh-skel-wrap { display: grid; gap: 1rem; }
.ls-hskel-card {
  display: grid; grid-template-columns: 1fr; gap: 0; overflow: hidden;
  background: var(--jh-card); border: 1px solid var(--jh-line); border-radius: var(--jh-radius);
}
.ls-hskel { background: linear-gradient(90deg, #EFE7DC 25%, #F8F2E9 50%, #EFE7DC 75%);
  background-size: 200% 100%; animation: jh-shim 1.3s linear infinite; border-radius: 8px; }
.ls-hskel--ph { block-size: 180px; border-radius: 0; }
.ls-hskel-lines { display: grid; gap: .55rem; padding: 1rem; }
.ls-hskel--t { block-size: 20px; inline-size: 62%; }
.ls-hskel--s { block-size: 14px; inline-size: 40%; }
.ls-hskel--p { block-size: 46px; margin: 0 1rem 1rem; }
@keyframes jh-shim { to { background-position: -200% 0; } }
@media (min-width: 760px) {
  .ls-hskel-card { grid-template-columns: 264px minmax(0, 1fr); }
  .ls-hskel--ph { block-size: 100%; min-block-size: 200px; }
}
.ls-hotel-wait { color: var(--jh-mute); font-weight: 600; margin: 0 0 .9rem; }

/* ---------- empty / error / no-match ---------- */
.jh-empty, .jh-error, .ls-hotels__none {
  background: var(--jh-card); border: 1px solid var(--jh-line);
  border-radius: var(--jh-radius); padding: 2rem 1.4rem; text-align: center;
  box-shadow: var(--jh-shadow);
}
.jh-empty h2, .jh-error h2 { margin: 0 0 .5rem; font-family: "Frank Ruhl Libre", serif; }
.jh-empty p, .jh-error p { color: var(--jh-mute); margin: 0 0 1rem; }
.ls-hotels__none strong { display: block; margin-block-end: .35rem; font-size: 1.05rem; }
.ls-hotels__none div { color: var(--jh-mute); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- rate revalidation notice (price checked at the moment of commitment) -- */
.ls-hotel-card__reval { margin-block-start: .5rem; font: 600 .78rem/1.45 "Assistant", sans-serif;
  padding: .5rem .6rem; border-radius: 8px; background: rgba(36,28,22,.05); color: var(--jh-ink); }
.ls-hotel-card__reval--busy { color: var(--jh-mute); }
.ls-hotel-card__reval--ok { background: #E8F5EC; color: #1E6B37; }
.ls-hotel-card__reval--up { background: #FFF4E5; color: #8A5A00; }
.ls-hotel-card__reval--down { background: #E8F5EC; color: #1E6B37; }
.ls-hotel-card__reval--gone { background: #FDECEA; color: #A3271A; }
.ls-hotel-card__reval--warn { background: #FFF4E5; color: #8A5A00; }
.ls-hotel-card__reval-nums { font-weight: 700; margin-block-start: .2rem; font-variant-numeric: tabular-nums; }
.ls-hotel-card__reval-nums small { font-weight: 600; opacity: .8; }

/* ── city guide links ─────────────────────────────────────────────────────
 * A crawlable row beside the destination chips. The chips are buttons that
 * prefill a search — the right control for that job and invisible to a
 * crawler — which is why eleven city pages had no inbound link at all.
 */
.jh-guides { margin-block-start: 1.1rem; }
.jh-guides__h {
  margin: 0 0 .5rem; font: 700 .92rem/1.3 "Assistant", sans-serif; color: var(--jh-mute);
}
.jh-guides__row { display: flex; flex-wrap: wrap; gap: .4rem; }
.jh-guide {
  display: inline-flex; align-items: center; min-block-size: 36px;
  padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--jh-line, rgba(42,33,27,.14));
  background: var(--jh-card); color: var(--jh-coral-ink, #B8401F);
  font: 600 .82rem/1 "Assistant", sans-serif; text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.jh-guide:hover { background: var(--jh-coral-soft, #FDEFE9); border-color: var(--jh-coral, #E8613C); }
.jh-guide:focus-visible { outline: 2px solid var(--jh-ink, #2A211B); outline-offset: 2px; }

/* ── retry, on the error state ────────────────────────────────────────────
 * The error card said "try again in a moment" and offered nothing to press.
 */
.jh-retry {
  margin-block-start: 1rem; min-block-size: 44px; padding: .6rem 1.4rem;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--jh-coral-ink, #B8401F); color: var(--jh-on-coral, #21120A);
  font: 700 .95rem/1 "Assistant", sans-serif;
  transition: background .18s ease;
}
.jh-retry:hover { background: #8F2F14; }
.jh-retry:focus-visible { outline: 2px solid var(--jh-ink, #2A211B); outline-offset: 2px; }

/* ==========================================================================
   CHILD AGES · HONESTY NOTICES · BENCHMARKS · THE "WHY" LINE
   Added 2026-09-02 alongside the four defects they exist to make visible.

   NO NEW COLOUR TOKEN IS DECLARED HERE, deliberately. janet_premium.css
   re-points --jh-* and --jhc-* and a token it has never heard of keeps its
   light value under the dark theme — that is exactly how --jh-card stayed
   #fff and put cream text on white. Everything below is built from tokens the
   theme already owns, so these blocks convert with the rest of the page and
   live_search/tests/test_one_visual_system.js has nothing new to enumerate.

   SURFACE LADDER, HAIRLINES, ONE ACCENT: the strip sits on --jh-card over the
   page ground, separated by a 1px --jh-line rather than a shadow, and only the
   PRICE carries --jh-coral (champagne under the theme). Anything ON the accent
   takes --jh-on-coral, which is --on-sky under the theme — never #fff, which
   measures about 1.9:1 there and has shipped as a defect twice.
   ========================================================================== */

/* ── the age pickers ─────────────────────────────────────────────────────── */
.jh-field--ages { grid-column: 1 / -1; }
.jh-field__lab { font-weight: 700; font-size: .8rem; color: var(--jh-mute); }
.jh-field__note { margin: 0; font-size: .76rem; color: var(--jh-mute); line-height: 1.45; }
.jh-ages { display: flex; flex-wrap: wrap; gap: .5rem; }
.jh-age { display: flex; flex-direction: column; gap: .25rem; min-inline-size: 5.5rem; flex: 0 1 auto; }
.jh-age__l { font-size: .72rem; font-weight: 600; color: var(--jh-mute); }
.jh-age__s {
  font: inherit; padding: .5rem .55rem; border: 1px solid var(--jh-line);
  border-radius: 10px; background: var(--jh-card); color: var(--jh-ink);
  /* 44px is the floor for a target, and these are small and numerous. */
  min-block-size: 44px; box-sizing: border-box; inline-size: 100%;
}
.jh-age__s:focus-visible { outline: 2px solid var(--jh-coral); outline-offset: 1px; }

/* ── the notices: what was priced, what was hidden ───────────────────────── */
.jh-notices:empty { display: none; }
.jh-notices { display: flex; flex-direction: column; gap: .4rem; margin-block-start: .6rem; }
.jh-notice {
  margin: 0; padding: .5rem .7rem; border-radius: 10px;
  border: 1px solid var(--jh-line-2); background: var(--jh-sand);
  color: var(--jh-ink-2); font-size: .84rem; line-height: 1.5;
}
.jh-notice b { color: var(--jh-ink); }
/*
 * A warning is a HAIRLINE in the accent, not a filled block. A filled amber
 * panel beside a filled champagne price gives the page two loud surfaces and
 * the reader no way to tell which one is the price.
 */
/*
 * TRANSPARENT, and NOT `var(--jh-coral-soft, ...)`.
 *
 * That token is referenced twice in this sheet and DECLARED NOWHERE — not
 * here, not in janet_premium.css — so it silently resolves to its fallback
 * today. A phantom reference is a trap rather than a bug: the moment someone
 * declares it as a light tint in the base sheet, this notice becomes a pale
 * block behind fog-grey text under the dark theme, and the one-visual-system
 * test would not catch it because that test enumerates the tokens a sheet
 * DECLARES, not the ones it merely reads. The brief asks for hairlines instead
 * of filled surfaces anyway, so the accent border carries the emphasis and the
 * ground stays the page's own.
 */
.jh-notice--warn { border-color: var(--jh-coral); background: transparent; }
.jh-notice--ok { border-color: var(--jh-line); }
.jh-notice--soft { background: transparent; color: var(--jh-mute); }

/* ── benchmarks ──────────────────────────────────────────────────────────── */
.jh-benchwrap:empty, .jh-whywrap:empty { display: none; }
.jhb { margin-block: 1rem 0; }
.jhb__h, .jhw__h {
  margin: 0 0 .5rem; font: 700 .82rem/1 "Assistant", sans-serif;
  letter-spacing: .04em; text-transform: uppercase; color: var(--jh-mute);
}
.jhb__l {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: .5rem;
}
.jhb__i {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .7rem .8rem; border-radius: var(--jh-radius);
  border: 1px solid var(--jh-line); background: var(--jh-card);
  min-inline-size: 0;
}
.jhb__k { font-size: .74rem; font-weight: 700; letter-spacing: .03em; color: var(--jh-mute); }
/* The ONE accent, on the number. */
.jhb__v { font: 800 1.15rem/1.1 "Assistant", sans-serif; color: var(--jh-coral-ink); }
/* The unit always travels with the number — nights and the nightly average. */
.jhb__u { font-size: .74rem; color: var(--jh-mute); }
.jhb__n {
  font-size: .84rem; color: var(--jh-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0;
}
.jhb__f { font-size: .72rem; color: var(--jh-mute); font-style: italic; }

/* ── the one-line why ────────────────────────────────────────────────────── */
.jhw { margin-block: .8rem 0; }
.jhw__l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.jhw__i {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .55rem;
  padding: .5rem .7rem; border-radius: 10px;
  border: 1px solid var(--jh-line-2); background: var(--jh-card);
  min-inline-size: 0;
}
.jhw__n { font-weight: 700; font-size: .88rem; color: var(--jh-ink); }
.jhw__w { font-size: .82rem; color: var(--jh-ink-2); line-height: 1.5; min-inline-size: 0; }
.jhw__q { font-size: .76rem; color: var(--jh-coral-ink); font-weight: 600; }

@media (min-width: 720px) {
  .jhb__l { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* == THE OTHER-SELLER STRIP ==============================================
 *
 * A city-and-dates hand-off, beside the results and deliberately NOT on a
 * card. Every seller here builds a search of the CITY on the seller's own
 * site; none can open a named property, and the one link that ever claimed to
 * (a Hotellook search by hotel NAME) reported the room unavailable in six of
 * six browser trials before it was removed. So this sits outside
 * #ls-hotel-grid, says "these dates", and no card gains an href it cannot
 * honour.
 *
 * IT LIVES IN THIS SHEET, not in bkx.css, and that is not a filing preference.
 * Measured 2026-09-05: /hotels loads janet_ds, janet_live_search, janet_hotels,
 * janet_hotel_card and janet_premium — and NOT bkx.css. The first version of
 * these rules went into bkx.css, and the CTA rendered as a 21px inline link
 * with no padding, no radius and no 44px target, because the stylesheet
 * carrying them was never on the page. Tokens are this page's own --jh-*.
 */
.jh-sellers {
  margin-block-start: clamp(22px, 3vh, 38px);
  padding: clamp(16px, 2.2vw, 24px);
  border-radius: var(--jh-radius, 16px);
  border: 1px solid var(--jh-line);
  background: var(--jh-card, #fff);
  box-shadow: var(--jh-shadow);
}
.jh-sellers[hidden] { display: none !important; }
.jh-sellers__h {
  margin: 0 0 .7rem;
  font-size: clamp(1rem, .5vw + .85rem, 1.15rem);
  font-weight: 700;
  color: var(--jh-ink);
}
.jh-sellers__row { display: flex; flex-wrap: wrap; gap: .6rem; }
.jh-sellers__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-block-size: 44px;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--jh-line-2, var(--jh-line));
  background: var(--jh-cream);
  color: var(--jh-ink);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
  transition: border-color .25s ease, color .25s ease, transform .2s ease;
}
.jh-sellers__cta:hover {
  border-color: var(--jh-coral);
  color: var(--jh-coral-ink);
  transform: translateY(-1px);
}
.jh-sellers__cta:focus-visible { outline: 2px solid var(--jh-coral); outline-offset: 2px; }
/*
 * The disclosure is not fine print. It carries three facts a traveller is
 * entitled to before the click — that they are leaving, where they are going,
 * and that the price above was measured at a different supplier who does not
 * set this seller's price — so it takes body contrast, not the muted caption
 * tone.
 */
.jh-sellers__note {
  margin: .85rem 0 0;
  max-inline-size: 78ch;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--jh-ink-2);
}
@media (prefers-reduced-motion: reduce) {
  .jh-sellers__cta { transition: none; }
  .jh-sellers__cta:hover { transform: none; }
}