/* Network + RPC panels (owner U4). Prefix .net- ; reuses app.css tokens. */
.net-k { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); line-height: 1.3; }
.net-k--dk { color: var(--muted-dk); }
.net-fine { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.net-fine--dk { color: var(--muted-dk); }
.net-sect { scroll-margin-top: calc(var(--strip) + 18px); }
.net-h3 { font-stretch: 112%; font-weight: 600; font-size: 15px; line-height: 1.3; margin-bottom: 8px; }
.net-flash[data-on] { animation: net-flash .9s var(--ease); }
@keyframes net-flash { 0% { color: var(--v); } 100% { color: inherit; } }
@keyframes net-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes net-grow { from { transform: scaleY(0); } to { transform: none; } }

/* jump bar under the page head */
.net-jump { display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap; margin: -6px 0 clamp(24px, 2.6vw, 36px); padding: 9px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.net-jump__live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.net-jump__live [data-ok="no"] { color: var(--v-err); }
.net-jump__l { display: flex; flex-wrap: wrap; gap: 0 18px; margin-left: auto; }
.net-jump__l button { min-height: 32px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: color .15s, text-decoration-color .15s; }
.net-jump__l button:hover { color: #000; text-decoration-color: var(--v); }

/* rolling digits */
.net-odo { display: inline-flex; align-items: flex-start; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1; }
.net-odo__d, .net-odo__c { display: inline-block; height: 1.04em; overflow: hidden; }
.net-odo__s { display: flex; flex-direction: column; transition: transform var(--odo-dur, .7s) var(--ease); }
.net-odo__s > span { display: block; height: 1.04em; line-height: 1.04em; text-align: center; }
.net-odo__c { line-height: 1.04em; }

/* ---------- sequencer controls ---------- */
.net-seq { align-items: stretch; }
.net-ctl { display: grid; gap: 22px; align-content: start; }
.net-mode__seg { margin-top: 8px; }
.net-mode__seg .seg { display: flex; width: 100%; }
.net-mode__seg .seg button { flex: 1 1 0; min-height: 46px; font-size: 14.5px; }
.net-mode__t { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: #262626; animation: net-in .35s var(--ease) both; }
.net-mode__t b { color: #000; font-weight: 600; }
.net-hatch { margin-top: 12px; padding: 12px 14px; background: var(--g2); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.net-hatch__l { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; font-size: 13px; }
.net-hatch__l a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--v); text-underline-offset: 3px; }
.net-hatch__bar { position: relative; height: 4px; margin: 10px 0 8px; background: rgba(0, 0, 0, .12); overflow: hidden; }
.net-hatch__bar i { position: absolute; inset: 0; background: #000; transform-origin: 0 50%; transition: transform .25s linear; }
.net-hatch[data-open] .net-hatch__bar i { background: var(--v); }
.net-hatch .net-fine { font-size: 12px; }

.net-bt__h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.net-bt__v { display: inline-flex; align-items: baseline; gap: 6px; border-bottom: 2px solid #000; transition: border-color .2s; }
.net-bt__v:focus-within { border-bottom-color: var(--v); }
.net-bt__v[data-err] { border-bottom-color: var(--v-err); }
.net-bt__in { width: 4.4ch; padding: 0; border: 0; background: none; outline: none; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; text-align: right; }
.net-bt__u { font-size: 13px; font-weight: 600; color: var(--muted); }
.net-range { --p: .5; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 8px 0 6px; background: transparent; cursor: pointer; }
.net-range::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, #000 calc(var(--p) * 100%), var(--g3) 0); }
.net-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border: 0; background: var(--v); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.net-range::-moz-range-track { height: 4px; background: var(--g3); }
.net-range::-moz-range-progress { height: 4px; background: #000; }
.net-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 0; background: var(--v); }
.net-bt__presets { display: flex; border: 1.5px solid #000; }
.net-bt__presets button { flex: 1 1 0; min-height: 34px; padding: 0 4px; border: 0; background: none; font-family: var(--mono); font-size: 12.5px; transition: background-color .15s, color .15s; }
.net-bt__presets button + button { border-left: 1px solid var(--line-2); }
.net-bt__presets button:hover { background: var(--g2); }
.net-bt__presets button[aria-pressed="true"] { background: #000; color: #fff; }
.net-bt__presets button:focus-visible { outline-offset: -3px; }
.net-bt .net-fine, .net-bt .field__err { margin-top: 8px; }
.net-sw { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.net-probe__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.net-probe__h .net-fine { margin-top: 4px; }
.net-probe__h .btn { flex: none; }
.net-probe .field__err { margin-top: 8px; }
.net-probe__l { margin-top: 10px; }
.net-probe__l li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; animation: net-in .45s var(--ease) both; }
.net-probe__l li a { font-size: 12px; }
.net-probe__s { grid-column: 1 / 3; font-size: 12px; color: var(--muted); }
.net-probe__l li .badge { grid-column: 3; grid-row: 1 / 3; }
.net-probe__l li[data-state="held"] .net-probe__s { color: var(--v); font-weight: 600; }

/* ---------- live monitor (dark) ---------- */
.net-mon { display: flex; flex-direction: column; height: 100%; padding: 20px 22px 16px; }
.net-mon__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.net-mon__big { margin-top: 8px; color: #fff; font-stretch: 125%; font-weight: 600; font-size: clamp(52px, 5.6vw, 88px); letter-spacing: -0.04em; }
.net-mon__mode { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 10px; border: 1.5px solid var(--line-dk); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.net-mon[data-mode="online"] .net-mon__mode { border-color: var(--v-dk); }
.net-mon .dot--online, .net-mon .dot--online::after { background: var(--v-dk); }
.net-mon .dot--offline { box-shadow: inset 0 0 0 1.5px #fff; }
.net-mon .dot--censoring { background: repeating-linear-gradient(135deg, #fff 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1.5px #fff; }
.net-mon__tick { position: relative; height: 2px; margin-top: 16px; background: #1f1f1f; overflow: hidden; }
.net-mon__tick i { position: absolute; inset: 0; background: var(--v-dk); transform-origin: 0 50%; transform: scaleX(0); animation: slotbar var(--dur, 800ms) linear forwards; }
.net-mon__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; margin: 16px 0 20px; }
.net-mon__stats > div { min-width: 0; padding-top: 8px; border-top: 1px solid var(--line-dk); }
.net-mon__stats dt { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-dk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-mon__stats dd { margin: 4px 0 0; color: #fff; font-size: 17px; font-weight: 500; white-space: nowrap; }
.net-mon__stats small { font-size: 11.5px; color: var(--muted-dk); }
.net-mon__foot { margin-top: auto; padding-top: 12px; font-size: 11.5px; color: #8a8a8a; }
.net-rib__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 10px; }
.net-rib__h .net-k { margin-right: auto; }
.net-rib__lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted-dk); }
.net-rib__lg i { width: 10px; height: 10px; background: var(--v-dk); }
.net-rib__lg--b i { width: 1px; height: 12px; background: rgba(255, 255, 255, .6); }
.net-rib__plot { position: relative; height: 128px; overflow: hidden; outline: none; }
.net-rib__plot:focus-visible { outline: 2px solid var(--v-dk); outline-offset: 4px; }
.net-rib__grid { position: absolute; left: 0; right: 0; bottom: 22px; height: 104px; }
.net-rib__grid span { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #262626; }
.net-rib__grid b { position: absolute; left: 0; top: 2px; z-index: 1; padding-right: 5px; background: #000; color: #7a7a7a; font-family: var(--mono); font-size: 10px; font-weight: 400; line-height: 1.2; }
.net-rib__track { position: absolute; left: 0; right: 0; bottom: 22px; height: 104px; display: flex; align-items: flex-end; justify-content: flex-end; will-change: transform; }
.net-rib__col { position: relative; flex: none; display: flex; align-items: flex-end; justify-content: center; width: 14px; height: 100%; text-decoration: none; }
.net-rib__col i { display: block; width: 10px; background: #5e5e5e; transform-origin: 50% 100%; clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 0 100%); animation: net-grow .5s var(--ease) both; transition: background-color .2s; }
.net-rib__col[data-latest] i { background: var(--v-dk); }
.net-rib__col[data-sel] i { background: #fff; }
.net-rib__col[data-edge]::after { content: ""; position: absolute; top: 0; bottom: -7px; right: -1px; width: 1px; background: rgba(255, 255, 255, .32); }
.net-rib__b { position: absolute; bottom: -21px; right: 0; transform: translateX(50%); color: #8f8f8f; font-family: var(--mono); font-size: 10px; white-space: nowrap; }
.net-rib__track[data-dim] .net-rib__col:not([data-sel]) i { background: #3b3b3b; }
.net-rib__gap { position: relative; flex: none; align-self: stretch; margin-left: 2px; border-left: 1px dashed rgba(255, 255, 255, .45); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 6px); transition: width .25s linear; }
.net-rib__gap span { position: absolute; right: 3px; bottom: 2px; color: #bdbdbd; font-family: var(--mono); font-size: 10px; white-space: nowrap; }
.net-rib__held { flex: none; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; width: 46px; margin-left: 6px; padding: 4px 0 5px; border: 1px dashed var(--v-dk); }
.net-rib__held span { display: flex; flex-direction: column-reverse; gap: 2px; }
.net-rib__held i { width: 12px; height: 6px; background: var(--v-dk); animation: blink 1.2s steps(2, start) infinite; }
.net-rib__held b { color: var(--v-dk); font-family: var(--mono); font-size: 10px; font-weight: 500; white-space: nowrap; }
.net-rib__tip { position: absolute; top: 0; z-index: 2; display: grid; gap: 1px; padding: 8px 10px 9px; background: #fff; color: #000; font-size: 12px; line-height: 1.35; pointer-events: none; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); animation: net-in .18s var(--ease) both; }
.net-rib__tip b { font-size: 13px; }
.net-rib__tip .mono { font-size: 11px; }
.net-rib__tip small { color: var(--muted); font-size: 11px; }

/* ---------- pipeline ---------- */
.net-pipe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px 0; }
.net-pipe__st { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 16px 4px 0; border-top: 3px solid #000; }
.net-pipe__st + .net-pipe__st { padding-left: 2px; }
.net-pipe__n { font-size: 11px; color: var(--muted); }
.net-pipe__k { font-size: 13.5px; font-weight: 600; font-stretch: 108%; line-height: 1.25; }
.net-pipe__v { display: flex; align-items: baseline; gap: 5px; margin-top: 6px; font-stretch: 118%; font-weight: 600; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.02em; line-height: 1.05; white-space: nowrap; }
.net-pipe__v small { font-stretch: 100%; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.net-pipe__s { font-size: 12px; line-height: 1.4; color: var(--muted); }
.net-pipe__s b { color: #000; font-weight: 600; }
.net-pipe__bar { position: relative; display: block; height: 3px; margin: 4px 16px 2px 0; background: var(--g2); overflow: hidden; }
.net-pipe__bar::after { content: ""; position: absolute; inset: 0; background: var(--v); transform-origin: 0 50%; transform: scaleX(0); animation: slotbar var(--dur, 800ms) linear forwards; }
.net-pipe__cells { display: flex; gap: 2px; margin: 4px 16px 2px 0; }
.net-pipe__cells i { flex: 1 1 0; height: 6px; background: var(--g2); transition: background-color .3s; }
.net-pipe__cells i[data-on] { background: #000; }
.net-pipe__arrow { position: absolute; left: 0; right: 0; top: -3px; height: 3px; overflow: hidden; pointer-events: none; }
.net-pipe__arrow i { position: absolute; inset: 0; transform: translateX(-100%); }
.net-pipe__arrow i::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 34px; background: linear-gradient(90deg, rgba(102, 0, 255, 0), var(--v)); }
.net-pipe[data-live] .net-pipe__arrow i { animation: net-flow 2.8s cubic-bezier(.45, 0, .55, 1) infinite; }
.net-pipe__st:nth-child(2) .net-pipe__arrow i { animation-delay: .4s; }
.net-pipe__st:nth-child(3) .net-pipe__arrow i { animation-delay: .8s; }
.net-pipe__st:nth-child(4) .net-pipe__arrow i { animation-delay: 1.2s; }
.net-pipe__st:nth-child(5) .net-pipe__arrow i { animation-delay: 1.6s; }
.net-pipe__st:nth-child(6) .net-pipe__arrow i { animation-delay: 2s; }
@keyframes net-flow { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(34px); } }

/* ---------- batches & DA ---------- */
.net-bat__kpi { margin-bottom: clamp(22px, 2.4vw, 34px); }
.net-bat__grid { align-items: start; }
.net-sz { margin: 0 0 26px; }
.net-sz__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 14px; }
.net-sz__h .net-k { margin-right: auto; }
.net-sz__lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #262626; }
.net-sz__sw { width: 10px; height: 10px; background: #000; }
.net-sz__sw--raw { background: var(--g3); }
.net-sz__note { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.net-sz__plot { position: relative; outline: none; }
.net-sz__plot:focus-visible { outline: 3px solid var(--v); outline-offset: 6px; }
.net-sz__area { position: relative; border-bottom: 1.5px solid #000; }
.net-sz__axis span { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.net-sz__axis b { position: absolute; left: 0; top: 3px; z-index: 1; padding-right: 6px; background: var(--g1); color: var(--muted); font-family: var(--mono); font-size: 10.5px; font-weight: 400; line-height: 1.2; }
.net-sz__cols { position: absolute; inset: 0; display: grid; }
.net-sz__col { position: relative; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 100%; animation: net-grow .55s var(--ease) both; }
.net-sz__raw, .net-sz__gz { position: absolute; bottom: 0; left: 50%; width: min(18px, 64%); transform: translateX(-50%); clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%); transition: background-color .2s, height .5s var(--ease); }
.net-sz__raw { background: var(--g3); }
.net-sz__gz { background: #000; }
.net-sz__col[data-hov] .net-sz__raw { background: #8f8f8f; }
.net-sz__col[data-sel] .net-sz__gz { background: var(--v); }
.net-sz__direct { position: absolute; right: 0; z-index: 1; padding-left: 6px; background: var(--g1); color: #000; font-size: 11px; white-space: nowrap; pointer-events: none; }
.net-sz__tip { position: absolute; top: -4px; z-index: 3; width: 210px; display: grid; gap: 2px; padding: 9px 11px 10px; background: #000; color: #fff; font-size: 12px; line-height: 1.35; pointer-events: none; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); animation: net-in .18s var(--ease) both; }
.net-sz__tip b { font-size: 15px; font-weight: 600; }
.net-sz__tip b small { font-size: 12px; font-weight: 500; color: #cfcfcf; }
.net-sz__tip small { font-size: 11px; color: #9a9a9a; }
.net-sz__x { position: relative; height: 20px; color: var(--muted); font-size: 10.5px; }
.net-sz__x span { position: absolute; top: 5px; }
.net-bat__id { position: relative; display: inline-block; padding-left: 11px; }
.net-bat__id::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 3px; background: transparent; transition: background-color .2s; }
.net-bat__id[data-sel]::before { background: var(--v); }
.net-bat .tbl tbody tr:has(.net-bat__id[data-sel]) { background: var(--v-tint); }
.net-bat__st { display: inline-flex; align-items: center; gap: 8px; }
.net-bat__st .mono { font-size: 12px; color: var(--muted); }
.net-ratio { display: inline-flex; align-items: center; gap: 8px; }
.net-ratio__m { position: relative; width: 36px; height: 4px; background: var(--g2); }
.net-ratio__m i { position: absolute; left: 0; top: 0; bottom: 0; background: #000; }
.net-more { margin-top: 6px; }
.net-empty-b { padding: 26px 0; border-top: 1px dashed var(--line-2); }
.net-empty-b__t { margin-bottom: 4px; font-stretch: 112%; font-weight: 600; font-size: 16px; }

/* settlement record (dark: what Solana stores) */
.net-set { padding: 18px 20px 20px; }
.net-set__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-right: 14px; }
.net-set__t { margin-top: 4px; color: #fff; font-stretch: 122%; font-weight: 600; font-size: 28px; letter-spacing: -0.02em; line-height: 1.05; }
.net-set__nav { display: flex; gap: 4px; }
.net-set__nav .iconbtn { color: #fff; box-shadow: inset 0 0 0 1px var(--line-dk); }
.net-set__nav .iconbtn:hover:not(:disabled) { color: var(--v-dk); box-shadow: inset 0 0 0 1px var(--v-dk); }
.net-set__nav .iconbtn:disabled { opacity: .3; cursor: default; }
.net-set__prev svg { transform: rotate(180deg); }
.net-life { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin: 16px 0 8px; }
.net-life li { position: relative; padding-top: 8px; border-top: 3px solid #333; color: #7d7d7d; font-size: 11.5px; font-weight: 600; line-height: 1.25; overflow: hidden; }
.net-life li[data-state="done"] { border-top-color: #fff; color: #fff; }
.net-life li[data-state="active"] { border-top-color: var(--v-dk); color: var(--v-dk); }
.net-life li[data-state="active"]::before { content: ""; position: absolute; top: -3px; left: 0; width: 40%; height: 3px; background: #fff; opacity: .6; animation: sweep 1.2s var(--ease) infinite; }
.net-set__kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.net-set__kv dt, .net-set__kv dd { padding: 10px 0; border-top: 1px solid var(--line-dk); font-size: 13px; }
.net-set__kv dt { padding-right: 10px; color: var(--muted-dk); }
.net-set__kv dd { min-width: 0; margin: 0; color: #fff; }
.net-set__kv a { color: #fff; text-decoration-color: #5c5c5c; text-underline-offset: 3px; }
.net-set__kv a:hover { text-decoration-color: var(--v-dk); }
.net-set__kv .muted { color: var(--muted-dk); }
.net-hex { display: grid; grid-template-columns: repeat(auto-fill, minmax(17ch, max-content)); gap: 0 10px; font-size: 12px; letter-spacing: .02em; }
.net-verify { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #cfcfcf; font-size: 12px; }
.net-verify svg { flex: none; color: var(--v-dk); }
.net-verify[data-ok="no"] { color: #fff; font-weight: 600; }
.net-set__cap { display: block; margin-top: 4px; color: var(--muted-dk); font-size: 11.5px; }
.net-set__f { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; margin-top: 16px; }

/* ---------- state roots ---------- */
.net-roots { align-items: start; }
.net-roots__cards { display: grid; gap: 14px; align-content: start; }
.net-root { padding: 16px 18px; background: var(--g0); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.net-root[data-kind="posted"] { background: #000; color: var(--g1); box-shadow: none; }
.net-root__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding-right: 8px; }
.net-root__slot { font-size: 12px; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.net-root__slot:hover { color: var(--v); border-bottom-color: var(--v); }
.net-root__v .net-hex { font-size: 14px; gap: 2px 12px; grid-template-columns: repeat(auto-fill, minmax(17.5ch, max-content)); }
.net-root .net-fine { margin-top: 10px; }
.net-root[data-kind="posted"] .net-k, .net-root[data-kind="posted"] .net-fine { color: var(--muted-dk); }
.net-root[data-kind="posted"] .net-root__slot { color: #fff; border-bottom-color: #5c5c5c; }
.net-root[data-kind="posted"] .net-root__slot:hover { color: var(--v-dk); border-bottom-color: var(--v-dk); }
.net-root[data-kind="posted"] .net-flash[data-on] { animation-name: net-flash-dk; }
@keyframes net-flash-dk { 0% { color: var(--v-dk); } 100% { color: inherit; } }
.net-root__none { font-stretch: 112%; font-weight: 600; font-size: 18px; }
.net-sub { display: block; margin-top: 3px; }
.net-root__a { display: flex; align-items: center; gap: 2px; margin: 6px 0 -6px -6px; }
.net-root__a .net-fine { margin: 0; }
.net-roots__slot { position: relative; display: inline-block; padding-left: 11px; }
.net-roots__slot[data-edge]::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 3px; background: #000; }
.net-roots__r { display: inline-flex; align-items: center; gap: 8px; }
.net-same { color: var(--muted); font-family: var(--sans); font-size: 11.5px; }
.net-same::before { content: "= "; font-family: var(--mono); }
.net-roots__bi b { margin-left: 4px; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.net-roots__foot { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; }
.net-roots__foot svg { flex: none; margin-top: 2px; }

/* ---------- invariants ---------- */
.net-inv__sum { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 18px; }
.net-inv__big { display: flex; align-items: center; gap: 14px; font-stretch: 118%; font-weight: 500; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.02em; line-height: 1.1; }
.net-inv__big b { font-weight: 700; }
.net-inv__mark { flex: none; display: grid; place-items: center; width: 48px; height: 48px; background: #000; color: #fff; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.net-inv[data-ok="no"] .net-inv__mark { background: var(--v-err); }
.net-inv__meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.net-pulse { flex: none; width: 8px; height: 8px; background: var(--v); animation: net-pulse 1.1s var(--ease) both; }
@keyframes net-pulse { 0% { transform: scale(2); opacity: 1; } 100% { transform: none; opacity: .4; } }
.net-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); border-top: 1.5px solid #000; }
.net-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 3px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.net-check__i { grid-row: 1 / 3; display: grid; place-items: center; width: 22px; height: 22px; background: #000; color: #fff; }
.net-check[data-ok="no"] .net-check__i { background: var(--v-err); }
.net-check__n { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.net-check__s { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.net-check[data-ok="no"] .net-check__s { color: var(--v-err); }
.net-check__d { font-size: 11.5px; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.net-ledgers { margin-top: clamp(24px, 2.6vw, 36px); }
.net-ledger { margin: 0; }
.net-ledger__h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding-bottom: 8px; border-bottom: 1.5px solid #000; }
.net-ledger__eq { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.net-ledger__eq svg { color: var(--v); }
.net-ledger[data-ok="no"] .net-ledger__eq { color: var(--v-err); }
.net-ledger__r { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 14px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.net-ledger__r dt { color: var(--muted); }
.net-ledger__r dd { margin: 0; text-align: right; font-size: 12.5px; }
.net-ledger__r[data-kind] dt { color: #000; font-weight: 600; }
.net-ledger__r[data-kind="rhs"] { border-bottom: 1.5px solid #000; }
.net-ledger .net-fine, .net-ledgers__pool { margin-top: 8px; }

/* ---------- faucet ---------- */
.net-fct { align-items: start; }
.net-fct__res { padding-bottom: 12px; }
.net-fct__big { margin: 4px 0 6px; font-stretch: 122%; font-weight: 600; font-size: clamp(30px, 3vw, 44px); letter-spacing: -0.03em; line-height: 1.05; }
.net-fct__kv { margin-top: 4px; }
.net-fct__kv dd { font-size: 13.5px; }
.net-fct__kv dd a { font-weight: 600; text-underline-offset: 3px; }
.net-fct__list { border-top: 1.5px solid #000; }
.net-fr { display: grid; grid-template-columns: 30px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.05fr) auto; align-items: center; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.net-fr__who { min-width: 0; }
.net-fr__who b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-fr__who b small { font-weight: 500; color: var(--v); }
.net-fr__who .mono { display: block; font-size: 11.5px; color: var(--muted); }
.net-fr__bal { text-align: right; font-size: 14px; font-weight: 600; white-space: nowrap; }
.net-fr__st { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; }
.net-fr__st small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.net-fr__ready { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.net-fr__ready i { width: 7px; height: 7px; background: var(--v); }
.net-fr__msg { grid-column: 2 / -1; margin: 0; font-size: 12.5px; animation: net-in .4s var(--ease) both; }
.net-fr__msg--ok { color: #000; }
.net-fr__msg--ok a { color: inherit; font-size: 12px; }
.net-fct__foot { margin-top: 10px; }
.net-ring { position: relative; flex: none; display: inline-grid; place-items: center; }
.net-ring svg { position: absolute; inset: 0; }
.net-ring__t { fill: none; stroke: var(--g2); stroke-width: 3; }
.net-ring__p { fill: none; stroke: var(--v); stroke-width: 3; transition: stroke-dashoffset .2s linear; }
.net-ring__n { position: relative; font-size: 11px; font-weight: 600; }

/* ---------- parameters ---------- */
.net-params { align-items: start; }
.net-params .kv > dd { font-size: 13.5px; }
.net-params__foot { grid-column: 1 / -1; }

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
  .net-pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .net-mon__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net-fr { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .net-fr__bal { grid-column: 2; grid-row: 2; text-align: left; font-size: 13px; }
  .net-fr__st { grid-column: 3; grid-row: 2; justify-self: end; }
  .net-fr__go { grid-column: 3; grid-row: 1; justify-self: end; }
}
@media (max-width: 1023px) {
  .net-checks { grid-template-columns: minmax(0, 1fr); }
  .net-ctl { gap: 20px; }
}
@media (max-width: 759px) {
  .net-jump { margin-top: -4px; }
  .net-jump__l { margin-left: 0; gap: 0 16px; }
  .net-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net-mon { padding: 16px 16px 14px; }
  .net-mon__big { font-size: 58px; }
  .net-set__kv { grid-template-columns: minmax(0, 1fr); }
  .net-set__kv dd { padding-top: 0; border-top: 0; }
  .net-sz__note { flex-basis: 100%; }
  .net-probe__h { flex-direction: column; gap: 10px; }
  .net-ledger__r { flex-direction: column; align-items: flex-start; }
  .net-ledger__r dd { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .net-odo__s { transition: none; }
  .net-pipe[data-live] .net-pipe__arrow i { animation: none; }
}

/* faucet: recent airdrops */
.net-air { margin-top: 22px; }
.net-air__h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding-bottom: 8px; border-bottom: 1.5px solid #000; }
.net-air__l li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; animation: net-in .45s var(--ease) both; }
.net-air__l a { font-size: 12px; }
.net-air__to { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.net-air__to b { color: #000; font-weight: 600; }
.net-air__amt { font-size: 12.5px; }
.net-air__st { font-family: var(--mono); font-size: 12px; color: var(--muted); min-width: 7ch; text-align: right; }
.net-air__none { padding: 14px 0; font-size: 13px; color: var(--muted); }
@media (max-width: 759px) { .net-air__l li { grid-template-columns: minmax(0, 1fr) auto; } .net-air__st { grid-column: 2; } }

/* =================== RPC playground =================== */
.net-node { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 14px 6px 12px; box-shadow: inset 0 0 0 1.5px #000; text-decoration: none; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.net-node b { display: block; font-size: 14px; line-height: 1.2; }
.net-node small { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.net-node[data-ok="no"] { box-shadow: inset 0 0 0 1.5px var(--v-err); }
.net-node[data-ok="no"] b { color: var(--v-err); }
.net-node:hover b { text-decoration: underline; text-underline-offset: 3px; }
.net-rpc__grid { display: grid; grid-template-columns: 236px minmax(0, 1fr) minmax(0, 1.18fr); gap: 0 var(--gap); align-items: start; }
.net-rpc__side, .net-rpc__req, .net-rpc__res { min-width: 0; }
.net-rpc__side { border-top: 2px solid #000; padding-top: 12px; }
.net-rpc__req { border-top: 2px solid #000; padding-top: 12px; }
.net-rpc__res { position: sticky; top: calc(var(--strip) + 16px); }
.net-msel { display: none; }
.net-ml + .net-ml { margin-top: 14px; }
.net-ml__g { margin-bottom: 4px; }
.net-ml__b { position: relative; display: block; width: 100%; padding: 7px 10px 8px 12px; border: 0; background: none; text-align: left; transition: background-color .15s; }
.net-ml__b:hover { background: var(--g2); }
.net-ml__b[aria-current="true"] { background: #000; color: #fff; }
.net-ml__b[aria-current="true"]::before { content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 7px; background: var(--v); clip-path: polygon(55% 0, 100% 0, 45% 100%, 0 100%); }
.net-ml__n { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.net-ml__w { padding: 0 5px; border: 1px solid currentColor; font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 15px; color: var(--v); }
.net-ml__b[aria-current="true"] .net-ml__w { color: var(--v-dk); }
.net-ml__d { display: -webkit-box; margin-top: 1px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; line-height: 1.4; color: var(--muted); }
.net-ml__b[aria-current="true"] .net-ml__d { color: var(--muted-dk); }
.net-ml__foot { margin-top: 12px; }
.net-quick { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line-2); display: grid; gap: 2px; }
.net-quick .net-k { margin-bottom: 4px; }
.net-quick button { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0; border: 0; background: none; text-align: left; font-size: 13px; font-weight: 600; }
.net-quick button svg { flex: none; color: var(--muted); transition: transform .2s var(--ease), color .2s; }
.net-quick button:hover { color: var(--v); }
.net-quick button:hover svg { color: var(--v); transform: translateX(3px); }

/* request editor */
.net-ed__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.net-ed__verb { font-size: 11.5px; color: var(--muted); }
.net-ed__ro { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.net-ed__m { display: block; width: 100%; margin-top: 2px; padding: 4px 0 6px; border: 0; border-bottom: 2px solid #000; border-radius: 0; background: none; outline: none; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -0.01em; }
.net-ed__m:focus { border-bottom-color: var(--v); box-shadow: 0 2px 0 var(--v); }
.net-ed__doc { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: #262626; }
.net-ed__load { margin-left: 4px; padding: 0; border: 0; background: none; font-weight: 600; color: var(--v); text-decoration: underline; text-underline-offset: 3px; }
.net-fill { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.net-fill__k { margin-right: 4px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.net-fill button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line-2); background: none; font-size: 12.5px; font-weight: 600; transition: background-color .15s, border-color .15s; }
.net-fill button .mono { font-weight: 400; color: var(--muted); }
.net-fill button:hover { border-color: #000; }
.net-fill button[aria-pressed="true"] { background: #000; border-color: #000; color: #fff; }
.net-fill button[aria-pressed="true"] .mono { color: var(--muted-dk); }
.net-fill__sel { flex: 1 1 220px; min-width: 0; min-height: 36px; font-size: 13.5px; }
.net-ed__p { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 16px 0 6px; }
.net-ed__state { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.net-ed__state[data-err] { color: var(--v-err); font-weight: 600; }
.net-ed__ta { display: block; min-height: 0; line-height: 1.55; white-space: pre; overflow-x: auto; overflow-wrap: normal; }
.net-ed__ta[aria-invalid="true"] { border-color: var(--v-err); }
.net-ed__act { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; }
.net-ed__kbd { font-size: 12px; color: var(--muted); }
.net-ed__kbd kbd { margin-right: 4px; padding: 1px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; font-family: var(--mono); font-size: 11px; }
.net-ed__more { display: flex; gap: 12px; margin-left: auto; }
.net-snip { margin-top: 22px; padding: 4px 16px 14px; background: var(--g2); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.net-snip__h { display: flex; align-items: center; gap: 12px; }
.net-snip__h .tabs { flex: 1; min-width: 0; gap: 18px; border-bottom-color: var(--line); }
.net-snip__h .tabs button { min-height: 40px; font-size: 13px; }
.net-snip__copy { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; }
.net-snip__copy .copy { color: #000; }
.net-snip__copy .copy:hover { color: var(--v); }
.net-snip__copy .copy[data-done] { color: var(--v); }
.net-snip__code { margin: 12px 0 8px; font-family: var(--mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; }
.net-snip__code:focus-visible { outline: 3px solid var(--v); outline-offset: 2px; }
.net-snip .net-fine { font-size: 12px; }

/* response viewer (dark) */
.net-res { padding: 16px 18px 16px; }
.net-res[data-anim] { animation: net-res-in .45s var(--ease) both; }
@keyframes net-res-in { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.net-res__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 16px; }
.net-res__watch .toggle__l { color: #fff; font-size: 12.5px; }
.net-res__watch .toggle__s { color: var(--muted-dk); font-size: 11px; }
.net-res__watch .toggle__track { background: #3a3a3a; }
.net-res__watch .toggle[aria-checked="true"] .toggle__track { background: var(--v); }
.net-res__none { margin: 28px 0 6px; color: #fff; font-stretch: 112%; font-weight: 600; font-size: 20px; }
.net-res--empty { padding-bottom: 26px; }
.net-res__st { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; }
.net-res__code { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-stretch: 118%; font-weight: 600; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.net-res__code svg { color: var(--v-dk); }
.net-res__st[data-ok="no"] .net-res__code { color: #fff; }
.net-res__st[data-ok="no"] .net-res__code svg { color: #fff; background: var(--v-err); }
.net-res__what { font-size: 13px; color: #cfcfcf; overflow-wrap: anywhere; }
.net-res__what b { color: #fff; }
.net-res__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 12px; }
.net-res__meta > div { min-width: 0; padding-top: 6px; border-top: 1px solid var(--line-dk); }
.net-res__meta dt { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-dk); }
.net-res__meta dd { margin: 2px 0 0; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-res__body { position: relative; }
.net-res__copy { position: absolute; top: 6px; right: 8px; z-index: 1; background: #111; }
.net-json { max-height: min(62vh, 560px); overflow: auto; padding: 10px 0; background: #0b0b0b; box-shadow: inset 0 0 0 1px #1f1f1f; outline: none; scrollbar-color: #444 #0b0b0b; }
.net-json:focus-visible { box-shadow: inset 0 0 0 2px var(--v-dk); }
.net-json__l li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); min-height: 1.6em; font-family: var(--mono); font-size: 12px; line-height: 1.6; }
.net-json__l li[data-ch] { animation: net-chg 1.8s var(--ease) both; }
@keyframes net-chg { 0%, 30% { background: rgba(162, 107, 255, .32); } 100% { background: transparent; } }
.net-json__n { padding-right: 12px; text-align: right; color: #7a7a7a; user-select: none; }
.net-json__l code { padding-right: 14px; color: #bdbdbd; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; }
.j-k { color: #9e9e9e; }
.j-s { color: #fff; }
.j-n { color: var(--v-dk); }
.j-b, .j-z { color: #fff; font-style: italic; }
.j-p { color: #5f5f5f; }
.net-json__more { display: block; margin: 8px 0 0 3.4em; padding: 0; border: 0; background: none; color: #fff; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.net-res__rel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.net-res__rel a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; box-shadow: inset 0 0 0 1px #4a4a4a; color: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.net-res__rel a:hover { box-shadow: inset 0 0 0 1px var(--v-dk); color: var(--v-dk); }
.net-res__req { margin-top: 10px; }
.net-res__rq { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0; border: 0; background: none; color: var(--muted-dk); font-size: 12px; font-weight: 600; }
.net-res__rq:hover { color: #fff; }
.net-res__pre { margin-top: 6px; padding: 10px 12px; overflow-x: auto; background: #0b0b0b; color: #cfcfcf; font-size: 12px; line-height: 1.55; }

.net-rpc__lower { margin-top: clamp(32px, 3.4vw, 52px); align-items: start; }
.net-rpc__lower .sect + .sect { margin-top: 0; }
.net-errs td.net-errs__w { white-space: normal; min-width: 240px; color: #262626; font-size: 13px; line-height: 1.45; }
.net-errs td b { font-weight: 600; white-space: nowrap; }
.net-errs td a { font-weight: 600; text-underline-offset: 3px; }

@media (max-width: 1279px) {
  .net-rpc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .net-rpc__side { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 10px 24px; align-items: end; margin-bottom: 22px; padding-bottom: 14px; }
  .net-ml, .net-ml__foot { display: none; }
  .net-msel { display: block; }
  .net-quick { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 0 16px; }
  .net-quick .net-k { flex-basis: 100%; }
}
@media (max-width: 1023px) {
  .net-rpc__grid { grid-template-columns: minmax(0, 1fr); }
  .net-rpc__side { grid-template-columns: minmax(0, 1fr); }
  .net-rpc__res { position: static; margin-top: 24px; }
}
@media (max-width: 759px) {
  .net-res__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net-res__h { flex-wrap: wrap; }
  .net-ed__more { margin-left: 0; }
  .net-ed__kbd { display: none; }
  .net-snip { padding: 4px 12px 12px; }
}

/* RPC: keep the error table's sr-only header inside its scroller (it widened the page on phones) */
.net-rpc .tbl-wrap { position: relative; }
@media (max-width: 759px) {
  .net-errs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .net-errs, .net-errs tbody { display: block; }
  .net-errs tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .net-errs td { display: block; padding: 0; border: 0; min-width: 0; }
  .net-errs td.net-errs__w { grid-column: 1 / -1; min-width: 0; }
  .net-errs td.r { grid-column: 3; grid-row: 1; }
}

/* phone: legends wrap under their title; wide tables drop secondary columns */
@media (max-width: 759px) {
  .net-sz__h .net-k, .net-rib__h .net-k { flex-basis: 100%; }
  .net-sz__h { gap: 6px 14px; }
  .net-bat .tbl th:nth-child(4), .net-bat .tbl td:nth-child(4),
  .net-bat .tbl th:nth-child(6), .net-bat .tbl td:nth-child(6),
  .net-bat .tbl th:nth-child(7), .net-bat .tbl td:nth-child(7) { display: none; }
  .net-roots .tbl th:nth-child(4), .net-roots .tbl td:nth-child(4) { display: none; }
}
.net-rpc__res { scroll-margin-top: calc(var(--strip) + 16px); }
.net-snip__code { white-space: pre; overflow-wrap: normal; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.net-ed__p .net-ed__state { margin-left: auto; }
.net-ed__tools { display: inline-flex; gap: 2px; margin-right: -6px; }
.net-ed__tools button { min-height: 26px; padding: 0 6px; border: 0; background: none; font-size: 12px; font-weight: 600; color: #000; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.net-ed__tools button:hover:not(:disabled) { text-decoration-color: currentColor; color: var(--v); }
.net-ed__tools button:disabled { color: var(--muted); cursor: default; }

/* 1024-1279: give the settlement record and tables room */
@media (max-width: 1279px) {
  .net-bat__grid > .span-7, .net-bat__grid > .span-5 { grid-column: 1 / -1; }
  .net-bat__grid > .span-5 { margin-top: 8px; }
  .net-roots .tbl th:nth-child(4), .net-roots .tbl td:nth-child(4) { display: none; }
  .net-root__h { flex-wrap: wrap; gap: 4px 12px; }
  .net-probe__h { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 1279px) and (min-width: 1024px) { .net-rpc__side { align-items: start; } }
/* held transactions wait at a fixed door on the right; the block track slides beside it */
.net-rib__track[data-held] { right: 54px; }
.net-rib__held { position: absolute; right: 0; bottom: 22px; height: 104px; margin: 0; align-self: auto; box-sizing: border-box; }
.net-rib__held { z-index: 1; background: #000; box-shadow: -8px 0 0 #000; }

/* U4 fix pass: params editor never soft-wraps (pretty-printed, scrolls sideways if it must) */
.net-ed__ta { white-space: pre; overflow-wrap: normal; overflow-x: auto; font-size: 12px; line-height: 1.6; scrollbar-width: thin; }
@media (max-width: 759px) { .net-ed__ta { padding: 10px; font-size: 11.5px; } }
/* response JSON: wrapped long strings hang under their own indent instead of falling to column 0 */
.net-json__l code { padding-left: calc(var(--ind, 0ch) + 2ch); text-indent: calc(-1 * (var(--ind, 0ch) + 2ch)); }
/* compact method list: names only, the selected method shows its one-line doc */
.net-ml__b { padding: 5px 10px 6px 12px; }
.net-ml__b[aria-current="true"] { padding-top: 7px; padding-bottom: 8px; }
.net-ml + .net-ml { margin-top: 12px; }
.net-ml__d { -webkit-line-clamp: 3; }
.net-res__auto { color: var(--muted-dk); }
.net-errs__na { display: inline-block; min-width: 3.5em; text-align: center; color: var(--muted); }
/* the empty-ish terminal keeps a console's height so the three columns end closer together */
@media (min-width: 1280px) { .net-json { min-height: 260px; } }
.net-sp { font-family: var(--sans); }
/* phones: the on-page jump bar stays under the status strip as one scrolling row */
.net-fold > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600; }
.net-fold > summary::-webkit-details-marker { display: none; }
.net-fold > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--ease); }
.net-fold[open] > summary::before { transform: rotate(45deg); }
.net-fold > summary:hover { color: var(--v); }
.net-fold[open] > summary { border-bottom-color: transparent; }
.net-fold__b { padding-top: 6px; }
@media (max-width: 759px) {
  .net-jump { position: sticky; top: var(--strip); z-index: 30; flex-wrap: nowrap; gap: 0 18px; margin: -4px calc(-1 * var(--pad)) 24px; padding: 0 var(--pad); min-height: 44px; overflow-x: auto; overscroll-behavior-x: contain; white-space: nowrap; background: var(--g1); scrollbar-width: none; }
  .net-jump::-webkit-scrollbar { display: none; }
  .net-jump__l { flex-wrap: nowrap; margin-left: 0; gap: 0 16px; }
  .net-jump__l button { min-height: 44px; }
  .net-jump__l button[aria-current="true"] { color: #000; text-decoration-color: var(--v); }
  .net-sect { scroll-margin-top: calc(var(--strip) + 56px); }
}
@media (max-width: 759px) { .net-jump { padding-right: 28px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } }
/* a value string's trailing comma takes no width: it hangs into the right padding and never wraps alone */
.net-json__l .j-w > .j-p { display: inline-block; width: 0; text-indent: 0; }
.net-json__ind { white-space: pre; }
/* 1024-1279: give the params editor room for a full base58 address on one line */
@media (max-width: 1279px) and (min-width: 1024px) {
  .net-rpc__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .net-ed__ta { padding: 12px; }
}