/* hub-search.v2.css — Classroom Hub cross-hub search.
 * Consumes the same --hub-* contract as hub.v2.css. Owns no palette.
 * All selectors are .xhub- prefixed so they cannot collide with the root hub's CSS.
 */

.xhub {
  max-width: 44rem;
  margin: 0 auto 2rem;
}

.xhub-search {
  width: 100%;
  padding: .95rem 1.1rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--hub-rule);
  border-radius: 0;
  color: var(--hub-ink);
  font-family: var(--hub-font-ui);
  font-size: 1.05rem;
  transition: border-color .2s;
}
.xhub-search::placeholder { color: var(--hub-ink-soft); }
.xhub-search:focus { outline: none; border-bottom-color: var(--hub-accent); }

.xhub-results { margin-top: 1.4rem; }
.xhub-results[hidden] { display: none; }

.xhub-total {
  margin: 0 0 1rem;
  font-family: var(--hub-font-ui);
  font-size: .78rem;
  color: var(--hub-ink-soft);
}

.xhub-group { margin: 0 0 1.5rem; }
.xhub-group__name {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--hub-rule);
  font-family: var(--hub-font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--hub-ink);
}
.xhub-group__count { font-family: var(--hub-font-ui); font-size: .74rem; color: var(--hub-ink-soft); }

.xhub-list { list-style: none; margin: 0; padding: 0; }

.xhub-hit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .6rem;
  border-radius: var(--hub-radius);
  color: inherit;
  text-decoration: none;
}
.xhub-hit:hover,
.xhub-hit.is-active { background: var(--hub-surface); }
.xhub-hit.is-active { outline: 2px solid var(--hub-accent); outline-offset: -2px; }
.xhub-hit__title {
  font-family: var(--hub-font-ui);
  font-size: .92rem;
  color: var(--hub-ink);
}
.xhub-hit__meta { display: flex; gap: .25rem; flex-shrink: 0; }

.xhub-more {
  padding: .4rem .6rem;
  font-family: var(--hub-font-ui);
  font-size: .78rem;
  color: var(--hub-ink-soft);
}
.xhub-none {
  padding: 1.6rem .6rem;
  font-family: var(--hub-font-ui);
  font-size: .9rem;
  color: var(--hub-ink-soft);
}

.xhub-hint {
  margin: .5rem 0 0;
  font-family: var(--hub-font-ui);
  font-size: .74rem;
  color: var(--hub-ink-soft);
}

.xhub-search:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .xhub-search { transition: none; }
}

@media (max-width: 520px) {
  .xhub-hit { flex-direction: column; align-items: flex-start; gap: .3rem; }
}