/* Blog classes needed by stock pages (extracted from report.css) */
.page-stock-page .blog-main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 100px 48px 32px;
}
.page-stock-page .blog-section {
    padding: 0;
    margin-bottom: var(--stock-section-gap);
    max-width: none;
}
.page-stock-page .blog-section:last-child {
    margin-bottom: 0;
}
.page-stock-page .blog-section > p {
    max-width: 760px;
    line-height: 1.65;
}
.page-stock-page .blog-faq {
    margin-top: 16px;
    display: grid;
    gap: 10px;
}
@media (max-width: 768px) {
    .page-stock-page .blog-main {
        padding: 80px 20px 24px;
    }
}

.page-stock-page,
.page-stocks-index {
    /* Single source of truth for the gap between top-level sections (desktop + mobile) */
    --stock-section-gap: 56px;
    --stocks-signal-buy-text: #136c3a;
    --stocks-signal-buy-bg: #ecfdf3;
    --stocks-signal-buy-border: #c6f3d9;
    --stocks-signal-hold-text: #72551b;
    --stocks-signal-hold-bg: #f4f1e8;
    --stocks-signal-hold-border: #e7dcc0;
    --stocks-signal-sell-text: #a32828;
    --stocks-signal-sell-bg: #fff2f2;
    --stocks-signal-sell-border: #ffd6d6;
}

.page-ticker-database,
.ticker-database-hero {
    --ticker-type-label: 14px;
    --ticker-type-meta: 13px;
    --ticker-type-small: 14px;
    --ticker-type-body: 16px;
    --ticker-type-lead: 18px;
    --ticker-type-emphasis: 20px;
    --ticker-type-section: 40px;
}

.page-ticker-database .section-label {
    font-size: var(--ticker-type-label);
}

.page-ticker-database .stocks-search-label,
.page-ticker-database .stock-table th {
    font-size: var(--ticker-type-meta);
}

.page-ticker-database .stocks-summary,
.page-ticker-database .blog-source-note,
.page-ticker-database .stocks-noscript {
    font-size: var(--ticker-type-small);
}

.page-ticker-database .blog-card-summary,
.page-ticker-database .blog-section > p,
.page-ticker-database .blog-method-card p,
.page-ticker-database .blog-faq-item p,
.page-ticker-database .stocks-section-intro,
.page-ticker-database .stock-table,
.page-ticker-database .stocks-filter,
.page-ticker-database .ticker-database-select,
.page-ticker-database .ticker-database-clear {
    font-size: var(--ticker-type-body);
}

.page-ticker-database .blog-method-card h3,
.page-ticker-database .blog-faq-item h3 {
    font-size: var(--ticker-type-emphasis);
}

.page-ticker-database .blog-section h2 {
    font-size: var(--ticker-type-section);
}

.ticker-database-hero .ticker-database-hero-copy > p {
    font-size: var(--ticker-type-lead);
}

.page-stocks-index .ticker-database-hero .ticker-database-hero-copy > p {
    font-size: 20px;
    line-height: 1.65;
}

/* The /stocks/ lead uses the homepage hero subline scale (.hn-sub in index.html). */
.ticker-database-hero .ticker-database-hero-copy > p.stocks-hero-lead {
    max-width: 700px;
    font-size: clamp(18px, 2vw, 20px);
    line-height: 1.5;
}

.ticker-database-hero .btn,
#ticker-database-app .btn {
    font-size: var(--ticker-type-body);
}

.page-ticker-database .blog-card h3,
.stocks-card-head h3,
.stock-analysis-card h3,
.blog-faq h3,
.stock-peer-explore-heading {
    font-size: var(--card-heading-font-size);
    font-weight: var(--card-heading-font-weight);
    line-height: var(--card-heading-line-height);
    letter-spacing: var(--card-heading-letter-spacing);
}

.page-stocks-index .stocks-hero {
    padding-bottom: 24px;
}

.page-stocks-index .blog-main--no-hero {
    padding-bottom: 56px;
}

/* This page is a lookup tool, so the search field has to be reachable without scrolling past a
   marketing hero. The blog-index rhythm spends 160px above a 74px nav and then stacks three
   paddings (hero, hero-inner, main) into the single gap before the toolbar; both are tightened
   here and nowhere else. */
/* --c-muted (#888) is too light for this page: almost everything here is a small label over a value,
   so the label carries real information rather than being decoration. Listed per consumer rather
   than remapping --c-muted for the subtree, which also caught `a:hover` and every shared component
   that happens to render inside <main>. */
.page-ticker-database .stocks-search-label,
.page-ticker-database .blog-source-note,
.page-ticker-database .ticker-database-quality-list dd small,
.page-stocks-index .stock-table th {
    color: var(--c-text-secondary);
}

/* Compounded onto .blog-hero-full to match the three classes of report.css's
   `.page-blog:not(.page-blog-article) .blog-hero-full`. Two classes lose to it on specificity no
   matter the load order, which silently left padding-top at 160px. */
.page-ticker-database .ticker-database-hero.blog-hero-full {
    padding-top: 100px;
    padding-bottom: 0;
}

/* The card starts level with the eyebrow, which reads as a second column of heading. Dropping it to
   the h1's height sets it behind the title instead of competing with it. */
@media (min-width: 761px) {
    .page-ticker-database .ticker-database-snapshot-card {
        margin-top: 48px;
    }
}

/* /stocks/ shares .ticker-database-hero and bumps the lead to 20px; this page carries both body
   classes, so it picked that up too. Put it back on its own 18px lead. */
.page-ticker-database .ticker-database-hero .ticker-database-hero-copy > p {
    font-size: var(--ticker-type-lead);
    line-height: 1.6;
}

.page-ticker-database .ticker-database-hero .blog-hero-inner {
    padding-bottom: 16px;
}

.page-ticker-database .blog-main--no-hero {
    padding-top: 16px;
}

.stock-directory-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: #d9d8d2;
}

.stock-logo-wrap {
    position: relative;
    flex-shrink: 0;
}

.stock-logo-wrap--fallback img {
    display: none;
}

.stock-logo-wrap--fallback::after {
    content: attr(data-fallback);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--c-muted);
    background: var(--c-bg-gradient);
}

.stock-logo-wrap:not(.stock-logo-wrap--lg).stock-logo-wrap--fallback::after {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 15px;
}

.stock-logo-wrap--lg.stock-logo-wrap--fallback::after {
    width: 88px;
    height: 88px;
    border-radius: 18px;
    font-size: 32px;
}

.stock-directory-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
}

.stock-directory-ticker {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 15px;
    color: var(--c-text);
}

.stock-directory-company {
    color: var(--c-text-secondary);
    font-size: 14px;
}

.stock-directory-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 13px;
    color: var(--c-muted);
}

/* Card layout from the current renderer. The rules above stay for the checked-in fallback stock
   pages that still carry the older title-row markup. */
.stock-logo-wrap--tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-white);
    overflow: hidden;
}

.stock-logo-wrap--tile .stock-directory-logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.stock-directory-card .stock-logo-wrap--tile.stock-logo-wrap--fallback::after {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.stock-directory-head .stocks-rec {
    flex-shrink: 0;
}

.stock-directory-head .stock-directory-ticker {
    display: block;
    font-size: 16px;
    line-height: 1.25;
}

.stock-directory-head .stock-directory-ticker + .stock-directory-company {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--c-muted);
}

