/* Component layer for FeedPlumb Check & Stats, v2 polish (22 Oct 2026). Tokens only (tokens-monitor.css v2);
   every selector is scoped under .fp-monitor. Pipe metaphor kept quiet: the chrome "main line", a KPI manifold, and
   per-row status pipes on table rows. Motion: one soft pulse per --mon-pulse-period, off under prefers-reduced-motion. */
.fp-monitor{background:var(--mon-canvas);color:var(--ink);font-family:var(--font);font-size:var(--mon-fs);line-height:1.4;min-height:100vh;
  background-image:radial-gradient(1200px 420px at 70% -120px,color-mix(in srgb,var(--brand) 9%,transparent),transparent 70%);background-repeat:no-repeat}
.fp-monitor *{box-sizing:border-box}
.fp-monitor a{color:var(--brand);text-underline-offset:2px;text-decoration-thickness:1px}
.fp-monitor a:hover{text-decoration-thickness:2px}
.fp-monitor :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.fp-monitor .sprite{position:absolute;width:0;height:0;overflow:hidden}
.fp-monitor .ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fp-monitor .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fp-monitor .skip{position:absolute;left:-999px}.fp-monitor .skip:focus{left:8px;top:8px;z-index:9;background:var(--surface);padding:6px 10px}
.fp-monitor .noscript-msg{padding:16px}

/* ---------- chrome + tabs ---------- */
.fp-monitor .chrome{position:sticky;top:0;z-index:5;height:var(--mon-header-h);display:flex;align-items:center;gap:16px;padding:0 16px;
  background:var(--mon-chrome);color:var(--mon-chrome-ink);border-bottom:1px solid var(--mon-chrome-line)}
/* the main line: a 2px teal pipe under the chrome; while data is live a soft highlight travels along it */
.fp-monitor .chrome::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--mon-area);opacity:.85}
.fp-monitor:has(.live-dot) .chrome::after{background:linear-gradient(90deg,transparent 0,var(--pipe-pulse) 50%,transparent 100%) no-repeat,var(--mon-area);
  background-size:18% 100%,100% 100%;animation:fp-mon-sweep var(--mon-pulse-period) ease-in-out infinite}
.fp-monitor .chrome a{color:var(--mon-chrome-ink);text-decoration:none}
.fp-monitor .chrome :focus-visible{outline-color:var(--mon-chrome-focus)}
.fp-monitor .chrome .brandlink{display:flex;align-items:center;gap:8px;font-weight:650;font-size:14px;letter-spacing:-.01em}
.fp-monitor .chrome .brandlink img{display:block;border-radius:6px}
.fp-monitor .chrome .area{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mon-area);
  padding:2px 8px;border:1px solid color-mix(in srgb,var(--mon-area) 45%,transparent);border-radius:999px}
