/* Ticker autocomplete for the lab copy of the homepage: the look of /chart-test/autocomplete.html.
   Big sharp input and list. The small docked header search (scrolled page) keeps the live design. */

/* ---- Input (not docked) ---- */
body:not(.ticker-docked) #ticker-form { gap: 12px; }
body:not(.ticker-docked) .ticker-wrap { flex: 1 1 400px; width: 400px; max-width: 400px; }
body:not(.ticker-docked) #ticker { width: 100% !important; height: 50px; padding: 12px 56px 12px 52px; border: 2px solid #111; border-radius: 0; background: #fff; color: #111; font-size: 20px; font-weight: 700; transition: none; outline: none; }
body:not(.ticker-docked) #ticker:focus { outline: none; border-color: #111; }
body:not(.ticker-docked) #ticker::placeholder { font-weight: 400; text-transform: none; }
body:not(.ticker-docked) #explain-button { display: none; } /* Enter, the keyboard's search key, or picking a suggestion all start the search */
body:not(.ticker-docked) .ticker-search-icon { display: none; }
body.ticker-docked .ts-mag { display: none; }
.ts-mag { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 28px; text-align: center; font-size: 20px; line-height: 1; pointer-events: none; }


/* Clear (x): the live look (grey x, light pink rounded hover), but the old big click area (52px wide, full input height)
   and drawn with two bars so it is exactly centred. The site's own script shows and hides the button. */
body:not(.ticker-docked) .clear-ticker { top: 2px; bottom: 2px; right: 2px; width: 46px; height: auto; font-size: 0; line-height: 0; transform: none; border: 0; border-radius: 0; } /* 46px = the 50px box minus its 2px borders, so the pink hover fills a sharp square from top to bottom */
body:not(.ticker-docked) .clear-ticker::before, body:not(.ticker-docked) .clear-ticker::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 3px; margin: -1.5px 0 0 -9px; background: currentColor; transform: rotate(45deg); }
body:not(.ticker-docked) .clear-ticker::after { transform: rotate(-45deg); }

