/* ==========================================================================
   Pass finder — the one html widget on /passes-new/ (CLAUDE.md §18-0.2)
   --------------------------------------------------------------------------
   Source file: unscoped and readable. build_passes.py prefixes every selector
   with #lpen-finder at deploy time (§18b.3) — the Elementor kit emits
   `.elementor-kit-8 h3 {...}` at specificity (0,1,1) and would otherwise
   outbid every bare class here.

   NOTE the scoper in this builder keeps `.lpen-ps` intact rather than
   collapsing it into the scope id: #lpen-finder sits on the SECTION container,
   .lpen-ps is the root div inside the html widget, and the script adds
   `is-ready` to that div. Collapsing them would leave the no-JS state
   permanently applied. Same trap as cpd-deadline — do not "harmonise" it with
   build_immigration_hub.py.
   ========================================================================== */

#lpen-finder .lpen-ps {
  --navy-900: #012032;
  --navy-800: #022e48;
  --navy-700: #0b4465;
  --navy-100: #c9dde8;
  --navy-50: #e5eef3;
  --action: #0f5c96;
  --border: #cfd6dd;
  --surface: #f6f8fa;
  --text: #111820;
  --secondary: #4a5666;
  --subtle: #6b7684;
  --good-bg: #eaf5ee;
  --good-bd: #b5d8c1;
  --good-tx: #1c5c34;
  --live-bg: #fff1f1;
  --live-bd: #e9bcbc;
  --live-tx: #8b2b2b;
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
}

/* --------------------------------------------------------------- icons
   Tabler as CSS mask data URIs. The html-widget sanitiser strips <svg>
   (§18b.1), and `background-color: currentColor` keeps §18a's colour
   inheritance without loading an icon font. */
#lpen-finder .lpen-i {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  vertical-align: -4px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
#lpen-finder .lpen-i--16 { width: 16px; height: 16px; vertical-align: -3px; }
#lpen-finder .lpen-i--18 { width: 18px; height: 18px; vertical-align: -3px; }

/* --------------------------------------------------------------- toolbar
   Hidden until the script adds .is-ready. With JS off the visitor gets the
   twelve cards and no dead chrome — the header's progressive-enhancement
   pattern (§18d). */
#lpen-finder .lpen-ps__tools { display: none; }
#lpen-finder .lpen-ps.is-ready .lpen-ps__tools { display: block; }

#lpen-finder .lpen-ps__tools {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px 14px;
  margin: 0 0 22px;
}

#lpen-finder .lpen-ps__grp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 12px; }
#lpen-finder .lpen-ps__grp:last-of-type { margin-bottom: 4px; }

#lpen-finder .lpen-ps__lbl {
  flex: 0 0 128px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
  padding-top: 6px;
}

#lpen-finder .lpen-ps__chip {
  appearance: none;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--navy-800);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
#lpen-finder .lpen-ps__chip:hover { border-color: var(--action); color: var(--action); }
#lpen-finder .lpen-ps__chip[aria-pressed="true"] {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
}
#lpen-finder .lpen-ps__chip:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

#lpen-finder .lpen-ps__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 12px;
}
#lpen-finder .lpen-ps__count { font-size: 14px; color: var(--secondary); margin: 0; }
#lpen-finder .lpen-ps__count b { color: var(--navy-800); }

#lpen-finder .lpen-ps__reset {
  appearance: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--action);
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
}
#lpen-finder .lpen-ps__reset[hidden] { display: none; }
#lpen-finder .lpen-ps__reset:hover { text-decoration: underline; }

/* --------------------------------------------------------------- grid */
#lpen-finder .lpen-ps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 1024px) { #lpen-finder .lpen-ps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #lpen-finder .lpen-ps__grid { grid-template-columns: 1fr; gap: 14px; } }

#lpen-finder .lpen-ps__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 20px 18px;
}
#lpen-finder .lpen-ps__card[hidden] { display: none; }
#lpen-finder .lpen-ps__card--star { border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }

#lpen-finder .lpen-ps__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  margin: 0;
}
#lpen-finder .lpen-ps__card--star .lpen-ps__eyebrow { color: var(--action); }

#lpen-finder .lpen-ps__name { font-size: 19px; line-height: 26px; font-weight: 600; color: var(--navy-800); margin: 0; }
/* Stretched link — `tabindex` is stripped by the sanitiser (§18b.1), so a
   thumbnail-wrapper anchor is not an option. One link, one tab stop. */
#lpen-finder .lpen-ps__name a { color: inherit; text-decoration: none; }
#lpen-finder .lpen-ps__name a::after { content: ""; position: absolute; inset: 0; }
#lpen-finder .lpen-ps__name a:hover { color: var(--action); }

#lpen-finder .lpen-ps__price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
#lpen-finder .lpen-ps__amt { font-size: 26px; line-height: 32px; font-weight: 700; color: var(--navy-900); }
#lpen-finder .lpen-ps__unit { font-size: 13px; color: var(--subtle); }

#lpen-finder .lpen-ps__meta { font-size: 14px; line-height: 22px; color: var(--secondary); margin: 0; }

