/*
  Dashboard-only pieces. Everything else on dashboard.html reuses style.css
  (.page-intro, .content-block, .tool-grid, .tool-card, .stat-card, .button).
*/

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

/*
  .stat-card and its children are styled in style.css for the landing page's
  hero panel, which is ink-coloured — pale cream label on dark, yellow value on
  dark. Standing on their own here they need the light-background treatment,
  or the labels wash out to nearly invisible.
*/
.dashboard-stats .stat-card {
  padding: 20px;
  border: 3px solid var(--border);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.dashboard-stats .stat-value {
  font-size: 1.9rem;
  color: var(--ink);
}

.dashboard-stats .stat-label {
  color: var(--muted);
}

/* Three sections, so the grid goes 3-up instead of style.css's fixed 2. */
.dashboard-sections {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.continue-card {
  border: 3px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 26px;
  background: var(--yellow-soft);
}

.continue-card h3 {
  margin: 0 0 10px;
  font-family: "Bungee", sans-serif;
  font-size: 1.2rem;
}

.continue-card p {
  margin: 0 0 20px;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* The card is a flow container, so the button needs to stop being full width. */
.continue-card .button {
  display: inline-flex;
}