styles.css

.journal-clickable {
  cursor: pointer;
}
.journal-name {
  margin-left: 18px;
}

.journal-week-view,
.journal-month-view {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-left: 12px;
  margin-bottom: 12px;
}
.journal-week-view .journal-weekday {
  font-size: 1em;
}
.journal-month-with-week {
  grid-template-columns: 1.25fr repeat(7, 1fr);
}
.journal-month-view.with-week {
  grid-template-columns: repeat(8, 1fr);
}

.journal-month-timeline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.journal-calendar-view {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.journal-weeknumber {
  font-size: 0.7em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.journal-weekday {
  font-size: 0.7em;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.journal-day {
  font-size: 0.7em;
  border: 1px solid transparent;
  height: 28px;
  line-height: 26px;
  /* width: 28px; */
  text-align: center;
}

.is-selected .journal-day {
  background-color: var(--background-secondary);
}

.journal-is-today {
  color: var(--text-accent);
  font-weight: 600;
}

.journal-day-of-week {
  color: var(--text-muted);
  font-size: 0.65em;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.is-selected .journal-day-of-week {
  color: var(--text-normal);
}

.journal-is-not-same-month {
  color: var(--code-comment);
}

.journal-nav-view {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  text-align: center;
}

.journal-day-nav,
.journal-week-nav,
.journal-month-nav,
.journal-quarter-nav,
.journal-year-nav {
  position: relative;
}

.journal-nav-day {
  font-weight: bold;
  font-size: 3em;
}
.journal-nav-week {
  font-weight: bold;
  font-size: 2.5em;
}
.journal-day-nav .journal-nav-week {
  font-size: 0.8em;
}

.journal-nav-icon,
.interval-nav-icon {
  --icon-size: 3em;
  position: absolute;
  top: 30%;
}
.journal-nav-icon-prev,
.interval-nav-icon-prev {
  left: -5em;
}
.journal-nav-icon-next,
.interval-nav-icon-next {
  right: -5em;
}
.journal-nav-relative {
  font-size: 0.7em;
}
.journal-month-nav .journal-nav-month {
  font-size: 2em;
}
.journal-quarter-nav .journal-nav-quarter {
  font-size: 3em;
}
.journal-year-nav .journal-nav-year {
  font-size: 3em;
}

.journal-nav-prev,
.journal-nav-next,
.interval-nav-prev,
.interval-nav-next {
  font-size: 0.8em;
  margin-top: 0.5em;
}

.interval-nav-view {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  text-align: center;
}

.interval-name {
  font-size: 2em;
}
.interval-nav-current {
  position: relative;
}
.interval-dates {
  font-size: 0.9em;
  white-space: pre-line;
}

.journal-date-picker-modal {
  --dialog-width: 330px;
}
.journal-add-notes-modal {
  --dialog-width: 700px;
}

.journal-dp-name-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8em;
}
.journal-dp-year-view {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.journal-dp-decade-view {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.journal-dp-quarters-view {
  display: flex;
  justify-content: space-around;
}
.journal-out-of-range {
  opacity: 0.7;
}

.journal-is-selected {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
}

.journal-small-input {
  width: 50px;
}

.journal-warning {
  color: var(--text-error);
}

.journal-link {
  color: var(--link-color);
  text-decoration: underline;
  outline: none;
  text-decoration-line: var(--link-decoration);
  text-decoration-thickness: var(--link-decoration-thickness);
  cursor: var(--cursor-link);
}

.journal-variable,
.journal-code-block {
  border: var(--modal-border-width) solid var(--modal-border-color);
  border-radius: var(--radius-s);
  cursor: pointer;
  padding: 2px 4px;
  font-family: monospace;
}
.journal-variable:hover {
  background-color: var(--background-secondary);
}
.journal-hint {
  color: var(--bold-color);
}

.journal-variables-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
}

.journal-divider {
  height: 1px;
  margin: 4px 0 12px;
  border-bottom: var(--modal-border-width) solid var(--modal-border-color);
}

.calendar-code-block-modal {
  --dialog-width: 720px;
}

.journal-nav-today {
  position: absolute;
  top: 0.5em;
  right: 2.5em;
  color: var(--text-accent);
  font-size: 0.8em;
}
.block-language-calendar-nav {
  padding-top: 1em;
}

.journal-suggestion-icon {
  justify-content: flex-start;
}
.journal-suggestion-name {
  margin-left: 8px;
}

.journal-day,
.journal-weeknumber,
.journal-month,
.journal-quarter,
.journal-year,
.journal-interval-name {
  position: relative;
}

.journal-calendar-view {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.journal-calendar-view-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.journal-calendar-view-month.with-week {
  grid-template-columns: repeat(8, 1fr);
}
.journal-calendar-view-toolbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.journal-calendar-view-title-row {
  display: grid;
  grid-template-columns: 18px 18px 1fr 18px 18px;
  gap: 6px;
}
.journal-calendar-view-title-row > div {
  padding: 4px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.journal-calendar-view-title-row .journal-calendar-view-title-text {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 4px;
}
.journal-note-marker {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--text-accent);
  transform: translateX(-50%);
}
.journal-calendar-view-title-text .journal-note-marker {
  bottom: -3px;
}

.journal-interval-name .journal-note-marker {
  left: -8px;
  bottom: 50%;
  transform: translateY(50%);
}

.journal-is-active {
  color: var(--text-on-accent);
  background-color: var(--interactive-accent);
  border-radius: 2px;
}
.journal-is-active .journal-note-marker {
  background-color: var(--text-on-accent);
}

.journal-interval-block {
  padding: 8px 0;
}

.journal-interval-block h5 {
  margin-top: 0;
}

.journal-interval-block + .journal-interval-block {
  border-top: 1px solid var(--modal-border-color);
}

.journal-interval + .journal-interval {
  margin-top: 6px;
}
.journal-interval-name {
  font-size: 1.2em;
}
.journal-interval-dates {
  font-size: 0.8em;
}
.journal-is-current-interval {
  color: var(--text-accent);
  font-weight: 600;
}
.journal-is-active.journal-is-current-interval {
  color: var(--text-on-accent);
}