/* ============================================================
   site.css — memecoins.indexbychi.com
   Loads after indexbychi.css. Every value below resolves to a
   house-style token; no hex values, no token redefinitions.
   ============================================================ */

body {
    font-size: var(--text-base);
    background-color: var(--color-bg);
}

/* Page furniture is where the air lives. Tables stay tight. */
.site-main {
    padding-bottom: var(--space-16);
}

/* ---------- masthead ---------- */

.masthead {
    border-bottom: var(--border-thin) solid var(--color-border-strong);
    background-color: var(--color-bg);
}

.masthead-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4) var(--space-6);
    padding: var(--space-6) 0 var(--space-4);
}

.masthead-domain {
    display: flex;
    flex-direction: column;
    gap: var(--space-half);
    padding-bottom: var(--space-half);
}

.masthead-domain a {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-body);
    border-bottom: var(--border-thin) solid var(--color-border-strong);
}

.masthead-domain a:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.masthead-stamp {
    margin-left: auto;
    text-align: left;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.masthead-stamp strong {
    font-weight: var(--weight-semibold);
    color: var(--color-text-body);
}

/* per-chain token counts */
.chain-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-6);
    padding: var(--space-2-5) 0 var(--space-3-5);
    border-top: var(--border-thin) solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.chain-strip li {
    display: flex;
    align-items: baseline;
    gap: var(--space-1-5);
    font-variant-numeric: tabular-nums;
}

.chain-strip .chain-name {
    font-size: var(--text-3xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.chain-strip .chain-count {
    font-weight: var(--weight-semibold);
    color: var(--color-text-body);
}

/* ---------- stat bar ---------- */

.statbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: var(--border-thin) solid var(--color-border-strong);
}

.statbar > div {
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
    border-top: var(--border-thin) solid var(--color-border);
}

.statbar > div:nth-child(1),
.statbar > div:nth-child(2) {
    border-top: none;
}

.statbar .value {
    line-height: var(--leading-tight);
}

/* ---------- section heads ---------- */

.section {
    padding-top: var(--space-10);
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    padding-bottom: var(--space-4);
}

.section-head h2 {
    font-size: var(--display-sm);
}

.section-head p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.section-head .section-aside {
    margin-left: auto;
}

/* ---------- group index cards ---------- */

.group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-1);
    border-top: var(--border-thin) solid var(--color-border-strong);
}

.group-card {
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
    border-bottom: var(--border-thin) solid var(--color-border);
}

.group-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.group-card-name {
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text);
}

.group-card .value {
    display: block;
    margin-top: var(--space-1);
    line-height: var(--leading-tight);
}

.group-card .sparkline {
    width: 100%;
    height: 40px;
    margin-top: var(--space-2-5);
}

.group-card-foot {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2-5);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- direction ---------- */

.delta .arrow {
    font-size: 0.7em;
    padding-right: var(--space-half);
    vertical-align: baseline;
}

.delta-flat {
    color: var(--color-text-subtle);
}

.delta-sm {
    font-size: var(--text-xs);
}

/* new-this-week signal */
.new-count {
    display: inline-block;
    min-width: 3.25em;
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-sharp);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--color-text-body);
}

.new-count-hot {
    background-color: var(--color-positive-soft);
    color: var(--color-positive-strong);
}

.new-count-zero {
    color: var(--color-text-muted);
    font-weight: var(--weight-regular);
}

/* ---------- leaderboard ---------- */

.board {
    border-top: var(--border-thin) solid var(--color-border-strong);
}

.board.table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--color-bg);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.board.table td {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-thin) solid var(--color-border);
    line-height: var(--leading-heading);
    white-space: nowrap;
}

.board.table tbody tr:last-child td {
    border-bottom: var(--border-thin) solid var(--color-border-subtle);
}

.col-rank {
    width: var(--space-10);
    color: var(--color-text-faint);
    font-variant-numeric: tabular-nums;
}

