/* Attio search field + result dropdown for pop-up configuration dialogs (user, 2026-10-29: "copy Attio's style for the
   search fields: Add a company, Search metrics … the rounding, the drop-down"). Measured spec: attio-style §9–10.
   Field = 32px, r 9, inset ring rgba(0,0,0,.06), placeholder .50; results = a floating popover under the field
   (r 12, --at-pop shadow, padding 4, 32px rows r 8). Attio's own radii, so excluded from scripts/square_corners.py.
   Used by Charts › New chart (charts_home.html). */
html .fc-dlg {
  --as-bg: #FFFFFF; --as-ink: #101112; --as-sub: rgba(0,0,0,.63); --as-faint: rgba(0,0,0,.50);
  --as-ring: rgba(0,0,0,.06); --as-hover: #F6F7F7; --as-blue: #266DF0;
  --as-pop: inset 0 0 0 1px #0000, 0 0 0 1px rgba(28,40,64,.04), 0 4px 8px -4px rgba(28,40,64,.12), 0 4px 12px -2px rgba(24,41,75,.16);
}
html[data-theme="dark"] .fc-dlg {
  --as-bg: #1B1C1F; --as-ink: #F1F2F3; --as-sub: rgba(255,255,255,.60); --as-faint: rgba(255,255,255,.45);
  --as-ring: rgba(255,255,255,.10); --as-hover: rgba(255,255,255,.06); --as-blue: #4E8CFC;
  --as-pop: 0 0 0 1px #2F3033, 0 12px 32px -8px rgba(0,0,0,.6);
}
html .fc-dlg .fc-fld:not(#_) { height: 32px; padding: 0 8px; gap: 8px; border-radius: 9px; background: transparent;
  box-shadow: inset 0 0 0 1px var(--as-ring); color: var(--as-faint); }
