/*
  estate-search.css

  Styles for the shared result item (.es-hit), the cmd+k overlay
  (.es-gs-*), and the nav trigger (.es-nav-search). Every colour reads
  the site's existing custom properties and carries the same hex
  fallbacks the shipped corpus widget uses, so this file drops onto any
  page without new tokens.
*/

/* ------------------------------------------------------------------ */
/* Full-size widget chassis                                            */
/* ------------------------------------------------------------------ */

.cs-w {
  --csw-bg: var(--bg-1, #111118);
  --csw-bg-2: var(--bg-2, #1a1a24);
  --csw-border: var(--border, rgba(255, 255, 255, 0.08));
  --csw-text: var(--text, #e8e8e0);
  --csw-dim: var(--text-dim, #aaa9a0);
  --csw-faint: var(--text-faint, #555560);
  --csw-accent: var(--accent, #f5a623);
  display: block;
  background: var(--csw-bg);
  border: 1px solid var(--csw-border);
  border-radius: 6px;
  padding: 20px;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 13px;
  line-height: 1.6;
  color: var(--csw-text);
}

.cs-w * { box-sizing: border-box; }
.cs-w-head { color: var(--csw-faint); margin-bottom: 12px; }
.cs-w-head strong { color: var(--csw-text); font-weight: 500; letter-spacing: 0.04em; }

.cs-w-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--csw-bg-2);
  border: 1px solid var(--csw-border);
  border-radius: 4px;
  padding: 0 0 0 10px;
}

.cs-w-form:focus-within { border-color: var(--csw-accent); }
.cs-w-prompt { color: var(--csw-accent); flex: none; font-weight: 500; }

.cs-w-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--csw-text);
  font: inherit;
  padding: 9px 2px;
  caret-color: var(--csw-accent);
}

.cs-w-input:focus { outline: none; }
.cs-w-input::placeholder { color: var(--csw-faint); }

.cs-w-btn {
  flex: none;
  background: transparent;
  border: 1px solid var(--csw-accent);
  border-radius: 3px;
  color: var(--csw-accent);
  font: inherit;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.cs-w-btn:hover { background: rgba(245, 166, 35, 0.12); }
.cs-w-btn:disabled { opacity: 0.5; cursor: wait; }
.cs-w-status { margin: 12px 0 0; color: var(--csw-faint); font-size: 12px; }
.cs-w-results { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }

/* ------------------------------------------------------------------ */
/* Shared result item, used by the widget and the overlay              */
/* ------------------------------------------------------------------ */

.es-results {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.es-hit {
  background: var(--bg-2, #1a1a24);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-left: 2px solid transparent;
  border-radius: 4px;
  padding: 10px 12px;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  transition: border-color 0.15s, background 0.15s;
}

.es-hit.is-active,
.es-hit:hover {
  border-left-color: var(--accent, #f5a623);
  background: rgba(245, 166, 35, 0.06);
}

.es-hit-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  text-decoration: none;
  color: inherit;
}

a.es-hit-main:hover .es-hit-label,
a.es-hit-main:focus-visible .es-hit-label {
  color: var(--accent, #f5a623);
}

a.es-hit-main:focus-visible {
  outline: 1px solid var(--accent, #f5a623);
  outline-offset: 2px;
}

.es-hit-label {
  color: var(--text, #e8e8e0);
  font-size: 12px;
  overflow-wrap: anywhere;
  transition: color 0.15s;
}

.es-hit-badge {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint, #555560);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 2px;
  padding: 1px 5px;
  white-space: nowrap;
}

.es-hit-badge-private {
  color: var(--accent, #f5a623);
  border-color: rgba(245, 166, 35, 0.35);
}

.es-hit-score {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-faint, #555560);
  font-variant-numeric: tabular-nums;
}

.es-hit-excerpt {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim, #aaa9a0);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.es-hit-actions {
  margin-top: 8px;
}

.es-hit-ask {
  background: transparent;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 3px;
  color: var(--accent, #f5a623);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.es-hit-ask:hover,
.es-hit-ask:focus-visible {
  background: rgba(245, 166, 35, 0.12);
  border-color: rgba(245, 166, 35, 0.4);
  outline: none;
}

.es-hit-ask:focus-visible {
  outline: 1px solid var(--accent, #f5a623);
  outline-offset: 2px;
}

.es-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ------------------------------------------------------------------ */
/* Global search overlay                                               */
/* ------------------------------------------------------------------ */

.es-gs-root {
  position: fixed;
  inset: 0;
  z-index: 300; /* above the mobile nav bar at 100 */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14vh 16px 16px;
}

.es-gs-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.86);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.es-gs-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-1, #111118);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  padding: 16px 18px 12px;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  color: var(--text, #e8e8e0);
  box-shadow:
    0 24px 60px -12px rgba(0, 0, 0, 0.7),
    0 0 60px -24px rgba(245, 166, 35, 0.35);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.es-gs-root[data-open] .es-gs-scrim { opacity: 1; }
.es-gs-root[data-open] .es-gs-panel { opacity: 1; transform: none; }

.es-gs-head {
  margin: 0 0 12px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint, #555560);
}

.es-gs-head strong {
  color: var(--text, #e8e8e0);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.es-gs-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-2, #1a1a24);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
  padding: 9px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.es-gs-input-row:focus-within {
  border-color: rgba(245, 166, 35, 0.55);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.08);
}

.es-gs-ps1 {
  color: var(--accent, #f5a623);
  user-select: none;
  animation: es-gs-blink 1.05s steps(2, start) infinite;
}

@keyframes es-gs-blink {
  50% { opacity: 0.25; }
}

.es-gs-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text, #e8e8e0);
  font-family: inherit;
  font-size: 14px;
  caret-color: var(--accent, #f5a623);
}

.es-gs-input::placeholder { color: var(--text-faint, #555560); }

.es-gs-status {
  margin: 10px 2px 0;
  font-size: 11px;
  color: var(--text-faint, #555560);
  min-height: 1.4em;
}

.es-gs-list {
  margin-top: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
}

.es-gs-foot {
  margin: 12px 2px 0;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  font-size: 10px;
  color: var(--text-faint, #555560);
  letter-spacing: 0.04em;
}

.es-gs-foot kbd {
  font-family: inherit;
  font-size: 9px;
  color: var(--text-dim, #aaa9a0);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 2px;
}

body.es-gs-lock { overflow: hidden; }

/* ------------------------------------------------------------------ */
/* Nav trigger                                                          */
/* ------------------------------------------------------------------ */

.es-nav-search {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.35rem 1rem;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #aaa9a0);
  transition: color 0.15s;
}

.es-nav-search:hover,
.es-nav-search:focus-visible {
  color: var(--text, #e8e8e0);
  outline: none;
}

.es-nav-search:focus-visible {
  outline: 1px solid var(--accent, #f5a623);
  outline-offset: 2px;
}

.es-nav-search svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.es-nav-search kbd {
  font-family: inherit;
  font-size: 9px;
  text-transform: none;
  color: var(--text-faint, #555560);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 3px;
  padding: 1px 5px;
}

@media (max-width: 680px) {
  /* the desktop nav links hide here; the bottom mobile-nav snippet and
     the "/" shortcut carry the trigger instead */
  .cs-w-form { flex-wrap: wrap; }
  .cs-w-btn { width: 100%; }
  .es-gs-root { padding-top: 9vh; }
  .es-gs-panel { max-height: 80vh; }
  .es-gs-foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .es-gs-scrim,
  .es-gs-panel,
  .es-hit,
  .es-hit-ask,
  .es-nav-search,
  .es-gs-input-row {
    transition: none;
  }
  .es-gs-ps1 { animation: none; }
}