/*
 * Hey! En Route Core styles.
 *
 * Colours and type come from --hen-* custom properties, which the Hey En
 * Route theme sets (light and dark). The fallbacks keep everything legible
 * under any other theme.
 */

:root {
  --hen-ink: #17252f;
  --hen-muted: #56616b;
  --hen-rule: #e4dccd;
  --hen-accent: #c2491d;
  --hen-accent-ink: #ffffff;
  --hen-link: #1b6a66;
  --hen-surface: #fffdf9;
  --hen-well: #efe8dc;
  --hen-good: #15803d;
  --hen-warn: #b45309;
  --hen-bad: #b91c1c;
  --hen-radius: 14px;
  --hen-font: inherit;
  --hen-display: inherit;
}

[class^="hen-"], [class*=" hen-"] { box-sizing: border-box; }
/* Components set display: flex/grid; the hidden attribute must still win. */
[class^="hen-"][hidden], [class*=" hen-"][hidden], .hen-sec [hidden] { display: none !important; }
.hen-muted { color: var(--hen-muted); font-size: .9em; }
.hen-na { color: var(--hen-muted); }
.hen-empty { color: var(--hen-muted); }
.hen-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hen-ico { display: inline-block; flex: none; vertical-align: -3px; }
.hen-footnote { margin: .75rem 0 0; color: var(--hen-muted); font-size: .85rem; }
.hen-lede { margin: 0 0 1.25rem; font-family: var(--hen-display); font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.4; color: var(--hen-ink); }

/* --- section frame ------------------------------------------------------- */

.hen-sec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-bottom: 1.25rem;
}
.hen-sec__title { margin: 0; font-family: var(--hen-display); font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.1; color: var(--hen-ink); }
.hen-sec__lede { margin: .35rem 0 0; color: var(--hen-muted); max-width: 60ch; }
.hen-sub { margin: 2rem 0 .75rem; font-family: var(--hen-display); font-size: 1.35rem; font-weight: 400; color: var(--hen-ink); }
.hen-note { margin: 1rem 0; padding: 1rem 1.15rem; border-left: 3px solid var(--hen-accent); border-radius: 0 10px 10px 0; background: var(--hen-well); color: var(--hen-ink); }
.hen-note p { margin: 0 0 .5em; }
.hen-note p:last-child { margin-bottom: 0; }
.hen-note--tip { border-left-color: var(--hen-link); }
.hen-note__label { font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hen-muted); }
.hen-legend { display: flex; align-items: center; gap: .4rem; margin: .5rem 0 0; color: var(--hen-muted); font-size: .85rem; }
.hen-legend__swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--hen-accent) 18%, transparent); }

/* --- buttons, chips, selects -------------------------------------------- */

.hen-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: .55rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--hen-accent);
  color: var(--hen-accent-ink) !important;
  font: 700 .95rem/1.1 var(--hen-font);
  text-decoration: none !important;
  cursor: pointer;
}
.hen-button:hover { filter: brightness(1.08); }
.hen-button--small { min-height: 36px; padding: .4rem .9rem; font-size: .85rem; }
.hen-button--ghost { background: transparent; color: var(--hen-ink) !important; box-shadow: inset 0 0 0 1px var(--hen-rule); }
.hen-button--ghost:hover { background: var(--hen-well); filter: none; }
.hen-link-btn { font-weight: 700; font-size: .9rem; color: var(--hen-link); white-space: nowrap; }

.hen-chipset { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }
.hen-chipbtn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 38px;
  padding: .4rem .85rem;
  border: 1px solid var(--hen-rule);
  border-radius: 999px;
  background: var(--hen-surface);
  color: var(--hen-ink);
  font: 500 .875rem/1 var(--hen-font);
  cursor: pointer;
}
.hen-chipbtn:hover { border-color: var(--hen-ink); }
.hen-chipbtn.is-on,
.hen-chipbtn[aria-pressed="true"] { border-color: var(--mode, var(--hen-ink)); background: var(--mode, var(--hen-ink)); color: #fff; }
.hen-chipbtn:disabled { opacity: .45; cursor: default; }

.hen-select { display: inline-flex; flex-direction: column; gap: .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hen-muted); }
.hen-select select,
.hen-listtools__q,
.hen-field input,
.hen-field select {
  min-height: 42px;
  padding: .45rem .75rem;
  border: 1px solid var(--hen-rule);
  border-radius: 10px;
  background: var(--hen-surface);
  color: var(--hen-ink);
  font: 400 .95rem var(--hen-font);
  letter-spacing: 0;
  text-transform: none;
}
.hen-field { display: flex; flex-direction: column; gap: .3rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.hen-field > span,
.hen-field legend { padding: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hen-muted); }
.hen-field__row { display: flex; gap: .5rem; }
.hen-field__row input { width: 5.5rem; flex: none; }
.hen-field__row select { flex: 1; min-width: 0; }
.hen-field input[type="range"] { padding: 0; accent-color: var(--hen-accent); border: 0; background: none; }

.hen-seg { display: inline-flex; padding: 3px; border: 1px solid var(--hen-rule); border-radius: 999px; background: var(--hen-surface); }
.hen-seg button { min-height: 34px; padding: .3rem .9rem; border: 0; border-radius: 999px; background: transparent; color: var(--hen-muted); font: 600 .85rem var(--hen-font); cursor: pointer; }
.hen-seg button[aria-pressed="true"] { background: var(--hen-ink); color: var(--hen-surface); }