#lpen-finder .lpen-ps__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
#lpen-finder .lpen-ps__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  border-radius: 4px;
  padding: 3px 8px;
  border: 1px solid;
}
#lpen-finder .lpen-ps__tag--save { background: var(--good-bg); border-color: var(--good-bd); color: var(--good-tx); }
#lpen-finder .lpen-ps__tag--live { background: var(--live-bg); border-color: var(--live-bd); color: var(--live-tx); }
#lpen-finder .lpen-ps__tag--rec { background: var(--navy-50); border-color: var(--navy-100); color: var(--navy-700); }

#lpen-finder .lpen-ps__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
#lpen-finder .lpen-ps__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  border-radius: 4px;
  padding: 9px 14px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .12s, color .12s, border-color .12s;
}
#lpen-finder .lpen-ps__btn--buy { background: var(--action); color: #fff; }
#lpen-finder .lpen-ps__btn--buy:hover { background: var(--navy-700); color: #fff; }
#lpen-finder .lpen-ps__btn--see { background: #fff; color: var(--action); border-color: var(--border); }
#lpen-finder .lpen-ps__btn--see:hover { border-color: var(--action); color: var(--action); }

/* --------------------------------------------------------------- empty */
#lpen-finder .lpen-ps__none {
  display: none;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 28px 22px;
  text-align: center;
  color: var(--secondary);
  font-size: 15px;
}
#lpen-finder .lpen-ps.is-empty .lpen-ps__none { display: block; }
#lpen-finder .lpen-ps.is-empty .lpen-ps__grid { display: none; }

/* --------------------------------------------------------------- footnote */
#lpen-finder .lpen-ps__foot {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 21px;
  color: var(--subtle);
}
#lpen-finder .lpen-ps__foot a { color: var(--action); }

@media (max-width: 640px) {
  #lpen-finder .lpen-ps__lbl { flex-basis: 100%; padding-top: 0; }
  #lpen-finder .lpen-ps__tools { padding: 16px 14px 12px; }
}

