/* ── UNIVERSAL SEARCH ─────────────────────────────────────────
   Kate, 29 Sep 2026: one search bar for the whole dashboard, with suggestions
   popping up as you type. Pages, team, branches and periods. search.js builds it.

   Desktop: a search-bar-shaped button in the masthead. Pressing it (or / or
   Ctrl+K from anywhere) opens the panel right on top of it, so the bar looks like
   it came alive, with the suggestions dropping below.
   Phone (under 760px): since 6 Oct 2026 the same bar on its own row (below). */

.gs-trig{display:inline-flex;align-items:center;gap:9px;min-height:44px;width:230px;padding:0 14px;
  border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:22px;
  font:inherit;font-size:13.5px;letter-spacing:.02em;cursor:pointer;text-align:left}
.gs-trig svg{flex-shrink:0}
.gs-trig .gs-trig-t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-trig kbd{font:inherit;font-size:11px;border:1px solid var(--border);border-radius:5px;padding:0 6px;
  color:var(--muted2);line-height:18px}
@media(hover:hover){.gs-trig:hover{color:var(--text);border-color:var(--text)}}
.topbar.stuck .gs-trig{min-height:34px}
@media(max-width:1100px){.gs-trig{width:180px}}

.gs-scrim{position:fixed;inset:0;z-index:300;background:transparent}
.gs-scrim[hidden],.gs-panel[hidden]{display:none}

/* Kate, 6 Oct 2026: "as intuitive as the hub", on every screen. Team Home's look:
   the bar is a 44px pill, results drop below in one list, each row a small label
   (where it lives), the name in bold with the typed letters marked, one line more.
   No group headings, icons or key hints; the page behind is not dimmed. */
.gs-panel{position:fixed;z-index:301;width:480px;max-width:calc(100vw - 32px);
  display:flex;flex-direction:column;gap:8px;background:none;border:0}
.gs-head{display:flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 16px;
  background:var(--surface);border:1px solid var(--text);border-radius:999px;
  box-shadow:0 0 0 3px rgba(153,246,228,.45)}
.gs-head svg{flex-shrink:0;color:var(--muted)}
.gs-in{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);
  font:inherit;font-size:15px;padding:0}
.gs-in::placeholder{color:var(--muted2)}
.gs-in::-webkit-search-cancel-button{display:none}
.gs-x{border:0;background:transparent;color:var(--muted);font:inherit;cursor:pointer;
  font-size:18px;padding:0 8px;min-width:36px;min-height:36px}

.gs-list{overflow-y:auto;padding:6px;overscroll-behavior:contain;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.06)}
.gs-grp{padding:8px 12px 4px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.gs-row{display:block;padding:10px 12px;border-radius:8px;cursor:pointer}
.gs-row.on{background:var(--surface2)}
.gs-g,.gs-t,.gs-s{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-g{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.gs-t{font-weight:600;font-size:15px;color:var(--text);line-height:1.35}
.gs-t mark{background:#FDE9A8;color:inherit;border-radius:3px;padding:0 1px}
[data-theme="dark"] .gs-t mark{background:rgba(238,243,199,.28)}
.gs-s{font-size:13.5px;color:var(--muted);line-height:1.45;margin-top:1px}
.gs-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.gs-act{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:14px;
  font:inherit;font-size:12px;padding:0 12px;min-height:30px;cursor:pointer;white-space:nowrap}
@media(hover:hover){.gs-act:hover{color:var(--text);border-color:var(--text)}}
.gs-empty{padding:14px 12px;font-size:14px;color:var(--muted)}

body.gs-open{overflow:hidden}

/* ── PHONE ── the bar gets its own full-width row under the logo (search.js moves
   it there), like Team Home's; the panel opens on top of it, not as a sheet. */
@media(max-width:760px){
  .gs-trig{order:9;display:flex;width:100%;margin:8px 0 2px;color:var(--muted)}
  .gs-trig kbd{display:none}
  /* 16px or iOS zooms the page on focus. */
  .gs-in{font-size:16px}
  .gs-row{padding:11px 12px}
  .gs-row.on{background:transparent}
  .gs-row:active{background:var(--surface2)}
  .gs-act{min-height:36px;font-size:12.5px;padding:0 14px;border-radius:18px}
}