/* OmniTrace mini-app — scan result screen (2026-10-17).
 *
 * The public site's design system (omnitraceapp.com, app/web/seo.css + site.css), COPIED here and
 * scoped under `.rs` so no other tab of the mini-app changes. app/web is never imported or linked:
 * the site has its own release cycle and another session edits it.
 *
 * Four accents, one job each — a fifth is noise:
 *   cream  #F1EBDE  text, headlines            cyan  #22E3D0  clean / live
 *   lime   #C4F82A  caution + the ONE primary action
 *   rose   #FF3D63  frozen / sanctioned / high risk
 * No orange. Hard edges. Instrument Sans for words, JetBrains Mono for data only.
 *
 * ADDRESSES ARE NEVER CUT. Every address renders whole on a block-level mono line sized to fit a
 * 360px phone (TRON 34 chars, EVM 42), with break-all as the fallback. Never use text-overflow:
 * ellipsis on an address, and never overflow-wrap:anywhere on a squeezed flex item — on a phone it
 * renders the address one character per line (site gotcha, 2026-09-06).
 */

.rs {
    --rs-bg: #07090D;
    --rs-bg-2: #0D1219;
    --rs-line: #1C2530;
    --rs-line-2: #2C3844;
    --rs-cream: #F1EBDE;
    --rs-dim: #7E8C9A;
    --rs-cyan: #22E3D0;
    --rs-lime: #C4F82A;
    --rs-rose: #FF3D63;
    --rs-ink: #07090D;
    --rs-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --rs-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --rs-ease: cubic-bezier(.16, 1, .3, 1);

    background: var(--rs-bg);
    color: var(--rs-cream);
    font-family: var(--rs-sans);
    font-size: 15px;
    line-height: 1.5;
    padding: 16px 16px 24px;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}
/* In the app the result sits inside #app (20px padding) and the scan .glass-card (24px padding +
 * 1px border) — 45px lost on each side, which on a 360px phone pushed most addresses onto two
 * lines (measured 2026-10-17). Almost every user is on a phone, so the result breaks out of the
 * card and runs edge to edge as its own band, with the site's 16px gutter. If either padding in
 * styles.css changes, change -45px with it. */
#scan-results > .rs { margin: 20px -45px 0; }
[dir="rtl"] .rs { --rs-sans: "Instrument Sans", "IBM Plex Sans Arabic", system-ui, sans-serif; }
.rs *, .rs *::before, .rs *::after { box-sizing: border-box; }
.rs b, .rs strong { font-weight: 700; color: var(--rs-cream); }
.rs a { color: var(--rs-cyan); text-decoration: none; border-bottom: 1px solid currentColor; }
.rs button { font-family: inherit; }
.rs :focus-visible { outline: 2px solid var(--rs-lime); outline-offset: 3px; }

/* ── Addresses: whole, always ─────────────────────────────────────────────── */
/* The address box is a size container; its text sizes itself to the box so the whole address fits
 * on ONE line (34 TRON chars ≈ 20.6em of mono, 42 EVM chars ≈ 25.4em), between 10px and 12.5px.
 * Narrower than that, break-all wraps it cleanly. A browser without container queries simply
 * wraps at 12.5px — never clipped, never cut. */
.rs .rs-addr {
    display: block;
    font-family: var(--rs-mono);
    font-size: 12.5px;
    letter-spacing: 0;
    color: var(--rs-cream);
    word-break: break-all;
    unicode-bidi: isolate;
    direction: ltr;
    text-align: left;
    container-type: inline-size;
}
.rs .rs-addr > span { display: block; }
@supports (container-type: inline-size) {
    .rs .rs-addr > span { font-size: clamp(10px, calc(100cqw / 21), 12.5px); }
    .rs .rs-addr.evm > span { font-size: clamp(10px, calc(100cqw / 26), 12.5px); }
}
.rs .rs-addr.dim { color: var(--rs-dim); }
.rs .rs-addr-line { display: flex; align-items: flex-start; gap: 6px; }
.rs .rs-addr-line .rs-addr { flex: 1 1 auto; min-width: 0; }
.rs .rs-icon-btn {
    flex: none;
    background: transparent;
    border: 1px solid var(--rs-line-2);
    color: var(--rs-dim);
    width: 26px; height: 24px;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
}
.rs .rs-icon-btn:active { border-color: var(--rs-cyan); color: var(--rs-cyan); }
.rs .rs-name {
    display: inline-block;
    font-family: var(--rs-sans);
    font-size: 12px;
    font-weight: 700;
    color: var(--rs-cyan);
    margin-bottom: 2px;
}

