/* Static, ordered particle treatment. Date-cell geometry stays native. */
.calendar .day, .widget-calendar .widget-day {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: transparent !important;
  border-color: transparent;
  border-radius: 0;
  opacity: 1;
}
.calendar .day > .activity-bead, .widget-calendar .widget-day > .activity-bead {
  position: absolute;
  left: 50%; top: 50%;
  width: 2.8px; height: 2.8px;
  border-radius: 50%;
  background: var(--bead, #0e4429);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* A restrained 2×2 arrangement keeps beads legible at the existing 10px cell size. */
.calendar .day > .activity-bead:nth-child(1), .widget-calendar .widget-day > .activity-bead:nth-child(1) { margin: -1.8px 0 0 -1.8px; }
.calendar .day > .activity-bead:nth-child(2), .widget-calendar .widget-day > .activity-bead:nth-child(2) { margin: -1.8px 0 0 1.8px; }
.calendar .day > .activity-bead:nth-child(3), .widget-calendar .widget-day > .activity-bead:nth-child(3) { margin: 1.8px 0 0 -1.8px; }
.calendar .day > .activity-bead:nth-child(4), .widget-calendar .widget-day > .activity-bead:nth-child(4) { margin: 1.8px 0 0 1.8px; }

.calendar .day.level-0 > .activity-bead, .widget-calendar .widget-day.level-0 > .activity-bead {
  width: 1.8px; height: 1.8px; margin: 0; background: #9cafa5; opacity: .42;
}
.calendar .day.level-0 > .activity-bead:nth-child(1), .widget-calendar .widget-day.level-0 > .activity-bead:nth-child(1) { margin: 0; }
.calendar .day.level-1 > .activity-bead, .widget-calendar .widget-day.level-1 > .activity-bead { --bead: #0e4429; }
.calendar .day.level-2 > .activity-bead, .widget-calendar .widget-day.level-2 > .activity-bead { --bead: #006d32; }
.calendar .day.level-3 > .activity-bead, .widget-calendar .widget-day.level-3 > .activity-bead { --bead: #26a641; }
.calendar .day.level-4 > .activity-bead, .widget-calendar .widget-day.level-4 > .activity-bead { --bead: #39d353; }
.calendar .day.level-unknown > .activity-bead, .widget-calendar .widget-day.level-unknown > .activity-bead {
  width: 2px; height: 2px; background: transparent; border: 1px solid #9aaca4; opacity: .38;
}
.calendar .day.level-unknown > .activity-bead:nth-child(1), .widget-calendar .widget-day.level-unknown > .activity-bead:nth-child(1) { margin: 0; }
.calendar .day.out-of-range > .activity-bead, .widget-calendar .widget-day.out-of-range > .activity-bead { opacity: .12; }

/* Density is the count of visible beads; no activity or unknown dates stay faint. */
.calendar .day.level-0 > .activity-bead:nth-child(n+2), .widget-calendar .widget-day.level-0 > .activity-bead:nth-child(n+2),
.calendar .day.level-1 > .activity-bead:nth-child(n+2), .widget-calendar .widget-day.level-1 > .activity-bead:nth-child(n+2),
.calendar .day.level-2 > .activity-bead:nth-child(n+3), .widget-calendar .widget-day.level-2 > .activity-bead:nth-child(n+3),
.calendar .day.level-3 > .activity-bead:nth-child(n+4), .widget-calendar .widget-day.level-3 > .activity-bead:nth-child(n+4),
.calendar .day.level-unknown > .activity-bead:nth-child(n+2), .widget-calendar .widget-day.level-unknown > .activity-bead:nth-child(n+2) { display: none; }

/* Legend uses the same size, palette, and density. */
.legend i, .widget-legend i { position: relative; border-radius: 0 !important; background: transparent !important; }
.legend i::after, .widget-legend i::after { content: ""; position: absolute; inset: 0; width: 2.8px; height: 2.8px; margin: auto; border-radius: 50%; background: #0e4429; }
.legend .level-0::after, .widget-legend .level-0::after { width: 1.8px; height: 1.8px; background: #9cafa5; opacity: .42; }
.legend .level-2::after, .widget-legend .level-2::after { background: #006d32; box-shadow: 3.6px 0 0 #006d32; }
.legend .level-3::after, .widget-legend .level-3::after { background: #26a641; box-shadow: -3.6px 0 0 #26a641, 3.6px 0 0 #26a641; }
.legend .level-4::after, .widget-legend .level-4::after { background: #39d353; box-shadow: -3.6px -1.8px 0 #39d353, 3.6px -1.8px 0 #39d353, -3.6px 1.8px 0 #39d353; }

/* Day theme uses the native square heatmap. Night keeps the particle treatment above. */
:root[data-theme="day"] .calendar .day,
:root[data-theme="day"] .widget-calendar .widget-day {
  background: #d8dfd1 !important;
  border-color: #c8d0c2;
  border-radius: 2px;
}
:root[data-theme="day"] .calendar .day > .activity-bead,
:root[data-theme="day"] .widget-calendar .widget-day > .activity-bead {
  display: none;
}
:root[data-theme="day"] .calendar .day.level-0,
:root[data-theme="day"] .widget-calendar .widget-day.level-0 { background: #d8dfd1 !important; }
:root[data-theme="day"] .calendar .day.level-1,
:root[data-theme="day"] .widget-calendar .widget-day.level-1 { background: #b2c7a8 !important; }
:root[data-theme="day"] .calendar .day.level-2,
:root[data-theme="day"] .widget-calendar .widget-day.level-2 { background: #85a77d !important; }
:root[data-theme="day"] .calendar .day.level-3,
:root[data-theme="day"] .widget-calendar .widget-day.level-3 { background: #63865e !important; }
:root[data-theme="day"] .calendar .day.level-4,
:root[data-theme="day"] .widget-calendar .widget-day.level-4 { background: #486a50 !important; }
:root[data-theme="day"] .calendar .day.level-unknown,
:root[data-theme="day"] .widget-calendar .widget-day.level-unknown {
  background: repeating-linear-gradient(135deg, #e6e8dc, #e6e8dc 2px, #c5cdbd 2px, #c5cdbd 4px) !important;
  border: 1px solid #aab5a5;
  opacity: 1;
}
:root[data-theme="day"] .calendar .day.out-of-range,
:root[data-theme="day"] .widget-calendar .widget-day.out-of-range { opacity: .3; }
:root[data-theme="day"] .legend i,
:root[data-theme="day"] .widget-legend i {
  background: #d8dfd1 !important;
  border: 1px solid #c8d0c2;
  border-radius: 2px !important;
}
:root[data-theme="day"] .legend i::after,
:root[data-theme="day"] .widget-legend i::after { display: none; }
:root[data-theme="day"] .legend .level-0,
:root[data-theme="day"] .widget-legend .level-0 { background: #d8dfd1 !important; }
:root[data-theme="day"] .legend .level-1,
:root[data-theme="day"] .widget-legend .level-1 { background: #b2c7a8 !important; }
:root[data-theme="day"] .legend .level-2,
:root[data-theme="day"] .widget-legend .level-2 { background: #85a77d !important; }
:root[data-theme="day"] .legend .level-3,
:root[data-theme="day"] .widget-legend .level-3 { background: #63865e !important; }
:root[data-theme="day"] .legend .level-4,
:root[data-theme="day"] .widget-legend .level-4 { background: #486a50 !important; }