/* Pi Scanner - front end styling.
Deliberately not the other explorer's look. Pi Block Scanner is copper and
teal on warm paper with a horizontal nav; this is a dark-first instrument
panel - deep indigo ground, mint signal green, violet for the secondary
series. It began with a fixed left rail; the menu now lives in a single
top bar (brand left, nav right) so the content - above all the live
transactions table on the home page - can run the full width.
Dark is the default because this is read at length and mostly at night by
its audience; a light theme is fully supported and is what the OS setting
or the header toggle selects. */
:root {
color-scheme: dark light;
/* dark (default) */
--bg: #636f7e;
--bg-deep: #070a12;
--surface: #000000;
--surface-2: #171e32;
--surface-3: #1d2640;
--line: #5945bf;
--line-soft: #1a2138;
--text: #ffffff;
/* Lightened 2026-10-08 at the owner's request: the old #97a2be / #6b7695
read as dim blue-grey. Now 10.2:1 and 6.7:1 on the table-header surface. */
--text-dim: #d5d3d3;
--text-faint: #d5d3d3;
--th-text: #ffffff; /* table column headers */
--accent: #fff700; /* mint - primary signal */
--accent-2: #15b783;
--accent-ink: #042018;
--accent-soft: #0e2b24;
--violet: #9d8bff; /* secondary series */
--violet-soft: #1e1b3a;
--cyan: #4bc8f5;
--good: #29e0a4;
--bad: #ff6b81;
/* Status colours are fixed: they never follow the accent switcher. */
--status-ok: #29e0a4;
--status-ok-soft: #0e2b24;
--status-bad: #ff6b81;
--status-bad-soft:#2d1420;
--bad-soft: #2d1420;
--warn: #ffc46b;
--warn-soft: #2c2314;
--info-soft: #10243a;
--gold: #f5c451;
--radius: 12px;
--radius-sm: 8px;
--radius-xs: 5px;
--shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.35);
--shadow-sm: 0 1px 3px rgba(0,0,0,.4);
--rail: 248px;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="light"] {
color-scheme: light;
--bg: #f4f6fb;
--bg-deep: #e9edf6;
--surface: #ffffff;
--surface-2: #f7f9fd;
--surface-3: #eef2fa;
--line: #dde3ef;
--line-soft: #eaeefa;
--text: #131828;
--text-dim: #4d5468;
/* Darkened to clear 4.5:1 on the light surfaces - the previous values
measured 3.06:1 (faint) and 3.73:1 (accent/links) and failed AA. */
--text-faint: #6a7287;
--accent: #007a55;
--accent-2: #006747;
--accent-ink: #ffffff;
--accent-soft: #e2f7f0;
--violet: #5436cc;
--violet-soft: #eeeaff;
--cyan: #0b6b93;
--good: #007a55;
--bad: #c9283f;
--bad-soft: #fdeaee;
--status-ok: #007a55;
--status-ok-soft: #e2f7f0;
--status-bad: #c9283f;
--status-bad-soft:#fdeaee;
--th-text: var(--text);
--warn: #9a6a00;
--warn-soft: #fdf3dd;
--info-soft: #e8f1fb;
--gold: #a97a06;
--shadow: 0 1px 2px rgba(19,24,40,.06), 0 8px 24px rgba(19,24,40,.07);
--shadow-sm: 0 1px 3px rgba(19,24,40,.08);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
color-scheme: light;
--bg: #f4f6fb;
--bg-deep: #e9edf6;
--surface: #ffffff;
--surface-2: #f7f9fd;
--surface-3: #eef2fa;
--line: #dde3ef;
--line-soft: #eaeefa;
--text: #131828;
--text-dim: #4d5468;
--text-faint: #6a7287;
--accent: #007a55;
--accent-2: #006747;
--accent-ink: #ffffff;
--accent-soft: #e2f7f0;
--violet: #6245e0;
--violet-soft: #eeeaff;
--cyan: #0d7fae;
--good: #007a55;
--bad: #c9283f;
--bad-soft: #fdeaee;
--status-ok: #007a55;
--status-ok-soft: #e2f7f0;
--status-bad: #c9283f;
--status-bad-soft:#fdeaee;
--th-text: var(--text);
--warn: #9a6a00;
--warn-soft: #fdf3dd;
--info-soft: #e8f1fb;
--gold: #a97a06;
--shadow: 0 1px 2px rgba(19,24,40,.06), 0 8px 24px rgba(19,24,40,.07);
--shadow-sm: 0 1px 3px rgba(19,24,40,.08);
}
}
/* ------------------------------------------------------- accent switcher
Set by the swatches on the home page (data-accent on , kept in
localStorage). Each accent clears WCAG AA on every surface: dark values
7.3:1 or better on --surface-3, light values 5.1:1 or better on --surface-3.
Status colours (--status-*) are deliberately not touched here. Green is the
default and has no rule. */
:root[data-accent="yellow"] {
--accent: #ffe066; --accent-2: #f5cf3a; --accent-ink: #141005; --accent-soft: #2b2810;
}
:root[data-theme="light"][data-accent="yellow"] {
--accent: #7a5f00; --accent-2: #664f00; --accent-ink: #ffffff; --accent-soft: #fbf3d0;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"])[data-accent="yellow"] {
--accent: #7a5f00; --accent-2: #664f00; --accent-ink: #ffffff; --accent-soft: #fbf3d0;
}
}
:root[data-accent="amber"] {
--accent: #ffc247; --accent-2: #f0ad2a; --accent-ink: #141005; --accent-soft: #2d2312;
}
:root[data-theme="light"][data-accent="amber"] {
--accent: #8f5a00; --accent-2: #784b00; --accent-ink: #ffffff; --accent-soft: #fcefd9;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"])[data-accent="amber"] {
--accent: #8f5a00; --accent-2: #784b00; --accent-ink: #ffffff; --accent-soft: #fcefd9;
}
}
:root[data-accent="orange"] {
--accent: #ff9f45; --accent-2: #f08a2c; --accent-ink: #141005; --accent-soft: #2e1d10;
}
:root[data-theme="light"][data-accent="orange"] {
--accent: #a84800; --accent-2: #8f3d00; --accent-ink: #ffffff; --accent-soft: #fde8d9;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"])[data-accent="orange"] {
--accent: #a84800; --accent-2: #8f3d00; --accent-ink: #ffffff; --accent-soft: #fde8d9;
}
}
:root[data-accent="cyan"] {
--accent: #6ee7f9; --accent-2: #4fd6ec; --accent-ink: #141005; --accent-soft: #0f2a33;
}
:root[data-theme="light"][data-accent="cyan"] {
--accent: #0b6b93; --accent-2: #095a7b; --accent-ink: #ffffff; --accent-soft: #e1f3fa;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"])[data-accent="cyan"] {
--accent: #0b6b93; --accent-2: #095a7b; --accent-ink: #ffffff; --accent-soft: #e1f3fa;
}
}
:root[data-accent="lilac"] {
--accent: #c4b5fd; --accent-2: #ad9bf7; --accent-ink: #141005; --accent-soft: #211d3d;
}
:root[data-theme="light"][data-accent="lilac"] {
--accent: #5b3fc4; --accent-2: #4c33a8; --accent-ink: #ffffff; --accent-soft: #eeeaff;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"])[data-accent="lilac"] {
--accent: #5b3fc4; --accent-2: #4c33a8; --accent-ink: #ffffff; --accent-soft: #eeeaff;
}
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-size: 15px;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); font-size: .92em; }
.nowrap { white-space: nowrap; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
.skip {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--accent); color: var(--accent-ink); padding: 10px 16px;
border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }
/* ------------------------------------------------------------------ shell */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
/* ----------------------------------------------------------------- topbar */
/* One line: brand left, nav right. It used to be a left rail; the owner asked
for the menu at the top right so the page body could run full width. */
.topbar {
position: sticky; top: 0; z-index: 40;
background: color-mix(in srgb, var(--bg-deep) 90%, transparent);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .topbar { background: var(--bg-deep); } }
.topbar-in {
display: flex; align-items: center; gap: 14px;
max-width: 1480px; margin: 0 auto; padding: 0 20px; height: 72px;
position: relative;
}
/* The owner asked for the logo as large as the bar allows. Everything is sized
in em off .brand's font-size, so the mark and the wordmark scale together
and keep the original 26:18 proportion: a 46px mark and 32px wordmark leave
13px of air above and below inside the 72px bar. */
.brand {
display: flex; align-items: center; gap: .5em; flex: 0 0 auto;
font-size: 32px; line-height: 1; color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--accent); display: flex; }
.brand-mark svg { width: 1.44em; height: 1.44em; }
.brand-text { font-size: 1em; font-weight: 500; letter-spacing: -.02em; }
.brand-text strong { font-weight: 750; color: var(--accent); }
.mainnav { display: flex; align-items: center; gap: 2px; margin-left: auto; height: 100%; }
.nav-link {
display: flex; align-items: center; gap: 9px;
padding: 7px 11px; border-radius: var(--radius-sm);
color: var(--text-dim); font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-link.active { color: var(--accent); font-weight: 650; }
.nav-link.top.active { background: var(--accent-soft); }
.dd-menu .nav-link.active { background: var(--accent-soft); }
/* dropdowns: hover opens them on a pointer device; click and keyboard toggle
the .open class from app.js, so touch and keyboard users get the same menu */
.dd { position: relative; height: 100%; display: flex; align-items: center; }
.dd-btn {
display: flex; align-items: center; gap: 6px;
padding: 7px 11px; border-radius: var(--radius-sm);
background: none; border: 0; cursor: pointer;
color: var(--text-dim); font: 500 13.5px var(--sans); white-space: nowrap;
}
.dd-btn:hover, .dd.open .dd-btn { background: var(--surface-2); color: var(--text); }
.dd.has-active .dd-btn { color: var(--accent); font-weight: 650; }
.caret {
width: 6px; height: 6px; margin-top: -3px;
border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
transform: rotate(45deg); opacity: .7; transition: transform .15s ease;
}
.dd.open .caret { transform: rotate(-135deg); margin-top: 3px; }
.dd-menu {
display: none; position: absolute; top: 100%; left: 0; min-width: 220px;
margin-top: -6px; padding: 6px;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow); z-index: 50;
}
.dd-end .dd-menu { left: auto; right: 0; }
.dd.open .dd-menu { display: block; }
@media (hover: hover) and (min-width: 1021px) {
.dd:hover .dd-menu { display: block; }
.dd:hover .caret { transform: rotate(-135deg); margin-top: 3px; }
}
.burger {
display: none; flex-direction: column; gap: 4px; justify-content: center;
width: 38px; height: 36px; background: var(--surface); cursor: pointer;
border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 9px;
}
.burger span { display: block; height: 2px; background: var(--text-dim); border-radius: 2px; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ticker {
display: flex; align-items: center; gap: 8px;
font-size: 12.5px; color: var(--text-dim); white-space: nowrap;
padding-left: 12px; border-left: 1px solid var(--line);
}
.ticker:empty { display: none; }
.ticker .px { font-weight: 700; color: var(--text); font-family: var(--mono); }
.ticker .chg.up { color: var(--good); }
.ticker .chg.down { color: var(--bad); }
.theme {
width: 34px; height: 34px; display: grid; place-items: center;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-sm); color: var(--text-dim); cursor: pointer;
}
.theme:hover { color: var(--accent); border-color: var(--accent); }
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* ----------------------------------------------------------------- search */
/* A big pill, deliberately the size of the reference explorer's: the search
box is the most useful thing on the site and should look like it. The same
form is moved into the home page above the live table (see app.js). */
/* The band shares #view's width and gutter so the pill's left edge lines up
with the tables below it (owner's request, 2026-10-08; it used to be centred). */
.searchband { padding: 22px 20px 0; max-width: 1480px; width: 100%; margin: 0 auto; }
.searchband[hidden] { display: none; }
.search {
position: relative; display: flex; align-items: center;
width: 100%; max-width: 800px; margin: 0;
}
.search input {
flex: 1 1 auto; min-width: 0; height: 52px;
padding: 0 100px 0 24px;
background: color-mix(in srgb, var(--surface) 78%, transparent);
color: var(--text);
border: 1px solid var(--line); border-radius: 999px;
font-size: 15px; font-family: var(--sans);
box-shadow: var(--shadow-sm);
-webkit-appearance: none; appearance: none;
}
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search input:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.search input::placeholder { color: var(--text-faint); }
.search .clear {
position: absolute; right: 56px; display: none;
background: none; border: 0; color: var(--text-faint);
font-size: 22px; line-height: 1; cursor: pointer; padding: 0 8px;
}
.search .clear.show { display: block; }
.search .go {
position: absolute; right: 6px; top: 6px;
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center;
background: var(--accent); color: var(--accent-ink);
border: 0; cursor: pointer;
}
.search .go .ic { width: 18px; height: 18px; flex-basis: 18px; }
.search .go:hover { background: var(--accent-2); }
/* ------------------------------------------------------------------- main */
#view {
flex: 1 1 auto; padding: 22px 20px 44px; max-width: 1480px; width: 100%;
margin: 0 auto; outline: none;
}
/* home: short heading, the big search pill, then the live transactions */
.home-hero {
display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px;
margin: 6px 0 22px;
}
#home-search { flex: 1 1 480px; max-width: 800px; min-width: 0; }
.accent-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.accent-pick .ap-label { font-size: 12px; color: var(--text-dim); margin-right: 2px; }
.accent-pick .sw {
width: 22px; height: 22px; border-radius: 50%; padding: 0; cursor: pointer;
background: var(--sw); border: 2px solid var(--surface-3);
box-shadow: 0 0 0 1px var(--line);
}
.accent-pick .sw:hover { transform: scale(1.1); }
.accent-pick .sw[aria-checked="true"] { border-color: var(--bg); box-shadow: 0 0 0 2px var(--text); }
.accent-pick .sw:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.faint { color: var(--text-faint); }
/* live indicator in the card head: a pulsing dot while updates arrive, amber
while the last refresh failed (the table keeps its last good rows) */
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-faint); }
.live .dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint);
}
.live.on .dot { background: var(--good); animation: pulse 2s ease-in-out infinite; }
.live.stale .dot { background: var(--warn); }
.live.stale { color: var(--warn); }
@keyframes pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); }
70% { box-shadow: 0 0 0 7px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
.card-head .live + .more { margin-left: 14px; }
.card-head .live { margin-left: auto; }
/* rows that arrived on the latest refresh flash once in the accent tint */
/* one gentle fade on a newly arrived row, never repeated */
tbody tr.fresh td { animation: fresh 1.5s ease; }
@keyframes fresh { from { background: var(--accent-soft); } to { background: transparent; } }
#home-txs table td { white-space: nowrap; }
.page-head { margin-bottom: 18px; }
.page-head h1 { font-size: 25px; letter-spacing: -.025em; }
.page-head .sub { display: block; margin-top: 5px; color: var(--text-dim); font-size: 13.5px; max-width: 820px; }
.page-head .crumbs { font-size: 12px; color: var(--text-faint); margin-bottom: 6px; }
/* tiles */
.tiles {
display: grid; gap: 12px; margin-bottom: 18px;
grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.tile {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--shadow-sm);
}
.tile .label {
font-size: 10.5px; text-transform: uppercase; letter-spacing: .085em;
color: var(--text-faint); font-weight: 700;
}
.tile .value { font-size: 21px; font-weight: 700; margin: 5px 0 2px; letter-spacing: -.02em; }
.tile .value.mono { font-family: var(--mono); font-size: 18px; }
.tile .foot { font-size: 11.5px; color: var(--text-faint); }
.tile .foot.up { color: var(--good); }
.tile .foot.down { color: var(--bad); }
.tile.hl { border-color: var(--accent); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%); }
/* cards */
.card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); margin-bottom: 18px;
box-shadow: var(--shadow-sm); overflow: hidden;
}
.card-head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
background: var(--surface-2);
}
.card-head h2 { font-size: 14.5px; }
.card-head .sub { color: var(--text-faint); font-size: 12px; }
.card-head .more { margin-left: auto; font-size: 12.5px; font-weight: 600; }
.card-head .head-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-body { padding: 15px 16px; }
.card-body.flush { padding: 0; }
.card-body p { margin: 0 0 11px; color: var(--text-dim); }
.card-body p:last-child { margin-bottom: 0; }
.card-body h3 { font-size: 13.5px; margin: 16px 0 7px; }
.card-body ul { margin: 0 0 11px; padding-left: 20px; color: var(--text-dim); }
.card-body li { margin-bottom: 5px; }
.cols { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; align-items: start; }
.cols-3 { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); align-items: start; }
.cols-wide { display: grid; gap: 18px; grid-template-columns: 1.35fr 1fr; align-items: start; }
/* tables */
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Operations belonging to a failed transaction: visibly not a transfer. */
tbody tr.op-failed td { opacity: .62; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
text-align: left; padding: 9px 14px; white-space: nowrap;
font-size: 10.5px; text-transform: uppercase; letter-spacing: .075em;
color: var(--th-text); font-weight: 700;
background: var(--surface-2); border-bottom: 1px solid var(--line);
position: sticky; top: 0;
}
/* Vertical rules between columns only - no horizontal row lines (owner's
request, 2026-10-08). Applies to every table, including key/value tables. */
th + th, td + td { border-left: 1px solid var(--line); }
thead th.num { text-align: right; }
/* Site-wide since 2026-10-10 (asked for on Validators, Statistics, Fee Surges
and Operations): thin horizontal lines between rows, same weight as the
vertical column dividers. */
tbody td { padding: 9px 14px; vertical-align: middle; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12.3px; }
tbody tr:hover { background: var(--surface-2); }
tbody td.rank { font-family: var(--mono); color: var(--text-faint); font-size: 12px; width: 1%; }
tbody tr.is-top td.rank { color: var(--gold); font-weight: 700; }
/* Detail tables carry addresses and 64-character hashes. The card clips its
overflow, so without a scroll container of their own the end of every value
is unreachable on a phone. */
.card-body { overflow-x: auto; }
table.kv { font-size: 13.5px; }
table.kv td:last-child { overflow-wrap: anywhere; word-break: break-word; }
table.kv .mono { overflow-wrap: anywhere; }
table.kv td { padding: 9px 12px; }
table.kv td:first-child {
width: 190px; color: var(--text-faint); font-weight: 600; vertical-align: top;
font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
/* chips + labels */
.chip {
display: inline-block; padding: 1px 7px; border-radius: 20px;
background: var(--surface-3); color: var(--text-dim);
font-size: 11px; font-weight: 600; white-space: nowrap;
}
.chip.ok { background: var(--status-ok-soft); color: var(--status-ok); }
.chip.fail { background: var(--status-bad-soft); color: var(--status-bad); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.violet { background: var(--violet-soft); color: var(--violet); }
.chip.info { background: var(--info-soft); color: var(--cyan); }
.wl { display: inline-flex; align-items: center; gap: 5px; }
/* Known-wallet label chips. Neutral silver-on-slate with a tag icon, on their
own fixed variables (owner's request, 2026-10-08): any hue would collide
with one of the accent colours the addresses beside them can take, and a
label must read as a label, not a link. Category tones (.foundation,
.exchange, ...) are kept as classes but no longer change the colour.
Contrast: 10.5:1 in both themes. */
:root {
--label-text: #dfe4ef; --label-bg: #262f45; --label-border: #3f4a66;
}
:root[data-theme="light"] {
--label-text: #2b3245; --label-bg: #e6e9f0; --label-border: #b9c0cf;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--label-text: #2b3245; --label-bg: #e6e9f0; --label-border: #b9c0cf;
}
}
.wl-tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 1px 7px 1px 6px; border-radius: var(--radius-xs);
font-size: 11px; font-weight: 600; white-space: nowrap;
color: var(--label-text); background: var(--label-bg);
border: 1px solid var(--label-border);
}
.wl-tag::before {
content: ""; flex: 0 0 auto; width: 9px; height: 9px; background: currentColor; opacity: .75;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12V4a1 1 0 0 1 1-1h8l9 9-9 9-9-9zm4.5-6.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12V4a1 1 0 0 1 1-1h8l9 9-9 9-9-9zm4.5-6.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wl-conf {
font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-faint); font-weight: 700;
}
.wl-conf.unverified { color: var(--warn); }
/* tier badges */
.tier {
display: inline-flex; align-items: center; gap: 5px;
padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 700;
white-space: nowrap; border: 1px solid var(--line);
background: var(--surface-3); color: var(--text-dim);
}
.tier::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
/* Wallet tiers (2026-10-20: PiScan's eight, Microbes ... Whales on 10x
bands; replaced Smelt ... Whale). Each has a fixed colour of its own,
shared by the badge, the Pi Holder Distribution bars and the Distribution
Categories names. Defaults follow PiScan's chart; the light theme gets
darker shades so the text clears AA on white. */
:root {
--tier-whale: #1e90ff; --tier-shark: #00c4a0; --tier-dolphin: #f5b400; --tier-tuna: #ff7a3d;
--tier-fish: #8b85d9; --tier-shrimp: #ff6b6b; --tier-plankton: #6cc96c; --tier-microbe: #4f8cff;
}
:root[data-theme="light"] {
--tier-whale: #1769c2; --tier-shark: #00806a; --tier-dolphin: #946c00; --tier-tuna: #b84a14;
--tier-fish: #5a52b8; --tier-shrimp: #c43c3c; --tier-plankton: #2f7d2f; --tier-microbe: #2f5fc4;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
--tier-whale: #1769c2; --tier-shark: #00806a; --tier-dolphin: #946c00; --tier-tuna: #b84a14;
--tier-fish: #5a52b8; --tier-shrimp: #c43c3c; --tier-plankton: #2f7d2f; --tier-microbe: #2f5fc4;
} }
.tier.whale { --tc: var(--tier-whale); } .tier.whale::before { content: "\1F995"; }
.tier.shark { --tc: var(--tier-shark); } .tier.shark::before { content: "\1F996"; }
.tier.dolphin { --tc: var(--tier-dolphin); } .tier.dolphin::before { content: "\1F9A3"; }
.tier.tuna { --tc: var(--tier-tuna); } .tier.tuna::before { content: "\1F995"; }
.tier.fish { --tc: var(--tier-fish); } .tier.fish::before { content: "\1F985"; }
.tier.shrimp { --tc: var(--tier-shrimp); } .tier.shrimp::before { content: "\1F996"; }
.tier.plankton { --tc: var(--tier-plankton); } .tier.plankton::before { content: "\1F9B4"; }
.tier.microbe { --tc: var(--tier-microbe); } .tier.microbe::before { content: "\1F423"; }
.tier:is(.whale, .shark, .dolphin, .tuna, .fish, .shrimp, .plankton, .microbe) {
color: var(--tc); border-color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent);
}
.tier:is(.whale, .shark, .dolphin, .tuna, .fish, .shrimp, .plankton, .microbe)::before {
width: auto; height: auto; border-radius: 0; background: none; font-size: 11px; line-height: 1;
}
/* No pterodactyl emoji exists, so the Pterodactyls badge draws its own
silhouette in the tier colour (owner, 2026-10-27). */
.tier.fish::before {
content: ""; width: 14px; height: 12px; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M0 7l9 3 2-3-4-2 5 0 2-4 1 5 1 2 8-4-7 8-3-1-1 3-1-3-3 1z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M0 7l9 3 2-3-4-2 5 0 2-4 1 5 1 2 8-4-7 8-3-1-1 3-1-3-3 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* direction arrows for the foundation tracker */
.dir { font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.dir.in { color: var(--pay-in, var(--good)); }
.dir.out { color: var(--pay-out, var(--bad)); }
.dir.internal { color: var(--text-faint); }
/* Pi into the wallet being viewed green, out of it red, site-wide (owner, 2026-11-02). */
.amt-in { color: var(--pay-in, var(--good)); }
.amt-out { color: var(--pay-out, var(--bad)); }
/* bars */
.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 200px) 1fr auto; gap: 11px; align-items: center; }
.bar-label { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 8px; background: var(--surface-3); border-radius: 20px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 20px; }
.bar-fill.violet { background: var(--violet); }
.bar-fill.cyan { background: var(--cyan); }
.bar-fill.gold { background: var(--gold); }
.bar-num { font-family: var(--mono); font-size: 12px; color: var(--text-dim); min-width: 62px; text-align: right; }
/* spark columns for daily volume */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 92px; padding: 4px 0; }
.spark-col { flex: 1 1 auto; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .8; }
.spark-col:hover { opacity: 1; }
/* notes */
.note {
background: var(--info-soft); border: 1px solid var(--line);
border-left: 3px solid var(--cyan);
border-radius: var(--radius-sm); padding: 12px 15px; margin-bottom: 18px;
font-size: 13px; color: var(--text-dim); line-height: 1.55;
}
.note strong { color: var(--text); }
.note.warn { background: var(--warn-soft); border-left-color: var(--warn); }
.note.bad { background: var(--bad-soft); border-left-color: var(--bad); }
.note.good { background: var(--accent-soft); border-left-color: var(--accent); }
/* fee-surge banner over the home page's live table */
.surge-banner a { font-weight: 650; white-space: nowrap; }
#fs-method code { overflow-wrap: anywhere; }
.note code { font-family: var(--mono); font-size: .92em; background: var(--surface-3); padding: 1px 4px; border-radius: 3px; }
.basis {
font-size: 11.5px; color: var(--text-faint); padding: 9px 16px;
background: var(--surface-2); border-top: 1px solid var(--line-soft);
line-height: 1.5;
}
.basis strong { color: var(--text-dim); }
.loading { padding: 26px 16px; color: var(--text-faint); font-size: 13px; text-align: center; }
.empty { padding: 22px 16px; color: var(--text-faint); font-size: 13px; text-align: center; }
.prov { font-size: 11px; color: var(--text-faint); padding: 9px 16px; border-top: 1px solid var(--line-soft); font-family: var(--mono); }
.skel {
display: inline-block; height: 11px; border-radius: 4px;
background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3));
background-size: 200% 100%; animation: sk 1.3s ease-in-out infinite;
}
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* controls */
.btn {
padding: 7px 13px; background: var(--surface); color: var(--text-dim);
border: 1px solid var(--line); border-radius: var(--radius-sm);
cursor: pointer; font-size: 12.5px; font-weight: 600; font-family: var(--sans);
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pager { display: flex; gap: 8px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line-soft); }
.pager .count { margin-left: auto; font-size: 12px; color: var(--text-faint); font-family: var(--mono); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
select.ctl, input.ctl {
padding: 6px 9px; background: var(--surface); color: var(--text);
border: 1px solid var(--line); border-radius: var(--radius-sm);
font-size: 12.5px; font-family: var(--sans);
}
select.ctl:focus, input.ctl:focus { outline: none; border-color: var(--accent); }
pre.raw {
font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; word-break: break-all;
margin: 0; color: var(--text-dim); background: var(--bg-deep);
padding: 13px; border-radius: var(--radius-sm); border: 1px solid var(--line);
max-height: 460px; overflow: auto;
}
/* copy-to-clipboard address */
.copy {
background: none; border: 0; color: var(--text-faint); cursor: pointer;
font-size: 11px; padding: 0 4px; font-family: var(--sans);
}
.copy:hover { color: var(--accent); }
/* ad slots - reserved space so layout does not jump when a unit loads */
.adslot {
margin: 0 0 18px; min-height: 90px; display: flex; align-items: center;
justify-content: center; background: var(--surface-2);
border: 1px dashed var(--line); border-radius: var(--radius);
color: var(--text-faint); font-size: 11px; overflow: hidden;
}
.adslot.wide { min-height: 100px; }
.adslot[data-filled="1"] { background: none; border: 0; min-height: 0; }
/* legal pages read as prose, not as a dashboard */
.legal { max-width: 860px; }
.legal h2 { font-size: 17px; margin: 26px 0 9px; }
.legal h3 { font-size: 14px; margin: 18px 0 7px; }
.legal p, .legal li { color: var(--text-dim); font-size: 14px; line-height: 1.62; }
.legal p { margin: 0 0 12px; }
.legal ul { padding-left: 22px; margin: 0 0 12px; }
.legal .updated { font-size: 12px; color: var(--text-faint); margin-bottom: 20px; }
/* footer */
.footer { border-top: 1px solid var(--line); background: var(--bg-deep); margin-top: auto; }
.foot-grid {
display: grid; gap: 26px; padding: 26px 20px 20px; max-width: 1480px; margin: 0 auto;
grid-template-columns: 2.2fr 1fr 1fr 1fr;
}
.foot-brand { font-size: 16px; margin-bottom: 8px; }
.foot-brand strong { color: var(--accent); }
.foot-col h4 {
font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
color: var(--text-faint); margin-bottom: 9px;
}
.foot-col a { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; }
.foot-col a:hover { color: var(--accent); }
.foot-about p { font-size: 12px; color: var(--text-faint); margin: 0 0 9px; line-height: 1.55; max-width: 52ch; }
.foot-indep strong { color: var(--text-dim); }
.foot-bar {
border-top: 1px solid var(--line-soft); padding: 13px 20px 22px;
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
max-width: 1480px; margin: 0 auto;
}
.foot-meta { font-size: 10.5px; color: var(--text-faint); font-family: var(--mono); }
.foot-visits { margin-top: 4px; }
.foot-visits b { color: var(--text-dim); font-weight: 600; }
.foot-copy { font-size: 11px; color: var(--text-faint); margin-left: auto; max-width: 74ch; }
/* icons - inline masks so no icon font or network request is needed */
.ic {
display: inline-block; width: 15px; height: 15px; flex: 0 0 15px;
background: currentColor; vertical-align: -2px;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
.ic-home { -webkit-mask-image: var(--m-home); mask-image: var(--m-home); }
.ic-block { -webkit-mask-image: var(--m-block); mask-image: var(--m-block); }
.ic-tx { -webkit-mask-image: var(--m-tx); mask-image: var(--m-tx); }
.ic-op { -webkit-mask-image: var(--m-op); mask-image: var(--m-op); }
.ic-wallet { -webkit-mask-image: var(--m-wallet); mask-image: var(--m-wallet); }
.ic-crown { -webkit-mask-image: var(--m-crown); mask-image: var(--m-crown); }
.ic-whale { -webkit-mask-image: var(--m-whale); mask-image: var(--m-whale); }
.ic-fire { -webkit-mask-image: var(--m-fire); mask-image: var(--m-fire); }
.ic-eye { -webkit-mask-image: var(--m-eye); mask-image: var(--m-eye); }
.ic-tag { -webkit-mask-image: var(--m-tag); mask-image: var(--m-tag); }
.ic-lock { -webkit-mask-image: var(--m-lock); mask-image: var(--m-lock); }
.ic-shield { -webkit-mask-image: var(--m-shield); mask-image: var(--m-shield); }
.ic-globe { -webkit-mask-image: var(--m-globe); mask-image: var(--m-globe); }
.ic-flask { -webkit-mask-image: var(--m-flask); mask-image: var(--m-flask); }
.ic-chart { -webkit-mask-image: var(--m-chart); mask-image: var(--m-chart); }
.ic-coin { -webkit-mask-image: var(--m-coin); mask-image: var(--m-coin); }
.ic-pool { -webkit-mask-image: var(--m-pool); mask-image: var(--m-pool); }
.ic-swap { -webkit-mask-image: var(--m-swap); mask-image: var(--m-swap); }
.ic-info { -webkit-mask-image: var(--m-info); mask-image: var(--m-info); }
.ic-warn { -webkit-mask-image: var(--m-warn); mask-image: var(--m-warn); }
.ic-search { -webkit-mask-image: var(--m-search); mask-image: var(--m-search); }
.ic-sun { -webkit-mask-image: var(--m-sun); mask-image: var(--m-sun); }
.ic-moon { -webkit-mask-image: var(--m-moon); mask-image: var(--m-moon); }
:root {
--m-home: url('data:image/svg+xml;utf8,');
--m-block: url('data:image/svg+xml;utf8,');
--m-tx: url('data:image/svg+xml;utf8,');
--m-op: url('data:image/svg+xml;utf8,');
--m-wallet: url('data:image/svg+xml;utf8,');
--m-crown: url('data:image/svg+xml;utf8,');
--m-whale: url('data:image/svg+xml;utf8,');
--m-fire: url('data:image/svg+xml;utf8,');
--m-eye: url('data:image/svg+xml;utf8,');
--m-tag: url('data:image/svg+xml;utf8,');
--m-lock: url('data:image/svg+xml;utf8,');
--m-shield: url('data:image/svg+xml;utf8,');
--m-globe: url('data:image/svg+xml;utf8,');
--m-flask: url('data:image/svg+xml;utf8,');
--m-chart: url('data:image/svg+xml;utf8,');
--m-coin: url('data:image/svg+xml;utf8,');
--m-pool: url('data:image/svg+xml;utf8,');
--m-swap: url('data:image/svg+xml;utf8,');
--m-info: url('data:image/svg+xml;utf8,');
--m-warn: url('data:image/svg+xml;utf8,');
--m-search: url('data:image/svg+xml;utf8,');
--m-sun: url('data:image/svg+xml;utf8,');
--m-moon: url('data:image/svg+xml;utf8,');
}
/* -------------------------------------------------------- migration check */
/* The one top-level nav item that is not a chain view: a quiet accent so a
pioneer looking for it finds it, without shouting. */
.nav-link.nav-mc { color: var(--warn); }
.nav-link.nav-mc.active { color: var(--warn); background: var(--warn-soft); }
/* Home page teaser: one quiet line under the search pill. */
.home-teaser { margin: 12px 0 0; font-size: 13px; }
.home-teaser a { color: var(--text-dim); }
.home-teaser a:hover { color: var(--accent); }
/* Left-aligned on the content column, like the home page (owner's request,
2026-10-08): title, warning, search pill and disclaimer share one left edge. */
.mc-hero { text-align: left; margin: 10px 0 22px; max-width: 800px; }
.mc-hero h1 { font-size: 28px; letter-spacing: -.025em; line-height: 1.2; }
.mc-hero .sub { display: block; margin: 8px 0 16px; color: var(--text-dim); font-size: 15px; }
.mc-warn { text-align: left; max-width: 800px; margin: 0 0 16px; font-size: 14px; }
.mc-warn.flash { animation: mcflash 1.2s ease-out 2; }
@keyframes mcflash { 0%, 60% { box-shadow: 0 0 0 4px var(--bad); } 100% { box-shadow: none; } }
.mc-search input { height: 60px; font-size: 16px; padding-right: 64px; font-family: var(--mono); }
.mc-search input::placeholder { font-family: var(--sans); }
.mc-search .go { top: 8px; width: 44px; height: 44px; right: 8px; }
.mc-msg { max-width: 800px; margin: 14px 0 0; text-align: left; }
.mc-msg:empty { display: none; }
.mc-alarm { font-size: 14px; }
.mc-what { min-width: 280px; line-height: 1.55; }
.mc-what .wl { display: inline; }
.mc-claims { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.mc-kv { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.mc-small { font-size: 12.5px; color: var(--text-faint); margin: 6px 0 0; }
.mc-faint { color: var(--text-faint); }
.mc-group { border-top: 1px solid var(--line-soft); }
.mc-ghead { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; padding: 12px 16px 4px; }
.mc-reason { font-weight: 600; font-size: 13.5px; }
.mc-reason .wl { margin-left: 2px; }
.mc-count { margin-left: auto; font-size: 12.5px; color: var(--text-dim); }
.mc-group > .mc-small { padding: 0 16px 6px; margin: 0; }
.mc-form { display: grid; gap: 8px; max-width: 640px; }
.mc-form label { font-size: 13px; color: var(--text-dim); }
.mc-check { display: flex; gap: 9px; align-items: flex-start; color: var(--text) !important; }
.mc-check input { margin-top: 3px; flex: 0 0 auto; }
.mc-actions { display: flex; gap: 12px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.mc-actions .btn { padding: 9px 18px; font-size: 14px; }
.mc-about ul { margin: 0; }
.mc-disclaimer {
max-width: 800px; margin: 12px 0 0; text-align: left;
font-size: 13.5px; line-height: 1.55; color: var(--text-dim);
}
@media (max-width: 900px) {
.mc-hero h1 { font-size: 22px; }
.mc-search input { height: 54px; font-size: 14px; padding-left: 18px; }
.mc-search .go { top: 7px; width: 40px; height: 40px; }
.mc-claims { grid-template-columns: 1fr; }
.mc-what { min-width: 220px; }
}
/* --------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
.ticker { display: none; }
.cols, .cols-wide { grid-template-columns: 1fr; }
.cols-3 { grid-template-columns: 1fr 1fr; }
.foot-grid { grid-template-columns: 1fr 1fr; }
}
/* Below 1020px the nav folds behind the burger into a panel that drops
from the header. Inside the panel every dropdown is shown expanded, its
button reading as a section title, so nothing is two taps deep. */
@media (max-width: 1020px) {
.burger { display: flex; }
.mainnav {
display: none; position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0; height: auto;
max-height: calc(100dvh - 72px); overflow-y: auto;
padding: 8px 14px 16px; margin: 0;
background: var(--bg-deep); border-bottom: 1px solid var(--line);
box-shadow: var(--shadow);
}
.mainnav.open { display: flex; }
.topbar-right { margin-left: auto; }
.nav-link { padding: 9px 10px; }
.dd { display: block; height: auto; }
.dd-btn {
pointer-events: none; padding: 12px 10px 4px;
font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
color: var(--text-faint); font-weight: 700;
}
.dd-btn .caret { display: none; }
.dd-menu {
display: block; position: static; margin: 0; padding: 0; min-width: 0;
background: none; border: 0; box-shadow: none;
}
}
@media (max-width: 900px) {
.searchband { padding: 16px 13px 0; }
.search input { height: 48px; padding-left: 18px; font-size: 14.5px; }
.search .go { width: 36px; height: 36px; }
.search .clear { right: 50px; }
.home-hero { margin: 6px 0 16px; }
.home-hero h1 { font-size: 22px; }
#view { padding: 16px 13px 36px; }
.cols-3 { grid-template-columns: 1fr; }
.foot-grid { grid-template-columns: 1fr; gap: 18px; }
.foot-copy { margin-left: 0; }
table.kv td:first-child { width: 120px; font-size: 11px; }
}
@media (max-width: 560px) {
.page-head h1 { font-size: 21px; }
.tiles { grid-template-columns: 1fr 1fr; gap: 9px; }
.tile .value { font-size: 18px; }
thead th, tbody td { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
@media print {
.topbar, .searchband, .search, .footer, .adslot, .pager, .live { display: none !important; }
#view { padding: 0; }
.card { break-inside: avoid; border-color: #ccc; }
}
/* -------------------------------------------------------- network map
Drawn by static/mcmap.js. Edge colours are theme tokens so the map reads in
both themes; each clears 3:1 against the card surface (non-text contrast). */
:root {
--mm-creator: #a78bfa; --mm-lockup: #f5c451; --mm-claimed: #f472b6;
--mm-sent: #ff9f45; --mm-received: #4bc8f5; --mm-created: #29e0a4;
--mm-merge: #9aa5c2; --mm-linked: #818cf8; --mm-hop: #7dd3fc;
}
:root[data-theme="light"] {
--mm-creator: #6d4fd8; --mm-lockup: #8a6200; --mm-claimed: #b0186b;
--mm-sent: #a84800; --mm-received: #0b6b93; --mm-created: #007a55;
--mm-merge: #5a6378; --mm-linked: #4338ca; --mm-hop: #0a5f86;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--mm-creator: #6d4fd8; --mm-lockup: #8a6200; --mm-claimed: #b0186b;
--mm-sent: #a84800; --mm-received: #0b6b93; --mm-created: #007a55;
--mm-merge: #5a6378; --mm-linked: #4338ca; --mm-hop: #0a5f86;
}
}
.mc-map-sum { font-size: 14px; color: var(--text-dim); margin-bottom: 10px; }
.mc-map-sum strong { color: var(--text); }
.mm-host { position: relative; }
.mm-svg {
display: block; width: 100%; height: 520px; touch-action: none; cursor: grab;
background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.mm-svg.grabbing { cursor: grabbing; }
.mm-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 2; }
.mm-tools button {
min-width: 34px; height: 32px; padding: 0 10px; border-radius: var(--radius-xs);
background: var(--surface); border: 1px solid var(--line); color: var(--text);
font: 600 15px var(--sans); cursor: pointer;
}
.mm-tools button:hover { border-color: var(--accent); color: var(--accent); }
.mm-e { stroke-linecap: round; opacity: .85; }
.mm-creator { stroke: var(--mm-creator); background: var(--mm-creator); }
.mm-lockup { stroke: var(--mm-lockup); background: var(--mm-lockup); }
.mm-claimed { stroke: var(--mm-claimed); background: var(--mm-claimed); stroke-dasharray: 6 4; }
.mm-sent { stroke: var(--mm-sent); background: var(--mm-sent); }
.mm-received { stroke: var(--mm-received); background: var(--mm-received); }
.mm-created { stroke: var(--mm-created); background: var(--mm-created); }
.mm-merge { stroke: var(--mm-merge); background: var(--mm-merge); }
.mm-linked { stroke: var(--mm-linked); background: var(--mm-linked); }
.mm-hop { stroke: var(--mm-hop); background: var(--mm-hop); stroke-dasharray: 2 4; }
.mm-node circle, .mm-node rect { fill: var(--surface-3); stroke: var(--text-dim); stroke-width: 1.5; }
.mm-node.mm-centre circle { fill: var(--accent); stroke: var(--text); stroke-width: 2.5; }
.mm-node.mm-tx rect { fill: var(--surface); stroke: var(--mm-linked); }
.mm-node text { text-anchor: middle; paint-order: stroke; stroke: var(--bg-deep); stroke-width: 3px; }
.mm-name { font: 600 11.5px var(--sans); fill: var(--text); }
.mm-sub { font: 10.5px var(--mono); fill: var(--text-dim); }
a.mm-node { cursor: pointer; }
a.mm-node:hover circle, a.mm-node:focus circle { stroke: var(--accent); stroke-width: 3; }
a.mm-node:focus { outline: none; }
.mm-plus { cursor: pointer; }
.mm-plus circle { fill: var(--accent); stroke: var(--bg-deep); stroke-width: 1.5; }
.mm-plus text { fill: var(--accent-ink); font: 700 12px var(--sans); text-anchor: middle; pointer-events: none; }
.mm-plus:focus { outline: none; }
.mm-plus:focus circle { stroke: var(--text); stroke-width: 2.5; }
.mm-legend {
list-style: none; margin: 10px 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-dim);
}
.mm-legend li { display: flex; align-items: center; gap: 7px; }
.mm-sw { width: 20px; height: 4px; border-radius: 2px; flex: 0 0 auto; }
/* trace mode on the Migration Check map (2026-10-25) */
.mm-node.mm-root circle { fill: var(--surface); stroke: var(--accent); stroke-width: 3; }
.mm-node.mm-done circle { stroke: var(--accent); }
.mm-node.mm-sel circle, .mm-node.mm-sel rect { stroke: var(--text); stroke-width: 3.5; }
.mc-sel:empty { display: none; }
.mc-sel { margin-top: 12px; }
.mc-sel-in {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface); font-size: 13px; color: var(--text-dim);
}
.mc-sel-in strong { color: var(--text); }
.mc-sel-facts { flex: 1 1 260px; min-width: 0; }
.mc-sel-act { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.mc-sel-act .btn, .mc-trace-bar .btn { text-decoration: none; }
.mc-trace-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.mc-add { display: flex; gap: 8px; flex: 1 1 360px; min-width: 0; }
.mc-add input {
flex: 1 1 auto; min-width: 0; padding: 8px 10px; font: 13px var(--mono);
background: var(--surface); color: var(--text);
border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.mc-add input:focus { outline: none; border-color: var(--accent); }
.mc-share-url {
width: 100%; margin-top: 4px; padding: 7px 9px; font-size: 12px;
background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.card-head .acct-trace { margin-left: auto; text-decoration: none; }
@media (max-width: 560px) {
.mc-add { flex-basis: 100%; }
.mc-sel-act { margin-left: 0; }
}
/* explainer steps above the example map */
.mc-steps {
list-style: none; margin: 0 0 18px; padding: 0;
display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr);
}
.mc-step {
position: relative; display: flex; flex-direction: column; gap: 4px;
padding: 14px 14px 14px; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); font-size: 13px; color: var(--text-dim);
}
.mc-step strong { color: var(--text); font-size: 14px; }
.mc-step-ic { color: var(--accent); }
.mc-step-n {
position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
display: grid; place-items: center; font: 700 12px var(--sans);
background: var(--accent-soft); color: var(--accent);
}
@media (max-width: 900px) {
.mc-steps { grid-template-columns: 1fr 1fr; }
.mm-svg { height: 420px; }
}
@media (max-width: 480px) {
.mc-steps { grid-template-columns: 1fr; }
}
/* ------------------------------------------- Pi Network's own wallets page
Two columns on desktop: the content on the left, the totals stacked in a
right-hand sidebar. One column on narrow screens, totals first. */
.fd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.fd-main { min-width: 0; display: grid; gap: 18px; }
.fd-main > .card { margin: 0; }
.fd-side { position: sticky; top: 90px; display: grid; gap: 10px; }
.fd-side .tile { margin: 0; }
.fd-side .tile .value { font-size: 22px; }
.fd-period { display: flex; gap: 6px; flex-wrap: wrap; }
.fd-period .btn { padding: 6px 11px; font-size: 13px; }
.fd-period-line { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.fd-period-line strong { color: var(--text); }
.fd-group + .fd-group { border-top: 1px solid var(--line); }
.fd-group h3 { margin: 0; padding: 12px 16px 8px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.fd-last { white-space: normal; line-height: 1.6; min-width: 260px; }
.fd-last .wl { display: inline-flex; }
@media (max-width: 1100px) {
.fd-layout { grid-template-columns: minmax(0, 1fr); }
.fd-side { position: static; order: -1; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.fd-period, .fd-period-line { grid-column: 1 / -1; }
}
/* (i) info buttons and the shared info popover */
.info-i {
display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0;
border-radius: 50%; border: 1.5px solid currentColor; background: none; cursor: pointer;
color: var(--text-dim); font: italic 700 11px/1 Georgia, "Times New Roman", serif;
vertical-align: middle; text-transform: none; letter-spacing: 0; flex: 0 0 auto;
}
.info-i:hover { color: var(--accent); }
.info-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-head h1 .info-i { width: 22px; height: 22px; font-size: 13px; margin-left: 4px; }
.tile .label .info-i { margin-left: 4px; width: 16px; height: 16px; font-size: 10px; }
dialog.info-dlg {
padding: 0; border: 0; background: transparent; color: var(--text);
width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
}
dialog.info-dlg::backdrop { background: rgba(3, 5, 10, .72); }
.info-box {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); max-height: calc(100dvh - 48px); overflow-y: auto;
}
.info-box .card-head { position: sticky; top: 0; background: var(--surface); }
.info-box p, .info-box li { color: var(--text-dim); line-height: 1.6; font-size: 14px; }
.info-box strong, .info-box em { color: var(--text); }
.info-x {
margin-left: auto; width: 34px; height: 34px; border-radius: var(--radius-sm);
background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
font-size: 22px; line-height: 1; cursor: pointer;
}
.info-x:hover { border-color: var(--accent); color: var(--accent); }
.info-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#fd-wallets td.num, #fd-latest td, #fd-wallets td:nth-child(2) { white-space: nowrap; }
/* Nodes page: horizontal lines between validator rows (owner's request). */
.v-rows tbody td { border-bottom: 1px solid var(--line); }
.v-rows tbody tr:last-child td { border-bottom: 0; }
.v-more { margin: 0; font-weight: 600; }
/* Node map (2026-10-10): "as of" stamp, snapshot viewing bar, history chart */
.asof { font-size: 13px; font-weight: 500; color: var(--text-dim); margin-left: 8px; letter-spacing: 0; }
.n-viewing { margin-bottom: 14px; }
.n-chart { display: block; width: 100%; height: auto; }
.n-axis { stroke: var(--line); stroke-width: 1; }
.n-lab { fill: var(--text-dim); font: 11px var(--sans); }
.n-line { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linejoin: round; }
.n-line.act { stroke: var(--status-ok); }
.n-legend { display: flex; gap: 8px 16px; align-items: center; font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }
.n-key { display: inline-block; width: 18px; height: 3px; border-radius: 2px; background: var(--violet); margin-right: -10px; }
.n-key.act { background: var(--status-ok); }
.n-compare-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.n-cmp-total { margin: 0 0 10px; color: var(--text-dim); }
#n-days td:nth-child(5) { white-space: normal; }
.fd-side .tile .foot, .tile .foot { overflow-wrap: anywhere; }
.n-compare-pick select { max-width: 100%; }
/* Statistics sidebar boxes (2026-10-10) */
.sbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 12px 14px; box-shadow: var(--shadow-sm); position: relative; }
.sbox h3 { margin: 0 0 6px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.sbox-utc { position: absolute; top: 13px; right: 14px; font-size: 10.5px; color: var(--text-faint); letter-spacing: .06em; }
.sbox-since { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.srow { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-top: 1px solid var(--line); }
.srow.head { border-top: 0; padding: 2px 0; }
.srow-l { font-size: 12.5px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; }
.srow.nolabel .srow-l, .srow-l:empty { display: none; }
.srow-v { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font: 600 14px var(--mono); }
.srow-v.one { display: block; font-size: 15px; }
.srow.head .srow-v span { font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.schart-t { font-size: 12px; color: var(--text-dim); margin: 2px 0 4px; }
.schart { display: block; width: 100%; height: auto; }
.schart rect { fill: var(--violet); opacity: .85; }
.schart rect.today { fill: var(--accent); opacity: 1; }
.schart .ax { stroke: var(--line); }
.schart .lab { fill: var(--text-dim); font: 10px var(--sans); }
.schart-n { font-size: 12px; color: var(--text-dim); margin: 4px 0 6px; }
/* ------------------------------------------------------------ header band
2026-10-10: a full-width violet band holds the top bar, the search pill and
the page title. Shades are variables so they are easy to tweak; the Header
swatches on the home page switch between them. White text on every shade
clears AA (5.5:1 or better). */
:root { --band-a: #5945bf; --band-b: #5400a8; }
:root[data-band="violet"] { --band-a: #5a3cc4; --band-b: #7446b8; }
:root[data-band="deep"] { --band-a: #3f22a0; --band-b: #5a2a86; }
.band { background: linear-gradient(90deg, var(--band-a), var(--band-b)); color: #fff; }
.topbar.band { border-bottom: 0; backdrop-filter: none; }
.topbar.band .brand { color: #fff; }
.topbar.band .mainnav > .nav-link, .topbar.band .dd-btn { color: rgba(255,255,255,.92); }
.topbar.band .mainnav > .nav-link:hover, .topbar.band .dd-btn:hover,
.topbar.band .dd.open .dd-btn { background: rgba(255,255,255,.14); color: #fff; }
.topbar.band .mainnav > .nav-link.active, .topbar.band .dd.has-active .dd-btn {
color: #fff; background: rgba(255,255,255,.2); }
.topbar.band .nav-mc { color: #fff !important; }
.topbar.band .ticker { color: rgba(255,255,255,.9); border-left-color: rgba(255,255,255,.3); }
.topbar.band .ticker .px, .topbar.band .ticker .chg.up, .topbar.band .ticker .chg.down { color: #fff; }
.topbar.band .theme, .topbar.band .burger {
background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }
.topbar.band .burger span { background: #fff; }
.band-lower { padding-bottom: calc(20px + var(--band-extend)); }
.band-lower .searchband { padding-top: 14px; }
.band-lower .search input { background: rgba(14,10,40,.42); border-color: rgba(255,255,255,.28); color: #fff; }
.band-lower .search input::placeholder { color: rgba(255,255,255,.78); }
.band-lower .search .clear { color: rgba(255,255,255,.8); }
.band-title { max-width: 1480px; margin: 0 auto; padding: 0 20px; }
.band-title:empty { display: none; }
.band-title .page-head { margin: 16px 0 0; }
.band-title .page-head h1 { color: #fff; }
.band-title .page-head .sub, .band-title .asof { color: rgba(255,255,255,.9); }
.band-title .info-i { color: #fff; }
.band-title .info-i:hover { color: #fff; background: rgba(255,255,255,.18); }
.band-lower:has(#searchband[hidden]):has(#bandtitle:empty) { display: none; }
@media (max-width: 1020px) {
/* the folded menu is a dark panel, so its links keep the normal colours */
.topbar.band .mainnav .nav-link, .topbar.band .mainnav .dd-btn { color: var(--text-dim); background: none; }
.topbar.band .mainnav .nav-link.active { color: var(--accent); }
}
@media (max-width: 900px) { .band-title { padding: 0 13px; } }
/* ------------------------------------------------------ page backgrounds
Black (original), Charcoal, Light Grey (default) and Lavender. Cards keep
their dark surfaces; anything sitting directly on a light page background
switches to dark text. Dark theme only - the light theme has its own. */
:root { --accent-onlight: #007a55; }
:root[data-accent="yellow"] { --accent-onlight: #7a5f00; }
:root[data-accent="amber"] { --accent-onlight: #8f5a00; }
:root[data-accent="orange"] { --accent-onlight: #a84800; }
:root[data-accent="cyan"] { --accent-onlight: #0b6b93; }
:root[data-accent="lilac"] { --accent-onlight: #5b3fc4; }
:root:not([data-theme="light"])[data-bg="charcoal"] body { background: #2a2f3a; }
:root:not([data-theme="light"])[data-bg="lightgrey"] body { background: #d5d3d3; }
:root:not([data-theme="light"])[data-bg="lavender"] body { background: #ebe7f7; }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"])[data-bg] body { background: var(--bg); }
:root:not([data-theme="dark"]) .bg-pick { display: none; }
}
:root[data-theme="light"] .bg-pick { display: none; }
:root:not([data-theme="light"])[data-bg="lightgrey"] :is(.home-hero, .fd-period-line, .v-more, .mc-hero, .mc-msg, .n-viewing-wrap),
:root:not([data-theme="light"])[data-bg="lavender"] :is(.home-hero, .fd-period-line, .v-more, .mc-hero, .mc-msg, .n-viewing-wrap) {
--text: #131828; --text-dim: #3f4659; --text-faint: #4d5468; --accent: var(--accent-onlight);
color: var(--text);
}
:root:not([data-theme="light"])[data-bg="lightgrey"] :is(.mc-hero .mc-warn, .mc-hero .search),
:root:not([data-theme="light"])[data-bg="lavender"] :is(.mc-hero .mc-warn, .mc-hero .search) {
--text: #ffffff; --text-dim: #ffffff; --text-faint: #ffffff;
}
:root:not([data-theme="light"])[data-bg="lightgrey"] :is(.card, .tile, .sbox, .mc-step, .note),
:root:not([data-theme="light"])[data-bg="lavender"] :is(.card, .tile, .sbox, .mc-step, .note) {
box-shadow: 0 1px 3px rgba(10,12,30,.28), 0 8px 22px rgba(10,12,30,.18);
}
.pickers { display: flex; flex-direction: column; gap: 6px; }
/* Rich List (2026-10-10): title + 2x2 tiles on the left, tier chart right */
.rich-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.rich-left .tiles-2x2 { grid-template-columns: 1fr 1fr; margin: 0; }
.rich-chart { margin: 0; }
.seg { margin-left: auto; display: flex; gap: 4px; }
.seg .btn { padding: 5px 11px; font-size: 12.5px; }
.donut-wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; flex: 0 0 auto; }
.donut path { stroke: var(--surface); stroke-width: 1.5; cursor: pointer; }
.donut path:hover { opacity: .85; }
.d-big { fill: var(--text); font: 700 15px var(--sans); }
.d-small { fill: var(--text-dim); font: 11px var(--sans); }
.tier-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; display: grid; gap: 4px; }
.tier-legend li { display: grid; grid-template-columns: 12px 1fr auto 52px; gap: 8px; align-items: center;
font-size: 13px; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.tier-legend li:hover { background: var(--surface-2); }
.lg-sw { width: 12px; height: 12px; border-radius: 3px; }
.lg-v { font-family: var(--mono); font-size: 12px; text-align: right; }
.lg-p { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--text-dim); }
@media (max-width: 900px) { .rich-top { grid-template-columns: minmax(0, 1fr); } }
/* summary rows used by Statistics and Fee Surges */
.srow-sub { font: 400 12px var(--sans); color: var(--text-dim); margin-top: 2px; }
.srow-v.up { color: var(--status-ok); }
.srow-v.down { color: var(--status-bad); }
/* known-wallet chips never blow out a table column */
td .wl { flex-wrap: wrap; row-gap: 3px; }
td .wl-tag { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
td .wl-tag { display: inline-block; vertical-align: middle; white-space: nowrap; }
td .wl-tag::before { display: inline-block; margin-right: 4px; vertical-align: -1px; }
@media (max-width: 1100px) { .fd-side:has(.sbox) { grid-template-columns: minmax(0, 1fr); } }
.srow-v span { min-width: 0; overflow-wrap: anywhere; }
/* Rich List tier chart (butterfly): Pi held left, Pioneers right */
.rich-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 18px; }
.rich-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; padding: 4px 14px; }
.rich-stats .srow { border-top: 0; }
.bf { display: grid; gap: 6px; }
.bf-head, .bf-row, .bf-axis { display: grid; grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr); gap: 10px; align-items: center; }
.bf-head span { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--th-text); }
.bf-head span:first-child { text-align: right; }
.bf-row { cursor: pointer; padding: 3px 0; border-radius: 6px; }
.bf-row:hover, .bf-row:focus-visible { background: var(--surface-2); outline: none; }
.bf-left { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.bf-right { display: flex; align-items: center; gap: 8px; }
.bf-bar { display: block; height: 16px; border-radius: 3px; flex: 0 0 auto; max-width: 70%; }
.bf-left .bf-bar { border-radius: 3px 0 0 3px; }
.bf-right .bf-bar { border-radius: 0 3px 3px 0; }
.bf-val { font: 12px var(--mono); color: var(--text); white-space: nowrap; }
.bf-mid { display: flex; flex-direction: column; text-align: center; line-height: 1.25;
border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0 6px; }
.bf-mid strong { font-size: 13.5px; }
.bf-band { font-size: 11.5px; color: var(--text-dim); }
.bf-pi { display: none; font-size: 11.5px; color: var(--text-dim); }
.bf-axis span { font-size: 11px; color: var(--text-faint); }
.bf-axis span:last-child { text-align: right; }
.bf-foot { margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.chg-up { color: var(--status-ok); font-weight: 700; }
.chg-down { color: var(--status-bad); font-weight: 700; }
.chg-flat { color: var(--text-faint); }
@media (max-width: 760px) {
/* one bar per tier: Pioneers, with the Pi share under the tier name */
.bf-head, .bf-row, .bf-axis { grid-template-columns: 120px minmax(0, 1fr); }
.bf-left, .bf-head span:first-child, .bf-axis span:first-child { display: none; }
.bf-mid { text-align: left; border-left: 0; padding-left: 0; }
.bf-pi { display: block; }
.rich-stats { grid-template-columns: 1fr; }
}
.th-toggles { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; font-size: 13px; }
.th-toggles label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.th-line { fill: none; stroke-width: 2.2; }
#home-search:empty { display: none; }
/* Hero overlap (2026-10-10): the band runs --band-extend past its content and
the first card or sidebar of every page overlaps its bottom edge. */
:root { --band-extend: 110px; }
@media (max-width: 900px) { :root { --band-extend: 60px; } }
#view { margin: calc(-1 * var(--band-extend)) auto 0; position: relative; }
#view:has(> .legal) { margin-top: 0; }
:root:has(#bandtitle:empty):has(#searchband[hidden]) #view { margin-top: 0; }
/* swatch rows live in the band on the home page */
.band-title .pickers { padding: 14px 0 0; }
.band-title .ap-label { color: #fff; }
.band-title .accent-pick .sw[aria-checked="true"] { box-shadow: 0 0 0 2px #fff; }
/* Logo: fixed colours, never the text-colour switcher (owner, 2026-10-10) */
:root { --brand-green: #29e0a4; }
.brand-mark, .brand-text strong, .foot-brand strong { color: var(--brand-green) !important; }
/* Search bar: neutral whatever the accent - white button, dark icon */
.search .go { background: #ffffff; color: #1b1340; }
.search .go:hover { background: #ece8ff; }
.search input:focus { border-color: rgba(255,255,255,.85); box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.band-lower .search input { color: #fff; }
/* Settings dialog */
.settings-body { display: grid; gap: 14px; }
.settings-body .pickers { gap: 12px; }
.settings-body .accent-pick, .set-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.settings-body .ap-label { width: 100px; color: var(--text-dim); font-size: 13px; }
.settings-body .accent-pick .sw { width: 26px; height: 26px; }
.settings-body #settings-reset { justify-self: start; }
.settings-body .bg-pick { display: flex; }
:root[data-theme="light"] .settings-body .bg-pick { display: none; }
/* Why-it-failed popup */
.fail-ops { margin: 0 0 10px; padding-left: 20px; }
.fail-codes { font-size: 11px; color: var(--text-faint); word-break: break-all; }
.fail-why { font-size: 13px; color: var(--text-dim); margin-left: 6px; }
/* Header text pure white (owner, 2026-10-10): menu items, carets, ticker,
gear and theme icons. Hover/active get a white-tinted pill only. */
.topbar.band .mainnav > .nav-link, .topbar.band .dd-btn, .topbar.band .caret,
.topbar.band .ticker, .topbar.band .ticker *, .topbar.band .theme, .topbar.band .dd.has-active .dd-btn,
.topbar.band .mainnav > .nav-link.active, .topbar.band .nav-mc {
color: #ffffff !important; opacity: 1 !important; font-weight: 600;
}
.topbar.band .caret { opacity: 1 !important; border-color: #ffffff; }
.topbar.band .mainnav > .nav-link.active, .topbar.band .dd.has-active .dd-btn { background: rgba(255,255,255,.22); }
.topbar.band .dd-menu .nav-link { color: #ffffff; }
.topbar.band .dd-menu .nav-link:hover { background: rgba(255,255,255,.1); color: #ffffff; }
.topbar.band .dd-menu .nav-link.active { color: #ffffff; background: rgba(255,255,255,.14); }
@media (max-width: 1020px) {
.topbar.band .mainnav .nav-link, .topbar.band .mainnav .dd-btn { color: #ffffff !important; }
}
.lb-proof { max-width: 420px; font-size: 12.5px; color: var(--text-dim); white-space: normal; overflow-wrap: anywhere; }
/* 2026-10-13 fixes */
.card-body > .bars { padding: 2px 4px; }
@media (max-width: 1100px) { .fd-side .tile { grid-column: 1 / -1; } }
:root[data-theme="light"] .footer { --text-faint: #4d5468; --text-dim: #3f4659; }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .footer { --text-faint: #4d5468; --text-dim: #3f4659; }
}
.mc-tiles { display: grid; gap: 10px; }
/* 2026-10-14 header layout (owner): the page title sits beside the logo in a
smaller size, the search pill drops to where the title row was, and the top
bar runs to the right edge of the screen. Its left padding still lines the
logo up with the page content (1480px column, 20px gutter). */
.topbar-in { max-width: none; padding: 0 28px 0 max(20px, calc((100% - 1440px) / 2)); }
.top-title { flex: 0 1 auto; min-width: 0; padding-left: 16px; margin-left: 2px;
border-left: 1px solid rgba(255,255,255,.35); }
.top-title:empty { display: none; }
.top-title.cramped { display: none; } /* set by app.js when the title would be cut short */
.top-title .page-head { margin: 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.top-title .page-head h1 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.top-title .page-head .sub, .top-title .asof { font-size: 12px; color: rgba(255,255,255,.85);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-title .info-i { color: #fff; width: 18px; height: 18px; font-size: 11px; }
.top-title .info-i:hover { background: rgba(255,255,255,.18); }
.band-lower .searchband { padding-top: 30px; }
@media (max-width: 1280px) { .top-title .page-head .sub { display: none; } }
@media (max-width: 900px) {
.topbar-in { padding: 0 13px; }
.top-title { padding-left: 10px; }
.top-title .page-head h1 { font-size: 14px; }
.band-lower .searchband { padding-top: 18px; }
}
@media (max-width: 520px) { .top-title { display: none; } }
/* smaller (i) beside table chips such as Failed (owner, 2026-10-14) */
td .info-i { width: 14px; height: 14px; font-size: 9px; border-width: 1.2px; margin-left: 2px; }
/* contact line in the site font, not the monospace status font (owner, 2026-10-14) */
#foot-contact { font-family: var(--sans); font-size: 13px; letter-spacing: 0; }
/* underlined footer section titles (owner, 2026-10-14) */
.foot-col h4 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* logo mark beside the footer wordmark (owner, 2026-10-14) */
.foot-brand { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.foot-brand .brand-mark svg { width: 24px; height: 24px; }
/* passphrase warning first on the Privacy Policy, ~1.2x the 14px prose (owner, 2026-10-14) */
.legal .legal-alert { font-size: 17px; line-height: 1.5; color: var(--text); margin: 4px 0 18px; }
/* legal pages sit directly on the page background, so on Light Grey and
Lavender their text goes dark like the other on-background blocks; the dark
warning box inside keeps light text (2026-10-14) */
:root:not([data-theme="light"])[data-bg="lightgrey"] .legal,
:root:not([data-theme="light"])[data-bg="lavender"] .legal {
--text: #131828; --text-dim: #3f4659; --text-faint: #4d5468; --accent: var(--accent-onlight);
color: var(--text);
}
:root:not([data-theme="light"])[data-bg="lightgrey"] .legal .note,
:root:not([data-theme="light"])[data-bg="lavender"] .legal .note {
--text: #ffffff; --text-dim: #ffffff; --text-faint: #ffffff; color: var(--text);
}
/* HOME FEED DENSITY - the owner is comparing looks (2026-10-14). Dense:
13px body, 25 rows (HOME_ROWS in app.js). The earlier large look was
15.5px / 14.5px / 12px / 12.5px with 13px 16px cell padding and 12 rows. */
#home-txs table { font-size: 13px; }
#home-txs tbody td { padding: 8px 14px; }
#home-txs tbody td.num { font-size: 12.5px; }
#home-txs thead th { font-size: 11px; }
#home-txs .chip { font-size: 11.5px; padding: 2px 7px; }
/* Column titles stay in view while the page scrolls (owner, 2026-10-14):
on desktop the table wrappers clip instead of scroll, so they are no longer
scroll containers and each header row sticks just under the 72px top bar.
Phones keep sideways scrolling, where wide tables need it. */
@media (min-width: 900px) {
.tscroll, .card-body, .card { overflow: clip; }
.tscroll thead th { position: sticky; top: 72px; z-index: 5; box-shadow: 0 1px 0 var(--line); }
}
/* home feed, one row per operation (2026-10-14): a row opens its transaction's
details underneath. The panel wraps (a full hash is long) while the rows
themselves stay on one line; on phones the table scrolls sideways inside
its .tscroll wrapper like every other table. */
#home-txs tr.op-row { cursor: pointer; }
#home-txs tr.op-row:hover td { background: var(--accent-soft); }
#home-txs tr.op-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#home-txs tr.op-row[aria-expanded="true"] td { background: var(--accent-soft); border-bottom-color: transparent; }
#home-txs tr.op-failed[aria-expanded="true"] td { opacity: 1; }
#home-txs td.op-say { white-space: normal; min-width: 240px; line-height: 1.5; }
#home-txs td.op-say .wl { vertical-align: baseline; }
#home-txs tr.op-detail td { white-space: normal; padding: 4px 16px 16px; background: var(--accent-soft); }
#home-txs .od-box { display: grid; gap: 8px; max-width: 980px; }
#home-txs .od-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; }
#home-txs .od-k { color: var(--text-dim); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
#home-txs .od-v { min-width: 0; overflow-wrap: anywhere; }
#home-txs .od-hash { word-break: break-all; }
@media (max-width: 900px) {
#home-txs .od-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
#home-txs tr.op-detail td { position: sticky; left: 0; }
#home-txs .od-box { max-width: calc(100vw - 64px); }
#home-txs tbody td, #home-txs thead th { padding-left: 10px; padding-right: 10px; }
#home-txs td.op-say { min-width: 170px; }
}
/* endless-scroll footer of the list pages (2026-10-14) */
.list-more { padding: 12px 16px; text-align: center; font-size: 13px; }
.list-more:empty { padding: 0; }
/* sub-address marker beside a base wallet (2026-10-14; see subAddr in app.js) */
.sub-addr { color: var(--text-faint); font-size: .86em; white-space: nowrap; cursor: help; }
/* home feed card head stays put under the 72px top bar, and its column titles
right under it, while the rows scroll beneath (owner, 2026-10-14). The head
has a fixed height so the titles know where to sit; both are opaque. */
.home-feed { --feed-head-h: 50px; }
@media (min-width: 900px) {
.home-feed > .card-head {
position: sticky; top: 72px; z-index: 6;
height: var(--feed-head-h); box-sizing: border-box; flex-wrap: nowrap;
}
.home-feed .tscroll thead th { top: calc(72px + var(--feed-head-h)); background: var(--surface-2); }
}
/* nine top-level menu items (2026-10-14): tighten the bar on mid-width
screens so the page title beside the logo keeps its room */
@media (max-width: 1500px) and (min-width: 1021px) {
.brand { font-size: 26px; }
.topbar-in { gap: 10px; }
.mainnav > .nav-link, .mainnav .dd-btn { padding: 7px 8px; font-size: 13px; }
.top-title .page-head h1 { font-size: 15px; }
}
@media (max-width: 1250px) and (min-width: 1021px) { .topbar .ticker { display: none; } }
/* Header 24h price sparkline beside the ticker (2026-10-14). Hidden with the
ticker at <=1250px, and also wherever its ~100px would cut off the page
title beside the logo (measured on the home page, with a 17px scrollbar:
1501-1819px, where the larger nav font applies, and 1251-1434px). The
nav itself never moves. */
.pxspark { position: relative; display: flex; align-items: center; line-height: 0;
border-radius: 4px; cursor: default; outline: none; }
.pxspark[hidden] { display: none; }
.pxspark svg { display: block; overflow: visible; }
.pxspark .pxs-line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.pxspark.up .pxs-line { stroke: var(--status-ok); }
.pxspark.down .pxs-line { stroke: var(--status-bad); }
.pxspark .pxs-area { stroke: none; opacity: .16; }
.pxspark.up .pxs-area { fill: var(--status-ok); }
.pxspark.down .pxs-area { fill: var(--status-bad); }
.pxspark:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.pxs-tip { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
min-width: 170px; padding: 8px 10px; line-height: 1.45; font-size: 12px; white-space: nowrap;
background: var(--surface); color: var(--text); border: 1px solid var(--line);
border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.pxs-tip div { display: flex; justify-content: space-between; gap: 14px; }
.pxs-tip span { color: var(--text-dim); }
.pxs-tip b { font-family: var(--mono); font-weight: 600; }
.pxs-tip .pxs-src { display: block; margin-top: 4px; color: var(--text-faint); font-size: 11px; }
.pxspark:hover .pxs-tip, .pxspark:focus .pxs-tip { display: block; }
@media (max-width: 1250px) {
.topbar .pxspark { display: none !important; } }
/* a dark chip under the line so red/green read on the purple band */
.topbar.band .pxspark { background: rgba(0,0,0,.22); padding: 2px 3px; }
@media (max-width: 1090px) and (min-width: 1021px) { .top-title { display: none; } }
/* home page: feed on the left, supply box and block feed on the right;
one column under 1100px, the side cards then below the feed (2026-10-14) */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.home-main, .home-side { min-width: 0; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
#home-metrics { padding-top: 6px; padding-bottom: 10px; }
#home-metrics .srow:first-child { border-top: 0; }
#home-metrics .hm-asof { margin-top: 8px; line-height: 1.5; }
#home-blocks table { font-size: 13px; }
#home-blocks tbody td, #home-blocks thead th { padding: 8px 10px; }
#home-blocks .blk-hash { font-size: 12px; color: var(--text-dim); }
/* Owner's palette, 2026-10-14 (from the palette playground): black page,
deep-navy cards, electric-blue column bars and lines, white text, bright
mint links. Base dark-theme tokens above carry the rest; the light theme
keeps its own values. */
:root:not([data-theme="light"]) thead th { background: #1d00fa; }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) thead th { background: var(--surface-2); }
}
/* Wordmark (owner, 2026-10-14): the ring mark is the "o" of Piro. It is sized
to the lowercase x-height (.58em, a touch over Segoe's ~.5em x-height, the
way a round letter overshoots) and dropped .02em below the baseline, with a
heavier stroke than the old stand-alone mark so it holds up at letter size.
Fixed brand green, like the rest of the logo. */
.brand-o {
display: inline-block; width: .58em; height: .58em; margin: 0 .03em;
vertical-align: -.02em; color: var(--brand-green) !important;
}
.brand-o svg { display: block; width: 100%; height: 100%; }
.foot-brand .brand-text { font-weight: 500; letter-spacing: -.02em; }
/* Informational-purposes notice on the legal pages: an ordinary note,
not the large passphrase box (owner, 2026-10-14) */
.legal .legal-info { margin: 0 0 18px; }
.foot-info strong { color: var(--text-dim); }
/* One extra nav item on the owner's own machine (see owner-local.js): pull
the items a little closer there so the page title keeps its room
(2026-10-14). The public site never has .nav-owner. */
@media (max-width: 1500px) and (min-width: 1021px) {
.mainnav:has(.nav-owner) { gap: 0; }
.mainnav:has(.nav-owner) > .nav-link, .mainnav:has(.nav-owner) .dd-btn { padding: 7px 5px; font-size: 12.5px; }
}
@media (max-width: 1150px) and (min-width: 1021px) {
.mainnav:has(.nav-owner) > .nav-link, .mainnav:has(.nav-owner) .dd-btn { padding: 7px 4px; }
}
/* Owner colour controls (2026-10-14): wallet addresses and the Pi Supply box
each have their own colour, set from the palette playground. */
:root {
--addr: #00ffaa; /* wallet addresses */
--supply-bg: #000000; /* Pi Supply card */
--supply-head: #2a00fa;/* Pi Supply title bar */
--supply-title: #ffffff; /* Pi Supply title text */
--supply-label: #ffffff;/* row names, e.g. "Held In Wallets" */
--supply-value: #00ffaa; /* the numbers */
--supply-line: #5945bf; /* dividers between rows */
--supply-note: #d5d3d3; /* wallet counts and the as-of lines */
}
:root:not([data-theme="light"]) .wl > a.mono { color: var(--addr); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .wl > a.mono { color: var(--accent); } }
:root:not([data-theme="light"]) .home-side .card:has(#home-metrics) { background: var(--supply-bg); }
:root:not([data-theme="light"]) .home-side .card:has(#home-metrics) .card-head { background: var(--supply-head); }
:root:not([data-theme="light"]) .home-side .card:has(#home-metrics) .card-head h2 { color: var(--supply-title); }
:root:not([data-theme="light"]) #home-metrics .srow-l { color: var(--supply-label); }
:root:not([data-theme="light"]) #home-metrics .srow-v { color: var(--supply-value); }
:root:not([data-theme="light"]) #home-metrics .srow { border-top-color: var(--supply-line); }
:root:not([data-theme="light"]) #home-metrics :is(.srow-sub, .hm-asof) { color: var(--supply-note); }
/* fee-surge banner above the search pill (2026-10-14) */
.band-note { max-width: 1480px; margin: 0 auto; padding: 14px 20px 0; }
.band-note:empty, .band-note:has(> #surge-banner[hidden]) { display: none; }
.band-note .note { margin: 0; }
@media (max-width: 900px) { .band-note { padding: 12px 13px 0; } }
/* whole-pixel rows so the 1px dividers stay crisp instead of smearing grey */
#home-metrics .srow-l { line-height: 18px; }
#home-metrics .srow-v { line-height: 20px; }
#home-metrics .srow-sub { line-height: 16px; }
#home-metrics .info-i { height: 16px; width: 16px; }
:root:not([data-theme="light"]) #home-metrics .srow:not(:first-child) { border-top-width: 2px; }
/* larger card titles on the home page (owner, 2026-10-14) */
:is(.home-main, .home-side) .card-head h2 { font-size: 18px; }
/* centred Newer/Older buttons on the list pages and the home feed (2026-10-14) */
.pager.center { justify-content: center; }
.pager.center .count { margin-left: 0; }
.pager.center .count:empty { display: none; }
/* page background: Slate Blue (#33455b, the --bg token) is the default since
2026-10-14; Black is now its own choice */
:root:not([data-theme="light"])[data-bg="black"] body { background: #000000; }
/* Close button on the home feed's detail panel (owner, 2026-10-14) */
#home-txs .od-box { position: static; }
#home-txs tr.op-detail > td { position: relative; }
.od-close {
position: absolute; top: 10px; right: 14px; padding: 4px 10px; border-radius: 6px;
border: 1px solid var(--line); background: var(--surface); color: var(--text);
font: 600 12px var(--sans); cursor: pointer;
}
.od-close:hover { background: var(--accent); color: #04130d; border-color: var(--accent); }
.od-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Operations tables (wallet pages, Operations, Payments, transaction pages)
use the home feed's lettering: operation names in plain text colour and
amounts in the body font, like "Pay 1.849 π" (owner, 2026-10-14). */
.ops-t td:first-child > a { color: var(--text); font-weight: 400; }
.ops-t td:first-child > a:hover { color: var(--accent); }
.ops-t tbody td.num { font-family: var(--sans); font-size: 13px; }
/* wallet page (owner, 2026-10-14): main column + side column, like home */
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 18px; align-items: start; }
.acct-main, .acct-side { min-width: 0; }
@media (max-width: 1100px) { .acct-grid { grid-template-columns: minmax(0, 1fr); } }
.acct-side tbody td.num, .acct-side tbody td:last-child { white-space: nowrap; }
/* side tables on the wallet page: tighter cells so every column fits */
.acct-side thead th, .acct-side tbody td { padding-left: 10px; padding-right: 10px; }
/* Details cards (wallet, transaction, block, operation): their own colours,
set from the palette playground (owner, 2026-10-14) */
:root {
--kv-bg: #000000; /* card background */
--kv-key: #ffffff; /* row names: ADDRESS, NAME, TIER... */
--kv-value: #00ffaa; /* the values */
--kv-note: #d5d3d3; /* bracketed notes, "No Known Name" */
--kv-line: #5945bf; /* lines between rows and columns */
}
:root:not([data-theme="light"]) .card:has(> .card-body > table.kv), :root:not([data-theme="light"]) .card:has(table.kv) { background: var(--kv-bg); }
:root:not([data-theme="light"]) table.kv td:first-child { color: var(--kv-key); }
:root:not([data-theme="light"]) table.kv td:last-child { color: var(--kv-value); }
:root:not([data-theme="light"]) table.kv td:last-child .faint { color: var(--kv-note); }
:root:not([data-theme="light"]) table.kv td { border-color: var(--kv-line); }
/* Rich list right column (owner, 2026-10-14): the list on the left, the
summary box, Exchange Wallets and Pi Network's Own Wallets on the right;
one column under 1100px, the side cards then below the list, as on the
home page. */
.rich-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.rich-side { min-width: 0; display: grid; gap: 18px; }
.rich-side > .card, .rich-side > .sbox { margin: 0; }
.rich-side .card-head h2 { font-size: 16px; }
@media (max-width: 1100px) { .rich-grid { grid-template-columns: minmax(0, 1fr); } }
.rs-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
padding: 8px 14px; border-top: 1px solid var(--line); }
.rs-ex:first-of-type .rs-ex-head, .rs-w:first-of-type:not(.rs-ex .rs-w) { border-top: 0; }
.rs-ex + .rs-ex .rs-ex-head { border-top-width: 2px; }
.rs-ex .rs-w { border-top: 0; padding-top: 3px; padding-left: 24px; }
.rs-ex-head strong { font-size: 14px; }
.rs-a { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.rs-ex .rs-a { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.rs-name { font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.rs-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rs-pi { flex: 0 0 auto; font: 600 13px var(--mono); white-space: nowrap; text-align: right; }
.rs-role { font-size: 11.5px; color: var(--text-dim); }
.rs-flag { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--warn); }
.rs-ex-head { padding-bottom: 3px; }
.rs-ex-head + .rs-flag { margin: 0 14px 4px; }
.rs-total { border-top-width: 2px; font-weight: 700; font-size: 13px; }
.rs-foot { margin: 0; padding: 6px 14px 10px; font-size: 11.5px; color: var(--text-dim); }
.rs-empty { margin: 0; padding: 12px 14px; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
/* failed operations keep full colour like the home feed; the red Failed chip
marks them (owner, 2026-10-14) */
tbody tr.op-failed td { opacity: 1; }
.pay-t td.op-say { white-space: normal; min-width: 260px; line-height: 1.5; }
.pay-t td:first-child, .pay-t td:last-child { white-space: nowrap; }
/* fee-surge banner restyled to sit quietly on the header band, with a
Dismiss button (owner, 2026-10-14) */
.band-note .surge-banner {
display: flex; align-items: center; gap: 14px;
background: rgba(8, 0, 46, .55); border: 1px solid rgba(255,255,255,.22);
border-left: 3px solid var(--accent); border-radius: 10px;
color: #ffffff; padding: 9px 12px 9px 14px; font-size: 13px;
}
.band-note .surge-banner .sb-text { flex: 1; min-width: 0; }
.band-note .surge-banner strong { color: #ffffff; }
.band-note .surge-banner a { color: var(--accent); }
.sb-close {
flex: 0 0 auto; padding: 4px 10px; border-radius: 6px; cursor: pointer;
border: 1px solid rgba(255,255,255,.35); background: transparent; color: #ffffff;
font: 600 12px var(--sans);
}
.sb-close:hover { background: rgba(255,255,255,.15); }
.sb-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Chart colours (owner, 2026-10-14): bars shade red at the foot to green at
the top; today's bar is solid green. */
:root { --bar-a: #c20000; --bar-b: #00ff11; --bar-today: #94ff29; }
.schart rect { fill: url(#schart-g); opacity: 1; }
.schart rect.today { fill: var(--bar-today); }
.bar-fill, .bar-fill.violet { background: linear-gradient(90deg, var(--bar-a), var(--bar-b)); }
/* Statistics page + day popup in the home page's colours (owner, 2026-10-14):
body text var(--text), addresses var(--addr) (via .wl > a.mono), links and
hashes var(--accent), amounts in the body font like the home feed, no
faint or dimmed text. */
:is(#st-days, #st-side, .day-dlg) :is(.faint, .srow-l, .srow-sub, .sbox-since, .schart-t, .schart-n) { color: var(--text); }
.fd-layout:has(#st-days) .card-head .sub { color: var(--text); }
#st-side .sbox-utc, #st-side .srow.head .srow-v span { color: var(--text); }
#st-side .schart .lab { fill: var(--text); }
#st-side .srow-v { font-family: var(--sans); }
:is(#st-days, .day-dlg) tbody td.num { font-family: var(--sans); font-size: 13px; color: var(--text); }
:is(#st-days, .day-dlg) tbody tr td { opacity: 1; color: var(--text); }
:is(#st-days, .day-dlg) a:not(.mono) { color: var(--accent); }
/* Daily Payments: each day is a button that opens its popup */
.day-btn {
background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.day-btn:hover { text-decoration-thickness: 2px; }
.day-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
dialog.info-dlg:has(.day-dlg) { width: min(980px, calc(100vw - 32px)); max-width: none; }
.day-dlg { color: var(--text); }
.info-box .day-dlg p.day-sub { color: var(--text); margin: 0 0 12px; font-size: 13px; }
.day-tots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.day-tots > div { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; display: grid; gap: 4px; }
.day-tots span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text); }
.day-tots strong { font: 650 16px var(--sans); color: var(--text); overflow-wrap: anywhere; }
.day-dlg h3 { margin: 4px 0 8px; font-size: 15px; color: var(--text); }
.day-dlg .tscroll { overflow-x: auto; }
.day-dlg tbody td { white-space: nowrap; }
.day-dlg .tscroll thead th { position: static; top: auto; box-shadow: none; }
.day-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 640px) { .day-tots { grid-template-columns: minmax(0, 1fr); } }
/* every link to a wallet page uses the wallet-address colour, sub-addresses
in sentences included (owner, 2026-10-14) */
:root:not([data-theme="light"]) a.mono[href^="/account/"] { color: var(--addr); }
/* the price chart takes precedence over a page title squeezed to a few
letters (owner wants the chart; 2026-10-14) */
@media (max-width: 1360px) and (min-width: 1021px) { .top-title { display: none; } }
/* Tier chart as vertical columns (owner, 2026-10-14) */
.tc-measure .btn { padding: 5px 11px; font-size: 12.5px; }
.tc { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: end; padding: 8px 4px 0; }
.tc-col { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer;
border-radius: 8px; padding: 6px 4px; min-width: 0; }
.tc-col:hover, .tc-col:focus-visible { background: var(--surface-2); outline: none; }
.tc-top { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.tc-top strong { font-size: 15px; color: var(--text); }
.tc-top span { font-size: 12px; color: var(--text-dim); }
.tc-bar-wrap { height: 180px; width: 100%; display: flex; align-items: flex-end; justify-content: center;
border-bottom: 1px solid var(--line); }
.tc-bar { display: block; width: 62%; max-width: 70px; border-radius: 5px 5px 0 0; }
.tc-name { display: flex; flex-direction: column; margin-top: 8px; gap: 1px; }
.tc-name strong { font-size: 13.5px; color: var(--text); }
.tc-name span { font-size: 11.5px; color: var(--text-dim); }
.tc-foot { margin-top: 12px; font-size: 12px; color: var(--text-dim); }
@media (max-width: 700px) {
.tc { gap: 4px; } .tc-bar-wrap { height: 130px; }
.tc-top strong { font-size: 13px; } .tc-top span, .tc-name span { font-size: 10.5px; }
}
.rich-chart #rich-period { display: none !important; }
.tc-top .tc-ch .chg-up { color: var(--status-ok); }
.tc-top .tc-ch .chg-down { color: var(--status-bad); }
.rich-chart .card-body:has(.tc) { overflow: visible; padding-bottom: 14px; }
/* Card titles are always white, whatever the main text colour; the short
address beside a wallet card's title takes the wallet-address colour; the
details card values use the main text colour, with wallet links and block
links keeping their own colours (owner, 2026-10-14). */
:root { --card-title: #ffffff; }
:root:not([data-theme="light"]) .card-head h2 { color: var(--card-title); }
:root:not([data-theme="light"]) .acct-details .card-head .sub { color: var(--addr); }
:root:not([data-theme="light"]) .addr-txt { color: var(--addr); }
/* Tier chart, horizontal bars with Whale at the top (owner, 2026-10-14) */
:root { --th-pi: #00ffaa; --th-wl: #9d8bff; }
.th-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--text); margin-left: auto; }
.th-legend span { display: inline-flex; align-items: center; gap: 6px; }
.th-k { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.th-k.pi, .th-bar.pi { background: var(--th-pi); }
.th-k.wl, .th-bar.wl { background: var(--th-wl); }
.th { display: grid; gap: 4px; padding-top: 4px; }
.th-row, .th-axis { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; align-items: center; }
.th-row { padding: 7px 6px; border-radius: 8px; cursor: pointer; }
.th-row:hover, .th-row:focus-visible { background: var(--surface-2); outline: none; }
.th-name { display: flex; flex-direction: column; text-align: right; }
.th-name strong { font-size: 14px; color: var(--text); }
.th-name span { font-size: 11.5px; color: var(--text-dim); }
.th-bars { display: grid; gap: 4px; border-left: 2px solid var(--line); padding-left: 0; }
.th-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.th-bar { display: block; height: 14px; border-radius: 0 4px 4px 0; flex: 0 0 auto; }
.th-val { font-size: 12px; color: var(--text); white-space: nowrap; }
.th-val .chg-up { color: var(--status-ok); } .th-val .chg-down { color: var(--status-bad); }
.th-axis > div { display: flex; justify-content: space-between; width: 78%; border-top: 2px solid var(--line);
padding-top: 4px; font-size: 11px; color: var(--text-dim); }
@media (max-width: 700px) {
.th-row, .th-axis { grid-template-columns: 82px minmax(0, 1fr); gap: 8px; }
.th-name span { display: none; } .th-val { font-size: 10.5px; }
}
.rich-top { gap: 18px; }
.rich-chart-pi .tc-bar-wrap { height: 150px; }
/* Paid In / Paid Out lists on the wallet details card (2026-10-17) */
.io-list { display: grid; gap: 3px; margin-top: 6px; }
.io-row { display: flex; justify-content: space-between; gap: 16px; max-width: 620px; }
.io-a { white-space: nowrap; }
/* Menu text colour from the palette (owner, 2026-10-17); hover and the
current page stay white so they still stand out. */
:root { --nav: #ffffff; }
.topbar.band .mainnav > .nav-link, .topbar.band .dd-btn, .topbar.band .caret { color: var(--nav) !important; }
.topbar.band .mainnav > .nav-link:hover, .topbar.band .dd-btn:hover,
.topbar.band .mainnav > .nav-link.active, .topbar.band .dd.has-active .dd-btn { color: #ffffff !important; }
/* Wider layout (owner, 2026-10-17): the page runs nearly edge to edge with a
24px gutter, so the main box sits further left; the logo, search bar, fee
surge bar and page content all share that left edge, and the side
information boxes are wider to fill the right-hand side. */
:root { --wrap: 1900px; --gutter: 24px; }
.searchband, .band-note, .band-title, #view, .foot-grid, .foot-bar { max-width: var(--wrap); padding-left: var(--gutter); padding-right: var(--gutter); }
.topbar-in { padding: 0 var(--gutter) 0 max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }
.home-grid, .rich-grid { grid-template-columns: minmax(0, 1fr) 440px; }
@media (max-width: 1100px) { .home-grid, .rich-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { :root { --gutter: 13px; } }
/* fee-surge bar on a black background (owner, 2026-10-17) */
.band-note .surge-banner { background: #000000; }
/* All titles in the same bold, spaced capitals as the column headings
(owner approved the preview, 2026-10-18). */
.card-head h2, .top-title .page-head h1 { text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.card-head h2 { font-size: 14px; }
:is(.home-main, .home-side) .card-head h2 { font-size: 14px; }
.top-title .page-head h1 { font-size: 14px; }
#home-metrics .srow-l { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 11.5px; }
/* 2026-10-18 (owner): copy icon, log-scale holder chart, distribution
categories, top wallets, Pi Network's own wallets, ranked top payments. */
.cp-ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 22px; height: 22px; padding: 0; margin-left: 2px; border: 0; border-radius: var(--radius-xs);
background: none; color: var(--text-dim); cursor: pointer; vertical-align: middle; }
.cp-ic svg { fill: none; stroke: currentColor; stroke-width: 1.4; }
.cp-ic:hover, .cp-ic:focus-visible { color: var(--accent); background: var(--surface-2); outline: none; }
.cp-ic.done { color: var(--status-ok); }
.cp-ic.fail { color: var(--status-bad); }
.acct-cell { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; }
.rk { display: inline-block; min-width: 34px; padding: 2px 6px; border-radius: var(--radius-xs);
border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
font: 600 11.5px var(--mono); text-align: center; }
tbody tr.is-top td.rank .rk { color: var(--gold); border-color: var(--gold); }
.cat-pct { font: 700 11.5px var(--mono); }
.lgb { padding: 4px 0 0; }
.lgb-cap { font-size: 11.5px; color: var(--text-dim); margin: 0 0 8px 2px; }
.lgb-cap em { font-style: normal; font-weight: 700; color: var(--text); }
.lgb-plot { position: relative; height: 260px; margin: 10px 4px 0 50px; border-left: 1px solid var(--chart-grid); }
.lgb-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--chart-grid); }
.lgb-grid.base { border-top-style: solid; }
.lgb-grid span { position: absolute; right: 100%; margin-right: 7px; transform: translateY(-50%);
font: 11px var(--mono); color: var(--text-dim); white-space: nowrap; }
.lgb-bars { position: absolute; inset: 0; display: flex; gap: 10px; padding: 0 2%; }
.lgb-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end;
align-items: center; cursor: pointer; border-radius: 6px 6px 0 0; }
.lgb-col:hover, .lgb-col:focus-visible { background: var(--surface-2); outline: none; }
.lgb-bar { display: block; width: 64%; max-width: 88px; border-radius: 4px 4px 0 0; }
.lgb-val { font: 600 11.5px var(--mono); color: var(--text); margin-bottom: 4px; white-space: nowrap; }
.lgb-names { display: flex; gap: 10px; margin: 6px 4px 0 50px; padding: 0 2%; }
.lgb-name { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
text-align: center; line-height: 1.25; }
.lgb-name strong { font-size: 13px; }
.lgb-name span { font-size: 11px; color: var(--text-dim); }
#rich-cats .tc-foot { margin: 0; padding: 8px 14px 12px; }
tr.cat-row { cursor: pointer; }
tr.cat-row:hover td, tr.cat-row:focus-visible td { background: var(--surface-2); }
tr.cat-row:focus-visible { outline: none; }
tr.cat-row .lg-sw { display: inline-block; vertical-align: -1px; }
tr.cat-total td { border-top: 2px solid var(--line); }
.own-note { font-weight: 600; }
.own-addr { margin-top: 3px; }
.own-usd { margin-top: 2px; font-size: 11.5px; color: var(--text-dim); font-weight: 400; }
tr.own-total td { border-top: 2px solid var(--line); }
tr.own-total-note td { padding-top: 0; }
.own-cohort { padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line);
border-left: 3px solid var(--violet); background: var(--surface-2); color: var(--text-dim);
font-size: 12.5px; line-height: 1.5; white-space: normal; }
.own-cohort strong { color: var(--text); }
.own-t.narrow tbody td { padding: 8px 10px; }
.own-t.narrow tbody td.rank { padding-right: 4px; }
.own-t.narrow .rk { min-width: 24px; }
.tt-flow { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.tt-arrow { color: var(--text-dim); font-weight: 700; }
.tt-amt strong { font-size: 13.5px; }
.tt-when { white-space: nowrap; font-size: 12.5px; }
.tt-ago { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
@media (max-width: 640px) {
.lgb-plot { height: 220px; margin-left: 42px; }
.lgb-names { margin-left: 42px; }
.lgb-bars, .lgb-names { gap: 4px; padding: 0; }
.lgb-val { font-size: 10px; }
.lgb-name strong { font-size: 11px; }
.lgb-name span { display: none; }
.lgb-bar { width: 72%; }
}
/* Owner-settable chart colours (2026-10-18): the Pi in no wallet on "Share Of
Pi Held By Each Tier", and the log chart's gridlines and axis. */
:root { --tier-unheld: #6b7280; --chart-grid: #5945bf; }
.tc-col.tc-unheld { cursor: default; }
.tc-col.tc-unheld:hover { background: none; }
.tc-unheld .tc-name strong { color: var(--text-dim); }
/* Whole addresses on wide screens, the short form under 900px (owner, 2026-10-18). */
.wl-both .a-short { display: none; }
.wl-both > a.mono { overflow-wrap: anywhere; }
@media (max-width: 899px) {
.wl-both .a-full { display: none; }
.wl-both .a-short { display: inline; }
}
.tt-flow { flex-direction: column; align-items: flex-start; gap: 3px; }
.tt-flow > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tc7 .tc-name { min-height: 54px; } /* equal name blocks keep the 7 bars on one baseline */
/* ===== Owner palette, 2026-10-18 (page background #292929 from 2026-10-19) (from the palette playground) =====
One block, last in the file, so it wins over the earlier palettes.
Dark theme only; the light theme keeps its own colours. */
:root:not([data-theme="light"]) {
--band-a: #2b00ff; --band-b: #775cff; /* header band */
--nav: #ffffff; /* menu text */
--bg: #766a6a; /* page background (lightened 2026-11-02) */
--surface: #000000; /* card background */
--th-bg: #7d00fa; /* column-title bar */
--line: #2b00ff; /* lines / borders */
--text: #ffffff;
--text-dim: #e8e8e8; --text-faint: #e8e8e8;
--accent: #ffffff; /* links, hashes, live dot */
--addr: #7dd3fc; /* wallet addresses, light blue like --rcpt (owner, 2026-11-03) */
--supply-bg: #000000; --supply-head: #7d00fa; --supply-title: #ffffff;
--supply-label: #ffffff; --supply-value: #ffffff; --supply-line: #2b00ff; --supply-note: #e8e8e8;
--kv-bg: #000000; --kv-key: #ffffff; --kv-value: #2bff00; --kv-note: #ffffff; --kv-line: #2b00ff;
--card-title: #ffffff;
/* eight tiers, PiScan's colours (2026-10-20; replaced the six-tier set) */
--tier-whale: #1e90ff; --tier-shark: #00c4a0; --tier-dolphin: #f5b400; --tier-tuna: #ff7a3d;
--tier-fish: #8b85d9; --tier-shrimp: #ff6b6b; --tier-plankton: #6cc96c; --tier-microbe: #4f8cff;
--tier-unheld: #fee87c; --chart-grid: #2b00ff;
--bar-a: #c20000; --bar-b: #00ff11; --bar-today: #94ff29;
/* new controls (2026-10-18) */
--dist-head: #7d00fa; /* Pi Holder Distribution title bar */
--act-axis: #2b00ff; /* line under the Activity bars */
}
:root:not([data-theme="light"]) thead th { background: var(--th-bg); }
:root:not([data-theme="light"])[data-bg="lightgrey"] body { background: var(--bg); }
.card:has(#rich-chart) > .card-head { background: var(--dist-head); }
.schart .ax { stroke: var(--act-axis, var(--line)); stroke-width: 2; }
/* Paid In amounts green, Paid Out amounts red, everywhere they appear on the
wallet details card - the totals and each wallet's amount (owner, 2026-10-19) */
:root { --pay-in: #00ff04; --pay-out: #ff0000; }
table.kv .amt-in, #acct-in .io-a, .dir-in, td .amt-in { color: var(--pay-in) !important; }
table.kv .amt-out, #acct-out .io-a, .dir-out, td .amt-out { color: var(--pay-out) !important; }
#acct-in .io-a .faint, #acct-out .io-a .faint { color: var(--kv-note) !important; }
/* With links the same white as text (owner, 2026-10-19), they underline on
hover so they still read as clickable. */
:root:not([data-theme="light"]) a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Wallet page Recent Operations, laid out like Pi's own explorer (owner,
2026-10-19): the source wallet (plain short address since the pill was
dropped the same day), plain-text sentence,
the chain's raw operation type. */
.rel-addr { color: var(--addr, var(--accent)); letter-spacing: .02em; }
#rel-title { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.aops-t td { vertical-align: middle; }
.aops-t td.op-say { white-space: normal; min-width: 260px; line-height: 1.5; }
.aops-t td.op-say .wl { vertical-align: baseline; }
.aops-t td.ao-type > a { color: var(--text); font-weight: 400; }
.aops-t td.ao-type > a:hover { color: var(--accent); }
.aops-t td.ago { white-space: nowrap; }
.aops-t td.ao-acct { white-space: nowrap; }
/* Label chips show their full text on hover or keyboard focus, overlaying
their neighbours (owner, 2026-10-19). */
td .wl-tag { position: relative; }
td .wl-tag:hover, td .wl-tag:focus, td .wl-tag:focus-visible {
max-width: none; overflow: visible; text-overflow: clip; z-index: 20;
box-shadow: var(--shadow-sm); outline: none; }
.io-note { margin-top: 6px; font-size: 12px; color: var(--kv-note); opacity: .8; }
/* ===== Easier reading (owner, 2026-10-19): "easy to read for people with
bad eyes". Larger table text, larger addresses and hashes, a bigger price,
and the price chart's line in a strong red, thicker. Raised again the same
day to PiScan's sizes: 16px body, ~15.5px tables, 12.5px column heads,
14.5px addresses, 16px card titles and details rows. ===== */
:root { --spark-line: #ff2e2e; }
.pxspark .pxs-line, .pxspark.up .pxs-line, .pxspark.down .pxs-line { stroke: var(--spark-line); stroke-width: 2.4; }
.pxspark .pxs-area, .pxspark.up .pxs-area, .pxspark.down .pxs-area { fill: var(--spark-line); opacity: .18; }
html, body { font-size: 16px; }
tbody td { padding-top: 11px; padding-bottom: 11px; }
thead th, #home-txs thead th { font-size: 12.5px; }
td .mono, td a.mono, .wl > a.mono { font-size: 14.5px; letter-spacing: .01em; }
table.kv { font-size: 16px; }
table.kv td:first-child { font-size: 13.5px; }
table.kv .mono { font-size: 14.5px; }
.card-head h2, :is(.home-main, .home-side) .card-head h2, .rich-side .card-head h2,
.top-title .page-head h1 { font-size: 16px; }
.card-head .sub { font-size: 13px; }
.topbar .ticker { font-size: 15px; }
.chip, .wl-tag { font-size: 13px; }
.io-note { font-size: 13px; }
.empty, .loading { font-size: 14.5px; }
@media (max-width: 900px) {
.wl > a.mono { font-size: 13.5px; }
table.kv td:first-child { font-size: 12px; }
}
/* Details cards (wallet, transaction, block, operation): the row lines run
to the card's edges; the cells give the inset (owner, 2026-10-19). */
.card-body:has(> table.kv), .card-body:has(> .tx-head) { padding: 0; }
.card-body > table.kv td:first-child { padding-left: 16px; }
.card-body > table.kv td:last-child { padding-right: 16px; }
.card-body > .tx-head { padding: 14px 16px; margin-bottom: 0; }
/* Wallet page: the muted "Dormant since" chip and the "Both ways" direction
in Affiliated Wallets (owner, 2026-10-19). */
.chip.dormant { background: var(--surface-3); color: var(--text-faint); font-weight: 600; }
.dir.both { color: var(--text-dim); }
.dir { font-size: 12.5px; }
#acct-cp td:first-child { white-space: nowrap; }
.tx-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 4px 4px 14px; border-bottom: 1px solid var(--kv-line); margin-bottom: 6px; }
.tx-head-l { font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: 14px; }
.tx-head-h { font-size: 14.5px; color: var(--text-dim); overflow-wrap: anywhere; }
/* Top 500 summary box: larger titles and numbers (owner, 2026-10-19) */
#rich-tiles .srow-l { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text); }
#rich-tiles .srow-v.one { font-size: 20px; }
/* Boxes sit fully below the header band, not over it (owner, 2026-10-19):
no overlap, and a slightly shorter band with a small gap under it. */
:root { --band-extend: 0px; }
.band-lower { padding-bottom: 18px !important; }
#view { margin-top: 0 !important; padding-top: 22px; }
/* Card title bars get their own colour control (owner, 2026-10-19). */
:root { --card-head: #7d00fa; }
.card-head { background: var(--card-head); }
.card:has(#rich-chart) > .card-head { background: var(--dist-head, var(--card-head)); }
/* No flashing on new rows and no highlight bar on hover (owner, 2026-10-20).
Clickable home-feed rows keep a pointer cursor so they still read as clickable. */
tbody tr.fresh td { animation: none !important; }
tbody tr:hover, tbody tr:hover td, #home-txs tr.op-row:hover td, #home-txs tr.op-row:focus td { background: transparent !important; }
#home-txs tr.op-row { cursor: pointer; }
/* No vertical gridlines and no line in the Pi Supply box (owner, 2026-10-20).
(The "no lines at all" rules from earlier that day are replaced by the
PiScan-style row lines below.) */
th + th, td + td { border-left: 0 !important; }
tbody tr { border: 0 !important; }
#home-metrics .srow { border-top: 0 !important; }
thead th, .tscroll thead th, .home-feed .tscroll thead th { box-shadow: none !important; }
/* ===== PiScan-style lines and boxes (owner, 2026-10-20) =====
Tables: ONE thin horizontal line under the header row and between rows,
no vertical column lines, no heavy borders. Cards: a thin 1px border,
4px corners, a light shadow, roomier padding, and a thin line under the
title area. The `html body` prefix outranks the owner's preview sheet
(palette-preview.css), whose !important "no gridlines" rules would
otherwise remove the row lines there too.
Settable colours: --row-line (row separators), --card-border (box edge
and the line under each title), --chart-dash (dashed chart gridlines). */
:root {
--row-line: rgba(150, 150, 150, .38);
--card-border: rgba(150, 150, 150, .34);
--chart-dash: rgba(150, 150, 150, .42);
--card-shadow: 0 1px 3px rgba(0, 0, 0, .22);
--radius: 4px;
}
:root[data-theme="light"] { --row-line: #e3e6ec; --card-border: #dfe3ea; --chart-dash: #d5d9e0; --card-shadow: 0 1px 3px rgba(19, 24, 40, .08); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
--row-line: #e3e6ec; --card-border: #dfe3ea; --chart-dash: #d5d9e0; --card-shadow: 0 1px 3px rgba(19, 24, 40, .08);
} }
html body thead th { border: 0 !important; border-bottom: 1px solid var(--row-line) !important; }
html body tbody td, html body table.kv td { border: 0 !important; border-bottom: 1px solid var(--row-line) !important; }
html body tbody tr:last-child td { border-bottom: 0 !important; }
html body .card, html body .sbox {
border: 1px solid var(--card-border) !important; border-radius: var(--radius) !important;
box-shadow: var(--card-shadow) !important;
}
html body .card-head { border-bottom: 1px solid var(--card-border) !important; }
.card-head { padding: 14px 20px; }
.card-head h2 { font-weight: 700; }
.card-body { padding: 18px 20px; }
.card-body.flush { padding: 0; }
thead th, tbody td { padding-left: 16px; padding-right: 16px; }
.card-body.flush :is(th, td):first-child { padding-left: 20px; }
.card-body.flush :is(th, td):last-child { padding-right: 20px; }
.tile { border-color: var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); }
/* Pi Holder Distribution, PiScan's chart (2026-10-20): solid left and bottom
axes with small tick marks, dashed light gridlines, tier names angled
under the bars, nothing else. Axis colour is --chart-grid (owner palette). */
.lgb-ps .lgb-plot { height: 280px; margin: 8px 8px 0 58px; border-left: 1px solid var(--chart-grid);
border-bottom: 1px solid var(--chart-grid); }
.lgb-ps .lgb-grid { border-top: 1px dashed var(--chart-dash); }
.lgb-ps .lgb-grid.base { border-top: 0; }
.lgb-ps .lgb-grid::before { content: ""; position: absolute; left: -6px; top: -0.5px; width: 6px;
border-top: 1px solid var(--chart-grid); }
.lgb-ps .lgb-grid span { margin-right: 10px; font-size: 11.5px; }
.lgb-ps .lgb-bars { gap: 0; padding: 0 1%; }
.lgb-ps .lgb-col { border-radius: 0; }
.lgb-ps .lgb-col:hover .lgb-bar, .lgb-ps .lgb-col:focus-visible .lgb-bar { filter: brightness(1.15); }
.lgb-ps .lgb-col:hover, .lgb-ps .lgb-col:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent); }
.lgb-ps .lgb-bar { width: 62%; max-width: 72px; border-radius: 2px 2px 0 0; }
.lgb-ps .lgb-names { gap: 0; padding: 0 1%; margin: 0 8px 0 58px; height: 74px; }
.lgb-ps .lgb-name { position: relative; display: block; }
.lgb-ps .lgb-name::before { content: ""; position: absolute; left: 50%; top: 0; height: 6px;
border-left: 1px solid var(--chart-grid); }
.lgb-ps .lgb-name span { position: absolute; right: 50%; top: 10px; white-space: nowrap;
transform-origin: 100% 0; transform: rotate(-40deg); font-size: 12.5px; font-weight: 600; }
@media (max-width: 640px) {
.lgb-ps .lgb-plot { height: 220px; margin-left: 46px; }
.lgb-ps .lgb-names { margin-left: 46px; height: 62px; }
.lgb-ps .lgb-name span { display: inline; font-size: 11px; }
.lgb-ps .lgb-bar { width: 70%; }
}
/* Distribution Categories and Top Wallets, PiScan's tables (2026-10-20). */
.cat-t td { white-space: nowrap; }
.cat-t tr.cat-total td { border-top: 0 !important; }
.cat-t tr.cat-total td strong { font-weight: 700; }
#rich-cats .tc-foot { padding: 10px 20px 14px; }
.rich-t td.num strong { font-weight: 700; }
.pager-ps { flex-wrap: wrap; gap: 6px; padding: 14px 20px; border-top: 1px solid var(--card-border); }
.pager-ps .pg-nums { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pager-ps .btn { min-width: 36px; padding: 5px 11px; border-radius: var(--radius); }
.pager-ps .pg-gap { color: var(--text-dim); padding: 0 2px; }
.pager-ps .btn.pg.on { cursor: default; }
@media (max-width: 640px) {
.cat-t td { white-space: normal; }
.cat-t :is(th, td) { padding-left: 8px !important; padding-right: 8px !important; font-size: 13px; }
.cat-t :is(th, td):first-child { padding-left: 12px !important; }
.cat-t .cat-pct { font-size: 10.5px; }
/* nine columns on "Share Of Pi Held By Each Tier": shares only, no sub-lines */
.rich-chart-pi .tc { gap: 2px; }
.rich-chart-pi .tc-top span, .rich-chart-pi .tc-name span { display: none; }
.rich-chart-pi .tc-top strong { font-size: 11px; }
.rich-chart-pi .tc-name strong { font-size: 10px; overflow-wrap: anywhere; }
}
/* phones: Category | Range | Accounts | % fit without sideways scrolling;
the USD column returns above 520px */
@media (max-width: 520px) {
.cat-t :is(th, td):nth-child(3) { display: none; }
.cat-t :is(th, td) { padding-left: 5px !important; padding-right: 5px !important; font-size: 12.5px !important; }
.cat-t :is(th, td):first-child { padding-left: 10px !important; }
.cat-t :is(th, td):last-child { padding-right: 10px !important; }
.cat-t thead th { white-space: normal; }
}
/* ===== Summary cards, tabs and side-by-side tiers (owner, 2026-10-20) =====
Layout influenced by other explorers, styled as Piro Blockchain Analyzer: the home page's
right column is a stack of summary cards (large figure, caption, a small
inner panel of rows); the wallet page and Daily Top Payments have a row of
them across the top; the wallet's activity has tabs with an underline, not
a pill. New settable colours: --panel-bg (the inner panel), --panel-line
(rows inside it), --tab-line (the active tab's underline). */
:root { --panel-bg: var(--surface-2); --panel-line: var(--row-line); --tab-line: var(--accent); }
.hs-big { font: 700 24px/1.2 var(--sans); color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hs-bigsub { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 3px; font-size: 12.5px; color: var(--text-dim); }
.hs-panel { margin-top: 12px; padding: 2px 12px; background: var(--panel-bg);
border: 1px solid var(--card-border); border-radius: var(--radius); }
.hs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
padding: 7px 0; border-top: 1px solid var(--panel-line); font-size: 13px; }
.hs-row:first-child { border-top: 0; }
.hs-k { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--text-dim); }
.hs-v { min-width: 0; text-align: right; font-weight: 600; color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hs-v.up { color: var(--status-ok); }
.hs-v.down { color: var(--status-bad); }
.hs-vsub { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-dim); }
.hs-foot { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
.hs-empty { margin: 0; font-size: 13.5px; color: var(--text-dim); }
.hs-card .card-body, #home-metrics, .stat-card .card-body { padding: 14px 18px 16px; }
.hs-panel .info-i { height: 16px; width: 16px; }
/* the owner's Pi Supply colour controls (2026-10-14) carry over to the card */
:root:not([data-theme="light"]) #home-metrics .hs-k { color: var(--supply-label); }
:root:not([data-theme="light"]) #home-metrics :is(.hs-v, .hs-big) { color: var(--supply-value); }
:root:not([data-theme="light"]) #home-metrics .hs-row { border-top-color: var(--supply-line); }
:root:not([data-theme="light"]) #home-metrics :is(.hs-vsub, .hs-foot, .hs-bigsub) { color: var(--supply-note); }
/* a row of summary cards across the top of a page */
.sum-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.sum-cards > .card { margin: 0; }
.stat-time .hs-big { font-size: 19px; }
@media (max-width: 900px) { .sum-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
/* wallet activity tabs */
.acct-tabs-head { padding-top: 0 !important; padding-bottom: 0 !important; }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.tabs .tab { padding: 14px 12px 11px; background: none; border: 0; border-bottom: 3px solid transparent;
color: var(--text-dim); font: 700 13px var(--sans); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.tabs .tab:hover { color: var(--text); }
.tabs .tab.on { color: var(--text); border-bottom-color: var(--tab-line); }
.tabs .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.acct-tabs-head .addr-mini { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
@media (max-width: 640px) {
.tabs .tab { padding: 11px 8px 8px; font-size: 11.5px; letter-spacing: .03em; }
.acct-tabs-head .addr-mini { display: none; }
}
/* operations tables: one sentence per operation */
.ops-s .op-verb { font-weight: 700; }
.usd { color: var(--text-dim); font-weight: 400; }
.ops-s td.op-amt, .ops-s td.ago, .ops-s td.ao-acct, .fx-t td.ago { white-space: nowrap; }
/* phones: the sentence already states the amount and the verb links on, so
the Amount and Tx columns step aside and the source keeps no label chip */
@media (max-width: 640px) {
.ops-s :is(th, td):nth-child(3), .ops-s :is(th, td):nth-child(4) { display: none; }
.ops-s td.ao-acct .wl-tag { display: none; }
}
/* Top 500: Distribution Categories left, Pi Holder Distribution right;
stacked when the main column is narrower than ~980px */
.rich-top { container-type: inline-size; }
.rich-dist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.rich-dist > .card { margin: 0; }
@container (max-width: 980px) { .rich-dist { grid-template-columns: minmax(0, 1fr); } }
/* side by side, the categories table gets a little more room and tighter cells so
all five columns fit without a sideways scroll */
@container (min-width: 981px) {
.rich-dist { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.rich-dist .cat-t :is(th, td) { padding-left: 9px; padding-right: 9px; }
.rich-dist .cat-t :is(th, td):first-child { padding-left: 16px; }
.rich-dist .cat-t :is(th, td):last-child { padding-right: 16px; }
.rich-dist .cat-t td:is(:nth-child(2), :nth-child(3)) { white-space: normal; }
}
/* sections reached from the Statistics menu clear the sticky header */
.cb-id { white-space: nowrap; }
/* labelled counterparties in the wallet page's side tables: a shorter chip so
the four columns fit the 540px column without a sideways scroll */
.acct-side .wl-tag { max-width: 120px; }
#rich-dist, #rich-exch-card, #unlocks-30d, #unlock-schedule, #st-migration, #st-blocks { scroll-margin-top: 90px; }
/* Exchange Wallets table (owner, 2026-10-23): one row per wallet, in/out
over the last 24 hours as green / red pills, net flow signed and coloured. */
.ex-tbl td { white-space: nowrap; }
.ex-tbl th { white-space: normal; line-height: 1.25; }
.ex-tbl td .wl { flex-wrap: nowrap; }
#rich-exch-card { min-width: 0; max-width: 100%; }
.ex-tbl td { vertical-align: middle; }
.ex-tbl .ex-name strong { font-size: 13.5px; }
.ex-tbl .ex-name .rs-flag { font-size: 9.5px; margin-top: 2px; }
.ex-tbl tfoot td { border-top: 2px solid var(--line); font-weight: 700; }
.ex-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 600 12.5px var(--mono); white-space: nowrap; }
.ex-pill.in { color: var(--status-ok); background: var(--status-ok-soft); }
.ex-pill.out { color: var(--status-bad); background: var(--status-bad-soft); }
.ex-net { font: 700 13px var(--mono); white-space: nowrap; }
.ex-net.up { color: var(--status-ok); }
.ex-net.down { color: var(--status-bad); }
#rich-exch-asof { margin-left: auto; font-size: 12px; color: var(--text-dim); }
/* Nodes page: solid bars, red on the left (country, city), green on the right
(network, version) (owner, 2026-10-24) */
:root { --node-bar-left: #ff2e2e; --node-bar-right: #2bff00; }
.n-col { display: grid; gap: 18px; align-content: start; min-width: 0; }
.n-left .bar-fill { background: var(--node-bar-left) !important; }
.n-right .bar-fill { background: var(--node-bar-right) !important; }
/* Footer: link columns sit closer together; contact line in yellow (owner, 2026-10-25) */
.foot-grid { grid-template-columns: minmax(0, 2.2fr) repeat(3, max-content) !important; column-gap: 72px !important; justify-content: start; }
#foot-contact, #foot-contact a { color: #fff700 !important; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr !important; column-gap: 26px !important; } }
@media (min-width: 901px) { .foot-grid { padding-right: max(var(--gutter, 24px), 8vw) !important; } }
/* Copyright text lines up with the Data column above (owner, 2026-10-25):
the bottom bar uses the same columns as the link grid. */
@media (min-width: 901px) {
.foot-bar { display: grid !important; grid-template-columns: minmax(0, 2.2fr) repeat(3, max-content) !important;
column-gap: 72px !important; justify-content: start; align-items: start;
max-width: var(--wrap, 1480px); padding-left: var(--gutter, 24px) !important; padding-right: max(var(--gutter, 24px), 8vw) !important; }
.foot-copy { grid-column: 2 / -1; margin-left: 0 !important; max-width: none; }
}
/* Nodes page: each bar its own colour, cycling through ten (owner, 2026-10-25);
replaces the solid red / green of 2026-10-24. */
:root { --nbar-1: #ff2e2e; --nbar-2: #ff8a1f; --nbar-3: #ffd60a; --nbar-4: #2bff00; --nbar-5: #00e5c0; --nbar-6: #1e90ff; --nbar-7: #7a5cff; --nbar-8: #d400ff; --nbar-9: #ff4fa3; --nbar-10: #8bd450; }
.n-col .bar-row:nth-child(10n+1) .bar-fill { background: var(--nbar-1) !important; }
.n-col .bar-row:nth-child(10n+2) .bar-fill { background: var(--nbar-2) !important; }
.n-col .bar-row:nth-child(10n+3) .bar-fill { background: var(--nbar-3) !important; }
.n-col .bar-row:nth-child(10n+4) .bar-fill { background: var(--nbar-4) !important; }
.n-col .bar-row:nth-child(10n+5) .bar-fill { background: var(--nbar-5) !important; }
.n-col .bar-row:nth-child(10n+6) .bar-fill { background: var(--nbar-6) !important; }
.n-col .bar-row:nth-child(10n+7) .bar-fill { background: var(--nbar-7) !important; }
.n-col .bar-row:nth-child(10n+8) .bar-fill { background: var(--nbar-8) !important; }
.n-col .bar-row:nth-child(10n+9) .bar-fill { background: var(--nbar-9) !important; }
.n-col .bar-row:nth-child(10n+10) .bar-fill { background: var(--nbar-10) !important; }
/* Nodes page bars in pastels (owner, 2026-10-25) */
:root { --nbar-1: #ff9aa2; --nbar-2: #ffb880; --nbar-3: #ffe08a; --nbar-4: #b5ead7; --nbar-5: #9ee0e6; --nbar-6: #a0c4ff; --nbar-7: #bdb2ff; --nbar-8: #e2b6ff; --nbar-9: #ffc6e5; --nbar-10: #caffbf; }
/* Pi Supply rows: same thin grey separator as the explorer tables (owner, 2026-10-25) */
html body #home-metrics .srow, html body #home-metrics .srow:not(:first-child), html body .home-side .srow + .srow { border-top: 1px solid var(--row-line) !important; }
html body #home-metrics .srow:first-child { border-top: 0 !important; }
html body #home-metrics .hs-row, html body .home-side .hs-row { border-top-color: var(--row-line) !important; border-top-width: 1px !important; }
/* Fee-surge bar sized to its text, not the full width (owner, 2026-10-26) */
.band-note .surge-banner { display: inline-flex !important; width: auto !important; max-width: min(100%, 980px); }
/* Mapping page (owner, 2026-10-26): the home page's grid and right-column
cards. Main column: a small Example card, then the Map card (#mc-out is its
body) and the result cards (#mc-more). Right column: the question card with
the explainer and the passphrase warning, then the search card, whose inner
panel holds "Enter The Address" and "Find Linked Wallets" separated by a
thin line. Under 1100px: Info, Search, Map, Example. */
.mc-side { display: flex; flex-direction: column; }
.mc-info-card .mc-disclaimer { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--text); }
.mc-info-card .mc-warn { margin: 0; max-width: none; font-size: 13.5px; }
.mc-panel { margin-top: 0; padding: 0 14px; }
.mc-sec { padding: 12px 0 14px; }
.mc-sec + .mc-sec { border-top: 1px solid var(--panel-line); }
html body .mc-panel .mc-sec + .mc-sec { border-top: 1px solid var(--row-line) !important; }
.mc-sec-t { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 12px; color: var(--text); margin-bottom: 9px; }
.mc-sec-sub { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.mc-search-card .mc-search { max-width: none; margin: 0; }
.mc-search-card .mc-search input { height: 46px; font-size: 13px; padding-left: 14px; padding-right: 52px; }
.mc-search-card .mc-search .go { top: 5px; right: 5px; width: 36px; height: 36px; }
.mc-search-card .mc-msg { max-width: none; margin: 10px 0 0; }
/* Linked Wallets box: a numbered list of address links in transaction order */
.mc-linked-card .card-body { padding: 6px 14px 10px; }
ol.mc-linked { margin: 0; padding: 0 0 0 2.6em; }
ol.mc-linked li { padding: 6px 0; color: var(--text-dim); font-size: 12.5px; }
ol.mc-linked li::marker { font-variant-numeric: tabular-nums; }
ol.mc-linked .mc-lw-a { text-decoration: none; }
ol.mc-linked .mc-lw-a:hover, ol.mc-linked .mc-lw-a:focus-visible { text-decoration: underline; }
.mc-linked-card .mc-sec-sub { margin: 6px 0 0; }
.mc-lw-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; font-size: 12px; color: var(--text-dim); }
.mc-lw-amt { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.mc-lw-amt.in { color: var(--pay-in, var(--good)); }
.mc-lw-amt.out { color: var(--pay-out, var(--bad)); }
.mc-lw-blk a { font-variant-numeric: tabular-nums; }
.mc-search-card .mc-sec-sub { margin-top: 10px; }
/* the result cards under the Map card: one column, the summary tiles in a row on top */
#mc-more .fd-layout { grid-template-columns: minmax(0, 1fr); }
#mc-more .fd-side { position: static; order: -1; }
#mc-more .mc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { #mc-more .mc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { #mc-more .mc-tiles { grid-template-columns: minmax(0, 1fr); } }
#mc-more .mc-tiles .foot a { overflow-wrap: anywhere; }
/* Summary numbers in green so they stand out (owner, 2026-11-02) */
#mc-more .mc-tiles .tile .value { color: var(--pay-in, var(--good)); }
#mc-more .mc-tiles .tile .value #mc-t-out, .mc-hsum-v.out { color: var(--pay-out, var(--bad)); }
#mc-more .mc-tiles .mc-cr-when, #mc-more .mc-tiles .mc-cr-by { display: block; }
#mc-more .mc-tiles .mc-cr-by { margin-top: 2px; }
/* Wallet History, block-explorer layout (owner, 2026-11-02) */
table.mc-hist td { vertical-align: middle; padding-top: 12px; padding-bottom: 12px; }
table.mc-hist td.mc-hist-what { white-space: normal; line-height: 1.6; }
table.mc-hist td.mc-hist-what .addr, table.mc-hist td.mc-hist-what a { display: inline; }
.mc-hist-more { display: flex; justify-content: center; padding: 12px 14px 16px; }
.mc-hist-more:empty { display: none; }
/* Summary strip across the top of Wallet History */
.mc-hsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--row-line); }
.mc-hsum-c { padding: 14px 18px; min-width: 0; }
.mc-hsum-c + .mc-hsum-c { border-left: 1px solid var(--row-line); }
.mc-hsum-k { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.mc-hsum-v { font-size: 20px; font-weight: 700; color: var(--pay-in, var(--good)); margin-top: 4px; overflow-wrap: anywhere; }
.mc-hsum-s { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
@media (max-width: 700px) { .mc-hsum { grid-template-columns: minmax(0, 1fr); }
.mc-hsum-c + .mc-hsum-c { border-left: 0; border-top: 1px solid var(--row-line); } }
.mc-linked li + li { border-top: 1px solid var(--row-line); }
.mc-lw { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 10px;
padding: 7px 2px; background: none; border: 0; border-radius: 0; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.mc-lw-a { flex: 0 0 auto; color: var(--addr, var(--accent)); font-size: 13.5px; }
.mc-lw-r { min-width: 0; font-size: 12px; color: var(--text-dim); text-align: right; }
.mc-lw:hover .mc-lw-a, .mc-lw.on .mc-lw-a { text-decoration: underline; }
.mc-lw.on .mc-lw-r { color: var(--text); }
.mc-lw:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mc-ex-card { max-width: 520px; }
.mc-ex-card .card-body { padding: 12px 14px; }
.mc-ex-card .mc-map-sum { font-size: 12.5px; margin-bottom: 8px; }
.mc-ex-card .mm-svg { height: 300px; }
.mc-ex-card .mm-legend { font-size: 11.5px; gap: 4px 12px; }
@media (max-width: 1100px) {
.mc-grid { display: flex; flex-direction: column; gap: 18px; }
.mc-grid > .mc-main, .mc-grid > .mc-side { display: contents; }
.mc-grid .card { margin: 0; }
.mc-info-card { order: 1; } .mc-search-card { order: 2; } .mc-linked-card { order: 2; } #mc-map-shell { order: 3; } #mc-more { order: 4; } .mc-ex-card { order: 5; max-width: none; }
}
/* Mapping: three cards across the top, then the map full width (owner, 2026-10-26) */
.mc-top3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; margin-bottom: 18px; }
.mc-top3 > .card { margin: 0 !important; max-width: none !important; height: 100%; }
.mc-top3 .mc-ex-card, .mc-top3 > section:last-child { max-width: none !important; }
.mc-top3 .mm-host { height: 240px !important; }
.mc-map-card { margin-top: 0; }
@media (max-width: 1100px) { .mc-top3 { grid-template-columns: minmax(0, 1fr); } }
.mc-top3 .mc-ex-card .mm-svg { height: 240px; }
.mc-top3:has(> .mc-ex-card[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Mapping side column: Example then Search (owner, 2026-10-26) */
.mc-side .mc-ex-card { max-width: none !important; margin: 0 0 18px !important; }
.mc-side .mc-ex-card .mm-svg, .mc-side .mm-host { height: 260px !important; }
.mc-side .mc-warn { margin: 12px 0 0 !important; font-size: 13px; }
.mc-store { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
@media (max-width: 1100px) { .mc-ex-card { order: 5; } .mc-search-card { order: 1; } .mc-linked-card { order: 1; } #mc-map-shell { order: 2; } #mc-more { order: 3; } }
#mc-out:empty { min-height: 560px; }
@media (min-width: 1101px) { .home-grid.mc-grid { grid-template-columns: minmax(0, 3fr) minmax(320px, 1fr) !important; } }
/* idle animation in the empty Map box (owner, 2026-10-26) */
.mc-idle { position: relative; height: 560px; overflow: hidden; border-radius: 6px;
background: radial-gradient(ellipse at center, rgba(122,92,255,.14), rgba(0,0,0,0) 65%); }
.mc-idle-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 700px) { .mc-idle { height: 340px; } }
/* Map: wallets colour-coded by their relation; lines neutral (owner, 2026-10-26).
Colours come from the existing --mm-* variables. */
.mm-node.mm-r-creator circle { fill: var(--mm-creator); stroke: #ffffff; stroke-width: 1.5; }
.mm-dot.mm-r-creator { background: var(--mm-creator); }
.mm-node.mm-r-lockup circle { fill: var(--mm-lockup); stroke: #ffffff; stroke-width: 1.5; }
.mm-dot.mm-r-lockup { background: var(--mm-lockup); }
.mm-node.mm-r-claimed circle { fill: var(--mm-claimed); stroke: #ffffff; stroke-width: 1.5; }
.mm-dot.mm-r-claimed { background: var(--mm-claimed); }
.mm-node.mm-r-sent circle { fill: var(--mm-sent); stroke: #ffffff; stroke-width: 1.5; }
.mm-dot.mm-r-sent { background: var(--mm-sent); }
.mm-node.mm-r-received circle { fill: var(--mm-received); stroke: #ffffff; stroke-width: 1.5; }
.mm-dot.mm-r-received { background: var(--mm-received); }
.mm-node.mm-r-created circle { fill: var(--mm-created); stroke: #ffffff; stroke-width: 1.5; }
.mm-dot.mm-r-created { background: var(--mm-created); }
.mm-node.mm-r-merge circle { fill: var(--mm-merge); stroke: #ffffff; stroke-width: 1.5; }
.mm-dot.mm-r-merge { background: var(--mm-merge); }
.mm-node.mm-r-linked circle { fill: var(--mm-linked); stroke: #ffffff; stroke-width: 1.5; }
.mm-dot.mm-r-linked { background: var(--mm-linked); }
.mm-node.mm-r-hop circle { fill: var(--mm-hop); stroke: #ffffff; stroke-width: 1.5; }
.mm-dot.mm-r-hop { background: var(--mm-hop); }
.mm-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #fff; flex: 0 0 auto; }
.mm-e { stroke: rgba(200,200,220,.38) !important; }
.mm-node.mm-root circle { stroke: var(--accent); stroke-width: 3; }
:root:not([data-theme="light"]) { --mm-linked: #d1d5db; --mm-hop: #a3e635; }
/* Example map: no inner frame; connecting lines bright (owner, 2026-10-27) */
.mc-ex-card .mm-host { border: 0 !important; background: transparent !important; box-shadow: none !important; }
/* Lines a colour no wallet dot uses, so the dots stand out against them
(owner, 2026-11-02: cyan lines blended into the blue dots). */
:root { --mm-line: #f1f5f9; }
:root[data-theme="light"] { --mm-line: #1f2937; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --mm-line: #1f2937; } }
.mm-e { stroke: var(--mm-line) !important; opacity: .7 !important; }
.mc-ex-card .mm-svg { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; }
/* Verb colours: the 2026-10-27 green/yellow trial ended 2026-11-12 (owner);
verbs are plain text colour again (white on the dark theme), still bold. */
:root { --verb-pay: var(--text); --verb-bal: var(--text); }
.op-verb.v-pay, a.op-verb.v-pay { color: var(--verb-pay) !important; font-weight: 700; }
.op-verb.v-bal, a.op-verb.v-bal { color: var(--verb-bal) !important; font-weight: 700; }
/* Latest Transactions runs down to the bottom of the right-hand column
(owner, 2026-10-27): the card stretches and its rows share the extra
height, so there is no empty gap above the footer. Wide screens only. */
@media (min-width: 1101px) {
.home-grid { align-items: stretch; }
.home-main { display: flex; flex-direction: column; }
.home-main > .home-feed { flex: 1; display: flex; flex-direction: column; margin-bottom: 0; }
#home-txs { flex: 1; display: flex; flex-direction: column; }
#home-txs > * { flex: 1; }
#home-txs table { height: 100%; }
}
/* ===== Pre-launch layout fixes (2026-11-02) ===== */
/* C: the main column of the two-column pages (.fd-main) and the two- and
three-column card rows inside it are grids whose implicit/1fr tracks grew
to their widest content and pushed cards under the right-hand summary
column. Tracks may now shrink; wide tables wrap their headers or scroll
inside their own card instead. */
.fd-main { grid-template-columns: minmax(0, 1fr); }
.fd-main > * { min-width: 0; }
.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.cols > *, .cols-3 > *, .cols-wide > * { min-width: 0; }
/* H: on desktop the table wrappers clip (for the sticky column titles), so a
table a few pixels too wide lost its last column. Column titles and the
relative-time cells may wrap when a table is tight; when it has room they
stay on one line, as before. */
@media (min-width: 900px) {
thead th { white-space: normal; }
td.ago, .aops-t td.ago, .ops-s td.ago, .fx-t td.ago { white-space: normal; }
.acct-side tbody td:last-child:not(.num) { white-space: normal; }
}
/* a full, unshortened address in the home feed breaks instead of widening it */
#home-txs table td:first-child { white-space: normal; }
#home-txs table td:first-child a.mono { word-break: break-all; }
/* D: Known Wallets at 375px - the category select in the card head set the
page width. The tools may shrink and the select may not exceed them. */
.card-head .head-tools { min-width: 0; max-width: 100%; }
.card-head .head-tools > * { min-width: 0; max-width: 100%; }
.card-head select.ctl, .card-head input.ctl { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
/* F: Mapping at 375px - under 1100px .mc-main is display:contents, so the map
card lost its min-width:0 parent; and the inline-flex wallet chip in the
result note would not wrap. */
.mc-grid > *, .mc-map-card, #mc-map-shell, #mc-more { min-width: 0; max-width: 100%; }
#mc-out .note .wl { display: inline; white-space: normal; }
#mc-out .note { overflow-wrap: anywhere; }
/* G: footer bar - the copyright text spanned max-content tracks, so between
about 900 and 1250px the page was 1215px wide. Tracks may now shrink. */
@media (min-width: 901px) {
.foot-bar { grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, max-content)) !important; }
}
.foot-copy { min-width: 0; overflow-wrap: anywhere; }
/* J: publisher name beside the copyright (filled from /api/site by app.js) */
.foot-publisher { color: var(--text-dim); white-space: nowrap; }
/* H (cont.): tables that were still a few columns too wide for their card on
desktop. Long unbroken mono strings (node addresses, stellar-core version
strings) may break; the category name wraps; the wallet page's operation
chips are a little narrower; the short side tables on the wallet page and
the nine-column tier history scroll sideways inside their card. */
@media (min-width: 900px) {
td.mono { overflow-wrap: anywhere; }
td > a.mono { white-space: nowrap; }
.rich-cats-card tbody td:first-child { white-space: normal; }
.acct-act td .wl-tag { max-width: 170px; }
.acct-act td.op-say { min-width: 200px; }
.acct-side .tscroll { overflow-x: auto; }
.tscroll:has(> table > thead > tr > th:nth-child(9)) { overflow-x: auto; }
.tscroll:has(> table > thead > tr > th:nth-child(9)) th,
.tscroll:has(> table > thead > tr > th:nth-child(9)) td { padding-left: 9px; padding-right: 9px; }
.tscroll:has(> table > thead > tr > th:nth-child(9)) th { letter-spacing: .03em; }
}
/* H (cont.): wallet page side tables - smaller amounts and tighter cells so
the TOTAL column fits the 540px side column instead of scrolling. */
.acct-side thead th { letter-spacing: .03em; }
.acct-side thead th, .acct-side tbody td { padding-left: 8px; padding-right: 8px; }
/* H (cont.): home feed on phones - the TIME column was pushed off the right
edge by the label chip and the activity column's minimum width. */
@media (max-width: 520px) {
#home-txs tbody td, #home-txs thead th { padding-left: 6px; padding-right: 6px; }
#home-txs td .wl-tag { max-width: 118px; }
#home-txs td.op-say { min-width: 0; }
#home-txs td .mono, #home-txs td a.mono, #home-txs .wl > a.mono { letter-spacing: 0; }
#home-txs thead th { letter-spacing: .03em; }
}
/* wallet page operations table between 1101 and 1439px, where the main column
is narrowest beside the 540px side column */
@media (min-width: 1101px) and (max-width: 1439px) {
.acct-act thead th, .acct-act tbody td { padding-left: 9px; padding-right: 9px; }
.acct-act td .wl-tag { max-width: 150px; }
}
/* F (cont.): the label chip inside the Mapping result note wraps inside the note */
#mc-out .note .wl-tag { white-space: normal; max-width: 100%; display: inline; }
/* Network Wallets latest-activity table: text cells may wrap when the main
column is narrow (amounts stay on one line) */
@media (min-width: 900px) { #fd-latest td:not(.num) { white-space: normal; } }
/* seven-plus-column tables in the narrowed main column get tighter cells */
@media (min-width: 900px) {
.fd-main .tscroll:has(> table > thead > tr > th:nth-child(7)) th,
.fd-main .tscroll:has(> table > thead > tr > th:nth-child(7)) td { padding-left: 10px; padding-right: 10px; }
}
/* Mapping (owner, 2026-11-02): Paid Out and Report This Wallet under Linked
Wallets in the right-hand column; Paid Out there shows just the payment and
its time (the time links to the transaction). */
#mc-side-more > .card { margin: 18px 0 0 !important; }
#mc-side-more #mc-paid table.mc-hist :is(th, td):is(:nth-child(1), :nth-child(3), :nth-child(4)) { display: none; }
#mc-side-more #mc-paid td.nowrap { text-align: right; }
@media (max-width: 1100px) {
#mc-side-more { order: 4; }
#mc-side-more > .card:first-child { margin-top: 0 !important; }
}
/* Mapping text a couple of sizes larger (owner, 2026-11-02). The map drawing
itself is left alone so its pointer handling is unchanged. */
#mc-more, .mc-side > :not(.mc-ex-card), .mc-map-body > :not(.mm-host), #mc-out > :not(.mc-map-body) { zoom: 1.12; }
/* No "+" expand buttons on the map (owner, 2026-11-02): clicking a wallet
still shows its connections. */
.mm-plus { display: none !important; }
/* Exchange Balances: each wallet's name over its address (owner, 2026-11-02). */
.hs-exw { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--text); }
.hs-exw:hover { text-decoration: underline; }
.hs-exw-a { font-size: 11.5px; margin-top: 1px; }
/* Recipient wallets light blue, site-wide (owner, 2026-11-02). */
:root { --rcpt: #7dd3fc; }
:root[data-theme="light"] { --rcpt: #0369a1; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --rcpt: #0369a1; } }
.rcpt, .rcpt a, .rcpt a.mono, .rcpt .addr-txt, .wl.rcpt > a.mono, .rcpt .wl > a.mono { color: var(--rcpt) !important; }
/* Linked Wallets: the wallet's label before its address (owner, 2026-11-02). */
.mc-lw-name { font-weight: 700; color: var(--text); margin-right: 4px; }
/* Block numbers bright yellow, site-wide (owner, 2026-11-03). A block's hash
also links to it but is class mono, and stays as it was. */
:root { --blk: #fff700; }
:root[data-theme="light"] { --blk: #a16207; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --blk: #a16207; } }
a[href^="/block/"]:not(.mono), .blk-n { color: var(--blk) !important; }
/* Search bar (owner, 2026-11-12): the black of the card bodies, but
see-through so the blue band shows faintly behind it. */
.band-lower .search input { background: rgba(0, 0, 0, .55); }
/* Pi Supply box with dollar values (owner, 2026-11-14): the dollar figure in
parentheses beside Total Supply and under each row; the column is a little
wider so the longer rows still sit on two lines. */
.hs-bigusd { font-size: 15px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
:root:not([data-theme="light"]) #home-metrics .hs-bigusd { color: var(--supply-note); }
#home-metrics .hs-vsub { white-space: nowrap; }
.home-grid { grid-template-columns: minmax(0, 1fr) 470px; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { #home-metrics .hs-vsub { white-space: normal; } }
/* One pagination bar for every paged list (owner, 2026-11-14), Bootstrap
style: [ Previous | 1 | 2 | 3 | 4 | 5 | … | 500 | Next ]. One joined group,
1px dividers, rounded only at the two ends. Drawn by pagerHtml() in app.js.
The current page is filled: the accent in the light theme (white ink); in
the dark theme the accent is white (owner palette, 2026-10-18), which white
text cannot sit on, so it takes the purple of the card title bars instead. */
:root { --pg-on-bg: var(--card-head, #7d00fa); --pg-on-ink: #ffffff; --pg-ink: var(--accent);
--pg-line: var(--card-border, var(--line)); --pg-hover: var(--surface-3); }
:root[data-theme="light"] { --pg-on-bg: var(--accent); --pg-on-ink: var(--accent-ink); }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) { --pg-on-bg: var(--accent); --pg-on-ink: var(--accent-ink); }
}
.pager { flex-wrap: wrap; row-gap: 8px; }
.pgn { display: inline-flex; flex-wrap: wrap; max-width: 100%; }
.pgn:empty { display: none; }
.pgn .pg-b {
position: relative; margin: 0 0 0 -1px; min-width: 38px; padding: 7px 12px;
font: 600 13px/1.25 var(--sans); text-align: center; white-space: nowrap;
background: var(--surface); color: var(--pg-ink); border: 1px solid var(--pg-line);
border-radius: 0; cursor: pointer; box-shadow: none;
}
.pgn .pg-b:first-child { margin-left: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.pgn .pg-b:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pgn .pg-b:hover:not(:disabled):not(.on):not(.pg-gap) { background: var(--pg-hover); z-index: 1; }
.pgn .pg-b:focus-visible { outline: 2px solid var(--pg-ink); outline-offset: -3px; z-index: 2; }
.pgn .pg-b.on { background: var(--pg-on-bg); border-color: var(--pg-on-bg); color: var(--pg-on-ink); cursor: default; z-index: 1; }
.pgn .pg-b:disabled { color: var(--text-faint); opacity: .5; cursor: not-allowed; }
.pgn .pg-gap { color: var(--text-dim); cursor: default; min-width: 32px; padding-left: 6px; padding-right: 6px; }
.pgn .pg-a { display: none; }
@media (max-width: 600px) {
.pager { justify-content: center; padding-left: 10px; padding-right: 10px; }
.pager .count { margin-left: 0; flex-basis: 100%; text-align: center; }
.pgn .pg-b { min-width: 32px; padding: 6px 8px; font-size: 12.5px; }
.pgn .pg-gap { min-width: 22px; padding-left: 3px; padding-right: 3px; }
}
@media (max-width: 420px) {
.pgn .pg-t { display: none; }
.pgn .pg-a { display: inline; font-size: 15px; line-height: 1; }
.pgn .pg-b { min-width: 28px; padding: 6px 6px; }
}
/* Dollar values in the operation sentences (owner, 2026-11-14): after each
Pi amount, dimmer and smaller. At today's price, not the price at the time. */
.op-say .usd, .mc-hist-what .usd { font-size: .86em; color: var(--text-faint); opacity: .85; white-space: nowrap; }
/* Founder Wallets page (owner, 2026-11-14): one section per funding block,
its heading on a quiet band between the tables. */
.fw-blk { padding: 14px 16px 8px; border-top: 1px solid var(--line-soft); }
.fw-blk:first-child { border-top: 0; }
.fw-blk h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.fw-t td { vertical-align: top; }
.fw-n { color: var(--text-dim); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.fw-det { margin-top: 3px; font-size: 11.5px; color: var(--text-dim); }
.fw-det a.mono { font-size: 11.5px; }
.fw-card .usd { font-size: .86em; color: var(--text-faint); opacity: .85; white-space: nowrap; }
.fw-g { white-space: nowrap; }
.fw-t td:nth-child(2) { white-space: nowrap; }
/* Exchange logos (owner, 2026-11-14): the exchange's own icon before an
exchange wallet's name, linking to its PI spot market (see exLogo). */
.ex-logo { display: inline-flex; vertical-align: middle; margin-right: 5px; flex: none; line-height: 0; }
.ex-logo img { width: 18px; height: 18px; border-radius: 5px; display: block;
box-shadow: 0 0 0 1px rgba(150, 150, 150, .45); } /* keeps OKX's black tile visible on black */
a.ex-logo:hover img, a.ex-logo:focus-visible img { box-shadow: 0 0 0 2px var(--accent); }
.wl .ex-logo { margin-left: 6px; margin-right: 3px; }
.wl .ex-logo img { width: 16px; height: 16px; border-radius: 4px; }
.card-head h2 .ex-logo img { width: 18px; height: 18px; }
.hs-exrow { display: inline-flex; align-items: flex-start; gap: 0; }
.hs-exrow .ex-logo { margin-top: 1px; }
.ex-name .ex-logo { margin-right: 6px; }
/* User Wallets page and the Locked And Claimable Pi sidebar (owner, 2026-11-14). */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.uw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.uw-grid > .card { margin: 0 0 18px; }
@media (max-width: 1000px) { .uw-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.uw-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 14px; }
@media (max-width: 700px) { .uw-split { grid-template-columns: minmax(0, 1fr); } }
.uw-kv { display: grid; }
.uw-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0 2px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.uw-row:first-child { border-top: 0; }
.uw-l { color: var(--text-dim); }
.uw-v { font-weight: 650; text-align: right; white-space: nowrap; }
.uw-sub { font-size: 11.5px; color: var(--text-faint); text-align: right; padding-bottom: 4px; }
.uw-cap { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }
.uw-box { padding: 12px 14px; }
.uw-box h3 { margin: 0 0 6px; font-size: 13px; }
.uw-box .bars { font-size: 12px; }
.uw-big { font-size: 22px; font-weight: 750; }
.uw-box .uw-sub { text-align: left; }
.uw-link { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--line);
border-radius: var(--radius); background: var(--surface); text-decoration: none; }
.uw-link span { font-size: 12px; color: var(--text-dim); }
.uw-h4 { margin: 14px 0 6px; font-size: 13px; }
.cb-side { position: static; align-self: start; }
.cb-side .tile .value { font-size: 20px; }
/* Column chart (owner, 2026-11-14): one flat colour from the theme. */
.cc-wrap { position: relative; }
.cc-svg { display: block; width: 100%; height: auto; max-height: 300px; overflow: visible; }
.cc-grid { stroke: var(--line-soft); stroke-width: 1; }
.cc-axis { stroke: var(--line); stroke-width: 1; }
.cc-yl, .cc-xl, .cc-top { fill: var(--text-faint); font-size: 11px; font-family: var(--sans); }
.cc-top { fill: var(--text); font-weight: 700; }
.cc-bar { fill: var(--card-head, #7d00fa); }
:root[data-theme="light"] .cc-bar { fill: var(--accent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cc-bar { fill: var(--accent); } }
.cc-col.big .cc-bar { opacity: 1; }
.cc-col .cc-bar { opacity: .82; }
.cc-hit { fill: transparent; }
.cc-col:hover .cc-bar, .cc-col:focus .cc-bar { opacity: 1; stroke: var(--text); stroke-width: 1; }
.cc-col:focus { outline: none; }
.cc-tip { position: absolute; z-index: 5; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap;
background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: 5px 8px; font-size: 12px; box-shadow: var(--shadow-sm); }
.cc-tip.flip { transform: translate(-100%, -100%); }
.cc-tip.flop { transform: translate(0, -100%); }
.cc-total { margin: 8px 0 0; font-size: 12.5px; color: var(--text-dim); }
@media (max-width: 600px) { .cc-xl.cc-odd { display: none; } .cc-yl, .cc-xl, .cc-top { font-size: 21px; } }
/* Wallet page tables (owner, 2026-11-14): the dollar value on its own line
under the Pi amount, dimmer and smaller; each line stays on one line. */
.nw { white-space: nowrap; }
.usd-line { font-size: 11px; color: var(--text-faint); white-space: nowrap; margin-top: 1px; font-weight: 400; }
/* Home right-column cards: labels and values one size (owner, 2026-11-14). */
:is(#home-exch, #home-overview) :is(.hs-k, .hs-v, .ex-pill, .ex-net) { font-size: 13px; }
/* Card titles in Montserrat, all caps (owner, 2026-11-14). Self-hosted
(static/fonts, OFL 1.1) so no request goes to Google. Only titles use it. */
@font-face {
font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
src: url("/fonts/montserrat-latin-700.woff2") format("woff2");
}
.card-head h2, .sbox > h3, .tile .label, .stat-card .card-head h2 {
font-family: "Montserrat", var(--sans); font-weight: 700; text-transform: uppercase;
}
/* One type scale for every data table, site-wide (owner, 2026-11-14: "make
the font sizes uniform site-wide"). Body cells: words in sans at
--fs-cell, addresses / hashes / amounts in mono at --fs-cell-mono (mono
reads larger at the same pixel size, so it is half a pixel smaller);
deliberately small text (dollar lines, badges and label pills, sub-address
and "opened by" notes) at one --fs-small; column heads at --fs-th. The
key/value detail panels (table.kv on block, transaction and wallet pages)
keep their own larger sizes. Replaces the per-table sizes removed above
(table 15.5px, td.num 15px, #home-txs 15.5/15px, the wallet side tables'
13.5px, the phone home-feed sizes). !important because several earlier
blocks size individual tables. Card titles and big figures are not table
cells and are unaffected. */
:root { --fs-cell: 14px; --fs-cell-mono: 13.5px; --fs-small: 12px; --fs-th: 12.5px; }
@media (max-width: 520px) { :root { --fs-cell: 13px; --fs-cell-mono: 12.5px; --fs-small: 11.5px; } }
thead th { font-size: var(--fs-th) !important; }
table:not(.kv) tbody td, table:not(.kv) tbody td *:not(svg, svg *, .info-i, .cp-ic) { font-size: var(--fs-cell) !important; }
table:not(.kv) tbody td.num { font-family: var(--mono) !important; }
table:not(.kv) tbody :is(td.num, td.num *, td.rank, td.mono, .mono, .mono *, .cat-pct, .ex-net, .fw-n, code, .rk) { font-size: var(--fs-cell-mono) !important; }
table:not(.kv) tbody td :is(.usd, .usd *, .usd-line, .chip, .chip *, .wl-tag, .sub-addr, .fw-det, .fw-det *, .uw-sub, .uw-sub *, .ex-pill, .rs-flag) { font-size: var(--fs-small) !important; }
table:not(.kv) tbody td :is(.usd, .usd *, .usd-line) { color: var(--text-faint); }
/* Site name in Michroma (owner, 2026-11-14). Self-hosted (static/fonts,
OFL 1.1). Michroma is very wide, so it is set a little smaller and with
no negative tracking; it has a single weight. */
@font-face {
font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap;
src: url("/fonts/michroma-latin-400.woff2") format("woff2");
}
.brand-text, .foot-brand .brand-text { font-family: "Michroma", var(--sans); font-weight: 400; letter-spacing: 0; font-size: .82em; }
.brand-text strong { font-weight: 400; }
@media (max-width: 640px) { .site-head .brand-text, header .brand-text { font-size: .6em; } }
@media (max-width: 400px) { .site-head .brand-text, header .brand-text { font-size: .54em; } }
@media (max-width: 400px) { .site-head .brand-text, header .brand-text { font-size: .5em; } }
@media (max-width: 360px) { .site-head .brand-text, header .brand-text { font-size: .45em; } }
/* Market Overview card on the home page (owner, 2026-11-14): Market Cap,
Network and Pi Supply in one card, each section under a small uppercase
label (the tile label style), not a card title. */
.hs-sec { margin: 16px 0 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .085em;
color: var(--text-faint); font-weight: 700; }
.hs-sec:first-child { margin-top: 0; }
#home-overview #home-metrics { padding: 0; }
#home-overview > .hs-panel { margin-top: 0; }
:root:not([data-theme="light"]) #home-overview .hs-sec { color: var(--supply-note, var(--text-faint)); }
/* Site name bigger, the page title underneath it in small italics (owner, 2026-11-14) */
.topbar-in { height: auto; min-height: 92px; padding-top: 8px; padding-bottom: 8px; }
.brand-stack { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; flex: 0 1 auto; }
.brand-stack .top-title:not(:empty) { display: block; border-left: 0; padding: 0; margin: 0; }
.brand-stack .top-title .page-head h1 { font-size: var(--sub-fs, 13px) !important; font-style: italic; font-weight: 500;
text-transform: none; letter-spacing: .02em; color: rgba(255,255,255,.92); }
.brand-stack .top-title .page-head .sub, .brand-stack .top-title .asof { display: none; }
@media (max-width: 900px) {
.topbar-in { min-height: 64px; }
.brand-stack .top-title .page-head h1 { font-size: 11.5px !important; }
}
@media (max-width: 520px) { .brand-stack .top-title:not(:empty) { display: none; } }
/* Owner palette, 2026-11-14 (from the palette page): new header gradient and a light grey page.
Everything else stays as in the 2026-10-18 block. */
:root:not([data-theme="light"]) {
--band-a: #002aff; --band-b: #002aff; /* solid blue, no gradient (owner, 2026-11-14) */
--bg: #c7c7c7;
}
/* Radar "o" (owner, 2026-11-14, option 1): rings, crosshair, a beam that sweeps
round once every 4 seconds and two blips that light up as it passes. Sized from
Michroma's own "o" (0.573em tall, 0.011em below the baseline) so it sits on the
line with the letters. Still for visitors who ask for reduced motion. */
.brand-o { width: .6em; height: .6em; margin: 0 .046em; vertical-align: -.024em; }
.brand-o svg { overflow: visible; }
.radar-sweep { transform-origin: 16px 16px; transform-box: view-box; animation: radar-sweep 4s linear infinite; }
@keyframes radar-sweep { to { transform: rotate(360deg); } }
.radar-blip { opacity: 0; animation: radar-blip 4s ease-out .41s infinite; } /* beam reaches it at 37 degrees */
.radar-blip2 { animation-delay: 2.61s; } /* and this one at 235 degrees */
@keyframes radar-blip { 0% { opacity: 1; } 55% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.radar-sweep, .radar-blip { animation: none; }
.radar-blip { opacity: 1; }
}
/* Site name in Audiowide, the line underneath in Exo 2 italic (owner choice #18, 2026-11-14).
Self-hosted; see fonts/README.txt. */
@font-face { font-family: "Audiowide"; src: url("/fonts/audiowide-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Exo 2"; src: url("/fonts/exo2-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
.brand-text, .foot-brand .brand-text { font-family: "Audiowide", var(--sans); font-weight: 400; letter-spacing: 0; }
.brand-stack .top-title .page-head h1 { font-family: "Exo 2", var(--sans); font-weight: 500; font-style: italic; letter-spacing: .02em; }
/* radar "o" re-fitted to Audiowide's "o": 0.528em tall, sitting on the baseline */
.brand-o { width: .555em; height: .555em; margin: 0 .05em; vertical-align: -.0135em; }
/* Name a tad bigger (owner, 2026-11-14): the menu items sit a little closer together,
which leaves the wordmark about 10% more room on laptop-width screens. */
@media (min-width: 1021px) {
.topbar.band .mainnav > .nav-link, .topbar.band .mainnav .dd-btn { padding-left: 8px; padding-right: 8px; }
}
/* Comment / Report an Issue (owner, 2026-11-15): a vertical tab fixed to the
right edge at mid-height on wider screens; a small round button in the
bottom-right corner on phones. The form is the shared info dialog style. */
.fb-tab {
position: fixed; right: 0; top: 50%; z-index: 45; transform: translateY(-50%);
display: flex; align-items: center; gap: 8px;
writing-mode: vertical-rl; padding: 14px 7px;
background: #7d00fa; color: #ffffff; border: 0; border-radius: 8px 0 0 8px;
box-shadow: -2px 2px 10px rgba(0, 0, 0, .28); cursor: pointer;
font-family: "Montserrat", var(--sans); font-weight: 700; font-size: 12px;
letter-spacing: .04em; text-transform: uppercase; line-height: 1;
}
.fb-tab .fb-tab-text { transform: rotate(180deg); }
.fb-tab .fb-ic { width: 15px; height: 15px; flex: none; }
.fb-tab:hover { background: #002aff; }
.fb-tab:focus-visible { outline: 3px solid #ffffff; outline-offset: -5px; background: #002aff; }
@media (max-width: 640px) {
.fb-tab {
top: auto; transform: none; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
writing-mode: horizontal-tb; width: 44px; height: 44px; padding: 0; justify-content: center;
border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.fb-tab .fb-tab-text {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.fb-tab .fb-ic { width: 20px; height: 20px; }
/* room under the footer so the button never sits on its last line */
.footer { padding-bottom: 68px; }
}
@media print { .fb-tab { display: none; } }
dialog.fb-dlg { width: min(600px, calc(100vw - 24px)); }
.fb-box .card-head { flex-wrap: nowrap; }
.fb-box .card-head h2 { font-size: 15px; min-width: 0; }
.fb-box .info-x { flex: none; }
.fb-form { display: grid; gap: 6px; }
.fb-form[hidden], .fb-done[hidden] { display: none; }
.fb-label { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 8px; }
.fb-req, .fb-opt { font-weight: 400; color: var(--text-dim); }
.fb-ctl { width: 100%; box-sizing: border-box; font-size: 14px; }
textarea.fb-msg {
min-height: 130px; resize: vertical; font-family: var(--sans); line-height: 1.5;
background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
border-radius: var(--radius-sm); padding: 8px 10px;
}
textarea.fb-msg:focus, .fb-ctl:focus { outline: none; border-color: var(--accent); }
.fb-count { font-size: 12px; color: var(--text-dim); text-align: right; }
.fb-count.fb-near { color: var(--warn); }
.fb-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.info-box p.fb-page, .info-box p.fb-warn, .info-box p.fb-intro { font-size: 13px; margin: 6px 0 0; }
.fb-page code { word-break: break-all; }
.fb-err { color: var(--bad, #e5484d); font-size: 13.5px; font-weight: 600; min-height: 1em; }
.fb-err:empty { display: none; }
.fb-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.fb-actions .btn { padding: 9px 20px; font-size: 14px; }
.fb-done .note { margin: 4px 0 6px; }
/* Keyboard access (owner, 2026-11-15). One focus ring for the whole site:
white on the violet header, the purple card heads and the black cards; a
deep violet on the light theme's pale surfaces. Mouse mode shows it only on
keyboard focus (:focus-visible); Keyboard mode (.kb-mode on , set by
the header's keyboard button) shows it after clicks as well. */
:root { --ring: #ffffff; }
:root[data-theme="light"] { --ring: #4b0090; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --ring: #4b0090; } }
.band, .topbar, .card-head, .fb-tab, .skip { --ring: #ffffff; }
:focus-visible:not(#q),
:root.kb-mode :focus:not(#view, html, body) {
outline: 2px solid var(--ring) !important; outline-offset: 2px !important;
}
:root.kb-mode :is(input, textarea, select):focus { box-shadow: 0 0 0 2px var(--ring) !important; }
:is(tr, .pgn .pg-b, .tabs .tab, .dd-menu .nav-link, .bf-row, .th-row):focus-visible,
:root.kb-mode :is(tr, .pgn .pg-b, .tabs .tab, .dd-menu .nav-link, .bf-row, .th-row):focus { outline-offset: -2px !important; }
.fb-tab:focus-visible, :root.kb-mode .fb-tab:focus { outline-offset: -5px !important; }
#view:focus, #view:focus-visible { outline: none !important; }
.skip:focus { outline: 2px solid #ffffff !important; outline-offset: -4px !important; }
/* Mouse / Keyboard mode switch: the header button reuses the theme button's
box; pressed, it fills white. The phone panel and the footer mirror it. */
.kbmode .kb-ic { width: 19px; height: 19px; display: block; }
.topbar.band .kbmode[aria-pressed="true"] { background: #ffffff; color: #5400a8 !important; border-color: #ffffff; }
.nav-kb { display: none; }
@media (max-width: 1020px) {
.nav-kb {
display: block; margin-top: 10px; padding: 10px; text-align: left; cursor: pointer;
background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
color: #ffffff; font: 600 13.5px var(--sans);
}
}
@media (max-width: 640px) { .nav-kb { width: calc(100% - 56px); } }
.foot-col a.foot-kb .kb-state { font-weight: 700; }
/* "Keyboard mode on" hint: bottom-left, clear of the feedback tab. */
.kb-hint {
position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 92px);
padding: 8px 8px 8px 14px; border-radius: 999px;
background: #7d00fa; color: #ffffff; font-size: 13px; font-weight: 600;
box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
.kb-hint-x {
width: 26px; height: 26px; flex: none; border-radius: 50%; cursor: pointer;
background: rgba(255,255,255,.18); color: #ffffff; border: 0; font-size: 17px; line-height: 1;
}
.kb-hint .kb-hint-x { --ring: #ffffff; }
.kb-hint { --ring: #ffffff; }
kbd {
display: inline-block; min-width: 1.6em; padding: 1px 6px; text-align: center;
font: 600 12px var(--mono); line-height: 1.5; color: var(--text);
background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
}
.kb-hint kbd { color: #ffffff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
/* Keyboard Shortcuts dialog: the shared info dialog (purple head, black body). */
dialog.kb-dlg { width: min(520px, calc(100vw - 24px)); }
.kb-box .card-head { flex-wrap: nowrap; }
.kb-box .info-x { flex: none; }
.info-box p.kb-status { color: var(--text); font-size: 13.5px; margin: 0 0 10px; }
.kb-box .btn { padding: 8px 16px; font-size: 13.5px; }
.kb-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.kb-table th, .kb-table td { padding: 7px 4px; border-top: 1px solid var(--line); text-align: left;
font-size: 13.5px; vertical-align: middle; }
.kb-table th { width: 38%; font-weight: 400; color: var(--text-dim); white-space: nowrap; }
.kb-table td { color: var(--text); }
.info-box p.kb-note { font-size: 12.5px; margin: 12px 0 0; }
@media print { .kb-hint { display: none; } }