/*
 * OFFPEG - certificate of authenticity.
 *
 * The visual language is deliberate: paper share certificates fought forgery
 * with guilloche, engraved borders, seals and serial numbers. This tool fights
 * forgery of the tokenised version of those same shares, so it borrows the
 * grammar rather than inventing a neutral dashboard.
 *
 * Colour rules obeyed here:
 *  - the WHOLE palette is declared on :root; the dark media query overrides
 *    variables only, and no colour is ever born inside a media query;
 *  - every foreground/background pair below was measured against WCAG AA
 *    before it was written down, in both themes;
 *  - no semantic meaning is carried by colour alone - every verdict and every
 *    layer result also carries a distinct shape and a written word.
 */

/* ---------------------------------------------------------------------- */
/* Palette - light theme (pale "safety paper" green, the stock certificate  */
/* printers' own choice) is the base.                                       */
/* ---------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Ground and paper */
  --ground: #e2ebe0;
  --ground-deep: #d3e0d2;
  --card: #f0f5ee;
  --inset: #d8e4d6;
  --overlay: rgba(16, 36, 30, 0.06);

  /* Ink */
  --ink: #10241e;
  --ink-dim: #3c554c;
  /* Measured, not guessed. The previous #5d7268 gave 3.93:1 on --inset (the six
     layer-id chips, 10.9px) and 4.22:1 on --ground (the RPC line, 12px) - both
     normal-size text, so both needed 4.5. This value is 4.89 / 5.26 / 5.82 on
     --inset / --ground / --card. */
  --ink-faint: #506358;

  /* Brass - the metal that carries the identity */
  --brass: #6e5214;
  --brass-line: #a8842f;
  /* The button carries its own pair because --brass-line is a RULE colour: it
     is legible as a 1px edge at any weight and illegible as a text ground.
     Light was #d3e0d2 on #a8842f = 2.56:1. Now 6.67:1. */
  --btn-bg: #6e5214;
  --btn-fg: #f2f6f0;
  --brass-soft: rgba(168, 132, 47, 0.4);
  --brass-ghost: rgba(168, 132, 47, 0.16);

  /* Rules and edges */
  --rule: rgba(16, 36, 30, 0.18);
  --rule-strong: rgba(16, 36, 30, 0.34);

  /* Verdict blocks. These stay saturated in BOTH themes: a verdict is meant
     to be read across a room, not to fade politely into the page. */
  --authentic-bg: #1a6b48;
  --authentic-fg: #f4fbf7;
  --authentic-edge: #10543a;
  --impostor-bg: #7e1d2b;
  --impostor-fg: #fdedef;
  --impostor-edge: #611420;
  --unverified-bg: #7a5b1b;
  --unverified-fg: #fbf1dc;
  --unverified-edge: #5e4513;

  /* Layer results, drawn on card backgrounds */
  --pass: #14663f;
  --fail: #8e1c2b;
  --unknown: #6e5214;

  /* Ticker chip hues - six named colours plus two, all AA in both themes */
  --chip-indigo-bg: #dde1f7;
  --chip-indigo-fg: #2a3168;
  --chip-sea-bg: #cfe8ec;
  --chip-sea-fg: #0c3a40;
  --chip-plum-bg: #f0ddf3;
  --chip-plum-fg: #4a2350;
  --chip-copper-bg: #f7e0cd;
  --chip-copper-fg: #5a3216;
  --chip-moss-bg: #dceecf;
  --chip-moss-fg: #24401a;
  --chip-rose-bg: #f8dae3;
  --chip-rose-fg: #5b2438;
  --chip-ochre-bg: #f2e7c6;
  --chip-ochre-fg: #4a390c;
  --chip-steel-bg: #d8e6ee;
  --chip-steel-fg: #223b49;

  /* Ornament ink */
  --guilloche: #a8842f;
  --guilloche-2: #4a6b5c;
  --guilloche-alpha: 0.55;
  --seal-alpha: 0.9;

  --focus: #0c5d8f;

  /* Type */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;
  --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --shadow: 0 1px 2px rgba(16, 36, 30, 0.1), 0 8px 24px rgba(16, 36, 30, 0.08);
  --radius: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #05201c;
    --ground-deep: #041814;
    --card: #0a2c27;
    --inset: #0e3831;
    --overlay: rgba(228, 239, 233, 0.05);

    --ink: #e4efe9;
    --ink-dim: #a9c3b9;
    --ink-faint: #85a094;

    --brass: #d8ac55;
    --brass-line: #c89b3c;
    /* Unchanged pairing: this already measured 7.16:1. */
    --btn-bg: #c89b3c;
    --btn-fg: #041814;
    --brass-soft: rgba(216, 172, 85, 0.42);
    --brass-ghost: rgba(216, 172, 85, 0.14);

    --rule: rgba(216, 172, 85, 0.22);
    --rule-strong: rgba(216, 172, 85, 0.45);

    --pass: #6fcf97;
    --fail: #f08a97;
    --unknown: #e0be6e;

    --chip-indigo-bg: #2a3168;
    --chip-indigo-fg: #c9d0ff;
    --chip-sea-bg: #10444b;
    --chip-sea-fg: #a8e6ef;
    --chip-plum-bg: #4a2350;
    --chip-plum-fg: #edc4f2;
    --chip-copper-bg: #5a3216;
    --chip-copper-fg: #f5c9a0;
    --chip-moss-bg: #2c4a1e;
    --chip-moss-fg: #cde9b4;
    --chip-rose-bg: #5b2438;
    --chip-rose-fg: #f7c3d3;
    --chip-ochre-bg: #55420f;
    --chip-ochre-fg: #f0d79b;
    --chip-steel-bg: #26404f;
    --chip-steel-fg: #b8daec;

    --guilloche: #c89b3c;
    --guilloche-2: #4e8a76;
    --guilloche-alpha: 0.5;

    --focus: #7cc4f5;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.4);
  }
}

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */

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

