/*
 * The engagement history on a post's detail page (#415): the sparklines under
 * the derived metrics, the two charts and the readings table.
 *
 * Filament loads only its own compiled bundle and does NOT scan our Blade
 * views, so Tailwind utilities written there produce no CSS. These are explicit
 * `.ssmt-*` classes, registered through FilamentAsset — same arrangement as
 * social-content.css, and the same reason.
 *
 * COLOUR RULE (#124): a hex literal may only appear where it DEFINES a custom
 * property. Everything here comes from a design-system token, and a
 * `CssTokensTest` fails the build on a stray hex.
 */

.ssmt-history {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.ssmt-history__panel {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ssmt-history__title {
    font-family: var(--tew-font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--tew-color-text);
    margin: 0;
}

/* The caption UNDER a chart, as opposed to the note above it: same voice, but
   it reads after the picture, so it gets the spacing the other way round. */
.ssmt-history__note--after {
    margin: 0.5rem 0 0;
}

.ssmt-history__note {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--tew-color-text-subtle);
    /* The note explains what the chart does and does not claim; a long measure
       makes that a wall. Capped in ch so it follows the reader's font size
       instead of freezing at a pixel width. */
    max-width: 68ch;
    /* ⚠️ The measure is a choice; where the lines happen to break is not.
       At this width the three-line note left `successo.` alone on the last
       line — an orphan reads as a mistake even when every word is right.
       `pretty` asks the browser to pull a word down rather than strand one,
       and it only touches the last few lines, so the paragraph keeps its
       natural rag. Not `balance`: that evens ALL lines, which suits a heading
       and makes a body paragraph look artificially blocky.
       Where unsupported, nothing happens and the text wraps as before. */
    text-wrap: pretty;
    margin: 0 0 0.35rem;
}

/* ------------------------------------------------------------------
   The charts

   ⚠️ No fixed height anywhere in here. A box frozen in px cannot absorb
   larger text and breaks WCAG 1.4.4 (resize to 200%) on the spot — the
   SVG carries its own aspect ratio through the viewBox and the width,
   which is exactly what lets the height stay automatic.
   ------------------------------------------------------------------ */

/* ⚠️ The scale is CLAMPED, and this is the load-bearing rule of the file.
   An SVG sized by a viewBox scales its TEXT along with everything else, so a
   chart squeezed into half a column renders 12-unit axis labels at about 7px —
   measured in the panel, not guessed. Below the floor the chart scrolls inside
   its box (the same treatment the table gets); above the ceiling it simply
   stops growing, because axis labels at 20px look like a mistake.

   Both bounds are in rem, so they follow the reader's font size instead of
   pinning the chart to a pixel width they cannot change. */
.ssmt-chart {
    display: block;
    width: 100%;
    min-width: 53rem;
    max-width: 72rem;
    height: auto;
    /* Labels sit slightly outside the plot box (the value above the last
       point, a bar label above a full-height bar); without this they clip. */
    overflow: visible;
}

.ssmt-chart__grid {
    stroke: var(--tew-color-border);
    stroke-width: 1;
}

.ssmt-chart__grid--day {
    stroke-dasharray: 2 4;
}

/* The publication line: structure, so it is stronger than a gridline and
   quieter than the data. */
.ssmt-chart__origin {
    stroke: var(--tew-color-border-strong);
    stroke-width: 1.5;
}

.ssmt-chart__origin-label,
.ssmt-chart__axis {
    fill: var(--tew-color-text-subtle);
    font-size: 14px;
    font-family: var(--tew-font-mono);
    font-variant-numeric: tabular-nums;
}

.ssmt-chart__origin-label {
    font-family: var(--tew-font-sans);
    font-size: 13px;
}

/* The data. Slot 1 of the validated categorical scale for the series, slot 4
   as its opposite pole for a drop — a diverging pair with the zero line as the
   neutral midpoint, NOT a status colour: a post losing likes is a direction,
   not a failure. Measured ΔE 29.1 at normal vision and 22.1 under protanopia,
   and both slots clear 3:1 on the light and the dark surface, which is why one
   scale serves both themes. */
.ssmt-chart__area {
    fill: color-mix(in srgb, var(--tew-chart-1) 16%, transparent);
}

.ssmt-chart__line {
    stroke: var(--tew-chart-1);
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
}

/* A stretch we did not measure. The dash is the point: it says "something
   happened in here and we cannot say when" — which a solid line would deny
   and a step would answer with an invented plateau. */
.ssmt-chart__line--gap {
    stroke-dasharray: 5 5;
}

.ssmt-chart__dot {
    fill: var(--tew-chart-1);
    stroke: var(--tew-color-surface);
    stroke-width: 2;
}

.ssmt-chart__value {
    fill: var(--tew-color-text);
    font-family: var(--tew-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600;
}

.ssmt-chart__bar {
    fill: var(--tew-chart-1);
}

.ssmt-chart__bar--down {
    fill: var(--tew-chart-4);
}

/* The first bar runs from publication, so it covers a shorter, partial stretch
   than the ones after it; it is dimmed so it does not read as a peer. */
.ssmt-chart__bar--first {
    fill-opacity: 0.72;
    stroke: var(--tew-chart-1);
    stroke-width: 1.5;
}

/* A bar covering a hole between readings: hatched-by-dashes and translucent,
   because its height is real but its placement in time is not. */
.ssmt-chart__bar--gap {
    fill-opacity: 0.45;
    stroke: var(--tew-chart-1);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.ssmt-chart__bar--gap.ssmt-chart__bar--down {
    stroke: var(--tew-chart-4);
}

.ssmt-chart__zero {
    stroke: var(--tew-color-border-strong);
    stroke-width: 1.5;
}

.ssmt-chart__bar-label {
    /* Text wears a text token, never the series colour — the mark beside it
       already carries the identity.
       ⚠️ There used to be an exception here for the drop, painted in the chart
       slot. It was wrong, and MEASURED wrong: `--tew-chart-4` (#D9762B) on white
       at 13px is 3.19:1, against the 4.5:1 that TEXT requires. The chart scale is
       validated for MARKS, whose floor is 3:1 as non-text — the same reason the
       JSON syntax palette in social-content.css had to be declared separately.
       A slot that is correct under a bar is not correct as a caption. */
    fill: var(--tew-color-text-muted);
    font-family: var(--tew-font-sans);
    font-size: 13px;
    font-weight: 600;
    /* A halo in the surface colour so a label that overlaps the next bar stays
       readable; paint-order puts the stroke behind the glyphs. */
    stroke: var(--tew-color-surface);
    stroke-width: 3;
    paint-order: stroke;
}

/* ------------------------------------------------------------------
   Sparklines — under the number they belong to
   ------------------------------------------------------------------ */

.ssmt-spark {
    display: block;
    width: 100%;
    /* The one height in this file, and it is in em so it grows with the text
       around it rather than pinning the row. Kept low: the sparkline is
       subordinate to the number above it, not a chart in its own right. */
    height: 2.25em;
    margin-top: 0.4rem;
}

.ssmt-spark__area {
    fill: color-mix(in srgb, var(--tew-chart-1) 14%, transparent);
}

.ssmt-spark__line {
    stroke: var(--tew-chart-1);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    fill: none;
}

.ssmt-spark__end {
    fill: var(--tew-chart-1);
}

/* ------------------------------------------------------------------
   The readings table — the charts' accessible equivalent
   ------------------------------------------------------------------ */

.ssmt-history__scroll {
    /* Wide content — the charts and the readings table alike — scrolls inside
       its own box, so the page body never scrolls sideways. */
    overflow-x: auto;
    margin-top: 0.5rem;
}

.ssmt-history__table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    color: var(--tew-color-text);
}

.ssmt-history__table caption {
    text-align: start;
    font-size: 0.8rem;
    color: var(--tew-color-text-subtle);
    padding-bottom: 0.5rem;
}

.ssmt-history__table th,
.ssmt-history__table td {
    text-align: end;
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--tew-color-border);
    white-space: nowrap;
}

.ssmt-history__table th:first-child,
.ssmt-history__table td:first-child,
.ssmt-history__table th:nth-child(2),
.ssmt-history__table td:nth-child(2) {
    text-align: start;
}

.ssmt-history__table thead th {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tew-color-text-subtle);
    font-weight: 600;
    border-bottom-color: var(--tew-color-border-strong);
}