.theme-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.col-theme {
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-group {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.col-cons {
    max-width: 17rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.col-cons .cons-lead {
    color: var(--color-text-body);
    font-weight: var(--weight-medium);
}

.col-curve {
    width: 96px;
}

.board .sparkline-inline {
    width: 84px;
    height: 20px;
}

.board-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

/* ---------- footer ---------- */

.site-foot {
    border-top: var(--border-thin) solid var(--color-border-strong);
    padding: var(--space-5) 0 var(--space-10);
}

.site-foot p {
    max-width: 90ch;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    text-wrap: pretty;
}

.site-foot p + p {
    margin-top: var(--space-2);
}

.site-foot .foot-legal {
    color: var(--color-text-subtle);
}

/* ============================================================
   Small screens: the leaderboard degrades to stacked rows.
   No horizontal scroll, no card chrome — hairlines only.
   ============================================================ */

@media (max-width: 1359px) {

    .board.table,
    .board.table tbody,
    .board.table tr,
    .board.table td {
        display: block;
    }

    .board.table thead {
        display: none;
    }

    .board.table tr {
        display: grid;
        grid-template-columns: var(--space-8) repeat(11, minmax(0, 1fr));
        row-gap: var(--space-1);
        column-gap: 0;
        padding: var(--space-3) 0;
        border-bottom: var(--border-thin) solid var(--color-border);
    }

    .board.table tbody tr:hover td {
        background-color: transparent;
    }

    .board.table td {
        padding: 0;
        border-bottom: none;
        min-width: 0;
    }

    .board.table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: var(--text-3xs);
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-text-subtle);
        line-height: var(--leading-normal);
    }

    .board.table td.col-rank { grid-row: 1; grid-column: 1; width: auto; text-align: left; padding-top: var(--space-half); padding-right: var(--space-2); }
    .col-theme  { grid-row: 1; grid-column: 2 / span 8; max-width: none; white-space: normal; }
    .col-group  { grid-row: 1; grid-column: 10 / span 3; text-align: right; padding-top: var(--space-1); }
    .col-cons   { grid-row: 2; grid-column: 1 / -1; max-width: none; }
    .col-curve  { grid-row: 3; grid-column: 1 / -1; width: auto; }
    .col-d7     { grid-row: 4; grid-column: 1 / span 4; }
    .col-d30    { grid-row: 4; grid-column: 5 / span 4; }
    .col-new    { grid-row: 4; grid-column: 9 / span 4; }
    .col-cap    { grid-row: 5; grid-column: 1 / span 4; }
    .col-liq    { grid-row: 5; grid-column: 5 / span 4; }
    .col-tokens { grid-row: 5; grid-column: 9 / span 4; }

    .board .sparkline-inline {
        display: block;
        width: 100%;
        height: 24px;
    }

    .board.table td.col-d7,
    .board.table td.col-d30,
    .board.table td.col-new,
    .board.table td.col-cap,
    .board.table td.col-liq,
    .board.table td.col-tokens {
        text-align: left;
        padding-right: var(--space-3);
    }

    .new-count {
        min-width: 0;
        text-align: left;
    }
}

@media (min-width: 1360px) {
    .col-cons {
        max-width: 14rem;
    }
}

@media (min-width: 900px) {
    .statbar {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .statbar > div {
        border-top: none;
    }
}

@media (min-width: 600px) and (max-width: 899px) {
    .statbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .statbar > div:nth-child(3) {
        border-top: none;
    }
}

@media (max-width: 599px) {
    .masthead-stamp {
        margin-left: 0;
        width: 100%;
    }

    .section-head .section-aside {
        margin-left: 0;
    }
}

/* ============================================================
   Self-hosted fonts. Files live in /fonts/ (Inter and Playfair
   Display, both SIL OFL; licences alongside the files).
   ============================================================ */

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/playfair-display-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/playfair-display-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   Inner pages (group, theme, token, about, admin). Everything
   below reuses the shared components; these rules only place
   them. Tokens only, no hex.
   ============================================================ */

.page-head {
    padding: var(--space-8) 0 var(--space-5);
}

.page-head h1 {
    font-size: var(--display-lg);
}

.page-head h1 .sym {
    margin-left: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    vertical-align: middle;
}

.crumbs {
    margin-bottom: var(--space-2);
}

.crumbs a:hover {
    color: var(--color-accent);
}

.page-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.page-head-meta .badge:hover {
    color: var(--color-accent);
}

.statbar .value-sub {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.note {
    max-width: var(--prose-max);
    padding: var(--space-3) 0;
    border-top: var(--border-thin) solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
}

.note strong {
    font-weight: var(--weight-semibold);
    color: var(--color-text-body);
}

/* ---------- history chart ---------- */

.chart {
    border-top: var(--border-thin) solid var(--color-border-strong);
    padding-top: var(--space-3);
}

.chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding-bottom: var(--space-3);
}

.range-toggle {
    display: inline-flex;
    gap: var(--space-1);
}

.range-toggle .btn {
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--text-xs);
}

.chart-readout {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.chart-body svg {
    display: block;
    width: 100%;
    height: auto;
}

.chart-grid line {
    stroke: var(--color-border);
    stroke-dasharray: 2 3;
}

.chart-axis text {
    fill: var(--color-text-subtle);
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
}

.chart-line {
    fill: none;
    stroke: var(--color-text-subtle);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.chart-positive .chart-line {
    stroke: var(--color-positive);
}

.chart-negative .chart-line {
    stroke: var(--color-negative);
}

.chart-cursor {
    stroke: var(--color-border-strong);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.chart-dot {
    fill: var(--color-text-subtle);
}

.chart-positive .chart-dot {
    fill: var(--color-positive);
}

.chart-negative .chart-dot {
    fill: var(--color-negative);
}

.chart-empty {
    padding: var(--space-8) 0;
    border-bottom: var(--border-thin) solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
    text-align: center;
}

/* ---------- new this week ---------- */

.new-week {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4) var(--space-8);
    padding: var(--space-4) 0;
    border-top: var(--border-thin) solid var(--color-border-strong);
    border-bottom: var(--border-thin) solid var(--color-border);
}

.new-week-figure {
    min-width: 8rem;
}

.new-week-body {
    flex: 1 1 24rem;
}

.new-week-body p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.chip-list .badge:hover {
    color: var(--color-accent);
}

.chip-list .badge span {
    margin-left: var(--space-1-5);
    font-weight: var(--weight-regular);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

/* ---------- token tables ---------- */

/* Wide token tables scroll sideways instead of wrapping cells. */
.table-scroll .table td {
    white-space: nowrap;
}

/* ---------- token logos ---------- */

.token-logo {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: var(--space-2);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-muted);
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--text-3xs);
    font-weight: var(--weight-bold);
    line-height: 20px;
    color: var(--color-text-subtle);
    flex-shrink: 0;
}

.token-logo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.token-logo-lg {
    width: 40px;
    height: 40px;
    margin-right: var(--space-3);
    font-size: var(--text-sm);
    line-height: 40px;
    vertical-align: middle;
}

.table .sym {
    margin-left: var(--space-1-5);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.table .badge-sm {
    margin-left: var(--space-1-5);
    vertical-align: middle;
}

.table tr.is-inactive td {
    color: var(--color-text-subtle);
}

.table .col-kw {
    margin-left: var(--space-1-5);
    font-size: var(--text-2xs);
    color: var(--color-text-faint);
}

.table .theme-name:hover {
    color: var(--color-accent);
}

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ---------- contract address ---------- */

.address-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.address {
    padding: var(--space-1-5) var(--space-2-5);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-sharp);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-body);
    word-break: break-all;
}

/* ---------- prose ---------- */

.prose h2 {
    margin: var(--space-8) 0 var(--space-2);
    font-size: var(--display-2xs);
}

.prose p {
    margin-bottom: var(--space-3);
    color: var(--color-text-body);
}

.prose pre {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    background-color: var(--color-bg-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    overflow-x: auto;
}

.prose a {
    border-bottom: var(--border-thin) solid var(--color-border-strong);
}

.prose a:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* ---------- admin ---------- */

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: var(--border-thin) solid var(--color-border);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.admin-nav a:hover,
.admin-nav button:hover {
    color: var(--color-accent);
}

.admin-nav button {
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

.flash {
    margin: var(--space-4) 0;
    padding: var(--space-2-5) var(--space-3);
    border-left: var(--border-thick) solid var(--color-positive);
    background-color: var(--color-bg-subtle);
    font-size: var(--text-sm);
    color: var(--color-text-body);
}

.flash-error {
    border-left-color: var(--color-negative);
}

.form {
    max-width: 520px;
    padding-top: var(--space-4);
}

.form .label {
    margin-top: var(--space-4);
}

.form .field-hint {
    margin-bottom: var(--space-2);
}

.form .btn {
    margin-top: var(--space-5);
}

.form-inline {
    display: inline;
}

.table .input,
.table .select {
    min-width: 6rem;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
}

.table .input-short {
    width: 4.5rem;
    min-width: 0;
}

.table .actions {
    display: flex;
    gap: var(--space-1);
    white-space: nowrap;
}

.table .actions .btn,
.form-inline .btn {
    padding: var(--space-1) var(--space-2-5);
    font-size: var(--text-xs);
}

.btn-danger {
    color: var(--color-negative);
}

.mono {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.table .status-failed td {
    color: var(--color-negative);
}

@media (max-width: 599px) {
    .hide-sm {
        display: none;
    }
}