body {
  margin: 0;
  background-color: var(--ground);
  background-image: radial-gradient(
    120% 80% at 50% 0%,
    var(--overlay) 0%,
    transparent 60%
  );
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

a {
  color: var(--brass);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  color: var(--ink);
  padding: 0.6rem 1rem;
  z-index: 50;
  border: 1px solid var(--rule-strong);
}
.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

.addr {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Anything that could be pathologically long gets its own scroll box, so the
   page itself never scrolls sideways. One impostor on this chain answers
   symbol() with 28,161 characters; the layout has to survive that. */
.scrollbox {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre;
  max-width: 100%;
  padding-bottom: 2px;
}

/* The expanded body of a pathologically long string. Capped in height, scrolls
   inside itself, and obeys [hidden] - which an inline display would not. */
.fullstr {
  display: block;
  margin-top: 0.35rem;
  max-height: 9rem;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--inset);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.4rem 0.5rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

[hidden] {
  display: none !important;
}

.eyebrow {
  font-family: var(--font-text);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.muted {
  color: var(--ink-dim);
}
.faint {
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------------- */
/* Masthead                                                                */
/* ---------------------------------------------------------------------- */

.masthead {
  position: relative;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--ground-deep), var(--ground));
  overflow: hidden;
}

.masthead__guilloche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.masthead__inner {
  position: relative;
  padding: 1.6rem 0 1.1rem;
}

.brandrow {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0;
  color: var(--ink);
  text-transform: uppercase;
}

.wordmark span {
  color: var(--brass);
}

.brandrule {
  flex: 1 1 4rem;
  min-width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--brass-soft), transparent);
}

.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.95rem, 2.4vw, 1.12rem);
  color: var(--ink-dim);
  margin: 0.35rem 0 0;
  max-width: 46rem;
}

/* Health strip - facts from /api/health, never decoration */
.health {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  align-items: center;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}

.health b {
  color: var(--ink);
  font-weight: 600;
}

.health__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pass);
  display: inline-block;
  margin-right: 0.35rem;
  vertical-align: 0.02rem;
}
.health--down .health__dot {
  background: var(--fail);
  border-radius: 0;
  transform: rotate(45deg);
}
.health--down {
  color: var(--fail);
}

/* ---------------------------------------------------------------------- */
/* Search                                                                  */
/* ---------------------------------------------------------------------- */

.searchsec {
  padding: 1.5rem 0 0.5rem;
}

