/* 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-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-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: 24px; border-bottom: 1px solid var(--border-soft); margin-bottom: 28px; }
.wordmark { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; }
.wordmark .accent-text { color: var(--accent); }
.wordmark a { color: inherit; text-decoration: none; }
.tagline { color: var(--ink-2); font-size: .875rem; margin-top: 2px; 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; }
.primary-nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: .8125rem; font-weight: 650; }
.nav-link { color: var(--ink-3); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--accent); border-bottom-color: var(--accent); }

/* 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; }
.call-row { display: grid; grid-template-columns: 52px 1fr auto 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; }
.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; }