/* Built by app/utils/bundles.py from the files named below. Edit those; never this file. */
/* ==== css/aiq-table.css ==== */
/* House table style — every data table in the app (user, 2026-10-13).
   Picked from static/proto/table-styles.html: the Government contracts header band (option B)
   on the Funds page's dense rows (option C). Spec + rules: docs/features/tables.md.

   Use: <table class="aiq-tbl">, numbers in <td class="num">. Add .tb-zebra for Excel-style banding
   (user wants it on Statements and the Screener, 2026-10-13). Pages keep only what's theirs
   (column widths, sticky offsets, logos); never restyle font, padding or colours here per page. */

:root {
  /* hairline (user, 2026-11-04: "always use hairlines, not thick ones"): 1px, half a pixel on high-density screens; every new rule line uses it */
  --hair: 1px;
  --tb-bg: #292929;
  --tb-head: #333333;
  --tb-head-ink: #a9a9a5;
  --tb-rule: rgba(255,255,255,.07);   /* under the header */
  --tb-row: rgba(255,255,255,.05);    /* between rows */
  --tb-hover: #303030;
  --tb-band: #2f2f2f;                 /* .tb-zebra every other row */
  --tb-sel: rgba(111,131,234,.14);
  --tb-ink: #e7e7e4;
  --tb-sub: #a9a9a5;
  --tb-faint: #7d7d79;
  --tb-pos: #43D1A7;
  --tb-neg: #F73463;
  --tb-accent: #6f83ea;
  --tb-head-h: 34px;
}
html[data-theme="light"] {
  --tb-bg: #ffffff;
  --tb-head: #f5f6f8;
  --tb-head-ink: #6b7080;
  --tb-rule: #e6e8ec;
  --tb-row: #f1f2f5;
  --tb-hover: #f7f8fa;
  --tb-band: #f5f5f5;
  --tb-sel: #eef1fd;
  --tb-ink: #0f172a;
  --tb-sub: #6b7080;
  --tb-faint: #a0a9c0;
  --tb-pos: #0d8a66;
  --tb-neg: #c8203f;
  --tb-accent: #455DDC;
}

.aiq-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--tb-ink);
}
/* !important beats base.html's light-mode `thead tr th` tint. */
html .aiq-tbl > thead > tr > th {
  height: var(--tb-head-h);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tb-head-ink) !important;
  background: var(--tb-head) !important;
  border-bottom: 1px solid var(--tb-rule);
  vertical-align: middle;
  white-space: nowrap;
}
/* Zero specificity, so a page's .num / Tailwind text-right / text-center still wins. */
:where(.aiq-tbl > thead > tr > th) { text-align: left; }
.aiq-tbl > tbody > tr > td,
.aiq-tbl > tbody > tr > th {
  padding: 5px 12px;
  border-bottom: 1px solid var(--tb-row);
  vertical-align: middle;
  white-space: nowrap;
}
.aiq-tbl > tbody > tr:last-child > td { border-bottom: 0; }
.aiq-tbl.tb-zebra > tbody > tr:nth-child(even) > td { background: var(--tb-band); }
.aiq-tbl > tbody > tr:hover > td { background: var(--tb-hover); }
.aiq-tbl > tbody > tr.sel > td { background: var(--tb-sel); }
.aiq-tbl > tfoot > tr > td {
  padding: 5px 12px;
  font-weight: 600;
  background: var(--tb-head);
  border-top: 1px solid var(--tb-rule);
}
.aiq-tbl .num,
html .aiq-tbl > thead > tr > th.num { text-align: right; }
.aiq-tbl .tb-pos { color: var(--tb-pos); }
.aiq-tbl .tb-neg { color: var(--tb-neg); }
.aiq-tbl .tb-sub { color: var(--tb-sub); }
.aiq-tbl .tb-sort { color: var(--tb-accent); font-size: 9px; margin-left: 3px; }
.aiq-tbl img.tb-logo { width: 18px; height: 18px; border-radius: 4px; flex: none; }

