/* Tokens from DESIGN.md (IBM Carbon): flat square chrome, one blue, hairline rules, Plex Sans and Plex Mono. */
:root {
  --canvas: #ffffff; --surface: #f4f4f4; --hair: #e0e0e0; --ink: #161616; --muted: #525252;
  --primary: #0f62fe; --primary-press: #002d9c; --ok: #198038; --bad: #da1e28; --warn-ink: #8e6a00;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.5 var(--sans); letter-spacing: .01em; }
main { max-width: 1040px; margin: 0 auto; padding: var(--s5) var(--s4) 96px; }
.mark { margin: 0; font: 600 14px/1.3 var(--mono); letter-spacing: .04em; color: var(--primary); }
h1 { font: 300 clamp(28px, 5vw, 42px)/1.2 var(--sans); letter-spacing: 0; margin: var(--s2) 0 var(--s3); max-width: 22ch; }
h2 { font: 400 24px/1.33 var(--sans); margin: var(--s7) 0 var(--s1); padding-top: var(--s4); border-top: 1px solid var(--ink); }
h3 { font: 600 14px/1.3 var(--sans); margin: var(--s5) 0 var(--s2); }
.lede { margin: 0 0 var(--s5); max-width: 68ch; color: var(--muted); }
.seen { margin: 0 0 var(--s3); color: var(--muted); font-size: 14px; max-width: 68ch; }
code { font: 400 .875em var(--mono); background: var(--surface); padding: 0 var(--s1); }

.controls { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, .6fr) auto; gap: var(--s3); align-items: end; }
.field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
label { font-size: 12px; letter-spacing: .03em; color: var(--muted); }
select, input[type=text], textarea { font: 400 14px/1.4 var(--mono); padding: 10px var(--s3); border: 0; border-bottom: 1px solid var(--ink); background: var(--surface); color: var(--ink); border-radius: 0; width: 100%; min-width: 0; }
textarea { border: 1px solid var(--hair); border-bottom-color: var(--ink); resize: vertical; margin: var(--s1) 0 var(--s3); }
button { font: 400 14px/1.3 var(--sans); padding: 12px var(--s4); border: 1px solid var(--primary); background: var(--primary); color: #fff; border-radius: 0; cursor: pointer; }
button:hover { background: #0050e6; }
button:active { background: var(--primary-press); }
button.secondary { background: transparent; color: var(--primary); }
button.secondary:hover { background: var(--surface); }
button:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
a { color: var(--primary); text-underline-offset: 3px; }

.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s6); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); }
.cell { padding: var(--s4) var(--s4) var(--s4) 0; display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.cell + .cell { padding-left: var(--s4); border-left: 1px solid var(--hair); }
.cell .k { font-size: 12px; color: var(--muted); letter-spacing: .03em; }
.cell .v { font: 300 28px/1.2 var(--sans); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cell .so { font-size: 13px; color: var(--muted); }
.v.ok { color: var(--ok); } .v.bad { color: var(--bad); }

.panel { border: 1px solid var(--hair); background: var(--canvas); padding: var(--s4); overflow-wrap: anywhere; }
.panel.err { border-left: 4px solid var(--bad); }
.panel .actions, .actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0; }
label.check { display: flex; gap: var(--s2); align-items: flex-start; font-size: 14px; color: var(--ink); margin: 0 0 var(--s3); }
label.check input { margin-top: 4px; }
dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s5); }
dt { color: var(--muted); font-size: 14px; }
dd { margin: 0; }
.mono { font-family: var(--mono); font-size: 13px; }
.read { color: var(--muted); font: 400 12px/1.5 var(--mono); margin: var(--s3) 0 0; }
.err strong { display: block; margin-bottom: var(--s1); }
.err pre { margin: var(--s2) 0; padding: var(--s2) var(--s3); background: var(--surface); white-space: pre-wrap; overflow-wrap: anywhere; font: 400 12px/1.5 var(--mono); }