.searchform {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.searchfield {
  flex: 1 1 20rem;
  min-width: 0;
  position: relative;
}

.searchinput {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 0.85rem 0.9rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 2px var(--overlay);
}
.searchinput::placeholder {
  color: var(--ink-faint);
  font-family: var(--font-text);
}

.btn {
  font-family: var(--font-text);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85rem 1.4rem;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  cursor: pointer;
}
.btn:hover {
  filter: brightness(1.08);
}
.btn:disabled {
  cursor: progress;
  opacity: 0.65;
}

.detect {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-dim);
  min-height: 1.2em;
  font-family: var(--font-mono);
}

/* Examples */
.examples {
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.examples__label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
  margin-right: 0.2rem;
}

.chip {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--chip-steel-bg);
  color: var(--chip-steel-fg);
  letter-spacing: 0.02em;
}
.chip:hover {
  border-color: currentColor;
}
.chip--indigo { background: var(--chip-indigo-bg); color: var(--chip-indigo-fg); }
.chip--sea    { background: var(--chip-sea-bg);    color: var(--chip-sea-fg); }
.chip--plum   { background: var(--chip-plum-bg);   color: var(--chip-plum-fg); }
.chip--copper { background: var(--chip-copper-bg); color: var(--chip-copper-fg); }
.chip--moss   { background: var(--chip-moss-bg);   color: var(--chip-moss-fg); }
.chip--rose   { background: var(--chip-rose-bg);   color: var(--chip-rose-fg); }
.chip--ochre  { background: var(--chip-ochre-bg);  color: var(--chip-ochre-fg); }
.chip--steel  { background: var(--chip-steel-bg);  color: var(--chip-steel-fg); }

.chip--addr {
  font-size: 0.76rem;
  font-weight: 500;
}

/* ---------------------------------------------------------------------- */
/* Result region                                                           */
/* ---------------------------------------------------------------------- */

.results {
  padding: 1.25rem 0 0;
}

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0 0 1.25rem;
}

.card__body {
  padding: 1.1rem;
}

@media (min-width: 40rem) {
  .card__body {
    padding: 1.5rem;
  }
}

/* The certificate: an engraved frame painted by canvas behind the content. */
.cert {
  position: relative;
  background: var(--card);
  box-shadow: var(--shadow);
  margin: 0 0 1.25rem;
}

.cert__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.cert__inner {
  position: relative;
  padding: 1.5rem 1.15rem;
}

@media (min-width: 40rem) {
  .cert__inner {
    padding: 2.1rem 2rem;
  }
}

/* Verdict block */
.verdict {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid;
  flex-wrap: wrap;
}

.verdict--authentic {
  background: var(--authentic-bg);
  color: var(--authentic-fg);
  border-color: var(--authentic-edge);
}
.verdict--impostor {
  background: var(--impostor-bg);
  color: var(--impostor-fg);
  border-color: var(--impostor-edge);
}
.verdict--unverified {
  background: var(--unverified-bg);
  color: var(--unverified-fg);
  border-color: var(--unverified-edge);
}

.verdict__mark {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
}
.verdict__mark svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.verdict__text {
  min-width: 0;
  flex: 1 1 12rem;
}

.verdict__word {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}

.verdict__sub {
  font-size: 0.8rem;
  margin: 0.15rem 0 0;

  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* The proof sentence: the ruling itself, never buried. */
.proof {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--inset);
  border-left: 3px solid var(--brass-line);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.proof__label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 700;
  margin: 0 0 0.3rem;
}
.proof__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.5;
}