/* ── Warnings (above the verdict) ─────────────────────────────────────────── */
.rs .rs-warn { border: 2px solid var(--rs-rose); padding: 12px 14px; margin-bottom: 12px; }
.rs .rs-warn-title { font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; }
.rs .rs-warn-body { font-size: 13.5px; color: var(--rs-dim); margin-top: 4px; }

/* ── Verdict: the loudest thing on the screen ─────────────────────────────── */
.rs .rs-verdict { border: 2px solid var(--rs-rose); animation: rs-up .34s var(--rs-ease); }
.rs .rs-v-head { background: var(--rs-rose); color: var(--rs-ink); padding: 14px 16px 16px; }
.rs .rs-v-kicker {
    font-family: var(--rs-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .72;
}
.rs .rs-v-band {
    font-size: clamp(32px, 10vw, 46px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: .96;
    text-transform: uppercase;
    margin-top: 4px;
}
.rs .rs-v-body { padding: 16px; }
.rs .rs-v-reason { font-size: 15.5px; font-weight: 500; }
.rs .rs-v-note { font-size: 13px; color: var(--rs-dim); margin-top: 6px; }
.rs .rs-v-subject { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rs-line); }
.rs .rs-k {
    font-family: var(--rs-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rs-dim);
    margin-bottom: 4px;
}
.rs .rs-v-identity { margin-top: 8px; font-size: 13px; color: var(--rs-rose); font-weight: 600; }
.rs .rs-v-meta { margin-top: 8px; font-family: var(--rs-mono); font-size: 11.5px; color: var(--rs-dim); }

.rs .rs-verdict.band-HIGH_RISK, .rs .rs-verdict.band-PENDING { border-color: var(--rs-rose); }
.rs .rs-verdict.band-HIGH_RISK .rs-v-head, .rs .rs-verdict.band-PENDING .rs-v-head { background: var(--rs-rose); }
.rs .rs-verdict.band-CAUTION { border-color: var(--rs-lime); }
.rs .rs-verdict.band-CAUTION .rs-v-head { background: var(--rs-lime); }
.rs .rs-verdict.band-CLEAN { border-color: var(--rs-cyan); }
.rs .rs-verdict.band-CLEAN .rs-v-head { background: var(--rs-cyan); }
/* A public address is NOT vouched for: neutral, no fill, never green (root CLAUDE.md). */
.rs .rs-verdict.band-KNOWN_ENTITY { border-color: var(--rs-cream); }
.rs .rs-verdict.band-KNOWN_ENTITY .rs-v-head { background: transparent; color: var(--rs-cream); border-bottom: 1px solid var(--rs-line-2); }

/* ── Two-up status cells inside the verdict ───────────────────────────────── */
.rs .rs-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--rs-line);
    margin-top: 14px;
}
.rs .rs-facts > div { padding: 10px 12px; }
.rs .rs-facts > div + div { border-left: 1px solid var(--rs-line); }
.rs .rs-fv { font-family: var(--rs-mono); font-size: 15px; font-weight: 700; }
.rs .t-rose { color: var(--rs-rose); }
.rs .t-cyan { color: var(--rs-cyan); }
.rs .t-lime { color: var(--rs-lime); }
.rs .t-dim { color: var(--rs-dim); }

/* ── Actions row ──────────────────────────────────────────────────────────── */
.rs .rs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rs .rs-btn-ghost, .rs .rs-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 16px;
    font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
    cursor: pointer;
    transition: background .16s, color .16s, border-color .16s;
}
.rs .rs-btn-ghost { background: transparent; color: var(--rs-cream); border: 1px solid var(--rs-line-2); }
.rs .rs-btn-ghost:active { border-color: var(--rs-cyan); color: var(--rs-cyan); }
.rs .rs-btn-primary { background: var(--rs-lime); color: var(--rs-ink); border: 2px solid var(--rs-lime); }
.rs .rs-btn-primary:active { background: transparent; color: var(--rs-lime); }
.rs .rs-btn-block { display: flex; width: 100%; margin-top: 10px; }
.rs .rs-btn-sm { min-height: 34px; padding: 0 12px; font-size: 12px; }

