/* x402 market report: page-only parts */
.section-head:has(+ .report-figures) { --lead: 9; } /* the lead starts over the third figure below */

/* a section that follows a full-bleed band needs its own top space */
.page-section--after-band { padding-block-start: var(--section); }

/* the build line sits on its own row above the buttons, so swapping "Loading…" for the longer loaded line never moves them */
.report-state { display: flex; align-items: center; flex-basis: 100%; font-size: var(--step-body); color: var(--ink); }
.report-state[data-state='loading'] { color: var(--muted); }
.report-state[data-state='loading'] .live-dot { background: var(--field-2); }
.report-state[data-state='error'] .live-dot { background: var(--ui-amber); }

/* headline figures: the first one large across the row, three beneath; each label sits under its number */
.report-figures { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--block-gap) var(--gutter); align-items: start; }
.report-figures > * { grid-column: span 4; }
.report-figures > .figure-lead { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.figure-lead .figure-num { grid-column: 1 / span 7; font-size: var(--step-display); line-height: 0.9; letter-spacing: var(--track-tight); white-space: nowrap; }
.figure-lead .figure-label { grid-column: 1 / span 7; margin-block-start: 1rem; font-size: var(--step-lead); color: var(--ink); max-inline-size: none; }
.figure-lead .figure-note { grid-column: 1 / span 7; }
.report-figures .figure-label { color: var(--ink); font-size: var(--step-body); }
.figure-note { margin-block-start: 0.25rem; font-size: var(--step-small); color: var(--muted); max-inline-size: 36ch; }
.report-figures[aria-busy='true'] .figure-num { color: var(--muted); }

/* tables */
.sellers-table .tag-text { margin-inline: 0 0.4em; margin-block-start: 0.4rem; font-size: var(--step-small); }
.sellers-table .rank { color: var(--muted); }
.onchain { display: block; margin-block-start: 0.4rem; font-size: var(--step-small); font-weight: 400; max-inline-size: 52ch; }
.repeat-table td:last-child { font-size: var(--step-small); }
table.data .muted { color: var(--muted); }
.page-section--dark table.data .muted { color: var(--on-dark-muted); }
.move { position: relative; white-space: nowrap; }

/* categories: words left, table right */
.categories-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; align-items: start; }
.categories-text { grid-column: 1 / span 4; display: grid; gap: 1rem; position: sticky; inset-block-start: calc(var(--header) + 24px); }
.categories-text h2 { font-size: var(--step-head); line-height: 0.95; letter-spacing: var(--track-tight); }
.categories-text strong { font-weight: 500; }
.categories-grid > .table-wrap { grid-column: 5 / -1; }

/* paid routes for agents: name and price at the two ends, the route under them */
/* two-ended rows across the whole width: name, price and a line on the left, the route and its Copy on the right */
.routes { display: grid; }
.routes li { padding-block: 24px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0.4rem; align-items: center; border-block-start: 1px solid var(--line); }
.routes li:first-child { border-block-start: 0; padding-block-start: 0; }
.route-head { grid-column: 1 / span 5; grid-row: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.routes li:not(.no-boost) > p { grid-column: 1 / span 5; grid-row: 2; }
.route-name { font-size: var(--step-lead); font-weight: 500; line-height: 1.2; }
.route-price { font-size: var(--step-lead); font-variant-numeric: tabular-nums; }
.routes .connect { grid-column: 7 / -1; grid-row: 1 / span 2; margin-block-start: 0; }
.routes .no-boost { display: grid; grid-template-columns: none; justify-items: start; gap: 0.5rem; padding-block-start: 28px; }
.routes .no-boost > p { max-inline-size: 60ch; }

/* email signup */
.sub-title, .read-title { font-size: var(--step-head); line-height: 0.95; letter-spacing: var(--track-tight); }
@media (min-width: 1101px) { .read-title { position: sticky; inset-block-start: calc(var(--header) + 24px); align-self: start; } }
.sub-text { margin-block-start: 1.5rem; max-inline-size: 44ch; }
.sub-form { display: grid; gap: 0.6rem; }
.sub-label { font-weight: 500; }
.sub-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sub-input { flex: 1 1 16rem; min-block-size: 3rem; padding-inline: 1rem; background: var(--bg); color: var(--ink); border: 1px solid color-mix(in oklch, var(--ink) 28%, transparent); border-radius: var(--radius); transition: border-color var(--t-hover) var(--ease-out); }
.sub-input::placeholder { color: var(--muted); }
.sub-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.sub-input:active { border-color: var(--ink); }
.sub-row .button:disabled { opacity: 0.6; cursor: progress; }
.sub-hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: clip; }
.sub-msg { min-block-size: 1.45em; font-size: var(--step-body); display: flex; align-items: center; }
.sub-msg[data-state='ok'] { color: var(--ink); }
/* the result's dot scales in from script; it needs its own box for that */
.sub-msg .live-dot { transform-origin: center; }
.sub-more { margin-block-start: 1.5rem; max-inline-size: 52ch; }
@media (hover: hover) and (pointer: fine) { .sub-input:hover { border-color: var(--ink); } }

@media (max-width: 1100px) {
  .categories-text, .categories-grid > .table-wrap { grid-column: 1 / -1; }
  .categories-text { position: static; }
  .route-head, .routes li:not(.no-boost) > p, .routes .connect { grid-column: 1 / -1; grid-row: auto; }
  .routes .connect { margin-block-start: 0.5rem; }
}
@media (max-width: 900px) {
  /* stacked rows: the seller's name heads its block, rank follows */
  table.data.stack.sellers-table tr { display: flex; flex-direction: column; }
  table.data.stack.sellers-table td.name { order: -1; }
  table.data.stack.repeat-table td:last-child { display: block; text-align: start; }
  table.data.stack.repeat-table td:last-child::before { display: block; max-inline-size: none; }
}
@media (max-width: 760px) {
  .report-figures { row-gap: var(--section); }
  /* the loaded build line ("Week of … · built … · next on Monday") runs to two lines here; hold them from the start */
  .report-state { min-block-size: 2lh; }
  .report-figures > * { grid-column: 1 / -1; }
  .figure-lead .figure-num, .figure-lead .figure-label, .figure-lead .figure-note { grid-column: 1 / -1; }
  .route-head { flex-wrap: wrap; }
  .sub-row .button { inline-size: 100%; }
}