/* Goal-style summary tiles, limited to the History screen. */
#history .history-summary .metric {
  min-width: 0;
  min-height: 82px;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

#history .history-summary .income-metric,
#history .history-summary .expense-metric,
#history .history-summary .net-metric { color: var(--ink); }

#history .history-summary .metric-icon {
  display: grid;
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
}

#history .history-summary .income-metric .metric-icon { color: var(--income); background: var(--success-soft); }
#history .history-summary .expense-metric .metric-icon { color: var(--expense); background: var(--expense-soft); }
#history .history-summary .net-metric .metric-icon { color: var(--brand); background: var(--brand-soft); }
#history .history-summary .metric-icon svg { width: 20px; height: 20px; }
#history .history-summary .metric-label { min-height: 0; color: var(--muted); font-size: 10px; line-height: 1.1; }
#history .history-summary .metric strong { color: var(--ink); font-size: clamp(12px, 3vw, 15px); line-height: 1.15; }

@media (max-width: 760px) {
  #history .history-summary .metric {
    min-height: 78px;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 8px;
    padding: 9px;
  }
  #history .history-summary .metric-icon { display: grid; width: 30px; height: 30px; }
  #history .history-summary .metric-icon svg { width: 16px; height: 16px; }
  #history .history-summary .metric-label { min-height: 0; font-size: 8.8px; }
  #history .history-summary .metric strong { font-size: clamp(10px, 2.8vw, 12px); }
}