/* Tattoo Healing Tracker — its own styles (the shared ones are core/tools.css). Scoped .chqt-heal*, .chqt-doc. */
.chqt-heal-quick { margin-top: 8px; }
.chqt-heal-quick button { padding: 8px 12px; }
/* the six stages: a line of steps — done, now (with how far into it), to come */
.chqt-heal-stages {
  list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
}
.chqt-heal-stages li {
  background: #fff; border: 1px solid var(--chqt-line); border-radius: 10px; padding: 7px 8px 8px; line-height: 1.25; min-width: 0;
}
.chqt-heal-stages small { display: block; font-size: 12.5px; color: var(--chqt-muted); }
.chqt-heal-stages b { display: block; font-size: 14.5px; color: var(--chqt-ink); }
.chqt-heal-stages li.is-done { background: var(--chqt-cream); opacity: .75; }
.chqt-heal-stages li.is-done b::after { content: " ✓"; color: var(--chqt-accent); }
.chqt-heal-stages li.is-now { border-color: var(--chqt-accent); box-shadow: inset 0 0 0 1.5px var(--chqt-accent); }
.chqt-heal-bar { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--chqt-line); overflow: hidden; }
.chqt-heal-bar span { display: block; height: 100%; background: var(--chqt-accent); }
@media (min-width: 700px) { .chqt-heal-stages { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.chqt-heal-h { margin: 14px 0 4px; font-weight: 700; color: var(--chqt-ink); }
/* "See a doctor if…": folded, with a thumb-sized summary */
.chqt-doc { background: #fff; border: 1px solid var(--chqt-line); border-radius: 12px; padding: 0 12px; margin-top: 12px; }
.chqt-doc summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; color: var(--chqt-ink); }
.chqt-doc[open] { padding-bottom: 12px; }
.chqt-doc .chqt-note { margin-top: 8px; font-size: 14.5px; }