.stock-directory-card .stock-directory-metrics.stock-directory-metrics--grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 16px;
    padding: 12px 0;
    border-top: 0;
    border-radius: var(--radius-md);
    background: var(--c-bg);
}

.stock-directory-metrics--grid span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.stock-directory-metrics--grid span + span {
    border-left: 1px solid var(--c-border);
}

.stock-directory-metrics--grid strong {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
}

.stocks-rec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
}

.stocks-rec--buy {
    background: var(--stocks-signal-buy-bg);
    border-color: var(--stocks-signal-buy-border);
}

.stocks-rec--hold {
    background: var(--stocks-signal-hold-bg);
    border-color: var(--stocks-signal-hold-border);
}

.stocks-rec--sell {
    background: var(--stocks-signal-sell-bg);
    border-color: var(--stocks-signal-sell-border);
}

.stocks-toolbar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px;
}

.stocks-search {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stocks-search-label {
    font-size: 13px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-muted);
}

.stocks-search input {
    width: 100%;
    border: 1px solid var(--c-border-medium);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--c-white);
    color: var(--c-text);
    font: inherit;
}

.stocks-search input:focus {
    outline: none;
    border-color: var(--c-text);
}

.stocks-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.stocks-filter {
    border: 1px solid var(--c-border-medium);
    border-radius: 999px;
    background: var(--c-white);
    color: var(--c-text-secondary);
    padding: 10px 14px;
    font: inherit;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.stocks-filter.is-active,
.stocks-filter:hover {
    background: var(--c-text);
    color: var(--c-white);
    border-color: var(--c-text);
}

.page-stocks-index .stocks-method-card .stocks-method-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.stocks-summary {
    color: var(--c-text-secondary);
    font-size: 14px;
}

.ticker-database-hero {
    position: relative;
    overflow: hidden;
}

.ticker-database-hero .blog-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 48px;
    align-items: start;
    position: relative;
    z-index: 2;
}

.ticker-database-hero-copy {
    max-width: 820px;
}

.ticker-database-snapshot-card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    background: rgba(255, 255, 255, 0.92);
}

/* The card is rendered at both placements and exactly one is shown. Desktop keeps it beside the
   title; on a phone it would sit between the hero and the search field, so it moves below the table
   where it reads as a footnote to the data rather than a gate in front of it. */
.ticker-database-snapshot-card--after-table {
    display: none;
}

.ticker-database-snapshot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.ticker-database-snapshot-eyebrow,
.ticker-database-snapshot-version {
    font-family: var(--font-mono);
    font-size: var(--ticker-type-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-secondary);
}

.ticker-database-snapshot-version {
    color: var(--c-text-secondary);
}

.ticker-database-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

.ticker-database-snapshot-grid div {
    padding: 14px;
    border: 1px solid var(--c-border-light);
    border-radius: var(--radius);
    background: var(--c-bg);
}

.ticker-database-snapshot-grid dt {
    margin-bottom: 6px;
    color: var(--c-text-secondary);
    font-size: var(--ticker-type-meta);
}

.ticker-database-snapshot-grid dd {
    margin: 0;
    color: var(--c-text);
    font-size: var(--ticker-type-emphasis);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Two selectors because the card has two homes and one competitor. In the hero it is matched by
   report.css's `.blog-hero-full .blog-hero-inner p` (20px), so this needs two classes to tie and win
   on load order; the after-table copy is outside that hero and needs the page-scoped selector.
   /stocks/ reuses the hero placement, which is what the second selector keeps covered. */
.page-ticker-database .ticker-database-snapshot-card p,
.ticker-database-hero .ticker-database-snapshot-card p {
    margin: 18px 0 0;
    color: var(--c-text-secondary);
    font-size: var(--ticker-type-small);
    line-height: 1.55;
}

.ticker-database-directory-section {
    scroll-margin-top: 92px;
}

/* No card: the heading and the controls are the page here, not a panel floating on it. The inputs
   carry their own borders, so the table below is the only frame left on this screen.
   Grid rather than the shared flex column, so the result count and "Clear filters" share a closing
   row under the controls instead of the button sitting apart from what it clears. */
.ticker-database-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "intro   intro"
        "search  search"
        "filters filters"
        "summary clear";
    /* The closing row is reserved at the button's height: it appears on the first keystroke, and a
       row that grows then would shove the whole results table down under the user's thumb. */
    grid-template-rows: auto auto auto minmax(44px, auto);
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

/* Search is the whole point of the page, so it gets its own row and enough weight to be the first
   thing the eye lands on. Sharing a four-column row with three optional dropdowns ranked it as one
   control among four. */
.ticker-database-search-row {
    grid-area: search;
}

.ticker-database-search-field {
    position: relative;
    display: block;
}

.ticker-database-search-icon {
    position: absolute;
    top: 50%;
    left: 20px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--c-text-secondary);
    pointer-events: none;
}

.ticker-database-search-field input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 56px;
    padding: 0 20px 0 52px;
    border: 1px solid var(--field-border-color);
    border-radius: 999px;
    background: var(--c-white);
    color: var(--c-text);
    font: inherit;
    font-size: 17px;
    transition: border-color 0.18s;
}

.ticker-database-search-field input::placeholder {
    color: var(--field-placeholder-color);
}

/* House form standard (.form-group input:focus): the darker border alone marks focus. A text input
   always matches :focus-visible, so any outline on top of the border reads as a second ring. */
.ticker-database-search-field input:focus {
    outline: none;
    border-color: var(--field-border-color-focus);
}

/* The icon precedes the input in the DOM so it reads first to assistive tech, which rules out a
   sibling selector here. */
.ticker-database-search-field:hover .ticker-database-search-icon,
.ticker-database-search-field:has(input:focus) .ticker-database-search-icon {
    color: var(--c-text);
}

/* One click into the deep pages for a visitor who has not thought of a symbol yet. */
.ticker-database-quick-picks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    font-size: var(--ticker-type-small);
}

.ticker-database-quick-picks-label {
    color: var(--c-text-secondary);
}

/* Chips are smaller and mono so they do not read as another asset-type filter, but they share the
   filter's surface (see .page-ticker-database .stocks-filter) so the two cannot drift apart. A solid
   dark fill stays reserved for "this filter is active", which is why hover only darkens the edge. */
.ticker-database-quick-picks a {
    padding: 5px 12px;
    color: var(--c-text);
    font-family: var(--font-mono);
    font-size: var(--ticker-type-meta);
    text-decoration: none;
}

.ticker-database-toolbar-intro {
    grid-area: intro;
    max-width: 780px;
}

.ticker-database-toolbar .stocks-summary {
    grid-area: summary;
    align-self: center;
    margin: 0;
}

.ticker-database-clear {
    grid-area: clear;
    justify-self: end;
}

.page-ticker-database .ticker-database-toolbar-intro h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.3;
}

.ticker-database-toolbar-intro .stocks-section-intro {
    margin: 8px 0 0;
    font-size: var(--ticker-type-body);
    line-height: 1.6;
}

/* Three refinements, not four peers: sized to content and left-aligned so the row stays visibly
   subordinate to the search field above it. */