/* Certificate head: seal, title, serial */
.certhead {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.seal {
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
}
.seal canvas {
  position: absolute;
  inset: 0;
}
.seal__core {
  position: relative;
  text-align: center;
  font-family: var(--font-display);
  line-height: 1.05;
  color: var(--brass);
}
.seal__core b {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.seal__core span {
  display: block;
  font-size: 0.54rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

.certtitle {
  flex: 1 1 14rem;
  min-width: 0;
}
.certtitle h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.5vw, 1.7rem);
  margin: 0.1rem 0 0.1rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.certtitle .sym {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--brass);
  letter-spacing: 0.04em;
}

.serial {
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.serial b {
  color: var(--ink);
  font-weight: 600;
}

/* Address row with copy + explorer */
.addrrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}
.addrrow .addr {
  font-size: 0.84rem;
  background: var(--inset);
  padding: 0.3rem 0.45rem;
  border-radius: 2px;
  border: 1px solid var(--rule);
  min-width: 0;
  flex: 1 1 18rem;
}

.minibtn {
  font-family: var(--font-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.32rem 0.55rem;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-dim);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.minibtn:hover {
  color: var(--ink);
  border-color: var(--brass-line);
}
.minibtn[data-copied="1"] {
  color: var(--pass);
  border-color: var(--pass);
}
/* An address the UI would not link to. explorerLink() refuses to build an href
   out of anything that is not a 20-byte address, and this is what that refusal
   looks like: the same chip, visibly inert, so the reader can see that a link
   was withheld rather than silently dropped. */
.minibtn--dead {
  color: var(--ink-faint);
  border-style: dashed;
  cursor: not-allowed;
}

/* Facts grid */
.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  margin: 1.1rem 0 0;
  border-top: 1px solid var(--rule);
}

@media (min-width: 34rem) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.1rem 1.5rem;
  }
}

.fact {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.fact dt {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
  margin: 0 0 0.2rem;
}
.fact dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}
.fact dd .sub {
  display: block;
  color: var(--ink-dim);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}
.fact dd .null {
  color: var(--ink-faint);
  font-style: italic;
  font-family: var(--font-text);
}

/* ---------------------------------------------------------------------- */
/* Layers                                                                  */
/* ---------------------------------------------------------------------- */

.layers {
  margin: 1.4rem 0 0;
}

.layers__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 0.4rem;
  margin-bottom: 0.2rem;
}
.layers__head h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: 0.02em;
}
.layers__head .tally {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-dim);
}

/* Shown only when an authentic verdict sits above failing layers. */
.layers__caveat {
  margin: 0.7rem 0 0.2rem;
  padding: 0.6rem 0.8rem;
  background: var(--inset);
  border-left: 3px solid var(--unknown);
  font-size: 0.84rem;
  color: var(--ink-dim);
  border-radius: 0 2px 2px 0;
}

.layer {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.15rem 0.65rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.layer__icon {
  grid-row: 1 / span 2;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
}
.layer__icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke-width: 1.7;
}
.layer--pass .layer__icon svg { stroke: var(--pass); }
.layer--fail .layer__icon svg { stroke: var(--fail); }
.layer--unknown .layer__icon svg { stroke: var(--unknown); }

.layer__title {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: baseline;
}
.layer__label {
  font-weight: 600;
  font-size: 0.92rem;
}
.layer__id {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  background: var(--inset);
  padding: 0.05rem 0.3rem;
  border-radius: 2px;
}
.layer__state {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.layer--pass .layer__state { color: var(--pass); }
.layer--fail .layer__state { color: var(--fail); }
.layer--unknown .layer__state { color: var(--unknown); }

.layer__detail {
  grid-column: 2;
  margin: 0.1rem 0 0;
  color: var(--ink-dim);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------- */
/* Epistemic footer - the CLI's closing honesty, kept intact               */
/* ---------------------------------------------------------------------- */

.checkedline {
  margin: 1.2rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.1rem;
}

.epistemic {
  margin: 0.7rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-dim);
}

/* ---------------------------------------------------------------------- */
/* Symbol view                                                             */
/* ---------------------------------------------------------------------- */

.sectionhead {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1.6rem 0 0.7rem;
}
.sectionhead h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0;
  letter-spacing: 0.02em;
}
.sectionhead .count {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-dim);
}
.sectionhead .rule {
  flex: 1 1 2rem;
  height: 1px;
  background: var(--rule-strong);
}

