/* Reusable pieces: cards, stats, tables, badges, notices, buttons. */

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: var(--cell); border-bottom: 1px solid var(--border); }
.card-body { padding: var(--cell); }

.hero { position: relative; overflow: hidden; padding: 32px 28px; border-radius: var(--r); background: var(--band); color: var(--on-band); }
.hero h1 { color: var(--on-band); font-size: 30px; }
.hero p { margin: 6px 0 0; color: var(--on-band-muted); max-width: 560px; }
.hero-mark { position: absolute; right: -30px; top: -30px; height: 300px; width: auto; opacity: .22; pointer-events: none; }

.stats, .strip { display: flex; flex-wrap: wrap; }
.stat { flex: 1 1 170px; padding: 16px 18px; border-right: 1px solid var(--border); min-width: 0; }
.stat:last-child { border-right: 0; }
.stat .lab { font-size: 13px; color: var(--muted); }
.stat .val { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.scroll { overflow-x: auto; }
/* A box whose content overflows takes the keyboard focus (scrollbox.js), so the arrow keys scroll it; it shows where the focus is (#767) */
.scroll:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
table.t { width: 100%; border-collapse: collapse; }
.t th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: var(--cell); border-bottom: 1px solid var(--border); white-space: nowrap; }
.t td { padding: var(--cell); border-bottom: 1px solid var(--border); white-space: nowrap; }
.t tr:last-child td { border-bottom: 0; }
.t tbody tr:hover td { background: var(--surface2); }
/* A table whose rows are named by their first cell (row headers) and a totals row under a rule (#788) */
.t tbody th[scope="row"] { font-size: inherit; font-weight: 400; color: inherit; white-space: normal; }
.t tbody tr:hover th[scope="row"] { background: var(--surface2); }
.t tr:last-child th[scope="row"] { border-bottom: 0; }
.t tfoot th, .t tfoot td { border-top: 1px solid var(--border); border-bottom: 0; font-size: inherit; font-weight: 600; color: inherit; }
.t .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Two values in one cell (#771): the first on top, the second under it, smaller and grey, and the head says both. A list of many columns fits its card this way
   instead of scrolling sideways. A cell or a line only a computer shows is .d-only, one only a phone shows is .p-only (up to 760 px) */
.t .sub { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--muted); font-family: var(--font); }
.t .sub.mono, .t .sub .mono { font-family: var(--mono); }
.t th .sub { margin-top: 1px; font-weight: 500; }
/* Two links stacked in one cell (a staker's address over its CPID, a transaction over its claimant) are 14 px high each, too close for a finger: on a touch
   screen each gets 5 px above and below, so both reach 24 px (WCAG 2.2, 2.5.8, #848). A mouse keeps the compact rows. */
@media (pointer: coarse) {
    .t td:has(> .sub a) > a, .t td > .sub a { display: inline-block; padding-block: 5px; }
    .t td > .sub:has(a) { margin-top: 0; }
}
.t.two td { vertical-align: top; }
.t.two th { vertical-align: bottom; }
/* A cell of words (a description, a label with a known name): it wraps instead of pushing the table out (#771). .p-cell is a cell only a phone shows */
.t td.text { white-space: normal; line-height: 1.4; overflow-wrap: anywhere; }
.p-cell { display: none; }
/* a name that must stay readable beside a column of words (an API attribute or parameter) */
.t td.name { min-width: 9rem; }
/* the blocks staked: seven columns that need a little less room between them to fit a wide card */
.t.stakedrows th, .t.stakedrows td { padding-left: 12px; padding-right: 12px; }
.p-only, .t .sub.p-only { display: none; }
/* .l-only: a wide screen only (1200 px and up); .n-only: below it, a tablet and a phone (#771: the age instead of the full time, which does not fit) */
.t .sub.n-only, .t span.n-only:not(.sub) { display: none; }
@media (max-width: 1199px) { .l-only, .t .sub.l-only { display: none; } .t .sub.n-only { display: block; } .t span.n-only:not(.sub) { display: inline; } }
/* Below a wide screen the copy buttons of such a list go (the ids are copied on their own pages), the cells are a little tighter and a column only a wide
   screen needs (.w-only) goes, so the columns still fit. On a phone the list reaches the edges of its card and its text is a step smaller */
@media (min-width: 761px) and (max-width: 1199px) { .w-only { display: none; } }
@media (max-width: 1199px) {
    .t.two .copy-button { display: none; }
    .t.two th, .t.two td { padding-left: 8px; padding-right: 8px; }
    .t.two td.what { max-width: 18rem; }
    .t.two td.wide { min-width: 90px; }
    /* a list in a narrow card (the inputs and outputs side by side on a transaction's page) takes the phone's lines already here */
    .t.early .d-only, .t.early .sub.d-only { display: none; }
    .t.early .sub.p-only { display: block; }
}
@media (max-width: 900px) { .t.two th, .t.two td { padding-left: 6px; padding-right: 6px; } }
@media (max-width: 760px) {
    .d-only, .t .sub.d-only { display: none; }
    .t .sub.p-only { display: block; }
    /* a column a phone leaves out, also in a list that takes the phone's lines early (.early) */
    .no-phone { display: none; }
    .t.two td.what { max-width: none; white-space: normal; overflow: visible; }
    .t.two td.wide { min-width: 0; width: auto; }
    .t.two th { white-space: normal; }
    .t.two td.vnote { min-width: 0; }
    .card-body .scroll:has(> .t.two) { margin-left: -18px; margin-right: -18px; }
    .t.two { font-size: 13px; }
    .t.two .mono { font-size: 12px; }
    .t.two .badge { font-size: 11px; padding: 1px 7px; }
    .t.two th, .t.two td { padding-left: 3px; padding-right: 3px; }
    .t.two th:first-child, .t.two td:first-child { padding-left: 12px; }
    .t.two th:last-child, .t.two td:last-child { padding-right: 12px; }
}
@media (max-width: 380px) {
    .t.two { font-size: 12.5px; }
    .t.two .mono { font-size: 11.5px; }
    .t.two th:first-child, .t.two td:first-child { padding-left: 7px; }
    .t.two th:last-child, .t.two td:last-child { padding-right: 7px; }
}
/* A link in a table or in a list laid out as one (`.c` cells: /tx, the CPID pages, the MRC tab): a height, a tx id, an address, a CPID, the way around
   an explorer. It is in the link colour and underlined on hover, so it looks like one on every page (#767, #768). At the specificity of a bare `a` (this file
   loads after base.css), and with the same list of link classes that keep their own look as the running-text rule in base.css */
:where(.t td, .c) a:where(:not(.btn, .tab, .badge, .chip, .step, .sm-item, .sortchip, .linklike)) { color: var(--accent-text); }
:where(.t td, .c) a:where(:not(.btn, .tab, .badge, .chip, .step, .sm-item, .sortchip, .linklike)):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.t tr.fresh td { background: var(--accent-soft); animation: fresh 3s ease-out forwards; }
@keyframes fresh { to { background: transparent; } }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface2); color: var(--muted); }
.badge.acc { background: var(--accent-soft); color: var(--accent-text); }
.badge.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.badge.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }

.live { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); animation: pulse 2s infinite; }
.live[data-state="behind"] .dot { background: var(--warn); }
.live[data-state="waiting"] .dot, .live[data-state="stale"] .dot { background: var(--warn); }
.live[data-state="blocked"] .dot { background: var(--bad); }
.live[data-state="unknown"] .dot, .live[data-state="offline"] .dot { background: var(--muted); animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .dot, .t tr.fresh td { animation: none; } }

.note { display: flex; gap: 10px; align-items: flex-start; margin: 12px 18px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); }
.note svg { flex: none; margin-top: 2px; }
.note.info { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.note.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.note.err { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.empty { padding: 28px 18px; text-align: center; color: var(--muted); }

.btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.copy { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 4px; border-radius: 6px; border: 0; background: transparent; color: var(--muted); cursor: pointer; vertical-align: middle; }
.copy:hover { background: var(--surface2); color: var(--text); }
.copy svg { width: 16px; height: 16px; }
.copy.copied { color: var(--ok); }
.copy.copy-failed { color: var(--bad); }

.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 var(--gap); margin: 0; }
.dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.dl dt { color: var(--muted); }
.dl > .full { grid-column: 1 / -1; }
.dl dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }

.error-card { max-width: 640px; margin: 24px auto; }
/* A page that is not there: a search and the main lists (#758 D4) */
.error-search { display: flex; gap: 8px; margin: 16px 0 12px; }
.error-search input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--field-border); background: var(--surface2); color: inherit; font: inherit; }
.error-search .btn { display: inline-flex; align-items: center; gap: 6px; }
.error-search .btn svg { width: 18px; height: 18px; }
.error-links { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 640px) {
    .stat { flex-basis: 45%; border-right: 0; border-bottom: 1px solid var(--border); }
    .hero { padding: 24px 18px; }
    .hero-mark { height: 200px; }
}

/* two columns: a wide card and a narrow one beside it, stacked on a phone */
.grow { flex: 999 1 560px; min-width: 0; }
.side { flex: 1 1 300px; min-width: 0; }

/* the main page (#578): the latest blocks on the left, the Incoming card, the polls and the intro in the narrow column; on a phone: blocks, Incoming, then the rest */
.mainrow { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "blocks incoming" "blocks side"; grid-template-rows: max-content 1fr; gap: var(--gap); align-items: start; }
.mainrow > .blocks { grid-area: blocks; min-width: 0; }
.mainrow > .incoming { grid-area: incoming; }
.mainrow > .side { grid-area: side; }
@media (max-width: 900px) {
    .mainrow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "blocks" "incoming" "side"; grid-template-rows: none; }
}
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }

/* under the main page's charts: what they show, and the way on to the stats page (a greyed span until that page is built, like the menu) */
.chartsnote { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0; }

/* the stats page (#582): the menu of types on the left, the charts of the type beside it; the menu is a row that scrolls on a phone */
.statsrow { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.statsmenu { flex: 0 0 230px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.sm-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sm-group:first-child { padding-top: 4px; }
.sm-item { display: flex; align-items: center; min-height: 40px; padding: 6px 10px; border-radius: var(--r-sm); font-weight: 600; color: var(--text); text-decoration: none; }
a.sm-item:hover { background: var(--surface2); }
.sm-item.on { background: var(--accent-soft); color: var(--accent-text); }
.sm-item.soon { color: var(--muted); opacity: .65; }
.statsmain { flex: 1 1 600px; min-width: 0; }
.stats-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.stats-head p { margin: 4px 0 0; max-width: 600px; }
/* As soon as the content no longer fits beside the menu (230 + 20 + 600 px: under about 900 px of screen) the menu is the row of pills; a menu at full height
   alone on its line, with the content under it, left a tall empty space beside it (#795) */
@media (max-width: 900px) {
    .statsmenu { flex: 1 1 100%; flex-direction: row; overflow-x: auto; gap: 6px; padding: 8px; }
    .sm-group { display: none; }
    .sm-item { white-space: nowrap; border: 1px solid var(--border); border-radius: 999px; }
}
/* the data of the charts as tables, one fold for each chart */
.datatable { border: 1px solid var(--border); border-radius: var(--r-sm); }
.datatable summary { padding: 10px 14px; font-weight: 650; cursor: pointer; }
.datatable[open] summary { border-bottom: 1px solid var(--border); }
.datatable .scroll { max-height: 420px; overflow: auto; }

/* the key figures above the charts of a type, and the table of block versions */
.stats-figs { display: flex; flex-wrap: wrap; gap: 12px; }
.stats-figs .fig { flex: 1 1 180px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.stats-figs .fig b { font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
/* The staking calculator (#632, pages/staking.html.twig): the form and its answer on the left, the network, the comparison and the notes beside it */
.stk-row { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.stk-main { flex: 999 1 600px; min-width: 0; }
.stk-side { flex: 1 1 320px; min-width: 0; }
.stk-inputs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.stk-num { flex: 0 1 220px; min-height: 46px; font: 600 20px var(--mono); }
.stk-per { flex: 0 0 auto; min-height: 46px; text-transform: capitalize; }
.stk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stk-chips .btn { border-radius: 999px; background: var(--surface2); }
.stk-need { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-text); }
.stk-need b { font-size: 30px; line-height: 1.2; overflow-wrap: anywhere; }
.stk-chart { display: flex; flex-direction: column; gap: 8px; }
.stk-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.stk-svg { display: block; width: 100%; height: auto; }
.stk-svg .grid { stroke: var(--border); }
.stk-svg .axis { stroke: var(--muted); }
.stk-svg .lbl { fill: var(--muted); font-size: 12px; }
/* The axis text at about 11-12 px on the screen, as the charts under .viz-box but for the 656 units of this one (16 of them left of the frame, room
   for "100 %"): 11.5 px x 656 / width */
.stk-chart { container-type: inline-size; }
@container (width < 300px) { .stk-svg .lbl { font-size: 26.5px; } }
@container (300px <= width < 340px) { .stk-svg .lbl { font-size: 23.5px; } }
@container (340px <= width < 390px) { .stk-svg .lbl { font-size: 20.9px; } }
@container (390px <= width < 450px) { .stk-svg .lbl { font-size: 18.2px; } }
@container (450px <= width < 530px) { .stk-svg .lbl { font-size: 15.6px; } }
@container (530px <= width < 640px) { .stk-svg .lbl { font-size: 13.1px; } }
@container (640px <= width < 800px) { .stk-svg .lbl { font-size: 10.8px; } }
@container (800px <= width < 900px) { .stk-svg .lbl { font-size: 8.6px; } }
@container (width >= 900px) { .stk-svg .lbl { font-size: 7.6px; } }
.stk-svg .curve { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.stk-svg .mark circle { fill: var(--surface); stroke: var(--accent); stroke-width: 3; }
.stk-bars { display: flex; flex-direction: column; gap: 8px; }
.stk-bar { display: grid; grid-template-columns: 96px 1fr 64px; align-items: center; gap: 12px; }
.stk-bar .paybar { margin-top: 0; height: 10px; }
.stk-bar b { text-align: right; }
.stk-facts { margin: 0; display: flex; flex-direction: column; }
.stk-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.stk-facts div:first-child { border-top: 0; padding-top: 0; }
.stk-facts dt { color: var(--muted); }
.stk-facts dd { margin: 0; font-weight: 600; text-align: right; }
.stk-table { width: 100%; }
.stk-table th, .stk-table td { padding: 10px 8px; white-space: nowrap; }
.stk-table tr.near td { background: var(--accent-soft); font-weight: 700; }
.versionrows td.vnote { white-space: normal; min-width: 280px; max-width: 520px; }
.versionrows tr.current td { background: var(--accent-soft); }
/* The tables under the charts of /stats: a long head wraps, and the first column (a day, a month, or a range of days written on two lines) never breaks
   inside a date (#771) */
.datatable th { white-space: normal; }
.datatable td:first-child { white-space: pre; }
.datatable .t th, .datatable .t td { padding-left: 10px; padding-right: 10px; }
@media (max-width: 1199px) { .datatable .t th, .datatable .t td { padding-left: 8px; padding-right: 8px; } }
/* A table of many figures that is still wider than a phone scrolls, with its first column (the day or the month) kept in place */
.datatable .t th:first-child, .datatable .t td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.datatable .t tbody tr:hover td:first-child { background: var(--surface2); }
@media (max-width: 760px) {
    .datatable .t { font-size: 13px; }
    .datatable .t .mono { font-size: 12px; }
    .datatable .t th, .datatable .t td { padding-left: 5px; padding-right: 5px; }
}

/* more series than three: the colours of the series tokens */
.viz-svg .seg.s4 { fill: var(--series-4); }
.viz-svg .seg.s5 { fill: var(--series-5); }
.viz-svg .seg.s6 { fill: var(--series-6); }
.viz-legend .key.s4 { background: var(--series-4); }
.viz-legend .key.s5 { background: var(--series-5); }
.viz-legend .key.s6 { background: var(--series-6); }

/* one chart across the content: its lines keep their width (the text keeps its size by the steps under .viz-box) */
.viz-grid.one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
    .viz-grid.one .viz-svg .line { vector-effect: non-scaling-stroke; }
    .viz-grid.one .viz-svg .dot { r: 3px; vector-effect: non-scaling-stroke; }
}

/* the price in the grid of charts (#62): the figures under the chart, and the change in the badge */
.price-delta { font-weight: 600; margin-left: 6px; }
.price-delta.up { color: var(--ok); }
.price-delta.down { color: var(--bad); }
.price-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.price-facts dt { font-size: 12px; color: var(--muted); }
.price-facts dd { margin: 0; font-size: 14px; }

/* the "New to Gridcoin?" box in the narrow column: an accent tint of the surface, so it stands out in the light and the dark theme */
.intro { padding: 16px 20px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.intro p { margin: 6px 0 12px; color: var(--muted); }
/* the news section of the main page: one large story and four smaller ones, as on the news page; rows on a phone */
.n-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.n-feature .n-lead.big { min-height: 100%; }
.n-four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(150px, 1fr)); gap: 12px; min-width: 0; }
@media (max-width: 900px) { .n-feature { grid-template-columns: minmax(0, 1fr); } .n-feature .n-lead.big { min-height: 260px; } }

/*
 * A part that is not built yet. It shows what is planned under a see-through "Placeholder"; the card is inert and
 * hidden from assistive technology (see the placeholder markup), so the sample is never taken for data.
 */
.is-placeholder { position: relative; overflow: hidden; user-select: none; }
.is-placeholder > * { opacity: .55; }
.is-placeholder::after {
    content: "Placeholder";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 24%, transparent);
    transform: rotate(-8deg);
    pointer-events: none;
}

.chart { display: block; width: 100%; height: 120px; }
.chart .line { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart .area { fill: var(--accent-soft); stroke: none; }
.chart .bar { fill: var(--accent); opacity: .85; }


/* the search in the hero, and the quick links under it */
.hero-search { position: relative; display: flex; flex-wrap: wrap; gap: 10px; max-width: 760px; margin-top: 18px; }
.search {
    flex: 1 1 320px;
    min-height: 56px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid var(--field-border);
    background: var(--field-bg);
    color: var(--field-text);
    font: inherit;
    font-size: 16px;
}
.search::placeholder { color: var(--field-placeholder); }
.search:disabled { opacity: .7; cursor: not-allowed; }
.hero-search .btn { min-height: 56px; padding: 0 24px; border-radius: 14px; }
/* The main page's field with the `/` key mark at its right edge, hidden once it holds a term (#765) */
.hero-field { position: relative; display: flex; flex: 1 1 320px; min-width: 0; }
.hero-field .search { flex: 1 1 auto; min-width: 0; }
.hero-field .search-key { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); border-color: color-mix(in srgb, var(--field-placeholder) 45%, transparent); background: transparent; color: var(--field-placeholder); }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) { .hero-field .search { padding-right: 52px; } }
.hero-field .search:not(:placeholder-shown) + .search-key { display: none; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--on-band-line); color: var(--on-band); font-weight: 600; font-size: 13.5px; }
a.chip:hover { background: var(--on-band-hover); }
/* The faucet's call-out in the hero (#56): over the mark at the right on a wide screen, under the quick links on a narrow one */
.hero-faucet { position: relative; display: flex; flex-direction: column; gap: 12px; margin-top: 18px; max-width: 420px; padding: 20px; border-radius: 18px; background: color-mix(in srgb, var(--band) 78%, transparent); border: 1px solid var(--on-band-line); }
.hero .hero-faucet p { margin: 0; max-width: none; font-size: 14px; }
.hf-head { display: flex; align-items: center; gap: 10px; }
.hf-head h2 { margin: 0; font-size: 18px; color: var(--on-band); }
.hf-icon { flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; }
.hf-icon svg { width: 20px; height: 20px; }
.hero-faucet .btn { justify-content: center; min-height: 44px; }
@media (min-width: 1180px) {
    .hero-faucet { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); width: 300px; margin-top: 0; }
    .hero:has(.hero-faucet) .hero-search { max-width: min(760px, calc(100% - 336px)); }
    .hero:has(.hero-faucet) .chips { max-width: calc(100% - 336px); }
}
/* a quick link whose page is not built yet: shown, not a link */
.chip.soon { opacity: .6; cursor: not-allowed; user-select: none; }

