/* Стили задачи о двух детях (общие — в ../style.css) */

:root {
  --gray: #8a8984;
  --gray-bg: #efeee9;
  --green: #2f7a1f;
  --green-bg: #e3f1d6;
  --red: #b42d2d;
  --red-bg: #fbe3e3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gray: #a3a29b;
    --gray-bg: #333331;
    --green: #9cd474;
    --green-bg: #26391b;
    --red: #f09595;
    --red-bg: #4a1f1f;
  }
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
table { width: 100%; border-collapse: collapse; font-size: 15px; }
td { padding: 3px 0; }
td:nth-child(2), td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
td:nth-child(3) { color: var(--muted); width: 70px; }
tr.total td { border-top: 1px solid var(--border); padding-top: 6px; font-weight: 600; }

.result .big { font-size: 40px; font-weight: 600; font-variant-numeric: tabular-nums; }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.dot.gray { background: var(--gray); }
.dot.green { background: var(--green); }
.dot.red { background: var(--red); }

#list {
  list-style-position: inside;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
#list li {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 14px;
}
#list li.mm { background: var(--gray-bg); color: var(--gray); }
#list li.mix { background: var(--green-bg); color: var(--green); }
#list li.dd { background: var(--red-bg); color: var(--red); }
#list li.no { opacity: .45; text-decoration: line-through; }