/* ============================================================
   pivotpoints.css — /pivotpoints/{ticker}
   Prefix pp-. Reuses the pv- rail from pivots.css for the level
   graphic, and .ew-chart-wrap from ew-charts.css for the chart.
   ============================================================ */

.pp-page {
    width: 100%;
    padding: 1.25rem 0 3rem;
    color: var(--text);
}

.pp-head {
    margin-bottom: 1.25rem;
}

.pp-title {
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    color: var(--text);
    margin: 0 0 .4rem;
    letter-spacing: -.01em;
}

.pp-desc {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
    max-width: 80ch;
}

/* ---- levels ---- */
.pp-levels {
    margin-bottom: 2rem;
}

/* one row instead of a list, so it gets more height to breathe in */
.pp-row.pv-row {
    grid-template-columns: 150px 1fr 120px;
    padding: 14px 16px;
}

.pp-row .pv-rail {
    height: 64px;
}

/* ---- the numbers ---- */
.pp-table {
    width: 100%;
    max-width: 44rem;
    margin: 1rem 0 0;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

    .pp-table caption {
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-muted);
        padding-bottom: .4rem;
    }

    .pp-table th[scope="row"] {
        text-align: left;
        width: 8rem;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-muted);
        padding: .55rem .75rem .55rem 0;
    }

    .pp-table td {
        padding: .55rem .75rem;
        font-size: 15px;
        font-weight: 700;
        color: var(--text);
        border-top: 1px solid var(--border);
    }

.pp-lbl {
    display: inline-block;
    min-width: 1.9rem;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.pp-res td {
    color: var(--negative, #c62828);
}

.pp-sup td {
    color: var(--positive, #0F8A3B);
}

.pp-pivot td {
    color: var(--ew-gold, #DDB785);
    font-size: 17px;
}

.pp-note {
    margin: 1rem 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 82ch;
}

/* ---- chart ---- */
.pp-chart-block {
    margin-top: 2rem;
}

.pp-h2 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 .75rem;
}

.pp-since {
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: .4rem;
}

/* Lightweight Charts is told its pixel width at creation, and a zero-width
   container silently draws nothing. */
.pp-chart {
    width: 100%;
    min-height: 460px;
}

@media (max-width: 820px) {
    .pp-row.pv-row {
        grid-template-columns: 110px 1fr 96px;
    }

    .pp-chart {
        min-height: 360px;
    }
}

@media (max-width: 560px) {
    .pp-table th[scope="row"] {
        width: 5.5rem;
    }

    .pp-table td {
        font-size: 13px;
        padding: .5rem .4rem;
    }
}