/* Blockchain demo – styled with the app's own theme (../style.css). Adapted from Anders Brownworth's MIT-licensed blockchain demo. */
.wrap.wide{max-width:1000px}
nav.sub{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
nav.sub a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--text);text-decoration:none;background:var(--bg)}
nav.sub a:hover{border-color:var(--accent)}
nav.sub a[aria-current=page]{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
h2.pg{margin:0;font-size:20px}
.lead{margin:4px 0 0;color:var(--muted)}
details.tip{padding:12px 16px}
details.tip summary{cursor:pointer;font-weight:700}
details.tip ol,details.tip ul{margin:8px 0 0;padding-left:20px}details.tip li{margin:4px 0}
.peer h3{margin:4px 0 8px;font-size:15px}
.scroller{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity}
.scroller .blk{flex:0 0 min(340px,86vw);scroll-snap-align:start}
.scroller.tx .blk{flex-basis:min(440px,90vw)}
.blk{--st:var(--line);background:var(--surface);border:2px solid var(--st);border-radius:12px;padding:12px 14px;display:grid;gap:10px;align-content:start}
.blk.ok{--st:var(--ok);background:color-mix(in srgb,var(--ok) 9%,var(--surface))}
.blk.bad{--st:var(--danger);background:color-mix(in srgb,var(--danger) 9%,var(--surface))}
.blk header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.blk header b{font-size:15px}
.state{font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;border:1px solid var(--st);color:var(--st);white-space:nowrap}
.blk.ok .state{background:var(--ok);color:#fff}.blk.bad .state{background:var(--danger);color:#fff}
.blk label,.fld{display:grid;gap:3px;font-size:12px;font-weight:600;color:var(--muted)}
.blk input,.blk textarea,.fld textarea{width:100%;min-width:0}
.blk textarea,.fld textarea{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 12px;resize:vertical}
.hashbox{font:12px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:var(--text);user-select:all;min-height:2.6em}
.hashbox .z{font-weight:800;color:var(--ok)}
.blk.bad .hashbox .z{color:var(--danger)}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.txrow{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:end}
.txrow .arrow{display:none}
.blk input.invalid-amount,.blk input.insufficient-funds{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,var(--bg));color:var(--danger);font-weight:700}
.mine{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mine .prog{font-size:12px;color:var(--muted);min-height:1.2em}
.bal{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.bal span{font-size:12px;padding:2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.bal span.neg{border-color:var(--danger);color:var(--danger);font-weight:700}
.credit{font-size:12px;color:var(--muted)}
.credit a{color:var(--accent)}
.acts .act span{font-size:13px;color:var(--muted)}
@media (max-width:560px){.txrow{grid-template-columns:80px minmax(0,1fr)}.txrow>:nth-child(3){grid-column:2}}