.impostor {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 0.1rem 0.6rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule);
}
.impostor__mark {
  grid-row: 1 / span 3;
  width: 1.4rem;
  height: 1.4rem;
}
.impostor__mark svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: var(--fail);
  stroke-width: 1.7;
}
.impostor__addr {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}
.impostor__addr .addr {
  font-size: 0.8rem;
  flex: 1 1 16rem;
  min-width: 0;
}
.impostor__meta {
  grid-column: 2;
  font-size: 0.82rem;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.impostor__meta .sym {
  font-family: var(--font-mono);
  color: var(--ink);
}

.coverage {
  background: var(--inset);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-top: 1rem;
}
.coverage__nums {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.coverage__nums b {
  display: block;
  font-size: 1.15rem;
  color: var(--ink);
  font-weight: 600;
}
.coverage__nums span {
  color: var(--ink-dim);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.coverage__note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-dim);
  line-height: 1.6;
}

.flag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: 2px;
  border: 1px solid currentColor;
}
.flag--yes { color: var(--pass); }
.flag--no { color: var(--unknown); }

/* Without an explicit size an inline <svg> falls back to 300x150 and swallows
   the row. Every icon in this page is sized by its own container rule. */
.flag svg {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* ---------------------------------------------------------------------- */
/* States: loading / error                                                 */
/* ---------------------------------------------------------------------- */

.state {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass-line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.25rem;
}
.state h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 0.3rem;
}
.state p {
  margin: 0.3rem 0 0;
  color: var(--ink-dim);
  font-size: 0.9rem;
}
.state--error {
  border-left-color: var(--fail);
}
.state__pulse {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--brass-line);
  border-radius: 50%;
  margin-right: 0.4rem;
}

@media (prefers-reduced-motion: no-preference) {
  .state__pulse {
    animation: pulse 1.4s ease-in-out infinite;
  }
  .fadein {
    animation: fadein 0.28s ease-out both;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Explainer + footer                                                      */
/* ---------------------------------------------------------------------- */

.explainer {
  /* `auto` on the inline sides, NOT 0. This element also carries .wrap, whose
     `margin: 0 auto` is what centres every other band on the page - and a
     margin shorthand here overrides it wholesale, at equal specificity and
     later in the file. Writing `0` parks the whole section against the left
     edge on any viewport wider than 62rem while its neighbours stay centred. */
  margin: 2rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule-strong);
}

.explainer h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 0.2rem;
}

.gatelist {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  counter-reset: gate;
  display: grid;
  gap: 0.1rem;
}

@media (min-width: 46rem) {
  .gatelist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.1rem 1.6rem;
  }
}

.gatelist li {
  counter-increment: gate;
  padding: 0.65rem 0 0.65rem 2.1rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-size: 0.88rem;
  color: var(--ink-dim);
}
.gatelist li::before {
  content: counter(gate);
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--brass);
  border: 1px solid var(--brass-soft);
  border-radius: 50%;
}
.gatelist b {
  color: var(--ink);
  display: block;
  font-size: 0.92rem;
}

.sitefooter {
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--rule);
  background: var(--ground-deep);
}
.sitefooter .wrap {
  padding-top: 1.2rem;
  padding-bottom: 2rem;
}
.sitefooter p {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--ink-dim);
  max-width: 46rem;
}
.sitefooter .disclaimer {
  font-family: var(--font-display);
  font-style: italic;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* At the narrowest supported width the ornamental frame padding would eat the
   content, so it steps back. Nothing else about the layout changes. */
@media (max-width: 24rem) {
  .cert__inner {
    padding: 1.25rem 0.85rem;
  }
  .wrap {
    padding: 0 0.7rem;
  }
  .seal {
    width: 72px;
    height: 72px;
  }
}

/* ---------------------------------------------------------------------- */
/* Site navigation - Verify / Tokens / Impostors                           */
/*                                                                         */
/* Three pages, one masthead. The nav is plain markup in each page rather   */
/* than something JS assembles: a reference page that people bookmark must  */
/* have working links before a single script has run.                      */
/* ---------------------------------------------------------------------- */

.sitenav {
  display: flex;
  gap: 0.2rem;
  flex-wrap: wrap;
  align-items: center;
}

.sitenav a {
  font-family: var(--font-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  padding: 0.4rem 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  white-space: nowrap;
}
.sitenav a:hover {
  color: var(--ink);
  border-color: var(--brass-soft);
  background: var(--brass-ghost);
}
/* The current page is marked by aria-current, so the styling and the thing a
   screen reader announces cannot drift apart. */
.sitenav a[aria-current="page"] {
  color: var(--brass);
  border-color: var(--brass-line);
  background: var(--brass-ghost);
}

/* ---------------------------------------------------------------------- */
/* Reference pages: lede, provenance strip, toolbar                        */
/* ---------------------------------------------------------------------- */

.pagetitle {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.4vw, 1.7rem);
  margin: 0.9rem 0 0;
  letter-spacing: 0.02em;
}

.pagelede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.95rem, 2.4vw, 1.08rem);
  color: var(--ink-dim);
  margin: 0.3rem 0 0;
  max-width: 46rem;
}

