/* ---------------------------------------------------------------------------
   Quercia viva — the global search.

   The panel only. It is centred and knows nothing about where it was opened
   from — which is what lets ⌘K work with no field on screen at all, and what
   let the trigger move out of the rail and into the middle of the topbar
   without a line of this file following it. The trigger's own rules are in
   public/css/quercia/topbar.css, beside the bar it stands in.

   Loaded globally from minimal.html.twig: unlike home.css this is chrome, and
   it is on every page.
   --------------------------------------------------------------------------- */

/* --- the panel ------------------------------------------------------------ */

.qc-search {
  position: fixed;
  inset: 0;
  z-index: 1055;             /* over the sidebar, under Bootstrap's modals */
}
.qc-search[hidden] { display: none; }

.qc-search__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--qc-text-primary) 38%, transparent);
  /* One of the few real blurs the brand allows per view, and this is a view
     with nothing else claiming one. */
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--qc-dur-standard) var(--qc-ease-standard);
}
.qc-search.is-open .qc-search__scrim { opacity: 1; }

.qc-search__panel {
  position: absolute;
  top: 12vh;
  left: 50%;
  width: min(40rem, calc(100vw - 2rem));
  max-height: min(32rem, 74vh);
  display: flex;
  flex-direction: column;
  background: var(--qc-card-bg);
  border: 1px solid var(--qc-border);
  border-radius: 18px;
  box-shadow: var(--qc-shadow-lg);
  overflow: hidden;
  transform: translate(-50%, -8px);
  opacity: 0;
  transition: transform var(--qc-dur-standard) var(--qc-ease-standard),
              opacity var(--qc-dur-standard) var(--qc-ease-standard);
}
.qc-search.is-open .qc-search__panel {
  transform: translate(-50%, 0);
  opacity: 1;
}

.qc-search__field {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--qc-divider);
}
.qc-search__icon {
  flex: none;
  font-size: 1.125rem;
  color: var(--qc-text-tertiary);
}
.qc-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--qc-text-primary);
  font-size: 1rem;
  padding: 0;
}
.qc-search__input:focus { outline: none; }
.qc-search__input::placeholder { color: var(--qc-text-tertiary); }
/* The browser's own clear button, which lands on top of ours. */
.qc-search__input::-webkit-search-cancel-button { display: none; }
.qc-search__close { flex: none; }

.qc-search__results {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .5rem;
}

/* --- a group and its rows ------------------------------------------------- */

.qc-search__group + .qc-search__group { margin-top: .375rem; }

.qc-search__grouphead {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin: 0;
  padding: .5rem .625rem .375rem;
  font-family: var(--qc-font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--qc-text-tertiary);
}
.qc-search__grouphead .ti { font-size: .9375rem; }
.qc-search__groupname { flex: 1 1 auto; }
.qc-search__seeall {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--qc-primary);
  text-decoration: none;
}
.qc-search__seeall:hover { text-decoration: underline; }

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

.qc-search__row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .625rem;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.qc-search__row:hover,
.qc-search__row.is-active {
  background: color-mix(in srgb, var(--qc-primary) 10%, transparent);
  color: inherit;
}
.qc-search__row:focus-visible {
  outline: 2px solid var(--qc-primary);
  outline-offset: -2px;
}

.qc-search__rowbody {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.qc-search__rowtitle {
  font-size: .875rem;
  font-weight: 600;
  color: var(--qc-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qc-search__rowsub {
  font-size: .75rem;
  color: var(--qc-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qc-search__rowsub:empty { display: none; }

.qc-search__rowmeta {
  flex: none;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: var(--qc-text-secondary);
}
.qc-search__rowmeta:empty { display: none; }

.qc-search__rowbadge {
  flex: none;
  font-size: .75rem;
}
/* No colour of its own. The badge wears `badge bg-{name}`, the house recipe,
   which is the only one that picks the ink by the ground's luminance (brand
   §2.3): a hand-rolled `color: var(--qc-text-primary)` puts near-white on a
   lime status in the dark theme, and it is exactly as unreadable as it sounds.
   A row with no colour gets the quiet neutral rather than nothing, because a
   word with no ground behind it reads as part of the subtitle. */
.qc-search__rowbadge:not([class*='bg-']) {
  padding: .125rem .5rem;
  border-radius: 999px;
  font-weight: 600;
  background: var(--qc-field-bg);
  color: var(--qc-text-secondary);
}

/* --- the three states that are not a list -------------------------------- */

.qc-search__empty,
.qc-search__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: 2rem 1.5rem 2.25rem;
  text-align: center;
}
.qc-search__empty-title {
  margin: 0;
  font-family: var(--qc-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--qc-text-primary);
}
.qc-search__empty-lede {
  margin: 0;
  font-size: .8125rem;
  color: var(--qc-text-secondary);
}
.qc-search__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .375rem;
  margin: .5rem 0 0;
  padding: 0;
}
.qc-search__chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1875rem .5rem;
  border: 1px solid var(--qc-border);
  border-radius: 999px;
  font-size: .75rem;
  color: var(--qc-text-secondary);
}
.qc-search__chip .ti { font-size: .875rem; }

/* --- the footer ----------------------------------------------------------- */

.qc-search__foot {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem .875rem;
  border-top: 1px solid var(--qc-divider);
  font-size: .75rem;
  color: var(--qc-text-tertiary);
}
.qc-search__hint { flex: 1 1 auto; }
.qc-search__kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem;
  line-height: 1;
  padding: .1875rem .3125rem;
  border: 1px solid var(--qc-border);
  border-radius: 5px;
  color: var(--qc-text-tertiary);
  background: transparent;
}

/* The page behind the panel does not scroll under it. */
body.qc-search-open { overflow: hidden; }

/* --- the results page ----------------------------------------------------- */

.qc-searchpage { max-width: 60rem; }
.qc-searchpage .qc-search__group + .qc-search__group { margin-top: 1.5rem; }
.qc-searchpage .qc-search__grouphead { font-size: .75rem; }
.qc-searchpage .qc-search__row {
  border: 1px solid transparent;
}
.qc-searchpage .qc-search__row:hover {
  border-color: color-mix(in srgb, var(--qc-primary) 28%, transparent);
}

@media (max-width: 575.98px) {
  .qc-search__panel {
    top: 0;
    left: 0;
    width: 100vw;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
    border: none;
    transform: translate(0, 0);
  }
  .qc-search.is-open .qc-search__panel { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .qc-search__scrim,
  .qc-search__panel {
    transition: none;
  }
}