/* ============================================================
   epsdates.css — Earnings Date Analysis (EW2027).
   Prefix is edt-. Uses ew-theme.css tokens; no Bootstrap.
   ============================================================ */

.edt-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 8px 16px 48px;
    /* .stock-page is a COLUMN flex container, so width here is the CROSS axis and
       flex-shrink does not apply across it. Without width: 100% this box sizes to
       its own max-content width instead of the container's, which on a phone means
       it grows to whatever the widest injected chart or table needs and drags the
       whole document sideways with it.

       It shows up only after the JavaScript fills the panels, because an empty
       panel has a small max-content width. Same fault, same fix, as .pr-page and
       .wh-page - see peers.css for the full reasoning. */
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: clip;
}

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

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

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

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

.edt-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;
}

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

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

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

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

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

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

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

.edt-panel-head .edt-panel-title {
    margin: 0;
}

.edt-cap {
    font-size: 11.5px;
    color: var(--text-muted);
    max-width: 70ch;
}

.edt-empty,
.edt-loading {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 0;
    font-size: 14px;
}

/* ---- alerts ---- */
.edt-panel-alerts {
    border-left: 4px solid var(--border);
}

.edt-alerts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.edt-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
}

.edt-alert-icon {
    flex: none;
    display: flex;
    padding-top: 1px;
}

.edt-alert-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.edt-alert-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}

/* the tag carries the severity as a word, so it does not rely on color alone */
.edt-alert-tag {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid currentColor;
}

.edt-alert-detail {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

.edt-alert.is-warn {
    background: color-mix(in srgb, var(--negative, #c62828) 12%, transparent);
    color: var(--negative, #c62828);
}

.edt-alert.is-caution {
    background: color-mix(in srgb, #c99a2e 14%, transparent);
    color: #c99a2e;
}

.edt-alert.is-good {
    background: color-mix(in srgb, var(--positive, #0F8A3B) 10%, transparent);
    color: var(--positive, #0F8A3B);
}

.edt-alert.is-info {
    background: var(--surface-alt, #f6f7f9);
    color: var(--text-muted);
}

/* ---- the next one ---- */
.edt-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.edt-fact {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--surface-alt, #f6f7f9);
    min-width: 0;
}

.edt-fact-lbl {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.edt-fact-val {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
}

    .edt-fact-val.is-pos {
        color: var(--positive, #0F8A3B);
    }

    /* an unconfirmed date is not an error, so amber rather than red */
    .edt-fact-val.is-warn {
        color: #c99a2e;
    }

.edt-fact-sub {
    font-size: 10.5px;
    color: var(--text-muted);
}

.edt-verdict {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text);
}

/* ---- price path ---- */
.edt-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 2px 0 8px;
}

.edt-key {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 2px 8px;
}

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

button.edt-key {
    cursor: pointer;
}

    /* a hidden year reads as struck through, not merely dim */
    button.edt-key:not(.is-on) {
        opacity: .5;
        text-decoration: line-through;
    }

    button.edt-key:hover {
        border-color: var(--ew-gold, #DDB785);
    }

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

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

.edt-path {
    width: 100%;
}

.edt-path-svg {
    display: block;
    width: 100%;
    height: 300px;
}

/* preserveAspectRatio is none, so strokes must not stretch with the box */
.edt-line {
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

    .edt-line.is-year {
        stroke: var(--text-muted);
        stroke-width: 1;
        opacity: .5;
    }

    .edt-line.is-avg {
        stroke: var(--ew-gold, #DDB785);
        stroke-width: 3;
    }

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

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

.edt-event {
    stroke: var(--ew-blue, #334E68);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}

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

.edt-eventlbl {
    fill: var(--ew-blue, #334E68);
    font-size: 10px;
    font-weight: 700;
}

/* ---- table ---- */
.edt-tablewrap {
    overflow-x: auto;
}

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

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

    .edt-table th {
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-muted);
    }

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

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

    .edt-table tfoot td {
        border-bottom: 0;
        border-top: 2px solid var(--border);
        font-weight: 800;
    }

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

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

/* ---- responsive ---- */
@media (max-width: 860px) {
    .edt-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .edt-path-svg {
        height: 240px;
    }
}