.ticker-database-filter-grid {
    grid-area: filters;
    display: grid;
    grid-template-columns: max-content minmax(180px, 240px) minmax(180px, 240px);
    justify-content: start;
    gap: 14px 20px;
    align-items: end;
}

.stocks-filter-fieldset {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.page-ticker-database .ticker-database-select {
    min-height: 50px;
    padding: var(--field-padding-y) 40px var(--field-padding-y) var(--field-padding-x);
    border-color: var(--field-border-color);
    border-radius: var(--field-radius);
    background-color: var(--c-white);
    background-image: var(--select-arrow);
    background-position: right 16px center;
    line-height: normal;
    transition: border-color 0.2s, background-color 0.2s;
}

.page-ticker-database .ticker-database-select:hover {
    background-color: var(--c-white);
    border-color: var(--c-text);
}

.page-ticker-database .ticker-database-select:focus {
    border-color: var(--field-border-color-focus);
}

/* Shared surface for both chip shapes in this toolbar: the asset-type filters and the quick picks.
   The pills were painted in --c-bg, the page background, so an inactive one had no fill and read as
   a label rather than a control; white against the page is what says "you can click this". */
.page-ticker-database .stocks-filter,
.ticker-database-quick-picks a {
    border: 1px solid var(--c-border-medium);
    border-radius: 999px;
    background: var(--c-white);
    line-height: normal;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.page-ticker-database .stocks-filter:hover,
.ticker-database-quick-picks a:hover,
.ticker-database-quick-picks a:focus-visible {
    color: var(--c-text);
    border-color: var(--c-text);
}

.page-ticker-database .stocks-filter {
    min-height: 50px;
    padding: 11px 14px;
    color: var(--c-text-secondary);
}

.page-ticker-database .stocks-filter.is-active {
    background: var(--c-text);
    color: var(--c-white);
    border-color: var(--c-text);
}

.page-ticker-database .stocks-filter-group {
    gap: 8px;
}

.ticker-database-clear {
    min-height: 40px;
    border: 1px solid var(--c-border-medium);
    border-radius: 999px;
    padding: 9px 14px;
    background: var(--c-white);
    color: var(--c-text);
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.ticker-database-clear:hover {
    background: var(--c-bg);
    border-color: var(--c-text);
}

.ticker-database-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.stocks-search input:focus-visible,
.stocks-filter:focus-visible,
.ticker-database-select:focus-visible,
.ticker-database-clear:focus-visible,
.ticker-database-quick-picks a:focus-visible {
    outline: 2px solid var(--c-text);
    outline-offset: 3px;
}

.page-ticker-database .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#ticker-database-coverage .blog-card {
    transition: none;
}

#ticker-database-coverage .blog-card:hover {
    transform: none;
    box-shadow: none;
}

.ticker-database-data-list,
.ticker-database-quality-list {
    display: grid;
    gap: 0;
    margin: 18px 0 0;
    padding: 0;
}

.ticker-database-data-list {
    list-style: none;
}

.ticker-database-quality-list {
    color: var(--c-text-secondary);
}

.ticker-database-data-list li,
.ticker-database-quality-list div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    min-height: 42px;
    padding: 11px 0;
    border-bottom: 1px solid var(--c-border-light);
    font-size: var(--ticker-type-body);
    line-height: 1.45;
}

.ticker-database-data-list li:last-child,
.ticker-database-quality-list div:last-child {
    border-bottom: 0;
}

.ticker-database-data-label,
.ticker-database-quality-list dt {
    color: var(--c-text);
    font-weight: 600;
}

.ticker-database-data-value,
.ticker-database-quality-list dd {
    margin: 0;
    color: var(--c-text-secondary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ticker-database-quality-list dd {
    display: grid;
    gap: 2px;
}

.ticker-database-quality-list dd span {
    color: var(--c-text);
    font-weight: 700;
}

.ticker-database-quality-list dd small {
    color: var(--c-muted);
    font-size: var(--ticker-type-small);
    line-height: 1.3;
}

.page-ticker-database .blog-card h3 {
    margin-bottom: 6px;
}

.page-ticker-database .blog-card-summary {
    font-size: var(--ticker-type-body);
    line-height: 1.65;
}

.page-ticker-database .blog-method-card p,
.page-ticker-database .blog-faq-item p {
    line-height: 1.65;
}

.ticker-database-select {
    width: 100%;
    border: 1px solid var(--c-border-medium);
    border-radius: 10px;
    padding: 14px 42px 14px 16px;
    background-color: var(--c-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    color: var(--c-text);
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.ticker-database-select:focus {
    outline: none;
    border-color: var(--c-text);
}

.ticker-database-table-card {
    overflow: hidden;
    min-height: 520px;
}

.ticker-database-table-shell {
    overflow-x: auto;
}

.ticker-database-table {
    min-width: 960px;
}

.ticker-database-table .company {
    max-width: 280px;
    white-space: normal;
}

.ticker-database-table .ticker-database-exchange,
.ticker-database-table .ticker-database-country,
.ticker-database-table .ticker-database-sector,
.ticker-database-table .ticker-database-isin,
.ticker-database-table .ticker-database-mentions {
    color: var(--c-text-secondary);
}

/* `.stock-table .ticker` underlines every ticker cell for the sentiment overlay, which this table
   does not have. Now that a minority of rows genuinely links out, that decoration would make the
   other 60k rows look clickable too, so the cell drops it and the anchor carries it. The hub's
   weekly-list table has no overlay either. */
.ticker-database-table .ticker,
.stocks-top-table .ticker {
    cursor: default;
    text-decoration: none;
}

.ticker-database-table .ticker-database-stock-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--c-border);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.18s;
}

.ticker-database-table .ticker-database-stock-link:hover {
    text-decoration-color: transparent;
}

.ticker-database-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-text-secondary);
    font-size: var(--ticker-type-meta);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ticker-database-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
}

.ticker-database-actions .blog-source-note {
    margin-top: 0;
    max-width: 780px;
}

.stocks-section-intro {
    max-width: 860px;
    color: var(--c-text-secondary);
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 18px;
}

.stocks-noscript {
    margin-top: 16px;
    color: var(--c-text-secondary);
    font-size: 13px;
}

/* Hub hero search: the input lives in the hero so it is reachable without scrolling; the A-Z
   groups it filters start below the weekly lists. */
.stocks-hero-search {
    max-width: 560px;
    margin-top: 24px;
}

.stocks-hero-search .ticker-database-quick-picks {
    margin-top: 12px;
}

/* Room for the "/" shortcut hint at the right end of the field. */
.stocks-hero-search .ticker-database-search-field input {
    padding-right: 56px;
}

.stocks-search-kbd {
    position: absolute;
    top: 50%;
    right: 20px;
    min-width: 24px;
    padding: 1px 6px;
    border: 1px solid var(--c-border-medium);
    border-radius: 6px;
    background: var(--c-bg);
    color: var(--c-text-secondary);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    transform: translateY(-50%);
    pointer-events: none;
}

/* The hint only helps a keyboard user facing an empty field. */
.ticker-database-search-field input:focus ~ .stocks-search-kbd,
.ticker-database-search-field input:not(:placeholder-shown) ~ .stocks-search-kbd {
    display: none;
}