/* Pager and share bars of the poll pages */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 14px 0; }
/* the page numbers sit in one rounded track, the current page is a filled pill inside it */
.pager .pages { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.pager .pages a, .pager .pages .cur, .pager .pages .gap { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; font-variant-numeric: tabular-nums; font-weight: 600; }
.pager .pages a { color: var(--text); }
.pager .pages a:hover { background: var(--surface2); text-decoration: none; }
.pager .pages .cur { background: var(--accent); color: var(--accent-ink); }
.pager .pages .gap { color: var(--muted); min-width: 22px; padding: 0 2px; }
/* Previous and Next are buttons at the two ends */
.pager .step { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 600; }
.pager .step svg { width: 16px; height: 16px; }
.pager a.step:hover { background: var(--surface2); text-decoration: none; }
.pager .step.off { color: var(--muted); opacity: .45; }
.pager .pageinfo { display: none; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    /* a phone has no room for the numbers: Previous, "Page 2 of 12", Next */
    .pager { justify-content: space-between; }
    .pager .pages { display: none; }
    .pager .pageinfo { display: block; }
}
.share { display: block; width: 100%; height: 8px; margin-top: 6px; }
.share-bg { fill: var(--surface2); }
.share-fg { fill: var(--accent); }
.answer { padding: 12px 0; border-top: 1px solid var(--border); }
.answer:first-child { border-top: 0; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

/* Date picker of the blocks page: a plain form, no script */
.datebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.datebar input[type="date"] { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--field-border); background: var(--surface2); color: inherit; font: inherit; }
.btn.soon { opacity: .55; pointer-events: none; }

/* Charts of the blocks page: inline SVG drawn on the server, no script */
.viz-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-bottom: 16px; }
/* six charts: three to a row, two in the middle, one on a phone (never four) */
@media (min-width: 700px) { .viz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .viz-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .viz-grid.two { grid-template-columns: repeat(2, 1fr); } }
/* A chart that had nothing to draw in the range: one line in its place (#758 C7) */
.viz-none { display: flex; flex-direction: column; gap: 4px; grid-column: 1 / -1; align-self: start; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--muted); font-size: 13.5px; }
.viz-none p { margin: 0; }
.viz-grid.solo .viz-none { grid-column: auto; }
/* four charts are two by two, not three and one */
@media (min-width: 1100px) { .viz-grid.four { grid-template-columns: repeat(2, 1fr); } }
.viz-note { margin: 0 0 8px; font-size: 13px; }
/* a chart inside a card that is there already (the MRC tab of a CPID): a heading and the drawing, no card of its own */
.viz-flat { min-width: 0; }
.viz-flat .tabhead.flush { justify-content: space-between; }
/* the Sidestakes tab of an address: the four figures in two rows beside the one chart, one under the other on a phone */
.sshead.has-chart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: stretch; border-bottom: 1px solid var(--border); }
.sshead.has-chart .strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.sshead.has-chart .stat { display: flex; flex-direction: column; justify-content: center; border-right: 0; border-bottom: 1px solid var(--border); }
.sshead.has-chart .stat:nth-child(odd) { border-right: 1px solid var(--border); }
.sshead.has-chart .stat:nth-last-child(-n+2) { border-bottom: 0; }
.sshead .sschart { min-width: 0; padding: 14px 18px; border-left: 1px solid var(--border); }
@media (max-width: 900px) {
    .sshead.has-chart { grid-template-columns: minmax(0, 1fr); }
    .sshead.has-chart .strip { grid-auto-rows: auto; }
    .sshead .sschart { border-left: 0; border-top: 1px solid var(--border); }
}
.viz-svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz-svg text { fill: var(--muted); font-size: 10px; }
.viz-svg .ytick { dominant-baseline: central; }
/* Chart text at about 11-12 px on the screen at any width (#758 C8). The SVG scales its 420 units to the width of its box, and its text with it, so
   a narrow box gets more units and a wide one fewer: font size = 11.5 px x 420 / width, in steps */
.viz-box { container-type: inline-size; }
@container (width < 230px) { .viz-box .viz-svg text { font-size: 21px; } }
@container (230px <= width < 260px) { .viz-box .viz-svg text { font-size: 19px; } }
@container (260px <= width < 300px) { .viz-box .viz-svg text { font-size: 17px; } }
@container (300px <= width < 340px) { .viz-box .viz-svg text { font-size: 15px; } }
@container (340px <= width < 390px) { .viz-box .viz-svg text { font-size: 13.4px; } }
@container (390px <= width < 450px) { .viz-box .viz-svg text { font-size: 11.7px; } }
@container (450px <= width < 530px) { .viz-box .viz-svg text { font-size: 10px; } }
@container (530px <= width < 640px) { .viz-box .viz-svg text { font-size: 8.4px; } }
@container (640px <= width < 800px) { .viz-box .viz-svg text { font-size: 6.9px; } }
@container (800px <= width < 1000px) { .viz-box .viz-svg text { font-size: 5.5px; } }
@container (1000px <= width < 1250px) { .viz-box .viz-svg text { font-size: 4.4px; } }
@container (width >= 1250px) { .viz-box .viz-svg text { font-size: 3.8px; } }
.viz-svg .grid { stroke: var(--border); stroke-width: 1; }
.viz-svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-svg .line.s1, .viz-svg .dot.s1 { stroke: var(--series-1); }
.viz-svg .line.s2, .viz-svg .dot.s2 { stroke: var(--series-2); }
.viz-svg .line.s3, .viz-svg .dot.s3 { stroke: var(--series-3); }
.viz-svg .line.s4, .viz-svg .dot.s4 { stroke: var(--series-4); }
.viz-svg .dot { stroke-width: 2; }
.viz-svg .dot.s1 { fill: var(--series-1); }
.viz-svg .dot.s2 { fill: var(--series-2); }
.viz-svg .dot.s3 { fill: var(--series-3); }
.viz-svg .dot.s4 { fill: var(--series-4); }
.viz-svg .band { fill: var(--series-1); opacity: .14; stroke: none; }
.viz-grid.pjcharts .viz-note { line-height: 1.45; min-height: 2.9em; }
.viz-svg .shade { fill: var(--muted); opacity: .16; stroke: none; pointer-events: none; }
.viz-legend .key.shade { background: color-mix(in srgb, var(--muted) 30%, transparent); border: 1px solid var(--border); }
.viz-svg .seg.s1 { fill: var(--series-1); }
.viz-svg .seg.s2 { fill: var(--series-2); }
.viz-svg .seg.s3 { fill: var(--series-3); }
.viz-svg .hit { fill: transparent; }
.viz-svg .hit:hover, .viz-svg .hit:focus { fill: var(--accent-soft); outline: none; }
/* answer colours of a poll: the same as the bars of its result */
.viz-svg .line.a0, .viz-svg .dot.a0 { stroke: var(--series-1); }
.viz-svg .line.a1, .viz-svg .dot.a1 { stroke: var(--series-2); }
.viz-svg .line.a2, .viz-svg .dot.a2 { stroke: var(--series-3); }
.viz-svg .line.a3, .viz-svg .dot.a3 { stroke: var(--muted); }
.viz-svg .line.a4, .viz-svg .dot.a4 { stroke: var(--accent); }
.viz-svg .dot.a0 { fill: var(--series-1); }
.viz-svg .dot.a1 { fill: var(--series-2); }
.viz-svg .dot.a2 { fill: var(--series-3); }
.viz-svg .dot.a3 { fill: var(--muted); }
.viz-svg .dot.a4 { fill: var(--accent); }
.viz-svg .line.rest, .viz-svg .dot.rest { stroke: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
.viz-svg .dot.rest { fill: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
.viz-legend .key.a0 { background: var(--series-1); }
.viz-legend .key.a1 { background: var(--series-2); }
.viz-legend .key.a2 { background: var(--series-3); }
.viz-legend .key.a3 { background: var(--muted); }
.viz-legend .key.a4 { background: var(--accent); }
.viz-legend .key.rest { background: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
/* a chart drawn across a wide card: the picture grows, the lines stay the width of the page's (the text keeps its size by the steps under .viz-box) */
@media (min-width: 700px) and (max-width: 1099px) {
    .viz-wide .viz-svg .line { vector-effect: non-scaling-stroke; }
    .viz-wide .viz-svg .dot { r: 3px; vector-effect: non-scaling-stroke; }
}
.viz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.viz-legend .key { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.viz-legend .key.s1 { background: var(--series-1); }
.viz-legend .key.s2 { background: var(--series-2); }
.viz-legend .key.s3 { background: var(--series-3); }

/* The block page */
.lede { margin: 0 0 14px; line-height: 1.5; }
.card-head h3 { margin: 0; font-size: 15px; font-weight: 650; min-width: 0; }
.card-body h4 { margin: 16px 0 8px; font-size: 14px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.io { flex: 1 1 340px; min-width: 0; }
.io .t td, .io .t th { padding: 8px 10px; }
.contract { margin: 4px 0 12px; padding: 4px 14px 2px; border-left: 3px solid var(--accent); background: var(--surface2); border-radius: 0 8px 8px 0; }
.contract h4 { margin-top: 10px; }
.longtext { white-space: pre-wrap; text-align: left; display: block; overflow-wrap: anywhere; }
.dl > .full dd { text-align: left; }
.dl > .long { flex-direction: column; gap: 4px; }

/* The block page: header, value bar, comparison with the blocks before */
.titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.filters.flush { margin-bottom: 0; }
.strip .stat .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.small { font-size: 13px; }
.viz-legend .key.sx { background: var(--muted); }
.viz-legend .key.sf { background: var(--border); }
.viz-legend .key.sb { background: var(--bad); }
.dl.onecol { grid-template-columns: 1fr; }
.sparks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); }
.spark svg { margin: 4px 0; }
.neighbours { display: flex; gap: 6px; margin-top: 16px; overflow-x: auto; }
.nb { flex: 1 1 0; min-width: 84px; display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.nb.on { border-color: var(--accent); background: var(--accent-soft); }
.nb .h { font-weight: 650; font-size: 13px; font-variant-numeric: tabular-nums; }
.nb .g { font-size: 11.5px; color: var(--muted); }
.viz-svg .median { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; opacity: .7; }
.txid { word-break: break-all; font-size: 14px; margin-bottom: 8px; }

/* Tabs of the block page: links, so each part is a page of its own and works without a script */
/* One row that scrolls sideways where the tabs do not fit (like the menu); tabs.js adds more-start / more-end, and the edge with tabs behind it fades out */
.tabs { display: flex; flex-wrap: nowrap; border-bottom: 1px solid var(--border); padding: 0 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.tabs::-webkit-scrollbar { display: none; }
.tabs.more-end { -webkit-mask-image: linear-gradient(to right, var(--text) calc(100% - 40px), transparent); mask-image: linear-gradient(to right, var(--text) calc(100% - 40px), transparent); }
.tabs.more-start { -webkit-mask-image: linear-gradient(to left, var(--text) calc(100% - 40px), transparent); mask-image: linear-gradient(to left, var(--text) calc(100% - 40px), transparent); }
.tabs.more-start.more-end { -webkit-mask-image: linear-gradient(to right, transparent, var(--text) 40px, var(--text) calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, var(--text) 40px, var(--text) calc(100% - 40px), transparent); }
.tabs-wrap { position: relative; }
.tabs-arrow { position: absolute; top: 0; bottom: 1px; z-index: 1; width: 30px; padding: 0 0 3px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 30px; font-weight: 700; line-height: 1; cursor: pointer; }
.tabs-arrow.prev { left: 0; }
.tabs-arrow.next { right: 0; }
.tabs-arrow:hover { color: var(--accent-text); }
.tabs-arrow[hidden] { display: none; }
.tab { flex: 0 0 auto; white-space: nowrap; padding: 12px 16px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); text-decoration: none; }
.tab.on { color: var(--text); border-bottom-color: var(--accent); }
.tab .badge { margin-left: 6px; }
.raw { margin: 0; padding: 14px; max-height: 560px; overflow: auto; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tabhead { margin: 0; padding: 14px 18px 6px; font-size: 14px; font-weight: 650; }
.barcell { width: 160px; min-width: 120px; }


/* A notice with an action: the words on the left, the button on the right, centred on the same line */
.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--r-sm); background: var(--accent-soft); }
.callout-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 360px; min-width: 0; line-height: 1.45; }
.callout-text span { color: var(--muted); }
.callout .btn { flex: 0 0 auto; }
.callout-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.callout-row p { margin: 0; flex: 1 1 320px; }

/* The network: a switch in the header (two pills, the open one filled) and, on the testnet, a bar above the header */
.netswitch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--on-band-line); background: var(--on-band-hover); }
.net { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--on-band-muted); }
.net i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .7; }
.net.mainnet i { background: var(--net-mainnet); opacity: 1; }
.net.testnet i { background: var(--net-testnet); opacity: 1; }
a.net:hover { color: var(--on-band); background: var(--on-band-hover); text-decoration: none; }
.net.on { background: var(--on-band); color: var(--band); }
.netbar { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); color: var(--text); font-size: 13.5px; }
.netbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-top: 7px; padding-bottom: 7px; }
.netbar strong { text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.netbar a { font-weight: 650; margin-left: auto; }
/* The bar stays at the top while the page scrolls (the menu bar sticks right under it; its height is in --netbar-h, set by header.js). On a phone it is one
   short line, so it does not take much of the screen. */
.netbar { position: sticky; top: 0; z-index: 51; }
.netbar .short { display: none; }
@media (max-width: 640px) {
    .netbar .wrap { flex-wrap: nowrap; gap: 10px; padding-top: 7px; padding-bottom: 7px; }
    .netbar strong { flex: 0 0 auto; }
    .netbar span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
    .netbar .long { display: none; }
    .netbar .short { display: inline; }
    .netbar a { flex: 0 0 auto; white-space: nowrap; margin-left: 0; }
}
body[data-network="testnet"] .header-bar { border-bottom-color: var(--net-testnet); }
.tabhead.flush { padding: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.io h2 + .scroll, .io h2 + p { margin-top: 0; }

/* "What it did" in a list is one short line; what does not fit is cut with an ellipsis and whole in the tooltip */
.t td.what { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; }

/* Search: a field in the header on every page but the main one (whose hero is the search, #764), and the results */
.header-search { order: 1; position: relative; display: flex; align-items: center; flex: 1 1 140px; max-width: 460px; min-width: 0; border: 1px solid var(--on-band-line); border-radius: 999px; background: var(--on-band-hover); }
.header-search input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 4px 0 16px; border: 0; background: transparent; color: var(--on-band); font: inherit; font-size: 15px; outline: none; }
.header-search .search-key { border-color: var(--on-band-line); background: transparent; color: var(--on-band-muted); }
.header-search input:not(:placeholder-shown) + .search-key { display: none; }
.header-search input::placeholder { color: var(--on-band-muted); }
.header-search > button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--on-band); cursor: pointer; border-radius: 999px; }
.header-search:focus-within { outline: 2px solid var(--on-band); outline-offset: 2px; }
.header-search svg { width: 18px; height: 18px; }
/* Under 900 px (a phone, and a window between a phone and a desktop, where logo, search and tools no longer fit on one line) the search is its own line in the dark band */
@media (max-width: 900px) { .header-search { order: 3; flex: 1 1 100%; max-width: none; } }

/* The `/` key that goes to the search (barsearch.js), shown on a screen with a mouse only: a phone or a tablet has no such key to press */
.search-key { display: none; flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 5px; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--muted); font-family: var(--mono); font-size: 12px; line-height: 1; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) { .search-key { display: inline-grid; } }

/* What the search will find, under the field while you type (searchhint.js, #764): a row that sends the form. It hangs under the field of the header
   and of the search page. In the bar's fold-out field and in the main page's hero (which cuts off what hangs out of it, for its mark) it is a line of
   the form, in the colours of the dark band there */
.search-hint { position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; right: 0; min-width: min(320px, calc(100vw - 32px)); padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--header-shadow); color: var(--text); }
.sh-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--accent-soft); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sh-row:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.sh-tag { flex: 0 0 auto; min-width: 64px; padding: 4px 8px; border-radius: 999px; background: var(--surface); color: var(--accent-text); font-size: 12px; font-weight: 700; text-align: center; }
.sh-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sh-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; font-size: 15px; }
.sh-sub { font-size: 13px; color: var(--muted); }
.sh-key { display: none; flex: 0 0 auto; padding: 2px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--muted); font-family: var(--mono); font-size: 12px; }
@media (hover: hover) and (pointer: fine) { .sh-key { display: inline-block; } }
.bar-search .search-hint, .hero .search-hint { position: static; flex: 1 1 100%; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.hero .sh-row { background: var(--on-band-hover); color: var(--on-band); }
.hero .sh-sub { color: var(--on-band-muted); }
/* Up to 760 px logo and tools no longer share a line well (the tools wrapped and sat right-aligned under the logo with an empty left side): the tools are a
   line of their own, spread over the width */
@media (max-width: 760px) {
    .tools { flex: 1 1 100%; margin-left: 0; justify-content: space-between; }
}
/* On a narrow phone the three tools just fit on one line when they are a little smaller */
@media (max-width: 440px) {
    .tools { gap: 6px; }
    .net { padding: 5px 9px; font-size: 12.5px; }
    .tools .icon-btn { width: 40px; height: 40px; }
}
@media (max-width: 380px) {
    .net { padding: 5px 7px; font-size: 12px; }
    .tools .icon-btn { width: 36px; height: 36px; }
}
.page-search { margin-bottom: 14px; }
.hints { margin: 6px 0 0; padding-left: 20px; color: var(--muted); }
.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.results li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.results li:last-child { border-bottom: 0; padding-bottom: 0; }

/* the whale comparison: a swatch and a bar in the colour of the group */
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; background: var(--muted); }
.share-fg.g-shrimp, .swatch.g-shrimp { fill: var(--group-shrimp); background: var(--group-shrimp); }
.share-fg.g-fish, .swatch.g-fish { fill: var(--group-fish); background: var(--group-fish); }
.share-fg.g-dolphin, .swatch.g-dolphin { fill: var(--group-dolphin); background: var(--group-dolphin); }
.share-fg.g-shark, .swatch.g-shark { fill: var(--group-shark); background: var(--group-shark); }
.share-fg.g-whale, .swatch.g-whale { fill: var(--group-whale); background: var(--group-whale); }
.share-fg.g-humpback, .swatch.g-humpback { fill: var(--group-humpback); background: var(--group-humpback); }
.share.thin { height: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.t td.wide, .t th.wide { min-width: 140px; width: 28%; }
.cardfoot { margin: 0; padding: 12px 18px 16px; }
.tab.soon { opacity: .5; cursor: not-allowed; }
.idline { overflow-wrap: anywhere; }
/* a band for each day of the history: the date, a bar of what came in against what went out, and the balance at the end of the day with the change; the table of its rows goes under it */
.day { display: grid; grid-template-columns: minmax(190px, auto) 1fr auto; align-items: center; gap: 8px 24px; padding: 10px 18px; color: inherit; text-decoration: none; background: var(--surface2); border-top: 1px solid var(--border); border-left: 3px solid transparent; }
.day:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface2)); text-decoration: none; }
.day.open { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface2)); }
.day-date { display: inline-flex; align-items: center; gap: 10px; line-height: 1.3; }
.day-date b { font-size: 14.5px; }
.day-flow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.day-flow .flowbar { display: block; width: 100%; height: 8px; }
.flow-bg { fill: var(--surface2); }
.flow-in { fill: var(--ok); }
.flow-out { fill: var(--bad); }
.day-balance { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.day-balance b { font-size: 15px; white-space: nowrap; }
.in { color: var(--ok); }
.out { color: var(--bad); }
.chev { display: inline-block; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); position: relative; }
.chev::after { content: ""; position: absolute; left: 8px; top: 6px; width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.day.open .chev::after { left: 6px; top: 8px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--accent); border-bottom: 0; }
@media (max-width: 640px) {
    .day { grid-template-columns: 1fr auto; padding: 10px 14px; }
    .day-flow { grid-column: 1 / -1; grid-row: 2; }
}
/* the head of an address in a wallet: the wallet and the address side by side, the one asked for as a box with the switch */
.whead { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.whead > .card { display: flex; flex-direction: column; min-width: 0; }
.whead > .card > .cardfoot, .whead .scopefoot { margin-top: auto; }
.whead .thisaddr { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.addrhead .lab, .whead .card-head .lab { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; color: var(--muted); }
.scopefoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 18px; border-top: 1px solid var(--border); }
.whead .strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: -1px; }
.whead .strip.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.whead .stat { border-bottom: 1px solid var(--border); }
/* the box of the address in the wallet view is the smaller of the two: three tiles to a row, smaller figures */
.whead .thisaddr .strip { flex: 1 1 auto; grid-auto-rows: 1fr; }
.whead .strip.compact .stat { padding: 10px 12px; }
/* a balance is one word: it never wraps, it gets smaller with its box (a tile is a third of the box less its padding, 13 characters of a mono figure are 7.8 em) */
.whead > .card { container-type: inline-size; }
.whead .strip .stat .val { white-space: nowrap; overflow-wrap: normal; font-size: clamp(14px, calc(4.2cqw - 5px), 24px); }
.whead .strip.cols2 .stat .val { font-size: clamp(14px, calc(6.4cqw - 5px), 20px); }
.whead .strip.compact .stat .val { font-size: clamp(12px, calc(4.2cqw - 4px), 16px); margin-top: 0; }
.whead .strip.compact .stat .sub { font-size: 12px; }
.whead .strip.compact .stat:nth-child(3n) { border-right: 0; }
.whead .strip.compact .stat:not(:nth-child(3n)) { border-right: 1px solid var(--border); }
.whead .thisaddr .card-body { padding-top: 10px; padding-bottom: 10px; }
.whead .thisaddr .addrhead { padding-top: 10px; padding-bottom: 10px; }
.whead .strip .stat:nth-child(3n) { border-right: 0; }
.whead .strip.cols2 .stat:nth-child(3n) { border-right: 1px solid var(--border); }
.whead .strip.cols2 .stat:nth-child(2n) { border-right: 0; }
.whead .strip.cols2 .stat .val { font-size: 20px; }
@media (max-width: 640px) {
    .whead .strip, .whead .strip.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .whead .strip .stat:nth-child(3n) { border-right: 1px solid var(--border); }
    .whead .strip .stat:nth-child(2n) { border-right: 0; }
    .whead .strip.compact .stat:nth-child(3n) { border-right: 1px solid var(--border); }
    .whead .strip.compact .stat:nth-child(2n) { border-right: 0; }
    .whead .strip .stat .val, .whead .strip.cols2 .stat .val, .whead .strip.compact .stat .val { font-size: clamp(14px, calc(5.6cqw - 4px), 17px); }
}
.bigaddr h1 { display: inline; margin: 0; }
.bigaddr .mono { font-size: 1.05rem; }
.shbar { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--border); margin-top: 8px; }
.shfill { fill: var(--accent); }
.whybox { border-top: 1px solid var(--border); }
.whykey { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.whykey .k { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; background: currentColor; }
.whykey .k.r-input { background: var(--series-1); }
.whykey .k.r-cpid { background: var(--series-3); }
.whykey .k.r-beacon { background: var(--series-2); }
.whykey .k.r-mrc { background: var(--accent); }
.whykey .k.r-vote { background: var(--muted); }
.whykey .k.r-change { background: var(--series-5); }
@media (max-width: 1040px) {
    .whead { grid-template-columns: minmax(0, 1fr); }
}
/* the switch between the wallet and the address is a full-width target on a phone */
@media (max-width: 640px) {
    .scopebar .btn, .scopefoot .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-left: 0; }
}

