/* ============================================================
   PAGE OFFRES D'EMPLOI (page-offres-emploi.php)
   Bandeau de recherche clair, colonne de filtres repliables, grille de
   cartes. Chargee seulement sur cette page, apres job-haiti-app.css dont
   elle reprend les jetons (--jh-*). Les anciennes regles .jh2-jobs-* de
   job-haiti-app.css restent pour archive-job.php.
   ============================================================ */

.jh2-jl { background: var(--jh-bg); padding-bottom: 5rem; }

/* Anneau de focus clavier : le reset du theme en production retire encore
   l'outline des champs (input, select { outline: none }). Specificite basse,
   les composants qui portent l'anneau sur leur conteneur le remplacent. */
.jh2-jl :where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--jh-focus, var(--jh-blue-600));
  outline-offset: 2px;
}

/* === Bandeau de recherche === */
.jh2-jl-search {
  background: var(--jh-white);
  border-bottom: 1px solid var(--jh-gray-200);
  padding: 1.25rem 0 1rem;
}
@media (min-width: 768px) { .jh2-jl-search { padding: 1.75rem 0 1.25rem; } }

.jh2-jl-search__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.25rem 1.5rem; margin-bottom: 1rem;
}
.jh2-jl-title {
  font-size: 1.5rem; font-weight: 700; color: var(--jh-gray-900);
  line-height: 1.2; letter-spacing: -0.01em;
}
@media (min-width: 768px) { .jh2-jl-title { font-size: 1.75rem; } }
.jh2-jl-sub { font-size: 0.875rem; font-weight: 500; color: var(--jh-gray-500); }
.jh2-jl-sub strong { color: var(--jh-gray-900); font-weight: 700; }

/* Une colonne sur telephone, 2 sur tablette (4 champs serres coupaient les
   textes indicatifs a 768px), une seule ligne a partir de 1024px. */
.jh2-jl-form { display: grid; gap: 0.625rem; }
@media (min-width: 640px) {
  .jh2-jl-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .jh2-jl-form { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
}
/* Champ : fond gris clair, bordure fine, halo petrole au focus (DESIGN.md).
   Toute la case est cliquable : le padding vertical est porte par le champ. */
.jh2-jl-field {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0 0.875rem; min-width: 0;
  background: var(--jh-gray-50);
  border: 1px solid var(--jh-gray-200);
  border-radius: 12px;
  transition: border-color var(--jh-t), box-shadow var(--jh-t), background-color var(--jh-t);
}
.jh2-jl-field:hover { border-color: var(--jh-gray-300); }
.jh2-jl-field:focus-within {
  background: var(--jh-white);
  border-color: var(--jh-blue-500);
  box-shadow: 0 0 0 3px var(--jh-blue-50);
}
.jh2-jl-field svg { flex-shrink: 0; color: var(--jh-gray-400); }
.jh2-jl-field:focus-within svg { color: var(--jh-blue-600); }
.jh2-jl-field input,
.jh2-jl-field select {
  flex: 1; min-width: 0; align-self: stretch;
  padding: 0.75rem 0; min-height: 2.875rem;
  font-size: 0.9375rem; font-weight: 500; color: var(--jh-gray-900);
}
.jh2-jl-field select { cursor: pointer; }
.jh2-jl-field input:focus-visible,
.jh2-jl-field select:focus-visible { outline: none; } /* l'anneau est porte par la case */
.jh2-jl-field input::placeholder { color: var(--jh-gray-500); }

.jh2-jl-submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.875rem; padding: 0 1.75rem;
  background: var(--jh-blue-600); color: var(--jh-white);
  font-size: 0.9375rem; font-weight: 700; white-space: nowrap;
  border-radius: 12px;
  box-shadow: var(--jh-shadow-blue);
  transition: background-color var(--jh-t), transform var(--jh-t);
}
.jh2-jl-submit:hover { background: var(--jh-blue-700); transform: translateY(-1px); }
.jh2-jl-submit--block { width: 100%; }