/* Where the numbers on this page came from. Same grammar as the health strip,
   but it reports a FILE's provenance, not a server's liveness. */
.datastrip {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  align-items: baseline;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}
.datastrip b {
  color: var(--ink);
  font-weight: 600;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
  margin: 1.25rem 0 0.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.field--grow {
  flex: 1 1 16rem;
}
.field > label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}

.select {
  font-family: var(--font-text);
  font-size: 0.85rem;
  padding: 0.6rem 0.6rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  min-height: 2.6rem;
}

.searchinput--sm {
  font-size: 0.9rem;
  padding: 0.6rem 0.7rem;
}

/* A checkbox that reads as a control rather than as stray text. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.65rem 0.7rem;
  cursor: pointer;
  min-height: 2.6rem;
}
.switch input {
  accent-color: var(--brass);
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
}
.switch b {
  font-weight: 600;
}

.resultline {
  margin: 0.3rem 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.resultline b {
  color: var(--ink);
}

/* A short badge. Colour never carries the meaning on its own - the word in the
   badge is the meaning, and the colour only agrees with it. */
.tag {
  display: inline-block;
  font-family: var(--font-text);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.14rem 0.4rem;
  border-radius: 2px;
  border: 1px solid currentColor;
  white-space: nowrap;
  vertical-align: 0.06em;
}
.tag--corp { color: var(--brass); background: var(--brass-ghost); }
.tag--floor { color: var(--unknown); }
.tag--off { color: var(--ink-faint); }

/* ---------------------------------------------------------------------- */
/* The token table                                                         */
/* ---------------------------------------------------------------------- */

.tblwrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.tbl thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--inset);
  border-bottom: 1px solid var(--rule-strong);
  text-align: left;
  padding: 0;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* The header cell IS the sort control, so it is a real button: focusable,
   operable from the keyboard, and announced with its aria-sort state. */