@media (hover: none) {
    .stocks-search-kbd {
        display: none;
    }
}

/* Inline matches under the hero search, so typing never needs a scroll to the A-Z list. The row
   parts (ticker, company, mentions, signal) share the directory row rules further down. */
.stocks-search-results {
    margin-top: 8px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-white);
}

.stocks-search-results a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 15px;
    color: var(--c-text);
    text-decoration: none;
    border-bottom: 1px solid var(--c-border);
}

/* Rounded ends instead of overflow: hidden on the panel, which would clip the focus ring. */
.stocks-search-results a:first-child {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.stocks-search-results a:last-child {
    border-bottom: 0;
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.stocks-search-results a:hover {
    background: var(--c-bg);
}

.stocks-search-results a.stocks-search-more {
    justify-content: center;
    font-size: 13px;
    color: var(--c-text-secondary);
}

/* Weekly lists: one table, three tabs (most mentioned, buy signals, sell signals). */
.stocks-top-wrap {
    max-width: 1180px;
    margin: 40px auto 0;
}

.stocks-top-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.stocks-top-head h2 {
    margin: 0;
}

.stocks-top-head a {
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.stocks-top-tabs {
    margin-bottom: 12px;
}

.stocks-top-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-white);
}

/* Extends the shared .stock-table; only the differences live here. */
.stocks-top-table th,
.stocks-top-table td {
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
}

.stocks-top-table caption {
    padding: 12px 14px;
    border-bottom: 1px solid var(--c-border);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    color: var(--c-text-secondary);
}

.stocks-top-table .rank {
    width: 44px;
    color: var(--c-text-secondary);
}

.stocks-top-table .ticker a {
    font-weight: 700;
    color: var(--c-text);
    text-decoration: none;
}

.stocks-top-table .ticker a:hover {
    text-decoration: underline;
}

.stocks-top-table td.stocks-top-company {
    color: var(--c-text-secondary);
}

/* max-width on an auto-layout td is ignored; the inner block gets the ellipsis instead. */
.stocks-top-company-name {
    display: block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header cells keep the shared label face; only the data cells switch to mono. */
.stocks-top-table .stocks-top-num,
.stocks-top-table td.mentions,
.stocks-top-table td.stocks-top-bullish,
.stocks-top-table td.stocks-top-sources {
    text-align: right;
}

.stocks-top-table td.stocks-top-bullish,
.stocks-top-table td.stocks-top-sources {
    font-family: var(--font-mono);
}

.stocks-top-table td.stocks-top-sources {
    color: var(--c-text-secondary);
}

.stocks-lean--bullish {
    color: var(--stocks-signal-buy-text);
}

.stocks-lean--bearish {
    color: var(--stocks-signal-sell-text);
}

/* Height of the fixed site nav, which the sticky letter bar docks under. */
.page-stocks-hub {
    --hub-sticky-top: 74px;
}

/* No single word left alone on the last line: balanced headings, orphan-free intro. */
.page-stocks-hub h1,
.page-stocks-hub h2 {
    text-wrap: balance;
}

.page-stocks-hub .stocks-section-intro {
    text-wrap: pretty;
}

/* Directory toolbar: the signal filter and the live count on one line. */
.stocks-hub-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

/* Signal filter as one segmented control: only the pressed segment is filled. */
.stocks-signal-filter {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--c-border-medium);
    border-radius: 999px;
    background: var(--c-white);
}

.stocks-signal-filter .stocks-filter {
    padding: 7px 14px;
    border: 0;
    background: transparent;
    color: var(--c-text);
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
}

.stocks-signal-filter .stocks-filter:hover {
    background: var(--c-bg);
    color: var(--c-text);
}

.stocks-signal-filter .stocks-filter.is-active {
    background: var(--c-text);
    color: var(--c-white);
}

.stocks-filter-count {
    margin-left: 4px;
    font-family: var(--font-mono);
    font-size: 13px;
}

.stocks-signal-filter .stocks-filter:not(.is-active) .stocks-filter-count {
    color: var(--c-text-secondary);
}

/* A-Z index: plain letters spread across the width, sticking under the fixed site nav while the
   list scrolls. Where the 27 letters do not fit, the bar scrolls sideways. */
.stocks-letter-nav {
    position: sticky;
    top: var(--hub-sticky-top);
    z-index: 5;
    display: flex;
    justify-content: space-between;
    gap: 2px;
    margin: 16px 0 8px;
    /* The 2px sides keep the focus ring of the first and last letter inside the scroll box. */
    padding: 8px 2px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg);
}

.stocks-letter-nav::-webkit-scrollbar {
    display: none;
}

.stocks-letter-nav a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border-radius: 999px;
    color: var(--c-text-secondary);
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.stocks-letter-nav a:hover {
    background: var(--c-white);
    color: var(--c-text);
}

.stocks-letter-nav a.is-current {
    background: var(--c-text);
    color: var(--c-white);
}

.stocks-letter-nav a.is-empty {
    opacity: 0.35;
    pointer-events: none;
}

/* Off-screen letter groups skip layout and paint until scrolled near. Their placeholder height
   follows the row count the renderer writes into --count (three 41px rows per line here), so the
   scrollbar and letter jumps do not shift as groups render. */
.stocks-letter-group {
    margin-top: 28px;
    /* Clears the fixed nav plus the sticky letter bar. */
    scroll-margin-top: calc(var(--hub-sticky-top) + 62px);
    content-visibility: auto;
    contain-intrinsic-size: auto calc(var(--count, 30) / 3 * 41px + 46px);
}

.stocks-letter-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 20px;
}

.stocks-letter-count {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--c-text-secondary);
}

@media (max-width: 1100px) {
    .stocks-letter-group {
        contain-intrinsic-size: auto calc(var(--count, 30) / 2 * 41px + 46px);
    }
}

/* Same breakpoint as the global .stock-table phone rules. */
@media (max-width: 768px) {
    .page-stocks-hub {
        --hub-sticky-top: 67px;
    }

    .stocks-letter-group {
        contain-intrinsic-size: auto calc(var(--count, 30) * 45px + 46px);
    }

    .stocks-top-table .stocks-top-company,
    .stocks-top-table .stocks-top-sources {
        display: none;
    }

    /* global.css hides the 7th .stock-table column on phones (the ranking pages' trend sparkline);
       here the 7th column is the signal, so it stays. */
    .stocks-top-table th:nth-child(7),
    .stocks-top-table td:nth-child(7) {
        display: table-cell;
    }

    .stocks-top-table th,
    .stocks-top-table td {
        padding: 10px 8px;
    }
}

@media (max-width: 480px) {
    .stocks-search-results .stock-directory-mentions {
        display: none;
    }

    /* Four equal segments across the full width. */
    .stocks-signal-filter {
        display: flex;
        width: 100%;
    }

    .stocks-signal-filter .stocks-filter {
        flex: 1;
        padding: 7px 4px;
    }

    /* Keeps the three list tabs on one line at 390px; narrower phones wrap. */
    .stocks-top-tabs {
        gap: 4px;
    }

    .stocks-top-tabs .stocks-filter {
        padding: 8px;
        font-size: 15px;
    }
}