@media (min-resolution: 2dppx) { :root { --hair: 0.5px; } }

/* ==== css/aiq-controls.css ==== */
/* House tabs + toggles — "Quiet" (user, 2026-10-13; options in static/proto/tabs-toggles-options.html).

   Toggles (segmented controls): grey track, white thumb on the active option. Every page's toggle reads
   the --seg-* tokens below; new toggles use <div class="aiq-seg"><button class="on">…</button>…</div>.
   Section tabs: plain text, ink + 2px blue underline on the active one (--utab-*), new ones use
   <nav class="aiq-utabs"><a class="on">…</a>…</nav>. Financials keeps its docked tab strip, and the
   user's own lists (Watchlist / Screener / Gov contracts) keep boxed tabs. Spec: docs/features/tables.md
   sibling section "Tabs and toggles". */

:root {
  --seg-bg: rgba(255,255,255,0.04);
  --seg-line: rgba(255,255,255,0.07);
  --seg-ink: rgba(160,169,192,0.85);
  --seg-hover: #e2e8f0;
  --seg-on-bg: #3a3a3a;
  --seg-on-ink: #ffffff;
  --seg-on-shadow: 0 1px 2px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  --seg-h: 28px;

  --utab-ink: rgba(160,169,192,0.85);
  --utab-hover: #e2e8f0;
  --utab-on: #f8fafc;
  --utab-line: #455DDC;
  --utab-rule: rgba(255,255,255,0.08);
}
html[data-theme="light"] {
  --seg-bg: #f1f5f9;
  --seg-line: rgba(0,0,0,0.07);
  --seg-ink: #64748b;
  --seg-hover: #0f172a;
  --seg-on-bg: #ffffff;
  --seg-on-ink: #0f172a;
  --seg-on-shadow: 0 1px 2px rgba(15,23,42,0.12);

  --utab-ink: #64748b;
  --utab-hover: #0f172a;
  --utab-on: #0f172a;
  --utab-line: #455DDC;
  --utab-rule: #e6e8ec;
}

.aiq-seg { display: inline-flex; align-items: center; gap: 2px; height: var(--seg-h); padding: 2px;
  border-radius: 4px; background: var(--seg-bg); border: 1px solid var(--seg-line); }
.aiq-seg > button, .aiq-seg > a { all: unset; box-sizing: border-box; height: 100%; padding: 0 9px; border-radius: 3px;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap;
  font: 600 11.5px/1 'Inter', sans-serif; color: var(--seg-ink); }
.aiq-seg > :hover:not(.on) { color: var(--seg-hover); }
.aiq-seg > .on, .aiq-seg > [aria-pressed="true"] { background: var(--seg-on-bg); color: var(--seg-on-ink); box-shadow: var(--seg-on-shadow); }
.aiq-seg > :focus-visible { outline: 2px solid rgba(69,93,220,.55); outline-offset: 1px; }

.aiq-utabs { display: flex; gap: 22px; border-bottom: 1px solid var(--utab-rule); overflow-x: auto; scrollbar-width: none; }
.aiq-utabs > a, .aiq-utabs > button { all: unset; box-sizing: border-box; cursor: pointer; white-space: nowrap;
  padding: 10px 0 9px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font: 500 13.5px/1.2 'Inter', sans-serif; color: var(--utab-ink); }
.aiq-utabs > :hover:not(.on) { color: var(--utab-hover); }
.aiq-utabs > .on, .aiq-utabs > [aria-selected="true"] { color: var(--utab-on); font-weight: 600; border-bottom-color: var(--utab-line); }

