/* FeedPlumb monitor v2: bolder page head, larger KPI numbers and a branded band. Tokens only, so the Midnight, Dusk and Graphite variants keep their own colours (and their checked contrast). Loaded after app.css on every Oracle Tracker and Stats page. The only motion is the Oracle Tracker glyph pulse, under prefers-reduced-motion: no-preference. */ .fp-monitor .titlebar{position:relative;align-items:center;gap:10px 16px;padding:20px 22px 18px 26px;border:1px solid var(--line); border-radius:calc(var(--mon-r) + 4px);background:radial-gradient(120% 160% at 0% 0%,var(--brand-soft),transparent 62%),linear-gradient(180deg,var(--surface-hi),var(--surface)); box-shadow:var(--mon-shadow);overflow:hidden;isolation:isolate} .fp-monitor .titlebar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--brand),var(--accent))} .fp-monitor .titlebar::after{content:"";position:absolute;z-index:-1;right:-40px;top:-60px;width:260px;height:180px;border-radius:50%; border:1px solid var(--line-2);opacity:.5;box-shadow:0 0 0 28px transparent,inset 0 0 0 28px transparent} .fp-monitor .titlebar h1{font-size:clamp(22px,1.2rem + 1vw,30px);font-weight:750;letter-spacing:-.028em;line-height:1.12} .fp-monitor .titlebar .meta{font-size:12.5px} .fp-monitor .lede{font-size:15px;margin-top:2px} .fp-monitor .kpi{border-radius:calc(var(--mon-r) + 2px);padding:14px 16px 13px} .fp-monitor .kpi::before{height:3px} .fp-monitor .kpi .kpi-value{font-size:calc(var(--mon-fs-kpi) + 6px);font-weight:700;letter-spacing:-.025em;line-height:1.1} .fp-monitor .card{border-radius:calc(var(--mon-r) + 2px)} .fp-monitor .card>header h2{font-size:14px;font-weight:700;letter-spacing:-.005em} .fp-monitor .card>header h2::before{border-radius:3px;background:var(--mon-area);border-color:var(--mon-area);width:9px;height:9px} /* Oracle Tracker pipeline glyph (v2.1): fresh state of the pipeline view, tokens only so each variant keeps its colours */ .fp-monitor .titlebar .tb-glyph{flex:none;display:block;width:176px;height:44px} .fp-monitor .g-pipe{fill:none;stroke:var(--pipe-live);stroke-width:2.5;stroke-linecap:round} .fp-monitor .g-pulse{fill:none;stroke:var(--pipe-pulse);stroke-width:4;stroke-linecap:round;stroke-dasharray:1 160;visibility:hidden} .fp-monitor .g-src{fill:var(--brand)} .fp-monitor .g-node{fill:var(--surface);stroke:var(--fresh);stroke-width:2.5} .fp-monitor .g-check{fill:none;stroke:var(--fresh);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .fp-monitor .g-arrow{fill:var(--pipe-live)} .fp-monitor .g-dest{fill:var(--surface-hi);stroke:var(--line-2);stroke-width:2} .fp-monitor .g-dest-l{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round} @media (prefers-reduced-motion:no-preference){ /* one small pulse per 2.4 s while a check or recheck is running (html.fp-busy); it passes under the oracle node */ .fp-busy .fp-monitor .g-pulse{visibility:visible;animation:fp-glyph-pulse 2.4s linear infinite} @keyframes fp-glyph-pulse{from{stroke-dashoffset:0}to{stroke-dashoffset:-122}} } /* Method page: thresholds table (v2.1). Sentences wrap instead of scrolling sideways; constant names break after "_". */ .fp-monitor .table-wrap.cfg-wrap{max-height:none;overflow:visible} .fp-monitor table.cfg tbody th,.fp-monitor table.cfg td{height:auto;padding-block:10px;white-space:normal;vertical-align:top;line-height:1.5} .fp-monitor table.cfg tbody th{width:34%} .fp-monitor table.cfg td.num{width:9rem;white-space:nowrap;font-family:var(--mon-font-num)} .fp-monitor table.cfg td:last-child{color:var(--ink-2)} .fp-monitor table.cfg code{font-size:12.5px;color:var(--ink);overflow-wrap:anywhere} @media (max-width:640px){ .fp-monitor .titlebar{padding:16px 16px 14px 20px} .fp-monitor .titlebar::after{display:none} .fp-monitor .titlebar .tb-glyph{width:132px;height:33px} .fp-monitor .kpi .kpi-value{font-size:calc(var(--mon-fs-kpi) + 2px)} } @media (max-width:768px){ /* app.css stacks narrow tables here: name, then value, then the meaning across the full width */ .fp-monitor table.cfg tbody th,.fp-monitor table.cfg td,.fp-monitor table.cfg td.num{width:auto} .fp-monitor table.cfg tbody tr>td{grid-column:1/-1} .fp-monitor table.data.cfg[data-cols="3"] tbody tr>td.num{white-space:nowrap} } /* Snapshot first, live later (with the engine update): the page paints from the snapshot and swaps in live data later. The Re-check button keeps its width while it reads "Checking…", and on phones the meta line keeps the same height in every state (snapshot, checking, live, error), so nothing below it moves (CLS). */ .fp-monitor #reprobe{min-width:9.5ch} .fp-monitor .titlebar .meta .snaplabel{line-height:1} @media (max-width:768px){ .fp-monitor .titlebar .meta{flex-basis:100%;min-height:calc(var(--mon-fs-sm) * 2.8);min-height:2lh;align-content:flex-start} .fp-monitor .titlebar .meta>#metalabel{flex-basis:100%;min-height:calc(var(--mon-fs-sm) * 2.8);min-height:2lh} } /* same-size stand-in for the live chart (loading or RPC error) */ .fp-monitor .fig-ph{aspect-ratio:1200/200;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:var(--mon-fs-sm);padding:0 var(--mon-pad)} /* v2.1 phone header: brand, area badge and theme switcher stay on one line at 320-480 px (the section nav is the second row). The badge reads "TRACKER" visually; "Oracle " is clipped, not removed, so its accessible name stays "Oracle Tracker". The back link repeats the brand link (same target, "FeedPlumb home") and is dropped below 560 px. */ @media (max-width:768px){.fp-monitor{min-width:320px}.fp-monitor .chrome .right{flex-wrap:nowrap}} @media (max-width:560px){.fp-monitor .chrome .back{display:none}} @media (max-width:480px){ .fp-monitor .chrome .area-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .fp-monitor .chrome .area{padding:2px 7px;letter-spacing:.1em;white-space:nowrap} .fp-monitor .chrome .seg button{min-width:24px;min-height:24px;justify-content:center;padding:3px 6px} } @media (max-width:359px){.fp-monitor .chrome{gap:6px 8px;padding-left:10px;padding-right:10px}.fp-monitor .chrome .brandlink{gap:6px}} /* Site menu (v2.1 home mobile menu, phones only): hamburger at the end of the header's one line, the drawer opens as an overlay under the header (absolute: no layout shift). Existing monitor tokens only; no animation. */ .fp-monitor .chrome .iconbtn.menu{display:none} @media (max-width:768px){ .fp-monitor .chrome{position:relative} /* F3: drawn like the home iconbtn (36 px box, 1 px border, 9 px radius, surface background) inside a 44 px tap area */ .fp-monitor .chrome .iconbtn.menu{position:relative;isolation:isolate;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;margin-right:-4px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--ink);cursor:pointer} .fp-monitor .chrome .iconbtn.menu::before{content:"";position:absolute;inset:4px;z-index:-1;box-sizing:border-box;border:1px solid var(--mon-chrome-line);border-radius:9px;background:var(--surface)} .fp-monitor .chrome .iconbtn.menu:hover::before,.fp-monitor .chrome .iconbtn.menu[aria-expanded=true]::before{background:var(--surface-2)} .fp-monitor .chrome .iconbtn.menu:focus-visible{outline:2px solid var(--brand);outline-offset:-2px} .fp-monitor .chrome .drawer{position:absolute;top:100%;left:0;right:0;z-index:20;background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line-2);box-shadow:var(--mon-shadow-lg)} .fp-monitor .chrome .drawer[hidden]{display:none} } @media (min-width:769px){.fp-monitor .chrome .drawer{display:none}} .fp-monitor .drawer-nav{padding:4px 12px 8px} /* F1: the header's "Data sections" nav rules (.fp-monitor .chrome nav: flex, 38 px high, scroll strip) must not reach the drawer */ .fp-monitor .chrome .drawer .drawer-nav{display:block;order:0;width:auto;height:auto;margin:0;overflow:visible;gap:0} .fp-monitor .chrome .drawer .drawer-nav a{transition:none} .fp-monitor .chrome .drawer .drawer-nav a::after{content:none} .fp-monitor .drawer-list{list-style:none;margin:0;padding:0} .fp-monitor .drawer-list>li{margin:0;border-bottom:1px solid var(--line)} .fp-monitor .drawer-list>li:last-child{border-bottom:0} .fp-monitor .drawer-home,.fp-monitor .chrome .drawer .drawer-home{display:flex;align-items:center;min-height:48px;box-sizing:border-box;padding:14px 8px;color:var(--ink);font-size:1.02rem;font-weight:650;line-height:1.25;text-decoration:none} .fp-monitor .drawer-home:hover{background:var(--surface-2)} /* F4: the current page keeps the normal text colour and is marked with the teal bar */ .fp-monitor .drawer-home[aria-current]{color:var(--ink);box-shadow:inset 3px 0 0 var(--mon-area)} .fp-monitor .drawer-home:focus-visible{outline:2px solid var(--brand);outline-offset:-2px} @media (max-width:359px){.fp-monitor .chrome .right{gap:4px}.fp-monitor .chrome .iconbtn.menu{margin-right:-10px}.fp-monitor .chrome .area{letter-spacing:.06em}.fp-monitor .chrome .brandlink{font-size:13px}} /* Tidy v2.2: chart legends read in every variant (thicker keys; dashed keys match the dashed series s5-s8) */ .fp-monitor .legend .lg{height:4px;border-radius:2px} .fp-monitor .legend .lg:is(.v5,.v6,.v7,.v8){height:0;border-top:3px dashed;background:none} .fp-monitor .legend .lg.v5{border-top-color:var(--viz-5)}.fp-monitor .legend .lg.v6{border-top-color:var(--viz-6)} .fp-monitor .legend .lg.v7{border-top-color:var(--viz-7)}.fp-monitor .legend .lg.v8{border-top-color:var(--viz-8)} /* Tidy v2.2: 44 px touch targets on phones (header, section links, buttons). Below 481 px the brand link keeps its mark and the word "FeedPlumb" is clipped, not removed (accessible name unchanged), so the header still fits on one line at 320 px. */ @media (max-width:768px){ .fp-monitor .chrome .brandlink{min-height:44px} .fp-monitor .chrome nav:not(.drawer-nav){height:44px} .fp-monitor .chrome nav:not(.drawer-nav) a{min-width:44px;justify-content:center} .fp-monitor .chrome .seg button{min-width:44px;min-height:44px;justify-content:center} .fp-monitor .rail ul.links a{display:flex;align-items:center;min-height:44px} .fp-monitor .btn,.fp-monitor .filters-toggle{min-height:44px} .fp-monitor .skip{display:flex;align-items:center;min-height:44px} } /* Tidy v2.2: up to 413 px the brand shows its mark only (the link keeps its accessible name), so the 44 px theme buttons and the menu toggle fit on the brand row */ @media (max-width:413px){ .fp-monitor .chrome .brandlink{min-width:44px;justify-content:center} .fp-monitor .chrome .brandlink .bl-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} } /* Tidy v2.2: below 360 px the 44 px theme buttons and the menu toggle stay on the brand row on /check/ too ("TRACKER" is the widest area badge): 6 px gaps and a 5 px badge padding free the 8 px it needs; the toggle keeps margin-right:-10px */ @media (max-width:359px){.fp-monitor .chrome{column-gap:6px}.fp-monitor .chrome .area{padding:2px 5px}} /* Tidy v2.2: KPI values fit their card on small phones (the 9-digit Block height was clipped at 320 px): the value scales with the viewport below 401 px and may break between words as a last resort */ @media (max-width:400px){ .fp-monitor .kpi{padding:12px 12px 11px} .fp-monitor .kpi .kpi-value{font-size:min(calc(var(--mon-fs-kpi) + 2px),5.6vw);overflow-wrap:anywhere} } /* Tidy v2.2: 769-1023 px (tablet / small laptop). The full desktop header (nav, row density, theme, back link) needs about 950 px, so /check/ and the stats pages scrolled sideways by up to 178 px at 769 px. Here the back link and the brand wordmark are dropped (the logo link keeps its accessible name and goes to the same place, as on phones), the nav is tightened and nothing in the header wraps or clips. 769-1365 px: KPI tiles in 3 columns instead of 6 squeezed ones, and above phone width a KPI value scales down with its tile (container units) so long numbers such as the block height are never cut off (v2.1 clipped it at every desktop width up to about 1600 px). */ @media (min-width:769px) and (max-width:1023px){ .fp-monitor .chrome .back{display:none} .fp-monitor .chrome .bl-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .fp-monitor .chrome nav:not(.drawer-nav) a{padding:0 8px;white-space:nowrap} .fp-monitor .chrome .area-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .fp-monitor .chrome .seg{flex-shrink:0} } @media (min-width:769px) and (max-width:1365px){ .fp-monitor .kpis{grid-template-columns:repeat(3,minmax(0,1fr))} .fp-monitor .kpis::before{display:none} } @media (min-width:769px){ .fp-monitor .kpi{container-type:inline-size} .fp-monitor .kpi .kpi-value{font-size:min(calc(var(--mon-fs-kpi) + 6px),13.5cqi)} /* 13.5cqi: "#108,636,323" on /stats/masternodes/ fits too */ } /* Tidy v2.2 (G41): below 360 px the four header links keep 44 px targets with tighter side padding, so "Method" ends inside the viewport with room to spare (it ended at 325 px at a 320 px viewport). */ @media (max-width:359px){ .fp-monitor .chrome nav:not(.drawer-nav) a{padding:0 7px} .fp-monitor .chrome nav:not(.drawer-nav) a[aria-current=page]::after{left:7px;right:7px} } /* Tidy v2.2: Stats / Oracle Tracker section list as a
disclosure (ui.js sectionLinks). Desktop: always open, no summary. Phones: collapsed to one 44 px row by default; opened, the two groups sit side by side as before. */ .fp-monitor .rail-sec>summary{display:none} .fp-monitor .rail-sec-body{display:flex;flex-direction:column;gap:18px} @media (max-width:768px){ .fp-monitor .rail.rail-min{display:block;padding-top:0;padding-bottom:0} .fp-monitor .rail-sec>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;cursor:pointer;list-style:none;color:var(--ink);font-weight:600} .fp-monitor .rail-sec>summary::-webkit-details-marker{display:none} .fp-monitor .rail-sec>summary::after{content:"";width:8px;height:8px;margin-right:4px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:translateY(-2px) rotate(45deg)} .fp-monitor .rail-sec[open]>summary::after{transform:translateY(2px) rotate(-135deg)} .fp-monitor .rail-sec>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .fp-monitor .rail-sec-cur{color:var(--ink-2);font-weight:400} .fp-monitor .rail-sec-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding-bottom:12px} } /* tidy v2.2: top of Stats pages: Network select + refresh status row (recheck.js) */ .fp-monitor .stats-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 var(--mon-gap,12px)} .fp-monitor .stats-top .net-pick{margin:0} .fp-monitor .rc-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;min-width:0;font-size:12.5px;color:var(--ink-2)} .fp-monitor .rc-row time{color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums} .fp-monitor .rc-btn{min-height:32px;background:var(--surface);color:var(--ink);font-weight:600} .fp-monitor .rc-btn[aria-disabled=true]{cursor:not-allowed;background:var(--surface-2);color:var(--ink-2);border-style:dashed} .fp-monitor .rc-btn[aria-disabled=true]:hover{background:var(--surface-2)} .fp-monitor .stats-cross{margin:12px 0 0} @media (max-width:768px){ .fp-monitor .rc-btn{min-height:44px} .fp-monitor .stats-top{align-items:flex-start} } @media (prefers-reduced-motion:reduce){ .fp-monitor .rc-btn{transition:none} } /* storx.patch (G45-G49): StorX (SRX) view, Oracle Tracker test-network label. Tokens only, no new colours; strict CSP. */ /* G49: "Last updated