.fp-monitor .chrome nav{display:flex;gap:2px;height:100%;margin-left:4px}
.fp-monitor .chrome nav a{position:relative;display:flex;align-items:center;padding:0 12px;color:var(--mon-chrome-muted);transition:color .15s}
.fp-monitor .chrome nav a:hover{color:var(--mon-chrome-ink)}
.fp-monitor .chrome nav a[aria-current=page]{color:var(--mon-chrome-ink);font-weight:600}
.fp-monitor .chrome nav a[aria-current=page]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--mon-chrome-ink)}
.fp-monitor .chrome .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.fp-monitor .chrome input{background:transparent;border:1px solid var(--mon-chrome-muted);color:var(--mon-chrome-ink);border-radius:var(--mon-r-sm);height:28px;width:200px;padding:0 8px;font:inherit}
.fp-monitor .chrome input::placeholder{color:var(--mon-chrome-muted)}
.fp-monitor .seg{display:inline-flex;border:1px solid var(--mon-chrome-muted);border-radius:var(--mon-r-sm);overflow:hidden;padding:1px;gap:1px}
.fp-monitor .seg button{background:transparent;color:var(--mon-chrome-muted);border:0;border-radius:4px;font:inherit;font-size:12px;padding:3px 8px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s,color .15s}
.fp-monitor .seg button:hover{color:var(--mon-chrome-ink)}
.fp-monitor .seg button[aria-pressed=true],.fp-monitor .seg button[aria-checked=true]{background:var(--mon-chrome-ink);color:var(--mon-chrome)}
/* variant switcher (radio group): swatch + label; labels hide visually below 1360px, the accessible name stays */
.fp-monitor .vsw{width:10px;height:10px;border-radius:50%;flex:none;border:1px solid var(--mon-chrome-muted)}
.fp-monitor .vsw-midnight{background:#060a13;box-shadow:inset -3px -3px 0 #7ea4ff}
.fp-monitor .vsw-dusk{background:#252e42;box-shadow:inset -3px -3px 0 #92b1ff}
.fp-monitor .vsw-graphite{background:#1c1b19;box-shadow:inset -3px -3px 0 #6ee7d2}
@media (max-width:1359px){.fp-monitor .seg .vlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.fp-monitor .chrome .back{font-size:12px;color:var(--mon-chrome-muted);border-left:1px solid var(--mon-chrome-line);padding-left:12px}
.fp-monitor .chrome .back:hover{color:var(--mon-chrome-ink)}

/* ---------- shell + filter rail ---------- */
.fp-monitor .shell{display:grid;grid-template-columns:var(--mon-rail-w) minmax(0,1fr)}
.fp-monitor .rail{background:linear-gradient(180deg,var(--surface-hi),var(--surface) 240px);border-right:1px solid var(--line);padding:calc(var(--mon-pad) + 4px) var(--mon-pad);
  display:flex;flex-direction:column;gap:18px;min-height:calc(100vh - var(--mon-header-h));position:sticky;top:var(--mon-header-h);align-self:start;max-height:calc(100vh - var(--mon-header-h));overflow:auto}
.fp-monitor .rail h2,.fp-monitor .rail legend{display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 8px;font-weight:650;padding:0}
/* section heads sit on a short pipe stub */
.fp-monitor .rail h2::after,.fp-monitor .rail legend::after{content:"";flex:1;height:1px;background:var(--line)}
.fp-monitor .rail legend{width:100%}
.fp-monitor .rail fieldset{border:0;margin:0;padding:0}
.fp-monitor .rail label{display:flex;align-items:center;gap:8px;padding:3px 6px;margin:0 -6px;border-radius:var(--mon-r-sm);color:var(--ink);cursor:pointer}
.fp-monitor .rail label:hover{background:var(--surface-2)}
.fp-monitor .rail label .count{margin-left:auto;color:var(--muted);font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.fp-monitor .rail input[type=checkbox]{accent-color:var(--brand);width:14px;height:14px;margin:0}
.fp-monitor .rail input[type=search],.fp-monitor .rail select,.fp-monitor .rail input[type=number]{width:100%;height:30px;border:1px solid var(--line-2);border-radius:var(--mon-r-sm);background:var(--surface-2);color:var(--ink);padding:0 8px;font:inherit}
.fp-monitor .rail input:focus-visible,.fp-monitor .rail select:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.fp-monitor .swatch{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none;vertical-align:-1px}
.fp-monitor .rail .seg{border-color:var(--line-2)}
.fp-monitor .rail .seg button{color:var(--ink-2)}
.fp-monitor .rail .seg button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
.fp-monitor .rail .reset{font-size:12px}
.fp-monitor .rail .note{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;line-height:1.5}
.fp-monitor .rail ul.links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.fp-monitor .rail ul.links a{display:block;padding:4px 8px;margin-left:-8px;border-left:2px solid transparent;border-radius:0 var(--mon-r-sm) var(--mon-r-sm) 0;text-decoration:none}
.fp-monitor .rail ul.links a:hover{background:var(--surface-2)}
.fp-monitor .rail ul.links a[aria-current=page]{font-weight:650;color:var(--ink);border-left-color:var(--mon-area);background:var(--surface-2)}

/* ---------- main, crumbs, title ---------- */
.fp-monitor main{padding:calc(var(--mon-pad) + 2px) calc(var(--mon-pad) + 8px) 32px;min-width:0}
.fp-monitor .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;padding:0;font-size:12px;color:var(--muted)}
.fp-monitor .crumbs li+li::before{content:"\203A";margin-right:6px;color:var(--muted)}
.fp-monitor .crumbs [aria-current]{color:var(--ink-2)}
.fp-monitor .titlebar{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin-bottom:calc(var(--mon-gap) + 2px)}
.fp-monitor .titlebar h1{font-size:20px;margin:0;font-weight:650;letter-spacing:-.015em}
.fp-monitor .titlebar .meta{margin-left:auto;color:var(--muted);font-size:12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fp-monitor .live-dot{width:8px;height:8px;border-radius:50%;background:var(--fresh);display:inline-block}

/* ---------- KPI manifold: cards with depth, joined by a quiet pipe behind them ---------- */
.fp-monitor .kpis{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--mon-gap);margin-bottom:var(--mon-gap)}
.fp-monitor .kpis::before{content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;margin-top:-1px;background:var(--line);border-radius:2px}
.fp-monitor .kpi{position:relative;background:linear-gradient(180deg,var(--surface-hi),var(--surface));border:1px solid var(--line);border-radius:var(--mon-r);padding:12px 14px 11px;box-shadow:var(--mon-shadow);overflow:hidden}
.fp-monitor .kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--line-2);opacity:.55}
.fp-monitor .kpi.k-fresh::before{background:var(--fresh);opacity:1}.fp-monitor .kpi.k-stale::before{background:repeating-linear-gradient(90deg,var(--stale) 0 8px,transparent 8px 13px);opacity:1}
.fp-monitor .kpi.k-deviate::before{background:var(--deviate);opacity:1}.fp-monitor .kpi.k-rev::before{background:var(--rev);opacity:1}
.fp-monitor .kpi.k-nodata::before{background:repeating-linear-gradient(90deg,var(--nodata) 0 2px,transparent 2px 6px);opacity:1}
.fp-monitor .kpi .k{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.fp-monitor .kpi .k .ic{width:16px;height:16px;padding:2px;border-radius:50%}
.fp-monitor .kpi .kpi-value{font-size:var(--mon-fs-kpi);font-weight:600;color:var(--ink);margin-top:4px;letter-spacing:-.01em}
.fp-monitor .kpi .sub{font-size:11px;color:var(--muted);margin-top:1px}
.fp-monitor .kpi.k-fresh .ic{color:var(--fresh);background:var(--fresh-bg)}.fp-monitor .kpi.k-stale .ic{color:var(--stale);background:var(--stale-bg)}
.fp-monitor .kpi.k-deviate .ic{color:var(--deviate);background:var(--deviate-bg)}.fp-monitor .kpi.k-rev .ic{color:var(--rev);background:var(--rev-bg)}
.fp-monitor .kpi.k-nodata .ic{color:var(--nodata);background:var(--nodata-bg)}

/* ---------- grid + cards ---------- */
.fp-monitor .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--mon-gap)}
.fp-monitor .span-12{grid-column:span 12}.fp-monitor .span-7{grid-column:span 7}.fp-monitor .span-6{grid-column:span 6}.fp-monitor .span-5{grid-column:span 5}.fp-monitor .span-4{grid-column:span 4}
.fp-monitor .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--mon-r);min-width:0;box-shadow:var(--mon-shadow);overflow:hidden}
.fp-monitor .card>header{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:10px var(--mon-pad);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface-hi),var(--surface))}
.fp-monitor .card>header h2{font-size:13px;margin:0;font-weight:650;display:flex;align-items:center;gap:8px}
/* a small pipe joint before each card title */
.fp-monitor .card>header h2::before{content:"";width:8px;height:8px;border-radius:2px;border:2px solid var(--mon-area);flex:none}
.fp-monitor .card>header .hint{margin-left:auto;font-size:11px;color:var(--muted)}
.fp-monitor .card .body{padding:var(--mon-pad)}
.fp-monitor .card svg.fig{display:block;width:100%;height:auto}

