/* Time-frame dropdown (js/aiq-tf-menu.js, user picked 2026-11-10), menu sizes measured from rallies.ai.
   Only acts under html.tfm-on (desktop layout; not /chart). */
html.tfm-on .tfm-src, html.tfm-on .tfm-inl > .tfm-opt, html.tfm-on .tfm-inl > .at-segpill { display: none !important; }
/* the stock page's Attio layer hides everything but its own pill inside .at-segp (4 × #_ there) */
html.tfm-on .tfm-inl > .at-segpill:not(#_):not(#_):not(#_):not(#_) { display: none !important; }
html.tfm-on .at-segp > .tfm-trig:not(#_):not(#_):not(#_):not(#_) {
  display: inline-flex !important; height: var(--tfm-h) !important; padding: 0 8px !important; margin: 0 !important; border: 0 !important;
  border-radius: 8px !important; background: var(--tfm-bg) !important; box-shadow: var(--tfm-btn) !important; color: var(--tfm-ink) !important;
  font: 500 var(--tfm-fs)/20px Inter, system-ui, sans-serif !important; opacity: 1 !important; }
html.tfm-on .at-segp > .tfm-trig:hover:not(#_):not(#_):not(#_):not(#_) { background: var(--tfm-bg-h) !important; }
/* the switch kept beside it (Overview's "S&P 500") takes the same button look; it stays grey text when off */
html.tfm-on .tfm-inl > .at-keep:not(#_):not(#_):not(#_):not(#_):not(#_) {
  --tfm-bg: var(--a-bg, #fff); --tfm-bg-h: var(--a-hover, #F7F7F8);
  --tfm-btn: var(--a-btn, inset 0 0 0 1px rgba(0, 0, 0, 0), 0 0 2px 0 rgba(28, 40, 64, .18), 0 1px 3px 0 rgba(0, 0, 0, .04));
  height: 26px !important; padding: 0 8px !important; margin-left: 8px !important; border: 0 !important; border-radius: 8px !important;
  background: var(--tfm-bg) !important; box-shadow: var(--tfm-btn) !important; font: 500 13px/20px Inter, system-ui, sans-serif !important; }
html.tfm-on .tfm-inl > .at-keep:hover:not(#_):not(#_):not(#_):not(#_):not(#_) { background: var(--tfm-bg-h) !important; }

/* the button: the shape of the page's own buttons (Lists / Notes / Alerts, S&P 500): white,
   8px corners, Attio's ring shadow, 500 weight; 26px / 13px inside cards like S&P 500 (user, 2026-11-10) */
.tfm-trig {
  --tfm-bg: var(--a-bg, #fff); --tfm-bg-h: var(--a-hover, #F7F7F8); --tfm-ink: var(--a-ink, #101112);
  --tfm-btn: var(--a-btn, inset 0 0 0 1px rgba(0, 0, 0, 0), 0 0 2px 0 rgba(28, 40, 64, .18), 0 1px 3px 0 rgba(0, 0, 0, .04));
  --tfm-h: 28px; --tfm-fs: 14px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: var(--tfm-h); padding: 0 8px; border: 0; border-radius: 8px;
  background: var(--tfm-bg); color: var(--tfm-ink); box-shadow: var(--tfm-btn);
  font: 500 var(--tfm-fs)/20px Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums;
  cursor: pointer; white-space: nowrap; flex: 0 0 auto; vertical-align: middle;
  outline: none;
}
:is(.card, .cg-card, .kd-card, .stx-card, .fx-card, .cmp-card, .cap-card, .stmt-seg-chartcard, .at-segp) .tfm-trig { --tfm-h: 26px; --tfm-fs: 13px; }
.tfm-trig:hover { background: var(--tfm-bg-h); }
.tfm-trig:active { transform: scale(.98); }
.tfm-trig:focus-visible { box-shadow: var(--tfm-btn), 0 0 0 2px #6B97FF; }
.tfm-trig .tfm-chev { stroke-width: 1.5; flex: 0 0 auto; }
.tfm-trig:hover .tfm-chev, .tfm-trig[aria-expanded="true"] .tfm-chev { stroke-width: 2; }
.tfm-trig:disabled { opacity: .5; pointer-events: none; }

.tfm-menu {
  --tfm-ink: #0A0A0A; --tfm-menu: #fff; --tfm-hover: rgba(0, 0, 0, .06); --tfm-sel: rgba(0, 0, 0, .08);
  --tfm-ring: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 1px -.5px rgba(0, 0, 0, .06), 0 3px 3px -1.5px rgba(0, 0, 0, .06);
  position: fixed; z-index: 10050; min-width: 112px;
  animation: tfm-in .15s ease-out;
}
.tfm-menu.is-down { transform-origin: top left; }
.tfm-menu.is-up { transform-origin: bottom left; }
@keyframes tfm-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
.tfm-in {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 4px;
  background: var(--tfm-menu); border-radius: 14px; box-shadow: var(--tfm-ring);
  user-select: none;
}
.tfm-hl {
  position: absolute; left: 4px; right: 4px; top: 0; height: 36px; border-radius: 10px;
  background: var(--tfm-hover); opacity: 0; pointer-events: none;
  transition: transform .15s ease, height .15s ease, opacity .1s;
}
.tfm-row {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 8px;
  height: 36px; box-sizing: border-box; padding: 8px; border-radius: 10px;
  color: var(--tfm-ink); font: 400 13px/20px Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums;
  cursor: pointer; outline: none;
}
.tfm-row.is-on { background: var(--tfm-sel); font-weight: 550; }
.tfm-rl { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.tfm-ck { flex: 0 0 auto; }

/* dark theme: same shapes on the app's dark card colours */
html[data-theme="dark"] .tfm-trig { --tfm-bg: var(--a-bg, #292929); --tfm-bg-h: var(--a-hover, #333333); --tfm-ink: var(--a-ink, #F2F2F2);
  --tfm-btn: var(--a-btn, inset 0 0 0 1px rgba(255, 255, 255, .1)); }
html[data-theme="dark"] .tfm-menu {
  --tfm-ink: #F2F2F2; --tfm-menu: #292929; --tfm-hover: rgba(255, 255, 255, .07); --tfm-sel: rgba(255, 255, 255, .1);
  --tfm-ring: 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 12px -2px rgba(0, 0, 0, .5);
}

/* ── Year-range buttons (stock page Charts tab "10Y ▾", Graphs / focus charts "5 years ▾"; built by
   aiq-attio-draft.js from drag sliders): the time-frame button's look, no clock icon (user, 2026-11-10) ── */
html.tfm-on :is(.at-rangepill, .at-segrange):not(#_):not(#_):not(#_):not(#_) {
  display: inline-flex !important; align-items: center; gap: 4px !important; height: 26px !important; padding: 0 8px !important;
  border: 0 !important; border-radius: 8px !important; background: var(--a-bg, #fff) !important; color: var(--a-ink, #101112) !important;
  box-shadow: var(--a-btn, inset 0 0 0 1px rgba(0, 0, 0, 0), 0 0 2px 0 rgba(28, 40, 64, .18), 0 1px 3px 0 rgba(0, 0, 0, .04)) !important;
  font: 500 13px/20px Inter, system-ui, sans-serif !important; font-variant-numeric: tabular-nums; }
html.tfm-on :is(.at-rangepill, .at-segrange):hover:not(#_):not(#_):not(#_):not(#_) { background: var(--a-hover, #F7F7F8) !important; }
html.tfm-on :is(.at-rangepill, .at-segrange) > i:not(.at-car):not(#_):not(#_) { display: none !important; }
html.tfm-on :is(.at-rangepill, .at-segrange) .at-car:not(#_):not(#_) { font-size: 12px !important; color: var(--a-ink, #101112) !important; }

/* ── Pick-one menus opened from the stock pages' pills (js pickMenu adds .tfm-pm): the time-frame menu's look ── */
html.tfm-on .aiq-menu.at-menu.tfm-pm:not(#_):not(#_):not(#_) {
  --tfm-ink: #0A0A0A; --tfm-hover: rgba(0, 0, 0, .06); --tfm-sel: rgba(0, 0, 0, .08);
  display: flex !important; flex-direction: column; gap: 2px; min-width: 112px; margin-top: 2px;
  padding: 4px !important; border: 0 !important; border-radius: 14px !important; background: #fff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 1px -.5px rgba(0, 0, 0, .06), 0 3px 3px -1.5px rgba(0, 0, 0, .06) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; user-select: none;
  transform-origin: top left; animation: tfm-in .15s ease-out; }
html.tfm-on .aiq-menu.at-menu.tfm-pm > .aiq-mi:not(#_):not(#_):not(#_) {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; width: 100%;
  height: 36px; min-height: 36px; box-sizing: border-box; padding: 8px !important; border-radius: 10px !important;
  background: transparent !important; color: var(--tfm-ink) !important;
  font: 400 13px/20px Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-align: left; white-space: nowrap; }
html.tfm-on .aiq-menu.at-menu.tfm-pm > .aiq-mi.on:not(#_):not(#_):not(#_) { background: var(--tfm-sel) !important; font-weight: 550 !important; }
html.tfm-on .aiq-menu.at-menu.tfm-pm > .aiq-mi::after { content: none !important; display: none !important; }
html.tfm-on .aiq-menu.at-menu.tfm-pm > .aiq-mi > i:not(#_):not(#_) { margin-right: 0 !important; color: var(--tfm-ink) !important; opacity: .55; font-size: 15px; }
html.tfm-on .aiq-menu.at-menu.tfm-pm > .aiq-mi > .tfm-ck { margin-left: auto; padding-left: 0; color: var(--tfm-ink); }
html.tfm-on .aiq-menu.at-menu.tfm-pm > .tfm-hl { left: 4px; right: 4px; background: var(--tfm-hover); }
html[data-theme="dark"].tfm-on .aiq-menu.at-menu.tfm-pm:not(#_):not(#_):not(#_) {
  --tfm-ink: #F2F2F2; --tfm-hover: rgba(255, 255, 255, .07); --tfm-sel: rgba(255, 255, 255, .1);
  background: #292929 !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 12px -2px rgba(0, 0, 0, .5) !important; }

/* ── Stock pages: Period and View settings sit in the same button as the time-frame / range pills
   (user, 2026-11-10: "the view settings and the period are also placed into pills") — white, 8px,
   Attio ring shadow, header size 28px / 14px. Replaces the plain-word look there (2026-10-30). ── */
html.at-nav-h :is(.lkl-fin, .at-ft) :is(.at-period, .at-vs-btn, #stmt-opt-btn, [data-vs-std], #ch-disp > button):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
  align-items: center; gap: 6px; height: 28px !important; padding: 0 8px !important;
  border: 0 !important; border-radius: 8px !important; background: var(--a-bg, #fff) !important; color: var(--a-ink, #101112) !important;
  box-shadow: var(--a-btn, inset 0 0 0 1px rgba(0, 0, 0, 0), 0 0 2px 0 rgba(28, 40, 64, .18), 0 1px 3px 0 rgba(0, 0, 0, .04)) !important;
  font: 500 14px/20px Inter, system-ui, sans-serif !important; }
html.at-nav-h :is(.lkl-fin, .at-ft) :is(.at-period, .at-vs-btn, #stmt-opt-btn, [data-vs-std], #ch-disp > button):hover:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { background: var(--a-hover, #F7F7F8) !important; }