/* ==== css/aiq-stats.css ==== */
/* Compact stat strip — replaces the big "KPI card" grids (user, 2026-10-13: cards that take a lot of
   space for one number look unprofessional; compact reads as a pro tool).

   One bordered panel, cells split by hairlines, label over value, sub-note beside the value.
   Cells wrap on narrow widths; the hairlines stay clean because each cell draws its own right/bottom
   rule and the panel hides the outer ones.

   Use:
     <div class="aiq-stats">
       <div class="aiq-stat"><div class="aiq-stat-l">Total debt</div>
         <div class="aiq-stat-v">$91.3B<span class="aiq-stat-s">2% of market cap</span></div></div>
       …
     </div>
   .aiq-stats-stack puts the sub-note on its own line under the value (long notes, narrow strips).
   Colours: .tb-pos / .tb-neg on the value (or a span inside it). Width per cell: --stat-min (default 140px).
   Spec: docs/features/tables.md "Stat strips". */

.aiq-stats {
  --stat-min: 140px;
  border: 1px solid var(--tb-rule);
  border-radius: 4px;
  background: var(--tb-bg);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--stat-min), 100%), 1fr));
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}
.aiq-stat {
  min-width: 0;
  padding: 7px 14px 8px;
  border-right: 1px solid var(--tb-row);
  border-bottom: 1px solid var(--tb-row);
  margin: 0 -1px -1px 0;   /* hide the rules on the panel's outer edge */
}
.aiq-stat-l {
  font-size: 11.5px;
  line-height: 15px;
  font-weight: 500;
  color: var(--tb-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiq-stat-v {
  margin-top: 2px;
  font-size: 14px;
  line-height: 19px;
  font-weight: 600;
  color: var(--tb-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiq-stat-s {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--tb-faint);
}
.aiq-stat-v.tb-pos, .aiq-stat-v .tb-pos { color: var(--tb-pos); }
.aiq-stat-v.tb-neg, .aiq-stat-v .tb-neg { color: var(--tb-neg); }
.aiq-stats-stack .aiq-stat-s { display: block; margin: 1px 0 0; line-height: 14px; overflow: hidden; text-overflow: ellipsis; }
/* Skeleton: same height as a filled strip, so nothing jumps when data lands. */
.aiq-stats-skel { height: 50px; border-radius: 4px; }
.aiq-stats-skel.aiq-stats-stack { height: 64px; }
.aiq-stats:empty { display: none; }

/* Key facts list — the one-column card form of the same numbers (user, 2026-10-13: "better in a card
   that just takes up one column" than a row across the page). Put it in a side column next to the
   content it summarises; the page supplies the card and its title.
     <div class="aiq-kv">
       <div class="aiq-kv-r"><span class="aiq-kv-l">Total debt</span>
         <span class="aiq-kv-v">$91.3B<small class="aiq-kv-s">2% of market cap</small></span></div>
     </div> */
.aiq-kv { font-family: Inter, system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; }
.aiq-kv-r {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--tb-row);
}
.aiq-kv-r:last-child { border-bottom: 0; }
.aiq-kv-l { font-size: 12.5px; color: var(--tb-sub); min-width: 0; }
.aiq-kv-v { font-size: 13.5px; font-weight: 600; color: var(--tb-ink); text-align: right; white-space: nowrap; }
.aiq-kv-s { display: block; font-size: 11px; font-weight: 400; color: var(--tb-faint); margin-top: 1px; }
.aiq-kv-v.tb-pos, .aiq-kv-v .tb-pos { color: var(--tb-pos); }
.aiq-kv-v.tb-neg, .aiq-kv-v .tb-neg { color: var(--tb-neg); }

/* ==== css/aiq-pop.css ==== */
/* House pop-ups — "Quiet" (user, 2026-10-15; drafts in static/proto/popup-styles.html). Spec: docs/features/popups.md.

   One look for every dialog, popover and menu: no rules inside, whitespace separates title / body / buttons,
   ghost × to close, buttons on the right (Cancel, then primary), destructive text button far left, light dim
   behind dialogs (no blur), fade + 6px rise. No drawers: anything that used to slide in from a side is a
   centred dialog. Pages restyle nothing here; they set a size (.sm/.lg/.xl) and lay out their own body.

   Markup:
     dialog   <div class="aiq-dlg [sm|lg|xl]" role="dialog" aria-modal="true" hidden>
                <header class="aiq-dlg-h"><h2 class="aiq-dlg-t">Title <span class="ctx">· context</span></h2>
                  <button class="aiq-x" aria-label="Close"><i class="ph-bold ph-x"></i></button></header>
                <div class="aiq-dlg-b">…</div>
                <footer class="aiq-dlg-f"><button class="aiq-btn txt">Clear</button><span class="sp"></span>
                  <button class="aiq-btn">Cancel</button><button class="aiq-btn pri">Save</button></footer></div>
              opened with aiqDialog.open(el) (scrim, Esc, focus) — static/js/aiq-pop.js
     popover  <div class="aiq-pop"><div class="aiq-pop-h">Title</div><div class="aiq-pop-b">…</div><div class="aiq-pop-f">…</div></div>
              (no ×: outside click / Esc closes it; the page positions it)
     menu     <div class="aiq-menu"><button class="aiq-mi"><i class="ph ph-pencil-simple"></i>Rename</button>
                <div class="aiq-menu-hr"></div><button class="aiq-mi red">Delete…</button></div>
     confirm  aiqConfirm({title, message, ok: 'Delete', danger: true}) → Promise<boolean>; hx-confirm uses it too. */

:root {
  --pop-bg: #292929;
  --pop-ink: rgba(255,255,255,0.95);
  --pop-sub: rgba(203,213,225,0.72);
  --pop-faint: rgba(148,163,184,0.62);
  --pop-line: rgba(255,255,255,0.08);
  --pop-line2: rgba(255,255,255,0.14);
  --pop-hover: rgba(255,255,255,0.05);
  --pop-input: #1F1F1F;
  --pop-blue: #455DDC;
  --pop-blue-h: #3a50c4;
  --pop-blue-ink: #9AA9F5;
  --pop-red: #F73463;
  --pop-scrim: rgba(0,0,0,0.5);
  --pop-shadow: 0 12px 32px rgba(0,0,0,0.5);
  /* One z-index scale for everything that floats (app chrome tops out at 210; the sidebar is 200). */
  --z-pop: 1000;      /* popovers, menus, hover cards */
  --z-scrim: 1090;    /* dim behind a dialog */
  --z-dlg: 1100;      /* dialogs */
  --z-dlg-top: 1200;  /* a confirm opened from inside a dialog */
}
html[data-theme="light"] {
  --pop-bg: #ffffff;
  --pop-ink: #0f172a;
  --pop-sub: #64748b;
  --pop-faint: #94a3b8;
  --pop-line: rgba(15,23,42,0.08);
  --pop-line2: rgba(15,23,42,0.14);
  --pop-hover: rgba(15,23,42,0.04);
  --pop-input: #ffffff;
  --pop-blue-ink: #3347C8;
  --pop-red: #c8203f;
  --pop-scrim: rgba(15,17,21,0.45);   /* the whole window visibly dims, not just a halo round the card (user, 2026-10-26) */
  --pop-shadow: 0 12px 32px rgba(15,23,42,0.14);
}

@keyframes aiqPopRise { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes aiqPopFade { from { opacity: 0; } to { opacity: 1; } }

/* ── scrim ── */
.aiq-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--pop-scrim); animation: aiqPopFade .16s ease-out; }
.aiq-scrim.top { z-index: calc(var(--z-dlg-top) - 1); }
/* a pop-up open inside a workspace tab: the shell dims round the frame (aiq-tabs.js), so its own buttons floating over
   the frame would stay bright — hide them while it's open */
html.aiq-tab-dim #aiq-ms-fab { visibility: hidden; }

/* ── dialog ── */
.aiq-dlg { position: fixed; z-index: var(--z-dlg); left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(var(--dlg-w, 500px), calc(100vw - 32px)); max-height: calc(100vh - 64px);
  display: flex; flex-direction: column; background: var(--pop-bg); color: var(--pop-ink);
  border: 1px solid var(--pop-line); border-radius: 4px; box-shadow: var(--pop-shadow);
  font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.45; text-align: left;
  animation: aiqPopRise .16s ease-out; }
.aiq-dlg.sm { --dlg-w: 380px; }
.aiq-dlg.lg { --dlg-w: 760px; }
.aiq-dlg.xl { --dlg-w: 1100px; }
.aiq-dlg.tall { height: calc(100vh - 96px); }
.aiq-dlg.top { z-index: var(--z-dlg-top); }
.aiq-dlg[hidden], .aiq-scrim[hidden], .aiq-pop[hidden], .aiq-menu[hidden] { display: none !important; }

.aiq-dlg-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px; flex: none; min-width: 0; }
.aiq-dlg-t { margin: 0; font-size: 15px; font-weight: 600; color: var(--pop-ink); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aiq-dlg-t .ctx { color: var(--pop-sub); font-weight: 500; }
/* A pop-up that takes a name has the name field in its header, beside the title (user, 2026-10-31):
   <label class="aiq-dlg-nm"><i class="ph-bold ph-pencil-simple"></i><input …></label> after .aiq-dlg-t. */
.aiq-dlg-h:has(.aiq-dlg-nm) .aiq-dlg-t { flex: none; max-width: 45%; }
.aiq-pop-h:has(.aiq-dlg-nm) { display: flex; align-items: center; gap: 10px; }
.aiq-pop-h:has(.aiq-dlg-nm) > span { flex: none; }
html :is(.aiq-dlg-h, .aiq-pop-h) .aiq-dlg-nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 4px; margin: 0;
  color: var(--pop-sub); box-shadow: inset 0 0 0 1px var(--pop-line); cursor: text; }
