/* ============================================================
   peers.css — industry peers for a ticker (EW2027).
   Prefix is pr-. Uses ew-theme.css tokens; no Bootstrap.
   ============================================================ */

.pr-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 8px 16px 48px;
    /* width: 100% IS THE ONE THAT MATTERS.

       .stock-page is a COLUMN flex container, so width here is the CROSS axis - and
       flex-shrink does not apply across it. With align-items anything but stretch,
       the item sizes to its own max-content width instead of the container's. That
       is why the page was fine on first paint and grew a scrollbar only once the
       charts and table were injected: the content's max-content width jumped to
       870px and the box simply followed it, inside a 343px parent.

       min-width: 0 below does nothing on its own here - it permits shrinking, and
       nothing was shrinking. width: 100% is what ties the box to its container.

       Diagnosed with find-overflow.js then why-wide.js, which reported
       "870px inside a 343px parent" with flex 0 1 auto and min-width already 0. */
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    /* Nothing inside may widen the document either. clip rather than hidden so
       position: sticky still works within. */
    overflow-x: clip;
}

/* ---- head ---- */
.pr-head {
    margin: 12px 0 18px;
}

.pr-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin: 0 0 2px;
}

    .pr-eyebrow a {
        color: var(--ew-gold, #DDB785);
        text-decoration: none;
        font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
        letter-spacing: 0;
    }

        .pr-eyebrow a:hover {
            text-decoration: underline;
        }

.pr-title {
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--text);
    margin: 0 0 6px;
    letter-spacing: -.01em;
}

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

/* ---- gate ---- */
.pr-locked {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    padding: 2.5rem 1.5rem;
    text-align: center;
}

    .pr-locked p {
        color: var(--text-muted);
        margin: 0 auto .9rem;
        max-width: 52ch;
        line-height: 1.5;
    }

.pr-upgrade {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 8px;
    background: var(--ew-gold, #DDB785);
    color: #23324a;
    font-weight: 700;
    text-decoration: none;
}

/* ---- panels ---- */
.pr-panel {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    padding: 12px 14px 14px;
    margin-bottom: 16px;
}

.pr-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.pr-panel-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin: 0;
}

.pr-cap {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 6px 0 0;
}

.pr-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 36px 0;
    font-size: 14px;
}

