/* ============================================================
   Universal search — presentation. No dependencies.

   One field that reaches everything a reader can get to: sections, and the
   contents of those sections. It exists because a portal stops being
   scannable somewhere around the point where one screen holds four
   manufacturers, thirteen parts each, and a lead list — at which point
   "where was that objection answer" costs more than the answer is worth.

   Palette is bound by the host, like every component here (see
   components/README.md). Defaults suit a light ground.
   ============================================================ */

.us {
  --us-bg:        #ffffff;
  --us-line:      #dfe8f1;
  --us-ink:       #13273c;
  --us-ink-soft:  #6b7a8c;
  --us-accent:    #1f72bd;
  --us-hit:       #eaf3fb;
  --us-scrim:     rgba(13, 44, 73, .38);
  --us-radius:    14px;
}

/* ---------- The overlay ---------- */
.us {
  position: fixed; inset: 0; z-index: 90;
  display: flex; justify-content: center;
  padding: 10vh 16px 16px;
  background: var(--us-scrim);
  opacity: 0; pointer-events: none;
  transition: opacity 160ms linear;
}
.us.on { opacity: 1; pointer-events: auto; }
@supports (backdrop-filter: blur(2px)) {
  .us.on { backdrop-filter: blur(3px); }
}

.us-card {
  width: 100%; max-width: 620px; align-self: flex-start;
  max-height: min(70vh, 640px);
  display: flex; flex-direction: column;
  background: var(--us-bg);
  border: 1px solid var(--us-line);
  border-radius: var(--us-radius);
  box-shadow: 0 40px 80px -30px rgba(13, 44, 73, .55);
  overflow: hidden;
  transform: translateY(-8px) scale(.98);
  transition: transform 160ms cubic-bezier(.4, 0, .2, 1);
}
.us.on .us-card { transform: none; }

/* ---------- The field ---------- */
.us-field {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 0 16px; border-bottom: 1px solid var(--us-line);
}
.us-field svg {
  flex: 0 0 19px; width: 19px; height: 19px;
  fill: none; stroke: var(--us-ink-soft); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.us-input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: none;
  font: inherit; font-size: 16px;      /* 16px or iOS zooms the page on focus */
  color: var(--us-ink); padding: 17px 0;
}
.us-input::placeholder { color: var(--us-ink-soft); }
.us-esc {
  flex: 0 0 auto; border: 1px solid var(--us-line); border-radius: 5px;
  background: none; color: var(--us-ink-soft); cursor: pointer;
  font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  padding: 3px 7px;
}
.us-esc:hover { color: var(--us-ink); }

/* ---------- Results ---------- */
.us-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 6px 0 8px;
  overscroll-behavior: contain;        /* don't scroll the page behind it */
}
.us-group {
  margin: 0; padding: 12px 18px 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--us-ink-soft); opacity: .8;
}
.us-hit {
  display: block; width: calc(100% - 16px); margin: 1px 8px; padding: 9px 12px;
  border: 0; border-radius: 9px; background: none;
  font: inherit; text-align: left; color: var(--us-ink); cursor: pointer;
}
.us-hit:hover { background: var(--us-hit); }
/* Selection is a CLASS, not :focus. The input must keep focus the whole time
   — moving focus to the row would empty the field of its caret and break
   type-then-arrow, which is the only interaction that matters here. */
.us-hit.on { background: var(--us-hit); box-shadow: inset 2px 0 0 var(--us-accent); }
.us-hit-t {
  display: block; font-size: 14px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.us-hit.on .us-hit-t { color: var(--us-accent); font-weight: 600; }
.us-hit-s {
  display: block; margin-top: 2px; font-size: 12px; color: var(--us-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.us-hit mark { background: transparent; color: inherit; font-weight: 700; }

.us-empty { padding: 30px 18px; text-align: center; color: var(--us-ink-soft); font-size: 13.5px; }
.us-foot {
  flex: 0 0 auto; display: flex; gap: 16px; align-items: center;
  padding: 9px 16px; border-top: 1px solid var(--us-line);
  font-size: 11.5px; color: var(--us-ink-soft);
}
.us-foot b { font-weight: 700; color: var(--us-ink); }
@media (max-width: 560px) { .us-foot { display: none; } .us { padding-top: 6vh; } }

/* ---------- The trigger in the rail ---------- */
.us-kbd {
  margin-left: auto; flex: 0 0 auto;
  border: 1px solid var(--us-line); border-radius: 5px;
  padding: 2px 6px; font-size: 10.5px; font-weight: 600;
  color: var(--us-ink-soft); font-family: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .us, .us-card { transition: none; }
}