/* Threshold line chart — used by the ratelimit 24h and days views.
 *
 * Plain CSS rather than Tailwind utilities so the chart needs no `npm run build:css`
 * to pick up new classes, and so SVG-only properties (stop-color, stroke) can be
 * driven by the same custom properties in both themes.
 *
 * Palette: an ordered severity ramp, not a categorical one. Both steps sets were
 * checked with the dataviz validator against the real card surfaces (#ffffff light,
 * ~#070d1f dark) for CVD separation and normal-vision separation:
 *
 *   light  #059669 #f59e0b #dc2626 #881337  — CVD dE 13.0, normal dE 18.7
 *   dark   #34d399 #fbbf24 #ef4444 #fda4af  — CVD dE 10.6, normal dE 20.4
 *
 * The previous emerald/lime/amber/rose ramp failed both: lime<->amber was dE 1.5
 * under deuteranopia (indistinguishable) and lime<->emerald only dE 13.2 for normal
 * vision. Light-mode amber sits at 2.15:1 against white, below the 3:1 mark floor —
 * discharged by the labeled threshold rules, the band legend and the numeric badges,
 * so the value is never carried by hue alone.
 */

/* Defined on :root, not on .tlc — the live view colours numbers and filter pills from this same
   ramp and its markup is not wrapped in a .tlc container. */
:root {
    --tlc-ok: #059669;
    --tlc-notice: #f59e0b;
    --tlc-warn: #dc2626;
    --tlc-crit: #881337;
    --tlc-grid: rgb(100 116 139 / 0.22);
    --tlc-rule: rgb(100 116 139 / 0.38);
    --tlc-ink: #475569;
    --tlc-ink-muted: #94a3b8;
    --tlc-surface: #ffffff;
    --tlc-crosshair: rgb(100 116 139 / 0.55);
}

.dark {
    --tlc-ok: #34d399;
    --tlc-notice: #fbbf24;
    --tlc-warn: #ef4444;
    --tlc-crit: #fda4af;
    --tlc-grid: rgb(148 163 184 / 0.16);
    --tlc-rule: rgb(148 163 184 / 0.3);
    --tlc-ink: #cbd5e1;
    --tlc-ink-muted: #64748b;
    --tlc-surface: #0b1220;
    --tlc-crosshair: rgb(148 163 184 / 0.5);
}

/* --- plot ------------------------------------------------------------------ */

.tlc-plot {
    position: relative;
    height: 8.5rem;
    /* Room for the y labels sitting outside the plot box. */
    margin-left: 2.25rem;
}

.tlc-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* The y axis is value-space (0-100) and x is the full window, so the viewBox is
   deliberately non-uniform. Strokes opt out of that scaling. */
.tlc-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Per-band stroke colours. Literal values, not var() or a paint-server reference: this is the
   one thing on the chart that must never fail to resolve, and every indirection we tried here
   had a way of collapsing to black. */
