/* Track D: stats dashboard, weekly review, change history, streaks,
   deferral budget, undo button. Tokens from styles/tokens.css. */

.td-wrap {
  padding: var(--screen-pad);
  padding-bottom: var(--s12);
  max-width: 640px;
  margin: 0 auto;
}

.td-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s1);
}

.td-head .t-title {
  margin: 0;
}

.td-week {
  margin: 0 0 var(--s4) 0;
}

.td-error {
  color: #B3261E;
  margin: 0 0 var(--s3) 0;
}

.td-saved {
  color: var(--teal);
  margin: 0 0 var(--s3) 0;
}

/* --- stat cards --- */
.td-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.td-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-comp);
  padding: var(--s4);
  box-shadow: var(--shadow-sm);
}

.td-card-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--s1) 0;
  color: var(--ink);
}

.td-card-label,
.td-card-sub {
  margin: 0;
}

.td-card-sub {
  color: var(--faint);
}

/* --- streak banner --- */
.td-streak {
  background: var(--amber-tint);
  border: 1px solid rgba(242, 169, 0, 0.35);
  border-radius: var(--r-comp);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}

.td-streak p {
  margin: 0;
}

/* --- panels --- */
.td-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-comp);
  padding: var(--s4);
  margin-bottom: var(--s4);
  box-shadow: var(--shadow-sm);
}

.td-section-title {
  font-size: 17px;
  margin: 0 0 var(--s3) 0;
}

/* --- SVG charts --- */
.td-svg {
  width: 100%;
  height: auto;
  display: block;
}

.td-bar-done { fill: var(--teal); }
.td-bar-empty { fill: var(--divider); }
.td-bar-total { fill: var(--divider); }

.td-chart-num {
  fill: var(--ink);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.td-chart-label {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.td-legend {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
}

.td-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.td-swatch-done { background: var(--teal); }
.td-swatch-total { background: var(--divider); }

/* --- lists --- */
.td-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.td-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--divider);
}

.td-row:last-child {
  border-bottom: none;
}

.td-row-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-row-note {
  flex: 0 0 auto;
  margin: 0;
}

/* --- deferral budget meter --- */
.td-meter-track {
  height: 10px;
  border-radius: 999px;
  background: var(--divider);
  overflow: hidden;
  margin-bottom: var(--s2);
}

.td-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--teal);
  transition: width var(--motion-med) var(--ease-out);
}

.td-meter-fill.td-meter-over {
  background: #D94A3D;
}

.td-meter-line {
  margin: 0 0 var(--s1) 0;
}

.td-warning {
  color: #B3261E;
  font-weight: 600;
  margin: 0;
}

/* --- action rows --- */
.td-actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}

/* --- review prompts --- */
.td-prompt {
  margin-bottom: var(--s4);
}

.td-prompt-q {
  display: block;
  font-weight: 600;
  margin-bottom: var(--s2);
}

.td-prompt textarea {
  width: 100%;
  resize: vertical;
  min-height: 56px;
}

/* --- history --- */
.td-filter-chips {
  margin-bottom: var(--s3);
}

.td-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.td-history-row {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--divider);
}

.td-history-row:last-child {
  border-bottom: none;
}

.td-history-row .t-body {
  margin: 0 0 var(--s1) 0;
}

.td-history-row .t-meta {
  margin: 0;
}

/* --- undo button row --- */
.td-undo-row {
  display: flex;
  gap: var(--s3);
  align-items: center;
  margin-bottom: var(--s2);
}

.td-caption {
  margin: 0;
}

/* --- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .td-meter-fill {
    transition: none;
  }
}