/* the scope of the address history (the wallet or the address alone) and the marker of the address the page was opened on */
.scopebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 12px; }
.scopebar .btn { margin-left: auto; }
.here { color: var(--accent-text); font-size: 0.75em; }
.t.txs td:first-child { width: 90px; }
.t.txs td:nth-child(4) { white-space: normal; }

/* below a wide screen there is no room for six columns (a tablet squeezed the description into a narrow column, #771): each transaction becomes a
   small card of three lines (type and amount, what and the balance, time and id) */
@media (max-width: 1199px) {
    .t.txs, .t.txs tbody { display: block; }
    .t.txs tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "type amount" "desc balance" "time tx"; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
    .t.txs tr:last-child { border-bottom: 0; }
    .t.txs td { display: block; padding: 0; border: 0; width: auto; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
    .t.txs td:nth-child(1) { grid-area: time; width: auto; }
    .t.txs td:nth-child(2) { grid-area: type; }
    .t.txs td:nth-child(3) { grid-area: tx; text-align: right; }
    .t.txs td:nth-child(4) { grid-area: desc; }
    .t.txs td:nth-child(5) { grid-area: amount; font-weight: 650; }
    .t.txs td:nth-child(6) { grid-area: balance; font-size: 12.5px; align-self: end; }
}

/* the wallet tab: why the addresses are one wallet */
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; }
.why > div { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; background: var(--surface2); }
.why b { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.whycount { margin-left: auto; font-weight: 500; }
.whyhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 4px 0; }
.whyhead h2 { margin: 0; font-size: 18px; }
.sharecell { display: grid; grid-template-columns: minmax(40px, 1fr) 46px; align-items: center; gap: 10px; min-width: 96px; }
/* the evidence is a sentence: it wraps, so the table fits the card at its widest and the last column is not cut off */
.t.walletrows td:nth-child(5) { white-space: normal; min-width: 200px; max-width: 320px; overflow-wrap: anywhere; }
.t.walletrows td:nth-child(6) { white-space: nowrap; }
.sharecell .shbar { margin-top: 0; }
.sharecell .mono { text-align: right; }
.reasonbar { display: block; width: 100%; height: 10px; border-radius: 5px; background: var(--border); margin-top: 6px; }
.r-input { fill: var(--series-1); }
.r-cpid { fill: var(--series-3); }
.r-beacon { fill: var(--series-2); }
.r-mrc { fill: var(--accent); }
.r-vote { fill: var(--muted); }
.r-change { fill: var(--series-5); }

/* a phone has no room for the columns of the wallet table and of the address list: each row is a small card */
/* the wallet table has seven columns: below a wide screen each address is a small card (#771) */
@media (max-width: 1199px) {
    .t.walletrows thead { display: none; }
    .t.walletrows, .t.walletrows tbody { display: block; }
    .t.walletrows tr { display: grid; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
    .t.walletrows td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; max-width: none; overflow-wrap: anywhere; width: auto; }
    .t.walletrows tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "addr addr" "bal share" "reason reason" "evid evid" "seen seen"; }
    .t.walletrows td:nth-child(1) { grid-area: addr; }
    .t.walletrows td:nth-child(2) { grid-area: bal; text-align: left; font-weight: 650; }
    .t.walletrows td:nth-child(3) { grid-area: share; }
    .t.walletrows td:nth-child(4) { grid-area: reason; }
    .t.walletrows td:nth-child(5) { grid-area: evid; min-width: 0; max-width: none; }
    .t.walletrows td:nth-child(6) { grid-area: seen; text-align: left; }
    .t.walletrows td:nth-child(6)::before { content: "first seen in block "; font-family: inherit; color: var(--muted); }
}

/* the richest wallets: a card each up to a small laptop (#771); the computer's line under the address is the card's wallet cell here */
@media (max-width: 1023px) {
    .t.two.addrrows td { padding: 0; }
    .t.addrrows .sub.d-only { display: none; }
    .t.addrrows thead { display: none; }
    .t.addrrows, .t.addrrows tbody { display: block; }
    .t.addrrows tr { display: grid; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
    .t.addrrows td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; overflow-wrap: anywhere; width: auto; }
    .t.addrrows tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "rank addr bal" ". group wallet" ". share share" ". cpid seen"; align-items: center; }
    .t.addrrows td:nth-child(1) { grid-area: rank; text-align: left; }
    .t.addrrows td:nth-child(2) { grid-area: addr; }
    .t.addrrows td:nth-child(3) { grid-area: group; }
    .t.addrrows td:nth-child(4) { grid-area: wallet; text-align: right; }
    .t.addrrows td:nth-child(5) { grid-area: cpid; }
    .t.addrrows td:nth-child(6) { grid-area: bal; text-align: right; font-weight: 650; }
    .t.addrrows td:nth-child(7) { grid-area: share; }
    .t.addrrows td:nth-child(8) { grid-area: seen; text-align: right; }
    .t.addrrows td:nth-child(8)::before { content: "block "; color: var(--muted); }
}

/* below a wide screen the unspent outputs and the blocks staked are cards too (#771) */
@media (max-width: 1199px) {
    .t.outrows thead, .t.stakedrows thead { display: none; }
    .t.outrows, .t.outrows tbody, .t.stakedrows, .t.stakedrows tbody { display: block; }
    .t.outrows tr, .t.stakedrows tr { display: grid; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
    .t.outrows td, .t.stakedrows td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; overflow-wrap: anywhere; width: auto; }
    .t.outrows tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "type value" "out status" "block created"; }
    .t.outrows td:nth-child(1) { grid-area: out; }
    .t.outrows td:nth-child(2) { grid-area: type; }
    .t.outrows td:nth-child(3) { grid-area: block; }
    .t.outrows td:nth-child(3)::before { content: "block "; color: var(--muted); }
    .t.outrows td:nth-child(4) { grid-area: created; text-align: right; }
    .t.outrows td:nth-child(5) { grid-area: value; text-align: right; font-weight: 650; }
    .t.outrows td:nth-child(6) { grid-area: status; text-align: right; }
    .t.stakedrows tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "block reward" "type research" "time status"; }
    .t.stakedrows td:nth-child(1) { grid-area: block; }
    .t.stakedrows td:nth-child(2) { grid-area: time; }
    .t.stakedrows td:nth-child(3) { grid-area: type; }
    .t.stakedrows td:nth-child(4) { grid-area: reward; text-align: right; font-weight: 650; }
    .t.stakedrows td:nth-child(5) { grid-area: research; text-align: right; }
    .t.stakedrows td:nth-child(5)::before { content: "research "; color: var(--muted); }
    .t.stakedrows td:nth-child(6) { display: none; }
    .t.stakedrows td:nth-child(7) { grid-area: status; text-align: right; }
}

/* a note about a list: a quiet block, an accent bar and a small info icon, the text in the normal colour at a readable size */
.tabnote { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 8px 12px; border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface2); font-size: 14px; line-height: 1.5; color: var(--text); }
.tabnote-icon { flex: none; display: inline-flex; margin-top: 2px; color: var(--accent-text); }
.tabnote-icon svg { width: 16px; height: 16px; }
.tabnote span { min-width: 0; }

/* the range switch of the address charts: a bar with a background, the buttons on the left and what the range is on the right */
.chartbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: var(--gap, 16px); padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.chartbar-ranges { display: flex; flex-wrap: wrap; gap: 8px; }
.chartbar-text { min-width: 0; }

/* the polls: a block for each poll and for each vote, with the bar of the answers; the answers have five colours in their order */
.vl { display: flex; flex-direction: column; }
.vhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, auto) 150px; gap: 4px 24px; padding: 9px 18px; font-size: 12.5px; font-weight: 600; color: var(--muted); border-top: 1px solid var(--border); background: var(--surface2); }
.vhead .r { text-align: right; }
.pr, .vr { display: grid; gap: 4px 24px; align-items: start; padding: 12px 18px; border-top: 1px solid var(--border); }
.pr { grid-template-columns: minmax(0, 1fr) 230px; padding-block: 14px; }
.vr { grid-template-columns: minmax(0, 1fr) minmax(190px, auto) 150px; align-items: center; }
.pr:hover, .vr:hover { background: var(--surface2); }
.pr .who, .vr .who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr .who a { font-weight: 650; font-size: 15.5px; }
.pr .det, .vr .det { font-size: 13px; color: var(--muted); margin-top: 3px; }
.pr .pside { text-align: right; }
.pr .pside b, .vr .wt b { display: block; font-size: 16px; }
.pr .pside .sh, .vr .wt .sh { font-size: 12.5px; color: var(--muted); }
.vr .stat { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; border: 0; padding: 0; min-width: 0; flex: none; }
.vr .wt { text-align: right; }
.vr .wt .share { height: 5px; margin-top: 4px; }
.abar { display: block; width: 100%; max-width: 520px; height: 8px; margin-top: 8px; }
.pr .pmain .abar { max-width: none; }
.abar .a0, .share-fg.g-a0, .akey.a0 { fill: var(--series-1); background: var(--series-1); }
.abar .a1, .share-fg.g-a1, .akey.a1 { fill: var(--series-2); background: var(--series-2); }
.abar .a2, .share-fg.g-a2, .akey.a2 { fill: var(--series-3); background: var(--series-3); }
.abar .a3, .share-fg.g-a3, .akey.a3 { fill: var(--muted); background: var(--muted); }
.abar .a4, .share-fg.g-a4, .akey.a4 { fill: var(--accent); background: var(--accent); }
.share-fg.g-acc { fill: var(--accent); }
.akey { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; flex: none; }
/* The answers of a poll in the list (#777): side by side where they fit, an answer a line on a phone; "N other answers" is the grey part of the bar */
.abar .rest, .akey.rest { fill: color-mix(in srgb, var(--muted) 40%, var(--surface)); background: color-mix(in srgb, var(--muted) 40%, var(--surface)); }
.pans { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.pans li { display: inline-flex; align-items: baseline; gap: 0 6px; min-width: 0; }
.pans li .akey { margin-right: 0; align-self: center; }
.pans li.rest { color: var(--muted); }
.pans li.rest b { font-weight: 500; }
@media (max-width: 760px) {
    .pans { flex-direction: column; gap: 3px; }
    .pans li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 0 8px; }
    .pans li b { text-align: right; }
}
@media (max-width: 640px) {
    .vhead { display: none; }
    .pr { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
    .pr .pside { text-align: left; }
}
/* A list of votes on a phone (a vote page's CPID tab): the columns stack */
@media (max-width: 760px) {
    .vhead { display: none; }
    .vr { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
    .vr .wt { text-align: left; }
}
/* The votes of a poll (#777): its own button for the vote, so the voter's link is the voter's */
.vote-open { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.votes-t td.text { min-width: 12rem; }
.votes-t td.vote-state { white-space: normal; min-width: 8rem; max-width: 14rem; }
.votes-t td .badge { vertical-align: 1px; }
@media (max-width: 760px) { .votes-t .vote-open { margin-top: 4px; } }

/* the weight formula of a poll: the equation in terms, and the factor with its numbers */
.eq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.eq-term { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); font-size: 15px; }
.eq-op { color: var(--muted); font-size: 18px; }
.eq-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 24px; margin: 0; }
.eq-terms dt { font-weight: 600; font-size: 14px; }
.eq-terms dd { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.eq-sub { margin-top: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.eq-num { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); min-width: 0; }
.eq-num.strong { background: var(--accent-soft); border-color: transparent; }
.eq-num .lab { font-size: 12px; color: var(--muted); }
.eq-num .val { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.eq-num .sub { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .eq-op { font-size: 16px; } .eq-num { flex: 1 1 140px; } }

/* the result and the chart of a poll side by side on a wide screen; the formula folds under the result */
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap, 16px); align-items: start; }
@media (min-width: 1100px) { .pgrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fold { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.fold > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 600; list-style: none; border-radius: var(--r); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(-45deg); transition: transform .15s; margin: 0 4px 0 2px; }
.fold[open] > summary::before { transform: rotate(45deg); }
.fold > summary::after { content: "Show"; margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--accent-text); }
.fold[open] > summary::after { content: "Hide"; }
.fold > summary:hover { background: var(--accent-soft); }
.fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fold[open] > summary { border-bottom: 1px solid var(--border); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fold-body { padding: 14px; }

/* the wallet's check of a poll, next to its status */
.wcheck { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }

/* the page of one vote: how the weight was made, the claimed transactions */
.steps { display: grid; }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; padding: 16px 18px; border-top: 1px solid var(--border); align-items: start; }
.step:first-child { border-top: 0; }
.step .num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; font-size: 13px; }
.step > div:nth-child(2) { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.step .r { text-align: right; font-size: 16px; font-weight: 600; white-space: nowrap; }
.stackbar { display: block; width: 100%; max-width: 520px; height: 8px; margin-top: 8px; }
.stackbar .a0 { fill: var(--series-1); }
.stackbar .a2 { fill: var(--series-3); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.rawclaim { margin: 12px 0 0; padding: 12px 14px; max-height: 480px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .step { grid-template-columns: auto minmax(0, 1fr); }
    .step .r { grid-column: 2; text-align: left; }
}
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* the thread of an output (the vote page, #777) */
.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.thread li { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.thread li.win { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); }
.thread li.this { outline: 2px solid var(--accent-soft); }
.thread .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }

/* the summary of a poll: the weight against the active vote weight, and the votes split by what became of them */
.psum { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); border-top: 1px solid var(--border); }
.psum-panel { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; min-width: 0; }
.psum-panel + .psum-panel { border-left: 1px solid var(--border); }
.psum .lab { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.psum .big { font-size: 30px; font-weight: 650; line-height: 1.1; overflow-wrap: anywhere; }
.psum .big .unit { margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.psum-bar { display: block; width: 100%; max-width: 520px; height: 8px; margin-top: 4px; }
.psum-bar .a4 { fill: var(--accent); }
.psum-bar .vs-counted, .akey.vs-counted { fill: var(--ok); background: var(--ok); }
.psum-bar .vs-partial, .akey.vs-partial { fill: var(--warn); background: var(--warn); }
.psum-bar .vs-superseded, .akey.vs-superseded { fill: var(--muted); background: var(--muted); }
.psum-bar .vs-invalid, .akey.vs-invalid { fill: var(--bad); background: var(--bad); }
.psum-line { font-size: 13.5px; }
.psum-legend { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.psum-legend li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.psum-legend .akey { align-self: center; }
@media (max-width: 720px) { .psum-panel + .psum-panel { border-left: 0; border-top: 1px solid var(--border); } .psum .big { font-size: 26px; } }

/* the header of a poll: kind and status above, the title and the question, the facts in cells */
.pollhead-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 18px 0; }
.pollhead-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.kind { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); font-weight: 650; }
.pollhead-main { padding: 10px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.pollhead-main h1 { margin: 0; font-size: 28px; line-height: 1.2; overflow-wrap: anywhere; }
.pollhead-q { margin: 0; max-width: 820px; font-size: 16px; line-height: 1.55; color: var(--text); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0; border-top: 1px solid var(--border); }
.facts > div { padding: 12px 18px; border-right: 1px solid var(--border); min-width: 0; }
.facts > div:last-child { border-right: 0; }
.facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.facts dd { margin: 3px 0 0; font-size: 14.5px; overflow-wrap: anywhere; }
.facts dd a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 720px) { .pollhead-main h1 { font-size: 23px; } .facts > div { border-right: 0; border-bottom: 1px solid var(--border); } }
/* the answers of a poll: a card each, the share large, the bar, the weight under it */
/* The result of a poll (#777): the answers largest first, a compact row each; two columns where the card is wide enough */
.prank-box { container-type: inline-size; }
.prank-head { margin: 0 0 6px; }
.prank { border-top: 1px solid var(--border); }
@container (width >= 680px) { .prank { columns: 2; column-gap: 0; } }
.prow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; padding: 9px 10px; border-bottom: 1px solid var(--border); break-inside: avoid; }
.prow.win { background: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
.prow-rank { font-size: 12.5px; color: var(--muted); }
.prow-label { display: block; font-weight: 600; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.prow-label .akey { margin-right: 7px; vertical-align: 0; }
.prow-label .badge { margin-left: 6px; vertical-align: 1px; }
.prow-share { font-weight: 700; white-space: nowrap; }
.prow-sub { grid-column: 2 / -1; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.prow-sub .share { flex: 1 1 auto; min-width: 40px; height: 5px; margin: 0; }
.prow-sub > span { white-space: nowrap; }
.share-fg.g-rest { fill: color-mix(in srgb, var(--muted) 45%, var(--surface)); }
.prank-more summary { display: flex; justify-content: center; min-height: 44px; align-items: center; color: var(--accent-text); font-weight: 600; cursor: pointer; list-style: none; }
.prank-more summary::-webkit-details-marker { display: none; }
.prank-more .when-open, .prank-more[open] .when-closed { display: none; }
.prank-more[open] .when-open { display: inline; }
.prank-more[open] summary { order: 2; }
.prank-more[open] { display: flex; flex-direction: column; }
/* the scale of the share of the active vote weight, with the share a poll type needs */
.psum-scale { display: block; width: 100%; max-width: 560px; height: auto; margin-top: 4px; }
.psum-scale .a4 { fill: var(--accent); }
.psum-scale .tick { fill: var(--muted); }
.psum-scale .tick.reached { fill: var(--ok); }
.psum-scale .tick.short { fill: var(--warn); }
.psum-scale text { fill: var(--muted); font-size: 11.5px; }

/* the badges of a poll on the list sit on a row of their own below the title */
.pr .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; }

/* the polls card of the main page */
.pollcard .pc { display: grid; gap: 5px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pollcard .pc:last-of-type { border-bottom: 0; padding-bottom: 0; }
.pc-title { font-weight: 650; overflow-wrap: anywhere; }
.pc-meta { font-size: 13px; color: var(--muted); }
.pc-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.avwmini { display: block; width: 100%; height: 8px; margin-top: 2px; }
.avwmini .share-bg { fill: var(--surface2); }
.avwmini .a4 { fill: var(--accent); }
.avwmini .tick { fill: var(--muted); }
.avwmini .tick.reached { fill: var(--ok); }
.avwmini .tick.short { fill: var(--warn); }

/* the projects: a row for each project, the share of the project's RAC that is Gridcoin's, and the small trend of it */
.pjtools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.pjfind { display: flex; flex: 1 1 260px; max-width: 420px; gap: 8px; }
.find { flex: 1 1 auto; min-width: 0; min-height: 38px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--field-border); background: var(--field-bg); color: var(--field-text); font: inherit; }
.find::placeholder { color: var(--field-placeholder); }
.sortchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pjhead, .pj { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(130px, .8fr) minmax(150px, .9fr) minmax(190px, 1fr) 96px; gap: 4px 22px; align-items: center; padding: 12px 18px; }
.pjhead { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface2); border-top: 1px solid var(--border); }
.pj { border-top: 1px solid var(--border); }
.pj:hover { background: var(--surface2); }
.pj .who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj .who a, .pj .pname { font-weight: 650; font-size: 15.5px; }
.pj .det { font-size: 13px; color: var(--muted); margin-top: 3px; }
.pj b.mono { display: block; font-size: 16px; }
.pj .sh { font-size: 12.5px; color: var(--muted); }
.pj .share { margin-top: 5px; height: 8px; }
.trend { display: block; width: 84px; height: 26px; }
.trend polyline { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.abar.wide { max-width: none; height: 16px; margin-top: 0; }
.pjlegend { gap: 6px 18px; font-size: 13px; margin-top: 10px; }
@media (max-width: 860px) {
    .pjhead { display: none; }
    .pj { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 14px; }
    .pj > :first-child, .pj > :nth-child(4) { grid-column: 1 / -1; }
}

/* the users of a project: a row for each user; on a phone the figures sit under the name, each with its label */
.urhead, .ur { display: grid; grid-template-columns: 52px minmax(210px, 1.3fr) minmax(0, 1.5fr) 84px 130px 120px 120px; gap: 4px 16px; align-items: center; padding: 11px 18px; }
.urhead { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface2); border-top: 1px solid var(--border); }
.urhead .r, .ur .r { text-align: right; }
.ur { border-top: 1px solid var(--border); }
.ur:hover { background: var(--surface2); }
.ur .who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.ur .uname { min-width: 0; overflow-wrap: anywhere; }
.ur .udet { display: block; }
.ur .c::before { content: none; }
.ur .urank { display: none; }
/* A user below 1 100 px (#758 C5), where the seven columns no longer fit: one row. Left: the rank and the name, the team and when it joined, the CPID,
   the RAC; right: the magnitude and the reward a day. The row number goes (the rank says it), the rank column, the copy button and the "Gridcoin" badge
   (every user listed has one unless it says "No beacon") */
@media (max-width: 1099px) {
    .urhead { display: none; }
    .ur { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 14px; gap: 2px 12px; align-items: start; }
    .ur .place, .ur .rank { display: none; }
    .ur .urank { display: inline; margin-right: 6px; font-weight: 700; }
    .ur .uname { grid-column: 1; grid-row: 1; }
    .ur .who { grid-column: 1; grid-row: 2; }
    .ur .who .copy, .ur .who .badge.ok { display: none; }
    .ur [data-label="RAC"] { grid-column: 1; grid-row: 3; text-align: left; font-size: 12.5px; color: var(--muted); }
    .ur [data-label="RAC"]::before { content: "RAC "; }
    .ur [data-label="Magnitude"] { grid-column: 2; grid-row: 1; font-weight: 700; }
    .ur [data-label="Reward a day"] { grid-column: 2; grid-row: 2; font-size: 12.5px; }
    .ur [data-label="Reward a day"]:not([data-none])::after { content: " GRC a day"; color: var(--muted); }
}

/* the mark of a CPID at the most magnitude it can get */
.capwarn { display: inline-flex; vertical-align: middle; color: var(--warn); }
.capwarn svg { width: 16px; height: 16px; }

/* the teams of a project: a row for each team, the figures under the name on a phone */
.trhead, .tr { display: grid; grid-template-columns: 52px minmax(0, 2fr) 100px 120px 110px 130px; gap: 4px 16px; align-items: center; padding: 11px 18px; }
.trhead { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface2); border-top: 1px solid var(--border); }
.trhead .r, .tr .r { text-align: right; }
.tr { border-top: 1px solid var(--border); }
.tr:hover { background: var(--surface2); }
.tr .uname { min-width: 0; overflow-wrap: anywhere; }
.tr .udet { display: block; }
@media (max-width: 860px) {
    .trhead { display: none; }
    .tr { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 8px 12px; }
    .tr .place { display: none; }
    .tr .uname { grid-column: 1 / -1; }
    .tr .r { text-align: left; }
    .tr .c[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); }
}