/* ── Stats grid ───────────────────────────────────────────────────────────── */
.rs .rs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    margin-top: 22px;
    border-top: 1px solid var(--rs-line);
}
.rs .rs-stats > div { padding: 14px 8px 4px 0; border-bottom: 1px solid var(--rs-line); min-width: 0; overflow-wrap: break-word; }
.rs .rs-stat-v { font-family: var(--rs-mono); font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.rs .rs-stat-s { font-family: var(--rs-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.rs .rs-cov { margin-top: 12px; font-size: 12.5px; color: var(--rs-dim); border-left: 2px solid var(--rs-lime); padding-left: 10px; }
.rs .rs-cov.is-severe { border-left-color: var(--rs-rose); }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.rs .rs-sec { margin-top: 30px; }
.rs .rs-h {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    font-size: 17px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase;
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--rs-line-2);
}
.rs .rs-h .rs-count { font-family: var(--rs-mono); font-size: 12px; font-weight: 400; color: var(--rs-dim); text-transform: none; }
.rs .rs-sub {
    font-family: var(--rs-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--rs-dim); margin: 22px 0 10px;
    display: flex; align-items: center; gap: 8px;
}
.rs .rs-sub:first-of-type { margin-top: 4px; }
.rs .rs-note { font-size: 13px; color: var(--rs-dim); margin: 10px 0 0; }
.rs .rs-empty { font-size: 14px; color: var(--rs-dim); padding: 6px 0; }
.rs .rs-empty.ok { color: var(--rs-cyan); }

/* Depth chips: 1 = direct (rose fill), 2 / 3 = indirect (outline). */
.rs .rs-depth {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    font-family: var(--rs-mono); font-size: 11.5px; font-weight: 700;
    border: 1px solid var(--rs-line-2); color: var(--rs-cream);
}
.rs .rs-depth.d1 { background: var(--rs-rose); border-color: var(--rs-rose); color: var(--rs-ink); }
.rs .rs-depth.d2, .rs .rs-depth.d3 { border-color: var(--rs-lime); color: var(--rs-lime); }

/* ── Rows (known services, direct hits, transactions, events) ─────────────── */
.rs .rs-row { padding: 11px 0; border-bottom: 1px solid var(--rs-line); }
.rs .rs-row:last-child { border-bottom: 0; }
.rs .rs-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.rs .rs-row-label { font-size: 13.5px; font-weight: 600; min-width: 0; }
.rs .rs-row-val { font-family: var(--rs-mono); font-size: 13px; white-space: nowrap; flex: none; }
.rs .rs-row-meta { font-family: var(--rs-mono); font-size: 11.5px; color: var(--rs-dim); margin-top: 4px; }
.rs .rs-dir-in { color: var(--rs-cyan); }
.rs .rs-dir-out { color: var(--rs-rose); }

.rs .rs-tag {
    display: inline-block;
    font-family: var(--rs-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
    padding: 2px 7px; margin: 0 4px 0 0;
    border: 1px solid var(--rs-line-2); color: var(--rs-dim);
    white-space: nowrap;
}
.rs .rs-tag.rose { border-color: var(--rs-rose); color: var(--rs-rose); }
.rs .rs-tag.rose-fill { background: var(--rs-rose); border-color: var(--rs-rose); color: var(--rs-ink); }
.rs .rs-tag.lime { border-color: var(--rs-lime); color: var(--rs-lime); }
.rs .rs-tag.cyan { border-color: var(--rs-cyan); color: var(--rs-cyan); }
.rs .rs-tag.dim { border-color: var(--rs-line-2); color: var(--rs-dim); }

/* ── Locked (free tier) ───────────────────────────────────────────────────── */
.rs .rs-locked { border: 1px solid var(--rs-line-2); padding: 16px; }
.rs .rs-locked h4 { font-size: 16px; font-weight: 700; text-transform: uppercase; margin: 0 0 6px; }
.rs .rs-locked p { font-size: 13.5px; color: var(--rs-dim); margin: 0 0 14px; }
.rs .rs-locked-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 12px; border-top: 1px solid var(--rs-line); }
.rs .rs-locked-counts > div { padding: 12px 8px 0 0; }

/* ── Direct hits: composition bar, filter chips, search, ledger ───────────── */
.rs .rs-comp-bar { display: flex; height: 8px; gap: 2px; margin-bottom: 8px; }
.rs .rs-comp-bar span { background: var(--rs-rose); cursor: pointer; min-width: 4px; }
.rs .rs-comp-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--rs-dim); margin-bottom: 12px; }
.rs .rs-comp-legend span { cursor: pointer; }
.rs .rs-comp-legend b { font-family: var(--rs-mono); font-weight: 500; }
.rs .cat-ofac { --rs-cat: 1; } .rs .cat-blacklist { --rs-cat: .78; } .rs .cat-mixer { --rs-cat: .58; }
.rs .cat-scam { --rs-cat: .44; } .rs .cat-flagged { --rs-cat: .32; }
.rs .rs-comp-bar span, .rs .rs-swatch { opacity: var(--rs-cat, 1); }
.rs .rs-swatch { display: inline-block; width: 8px; height: 8px; background: var(--rs-rose); margin-right: 6px; vertical-align: 1px; }

