/* /stats/masternodes/ additions. v2.1 monitor tokens only: every colour is a var(); no new colours, no webfonts. */

/* status pills: Active reuses the Fresh set, Penalized the Reverting set, Standby is neutral (solid line, pause glyph) */
.fp-monitor .st-active{background:var(--fresh-bg);color:var(--fresh-fg);border-color:color-mix(in srgb,var(--fresh) 30%,transparent)}
.fp-monitor .st-active .ic{color:var(--fresh)}
.fp-monitor .st-penalized{background:var(--rev-bg);color:var(--rev-fg);border-color:color-mix(in srgb,var(--rev) 40%,transparent)}
.fp-monitor .st-penalized .ic{color:var(--rev)}
.fp-monitor .st-standby{background:var(--surface-2);color:var(--ink-2);border-color:var(--line-2)}
.fp-monitor .st-standby .ic{color:var(--ink-2)}

/* row pipe on the address cell, same language as the other tables: solid = active, double = penalized, none = standby */
.fp-monitor table.mn-table tbody tr:has(.st-active)>:first-child{border-left-color:color-mix(in srgb,var(--fresh) 70%,transparent)}
.fp-monitor table.mn-table tbody tr:has(.st-penalized)>:first-child{border-left:3px double var(--rev)}

/* health strip */
.fp-monitor .mn-health .body{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px var(--mon-pad)}
.fp-monitor .mn-health .grp{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.fp-monitor .mn-health .num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.fp-monitor .mn-health .sep{width:1px;align-self:stretch;background:var(--line)}
.fp-monitor .mn-health p{margin:0;color:var(--muted);font-size:12px}

/* epoch progress inside the KPI card: native <progress>, value set in markup */
.fp-monitor .mn-progress{display:block;width:100%;height:6px;margin-top:6px;border:0;border-radius:3px;background:var(--surface-3);color:var(--viz-1);appearance:none;-webkit-appearance:none;overflow:hidden}
.fp-monitor .mn-progress::-webkit-progress-bar{background:var(--surface-3);border-radius:3px}
.fp-monitor .mn-progress::-webkit-progress-value{background:var(--viz-1);border-radius:3px}
.fp-monitor .mn-progress::-moz-progress-bar{background:var(--viz-1);border-radius:3px}
.fp-monitor .kpi .kpi-value .sub{font-size:13px;font-weight:500;color:var(--muted)}

/* table toolbar: status filter + page info */
.fp-monitor .mn-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px var(--mon-pad) 8px}
.fp-monitor .mn-toolbar .seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--mon-r-sm);overflow:hidden}
.fp-monitor .mn-toolbar .seg button{font:inherit;font-size:12px;border:0;background:transparent;color:var(--ink-2);padding:4px 10px;min-height:28px;cursor:pointer}
.fp-monitor .mn-toolbar .seg button+button{border-left:1px solid var(--line-2)}
.fp-monitor .mn-toolbar .seg button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
.fp-monitor .mn-toolbar .count{margin-left:auto;color:var(--muted);font-size:12px}

/* sortable headers: a real button in each th; th[aria-sort] keeps the existing arrow */
.fp-monitor table.data th .mn-sort{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;min-height:24px;white-space:nowrap}
.fp-monitor table.data th.num .mn-sort{justify-content:flex-end;width:100%}
.fp-monitor table.data th:not([aria-sort]) .mn-sort span::after{content:" \25B4\25BE";color:var(--muted);font-size:10px}

/* address cell: short address link + copy button */
.fp-monitor .mn-addr{display:inline-flex;align-items:center;gap:6px}
.fp-monitor .mn-addr a{font-family:var(--mono);font-size:12px;color:var(--brand);text-decoration:none}
.fp-monitor .mn-addr a:hover{text-decoration:underline}
.fp-monitor .mn-addr a .ic{width:12px;height:12px;vertical-align:-1px;margin-left:3px}
.fp-monitor .mn-copy{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:1px solid var(--line-2);border-radius:var(--mon-r-sm);background:var(--surface-2);color:var(--ink-2);cursor:pointer}
.fp-monitor .mn-copy:hover{background:var(--surface-3);color:var(--ink)}
.fp-monitor .mn-copy .ic{width:13px;height:13px}
.fp-monitor table.mn-table td .muted{color:var(--muted)}
.fp-monitor table.mn-table td.warn{color:var(--stale-fg);font-weight:650}
.fp-monitor .mn-table-wrap{max-height:none}