/* ---- List ---- */
#ts-list { display: none; position: absolute; top: 100%; left: 0; z-index: 60; box-sizing: border-box; width: max(100%, min(400px, calc(100vw - 40px))); max-height: 380px; margin: 0; padding: 0; overflow-y: auto; list-style: none; background: #fff; color: #111; border: 2px solid #111; border-top: 0; font-family: "IBM Plex Mono", monospace; font-size: 16px; text-transform: none; text-align: left; }
#ts-list.open { display: block; }
.ts-shadow { display: none; position: absolute; z-index: 59; pointer-events: none; } /* the square dots come from square-shadow.css */
.ts-shadow.bump-down { animation: ts-bump-down var(--ts-bump-ms, 100ms) ease-out; }
.ts-shadow.bump-up { animation: ts-bump-up var(--ts-bump-ms, 100ms) ease-out; }
#ts-list li { display: flex; gap: 12px; padding: 10px 12px; border-top: 1px solid #ddd; cursor: pointer; font-size: 16px; }
#ts-list li:first-of-type { border-top: 0; }
#ts-list li.on { background: transparent; }
#ts-list li { position: relative; z-index: 1; }
#ts-list .ts-bar { position: absolute; left: 0; right: 0; top: 0; height: 0; background: var(--ts-hl, #b3ffde); z-index: 0; pointer-events: none; transition: transform var(--ts-slide-ms, 0ms) ease-out, height var(--ts-slide-ms, 0ms) ease-out; }
#ts-list .ts-ptr { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; width: calc(10px + 2 * var(--ts-block-pad, 4px)); height: calc(10px + 2 * var(--ts-block-pad, 4px)); margin: calc(-5px - var(--ts-block-pad, 4px)) 0 0 calc(-1 * (var(--ts-arrow-gap, 17px) + var(--ts-block-pad, 4px))); background: var(--ts-block-bg, var(--ts-hl, #b3ffde)); }
#ts-list .ts-ptr::before { content: ''; position: absolute; left: var(--ts-block-pad, 4px); top: var(--ts-block-pad, 4px); width: 10px; height: 10px; background: #000; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#ts-list .ts-ptr.nudge::before { animation: ts-arrow-in var(--ts-arrow-ms, 90ms) ease-out; }
@keyframes ts-arrow-in { from { transform: translateX(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ts-bump-down { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(4px); } }
@keyframes ts-bump-up { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }
#ts-list.bump-down { animation: ts-bump-down var(--ts-bump-ms, 100ms) ease-out; }
#ts-list.bump-up { animation: ts-bump-up var(--ts-bump-ms, 100ms) ease-out; }
@media (prefers-reduced-motion: reduce) { #ts-list .ts-bar { transition: none; } #ts-list .ts-bar.nudge::before { animation: none; } #ts-list.bump-down, #ts-list.bump-up { animation: none; } }
#ts-list li.ts-asis .ts-flag, #ts-list li.ts-asis .ts-t { display: none; } /* the row has no flag or ticker, so its text starts at the left */
#ts-list li.ts-asis .ts-n { margin-left: 24px; }
#ts-list li.ts-asis .ts-n { color: #777; }
#ts-list li.ts-asis.on .ts-n { color: #111; font-weight: 400; }
body.dark #ts-list li.ts-asis .ts-n { color: #999; }
body.dark #ts-list li.ts-asis.on .ts-n { color: #fff; }
#ts-list .ts-flag { flex: none; width: 28px; text-align: center; font-size: 20px; line-height: 1; }
#ts-list .ts-t { flex: none; min-width: 76px; font-weight: 700; }
#ts-list .ts-t-priv { font-weight: 400; color: #999; }
body.dark #ts-list .ts-t-priv { color: #777; }
#ts-list .ts-t .dim { font-weight: 400; }
#ts-list .ts-t .dim strong { font-weight: 700; }
#ts-list .ts-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #444; }
#ts-list .ts-n.m { color: #999; }
#ts-list .ts-n.m strong { font-weight: 400; color: #111; }
#ts-list li.on .ts-n { font-weight: 700; color: #111; }
#ts-list li.on .ts-n.m strong { font-weight: 700; }
#ts-list .ts-x { display: none; flex: none; margin-left: auto; font-size: 14px; color: #888; align-self: center; }

#ts-list li.ts-hint { color: #444; padding-left: 52px; }

/* ---- Dark mode ---- */
body.dark:not(.ticker-docked) #ticker { background: #111; color: #eee; border-color: #eee; }
body.dark:not(.ticker-docked) #ticker:focus { border-color: #eee; }
body.dark #ts-list { background: #111; color: #eee; border-color: #eee; }
body.dark #ts-list li { border-color: #333; }
body.dark #ts-list li.on { background: transparent; }
body.dark #ts-list .ts-bar { background: var(--ts-hl-dark, #0000aa); }
body.dark #ts-list .ts-ptr { background: var(--ts-block-bg, var(--ts-hl-dark, #0000aa)); }
body.dark #ts-list .ts-ptr::before { background: #bbb; }
body.dark #ts-list .ts-n { color: #bbb; }
body.dark #ts-list .ts-n.m { color: #777; }
body.dark #ts-list .ts-n.m strong, body.dark #ts-list li.on .ts-n { color: #fff; }
body.dark #ts-list .ts-x { color: #999; }
body.dark #ts-list li.ts-hint { color: #bbb; }

/* ---- Phones: the smaller sizes (input 16px, suggestions 14px, exchange 12px) ---- */
@media (max-width: 639px) {
  body:not(.ticker-docked) #ticker { font-size: 16px; }
  #ts-list, #ts-list li { font-size: 14px; }
  #ts-list .ts-t { min-width: 64px; }
  #ts-list .ts-x { font-size: 12px; }
}

/* "Popular" label above the list a first-time visitor sees in the empty box */
#ts-list .ts-head { position: relative; padding: 5px 12px 4px 52px; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; text-align: left; color: #777; background: #f5f5f5; border-bottom: 1px solid #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* grey label strip; a long RELATED TO name ends in … only when it truly does not fit; RECENT starts where the tickers start (12 padding + 28 flag + 12 gap) */
body.dark #ts-list .ts-head { color: #999; background: #262626; border-color: #333; }
#ts-list .ts-clear-btn { position: absolute; top: 0; bottom: 0; right: 0; height: auto; min-height: 0; display: flex; align-items: center; padding: 0 20px; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #777; text-decoration: none; cursor: pointer; } /* flush right, full strip height */
#ts-list .ts-clear-btn::before { content: '\00D7'; font-size: 14px; line-height: 1; margin-right: 5px; letter-spacing: 0; } /* small x in front of CLEAR */
#ts-list .ts-clear-btn:hover { color: #111; background: #ffdcdc; } /* same pink as the X (.clear-ticker:hover in index.css) */
body.dark #ts-list .ts-clear-btn { color: #999; }
body.dark #ts-list .ts-clear-btn:hover { color: #111; background: #ffdcdc; }
#ts-list:has(.ts-head) { max-height: none; } /* all 9 rows show without scrolling */
#ts-list li.ts-wait { color: #777; align-items: center; text-transform: uppercase; } /* "Finding related companies…" while the cards load; spinner and text on one centre line */
#ts-list li.ts-wait .revenue-loading-spinner { margin-right: 0; vertical-align: 0; flex: none; } /* the row's 12px gap already spaces them */
body.dark #ts-list li.ts-wait { color: #999; }