/* ---------- status pills: icon + text, never colour alone ---------- */
.fp-monitor .st{display:inline-flex;align-items:center;gap:5px;padding:1px 9px 1px 6px;border-radius:999px;font-weight:600;font-size:12px;white-space:nowrap;line-height:1.5;border:1px solid transparent}
.fp-monitor .st-fresh{background:var(--fresh-bg);color:var(--fresh-fg);border-color:color-mix(in srgb,var(--fresh) 30%,transparent)}.fp-monitor .st-fresh .ic{color:var(--fresh)}
.fp-monitor .st-stale{background:var(--stale-bg);color:var(--stale-fg);border-color:color-mix(in srgb,var(--stale) 30%,transparent);border-style:dashed}.fp-monitor .st-stale .ic{color:var(--stale)}
.fp-monitor .st-rev{background:var(--rev-bg);color:var(--rev-fg);border-color:color-mix(in srgb,var(--rev) 40%,transparent)}.fp-monitor .st-rev .ic{color:var(--rev)}
.fp-monitor .st-deviate{background:var(--deviate-bg);color:var(--deviate-fg);border-color:color-mix(in srgb,var(--deviate) 30%,transparent)}.fp-monitor .st-deviate .ic{color:var(--deviate)}
.fp-monitor .st-nodata{background:var(--nodata-bg);color:var(--nodata-fg);border-color:color-mix(in srgb,var(--nodata) 35%,transparent);border-style:dotted}.fp-monitor .st-nodata .ic{color:var(--nodata)}
.fp-monitor .legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:4px 0 0;font-size:12px;color:var(--ink-2)}

