/* Qumbra explorer — one page, no framework, no build step, no external reference.
 *
 * The token block, the bilingual switch and the theme switch are lifted from
 * `qumbra-web/assets/site.css` on purpose: two surfaces of one project should not
 * drift into two visual languages, and `qumbra-design/brand/README.md` is the source
 * of truth for the four named colours below. If a token changes there, change it in
 * both places — the duplication is deliberate (two static repos cannot share a file
 * without a build step, and the build step costs more than the copy).
 *
 * Nothing here loads over the network. No font, no CDN, no icon set. `qumbra-faucet`
 * pays for that rule with a test and states the reason: a page that pulls a font from
 * a CDN tells that CDN who is reading a privacy chain. This surface takes no input,
 * so the argument is weaker here — and the cost of honouring it is zero.
 */

:root {
  --void:   #0B0E15;
  --signal: #E6EAF0;
  --umbra:  #10131C;
  --paper:  #EFF1F2;

  --bg:      var(--void);
  --bg-alt:  #0E121B;
  --fg:      var(--signal);
  --fg-mute: #8C97AB;
  --rule:    #1D2331;
  --card-bg: #121724;
  --accent:  #7FD4C1;
  --green:   #5BC98F;
  --amber:   #E0B252;
  --red:     #E0666B;

  --wrap: 900px;
  --radius: 10px;
}

html[data-theme="light"] {
  --bg:      var(--paper);
  --bg-alt:  #E4E7EA;
  --fg:      var(--umbra);
  --fg-mute: #5A6473;
  --rule:    #CDD3D9;
  --card-bg: #FFFFFF;
  --accent:  #157F6A;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --bg:      var(--paper);
    --bg-alt:  #E4E7EA;
    --fg:      var(--umbra);
    --fg-mute: #5A6473;
    --rule:    #CDD3D9;
    --card-bg: #FFFFFF;
    --accent:  #157F6A;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.6 ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── bilingual switch ─────────────────────────────────────────────
   Both languages ship in the HTML and CSS decides which is displayed — the same
   mechanism qumbra-web uses. Dynamic prose is written into BOTH slots by app.js,
   so switching language never needs a re-fetch or a re-render. */
body [lang="en"] { display: none; }
body [lang="zh"] { display: none; }
html[data-lang="en"] body [lang="en"] { display: revert; }
html[data-lang="zh"] body [lang="zh"] { display: revert; }
html[data-lang="zh"] body { line-height: 1.8; }

code, .num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .94em; }

.skip {
  position: absolute; left: -9999px;
  background: var(--card-bg); color: var(--fg); padding: .6rem 1rem; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ── chrome ───────────────────────────────────────────────────── */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; max-width: var(--wrap); margin: 0 auto; padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--rule);
}
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--fg); }
.mark { width: 26px; height: 26px; }
.wordmark { font-weight: 600; letter-spacing: .01em; }

.controls { display: flex; gap: .5rem; }
.controls button {
  background: transparent; color: var(--fg-mute); cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .3rem .6rem; font: inherit; font-size: .88rem; line-height: 1.4;
}
.controls button:hover { color: var(--fg); border-color: var(--fg-mute); }
html[data-theme="light"] .t-light, .t-dark { display: none; }
html[data-theme="light"] .t-dark { display: inline; }
html:not([data-theme="light"]) .t-light { display: inline; }

main { max-width: var(--wrap); margin: 0 auto; padding: 1.6rem 1.2rem 3rem; }

h1 { font-size: 1.6rem; margin: .4rem 0 .5rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 2rem 0 .5rem; letter-spacing: .01em; }
.lede { color: var(--fg-mute); margin: 0 0 1.4rem; max-width: 62ch; }
.note { color: var(--fg-mute); font-size: .92rem; margin: .1rem 0 .7rem; max-width: 68ch; }
.meta { color: var(--fg-mute); font-size: .9rem; margin-top: 2rem; }

/* ── tables ───────────────────────────────────────────────────── */

table { border-collapse: collapse; width: 100%; margin: 0 0 .4rem; }
th, td {
  text-align: left; padding: .45rem .7rem;
  border-bottom: 1px solid var(--rule); vertical-align: baseline;
}
tbody th { font-weight: 400; color: var(--fg-mute); width: 42%; }
td { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .94em; }
thead th { color: var(--fg-mute); font-weight: 500; font-size: .85rem; }
thead th, tbody td:last-child { font-family: inherit; }
tr:last-child th, tr:last-child td { border-bottom: none; }

/* A wide table must scroll inside itself rather than push the page sideways. */
section { overflow-x: auto; }

/* ── banners and severities ───────────────────────────────────── */

.banner {
  background: var(--card-bg); border: 1px solid var(--rule);
  border-left-width: 3px; border-radius: var(--radius);
  padding: .1rem 1rem; margin: .8rem 0;
}
.banner p { max-width: 72ch; }
.banner.ok   { border-left-color: var(--green); }
.banner.warn { border-left-color: var(--amber); }
.banner.bad  { border-left-color: var(--red); }
.banner.mute { border-left-color: var(--fg-mute); }

.dot {
  display: inline-block; width: .62em; height: .62em; border-radius: 50%;
  margin-right: .5em; background: var(--fg-mute); vertical-align: baseline;
}
.dot.ok   { background: var(--green); }
.dot.warn { background: var(--amber); }
.dot.bad  { background: var(--red); }

/* Tokens stay literal and greppable — they are the same spellings qumbra-opview and
   the wallet CLI use, so a reader who greps one surface can grep all three. */
#agreement-token, .verdict { font-weight: 600; letter-spacing: .02em; }
.verdict.ok  { color: var(--green); font-weight: 400; }
.verdict.bad { color: var(--red); }

footer {
  max-width: var(--wrap); margin: 0 auto; padding: 1.4rem 1.2rem 3rem;
  border-top: 1px solid var(--rule); color: var(--fg-mute); font-size: .9rem;
}
footer p { max-width: 76ch; }
a { color: var(--accent); }

/* The transaction table's block headers: one row naming the height and how many of
   its transactions are being shown, so a filtered view never looks like the block
   only ever held what survived the filter. */
#tx-rows tr.group th {
  text-align: left;
  padding-top: 1rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
#tx-rows td:nth-child(2) {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  word-break: break-all;
}
#tx-rows td:nth-child(n + 3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#tx-search {
  margin-inline-start: 0.5rem;
  padding: 0.25rem 0.5rem;
  min-width: 22ch;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: 0.85;
}