/* LIFE by Dr. Pat — site search.
   Self-contained: every rule is prefixed .lsx- or #lsx- so it cannot collide
   with the legacy stylesheet or the Astro homepage's own tokens. Colour values
   read the host page's variables where they exist and fall back to the brand
   palette otherwise, so the same file serves both designs. */

:root {
  --lsx-ruby: #e0115f;
  --lsx-sapphire: #0f52ba;
  --lsx-ink: #1a1a2e;
  --lsx-muted: #5b6275;
  --lsx-line: #e3e6f0;
  --lsx-radius: 14px;
}

/* ---------- the trigger, legacy nav (an <li> inside ul.nav__links) ---------- */
.nav__links > li.lsx-nav {
  display: flex;
  align-items: center;
}
.lsx-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 38px;
  padding: 0 12px;
  font: inherit;
  font-size: .9rem;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: 1px solid var(--lsx-line);
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.lsx-trigger:hover,
.lsx-trigger:focus-visible {
  background: rgba(15, 82, 186, .07);
  border-color: rgba(15, 82, 186, .38);
  color: var(--lsx-sapphire);
}
.lsx-trigger:focus-visible { outline: 2px solid var(--lsx-sapphire); outline-offset: 2px; }
.lsx-trigger svg { width: 17px; height: 17px; flex: none; }
.lsx-trigger .lsx-trigger__text { display: none; }

/* ---------- the trigger, header bar -----------------------------------------
   Once the menu collapses behind a burger, an item inside it would sit under
   every other link. The bar copy shows there instead; the menu copy shows on
   desktop. Exactly one of the two is ever visible.
   The two designs collapse at different widths: the legacy pages at 980px, the
   Astro homepage at 1024px, so each gets its own rule. */
.lsx-trigger--bar {
  display: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin-left: auto;
}
/* .nav__toggle carries margin-left:auto of its own; with two auto margins flex
   splits the free space between them and strands the burger mid-row. */
.nav .lsx-trigger--bar + .nav__toggle,
.nav .lsx-trigger--bar + .nav__burger { margin-left: 0; }

@media (max-width: 980px) {
  .nav__links > li.lsx-nav { display: none; }
  .lsx-trigger--bar:not(.lsx-trigger--bar-home) { display: inline-flex; }
}

@media (max-width: 1024px) {
  .nav__links .lsx-trigger--home { display: none; }
  .lsx-trigger--bar-home { display: inline-flex; }
}