/* Recherches populaires + lien vers les appels d'offres */
.jh2-jl-popular {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.625rem 0.75rem; margin-top: 0.875rem;
}
.jh2-jl-popular__label { font-size: 0.8125rem; font-weight: 600; color: var(--jh-gray-700); }
.jh2-jl-popular__list { display: flex; gap: 0.5rem; }
.jh2-jl-chip {
  display: inline-flex; align-items: center; min-height: 2rem;
  padding: 0.25rem 0.75rem; border-radius: 9999px;
  background: var(--jh-gray-100); color: var(--jh-gray-700);
  font-size: 0.8125rem; font-weight: 500; white-space: nowrap;
  transition: background-color var(--jh-t), color var(--jh-t);
}
.jh2-jl-chip:hover { background: var(--jh-blue-50); color: var(--jh-blue-700); }
.jh2-jl-chip.is-active { background: var(--jh-blue-600); color: var(--jh-white); }

/* Le lien du plugin est dessine pour l'ancien hero sombre : on le passe en
   clair. Selecteurs a deux classes, tenders.css pouvant charger apres. */
.jh2-jl-search .lnv-ao-jobs-link-wrap { margin: 0 0 0 auto; }
.jh2-jl-search .lnv-ao-jobs-link {
  min-height: 2rem; gap: 0.5rem; padding: 0.25rem 0.875rem;
  background: var(--jh-blue-50); border-color: var(--jh-blue-100);
  color: var(--jh-blue-700); font-size: 0.8125rem;
}
.jh2-jl-search .lnv-ao-jobs-link:hover { background: var(--jh-blue-100); border-color: var(--jh-blue-200); color: var(--jh-blue-700); }
.jh2-jl-search .lnv-ao-jobs-link__text strong { color: var(--jh-blue-700); }
.jh2-jl-search .lnv-ao-jobs-link__text span { color: var(--jh-gray-600); }
.jh2-jl-search .lnv-ao-jobs-link svg { width: 16px; height: 16px; color: var(--jh-blue-600); }

/* Mobile : une ligne de pastilles qui defile, le lien appels d'offres dessous */
@media (max-width: 767px) {
  .jh2-jl-popular__label { display: none; } /* garde son role de nom de la liste */
  .jh2-jl-popular__list {
    flex: 1 1 100%; overflow-x: auto; scrollbar-width: none;
    margin: 0 -1rem; padding: 0 1rem;
  }
  .jh2-jl-popular__list::-webkit-scrollbar { display: none; }
  .jh2-jl-search .lnv-ao-jobs-link-wrap { margin: 0; }
}

/* === Mise en page des resultats === */
.jh2-jl-body { padding-top: 1.5rem; }
@media (min-width: 768px) { .jh2-jl-body { padding-top: 2rem; } }
.jh2-jl-layout { display: grid; }
@media (min-width: 1024px) {
  .jh2-jl-layout { grid-template-columns: 18rem minmax(0, 1fr); gap: 1.75rem; align-items: start; }
}

/* === Colonne de filtres ===
   La classe .jh2-jobs-filter-form (job-haiti-app.css) fournit le masquage
   sous 1024px et le panneau plein ecran .is-open ; on ne redessine ici que
   la carte. Pas de position collante : la colonne depasse la hauteur d'ecran. */
.jh2-jl-filters {
  position: static;
  border: 1px solid var(--jh-gray-200);
  border-radius: 16px;
  box-shadow: none;
}
.jh2-jl-filters__head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem 0.75rem;
}
.jh2-jl-filters__head h2 { flex: 1; font-size: 1rem; font-weight: 700; color: var(--jh-gray-900); }
.jh2-jl-filters__reset { font-size: 0.8125rem; font-weight: 600; color: var(--jh-red-600); }
.jh2-jl-filters__reset:hover { color: var(--jh-red-700); text-decoration: underline; }
.jh2-jl-filters .jh2-filter-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0; margin-right: -0.625rem; color: var(--jh-gray-700);
}
@media (min-width: 1024px) { .jh2-jl-filters .jh2-filter-close { display: none; } }

