/* ============================================================================
   insights.css — Phase 2: stats, charts, personal insight, monthly calendar.
   ============================================================================ */

/* ---- Personal insight --------------------------------------------------- */
.insight__headline { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 14px; }
.insight__wins { display: flex; flex-direction: column; gap: 9px; }
.insight__wins li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.insight__wins li .icon { color: rgb(var(--health)); margin-top: 2px; flex: none; }
.insight__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(var(--border)); display: flex; flex-direction: column; gap: 9px; }
.insight__line { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: rgb(var(--text-2)); }
.insight__line .icon { margin-top: 2px; flex: none; color: rgb(var(--text-3)); }
.insight__line--sugg { color: rgb(var(--text)); font-weight: 550; }
.insight__line--sugg .icon { color: rgb(var(--primary)); }

/* ---- Stat row ----------------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--gap); margin: var(--gap) 0; }
.stat-row .stat { background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 16px; }

/* ---- Bar charts --------------------------------------------------------- */
.chart-bars { display: flex; align-items: flex-end; gap: 3px; height: var(--chart-h, 150px); padding-top: 8px; }
.chart-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.chart-col__track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.chart-col__fill {
  width: 68%; max-width: 26px; min-width: 5px;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, rgb(var(--area, var(--primary))), rgb(var(--area, var(--primary)) / 0.55));
  transition: height var(--dur-3) var(--ease-out), opacity var(--dur-1) var(--ease);
}
.chart-col:hover .chart-col__fill { opacity: 0.78; }
.chart-col__label { font-size: 10.5px; color: rgb(var(--text-3)); white-space: nowrap; height: 12px; line-height: 12px; }
.chart-empty { padding: 34px 0; text-align: center; }

.sparkline { width: 100%; display: block; }

/* ---- Chart tooltip ------------------------------------------------------ */
.chart-tip {
  position: fixed; z-index: 300;
  transform: translate(-50%, -100%);
  background: rgb(var(--text)); color: rgb(var(--bg));
  font-size: 12px; font-weight: 600;
  padding: 5px 9px; border-radius: var(--r-sm);
  pointer-events: none; opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
  box-shadow: var(--shadow); white-space: nowrap;
}
.chart-tip.is-on { opacity: 1; }

/* ---- Trend grid --------------------------------------------------------- */
.trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--gap); margin-top: var(--gap); }
.chart-card { display: flex; flex-direction: column; }
.chart-card .chart-bars { margin-top: auto; }

/* ---- Monthly calendar --------------------------------------------------- */
.cal-card { margin-top: var(--gap); }
.cal__nav { display: flex; align-items: center; gap: 6px; }
.cal__month { font-size: 13.5px; font-weight: 650; min-width: 104px; text-align: center; }
.flip { transform: scaleX(-1); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__grid--head { margin-bottom: 6px; }
.cal__dow { text-align: center; font-size: 11px; font-weight: 700; color: rgb(var(--text-3)); }
.cal__cell {
  aspect-ratio: 1; display: grid; place-items: center;
  border-radius: var(--r-sm); font-size: 12px; font-weight: 600;
  color: rgb(var(--text-2));
  background: rgb(var(--area, var(--health)) / var(--cell, 0.12));
}
.cal__cell--empty { background: none; }
.cal__cell--future { background: rgb(var(--surface-2)); color: rgb(var(--text-3)); opacity: 0.5; }
.cal__cell.is-today { outline: 2px solid rgb(var(--primary)); outline-offset: -1px; color: rgb(var(--text)); }
.cal__legend { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 16px; font-size: 11px; color: rgb(var(--text-3)); }
.cal__legend .cal__cell { width: 16px; height: 16px; aspect-ratio: auto; }

/* ---- Recurring task list (Settings) ------------------------------------ */
.rec-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.rec-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--r-sm); transition: background var(--dur-1) var(--ease); }
.rec-item:hover { background: rgb(var(--surface-2)); }
.rec-item__title { flex: 1; font-size: 14px; font-weight: 500; }
.rec-item__cadence { font-size: 12px; color: rgb(var(--text-3)); }

/* ---- Habit breakdown table --------------------------------------------- */
.breakdown-card { margin-top: var(--gap); }
.table-wrap { overflow-x: auto; }
.hb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 380px; }
.hb-table th { text-align: right; font-size: 11px; font-weight: 700; color: rgb(var(--text-3)); text-transform: uppercase; letter-spacing: 0.03em; padding: 0 0 10px; }
.hb-table th:first-child { text-align: left; }
.hb-table td { text-align: right; padding: 9px 0; border-top: 1px solid rgb(var(--border)); color: rgb(var(--text-2)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-table td:first-child { text-align: left; color: rgb(var(--text)); font-weight: 500; padding-right: 12px; }
.hb__icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: rgb(var(--area, var(--primary)) / 0.13); color: rgb(var(--area, var(--primary))); vertical-align: middle; margin-right: 9px; }

/* ---- Reminders (Settings) ---------------------------------------------- */
.reminder-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.reminder-row__label { flex: 1; font-size: 14.5px; font-weight: 500; }