/* searches/assets/css/sq.css — Search Intelligence viewer.
   Everything is scoped under .gs-searches so nothing here can reach another page, and the class
   names are prefixed .sq- for the same reason. Tokens come from the app's variables.css; no colour
   is hard-coded that the design system already names. */

.gs-searches { --sq-good: #1FA463; --sq-warn: #D97706; --sq-bad: #DC2626; --sq-blue: #2A6FE8;
               --sq-violet: #7C4DBE; --sq-track: #EEF1F6; }

.gs-searches h1 { font-size: 22px; font-weight: 700; letter-spacing: -.2px; }
.gs-searches .sq-h { font-weight: 600; font-size: 14px; color: var(--ink, #1A1D24); margin-bottom: 2px; }
.gs-searches .sq-i { font-size: 12px; cursor: help; vertical-align: 1px; margin-left: 4px; }

/* ---- toolbar --------------------------------------------------------- */
.gs-searches .sq-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.gs-searches .sq-field { flex: 1 1 150px; min-width: 0; }
.gs-searches .sq-field-btn { flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .gs-searches .sq-field { flex: 1 1 100%; }
  .gs-searches .sq-field-btn .btn { width: 100%; }
}

/* ---- KPI cards ------------------------------------------------------- */
.gs-searches .sq-kpi { background: var(--card, #fff); border: 1px solid var(--line, #E9EDF3);
  border-radius: var(--r-card, 6px); box-shadow: var(--sh-1); padding: 12px 14px; height: 100%; }
.gs-searches .sq-kpi-l { font-size: 11.5px; color: var(--muted, #8C95A1); text-transform: uppercase;
  letter-spacing: .4px; font-weight: 600; }
.gs-searches .sq-kpi-v { font-size: 24px; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; margin-top: 2px; }
.gs-searches .sq-kpi-s { font-size: 12px; color: var(--muted, #8C95A1); margin-top: 2px; }
.gs-searches .sq-kpi-bar { height: 5px; border-radius: 3px; background: var(--sq-track);
  margin-top: 8px; overflow: hidden; }
.gs-searches .sq-kpi-bar > i { display: block; height: 100%; border-radius: 3px; }

/* ---- click map (treemap-ish tiles) ----------------------------------- */
.gs-searches .sq-map { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start;
  min-height: 210px; }
.gs-searches .sq-tile { border-radius: var(--r-sm, 4px); padding: 8px 10px; color: #fff;
  min-width: 0; overflow: hidden; cursor: pointer; border: 0; text-align: left;
  transition: transform .12s ease, box-shadow .12s ease; }
.gs-searches .sq-tile:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.gs-searches .sq-tile[aria-pressed="true"] { outline: 2px solid var(--ink, #1A1D24); outline-offset: 1px; }
.gs-searches .sq-tile-h { font-weight: 600; font-size: 12.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.gs-searches .sq-tile-n { font-size: 11.5px; opacity: .88; font-variant-numeric: tabular-nums; }
.gs-searches .sq-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px;
  font-size: 11.5px; color: var(--muted, #8C95A1); }
.gs-searches .sq-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 5px; vertical-align: -1px; }

/* ---- bar rows (hesitation, personas, stages, friction) --------------- */
.gs-searches .sq-row { margin-bottom: 10px; }
.gs-searches .sq-row:last-child { margin-bottom: 0; }
.gs-searches .sq-row-t { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.gs-searches .sq-row-t .sq-row-n { margin-left: auto; color: var(--muted, #8C95A1);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-searches .sq-row-bar { height: 6px; border-radius: 4px; background: var(--sq-track);
  margin-top: 4px; overflow: hidden; }
.gs-searches .sq-row-bar > i { display: block; height: 100%; border-radius: 4px; }
.gs-searches .sq-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }

/* ---- tables ---------------------------------------------------------- */
.gs-searches .sq-table { width: 100%; }
.gs-searches .sq-table th, .gs-searches .sq-table td { vertical-align: middle; }
.gs-searches .sq-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-searches .sq-trunc { display: inline-block; max-width: 260px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.gs-searches .sq-sub { font-size: 11.5px; color: var(--muted, #8C95A1); }
.gs-searches .sq-search { max-width: 220px; }

/* score pills — the same shape everywhere a 0–100 appears */
.gs-searches .sq-pill { display: inline-block; min-width: 34px; padding: 1px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: #fff; text-align: center;
  font-variant-numeric: tabular-nums; cursor: help; }
.gs-searches .sq-tag { display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: var(--sq-track); color: var(--ink-2, #3C4350); }

.gs-searches .sq-btn-icon { border: 1px solid var(--line, #E9EDF3); background: #fff;
  border-radius: var(--r-sm, 4px); padding: 2px 7px; font-size: 12px; color: var(--muted, #8C95A1);
  line-height: 1.5; }
.gs-searches .sq-btn-icon:hover { color: var(--accent, #1FA463); border-color: var(--accent, #1FA463); }
.gs-searches .sq-links { display: flex; gap: 4px; flex-wrap: wrap; }

/* ---- sankey ---------------------------------------------------------- */
.gs-searches .sq-flowwrap { width: 100%; overflow: hidden; }
.gs-searches .sq-flow { width: 100%; height: 340px; display: block; }
.gs-searches .sq-flow .sq-ribbon { opacity: .34; transition: opacity .12s ease; }
.gs-searches .sq-flow .sq-ribbon:hover { opacity: .72; }
.gs-searches .sq-flow .sq-nodelabel { font-size: 11px; fill: var(--ink-2, #3C4350); }
.gs-searches .sq-flow .sq-nodebar { rx: 2; }

/* ---- path out -------------------------------------------------------- */
.gs-searches .sq-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--line, #E9EDF3); }
.gs-searches .sq-path:last-child { border-bottom: 0; }
.gs-searches .sq-step { background: var(--sq-track); border-radius: var(--r-sm, 4px);
  padding: 2px 8px; font-size: 11.5px; max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.gs-searches .sq-step-out { background: var(--accent-soft, #E7F5EC); color: var(--accent-2, #178A52);
  font-weight: 600; }
.gs-searches .sq-arrow { color: var(--muted-2, #AAB2BD); font-size: 11px; }
.gs-searches .sq-path-n { margin-left: auto; font-size: 11.5px; color: var(--muted, #8C95A1);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- responsive: no horizontal page scroll, ever --------------------- */
.gs-searches .gs-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) {
  .gs-searches h1 { font-size: 19px; }
  .gs-searches .sq-trunc { max-width: 150px; }
  .gs-searches .sq-flow { height: 280px; }
  .gs-searches .sq-step { max-width: 130px; }
  .gs-searches .sq-search { max-width: 100%; }
  .gs-searches .sq-map { min-height: 170px; }
}

/* ---- search-specific: refinement chains ------------------------------ */
.gs-searches .sq-chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--line, #E9EDF3); }
.gs-searches .sq-chain:last-child { border-bottom: 0; }
.gs-searches .sq-q { background: var(--sq-track); border-radius: var(--r-sm, 4px); padding: 2px 8px;
  font-size: 11.5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.gs-searches .sq-q-last { background: #FDECEC; color: #B3261E; font-weight: 600; }
.gs-searches .sq-q-ok { background: var(--accent-soft, #E7F5EC); color: var(--accent-2, #178A52); font-weight: 600; }

/* ---- funnel ---------------------------------------------------------- */
.gs-searches .sq-fstep { margin-bottom: 12px; }
.gs-searches .sq-fstep:last-child { margin-bottom: 0; }
.gs-searches .sq-fbar { height: 26px; border-radius: var(--r-sm, 4px); background: var(--sq-track); overflow: hidden; }
.gs-searches .sq-fbar > i { display: block; height: 100%; border-radius: var(--r-sm, 4px); }
.gs-searches .sq-fhead { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 4px; }
.gs-searches .sq-fhead .sq-fn { margin-left: auto; color: var(--muted, #8C95A1);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-searches .sq-fnote { font-size: 11.5px; color: var(--muted, #8C95A1); margin-top: 3px; }

/* ---- zero-result rows ------------------------------------------------ */
.gs-searches .sq-zero-q { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.gs-searches .sq-done { opacity: .5; }
.gs-searches .sq-cov { font-size: 11.5px; color: var(--muted, #8C95A1); }


/* Shared date-range picker (normalised to /devicedetector) */
.mb-pill{position:relative;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--line-2,#D0D4DA);border-radius:6px;background:#fff;font-size:12.5px;font-weight:600;color:var(--ink-2,#3C4350);cursor:pointer;white-space:nowrap}
.mb-pill .car{font-size:11px;color:var(--muted-2,#AAB2BD)}
.rangepick{background:#fff;border:1px solid var(--line,#E9EDF3);border-radius:10px;box-shadow:0 12px 30px rgba(16,24,40,.16);min-width:236px;padding:6px}
.rangepick .rp-presets{display:flex;flex-direction:column}
.rangepick .rm{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:6px;font-weight:600;font-size:13px;color:var(--ink-2,#3C4350);border:0;background:none;cursor:pointer}
.rangepick .rm:hover{background:#F5F7FA}
.rangepick .rm.on{background:var(--accent-soft,#E7F5EC);color:var(--accent-2,#178A52)}
.rangepick .rp-custom{border-top:1px solid #EEF1F6;margin-top:6px;padding:10px 10px 8px}
.rangepick .rp-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted,#8C95A1);margin-bottom:8px}
.rangepick .rp-dates{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rangepick .rp-dates input[type=date]{flex:1;min-width:0;height:32px;border:1px solid var(--line-2,#D0D4DA);border-radius:6px;padding:0 8px;font-size:12.5px;color:var(--ink-2,#3C4350);background:#fff}
.rangepick .rp-dates input[type=date]:focus{outline:none;border-color:var(--accent,#1FA463);box-shadow:0 0 0 3px rgba(31,164,99,.14)}
.rangepick .rp-arrow{color:var(--muted-2,#AAB2BD);font-weight:700}
.rangepick .rp-apply{width:100%;height:34px;border:0;border-radius:6px;background:var(--accent,#1FA463);color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.rangepick .rp-apply:hover{background:var(--accent-2,#178A52)}