/* ==========================================================================
   widgets.css — search dialog, image zoom, code copy, heading anchors.
   Tokens only (see hao.css); works in light and dark.
   ========================================================================== */

/* ---------- Search dialog (command palette) ---------- */
html.hx-search-open { overflow: hidden; }
.hx-search {
  width: min(560px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px));
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius-lg);
  background: var(--hx-bg);
  color: var(--hx-fg);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.25), var(--hx-shadow);
  overflow: hidden;
}
.hx-search[open] { display: flex; animation: hx-pop 160ms var(--hx-ease) both; }
.hx-search::backdrop {
  background: color-mix(in srgb, var(--hx-bg) 40%, rgba(2, 8, 23, 0.45));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@keyframes hx-pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.hx-search-panel { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.hx-search-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; border-bottom: 1px solid var(--hx-border);
  color: var(--hx-fg-muted);
}
.hx-search-input {
  flex: 1; min-width: 0; height: 50px;
  border: 0; outline: 0; background: transparent;
  color: var(--hx-fg); font: 15px/1.4 var(--hx-font);
}
.hx-search-input::placeholder { color: var(--hx-fg-faint); }
.hx-search-input::-webkit-search-cancel-button { display: none; }
.hx-search-results {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none;
}
.hx-search-empty { padding: 28px 12px; color: var(--hx-fg-muted); font-size: 14px; text-align: center; }
.hx-search-item a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; border-radius: var(--hx-radius);
  color: inherit; text-decoration: none;
}
.hx-search-item.is-active a { background: var(--hx-bg-subtle); }
.hx-search-title { color: var(--hx-fg-strong); font-size: 14px; font-weight: 600; line-height: 1.45; }
.hx-search-snippet {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  color: var(--hx-fg-muted); font-size: 13px; line-height: 1.55;
}
.hx-search mark { background: transparent; color: var(--hx-highlight); font-weight: 600; }
.hx-search-footer {
  display: flex; gap: 16px; padding: 8px 14px;
  border-top: 1px solid var(--hx-border); background: var(--hx-bg-muted);
  color: var(--hx-fg-muted); font-size: 12px;
}
.hx-search-footer .hx-kbd { margin-right: 3px; }
@media (max-width: 600px) {
  .hx-search { margin-top: 12px; max-height: calc(100vh - 24px); }
  .hx-search-footer { display: none; }
}

/* ---------- Image zoom ---------- */
.hx-zoomable { cursor: zoom-in; }
.hx-zoom {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, var(--hx-bg) 92%, transparent);
  opacity: 0; cursor: zoom-out;
  transition: opacity 220ms var(--hx-ease);
}
.hx-zoom.is-open { opacity: 1; }
.hx-zoom-img {
  position: fixed; max-width: none; margin: 0;
  border-radius: var(--hx-radius);
  transform-origin: center center;
  transition: transform 220ms var(--hx-ease), box-shadow 220ms var(--hx-ease);
  will-change: transform;
}
.hx-zoom.is-open .hx-zoom-img { box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.3); }

/* ---------- Code copy ---------- */
.hx-code { position: relative; }
.hx-copy {
  position: absolute; top: 8px; right: 8px;
  height: 26px; padding: 0 9px;
  border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
  background: var(--hx-bg); color: var(--hx-fg-muted);
  font: 500 12px/1 var(--hx-font); cursor: pointer;
  opacity: 0; transition: opacity var(--hx-dur), color var(--hx-dur), border-color var(--hx-dur);
}
.hx-code:hover .hx-copy, .hx-copy:focus-visible { opacity: 1; }
.hx-copy:hover { color: var(--hx-fg); border-color: var(--hx-border-strong); }
.hx-copy.is-done { color: var(--hx-fg-strong); opacity: 1; }
@media (hover: none) { .hx-copy { opacity: 1; } }

/* ---------- Heading anchors ---------- */
.hx-prose h2[id], .hx-prose h3[id] { position: relative; }
.hx-anchor {
  margin-left: 8px; color: var(--hx-fg-faint);
  font-weight: 400; text-decoration: none;
  opacity: 0; transition: opacity var(--hx-dur), color var(--hx-dur);
}
.hx-prose h2:hover .hx-anchor, .hx-prose h3:hover .hx-anchor, .hx-anchor:focus-visible { opacity: 1; }
.hx-anchor:hover { color: var(--hx-fg); }