/* CallRank public site. No external requests: system fonts, one stylesheet, one script (CSP default-src 'self') -
   except contact.html (2026-09-28), which loads Cloudflare Turnstile to keep the contact form spam-free; that
   page's own CSP is widened just for it (see deploy/callrank/nginx/zz-callrank.conf), nowhere else. */
:root {
  color-scheme: light dark;
  --surface: #F2F3F7; --surface-raised: #FFFFFF; --surface-sunken: #E7E8EF;
  --ink: #14151F; --ink-2: #545A6B; --ink-3: #6E7386;
  --border: #DEE0E8; --border-soft: #EAEBF1;
  --accent: #7C5CFF; --accent-deep: #5B3FD9; --accent-ink: #FFFFFF;
  --good: #16805A; --good-soft: #E1F3EA; --bad: #C23B34; --bad-soft: #FBE7E4;
  --shadow: 0 1px 2px rgba(20,20,30,.05), 0 10px 28px -14px rgba(20,20,30,.16);
  --font-display: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0C0E15; --surface-raised: #151827; --surface-sunken: #0A0C12;
    --ink: #F1F2F7; --ink-2: #ABB0C2; --ink-3: #8F94A8;
    --border: #262A3B; --border-soft: #1D2130;
    --accent: #7C5CFF; --accent-deep: #5B3FD9; --accent-ink: #FFFFFF;
    --good: #43D18F; --good-soft: #12301F; --bad: #F16C69; --bad-soft: #351616;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 32px -16px rgba(0,0,0,.65);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0 20px; background: var(--surface); color: var(--ink); font: 15px/1.5 var(--font-body); }
.app { max-width: 1040px; margin: 0 auto; padding-block: 28px 64px; }
.app.app-wide { max-width: 1720px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.good { color: var(--good); }
.bad { color: var(--bad); }
[hidden] { display: none !important; }
.notice, .error { padding: 16px; border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--border); }
.error { border-color: var(--bad); }

/* top bar */
.topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; padding-bottom: 26px; border-bottom: 1px solid var(--border-soft); margin-bottom: 28px; }
.wordmark { font-family: var(--font-display); font-size: 1.875rem; font-weight: 800; letter-spacing: -.01em; }
.wordmark .accent-text { color: var(--accent); }
.wordmark a { color: inherit; text-decoration: none; }
.wordmark-link { display: inline-flex; align-items: center; gap: 11px; }
/* Owner, 2026-09-29: a small mark, not just the plain wordmark text - three bars, ascending
   (a plain reference to a ranking/leaderboard), CSS-only, no image or SVG at all. */
.wordmark-icon { display: inline-flex; align-items: flex-end; justify-content: center; gap: 3px; width: 32px; height: 32px; padding: 7px; box-sizing: border-box; border-radius: 10px; background: linear-gradient(155deg, var(--accent), var(--accent-deep)); box-shadow: var(--shadow); flex-shrink: 0; }
.wordmark-icon .bar { display: block; width: 4px; border-radius: 2px; background: rgba(255, 255, 255, .95); }
.wordmark-icon .bar-1 { height: 6px; }
.wordmark-icon .bar-2 { height: 11px; }
.wordmark-icon .bar-3 { height: 17px; }
.tagline { color: var(--ink-2); font-size: .875rem; margin-top: 6px; max-width: 40ch; }
.global-stats { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: .8125rem; color: var(--ink-2); }
.global-stats strong { font-family: var(--font-mono); color: var(--ink); font-weight: 600; }

/* intro */
.board-intro { margin-bottom: 22px; }
.board-intro h1 { font-size: 1.75rem; margin-bottom: 6px; }
.board-intro > p { color: var(--ink-2); max-width: 64ch; font-size: .9375rem; }
details.how { margin-top: 14px; }
details.how summary { cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--accent); }
details.how ul { margin: 10px 0 0; padding-left: 0; list-style: none; display: grid; gap: 6px; max-width: 70ch; }
details.how li { font-size: .8125rem; color: var(--ink-2); padding-left: 14px; position: relative; }
details.how li::before { content: '\2014'; position: absolute; left: 0; color: var(--ink-3); }
details.how strong { color: var(--ink); font-weight: 600; }