/* pager */
.fp-monitor .mn-pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px var(--mon-pad);border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.fp-monitor .mn-pager .btn{min-height:28px}
.fp-monitor .mn-pager .btn[aria-disabled=true]{color:var(--muted);cursor:not-allowed}
.fp-monitor .mn-pager .grow{flex:1}
.fp-monitor .mn-more{display:none}

/* chart extras */
.fp-monitor .fig .bar.partial{fill:none;stroke:var(--viz-1);stroke-width:1.5;stroke-dasharray:4 3}
.fp-monitor .fig .vl{font-weight:650;fill:var(--ink)}
.fp-monitor .legend .lg.lg-partial{background:none;border:1.5px dashed var(--viz-1);height:8px;width:12px}

/* Coming soon card and method list */
.fp-monitor .mn-soon .state{min-height:0}
.fp-monitor .mn-soon .state>.ic{color:var(--ink-2);background:var(--surface-2)}
.fp-monitor .mn-method .body{padding:12px var(--mon-pad)}
.fp-monitor .mn-method .kv{font-size:12.5px}
.fp-monitor .mn-method .kv dd{color:var(--ink-2);min-width:0}
.fp-monitor .mn-crosslink{margin:10px 0 0;font-size:12.5px;color:var(--ink-2)}
.fp-monitor .mn-crosslink a,.fp-monitor .lede a,.fp-monitor .mn-method a{color:var(--brand)}

/* states page */
.fp-monitor .mn-statehead{margin:22px 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:650}
.fp-monitor .mn-skelrow{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1.4fr;gap:14px;padding:12px var(--mon-pad);border-bottom:1px solid var(--line)}
.fp-monitor .kpi .skel{margin-top:10px}

/* phones: the 6-column table becomes one card per node, first 10 rows, then "Show 10 more" */
@media (max-width:560px){
  .fp-monitor table.mn-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .fp-monitor table.mn-table,.fp-monitor table.mn-table tbody{display:block}
  .fp-monitor table.mn-table caption{display:block}
  .fp-monitor table.mn-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding:10px 12px;border-bottom:1px solid var(--line);border-left:3px solid transparent}
  .fp-monitor table.mn-table tbody tr>*,.fp-monitor table.mn-table tbody td.num{display:block;position:static;height:auto;padding:0;border:0;background:none;box-shadow:none;white-space:normal;text-align:left}
  .fp-monitor table.mn-table tbody tr>:first-child{grid-column:1/-1;border-left:0;position:static;box-shadow:none;background:none}
  .fp-monitor table.mn-table tbody tr:has(.st-active){border-left-color:color-mix(in srgb,var(--fresh) 70%,transparent)}
  .fp-monitor table.mn-table tbody tr:has(.st-penalized){border-left:3px double var(--rev)}
  .fp-monitor table.mn-table tbody tr:nth-child(even){background:var(--mon-row-alt)}
  .fp-monitor table.mn-table tbody tr:nth-child(even)>*{background:none}
  .fp-monitor table.mn-table td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:2px}
  .fp-monitor table.mn-table tbody tr:nth-child(n+11){display:none}
  .fp-monitor .mn-more{display:inline-flex}
  .fp-monitor .mn-pager .pg{display:none}
  .fp-monitor .mn-toolbar .count{margin-left:0;width:100%}
  .fp-monitor .mn-toolbar .seg{width:100%}
  .fp-monitor .mn-toolbar .seg button{flex:1;padding:4px 6px}
  .fp-monitor .mn-health .sep{display:none}
  .fp-monitor .mn-skelrow{grid-template-columns:1fr 1fr}
  .fp-monitor .mn-method .kv{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .fp-monitor .mn-method .kv dd{margin-bottom:8px}
}


/* tidy v2.2: 44 px targets on touch widths, filter empty state, "Show all" on phones */
@media (max-width:768px){
  .fp-monitor .mn-toolbar .seg button,.fp-monitor .mn-pager .btn{min-height:44px}
}
.fp-monitor .mn-empty{margin:0;padding:12px var(--mon-pad)}
@media (max-width:560px){
  .fp-monitor table.mn-table.mn-all tbody tr:nth-child(n+11):not([hidden]){display:grid}
  .fp-monitor .mn-more{margin:10px var(--mon-pad) 12px}
}