.tlc-seg-ok { stroke: #059669; }
.tlc-seg-notice { stroke: #f59e0b; }
.tlc-seg-warn { stroke: #dc2626; }
.tlc-seg-crit { stroke: #881337; }

.dark .tlc-seg-ok { stroke: #34d399; }
.dark .tlc-seg-notice { stroke: #fbbf24; }
.dark .tlc-seg-warn { stroke: #ef4444; }
.dark .tlc-seg-crit { stroke: #fda4af; }

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

/* Threshold rules double as the non-color encoding of the bands: the line's
   position against them says which band it is in without reference to hue. */
.tlc-threshold {
    stroke: var(--tlc-rule);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

/* --- axis + threshold labels (HTML, so the viewBox scaling can't stretch text) --- */

.tlc-y-label,
.tlc-t-label {
    position: absolute;
    font-size: 0.625rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    white-space: nowrap;
}

.tlc-y-label {
    right: calc(100% + 0.375rem);
    color: var(--tlc-ink-muted);
    transform: translateY(-50%);
}

/* Threshold numbers ride the right edge so they never collide with the y-axis labels. */
.tlc-t-label {
    right: 0.25rem;
    color: var(--tlc-ink-muted);
    transform: translateY(-50%);
    background: var(--tlc-surface);
    padding: 0 0.25rem;
    border-radius: 0.125rem;
}

/* --- hover layer ---------------------------------------------------------- */

.tlc-hit {
    position: absolute;
    inset: 0;
    cursor: crosshair;
}

.tlc-crosshair {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--tlc-crosshair);
    pointer-events: none;
    display: none;
}

.tlc-marker {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 9999px;
    /* 2px surface ring so the marker reads on top of the line. */
    box-shadow: 0 0 0 2px var(--tlc-surface);
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
}

.tlc-tooltip {
    position: absolute;
    z-index: 20;
    min-width: 8rem;
    transform: translate(-50%, calc(-100% - 0.75rem));
    border-radius: 0.375rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--tlc-ink);
    background: var(--tlc-surface);
    border: 1px solid var(--tlc-rule);
    box-shadow: 0 4px 16px -4px rgb(15 23 42 / 0.35);
    pointer-events: none;
    display: none;
    white-space: nowrap;
}

.tlc-tooltip-time {
    color: var(--tlc-ink-muted);
    font-variant-numeric: tabular-nums;
}

.tlc-tooltip-value {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tlc-swatch {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex: none;
}

/* --- band legend ---------------------------------------------------------- */

.tlc-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.875rem;
    font-size: 0.6875rem;
    color: var(--tlc-ink);
}

.tlc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Echoes the mark form — a short line, not a block — but thick enough to actually read the hue
   at 11px text sizes. display is explicit because a bare inline span collapses to zero width and
   the colour disappears entirely. Colour comes from the same literal band classes as the line, so
   the legend key and the stroke it describes cannot drift apart. */
.tlc-legend-key {
    display: inline-block;
    width: 1.25rem;
    height: 0.3125rem;
    border-radius: 9999px;
    flex: none;
}

.tlc-legend-key.tlc-seg-ok { background: #059669; }
.tlc-legend-key.tlc-seg-notice { background: #f59e0b; }
.tlc-legend-key.tlc-seg-warn { background: #dc2626; }
.tlc-legend-key.tlc-seg-crit { background: #881337; }

.dark .tlc-legend-key.tlc-seg-ok { background: #34d399; }
.dark .tlc-legend-key.tlc-seg-notice { background: #fbbf24; }
.dark .tlc-legend-key.tlc-seg-warn { background: #ef4444; }
.dark .tlc-legend-key.tlc-seg-crit { background: #fda4af; }

/* --- band badges ----------------------------------------------------------- */

/* Same ramp as the line, so a pill reading 70% and the line at 70% agree. Every badge
   carries a text label next to the dot — the band is never signalled by hue alone. */
.tlc-band-ok { --tlc-band: var(--tlc-ok); }
.tlc-band-notice { --tlc-band: var(--tlc-notice); }
.tlc-band-warn { --tlc-band: var(--tlc-warn); }
.tlc-band-crit { --tlc-band: var(--tlc-crit); }
.tlc-band-none { --tlc-band: var(--tlc-ink-muted); }

.tlc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tlc-ink);
    background: color-mix(in srgb, var(--tlc-band) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tlc-band) 40%, transparent);
}

/* display is set explicitly rather than relying on the flex parent to blockify it: as a bare
   inline span it would collapse to zero width and the colour would vanish. */
.tlc-badge-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--tlc-band);
    flex: none;
}

/* Band-coloured text, for numbers that should carry their own severity. */
.tlc-text {
    color: var(--tlc-band);
}

/* Standalone status dot, larger than the one inside a badge. */
.tlc-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background: var(--tlc-band);
    flex: none;
}

/* --- filter pills (live view) ---------------------------------------------- */

/* Plain CSS keyed on the data-active attribute that wwwroot/js/ratelimit-filter.js already
   toggles, so the live view shares this ramp without needing Tailwind to have generated a
   matching set of data-[active=…]: colour variants. */
.tlc-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    user-select: none;
    transition: background-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
    color: var(--tlc-ink);
    background: color-mix(in srgb, var(--tlc-band) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tlc-band) 40%, transparent);
}

.tlc-filter[data-active="false"] {
    color: var(--tlc-ink-muted);
    text-decoration: line-through;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--tlc-grid);
}

.tlc-filter-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--tlc-band);
    flex: none;
}

.tlc-filter[data-active="false"] .tlc-filter-dot {
    background: var(--tlc-ink-muted);
}

.tlc-filter-count {
    opacity: 0.7;
}