/* controls */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.search { display: flex; align-items: center; gap: 8px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; flex: 1 1 200px; max-width: 280px; }
.search input { border: none; background: none; outline: none; width: 100%; font-size: .875rem; }
.search input::placeholder { color: var(--ink-3); }
.segmented { display: inline-flex; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-btn { border: none; background: none; padding: 6px 12px; border-radius: 7px; font-size: .8125rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.seg-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.field { display: flex; align-items: center; gap: 8px; }
.field-label { font-size: .75rem; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }
.pick { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; font-size: .8125rem; font-weight: 600; cursor: pointer; }

/* leaderboard */
.lb-cols { grid-template-columns: 26px 34px 1fr 76px 64px 116px 78px 78px 84px 16px; }
.lb-head { display: none; padding: 0 16px 10px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); gap: 12px; align-items: center; }
.board-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: 14px; padding: 12px 16px; cursor: pointer; box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease; text-decoration: none; color: inherit; }
.lb-row:hover { border-color: var(--accent); transform: translateY(-1px); }
.lb-row.few { opacity: .62; }
.rank { width: 22px; flex: none; color: var(--ink-3); font-size: .8125rem; font-weight: 600; }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-mono); font-size: .75rem; font-weight: 600; }
.caller-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.handle { font-weight: 600; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chains { font-size: .75rem; color: var(--ink-3); }
.mobile-sub { display: block; font-size: .75rem; color: var(--ink-2); margin-top: 1px; }
.cell-calls, .cell-unknown, .cell-winrate, .cell-roi, .cell-median, .cell-last, .chevron { display: none; }
.chevron { color: var(--ink-3); font-size: 1.1rem; text-align: right; }
.bar-track { width: 100%; height: 5px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 3px; width: var(--w, 0%); background: var(--c, var(--good)); }
@media (min-width: 760px) {
  .lb-head { display: grid; }
  .lb-row { display: grid; }
  .mobile-sub { display: none; }
  .cell-calls { display: block; font-size: .8125rem; }
  .cell-unknown { display: block; font-size: .8125rem; color: var(--ink-2); }
  .tag.warn { background: var(--surface-sunken); color: var(--accent); border: 1px solid var(--border); }
  .cell-winrate { display: flex; flex-direction: column; gap: 5px; }
  .cell-roi { display: block; font-size: .9375rem; font-weight: 600; text-align: right; }
  .cell-median { display: block; font-size: .8125rem; font-weight: 600; text-align: right; }
  .cell-last { display: block; font-size: .8125rem; color: var(--ink-3); }
  .chevron { display: block; }
}
.sub-line { font-size: .6875rem; color: var(--ink-3); }

/* actionable and historical wallet rankings */
.wallet-section { min-width: 0; }
.wallet-view-note { margin: -4px 0 16px; padding-left: 10px; border-left: 3px solid var(--accent); color: var(--ink-2); font-size: .8125rem; }
.wallet-controls { align-items: flex-end; }
.wallet-search { min-width: min(320px, 100%); }
.wallet-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin: 8px 0 12px; }
.wallet-result-count { color: var(--ink-2); font-size: .8125rem; }
.wallet-pager { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: .75rem; }
.pager-btn { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-raised); color: var(--ink); font-weight: 700; cursor: pointer; }
.pager-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pager-btn:disabled { opacity: .35; cursor: default; }
.wallet-table-wrap { overflow: auto; max-height: 72vh; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); scrollbar-gutter: stable; }
.wallet-table { width: 100%; min-width: 3600px; border-collapse: separate; border-spacing: 0; font-size: .75rem; font-variant-numeric: tabular-nums; }
.wallet-table th { position: sticky; top: 0; z-index: 3; padding: 0; text-align: left; background: var(--surface-sunken); border-bottom: 1px solid var(--border); }
.wallet-sort { display: block; width: 100%; min-height: 42px; padding: 8px 10px; border: 0; background: transparent; color: var(--ink-2); text-align: left; white-space: nowrap; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.wallet-sort:hover, .wallet-sort.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.wallet-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; background: var(--surface-raised); }
.wallet-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, var(--surface-raised)); }
.wallet-table tbody tr.wallet-ineligible td { color: var(--ink-3); }
.wallet-table tbody tr:last-child td { border-bottom: 0; }
.wallet-table .numeric { text-align: right; }
.wallet-address { width: 330px; max-width: 330px; overflow: hidden; text-overflow: ellipsis; }
.wallet-address a { color: var(--ink); text-decoration: none; }
.wallet-address a:hover { color: var(--accent); text-decoration: underline; }
.wallet-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border-radius: 5px; font-size: .6875rem; font-weight: 650; background: var(--surface-sunken); color: var(--ink-2); }
.wallet-badge.activity { text-transform: capitalize; }
.wallet-badge.clear { color: var(--good); background: var(--good-soft); }
.wallet-badge.risk { color: var(--bad); background: var(--bad-soft); }
.wallet-badge.unknown { color: var(--ink-3); }
.wallet-table th:nth-child(1), .wallet-table td:nth-child(1) { width: 120px; min-width: 120px; }
.wallet-table th:nth-child(2), .wallet-table td:nth-child(2) { width: 78px; min-width: 78px; }
.wallet-table th:nth-child(3), .wallet-table td:nth-child(3) { width: 330px; min-width: 330px; }
@media (min-width: 900px) {
  .wallet-table th:nth-child(1), .wallet-table td:nth-child(1) { position: sticky; left: 0; z-index: 2; }
  .wallet-table th:nth-child(2), .wallet-table td:nth-child(2) { position: sticky; left: 120px; z-index: 2; }
  .wallet-table th:nth-child(3), .wallet-table td:nth-child(3) { position: sticky; left: 198px; z-index: 2; box-shadow: 1px 0 0 var(--border); }
  .wallet-table th:nth-child(-n+3) { z-index: 4; background: var(--surface-sunken); }
}
@media (max-width: 640px) {
  body { padding-inline: 12px; }
  .app { padding-top: 18px; }
  .wallet-controls .field, .wallet-controls .pick { width: 100%; }
  .wallet-controls .field { align-items: stretch; flex-direction: column; }
  .wallet-search { max-width: none; width: 100%; }
  .wallet-table-wrap { max-height: 68vh; }
}

