/* Theme root - light mode (default) */
[data-theme="light"],
:root {
    /* Tell the browser which native UI palette (scrollbars, form controls)
       belongs to this theme, so it does not guess from the OS preference. */
    color-scheme: light;
    --bg: #f6f7f9;
    --surface: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --border: rgba(15, 23, 42, 0.08);
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
    --growing: #10b981;
    --steady: #3b82f6;
    --quiet: #f59e0b;
    --cooling: #ef4444;
    --dormant: #64748b;
    --dead: #475569;
    --new: #8b5cf6;
    /* Warm gold keeps reach distinct from the green/amber/red status colours. */
    --star: #d97706;
    --radius: 12px;
}

/* Theme root - dark mode */
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b0f16;
    --surface: #121826;
    --text: #e6eaf2;
    --muted: #8b95a9;
    --border: rgba(230, 234, 242, 0.09);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* System preference - falls back to dark for AfterGlow branding */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0b0f16;
        --surface: #121826;
        --text: #e6eaf2;
        --muted: #8b95a9;
        --border: rgba(230, 234, 242, 0.09);
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
    }
}

/* Theme toggle button styling */
.theme-toggle {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 0.35rem 0.6rem 0.35rem 0.8rem;
    border-radius: 999px;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s, box-shadow 0.2s;
    box-shadow: var(--shadow);
    z-index: 100;
}

.theme-toggle:hover {
    border-color: var(--muted);
    transform: translateY(-1px);
}

.theme-toggle .icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Position on mobile */
@media (max-width: 480px) {
    .theme-toggle {
        bottom: 0.5rem;
        right: 0.5rem;
        padding: 0.3rem 0.6rem;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    padding: 2rem clamp(1rem, 4vw, 3rem);
}

/* Links stay quiet until hovered: they inherit the surrounding text colour
   and only show a soft underline on hover/focus. */
a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* The repository name is a title inside a fully clickable row, so it stays
   plain on hover; underlining it would suggest a second, competing target.
   Keyboard focus keeps an underline so the link remains obvious. */
.repo-name a,
.repo-name a:hover {
    text-decoration: none;
}

.repo-name a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

/* Header drill-down links keep a hairline underline so they stay discoverable
   without the loud blue default. */
header h1 a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    text-decoration-color: color-mix(in srgb, currentColor 25%, transparent);
}

header h1 a:hover,
header h1 a:focus-visible {
    text-decoration-color: currentColor;
}

header {
    max-width: 1280px;
    margin: 0 auto 1.5rem;
}

/* Brand wordmark - logo-style header text */
.brand-wordmark {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    font-size: 2.25rem;
    font-weight: 400;
    letter-spacing: -0.04em;
    color: var(--text);
    display: inline-block;
}

.glow-part {
    font-weight: 600;
    color: #ff7700;
    position: relative;
    /* Pure CSS drop-shadow glow/halo effect */
    filter:
        drop-shadow(0 0 12px rgba(255, 119, 0, 0.35))
        drop-shadow(0 0 24px rgba(255, 168, 0, 0.15));
}

/* Responsive sizing for brand wordmark */
@media (max-width: 768px) {
    .brand-wordmark {
        font-size: 1.75rem;
    }
}

.back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 1.25rem;
    line-height: 1;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.back-link:hover {
    border-color: var(--muted);
    background: color-mix(in srgb, var(--muted) 8%, transparent);
    text-decoration: none;
    transform: translateX(-2px);
}

.back-link:focus-visible {
    outline: 2px solid var(--steady);
    outline-offset: 2px;
}

h1 {
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin: 0 0 0.25rem;
}

.subtitle {
    color: var(--muted);
    font-size: 0.875rem;
    margin: 0;
}

.filters {
    max-width: 1280px;
    margin: 0 auto 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.filters .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-right: 0.25rem;
}

