﻿/* ============================================================
   hedgefunds.css — /whales/{ticker}/hedge-funds. Prefix hf-.
   Loads after whales.css and reuses .wh-grid, .wh-table, .wh-act.
   ============================================================ */

/* breadth is the headline signal, so it gets the wide cell */
.hf-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.hf-lead {
    position: relative;
}

.hf-breadth {
    align-self: flex-start;
    margin-top: .35rem;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.hf-b-strongbuying,
.hf-b-buying {
    color: var(--positive, #0F8A3B);
}

.hf-b-strongselling,
.hf-b-selling {
    color: var(--negative, #c62828);
}

.hf-b-mixed {
    color: var(--text-muted);
}

.hf-activity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .1rem .6rem;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: .2rem;
}

    .hf-activity strong {
        font-size: 15px;
        font-variant-numeric: tabular-nums;
    }

/* ---- tables ---- */
.hf-table {
    font-size: 13px;
}

/* a high-significance move earns a rule, not a shout */
.hf-high th[scope="row"] {
    box-shadow: inset 3px 0 0 var(--ew-gold, #DDB785);
}

.hf-score {
    font-weight: 700;
}

.hf-tier {
    color: var(--text-muted);
    font-size: 11.5px;
    white-space: nowrap;
}

/* fund style tags; activist is the one that changes how a move reads */
.hf-style {
    margin-left: .35rem;
    padding: 0 .3rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--text-muted);
    white-space: nowrap;
}

    .hf-style.is-activist {
        border-color: var(--ew-gold, #DDB785);
        color: var(--ew-gold, #DDB785);
    }

/* ---- action pills ---- */
.hf-a-new {
    color: var(--positive, #0F8A3B);
    background: color-mix(in srgb, var(--positive, #0F8A3B) 14%, transparent);
}

.hf-a-increased {
    color: var(--positive, #0F8A3B);
}

.hf-a-reduced {
    color: var(--negative, #c62828);
}

.hf-a-soldout {
    color: var(--negative, #c62828);
    background: color-mix(in srgb, var(--negative, #c62828) 14%, transparent);
}

.hf-a-unchanged {
    color: var(--text-muted);
}

/* ---- buyers / sellers ---- */
.hf-sides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 2rem;
}

.hf-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

    .hf-list li {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: .45rem 0;
        border-bottom: 1px solid var(--border);
        font-size: 13px;
    }

.hf-name {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hf-meta {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 12px;
}

@media (max-width: 640px) {
    .hf-activity {
        grid-template-columns: 1fr;
    }
}


/* ---- 13F disclosure ----
   Muted but present, and directly under the intro rather than at the foot: the
   misreading it prevents ("SOLD OUT" as "sold yesterday") happens the moment the
   tables are read, not after. */
.hf-disclosure {
    margin: .6rem 0 0;
    padding-left: .75rem;
    border-left: 2px solid var(--border);
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 82ch;
}

.hf-side-sub {
    margin: -.5rem 0 .5rem;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* a label carrying a tooltip should look like it does */
.wh-lbl[title] {
    text-decoration: underline dotted 1px;
    text-underline-offset: 3px;
    cursor: help;
}

.wh-table th[title] {
    cursor: help;
}