/* Aide (WCAG 3.2.2) : sur ordinateur, chaque choix relance la recherche ;
   dans le panneau mobile, on coche puis on valide avec la barre du bas. */
.jh2-jl-filters .jh2-filter-hint { margin: 0; padding: 0 1.25rem 0.75rem; font-size: 0.75rem; color: var(--jh-gray-500); }
@media (max-width: 1023px) { .jh2-jl-filters .jh2-filter-hint { display: none; } }
.jh2-jl-filters .jh2-filter-apply { display: none; }
.jh2-jl-filters.is-open .jh2-filter-apply {
  display: block; position: sticky; bottom: 0;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--jh-white); border-top: 1px solid var(--jh-gray-100);
}
.jh2-jl-filters .jh2-filter-apply button {
  width: 100%; min-height: 3rem; border-radius: 12px;
  background: var(--jh-blue-600); color: var(--jh-white); font-weight: 700;
}

.jh2-jl-group { border-top: 1px solid var(--jh-gray-100); padding: 0.75rem 1.25rem; }
.jh2-jl-group > summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 2.25rem; cursor: pointer; list-style: none;
  font-size: 0.9375rem; font-weight: 700; color: var(--jh-gray-900);
}
.jh2-jl-group > summary::-webkit-details-marker { display: none; }
/* Chevron : vers le bas ferme, vers le haut ouvert (comme la maquette). */
.jh2-jl-group > summary::after {
  content: ''; width: 0.4375rem; height: 0.4375rem; margin-right: 0.25rem;
  border-right: 2px solid var(--jh-gray-500); border-bottom: 2px solid var(--jh-gray-500);
  transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease-out;
}
.jh2-jl-group[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.jh2-jl-group > summary:hover { color: var(--jh-blue-600); }
.jh2-jl-group__title {
  display: block; margin: 0.375rem 0 0.625rem;
  font-size: 0.9375rem; font-weight: 700; color: var(--jh-gray-900);
}

.jh2-jl-group__options { display: grid; gap: 0.125rem 0.5rem; padding: 0.25rem 0 0.375rem; }
.jh2-jl-group__options--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jh2-jl-check {
  display: flex; align-items: center; gap: 0.5rem; min-height: 2rem;
  font-size: 0.875rem; color: var(--jh-gray-600); cursor: pointer;
  transition: color var(--jh-t);
}
.jh2-jl-check input {
  flex-shrink: 0; width: 1rem; height: 1rem; margin: 0;
  accent-color: var(--jh-blue-600); cursor: pointer;
}
.jh2-jl-check:hover,
.jh2-jl-check:has(input:checked) { color: var(--jh-gray-900); }
.jh2-jl-check:has(input:checked) { font-weight: 600; }

.jh2-jl-select select {
  width: 100%; min-height: 2.75rem; padding: 0 0.75rem;
  background: var(--jh-white); border: 1px solid var(--jh-gray-200); border-radius: 10px;
  font-size: 0.875rem; font-weight: 500; color: var(--jh-gray-900); cursor: pointer;
}
.jh2-jl-select select:hover { border-color: var(--jh-gray-300); }
.jh2-jl-group--static { padding-bottom: 1.25rem; }

/* Panneau mobile : en-tete fixe en haut, cibles tactiles de 44px */
.jh2-jl-filters.is-open .jh2-jl-filters__head {
  position: sticky; top: 0; z-index: 1;
  background: var(--jh-white); border-bottom: 1px solid var(--jh-gray-100);
  padding-bottom: 1rem;
}
.jh2-jl-filters.is-open .jh2-jl-filters__head + .jh2-filter-hint + .jh2-jl-group { border-top: none; }
.jh2-jl-filters.is-open .jh2-jl-check { min-height: 2.75rem; }

/* Encart WhatsApp sous les filtres (ordinateur ; sur mobile, le pop-up s'en charge) */
.jh2-jl-promo {
  display: none; margin-top: 1rem; padding: 1.25rem;
  background: var(--jh-white); border: 1px solid var(--jh-gray-200); border-radius: 16px;
}
@media (min-width: 1024px) { .jh2-jl-promo { display: block; } }
.jh2-jl-promo__title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.9375rem; font-weight: 700; color: var(--jh-gray-900);
}
.jh2-jl-promo__title svg { color: var(--jh-blue-600); flex-shrink: 0; }
.jh2-jl-promo__text { margin: 0.375rem 0 1rem; font-size: 0.8125rem; line-height: 1.5; color: var(--jh-gray-500); }
.jh2-jl-promo__btn {
  display: flex; align-items: center; justify-content: center; min-height: 2.75rem;
  background: var(--jh-blue-600); color: var(--jh-white);
  font-size: 0.875rem; font-weight: 700; border-radius: 10px;
  transition: background-color var(--jh-t);
}
.jh2-jl-promo__btn:hover { background: var(--jh-blue-700); }