/* ---------- the trigger, Astro homepage ---------- */
.nav__links .lsx-trigger--home {
  border-color: rgba(12, 59, 48, .16);
  color: var(--ink, #0b2a22);
}
.nav__links .lsx-trigger--home:hover,
.nav__links .lsx-trigger--home:focus-visible {
  background: rgba(var(--ruby-rgb, 224, 17, 95), .08);
  border-color: rgba(var(--ruby-rgb, 224, 17, 95), .35);
  color: var(--ruby, #e0115f);
}
.lsx-trigger--bar-home {
  border-color: rgba(12, 59, 48, .16);
  color: var(--ink, #0b2a22);
}

/* ---------- floating trigger (pages with no nav bar: 404, ICSI landings) ---------- */
.lsx-trigger--float {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(21, 22, 103, .12);
  box-shadow: 0 2px 6px rgba(21, 22, 103, .08), 0 6px 14px -4px rgba(21, 22, 103, .1);
  backdrop-filter: blur(8px);
}
.lsx-trigger--float .lsx-trigger__text { display: inline; }

/* ---------- overlay ---------- */
.lsx-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  padding: clamp(12px, 8vh, 96px) 16px 16px;
  background: rgba(11, 20, 40, .46);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lsx-overlay[data-open="true"] { display: block; }

.lsx-panel {
  width: min(680px, 100%);
  margin: 0 auto;
  background: #fff;
  color: var(--lsx-ink);
  border-radius: 18px;
  box-shadow: 0 12px 28px -8px rgba(21, 22, 103, .2), 0 28px 60px -14px rgba(21, 22, 103, .28);
  overflow: hidden;
  font-family: inherit;
  animation: lsx-rise .22s ease-out;
}
@keyframes lsx-rise { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lsx-panel { animation: none; } }

/* On the search page the same markup is rendered inline, not in the overlay. */
.lsx-inline .lsx-panel {
  box-shadow: 0 2px 6px rgba(21, 22, 103, .08), 0 6px 14px -4px rgba(21, 22, 103, .1);
  border: 1px solid var(--lsx-line);
  width: 100%;
  animation: none;
}
.lsx-inline .lsx-close { display: none; }
.lsx-inline .lsx-results { max-height: none; }

/* ---------- search field ---------- */
.lsx-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--lsx-line);
}
.lsx-field > svg { width: 20px; height: 20px; flex: none; color: var(--lsx-muted); }
.lsx-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 1.05rem;
  color: var(--lsx-ink);
  background: transparent;
  border: 0;
  padding: 6px 0;
  min-height: 32px;
}
.lsx-input:focus { outline: none; }
.lsx-input::placeholder { color: var(--lsx-muted); opacity: .85; }
.lsx-close {
  flex: none;
  min-width: 44px;
  min-height: 36px;
  padding: 0 12px;
  font: inherit;
  font-size: .82rem;
  color: var(--lsx-muted);
  background: #f3f6fa;
  border: 1px solid var(--lsx-line);
  border-radius: 9px;
  cursor: pointer;
}
.lsx-close:hover { color: var(--lsx-ink); border-color: #c9cfe0; }

/* ---------- results ---------- */
.lsx-results {
  max-height: min(60vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.lsx-status {
  padding: 22px 18px;
  font-size: .92rem;
  color: var(--lsx-muted);
  text-align: center;
}
.lsx-list { list-style: none; margin: 0; padding: 6px; }
.lsx-list li { margin: 0; }
.lsx-hit {
  display: block;
  padding: 11px 12px;
  border-radius: 11px;
  text-decoration: none;
  color: inherit;
}
.lsx-hit:hover,
.lsx-hit[data-active="true"] { background: #f3f6fa; }
.lsx-hit:focus-visible { outline: 2px solid var(--lsx-sapphire); outline-offset: -2px; }
.lsx-hit__top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: space-between;
}
.lsx-hit__title {
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.35;
  color: var(--lsx-sapphire);
}
.lsx-hit__tag {
  flex: none;
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lsx-muted);
  background: #f3f6fa;
  border: 1px solid var(--lsx-line);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.lsx-hit__snippet {
  margin: 4px 0 0;
  font-size: .87rem;
  line-height: 1.55;
  color: var(--lsx-muted);
}
.lsx-hit__snippet mark {
  background: rgba(224, 17, 95, .13);
  color: var(--lsx-ruby);
  font-weight: 700;
  padding: 0 1px;
  border-radius: 3px;
}

/* ---------- empty state: suggested queries ---------- */
.lsx-suggest { padding: 16px 18px 20px; }
.lsx-suggest__label {
  margin: 0 0 10px;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lsx-muted);
}
.lsx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lsx-chip {
  font: inherit;
  font-size: .85rem;
  color: var(--lsx-sapphire);
  background: #f3f6fa;
  border: 1px solid var(--lsx-line);
  border-radius: 999px;
  padding: 7px 14px;
  min-height: 34px;
  cursor: pointer;
}
.lsx-chip:hover { background: #e8eef8; border-color: #c9cfe0; }

/* ---------- footer hint ---------- */
.lsx-foot {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 9px 16px;
  border-top: 1px solid var(--lsx-line);
  background: #fbfcfe;
  font-size: .74rem;
  color: var(--lsx-muted);
}
.lsx-foot kbd {
  font: inherit;
  font-size: .72rem;
  background: #fff;
  border: 1px solid var(--lsx-line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  margin-right: 3px;
}
@media (max-width: 560px) { .lsx-foot { display: none; } }

body.lsx-locked { overflow: hidden; }