/* Search control: the input grows to fill the gap left by the tag chips and
   wraps to its own row when the bar runs out of space. */
.repo-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 16rem;
    min-width: 0;
}

.repo-search .label {
    margin-right: 0;
}

/* The field wrapper owns the flexible width so the clear button can sit
   inside the input's edge without shifting the layout when it appears. */
.search-field {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 12rem;
}

/* Match the chip/card language: shared surface, hairline border and radius,
   with the page's inherited font. */
#repo-search {
    width: 100%;
    min-width: 0;
    padding: 0.45rem 2.25rem 0.45rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    transition: border-color 0.15s, box-shadow 0.2s;
}

/* Chromium and Safari draw their own clear glyph inside type="search"; the
   page provides a themed one instead, so suppress the native control. */
#repo-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

#repo-search::placeholder {
    color: var(--muted);
    opacity: 1;
}

#repo-search:hover {
    border-color: var(--muted);
}

/* --steady is shared by both themes, so the ring stays visible in each. */
#repo-search:focus-visible {
    outline: 2px solid var(--steady);
    outline-offset: 2px;
    border-color: var(--steady);
}

/* Inline clear affordance: only revealed by filter.js when the input holds
   text. The explicit [hidden] rule keeps the author display value from
   overriding the attribute. */
.search-clear {
    position: absolute;
    top: 50%;
    right: 0.3rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.search-clear[hidden] {
    display: none;
}

.search-clear:hover {
    background: var(--border);
    color: var(--text);
}

.search-clear:focus-visible {
    outline: 2px solid var(--steady);
    outline-offset: 1px;
    color: var(--text);
}

.search-clear-icon {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
}

.search-status {
    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.chip {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}

.chip:hover {
    border-color: var(--muted);
}

.chip.active {
    background: var(--text);
    color: var(--bg);
    border-color: transparent;
    font-weight: 600;
}

.card {
    max-width: 1280px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    /* Clipping is handled by .table-wrap; a second scroll container here
       only produced nested scrollbars that cut columns off. */
    overflow: hidden;
    /* Column tiers are measured against the card, not the viewport. */
    container-type: inline-size;
}

/* Sits after both the table and the card list, so it stays visible on mobile
   even though .table-wrap is hidden there. */
.search-empty {
    margin: 0;
    padding: 2rem 1rem 2.5rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

th {
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    vertical-align: middle;
}

tr:last-child td {
    border-bottom: none;
}

tbody tr {
    transition: background 0.12s;
    cursor: pointer;
}

tbody tr:hover {
    background: color-mix(in srgb, var(--muted) 8%, transparent);
}

.repo-name {
    font-size: 1.1rem;
    font-weight: 400;
}

/* Coarse age shown beside the repository name in both renderings. Size and
   weight are pinned so the h2 on the mobile card cannot make it read as part
   of the title. */
.repo-age {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* The en dash is a placeholder, not a value, so mute it further. */
.repo-age-unknown {
    opacity: 0.55;
}

.repo-host {
    color: var(--muted);
    font-size: 0.75rem;
    margin-top: 2px;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.78rem;
}

.status .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.s-growing {
    color: var(--growing);
}

.s-growing .dot {
    background: var(--growing);
}

.s-steady {
    color: var(--steady);
}

.s-steady .dot {
    background: var(--steady);
}

.s-quiet {
    color: var(--quiet);
}

.s-quiet .dot {
    background: var(--quiet);
}

.s-cooling {
    color: var(--cooling);
}

.s-cooling .dot {
    background: var(--cooling);
}

.s-dormant {
    color: var(--dormant);
}

.s-dormant .dot {
    background: var(--dormant);
}

.s-dead {
    color: var(--dead);
}

.s-dead .dot {
    background: var(--dead);
}

.s-new {
    color: var(--new);
}

.s-new .dot {
    background: var(--new);
}

.num {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

td .num strong {
    color: var(--text);
    font-weight: 600;
}

.cell-velocity {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cell-velocity strong {
    font-weight: 600;
}

/* Stars carry the same headline weight as Commits / wk. The total is always
   visible; the sparkline only appears when the card has room for it, so the
   table never widens just to show a second trend. */
.cell-stars .star-spark {
    display: none;
}

@container (min-width: 1100px) {
    .cell-stars .star-spark {
        display: block;
    }
}

.rel {
    font-weight: 600;
    font-size: 0.78rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}

.rel.ok {
    color: var(--growing);
    background: color-mix(in srgb, var(--growing) 12%, transparent);
}

.rel.warn {
    color: var(--quiet);
    background: color-mix(in srgb, var(--quiet) 14%, transparent);
}

.rel.bad {
    color: var(--cooling);
    background: color-mix(in srgb, var(--cooling) 12%, transparent);
}

.spark {
    display: block;
}

.hidden {
    display: none;
}

/* The filter script toggles the hidden attribute on the status and empty
   state; keep it authoritative over author display declarations. */
[hidden] {
    display: none;
}

footer {
    max-width: 1280px;
    margin: 1rem auto 0;
    color: var(--muted);
    font-size: 0.75rem;
}

@media (max-width: 720px) {

    /* The Stars column shifted every index after it, so name the columns that
       drop out here rather than relying on their position. */
    .col-hide-sm {
        display: none;
    }
}

.spark polyline {
    fill: none;
}

.spark polyline.s-growing {
    stroke: var(--growing);
}

.spark polyline.s-steady {
    stroke: var(--steady);
}

.spark polyline.s-quiet {
    stroke: var(--quiet);
}

.spark polyline.s-cooling {
    stroke: var(--cooling);
}

.spark polyline.s-dormant {
    stroke: var(--dormant);
}

.spark polyline.s-dead {
    stroke: var(--dead);
}

.spark polyline.s-new {
    stroke: var(--new);
}

.spark polyline.s-stars {
    stroke: var(--star);
}

.spark circle.dot-growing {
    fill: var(--growing);
}

.spark circle.dot-steady {
    fill: var(--steady);
}

.spark circle.dot-quiet {
    fill: var(--quiet);
}

.spark circle.dot-cooling {
    fill: var(--cooling);
}

.spark circle.dot-dormant {
    fill: var(--dormant);
}

.spark circle.dot-dead {
    fill: var(--dead);
}

.spark circle.dot-new {
    fill: var(--new);
}

.spark circle.dot-stars {
    fill: var(--star);
}
/* Responsive layout */
.table-wrap {
    width: 100%;
    /* Safety net only: the column tiers below keep the table inside the card. */
    overflow-x: auto;
}

.repo-table {
    width: 100%;
    min-width: 640px;
}

.repo-table th,
.repo-table td {
    white-space: nowrap;
    vertical-align: middle;
}

/* The repository cell is the only one allowed to shrink; the host is
   truncated with an ellipsis instead of widening the table past the card. */
.repo-table th:first-child,
.repo-table td:first-child {
    white-space: normal;
}

/* URLs share a long prefix, so truncate from the start: the trailing
   owner/repo is the part that distinguishes one host line from another. */
.repo-table .repo-host {
    max-width: 23ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    text-align: left;
}

/* Optional columns appear only once there is room for them, so a column is
   never shown half-clipped. Tier 1 = Last release + Contributors; the
   timeliness medians moved to the detail page, so there is no tier 2.
   The threshold is measured against the card and includes headroom for wider
   fallback fonts. */
.col-opt-1 {
    display: none;
}

@container (min-width: 920px) {
    .col-opt-1 {
        display: table-cell;
    }
}

.repo-cards {
    display: none;
    flex-direction: column;
    gap: 1rem;
}

.repo-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.repo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem 0.75rem;
}

.repo-card-title {
    margin: 0;
    font-size: 1.05rem;
}

.repo-card-title a {
    color: var(--text);
    text-decoration: none;
}

.repo-card-title a:hover {
    text-decoration: underline;
}

.repo-card-host {
    margin-top: 0.25rem;
    color: var(--muted);
    font-size: 0.85rem;
    word-break: break-all;
}

.repo-card-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
    padding: 0 1.25rem 1rem;
}

.metric {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.metric-label {
    color: var(--muted);
    font-size: 0.85rem;
}

.metric-value {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text);
}

.metric-value strong {
    font-weight: 600;
}

.metric-secondary .metric-value {
    color: var(--muted);
}

.repo-card-footer {
    border-top: 1px solid var(--border);
    padding: 0.8rem 1.25rem;
    background: color-mix(in srgb, var(--bg) 40%, transparent);
}

.repo-card-link {
    color: var(--growing);
    text-decoration: none;
    font-weight: 600;
}

.repo-card-link:hover {
    text-decoration: underline;
}

.repo-detail {
    padding: 1.5rem;
}

/* Direction hero: the verdict next to the evidence for it. */
.repo-hero {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(320px, 2fr);
    gap: 1.25rem 2rem;
    align-items: center;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.repo-hero-verdict {
    margin: 0.6rem 0 0;
    font-size: 1.05rem;
    line-height: 1.4;
    max-width: 34ch;
}

.repo-hero-chart {
    min-width: 0; /* let the svg shrink inside the grid cell */
}

.barchart {
    display: block;
    width: 100%;
    height: auto;
}

.barchart rect {
    fill: currentColor;
}

.barchart .recent {
    fill: currentColor;
    opacity: 0.07;
}

.barchart .axis {
    stroke: var(--border);
    stroke-width: 1;
}

.chart-caption {
    margin: 0.5rem 0 0;
    color: var(--muted);
    font-size: 0.75rem;
}

/* Headline numbers. Each metric appears here exactly once. */
.stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
}

.stat-value {
    margin-top: 0.25rem;
    font-size: 1.35rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stat-note {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--muted);
}

.stat-none {
    font-size: 1rem;
    font-weight: 500;
    color: var(--muted);
}

/* Direction facts: the numbers behind the verdict. */
.direction-facts {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin: 0;
    padding-top: 0.25rem;
}

.direction-facts div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.direction-facts dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
}

.direction-facts dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.direction-facts .unit {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--muted);
}

.change.up {
    color: var(--growing);
}

.change.down {
    color: var(--cooling);
}

.change.flat {
    color: var(--muted);
}

/* Secondary detail: what is waiting, and who is carrying it. */
.repo-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.detail-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.detail-card h2 {
    margin: 0 0 0.9rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.flow + .flow {
    margin-top: 1.1rem;
}

.flow-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.45rem;
}

.flow-title {
    font-size: 0.9rem;
    font-weight: 600;
}

.flow-count {
    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.flow-note {
    margin: 0.45rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

/* Age profile: one bar per queue, oldest band on the right. */
.age-bar {
    display: flex;
    gap: 1px;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--border) 70%, transparent);
}

.age-bar.age-none {
    background: color-mix(in srgb, var(--border) 40%, transparent);
}

.age-seg {
    display: block;
    height: 100%;
    min-width: 2px;
}

.age-1 {
    background: var(--growing);
}

.age-2 {
    background: var(--steady);
}

.age-3 {
    background: var(--quiet);
}

.age-4 {
    background: var(--cooling);
}

.age-5 {
    background: var(--muted);
}

.age-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin: 1rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
    color: var(--muted);
    font-size: 0.72rem;
}

.age-legend li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.age-legend .age-seg {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

/* Bus factor and key players. */
.bf {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.bf-number {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.bf-level {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.bf-critical {
    color: var(--cooling);
}

.bf-warning {
    color: var(--quiet);
}

.bf-healthy {
    color: var(--growing);
}

.bf-unknown {
    color: var(--muted);
}

.detail-note {
    margin: 0.6rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.people-facts {
    display: flex;
    gap: 1.75rem;
    margin: 0.9rem 0 0;
}

.people-facts div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.people-facts dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
}

.people-facts dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Reach: stars and forks are a reach signal, not an activity metric. The warm
   gold keeps them distinct from the green/amber/red pulse colours. */
.reach-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.reach-star {
    color: var(--star);
    font-size: 1.4rem;
    line-height: 1;
}

.reach-number {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}

.reach-label {
    color: var(--muted);
    font-size: 0.85rem;
}

.reach-asof {
    color: var(--muted);
    font-size: 0.75rem;
}

.reach-delta {
    margin-top: 0.6rem;
}

.reach-chart {
    margin: 1rem 0 0;
    min-width: 0;
}

/* The star series uses the reach colour; the shared .linechart stays steady. */
.reach-chart .linechart {
    color: var(--star);
}

.reach-caption {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: 0.75rem;
}

.reach-facts {
    display: flex;
    gap: 1.75rem;
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

.reach-facts div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.reach-facts dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
}

.reach-facts dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.players {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

.players-label {
    margin-bottom: 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.players ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.player {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name share"
        "bar bar";
    gap: 0.15rem 0.75rem;
    align-items: center;
}

.player-name {
    grid-area: name;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-share {
    grid-area: share;
    color: var(--muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.player-bar {
    grid-area: bar;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--border) 70%, transparent);
}

.player-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--steady);
}

/* History: collected points, never reconstructed ones. */
.history-card {
    grid-column: 1 / -1;
}

.history-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.9rem;
}

.history-head h2 {
    margin-bottom: 0;
}

.history-meta {
    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 1.5rem;
}

.history-series {
    margin: 0;
    min-width: 0;
}

.history-series-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.history-series-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.history-series-latest {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.linechart {
    display: block;
    width: 100%;
    height: auto;
    color: var(--steady);
}

.linechart polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.linechart .dot {
    fill: currentColor;
}

.linechart .axis {
    stroke: var(--border);
    stroke-width: 1;
}

.history-note {
    margin: 0.9rem 0 0;
    color: var(--muted);
    font-size: 0.75rem;
}

/* Four series fit 4-up only on wide pages; below that, pair them rather than
   leaving a single orphan on its own row. */
@media (max-width: 1024px) {
    .history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .history-grid {
        grid-template-columns: 1fr;
    }
}

.repo-lede {
    margin: 0.75rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 80ch;
}

/* Placeholder shown when the provider reports no description. Italicised so it
   never reads as real repository metadata. */
.repo-lede-empty {
    font-style: italic;
    opacity: 0.8;
}

.repo-detail-footer {
    border-top: 1px solid var(--border);
    padding-top: 0.9rem;
    color: var(--muted);
    font-size: 0.75rem;
}

/* Keep the hero readable when the chart would be squeezed. */
@media (max-width: 860px) {
    .repo-hero {
        grid-template-columns: 1fr;
    }
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    margin-left: 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 60%, transparent);
    color: var(--muted);
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    body {
        padding: 0.75rem;
    }

    .repo-detail {
        padding: 1rem;
    }

    .detail-card {
        padding: 0.9rem 1rem;
    }

    .direction-facts {
        gap: 0.75rem 1.25rem;
    }

    header h1 {
        font-size: 1.6rem;
    }

    /* Give the search field its own row; the tag chips wrap underneath. */
    .repo-search {
        flex-basis: 100%;
    }

    /* Slightly larger hit area for touch while staying inside the field. */
    .search-clear {
        width: 2rem;
        height: 2rem;
        right: 0.2rem;
    }

    /* Below this width the table is replaced by the card list, so all
       table-specific rules (column tiers included) are moot. */
    .table-wrap {
        display: none;
    }

    .repo-cards {
        display: flex;
    }
}