.stocks-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.stocks-directory-grid--related {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Hub A-Z rows: hairlines between rows instead of a gap. */
.stocks-directory-grid--compact {
    column-gap: 32px;
    row-gap: 0;
    border-top: 1px solid var(--c-border);
}

.stock-retained-notice {
    max-width: 1180px;
    margin: 18px auto 0;
    padding: 12px 18px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-bg);
    color: var(--c-muted);
    font-size: 13px;
}

/* Static fallback pages generated before the notice moved into main still place it before the
   fixed nav. Clear the 67px nav without shifting the following main content. */
.page-stock-page > .stock-retained-notice {
    margin-top: 85px;
}

.page-stock-page > .stock-retained-notice ~ .blog-main {
    padding-top: 33px;
}

@media (max-width: 768px) {
    .page-stock-page > .stock-retained-notice ~ .blog-main {
        padding-top: 13px;
    }
}

.stock-directory-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 18px;
    text-decoration: none;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.stock-directory-card[hidden] {
    display: none;
}

.stock-directory-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.stock-directory-info {
    flex: 1;
    min-width: 0;
}

.stock-directory-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.stock-directory-card .stock-directory-company {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-directory-card .stock-directory-metrics {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--c-border);
}

/* Hub directory rows and hero search matches share one row layout: ticker, company, 7-day mentions
   and signal. Declared after the base .stock-directory-card rules, so the modifier class wins by
   order: no card padding, hover lift or shadow on a row. */
.stock-directory-card--row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text);
    transition: background 0.18s;
}

.stock-directory-card--row:hover {
    transform: none;
    box-shadow: none;
    background: var(--c-white);
}

.stock-directory-card--row .stock-directory-ticker,
.stocks-search-results .stock-directory-ticker {
    flex: 0 0 auto;
    min-width: 62px;
}

.stock-directory-card--row .stock-directory-company,
.stocks-search-results .stock-directory-company {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-text-secondary);
}

.stock-directory-card--row .stock-directory-company {
    font-size: 13px;
}

.stock-directory-mentions {
    position: relative;
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--c-text-secondary);
    white-space: nowrap;
}

/* Read out but not drawn ("NVDA NVIDIA 8,436 mentions Hold"); the directory intro names the
   number for sighted readers. Generated content keeps the unit out of 2,000+ rows of HTML. */
.stock-directory-card--row .stock-directory-mentions::after {
    content: " mentions";
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.stock-directory-card--row .stocks-rec,
.stocks-search-results .stocks-rec {
    flex: 0 0 auto;
    min-width: 56px;
    padding: 2px 8px;
}

/* Touch targets on phones. */
@media (max-width: 768px) {
    .stock-directory-card--row {
        min-height: 44px;
    }
}

.page-stock-main {
    padding-top: 100px;
    padding-bottom: 32px;
}

.stock-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-family: var(--font-mono);
    color: var(--c-muted);
    margin-bottom: 16px;
}

.stock-breadcrumb a {
    color: var(--c-muted);
    text-decoration: none;
    transition: color 0.18s;
}

.stock-breadcrumb a:hover {
    color: var(--c-text);
}

.stock-breadcrumb span:last-child {
    color: var(--c-text-secondary);
}

.stock-breadcrumb-sep {
    font-size: 13px;
    opacity: 0.5;
}

.page-stock-main .contact-section {
    margin: 0 auto;
    width: 100%;
    max-width: none;
}

.stock-page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.9fr);
    gap: 28px;
    margin-bottom: var(--stock-section-gap);
}

.stock-page-logo-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.stock-page-logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    border-radius: 18px;
}

.stock-page-hero h1 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.18em;
    font-size: clamp(36px, 5vw, 56px);
    margin-bottom: 6px;
}

.stock-page-symbol {
    font-family: var(--font-mono);
    letter-spacing: inherit;
}

.stock-page-title-text {
    font-family: var(--font-sans);
    font-size: 0.74em;
    font-weight: 600;
    letter-spacing: inherit;
    color: var(--c-text-secondary);
}

.stock-page-company {
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-text-secondary);
    letter-spacing: -0.01em;
    max-width: 680px;
    margin-bottom: 10px;
}

.stock-page-lead {
    font-size: 18px;
    line-height: 1.7;
    color: var(--c-text-secondary);
    max-width: 820px;
}

.stock-page-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.stock-hero-stat {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 16px;
    background: linear-gradient(180deg, rgba(248,247,244,0.75), rgba(255,255,255,0.98));
}

.stock-hero-stat-label {
    display: block;
    font-size: 13px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-muted);
    margin-bottom: 6px;
}

.stock-hero-stat-value {
    display: block;
    font-size: 16px;
    font-family: var(--font-mono);
    color: var(--c-text);
}

.stock-page-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
    gap: 20px;
    padding: 0;
    /* Now lives inside the Street vs Crowd section: space above, none below */
    margin-top: 20px;
    margin-bottom: 0;
}

.stocks-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.stock-tv-card,
.stock-source-card {
    overflow: hidden;
}

.stock-tv-shell .tradingview-widget-container,
.stock-tv-shell .tradingview-widget-container__widget {
    min-height: 420px;
}

.stock-custom-chart-shell {
    min-height: auto;
    /* The chart SVG is authored at 760px wide. When the chart card is the only child of
       the grid it spans the full row, which upscaled the SVG (~1.4x) and made it look
       zoomed on desktop. Cap it at its native width so it never upscales (still scales
       down responsively on narrow viewports) and centre it in the wide card. */
    max-width: 760px;
    margin-inline: auto;
}

/* Keep the chart's caption aligned with the capped, centred chart above it (and at a
   readable measure) rather than spanning the full card. Custom-chart cards only; the
   TradingView fallback caption stays full-width. */
.stock-custom-chart-shell + .stock-chart-text {
    max-width: 760px;
    margin-inline: auto;
}

.stock-custom-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.stock-custom-chart-line--buzz,
.stock-custom-chart-point--buzz {
    stroke: #0f766e;
    fill: #0f766e;
}

.stock-custom-chart-line--price,
.stock-custom-chart-point--price {
    stroke: #1d4ed8;
    fill: #1d4ed8;
}

.stock-custom-chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.stock-custom-chart-plot {
    fill: rgba(255, 255, 255, 0.88);
    stroke: rgba(28, 30, 31, 0.06);
}

.stock-custom-chart-grid-line {
    stroke: rgba(28, 30, 31, 0.06);
    stroke-width: 1;
}

.stock-custom-chart-grid-line--vertical {
    stroke-dasharray: 4 5;
}

.stock-custom-chart-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stock-custom-chart-line--buzz {
    filter: drop-shadow(0 1px 3px rgba(15, 118, 110, 0.25));
}

.stock-custom-chart-line--price {
    filter: drop-shadow(0 1px 3px rgba(29, 78, 216, 0.25));
}

.stock-custom-chart-dot {
    opacity: 0;
    transition: opacity 0.2s;
}

.stock-custom-chart:hover .stock-custom-chart-dot {
    opacity: 1;
}

.stock-custom-chart-dot--buzz {
    fill: #0f766e;
}

.stock-custom-chart-dot--price {
    fill: #1d4ed8;
}

.stock-custom-chart-point {
    stroke: #fff;
    stroke-width: 2.5;
}

