.events {
  --grid-lines: 0.3em;

  border-block-start: 1px solid var(--color-subtle);
  display: grid;
  gap: 0 var(--grid-lines);
  grid-template-columns: repeat(4, 1fr);
  padding-block-start: var(--block-space);

  &:has(.event--related) {
    .event:not(.event--related) {
      box-shadow: none;
      opacity: 0.75;
    }
  }
}

.events__index {
  --row-gap: calc(4 * var(--block-space));
}

.events--none {
  .events + & {
    padding-block-start: calc(4 * var(--block-space));
  }
}

.events__popup {
  .panel:is(&) {
    max-block-size: calc(100dvh - (2 * var(--block-space-double)));
    max-inline-size: calc(100dvw - (2 * var(--block-space-double)));
  }

  #header:has(&) {
    max-inline-size: 100%;
    position: relative;
    z-index: 5;
  }
}

.event {
  --column-gap: 0.7ch;
  --panel-border-radius: 0.5em;
  --panel-padding: 0.6em 1.2em 0.6em 0.6em;
  --panel-size: auto; 

  margin: var(--inline-space);
  position: relative;
  z-index: 1;
}

.event--related {
  z-index: 2;

  box-shadow:
    0 0 0 1px oklch(var(--lch-always-black) / 0.02),
    0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
    0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
    0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
    0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
    0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6),
    0 0 0.3em 0.3em var(--bubble-color) !important;

  @media (prefers-color-scheme: dark) {
    box-shadow:
      0 0 0 1px oklch(var(--lch-always-black) / 0.42),
      0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6),
      0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7),
      0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8),
      0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9),
      0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1),
      0 0 0.3em 0.3em var(--bubble-color) !important;
  }
}

.event__grid-item {
  background-color: var(--color-selected);
  block-size: 100%;
  border-radius: 0;
  display: flex;
  inline-size: 100%;
}

.event__grid-column-title {
  --z: 3;

  background-color: var(--color-bg);
  padding-block: var(--grid-lines);
}

.event__timestamp {
  align-self: start;
  display: grid;
  font-weight: 600;
  margin-block: var(--grid-lines);
}

.event__title {
  font-size: 1.1em;
  line-height: 1.2;
}

.event__wrapper {
  align-content: end;
  display: grid;
  gap: var(--grid-lines);
  justify-items: center;
  margin: var(--grid-lines);
  padding: calc(var(--grid-lines) / 2);

  .event {
    grid-column-start: unset !important;
    grid-row-start: unset !important;
  }
}