.ssmt-history__table tbody td {
    font-family: var(--tew-font-mono);
}

.ssmt-history__table tbody tr:last-child td {
    border-bottom: 0;
}

.ssmt-history__mode {
    font-size: 0.78rem;
    color: var(--tew-color-text-subtle);
}

/* A drop in the table. NOT coloured — see the bar-label note above: this cell
   is where axe measured 3.19:1 and failed the gate. The direction is carried by
   the minus sign and the weight, which is what WCAG 1.4.1 asks for anyway:
   colour must never be the only thing saying it. */
.ssmt-history__down {
    color: var(--tew-color-text);
    font-weight: 700;
}

/* A single reading is not a series. Saying so is not the same as saying
   nothing: "read once" and "never read" are different facts, and a hidden
   section would make them look identical. */
.ssmt-history__single {
    font-size: 0.85rem;
    color: var(--tew-color-text-subtle);
}

/* ------------------------------------------------------------------------ */
/* The metric picker (#963)                                                  */
/* ------------------------------------------------------------------------ */

/* One metric at a time, never overlaid: on a post whose followers are 44,9M
   and whose likes are 0, a shared axis draws one line and one floor. The
   control is a plain <select> with a real <label> — an accessible name that a
   `title` attribute could not give it (accessibility rule §2). */
.ssmt-history__picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.ssmt-history__picker-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tew-color-text-subtle);
}

/* ⚠️ No fixed height anywhere here, on purpose: a box frozen in px cannot
   absorb text at 200% and breaks WCAG 1.4.4 on the spot (accessibility rule
   §3). The control sizes itself on its own line-height and padding. */
.ssmt-history__picker-select {
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 0.3rem 2rem 0.3rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid var(--tew-color-border);
    background-color: var(--tew-color-surface);
    color: var(--tew-color-text);
    max-width: 100%;
}

.ssmt-history__picker-select:focus-visible {
    outline: 2px solid var(--tew-color-primary);
    outline-offset: 2px;
}

.ssmt-history__metric {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

/* The sentence that stands in for a chart nobody should draw: the series never
   moved, so an axis would be invented rather than measured. It reads as prose,
   not as an empty state — there IS data, it simply says one thing. */
.ssmt-history__panel--flat {
    padding: 0.75rem 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid var(--tew-color-border);
    background-color: var(--tew-color-surface-subtle);
}

/* The brand's audience is not a property of the post, and the note that says
   so has to be read BEFORE the curve, not after it. */
.ssmt-history__note--page-level {
    margin-bottom: 0.5rem;
}