.stock-custom-chart-point--buzz {
    animation: chart-pulse-buzz 2s ease-in-out infinite;
}

.stock-custom-chart-point--price {
    animation: chart-pulse-price 2s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes chart-pulse-buzz {
    0%, 100% { r: 4; filter: drop-shadow(0 0 0 rgba(15, 118, 110, 0)); }
    50% { r: 5.5; filter: drop-shadow(0 0 6px rgba(15, 118, 110, 0.4)); }
}

@keyframes chart-pulse-price {
    0%, 100% { r: 4; filter: drop-shadow(0 0 0 rgba(29, 78, 216, 0)); }
    50% { r: 5.5; filter: drop-shadow(0 0 6px rgba(29, 78, 216, 0.4)); }
}

.stock-custom-chart-axis-label,
.stock-custom-chart-axis-title {
    font-size: 13px;
    font-family: var(--font-mono);
    fill: var(--c-muted);
}

.stock-custom-chart-axis-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.stock-custom-chart-vol {
    fill: rgba(28, 30, 31, 0.07);
}

.stock-custom-chart-vol--active {
    fill: rgba(28, 30, 31, 0.16);
}

/* Daily sentiment lane: a stacked bullish / neutral / bearish bar per day below the
   baseline. Reuses the site sentiment palette; the grey volume bars above the baseline
   are a separate signal and stay grey. */
.stock-custom-chart-baseline {
    stroke: rgba(28, 30, 31, 0.16);
    stroke-width: 1;
}

.stock-custom-chart-sent--bull {
    fill: var(--c-green);
}

.stock-custom-chart-sent--bear {
    fill: var(--c-red);
}

.stock-custom-chart-sent--neutral {
    fill: #d9d4ca;
}

.stock-custom-chart-sent--none {
    fill: rgba(28, 30, 31, 0.16);
}

.stock-custom-chart-sent--active {
    stroke: var(--c-text);
    stroke-width: 1.4;
}

.stock-custom-chart-crosshair {
    stroke: rgba(28, 30, 31, 0.25);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    opacity: 0;
    pointer-events: none;
}

.stock-custom-chart-hover-dot {
    stroke: #fff;
    stroke-width: 2;
    opacity: 0;
    pointer-events: none;
}

.stock-custom-chart-hover-dot--buzz {
    fill: #0f766e;
}

.stock-custom-chart-hover-dot--price {
    fill: #1d4ed8;
}

.stock-custom-chart.is-hovering .stock-custom-chart-crosshair,
.stock-custom-chart.is-hovering .stock-custom-chart-hover-dot {
    opacity: 1;
}

.stock-custom-chart.is-hovering .stock-custom-chart-point {
    opacity: 0;
}

.stock-chart-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-family: var(--font-mono);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    display: none;
    z-index: 10;
    min-width: 140px;
    /* Never let the tooltip grow wider than the viewport on narrow mobile screens. */
    max-width: calc(100vw - 24px);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.stock-custom-chart.is-hovering .stock-chart-tooltip {
    display: block;
}

.stock-chart-tooltip-date {
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 6px;
    font-size: 13px;
}

.stock-chart-tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    color: var(--c-text-secondary);
}

.stock-chart-tooltip-row strong {
    color: var(--c-text);
    font-weight: 600;
}

.stock-chart-tooltip-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

.stock-chart-tooltip-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stock-chart-tooltip-row--buzz .stock-chart-tooltip-dot {
    background: #0f766e;
}

.stock-chart-tooltip-row--price .stock-chart-tooltip-dot {
    background: #1d4ed8;
}

.stock-chart-tooltip-row--vol .stock-chart-tooltip-dot {
    background: rgba(28, 30, 31, 0.3);
}

/* Sentiment breakdown row in the chart tooltip. */
.stock-chart-tooltip-sent {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--c-border);
}

.stock-chart-tooltip-sent .sx-distbar {
    margin-top: 5px;
}

.stock-chart-tooltip-bull { color: var(--c-green); font-weight: 600; }
.stock-chart-tooltip-bear { color: var(--c-red); font-weight: 600; }
.stock-chart-tooltip-neu { color: #7a7268; font-weight: 600; }

.stock-chart-tooltip-net {
    margin-top: 5px;
}

.stock-chart-tooltip-net--bull { color: var(--c-green); }
.stock-chart-tooltip-net--bear { color: var(--c-red); }
.stock-chart-tooltip-net--neutral { color: #7a7268; }

.stock-custom-chart-empty {
    min-height: 420px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-text-secondary);
}

.stock-chart-text {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--c-text-secondary);
}

.stock-score-breakdown {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.stock-score-breakdown-context,
.stock-score-breakdown-footnote {
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-text-secondary);
}

.stock-score-breakdown-list {
    display: grid;
    gap: 10px;
}

.stock-score-breakdown-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.stock-score-breakdown-row--total {
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px dashed var(--c-border);
}

.stock-score-breakdown-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
}

.stock-score-breakdown-value {
    font-size: 14px;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.stocks-rec--buy,
.stock-score-breakdown-value.positive {
    color: var(--stocks-signal-buy-text);
}

.stocks-rec--hold,
.stock-score-breakdown-value.neutral {
    color: var(--stocks-signal-hold-text);
}

.stocks-rec--sell,
.stock-score-breakdown-value.negative {
    color: var(--stocks-signal-sell-text);
}

.stock-score-breakdown-footnote {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--c-border);
}

.stock-source-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.stock-metric-card {
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--c-white);
}

.stock-metric-label {
    display: block;
    font-size: 13px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-muted);
    margin-bottom: 5px;
}

.stock-metric-value {
    display: block;
    font-size: 16px;
    font-family: var(--font-mono);
    color: var(--c-text);
}

.stock-metric-value.positive {
    color: var(--c-green);
}

.stock-metric-value.negative {
    color: var(--c-red);
}

.stock-metric-value.neutral,
.stock-metric-value.mixed {
    color: #8a6a1d;
}

.analysis-viz {
    margin-top: 12px;
}

.stock-analysis-card p {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--c-border);
}

.stock-promo-card {
    display: flex;
    flex-direction: column;
}
.stock-promo-card p {
    border-top: none;
    padding-top: 0;
    margin-top: 8px;
}
.stock-promo-icon {
    width: 96px;
    height: 96px;
    display: block;
    margin: 0 0 18px;
    padding: 24px;
    background: var(--field-bg);
    border-radius: var(--radius);
    color: var(--c-muted);
    fill: currentColor;
}

.stock-promo-icon path[fill="none"] {
    fill: none;
}
.stock-promo-card .btn {
    margin-top: 24px;
    align-self: flex-start;
}

.analysis-bar-row {
    display: grid;
    grid-template-columns: 68px 1fr 44px;
    align-items: center;
    gap: 8px;
    height: 28px;
}

.analysis-bar-row + .analysis-bar-row {
    margin-top: 4px;
}

.analysis-bar-label {
    font-size: 13px;
    font-family: var(--font-mono);
    color: var(--c-muted);
    text-align: right;
    white-space: nowrap;
}

.analysis-bar-track {
    height: 8px;
    background: var(--c-border);
    border-radius: 4px;
    overflow: hidden;
}

.analysis-bar-fill {
    height: 100%;
    border-radius: 4px;
}