/* === En-tete de liste === */
.jh2-jl-main { min-width: 0; }
.jh2-jl-main__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.jh2-jl-count { flex: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500; color: var(--jh-gray-600); }
.jh2-jl-count strong { font-weight: 700; color: var(--jh-gray-900); }
.jh2-jl-count__query { color: var(--jh-gray-900); }

.jh2-jl-filter-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
  min-height: 2.75rem; padding: 0 1rem;
  background: var(--jh-white); border: 1px solid var(--jh-gray-200); border-radius: 10px;
  font-size: 0.875rem; font-weight: 600; color: var(--jh-gray-700);
  transition: border-color var(--jh-t), color var(--jh-t);
}
.jh2-jl-filter-toggle:hover { border-color: var(--jh-blue-200); color: var(--jh-blue-600); }
.jh2-jl-filter-toggle__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.3125rem; border-radius: 9999px;
  background: var(--jh-blue-600); color: var(--jh-white); font-size: 0.6875rem; font-weight: 700;
}
@media (min-width: 1024px) { .jh2-jl-filter-toggle { display: none; } }

.jh2-jl-views { display: none; gap: 0.25rem; }
@media (min-width: 640px) { .jh2-jl-views { display: flex; } }
.jh2-jl-view {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 8px;
  background: var(--jh-white); border: 1px solid var(--jh-gray-200); color: var(--jh-gray-500);
  transition: color var(--jh-t), border-color var(--jh-t), background-color var(--jh-t);
}
.jh2-jl-view:hover { color: var(--jh-gray-900); }
.jh2-jl-view.is-active { background: var(--jh-blue-50); border-color: var(--jh-blue-200); color: var(--jh-blue-600); }

/* === Grille de cartes ===
   3 colonnes avec la colonne de filtres a partir de ~1280px, 2 entre les
   deux, 1 sur telephone. min(100%, …) evite tout debordement sous 320px. */
