/* Hari Villa — v0.8.0 top bar: search field, results panel, profile menu.
 * Own file, linked from base.html. style.css stays untouched.
 * Tokens only: --navy --gold --paper --ink --muted --line.
 */

/* ---------- search field ----------
   Mobile-first: on a phone the field takes the full width of its own row
   under the heading, because a 200px search box next to an h1 is a box
   nobody types in. Desktop puts it inline. */
.hv-search-wrap {
  position: relative;
  flex: 1 1 100%;
  order: 3;               /* below the heading and tools on phone */
  margin-top: 0.6rem;
}

#hv-search {
  width: 100%;
  min-height: 44px;
  padding: 0 0.85rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  appearance: none;       /* kill Safari's rounded search pill */
}
#hv-search:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.22);
}
#hv-search::placeholder { color: var(--muted); }

/* ---------- results panel ---------- */
.hv-search-results {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(15, 36, 64, 0.16);
  padding: 0.3rem 0;
}
.hv-search-results[hidden] { display: none; }

.hv-search-results h4 {
  margin: 0;
  padding: 0.55rem 0.85rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.hv-search-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.88rem;
  border-left: 3px solid transparent;
}
.hv-search-item:hover,
.hv-search-item.is-cursor {
  background: #F4F7FB;
  border-left-color: var(--gold);
}
.hv-search-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hv-search-detail {
  flex: 0 0 auto;
  font-size: 0.76rem;
  color: var(--muted);
}
.hv-search-private { flex: 0 0 auto; color: var(--gold); }

.hv-search-empty {
  margin: 0;
  padding: 0.7rem 0.85rem;
  font-size: 0.84rem;
  color: var(--muted);
}

/* ---------- profile menu ---------- */
.hv-profile { position: relative; }

.hv-profile-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.4rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  font-size: 13px;
}
.hv-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  flex: 0 0 auto;
}
.hv-profile-name { white-space: nowrap; }

.hv-profile-menu {
  position: absolute;
  z-index: 60;
  right: 0;
  top: calc(100% + 6px);
  min-width: 13rem;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(15, 36, 64, 0.16);
  padding: 0.3rem 0;
}
.hv-profile-menu[hidden] { display: none; }

.hv-profile-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}
.hv-tier {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.hv-profile-menu a,
.hv-profile-menu button {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 0.85rem;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: none;
  line-height: 44px;
}
.hv-profile-menu a:hover,
.hv-profile-menu button:hover { background: #F4F7FB; color: var(--navy); }
.hv-profile-menu form { margin: 0; }

@media (min-width: 900px) {
  .hv-search-wrap {
    flex: 0 1 22rem;
    order: 0;
    margin-top: 0;
    margin-left: auto;
    margin-right: 1.2rem;
  }
  #hv-search { min-height: 32px; font-size: 13px; }
  .hv-profile-btn { min-height: 32px; }
  .hv-profile-menu a,
  .hv-profile-menu button { min-height: 34px; line-height: 34px; }
}