/* ---- metric buttons ---- */
.pr-metrics {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pr-mbtn {
    padding: 5px 13px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
}

    .pr-mbtn:hover {
        border-color: var(--ew-gold, #DDB785);
        color: var(--text);
    }

    .pr-mbtn.is-active {
        background: var(--ew-gold, #DDB785);
        border-color: var(--ew-gold, #DDB785);
        color: #23324a;
    }

/* ---- comparison chart ---- */
.pr-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 2px 0 6px;
}

.pr-key {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
}

    .pr-key b {
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }

.pr-swatch {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--text-muted);
}

.pr-key.is-subject .pr-swatch {
    background: var(--ew-gold, #DDB785);
    height: 4px;
}

.pr-key.is-peer .pr-swatch {
    background: var(--ew-blue, #334E68);
}

.pr-key.is-spy .pr-swatch {
    background: var(--text-muted);
}

.pr-chart {
    width: 100%;
}

.pr-chart-svg {
    display: block;
    width: 100%;
    height: 300px;
}

.pr-line {
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

    /* preserveAspectRatio is none on this chart, so strokes must not scale */
    .pr-line.is-subject {
        stroke: var(--ew-gold, #DDB785);
        stroke-width: 2.5;
    }

    .pr-line.is-peer {
        stroke: var(--ew-blue, #334E68);
    }

    .pr-line.is-spy {
        stroke: var(--text-muted);
        stroke-dasharray: 4 4;
    }

.pr-grid {
    stroke: var(--border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.pr-ref {
    stroke: var(--text-muted);
    stroke-width: 1;
    stroke-dasharray: 2 3;
    vector-effect: non-scaling-stroke;
}

.pr-axis {
    fill: var(--text-muted);
    font-size: 10px;
}

/* ---- earnings strip ---- */
.pr-strip-svg {
    display: block;
    width: 100%;
    height: auto;
}

.pr-strip-rail {
    stroke: var(--border);
    stroke-width: 2;
}

.pr-bub-c {
    fill-opacity: .55;
    stroke: var(--surface);
    stroke-width: 1;
    cursor: pointer;
}

    .pr-bub-c.is-up {
        fill: var(--positive, #0F8A3B);
    }

    .pr-bub-c.is-down {
        fill: var(--negative, #c62828);
    }

    .pr-bub-c.is-flat,
    .pr-bub-c.is-upcoming {
        fill: var(--ew-gold, #DDB785);
    }

.pr-bub:hover .pr-bub-c {
    fill-opacity: .85;
}

/* the subject gets an outline so it is findable in a crowded strip */
.pr-bub.is-subject .pr-bub-c {
    stroke: var(--text);
    stroke-width: 2;
}

.pr-bub-t {
    fill: var(--text);
    font-weight: 800;
    pointer-events: none;
}

/* ---- table ---- */
/* The table is wider than a phone by design: eleven columns of tabular numbers
   that must not wrap. It scrolls inside this wrapper so the PAGE does not.

   max-width is what makes that work. Without it the wrapper sizes to its content
   and overflow-x never engages, because the box is never smaller than what is in
   it - which is why the page scrolled despite this rule already existing. */
.pr-tablewrap {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.pr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

    .pr-table th,
    .pr-table td {
        padding: 7px 8px;
        text-align: right;
        white-space: nowrap;
        border-bottom: 1px solid var(--border);
    }

        .pr-table th.is-left,
        .pr-table td.is-left {
            text-align: left;
        }

.pr-sort {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}

    .pr-sort:hover {
        color: var(--ew-gold, #DDB785);
    }

.pr-table tbody tr:hover {
    background: color-mix(in srgb, var(--ew-gold, #DDB785) 12%, transparent);
}

/* the subject is pinned first and stays visually distinct */
.pr-table tbody tr.is-subject {
    background: color-mix(in srgb, var(--ew-gold, #DDB785) 20%, transparent);
}

    .pr-table tbody tr.is-subject .pr-tk {
        color: var(--text);
    }

.pr-tk {
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
}

    .pr-tk:hover {
        color: var(--ew-gold, #DDB785);
    }

.pr-co {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--text-muted);
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-when {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pr-rel {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 1px 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
}

.pr-sub {
    display: block;
    font-size: 9.5px;
    font-weight: 400;
    color: var(--text-muted);
}

.pr-confirm.is-yes {
    color: var(--positive, #0F8A3B);
}

.pr-confirm.is-no {
    color: #c99a2e;
}

.pr-table .is-pos {
    color: var(--positive, #0F8A3B);
}

.pr-table .is-neg {
    color: var(--negative, #c62828);
}

/* ---- responsive ---- */
@media (max-width: 720px) {
    /* height: auto, not a fixed 240px. The chart is now drawn on a viewBox close to
       the container's own width, so letting it keep its aspect ratio is what stops
       it being stretched - a fixed height would reintroduce the distortion the
       viewBox change removed. */
    .pr-chart-svg {
        height: auto;
    }

    .pr-co {
        max-width: 130px;
    }

    /* Tighter cells buy back four or five characters per column, which is often the
       difference between scrolling and not. */
    .pr-table th,
    .pr-table td {
        padding-left: 7px;
        padding-right: 7px;
    }

        /* The ticker column stays put while the numbers scroll under it, so a reader
       swiping right can still tell whose row they are on. */
        .pr-table th[scope="row"],
        .pr-table td.is-left {
            position: sticky;
            left: 0;
            z-index: 1;
            background: var(--surface);
        }

    /* A hint that the table moves. Easy to miss on a phone, where there is no
       scrollbar until you touch it. */
    .pr-tablewrap::after {
        content: "Swipe the table to see more";
        display: block;
        padding: 6px 2px 0;
        font-size: 11px;
        color: var(--text-muted);
    }
}

/* ---- trend rings ----
   The same mark as the stock page, at 22px: one ring per component, coloured by its
   own value. A component with nothing to measure draws as an empty track, which must
   stay visibly different from a zero - hence is-na against is-flat. */
.pr-trend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .pr-trend.is-none {
        color: var(--text-muted);
    }

.pr-ring {
    fill: none;
    stroke-width: 1.6;
}

    .pr-ring.is-up {
        stroke: var(--positive, #0F8A3B);
    }

    .pr-ring.is-down {
        stroke: var(--negative, #c62828);
    }

    .pr-ring.is-flat {
        stroke: var(--ew-gold, #DDB785);
    }

    /* not measured - faint, and unmistakably not a reading */
    .pr-ring.is-na {
        stroke: var(--border);
        stroke-opacity: .55;
    }

/* The column is now just the rings, so it needs far less width than the others. */
.pr-table th.is-trend,
.pr-table td.is-trend {
    width: 1%;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}

/* Ties a staggered bubble back to its date on the rail. Only drawn when a bubble
   has been lifted off it, so on a desktop this never appears. */
.pr-bub-leader {
    stroke: var(--border);
    stroke-width: 1.5;
}