.jh2-jl-results {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.jh2-jl-results--list { grid-template-columns: 1fr; gap: 1rem; }

.jh2-jl-card {
  position: relative;
  display: flex; flex-direction: column; gap: 0.875rem;
  padding: 1.25rem;
  background: var(--jh-white);
  border: 1px solid var(--jh-gray-200);
  border-radius: 16px;
  box-shadow: var(--jh-shadow-sm);
  transition: border-color var(--jh-t), box-shadow var(--jh-t), transform var(--jh-t);
}
.jh2-jl-card:hover {
  border-color: var(--jh-blue-200);
  box-shadow: var(--jh-shadow-lg);
  transform: translateY(-3px);
}
.jh2-jl-card:focus-within { border-color: var(--jh-blue-200); }

/* Logo | entreprise + marque-page, puis le titre sur toute la largeur restante
   (les intitules sont longs : a cote du bouton, il ne restait que ~140px). */
.jh2-jl-card__head {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  grid-template-areas: "logo company save" "logo title title";
  align-items: center; gap: 0.25rem 0.75rem;
}
.jh2-jl-card__head--no-company { grid-template-areas: "logo title save"; }
.jh2-jl-card__logo {
  grid-area: logo; align-self: start;
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; overflow: hidden;
  background: var(--jh-white); border: 1px solid var(--jh-gray-200); border-radius: 10px;
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em;
}
.jh2-jl-card__logo img { width: 100%; height: 100%; object-fit: contain; padding: 0.25rem; }
/* Initiales : teintes 50/100 + texte 700 (>= 4.5:1, voir :root). */
.jh2-jl-card__logo--teal    { background: var(--jh-blue-50);    border-color: var(--jh-blue-100);  color: var(--jh-blue-700); }
.jh2-jl-card__logo--emerald { background: var(--jh-emerald-50); border-color: #d1fae5;             color: var(--jh-emerald-700); }
.jh2-jl-card__logo--purple  { background: var(--jh-purple-50);  border-color: #ede9fe;             color: var(--jh-purple-700); }
.jh2-jl-card__logo--pink    { background: var(--jh-pink-50);    border-color: #fce7f3;             color: var(--jh-pink-700); }
.jh2-jl-card__logo--cyan    { background: var(--jh-cyan-50);    border-color: #cffafe;             color: var(--jh-cyan-700); }
.jh2-jl-card__logo--amber   { background: var(--jh-amber-100);  border-color: #fde68a;             color: var(--jh-amber-800); }

.jh2-jl-card__company {
  grid-area: company; min-width: 0;
  font-size: 0.8125rem; font-weight: 500; color: var(--jh-gray-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jh2-jl-card__title {
  grid-area: title; align-self: start;
  font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--jh-gray-900);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
/* Le lien du titre couvre toute la carte ; son anneau de focus aussi. */
.jh2-jl-card__link { color: inherit; transition: color var(--jh-t); }
.jh2-jl-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.jh2-jl-card:hover .jh2-jl-card__link { color: var(--jh-blue-600); }
.jh2-jl-card__link:focus-visible { outline: none; }
.jh2-jl-card__link:focus-visible::after { outline: 2px solid var(--jh-focus, var(--jh-blue-600)); outline-offset: 2px; }

.jh2-jl-card__save {
  grid-area: save; position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  background: var(--jh-white); border: 1px solid var(--jh-gray-200); border-radius: 10px;
  color: var(--jh-gray-500);
  transition: color var(--jh-t), border-color var(--jh-t), background-color var(--jh-t);
}
.jh2-jl-card__save:hover { color: var(--jh-blue-600); border-color: var(--jh-blue-200); background: var(--jh-blue-50); }
.jh2-jl-card__save.is-saved { color: var(--jh-blue-600); border-color: var(--jh-blue-200); background: var(--jh-blue-50); }

.jh2-jl-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1rem;
  font-size: 0.8125rem; color: var(--jh-gray-500);
}
.jh2-jl-card__meta li { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; }
.jh2-jl-card__meta svg { flex-shrink: 0; color: var(--jh-gray-400); }
.jh2-jl-card__tag {
  padding: 0.125rem 0.5rem; border-radius: 9999px;
  background: var(--jh-amber-100); color: var(--jh-amber-800);
  font-size: 0.6875rem; font-weight: 700;
}
.jh2-jl-card__tag--featured { background: var(--jh-emerald-50); color: var(--jh-emerald-700); }

.jh2-jl-card__desc {
  font-size: 0.8125rem; line-height: 1.55; color: var(--jh-gray-500);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}

/* Bas de carte colle en bas : les boutons d'une meme rangee s'alignent. */
.jh2-jl-card__end { display: flex; flex-direction: column; gap: 0.875rem; margin-top: auto; }
.jh2-jl-card__foot {
  display: flex; align-items: center; gap: 0.75rem;
  padding-top: 0.875rem; border-top: 1px solid var(--jh-gray-100);
}
.jh2-jl-card__key {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.875rem; font-weight: 700; color: var(--jh-gray-900);
}
.jh2-jl-card__key.is-soon { color: var(--jh-amber-700); }
.jh2-jl-card__key--muted { font-weight: 600; color: var(--jh-gray-600); }
.jh2-jl-card__age { margin-left: auto; flex-shrink: 0; font-size: 0.8125rem; color: var(--jh-gray-500); white-space: nowrap; }

.jh2-jl-card__cta {
  display: flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: 2.5rem; border-radius: 10px;
  background: var(--jh-blue-50); color: var(--jh-blue-600);
  font-size: 0.875rem; font-weight: 700;
  transition: background-color var(--jh-t), color var(--jh-t);
}
.jh2-jl-card__cta svg { transition: transform var(--jh-t); }
.jh2-jl-card:hover .jh2-jl-card__cta { background: var(--jh-blue-600); color: var(--jh-white); }
.jh2-jl-card:hover .jh2-jl-card__cta svg { transform: translateX(3px); }

/* Vue liste : contenu a gauche, date et bouton dans une colonne a droite */
@media (min-width: 768px) {
  .jh2-jl-results--list .jh2-jl-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12.5rem;
    grid-template-areas: "head end" "meta end" "desc end";
    grid-template-rows: auto auto 1fr;
    gap: 0.625rem 2rem;
  }
  .jh2-jl-results--list .jh2-jl-card__head { grid-area: head; }
  .jh2-jl-results--list .jh2-jl-card__meta { grid-area: meta; padding-left: 3.25rem; }
  .jh2-jl-results--list .jh2-jl-card__desc { grid-area: desc; padding-left: 3.25rem; }
  .jh2-jl-results--list .jh2-jl-card__end { grid-area: end; align-self: center; margin-top: 0; gap: 0.75rem; }
  .jh2-jl-results--list .jh2-jl-card__foot {
    flex-direction: column; align-items: flex-start; gap: 0.125rem;
    padding-top: 0; border-top: none;
  }
  .jh2-jl-results--list .jh2-jl-card__key { max-width: 100%; }
  .jh2-jl-results--list .jh2-jl-card__age { margin-left: 0; }
}

/* === Pagination et etat vide === */
.jh2-jl .jh2-pagination { margin-top: 2.5rem; }
.jh2-jl .jh2-page-link { border-color: var(--jh-gray-200); }
.jh2-jl .jh2-page-link:hover:not(.is-active) { border-color: var(--jh-blue-200); color: var(--jh-blue-600); }

.jh2-jl-empty {
  padding: 3.5rem 1.5rem; text-align: center;
  background: var(--jh-white); border: 1px solid var(--jh-gray-200); border-radius: 16px;
}
.jh2-jl-empty svg { margin: 0 auto 1rem; color: var(--jh-gray-300); }
.jh2-jl-empty__title { margin-bottom: 0.375rem; font-size: 1.0625rem; font-weight: 700; color: var(--jh-gray-900); }
.jh2-jl-empty__text { font-size: 0.875rem; color: var(--jh-gray-500); }
.jh2-jl-empty__btn {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 1.25rem; padding: 0 1.25rem;
  background: var(--jh-blue-50); color: var(--jh-blue-600); font-size: 0.875rem; font-weight: 700;
  border-radius: 12px; transition: background-color var(--jh-t), color var(--jh-t);
}
.jh2-jl-empty__btn:hover { background: var(--jh-blue-600); color: var(--jh-white); }

@media (prefers-reduced-motion: reduce) {
  .jh2-jl-card, .jh2-jl-card__cta svg, .jh2-jl-submit, .jh2-jl-group > summary::after { transition: none; }
  .jh2-jl-card:hover, .jh2-jl-submit:hover { transform: none; }
  .jh2-jl-card:hover .jh2-jl-card__cta svg { transform: none; }
}