/* Journal tab — Quick Focus strip + Calendar card browser */

.jrn-quick-strip {
  margin: 4px 0 0;
  width: 100%;
}

.jrn-quick-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 6px;
}

.jrn-quick-title {
  margin: 0;
  font-size: 12px;
  color: var(--fg2);
}

.jrn-quick-hd .jrn-streak {
  margin-left: auto;
}

/* 3-week rhythm grid — each week is a full-width 7-column row */
.datestrip-rhythm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.datestrip-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.datestrip-rhythm-hint {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

/* Cards inside grid rows must fill cells — not flex-shrink */
.datestrip-week .jrn-day-card,
.jrn-card-grid .jrn-day-card {
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}

.jrn-day-card.rhythm {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 108px;
  padding: 8px 8px 6px;
}

.jrn-day-card.rhythm .jrn-card-date {
  font-size: 11px;
  font-weight: 650;
  margin-bottom: 6px;
  color: var(--fg);
}

.jrn-day-card.rhythm .jrn-card-metrics {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  font-size: 11px;
  line-height: 1.25;
}

.jrn-day-card.rhythm .jrn-card-score {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.jrn-day-card.rhythm .jrn-card-kcal {
  font-size: 10px;
  color: var(--fg3);
  font-variant-numeric: tabular-nums;
}

.jrn-day-card.rhythm .jrn-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 8px;
}

.jrn-day-card.rhythm .jrn-card-actions .btn {
  padding: 3px 4px;
  font-size: 10px;
  min-height: 0;
  justify-content: center;
}

.jrn-day-card.rhythm.logged {
  border-color: color-mix(in srgb, var(--green) 55%, var(--st2));
  background: color-mix(in srgb, var(--green) 9%, var(--chrome));
}

.jrn-day-card.rhythm.warn {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--st2));
  background: color-mix(in srgb, var(--amber) 8%, var(--chrome));
}

.datestrip-week-focus .jrn-day-card.rhythm.active {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 50%, transparent);
}

.jrn-day-card.rhythm.today:not(.active) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg2) 40%, transparent);
}

/* Calendar card browser */
.jrn-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.jrn-card-wrap {
  position: relative;
  min-height: 128px;
}

.jrn-card-wrap .jrn-card-chk-wrap {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  cursor: pointer;
}

.jrn-card-wrap .jrn-card-chk {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.jrn-card-wrap .jrn-card-chk-ui {
  width: 15px;
  height: 15px;
  border: 1px solid var(--st2);
  border-radius: 4px;
  background: var(--fill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.jrn-card-wrap .jrn-card-chk:checked + .jrn-card-chk-ui {
  background: var(--gradient-accent);
  border-color: transparent;
}

.jrn-card-wrap .jrn-card-chk:checked + .jrn-card-chk-ui::after {
  content: "";
  width: 4px;
  height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translateY(-1px);
}

.jrn-card-wrap .jrn-card-menu-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  font-size: 15px;
  line-height: 1;
}

.jrn-card-wrap .jrn-day-card:not(.compact):not(.rhythm) {
  height: 128px;
  min-height: 128px;
  max-height: 128px;
  padding: 30px 10px 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.jrn-card-wrap .jrn-day-card:not(.compact):not(.rhythm) .jrn-card-date {
  flex: 0 0 auto;
}

.jrn-card-wrap .jrn-day-card:not(.compact):not(.rhythm) .jrn-card-metrics,
.jrn-card-wrap .jrn-day-card:not(.compact):not(.rhythm) .jrn-card-empty,
.jrn-card-wrap .jrn-day-card:not(.compact):not(.rhythm) .jrn-card-noteonly {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 42px;
}

.jrn-card-wrap .jrn-day-card:not(.compact):not(.rhythm) .jrn-card-flags {
  flex: 0 0 auto;
  min-height: 16px;
  margin-top: auto;
}

.jrn-day-card:not(.rhythm) .jrn-card-metrics,
.jrn-day-card:not(.rhythm) .jrn-card-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.jrn-day-card:not(.rhythm) .jrn-card-score {
  font-size: 16px;
  font-weight: 700;
}

.jrn-day-card:not(.rhythm) .jrn-card-kcal {
  font-size: 11px;
  color: var(--fg3);
}

.jrn-day-card:not(.rhythm) .jrn-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.jrn-day-card:not(.rhythm) .jrn-card-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.jrn-day-card:not(.rhythm) .jrn-card-actions-row .btn,
.jrn-day-card:not(.rhythm) .jrn-card-load {
  padding: 3px 6px;
  font-size: 10px;
  width: 100%;
  justify-content: center;
}

.jrn-day-card:not(.rhythm).logged {
  border-color: color-mix(in srgb, var(--green) 55%, var(--st2));
  background: color-mix(in srgb, var(--green) 9%, var(--chrome));
}

.jrn-day-card.rhythm .jrn-card-flags,
.jrn-day-card:not(.rhythm) .jrn-card-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  font-size: 10px;
}

.jrn-month-nav {
  align-items: center;
}

.jrn-view-toggle {
  margin-left: auto;
}

@media (max-width: 720px) {
  .datestrip-week {
    gap: 5px;
  }

  .jrn-day-card.rhythm {
    min-height: 96px;
    padding: 6px;
  }

  .jrn-day-card.rhythm .jrn-card-score {
    font-size: 13px;
  }
}