.summary-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  padding:12px;
  }

.summary-card {
  background:var(--surface);
  border-radius:20px;
  padding:20px;
  border:1px solid var(--border);
  text-align: centre;
  max-height:45vh;
  overflow:hidden;
  display: flex;
  flex-direction: column;
  }

.summary-wide {
  grid-column:span 2;
  }
}

.summary-card h2 {
  margin-top:0;
  margin-bottom:20px;
  color:var(--text-inverse);
  text-align:center;
  font-size:clamp(24px, 4vw, 36px);
}

.chart-container {
  flex: 1;
  min-height: 0;
  width: 100%;
  aspect-ratio: 2 / 1;
}
.chart-container canvas {
  width:100% !important;
  height:100% !important;
}

.summary-card table {
  width:100%;
  font-size:clamp(18px, 3vw, 28px);
  border-collapse:collapse;
}

.summary-card th {
  text-align:center;
  font-weight:bold;
  padding:12px 8px;
}

.summary-card td {
  text-align:center;
  padding:12px 8px;
}

@media(max-width:600px){
  .summary-grid {
    grid-template-columns:1fr;
    }
  .summary-wide {
    grid-column:span 1;
    }
  }