/*
 * SST-001 · P1 — the grouped global search sheet.   (6 October 2026)
 *
 * ⚠ TOKENS ONLY, AND THAT IS ENFORCED. tools/palette-guard/check-palette.mjs
 * freezes each file's set of colour literals to the set it has today, and a
 * file with no entry in palette.ledger.json has a frozen set of ∅. This file is
 * new, so EVERY colour here must be a var(--v3-*) from web/css/lres-v3-tokens.css
 * — including shadows, which is why the drop shadow is tinted with
 * --v3-green-glass (an rgba token) rather than a neutral rgba() literal.
 *
 * The tokens reach this page because web/css/main.css @imports
 * lres-v3-tokens.css at its very top and index.html loads main.css. ⚠ Do not
 * reuse this stylesheet on client-quote.html or share.html — those pages do NOT
 * load the token sheet, and every var() here would silently resolve to nothing.
 */

/* The box in the topbar. Positioned by the inline style on #globalSearch in
   index.html, which this build leaves alone. */
#globalSearchResults.gs-sheet {
  position: absolute;
  top: calc(100% + var(--v3-gap-2));
  left: 0;
  right: 0;
  z-index: 1200;
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--v3-snow);
  border: 1px solid var(--v3-mist);
  border-radius: 10px;
  box-shadow: 0 12px 34px var(--v3-green-glass);
  font-family: var(--v3-t-body);
  padding: var(--v3-gap-2) 0;
}

/* S1 — "group headings as small caps labels". */
.gs-group-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v3-gap-2);
  padding: var(--v3-gap-2) var(--v3-gap-3) var(--v3-gap-1);
  font-size: var(--v3-s-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v3-steel);
}
.gs-group-hdr + .gs-hit { border-top: 1px solid var(--v3-mist); }
.gs-group-count { font-weight: 500; letter-spacing: 0; text-transform: none; }

/* S5 — 44px rows. min-height, not height: a two-line sublabel on a narrow
   phone must grow the row rather than clip it. */
.gs-hit {
  display: flex;
  align-items: center;
  gap: var(--v3-gap-3);
  min-height: 44px;
  padding: var(--v3-gap-2) var(--v3-gap-3);
  cursor: pointer;
  border: 0;
  width: 100%;
  background: none;
  text-align: left;
  font: inherit;
  color: var(--v3-anthracite);
}
.gs-hit:hover,
.gs-hit.gs-active {
  background: var(--v3-green-mist);
}
/* Keyboard focus must be visible for the same reason the hover is: ↑↓ moves
   through all groups (S4) and the user has to be able to see where they are. */
.gs-hit.gs-active { box-shadow: inset 3px 0 0 var(--v3-green); }

.gs-ico {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--v3-steel);
}
.gs-hit.gs-active .gs-ico { color: var(--v3-green); }
.gs-ico svg { width: 100%; height: 100%; display: block; }

.gs-txt { min-width: 0; flex: 1; }
.gs-label {
  font-size: var(--v3-s-sm);
  font-weight: 600;
  color: var(--v3-anthracite);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gs-sub {
  font-size: var(--v3-s-xs);
  color: var(--v3-steel);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Show all 23 →" and "Ask LRES AI →" — same row metrics, quieter type. */
.gs-more {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--v3-gap-2) var(--v3-gap-3) var(--v3-gap-2) 51px;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  font-size: var(--v3-s-xs);
  font-weight: 600;
  color: var(--v3-green);
  cursor: pointer;
}
.gs-more:hover, .gs-more.gs-active { background: var(--v3-green-mist); }
.gs-more.gs-active { box-shadow: inset 3px 0 0 var(--v3-green); }

.gs-empty {
  padding: var(--v3-gap-4) var(--v3-gap-3);
  font-size: var(--v3-s-sm);
  color: var(--v3-steel);
}
.gs-foot {
  border-top: 1px solid var(--v3-mist);
  margin-top: var(--v3-gap-2);
  padding-top: var(--v3-gap-1);
}

/* S5 — "Phone width: full-width sheet." Below the topbar, edge to edge, and
   tall enough to be the whole working surface rather than a letterbox. */
@media (max-width: 640px) {
  #globalSearchResults.gs-sheet {
    position: fixed;
    top: var(--lres-topbar-h, 51px);
    left: 0;
    right: 0;
    bottom: 0;
    max-height: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
    padding-bottom: var(--v3-gap-6);
  }
  .gs-label { white-space: normal; }
  .gs-sub   { white-space: normal; }
}

/* The in-place "Show all" expansion (BLOCKED.md B-1) and the full page both
   render through this. On the page it is a plain block, not a floating sheet. */
.gs-page.gs-sheet {
  position: static;
  max-height: none;
  box-shadow: none;
  border-radius: 10px;
}

/* The "Ask LRES AI →" row keeps the hit metrics (so its icon lines up with the
   icons above it) but reads as chrome, not as a result. */
.gs-ask .gs-ask-label { color: var(--v3-green); font-weight: 600; }