/*
  Charts over time — LineChart.razor's month lines and AdvertTimeline.razor's runs. Split from
  charts.css, which holds the bars, the scatters and the keyframes both files use. Same rules as
  there: ADR 0007, no package, and no chart is the only place its numbers appear.
*/

/* ------------------------------------------------------------- line chart */

/*
  Series colours are set once, here: a colour follows the thing, so /compare's first product keeps
  its colour whatever else is on the chart. A host names them in --series-1 to --series-3; the
  public site names none and falls back to its teal aliases. The fourth is grey and dashed as
  well, and the channels line is dashed because attention is not money.
*/
.tone-1 { --c: var(--series-1, var(--pos)); }
.tone-2 { --c: var(--series-2, var(--amber)); }
.tone-3 { --c: var(--series-3, var(--magenta)); }
.tone-4 { --c: var(--ink-2); }
.tone-earned { --c: var(--ink-3); }

/* A short stroke of the line's colour — a key for a line, not a box. */
.linekey,
.keybit i.linekey {
    display: inline-block;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: var(--c);
    flex: none;
}

.linekey.dashed,
.keybit i.linekey.dashed { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }

/* Room above the plot for the top tick's label and the end figure, which sit over their lines. */
.lc { margin: 0.4rem 0 0.3rem; padding-top: 1.6rem; }

/* Isolated, so the readout's z-index stays inside the chart and never climbs over the sticky bar. */
.lc-plot { height: 160px; isolation: isolate; }
.lc-tall .lc-plot { height: 200px; }

.lc-svg {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: reveal-x calc(0.55s * var(--m)) var(--ease);
}

.lc-svg .line {
    fill: none;
    stroke: var(--c);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.lc-svg .line.dashed { stroke-width: 1.8; stroke-dasharray: 5 4; }

/* The wash under a money line, fading to nothing at the floor. */
.lc-fade stop:first-child { stop-color: var(--c); stop-opacity: 0.26; }
.lc-fade stop:last-child { stop-color: var(--c); stop-opacity: 0; }

/* Gridlines at round numbers, labelled where they start. Solid: a dash already means something. */
.lc-grid {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid var(--chart-grid);
}

.lc-grid span {
    position: absolute;
    left: 0;
    bottom: 3px;
    z-index: 1;
    pointer-events: none;
    font-family: var(--mono);
    font-size: var(--t-meta);
    line-height: 1;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* The newest figure, at the end of its line: a dot on the point and the number just above it. */
.lc-end {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 1;
    pointer-events: none;
    animation: fade-in calc(0.3s * var(--m)) var(--ease) calc(0.45s * var(--m)) backwards;
}

.lc-end i {
    position: absolute;
    left: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--c);
    box-shadow: 0 0 0 2px var(--ground);
}

.lc-end b {
    position: absolute;
    right: 0;
    bottom: 8px;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--ink);
}

/* Month names under the plot, placed with Sparkline.Across so each sits under its point. */
.lc-x { position: relative; height: 1.4rem; margin-top: 0.35rem; }

.lc-x span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--mono);
    font-size: var(--t-meta);
    color: var(--ink-3);
}

.lc-x span.start { transform: none; }
.lc-x span.end { transform: translateX(-100%); }

@media (max-width: 720px) {
    .lc-x span.minor { display: none; }
}

/* ------------------------------------------------------- reading one month */

/*
  A month at a time. Still ADR 0007 — CSS over an HTML overlay, no JS and nothing per frame, so
  nothing crosses the circuit (docs/design/README.md, Motion).

  Every band is focusable. A hover a keyboard cannot reach is the title attribute ADR 0007
  rejected, wearing different clothes — and ADR 0016 makes these readouts the chart's values in text.
*/
.trend-wrap { position: relative; }

.bands { position: absolute; inset: 0; }

.band { position: absolute; top: 0; bottom: 0; }

.band:focus { outline: none; }

.guide,
.band .mark,
.band .read { opacity: 0; transition: opacity calc(0.12s * var(--m)) var(--ease); }

.band:hover .guide,
.band:hover .mark,
.band:hover .read,
.band:focus-visible .guide,
.band:focus-visible .mark,
.band:focus-visible .read { opacity: 1; }

.guide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    margin-left: -0.5px;
    background: var(--stroke-hi);
}