.tbl thead th button {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.tbl thead th button:hover {
  color: var(--ink);
  background: var(--brass-ghost);
}
.tbl thead th button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.tbl thead th[aria-sort] button {
  color: var(--brass);
}
.tbl thead th .arrow {
  font-family: var(--font-mono);
  margin-left: 0.3rem;
}
.tbl thead th.plain {
  padding: 0.6rem 0.7rem;
}

.tbl tbody td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.tbl tbody tr:last-child td {
  border-bottom: 0;
}
.tbl tbody tr:hover td {
  background: var(--overlay);
}

.tbl .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cell-sym {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cell-name {
  color: var(--ink-dim);
  min-width: 12rem;
  overflow-wrap: anywhere;
}
.cell-addr .addr {
  font-size: 0.76rem;
}
.cell-addr .addrrow {
  gap: 0.3rem;
}

/* A row carrying a live corporate action. The brass edge and the badge say it
   twice, because colour alone must never be the message. */
.tbl tbody tr.corp td {
  background: var(--brass-ghost);
}
.tbl tbody tr.corp td:first-child {
  box-shadow: inset 3px 0 0 var(--brass-line);
}
.tbl tbody tr.corp .mult b {
  color: var(--brass);
}

.mult b {
  font-family: var(--font-mono);
  font-weight: 700;
  display: block;
  overflow-wrap: anywhere;
}
.mult .sub {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin-top: 0.15rem;
  overflow-wrap: anywhere;
}
.mult .raw {
  font-family: var(--font-mono);
  color: var(--ink-faint);
}

/* The row a #SYMBOL link landed on. Held for a few seconds, then dropped. */
.tbl tbody tr.jumped td {
  outline: 2px solid var(--brass-line);
  outline-offset: -2px;
}

.rowlink {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-decoration: none;
  color: var(--ink-faint);
  padding: 0 0.15rem;
}
.rowlink:hover {
  color: var(--brass);
}

/* Below this width a five-column table cannot be read, so every row becomes a
   labelled block. The labels come from data-label, which is set beside the cell
   it names, so a new column cannot be added without one. */
@media (max-width: 54rem) {
  .tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .tbl,
  .tbl tbody,
  .tbl tr,
  .tbl td {
    display: block;
    width: auto;
  }
  .tbl tbody tr {
    border-bottom: 1px solid var(--rule-strong);
    padding: 0.5rem 0.1rem;
  }
  .tbl tbody td {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.6rem;
    border-bottom: 0;
    padding: 0.28rem 0.7rem;
  }
  .tbl tbody td::before {
    content: attr(data-label);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-top: 0.2rem;
  }
  .tbl tbody tr.corp td:first-child {
    box-shadow: none;
  }
  .tbl tbody tr.corp {
    box-shadow: inset 3px 0 0 var(--brass-line);
  }
}

/* ---------------------------------------------------------------------- */
/* The impostor leaderboard                                                */
/* ---------------------------------------------------------------------- */

.board {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.brow {
  display: grid;
  grid-template-columns: 2.6rem minmax(6rem, 9rem) minmax(0, 1fr);
  gap: 0.2rem 0.8rem;
  align-items: baseline;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.brow:last-child {
  border-bottom: 0;
}
.brow:hover {
  background: var(--overlay);
}

.brow__rank {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.brow__sym {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
}
.brow__sym a {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--brass-soft);
  overflow-wrap: anywhere;
}
.brow__sym a:hover {
  color: var(--brass);
}

.brow__main {
  min-width: 0;
}

.brow__count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.brow__count b {
  font-size: 1.15rem;
  color: var(--ink);
  font-weight: 700;
}
/* The third row state: the scan could not enumerate the explorer at all.
   Deliberately NOT drawn in the weight or colour a count gets - it is the
   absence of a finding, not a finding of absence, and it must not read as a
   number. --unknown is the palette's existing "we do not know" tone, already
   defined on :root and overridden for dark. */
/* Last-resort wrapping for anything that carries a string read off chain.
   The clamp in the JS is the real defence; this is the net under it, so that a
   single unbroken 28,161-character symbol that reaches a paragraph by some path
   nobody thought of cannot push the page sideways. Costs nothing when the text
   is normal. */
#others,
#coverage-note,
.brow__note {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.brow__count b.brow__nolook {
  font-family: var(--font-text);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--unknown);
}
.brow__count .qual {
  font-family: var(--font-text);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.brow__count .unit {
  font-family: var(--font-text);
  font-size: 0.78rem;
  color: var(--ink-dim);
}

/* The bar is scaled against the largest count on the board and nothing else.
   It carries no number of its own; it is only a second reading of the figure
   printed beside it. */
.bar {
  margin: 0.35rem 0 0.3rem;
  height: 0.4rem;
  background: var(--inset);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.bar__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brass-line), var(--brass-soft));
}

.brow__meta {
  font-size: 0.78rem;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.brow__meta .sep {
  color: var(--ink-faint);
  padding: 0 0.35rem;
}

.brow__note {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

@media (max-width: 34rem) {
  .brow {
    grid-template-columns: 2rem minmax(0, 1fr);
  }
  .brow__main {
    grid-column: 2;
  }
}

/* A per-symbol expander for the indexer's own coverage sentence. */
.brow__toggle {
  all: unset;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px dotted var(--ink-faint);
}
.brow__toggle:hover {
  color: var(--brass);
  border-bottom-color: var(--brass);
}
.brow__toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* Callouts shared by both reference pages                                 */
/* ---------------------------------------------------------------------- */

.callout {
  background: var(--inset);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass-line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 1.25rem 0 0;
}
.callout h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 0.35rem;
}
.callout p {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-dim);
  max-width: 48rem;
  line-height: 1.6;
}
.callout .formula {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.35rem 0.5rem;
  margin-top: 0.5rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.callout__actions {
  margin-top: 0.7rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.emptynote {
  padding: 1.4rem 1rem;
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.9rem;
}

/* The wordmark is a heading on the verifier and a link home on the reference
   pages. As a link it must not pick up the underline every other anchor gets;
   its colour already comes from .wordmark, which outranks the bare `a` rule. */
.wordmark--link {
  text-decoration: none;
}
.wordmark--link:hover {
  color: var(--ink);
}
.wordmark--link:hover span {
  color: var(--ink);
}

/* ---------------------------------------------------------------------- */
/* Wallet check                                                            */
/* ---------------------------------------------------------------------- */
/*
 * No new colours are defined below. Every value is one of the variables the
 * rest of this sheet already declares in :root and re-declares under
 * prefers-color-scheme: dark, so this section follows the theme for free and
 * has nothing of its own to keep in sync.
 */

/* The banner that carries the one sentence somebody actually reads. It takes
   the colour of the WORST finding in the wallet, and it is never green unless
   every holding was settled - "nothing found" is drawn as unverified, because
   a list that was not exhaustive is not a clean bill of health. */
.walletsay {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 1.25rem 0 0;
  box-shadow: var(--shadow);
}
.walletsay--impostor {
  background: var(--impostor-bg);
  color: var(--impostor-fg);
  border-color: var(--impostor-edge);
}
.walletsay--unverified {
  background: var(--unverified-bg);
  color: var(--unverified-fg);
  border-color: var(--unverified-edge);
}
.walletsay--authentic {
  background: var(--authentic-bg);
  color: var(--authentic-fg);
  border-color: var(--authentic-edge);
}
.walletsay__mark {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
}
.walletsay__mark svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.walletsay__text {
  min-width: 0;
}
.walletsay__line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 3.4vw, 1.28rem);
  line-height: 1.35;
}
.walletsay__sub {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  opacity: 0.92;
}

/* Three counts. The number is never the whole message - the word under it is,
   and "not canonical" is spelled out rather than shortened to "fake". */
.tally {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.55rem;
  margin: 0.7rem 0 0;
}
.tally__cell {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--card);
  padding: 0.7rem 0.8rem;
}
.tally__cell--authentic { border-left-color: var(--pass); }
.tally__cell--impostor { border-left-color: var(--fail); }
.tally__cell--unverified { border-left-color: var(--unknown); }
.tally__n {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}
.tally__label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}

/* One holding. */
.hold {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--card);
  padding: 0.85rem 0.95rem;
  margin-top: 0.55rem;
}
.hold--authentic { border-left-color: var(--pass); }
.hold--impostor { border-left-color: var(--fail); }
.hold--unverified { border-left-color: var(--unknown); }