html :is(.aiq-dlg-h, .aiq-pop-h) .aiq-dlg-nm:focus-within { box-shadow: inset 0 0 0 1.5px #455DDC; color: var(--pop-ink); }
.aiq-dlg-nm > i { flex: none; font-size: 14px; }
html .aiq-dlg-nm > input:not(#_) { all: unset; flex: 1; min-width: 0; height: 30px; font: 500 14px/30px Inter, system-ui, sans-serif;
  color: var(--pop-ink) !important; background: transparent !important; caret-color: var(--pop-ink); box-shadow: none !important; border: 0 !important; padding: 0 !important; }
html .aiq-dlg-nm > input:not(#_)::placeholder { color: var(--pop-sub); opacity: 1; }
.aiq-dlg-nm + .aiq-x { margin-left: 0; }
.aiq-dlg:not(.is-cfg) .sc-cfg-nm { display: none !important; }   /* New screen: the name shows on the Start blank step only */
.aiq-dlg-b { padding: 6px 18px 14px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.aiq-dlg-f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 6px 18px 16px; flex: none; flex-wrap: wrap; }
.aiq-dlg-f .sp { flex: 1; }
.aiq-dlg-msg { margin: 0; color: var(--pop-sub); }

/* close: ghost × */
.aiq-x { margin-left: auto; margin-right: -6px; flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: 4px; background: transparent; color: var(--pop-sub); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
.aiq-x:hover { background: var(--pop-hover); color: var(--pop-ink); }
.aiq-x i { font-size: 15px; }

/* buttons */
.aiq-btn { height: 30px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--pop-line2); background: transparent;
  color: var(--pop-ink); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.aiq-btn:hover { background: var(--pop-hover); }
.aiq-btn.pri { background: var(--pop-blue); border-color: var(--pop-blue); color: #fff; }
.aiq-btn.pri:hover { background: var(--pop-blue-h); border-color: var(--pop-blue-h); }
.aiq-btn.danger { background: var(--pop-red); border-color: var(--pop-red); color: #fff; }
.aiq-btn.danger:hover { filter: brightness(0.94); }
.aiq-btn.txt { border-color: transparent; color: var(--pop-sub); padding: 0 6px; }
.aiq-btn.txt:hover { color: var(--pop-ink); background: transparent; }
.aiq-btn.txt.red { color: var(--pop-red); }
.aiq-btn:disabled { opacity: .5; cursor: default; }

/* inputs inside any pop-up */
.aiq-dlg .aiq-in, .aiq-pop .aiq-in { height: 30px; width: 100%; border: 1px solid var(--pop-line2); border-radius: 4px;
  background: var(--pop-input); color: var(--pop-ink); padding: 0 9px; font: inherit; font-size: 13px; }
.aiq-dlg .aiq-in:focus, .aiq-pop .aiq-in:focus { outline: none; border-color: var(--pop-blue); }
.aiq-fld { display: block; margin-bottom: 12px; }
.aiq-fld > span { display: block; font-size: 12px; font-weight: 550; color: var(--pop-sub); margin-bottom: 4px; }

/* ── popover (anchored, no scrim, no ×) ── */
.aiq-pop { position: fixed; z-index: var(--z-pop); background: var(--pop-bg); color: var(--pop-ink);
  border: 1px solid var(--pop-line); border-radius: 4px; box-shadow: var(--pop-shadow);
  font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.45; animation: aiqPopRise .14s ease-out; }
.aiq-pop-h { padding: 12px 14px 2px; font-size: 13px; font-weight: 600; color: var(--pop-ink); display: flex; align-items: center; gap: 8px; }
.aiq-pop-h .ctx { color: var(--pop-sub); font-weight: 500; }
.aiq-pop-b { padding: 4px 14px 8px; }
.aiq-pop-f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 14px 12px; }
.aiq-pop-f .sp { flex: 1; }

/* ── menu ── */
.aiq-menu { position: fixed; z-index: var(--z-pop); min-width: 190px; padding: 5px; background: var(--pop-bg); color: var(--pop-ink);
  border: 1px solid var(--pop-line); border-radius: 4px; box-shadow: var(--pop-shadow);
  font-family: 'Inter', sans-serif; font-size: 13px; animation: aiqPopRise .14s ease-out; }
.aiq-mi { display: flex; align-items: center; gap: 9px; width: 100%; height: 30px; padding: 0 10px; border: 0; border-radius: 3px;
  background: transparent; color: var(--pop-ink); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; text-decoration: none; }
.aiq-mi:hover, .aiq-mi.hv { background: var(--pop-hover); }
.aiq-mi > i, .aiq-mi > svg { font-size: 15px; width: 15px; color: var(--pop-sub); flex: none; }
.aiq-mi.on { color: var(--pop-blue-ink); font-weight: 600; }
.aiq-mi.red, .aiq-mi.red > i { color: var(--pop-red); }
.aiq-menu-hr { height: 1px; background: var(--pop-line); margin: 4px 0; }
.aiq-menu-lbl { padding: 6px 10px 3px; font-size: 11px; font-weight: 600; color: var(--pop-sub); }

@media (prefers-reduced-motion: reduce) {
  .aiq-dlg, .aiq-pop, .aiq-menu, .aiq-scrim { animation: none; }
}

/* base.html forces light-mode inputs to a #c0c0bc border with !important; inside pop-ups use the kit's border + blue focus. */
html[data-theme="light"] :is(.aiq-dlg, .aiq-pop, .aiq-menu) :is(input[type], select, textarea):not(.bg-transparent) { border-color: var(--pop-line2) !important; }
html[data-theme="light"] :is(.aiq-dlg, .aiq-pop, .aiq-menu) :is(input[type], select, textarea):not(.bg-transparent):focus { border-color: var(--pop-blue) !important; }

/* ==== css/aiq-search-attio.css ==== */
/* 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); }