/* ============================================================
   Gantry web — people-of-influence pieces (surfaces/web/experts.jsx)
   The person-first search page retired in the 2026-09 Explore
   consolidation; these are the layout rules for what it left behind
   — the topic browser and activity floors the map's filter panel
   mounts, the export / add-to-list / save-search actions on the
   drawer's People tab, and the favourite star. Every colour, radius,
   font and easing is a token from /ui/tokens.css; component styling
   comes from /ui/components.css. These are LAYOUT classes only.
   ============================================================ */

/* "Browse all" — a quiet text affordance beside the topic filter, not a
   button competing with the filter itself. */
.cg-x-browse {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 10.5px;
  color: var(--brand-text); border-bottom: 1px solid transparent;
  transition: border-color .15s var(--ease);
}
.cg-x-browse:hover { border-bottom-color: var(--brand-text); }

/* Topic browser */
.cg-x-browser { width: min(620px, 100%); max-height: min(84vh, 720px); }
.cg-x-browser-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; }
.cg-x-browser-title { font-family: var(--font-serif); font-size: 21px; margin-top: 4px; }
.cg-x-browser-body { display: flex; flex-direction: column; gap: 10px; }
.cg-x-browser-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cg-x-browser-tools .cg-input { flex: 1 1 200px; padding: 8px 12px; font-size: 13px; }
.cg-x-browser-cov { font-size: 10.5px; color: var(--fg-4); }
.cg-x-browser-ph { height: 200px; }
.cg-x-browser-msg { color: var(--fg-3); font-size: 12.5px; padding: 18px 0; }
.cg-x-browser-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cg-x-browser-note { font-size: 10.5px; color: var(--fg-4); }
.cg-x-browser-actions { display: inline-flex; gap: 8px; margin-left: auto; }

/* Activity floors: three labelled numeric inputs. */
.cg-x-floors { display: grid; gap: 8px; }
.cg-x-floor {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--fg-3);
}
.cg-x-floor .cg-input { padding: 7px 10px; font-size: 13px; }

/* Export CSV + its capped-rows note. */
.cg-x-export { display: inline-flex; align-items: center; gap: 10px; }
.cg-x-export .cg-btn { gap: 6px; }
.cg-x-export-note { font-size: 10.5px; color: var(--fg-4); }

/* Favourite star (row + profile header). */
.cg-x-fav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: 0; border-radius: var(--r-sm);
  color: var(--fg-4); cursor: pointer;
  transition: color .15s var(--ease), transform .18s var(--ease), background .15s var(--ease);
}
.cg-x-fav:hover { color: var(--fg); background: var(--bg-hover); }
.cg-x-fav.on { color: var(--brand-text); }
.cg-x-fav.on svg { fill: currentColor; }
.cg-x-fav:active { transform: scale(.86); }

/* ---------- Add to list / save this search (PROD-34) ----------
   A popover, not a modal: keeping a selection must not take over the page —
   the selection is what the user is about to lose. */
.cg-x-addlist { position: relative; display: inline-flex; }
.cg-x-addlist-pop {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 240px; max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  z-index: 40;
  animation: cg-x-addlist-in .16s var(--ease) both;
}
@keyframes cg-x-addlist-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.cg-x-addlist-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 8px; border: 0; border-radius: var(--r-sm);
  background: none; font: inherit; font-size: 12.5px; color: var(--fg-2);
  cursor: pointer; text-align: left;
  transition: background .14s var(--ease);
}
.cg-x-addlist-row:hover { background: var(--bg-hover); color: var(--fg); }
.cg-x-addlist-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.cg-x-addlist-new {
  display: flex; gap: 8px; align-items: center;
  padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--line);
}
.cg-x-addlist-new .cg-input { flex: 1 1 auto; min-width: 0; }
.cg-x-addlist-note { padding: 4px 8px; font-size: 10.5px; color: var(--fg-4); }
@media (prefers-reduced-motion: reduce) {
  .cg-x-addlist-pop { animation: none; }
  .cg-x-addlist-row, .cg-x-fav, .cg-x-browse { transition: none; }
}