:root {
  /* Read by the boot guard in index.html: if this is missing when the guard fires, the
     stylesheets were refused too, which separates a whole-host block from a script-only one. */
  --pqb-css: ok;
  --bg: #11131f; --bg2: #1d1f31; --bg3: #24273e; --line: #2d3150; --fg: #e6e8f2; --dim: #9aa0bd;
  --accent: #678BFF; --accent2: #9DB4FF; --ok: #3bcc8a; --warn: #f5b041; --crit: #ff5c6c; --info: #6aa6ff;
  --net: #f7931a; --radius: 8px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
h1 { font-size: 1.6rem; margin: 0 0 .3rem; }
h2 { font-size: 1.15rem; margin: 0 0 .8rem; }
h3 { font-size: 1rem; margin: 1.2rem 0 .5rem; }
.muted, .dim { color: var(--dim); }
.small { font-size: .86rem; }
.sub { color: var(--dim); font-size: .8rem; }
.ok { color: var(--ok); } .bad { color: var(--crit); }
.error-text { color: var(--crit); }
.wrap { word-break: break-all; white-space: pre-wrap; }

/* header */
.top { display: flex; align-items: center; gap: 1.2rem; padding: .7rem 1.4rem; background: var(--bg2); border-bottom: 3px solid var(--net); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 1.2rem; color: var(--fg); white-space: nowrap; }
.brand .logo { color: var(--accent); }
.nav { display: flex; gap: 1rem; }
.nav a { color: var(--dim); } .nav a:hover { color: var(--fg); }
.search { flex: 1; min-width: 240px; }
.search input { width: 100%; padding: .5rem .8rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: .85rem; }
.netsel { display: flex; gap: .3rem; }
select, button, input, textarea { font: inherit; color: var(--fg); background: var(--bg3); border: 1px solid var(--line); border-radius: 6px; padding: .35rem .6rem; }
button { cursor: pointer; } button:hover { border-color: var(--accent); } button:disabled { opacity: .5; cursor: default; }
button.link { background: none; border: none; color: var(--accent2); padding: 0; }
button.icon { padding: .35rem .5rem; }
main#page { max-width: 1280px; margin: 0 auto; padding: 1.4rem; }
.foot { max-width: 1280px; margin: 2rem auto; padding: 1rem 1.4rem; color: var(--dim); font-size: .8rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--line); }