.rs .rs-chips { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 8px; padding-bottom: 2px; scrollbar-width: none; }
.rs .rs-chips::-webkit-scrollbar { display: none; }
.rs .rs-chip {
    flex: none;
    min-height: 34px; padding: 0 12px;
    background: transparent; color: var(--rs-cream);
    border: 1px solid var(--rs-line-2);
    font-family: var(--rs-mono); font-size: 12px;
    cursor: pointer;
}
.rs .rs-chip.active { background: var(--rs-cream); color: var(--rs-ink); border-color: var(--rs-cream); }
.rs .rs-search {
    width: 100%; height: 44px; margin: 4px 0 12px; padding: 0 12px;
    background: var(--rs-bg-2); color: var(--rs-cream);
    border: 2px solid var(--rs-line); border-radius: 0;
    font-family: var(--rs-mono); font-size: 13px;
}
.rs .rs-search:focus { outline: none; border-color: var(--rs-cyan); }
.rs .rs-search::placeholder { color: #4E5A66; }

/* Virtualized: every row has the SAME height, tall enough for label + whole address + meta. */
.rs .rs-ledger { position: relative; max-height: 440px; overflow-y: auto; border-top: 1px solid var(--rs-line); }
.rs .rs-ledger-row {
    position: absolute; left: 0; right: 0; height: 112px;
    padding: 10px 0; border-bottom: 1px solid var(--rs-line);
    overflow: hidden;
}
.rs .rs-ledger-row .rs-row-top { margin-bottom: 3px; }
.rs .rs-ledger-row .rs-row-label { white-space: nowrap; overflow: hidden; }
/* Direct-link evidence (link_check.check_direct): two fixed lines, so every row keeps one height. */
.rs .rs-ledger-row .rs-row-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs .rs-ledger-row .rs-row-meta + .rs-row-meta { margin-top: 2px; }

/* ── Indirect links: one chain card per intermediary ──────────────────────── */
.rs .rs-tier {
    border: 1px solid var(--rs-lime);
    padding: 12px 14px; margin: 24px 0 14px;
}
.rs .rs-tier-title { font-weight: 700; text-transform: uppercase; color: var(--rs-lime); font-size: 14px; }
.rs .rs-tier-body { font-size: 13px; color: var(--rs-dim); margin-top: 4px; }

.rs .rs-chain { border: 1px solid var(--rs-line-2); margin-bottom: 12px; background: var(--rs-bg-2); }
.rs .rs-chain-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid var(--rs-line);
    font-family: var(--rs-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--rs-dim);
}
.rs .rs-node { position: relative; padding: 10px 10px 10px 26px; }
/* The wire: a vertical rule from node to node, with a square marker per node. */
.rs .rs-node::before {
    content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--rs-line-2);
}
.rs .rs-edge.first { padding-top: 10px; }
.rs .rs-edge.first::before { top: 14px; }
.rs .rs-edge.first::after {
    content: ""; position: absolute; left: 8px; top: 13px; width: 10px; height: 10px; background: var(--rs-cyan);
}
.rs .rs-node.hit::before { bottom: calc(100% - 18px); }
.rs .rs-node::after {
    content: ""; position: absolute; left: 8px; top: 14px; width: 10px; height: 10px;
    background: var(--rs-bg-2); border: 2px solid var(--rs-dim);
}
.rs .rs-node.you::after { border-color: var(--rs-cyan); background: var(--rs-cyan); }
.rs .rs-node.via::after { border-color: var(--rs-lime); }
.rs .rs-node.hit::after { border-color: var(--rs-rose); background: var(--rs-rose); }
.rs .rs-node .rs-k { margin-bottom: 3px; }
.rs .rs-edge { font-family: var(--rs-mono); font-size: 11.5px; color: var(--rs-dim); padding: 0 10px 2px 26px; position: relative; }
.rs .rs-edge::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--rs-line-2); }
.rs .rs-ep { padding: 6px 0; border-top: 1px dashed var(--rs-line); }
.rs .rs-ep:first-child { border-top: 0; padding-top: 0; }
.rs .rs-ep-label { font-size: 12.5px; color: var(--rs-rose); font-weight: 600; margin-top: 2px; }
.rs details.rs-more > summary {
    list-style: none; cursor: pointer;
    font-family: var(--rs-mono); font-size: 12px; color: var(--rs-cyan);
    padding: 8px 0 2px;
}
.rs details.rs-more > summary::-webkit-details-marker { display: none; }
.rs details.rs-more[open] > summary { display: none; }

