/* Watchlist: the star on tables and detail pages, and the watchlist page. */
.watchlist-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-left: 4px; padding: 2px 4px; border: 0; border-radius: 4px; background: transparent; color: var(--color-text-secondary); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; vertical-align: middle; }
.watchlist-toggle::before { content: "☆"; }
.watchlist-toggle[aria-pressed="true"] { color: var(--color-accent); }
.watchlist-toggle[aria-pressed="true"]::before { content: "★"; }
.watchlist-toggle:hover { color: var(--color-accent); }
.watchlist-toggle:focus-visible, .watchlist-remove:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* On detail pages it sits beside Compartir, with the same frame. */
.watchlist-toggle.watchlist-toggle-labeled { margin: 0; padding: 10px 14px; min-height: 42px; box-sizing: border-box; border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-surface); color: var(--color-text); font-size: 13px; font-weight: 500; white-space: nowrap; }
.watchlist-toggle.watchlist-toggle-labeled::before { font-size: 16px; color: var(--color-text-secondary); }
.watchlist-toggle.watchlist-toggle-labeled[aria-pressed="true"]::before { color: var(--color-accent); }
.watchlist-toggle.watchlist-toggle-labeled:hover { border-color: var(--color-text-secondary); color: var(--color-text); }
.ticker-header-actions { display: flex; flex: none; align-items: flex-start; gap: 8px; }

.watchlist-add { position: relative; }
.watchlist-results { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; max-height: 360px; overflow-y: auto; margin: 4px 0 0; padding: 6px; list-style: none; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface); box-shadow: 0 8px 28px #0003; }
.watchlist-results li { display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; border-radius: 4px; }
.watchlist-results [role="option"] { cursor: pointer; }
.watchlist-results [role="option"]:hover, .watchlist-results [aria-selected="true"] { background: var(--color-surface-alt); }
.watchlist-results span, .watchlist-results-empty { color: var(--color-text-secondary); font-size: 13px; }
.watchlist-status:empty { display: none; }
.watchlist-status, .watchlist-shared { margin: 10px 0 0; color: var(--color-text-secondary); font-size: 14px; }
.watchlist-order-reset, .watchlist-shared button { color: var(--color-accent); }
.watchlist-order-reset { margin-left: 12px; }
.watchlist-shared button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.watchlist-home .equity-screener-controls { margin-bottom: 0; }
.watchlist-page .watchlist-home { margin-top: 0; padding-top: 0; border-top: 0; }
.watchlist-count { margin: 12px 0 0; color: var(--color-text-secondary); font-size: 13px; }
.watchlist-order { margin: 12px 0 8px; font-size: 13px; }
.watchlist-order .watchlist-order-reset { margin-left: 0; }
.watchlist-table .market-ticker-link { font-size: 16px; }
/* The screener's minimum widths are for its issuer and sector columns; here those positions are short values. */
.watchlist-table.equity-screener-table td:nth-child(n+2) { min-width: 0; max-width: none; }
.watchlist-table td.watchlist-compact { width: 1%; white-space: nowrap; text-align: left; }
/* Headers stay on one line so the sort arrow sits beside the label. */
.watchlist-table.equity-screener-table thead th:nth-child(n) { white-space: nowrap; }
.watchlist-remove { padding: 2px 8px; border: 1px solid var(--color-border); border-radius: 4px; background: transparent; color: var(--color-text-secondary); font: inherit; font-size: 16px; line-height: 1.2; cursor: pointer; }
.watchlist-remove:hover { border-color: var(--color-accent); color: var(--color-accent); }
.watchlist-empty { margin: 16px 0 0; padding: 24px; border: 1px dashed var(--color-border); border-radius: 7px; color: var(--color-text-secondary); }