ol.links { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: 1px solid var(--ink); counter-reset: none; }
ol.links li { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3) var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--hair); }
ol.links .n { font: 500 14px/1.5 var(--mono); color: var(--primary); }
ol.links .what { font-weight: 600; font-size: 14px; display: block; }
ol.links .why { color: var(--muted); font-size: 13px; display: block; margin-top: var(--s1); }
ol.links .val { font: 400 12px/1.5 var(--mono); overflow-wrap: anywhere; }
ol.links .src { display: block; margin-top: var(--s2); font-size: 13px; }
ol.links .src a { margin-right: var(--s3); }

ol.steps { list-style: none; margin: 0; padding: 0; }
ol.steps li { border-top: 1px solid var(--hair); padding: var(--s3) 0; }
ol.steps li:first-child { border-top: 0; padding-top: 0; }
.tag { display: inline-block; min-width: 5em; padding: 1px var(--s2); margin-right: var(--s2); font: 500 12px/1.5 var(--mono); border: 1px solid var(--ink); text-align: center; }
.tag.pass, .tag.match { color: var(--ok); border-color: var(--ok); }
.tag.fail, .tag.differs { color: var(--bad); border-color: var(--bad); }
.tag.skip { color: var(--muted); border-color: var(--muted); }
.tag.cvm { color: var(--muted); border-color: var(--muted); }
.detail { display: block; margin: var(--s1) 0 0; color: var(--muted); font-size: 13px; }
.detail.mono { font-family: var(--mono); font-size: 12px; }

.verdict { border: 1px solid var(--ink); padding: var(--s4); border-left-width: 6px; }
.verdict.ok { border-color: var(--ok); } .verdict.bad { border-color: var(--bad); }
.verdict .head { font: 300 28px/1.2 var(--sans); margin: 0 0 var(--s2); }
.verdict.ok .head { color: var(--ok); } .verdict.bad .head { color: var(--bad); }
.verdict .reason { font: 400 14px/1.5 var(--mono); margin: 0 0 var(--s2); overflow-wrap: anywhere; }

.pay-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.pay-controls, .pay-proof { min-width: 0; }
.pay-controls > .actions { margin: var(--s3) 0; }
.pay-controls textarea { min-height: 104px; }
.pay-controls button { min-height: 44px; }
.wallet-note, .pay-message { margin: 0 0 var(--s3); color: var(--muted); font-size: 14px; }
#pay-account { overflow-wrap: anywhere; }
#pay-registration { margin: var(--s4) 0; }
#pay-steps { margin: 0; }
#pay-steps li { overflow-wrap: anywhere; }
#pay-steps .tx-line { display: grid; gap: var(--s1); }
#pay-steps .tx-link { overflow-wrap: anywhere; }
#pay-answer { margin-top: var(--s5); }
#pay-answer pre { margin: 0; padding: var(--s3); background: var(--surface); white-space: pre-wrap; overflow-wrap: anywhere; font: 400 14px/1.5 var(--sans); }
#pay-actions { margin-top: var(--s4); }
#pay-actions[hidden], #pay-answer[hidden], #pay-dishonest[hidden], #pay-forge[hidden], #pay-disconnect[hidden] { display: none; }

footer { margin-top: var(--s7); color: var(--muted); font-size: 14px; border-top: 1px solid var(--hair); padding-top: var(--s4); }
.noscript { padding: var(--s4); }

@media (max-width: 760px) {
  .controls { grid-template-columns: 1fr; }
  button#reload { width: 100%; }
  .summary { grid-template-columns: 1fr 1fr; }
  .cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .cell { border-bottom: 1px solid var(--hair); }
  ol.links li { grid-template-columns: 28px minmax(0, 1fr); }
  ol.links li .col3 { grid-column: 2; }
  dl { grid-template-columns: 1fr; gap: 0; }
  dt { margin-top: var(--s3); }
  .pay-grid { grid-template-columns: minmax(0, 1fr); }
  .pay-controls button, #pay-actions button { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) { button { transition: background-color .12s ease; } }