/* the history of a project on the chain: a date, what happened and a label */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 4px 16px; padding: 11px 18px; border-top: 1px solid var(--border); align-items: baseline; }
.tl li:first-child { border-top: 0; }
@media (max-width: 640px) { .tl li { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; } .tl li > :first-child { grid-column: 1 / -1; } }

/* the CPID of the CPID page, as large as a title but in the figures' type, broken where it must */
.cpid-title { font-size: 24px; line-height: 1.3; word-break: break-all; }

/* the projects of a CPID: a row for each project; on a phone the figures sit under the name, each with its label */
.cphead, .cprow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) 90px 128px 110px 100px 120px; gap: 4px 16px; align-items: center; padding: 11px 18px; }
.cprow .trendc { display: flex; align-items: center; gap: 8px; }
.cprow .trendc .trend { width: 64px; height: 22px; flex: none; }
.up { color: var(--ok); font-weight: 650; }
.down { color: var(--bad); font-weight: 650; }
.cphead { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface2); border-top: 1px solid var(--border); }
.cphead .r, .cprow .r { text-align: right; }
.cprow { border-top: 1px solid var(--border); }
.cprow:hover { background: var(--surface2); }
.cprow.dim .mono, .cprow.dim .c.uname { color: var(--muted); }
.cprow .who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.cprow .uname { min-width: 0; overflow-wrap: anywhere; }
.cprow .udet { display: block; }
.cprow .cpnote { grid-column: span 2; font-size: 13px; color: var(--muted); }
.cprow.total { background: var(--surface2); }
@media (max-width: 860px) {
    .cphead { display: none; }
    /* The name and the project on two short lines, then the RAC and its trend, then the share, the magnitude and the reward in one row of three */
    .cprow { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 14px; gap: 6px 10px; }
    .cprow .who, .cprow .uname { grid-column: 1 / -1; }
    .cprow .uname { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 14px; }
    .cprow .trendc { grid-column: span 2; }
    .cprow .trendc::before { content: none; }
    .cprow .cpnote { grid-column: span 2; }
    .cprow .r { text-align: left; }
    .cprow .c[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
    .cprow .trendc { flex-wrap: wrap; align-items: flex-end; }
}

/* the beacons of a CPID: the 180 days of the current one as a bar, and the history as rows (cards on a phone) */
.beaconbody { display: flex; flex-direction: column; gap: 16px; }
.lifehead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.life { display: block; width: 100%; height: 14px; overflow: visible; }
.life .life-v { fill: color-mix(in srgb, var(--ok) 55%, transparent); }
.life .life-r { fill: color-mix(in srgb, var(--warn) 55%, transparent); }
.life .life-m { fill: var(--text); }
.life.gone .life-v, .life.gone .life-r { fill: color-mix(in srgb, var(--bad) 40%, transparent); }
.lifekey { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.lifekey i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.lifekey .k-v { background: color-mix(in srgb, var(--ok) 55%, transparent); }
.lifekey .k-r { background: color-mix(in srgb, var(--warn) 55%, transparent); }
.lifekey .k-m { width: 3px; background: var(--text); }
.bhead, .brow { display: grid; grid-template-columns: 110px 110px minmax(0, 1fr) 80px 120px 130px; gap: 4px 16px; align-items: center; padding: 11px 18px; }
.bhead { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface2); border-top: 1px solid var(--border); }
.brow { border-top: 1px solid var(--border); }
.brow:hover { background: var(--surface2); }
@media (max-width: 860px) {
    .bhead { display: none; }
    .brow { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 14px; gap: 6px 10px; }
    .brow .what { grid-column: 1 / -1; order: -1; }
    .brow .c[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
}

.tline { display: block; width: 100%; height: 22px; }
.tline .tl-none { fill: color-mix(in srgb, var(--muted) 30%, transparent); }
.tline .tl-on { fill: color-mix(in srgb, var(--ok) 65%, transparent); }
.lifekey .k-n { background: color-mix(in srgb, var(--muted) 30%, transparent); }

/* the manual research claims of a CPID (#512): rows with the head of a table, cards on a phone */
.chead, .crow { display: grid; grid-template-columns: 200px 90px 130px repeat(2, minmax(0, 1fr)) 70px minmax(0, 1fr) 80px; gap: 4px 16px; align-items: center; padding: 11px 18px; }
.chead { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface2); border-top: 1px solid var(--border); }
.crow { border-top: 1px solid var(--border); }
.crow .c { min-width: 0; }
.crow:hover { background: var(--surface2); }
.chead .r, .crow .r { text-align: right; }
@media (max-width: 860px) {
    .chead { display: none; }
    .crow { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 14px; gap: 6px 10px; }
    .crow .c[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
    .crow .r { text-align: left; }
}

/* the staked blocks and the addresses of a CPID: rows with the head of a table, cards on a phone */
.pjtools .right { margin-left: auto; }
.shead, .srow { display: grid; grid-template-columns: 100px 220px minmax(0, 1fr) 140px 140px 150px; gap: 4px 16px; align-items: center; padding: 11px 18px; }
.ahead, .arow { display: grid; grid-template-columns: minmax(0, 1fr) 170px 190px minmax(0, 1.3fr) 150px; gap: 4px 16px; align-items: center; padding: 11px 18px; }
.shead, .ahead { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface2); border-top: 1px solid var(--border); }
.srow, .arow { border-top: 1px solid var(--border); }
.srow .c { min-width: 0; }
.srow:hover, .arow:hover { background: var(--surface2); }
.shead .r, .ahead .r, .srow .r, .arow .r { text-align: right; }
.arow .share { display: block; width: 140px; max-width: 100%; margin-top: 4px; }
@media (max-width: 860px) {
    .shead, .ahead { display: none; }
    .srow { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 14px; gap: 6px 10px; }
    .arow { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px; gap: 6px 10px; }
    .srow .c[data-label]::before, .arow .c[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
    .srow .r, .arow .r { text-align: left; }
    .arow .c:first-child { grid-column: 1 / -1; }
    .arow .c:nth-child(4) { grid-column: 1 / -1; }
}

/* the CPID directory: the leaderboard and the beacon lists, rows that become cards on a phone */
.lhead, .lrow { display: grid; grid-template-columns: 100px minmax(0, 1.5fr) 120px 80px 130px minmax(130px, .9fr) 130px; gap: 4px 16px; align-items: center; padding: 11px 18px; }
.bhead2, .brow2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(170px, 1.1fr) 120px minmax(120px, .9fr) 100px 70px; gap: 4px 16px; align-items: center; padding: 11px 18px; }
.lhead, .bhead2 { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface2); border-top: 1px solid var(--border); }
.lrow, .brow2 { border-top: 1px solid var(--border); }
.lrow:hover, .brow2:hover { background: var(--surface2); }
.lhead .r, .lrow .r, .bhead2 .r, .brow2 .r { text-align: right; }
.lrow .rk { display: flex; align-items: center; gap: 8px; }
.who2 { display: flex; flex-direction: column; min-width: 0; }
.who2 .det { overflow-wrap: anywhere; }
.mv { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.lrow .r .mv { display: block; }
.mv.up { color: var(--ok); }
.mv.down { color: var(--bad); }
@media (max-width: 860px) {
    .lhead, .bhead2 { display: none; }
    .lrow { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 14px; gap: 6px 10px; }
    .brow2 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px; gap: 6px 10px; }
    .lrow .rk { grid-column: 1; }
    .lrow .who2 { grid-column: 2 / -1; }
    .lrow .c[data-label]::before, .brow2 .c[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
    .lrow .r, .brow2 .r { text-align: left; }
    .brow2 .who2 { grid-column: 1 / -1; }
}

.bc { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.bc .det { display: block; }
@media (max-width: 860px) { .bc::before { align-self: stretch; } .lrow .r .mv { display: block; } }

.lrow .trendc { display: flex; align-items: center; gap: 8px; }
.lrow .trendc .trend { width: 64px; height: 22px; flex: none; }
@media (max-width: 860px) { .lrow .trendc { flex-wrap: wrap; align-items: flex-end; } }

/* the rows with many columns turn into cards before the CPID column is squeezed: from 1100px down */
@media (max-width: 1100px) {
    .lhead, .bhead2, .shead { display: none; }
    .lrow { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 14px; gap: 6px 10px; }
    .brow2 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px; gap: 6px 10px; }
    .srow { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 14px; gap: 6px 10px; }
    .lrow .rk { grid-column: 1; }
    .lrow .who2 { grid-column: 2 / -1; }
    .brow2 .who2 { grid-column: 1 / -1; }
    .lrow .c[data-label]::before, .brow2 .c[data-label]::before, .srow .c[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
    .lrow .r, .brow2 .r, .srow .r { text-align: left; }
}

/* the hardware of a project: rows with a bar of the magnitude a typical host adds, cards on a phone */
.hwhead, .hwrow { display: grid; grid-template-columns: minmax(0, 1.6fr) 90px minmax(220px, 2fr) 150px; gap: 4px 18px; align-items: center; padding: 11px 18px; }
.hwhead.hwt, .hwrow.hwt { grid-template-columns: 130px 90px minmax(220px, 2fr) 150px 150px; }
.hwhead { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface2); border-top: 1px solid var(--border); }
.hwrow { border-top: 1px solid var(--border); }
.hwrow:hover { background: var(--surface2); }
.hwhead .r, .hwrow .r { text-align: right; }
.hwrow .hwbar { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hwrow .hwbar .share { flex: 1 1 auto; width: auto; min-width: 60px; }
.hwrow .hwbar b { flex: none; min-width: 64px; text-align: right; }
.hwn { overflow-wrap: anywhere; }
.hwname { font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.hwfound { margin-left: auto; }
@media (max-width: 1100px) {
    .hwhead { display: none; }
    .hwrow, .hwrow.hwt { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 14px; gap: 6px 10px; }
    .hwrow .hwn, .hwrow .hwbar { grid-column: 1 / -1; }
    .hwrow .c[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
    .hwrow .hwbar::before { display: none; }
    .hwrow .r { text-align: left; }
}

.hwsearch { max-width: 560px; margin: 14px 0; }
.hwhead.hwf, .hwrow.hwf { grid-template-columns: minmax(0, 1.3fr) 100px minmax(200px, 2fr) 130px 100px 130px; }

/* the machines of a CPID: one block each, with a bar for what the machine adds in a project and a line for what a typical machine adds */
.mkey { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); align-items: center; margin-left: auto; }
.mkey i { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.mrow { border-top: 1px solid var(--border); }
.msum { display: grid; grid-template-columns: 270px minmax(0, 1fr) 90px; gap: 8px 24px; align-items: center; padding: 12px 18px 12px 34px; cursor: pointer; list-style: none; position: relative; }
.msum::-webkit-details-marker { display: none; }
.msum::before { content: '▸'; position: absolute; left: 16px; color: var(--muted); }
.mrow[open] > .msum::before { content: '▾'; }
.mrow > .mplot { padding: 0 18px 14px 34px; }
.mshare { min-width: 0; }
.mshare .mbar { height: 14px; border-radius: 4px; overflow: hidden; }
.mshare .mbar rect { stroke: var(--surface); stroke-width: .4; }
.mshare .mbar .s0 { fill: var(--series-1); } .mshare .mbar .s1 { fill: var(--series-2); } .mshare .mbar .s2 { fill: var(--series-3); }
.mshare .mbar .s3 { fill: var(--accent-purple); } .mshare .mbar .s4 { fill: var(--accent-amber); } .mshare .mbar .so { fill: var(--group-shrimp); }
.mlegend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 5px; color: var(--muted); }
.mlegend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.mlegend .s0 { background: var(--series-1); } .mlegend .s1 { background: var(--series-2); } .mlegend .s2 { background: var(--series-3); }
.mlegend .s3 { background: var(--accent-purple); } .mlegend .s4 { background: var(--accent-amber); } .mlegend .so { background: var(--group-shrimp); }
.mtotal { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.subtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.subtabs .btn { min-height: 36px; padding: 0 14px; text-decoration: none; }
.subtabs .btn .badge { margin: 0; }
.minfo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.minfo .nm { font-size: 15px; }
.minfo .mcard { margin-top: 6px; overflow-wrap: anywhere; }
.mplot { display: flex; flex-direction: column; min-width: 0; }
.mp { display: grid; grid-template-columns: 200px minmax(0, 1fr) 210px; gap: 4px 16px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.mp:first-child { border-top: 0; }
.mn { overflow-wrap: break-word; }
.mplot > .mchips:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mbar { display: block; width: 100%; height: 18px; overflow: visible; }
.mbar .mb-bg { fill: var(--surface2); }
.mbar .mb-me { fill: var(--accent); }
.mbar .mb-typ { fill: var(--text); }
.mv { white-space: nowrap; }
.maxis { text-align: right; padding-top: 2px; }
.mchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.mchip { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 8px; background: var(--surface2); font-size: 13px; white-space: nowrap; }
.mchip.top { background: color-mix(in srgb, var(--ok) 16%, transparent); }
@media (max-width: 1000px) {
    .msum { grid-template-columns: 1fr auto; }
    .msum .mshare { grid-column: 1 / -1; grid-row: 2; }
    .mp { grid-template-columns: 1fr; }
    .mv { white-space: normal; }
    .maxis { text-align: left; }
}

/* is it worth switching project: the "Show more machines" fold and the section heads (the grid itself is further down) */
.swsec { margin-top: 0; border-top: 1px solid var(--border); }
/* the shop links under the name of a card (#498): the buttons first, what they are in a line under them */
.shopbox .shopnote { flex: 1 1 100%; margin: 0; }



/* Find hardware tiles (#363): a tile per project, shaded by its share of the card's best project; the band is the middle half of the hosts, the line the typical one */
.hwt { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 104px; min-width: 0; padding: 9px 10px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.hwt.s1 { background: color-mix(in srgb, var(--accent) 3%, var(--surface)); }
.hwt.s2 { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.hwt.s3 { background: color-mix(in srgb, var(--accent) 17%, var(--surface)); }
.hwt.s4 { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
/* On the two darkest shades the grey text is a step darker (--muted-strong): the plain muted grey was 3.7:1 on the darkest; this is 5.1:1 or more with every
   accent (#767). Only the grey words (a big tile's name stays in the text colour); the sparkline keeps its colours (#768) */
:is(.hwt.s3, .hwt.s4) :is(.hwt-p, .hwt-l, .hwt-r, .hwt-h, .hwt-f dt) { color: var(--muted-strong); }
.hwt.none { align-items: center; justify-content: center; text-align: center; border-style: dashed; background: transparent; color: var(--muted); font-size: 12px; }
.hwt-p { display: none; font-size: 12px; font-weight: 600; color: var(--muted); overflow-wrap: break-word; }
.hwt-v { font-size: 16px; font-weight: 700; }
.hwt-l { margin-right: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.hwt-sp { display: block; width: 100%; height: 14px; margin: 2px 0; overflow: visible; }
.hwt-tr { fill: color-mix(in srgb, var(--muted) 18%, var(--surface)); }
.hwt-bd { fill: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
.hwt-tk { fill: var(--text); }
.hwt-r, .hwt-h { font-size: 12px; color: var(--muted); }
.hwt-h { margin-top: auto; }
.hwt-star { align-self: flex-start; white-space: nowrap; font-size: 11px; font-weight: 700; padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.hwt.big { min-height: 190px; padding: 12px; }
.hwt.big .hwt-p { display: block; font-size: 13.5px; color: var(--text); }
.hwt.big .hwt-v { font-size: 22px; }
.hwt.big .hwt-sp { height: 20px; margin: 6px 0; }
.hwt-f { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1px 8px; margin: 6px 0 4px; font-size: 12px; }
.hwt-f dt { color: var(--muted); white-space: nowrap; }
.hwt-f dd { margin: 0; text-align: right; }
.hwone { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; padding: 0 18px 8px; }
.hwread { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px 24px; align-items: start; padding: 16px 18px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.hwread .hwt-p { display: block; }
.hwread h3 { margin: 0 0 4px; font-size: 15px; }
.hwread ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.hwramp { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; }
.hwramp span { display: inline-flex; align-items: center; gap: 6px; }
.hwsw { width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 4px; }
.hwsw.s1 { background: color-mix(in srgb, var(--accent) 3%, var(--surface)); }
.hwsw.s2 { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.hwsw.s3 { background: color-mix(in srgb, var(--accent) 17%, var(--surface)); }
.hwsw.s4 { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
.hwgrid { display: grid; grid-template-columns: 220px repeat(5, minmax(112px, 1fr)) 170px; gap: 8px; padding: 12px 18px; }
.hwgrid.c1 { grid-template-columns: 220px repeat(1, minmax(112px, 1fr)) 170px; }
.hwgrid.c2 { grid-template-columns: 220px repeat(2, minmax(112px, 1fr)) 170px; }
.hwgrid.c3 { grid-template-columns: 220px repeat(3, minmax(112px, 1fr)) 170px; }
.hwgrid.c4 { grid-template-columns: 220px repeat(4, minmax(112px, 1fr)) 170px; }
.hwgrid.c6 { grid-template-columns: 200px repeat(6, minmax(104px, 1fr)) 160px; }
.hwgrid.c7 { grid-template-columns: 190px repeat(7, minmax(96px, 1fr)) 150px; }
.hwgrid.c8 { grid-template-columns: 180px repeat(8, minmax(92px, 1fr)) 150px; }
.hwgrid.c9 { grid-template-columns: 170px repeat(9, minmax(88px, 1fr)) 140px; }
.hwgrid.c10 { grid-template-columns: 160px repeat(10, minmax(84px, 1fr)) 140px; }
.hwgh { align-self: end; padding: 0 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
/* The column headers of the tile grids stay at the top of the screen while the rows scroll under them */
.hwgrid .hwgh, .swgrid .hwgh { position: sticky; top: 0; z-index: 2; align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-start; padding: 10px 4px 8px; background: var(--surface); box-shadow: 0 1px 0 var(--border), -4px 0 0 var(--surface), 4px 0 0 var(--surface); }
.hwgrid .hwgh.p, .swgrid .hwgh.p { justify-content: center; text-align: center; }
.hwgh.p { text-align: center; }
.hwgh a { color: inherit; }
.hwgc { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 4px; overflow-wrap: anywhere; }
.hwgs { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 12px; border-radius: 10px; background: var(--surface2); font-size: 12.5px; overflow-wrap: anywhere; }
.hwgs b.mono { font-size: 17px; }
/* A card's cells: a row of the grid on a computer (the wrapper is not a box), a list on a phone */
.hwm { display: contents; }
.hwc { display: grid; min-width: 0; }
@media (max-width: 1000px) {
    .hwread { grid-template-columns: minmax(0, 1fr); }
    .hwgrid, .hwgrid[class*=" c"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hwgh { display: none; }
    .hwgc, .hwgs { grid-column: 1 / -1; }
    .hwgc { padding-top: 14px; border-top: 1px solid var(--border); }
    .hwgrid .hwt-p { display: block; }
    .hwt.none { min-height: 0; padding: 8px; }
}
/* A card below 1 100 px, where the grid of five projects no longer fits its card (#758 C5): its name and best project, then a row for each project, the
   best first: the project, what a typical host adds, and under it the hosts and the middle half. About 300 px a card on a phone instead of 620 */
@media (max-width: 1099px) {
    .hwgrid .hwgh { display: none; }
    .hwgrid, .hwgrid[class*=" c"] { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 14px 8px; }
    .hwm { display: flex; flex-direction: column; padding: 12px 0 8px; border-top: 1px solid var(--border); }
    .hwgc { order: -2; padding: 0 0 2px; border-top: 0; }
    .hwgs { order: -1; display: block; padding: 0 0 8px; border-radius: 0; background: none; color: var(--muted); }
    .hwgs::before { content: "Best: "; }
    .hwgs b { color: var(--text); }
    .hwgs b.mono, .hwgs .hwnext { display: none; }
    .hwgs > span:not(.hwnext)::before { content: " · "; }
    .hwc { display: block; }
    .hwc.o0 { order: 0; } .hwc.o1 { order: 1; } .hwc.o2 { order: 2; } .hwc.o3 { order: 3; } .hwc.o4 { order: 4; } .hwc.o5 { order: 5; }
    .hwc.o6 { order: 6; } .hwc.o7 { order: 7; } .hwc.o8 { order: 8; } .hwc.o9 { order: 9; } .hwc.o10 { order: 10; } .hwc.o99 { order: 99; }
    .hwgrid .hwt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 8px; align-items: baseline; justify-content: normal; min-height: 0; padding: 5px 8px; line-height: 1.35; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; text-align: left; }
    .hwgrid .hwt-p { display: block; grid-column: 1; grid-row: 1; font-size: 13.5px; color: var(--text); }
    .hwgrid .hwt-star { grid-column: 2; grid-row: 1; align-self: center; }
    .hwgrid .hwt-v { grid-column: 3; grid-row: 1; text-align: right; font-size: 14.5px; }
    .hwgrid .hwt-sp { display: none; }
    .hwgrid .hwt-h { grid-column: 1 / 3; grid-row: 2; margin-top: 0; }
    .hwgrid .hwt-r { grid-column: 3; grid-row: 2; text-align: right; white-space: nowrap; }
    .hwgrid .hwt.none { grid-template-columns: minmax(0, 1fr) auto; font-size: 12.5px; }
    .hwgrid .hwt.none > :last-child { grid-column: 2; text-align: right; }
}

/* "Is it worth switching?" as a grid (#365): a row for each machine, a tile for each project coloured by its answer, the biggest gap at the end */
.swgrid { display: grid; grid-template-columns: 220px repeat(5, minmax(112px, 1fr)) 190px; gap: 8px; padding: 12px 18px; }
.swgrid.c1 { grid-template-columns: 220px repeat(1, minmax(112px, 1fr)) 190px; }
.swgrid.c2 { grid-template-columns: 220px repeat(2, minmax(112px, 1fr)) 190px; }
.swgrid.c3 { grid-template-columns: 220px repeat(3, minmax(112px, 1fr)) 190px; }
.swgrid.c4 { grid-template-columns: 220px repeat(4, minmax(112px, 1fr)) 190px; }
.swgrid.c6 { grid-template-columns: 200px repeat(6, minmax(104px, 1fr)) 170px; }
.swgrid.c7 { grid-template-columns: 190px repeat(7, minmax(96px, 1fr)) 160px; }
.swgrid.c8 { grid-template-columns: 180px repeat(8, minmax(92px, 1fr)) 150px; }
.swgrid.c9 { grid-template-columns: 170px repeat(9, minmax(88px, 1fr)) 140px; }
.swgrid.c10 { grid-template-columns: 160px repeat(10, minmax(84px, 1fr)) 140px; }
.swg-card { color: var(--text); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.swg-card:hover, .swg-card:focus-visible { text-decoration-color: var(--accent); }
.swg-m { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 4px; overflow-wrap: break-word; }
.swg-g { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 12px; border-radius: 10px; background: var(--surface2); font-size: 12.5px; overflow-wrap: break-word; }
.swg-d { grid-column: 1 / -1; margin-top: -2px; }
.swx { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 112px; min-width: 0; padding: 9px 10px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.swx.go { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 35%, var(--surface)); }
.swx.small { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 30%, var(--surface)); }
.swx.keep { background: var(--surface2); }
.swx.none { align-items: center; justify-content: center; text-align: center; border-style: dashed; background: transparent; color: var(--muted); font-size: 12px; }
.swx-p { display: none; font-size: 12px; font-weight: 600; color: var(--muted); overflow-wrap: break-word; }
.swx-you { font-size: 15px; font-weight: 700; }
.swx-l { margin-right: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.swx-m { display: block; width: 100%; height: 16px; margin: 2px 0; overflow: visible; }
.swx-ty, .swx-nr, .swx-q { font-size: 12px; color: var(--muted); }
.swx-ty b { color: var(--text); }
.swx-big { font-size: 15px; }
.swx-q.low { color: var(--bad); font-weight: 600; }
.swx-a { margin-top: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.swx.go .swx-a { color: var(--ok); }
.swx.small .swx-a { color: var(--warn); }
.swx.keep .swx-a { color: var(--text); }
.swx-star { align-self: flex-start; white-space: nowrap; font-size: 11px; font-weight: 700; padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.hwsw.swgo { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); }
.hwsw.swsmall { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.hwsw.swkeep { background: var(--surface2); }
.swxd { border-radius: 10px; border: 1px solid var(--border); }
.swxd > summary { padding: 6px 12px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent-text); }
.swxd[open] { margin-bottom: 8px; }
@media (max-width: 1000px) {
    .swgrid, .swgrid[class*=" c"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .swgrid .hwgh { display: none; }
    .swg-m, .swg-g { grid-column: 1 / -1; }
    .swg-m { padding-top: 14px; border-top: 1px solid var(--border); }
    .swgrid .swx-p { display: block; }
    .swx.none { min-height: 0; padding: 8px; }
}

/* the opened machine of the switch grid: a strip for each project against all hosts with the card (#365) */
.swsp-key { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 4px 12px 8px; align-items: center; }
.swsp-key span { display: inline-flex; align-items: center; gap: 6px; }
.swsp-k { display: inline-block; border-radius: 2px; }
.swsp-k.bd { width: 22px; height: 8px; background: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
.swsp-k.tk { width: 2px; height: 14px; background: var(--text); }
.swsp-k.me { width: 4px; height: 14px; background: var(--accent); }
.swsp { display: grid; grid-template-columns: 190px minmax(0, 1fr) 260px; gap: 4px 18px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border); }
.card > .swsp, .card > .swsp-ax, .card > .swsp-key { padding-inline: 18px; }
.swsp-n { display: flex; flex-direction: column; min-width: 0; }
.swsp-s { display: block; width: 100%; height: 22px; overflow: visible; }
.swsp-tr { fill: color-mix(in srgb, var(--muted) 18%, var(--surface)); }
.swsp-bd { fill: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
.swsp-tk { fill: var(--text); }
.swsp-me { fill: var(--accent); }
.swsp-ax { display: grid; grid-template-columns: 190px minmax(0, 1fr) 260px; gap: 18px; padding: 0 12px 4px; font-size: 11.5px; color: var(--muted); }
.swsp-sc { display: flex; justify-content: space-between; }
.swsp-o { margin: 0; padding: 8px 12px 12px; border-top: 1px solid var(--border); }
@media (max-width: 800px) {
    .swsp, .swsp-ax { grid-template-columns: minmax(0, 1fr); }
    .swsp-ax > span:first-child, .swsp-ax > span:last-child { display: none; }
}

/* the way to Find hardware from the Projects page and the Hosts tab (#368) */
.hwcta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 1.2fr) auto; gap: 10px 18px; align-items: center; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface2); }
.hwcta > div { display: flex; flex-direction: column; gap: 2px; }
.hwcta .hwsearch { margin: 0; }
.subtabs-end { margin-left: auto; }
@media (max-width: 900px) { .hwcta { grid-template-columns: minmax(0, 1fr); } .subtabs-end { margin-left: 0; } }

/* Ads (#399). The class names avoid "ad" and "ads": blockers hide elements by such names, and the spaces carry the message for visitors who block ads. The spaces are always there, with or without ads, at the size of the ad, so the page does not move when an ad arrives. */
.fund { margin-top: 24px; }
.fund-cap { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.fund-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.fund-unit { display: flex; flex-direction: column; align-items: center; }
/* No border on the space itself: CoinTraffic measures the space and asks for a banner that fits it, so a 728 px space with a 1 px border (726 px inside)
   got no 728 px banner. The dashed line is drawn over the space instead. */
.fund-slot { position: relative; display: flex; align-items: center; justify-content: center; max-width: 100%; overflow: hidden; border-radius: var(--r-sm); }
.fund-slot::after { content: ""; position: absolute; inset: 0; border: 1px dashed var(--border); border-radius: var(--r-sm); pointer-events: none; }
.fund-slot.fund-300x250 { width: 300px; min-height: 250px; }
.fund-slot.fund-320x100 { width: 320px; min-height: 100px; }
.fund-slot.fund-320x50 { width: 320px; min-height: 50px; }
.fund-slot.fund-728x90 { width: 728px; min-height: 90px; }
.fund-slot.is-filled::after { border-color: transparent; }
.fund-note { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 14px; text-align: center; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.fund-note p { display: none; margin: 0; }
.fund-slot.is-filled .fund-note { display: none; }
/* One message per state of the ads (data-ads on the root, set by ads.js). Without JavaScript there is no state: the first message. */
html:not([data-ads]) .fund-note .n-off, html[data-ads="off"] .fund-note .n-off,
html[data-ads="loading"] .fund-note .n-wait,
html[data-ads="loaded"] .fund-note .n-empty, html[data-ads="empty"] .fund-note .n-empty,
html[data-ads="blocked"] .fund-note .n-blocked { display: block; }
/* Waiting for the ad: a quiet bar, so the space does not look broken */
.fund-wait { display: block; width: 56%; height: 10px; margin: 0 auto; border-radius: 5px; background: linear-gradient(90deg, var(--surface2), var(--border), var(--surface2)); background-size: 200% 100%; animation: fund-wait 1.4s linear infinite; }
@keyframes fund-wait { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .fund-wait { animation: none; } }
/* "Allow ads" is for a visitor who said no; for a blocked ad it would change nothing */
.fund-note [data-consent-open] { display: none; }
html[data-consent-advertising="no"] .fund-note [data-consent-open] { display: inline; }
/* The first ad (#795) stands in the page after its first card. Its units are the page's own items (display: contents), so the page's gap spaces them and
   a unit hidden at this width (the phone one on a computer, the 728 x 90 on a phone) takes no gap; without the optional 728 x 90 a computer shows none. */
.fund-first { display: contents; }
/* A page whose card stands straight in main (the error page) has no gap to space it */
main > .fund-first > .fund-unit { margin-top: var(--gap); }
/* The 320 x 100 that ads.js puts at the top of a page of one card standing straight in main (the error page) */
main > .fund-unit { margin-bottom: var(--gap); }
/* The 320 x 50 space is only 50 px high: its message is set smaller and tighter so even the longest (blocked) fits in three lines */
.fund-slot.fund-320x50 .fund-note { padding: 2px 8px; font-size: 11px; line-height: 1.25; }
/* On a screen wide enough for the content (1200 px) and the 324 px of the ads (1548 px) the 300 x 250 and the widget stand right of the content, like on the
   old site, and follow the scroll. Content and ads are centred as one block, so the whole page (header, content, footer) moves left by up to 162 px
   to make room. Narrower: the ads close the page, above the footer. */
@media (min-width: 1548px) {
    body[data-ads] .wrap { margin-left: calc((100vw - 1524px) / 2); margin-right: 0; }
    body[data-ads] .wrap.fund-bottom { position: absolute; top: 28px; bottom: 0; left: calc(100% + 24px); width: 300px; max-width: none; margin: 0; padding: 0; }
    .fund-bottom .fund-row { position: sticky; top: calc(76px + var(--netbar-h, 0px)); flex-direction: column; flex-wrap: nowrap; gap: 20px; }
    .main { min-height: 760px; }
}
@media (min-width: 641px) {
    .fund-unit[data-fund-device="phone"] { display: none; }
}
@media (max-width: 640px) {
    .fund-unit[data-fund-device="desktop"] { display: none; }
}
/* The consent card: in the corner, not a blocking wall */
.consent { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: min(360px, calc(100vw - 32px)); padding: 16px 18px; }
.consent h2 { margin: 0 0 6px; font-size: 16px; }
.consent p { margin: 0 0 12px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent-options { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; font-size: 13.5px; }
.consent-options label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-text); text-decoration: underline; cursor: pointer; }

/* ZCD and WAS: a row for each project with its twenty blocks of zero credit days and the gauge of the work availability score */
.glmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.glmeta a { font-weight: 600; }
.stat .val.bad, .glnum.bad { color: var(--bad); }
.gldecide > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--cell); cursor: pointer; list-style: none; }
.gldecide > summary::-webkit-details-marker { display: none; }
.gldecide > summary::after { content: '\25BE'; color: var(--muted); }
.gldecide:not([open]) > summary::after { content: '\25B8'; }
.gldecide h2 { margin: 0; font-size: 16px; }
.glsteps { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 12px; padding: 0 18px 18px; }
.glstep { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.glstep span { font-size: 13px; color: var(--muted); }
.glstep.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.glstep.bad b { color: var(--bad); }
.glstep.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.glstep.ok b { color: var(--ok); }
.gljoin { align-self: center; font-weight: 700; color: var(--muted); }
.glkey { margin: 0; gap: 4px 16px; justify-content: flex-end; }
.glkey > span { display: inline-flex; align-items: center; gap: 6px; }
.glhelp { padding: 10px 18px 12px; font-size: 13px; line-height: 1.5; border-bottom: 1px solid var(--border); }
.glhead, .glrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1.6fr); gap: 4px 18px; align-items: center; padding: 12px 18px; }
.glhead { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface2); border-top: 1px solid var(--border); }
.glrow { border-top: 1px solid var(--border); }
.glrow:hover { background: var(--surface2); }
.glgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 18px 0 0; padding: 12px 18px; font-size: 15px; border-top: 1px solid var(--border); border-left: 5px solid var(--muted); background: var(--surface2); }
.glgroup:first-of-type { margin-top: 0; }
.glgroup .gltitle { font-weight: 700; font-size: 16px; }
.glgroup.ok { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.glgroup.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.glgroup.off { border-left-style: dashed; }
.glbody { border-left: 5px solid var(--border); }
.glbody.ok { border-left-color: color-mix(in srgb, var(--ok) 45%, var(--surface)); }
.glbody.warn { border-left-color: color-mix(in srgb, var(--warn) 50%, var(--surface)); }
.glbody.off { border-left-style: dashed; }
.glgroup .muted { font-weight: 400; font-size: 13px; flex: 1 1 260px; }
.glwho { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.glwho a { font-weight: 650; font-size: 15.5px; }
.glrow .det { font-size: 13px; color: var(--muted); }
.glrow .det.warn { color: var(--warn); }
.glzcd, .glwas { display: flex; align-items: center; gap: 12px; min-width: 0; }
.glcells { display: flex; gap: 2px; flex: none; }
.glcell { display: inline-block; width: 10px; height: 20px; border-radius: 3px; border: 1.5px solid var(--muted); background: var(--surface); flex: none; }
.glcell.z { background: var(--muted); }
.glcell.zr { background: var(--bad); border-color: var(--bad); }
.glcell.na { border-style: dashed; border-color: var(--border); }
.glcell.ns { border-style: dashed; border-color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 2px, var(--border) 2px 4px); }
.glkey .glcell { height: 14px; }
.glnum { font-size: 17px; font-weight: 500; white-space: nowrap; }
.glgauge { position: relative; flex: 0 1 190px; min-width: 110px; height: 8px; border-radius: 4px; background: var(--surface2); border: 1px solid var(--border); }
.glgauge .glsvg { position: absolute; left: 0; top: -5px; width: 100%; height: 16px; overflow: visible; }
.glzone { fill: color-mix(in srgb, var(--bad) 35%, transparent); }
.gltick { stroke: var(--muted); stroke-width: 2; opacity: .6; }
.glmark { stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.glmark.bad { stroke: var(--bad); }
.glwho .who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.glfoot { margin: 0; }
.gloverride { padding: 0 18px 16px; }
@media (max-width: 860px) {
    .glhead { display: none; }
    .glrow { grid-template-columns: minmax(0, 1fr); padding: 14px; }
    .glmeta { align-items: flex-start; }
    .glkey { justify-content: flex-start; }
}

/* the greylist check on the page of a project: the three numbers side by side, then what they say */
.glcardhead { border-left: 5px solid var(--muted); }
.glcardhead.ok { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.glcardhead.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.glcardhead.off { border-left-style: dashed; background: var(--surface2); }
.glcardtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.glcardtitle h2 { margin: 0; font-size: 17px; }
.glcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.glcol { padding: 18px 22px; border-right: 1px solid var(--border); min-width: 0; }
.glcol:last-child { border-right: 0; }
.glcol .lab { font-size: 13px; color: var(--muted); }
.glbig { margin: 6px 0 2px; font-size: 36px; line-height: 1.1; font-weight: 500; }
.glbig .mono.bad { color: var(--bad); }
.glbig .muted { font-size: 18px; }
.glcol .glcells { margin: 14px 0 0; }
.glcol .glcell { flex: 1 1 0; width: auto; max-width: 14px; }
.glaxis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.glgauge.wide { flex: none; width: 100%; margin: 24px 0 0; }
.glscale { display: block; width: 100%; height: 18px; margin-top: 6px; overflow: visible; }
.glscale text { fill: var(--muted); font-size: 12.5px; }
.glbars { display: block; width: 100%; height: 56px; margin-top: 14px; }
.glbar { fill: var(--accent); }
.glbar.flat { fill: var(--muted); }
.glbar.na, .glbar.none { fill: transparent; stroke: var(--border); stroke-dasharray: 2 2; }
.glbar.down { fill: color-mix(in srgb, var(--bad) 55%, transparent); }
.glsays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); background: var(--surface2); }
.glsays > div { padding: 14px 22px; }
.glsays > div + div { border-left: 1px solid var(--border); }
.glsays > div:only-child { grid-column: 1 / -1; }
.glsays .lab { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.glcardfoot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 10px 22px; border-top: 1px solid var(--border); }
@media (max-width: 860px) {
    .glcols, .glsays { grid-template-columns: minmax(0, 1fr); }
    .glcol { border-right: 0; border-bottom: 1px solid var(--border); }
    .glsays > div + div { border-left: 0; border-top: 1px solid var(--border); }
}

/* the greylist check on the Projects page: a quiet line under each name, and the block in the header card */
.pj .glline { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pj .glline b, .pj .glline b.mono { display: inline; font-size: inherit; font-weight: 500; color: var(--text); }
.pj .glline.bad, .pj .glline.bad b { color: var(--bad); }
.glbanner { margin: 0 0 16px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface2); }
.glbannerhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 16px 0; }
.glbannerhead a { margin-left: auto; font-weight: 600; }
.glbannerbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px 32px; padding: 12px 16px 14px; }
.glfigures { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.glfigures > div, .glfigures > a { display: flex; flex-direction: column; }
.glfigures > a { color: inherit; text-decoration: none; border-radius: var(--r-sm); }
.glfigures > a:hover b { text-decoration: underline; }
.badgelink { text-decoration: none; display: inline-flex; border-radius: 999px; }
.badgelink:hover .badge { text-decoration: underline; }
.glfigures b { font-size: 24px; font-weight: 500; line-height: 1.2; }
.glfigures b.bad { color: var(--bad); }
.glpips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 12px; }
.glpip { display: inline-block; width: 12px; height: 18px; border-radius: 3px; border: 1.5px solid var(--muted); background: var(--surface); flex: none; }
.glpip.off { background: var(--accent); border-color: var(--accent); }
.glpip.greylisted { background: var(--warn); border-color: var(--warn); }
.glbanner .glkey { margin-top: 6px; justify-content: flex-start; }
.glbanner .glkey .glpip { width: 9px; height: 12px; }
.glrulebox p { margin: 0 0 4px; }
.glrulebox ul { margin: 4px 0 6px; padding-left: 20px; }
@media (max-width: 860px) {
    .glbannerbody { grid-template-columns: minmax(0, 1fr); }
    .glbannerhead a { margin-left: 0; }
}

/* the status header of the main page: one slim line for the wallet, the cache index and the BOINC index, with the worst of them first */
.sym { display: inline-flex; align-items: center; flex: none; }
.sym svg { display: none; }
.sth-lead[data-level="good"] .s-good, .sth-item[data-level="good"] .s-good, .sth-lead[data-level="notice"] .s-notice, .sth-item[data-level="notice"] .s-notice,
.sth-lead[data-level="warning"] .s-warning, .sth-item[data-level="warning"] .s-warning, .sth-lead[data-level="unknown"] .s-unknown, .sth-item[data-level="unknown"] .s-unknown { display: block; }
.sym .s-good circle { fill: var(--ok); }
.sym .s-good path, .sym .s-notice path:not(.tri), .sym .s-warning path { fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sym .s-notice .tri { fill: var(--warn); stroke: var(--warn); stroke-width: 2; stroke-linejoin: round; }
.sym .s-warning rect { fill: var(--bad); }
.sym .s-unknown circle { fill: var(--border); }
.sthead { display: flex; align-items: stretch; flex-wrap: wrap; overflow: hidden; }
.sthead[data-level="notice"] { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.sthead[data-level="warning"] { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.sth-lead, .sth-item { display: flex; align-items: center; gap: 8px; padding: 10px 18px; min-height: 46px; min-width: 0; }
.sth-lead { border-right: 1px solid var(--border); }
.sthead[data-level="notice"] .sth-lead { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.sthead[data-level="warning"] .sth-lead { background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.sth-item { flex: 1 1 auto; border-right: 1px solid var(--border); white-space: nowrap; }
.sth-lead { white-space: nowrap; }
.sth-item:last-child { border-right: 0; }
.sth-name { font-size: 13px; color: var(--muted); }
/* The countdown to the next superblock (#786): a strip of its own at the foot of the status card (the four items above fill the row), the words may wrap
   on a phone; on the superblocks page a sentence over the lede */
.sth-item.sth-next { flex: 1 1 100%; border-right: 0; border-top: 1px solid var(--border); white-space: normal; flex-wrap: wrap; row-gap: 2px; }
/* The item before the strip ends the row above it: no line at the card's edge */
.sth-item:has(+ .sth-next) { border-right: 0; }
.sth-item[data-next-sb][data-state="due"] [data-next-sb-in] { color: var(--warn); }
.nextsb { margin: 0 0 10px; }
.sth-val { font-weight: 500; }
.sth-note:not(:empty) { font-weight: 600; }
.sth-item[data-level="warning"] .sth-note, .sth-item[data-level="warning"] [data-field="cache-note"] { color: var(--bad); }
@media (max-width: 640px) {
    .sth-lead { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--border); }
    .sth-item { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--border); }
    .sth-item:last-child { border-bottom: 0; }
    /* The item above already draws the line */
    .sth-item.sth-next { border-top: 0; }
}

/* the Incoming card: what waits for a block, two lines at most; amber while something waits, plain when nothing does */
.incoming { overflow: hidden; }
.incoming[data-state="rows"], .incoming[data-state="unknown"] { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.incoming[data-state="rows"] .in-head, .incoming[data-state="unknown"] .in-head { background: color-mix(in srgb, var(--warn) 8%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--warn) 25%, var(--border)); }
.in-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 18px; border-top: 1px solid color-mix(in srgb, var(--warn) 18%, var(--border)); }
.in-row:first-child { border-top: 0; }
.in-age { flex: none; min-width: 56px; }
.in-id { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.in-val { font-size: 13px; font-weight: 500; text-align: right; white-space: nowrap; }
/* the unit beside each amount of the Incoming card (#758 B3) */
.in-unit { font-size: 11px; font-weight: 600; color: var(--muted); }
.in-row.taken { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--ok); }
.in-line { margin: 0; padding: 2px 18px 12px; }
.in-line b { color: var(--text); }
.in-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 18px; border-top: 1px solid var(--border); }
.in-link { font-size: 13px; font-weight: 700; }
.incoming[data-state="rows"] .in-line, .incoming[data-state="empty"] .in-rows, .incoming[data-state="unknown"] .in-rows, .incoming[data-state="unknown"] .in-foot { display: none; }
.incoming[data-state="empty"] .in-head { border-bottom: 0; padding-bottom: 4px; }
.incoming[data-state="empty"] .in-foot .small { visibility: hidden; }
@media (max-width: 900px) {
    .in-row { padding: 10px 16px; }
    .in-foot { display: block; padding: 8px 16px 12px; }
    .incoming[data-state="rows"] .in-foot .small { display: block; margin-bottom: 6px; }
    .in-link { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; }
}

/* the page of a transaction that is in no block (#455): amber while it waits, plain when it left without one, green when a block has it */
.txpool-card[data-state="pending"] { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.txpool-card[data-state="confirmed"] { border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }
.txpool-card[data-state="pending"] .txpool-head { background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.txpool-head { align-items: flex-start; flex-wrap: nowrap; gap: 16px; }
.txpool-head .txid { overflow-wrap: anywhere; margin-top: 6px; }
.txpool-line { margin: 4px 0 0; }
.txpool-wait { text-align: right; flex: none; }
.txpool-wait .val { font-size: 24px; font-weight: 500; line-height: 1.2; }
.txpool-card[data-state="pending"] .txpool-wait .val { color: var(--warn); }
.dot-wait { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); display: inline-block; }
.txpool-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.txpool-h { margin: 0 0 12px; font-size: 16px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step-title { font-weight: 600; }
.mk { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid var(--border); background: var(--surface); color: var(--muted); }
.mk-done { background: var(--ok); border-color: var(--ok); color: var(--accent-ink); }
.mk-now { border-color: var(--warn); color: var(--warn); }
.mk-next { border-style: dashed; }
.step[data-step="next"] .step-title { color: var(--muted); }
@media (max-width: 900px) {
    .txpool-grid { grid-template-columns: minmax(0, 1fr); }
    .txpool-head { flex-wrap: wrap; }
    .txpool-wait { text-align: left; }
}

/* the Transactions page (#456): a list as grid rows on a wide screen, as cards on a phone */
.txl-head { align-items: flex-start; }
.txl-head p { margin: 2px 0 0; }
.txl-note { padding: 10px 24px; margin: 0; border-top: 1px solid var(--border); }
.txl-row { display: grid; gap: 12px; padding: 12px 24px; align-items: center; border-top: 1px solid var(--border); }
.txl-waiting .txl-row { grid-template-columns: 84px minmax(0, 1.1fr) 130px minmax(0, 1fr) minmax(0, 1fr) 56px 110px 70px 90px 90px; }
.txl-confirmed .txl-row { grid-template-columns: 90px minmax(0, 1.2fr) 100px 150px 130px 100px; }
.txl-taken .txl-row { grid-template-columns: 90px minmax(0, 1fr) 160px 140px; font-size: 14px; }
.txl-hd { background: var(--surface2); font-size: 12.5px; font-weight: 600; color: var(--muted); padding-top: 9px; padding-bottom: 9px; }
.txl .r { text-align: right; }
.txl-waiting-mark { color: var(--warn); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.feebars { display: block; width: 100%; height: 56px; margin-top: 8px; }
.feebars rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.feescale { display: flex; justify-content: space-between; }
@media (max-width: 1100px) {
    .txl-row.txl-hd { display: none; }
    .txl-row { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 16px; }
    .txl-row .c[data-label]::before { content: attr(data-label) " "; font-size: 12px; color: var(--muted); }
    .txl-row .c.r { text-align: left; }
    .txl-note { padding: 10px 16px; }
}

/* coins on their way in on the address page (#459): the amber tile and the group above the day list */
.waitstat { background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.waitstat .val { color: var(--warn); }
.waitgroup { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--warn) 5%, var(--surface)); }
.waitgroup-h { margin: 0; padding: 14px 24px 0; font-size: 16px; }
.waitgroup-note { margin: 2px 0 6px; padding: 0 24px; }

/* The role of an output on the transaction page (a key of the chart palette, then its name) */
.role { white-space: nowrap; font-size: 13px; color: var(--muted); }
.role .key { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.role .key.s1 { background: var(--series-1); }
.role .key.s2 { background: var(--series-2); }
.role .key.s3 { background: var(--series-3); }
.role .key.acc { background: var(--accent); }
.role a.small { margin-left: 4px; }
.role .key.shade { background: color-mix(in srgb, var(--muted) 30%, transparent); border: 1px solid var(--border); }
.role-legend { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.role-legend .role { white-space: normal; }

/* A block that arrived on the Blocks page since it was made (#50): a quiet highlight that fades */
@keyframes row-new { from { background: var(--accent-soft); } to { background: transparent; } }
.t tr.row-new td { animation: row-new 8s ease-out; }
@media (prefers-reduced-motion: reduce) { .t tr.row-new td { animation: none; background: var(--accent-soft); } }
.blocks-next { margin: 0 0 8px; }

.feestrip { margin: 8px 0 12px; }
/* What the block paid out: a ring of the parts with a thin ring inside it of who got them, and a ledger beside it */
.payout { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.payring { flex: 0 0 250px; max-width: 100%; margin: 0 auto; }
.payring svg { display: block; width: 250px; max-width: 100%; height: auto; margin: 0 auto; }
.payring .seg.s1 { stroke: var(--series-1); }
.payring .seg.s2 { stroke: var(--series-2); }
.payring .seg.s3 { stroke: var(--series-3); }
.payring .seg.sa { stroke: var(--series-4); }
.payring .seg.sa2 { stroke: var(--series-5); }
.payring .seg.st { stroke: var(--series-6); }
.payring .seg.sx { stroke: var(--muted); }
.payring .seg.sb { stroke: var(--bad); }
.ring-total { font: 700 22px var(--mono, ui-monospace, monospace); fill: var(--text); }
.ring-unit { font-size: 12px; fill: var(--muted); }
.paynum s { text-decoration: none; color: var(--muted); font-size: 11px; margin-left: 6px; }
.paylg { flex: 1 1 320px; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: flex-start; }
.paycol { flex: 1 1 300px; min-width: 0; }
.payrow { padding: 8px 0; border-bottom: 1px solid var(--border); }
.payrow.sub { padding-left: 14px; font-size: 13px; }
.paytop { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.paylabel .paynote { display: block; font-size: 12px; color: var(--muted); margin-left: 17px; }
.paynum { white-space: nowrap; }
.paybar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.paybar i { display: block; height: 100%; border-radius: 3px; }
/* The width of a bar is a class, not an inline style (the page's policy allows none, #604): `|pw` in the templates gives the class of a percentage */
.pw-0 { width: 0%; } .pw-1 { width: 1%; } .pw-2 { width: 2%; } .pw-3 { width: 3%; } .pw-4 { width: 4%; } .pw-5 { width: 5%; } .pw-6 { width: 6%; } .pw-7 { width: 7%; } .pw-8 { width: 8%; } .pw-9 { width: 9%; }
.pw-10 { width: 10%; } .pw-11 { width: 11%; } .pw-12 { width: 12%; } .pw-13 { width: 13%; } .pw-14 { width: 14%; } .pw-15 { width: 15%; } .pw-16 { width: 16%; } .pw-17 { width: 17%; } .pw-18 { width: 18%; } .pw-19 { width: 19%; }
.pw-20 { width: 20%; } .pw-21 { width: 21%; } .pw-22 { width: 22%; } .pw-23 { width: 23%; } .pw-24 { width: 24%; } .pw-25 { width: 25%; } .pw-26 { width: 26%; } .pw-27 { width: 27%; } .pw-28 { width: 28%; } .pw-29 { width: 29%; }
.pw-30 { width: 30%; } .pw-31 { width: 31%; } .pw-32 { width: 32%; } .pw-33 { width: 33%; } .pw-34 { width: 34%; } .pw-35 { width: 35%; } .pw-36 { width: 36%; } .pw-37 { width: 37%; } .pw-38 { width: 38%; } .pw-39 { width: 39%; }
.pw-40 { width: 40%; } .pw-41 { width: 41%; } .pw-42 { width: 42%; } .pw-43 { width: 43%; } .pw-44 { width: 44%; } .pw-45 { width: 45%; } .pw-46 { width: 46%; } .pw-47 { width: 47%; } .pw-48 { width: 48%; } .pw-49 { width: 49%; }
.pw-50 { width: 50%; } .pw-51 { width: 51%; } .pw-52 { width: 52%; } .pw-53 { width: 53%; } .pw-54 { width: 54%; } .pw-55 { width: 55%; } .pw-56 { width: 56%; } .pw-57 { width: 57%; } .pw-58 { width: 58%; } .pw-59 { width: 59%; }
.pw-60 { width: 60%; } .pw-61 { width: 61%; } .pw-62 { width: 62%; } .pw-63 { width: 63%; } .pw-64 { width: 64%; } .pw-65 { width: 65%; } .pw-66 { width: 66%; } .pw-67 { width: 67%; } .pw-68 { width: 68%; } .pw-69 { width: 69%; }
.pw-70 { width: 70%; } .pw-71 { width: 71%; } .pw-72 { width: 72%; } .pw-73 { width: 73%; } .pw-74 { width: 74%; } .pw-75 { width: 75%; } .pw-76 { width: 76%; } .pw-77 { width: 77%; } .pw-78 { width: 78%; } .pw-79 { width: 79%; }
.pw-80 { width: 80%; } .pw-81 { width: 81%; } .pw-82 { width: 82%; } .pw-83 { width: 83%; } .pw-84 { width: 84%; } .pw-85 { width: 85%; } .pw-86 { width: 86%; } .pw-87 { width: 87%; } .pw-88 { width: 88%; } .pw-89 { width: 89%; }
.pw-90 { width: 90%; } .pw-91 { width: 91%; } .pw-92 { width: 92%; } .pw-93 { width: 93%; } .pw-94 { width: 94%; } .pw-95 { width: 95%; } .pw-96 { width: 96%; } .pw-97 { width: 97%; } .pw-98 { width: 98%; } .pw-99 { width: 99%; }
.pw-100 { width: 100%; }
.payclaims { border: 1px solid var(--series-6); border-radius: 10px; padding: 0 10px; margin: 10px -10px 4px; }
.payclaims .payrow:last-child { border-bottom: 0; }
.paykey { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 2px; vertical-align: -1px; background: var(--muted); }
.paykey.s1, .paybar i.s1 { background: var(--series-1); }
.paykey.s2, .paybar i.s2 { background: var(--series-2); }
.paykey.s3, .paybar i.s3 { background: var(--series-3); }
.paykey.sa, .paybar i.sa { background: var(--series-4); }
.paykey.sa2, .paybar i.sa2 { background: var(--series-5); }
.paykey.st, .paybar i.st { background: var(--series-6); }
.paykey.sx, .paybar i.sx { background: var(--muted); }
.paykey.sb, .paybar i.sb { background: var(--bad); }
.paylabel b { font-size: 14px; }
.payring .seg.ss { stroke: url(#paystripe); }
.payring .stripe-a { fill: var(--series-3); }
.payring .stripe-b { fill: color-mix(in srgb, var(--series-3) 45%, var(--surface)); }
.paycap { margin-top: 8px; line-height: 1.7; }
.paycap b { color: var(--text); }
.paycap .payteal { color: var(--series-6); }
.payhd { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0 6px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.payhd b { color: var(--text); font-size: 14px; }
.payhd .mono { color: var(--text); }
.paynote.wide { margin: 6px 0 0 17px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.payhd.gap { margin-top: 22px; }
.paykey.ss, .paybar i.ss { background: repeating-linear-gradient(45deg, var(--series-3) 0 3px, color-mix(in srgb, var(--series-3) 45%, var(--surface)) 3px 6px); }
/* The figures of a block in one grid of twelve: six to a row on a wide screen, then three, then two, so that every row is full */
.facts.grid12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.facts.grid12 > div { border-bottom: 1px solid var(--border); }
.facts.grid12 > div:nth-child(6n) { border-right: 0; }
.facts.grid12 > div:nth-last-child(-n+6) { border-bottom: 0; }
.facts.grid12 > div { padding: 12px 14px; }
.facts.grid12 dd.id { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.facts.grid12 dd.id > a, .facts.grid12 dd.id > span.mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facts.grid12 dd.id > :last-child { flex: none; }
.facts.grid12 dd.nowrap { white-space: nowrap; }
.facts.grid12 dd.sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 1150px) {
    .facts.grid12 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .facts.grid12 > div:nth-child(6n) { border-right: 1px solid var(--border); }
    .facts.grid12 > div:nth-child(3n) { border-right: 0; }
    .facts.grid12 > div:nth-last-child(-n+6) { border-bottom: 1px solid var(--border); }
    .facts.grid12 > div:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (max-width: 560px) {
    .facts.grid12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .facts.grid12 > div:nth-child(3n) { border-right: 1px solid var(--border); }
    .facts.grid12 > div:nth-child(2n) { border-right: 0; }
    .facts.grid12 > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--border); }
    .facts.grid12 > div:nth-last-child(-n+2) { border-bottom: 0; }
}

/* The news feed (#54): a lead story with two smaller ones, then cards; a tile in the colour of the source stands in for a picture (the pictures of other sites are not loaded). Sponsored items are amber and always labelled. */
.news-boinc { --tone: var(--series-3); }
.news-github { --tone: var(--series-4); }
.news-other { --tone: var(--series-1); }
.news-site { --tone: var(--series-6); }
.news-press { --tone: var(--accent-amber); }
.n-art { position: relative; overflow: hidden; border-radius: var(--r-sm); color: var(--on-band); background: linear-gradient(135deg, var(--tone), color-mix(in srgb, var(--tone) 40%, var(--band))); isolation: isolate; }
.n-art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(135deg, var(--on-band-hover) 0 2px, transparent 2px 14px); }
.n-glyph { position: absolute; right: 14px; bottom: 6px; font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.04em; opacity: .28; }
/* the tone darkened (65 % of it with the dark band colour): white on the tone itself was under 4.5:1 on every tone but amber (2.5:1 at worst, dark teal);
   this is 5.0:1 or more on all (#767) */
.n-tag { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: color-mix(in srgb, var(--tone) 65%, var(--band)); color: var(--on-band); }
/* The words in amber mixed with the text colour (darker in light, lighter in dark): plain amber was 4.1:1 light and 3.0:1 dark; this is 5.1:1 or more (#767) */
.n-paid { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--accent-amber); color: color-mix(in srgb, var(--accent-amber) 60%, var(--text)); background: color-mix(in srgb, var(--accent-amber) 14%, transparent); }
/* On a news tile (the main page's leads) the label sits on the dark band: white on amber darkened like a tag, 8.1:1 or more (#768) */
.n-lead .n-paid { border-color: transparent; color: var(--on-band); background: color-mix(in srgb, var(--accent-amber) 65%, var(--band)); }
.n-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--muted); font-size: 12.5px; }
.n-meta b { color: var(--text); font-weight: 600; }
.n-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-bottom: 20px; }
.n-lead { display: flex; align-items: flex-end; min-height: 150px; text-decoration: none; color: var(--on-band); }
.n-lead.big { min-height: 320px; }
.n-lead .cap { position: relative; width: 100%; padding: 48px 18px 16px; background: linear-gradient(to top, color-mix(in srgb, var(--band) 90%, transparent), transparent); }
.n-lead h2, .n-lead h3 { margin: 6px 0 4px; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--on-band); text-wrap: balance; }
.n-lead.big h2 { font-size: 24px; line-height: 1.2; font-weight: 700; }
.n-lead .n-meta { color: var(--on-band-muted); }
.n-lead .n-meta b { color: var(--on-band); }
.n-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; min-width: 0; }
.n-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
.n-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.n-card .n-art { aspect-ratio: 16 / 9; display: block; }
.n-card.paid .n-art { outline: 2px solid var(--accent-amber); outline-offset: -2px; }
.n-card h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; text-wrap: balance; }
.n-card h3 a { color: var(--text); text-decoration: none; }
.n-card h3 a:hover { text-decoration: underline; }
.n-card p { margin: 0; color: var(--muted); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.n-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.n-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.n-row:first-child { border-top: 0; }
.n-row .n-art { aspect-ratio: 4 / 3; }
.n-row .n-glyph { font-size: 28px; right: 6px; bottom: 2px; }
.n-row h3 { margin: 4px 0; font-size: 14.5px; line-height: 1.3; font-weight: 600; }
.n-row h3 a { color: var(--text); text-decoration: none; }
.n-sub { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--r-sm); }
.n-sub small { width: 100%; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
/* The head of the news page is a card of its own (#795): its filters end it without the space they keep below them */
.n-head .card-body > :last-child { margin-bottom: 0; }
@media (max-width: 900px) {
    .n-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .n-hero { grid-template-columns: 1fr; }
    .n-stack { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    /* a phone: a small tile beside the headline instead of a wide picture over it, and no summary */
    .n-grid { grid-template-columns: 1fr; gap: 0; }
    .n-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-content: start; padding: 10px 0; border-top: 1px solid var(--border); }
    .n-card:first-child { border-top: 0; }
    .n-card .n-art { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 4 / 3; align-self: start; }
    .n-card .n-art .n-glyph { font-size: 28px; right: 6px; bottom: 2px; }
    .n-card .n-tags, .n-card h3, .n-card .n-meta { grid-column: 2; }
    .n-card h3 { font-size: 15px; }
    .n-card p { display: none; }
    .n-lead.big { min-height: 210px; }
    .n-lead.big h2 { font-size: 19px; }
    .n-stack { grid-template-columns: 1fr; }
}
/* the news card of the main page: cards on a wide screen, rows on a phone */
.n-narrow { display: none; }
@media (max-width: 560px) {
    .n-wide { display: none; }
    .n-narrow { display: block; }
}
/* the news band of a project's page (#54): the newest items side by side, one under the other on a phone */
.n-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.n-band .n-row { border-top: 0; padding: 0; }
.n-band .n-row h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 800px) {
    .n-band { grid-template-columns: 1fr; }
    .n-band .n-row { padding: 10px 0; border-top: 1px solid var(--border); }
    .n-band .n-row:first-child { border-top: 0; padding-top: 0; }
}
/* a picture of the news (#529): our own thumbnail fills the tile; the stripes and the mark are for the tile without one */
.n-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: -1; }
.n-art.has-pic::after { display: none; }
.press-pic { display: block; width: 100%; max-width: 640px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); margin: 0 0 16px; }

/* the faucet (#55, #795): the claim card across the top, the first ad under it, then the rules, the funds and the totals in a row (one column on a phone;
   the list of payouts went, #853). The text and the form keep a readable width inside the wide card. */
.faucet-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
@media (max-width: 1000px) { .faucet-row { grid-template-columns: minmax(0, 1fr); } }
.faucet .lede { line-height: 1.6; font-size: 16px; margin-bottom: 18px; max-width: 860px; }
.faucet .hero-search { max-width: 760px; margin-top: 0; }
.faucet-claim .faucet-collected { max-width: 760px; }
/* The totals: one figure a line, in the look of the rules */
.faucet-rules.faucet-totals { grid-template-columns: minmax(0, 1fr); }
.faucet-rules.faucet-totals > div:nth-child(odd) { border-right: 0; }
.faucet-rules.faucet-totals > div:nth-last-child(2) { border-bottom: 1px solid var(--border); }
.faucet-totals dd b { font-size: 18px; }
.faucet .hero-search .search { flex: 1 1 260px; min-height: 46px; padding-left: 14px; }
.faucet .hero-search .btn { min-height: 46px; border-radius: 10px; padding: 0 22px; }
.faucet .hero-search .btn[disabled], .faucet .hero-search .search[disabled] { opacity: .6; cursor: not-allowed; }
/* Turnstile (#793): the address takes its own line; the widget (Cloudflare's, full width) shows only when Cloudflare asks for a click, so until then it is
   out of the flow and takes no line or gap (the form is `position: relative`); the button has the check's state beside it. */
.faucet [data-faucet-turnstile] .search { flex-basis: 100%; }
.faucet .faucet-check { position: absolute; inset: 0 0 auto; min-width: 0; }
.faucet .faucet-check.is-asking { position: static; flex: 1 1 100%; }
.faucet-check-status { flex: 1 1 200px; margin: 0; align-self: center; font-size: 14px; color: var(--muted); }
.faucet-check-status[hidden], .faucet-check-status [hidden] { display: none; }
.faucet-check-status > span { display: inline-flex; align-items: center; gap: 8px; }
.faucet-spin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--accent); border-top-color: transparent; animation: faucet-spin .8s linear infinite; }
@keyframes faucet-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .faucet-spin { animation: none; border-top-color: var(--accent); opacity: .6; } }
.faucet-tick { display: inline-flex; color: var(--ok); }
.faucet-tick svg { width: 18px; height: 18px; }
.faucet-check-note { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.faucet-check-note p { margin: 0; flex: 1 1 260px; }
.faucet .note { margin: 0 0 16px; }
.faucet .note p { margin: 0 0 12px; }
.faucet .note p[hidden] { display: none; }
/* The text and the button side by side; where the text would be squeezed (a phone) the button goes under it */
.faucet [data-faucet-locked] { align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.faucet [data-faucet-locked] > div { flex: 1 1 200px; min-width: 0; }
.faucet [data-faucet-locked] p { margin: 0; }
.faucet [data-faucet-locked] .btn { flex: none; min-height: 40px; white-space: nowrap; }
.faucet-more { margin: 16px 0 0; }
.faucet-collected { margin-top: 22px; padding: 18px; border-radius: var(--r); background: var(--surface2); border: 1px solid var(--border); }
.faucet-collected .lab { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.faucet-collected .fig, .faucet-figure { font-size: 30px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.faucet-collected .fig small, .faucet-figure small { font-size: 15px; font-weight: 400; color: var(--muted); }
.faucet-collected .share { height: 10px; margin: 12px 0 8px; }
.faucet-collected p { margin: 0; }
.faucet-rules { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faucet-rules > div { padding: 12px 22px; border-bottom: 1px solid var(--border); }
.faucet-rules > div:nth-child(odd) { border-right: 1px solid var(--border); }
.faucet-rules > div:nth-last-child(-n+2) { border-bottom: 0; }
.faucet-rules dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.faucet-rules dd { margin: 3px 0 0; }
.faucet-rules-note { margin: 0; padding: 14px 22px; border-top: 1px solid var(--border); }
.faucet-figure + p { margin: 6px 0 0; }
.faucet-donate { margin: 16px 0 8px; }
.faucet-address { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.faucet-address code { font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 560px) {
    .faucet-rules > div { padding: 10px 16px; }
    .faucet-rules-note { padding: 12px 16px; }
}
/* the work of a project (#318): the dot before the name in the list, the row under the name, the key of the dots and the services of the Work tab */
.wdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; vertical-align: middle; margin-right: 2px; }
.wdot.ok { background: var(--ok); }
.wdot.warn { background: var(--warn); }
.wdot.none { background: var(--muted); }
.wdot.bad { background: var(--bad); }
.wdot.hollow { background: transparent; border: 2px solid var(--muted); box-sizing: border-box; }
.pj .who { gap: 8px; flex-wrap: nowrap; }
.pj .who a { min-width: 0; }
.pjsub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; line-height: 20px; }
.pjsub .badge { line-height: 18px; }
.wdotkey { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.wdotkey b { color: var(--text); font-weight: 600; }
.wdotkey span { display: inline-flex; align-items: center; gap: 6px; }
.workrow .lab .wdot { margin-right: 4px; }
.worksvc { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.worksvc li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.worksvc .badge { white-space: nowrap; }
.workreason { flex: 1 1 100%; }
.strip.workrow { border-top: 1px solid var(--border); }
.workmore { font-size: 16px; margin-top: 6px; }
.workwhy { font-size: 15px; color: var(--text); }

/* How to earn GRC with a project not joined through BOINC (#817, Folding@home): a card that is a <details>, closed until the visitor opens it.
   The summary is the card's head: the title, a hint and a round chevron that turns when open. The site's .fold (the poll page) is another thing. */
.earn > summary { cursor: pointer; list-style: none; flex-wrap: nowrap; justify-content: flex-start; align-items: baseline; gap: 4px 12px; }
.earn > summary::-webkit-details-marker { display: none; }
.earn:not([open]) > summary { border-bottom: 0; }
.earn > summary:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.earn > summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: var(--r); }
.earn-hint { min-width: 0; font-size: 13px; color: var(--muted); }
.earn-chev { flex: none; align-self: center; margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--surface2); color: var(--muted); transition: transform .15s; }
.earn-chev svg { width: 16px; height: 16px; }
.earn[open] .earn-chev { transform: rotate(180deg); }
.earn-steps { list-style: none; counter-reset: earn; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.earn-steps li { counter-increment: earn; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.earn-steps li::before { content: counter(earn); width: 28px; height: 28px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-weight: 650; font-size: 13px; display: grid; place-items: center; }
.earn-code { font-family: var(--mono); font-size: 13.5px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.facts.earn-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.earn-facts > div:nth-child(4) { border-right: 0; }
.earn-facts > .earn-wide { grid-column: 1 / -1; border-right: 0; border-top: 1px solid var(--border); }
.earn-facts dd.earn-name { overflow-wrap: normal; white-space: nowrap; }
.earn-sub { display: block; max-width: 820px; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
/* the warning while the project is not paid, at the top of the card's body */
.earn .card-body > .note { margin: 0 0 14px; }
/* two columns under 980 px: at 901 px the user name filled its column exactly, with no room for a classic scrollbar or a wider monospace font */
@media (max-width: 980px) {
    .facts.earn-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .earn-facts > div:nth-child(2) { border-right: 0; }
    .earn-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
/* under 720 px the site's .facts stack with a line under each; the last one has the card's own edge */
@media (max-width: 720px) {
    .facts.earn-facts { grid-template-columns: minmax(0, 1fr); }
    .earn-facts > div:last-child { border-bottom: 0; }
    .earn-facts > .earn-wide { border-top: 0; }
    .earn > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
    .earn-hint { grid-column: 1; }
    .earn-chev { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; }
}

/* The development footer (#564): only rendered while WEB_IS_DEVELOPMENT is on (partials/dev-panel.html.twig) */
.dev-panel { flex: 1 1 100%; min-width: 0; margin-top: 20px; border: 1px dashed var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: 12px; overflow: hidden; }
.dev-panel > summary, .dev-q > summary { cursor: pointer; list-style: none; }
.dev-panel > summary::-webkit-details-marker, .dev-q > summary::-webkit-details-marker { display: none; }
.dev-panel > summary:focus-visible, .dev-q > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dev-panel > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 14px; }
.dev-badge { background: var(--net-testnet); color: var(--on-net-testnet); font-weight: 700; border-radius: 6px; padding: 2px 8px; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.dev-panel h5 { margin: 0; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.dev-scroll { overflow-x: auto; }
.dev-panel table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.dev-panel td, .dev-panel th { padding: 5px 14px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.dev-n { text-align: right; color: var(--muted); white-space: nowrap; }
.dev-bad { color: var(--bad); font-weight: 700; }
.dev-q { border-top: 1px solid var(--border); }
.dev-q > summary { display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: start; padding: 5px 14px; font-family: var(--mono); }
.dev-q > summary:hover { background: var(--bg); }
.dev-sql { overflow-wrap: anywhere; }
.dev-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.dev-chip { font-style: normal; font-family: var(--font); font-size: 10.5px; font-weight: 650; border-radius: 5px; padding: 1px 6px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.dev-chip.warn { background: var(--net-testnet); border-color: transparent; color: var(--on-net-testnet); }
.dev-q-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 14px 12px; border-top: 1px dashed var(--border); }
.dev-q-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding-top: 8px; color: var(--muted); }
.dev-q-meta b { color: var(--text); font-family: var(--mono); font-weight: 600; overflow-wrap: anywhere; }
.dev-ex { border: 1px solid var(--border); }
.dev-ex th { padding: 4px 10px; font-size: 10.5px; font-weight: 650; color: var(--muted); white-space: nowrap; background: var(--bg); border-top: 0; }
.dev-ex td { padding: 4px 10px; white-space: nowrap; }
.dev-hint { margin: 0; line-height: 1.5; }
@media (max-width: 640px) {
    .dev-q > summary { grid-template-columns: 3ch minmax(0, 1fr) auto; }
    .dev-chips { grid-column: 2 / 4; justify-content: flex-start; }
}

/* The about page (#57): the list of its sections at the left, the cards at the right; one column on a phone */
.about { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.about-toc { flex: 0 0 220px; padding: 10px; display: flex; flex-direction: column; }
.about-toc-title { padding: 6px 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.about-toc a { padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; }
.about-toc a:hover { background: var(--surface2); }
.about-body { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.about-body section { scroll-margin-top: 90px; }
.about-text { display: flex; flex-direction: column; gap: 12px; }
.about-text p, .about-text h3 { margin: 0; }
.about-body .card-body > .note { margin: 0; }
.about-after { padding-top: 0; }
.about-text h3 { font-size: 16px; }
/* an endpoint's path is one long word; on a phone it breaks where it must instead of pushing the page out sideways (#767) */
.about-text h3 .mono { overflow-wrap: anywhere; }
.about-facts { padding: 0 18px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.about-facts > div { background: var(--surface2); border-radius: var(--r-sm); padding: 12px 14px; }
.about-text .about-facts { padding: 0; }
.about-facts .val { overflow-wrap: anywhere; }
.about-facts .lab { font-size: 12px; font-weight: 600; color: var(--muted); }
.about-facts .val { font-weight: 600; margin-top: 2px; }
.about-cards { padding: 4px 18px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.about-cards.two { padding-top: 18px; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.about-card { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.about-card h3, .about-card p { margin: 0; }
.about-card .raw { border: 0; border-radius: var(--r-sm); padding: 12px 14px; font-size: 13px; line-height: 1.6; }
.about-card h3 { font-size: 16px; }
.about-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.about-address { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface2); }
.about-address .mono { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.about-links-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; }
.about-links { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 10px; }
.about-links a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.about-links a:last-child { border-bottom: 0; }
.about-links a:hover { background: var(--surface2); }
.about-link-name { font-weight: 600; }
.about-group { display: flex; flex-direction: column; gap: 4px; }
.about-group .about-links-title { padding-bottom: 0; }
.about-group-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.about-group-links a { color: var(--accent-text); font-weight: 500; text-decoration: none; }
.about-group-links a:hover { text-decoration: underline; }
.aboutdata td { white-space: normal; vertical-align: top; }
.aboutdata td:last-child { min-width: 260px; }
/* The contents become a row as soon as the sections no longer fit beside them (220 + gap + 560 px: under about 850 px of screen), #795 */
@media (max-width: 850px) { .about-toc { flex-basis: 100%; flex-direction: row; overflow-x: auto; } .about-toc-title { display: none; } .about-toc a { white-space: nowrap; } }

/* An address whose owner is known (#628): a badge next to it in a list, a line under it on its own page */
.badge.known { margin-left: 6px; vertical-align: middle; white-space: nowrap; }
/* In a table the label is its own line under the address (a long one wraps inside the cell, not as a tall pill over the next column) */
.t td .badge.known { display: flex; width: fit-content; max-width: 100%; margin: 4px 0 0; padding: 3px 10px; border-radius: 10px; white-space: normal; text-align: left; line-height: 1.3; }
.badgelink.known { margin-left: 6px; vertical-align: middle; width: fit-content; }
.t td .badgelink.known { display: flex; margin: 4px 0 0; }
/* In a column of a flex row (the directory's lists) or a row with its own gap (a project's users) the mark keeps its own width and no margin */
.who2 .badgelink.known { margin: 2px 0; }
.ur .who .badgelink.known { margin-left: 0; }
.knownnote { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.knownnote b { color: var(--text); }

/* Maintenance mode and the admin login (#751). The admin bar scrolls away above the testnet bar; it uses the colour of a problem so it is not mistaken for the site. */
.adminbar { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); color: var(--text); font-size: 13.5px; }
.adminbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-top: 6px; padding-bottom: 6px; }
.adminbar strong { text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.adminbar form { margin-left: auto; }
.adminbar .btn { min-height: 32px; padding: 0 12px; }
.plain-page { max-width: 560px; padding-top: 40px; padding-bottom: 40px; }
/* The logo is made for the dark band of the header: it stands on the same band here */
.plain-brand { margin: 0 0 16px; padding: 18px; border-radius: var(--r); background: var(--band); text-align: center; }
.plain-brand .logo { display: block; width: 260px; max-width: 100%; height: auto; margin: 0 auto; }
.plain-card h1 { margin: 0 0 8px; }
.admin-form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.admin-form .search { flex: 0 0 auto; min-height: 46px; padding-left: 14px; border-radius: 10px; }
.admin-form .btn { align-self: flex-start; }
.admin-error { color: var(--bad); font-weight: 600; }

/* The settings page (#775): a card for each kind of setting, a label and its explanation on the left, the control on the right; one column on a phone */
.pagehead h1 { margin: 0; }
.pagehead .lead { margin: 6px 0 0; max-width: 820px; color: var(--muted); }
.set-nojs { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--surface2); font-size: 14px; }
.setgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
/* Two cards side by side from 1 000 px: a row then has the label over its control, so the theme buttons stay on one line */
@media (min-width: 1000px) {
    .setgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .setgrid .setrow { grid-template-columns: minmax(0, 1fr); }
    .setgrid .setrow:has(.settog) { grid-template-columns: minmax(0, 1fr) auto; }
}
.setseg .short { display: none; }
.setrow { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 24px; padding: 16px 18px; border-top: 1px solid var(--border); }
.card-head + .setrow { border-top: 0; }
.setlab { font-weight: 650; }
.setlab .sub { display: block; margin-top: 3px; font-weight: 400; font-size: 13px; color: var(--muted); line-height: 1.45; }
.setnote { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.setnote.flush { margin: 0; }
.setnote b { color: var(--text); font-weight: 600; }
.setseg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface2); align-self: start; justify-self: start; }
.setseg button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.setseg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.setseg button small { margin-left: 4px; font-weight: 500; color: var(--muted); }
.swbs { display: flex; flex-wrap: wrap; gap: 8px; align-self: start; }
.swb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.swb[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.swi { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.swi.purple { background: var(--accent-purple); }
.swi.teal { background: var(--accent-teal); }
.swi.blue { background: var(--accent-blue); }
.swi.amber { background: var(--accent-amber); }
.settog { display: flex; justify-content: flex-end; align-items: flex-start; }
.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch input:disabled { cursor: not-allowed; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--border); pointer-events: none; transition: background .15s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--border); transition: left .15s; }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { left: 23px; }
.switch input:focus-visible + i { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.switch input:disabled + i { opacity: .5; }
@media (max-width: 760px) {
    .setrow { grid-template-columns: minmax(0, 1fr); padding: 14px; }
    .setrow:has(.settog) { grid-template-columns: minmax(0, 1fr) auto; }
    .setseg { display: flex; width: 100%; box-sizing: border-box; }
    .setseg button { flex: 1 1 0; padding: 0 6px; white-space: nowrap; }
    .setseg button small { display: block; margin: 0; font-size: 11.5px; }
    .setseg .long { display: none; }
    .setseg .short { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .switch i, .switch i::after { transition: none; } }

/* How a vote's weight was made (#777): one sum of vote weight (not GRC), each part under its name with what it came from; the three in a row from
   761 px, stacked with + and = on a phone; then how the sum is made with the poll's own figures */
.wsum { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.wsum.three { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr); }
.wsum:not(.three) { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
.wterm { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.wterm.total { background: var(--accent-soft); border-color: transparent; }
.wlab { display: flex; align-items: center; gap: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.wval { font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
.wfrom { font-size: 13.5px; font-weight: 600; }
.wwhy { font-size: 13px; color: var(--muted); line-height: 1.45; }
.wop { display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--muted); }
.wcalc { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface2); }
.weq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; font-size: 14px; color: var(--muted); }
.weq.strong { font-size: 16px; font-weight: 700; color: var(--text); }
.weq.strong > span:not(.mono) { font-weight: 400; color: var(--muted); }
.wmulti { margin: 0; }
.wterms { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 24px; margin: 4px 0 0; }
.wterms dt { font-size: 13px; font-weight: 600; }
.wterms dd { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
@media (max-width: 760px) {
    .wsum.three, .wsum:not(.three) { grid-template-columns: minmax(0, 1fr); }
    .wop { min-height: 20px; }
}

/* Where a vote's balance came from (#777): an address a row, opening to its signer and its outputs in groups by what they came to; a group opens to
   its largest outputs, and an output to its thread */
.vb-head { margin: 0; }
.vaddrs { border-top: 1px solid var(--border); }
.vaddr { border-bottom: 1px solid var(--border); }
.vaddr > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 16px; align-items: baseline; padding: 11px 18px; cursor: pointer; list-style: none; }
.vaddr > summary::-webkit-details-marker, .ogrp > summary::-webkit-details-marker { display: none; }
.vaddr > summary:hover, .vaddr[open] > summary { background: var(--surface2); }
.vaddr-a::before { content: "▸"; display: inline-block; width: 14px; color: var(--muted); }
.vaddr[open] .vaddr-a::before { content: "▾"; }
.vaddr-body { display: flex; flex-direction: column; gap: 10px; padding: 10px 18px 14px 32px; }
.vaddr-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.obar { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--surface2); }
.og-added { fill: var(--series-3); background: var(--series-3); }
.og-held { fill: var(--series-2); background: var(--series-2); }
.og-spent, .og-repeated, .og-spent_before, .og-made_after, .og-unread { fill: color-mix(in srgb, var(--muted) 55%, var(--surface)); background: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
.og-refused { fill: var(--bad); background: var(--bad); }
.ogrp { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.ogrp > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 14px; align-items: baseline; padding: 10px 12px; cursor: pointer; list-style: none; font-size: 14px; }
.ogrp[open] > summary { border-bottom: 1px solid var(--border); }
.ogrp-why { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.orows { display: flex; flex-direction: column; }
.orow-h, .orow > summary { display: grid; grid-template-columns: 9.5rem 6rem 6rem minmax(0, 1fr) 3.5rem; gap: 2px 14px; align-items: baseline; padding: 6px 12px; font-size: 13px; }
.orow-h { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--surface2); }
.orow { border-top: 1px solid var(--border); }
.orow > summary { cursor: pointer; list-style: none; }
.orow > summary::-webkit-details-marker { display: none; }
.orow > summary:hover, .orow[open] > summary { background: var(--accent-soft); }
.orow-h .r, .orow .r { text-align: right; }
.orow-pd { display: none; }
.orow-w { color: var(--accent-text); text-align: right; white-space: nowrap; }
.orow-w::after { content: " ▸"; }
.orow[open] .orow-w::after { content: " ▾"; }
.ogrp-more { margin: 0; padding: 8px 12px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; }
.oprof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: 6px 18px; align-items: end; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface2); }
.oprof-facts { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.oprof-facts b { color: var(--text); font-weight: 600; }
.obars { display: flex; align-items: flex-end; gap: 4px; height: 54px; }
.obars a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; color: var(--muted); font-size: 10.5px; text-decoration: none; }
.obars a.on, .obars a:hover { color: var(--text); font-weight: 700; }
.obars i { display: block; width: 100%; border-radius: 3px 3px 0 0; }
.oh-0 { height: 0%; }
.oh-5 { height: 5%; }
.oh-10 { height: 10%; }
.oh-15 { height: 15%; }
.oh-20 { height: 20%; }
.oh-25 { height: 25%; }
.oh-30 { height: 30%; }
.oh-35 { height: 35%; }
.oh-40 { height: 40%; }
.oh-45 { height: 45%; }
.oh-50 { height: 50%; }
.oh-55 { height: 55%; }
.oh-60 { height: 60%; }
.oh-65 { height: 65%; }
.oh-70 { height: 70%; }
.oh-75 { height: 75%; }
.oh-80 { height: 80%; }
.oh-85 { height: 85%; }
.oh-90 { height: 90%; }
.oh-95 { height: 95%; }
.oh-100 { height: 100%; }
.octl { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.oseg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.oseg a { padding: 3px 10px; border-left: 1px solid var(--border); color: var(--text); text-decoration: none; }
.oseg a:first-child { border-left: 0; }
.oseg a.on { background: var(--text); color: var(--surface); font-weight: 600; }
.ofind { display: inline-flex; gap: 4px; margin-left: auto; }
.ofind input[type=search] { width: 12rem; min-height: 30px; padding: 0 8px; border: 1px solid var(--field-border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; }
.ofind button { min-height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; }
.opg { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 6px 12px; border-bottom: 1px solid var(--border); }
.ostory { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px 24px; border-top: 1px dashed var(--border); background: var(--surface2); }
.ostrip-row { display: flex; align-items: center; gap: 8px; font-size: 11px; white-space: nowrap; }
.ostrip { flex: 1 1 auto; min-width: 0; overflow: visible; }
.ostrip-l { stroke: var(--border); stroke-width: 2; }
.ostrip-s { fill: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
.ostrip-d { stroke: var(--surface); stroke-width: 2; fill: var(--muted); }
.ostrip-d.k-made { fill: var(--text); }
.ostrip-d.k-this { fill: var(--accent); }
.ostrip-d.k-holder { fill: var(--series-2); }
.ostrip-d.k-spent { fill: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
.ostrip-n { fill: var(--muted); font-size: 10px; font-weight: 700; }
.osay { margin: 0; font-size: 13px; line-height: 1.45; }
.olegend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font-size: 12px; color: var(--muted); }
.olegend b { color: var(--text); font-weight: 600; }
@media (max-width: 760px) {
    .vaddr > summary { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 14px; }
    .vaddr-o { grid-column: 1 / -1; grid-row: 2; padding-left: 14px; font-size: 12.5px; }
    .vaddr-body { padding: 10px 14px 12px; }
    .ogrp > summary { grid-template-columns: minmax(0, 1fr) auto; }
    .ogrp > summary > .muted { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; }
    .orow-h, .orow-d, .octl-made, .ogrp-hint { display: none; }
    .orow > summary { grid-template-columns: minmax(0, 1fr) auto; padding: 7px 12px; }
    .orow-r { grid-column: 1; font-size: 12px; color: var(--muted); }
    .orow-pd { display: inline; }
    .orow-w { grid-column: 2; font-size: 12px; }
    .oprof { grid-template-columns: minmax(0, 1fr); }
    .ofind { margin-left: 0; width: 100%; }
    .ofind input[type=search] { flex: 1 1 auto; width: auto; }
    .ostory { padding: 8px 10px 10px 14px; }
}

/* Network parameters (#784, classes np-*), the owner's draft of 2026-11-07: a page head with the latest change, the key figures, then four tabs. Each parameter is a
   pair, its name on the left and its value on the right, with since when between; a group is a band with its icon. A parameter or a scraper opens in place
   (rowopen.js, classes ro-*; without it the anchor and :target) to what it does and its changes on a vertical time line: the accent for what is in force, muted for
   earlier, an amber diamond for a value the wallet could not read. History lists every change by day. On a phone each row is a small block */
.pagehead .np-latest { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13.5px; }
.pagehead .np-latest b { margin-right: 6px; }
.np-know { display: flex; gap: 12px; margin: 16px 18px 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); font-size: 13.5px; }
.np-know > svg { flex: none; margin-top: 1px; color: var(--accent-text); }
.np-know p { margin: 0; }
.np-know p + p { margin-top: 4px; }
.np-grp { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 16px 18px; background: var(--surface2); border-top: 10px solid var(--bg); border-bottom: 1px solid var(--border); }
.np-grp.np-plain { margin-top: 12px; border-top: 0; }
.np-gico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.np-gico svg { width: 22px; height: 22px; }
.np-grp h2 { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.np-grp h2 .badge { margin-left: 4px; vertical-align: 3px; background: var(--surface); }
.np-grp p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.np-list { margin: 0; padding: 0; list-style: none; }
.np-list > li + li { border-top: 1px solid var(--border); }
.np-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px 240px 136px; gap: 4px 20px; align-items: center; padding: 14px 18px; }
.np-slist .np-row { grid-template-columns: minmax(0, 1fr) 260px 136px; }
.np-name { min-width: 0; }
.np-pname { font-size: 16px; font-weight: 600; }
.np-key { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.np-when { font-size: 13.5px; }
.np-when small { display: block; font-size: 12.5px; color: var(--muted); }
.np-val { text-align: right; }
.np-val .np-v, .np-tsec-val .np-v { display: block; font-size: 20px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; }
.np-val small, .np-tsec-val small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.np-act { text-align: right; }
.np-btn.ro-opener, .np-btn.np-totab { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--accent-text); white-space: nowrap; text-decoration: none; }
.np-btn.ro-opener::after { content: '▾'; content: '▾' / ''; }
.np-btn.np-totab::after { content: '›'; content: '›' / ''; }
.np-flag { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; color: var(--warn); }
.np-flag i, .np-dia { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 2px; border-radius: 1px; background: var(--warn); transform: rotate(45deg); }
.np-warn { display: block; font-size: 12.5px; color: var(--warn); }
.np-clamp { display: block; font-size: 12.5px; color: var(--muted); }
.np-figs .stat .np-warn { color: var(--warn); }
.np-dagger { color: var(--warn); cursor: help; }
.np-addr { font-size: 15px; font-weight: 600; }
.np-state { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.np-state i, .np-sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 60%, transparent); }
.np-state.np-on i, .np-sdot.np-on { background: var(--ok); }
.np-sdot { margin-right: 6px; vertical-align: 1px; }

/* A row that opens */
.ro-panel { display: none; padding: 0 18px 18px; background: var(--accent-soft); }
.ro-panel.ro-open, :root:not(.ro-js) .ro-panel:target { display: block; }
.np-row:has(+ .ro-panel.ro-open), :root:not(.ro-js) .np-row:has(+ .ro-panel:target) { background: var(--accent-soft); }
.np-row:has(+ .ro-panel.ro-open) .np-btn.ro-opener, :root:not(.ro-js) .np-row:has(+ .ro-panel:target) .np-btn.ro-opener { border-color: var(--accent-text); }
.np-row:has(+ .ro-panel.ro-open) .np-btn.ro-opener::after, :root:not(.ro-js) .np-row:has(+ .ro-panel:target) .np-btn.ro-opener::after { content: '▴'; content: '▴' / ''; }
.np-dbox { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: 24px; padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 14px; background: var(--surface); }
.np-dbox.np-one { grid-template-columns: minmax(0, 1fr); gap: 0; }
.np-dbox h3, .np-tsec h3 { margin: 0 0 8px; font-size: 14px; }
.np-dbox .np-about > p { margin: 0; font-size: 13.5px; color: var(--muted); }
.np-dbox .np-full { margin: 0 0 12px; font-size: 12.5px; overflow-wrap: anywhere; }
.np-facts { display: grid; gap: 8px; margin: 12px 0 0; font-size: 13.5px; }
.np-facts dt { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.np-facts dd { margin: 0; }
.np-vtl { margin: 0; padding: 0; list-style: none; }
.np-vtl > li { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 2px 14px; padding: 0 0 16px 26px; }
.np-vtl > li::before { content: ''; position: absolute; left: 7px; top: 20px; bottom: 0; width: 2px; background: var(--border); }
.np-vtl > li:last-child { padding-bottom: 0; }
.np-vtl > li:last-child::before { display: none; }
.np-vtl .np-dot { position: absolute; left: 2px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 60%, transparent); box-shadow: 0 0 0 3px var(--surface); }
.np-vtl > li.np-now .np-dot { background: var(--accent-text); }
.np-vtl > li.np-bad .np-dot { border-radius: 2px; background: var(--warn); transform: rotate(45deg) scale(.85); }
.np-vt-when { font-size: 13.5px; font-weight: 600; }
.np-vt-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.np-vt-what b { font-weight: 650; }
.np-vt-what time { white-space: nowrap; }
.np-vt-what small, .np-ditems small { display: block; font-size: 12.5px; color: var(--muted); }
.np-vt-ref { text-align: right; font-size: 12.5px; color: var(--muted); }
.np-sign { display: inline-block; width: 12px; font-family: var(--mono); font-weight: 700; }
.np-sign.np-add { color: var(--ok); }
.np-sign.np-rem { color: var(--bad); }
.np-chg { display: block; }
.np-foot, .np-note { margin: 0; padding: 14px 18px; font-size: 12.5px; color: var(--muted); }
.np-foot { border-top: 1px solid var(--border); }
.np-note { padding-top: 0; }
details.np-earlier > summary { padding: 16px 18px; border-top: 10px solid var(--bg); cursor: pointer; font-size: 17px; font-weight: 700; }

/* Teams */
.np-tsec { padding: 22px 18px; }
.np-tsec + .np-tsec { border-top: 10px solid var(--bg); }
.np-tsec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 24px; }
.np-tsec-head h2 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.np-tsec-val { text-align: right; }
.np-tsec-text { margin: 8px 0 0; max-width: 72ch; font-size: 13.5px; color: var(--muted); }
.np-tcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; margin-top: 18px; }
.np-teams { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.np-teams li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; font-size: 14px; }
.np-teams li + li { border-top: 1px solid var(--border); }
.np-teams small { flex: none; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.np-compat { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface2); font-size: 13px; color: var(--muted); }
.np-compat .mono { display: block; margin-top: 6px; font-size: 12px; color: var(--text); overflow-wrap: anywhere; }

/* History */
.np-hbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.np-segs { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); }
.np-segs a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.np-segs a.np-on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.np-again { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13.5px; color: var(--muted); text-decoration: none; }
.np-again .np-box { display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 5px; color: var(--accent-text); }
.np-again .np-box svg { width: 14px; height: 14px; }
.np-year { margin: 0; padding: 22px 18px 8px; font-size: 22px; letter-spacing: -.01em; }
.np-day { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 18px; align-items: start; padding: 12px 18px; border-top: 1px solid var(--border); }
.np-dwhen { font-size: 14px; font-weight: 600; }
.np-ditems { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.np-ditems li { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; }
.np-ditems li.np-again-item, .np-ditems li.np-again-item .np-what b { color: var(--muted); }
.np-ditems .np-kind { font-size: 12.5px; color: var(--muted); }
.np-ditems .np-what { font-size: 14px; overflow-wrap: anywhere; }
.np-ditems .np-what b { font-weight: 600; }
.np-ditems .np-ref { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) {
    .np-know { margin: 12px 12px 0; }
    .np-grp { gap: 12px; padding: 14px; }
    .np-gico { width: 38px; height: 38px; }
    .np-grp h2, .np-tsec-head h2 { font-size: 19px; }
    .np-row, .np-slist .np-row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px; }
    .np-row .np-name { grid-column: 1; grid-row: 1; }
    .np-row .np-act { grid-column: 2; grid-row: 1; align-self: start; }
    .np-row .np-val { grid-column: 1 / -1; text-align: left; margin-top: 6px; }
    .np-row .np-when { grid-column: 1 / -1; }
    .ro-panel { padding: 0 12px 14px; }
    .np-dbox { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px; }
    .np-vtl > li { grid-template-columns: minmax(0, 1fr); }
    .np-vtl .np-vt-ref { text-align: left; }
    .np-vtl .np-vt-ref br { display: none; }
    .np-vtl .np-vt-ref br + a { margin-left: 8px; }
    .np-tsec { padding: 18px 14px; }
    .np-tsec-val { text-align: left; }
    .np-tcols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .np-hbar { padding: 12px 14px; }
    .np-segs { display: flex; flex-wrap: wrap; width: 100%; }
    .np-segs a { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
    .np-year { padding: 18px 14px 6px; }
    .np-day { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
    .np-ditems li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
    .np-figs .stat .val { font-size: 20px; overflow-wrap: normal; }
}