/* Unit switches */
.hen-units { display: flex; flex-wrap: wrap; gap: .5rem; }
.hen-units__group { display: inline-flex; padding: 3px; border-radius: 999px; background: rgb(0 0 0 / 22%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hen-units button { min-width: 44px; min-height: 32px; padding: .2rem .7rem; border: 0; border-radius: 999px; background: transparent; color: #fff; font: 600 .8rem var(--hen-font); cursor: pointer; }
.hen-units button.is-on { background: #fff; color: #111; }
.hen-fallback .hen-units__group { background: var(--hen-well); }
.hen-fallback .hen-units button { color: var(--hen-ink); }
.hen-fallback .hen-units button.is-on { background: var(--hen-ink); color: var(--hen-surface); }

/* --- facts ---------------------------------------------------------------- */

.hen-facts {
  /* Flex, not grid, so a short last row stretches instead of leaving empty
     cells; the 1px gaps let the background through as rules. */
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0 0 1rem;
  border: 1px solid var(--hen-rule);
  border-radius: var(--hen-radius);
  overflow: hidden;
  background: var(--hen-rule);
}
.hen-facts__item { flex: 1 1 200px; padding: .85rem 1rem; background: var(--hen-surface); }
.hen-facts__item--wide { flex-basis: 100%; }
.hen-facts dt { margin: 0 0 .2rem; color: var(--hen-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hen-facts dd { margin: 0; color: var(--hen-ink); font-size: .98rem; line-height: 1.4; }
.hen-facts--compact .hen-facts__item { flex-basis: 180px; }
.hen-facts__item--clock dd span:first-child { font-weight: 700; font-variant-numeric: tabular-nums; }

/* City info: short facts as tiles, longer ones as rows. */
.hen-facts--tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; border: 0; border-radius: 0; overflow: visible; background: none; }
.hen-facts--tiles .hen-facts__item { padding: .8rem .95rem; border: 1px solid var(--hen-rule); border-radius: 12px; background: var(--hen-surface); }
.hen-facts--tiles dt { margin-bottom: .3rem; }
.hen-facts--tiles dd { font-size: 1.12rem; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.hen-facts--tiles .hen-facts__item { min-width: 0; }
.hen-facts--tiles dd a { display: block; overflow: hidden; font-size: .98rem; white-space: nowrap; text-overflow: ellipsis; }
.hen-facts--tiles dd .hen-muted { display: block; margin-top: .15rem; font-size: .8rem; font-weight: 400; }
.hen-facts--rows { display: block; margin-top: .25rem; border: 0; border-radius: 0; overflow: visible; background: none; }
.hen-facts--rows .hen-facts__item { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: .4rem 1.25rem; padding: .85rem 0; border-top: 1px solid var(--hen-rule); background: none; }
.hen-facts--rows .hen-facts__item:last-child { border-bottom: 1px solid var(--hen-rule); }
.hen-facts--rows dt { margin: .2rem 0 0; }
.hen-facts--rows dd { line-height: 1.55; }
@media (max-width: 560px) {
  .hen-facts--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hen-facts--rows .hen-facts__item { grid-template-columns: 1fr; }
}

/* Status words with a colour dot */
.hen-status { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.hen-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--hen-muted); }
.hen-status--yes::before { background: var(--hen-good); }
.hen-status--restricted::before { background: var(--hen-warn); }
.hen-status--no::before { background: var(--hen-bad); }

/* --- charts --------------------------------------------------------------- */

.hen-chart { display: block; width: 100%; height: auto; overflow: visible; }
.hen-chart__grid { stroke: var(--hen-rule); stroke-width: 1; }
.hen-chart__axis { fill: var(--hen-muted); font: 12px var(--hen-font); }
.hen-chart__good { fill: color-mix(in srgb, var(--hen-accent) 10%, transparent); }
.hen-chart__rain { fill: color-mix(in srgb, #3b82f6 45%, transparent); }
.hen-chart__hi { fill: none; stroke: var(--hen-accent); stroke-width: 2.5; }
.hen-chart__lo { fill: none; stroke: #2563eb; stroke-width: 2.5; }
.hen-chart__hi-dot { fill: var(--hen-accent); }
.hen-chart__lo-dot { fill: #2563eb; }
.hen-chart__price { fill: none; stroke: var(--hen-link); stroke-width: 2.5; }
.hen-chart__area { fill: color-mix(in srgb, var(--hen-link) 12%, transparent); }
.hen-chart__price-dot { fill: var(--hen-surface); stroke: var(--hen-link); stroke-width: 2.5; }
.hen-chart__price-dot:focus { outline: none; stroke-width: 4; }
.hen-chart__key { display: flex; gap: 1rem; margin: .25rem 0 0; color: var(--hen-muted); font-size: .8rem; }
.hen-chart__key span::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: .35rem; vertical-align: middle; border-radius: 2px; }
.hen-chart__key .k-hi::before { background: var(--hen-accent); }
.hen-chart__key .k-lo::before { background: #2563eb; }
.hen-chart__key .k-rain::before { height: 10px; width: 10px; background: color-mix(in srgb, #3b82f6 45%, transparent); }
.hen-linechart { max-width: 880px; }
.hen-climate__chart { max-width: 880px; margin-bottom: .75rem; }
.hen-climate__table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .85rem; text-align: center; }
.hen-climate__table th,
.hen-climate__table td { padding: .4rem .3rem; border-bottom: 1px solid var(--hen-rule); }
.hen-climate__table thead th.is-good { color: var(--hen-accent); }
.hen-climate__table tbody th { text-align: left; font-weight: 600; color: var(--hen-muted); white-space: nowrap; }
.hen-climate__chart + .hen-scroll { display: none; }
@media (max-width: 560px) { .hen-climate__chart + .hen-scroll { display: block; } .hen-climate__chart { display: none; } }

/* --- maps ----------------------------------------------------------------- */

.hen-map { position: relative; z-index: 0; height: 420px; border-radius: var(--hen-radius); overflow: hidden; background: var(--hen-well); }
.hen-map--place { height: 280px; margin-top: 1rem; }
.hen-map .leaflet-container { font: inherit; }
.hen-pin { background: none; border: 0; }
.hen-pin__dot {
  display: grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  border: 2.5px solid #fff;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
  color: #fff;
  font: 700 12px/1 var(--hen-font);
}
.hen-maplabel {
  padding: 3px 8px;
  border: 0;
  border-radius: 8px;
  background: rgb(255 255 255 / 94%);
  color: #17252f;
  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
  font: 600 12px/1.3 var(--hen-font);
}
.hen-maplabel span { display: block; font-weight: 400; color: #475569; }
.hen-maplabel::before { display: none; }
.hen-maplabel--origin { background: var(--hen-accent); color: #fff; font-size: 13px; }
.hen-mappop h4 { margin: 0 0 .3rem; font-size: 1rem; }
.hen-mappop p { margin: .3rem 0; }
.hen-mappop__sub { color: #64748b; font-size: .85rem; }
.hen-mappop table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.hen-mappop th,
.hen-mappop td { padding: .25rem .4rem .25rem 0; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
.hen-mappop em { color: #92400e; font-style: normal; }

/* --- neighborhoods -------------------------------------------------------- */

.hen-hoods.has-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: start; }
.hen-hoods.has-map .hen-map { position: sticky; top: 130px; height: 520px; }
.hen-hoods__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.hen-hoods.has-map .hen-hoods__list { grid-template-columns: 1fr; max-height: 620px; overflow: auto; padding-right: .25rem; }
.hen-hood {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--hen-rule);
  border-radius: var(--hen-radius);
  background: var(--hen-surface);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.hen-hood:hover,
.hen-hood.is-active { border-color: var(--hen-accent); box-shadow: 0 0 0 1px var(--hen-accent); }
.hen-hood:target { border-color: var(--hen-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hen-accent) 30%, transparent); }
.hen-hood__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.hen-hood__name { margin: 0; font-family: var(--hen-display); font-size: 1.3rem; font-weight: 400; color: var(--hen-ink); }
.hen-hood__price { font-weight: 700; color: var(--hen-ink); letter-spacing: .05em; }
.hen-hood__price-off { color: var(--hen-rule); }
.hen-hood__tagline { margin: .2rem 0 .5rem; color: var(--hen-accent); font-weight: 600; font-size: .9rem; }
.hen-hood__summary { margin: 0 0 .75rem; color: var(--hen-ink); font-size: .95rem; line-height: 1.55; }
.hen-hood__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .75rem 0 0; font-size: .85rem; }
.hen-hood__stays { font-weight: 700; color: var(--hen-link); }
.hen-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.hen-tags li { padding: .2rem .6rem; border-radius: 999px; background: var(--hen-well); color: var(--hen-ink); font-size: .78rem; font-weight: 500; }
.hen-safety-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-weight: 600; font-size: .78rem; background: var(--hen-well); }
.hen-safety-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hen-muted); }
.hen-safety-pill--5::before, .hen-safety-pill--4::before { background: var(--hen-good); }
.hen-safety-pill--3::before { background: var(--hen-warn); }
.hen-safety-pill--2::before, .hen-safety-pill--1::before { background: var(--hen-bad); }
@media (max-width: 860px) {
  .hen-hoods.has-map { grid-template-columns: 1fr; }
  .hen-hoods.has-map .hen-map { position: relative; top: 0; height: 320px; }
  .hen-hoods.has-map .hen-hoods__list { max-height: none; }
}

/* --- nearby / connector --------------------------------------------------- */

.hen-nearby .hen-map { height: 460px; margin-bottom: 1rem; }
.hen-conn { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .92rem; }
.hen-conn th,
.hen-conn td { padding: .7rem .6rem; border-bottom: 1px solid var(--hen-rule); text-align: left; vertical-align: top; }
.hen-conn thead th { position: sticky; top: 0; background: var(--hen-surface); }
.hen-conn thead button { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; color: var(--hen-muted); font: 700 .72rem var(--hen-font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.hen-conn thead th[aria-sort="ascending"] button::after { content: "↑"; }
.hen-conn thead th[aria-sort="descending"] button::after { content: "↓"; }
.hen-conn tbody tr { cursor: pointer; }
.hen-conn tbody tr:hover { background: var(--hen-well); }
.hen-conn tbody th { font-weight: 700; }
.hen-conn tbody th a { color: var(--hen-ink); }
.hen-conn__time { display: block; font-weight: 600; color: var(--hen-ink); font-variant-numeric: tabular-nums; }
.hen-conn__km,
.hen-conn__extra { display: block; color: var(--hen-muted); font-size: .8rem; }
.hen-conn__est,
.hen-conn__tag { display: inline-block; margin-top: .15rem; padding: 0 .35rem; border-radius: 4px; background: #fef3c7; color: #92400e; font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.hen-conn__tag { background: var(--hen-well); color: var(--hen-muted); }
.hen-conn td.is-fastest .hen-conn__time { color: var(--hen-good); }
.hen-conn td.is-fastest .hen-conn__time::after { content: " ★"; font-size: .75em; }
.hen-conn td.is-dim { opacity: .35; }
.hen-conn__none { color: var(--hen-rule); }

/* --- cards ---------------------------------------------------------------- */

.hen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.75rem 1.5rem; }
.hen-card { min-width: 0; }
.hen-card[hidden] { display: none; }
.hen-card__link { display: block; height: 100%; color: inherit; text-decoration: none; border-radius: var(--hen-radius); }
.hen-card__link:focus-visible { outline: 3px solid var(--hen-accent); outline-offset: 3px; }
.hen-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--hen-radius); background: var(--hen-well); }
.hen-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hen-img-placeholder { display: block; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--hen-accent) 22%, transparent), transparent 60%), var(--hen-well); }
.hen-card__link:hover .hen-card__img { transform: scale(1.04); }
.hen-card__rank {
  position: absolute;
  top: .6rem;
  left: .6rem;
  min-width: 34px;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: var(--hen-ink);
  color: #fff;
  font: 700 .85rem/1.2 var(--hen-font);
  text-align: center;
}
.hen-card__body { padding: .8rem .1rem 0; }
.hen-card__kicker { margin: 0 0 .2rem; color: var(--hen-muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hen-card__title { margin: 0 0 .3rem; font-family: var(--hen-display); font-size: 1.3rem; font-weight: 400; line-height: 1.2; color: var(--hen-ink); }
.hen-card__link:hover .hen-card__title { color: var(--hen-accent); }
.hen-card__rating { margin: 0 0 .2rem; }
.hen-card__meta { margin: 0; color: var(--hen-muted); font-size: .88rem; }

.hen-grid--listings.is-compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.hen-grid--events { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.hen-card--event .hen-card__link { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--hen-rule); background: var(--hen-surface); }
.hen-card--event .hen-card__link:hover { border-color: var(--hen-accent); }
.hen-card--event .hen-card__body { padding: 0; }
.hen-card--event .hen-card__title { font-size: 1.15rem; }
.hen-card__date { display: grid; place-items: center; flex: none; width: 56px; padding: .4rem 0; border-radius: 10px; background: var(--hen-accent); color: #fff; text-align: center; line-height: 1.1; }
.hen-card__date span { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hen-card__date strong { font-size: 1.5rem; }

/* Stars: a masked row, filled to the rating */
.hen-stars {
  --hen-fill: 0%;
  display: inline-block;
  width: 5.4em;
  height: 1em;
  vertical-align: -.12em;
  background: linear-gradient(90deg, #00a680 var(--hen-fill), var(--hen-rule) var(--hen-fill));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 20'%3E%3Cg%3E%3Cpath id='s' d='M10 1l2.6 6 6.4.6-4.9 4.3 1.5 6.3L10 14.9 4.4 18.2l1.5-6.3L1 7.6 7.4 7z'/%3E%3Cuse href='%23s' x='22'/%3E%3Cuse href='%23s' x='44'/%3E%3Cuse href='%23s' x='66'/%3E%3Cuse href='%23s' x='88'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 20'%3E%3Cg%3E%3Cpath id='s' d='M10 1l2.6 6 6.4.6-4.9 4.3 1.5 6.3L10 14.9 4.4 18.2l1.5-6.3L1 7.6 7.4 7z'/%3E%3Cuse href='%23s' x='22'/%3E%3Cuse href='%23s' x='44'/%3E%3Cuse href='%23s' x='66'/%3E%3Cuse href='%23s' x='88'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.hen-stars--large { font-size: 1.5rem; }
.hen-rating { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--hen-ink); }
.hen-rating__count { color: var(--hen-muted); }
.hen-rating--none { color: var(--hen-muted); font-size: .85rem; }

/* --- listing tools -------------------------------------------------------- */

.hen-listtools { margin-bottom: 1rem; }
.hen-listtools__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.hen-listtools__q { flex: 1 1 180px; min-width: 150px; }
.hen-listtools .hen-seg { margin-left: auto; }
.hen-listing__count { min-height: 1.2em; margin: 0 0 .75rem; color: var(--hen-muted); font-size: .9rem; }
.hen-listing__map { margin-bottom: 1.25rem; }
.hen-listing__map .hen-map { height: 440px; }
.hen-more { margin: 1.5rem 0 0; text-align: center; }

/* --- events calendar ------------------------------------------------------ */

.hen-cal__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.hen-cal__title { flex: 1 1 auto; order: -1; margin: 0; min-width: 12ch; font-family: var(--hen-display); font-size: 1.5rem; font-weight: 400; color: var(--hen-ink); }
.hen-cal__nav,
.hen-cal__today { min-width: 40px; min-height: 40px; padding: 0 .8rem; border: 1px solid var(--hen-rule); border-radius: 999px; background: var(--hen-surface); color: var(--hen-ink); font: 600 1rem var(--hen-font); cursor: pointer; }
.hen-cal__today { font-size: .85rem; }
.hen-cal__nav:hover,
.hen-cal__today:hover { border-color: var(--hen-ink); }
.hen-cal__grid { border: 1px solid var(--hen-rule); border-radius: var(--hen-radius); overflow: hidden; background: var(--hen-rule); display: grid; gap: 1px; }
.hen-cal__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.hen-cal__row--head div { padding: .5rem; background: var(--hen-well); color: var(--hen-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.hen-cal__day {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-height: 96px;
  padding: .4rem;
  border: 0;
  background: var(--hen-surface);
  color: var(--hen-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.hen-cal__day:hover { background: var(--hen-well); }
.hen-cal__day.is-out { color: var(--hen-muted); background: color-mix(in srgb, var(--hen-surface) 60%, var(--hen-well)); }
.hen-cal__day.is-past .hen-cal__num { color: var(--hen-muted); }
.hen-cal__day.is-selected { box-shadow: inset 0 0 0 2px var(--hen-accent); }
.hen-cal__num { font-weight: 700; font-size: .85rem; }
.hen-cal__day.is-today .hen-cal__num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--hen-accent); color: #fff; }
.hen-cal__pill { display: block; padding: 2px 6px; border-radius: 5px; background: color-mix(in srgb, var(--hen-accent) 14%, var(--hen-surface)); color: var(--hen-ink); font-size: .72rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hen-cal__plus { font-size: .72rem; font-weight: 700; color: var(--hen-muted); }
.hen-cal__dot { display: none; width: 6px; height: 6px; margin: 2px auto 0; border-radius: 50%; background: var(--hen-accent); }
.hen-cal__detail { margin-top: 1.25rem; }
.hen-cal__detail-title { margin: 0 0 .6rem; font-size: 1rem; font-weight: 700; color: var(--hen-ink); }
.hen-cal__group { margin-bottom: 1.25rem; }
.hen-cal__list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.hen-cal__event { display: grid; grid-template-columns: 72px 1fr; gap: .9rem; align-items: start; padding: .8rem; border: 1px solid var(--hen-rule); border-radius: 12px; background: var(--hen-surface); }
.hen-cal__event img,
.hen-cal__noimg { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; background: var(--hen-well); display: block; }
.hen-cal__event h4 { margin: 0 0 .2rem; font-size: 1.05rem; }
.hen-cal__event h4 a { color: var(--hen-ink); }
.hen-cal__time { margin: 0 0 .15rem; color: var(--hen-accent); font-weight: 700; font-size: .82rem; }
.hen-cal__meta { margin: 0; color: var(--hen-muted); font-size: .85rem; }
.hen-cal__add { margin: .3rem 0 0; font-size: .8rem; }
@media (max-width: 640px) {
  .hen-cal__day { min-height: 48px; align-items: center; }
  .hen-cal__pill, .hen-cal__plus { display: none; }
  .hen-cal__day.has-events .hen-cal__dot { display: block; }
}

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

.hen-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.hen-tile { padding: 1rem 1.1rem; border-radius: var(--hen-radius); background: var(--hen-well); }
.hen-tile__label { margin: 0; color: var(--hen-muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hen-tile__value { margin: .3rem 0 .1rem; color: var(--hen-ink); font-size: 1.55rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hen-tile__sub { margin: 0; color: var(--hen-muted); font-size: .8rem; }
.hen-up { color: var(--hen-good); }
.hen-down { color: var(--hen-bad); }

/* --- cost of living ------------------------------------------------------- */

.hen-col { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .92rem; }
.hen-col th,
.hen-col td { padding: .55rem .6rem; border-bottom: 1px solid var(--hen-rule); text-align: left; }
.hen-col td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hen-col thead th { color: var(--hen-muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hen-col tbody th { font-weight: 500; }
.hen-col__group th { padding-top: 1.1rem; color: var(--hen-accent); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-bottom-color: var(--hen-ink); }
.hen-diff { display: inline-block; min-width: 3.5em; padding: .1rem .4rem; border-radius: 6px; font-weight: 700; font-size: .82rem; text-align: center; }
.hen-diff--up { background: #fee2e2; color: #991b1b; }
.hen-diff--down { background: #dcfce7; color: #166534; }
.hen-diff--same { background: var(--hen-well); color: var(--hen-muted); }
.hen-compare-summary { margin: 0 0 1rem; padding: .9rem 1.1rem; border-radius: 12px; background: color-mix(in srgb, var(--hen-link) 10%, var(--hen-surface)); color: var(--hen-ink); }
.hen-compare-summary p { margin: 0; }
.hen-how { margin: 1rem 0; color: var(--hen-muted); font-size: .9rem; }
.hen-how summary { cursor: pointer; font-weight: 600; color: var(--hen-ink); }

/* --- cost to stay --------------------------------------------------------- */

.hen-trip__inputs { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(110px, 1fr)); gap: 1rem; max-width: 640px; }
.hen-trip__summary { margin: 1rem 0 .75rem; color: var(--hen-muted); font-weight: 600; }
.hen-trip__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.hen-trip__tier { padding: 1.2rem; border: 1px solid var(--hen-rule); border-radius: var(--hen-radius); background: var(--hen-surface); }
.hen-trip__tier--medium { border-color: var(--hen-accent); box-shadow: 0 0 0 1px var(--hen-accent); }
.hen-trip__name { margin: 0; color: var(--hen-muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hen-trip__total { margin: .25rem 0 0; color: var(--hen-ink); font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hen-trip__per { margin: .2rem 0 .8rem; color: var(--hen-muted); font-size: .85rem; }
.hen-trip__bar { display: flex; height: 10px; margin-bottom: .75rem; border-radius: 999px; overflow: hidden; background: var(--hen-well); }
.hen-trip__parts { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; font-size: .85rem; color: var(--hen-ink); }
.hen-trip__parts li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: .5rem; }
.hen-trip__parts strong { font-variant-numeric: tabular-nums; }
.hen-trip__parts .k { width: 10px; height: 10px; border-radius: 3px; }
.p-lodging { background: var(--hen-accent); }
.p-food { background: #f59e0b; }
.p-transport { background: #2563eb; }
.p-activities { background: #16a34a; }
@media (max-width: 560px) { .hen-trip__inputs { grid-template-columns: 1fr 1fr; } .hen-trip__inputs > :first-child { grid-column: 1 / -1; } }

/* --- real estate ---------------------------------------------------------- */

.hen-mortgage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem; border: 1px solid var(--hen-rule); border-radius: var(--hen-radius); background: var(--hen-surface); }
.hen-mortgage__inputs { display: grid; gap: .9rem; }
.hen-mortgage__pay { display: flex; flex-direction: column; margin: 0 0 1rem; }
.hen-mortgage__pay span { color: var(--hen-muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hen-mortgage__pay strong { font-size: 2.2rem; color: var(--hen-ink); font-variant-numeric: tabular-nums; }
.hen-mortgage__dl { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; margin: 0; }
.hen-mortgage__dl dt { color: var(--hen-muted); font-size: .8rem; }
.hen-mortgage__dl dd { margin: 0; font-weight: 700; color: var(--hen-ink); font-variant-numeric: tabular-nums; }
.hen-mortgage__vs { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--hen-rule); color: var(--hen-muted); font-size: .9rem; }
@media (max-width: 720px) { .hen-mortgage { grid-template-columns: 1fr; } }

/* --- avoid & health places ------------------------------------------------ */

.hen-avoids.has-map { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.hen-avoids.has-map .hen-map { height: 420px; }
.hen-avoids.has-map .hen-map--health { height: 320px; }
.hen-avoids__list { display: grid; gap: .8rem; }
.hen-avoid { padding: 1rem 1.15rem; border: 1px solid var(--hen-rule); border-left: 4px solid var(--hen-warn); border-radius: 12px; background: var(--hen-surface); }
.hen-avoid--avoid { border-left-color: var(--hen-bad); }
.hen-avoid__badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .4rem; }
.hen-avoid__name { margin: 0 0 .3rem; font-size: 1.1rem; color: var(--hen-ink); }
.hen-avoid p:last-child { margin: 0; color: var(--hen-ink); font-size: .95rem; }
.hen-badge { display: inline-block; padding: .12rem .5rem; border-radius: 6px; background: var(--hen-well); color: var(--hen-ink); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hen-badge--avoid { background: #fee2e2; color: #991b1b; }
.hen-badge--caution { background: #fef3c7; color: #92400e; }
.hen-badge--hospital { background: #fee2e2; color: #991b1b; }
.hen-badge--pharmacy { background: #dcfce7; color: #166534; }
.hen-badge--clinic { background: #dbeafe; color: #1e40af; }
.hen-places { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.hen-place { display: grid; gap: .15rem; padding: .8rem 1rem; border: 1px solid var(--hen-rule); border-radius: 12px; background: var(--hen-surface); font-size: .92rem; }
.hen-place .hen-badge { justify-self: start; }
.hen-place span:not(.hen-badge) { color: var(--hen-muted); }
@media (max-width: 860px) { .hen-avoids.has-map { grid-template-columns: 1fr; } .hen-avoids.has-map .hen-map { height: 300px; } }

/* --- safety --------------------------------------------------------------- */

.hen-safety { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; align-items: center; margin-bottom: 1.5rem; }
.hen-gauge { text-align: center; }
.hen-gauge__ring {
  --deg: calc(var(--val) * 3.6deg);
  display: grid;
  place-content: center;
  width: 170px;
  height: 170px;
  margin: 0 auto .6rem;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--hen-surface) 76%, transparent 77%),
    conic-gradient(var(--hen-good) var(--deg), var(--hen-well) 0);
}
.hen-gauge__num { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--hen-ink); }
.hen-gauge__of { color: var(--hen-muted); font-size: .85rem; }
.hen-gauge__word { margin: 0; font-weight: 700; font-size: 1.1rem; color: var(--hen-ink); }
.hen-gauge p.hen-muted { margin: .2rem 0 0; font-size: .8rem; }
.hen-bars { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.hen-bar { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(100px, 2fr) 90px; align-items: center; gap: .8rem; font-size: .92rem; color: var(--hen-ink); }
.hen-bar__track { height: 10px; border-radius: 999px; background: var(--hen-well); overflow: hidden; }
.hen-bar__fill { display: block; height: 100%; border-radius: 999px; }
.hen-bar__fill--good { background: var(--hen-good); }
.hen-bar__fill--mid { background: #f59e0b; }
.hen-bar__fill--bad { background: var(--hen-bad); }
.hen-bar__value { color: var(--hen-muted); font-size: .85rem; }
.hen-emergency { margin: 0 0 1rem; }
.hen-emergency__label { margin: 0 0 .5rem; color: var(--hen-muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hen-emergency ul { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.hen-emergency a { display: inline-flex; align-items: baseline; gap: .6rem; padding: .7rem 1.1rem; border-radius: 12px; background: #fee2e2; color: #7f1d1d; text-decoration: none; }
.hen-emergency strong { font-size: 1.4rem; }
@media (max-width: 720px) {
  .hen-safety { grid-template-columns: 1fr; }
  .hen-bar { grid-template-columns: 1fr 80px; }
  .hen-bar__track { grid-column: 1 / -1; grid-row: 2; }
}

/* --- reviews -------------------------------------------------------------- */

.hen-reviews__title { margin: 0 0 1rem; font-family: var(--hen-display); font-size: 1.9rem; font-weight: 400; color: var(--hen-ink); }
.hen-reviews__summary { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 1.5rem 2rem; align-items: center; padding: 1.25rem; border: 1px solid var(--hen-rule); border-radius: var(--hen-radius); background: var(--hen-surface); }
.hen-reviews__avg { margin: 0; font-size: 3rem; font-weight: 800; line-height: 1; color: var(--hen-ink); }
.hen-reviews__word { margin: .2rem 0 .3rem; font-weight: 700; color: var(--hen-ink); }
.hen-reviews__count,
.hen-reviews__rank { margin: .3rem 0 0; color: var(--hen-muted); font-size: .88rem; }
.hen-reviews__rank { color: var(--hen-good); font-weight: 700; }
.hen-reviews__bars { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.hen-reviews__bar { display: grid; grid-template-columns: 80px 1fr 36px; align-items: center; gap: .6rem; width: 100%; padding: .2rem .35rem; border: 0; border-radius: 6px; background: none; color: var(--hen-ink); font: 400 .85rem var(--hen-font); text-align: left; cursor: pointer; }
.hen-reviews__bar:hover:not(:disabled),
.hen-reviews__bar[aria-pressed="true"] { background: var(--hen-well); }
.hen-reviews__bar[aria-pressed="true"] .hen-reviews__bar-label { font-weight: 700; }
.hen-reviews__bar:disabled { cursor: default; opacity: .6; }
.hen-reviews__bar-track { height: 10px; border-radius: 999px; background: var(--hen-well); overflow: hidden; }
.hen-reviews__bar-track span { display: block; height: 100%; background: #00a680; border-radius: 999px; }
.hen-reviews__bar-n { color: var(--hen-muted); text-align: right; font-variant-numeric: tabular-nums; }
.hen-reviews__tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 .5rem; }
.hen-reviews__tools .hen-chipset { margin: 0; }
.hen-reviews__list { margin: 0; padding: 0; list-style: none; }
.hen-review { padding: 1.25rem 0; border-bottom: 1px solid var(--hen-rule); }
.hen-review[hidden] { display: none; }
.hen-review__who { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.hen-review__who img { border-radius: 50%; }
.hen-review__name { margin: 0; font-weight: 700; color: var(--hen-ink); }
.hen-review__meta { margin: 0; color: var(--hen-muted); font-size: .85rem; }
.hen-review__title { margin: .4rem 0 .3rem; font-size: 1.1rem; color: var(--hen-ink); }
.hen-review__text p { margin: 0 0 .6em; }
.hen-review__date { margin: .5rem 0 0; color: var(--hen-muted); font-size: .82rem; }
.hen-review__reply { margin: .8rem 0 0 1.5rem; padding: .8rem 1rem; border-left: 3px solid var(--hen-link); border-radius: 0 10px 10px 0; background: var(--hen-well); font-size: .95rem; }
.hen-reviews__more { text-align: center; }
@media (max-width: 760px) {
  .hen-reviews__summary { grid-template-columns: 1fr; }
}

/* Review form */
.hen-review-form { margin-top: 1rem; }
.hen-review-form__note { color: var(--hen-muted); font-size: .9rem; }
.hen-stars-input { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin: 0 0 1rem; padding: 0; border: 0; }
.hen-stars-input legend { width: 100%; margin-bottom: .4rem; padding: 0; font-weight: 700; }
.hen-stars-input__row { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.hen-stars-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hen-stars-input label {
  width: 36px;
  height: 36px;
  cursor: pointer;
  background: var(--hen-rule);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l2.6 6 6.4.6-4.9 4.3 1.5 6.3L10 14.9 4.4 18.2l1.5-6.3L1 7.6 7.4 7z'/%3E%3C/svg%3E") center / 30px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l2.6 6 6.4.6-4.9 4.3 1.5 6.3L10 14.9 4.4 18.2l1.5-6.3L1 7.6 7.4 7z'/%3E%3C/svg%3E") center / 30px no-repeat;
}
.hen-stars-input input:checked ~ label,
.hen-stars-input label:hover,
.hen-stars-input label:hover ~ label { background: #00a680; }
.hen-stars-input input:focus-visible + label { outline: 2px solid var(--hen-accent); outline-offset: 2px; }
.hen-stars-input__word { font-weight: 700; color: var(--hen-ink); min-width: 6ch; }
.hen-review-form__row { margin: 0 0 1rem; }
.hen-review-form__row label { display: block; margin-bottom: .3rem; font-weight: 700; font-size: .9rem; }
.hen-review-form__row input,
.hen-review-form__row select { width: 100%; min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--hen-rule); border-radius: 10px; background: var(--hen-surface); color: var(--hen-ink); font: inherit; }
.hen-review-form__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.hen-review-form.is-reply .hen-stars-input,
.hen-review-form.is-reply .hen-review-form__row,
.hen-review-form.is-reply .hen-review-form__pair { display: none; }

/* --- details, gallery, when ---------------------------------------------- */

.hen-details { margin: 0 0 1.5rem; }
.hen-cta { margin: 1rem 0; }
.hen-amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .4rem .8rem; margin: 0; padding: 0; list-style: none; }
.hen-amenities li::before { content: "✓"; margin-right: .45rem; color: var(--hen-good); font-weight: 700; }
.hen-class { color: #d97706; letter-spacing: .08em; }
.hen-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 32%); gap: .6rem; margin: 1.5rem 0; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; }
.hen-gallery__item { scroll-snap-align: start; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--hen-well); }
.hen-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.hen-gallery__item:hover img { transform: scale(1.04); }
.hen-lightbox { width: min(1100px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 12px; background: #000; color: #fff; }
.hen-lightbox::backdrop { background: rgb(0 0 0 / 85%); }
.hen-lightbox img { display: block; width: 100%; max-height: 86vh; object-fit: contain; }
.hen-lightbox button { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(0 0 0 / 55%); color: #fff; font-size: 1.8rem; cursor: pointer; }
.hen-lightbox__prev { left: 10px; top: 50%; transform: translateY(-50%); }
.hen-lightbox__next { right: 10px; top: 50%; transform: translateY(-50%); }
.hen-lightbox__close { right: 10px; top: 10px; }
.hen-lightbox__count { position: absolute; left: 14px; bottom: 6px; margin: 0; font-size: .85rem; opacity: .8; }

.hen-when { padding: 1.1rem 1.2rem; border-radius: var(--hen-radius); background: var(--hen-well); margin-bottom: 1rem; }
.hen-when__label { margin: 0; color: var(--hen-muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hen-when__date { margin: .2rem 0 .8rem; font-size: 1.3rem; font-weight: 700; color: var(--hen-ink); }
.hen-addcal { display: flex; flex-wrap: wrap; gap: .5rem; }
.hen-dates { margin: 0 0 1rem; }
.hen-dates summary { cursor: pointer; font-weight: 600; }

/* --- city search --------------------------------------------------------- */

.hen-search { position: relative; display: flex; gap: .5rem; max-width: 560px; }
.hen-search input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: .6rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #17252f;
  font: 400 1.05rem var(--hen-font);
  box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
}
.hen-search button { min-height: 52px; padding: 0 1.4rem; border: 0; border-radius: 999px; background: var(--hen-accent); color: var(--hen-accent-ink); font: 700 1rem var(--hen-font); cursor: pointer; }
.hen-search__list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; margin: 0; padding: .35rem; list-style: none; border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgb(0 0 0 / 22%); }
.hen-search__list a { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border-radius: 10px; color: #17252f; text-decoration: none; }
.hen-search__list span { color: #64748b; font-size: .9rem; }
.hen-search__list li.is-active a,
.hen-search__list a:hover { background: #f1f5f9; }
.hen-search__list .is-none { padding: .6rem .8rem; color: #64748b; }

/* --- newsletter ----------------------------------------------------------- */

.hen-subscribe { font-family: var(--hen-font); }
.hen-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; border: 0; }
.hen-chip { position: relative; cursor: pointer; }
.hen-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hen-chip span { display: inline-block; padding: .45rem .9rem; border: 1px solid var(--hen-rule); border-radius: 999px; background: var(--hen-surface); color: var(--hen-ink); font-size: .875rem; }
.hen-chip input:checked + span { border-color: var(--hen-accent); background: var(--hen-accent); color: var(--hen-accent-ink); }
.hen-chip input:focus-visible + span { outline: 3px solid var(--hen-accent); outline-offset: 2px; }
.hen-subscribe__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.hen-subscribe__row input { flex: 1 1 220px; min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--hen-rule); border-radius: 10px; background: var(--hen-surface); color: var(--hen-ink); font: inherit; }
.hen-subscribe__row button { min-height: 44px; padding: .55rem 1.2rem; border: 0; border-radius: 999px; background: var(--hen-accent); color: var(--hen-accent-ink); font: 700 1rem var(--hen-font); cursor: pointer; }
.hen-subscribe__note { min-height: 1.4em; margin: .6rem 0 0; font-size: .9rem; }
.hen-subscribe__note.is-error { color: var(--hen-bad); }
.hen-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hen-notice { padding: .6rem .9rem; border-radius: 10px; background: color-mix(in srgb, var(--hen-accent) 12%, transparent); }

/* --- under other themes --------------------------------------------------- */

.hen-fallback .hen-sec { margin: 3rem 0; }
.hen-fallback .hen-units { margin: 1rem 0; }

/* A circle on its own page (City Circles → one circle). */
.hen-hub__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 1.25rem; }
.hen-hub--circle .hen-circle__title { display: none; }