html .fc-dlg .fc-fld:not(#_) i { font-size: 16px; }
html .fc-dlg .fc-fld:not(#_):focus-within { box-shadow: inset 0 0 0 1px var(--as-blue); color: var(--as-sub); }
html .fc-dlg input.fc-in:not(#_)::placeholder { color: var(--as-faint); }

/* the dropdown floats over what is below, like Attio's record picker */
html .fc-dlg #fc-add { position: relative; }
html .fc-dlg .fc-res:not(#_) { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px;
  background: var(--as-bg); border-radius: 12px; box-shadow: var(--as-pop); max-height: 260px; overflow-y: auto; }
html .fc-dlg .fc-res[hidden]:not(#_) { display: none; }
html .fc-dlg .fc-res:not(#_) button { height: 32px; padding: 0 8px; gap: 8px; border-radius: 8px; color: var(--as-ink); }
html .fc-dlg .fc-res:not(#_) button:hover, html .fc-dlg .fc-res:not(#_) button.on { background: var(--as-hover); }
html .fc-dlg .fc-res:not(#_) img { width: 20px; height: 20px; border-radius: 6px; }
html .fc-dlg .fc-res:not(#_) .t { font-weight: 500; }
html .fc-dlg .fc-res:not(#_) .n { color: var(--as-faint); font-size: 13px; }

/* ── Every other pop-up / configuration search field (user, 2026-10-29: "every like pop-up configuration menu") ──
   One field look wherever a pop-up has a search box: Comparables › Columns, screener Screens / Add criteria / Columns /
   Formulas / option lists, Dashboards layouts + add-card catalogue, Chart indicators + Add ticker, old Charts metrics.
   Loaded globally from base.html. Tokens come from :root so it works outside .fc-dlg. */
:root {
  --as-rule: #EEEFF1; --as-bg: #FFFFFF; --as-ink: #101112; --as-sub: rgba(0,0,0,.63); --as-faint: rgba(0,0,0,.50);
  --as-ring: rgba(0,0,0,.06); --as-hover: #F6F7F7; --as-blue: #266DF0;
  --as-pop: inset 0 0 0 1px #0000, 0 0 0 1px rgba(28,40,64,.04), 0 4px 8px -4px rgba(28,40,64,.12), 0 4px 12px -2px rgba(24,41,75,.16);
}
html[data-theme="dark"] {
  --as-rule: #2F3033; --as-bg: #1B1C1F; --as-ink: #F1F2F3; --as-sub: rgba(255,255,255,.60); --as-faint: rgba(255,255,255,.45);
  --as-ring: rgba(255,255,255,.10); --as-hover: rgba(255,255,255,.06); --as-blue: #4E8CFC;
  --as-pop: 0 0 0 1px #2F3033, 0 12px 32px -8px rgba(0,0,0,.6);
}
html #comp-root input.cmp-pick-q:not(#_), html input#scf-q:not(#_), html input#scx-screens-q:not(#_), html input#scx-add-q:not(#_),
html input#col-cfg-q:not(#_), html input.pop-q:not(#_), html input.ws-lib-q:not(#_), html input.ws-cat-q:not(#_),
html input.chg-addq:not(#_), html input#metric-search:not(#_), html .aqp-pq input#ind-q:not(#_) {
  box-sizing: border-box; width: 100%; height: 44px; padding: 0 12px; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: var(--as-ink) !important; font: 500 14px/20px Inter, system-ui, sans-serif !important;
  box-shadow: inset 0 -1px 0 var(--as-rule) !important; outline: none !important; -webkit-appearance: none; appearance: none;
}
html #comp-root input.cmp-pick-q:not(#_):focus, html input#scf-q:not(#_):focus, html input#scx-screens-q:not(#_):focus,
html input#scx-add-q:not(#_):focus, html input#col-cfg-q:not(#_):focus, html input.pop-q:not(#_):focus,
html input.ws-lib-q:not(#_):focus, html input.ws-cat-q:not(#_):focus, html input.chg-addq:not(#_):focus,
html input#metric-search:not(#_):focus, html .aqp-pq input#ind-q:not(#_):focus { box-shadow: inset 0 -1px 0 var(--as-rule) !important; }
html #comp-root input.cmp-pick-q:not(#_)::placeholder, html input#scf-q:not(#_)::placeholder, html input#scx-screens-q:not(#_)::placeholder,
html input#scx-add-q:not(#_)::placeholder, html input#col-cfg-q:not(#_)::placeholder, html input.pop-q:not(#_)::placeholder,
html input.ws-lib-q:not(#_)::placeholder, html input.ws-cat-q:not(#_)::placeholder, html input.chg-addq:not(#_)::placeholder,
html input#metric-search:not(#_)::placeholder, html .aqp-pq input#ind-q:not(#_)::placeholder { color: var(--as-faint) !important; }
/* Pop-up search = Attio's search-first popover: no box, a full-width hairline under it (user's reference, 2026-10-29) */
/* the indicator box wraps its input in a label that draws its own frame: let the input carry it */
html .aqp-pq:not(#_) { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
html .aqp-pq:not(#_) svg { display: none; }
html .aqp-pq input#ind-q:not(#_) { width: 100%; }
/* wrappers that padded the old boxed input: drop it so the hairline runs edge to edge */
html .scx-pop .hd:not(#_), html #scx-add .hd:not(#_), html #col-cfg-search:not(#_), html .ws-cat-top:not(#_), html #scx-screens .list > .q:not(#_) { padding: 0 !important; margin: 0 !important; }
html #comp-root .cmp-pick-hd:not(#_) { padding: 0 !important; }
html #comp-root .cmp-pick-hd .cmp-pick-lbl:not(#_) { padding: 10px 12px 0 !important; }
html #scx-screens .list:not(#_) { padding-top: 0 !important; }
/* Edit criteria dialog's own search (already borderless): add the hairline under it */
html.at-done #scxb input.scxb-q:not(#_):not(#_), html input.scxb-q:not(#_) { box-shadow: inset 0 -1px 0 var(--as-rule) !important; width: 100%; box-sizing: border-box; }
/* New chart: the name field in the header, same Attio field */
html .fc-dlg .fc-nm:not(#_) { height: 32px; padding: 0 8px; border-radius: 9px; background: transparent;
  box-shadow: inset 0 0 0 1px var(--as-ring); color: var(--as-faint); }
html .fc-dlg .fc-nm:not(#_):focus-within { box-shadow: inset 0 0 0 1px var(--as-blue); color: var(--as-sub); }
html .fc-dlg input.fc-title:not(#_)::placeholder { color: var(--as-faint); }

/* ── Screener shared dropdown (#sc-pop: market / sector / industry pickers, column + sort menus) in Attio's popover ──
   (user, 2026-10-29: "ensure all dropdowns get updated to match Attio"): r12, layered shadow, search first with a hairline,
   32px rows r8, 14/500 ink, group labels 12/500 grey, the chosen row = blue text + a check on the right. */
html #sc-pop:not(#_) { background: var(--as-bg); border: 0; border-radius: 12px; padding: 4px; box-shadow: var(--as-pop);
  -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; font: 500 14px/20px Inter, sans-serif; color: var(--as-ink); max-width: 320px; }
html #sc-pop:not(#_):has(.pop-q) { padding: 0 0 4px; }
html #sc-pop:not(#_) .pop-q { margin-bottom: 4px; padding: 0 12px; }
html #sc-pop:not(#_) .pop-list { padding: 0 4px; }
html #sc-pop:not(#_) .pop-grp { padding: 8px 8px 4px; font: 500 12px/16px Inter, sans-serif; color: var(--as-sub); }
html #sc-pop:not(#_) .pop-opt { min-height: 32px; padding: 0 8px; border-radius: 8px; font: 500 14px/20px Inter, sans-serif; color: var(--as-ink); }
html #sc-pop:not(#_) .pop-opt:hover, html #sc-pop:not(#_) .pop-opt.hi { background: var(--as-hover); }
html #sc-pop:not(#_) .pop-opt.sel { color: var(--as-blue); font-weight: 500; }
html #sc-pop:not(#_) .pop-opt .sub { font: 500 12px 'Inter', sans-serif; color: var(--as-faint); }
html #sc-pop:not(#_) .pop-opt .tick { font-size: 14px; }
html #sc-pop:not(#_) .pop-sep { margin: 4px -4px; background: var(--as-rule); }
html #sc-pop:not(#_) .pop-empty { padding: 10px 8px; font: 500 14px Inter, sans-serif; color: var(--as-faint); }