/* History: how following the plan has gone. Built on the Plan page's cards (plan.css); only what is its own is here. */

.history-range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.history-dates { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.history-dates label { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: #52606d; }
.history-dates input { padding: 5px 8px; border: 1px solid #cbd2d9; border-radius: 6px; font: inherit; color: #1f2933; }
.history-presets { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.history-covers { flex-basis: 100%; margin: 0; }
.history-empty { margin: 0; }

/* the answer: followed the plan or not, then the three checks it is decided by */
.history-verdict { font-size: 1.3rem; margin: 0 0 2px; }
.history-good { color: #0b6b3a; }
.history-bad { color: #8a1c13; }
.history-streak { margin: 0 0 12px; }
.history-checks { margin: 0; padding: 0; list-style: none; }
.history-check { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 2px; border-top: 1px solid #e4e7eb; }
.history-check-mark { width: 1.2em; font-weight: 700; }
.history-met .history-check-mark { color: #0b6b3a; }
.history-missed .history-check-mark { color: #b42318; }
.history-check-figures { font-variant-numeric: tabular-nums; }
.history-check-count { margin-left: auto; }
.history-items-none, .history-items-note { margin: 10px 0 0; }
.history-table-wrap { overflow-x: auto; }   /* a narrow screen scrolls the table, not the page */
.history-detail .plan-group th .plan-muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.history-achievements { margin: 12px 0 0; }

/* each pay period, newest first: open one to see it on its own */
.history-periods { margin: 0; padding: 0; list-style: none; }
.history-period { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; padding: 9px 2px; border: 0; border-top: 1px solid #e4e7eb; background: none; font: inherit; text-align: left; cursor: pointer; }
.history-period:hover { background: #f5f7fa; }
.history-period-dates { font-weight: 600; white-space: nowrap; }
.history-period-why { color: #52606d; font-size: 0.9rem; }
.history-back { margin: 0 0 14px; }

@media (max-width: 520px) {
    .history-dates, .history-dates label { width: 100%; }
    .history-dates input { flex: 1; }
    .history-check-count { margin-left: 0; flex-basis: 100%; padding-left: calc(1.2em + 10px); }
}