/* blocks */
.hero { margin: .5rem 0 1.4rem; }
.lede { color: var(--dim); max-width: 900px; font-size: 1.02rem; }
.lede.small { font-size: .92rem; }
section { margin-bottom: 1.4rem; }
.section-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.section-head h2 { margin: 0; }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; overflow-x: auto; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.pq-card { border-left: 3px solid var(--accent); }
.known { border-left: 3px solid var(--warn); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1.2rem; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.tile { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.tile.accent { border-color: var(--accent); }
.t-label { color: var(--dim); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.t-val { font-size: 1.5rem; font-weight: 600; margin: .15rem 0; }
.t-val small { font-size: .8rem; color: var(--dim); font-weight: 400; }
.t-sub { color: var(--dim); font-size: .78rem; }
.blocks { display: flex; gap: .9rem; overflow-x: auto; padding: .4rem 0 .8rem; align-items: stretch; }
.cube { flex: 0 0 132px; display: flex; flex-direction: column; gap: .35rem; }
.cube-top { display: block; padding: .7rem; border-radius: 6px; color: var(--fg); background: linear-gradient(160deg, #5b3fb8, #2c2a6b); min-height: 112px; }
.cube-top:hover { text-decoration: none; filter: brightness(1.15); }
.c-h { font-weight: 700; font-size: 1.05rem; color: #cfc2ff; }
.c-fee, .c-n, .c-t { font-size: .78rem; }
.scan { font-size: .78rem; padding: .2rem .4rem; }
.scan-all { align-self: center; flex: 0 0 auto; }
.scan-result { color: var(--dim); }
.empty { color: var(--dim); padding: 1.2rem; background: var(--bg2); border-radius: var(--radius); border: 1px dashed var(--line); }

/* tables and kv */
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th { text-align: left; color: var(--dim); font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; padding: .45rem .55rem; border-bottom: 1px solid var(--line); }
.tbl td { padding: .45rem .55rem; border-bottom: 1px solid #252842; vertical-align: top; }
.tbl.compact td { padding: .3rem .5rem; }
.tbl .num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.pqrow td { background: rgba(103, 139, 255, .08); }
.tbl tr.secret td { background: rgba(255, 92, 108, .06); }
.tbl tr.best td { background: rgba(59, 204, 138, .08); }
.tbl tr.bad-row td { color: var(--crit); }
.tbl tr.dim-row td { color: var(--dim); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 0; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; word-break: break-word; }
.page-head { margin-bottom: 1rem; }
.idline { margin: .2rem 0 .5rem; word-break: break-all; }
.badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.badge { display: inline-block; padding: .08rem .5rem; border-radius: 999px; font-size: .78rem; background: var(--bg3); border: 1px solid var(--line); white-space: nowrap; }
/* The two schemes are labelled, not ranked: identical treatment, the text tells them apart. */
.b-pq, .b-qsb { background: rgba(130, 160, 255, .17); border-color: var(--accent2); color: #DCE2FF; }
.b-heur { border-color: var(--warn); color: var(--warn); }
.b-fund { background: rgba(157, 180, 255, .12); color: #bfe8ff; }
.b-spend { background: rgba(103, 139, 255, .18); color: #DCE2FF; }
.b-ok { border-color: var(--ok); color: var(--ok); }
.b-warn { border-color: var(--warn); color: var(--warn); }
.b-crit { border-color: var(--crit); color: #fff; background: rgba(255, 92, 108, .4); }
.b-info { border-color: var(--info); color: var(--info); }
.b-muted { color: var(--dim); }
.pill { display: inline-block; padding: 0 .45rem; border-radius: 4px; background: var(--bg3); font-size: .78rem; margin-right: .2rem; }
.copyable { cursor: pointer; border-bottom: 1px dotted var(--dim); }
.copyable.copied { color: var(--ok); }


/* verdicts */
.verdicts { list-style: none; padding: 0; margin: .4rem 0 1rem; display: grid; gap: .45rem; }
.verdicts li { display: flex; gap: .7rem; padding: .55rem .75rem; background: var(--bg); border-radius: 6px; border-left: 3px solid var(--line); }
.v-icon { font-weight: 700; width: 1.1rem; text-align: center; }
.v-title { font-weight: 600; }
.v-code { font-family: var(--mono); font-size: .75rem; color: var(--dim); margin-right: .3rem; }
.v-detail { color: var(--dim); font-size: .88rem; }
.v-critical { border-left-color: var(--crit) !important; } .v-critical .v-icon { color: var(--crit); }
.v-warn { border-left-color: var(--warn) !important; } .v-warn .v-icon { color: var(--warn); }
.v-ok { border-left-color: var(--ok) !important; } .v-ok .v-icon { color: var(--ok); }
.v-info { border-left-color: var(--info) !important; } .v-info .v-icon { color: var(--info); }

/* io: two transactions' worth of coins side by side: what earlier transactions this one spends,
   and what it creates. Each column says which transaction it belongs to, so the pair can't read
   as one undifferentiated row. */
.io { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: start; }
.io-col { min-width: 0; }
.io-head { display: flex; align-items: baseline; gap: .5rem; }
.io-kicker { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.io-n { font-family: var(--mono); font-size: .72rem; color: var(--dim); font-weight: 400; letter-spacing: 0; text-transform: none; }
.io-src { margin: .1rem 0 .5rem; font-size: .78rem; color: var(--dim); overflow-wrap: anywhere; }
.io-src a, .io-src .mono { font-size: .78rem; }
.io-arrow { align-self: center; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: 1rem; line-height: 1; color: var(--accent); }
.io-col .tbl tr:last-child td { border-bottom: 0; }
.io-col .tbl td:first-child { padding-left: 0; } .io-col .tbl td:last-child { padding-right: 0; }
@media (max-width: 860px) { .io { grid-template-columns: 1fr; } .io-arrow { transform: rotate(90deg); justify-self: center; } }

/* PQ specifics */
.der { word-break: break-all; }
.der .d-tag { color: var(--accent); font-weight: 700; }
.der .d-len { color: var(--warn); }
.der .d-r { color: #d7dbef; }
.der .d-s { color: #aeb7de; }
.der .d-ht { color: var(--accent2); font-weight: 700; }
.stages td.what { max-width: 440px; }
.puzzle { margin-top: .3rem; }
.kind { display: inline-block; padding: 0 .4rem; border-radius: 4px; font-size: .75rem; background: var(--bg3); }
.k-secret { background: rgba(255, 92, 108, .25); color: #ffc7cd; }
.k-key { background: rgba(157, 180, 255, .18); color: #bfe8ff; }
.k-index { background: rgba(245, 176, 65, .15); color: #f9d9a0; }
.hex { color: #c3c8e3; }
.hexfold summary { cursor: pointer; list-style: none; }
.hexfold summary::-webkit-details-marker { display: none; }
.hexfold div { margin-top: .3rem; font-size: .8rem; }
details.block > summary { cursor: pointer; list-style: none; }
details.block > summary h3 { display: inline; }
details.block > summary::before { content: "▸ "; color: var(--accent); }
details.block[open] > summary::before { content: "▾ "; }
.secbar { display: flex; height: 34px; border-radius: 6px; overflow: hidden; margin: .4rem 0 .8rem; }
.seg { display: flex; align-items: center; justify-content: center; font-size: .72rem; color: #fff; overflow: hidden; white-space: nowrap; border-right: 1px solid var(--bg); min-width: 6px; }
.seg span { padding: 0 .3rem; overflow: hidden; text-overflow: ellipsis; }
.seg0 { background: #5b3fb8; } .seg1 { background: #2f6db5; } .seg2 { background: #2a8a78; } .seg3 { background: #9a5a2a; } .seg4 { background: #8a2f6d; } .seg5 { background: #4a5a8a; }
.secnotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .8rem; }
.secnotes p { margin: .2rem 0 0; color: var(--dim); font-size: .86rem; }
.disasm details { margin-bottom: .4rem; }
.disasm summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
.disasm td.op { color: var(--accent); white-space: nowrap; }
.disasm td.role { color: var(--dim); }
.disasm td.hex { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }

/* debugger */
.trace { margin-top: .6rem; }
.tr-controls { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.tr-controls input[type=range] { flex: 1; min-width: 200px; }
.tr-op { background: var(--bg); border-radius: 6px; padding: .7rem .9rem; margin-bottom: .6rem; border-left: 3px solid var(--accent); }
.tr-op.failed { border-left-color: var(--crit); }
.tr-opname { font-size: 1.2rem; color: var(--accent); margin: .2rem 0; }
.tr-role { color: var(--fg); }
.tr-sig { margin-top: .3rem; color: var(--accent2); font-size: .88rem; }
.tr-sh { color: var(--dim); font-size: .85rem; margin-bottom: .3rem; }
.stack { margin: 0; padding-left: 2.4rem; font-size: .84rem; max-height: 440px; overflow: auto; background: var(--bg); border-radius: 6px; padding-top: .4rem; padding-bottom: .4rem; }
.stack li { padding: .08rem 0; }
.stack li.new { background: rgba(103, 139, 255, .18); }
.stack .lbl { color: var(--accent2); margin-left: .4rem; font-size: .8rem; }

/* misc */
.loading { color: var(--dim); padding: 1rem 0; display: flex; align-items: center; gap: .6rem; }
.spinner { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
/* the wait: the shape of the page that is coming, not a spinner */
.skel { padding: 1.6rem 0 0; display: grid; gap: 1.4rem; }
.skel-head { display: grid; gap: .7rem; }
.skel-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem; }
.skel-rows { display: grid; gap: .9rem; }
.skel-l, .skel-box { display: block; border-radius: 8px; background: linear-gradient(100deg, rgba(120, 140, 220, .07) 20%, rgba(140, 160, 240, .17) 40%, rgba(120, 140, 220, .07) 60%); background-size: 300% 100%; animation: shimmer 1.5s linear infinite; }
.skel-l { height: .85rem; }
.skel-box { height: 5.2rem; border-radius: var(--radius); }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-l, .skel-box { animation: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
.error-box { background: rgba(255, 92, 108, .1); border: 1px solid var(--crit); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem; }
form label { display: block; margin-bottom: .7rem; color: var(--dim); }
form textarea { width: 100%; display: block; margin-top: .3rem; font-size: .8rem; }
form.inline { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
form.inline label { margin: 0; }
form.inline input[type=number] { width: 110px; }
.txids { font-size: .82rem; columns: 1; }
.pager { display: flex; gap: .8rem; align-items: center; margin-top: .6rem; }
.glossary dt { font-weight: 600; margin-top: .6rem; }
.glossary dd { margin: .1rem 0 0; color: var(--dim); }
.tbl tr.qsb-row td { background: rgba(157, 180, 255, .07); border-top: 2px solid var(--line); }

/* flowchart */
h2.inline { display: inline; }

/* decompiled */
.decomp { background: var(--bg); border-radius: 6px; padding: .6rem 0; font-size: .82rem; max-height: 900px; overflow: auto; }
.dl { display: flex; gap: 1rem; padding: 0 .8rem; white-space: pre; line-height: 1.55; }
.dl-link { cursor: pointer; }
.dl-link:hover { background: rgba(103, 139, 255, .12); }
.dl-off { color: #555b80; min-width: 3.5rem; text-align: right; user-select: none; }
.dl-header .dl-code { color: var(--accent2); font-weight: 600; }
.dl-header { margin-top: .35rem; }
.t-kw { color: #c792ea; font-weight: 600; } .t-fn { color: #82aaff; } .t-op { color: #89ddff; }
.t-num { color: #f78c6c; } .t-secret { color: #ff7a88; } .t-key { color: #5ec8ff; } .t-idx { color: #f5c26b; }
.t-lit { color: #a5d6a7; } .t-tmp { color: #e6e8f2; font-style: italic; } .t-com { color: #6d7394; } .t-plain { color: #c3c8e3; }

/* ── UX pass ──────────────────────────────────────────────────────────────────────────── */
:root { --bg: #0f1226; --bg2: #171c38; --bg3: #222a4d; --line: #2C365F; --radius: 12px; --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.25); }
body { background: radial-gradient(1200px 600px at 70% -200px, rgba(103, 139, 255,.10), transparent), var(--bg); }
main#page { padding: 1.6rem 1.4rem 2rem; }
.card, .tile, .pq-hero, .how3 { border-radius: var(--radius); box-shadow: var(--shadow); }
.card { padding: 1.2rem 1.4rem; }
h1 { font-size: 1.9rem; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; }
.top { backdrop-filter: blur(8px); background: rgba(23,26,46,.92); }
.search input { border-radius: 999px; padding: .5rem 1rem; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover { filter: brightness(1.1); }
button.small, .small button { font-size: .85rem; padding: .35rem .8rem; }
.crumbs { color: var(--dim); font-size: .85rem; margin-bottom: .25rem; }
.crumbs a { color: var(--dim); }
.page-head h1 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.page-head h1 .idchip { font-size: 1rem; font-weight: 400; }

/* ids */
.idchip { display: inline-flex; align-items: center; gap: .25rem; background: var(--bg3); border: 1px solid var(--line); border-radius: 6px; padding: .05rem .15rem .05rem .45rem; font-size: .85rem; vertical-align: middle; }
.copybtn { border: none; background: none; padding: 0 .3rem; color: var(--dim); cursor: pointer; font-size: .9rem; }
.copybtn:hover { color: var(--fg); }
.copybtn.copied { color: var(--ok); }

/* glossary terms */
.term { border-bottom: 1px dotted var(--accent2); cursor: help; }
.term:focus { outline: 1px solid var(--accent2); outline-offset: 2px; }

/* dashboard hero: the headline on the left, the three steps (.how3) on the right */
.hero2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.6rem; align-items: center; margin: .6rem 0 1.4rem; }
.kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--accent); font-weight: 700; margin-bottom: .4rem; }
.hero2 h1 { font-size: 2.5rem; line-height: 1.12; margin-bottom: .7rem; }
.hero2 .lede { font-size: 1.08rem; color: #b9bfdc; }

/* three steps: stacked in the hero's side column, a row again once the hero stacks */
.how3 { display: grid; gap: 1rem 1.2rem; align-content: start; background: var(--bg2); border: 1px solid var(--line); padding: 1.1rem 1.3rem; }
.how { display: flex; align-items: center; gap: .8rem; }
.how p { margin: .2rem 0 0; color: var(--dim); font-size: .9rem; }
.how-n { flex: 0 0 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(103, 139, 255,.2); color: #DCE2FF; font-weight: 700; }
.how-more { justify-self: center; text-align: center; white-space: nowrap; font-weight: 600; }
@media (max-width: 960px) {
  .hero2 { grid-template-columns: 1fr; gap: 1.2rem; }
  .how3 { grid-template-columns: repeat(3, 1fr); }
  .how-more { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .how3 { grid-template-columns: 1fr; } }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; margin: 1rem 0; }
.stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; }
.pq-hero .stat { background: rgba(14,16,32,.55); }
.stat-label { color: var(--dim); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.stat-value { font-size: 1.45rem; font-weight: 700; margin: .1rem 0; }
.stat-sub { color: var(--dim); font-size: .8rem; }
.stat-accent { border-color: var(--accent); background: linear-gradient(160deg, rgba(103, 139, 255,.14), var(--bg2)); }
.stats-compact .stat-value { font-size: 1.15rem; }

/* spend / lock hero */
.pq-hero { background: linear-gradient(160deg, rgba(103, 139, 255,.13), rgba(23,26,46,.95) 45%); border: 1px solid #3d3470; padding: 1.3rem 1.5rem; margin-bottom: 1.4rem; }
.pq-hero-bad { border-color: var(--crit); background: linear-gradient(160deg, rgba(255,92,108,.12), rgba(23,26,46,.95) 45%); }
.pq-hero-head { display: flex; gap: 1rem; align-items: flex-start; }
.pq-hero-icon { font-size: 2.2rem; line-height: 1; margin-top: .2rem; }
.pq-hero h2 { font-size: 1.55rem; margin: .15rem 0 .35rem; }
.pq-hero p { margin: 0; color: #c4c9e4; max-width: 920px; }
.pq-hero-kicker { color: var(--dim); font-size: .85rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
h3.sect { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin: 1.3rem 0 .6rem; }

/* step timeline */
.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; overflow-x: auto; }
.step { position: relative; flex: 1 1 0; min-width: 150px; display: flex; flex-direction: column; align-items: flex-start; padding-right: 1rem; }
.step-dot { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; z-index: 1; border: 2px solid; }
.step-ok .step-dot { background: rgba(59,204,138,.15); border-color: var(--ok); color: var(--ok); }
.step-warn .step-dot { background: rgba(245,176,65,.15); border-color: var(--warn); color: var(--warn); }
.step-bad .step-dot { background: rgba(255,92,108,.2); border-color: var(--crit); color: var(--crit); }
.step-idle .step-dot { background: var(--bg3); border-color: var(--line); color: var(--dim); }
.step-line { position: absolute; top: 1rem; left: 2.1rem; right: .1rem; height: 2px; background: var(--line); }
.step-ok .step-line { background: linear-gradient(90deg, var(--ok), var(--line)); }
.step-body { margin-top: .45rem; }
.step-title { font-weight: 700; }
.step-sub { color: var(--dim); font-size: .82rem; }
@media (max-width: 760px) { .steps { flex-direction: column; gap: .8rem; } .step-line { display: none; } }

/* health */
.health-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.hb { padding: .2rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 600; border: 1px solid var(--line); }
.hb-bad { background: rgba(255,92,108,.18); border-color: var(--crit); color: #ffc2c9; }
.hb-ok, .hb-pass { color: var(--ok); border-color: rgba(59,204,138,.5); }
.hb-note { color: var(--info); border-color: rgba(106,166,255,.5); }
.health .verdicts li { align-items: flex-start; }
.health .v-code { margin-left: auto; align-self: flex-start; }
.health-more summary { cursor: pointer; color: var(--accent2); font-size: .9rem; margin: .2rem 0; }

/* tabs */
.tabs { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.4rem; overflow: hidden; }
.pq-hero .tabs { background: rgba(14,16,32,.6); margin-bottom: 0; }
.tab-bar { display: flex; gap: .2rem; padding: .4rem .5rem 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: .6rem .9rem; color: var(--dim); font-weight: 600; white-space: nowrap; }
.tab:hover { color: var(--fg); border-color: transparent; }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); }
.tab-count { font-size: .72rem; background: var(--bg3); border-radius: 999px; padding: .05rem .45rem; margin-left: .2rem; color: var(--dim); font-weight: 500; }
.tab-panel { padding: 1rem 1.2rem 1.2rem; overflow-x: auto; }

/* calls to action */
/* the one link out of a chapter, centred under it */
.ch-links { display: flex; justify-content: center; margin-top: 1.1rem; }
/* attribution for work a chapter is built on: present, not shouted */
.credit { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--dim); font-size: .88rem; }

/* ── the outcome of a locked output: spent (and by what), or still locked ─────────────────── */
.outcome { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; margin: 1.1rem 0 0; padding: .75rem .9rem; background: var(--bg); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius); }
.outcome-icon { flex: none; display: grid; place-items: center; }
.outcome-body { flex: 1 1 20rem; min-width: 0; }
.outcome-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; }
/* the whole panel is the way to the spend, so it behaves like one target */
a.outcome { color: inherit; text-decoration: none; transition: background .15s, border-color .15s, transform .15s; }
a.outcome:hover, a.outcome:focus-visible { background: rgba(103, 139, 255, .1); border-color: var(--accent); text-decoration: none; transform: translateY(-1px); }
a.outcome:hover .outcome-go { filter: brightness(1.12); }
.outcome-detail { margin: .15rem 0 0; color: var(--dim); font-size: .88rem; overflow-wrap: anywhere; }
.outcome-go { flex: none; margin-left: auto; }
.outcome-tag { flex: none; margin-left: auto; padding: .18rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); background: var(--bg3); border: 1px solid var(--line); }
.outcome-spent { border-left-color: var(--accent); }
.outcome-open { border-left-color: var(--ok); }
@media (max-width: 560px) {
  .outcome-go, .outcome-tag { margin-left: 0; width: 100%; justify-content: center; text-align: center; }
}

/* ── Standardness: rules grouped by outcome, breaks first ─────────────────────────────────── */
/* theme.css forces `white-space: nowrap` on every th under 760px, which would push the group
   header's note off screen, so these override it. */
.tbl.pol .pol-gh th { padding-top: .75rem; white-space: normal; border-bottom: 1px solid var(--line); }
.tbl.pol tbody + tbody .pol-gh th { padding-top: 1.2rem; }
.tbl.pol tbody.pol-breaks .pol-gh th { color: var(--warn); }
.tbl.pol tbody.pol-passes .pol-gh th { color: var(--ok); }
.tbl.pol .pol-note { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--dim); }
.tbl.pol tr.pol-break td { background: rgba(245, 176, 65, .07); }
.tbl.pol tr.pol-pass td { background: rgba(59, 204, 138, .05); }
.tbl.pol tbody tr:not(.pol-gh):hover td { background: rgba(103, 139, 255, .12); }
.pill-link { display: inline-block; padding: .25rem .7rem; border-radius: 999px; background: rgba(103, 139, 255,.16); border: 1px solid rgba(103, 139, 255,.45); color: #DCE2FF; font-size: .85rem; white-space: nowrap; }
.pill-link:hover { text-decoration: none; filter: brightness(1.15); }

/* ── Quantum-safe UTXOs ───────────────────────────────────────────────────────────────────
   There are a handful of these in the world, so the front page shows each one as a card that
   tells its life (funded, held, then unlocked) instead of a dense row of fields. The pqb1…
   handle is demoted to a footnote: it is a lookup key, and reading it as a payable address is
   the one mistake a newcomer reliably makes. */
.qs-sum { margin: 0 0 1.2rem; }
.qs-kinds { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }

.qs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.qs-card { background: rgba(14, 17, 38, .5); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; padding: .9rem 1rem; }
.qs-open { border-left-color: rgba(157, 180, 255, .5); }

/* the headline of a lock: what it is worth, which construction built it, where it stands now */
.qs-head { display: flex; align-items: center; gap: .45rem .7rem; flex-wrap: wrap; margin-bottom: .85rem; }
.qs-amt { color: var(--fg); font-size: 1.2rem; font-weight: 700; }
.qs-amt .amt-unit, .qs-amt .usd { font-size: .62em; }
.qs-state { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .65rem; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--dim); white-space: nowrap; }
.qs-state::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.qs-shut .qs-state { color: #C4CCFE; background: rgba(103, 139, 255, .14); border-color: rgba(103, 139, 255, .5); }
.qs-open .qs-state { color: var(--ok); background: rgba(59, 204, 138, .1); border-color: rgba(59, 204, 138, .45); }

/* the life: two events with the time it sat locked between them */
.qs-life { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8.5rem, .8fr) minmax(0, 1fr); gap: .5rem; align-items: center; }
.qs-ev { display: block; min-width: 0; background: rgba(103, 139, 255, .06); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; color: inherit; text-decoration: none; transition: background .15s, border-color .15s; }
a.qs-ev:hover, a.qs-ev:focus-visible { background: rgba(103, 139, 255, .13); border-color: var(--accent); text-decoration: none; }
a.qs-ev:hover .qs-ev-tx, a.qs-ev:focus-visible .qs-ev-tx { color: var(--accent2); }
.qs-ev-off { background: none; border-style: dashed; }
.qs-ev-k { display: flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.qs-ev-k::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent2); }
.qs-ev-off .qs-ev-k::before { background: none; box-shadow: inset 0 0 0 2px var(--line); }
.qs-ev-w { margin-top: .2rem; font-size: .95rem; overflow-wrap: anywhere; }
.qs-ev-tx { display: inline-block; margin-top: .3rem; font-size: .8rem; color: var(--accent); }
.qs-ev-off .qs-ev-tx { color: var(--dim); }
.qs-link { position: relative; display: grid; place-items: center; min-height: 2.75rem; min-width: 0; text-align: center; }
.qs-line { position: absolute; top: 50%; left: 0; width: 100%; border-top: 2px dashed rgba(150, 170, 255, .3); }
.qs-dur { position: relative; padding: 0 .45rem; background: rgba(14, 17, 38, .5); font-size: .76rem; color: var(--dim); }

/* the lookup handle, and the way into the script itself */

@media (max-width: 900px) {
  .qs-life { grid-template-columns: 1fr; gap: .45rem; }
  /* stacked: the connector is a short vertical tick beside the duration, so it goes back to
     being laid out in flow rather than centred across the row */
  .qs-link { grid-template-columns: auto auto; justify-items: start; justify-content: start; align-items: center; gap: 0 .6rem; padding-left: 1rem; min-height: 0; text-align: left; }
  .qs-line { position: static; width: 0; height: 1.6rem; border-top: 0; border-left: 2px dashed rgba(150, 170, 255, .3); }
  .qs-dur { padding: 0; background: none; }
}
@media (max-width: 600px) {
  .qs-card { padding: .8rem .85rem; }
  .qs-amt { font-size: 1.05rem; }
  .qs-state { margin-left: 0; }
}

/* blocks strip */
.cube { flex: 0 0 140px; display: block; padding: .8rem; border-radius: 10px; color: var(--fg); background: linear-gradient(160deg, #4b36a6, #28265f); min-height: 104px; }
.cube:hover { text-decoration: none; filter: brightness(1.15); }
.cube .c-n, .cube .c-t { font-size: .8rem; color: #d6d0f5; }
.cube .c-scan { margin-top: .4rem; font-size: .75rem; font-weight: 600; }
.cube-none { background: linear-gradient(160deg, #33306a, #222450); }
.cube-none .c-scan { color: #a9b0d8; }
.cube-hit { background: linear-gradient(160deg, #5F7FF5, #3350C8); box-shadow: 0 0 0 2px #C4CCFE; }
.blocks { gap: .8rem; }

details.more summary { cursor: pointer; color: var(--accent2); font-size: .9rem; margin-top: .6rem; }
details.more .kv { margin-top: .6rem; }
.empty { border-radius: var(--radius); }
.verdicts li { border-radius: 8px; }

/* compare */
.compare th[scope=row] { color: var(--dim); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .9rem; width: 22%; }
.compare td { width: 39%; }
.compare td.win { background: rgba(59,204,138,.08); box-shadow: inset 3px 0 0 var(--ok); }
.grid2 > .qsb-card { margin: 0; }
.card h2 .mono, .card h2 .hex, .idline { word-break: break-all; }
@media (max-width: 600px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .stat-value { font-size: 1.15rem; }
  .hero2 h1 { font-size: 1.9rem; }
  .pq-hero { padding: 1rem; }
  .tab { padding: .55rem .6rem; }
}

/* the indexer fell behind or its last run failed: not decoration, something is broken */
.idx-stale { color: var(--warn); font-weight: 600; }

/* Repricing: compact inputs, and a brief flash on exactly the figures that moved. */
.repricer { display: inline-flex; align-items: baseline; gap: .35rem; font-size: .85rem; color: var(--dim); }
.repricer input { width: 6.5ch; padding: .15rem .3rem; font-size: .85rem; text-align: right; }
.repricer input#usd { width: 8ch; }
@keyframes cell-flash { from { background: rgba(103, 139, 255, .45); } to { background: transparent; } }
.flash { animation: cell-flash 1.1s ease-out; border-radius: 4px; padding: 0 .15rem; margin: 0 -.15rem; }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }

/* address pages: the summary strip, and the transaction list every explorer leads with */
.addr-sum .stats { margin: 0; }
.count { font-size: .8rem; font-weight: 600; color: var(--dim); background: var(--bg3); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .55rem; vertical-align: middle; }
.b-bad { border-color: var(--crit); color: #ffc2c9; background: rgba(255, 92, 108, .14); }
.atx { list-style: none; margin: 0; padding: 0; }
.atx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .9rem; padding: .7rem .2rem; border-bottom: 1px solid var(--line); align-items: baseline; }
.atx-row:last-child { border-bottom: 0; }
.atx-main { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; min-width: 0; }
.atx-id { font-size: .95rem; }
.atx-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.atx-amt.pos { color: var(--ok); }
.atx-amt.neg { color: var(--accent2); }
.atx-when, .atx-meta { font-size: .82rem; color: var(--dim); }
.atx-meta { text-align: right; white-space: nowrap; }

/* disassembly: every group's table on the same column grid, so the whole tab scans as one */
.disasm table { table-layout: fixed; }
.disasm th:nth-child(1), .disasm td:nth-child(1) { width: 4.5rem; }
.disasm th:nth-child(2), .disasm td:nth-child(2) { width: 12.5rem; }
.disasm th:nth-child(3), .disasm td:nth-child(3) { width: 34%; }
.disasm td.hex { max-width: none; white-space: nowrap; }
.disasm td.role { overflow-wrap: anywhere; }