/* The global search (COMMAND-673, public/global-search): the box at the end of the top bar, its dropdown and the
   results page. Built without a design: the box, the dropdown and the results page carry the POC marker (poc-ui,
   app.css). Loaded by index.html after app.css, so it uses the app's colours (--surface, --line, --accent …).
   Narrower than 1100px (a phone, a tablet, a narrow window) the bar has no room: a magnifier button, and a tap opens the
   field over the whole bar. From 1100px the field is always there. */

.tabs-bar { position: relative; }

.gsearch { flex: none; display: flex; align-items: stretch; }
/* The magnifier: like the App Launcher's dots at the other end of the bar. */
.gsearch-toggle {
  flex: none; width: 44px; margin-right: calc(env(safe-area-inset-right) + 4px);
  border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
}
.gsearch-toggle svg { width: 22px; height: 22px; }
@media (hover: hover) { .gsearch-toggle:hover { color: var(--accent); } }
.gsearch-field { display: none; position: relative; align-items: center; }
.gsearch-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--muted); pointer-events: none; }
.gsearch-icon svg { width: 18px; height: 18px; }
.gsearch-input { width: 100%; min-height: 36px; padding-left: 34px; }
.gsearch-input::-webkit-search-cancel-button { cursor: pointer; }
.gsearch-close {
  flex: none; width: 40px; height: 40px; margin-left: 4px;
  border: 0; border-radius: 50%; background: none; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
}
.gsearch-close svg { width: 20px; height: 20px; }

/* The phone field: over the whole bar (the dots, the app and the tabs), the × at its end. */
.gsearch.phone-open { position: static; }
.gsearch.phone-open .gsearch-toggle { visibility: hidden; }
.gsearch.phone-open .gsearch-field {
  display: flex; position: absolute; z-index: 6; inset: 0;
  padding: 0 calc(env(safe-area-inset-right) + 8px) 0 calc(env(safe-area-inset-left) + 8px);
  background: var(--bg);
}
.gsearch.phone-open .gsearch-icon { left: calc(env(safe-area-inset-left) + 18px); }
.gsearch.phone-open .gsearch-input { flex: 1 1 auto; min-width: 0; min-height: 40px; font-size: 1rem; }

/* The dropdown under the field: as wide as the screen allows on a phone, a steady width on a wide screen. */
.gsearch .gsearch-menu {
  position: absolute; z-index: 15; top: calc(100% + 4px); left: 8px; right: 8px;
  max-height: min(70vh, 480px); overflow-y: auto; overscroll-behavior: contain;
  padding: 4px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text);
  box-shadow: 0 8px 28px rgb(0 0 0 / 18%);
}
.gsearch-list { list-style: none; margin: 0; padding: 0; }
.gsearch-link {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px;
  border-radius: 8px; color: var(--text); text-decoration: none;
}
.gsearch-option.active .gsearch-link { background: var(--surface-2); }
@media (hover: hover) { .gsearch-link:hover { background: var(--surface-2); } }
.gsearch-kind-icon { display: inline-flex; flex: none; color: var(--muted); }
.gsearch-kind-icon svg { width: 16px; height: 16px; }
.gsearch-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsearch-kind { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsearch-none { margin: 0; padding: 10px; }
.gsearch-all {
  display: flex; align-items: center; min-height: 40px; margin-top: 4px; padding: 4px 10px;
  border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--accent); font-weight: 600; text-decoration: none;
}
.gsearch-all.active { background: var(--surface-2); }
@media (hover: hover) { .gsearch-all:hover { background: var(--surface-2); } }

/* A wide screen: the field always there, at the end of the bar; no magnifier button and no ×. */
@media (min-width: 1100px) {
  .gsearch { align-items: center; padding: 0 calc(env(safe-area-inset-right) + var(--gutter)) 0 12px; }
  .gsearch-toggle, .gsearch-close { display: none; }
  .gsearch-field { display: flex; width: clamp(240px, 22vw, 380px); }
  .gsearch .gsearch-menu { left: auto; right: 0; width: max(100%, 420px); }
  /* The phone field left open while the window grew: the plain field again. */
  .gsearch.phone-open { position: relative; }
  .gsearch.phone-open .gsearch-field { position: relative; inset: auto; z-index: auto; padding: 0; background: none; }
  .gsearch.phone-open .gsearch-icon { left: 10px; }
  .gsearch.phone-open .gsearch-input { min-height: 36px; font-size: inherit; }
}