/* ============ homepage: summary, utilities, category grid ============ */

.summary{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  box-shadow:var(--shadow); padding:11px 16px; margin-bottom:12px;
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
}
.stat{
  font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;
}
.stat b{font-family:var(--display); font-size:16px; font-weight:700; color:var(--ink)}
.stat.done{color:var(--done-text)} .stat.prog{color:var(--prog-text)}
.stat.done b, .stat.prog b{color:inherit}
.overall{display:flex; align-items:center; gap:10px; flex:1 1 180px; min-width:160px; justify-content:flex-end}
.pct{font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.02em}
.overall .bar-track{flex:0 1 220px}

.utils{
  display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:18px;
}
.utils .spacer{flex:1}

/* ---------- category cards ---------- */
.cat-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(290px,100%), 1fr));
  gap:14px; margin-bottom:8px;
}
.cat-card{
  display:flex; flex-direction:column; gap:7px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:14px;
  box-shadow:var(--shadow); padding:18px 18px 16px; min-width:0;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.cat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--accent)}
.cat-card:hover .cc-cta{color:var(--accent-ink)}
.cc-head{display:flex; justify-content:space-between; align-items:center}
.cc-icon{
  width:40px; height:40px; display:grid; place-items:center; font-size:20px;
  background:var(--accent-soft); color:var(--accent-ink); border-radius:10px;
}
.cc-pct{font-family:var(--display); font-size:18px; font-weight:700; color:var(--accent-ink); letter-spacing:-.02em}
.cc-name{font-family:var(--display); font-size:16.5px; font-weight:700; letter-spacing:-.015em; color:var(--ink); margin-top:3px}
.cc-desc{font-size:12.5px; color:var(--muted); line-height:1.4}
.cc-counts{font-family:var(--mono); font-size:11px; color:var(--ink2); margin-top:4px}
.cc-counts b{font-family:var(--display); font-size:13px; font-weight:700; color:var(--ink)}
.cc-status{display:flex; gap:12px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px}
.cs.done{color:var(--done-text)} .cs.prog{color:var(--prog-text)} .cs.todo{color:var(--muted)}
.cat-card .bar-track{margin-top:5px}
.cc-cta{
  font-family:var(--mono); font-size:11px; font-weight:600; color:var(--muted);
  margin-top:8px; transition:color .15s;
}

@media (max-width:640px){
  .overall{justify-content:flex-start}
  .cat-grid{gap:10px}
  .cat-card{padding:15px 15px 13px}
}