web/src/query/query.css

/* ---------------------------------------------------------------------------
   query/query.css — the Query module's own stylesheet.

   ⭐ IT IS SHORT NOW, AND THAT IS THE POINT (owner item 2, 2026-08-14). The Query
   module IS the database module — `shell-db-frame` + `DbHead` + `CustomerGrid` —
   so the frame, the header, the grid and every view kind are styled by rules that
   already existed. What is left here is the only two things this surface adds: the
   VIEW PICKER inside the database header, and the empty state for a workspace whose
   assistant has not built anything yet.

   The ask/answer/list rules that used to live here MOVED to
   `assistant/assistant.css` with the markup they style (the `as-` prefix). They were
   not copied: one look, one place.

   ⛔ EVERY FONT SIZE IS A `--lp-fs-*` TOKEN AND EVERY COLOUR A `--lp-*` TOKEN.
   Wave-21 R5 is gated app-wide over every CSS file under src, not just index.css,
   and a literal here reds `web_ui` for the whole tree. No emojis, no ALL-CAPS
   chrome (DESIGN.md R6).

   ⛔⛔ AND DO NOT WRITE A GLOB IN THIS COMMENT. A star-star followed by a slash
   spells the CSS COMMENT TERMINATOR — the comment would end in the middle of its own
   explanation, every line after it would become stray tokens, and `lightningcss`
   would die on the first backtick it then met. `tsc` passes, `vite` transforms all
   1,014 modules, and the build fails in the MINIFIER, nowhere near the sentence that
   caused it. Found by `web_build` in wave 32's QA; it blocked the deploy outright.
--------------------------------------------------------------------------- */

/* ── the view picker, inside the database header ─────────────────────────── */

.qy-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}

.qy-pick-label {
  font-size: var(--lp-fs-2xs);
  font-weight: 600;
  color: var(--lp-muted);
}

.qy-pick-select {
  box-sizing: border-box;
  max-width: 420px;
  padding: 5px 9px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md);
  background: var(--lp-surface);
  color: var(--lp-ink);
  font-size: var(--lp-fs-sm);
  font-family: inherit;
}

.qy-pick-select:focus-visible {
  outline: 2px solid var(--lp-blue-solid);
  outline-offset: 1px;
}

/* ── nothing built yet ───────────────────────────────────────────────────── */

.qy-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: 34px 44px;
  box-sizing: border-box;
  background: var(--lp-wash);
}

.qy-empty-h {
  margin: 0 0 8px;
  font-size: var(--lp-fs-lg);
  font-weight: 650;
  color: var(--lp-ink);
}

.qy-empty-p {
  margin: 0 0 18px;
  max-width: 58ch;
  font-size: var(--lp-fs-sm);
  line-height: var(--lp-lh);
  color: var(--lp-muted);
}

.qy-empty-go {
  padding: 8px 14px;
  border-radius: var(--lp-r-md);
  background: var(--lp-blue-solid);
  color: var(--lp-surface);
  font-size: var(--lp-fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.qy-empty-go:hover {
  background: color-mix(in srgb, var(--lp-blue-solid) 82%, #000);
}