/* Charts › Builder / Compare: the Add metric picker in Attio's attribute-picker style (user, 2026-10-29: "a more …
   comprehensive pop-up in Attio style"; measured spec: .claude/skills/attio-style §9). Search-first popover, r 12,
   --at-pop shadow, categories on the left, 32px rows, full-width #EEEFF1 rules, a footer with the one blue button.
   Attio's own radii, so this file is excluded from scripts/square_corners.py. Markup: focusMetricPop() in
   static/js/financials-charts.js. */
.fp-mpick {
  --mp-bg: #FFFFFF; --mp-ink: #101112; --mp-sub: rgba(0,0,0,.63); --mp-faint: rgba(0,0,0,.50); --mp-rule: #EEEFF1;
  --mp-hover: #F6F7F7; --mp-blue: #266DF0; --mp-blue-ink: #266DF0; --mp-on: #F5F8FF; --mp-box: rgba(0,0,0,.16);
  width: 600px; max-width: calc(100vw - 16px); padding: 0 !important; display: flex; flex-direction: column;
  background: var(--mp-bg) !important; color: var(--mp-ink); border: 0 !important; border-radius: 12px !important;
  box-shadow: 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) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; -webkit-mask-image: none !important; mask-image: none !important;
  font: 500 14px/1.4 'Inter', sans-serif; overflow: hidden;
}
html[data-theme="dark"] .fp-mpick {
  --mp-bg: #1B1C1F; --mp-ink: #F1F2F3; --mp-sub: rgba(255,255,255,.60); --mp-faint: rgba(255,255,255,.45); --mp-rule: #2F3033;
  --mp-hover: rgba(255,255,255,.06); --mp-blue-ink: #4E8CFC; --mp-on: rgba(38,109,240,.12); --mp-box: rgba(255,255,255,.22);
  box-shadow: 0 0 0 1px #2F3033, 0 12px 32px -8px rgba(0,0,0,.6) !important;
}

/* search: no box, a full-width rule under it */
.fp-mpick .fp-mp-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-bottom: 1px solid var(--mp-rule); color: var(--mp-faint); flex: none; }
.fp-mpick .fp-mp-search input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; outline: none !important;
  box-shadow: none !important; padding: 0; color: var(--mp-ink); font: 500 14px 'Inter', sans-serif; }
.fp-mpick .fp-mp-search input::placeholder { color: var(--mp-faint); }

/* the two tabs (Graphs, 2026-11-04): the company's own metrics | Markets & economy. House tabs: muted words, the open
   one ink + a 2px bar; a search looks through both, so neither reads as open while typing */
.fp-mpick .fp-mp-scope { display: flex; gap: 18px; height: 38px; padding: 0 12px; border-bottom: 1px solid var(--mp-rule); flex: none; }
.fp-mpick .fp-mp-scope button { position: relative; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--mp-sub); font: 500 13px 'Inter', sans-serif; transition: none; }
.fp-mpick .fp-mp-scope button:hover { color: var(--mp-ink); }
.fp-mpick .fp-mp-scope button.on { color: var(--mp-ink); }
.fp-mpick .fp-mp-scope button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--mp-ink); }
.fp-mpick.is-q .fp-mp-scope button.on { color: var(--mp-sub); }
.fp-mpick.is-q .fp-mp-scope button.on::after { display: none; }
.fp-mpick .fp-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fp-mpick .fp-mp-body { display: grid; grid-template-columns: 184px minmax(0, 1fr); height: min(400px, 56vh); min-height: 0; }

/* categories */
.fp-mpick .fp-mp-cats { display: flex; flex-direction: column; gap: 1px; padding: 4px; border-right: 1px solid var(--mp-rule); overflow-y: auto; }
.fp-mpick .fp-mp-cats button { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--mp-ink); font: 500 13px 'Inter', sans-serif; text-align: left; cursor: pointer; transition: none; }
.fp-mpick .fp-mp-cats button[hidden] { display: none; }
.fp-mpick .fp-mp-cats button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-mpick .fp-mp-cats button em { font: 500 11px 'Inter', sans-serif; font-style: normal; color: var(--mp-sub); font-variant-numeric: tabular-nums; }
.fp-mpick .fp-mp-cats button:hover { background: var(--mp-hover); }
.fp-mpick .fp-mp-cats button.on { background: var(--mp-hover); color: var(--mp-blue-ink); }

/* metrics */
.fp-mpick .fp-mp-list { position: relative; max-height: none !important; min-height: 0; height: 100%; margin: 0 !important; padding: 4px 4px 12px !important;
  overflow-y: auto; -webkit-mask-image: none !important; mask-image: none !important; }
.fp-mpick .fp-cat + .fp-cat { border-top: 1px solid var(--mp-rule); margin-top: 4px; padding-top: 4px; }
.fp-mpick .fp-cat-title { position: static !important; padding: 8px 8px 4px !important; background: none !important; text-transform: none !important;
  letter-spacing: 0 !important; font: 500 12px 'Inter', sans-serif !important; color: var(--mp-sub) !important; }
.fp-mpick .fp-item { height: 32px !important; padding: 0 8px !important; gap: 10px !important; border-radius: 8px !important;
  color: var(--mp-ink) !important; font: 500 14px 'Inter', sans-serif !important; }