.analysis-bar-fill--positive { background: #2e7d32; }
.analysis-bar-fill--negative { background: #c62828; }

.analysis-bar-value {
    font-size: 13px;
    font-family: var(--font-mono);
    text-align: right;
    color: var(--c-text-secondary);
    white-space: nowrap;
}

.stock-analysis-card h3 {
    margin-bottom: 6px;
}

.stock-analysis-card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--c-text-secondary);
}

.stock-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.stock-source-card--reddit {
    box-shadow: inset 0 3px 0 #ff6b35;
}

.stock-source-card--x {
    box-shadow: inset 0 3px 0 #111111;
}

.stock-source-card--news {
    box-shadow: inset 0 3px 0 #1565c0;
}

.stock-source-card--polymarket {
    box-shadow: inset 0 3px 0 #2e7d32;
}

.stock-source-link {
    font-size: 13px;
    color: var(--c-muted);
    text-decoration: none;
}

.stock-source-link:hover {
    color: var(--c-text);
}

.stock-source-subline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--c-muted);
}

.stock-source-text {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--c-border);
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-text-secondary);
}

.stock-source-card--empty p {
    color: var(--c-text-secondary);
    font-size: 15px;
}

.blog-faq h3 {
    margin-bottom: 8px;
}

.blog-faq p {
    color: var(--c-text-secondary);
    font-size: 15px;
    line-height: 1.65;
}

/* Peer comparison table */
.stock-peer-intro {
    font-size: 15px;
    line-height: 1.65;
    color: var(--c-text-secondary);
    margin-top: 8px;
    margin-bottom: 20px;
}

.stock-peer-table {
    margin-bottom: 28px;
}

.stock-peer-row {
    display: grid;
    grid-template-columns: 156px 1fr 64px 44px 60px;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-border);
    text-decoration: none;
    color: inherit;
    font-size: 14px;
}

.stock-peer-row:last-child {
    border-bottom: none;
}

.stock-peer-row--header {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-muted);
    font-family: var(--font-mono);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--c-border);
}

.stock-peer-row--current {
    background: rgba(0, 0, 0, 0.025);
}

a.stock-peer-row {
    transition: background 0.15s;
}

a.stock-peer-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

a.stock-peer-row:active {
    background: rgba(0, 0, 0, 0.05);
}

.stock-peer-cell-name {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}

.stock-peer-ticker {
    font-family: var(--font-mono);
    font-size: 15px;
}

.stock-peer-company {
    font-size: 13px;
    color: var(--c-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}

.stock-peer-cell-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stock-peer-bar {
    flex: 0 1 80%;
    height: 6px;
    background: var(--c-border);
    border-radius: 3px;
    overflow: hidden;
}

.stock-peer-bar-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
}