/* footer */
.footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border-soft); }
.footer p { font-size: .75rem; color: var(--ink-3); max-width: 70ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: .8125rem; font-weight: 600; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* the text page (about.html): rules, disclaimer, privacy, objections and removal */
.doc { max-width: 74ch; }
.doc h1 { font-size: 1.75rem; margin: 6px 0 6px; }
.doc h2 { font-size: 1.25rem; margin: 34px 0 10px; scroll-margin-top: 16px; }
.doc p, .doc li { font-size: .9375rem; color: var(--ink-2); }
.doc p + p, .doc ul + p, .doc ol + p, .doc p + ul, .doc p + ol { margin-top: 10px; }
.doc ul, .doc ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc .lede { font-size: 1rem; color: var(--ink); }
.doc-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 14px 0 0; font-size: .8125rem; font-weight: 600; }
.doc-nav a { text-decoration: none; }
.doc-nav a:hover { text-decoration: underline; }
.doc .callout { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--border); }
.doc code { font-family: var(--font-mono); font-size: .875em; background: var(--surface-sunken); padding: 1px 5px; border-radius: 4px; }

/* detail */
.back-btn { border: none; background: none; color: var(--accent); font-weight: 600; font-size: .875rem; cursor: pointer; padding: 6px 0; margin-bottom: 18px; }
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.profile-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; }
.profile-name { font-size: 1.5rem; font-family: var(--font-display); font-weight: 700; overflow-wrap: anywhere; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8125rem; color: var(--ink-2); margin-top: 4px; align-items: center; }
.profile-meta a { font-weight: 600; text-decoration: none; }
.profile-meta a:hover { text-decoration: underline; }
.chain-tag { font-size: .6875rem; font-weight: 600; padding: 2px 7px; border-radius: 5px; background: var(--surface-sunken); color: var(--ink-2); letter-spacing: .03em; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-tile { background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
.stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 8px; }
.stat-value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; }
.stat-sub { font-size: .8125rem; color: var(--ink-2); margin-top: 2px; }
.denoms { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .8125rem; color: var(--ink-2); margin-bottom: 32px; padding: 12px 16px; background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: 12px; }
.denoms strong { font-family: var(--font-mono); color: var(--ink); }
.section-heading { font-size: 1.125rem; margin-bottom: 4px; }
.section-sub { font-size: .8125rem; color: var(--ink-2); margin-bottom: 16px; }
.chart-scroll { overflow-x: auto; margin-bottom: 40px; }
.chart { display: flex; gap: 6px; min-width: min-content; padding-bottom: 4px; }
.month-col { width: 56px; flex: none; display: flex; flex-direction: column; align-items: center; }
.pos-zone { height: 56px; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.neg-zone { height: 56px; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.zero-line { width: 100%; height: 1px; background: var(--border); }
.bar-label { font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; margin: 0 0 3px; }
.neg-zone .bar-label { margin: 3px 0 0; }
.bar { width: 22px; height: var(--h, 0px); border-radius: 4px 4px 0 0; }
.neg-zone .bar { border-radius: 0 0 4px 4px; }
.bar.good { background: var(--good); }
.bar.bad { background: var(--bad); }
.month-name { font-size: .75rem; font-weight: 600; margin-top: 8px; }
.month-n { font-size: .6875rem; color: var(--ink-3); }
.calls-list { display: flex; flex-direction: column; gap: 8px; }
/* Owner, 2026-09-29: the date column was `auto` - since every .call-row is its OWN independent
   grid (not one shared grid the whole list sits in), "auto" sized each row's date column to THAT
   row's own text ("2 days ago" vs "3 weeks ago"), so the result/roi column after it visibly
   jumped left and right row to row. A fixed width (wide enough for the longest real output of
   timeAgo(), e.g. "40 weeks ago") plus text-align:right keeps every row's right edge aligned. */
.call-row { display: grid; grid-template-columns: 52px 1fr 84px auto 22px; gap: 12px; align-items: center; background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.call-chain { font-size: .625rem; font-weight: 700; text-align: center; padding: 4px 0; border-radius: 6px; color: #fff; background: #6B7280; overflow: hidden; text-overflow: ellipsis; }
.call-token { min-width: 0; }
.call-ticker { display: block; font-weight: 600; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-name { display: block; font-size: .75rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-date { font-size: .75rem; color: var(--ink-3); text-align: right; white-space: nowrap; }
.call-result { text-align: right; white-space: nowrap; }
.call-roi { font-weight: 600; font-size: .9375rem; }
.call-status { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; }
.call-link { color: var(--accent); font-size: 1rem; text-align: center; text-decoration: none; }
.call-row.excluded { opacity: .6; }
.tag { display: inline-block; margin-top: 2px; font-size: .625rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); background: var(--surface-sunken); border-radius: 5px; padding: 1px 6px; }
/* A <button class="tag"> (the duplicate-call link, "See notice") otherwise keeps the browser's own
   button chrome (a visible border, its own font, a default cursor) on top of .tag's - looks like a
   native button sitting on the tag instead of a plain tag (owner, 2026-09-29). */
button.tag { border: none; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
/* .call-result has white-space:nowrap, so an inline-block tag right after the roi text shares its
   line instead of getting its own the way .call-status already does - this one needs its own. */
.notice-tag { display: block; margin-top: 4px; margin-left: auto; }
.tag.rug { color: var(--bad); background: var(--bad-soft); font-weight: 700; }
.call-row.is-rugged { border-color: var(--bad); }
@media (max-width: 520px) {
  .call-row { grid-template-columns: 44px 1fr auto; row-gap: 4px; }
  .call-date, .call-link { display: none; }
}

/* Contact form (owner, 2026-09-28) */
.contact-form { display: flex; flex-direction: column; gap: 16px; max-width: 52ch; margin-top: 24px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: .75rem; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }
.form-input, .form-select, .form-textarea { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: .9375rem; color: var(--ink); width: 100%; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); }
.form-textarea { resize: vertical; font-family: inherit; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 10px; padding: 10px 22px; font-size: .9375rem; font-weight: 650; cursor: pointer; }
.form-submit:hover { filter: brightness(1.05); }
.form-submit:disabled { opacity: .6; cursor: default; }
.form-status { font-size: .8125rem; margin-left: 4px; }
.form-status-ok { color: var(--good); }
.form-status-error { color: var(--bad); }

/* "Recent calls" pagination (owner, 2026-09-28) */
.show-more-row { display: flex; justify-content: center; margin-top: 16px; }
.show-more-btn { width: auto; padding: 8px 18px; font-size: .8125rem; font-weight: 600; }

/* The "See notice" popup (owner, 2026-09-29): the one modal this site has, so it stays minimal - a
   dimmed backdrop (closes it on click) and one small centered box, nothing else on the page moves. */
.notice-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1000; }
.notice-box { max-width: 420px; background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); }
.notice-title { margin: 0 0 10px; font-size: 1rem; }
.notice-body { margin: 0 0 16px; font-size: .875rem; color: var(--ink-2); line-height: 1.5; }