/* habits — feature styles */
/* (.swatch-row / .swatch come from settings.css — reused by the add form) */

.habit-list { display: flex; flex-direction: column; gap: 12px; }

.habit-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex; flex-wrap: wrap;
  gap: 14px 24px;
  align-items: flex-start; /* heatmap sits right; wraps below on narrow */
}
.habit-main { flex: 1; min-width: 260px; }
.habit-top { display: flex; align-items: center; gap: 10px; }
.habit-emoji { font-size: 18px; line-height: 1; }
.habit-name { font-weight: 600; cursor: pointer; }
.habit-name:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.habit-stats { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
/* .chip.streak gets its color/border inline from the habit color */

/* big "done today" checkbox */
.cbx.cbx-lg { width: 24px; height: 24px; border-radius: 7px; }

/* last-7-days quick toggles */
.mini-week { display: flex; gap: 7px; }
.mini-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mini-col.today .mini-lbl { color: var(--accent); font-weight: 700; }
.mini-lbl { font-size: 10px; color: var(--text-faint); }
.mini-day {
  width: 22px; height: 22px; padding: 0;
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  cursor: pointer;
  display: grid; place-items: center;
  color: transparent;
}
.mini-day:hover { border-color: var(--border); }
.mini-day.on { color: #0b0c10; } /* check glyph on habit-colored bg */

/* 13-week heatmap */
.habit-heat { display: flex; flex-direction: column; gap: 4px; }
.heat-grid {
  display: grid;
  grid-template-rows: repeat(7, 11px);
  grid-auto-flow: column;
  grid-auto-columns: 11px;
  gap: 3px;
}
.heat-cell {
  width: 11px; height: 11px;
  border-radius: 3px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-soft);
}
.heat-cell.on { border: none; } /* bg comes inline from habit color */
.heat-cell.future { background: transparent; border-color: var(--border-soft); opacity: 0.55; }
.heat-cap { font-size: 10.5px; color: var(--text-faint); text-align: right; }

/* add form */
.emoji-input { max-width: 58px; text-align: center; }

/* longest-streak KPI (flame + count on one line) */
.streak-val { display: inline-flex; align-items: center; gap: 6px; }
.streak-val svg { flex-shrink: 0; }
.streak-val.lit svg { color: #ff8c42; }