/* Monitor page additions on top of the components (tokens only; no new colours): helpers, CSP helper classes and the
   phone layout. Snapshot-first meta line and chart stand-in live in monitor-v2.css (tidy v2.2: duplicates removed here). */
.fp-monitor .flag{display:inline-block;font-size:11px;padding:0 5px;border:1px dashed var(--line-2);border-radius:4px;background:var(--surface-2);color:var(--ink-2);margin-left:4px;white-space:nowrap}
.fp-monitor .mono{font-family:var(--mono)}
.fp-monitor .muted{color:var(--muted)}
.fp-monitor .snaplabel{font-family:var(--mono);font-size:11px;color:var(--muted)}
.fp-monitor .prose{max-width:78ch;line-height:1.55}
.fp-monitor .prose code,.fp-monitor td code{font-family:var(--mono);font-size:.92em}
.fp-monitor .prose dt{font-weight:650;margin-top:10px}
.fp-monitor .legend .lg{display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:middle}
.fp-monitor .legend .lg.lg-ref{background:none;border-top:2px dashed var(--ink-2);height:0}
.fp-monitor .legend span{display:inline-flex;align-items:center;margin-right:12px;font-size:12px}
.fp-monitor .kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:0}
.fp-monitor .kv dt{color:var(--muted)}.fp-monitor .kv dd{margin:0}
.fp-monitor tr.sel td,.fp-monitor tr.sel th{outline:1px solid var(--brand)}
.fp-monitor .card.tall .table-wrap{max-height:none}
.fp-monitor .card.mid .table-wrap{max-height:460px}
@media (max-width:1100px){.fp-monitor .span-6,.fp-monitor .span-7,.fp-monitor .span-5,.fp-monitor .span-4{grid-column:span 12}}
.fp-monitor .lede{max-width:90ch;margin:0 0 12px;color:var(--ink-2);line-height:1.5}

/* replace inline style attributes (ui.js fatal, stats.js pool-not-found) so a strict CSP (style-src 'self') holds */
.fp-monitor .fatal-main{padding:24px}
.fp-monitor .center{text-align:center}

/* ---------- phone layout (Stats and Check), 375 px minimum ---------- */
@media (max-width:768px){
  .fp-monitor{min-width:375px}
  .fp-monitor .chrome{position:static;height:auto;flex-wrap:wrap;gap:6px 10px;padding:8px 12px 0}
  .fp-monitor .chrome nav{order:3;width:100%;height:38px;margin:0 -4px;overflow-x:auto;scrollbar-width:none}
  .fp-monitor .chrome nav a{padding:0 10px;white-space:nowrap}
  .fp-monitor .chrome .right{gap:8px}
  .fp-monitor .chrome .seg[aria-label="Row density"]{display:none}
  .fp-monitor .chrome .back{border-left:0;padding-left:0}
  .fp-monitor .shell{grid-template-columns:minmax(0,1fr)}
  .fp-monitor .rail{position:static;max-height:none;min-height:0;overflow:visible;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .fp-monitor .rail>.note,.fp-monitor .rail>.reset{grid-column:1/-1}
  .fp-monitor main{padding:12px 12px 24px}
  .fp-monitor .titlebar .meta{margin-left:0}
  .fp-monitor .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fp-monitor .kpis::before{display:none}
  .fp-monitor .grid>*{grid-column:1/-1}
  .fp-monitor .table-wrap{max-height:70vh}
  /* wide tables (more than 5 columns): horizontal scroll, sticky first column */
  .fp-monitor table.data tr>:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line-2)}
  .fp-monitor table.data thead tr>:first-child{z-index:3;background:var(--mon-sticky)}
  .fp-monitor table.data tbody tr:nth-child(even)>:first-child{background:var(--mon-row-alt)}
  /* narrow tables (5 columns or fewer): one stacked block per row, labels from data-label (set by ui.js) */
  .fp-monitor table.data:is([data-cols="1"],[data-cols="2"],[data-cols="3"],[data-cols="4"],[data-cols="5"]) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .fp-monitor table.data:is([data-cols="1"],[data-cols="2"],[data-cols="3"],[data-cols="4"],[data-cols="5"]) tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;padding:10px 12px;border-bottom:1px solid var(--line)}
  .fp-monitor table.data:is([data-cols="1"],[data-cols="2"],[data-cols="3"],[data-cols="4"],[data-cols="5"]) tbody tr>*{display:block;position:static;height:auto;padding:0;border:0;background:none;box-shadow:none;white-space:normal;text-align:left}
  .fp-monitor table.data:is([data-cols="1"],[data-cols="2"],[data-cols="3"],[data-cols="4"],[data-cols="5"]) tbody tr>:first-child{grid-column:1/-1;font-weight:650}
  .fp-monitor table.data:is([data-cols="1"],[data-cols="2"],[data-cols="3"],[data-cols="4"],[data-cols="5"]) tbody tr>:not(:first-child)[data-label]::before{content:attr(data-label);display:block;font-family:var(--font);font-size:11px;font-weight:500;color:var(--muted)}
  .fp-monitor table.data:is([data-cols="1"],[data-cols="2"],[data-cols="3"],[data-cols="4"],[data-cols="5"]) tbody tr:nth-child(even){background:var(--mon-row-alt)}
  .fp-monitor .card .body{padding:10px}
  .fp-monitor .card>header .hint{margin-left:0;width:100%}
}
/* phone filter toggle (prototype hook; styling comes from .btn) */
.fp-monitor .filters-toggle{display:none}
@media (max-width:768px){
  .fp-monitor .filters-toggle{display:inline-flex;align-items:center;justify-self:start;margin:10px 12px 0;min-height:36px}
  .fp-monitor .rail{display:none}
  .fp-monitor .rail.open,.fp-monitor .rail.rail-min{display:grid}
}

