/* ============================================================================
   price-chart.css
   ----------------------------------------------------------------------------
   Clearing price history. Loaded AFTER offering.css, which this file does not
   modify. One new class family - op-pricechart.

   Deliberately not styled like a stock chart. No gridlines, no candles, no
   fill under the line: four points a year rendered in that language would
   imply continuous liquidity that does not exist, and an investor who reads it
   that way plans around an exit they may not get.
   ============================================================================ */
.op-pricechart {
    margin: 1.5rem 0 0;
    padding: 1.25rem;
    border: 1px solid var(--op-border, #E2E8F0);
    border-radius: var(--op-radius, 8px);
}

.op-pricechart__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.op-pricechart__head h3 {
    margin: 0 0 .15rem;
    font-size: 1.05rem;
}

.op-pricechart__latest {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.op-pricechart__latest span {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
}

.op-pricechart__latest label {
    font-size: .78rem;
    color: var(--op-muted, #64748B);
}

/* The plot is a positioning surface only. Points are placed by percentage, so
   it scales with the container without needing a viewBox or any script. */
.op-pricechart__plot {
    position: relative;
    height: 140px;
    margin: 1.5rem 0 .5rem;
}

.op-pricechart__point {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
}

.op-pricechart__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--op-accent, #16A34A);
}

.op-pricechart__value {
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* A window that ran without trading. Hollow and muted, sitting mid-plot because
   it has no price to sit at - present in the series without pretending to be a
   price. */
.op-pricechart__point.is-blank .op-pricechart__dot {
    background: transparent;
    border: 2px dashed var(--op-muted, #94A3B8);
    box-sizing: border-box;
    width: 12px;
    height: 12px;
}

.op-pricechart__point.is-blank .op-pricechart__value {
    color: var(--op-muted, #94A3B8);
    font-weight: 400;
    font-style: italic;
}

.op-pricechart__axis {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--op-border, #E2E8F0);
    padding-top: .5rem;
}

.op-pricechart__axis span {
    font-size: .78rem;
    color: var(--op-muted, #64748B);
}

/* One window is the common case early on, and a lone label pushed to the left
   looks like a rendering fault rather than a single data point. */
.op-pricechart__axis:has(span:only-child) {
    justify-content: center;
}

@media (max-width: 640px) {
    .op-pricechart__head {
        flex-direction: column;
    }

    .op-pricechart__latest {
        align-items: flex-start;
    }

    .op-pricechart__plot {
        height: 120px;
    }

    .op-pricechart__value {
        font-size: .72rem;
    }
}