.hold__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
}
.hold__sym {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.hold__name {
  font-size: 0.82rem;
  color: var(--ink-dim);
  min-width: 0;
  overflow-wrap: anywhere;
}
.hold__state {
  font-family: var(--font-text);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.16rem 0.45rem;
  border-radius: 2px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.hold__state--authentic { color: var(--pass); }
.hold__state--impostor { color: var(--fail); }
.hold__state--unverified { color: var(--unknown); }

/* Raw and effective side by side. When a corporate action has scaled a token
   these are DIFFERENT numbers, and showing only one of them would be picking
   which truth to tell. */
.amts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem 1.2rem;
  margin: 0.6rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule);
}
.amt__label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}
.amt__value {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.amt__note {
  display: block;
  font-size: 0.7rem;
  color: var(--ink-faint);
}

.hold__proof {
  margin: 0.6rem 0 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.hold__addr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: 0.78rem;
}

/* "The real one is over here." The single most useful line on the page for
   somebody who has just been told their token is not the token. */
.hold__real {
  margin: 0.55rem 0 0;
  padding: 0.5rem 0.6rem;
  background: var(--brass-ghost);
  border-left: 2px solid var(--brass-line);
  border-radius: 2px;
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.hold__more {
  margin-top: 0.55rem;
}
.hold__more > summary {
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}
.hold__more > summary:hover {
  color: var(--brass);
}
.hold__more[open] > summary {
  margin-bottom: 0.5rem;
}

.groupline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0.1rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
}
.groupline h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0;
  color: var(--ink);
}
.groupline p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-dim);
}

@media (max-width: 24rem) {
  .walletsay {
    padding: 0.8rem 0.85rem;
    gap: 0.6rem;
  }
  .hold {
    padding: 0.75rem 0.7rem;
  }
}