activity.css

/* =========================================================================
   Activity section
   Self-contained, no overrides of style.css. Every selector is prefixed
   with `.activity-` so the parallel UI edits cannot collide.
   ========================================================================= */

:root {
    --activity-new-color: #00979D;
    --activity-updated-color: #000000;
    --activity-stale-color: #b3b3b3;
    --activity-spark-bg: #f4f4f4;
}

.activity-section {
    margin: 40px 0;
}

.activity-content {
    overflow: hidden;
    max-height: 6000px;
    opacity: 1;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
    margin-top: 0;
}

.activity-content.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.activity-section .section-header {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
    padding-bottom: 6px;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 10px;
    margin-left: 0;
}

.activity-range {
    font-size: 10px;
    color: #666;
    font-weight: normal;
    letter-spacing: 0.5px;
    text-transform: none;
}

.activity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

/* The Maintenance Pulse scatter spans the full width above the two
   supporting panels (Daily + Categories). */
.activity-pulse-panel {
    grid-column: 1 / -1;
}

.activity-panel {
    border: 1.5px solid black;
    background-color: white;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.activity-panel[hidden] {
    display: none;
}

.activity-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 6px;
}

.activity-panel-title {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.activity-panel-meta {
    font-size: 10px;
    color: #666;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.activity-spark {
    width: 100%;
    height: 90px;
    display: block;
}

.activity-spark .activity-spark-dot {
    cursor: pointer;
    transition: r 0.1s ease, stroke-width 0.1s ease;
}

.activity-spark .activity-spark-dot:hover,
.activity-spark .activity-spark-dot:focus-visible {
    stroke: #00979D;
    stroke-width: 1.5;
    outline: none;
}

.activity-spark-dot-peak {
    fill: #00979D !important;
}

.activity-bars {
    width: 100%;
    height: 90px;
    display: block;
}

.activity-bars .activity-bar-segment {
    cursor: pointer;
    transition: opacity 0.1s ease;
}

.activity-bars .activity-bar-segment:hover,
.activity-bars .activity-bar-segment:focus-visible {
    opacity: 0.6;
    outline: none;
}

.activity-bar-segment-new {
    fill: #00979D;
}

.activity-bar-segment-updated {
    fill: #000;
}

/* ---- Maintenance Pulse scatter ----
   A binned scatter of every library: x = months since last GitHub
   touch, y = log(stars). Bins keep the DOM small; the top-N by stars
   are also drawn as individually hoverable/clickable <g> markers. */
.activity-pulse-wrap {
    position: relative;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
}

.activity-pulse {
    width: 100%;
    height: 340px;
    display: block;
    cursor: crosshair;
    touch-action: none;
    font-family: var(--font-monospace, 'Courier New', monospace);
}

.activity-pulse-panel .activity-pulse-legend {
    font-size: 10px;
    color: #666;
    letter-spacing: 0.5px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    text-transform: none;
}

.activity-pulse-legend-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    vertical-align: middle;
    margin-right: 3px;
}

.activity-pulse-axis-text {
    fill: #999;
    font-size: 9px;
}

.activity-pulse-axis-line {
    stroke: #ccc;
    stroke-width: 0.5;
}

.activity-pulse-gridline {
    stroke: #f0f0f0;
    stroke-width: 0.5;
}

.activity-pulse-stale-line {
    stroke: #b3b3b3;
    stroke-width: 0.75;
    stroke-dasharray: 3 3;
}

.activity-pulse-stale-label {
    fill: #b3b3b3;
    font-size: 8px;
    letter-spacing: 0.5px;
}

.activity-pulse-bin {
    fill: #000;
    fill-opacity: 0.5;
    pointer-events: none;
}

.activity-pulse-bin-stale {
    fill: #b3b3b3;
    fill-opacity: 0.45;
    pointer-events: none;
}

.activity-pulse-marker {
    cursor: pointer;
}

.activity-pulse-marker-dot {
    fill: #00979D;
    stroke: #fff;
    stroke-width: 1;
    transition: r 0.1s ease;
}

.activity-pulse-marker:hover .activity-pulse-marker-dot {
    r: 5;
}

.activity-pulse-marker-label {
    fill: #000;
    font-size: 8.5px;
    pointer-events: none;
}

.activity-pulse-marker-halo {
    fill: #fff;
    fill-opacity: 0.85;
    pointer-events: none;
}

/* Drag-to-filter selection rectangle */
.activity-pulse-selection {
    fill: #00979D;
    fill-opacity: 0.08;
    stroke: #00979D;
    stroke-width: 1;
    stroke-dasharray: 3 2;
}

/* Floating hover tooltip (a DOM node, not SVG) */
.activity-pulse-tooltip {
    position: absolute;
    pointer-events: none;
    background: #fff;
    border: 1.5px solid #000;
    padding: 6px 9px;
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translate(-50%, calc(-100% - 10px));
}

.activity-pulse-tooltip-name {
    font-weight: bold;
    margin-bottom: 2px;
}

.activity-pulse-tooltip-row {
    color: #666;
}

.activity-pulse-tooltip-row b {
    color: #000;
    font-weight: normal;
}

