/* ===== Daily Gratitude — Right-rail grid (standalone) ===== */
/* Grid container: DG writes chips into #dgRail inside the right rail */
.gratitude #dgRail {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2-up on mobile */
  gap: 0.5rem !important;                                       /* spacing between chips */
  align-content: start !important;                               /* stack from the top */
}

/* 3-up layout on large screens (≥992px) */
@media (min-width: 992px) {
  .gratitude #dgRail {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Chip/card styling inside the grid */
.gratitude #dgRail > .rail__chip {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;                /* fill the grid cell */
  padding: 0.375rem 0.5rem !important;
  gap: 0.125rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid var(--brand-gold, #b08a48) !important;
  background: #fff !important;
  color: #000 !important;                /* date label text */
  text-align: left !important;
  line-height: 1.2 !important;           /* tight, button-like */
}

/* Optional: hover/focus state without changing your palette */
.gratitude #dgRail > .rail__chip:hover,
.gratitude #dgRail > .rail__chip:focus {
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(176, 138, 72, 0.15) !important; /* brand gold glow */
}

/* Safety: if you ever fall back to #journalButtons, apply the same grid */
.gratitude #journalButtons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  align-content: start !important;
}
@media (min-width: 992px) {
  .gratitude #journalButtons {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}