.stock-peer-bar-fill--negative { background: #c62828; }
.stock-peer-bar-fill--positive { background: #2e7d32; }
.stock-peer-bar-fill--neutral { background: #8c8c8c; }

.stock-peer-pct {
    font-family: var(--font-mono);
    font-size: 14px;
    min-width: 34px;
    text-align: right;
}

.stock-peer-cell-signal,
.stock-peer-cell-sources,
.stock-peer-cell-mentions {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 14px;
}

.stock-peer-cell-signal .stocks-rec {
    font-size: 13px;
    padding: 3px 7px;
}

#related-stocks-title {
    line-height: 1.2;
}

.stock-peer-explore-heading {
    margin-bottom: 14px;
}

@media (max-width: 1100px) {
    .stocks-directory-grid,
    .stocks-directory-grid--related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stock-page-hero,
    .stock-page-chart-grid {
        grid-template-columns: 1fr;
    }

    /* minmax(0, 1fr) so a nowrap source card can't inflate the column past the
       viewport at tablet widths; hero/chart-grid above don't need it (chart is
       width:100% responsive and the chart-grid column is fixed by a more
       specific :only-child rule). */
    .stock-source-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .stock-peer-row {
        grid-template-columns: 120px 1fr 50px 36px 44px;
        gap: 8px;
    }
}

@media (max-width: 760px) {
    .ticker-database-hero h1 {
        font-size: var(--h1-mobile-size);
    }

    .ticker-database-hero .ticker-database-hero-copy > p {
        font-size: 17px;
    }

    .page-stocks-index .ticker-database-hero .ticker-database-hero-copy > p {
        font-size: 17px;
    }

    .ticker-database-hero .ticker-database-hero-copy > p.stocks-hero-lead {
        line-height: 1.55;
    }

    .page-ticker-database .blog-section h2 {
        font-size: 24px;
    }

    .ticker-database-hero .blog-hero-inner,
    .ticker-database-filter-grid {
        grid-template-columns: 1fr;
    }

    .ticker-database-table-card {
        padding: 20px;
    }

    .page-ticker-database .ticker-database-snapshot-card--hero {
        display: none;
    }

    .page-ticker-database .ticker-database-snapshot-card--after-table {
        display: block;
        margin-top: 24px;
    }

    /* The boxed 2x2 stat grid is most of the snapshot card's height on a phone. Same four numbers,
       no boxes, on both pages that render it. */
    .page-ticker-database .ticker-database-snapshot-card {
        padding: 18px 20px;
    }

    .page-ticker-database .ticker-database-snapshot-header {
        margin-bottom: 14px;
    }

    .ticker-database-snapshot-grid {
        gap: 14px 18px;
    }

    .ticker-database-snapshot-grid div {
        padding: 0;
        border: 0;
        background: none;
    }

    .ticker-database-snapshot-grid dt {
        margin-bottom: 2px;
    }

    .page-ticker-database .ticker-database-snapshot-card p {
        margin-top: 14px;
    }

    .page-ticker-database .blog-grid {
        grid-template-columns: 1fr;
    }

    .ticker-database-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-ticker-database .stock-table th:nth-child(3),
    .page-ticker-database .stock-table td:nth-child(3) {
        display: table-cell;
    }

    .page-ticker-database .ticker-database-table th:nth-child(6),
    .page-ticker-database .ticker-database-table td:nth-child(6),
    .page-ticker-database .ticker-database-table th:nth-child(7),
    .page-ticker-database .ticker-database-table td:nth-child(7) {
        display: none;
    }

    .page-ticker-database .stock-table td:nth-child(5) {
        text-align: left;
    }

    .stocks-top-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .stocks-directory-grid,
    .stocks-directory-grid--related {
        /* minmax(0, 1fr), not 1fr: the auto minimum of 1fr is the column's
           min-content, which a nowrap company name inflates past the viewport.
           The 0 minimum lets the column shrink so the card stays on-screen and
           the name ellipsis-truncates. */
        grid-template-columns: minmax(0, 1fr);
    }

    .page-stocks-index .card--padded-sm {
        padding: 16px 18px;
    }

    .stock-directory-card .stock-directory-metrics {
        margin-top: 10px;
        padding-top: 10px;
    }

    .stock-peer-row {
        grid-template-columns: 110px 1fr 56px;
        gap: 6px;
        font-size: 13px;
    }

    .stock-peer-cell-sources,
    .stock-peer-cell-mentions {
        display: none;
    }

    .stock-peer-row--header .stock-peer-cell-sources,
    .stock-peer-row--header .stock-peer-cell-mentions {
        display: none;
    }

    .stock-page-hero-stats,
    .stock-source-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Stock page mobile overrides */
    .page-stock-main {
        padding-top: 80px;
    }

    .page-stock-main .card--padded {
        padding: 24px 20px;
    }

    .page-stock-main .card--padded-sm {
        padding: 20px 18px;
    }

    .stock-page-logo-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .stock-page-logo {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .stock-logo-wrap--lg.stock-logo-wrap--fallback::after {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        font-size: 20px;
    }

    .stock-page-hero h1 {
        font-size: 28px;
    }

    .stock-page-title-text {
        font-size: 0.7em;
    }

    .stock-page-company {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .stock-page-lead {
        font-size: 17px;
    }

    .stock-hero-stat {
        padding: 12px 14px;
    }

    .stock-metric-card {
        padding: 12px 14px;
    }

    .stock-analysis-card p {
        font-size: 14px;
    }

    .stock-breadcrumb {
        margin-bottom: 12px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .ticker-database-table {
        min-width: 640px;
    }
}

/* ===========================================================================
   Detail-page redesign: Street vs Crowd, signal breakdown, consolidated
   source cards, key facts, hero snapshot. Scoped to .page-stock-page.
   =========================================================================== */

/* Readable floor: no tiny body text on stock pages */
.page-stock-page .stock-source-text { font-size: 16px; }
.page-stock-page .stock-chart-text { font-size: 16px; line-height: 1.7; }
.page-stock-page .blog-faq p { font-size: 16px; }
.page-stock-page .stock-source-subline { font-size: 14px; }
.page-stock-page .stock-source-link { font-size: 13px; }
.page-stock-page .stock-metric-label { font-size: 13px; }
.page-stock-page .stock-hero-stat-label { font-size: 13px; }

/* Two lead paragraphs in the hero */
.page-stock-page .stock-page-lead + .stock-page-lead { margin-top: 16px; }

/* Section intros: hero-lead size, full width */
.page-stock-page .blog-section > .stock-peer-intro { font-size: 18px; line-height: 1.7; max-width: none; }

/* Hero snapshot: signal + key metrics as one element */
.sx-snapshot { display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 18px; background: linear-gradient(180deg, rgba(248,247,244,0.6), rgba(255,255,255,0.95)); }
.sx-snap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--c-border); }
.sx-snap-head .stocks-rec { font-size: 13px; padding: 8px 14px; }
.sx-snap-updated { font-family: var(--font-mono); font-size: 13px; color: var(--c-muted); }
.sx-snapshot .stock-page-hero-stats { gap: 12px; }
.sx-snapshot .stock-hero-stat { background: var(--c-white); }

/* Street vs Crowd scorecards */
.sx-scorecards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; align-items: stretch; }
.sx-scorecards--single { grid-template-columns: 1fr; }
.sx-scorecards + .sx-scorecards { margin-top: 20px; }
.sx-card { display: flex; flex-direction: column; }
.sx-card-note { font-size: 15px; line-height: 1.6; color: var(--c-text-secondary); margin-top: 14px; }
.sx-card .stock-source-subline { margin-top: auto; padding-top: 14px; }

/* Bullish-by-source bars */
.analysis-bar-fill--street { background: #1d4ed8; }
.sx-spread { text-align: right; font-family: var(--font-mono); line-height: 1.1; }
.sx-spread b { font-size: 24px; color: var(--c-text); }
.sx-spread span { display: block; font-size: 13px; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.sx-bar-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 13px; color: var(--c-text-secondary); }
.sx-bar-legend span { display: flex; align-items: center; gap: 6px; }
.sx-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.d-street { background: #1d4ed8; }
.d-crowd { background: #1a6b4a; }

.stock-page-chart-grid:has(> :only-child) { grid-template-columns: 1fr; }

/* Per-source sentiment distribution + top item */
.sx-dist-row { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--c-border); }
.sx-dist-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 7px; }
.sx-distbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.sx-distbar .p { background: var(--c-green); }
.sx-distbar .n { background: #d9d4ca; }
.sx-distbar .g { background: var(--c-red); }
.sx-chip { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 5px; }
.c-bull { background: #eaf7ee; color: #1c6b2a; }
.c-bear { background: #fdeceb; color: #a3201f; }
.c-neu { background: #f1eee8; color: #7a7268; }
.sx-topitem { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--c-border); }
.sx-topitem .ti-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--c-text); margin-bottom: 5px; }
.sx-topitem .ti-text { font-size: 16px; color: var(--c-text-secondary); line-height: 1.55; }
.sx-topitem .ti-eng { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--c-muted); }

/* Key facts table */
/* Native table display is kept deliberately: overriding it with grid/flex would
   strip the row-header semantics from the accessibility tree. border-collapse must
   stay separate, since border-radius does not apply to a collapsed table. */
.sx-facts { border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; background: var(--c-white); margin-top: 8px; }
table.sx-facts { width: 100%; border-collapse: separate; border-spacing: 0; }
.sx-facts tr + tr th, .sx-facts tr + tr td { border-top: 1px solid var(--c-border-light); }
.sx-facts th { padding: 12px 18px; font-size: 15px; font-weight: 400; text-align: left; color: var(--c-text-secondary); }
.sx-facts td { padding: 12px 18px; font-family: var(--font-mono); font-size: 15px; font-weight: 600; text-align: right; }

/* Compatibility for previously published D1 snapshots and rollback assets. The
   current static stock corpus no longer emits this markup. */
.sx-facts .kf { display: flex; justify-content: space-between; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--c-border-light); }
.sx-facts .kf dt { margin: 0; font-size: 15px; color: var(--c-text-secondary); }
.sx-facts .kf dd { margin: 0; font-family: var(--font-mono); font-size: 15px; font-weight: 600; text-align: right; }
dl.sx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }

/* Relocated product promos */
.sx-promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }

@media (max-width: 760px) {
    .sx-scorecards { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    dl.sx-facts { grid-template-columns: 1fr; }
    .sx-promo-grid { grid-template-columns: 1fr; }
}

/* Detail redesign follow-ups: hero quote, signal score in head, bar label width */
.sx-hero-quote { margin: 16px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid rgb(var(--c-logo-gold-rgb)); font-size: 18px; line-height: 1.6; color: var(--c-text); max-width: 820px; }
.sx-hero-quote cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--font-mono); font-size: 13px; color: var(--c-muted); }
.sx-signal-head { display: flex; align-items: center; gap: 12px; }
.sx-signal-score { font-family: var(--font-mono); font-size: 22px; font-weight: 600; line-height: 1; }
.sx-signal-score--up { color: var(--c-green); }
.sx-signal-score--down { color: var(--c-red); }
.sx-signal-score--flat { color: var(--c-muted); }
.sx-bars-card .analysis-bar-row { grid-template-columns: 96px 1fr 48px; }
/* Signal breakdown text matches the bars-card explanation size */
.page-stock-page .stock-score-breakdown-label,
.page-stock-page .stock-score-breakdown-context,
.page-stock-page .stock-score-breakdown-value { font-size: 16px; }

/* Hero quote tracks the lead size on mobile (placed last so it wins source order) */
@media (max-width: 760px) {
    .sx-hero-quote { font-size: 15px; }
}