/* ============ GENERATED ICONS — DO NOT EDIT ============ */
/* Tabler 3.46.0 — 5 glyphs, generated by build_passes.py */
.lpen-i--calendar-event{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m7.7 2-.6.5v.8L7 4h-.8l-1 .1a3 3 0 0 0-2 2l-.2.4v13l.1.3a3 3 0 0 0 2 2l.4.2h13l.3-.1a3 3 0 0 0 2-2l.2-.4v-13l-.1-.3a3 3 0 0 0-2-2q-.3-.2-1.1-.2H17v-.7l-.1-.8a1 1 0 0 0-1.8 0v.9L15 4H9v-.6l-.1-.9a1 1 0 0 0-1.2-.4M7 6.7l.1.8a1 1 0 0 0 1.8 0v-.8L9 6h6v.7l.1.8a1 1 0 0 0 1.8 0v-.8L17 6h.6q.8 0 1.1.3c.3.3.3.4.3 2.1V10H5V8.4c0-1.8 0-1.8.3-2.1Q5.6 6 6.4 6H7zm12 8.9c0 3.8 0 3.7-.2 4l-.3.3h-13l-.3-.3c-.2-.3-.2-.1-.2-4V12h14zM7.7 14l-.6.4v3q.2.4.6.4h2.6q.4 0 .6-.4v-3l-.6-.4z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m7.7 2-.6.5v.8L7 4h-.8l-1 .1a3 3 0 0 0-2 2l-.2.4v13l.1.3a3 3 0 0 0 2 2l.4.2h13l.3-.1a3 3 0 0 0 2-2l.2-.4v-13l-.1-.3a3 3 0 0 0-2-2q-.3-.2-1.1-.2H17v-.7l-.1-.8a1 1 0 0 0-1.8 0v.9L15 4H9v-.6l-.1-.9a1 1 0 0 0-1.2-.4M7 6.7l.1.8a1 1 0 0 0 1.8 0v-.8L9 6h6v.7l.1.8a1 1 0 0 0 1.8 0v-.8L17 6h.6q.8 0 1.1.3c.3.3.3.4.3 2.1V10H5V8.4c0-1.8 0-1.8.3-2.1Q5.6 6 6.4 6H7zm12 8.9c0 3.8 0 3.7-.2 4l-.3.3h-13l-.3-.3c-.2-.3-.2-.1-.2-4V12h14zM7.7 14l-.6.4v3q.2.4.6.4h2.6q.4 0 .6-.4v-3l-.6-.4z'/></svg>")}
.lpen-i--chevron-right{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m8.7 5-.6.5v.9l2.8 2.9 2.7 2.7-2.7 2.7L8 18l.1.5.6.5.7-.1c.2 0 6.3-6.2 6.5-6.4v-1a105 105 0 0 0-6.6-6.4z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m8.7 5-.6.5v.9l2.8 2.9 2.7 2.7-2.7 2.7L8 18l.1.5.6.5.7-.1c.2 0 6.3-6.2 6.5-6.4v-1a105 105 0 0 0-6.6-6.4z'/></svg>")}
.lpen-i--coin{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M11 2a10 10 0 0 0-6 3q-3 3-3 7.3a10 10 0 0 0 3.8 7.5 10 10 0 0 0 7.6 2.1 10 10 0 0 0 5.7-2.8 10 10 0 0 0-.9-15 10 10 0 0 0-7.1-2m1.6 2a8 8 0 1 1-1.4 16 8 8 0 0 1 1.4-16m-1 2a1 1 0 0 0-.7.7V7h-.3a3 3 0 0 0-2.6 2.2c-.1.4-.1 1.2 0 1.6a3 3 0 0 0 2.6 2.2h.3v2h-.1q-.5 0-.8-.5-.5-.7-1.2-.4a1 1 0 0 0-.7 1q0 .4.6 1l.8.6q.5.3 1.1.3h.3v.2q.1.4.5.7h1l.5-.7V17h.3a3 3 0 0 0 2.6-2.2v-1.6a3 3 0 0 0-2.6-2.2H13V9h.2q.4 0 .8.6a1 1 0 0 0 1.7-.3q.2-.6-.4-1.3a3 3 0 0 0-2-1H13v-.2a1 1 0 0 0-.7-.7zm-.7 4v1l-.2-.1a1 1 0 0 1-.8-1q0-.7.7-1c.3 0 .3-.1.3 1m2.3 3q.7.3.7 1-.1.9-.8 1H13v-2z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M11 2a10 10 0 0 0-6 3q-3 3-3 7.3a10 10 0 0 0 3.8 7.5 10 10 0 0 0 7.6 2.1 10 10 0 0 0 5.7-2.8 10 10 0 0 0-.9-15 10 10 0 0 0-7.1-2m1.6 2a8 8 0 1 1-1.4 16 8 8 0 0 1 1.4-16m-1 2a1 1 0 0 0-.7.7V7h-.3a3 3 0 0 0-2.6 2.2c-.1.4-.1 1.2 0 1.6a3 3 0 0 0 2.6 2.2h.3v2h-.1q-.5 0-.8-.5-.5-.7-1.2-.4a1 1 0 0 0-.7 1q0 .4.6 1l.8.6q.5.3 1.1.3h.3v.2q.1.4.5.7h1l.5-.7V17h.3a3 3 0 0 0 2.6-2.2v-1.6a3 3 0 0 0-2.6-2.2H13V9h.2q.4 0 .8.6a1 1 0 0 0 1.7-.3q.2-.6-.4-1.3a3 3 0 0 0-2-1H13v-.2a1 1 0 0 0-.7-.7zm-.7 4v1l-.2-.1a1 1 0 0 1-.8-1q0-.7.7-1c.3 0 .3-.1.3 1m2.3 3q.7.3.7 1-.1.9-.8 1H13v-2z'/></svg>")}
.lpen-i--player-play{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m6.7 3-.6.5v16.8c0 .5.7.8 1.2.7l13.4-8.3a1 1 0 0 0 0-1.3L7.3 3zM13 8.9l5 3-10 6.2V5.9z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m6.7 3-.6.5v16.8c0 .5.7.8 1.2.7l13.4-8.3a1 1 0 0 0 0-1.3L7.3 3zM13 8.9l5 3-10 6.2V5.9z'/></svg>")}
.lpen-i--star{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M11.7 1c-.4.2-.4.2-2 3.4l-1.5 3-3.2.4-3.6.7A1 1 0 0 0 1 9.6l4.8 4.9L5 21q.1 1 1 1c.3 0 .2 0 3.4-1.7l2.7-1.4 2.9 1.5 3 1.6q.7 0 1-.4l.3-.6-1.1-6.5 2.1-2.1A16 16 0 0 0 23 9.7a1 1 0 0 0 0-.9l-.5-.5a54 54 0 0 0-6.6-1l-3.4-6.2zM13 6.5 14.3 9l.7.4 4.7.7-1.7 1.8c-2 2-2 1.9-2 2.3l.8 5-2.2-1.1-2.3-1.2h-.6L9.4 18l-2.2 1 .4-2.4c.4-2.6.4-2.8.3-3L4.3 10l2.4-.4c2.7-.4 2.8-.4 3-.7L12 4.3z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M11.7 1c-.4.2-.4.2-2 3.4l-1.5 3-3.2.4-3.6.7A1 1 0 0 0 1 9.6l4.8 4.9L5 21q.1 1 1 1c.3 0 .2 0 3.4-1.7l2.7-1.4 2.9 1.5 3 1.6q.7 0 1-.4l.3-.6-1.1-6.5 2.1-2.1A16 16 0 0 0 23 9.7a1 1 0 0 0 0-.9l-.5-.5a54 54 0 0 0-6.6-1l-3.4-6.2zM13 6.5 14.3 9l.7.4 4.7.7-1.7 1.8c-2 2-2 1.9-2 2.3l.8 5-2.2-1.1-2.3-1.2h-.6L9.4 18l-2.2 1 .4-2.4c.4-2.6.4-2.8.3-3L4.3 10l2.4-.4c2.7-.4 2.8-.4 3-.7L12 4.3z'/></svg>")}