/* ============================================================================
   stats.css — public community stats page (/stats), plan 60.

   Loaded ONLY via the $extraCss hook in layouts/landing.php, third in the
   cascade after landing.css and spinner.css.

   public/css/admin.css, public/css/app.css and public/css/landing.css are NOT
   modified by this file's existence — the table rules below are adapted from
   admin.css, not shared with it.

   IMPORTANT — variable availability. Only the custom properties declared in
   landing.css :root exist on this page:
     --bg-primary --bg-deeper --bg-deepest --bg-card
     --gold --gold-dim --gold-faint
     --text-bright --text-mid --text-body --text-secondary
     --text-dim --text-faint --text-ghost
     --border --border-dim --mono --sans
   The --error-* / --success-* variables live in app.css, which layouts/admin
   loads and layouts/landing does NOT. Using them here would silently resolve to
   the initial value, so the error-rate tiers below use literal hex copied from
   admin.css.

   All new classes are prefixed `stats-`, to avoid colliding with landing.css's
   .badge / .section / .form-* / .contact-* / .legal-* rules. The one exception
   is .admin-sort-header / .sort-icon, which the shared table_sort_header() must
   keep emitting to stay byte-identical with the admin output.
   ============================================================================ */

/* ── Intro ───────────────────────────────────────────────────────────────── */

.stats-intro {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text-body);
    max-width: 720px;
    margin: 0 0 24px;
}

.stats-intro a {
    color: var(--gold);
    text-decoration: none;
}

.stats-intro a:hover {
    text-decoration: underline;
}

/* ── Blocks ──────────────────────────────────────────────────────────────── */

/* scroll-margin-top must be repeated here: landing.css sets it on .section, and
   these anchored blocks are not .section elements. Without it the sticky nav
   covers the heading when following #tools / #devices / #agents. */
.stats-block {
    margin-top: 32px;
    scroll-margin-top: 60px;
}

.stats-block-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-bright);
    margin: 0 0 6px;
}

.stats-block-desc {
    font-size: 13px;
    color: var(--text-body);
    line-height: 1.6;
    margin: 0 0 14px;
    max-width: 720px;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

/* Mandatory. layouts/landing has no equivalent of admin.css's
   `.admin-content { overflow-x: auto }`, so without this wrapper the six-column
   device table forces the whole page body to scroll sideways on mobile. */
.stats-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.stats-table thead tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    text-align: left;
}

.stats-table th {
    padding: 0.5rem 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-align: left;
}

.stats-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-mid);
}

.stats-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* ── Sortable headers ────────────────────────────────────────────────────────
   table_sort_header() emits class="admin-sort-header" so its output stays
   byte-identical to the pre-split admin helper. The class name is therefore
   inherited rather than chosen; these rules are this page's own, and do not
   touch admin.css. */

.stats-table .admin-sort-header a {
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.stats-table .admin-sort-header a:hover {
    color: var(--text-bright);
}

.stats-table .sort-icon {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.stats-table .sort-icon.active {
    color: var(--gold);
}

/* ── Cell variants ───────────────────────────────────────────────────────── */

/* Order Number, Firmware, TIA Versions. Replaces admin.css's .mono-cell. */
.stats-mono {
    font-family: var(--mono);
    font-size: 0.85rem;
}

.stats-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Error-rate tiers: 0 / <5 / <=15 / >15, the same banding /admin/compatibility
   uses. Literal hex — see the header note about --error-* not existing here. */
.stats-rate-green { color: #4ade80; }
.stats-rate-amber { color: #fb923c; }
.stats-rate-red   { color: #f87171; font-weight: 500; }

/* The em-dash cell in block 3, so "—" reads as absent data rather than a value. */
.stats-rate-none { color: var(--text-faint); }

/* ── Empty state, qualifier, legend, trademark ───────────────────────────── */

.stats-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-dim);
    font-size: 13px;
    font-style: italic;
}

/* Degraded state: this block's query FAILED. Deliberately styled apart from
   .stats-empty — the two say very different things, and rendering a broken
   block as a quiet one is the bug this class exists to make visible. */
.stats-unavailable {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-size: 13px;
}

.stats-qualifier,
.stats-legend {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.6;
    margin-top: 10px;
    max-width: 720px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .stats-table {
        font-size: 0.82rem;
    }

    .stats-table th,
    .stats-table td {
        padding: 0.4rem 0.5rem;
    }
}