/* ============================================================
   topnews.css — Top Earnings News (EW2027).
   Modern card list + squarified treemap heat map.
   Uses ew-theme.css tokens; two-trigger dark mode.
   ============================================================ */

.tn-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

/* ---------- Header ---------- */
.tn-head {
    text-align: left;
    margin-bottom: 1.25rem;
}

/* RSS feed link */
.tn-rss {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: .5rem;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 120ms ease, border-color 120ms ease;
}

    .tn-rss:hover,
    .tn-rss:focus-visible {
        color: #f26522; /* RSS orange on hover */
        border-color: #f26522;
    }

.tn-head-title {
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight: 800;
    color: var(--text);
    margin: 0 0 .25rem;
}

.tn-head-sub {
    font-size: .95rem;
    color: var(--text-muted);
    margin: 0;
}

/* ---------- Heat map (treemap) ---------- */
.tn-heat {
    position: relative;
    width: 100%;
    height: 220px;
    margin: 0 auto 2rem;
    border-radius: 12px;
    overflow: hidden;
    background: var(--chart-bg, #1c1c1c);
    border: 1px solid var(--border);
}

.tn-heat-svg {
    display: block;
}

.tn-heat-rect {
    stroke: var(--chart-bg, #1c1c1c);
    stroke-width: 1;
    transition: fill-opacity 120ms ease;
}

    .tn-heat-rect:hover {
        fill-opacity: .82;
    }

.tn-heat-label {
    fill: #f7f7f7;
    font-family: inherit;
    font-weight: 800;
    fill-opacity: .82;
    pointer-events: none;
    letter-spacing: .5px;
}

/* ---------- Card list ---------- */
.tn-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tn-loading {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 0;
    font-size: 1rem;
}

/* The card is an <article>, NOT an <a>.
 *
 * The summary is raw HTML that carries its OWN links ("earnings presentation"), and
 * ANCHORS CANNOT NEST — the browser repairs the invalid markup by force-closing the
 * outer <a> the moment it meets the inner one, so everything after the link fell
 * outside the card and ran full-width. Wrapping the card in an anchor was the bug.
 *
 * The HEADER is the link instead. That also makes the summary text SELECTABLE, which it
 * wasn't when the whole card was a drag-to-follow anchor. */
.tn-card {
    display: block;
    color: inherit;
    /* Harmless on the <article>; still needed IF a page hasn't been migrated off the
       anchor-wrapped card yet. Remove once every .tn-card is an <article>. */
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    background: var(--surface, transparent);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

    /* The card still lifts on hover — but it's driven by hovering the card, not by the
       card being a link. */
    .tn-card:hover {
        border-color: var(--ew-color);
        box-shadow: 0 6px 24px -14px color-mix(in srgb, var(--ew-color) 60%, transparent);
    }

/* The header IS the link. */
.tn-card-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .35rem;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    margin-left: -.35rem;
    padding: .35rem;
    transition: background 120ms ease;
}

a.tn-card-head:hover,
a.tn-card-head:focus-visible {
    background: var(--surface-alt, rgba(128, 128, 128, .08));
    outline: none;
}

    a.tn-card-head:hover .tn-subject,
    a.tn-card-head:focus-visible .tn-subject {
        color: var(--ew-color);
    }

.tn-logo {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--surface-alt, #f2f2f2);
    background-size: 34px;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid var(--border);
}

.tn-subject {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    margin: 0;
}

.tn-time {
    font-size: .78rem;
    color: var(--text-muted);
    margin: 0 0 .75rem 0;
}

.tn-body {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.tn-surp {
    flex: 0 0 auto;
    width: 84px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2px;
}

.tn-surp-svg {
    display: block;
}

.tn-surp-pct {
    font-family: inherit;
    font-weight: 700;
    font-size: 11px;
}

/* .tn-summary is a <div>, not a <p>.
 *
 * It holds MULTI-PARAGRAPH raw HTML — its own </p> would have closed a <p> wrapper
 * early, which was the second half of the bug. A div can't be closed that way.
 *
 * Because it's a div, it has no paragraph margins of its own — so the <p>s INSIDE it
 * need their edges trimmed, or the card gains dead space top and bottom. */
.tn-summary {
    flex: 1;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--text);
    margin: 0;
    min-width: 0; /* let long unbroken strings wrap rather than blow out the flex row */
}

    .tn-summary > p {
        margin: 0 0 .85rem;
    }

        .tn-summary > p:last-child {
            margin-bottom: 0;
        }

    /* The links the summary carries — the very things that broke the layout. Style them
       so they read as links rather than inheriting the card's text colour. */
    .tn-summary a {
        color: var(--ew-color);
        text-decoration: none;
    }

        .tn-summary a:hover,
        .tn-summary a:focus-visible {
            text-decoration: underline;
        }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    .tn-heat {
        height: 180px;
    }

    .tn-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .tn-surp {
        width: 100%;
    }
}

/* ---------- Home-page Top News promo ---------- */
.tn-home {
    margin: 2.5rem 0;
}

.tn-home-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.tn-home-title {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.tn-home-all {
    flex: 0 0 auto;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ew-color);
    text-decoration: none;
}

    .tn-home-all:hover {
        text-decoration: underline;
    }

.tn-home-sub {
    font-size: .95rem;
    color: var(--text-muted);
    margin: .2rem 0 1.1rem;
}