/* Decorative artwork only: retain the existing card layout and interactions. */
#productShell [data-app-page="dashboard"] .record-group-card.lifestyle {
  --record-card-art: url('../assets/record-lifestyle-background.web.webp');
}

#productShell [data-app-page="dashboard"] .record-group-card.body {
  --record-card-art: url('../assets/record-body-background.web.webp');
}

#productShell [data-app-page="dashboard"] .record-group-card.feeling {
  --record-card-art: url('../assets/record-feeling-background.web.webp');
}

#productShell [data-app-page="dashboard"] .record-group-card {
  background-color: var(--paper, #fff9ef);
  background-image: linear-gradient(110deg, rgba(255, 249, 239, .60), rgba(255, 249, 239, .24)), var(--record-card-art);
  background-size: 100% 100%, contain;
  background-position: center, center;
  background-repeat: no-repeat;
}

/* Daily record choices: preserve the original controls and selection border. */
#recordTypeGrid > [data-record-type="mood"] {
  --record-type-art: url('../assets/record-mood-background.web.webp');
}
#recordTypeGrid > [data-record-type="sleep"] {
  --record-type-art: url('../assets/record-sleep-background.web.webp');
}
#recordTypeGrid > [data-record-type="diet"] {
  --record-type-art: url('../assets/record-diet-background.web.webp');
}
#recordTypeGrid > [data-record-type="activity"] {
  --record-type-art: url('../assets/record-activity-background.web.webp');
}
#recordTypeGrid > [data-record-type="weight"] {
  --record-type-art: url('../assets/record-weight-background.web.webp');
}
#recordTypeGrid > [data-record-type="glucose"] {
  --record-type-art: url('../assets/record-glucose-background.web.webp');
}
#recordTypeGrid > [data-record-type="note"] {
  --record-type-art: url('../assets/record-note-background.web.webp');
}
#recordTypeGrid > .record-type:not([data-record-type]) {
  --record-type-art: url('../assets/record-report-background.web.webp');
}

#productShell #recordTypeGrid > .record-type {
  /* Override the existing important background shorthand, including hover. */
  background-image: linear-gradient(90deg, rgba(255, 249, 239, .25), rgba(255, 249, 239, .04)), var(--record-type-art) !important;
  background-size: 100% 100%, contain !important;
  background-position: center, center !important;
  background-repeat: no-repeat !important;
}