/* ==========================================================================
   assets/need/need.css — "What are you looking for?" (see need.js)

   One field in three materials, each the form's own:
     .nq-wells   homepage audit form on phones: a pale well like the name and
                 the number (#F2F5FB, r14); the list docks under it in the
                 same tone (tray.css, STRADDLE)
     .nq-drawer  homepage audit form on desktop: a white hairline field of the
                 pale drawer (r8), on the drawer's second row with the button
     .nq-popup   Live Proof Walkthrough popup: the Contact page field (.px-f)

   Where the row and its list meet, their corners tighten; the outer corners
   keep the form's radius (the phone field's docked country list does the
   same). Chosen is a filled square box and deep-blue words — no blue outline
   (owner, 2026-10-02: blue lines read as cheap). The row's action is a dark
   word and a small tinted chevron badge, not bare blue text.

   UNDO: _live-backup/20261003-need/README.txt
   ========================================================================== */

:is(#hx form#hxForm, .pw-dlg) .nq {
  --nq-ink: #0E1E35; --nq-ph: #7C8AA5; --nq-brand: #0760C6; --nq-deep: #0A4FA8; --nq-red: rgba(209, 67, 67, .92);
  --nq-h: 52px; --nq-r: 14px; --nq-rj: 4px; --nq-bg: #F2F5FB; --nq-line: transparent; --nq-hover: #E8EEF8;
  --nq-fs: 17px; --nq-kfs: 15px; --nq-cols: 2;
  box-sizing: border-box; min-width: 0; text-align: left;
}
:is(#hx form#hxForm, .pw-dlg) .nq *, :is(#hx form#hxForm, .pw-dlg) .nq *::before, :is(#hx form#hxForm, .pw-dlg) .nq *::after { box-sizing: border-box; }
:is(#hx form#hxForm, .pw-dlg) .nq [hidden] { display: none !important; }
:is(#hx form#hxForm, .pw-dlg) .nq .nq-anim { overflow: hidden; }

/* ---- the row ------------------------------------------------------------ */
:is(#hx form#hxForm, .pw-dlg) .nq button.nq-row {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  width: 100%; height: auto; min-height: var(--nq-h); margin: 0; padding: 8px 10px 8px 14px;
  border: 0; border-radius: var(--nq-r); background: var(--nq-bg); box-shadow: inset 0 0 0 1px var(--nq-line);
  font: inherit; font-size: var(--nq-fs); font-weight: 400; line-height: 1.25; letter-spacing: -.005em; color: var(--nq-ink);
  text-align: left; white-space: normal; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .2s ease, background-color .2s ease, border-radius .2s ease;
}
:is(#hx form#hxForm, .pw-dlg) .nq .nq-val { flex: 1 1 auto; min-width: 0; }
:is(#hx form#hxForm, .pw-dlg) .nq .nq-ph { color: var(--nq-ph); }
:is(#hx form#hxForm, .pw-dlg) .nq .nq-names { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; row-gap: 1px; font-weight: 500; }
:is(#hx form#hxForm, .pw-dlg) .nq .nq-names span { white-space: nowrap; }
:is(#hx form#hxForm, .pw-dlg) .nq .nq-names i { margin-right: 5px; font-style: normal; font-weight: 400; color: #5E6D87; }
:is(#hx form#hxForm, .pw-dlg) .nq .nq-go { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 650; color: #33425A; white-space: nowrap; }
:is(#hx form#hxForm, .pw-dlg) .nq .nq-go em { font-style: normal; }
:is(#hx form#hxForm, .pw-dlg) .nq .nq-chev {
  display: block; width: 24px; height: 24px; padding: 6px; border-radius: 7px; background: #E3EDFC; color: var(--nq-brand);
  transition: transform .25s ease;
}
:is(#hx form#hxForm, .pw-dlg) .nq.is-open .nq-chev { transform: rotate(180deg); }
:is(#hx form#hxForm, .pw-dlg) .nq.is-open button.nq-row { border-radius: var(--nq-r) var(--nq-r) var(--nq-rj) var(--nq-rj); }
/* missing when the key was pressed: the live fields' own red ring, no words in the field */
:is(#hx form#hxForm, .pw-dlg) .nq.nq-bad button.nq-row { background: #fff; box-shadow: inset 0 0 0 1.5px var(--nq-red); }
:is(#hx form#hxForm, .pw-dlg) .nq button.nq-row:focus-visible,
:is(#hx form#hxForm, .pw-dlg) .nq button.nq-k:focus-visible { outline: 2px solid var(--nq-brand); outline-offset: 2px; }

/* ---- the list, docked under the row --------------------------------------- */
:is(#hx form#hxForm, .pw-dlg) .nq .nq-pop {
  margin-top: 4px; padding: 5px 6px;
  border-radius: var(--nq-rj) var(--nq-rj) var(--nq-r) var(--nq-r); background: var(--nq-bg); box-shadow: inset 0 0 0 1px var(--nq-line);
}
:is(#hx form#hxForm, .pw-dlg) .nq .nq-list { display: grid; grid-template-columns: repeat(var(--nq-cols), minmax(0, 1fr)); gap: 0 4px; }
:is(#hx form#hxForm, .pw-dlg) .nq button.nq-k {
  position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 9px;
  width: auto; min-width: 0; height: 46px; margin: 0; padding: 0 6px 0 8px;
  border: 0; border-radius: 10px; background: transparent; box-shadow: none;
  font: inherit; font-size: var(--nq-kfs); font-weight: 600; line-height: 1.15; letter-spacing: -.005em; color: var(--nq-ink);
  text-align: left; white-space: normal; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
}
@media (hover: hover) {
  :is(#hx form#hxForm, .pw-dlg) .nq button.nq-k:hover { background: var(--nq-hover); }
}
:is(#hx form#hxForm, .pw-dlg) .nq button.nq-k:active { transform: scale(.98); }
:is(#hx form#hxForm, .pw-dlg) .nq button.nq-k.is-on { color: var(--nq-deep); }
:is(#hx form#hxForm, .pw-dlg) .nq .nq-t { min-width: 0; }
:is(#hx form#hxForm, .pw-dlg) .nq .nq-r {
  flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px #A7B6CE; color: transparent;
  transition: background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
:is(#hx form#hxForm, .pw-dlg) .nq .nq-r svg { display: block; width: 12px; height: 12px; }
:is(#hx form#hxForm, .pw-dlg) .nq .is-on > .nq-r { background: var(--nq-brand); box-shadow: none; color: #fff; }

/* ---- homepage, phones: a well in the white field ---------------------------- */
#hx form#hxForm.as-open > .nq-wells { grid-column: 1 / -1; margin: 8px -10px 0; --nq-kfs: clamp(14px, 3.72cqw, 14.5px); }
#hx form#hxForm.as-open > .nq-wells .nq-names { font-size: 15.5px; }
@media (max-width: 350px) {
  #hx form#hxForm.as-open > .nq-wells { margin-left: -8px; margin-right: -8px; --nq-fs: 16px; }
  #hx form#hxForm.as-open > .nq-wells button.nq-row { padding-left: 12px; }
  #hx form#hxForm.as-open > .nq-wells button.nq-k { gap: 7px; padding: 0 2px 0 6px; }
  #hx form#hxForm.as-open > .nq-wells:not(.nq-has):not(.is-open) .nq-go em { display: none; }   /* the badge alone: the question keeps its one line */
}

/* ---- homepage, desktop: the drawer's second row, the field and the button ---- */
#hx form#hxForm .tr-tray.tr-has-need { flex-wrap: wrap; align-items: flex-start; }
#hx form#hxForm .tr-tray.tr-has-need > .nq-drawer {
  flex: 1 1 60%; min-width: 0;
  --nq-h: 54px; --nq-r: 8px; --nq-rj: 3px; --nq-bg: #fff; --nq-line: #D7E2F3; --nq-hover: #F2F6FC;
  --nq-fs: 16px; --nq-kfs: 14.5px; --nq-cols: 4;
}
#hx form#hxForm .tr-tray.tr-has-need > .nq-drawer button.nq-row { padding-left: 16px; }
#hx form#hxForm .tr-tray.tr-has-need > .nq-drawer .nq-pop { padding: 4px 8px; }
@media (max-width: 1060px) {
  #hx form#hxForm .tr-tray.tr-has-need > .nq-drawer { --nq-cols: 3; }
}

/* ---- the Live Proof Walkthrough popup: the Contact page's field (.px-f) -----
   (the same :is() prefix as the base rules, so these outrank them) */
.pw-dlg .px-need[hidden] { display: none; }
:is(#hx form#hxForm, .pw-dlg) .px-need .nq-popup {
  margin-top: 7px;
  --nq-h: 46px; --nq-r: 10px; --nq-bg: #F6F8FC; --nq-line: #DCE3EE; --nq-hover: #EDF1F8; --nq-ph: #8A94A3;
  --nq-fs: 15px; --nq-kfs: 14.5px;
}
:is(#hx form#hxForm, .pw-dlg) .px-need .nq-popup button.nq-row { padding: 6px 8px 6px 14px; }
:is(#hx form#hxForm, .pw-dlg) .px-need .nq-popup .nq-go { font-size: 13.5px; }
@media (hover: hover) {
  :is(#hx form#hxForm, .pw-dlg) .px-need .nq-popup:not(.nq-bad) button.nq-row:not(.cf-bad):hover { box-shadow: inset 0 0 0 1px #C5D1E3; }
}
/* missing: the popup's own red edge (its inputs use border-color #D93025) */
:is(#hx form#hxForm, .pw-dlg) .px-need .nq-popup button.nq-row.cf-bad,
:is(#hx form#hxForm, .pw-dlg) .px-need .nq-popup.nq-bad button.nq-row { background: #F6F8FC; box-shadow: inset 0 0 0 1px #D93025; }

@media (prefers-reduced-motion: reduce) {
  :is(#hx form#hxForm, .pw-dlg) .nq *, :is(#hx form#hxForm, .pw-dlg) .nq *::after { transition: none !important; }
}