/* /stats/ "Network" dropdown above the title: a native label + select listing the network overviews (XDC Network, PLI ...).
   Fixed height, rendered with the page shell before the first paint, so switching or loading never moves content below it.
   44 px tall; label and select share one line down to 320 px. */
.fp-monitor .net-pick{display:flex;align-items:center;gap:8px;margin:0 0 12px;max-width:100%}
.fp-monitor .net-sel{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;color:var(--ink-2);font-size:14px;font-weight:600}
.fp-monitor .net-pick select{min-height:44px;min-width:0;max-width:100%;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--mon-r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.fp-monitor .net-pick select:hover{border-color:var(--ink-2)}
.fp-monitor .net-pick select:focus-visible{outline:2px solid var(--brand);outline-offset:2px;box-shadow:var(--focus)}
.fp-monitor .net-pick option{background:var(--surface);color:var(--ink)}
/* testnet note next to the dropdown while a testnet is selected: neutral info style (no alarm colours) */
.fp-monitor .net-pick{flex-wrap:wrap}
.fp-monitor .net-note{display:inline-flex;align-items:center;gap:6px;min-height:32px;margin:0;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--mon-r-sm);background:var(--surface-2);color:var(--ink);font-size:13px;font-weight:600}
.fp-monitor .net-note[hidden]{display:none}
.fp-monitor .net-note .ic{width:16px;height:16px;color:var(--ink-2)}
.fp-monitor ul.plain{margin:0;padding-left:1.1em}.fp-monitor ul.plain li{margin:.25em 0}
/* R-stats: the meta line swaps "Loading live chain data… · snapshot" for "Live · block N" when the RPC answers; give it a
   stable box (it fills the rest of the title row, text starts at its left edge, one fixed line height) so nothing moves (CLS 0). */
@media (min-width:561px){.fp-monitor .titlebar .meta{flex:1 1 16rem;justify-content:flex-start;min-height:18px;line-height:18px}}
/* disclaimer footer: sits outside .fp-monitor, so it takes the page colours of the active monitor variant */
.fp-legal{margin:0;padding:20px max(16px,calc((100% - 72rem) / 2)) 24px;font-size:12px;line-height:1.5}.fp-legal p{margin:0}.fp-legal a{color:inherit}
body:has(.fp-monitor[data-variant=midnight]),body:has(.fp-monitor:not([data-variant])){background:#060a13;color:#97a5ba}
body:has(.fp-monitor[data-variant=dusk]){background:#1b2232;color:#a9b4c7}
body:has(.fp-monitor[data-variant=graphite]){background:#131210;color:#a9a298}