/*
  On the line, from the line's own scale — Sparkline.Depth, not a second copy of the formula. One
  per line, so the eye goes to the point the readout is describing. The ring is the surface colour,
  so a dot stays round where it crosses a line.
*/
.band .mark {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 999px;
    background: var(--c, var(--series-1, var(--pos)));
    box-shadow: 0 0 0 2px var(--ground);
}

/*
  Pinned to the guide, and hanging off whichever side has room — left of it past the halfway
  point, right of it before. Centring it instead would push the first and last months off the
  chart, and a clamp that fixes that has to guess the readout's own width.

  The month on top, then one row per line: its key, the value in bold, its name after — the reader
  already knows which line they want and is here for the number.
*/
.band .read {
    position: absolute;
    top: 0.3rem;
    left: var(--at);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0 0.6rem;
    white-space: nowrap;
    pointer-events: none;
    background: var(--raise);
    border: 1px solid var(--stroke-hi);
    border-radius: var(--r-sm);
    box-shadow: var(--pop, 0 10px 28px rgba(0, 0, 0, 0.45));
    padding: 0.45rem 0.65rem;
    font-size: var(--t-small);
    color: var(--ink-2);
}

.band .read.before { left: auto; right: calc(100% - var(--at)); }

.band .read .read-h {
    font-family: var(--mono);
    font-size: var(--t-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.read-row { display: flex; align-items: center; gap: 0.45rem; }
.read-row b { color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.read-row.none { opacity: 0.6; }

/* The move from the month before, under the value it moved. Arrow and colour together; only the
   admin host defines --up. Indented past the line key so the figures line up. */
.read-chg { --tone: var(--up, var(--pos)); margin-left: calc(14px + 0.45rem); font-size: var(--t-meta); }
.read-chg.down { --tone: var(--down, var(--neg)); }

.read-chg b {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 16%, transparent);
}

/* ------------------------------------------------------------- timeline */

/*
  AdvertTimeline.razor: one row per advert wording, on one calendar. A row is taller than its bar
  so the pointer has something to land on, and the readout shows on hover only — the chart is
  aria-hidden, and the advert cards under it carry every figure for everyone else.
*/
/* Clipped sideways: a readout is laid out even while it is invisible, and on a phone one starting
   mid-calendar ran past the screen and scrolled the whole page. A wide screen has room for it. */
.tl { position: relative; isolation: isolate; overflow-x: clip; margin: 0.6rem 0 1.4rem; padding-top: 1.4rem; }

.tl-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--chart-grid); }

.tl-tick span {
    position: absolute;
    top: 0;
    left: 4px;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: var(--t-meta);
    color: var(--ink-3);
}

.tl ol { position: relative; list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; height: 11px; }

.tl-bar {
    position: absolute;
    top: 2px;
    bottom: 2px;
    min-width: 3px;
    border-radius: 4px;
    background: var(--series-1, var(--pos));
    transform-origin: left;
    animation: grow-x calc(0.4s * var(--m)) var(--ease) backwards;
    transition: opacity calc(0.15s * var(--m)) var(--ease);
}

/* Measured to one day and no further: the end fades rather than stopping. */
.tl-bar.floor { background: linear-gradient(90deg, var(--series-1, var(--pos)) 55%, color-mix(in srgb, var(--series-1, var(--pos)) 12%, transparent)); }

/* Still running when we last saw it: an arrow where the end would be. */
.tl-bar.running { border-radius: 4px 0 0 4px; }

.tl-bar.running::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    margin-top: -5px;
    border-left: 6px solid var(--series-1, var(--pos));
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.tl:hover li:not(:hover) .tl-bar { opacity: 0.3; }

.tl-read {
    position: absolute;
    bottom: 13px;
    z-index: 2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    background: var(--raise);
    border: 1px solid var(--stroke-hi);
    border-radius: var(--r-sm);
    box-shadow: var(--pop, 0 10px 28px rgba(0, 0, 0, 0.45));
    padding: 0.3rem 0.55rem;
    font-size: var(--t-small);
    color: var(--ink-2);
    transition: opacity calc(0.12s * var(--m)) var(--ease);
}

.tl-read b { color: var(--ink); font-weight: 600; }
.tl li:hover .tl-read { opacity: 1; }