.activity-pulse-hint {
    font-size: 10px;
    color: #999;
    letter-spacing: 0.3px;
}

.activity-bars-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.activity-bars-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Treemap rendering of the Categories panel: one <g class="activity-treemap-cell">
   per named category, with a <rect> + <text> inside. Cell area is
   proportional to category share. Cells are tab-stopped, focusable, and
   activate filterByCategory via click or Enter/Space. */
.activity-treemap {
    width: 100%;
    height: 180px;
    display: block;
    font-family: var(--font-monospace, 'Courier New', monospace);
    border: 1px solid #e5e5e5;
    background: #fafafa;
}

.activity-treemap-cell {
    cursor: pointer;
    outline: none;
    transition: opacity 0.15s ease;
}

.activity-treemap-cell:focus-visible rect,
.activity-treemap-cell:focus-visible {
    outline: none;
}

.activity-treemap-rect {
    stroke: #ffffff;
    stroke-width: 1.5;
    fill: #d9d9d9;
}

.activity-treemap-cell:hover .activity-treemap-rect,
.activity-treemap-cell:focus-visible .activity-treemap-rect {
    fill: #b3b3b3;
}

.activity-treemap-cell:active .activity-treemap-rect {
    fill: #8c8c8c;
}

.activity-treemap-rank-1 .activity-treemap-rect { fill: #000000; }
.activity-treemap-rank-2 .activity-treemap-rect { fill: #3d3d3d; }
.activity-treemap-rank-3 .activity-treemap-rect { fill: #595959; }
.activity-treemap-rank-4 .activity-treemap-rect { fill: #737373; }
.activity-treemap-rank-5 .activity-treemap-rect { fill: #8c8c8c; }
.activity-treemap-rank-6 .activity-treemap-rect { fill: #a6a6a6; }
.activity-treemap-rank-7 .activity-treemap-rect { fill: #b3b3b3; }
.activity-treemap-rank-8 .activity-treemap-rect { fill: #bfbfbf; }
.activity-treemap-rank-9 .activity-treemap-rect { fill: #cccccc; }
.activity-treemap-rank-10 .activity-treemap-rect { fill: #d9d9d9; }
.activity-treemap-rank-11 .activity-treemap-rect { fill: #e5e5e5; }

.activity-treemap-cell:hover .activity-treemap-rect,
.activity-treemap-cell:focus-visible .activity-treemap-rect {
    fill: var(--activity-treemap-hover, #00979D);
}

.activity-treemap-label {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    fill: #ffffff;
    pointer-events: none;
}

.activity-treemap-rank-1 .activity-treemap-label,
.activity-treemap-rank-2 .activity-treemap-label,
.activity-treemap-rank-3 .activity-treemap-label { fill: #ffffff; }
.activity-treemap-rank-6 .activity-treemap-label,
.activity-treemap-rank-7 .activity-treemap-label,
.activity-treemap-rank-8 .activity-treemap-label,
.activity-treemap-rank-9 .activity-treemap-label,
.activity-treemap-rank-10 .activity-treemap-label,
.activity-treemap-rank-11 .activity-treemap-label { fill: #333333; }

.activity-legend {
    display: flex;
    gap: 6px;
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-wrap: wrap;
    align-items: center;
}

.activity-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid transparent;
    background: white;
    font-family: inherit;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #444;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

button.activity-legend-item {
    /* legacy reset — the element is a real <button> */
}

.activity-legend-item:hover,
.activity-legend-item:focus-visible {
    background-color: #f4f4f4;
    border-color: #999;
    outline: none;
}

.activity-legend-item:active {
    background-color: #ebebeb;
}

.activity-legend-item-count {
    font-weight: bold;
    color: #000;
}

.activity-legend-spacer {
    flex: 1;
}

.activity-trend {
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}

.activity-trend-up {
    color: #00979D;
    font-weight: bold;
}

.activity-trend-down {
    color: #b85c00;
    font-weight: bold;
}

.activity-trend-flat {
    color: #666;
}

.activity-meta-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.activity-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    vertical-align: -1px;
    border: 1px solid #999;
}

.activity-legend-swatch-new {
    background-color: var(--activity-new-color, #00979D);
    border-color: var(--activity-new-color, #00979D);
}

.activity-legend-swatch-updated {
    background-color: var(--activity-updated-color, #000000);
    border-color: var(--activity-updated-color, #000000);
}

.activity-legend-swatch-stale {
    background-color: var(--activity-stale-color, #b3b3b3);
    border-color: var(--activity-stale-color, #b3b3b3);
}

.activity-empty {
    font-size: 11px;
    color: #666;
    font-style: italic;
    padding: 12px 0;
    text-align: center;
}

/* Recent libraries mini-list inside a panel. Shows the top few
   libraries that drove this panel's new/updated count so the panel
   is data-rich even before the user clicks anything. */
.activity-recent {
    margin-top: 10px;
    border-top: 1px solid #e5e5e5;
    padding-top: 8px;
}

.activity-recent-header {
    font-size: 9px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.activity-recent-header-count {
    color: #000;
    font-weight: bold;
}

.activity-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.activity-recent-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden;
    padding: 2px 0;
}

.activity-recent-item-tag {
    flex-shrink: 0;
    width: 12px;
    text-align: center;
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1px 2px;
    line-height: 1.4;
    border: 1px solid currentColor;
    letter-spacing: 0;
}

.activity-recent-item-tag.new {
    color: #00979D;
    background: #e6f7f7;
}

.activity-recent-item-tag.updated {
    color: #000;
    background: #f0f0f0;
}

.activity-recent-item-name {
    font-weight: bold;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.activity-recent-item-cat {
    font-size: 9px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    max-width: 45%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The peak-day/peak-week highlight shown inside a panel header. */
.activity-peak-pill {
    display: inline-block;
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #00979D;
    border: 1px solid #00979D;
    padding: 1px 5px;
    margin-left: 6px;
    white-space: nowrap;
}

/* Quick-filter chip in the Daily panel header: one-click "new in last
   7 days" filter. Inactive state is a subtle outlined pill with an arrow;
   active state fills with the new (teal) accent and shows × for the
   click-again-to-clear affordance. `margin-left: auto` pushes it to the
   right end of the flex row shared with title + meta + peak pill. */
.activity-quick-chip {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    align-self: center;
    flex-shrink: 0;
    font-family: var(--font-monospace, 'Courier New', monospace);
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    background: #fff;
    border: 1px solid #ccc;
    padding: 3px 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.activity-quick-chip:hover {
    background: #f0f0f0;
    border-color: #999;
    color: #333;
}

.activity-quick-chip:focus-visible {
    outline: 2px solid var(--activity-new-color, #00979D);
    outline-offset: 1px;
}

.activity-quick-chip.active {
    background: var(--activity-new-color, #00979D);
    border-color: var(--activity-new-color, #00979D);
    color: #fff;
}

.activity-quick-chip.active:hover {
    background: #007a80;
    border-color: #007a80;
    color: #fff;
}

/* Featured pill: the single repo with the largest weekly momentum
   in the most recent active week. Clickable — opens the library
   detail modal. The star glyph is rendered via ::before and is
   colored with the new (teal) accent; the actual textContent of
   the button stays plain text (" {name} (+{gain})"). */
.activity-top-gainer {
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #000;
    background: #fff;
    border: 1px solid #00979D;
    padding: 4px 8px;
    margin-left: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.activity-top-gainer::before {
    content: '★ ';
    color: var(--activity-new-color, #00979D);
    font-weight: bold;
    flex-shrink: 0;
}

.activity-top-gainer:hover,
.activity-top-gainer:focus-visible {
    background-color: #e6f7f7;
    outline: none;
}

.activity-top-gainer:active {
    background-color: #cce8e8;
}

/* Draggable timeline scrubber overlaid on the daily sparkline. Two
   handles bound a [start, end] index range; dragging them updates a
   translucent selection rectangle in real-time; on release the chosen
   range is applied as a 'new' activity filter. The selection rect has
   pointer-events:none so the underlying dots stay clickable; only the
   handles (a few pixels wide each) intercept events. */
.activity-scrubber-selection {
    fill: var(--activity-new-color, #00979D);
    fill-opacity: 0.18;
    stroke: var(--activity-new-color, #00979D);
    stroke-width: 1;
    pointer-events: none;
}

.activity-scrubber-handle {
    fill: var(--activity-new-color, #00979D);
    cursor: ew-resize;
    pointer-events: all;
}

.activity-scrubber-handle:hover,
.activity-scrubber-handle:focus-visible {
    fill: #007a80;
    outline: none;
}

/* Banner shown above the library grid when the activity panel is driving
   the filter. Distinct from category/platform filters: there's no
   .filter-btn to toggle. A single dismiss button clears it. */
.activity-filter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1.5px solid #00979D;
    background: #e6f7f7;
    padding: 10px 14px;
    margin: 16px 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.3;
}

.activity-filter-banner-text {
    flex: 1;
    min-width: 0;
}

.activity-filter-banner-kind {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #00979D;
}

.activity-filter-banner-period {
    color: #444;
}

.activity-filter-banner-count {
    color: #999;
    font-size: 11px;
}

.activity-filter-banner-clear {
    flex-shrink: 0;
    background: white;
    border: 1.5px solid #00979D;
    color: #00979D;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.activity-filter-banner-clear:hover,
.activity-filter-banner-clear:focus-visible {
    background: #00979D;
    color: white;
    outline: none;
}

.activity-axis-label {
    font-size: 9px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activity-spark-dot {
    fill: black;
    stroke: white;
    stroke-width: 1.5;
}

.activity-axis-tick {
    stroke: #e5e5e5;
    stroke-width: 1;
    stroke-dasharray: 2 2;
}

@media (max-width: 640px) {
    .activity-grid {
        grid-template-columns: 1fr;
    }
    .activity-treemap {
        height: 220px;
    }
    .activity-pulse {
        height: 260px;
    }
    .activity-filter-banner {
        flex-wrap: wrap;
    }
    .activity-filter-banner-clear {
        width: 100%;
    }
}