/* Personal-site styles. Tokens, base elements and shared components
   live in theme.css, which is loaded first. */

.intro-header {
    margin-bottom: 1.5rem;
}

.intro-header p {
    color: var(--muted);
}

.contact-links {
    color: var(--muted);
}

.project {
    padding-block: 1.25rem;
    border-top: 1px solid var(--border);
}

/* Activity grid. Each color nods to its sport: asphalt blue for road
   runs, dirt tan for trail runs, forest green for hikes, dusk purple for
   nights out (camping a lighter step of backpacking), asphalt for road
   trips, sunshine yellow for vacations. Tan and green differ
   in lightness too, so they stay apart for red-green colorblind viewers. */
:root {
    --act-empty: #e9e8e3;
    --act-hiking: #2e7a45;
    --act-trail_run: #cfa56b;
    --act-road_run: #6f8fbf;
    --act-backpacking: #6b3fa0;
    --act-camping: #d9b8e8;
    --act-roadtrip: #3d3d3b;
    --act-vacation: #f5dc3c;
}

@media (prefers-color-scheme: dark) {
    :root {
        --act-empty: #222220;
        --act-hiking: #3a8f55;
        --act-trail_run: #c79a5c;
        --act-road_run: #5f80b8;
        --act-backpacking: #b48cf0;
        --act-camping: #583580;
        --act-roadtrip: #c9ccd1;
        --act-vacation: #e8cf3a;
    }
}

.activity {
    margin-top: 2.5rem;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.activity-header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.activity-header select {
    font: inherit;
    font-size: 0.85rem;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.1rem 0.3rem;
}

.activity-months,
.activity-grid {
    display: grid;
    grid-template-columns: repeat(var(--weeks, 53), 1fr);
    gap: 2px;
}

.activity-months {
    font-size: 0.7rem;
    color: var(--muted);
    height: 1.2rem;
    white-space: nowrap;
}

.activity-grid {
    grid-template-rows: repeat(7, auto);
    grid-auto-flow: column;
}

.day-cell {
    aspect-ratio: 1;
    border-radius: 2px;
    background: var(--act-empty);
}

.day-cell.outside {
    visibility: hidden;
}

.day-cell[data-count="1"] {
    background: var(--c1);
}

/* Split cells get a thin page-colored gap between the halves. */
.day-cell[data-count="2"] {
    background: linear-gradient(135deg, var(--c1) calc(50% - 1px), var(--bg) 0 calc(50% + 1px), var(--c2) 0);
}

.day-cell[data-count="3"] {
    background: conic-gradient(var(--c1) 0 120deg, var(--c2) 0 240deg, var(--c3) 0);
}

.activity-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.activity-legend span::before {
    content: "";
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    margin-right: 0.35rem;
    border-radius: 2px;
    vertical-align: -1px;
    background: var(--swatch);
}

.activity-totals {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.activity-tooltip {
    position: fixed;
    z-index: 10;
    transform: translate(-50%, -100%);
    pointer-events: none;
    white-space: pre;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.4;
    background: var(--text);
    color: var(--bg);
}