/* ── Money path on a chain card (link_check) ──────────────────────────────── */
.rs .rs-chain.p-reached { border-color: var(--rs-rose); }
.rs .rs-chain.p-onward { border-color: var(--rs-lime); }
.rs .rs-path { margin: 2px 10px 10px; padding: 9px 11px; border-left: 3px solid var(--rs-line-2); background: rgba(126, 140, 154, .06); }
.rs .rs-path.reached { border-left-color: var(--rs-rose); background: rgba(255, 61, 99, .08); }
.rs .rs-path.onward { border-left-color: var(--rs-lime); background: rgba(196, 248, 42, .06); }
.rs .rs-path-title { font-size: 13.5px; font-weight: 700; }
.rs .rs-path.reached .rs-path-title { color: var(--rs-rose); }
.rs .rs-path.onward .rs-path-title { color: var(--rs-lime); }
.rs .rs-path.unknown .rs-path-title { color: var(--rs-cream); }
.rs .rs-path.none { border-left-color: var(--rs-cyan); background: rgba(34, 227, 208, .06); }
.rs .rs-path.none .rs-path-title { color: var(--rs-cyan); }
.rs .rs-path-body { font-size: 12.5px; color: var(--rs-dim); margin-top: 3px; }

/* ── Ban line inside the transaction list ─────────────────────────────────── */
.rs .rs-ban {
    font-family: var(--rs-mono); font-size: 12px;
    padding: 8px 10px; margin-bottom: 8px;
    border-left: 3px solid var(--rs-rose); background: rgba(255, 61, 99, .08);
}
.rs .rs-ban.before { border-left-color: var(--rs-cyan); background: rgba(34, 227, 208, .06); }

/* ── Events: signature steps ──────────────────────────────────────────────── */
.rs .rs-sig { font-family: var(--rs-mono); font-size: 11.5px; color: var(--rs-dim); margin-top: 4px; }
.rs .rs-sig div::before { content: "— "; color: var(--rs-line-2); }
.rs .rs-hash { font-family: var(--rs-mono); font-size: 11px; color: var(--rs-dim); margin-top: 4px; word-break: break-all; direction: ltr; unicode-bidi: isolate; }

/* ── Footer actions ───────────────────────────────────────────────────────── */
.rs .rs-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rs-line); }

@keyframes rs-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .rs *, .rs *::before, .rs *::after { animation: none !important; transition: none !important; }
}