/* calheat.css — "Sentiment of Upcoming Earnings" treemap on /calweek.
   The tiles are dark in both themes on purpose: the colour ramp runs from a near-black
   base out to green or red, so the map reads the same way whichever theme the page is
   in, and only the surrounding chrome flips. */

.ch-block {
    margin: 34px 0 8px;
}

.ch-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.ch-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.ch-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.ch-dl {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface, transparent);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
}

    .ch-dl:hover {
        border-color: var(--ew-gold, #ddb785);
        color: var(--ew-gold, #ddb785);
    }

/* ---------------- the map ---------------- */
.ch-host {
    position: relative; /* anchors the tooltip */
    width: 100%;
    margin-top: 10px;
}

.ch-svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    /* the map is a rendered composite; use the download button, not a right-click */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Ramp anchor. Every tile interpolates from this toward --chart-up / --chart-down,
   so a low-conviction name sits near-black and a strong one saturates. */
.ch-host {
    --ch-base: #262626;
}

.ch-bg {
    fill: #141414;
}

.ch-rect {
    stroke: #0a0a0a;
    stroke-width: 0.5;
}

.ch-logo {
    /* Full brand colour, knocked back — which is what EW2023 actually rendered. That
       version set filter="grayscale(100%)" as an SVG attribute, where the value does
       nothing, so the logos were never desaturated. Making that "work" as CSS would
       have quietly changed the look. For grey watermarks instead, add:
           filter: grayscale(1);
       LogoTint's dark pass leaves brand colours intact and only lifts the black and
       grayscale marks, so both readings stay legible on the tiles. */
    opacity: 0.2;
    pointer-events: none;
}

.ch-ticker {
    fill: #f7f7f7;
    fill-opacity: 0.88;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.ch-svg .ch-sub {
    fill: #f7f7f7;
    fill-opacity: 0.6;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', Arial, sans-serif;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.ch-sectname {
    fill: #cfcfcf;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}

.ch-tile {
    cursor: pointer;
    outline: none;
}

    .ch-tile:hover .ch-rect {
        stroke: var(--ew-gold, #ddb785);
        stroke-width: 1.5;
    }

    .ch-tile:hover .ch-logo {
        opacity: 0.34;
    }

    .ch-tile:focus-visible .ch-rect {
        stroke: var(--ew-gold, #ddb785);
        stroke-width: 2.5;
    }

/* ---------------- tooltip ---------------- */
.ch-tip {
    position: absolute;
    z-index: 5;
    width: 226px;
    padding: 9px 11px;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    background: #1c1c1c;
    color: #f7f7f7;
    font-size: 12px;
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

    .ch-tip.is-on {
        opacity: 1;
    }

.ch-tip-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.ch-tip-t {
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.ch-tip-s {
    font-weight: 700;
    white-space: nowrap;
}

    .ch-tip-s.is-up {
        color: var(--chart-up, #79cc79);
    }

    .ch-tip-s.is-down {
        color: var(--chart-down, #cd5959);
    }

    .ch-tip-s.is-flat {
        color: var(--ew-gold, #ddb785);
    }

.ch-tip-c {
    color: #d8d8d8;
    margin-top: 1px;
}

.ch-tip-m {
    color: #9a9a9a;
    font-size: 11px;
    margin-top: 4px;
}

/* touch devices get the native <title> and the tap-through link instead */
@media (hover: none) {
    .ch-tip {
        display: none;
    }
}

/* ---------------- states ---------------- */
.ch-loading,
.ch-empty {
    padding: 50px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.ch-trim {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.ch-gate {
    padding: 38px 24px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface, transparent);
}

.ch-gate-t {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
}

.ch-gate-c {
    max-width: 46ch;
    margin: 0 auto 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}

.ch-gate-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ch-gate-b {
    display: inline-block;
    padding: 8px 22px;
    border: 1px solid var(--ew-gold, #ddb785);
    border-radius: 8px;
    background: var(--ew-gold, #ddb785);
    color: #050505;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 120ms ease, background 120ms ease;
}

/* secondary: the log-in path for someone who already has an account */
.ch-gate-alt {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}

    .ch-gate-alt:hover {
        border-color: var(--ew-gold, #ddb785);
    }

.ch-gate-b:focus-visible,
.ch-dl:focus-visible {
    outline: 2px solid var(--ew-gold, #ddb785);
    outline-offset: 2px;
}

/* ---------------- narrow ---------------- */
@media (max-width: 700px) {
    .ch-title {
        font-size: 17px;
    }

    .ch-dl {
        margin-left: 0;
    }

    .ch-sectname {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ch-tip,
    .ch-dl,
    .ch-gate-b {
        transition: none;
    }
}