.fp-mpick .fp-item:hover { background: var(--mp-hover) !important; }
.fp-mpick .fp-item.is-active { background: var(--mp-on) !important; }
.fp-mpick .fp-item-check { width: 16px !important; height: 16px !important; border-radius: 5px !important; border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--mp-box); background: transparent; }
.fp-mpick .fp-item.is-active .fp-item-check { background: var(--mp-blue) !important; box-shadow: none; }
/* the tick: a drawn check centred in the box (user, 2026-10-29: "the check looks odd" — the rotated-border tick sat
   high and left) */
.fp-mpick .fp-item.is-active .fp-item-check { background: var(--mp-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important; }
.fp-mpick .fp-item.is-active .fp-item-check::after { display: none !important; }
.fp-mpick .fp-seg-note { padding: 0 8px 6px !important; font-size: 12px !important; color: var(--mp-sub) !important; }

/* footer: what's on the chart, then the one blue button */
.fp-mpick .fp-mp-foot { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 8px 0 12px; border-top: 1px solid var(--mp-rule); flex: none; }
.fp-mpick .fp-mp-n { font: 500 12px 'Inter', sans-serif; color: var(--mp-sub); }
.fp-mpick .fp-mp-done { height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--mp-blue); color: #fff; cursor: pointer;
  font: 500 14px 'Inter', sans-serif; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 4px -2px rgba(38,109,240,.12), 0 3px 6px -2px rgba(38,109,240,.08); }
.fp-mpick .fp-mp-done:hover { background: #1F5FD8; }

@media (max-width: 640px) { .fp-mpick .fp-mp-body { grid-template-columns: minmax(0, 1fr); } .fp-mpick .fp-mp-cats { display: none; } }

/* ── Add ticker pop-up (focusTickerPop): Attio search-first popover, same surface as .fp-mpick ── */
.fp-tpick {
  --mp-bg: #FFFFFF; --mp-ink: #101112; --mp-sub: rgba(0,0,0,.63); --mp-faint: rgba(0,0,0,.50); --mp-rule: #EEEFF1;
  --mp-hover: #F6F7F7; --mp-tile: #E5EEFF; --mp-tile-ink: #266DF0;
  width: 380px; max-width: calc(100vw - 16px); padding: 0 !important; display: flex; flex-direction: column;
  background: var(--mp-bg) !important; color: var(--mp-ink); border: 0 !important; border-radius: 12px !important;
  box-shadow: 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) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; -webkit-mask-image: none !important; mask-image: none !important;
  font: 500 14px/1.4 'Inter', sans-serif; overflow: hidden;
}
html[data-theme="dark"] .fp-tpick {
  --mp-bg: #1B1C1F; --mp-ink: #F1F2F3; --mp-sub: rgba(255,255,255,.60); --mp-faint: rgba(255,255,255,.45); --mp-rule: #2F3033;
  --mp-hover: rgba(255,255,255,.06); --mp-tile: #1D2E55; --mp-tile-ink: #8FB4FF;
  box-shadow: 0 0 0 1px #2F3033, 0 12px 32px -8px rgba(0,0,0,.6) !important;
}
.fp-tpick .fp-tp-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-bottom: 1px solid var(--mp-rule); color: var(--mp-faint); flex: none; }
.fp-tpick .fp-tp-search input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; outline: none !important;
  box-shadow: none !important; padding: 0; color: var(--mp-ink); font: 500 14px 'Inter', sans-serif; }
.fp-tpick .fp-tp-search input::placeholder { color: var(--mp-faint); }
.fp-tpick .fp-tp-list { max-height: min(340px, 52vh); overflow-y: auto; padding: 4px 4px 8px; -webkit-mask-image: none; mask-image: none; }
.fp-tpick .fp-tp-grp { padding: 8px 8px 4px; font: 500 12px 'Inter', sans-serif; color: var(--mp-sub); }
.fp-tpick .fp-tp-grp:not(:first-child) { border-top: 1px solid var(--mp-rule); margin: 4px -4px 0; padding: 8px 12px 4px; }
.fp-tpick .fp-tp-row { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--mp-ink); font: 500 14px 'Inter', sans-serif; text-align: left; cursor: pointer; transition: none; }
.fp-tpick .fp-tp-row.on { background: var(--mp-hover); }
.fp-tpick .fp-tp-logo { position: relative; flex: none; width: 20px; height: 20px; border-radius: 6px; overflow: hidden; background: var(--mp-tile); color: var(--mp-tile-ink);
  display: grid; place-items: center; font: 600 11px 'Inter', sans-serif; }
.fp-tpick .fp-tp-logo i { font-style: normal; }
.fp-tpick .fp-tp-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.fp-tpick .fp-tp-t { flex: none; min-width: 48px; }
.fp-tpick .fp-tp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mp-sub); font-size: 13px; }
.fp-tpick .fp-tp-ex { flex: none; padding: 0 5px; height: 18px; line-height: 18px; border-radius: 6px; background: rgba(0,0,0,.04); color: var(--mp-sub); font: 500 11px/18px 'Inter', sans-serif; }
html[data-theme="dark"] .fp-tpick .fp-tp-ex { background: rgba(255,255,255,.07); }
.fp-tpick .fp-tp-empty { padding: 20px 12px; text-align: center; color: var(--mp-faint); font-size: 13px; }
.fp-tpick .fp-tp-foot { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 12px; border-top: 1px solid var(--mp-rule); flex: none;
  font: 500 12px 'Inter', sans-serif; color: var(--mp-sub); }
.fp-tpick .fp-tp-foot kbd { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 3px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  font: 400 11px 'Inter', sans-serif; color: var(--mp-faint); }
html[data-theme="dark"] .fp-tpick .fp-tp-foot kbd { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.fp-tpick .fp-tp-n { font-variant-numeric: tabular-nums; }