/*
 * Top Picks v2 redesign — every rule here is scoped under .fd-tp
 * (the page's own wrapper, pages/top_picks.php), deliberately never
 * touching a bare/generic selector (table, .card, .tab, .chip, …) the
 * way a pasted mockup's own CSS would — the landing-page redesign
 * earlier established why: several of those bare class names are
 * ALSO real, live classes elsewhere in the app (see css/blocks/
 * landing.css's own docblock for the .fd-hero collision that made
 * this the rule). Only .fd-info-btn/.fd-note/.fd-tabs/.fd-tab-pane
 * are left unscoped — these are the new generic, reusable component
 * primitives (ui_info_popover()/ui_tabs()/ui_tab_pane() in
 * ui_viz.php), meant for any future page, not just this one; they use
 * new, previously-unused class names, so there is nothing on any
 * other page for them to collide with.
 */

/* -- info popover ("?" button + toggled note) ----------------------------- */
.fd-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--fd-bg-subtle); border: 1px solid var(--fd-border);
  color: var(--fd-text-dim); font-size: 11px; font-weight: 700;
  cursor: pointer; line-height: 1; vertical-align: middle; margin-left: 4px;
}
.fd-info-btn:hover { color: var(--fd-text); border-color: var(--fd-border-strong, var(--fd-border)); }
.fd-note {
  margin-top: 8px; padding: 10px 12px; border-radius: var(--fd-radius);
  background: var(--fd-bg-subtle); border: 1px solid var(--fd-border);
}

/* -- tab bar --------------------------------------------------------------- */
.fd-tabs {
  display: flex; gap: 4px; margin: 18px 0 16px; border-bottom: 1px solid var(--fd-border);
  overflow-x: auto;
}
.fd-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--fd-text-dim);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.fd-tab[aria-selected="true"] { color: var(--fd-text); border-bottom-color: var(--fd-accent); }
.fd-tab-pane { display: none; }
.fd-tab-pane[data-on="true"] { display: block; }

/* -- verdict banner --------------------------------------------------------- */
.fd-tp-verdict {
  border: 1px solid var(--fd-border); border-left: 4px solid var(--fd-border);
  background: var(--fd-bg-subtle); border-radius: var(--fd-radius);
  padding: 14px 16px; margin: 16px 0;
}
.fd-tp-verdict--bull { border-left-color: var(--fd-bull); }
.fd-tp-verdict--bear { border-left-color: var(--fd-bear); }
.fd-tp-verdict--neutral { border-left-color: var(--fd-warn, var(--fd-accent)); }
.fd-tp-verdict-headline { font-size: 15px; }

/* -- basket tab: filter chips ----------------------------------------------- */
.fd-tp .fd-tp-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* -- basket tab: expandable rows -------------------------------------------- */
.fd-tp .fd-tp-basket-table .fd-brk-why { display: none; }
.fd-tp .fd-tp-basket-table tr.is-open + tr.fd-brk-why { display: table-row; }
.fd-tp .fd-tp-basket-table tr.is-open .fd-brk-caret { transform: rotate(90deg); }
.fd-tp .fd-tp-basket-table .fd-brk-lbl {
  background: none; border: none; cursor: pointer; color: inherit; padding: 4px; font-size: 14px;
}
.fd-tp .fd-tp-detail-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 720px) {
  .fd-tp .fd-tp-detail-grid { grid-template-columns: repeat(2, 1fr); }
}

/* -- performance tab: ledger "show all" toggle ------------------------------ */
.fd-tp .fd-tp-ledger .fd-tp-more-row { display: none; }
.fd-tp .fd-tp-ledger[data-expanded="true"] .fd-tp-more-row { display: table-row; }
.fd-tp .fd-tp-ledger [data-tp-show-all] { margin-top: 10px; }