/* ---------- chart text ---------- */
.fp-monitor .fig text{font-family:var(--font);font-size:11px;fill:var(--ink-2)}
.fp-monitor .fig .tm{fill:var(--muted)}

/* ---------- charts ---------- */
.fp-monitor .fig .grid-l{stroke:var(--viz-grid);stroke-width:1;stroke-dasharray:2 4}
.fp-monitor .fig .axis{stroke:var(--line-2);stroke-width:1}
.fp-monitor .fig .band{fill:var(--viz-band)}
.fp-monitor .fig .band-edge{stroke:var(--viz-band-edge);stroke-width:1.2;stroke-dasharray:5 4}
.fp-monitor .fig .ref{stroke:var(--viz-ref);stroke-width:1.2;stroke-dasharray:2 3;fill:none}
.fp-monitor .fig .s{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.fp-monitor .fig .s1{stroke:var(--viz-1)}.fp-monitor .fig .s2{stroke:var(--viz-2)}.fp-monitor .fig .s3{stroke:var(--viz-3)}.fp-monitor .fig .s4{stroke:var(--viz-4)}
.fp-monitor .fig .s5{stroke:var(--viz-5);stroke-dasharray:6 3}.fp-monitor .fig .s6{stroke:var(--viz-6);stroke-dasharray:2 3}.fp-monitor .fig .s7{stroke:var(--viz-7);stroke-dasharray:8 3 2 3}.fp-monitor .fig .s8{stroke:var(--viz-8);stroke-dasharray:1 2}
.fp-monitor .fig .bar{fill:var(--viz-1);opacity:.9;rx:1.5px}
.fp-monitor .fig .bar.b2{fill:var(--viz-2)}.fp-monitor .fig .bar.b3{fill:var(--viz-3)}.fp-monitor .fig .bar.b4{fill:var(--viz-4)}
.fp-monitor .fig .bar:hover{opacity:1;fill:var(--brand)}
.fp-monitor .fig .dot{fill:var(--viz-1)}
/* tooltip targets (ui.js adds one per point, each with a <title>): invisible until hovered/focused */
.fp-monitor .fig .pt{fill:transparent;stroke:none;cursor:crosshair}
.fp-monitor .fig .pt:hover{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.fp-monitor .v1{background:var(--viz-1)}.fp-monitor .v2{background:var(--viz-2)}.fp-monitor .v3{background:var(--viz-3)}.fp-monitor .v4{background:var(--viz-4)}
.fp-monitor .v5{background:var(--viz-5)}.fp-monitor .v6{background:var(--viz-6)}.fp-monitor .v7{background:var(--viz-7)}.fp-monitor .v8{background:var(--viz-8)}

/* ---------- tables ---------- */
.fp-monitor .table-wrap{max-height:330px;overflow:auto;border-radius:var(--mon-r-sm);scrollbar-color:var(--line-2) transparent;scrollbar-width:thin}
.fp-monitor table.data{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--mon-fs)}
.fp-monitor table.data caption{text-align:left;padding:0 var(--mon-pad) 8px;color:var(--muted);font-size:12px;caption-side:top}
.fp-monitor table.data thead th{position:sticky;top:0;z-index:2;background:var(--mon-sticky);color:var(--ink-2);font-weight:600;font-size:var(--mon-fs-sm);text-align:left;padding:0 var(--mon-pad);height:32px;
  border-bottom:1px solid var(--line-2);white-space:nowrap;box-shadow:0 6px 10px -8px rgba(0,0,0,.7)}
.fp-monitor table.data th[aria-sort]{color:var(--ink)}
.fp-monitor table.data th[aria-sort] span::after{content:" \25BE";color:var(--brand)}
.fp-monitor table.data tbody th{font-weight:600;text-align:left;padding:0 var(--mon-pad);border-bottom:1px solid var(--line);white-space:nowrap;color:var(--ink);height:var(--mon-row-h)}
.fp-monitor table.data td{height:var(--mon-row-h);padding:0 var(--mon-pad);border-bottom:1px solid var(--line);white-space:nowrap;color:var(--ink)}
.fp-monitor table.data tbody tr:nth-child(even)>*{background:var(--mon-row-alt)}
.fp-monitor table.data tbody tr:hover>*,.fp-monitor table.data tbody tr.hover>*{background:var(--mon-row-hover)}
.fp-monitor table.data tbody tr:last-child>*{border-bottom:0}
/* status pipe on the leading cell: solid = fresh, dashed = stale, double = reverting, solid magenta = deviating, dotted = no data */
.fp-monitor table.data tbody tr>:first-child{border-left:3px solid transparent}
.fp-monitor table.data tbody tr:has(>td:first-child>.st-fresh)>:first-child{border-left-color:color-mix(in srgb,var(--fresh) 70%,transparent)}
.fp-monitor table.data tbody tr:has(>td:first-child>.st-stale)>:first-child{border-left:3px dashed var(--stale)}
.fp-monitor table.data tbody tr:has(>td:first-child>.st-rev)>:first-child{border-left:3px double var(--rev)}
.fp-monitor table.data tbody tr:has(>td:first-child>.st-deviate)>:first-child{border-left-color:var(--deviate)}
.fp-monitor table.data tbody tr:has(>td:first-child>.st-nodata)>:first-child{border-left:3px dotted var(--nodata)}
.fp-monitor table.data th.num,.fp-monitor table.data td.num{text-align:right}
.fp-monitor table.data td.mono{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.fp-monitor table.data td .sub{color:var(--muted);font-size:11px;margin-left:4px}
.fp-monitor .spark{width:96px;height:20px;display:block}
.fp-monitor .spark .sl{fill:none;stroke:var(--spark);stroke-width:1.4;stroke-linejoin:round}
.fp-monitor .spark .band{fill:var(--viz-band)}
.fp-monitor .dev-warn{color:var(--deviate-fg);font-weight:650}

/* ---------- empty, loading, error ---------- */
.fp-monitor .state{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:calc(var(--mon-pad) + 6px);min-height:140px}
.fp-monitor .state h3,.fp-monitor .state .state-h{margin:0;font-size:14px;font-weight:650}
.fp-monitor .state p{margin:0;color:var(--muted);font-size:12px;max-width:70ch}
.fp-monitor .state>.ic{width:34px;height:34px;padding:8px;border-radius:10px;color:var(--nodata);background:var(--nodata-bg);border:1px solid var(--line)}
.fp-monitor .btn{font:inherit;font-size:12px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);border-radius:var(--mon-r-sm);padding:3px 10px;cursor:pointer;transition:background .15s}
.fp-monitor .btn:hover{background:var(--surface-3)}
.fp-monitor .state.err{border-left:3px dotted var(--nodata);background:linear-gradient(90deg,var(--nodata-bg),transparent 60%)}
.fp-monitor .state.err>.ic{color:var(--nodata-fg)}