/* The API monitor: the two series hues (v2 first, v1 second) and the error color are checked against both surfaces (validate_palette: worst adjacent separation 24 and above, contrast over 3:1). */
:root { --mon-v2: #2a78d6; --mon-v1: #eb6834; --mon-err: #d03b3b; --mon-grid: #e1e0d9; --mon-base: #c3c2b7; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { --mon-v2: #3987e5; --mon-v1: #d95926; --mon-err: #e66767; --mon-grid: #2a3047; --mon-base: #3b4262; } }
:root[data-mode="dark"] { --mon-v2: #3987e5; --mon-v1: #d95926; --mon-err: #e66767; --mon-grid: #2a3047; --mon-base: #3b4262; }

.mon-filters { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; }
.mon-filters label { display: grid; gap: .2rem; font-size: .8rem; color: var(--color-text-muted); }
.mon-filters select, .mon-filters input[type="text"] { min-width: 8rem; max-width: 16rem; }
.mon-actions { display: flex; gap: .5rem; align-items: center; }
.mon-tiles .mon-plain { display: grid; gap: .1rem; padding: .8rem .9rem; border: 1px solid var(--color-border); border-left: 5px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-surface); }
.mon-tiles .tile.mh-attn .mon-plain { border-left-color: var(--color-danger-text); }
.mon-chart-wrap { overflow-x: auto; }
.mon-chart { display: block; width: 100%; height: auto; }
@media (max-width: 40rem) { .mon-chart { min-width: 34rem; } }
.mon-grid { stroke: var(--mon-grid); stroke-width: 1; }
.mon-base { stroke: var(--mon-base); stroke-width: 1; }
.mon-tick { fill: var(--color-text-muted); font-size: 10px; font-family: var(--font-body); }
.mon-hit { fill: transparent; }
.mon-col:hover .mon-hit, .mon-col:focus .mon-hit { fill: color-mix(in srgb, var(--color-text) 6%, transparent); }
.mon-v2 { fill: var(--mon-v2); }
.mon-v1 { fill: var(--mon-v1); }
.mon-errors { fill: var(--mon-err); }
.mon-track { fill: var(--color-surface-2); }
.mon-legend { list-style: none; display: flex; gap: 1rem; margin: 0 0 .4rem; padding: 0; font-size: .82rem; color: var(--color-text-muted); }
.mon-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.mon-legend svg { width: .8rem; height: .8rem; }
.mon-table { margin-top: .6rem; }
.mon-table summary { cursor: pointer; color: var(--color-accent-text); font-size: .85rem; }
.mon-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1rem; align-items: start; margin-block: 1rem; }
.mon-grid-3 > .panel { margin: 0; }
.mon-rank { list-style: none; display: grid; gap: .55rem; margin: 0; padding: 0; }
.mon-rank li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name n" "bar bar"; gap: .15rem .6rem; align-items: baseline; }
.mon-rank-name { grid-area: name; overflow-wrap: anywhere; }
.mon-rank-n { grid-area: n; font-variant-numeric: tabular-nums; }
.mon-rank-bar { grid-area: bar; width: 100%; height: .5rem; }
.mon-err-text { color: var(--color-danger-text); }
.mon-results { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin: 0; padding: 0; }
.mon-results a { text-decoration: none; color: inherit; font-variant-numeric: tabular-nums; }
.mon-ver-v1 { border-color: var(--mon-v1); }
.mon-ver-v2 { border-color: var(--mon-v2); }
.mon-pager { display: flex; gap: .5rem; margin-top: .8rem; }
@media (forced-colors: active) { .mon-v2, .mon-v1, .mon-errors { fill: CanvasText; } .mon-v1 { fill: GrayText; } }