/* ==========================================================================
   stats.css — shared kit for the stats/dashboard pages
   (/stats, /relational_stats, /progress).
   Owns the StatsUI.heatmap calendar component's structure. Geometry is
   parameterized (--hm-cell / --hm-gap) and each page's css pins its own
   values + level palettes (its data mapping). Loaded in <head> before the
   page css; base.css still ships later via bars.html and wins ties.
   ========================================================================== */

/* Year grid: 7 weekday rows, column flow (GitHub-style), Sunday on top. */
.nc-hm-cols {
    display: grid;
    grid-template-rows: repeat(7, var(--hm-cell, 10px));
    grid-auto-flow: column;
    grid-auto-columns: var(--hm-cell, 10px);
    gap: var(--hm-gap, 3px);
}

/* Short calendar: 7 fluid weekday columns, row flow (/progress). */
.nc-hm-rows {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--hm-gap, 3px);
}

/* Month labels — placement matches StatsUI.heatmap's monthMode. */
.nc-hm-months {
    color: var(--global-text-secondary);
    font-weight: 900;
    user-select: none;
}

.nc-hm-months.cols {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--hm-cell, 10px);
    gap: var(--hm-gap, 3px);
    height: 14px;
    font-size: 0.72rem;
}

.nc-hm-months.cols>.nc-hm-month {
    align-self: center;
    transform: translateY(1px);
    white-space: nowrap;
}

.nc-hm-months.abs {
    position: relative;
    height: 16px;
    margin-bottom: 6px;
    font-size: 10px;
}

.nc-hm-months.abs>.nc-hm-month {
    position: absolute;
    white-space: nowrap;
    transform: translateX(2px);
}

.nc-hm-months.abs>.nc-hm-month::after {
    content: "";
    display: block;
    width: 10px;
    height: 2px;
    margin-top: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--global-border) 70%, transparent);
}