body#app {
  > main:is([data-page="calendar"] *) {
    --event-color-red:    rgba(231, 76, 60, 1);    /* #E74C3C */
    --event-color-orange: rgba(230, 126, 34, 1);   /* #E67E22 */
    --event-color-yellow: rgba(241, 196, 15, 1);   /* #F1C40F */
    --event-color-green:  rgba(39, 174, 96, 1);    /* #27AE60 */
    --event-color-blue:   rgba(52, 152, 219, 1);   /* #3498DB */
    --event-color-purple: rgba(155, 89, 182, 1);   /* #9B59B6 */
    --event-color-brown:  rgba(186, 74, 0, 1);     /* #BA4A00 */
    --event-color-gray:   rgba(127, 140, 141, 1);  /* #7F8C8D */

    padding-bottom: 0;


    > section {
      &.about {
        padding-bottom: 0;


        > p:has(+ .next-events:empty) {
          display: none;
        }


        > .next-events {
          --columns: 3;
          --zoom-factor: 1;
          --padding-zoom-factor: 1;
          padding-inline: 1rem;
          display: grid;
          gap: 1.2rem;
          grid-template-columns: repeat(var(--columns), 1fr);
          container-type: inline-size;

          &:empty {
            display: none;
          }

          @media (max-width: 1000px) {
            --columns: 2;
          }

          @media (max-width: 749px) {
            --zoom-factor: 0.9;
          }

          @media (max-width: 666px) {
            --columns: 1;
            --zoom-factor: 0.85;
          }

          @media (max-width: 500px) {
            --padding-zoom-factor: 0.6;
          }

          @media (max-width: 380px) {
            --zoom-factor: 0.8;
          }


          > .next-event {
            border: 0.1rem solid gray;
            border-radius: calc(1.2rem + 1.2rem * var(--padding-zoom-factor));
            padding: calc(1.2rem * var(--padding-zoom-factor));
            background: rgba(0, 0, 0, 0.1);
            display: grid;
            gap: 1.2rem;
            align-items: center;
            grid-template-columns: auto 1fr;
            cursor: default;

            @media (hover: hover) and (pointer: fine) {
              &:hover {
                background: rgba(0, 0, 0, 0.2);
              }
            }

            &:active {
              background: rgba(0, 0, 0, 0.2);
            }


            > .calendar {
              aspect-ratio: 1 / 1;
              border-radius: 1.2rem;
              padding-left: 0.1rem;
              width: calc(5rem * var(--zoom-factor));
              display: grid;
              gap: 0.2rem;
              grid-auto-flow: row;
              place-content: center;
              place-items: center;
              background: white;


              > .day {
                font-size: calc(1.3rem * var(--zoom-factor));
                line-height: 1;
                font-weight: 600;
                letter-spacing: 0.05rem;
                color: var(--event-color-red);
              }


              > .date {
                font-size: calc(2.4rem * var(--zoom-factor));
                line-height: 1;
                color: black;
              }
            }


            > .details {
              display: grid;
              grid-auto-flow: row;


              > .name, .when {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }


              > .name {
                font-size: calc(2rem * var(--zoom-factor));
                line-height: 1.4;
              }


              > .when {
                font-size: calc(1.6rem * var(--zoom-factor));
                opacity: 0.8;
              }
            }
          }
        }


        > p:is(.next-events:not(:empty) + *) {
          margin-top: 2.4rem;
        }
      }


      &.calendar {
        padding-block: 0;
        height: calc(100dvh - var(--height-of-header) - var(--height-of-footer));
        grid-template-rows: 1fr;
        // grid-template-rows: auto 1fr;
        row-gap: 0;
        cursor: default;
        -webkit-user-select: none;
        user-select: none;


        > .controls {
          margin-top: var(--spacing-regular);
          display: none;
        }


        > .months {
          grid-column: 1 / -1;
          padding-block: var(--spacing-regular);
          display: flex;
          gap: 1.6rem;
          overflow-x: scroll;
          scrollbar-width: none;
          scroll-snap-type: x mandatory;
          padding-inline: 50%;
          transition-duration: 0.4s;
          transition-property: opacity;

          &::-webkit-scrollbar {
            display: none;
          }

          &[hidden] {
            opacity: 0;
          }


          > .month {
            --inset: 0.4rem;
            --half-inset: calc(var(--inset) / 2);
            --entry-rows: 2;
            --entry-height: calc(4rem + 0.4rem);  /* consider the margin */
            --rest-height: minmax(var(--half-inset), 1fr);
            --height-of-month-header: 4.4rem;
            --height-of-weekday-name: 2.4rem;

            --month-indentation-base: 4;
            &:is(html[data-is-mobile-safari] *) {
              --month-indentation-base: 3;  /* for some reason this can be more narrow on ios */
            }

            flex: 0 0 auto;
            scroll-snap-align: center;
            scroll-snap-stop: always;

            box-shadow: 0 0 var(--width-of-maximum-borders) black;
            border-radius: var(--radius-of-borders);
            width: calc(min(var(--max-width), calc(100dvw - var(--month-indentation-base) * var(--spacing-regular))) - env(safe-area-inset-left) - env(safe-area-inset-right));
            height: 100%;
            background: linear-gradient(rgba(255, 255, 255, 0.666), rgba(255, 255, 255, 0.888));
            -webkit-backdrop-filter: blur(0.333rem);
            backdrop-filter: blur(0.333rem);

            display: grid;
            align-content: start;
            grid-template-columns:
              [inline-start col1-start] 1fr
              [col1-end col2-start] 1fr
              [col2-end col3-start] 1fr
              [col3-end col4-start] 1fr
              [col4-end col5-start] 1fr
              [weekend-start col5-end col6-start] 1fr
              [col6-end col7-start] 1fr
              [col7-end weekend-end inline-end]
            ;
            grid-template-rows:
              [title-start] auto [title-end
              weekdays-start] auto [weekdays-end
              all-weeks-start week1-date-start] auto [week1-date-end]
                repeat(var(--entry-rows), var(--entry-height))
              [week1-rest-start] var(--rest-height) [week1-rest-end
              week2-date-start] auto [week2-date-end]
                repeat(var(--entry-rows), var(--entry-height))
              [week2-rest-start] var(--rest-height) [week2-rest-end
              week3-date-start] auto [week3-date-end]
                repeat(var(--entry-rows), var(--entry-height))
              [week3-rest-start] var(--rest-height) [week3-rest-end
              week4-date-start] auto [week4-date-end]
                repeat(var(--entry-rows), var(--entry-height))
              [week4-rest-start] var(--rest-height) [week4-rest-end
              week5-date-start] auto [week5-date-end]
                repeat(var(--entry-rows), var(--entry-height))
              [week5-rest-start] var(--rest-height) [week5-rest-end
              week6-date-start] auto [week6-date-end]
                repeat(var(--entry-rows), var(--entry-height))
              [week6-rest-start] var(--rest-height) [week6-rest-end all-weeks-end]
            ;

            color: black;
            transition-duration: 0.4s;
            transition-property: opacity, scale;

            scroll-snap-type: y mandatory;
            overflow-x: hidden;
            overflow-y: auto;
            scrollbar-width: none;

            &::-webkit-scrollbar {
              display: none;
            }

            &::before {
              content: "";
              position: absolute;
              grid-column: weekend;
              grid-row: all-weeks;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.1);
            }

            &::after {
              content: "";
              position: absolute;
              inset: 0;
              border-radius: inherit;
              background: rgba(0, 0, 0, 0.333);
              pointer-events: none;
              opacity: 0;
              transition: inherit;
              z-index: 3;
            }

            &:not([data-centered]) {
              &::after {
                opacity: 1;
              }

              @media (hover: hover) and (pointer: fine) {
                &:hover::after {
                  opacity: 0.8;
                }
              }

              &:active::after {
                opacity: 0.8;
              }

              @media (min-width: 1160px) {
                scale: 0.95;
              }
            }


            > header {
              scroll-snap-align: start;
              grid-column: inline;
              position: sticky;
              top: 0;
              border-top-left-radius: inherit;
              border-top-right-radius: inherit;
              width: 100%;
              height: var(--height-of-month-header);
              display: grid;
              place-content: center;
              font-size: 2.2rem;
              line-height: 1.4;
              z-index: 2;
            }


            > header,
            > div.weekday {
              background: rgba(203, 205, 207, 1);
            }


            > div {
              display: grid;
              place-content: center;
              line-height: 1;

              &.weekday {
                grid-row: weekdays;
                position: sticky;
                top: var(--height-of-month-header);
                border-bottom: 0.1rem solid rgba(0, 0, 0, 0.25);
                height: var(--height-of-weekday-name);
                font-weight: 500;
                z-index: 1;
              }

              &.day {
                scroll-snap-align: start;
                scroll-margin-top: calc(var(--height-of-month-header) + var(--height-of-weekday-name) - 0.1rem);
                padding: 0.4rem;

                &:nth-child(n +  1 of .day) { grid-row: week1-date }
                &:nth-child(n +  8 of .day) { grid-row: week2-date; border-top: 0.1rem solid rgba(0, 0, 0, 0.25); }
                &:nth-child(n + 15 of .day) { grid-row: week3-date }
                &:nth-child(n + 22 of .day) { grid-row: week4-date }
                &:nth-child(n + 29 of .day) { grid-row: week5-date }
                &:nth-child(n + 36 of .day) { grid-row: week6-date }

                &.today {
                  display: grid;
                  justify-content: center;
                  color: white !important;
                  font-weight: 600;
                  isolation: isolate;

                  &::before {
                    --width: 4ch;
                    --margin: 0.3rem;
                    content: "";
                    position: absolute;
                    margin-inline: calc((100% - var(--width)) / 2);
                    margin-block: 0.3rem;
                    border-radius: 100vmax;
                    width: var(--width);
                    height: calc(100% - 2 * var(--margin));
                    background: rgba(0, 0, 0, 0.25);
                    z-index: -1;
                  }
                }

                &.previous-month,
                &.next-month {
                  color: rgba(0, 0, 0, 0.25);
                }
              }


              &.event {
                --default-color: var(--event-color-gray);
                grid-column: var(--area) / span var(--span, 1);
                grid-row: var(--area);
                margin-block: var(--half-inset);
                border-radius: var(--spacing-minimum);
                background: var(--color);
                display: flex;
                flex-direction: column;
                gap: 0.4rem;
                overflow: hidden;
                transition-duration: 0.4s;
                transition-property: opacity;

                @starting-style {
                  opacity: 0;
                }

                &:is(.month[data-centered] *) {
                  @media (hover: hover) and (pointer: fine) {
                    &:hover::before {
                      content: "";
                      position: absolute;
                      inset: 0;
                      border-radius: inherit;
                      background: rgba(0, 0, 0, 0.075);
                      z-index: 1;
                      pointer-events: none;
                    }
                  }

                  &:active::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    border-radius: inherit;
                    background: rgba(0, 0, 0, 0.15);
                    z-index: 1;
                    pointer-events: none;
                  }
                }

                &::after {
                  content: "";
                  position: absolute;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  border-right: 0.2rem solid var(--color);
                  width: 1rem;
                  background: linear-gradient(to right, transparent, var(--color));
                  pointer-events: none;
                }

                &[data-starts-this-week] {
                  margin-left: var(--half-inset);

                  &[data-is-monday] {
                    margin-left: var(--inset);
                  }
                }

                &:not([data-starts-this-week]) {
                  border-top-left-radius: 0;
                  border-bottom-left-radius: 0;
                }

                &[data-ends-this-week] {
                  margin-right: var(--half-inset);

                  &[data-is-sunday] {
                    margin-right: var(--inset);
                  }
                }

                &:not([data-ends-this-week]) {
                  border-top-right-radius: 0;
                  border-bottom-right-radius: 0;
                }


                > div {
                  &.name {
                    > span {
                      padding-inline: 0.4rem;
                      width: 100%;
                      display: block;
                      font-size: 1.6rem;
                      text-align: center;
                      white-space: nowrap;
                    }
                  }


                  &.time {
                    display: flex;
                    justify-content: center;

                    &:has(> span:empty) {
                      display: none;
                    }


                    > span {
                      font-size: 1.4rem;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }


    > dialog {
      &.event-details {
        > form {
          > .share {
            > svg {
              margin-right: 0.2rem;
              padding: 0.2rem;
            }
          }
        }


        > main {
          > ul {
            width: 100%;
            max-width: 60rem;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            align-content: start;
            gap: var(--spacing-regular);
            font-size: 1.8rem;
            line-height: 1.5;

            @media (max-width: 700px) {
              grid-template-columns: 1fr;
              font-size: 1.6rem;
            }


            > hr {
              border: none;
            }


            > li {
              grid-column: 1 / -1;
              margin-inline: 0;
              list-style: none;
              display: flex;
              align-items: center;
              gap: var(--spacing-minimum);


              > svg {
                flex: 0 0 auto;
                --size: 2.4rem;
                width: var(--size);
                height: var(--size);
              }


              > span {
                max-width: 40rem;
              }


              &.name {
                font-size: 2.8rem;
                line-height: 1.2;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;

                @media (max-width: 700px) {
                  font-size: 2.4rem;
                }

                &::before {
                  content: "";
                  --size: 2rem;
                  margin-inline: 0.2rem;
                  border: 0.2rem solid black;
                  border-radius: 100vmax;
                  width: var(--size);
                  height: var(--size);
                  background: var(--color);
                }
              }


              &.desc {
                display: block;
                line-height: 1.6;

                &:empty, &:has(> p:only-child:empty) {
                  display: none;
                }


                p + p {
                  margin-top: 1.5rem;
                }
              }

              &.date-from,
              &.date-to,
              &.time-from,
              &.time-to {
                &:has(> span:empty) {
                  display: none;
                }


                > svg {
                  margin: 0.2rem;
                  width: 2rem;
                  height: 2rem;
                }
              }

              &.date-from,
              &.date-to {
                grid-column: 1 / 2;
              }

              &.date-from,
              &.time-from {
                > svg {
                  transform: scaleX(-1);
                }
              }

              &.time-from,
              &.time-to {
                grid-column: -2 / -1;

                @media (max-width: 700px) {
                  margin-top: calc(-1 * var(--spacing-minimum))
                }
              }

              &.url {
                margin-top: var(--spacing-minimum);
                display: grid;
                grid-template-columns: auto 1fr;

                &:not([data-is-email]) {
                  > svg:nth-child(1) {
                    display: none;
                  }
                }

                &[data-is-email] {
                  > svg:nth-child(2) {
                    display: none;
                  }
                }

                &:has(a:empty) {
                  display: none;
                }


                > a {
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
              }

              &.location {
                margin-top: var(--spacing-minimum);

                &:has(.address:empty) {
                  display: none;
                }

                .name:empty + br {
                  display: none;
                }
              }


              &.owner {
                &:has(> span:empty) {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
}


@media (max-height: 1200px) {
  body {
    > main:is([data-page="events"] *) {
      > section {
        &.calendar {
          > .months {
            > .month {
              --entry-height: 4rem;


              > div {
                &.weekday,
                &.day {
                  font-size: 1.5rem;
                }

                &.event {
                  > div {
                    &.name {
                      > span {
                        font-size: 1.5rem;
                      }
                    }

                    &.time {
                      > span {
                        font-size: 1.3rem;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}


@media (max-height: 998px) {
  body {
    > main:is([data-page="events"] *) {
      > section {
        &.calendar {
          > .months {
            > .month {
              --entry-height: 2.4rem;


              > div {
                &.weekday,
                &.day {
                  font-size: 1.5rem;
                }

                &.event {
                  > div {
                    &.name {
                      > span {
                        font-size: 1.5rem;
                      }
                    }

                    &.time {
                      display: none;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}


@media (max-height: 800px) {
  body {
    > main:is([data-page="events"] *) {
      > .calendar {
        > .months {
          > .month {
            --inset: 0.2rem;
            --entry-height: 2rem;
            --height-of-month-header: 3.8rem;


            > header {
              font-size: 2rem;
            }


            > div {
              &.weekday,
              &.day {
                font-size: 1.4rem;
              }

              &.day {

              }

              &.event {
                border-radius: 0.4rem;


                > div {
                  &.name {
                    > span {
                      font-size: 1.3rem !important;
                    }
                  }

                  &.time {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}