calendar-daily {
  .date-header {
    background-color: var(--base);
    padding-right: var(--grid-size);
    padding-bottom: var(--grid-size);
    position: relative;
    width: fit-content;
  }
  .date-header-wrapper {
    display: flex;
    height: calc(var(--grid-size) * 4);
    width: calc(var(--grid-size) * 16);
  }
  .date-header .date-header-span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    height: 100%;
    border: 1px solid;
    border-left: none;
  }
  .date-header .month-span {
    font-size: 12px;
    font-family: "Univers-Light";
    width: calc(var(--grid-size) * 3);
    border-left: 1px solid;
  }
  .date-header .day-span {
    font-family: "Univers-Light";
    font-size: 46px;
    width: calc(var(--grid-size) * 6 + 1px);
  }
  .date-header .day-of-week-span {
    font-size: 12px;
    font-family: "Univers-Light";
    width: calc(var(--grid-size) * 4 + 2px);
  }
  .date-header .day-of-year-span {
    font-family: "Univers";
    font-size: 10px;
    width: calc(var(--grid-size) * 3 - 2px);
    gap: 2px;
  }
  .moon-phase {
    font-family: "Noto-Emoji";
    font-size: 13px
  }
  .timeline-ticks {
    top: calc(var(--grid-size) * 7 + 2px);
    position: absolute;
    display: flex;
    flex-direction: column;
  }
  .timeline, .secretline { 
    position: absolute;
    align-items: center;
    width: var(--grid-size);
  }
  .timeline {
    top: calc(var(--grid-size) * 7);
    left: calc(var(--grid-size) * 2 - 1px);
    border-right: 1px solid;
    height: calc(var(--grid-size) * 24 + 1px);
  }
  .secretline {
    top: calc(var(--grid-size) * 6);
    left: calc(var(--grid-size) * 17);
    border-right: 0.5px solid;
    height: calc(var(--grid-size) * 25 + 1px);
    opacity: 0.5;
  }
  .timeline-ticks span {
    font-size: 8px;
    height: var(--grid-size);
    display: flex;
    background-color: var(--base);
    width: var(--grid-size);
    justify-content: center;
    position: relative;
    top: -6px;
    left: 6px;
  }
  .checkboxes {
    left: calc(var(--grid-size) * 18);
    position: absolute;
    width: calc(var(--grid-size) + 1px);
    height: 70.5px; /* MAGIC */
    top: 17.5px; /* MAGIC */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .checkboxes .checkbox {
    height: calc(var(--grid-size) - 6.5px);
    width: calc(var(--grid-size) - 6.5px);
    border: 1px solid;
    opacity: 0.5;
  }
  .page-marker {
    position: absolute;
    font-size: 20px;
    top: calc(var(--month-index) * var(--grid-size) * 3);
    right: 0;
    height: calc(var(--grid-size) * 3);
    width: calc(var(--grid-size) * 3);
    text-align:center;
    display: flex;
    color: var(--base);
    font-family: "Univers-Light";
    justify-content: center;
    align-items: center;
  }
}

/* Add empty space around the margins */
/*
calendar-daily[print-size="letter-portrait"]:before {
  width: calc(var(--letter-short-length) - var(--grid-size) * 2);
  height: calc(var(--letter-long-length) - var(--grid-size) * 2);
}
calendar-daily[print-size="letter-landscape"]:before {
  width: calc(var(--letter-long-length) - var(--grid-size) * 2);
  height: calc(var(--letter-short-length) - var(--grid-size) * 2);
}
  */