@layer canopy-page {
/* Search UI — pairs with assets/search.js and the `.canopy-search` form
   canopy's shell emits. Loaded only when a build carries both, so a site
   with no search never pays for this either. Reuses canopy's own tokens
   (--sp-*, --border, --radius-m, --bg-primary, --text-*) rather than
   introducing new ones. */

.canopy-search {
  position: relative;
}

/* Reserve room so the shortcut badge below doesn't sit on top of typed
   text — canopy's own input padding only accounts for its search icon on
   the left. Only where the badge shows: on narrow viewports canopy
   collapses the input to an icon-sized box (see the badge's own media
   query below), and a right padding there would widen it. */
@media not all and (max-width: 40rem) {
  .canopy-search input[type="search"] {
    padding-right: 3rem;
  }
}

/* Advertises Ctrl+K/Cmd+K (search.js). An inert glyph, not a button — same
   masked-icon-adjacent technique canopy's own shell uses for its search and
   theme-toggle icons: pointer-events: none lets a click straight through to
   the input underneath it. Hidden once the input has focus, so it doesn't
   crowd a query being typed, and on narrow viewports, where canopy's own
   shell (styles.ts, the `max-width: 40rem` breakpoint) collapses the input
   to an icon-sized 2.25rem with no room for a badge — and where a physical
   keyboard, the whole reason the shortcut exists, is unlikely anyway. */
.canopy-search-shortcut {
  position: absolute;
  top: 50%;
  right: var(--sp-2);
  transform: translateY(-50%);
  padding: 0.05em 0.4em;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  font-size: 0.75em;
  line-height: 1.4;
  color: var(--text-muted);
  background: var(--bg-secondary);
  pointer-events: none;
}
.canopy-search input[type="search"]:focus ~ .canopy-search-shortcut {
  display: none;
}
@media (max-width: 40rem) {
  .canopy-search-shortcut {
    display: none;
  }
}

.canopy-search-results {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) 0;
  width: min(24rem, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  list-style: none;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.canopy-search-results li {
  padding: var(--sp-2) var(--sp-3);
}

.canopy-search-results li.is-active,
.canopy-search-results li:hover {
  background: var(--bg-secondary);
}

.canopy-search-results a {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--text-normal);
  text-decoration: none;
}

.canopy-search-snippet {
  margin: var(--sp-1, 4px) 0 0;
  font-size: 0.85em;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Scrollspy — pairs with assets/scrollspy.js. Styles the `.canopy-outline`
   link whose section is currently in view. Reuses canopy's own tokens
   (--accent, --font-weight-semibold) rather than introducing new ones, and
   targets the standard `aria-current` attribute rather than a new class so
   the same rule serves any script that sets it, not just this one. */

.canopy-outline a[aria-current="location"] {
  color: var(--accent);
  font-weight: var(--font-weight-semibold);
}

/* Image lightbox — pairs with assets/image-lightbox.js. Reuses canopy's own
   tokens (--bg-primary, --text-normal, --radius-m, --sp-*) rather than
   introducing new ones. z-index 30 sits above search's 10 and the mobile
   nav overlay's 20, since the lightbox can open while either is present. */

.canopy-content img {
  cursor: zoom-in;
}

body.canopy-lightbox-open {
  overflow: hidden;
}

.canopy-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  background: rgba(0, 0, 0, 0.85);
}

.canopy-lightbox-overlay[hidden] {
  display: none;
}

.canopy-lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: default;
  border-radius: var(--radius-m);
}

.canopy-lightbox-close {
  position: fixed;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-primary);
  color: var(--text-normal);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.canopy-lightbox-close::before {
  content: "\00d7";
}

.canopy-lightbox-close:hover {
  background: var(--bg-secondary);
}

}